JavaScript: Client side Vs. Server side

Client side programming includes any coding or computation or effects or animation or any sort of interaction your website performs with the user via browser . But server side programming is that which performs all the task in the server only . So the user is unaware of that. Few years ago JavaScript compilers were available only on the client machine (browsers). So java script was called as a client side scripting language. On the client side JavaScript is run by v8 engine (Google chrome). But now in the server side also JavaScript is used. The v8 engine (with some modifications to provide the server functionality) is also used in the servers to run js codes. So, in both cases the language is the same, only the environment is different.

Client-side JavaScript

Client-side JavaScript refers to JavaScript code that is executed on the user's web browser. It's used to enhance the functionality and interactivity of web pages without requiring communication with the server. Common uses of client-side JavaScript include form validation, dynamic content updates, and user interface enhancements.

<!DOCTYPE html> <html> <head> <title>Client-side JavaScript Example</title> <script> function greet() { var name = prompt("Enter your name:"); alert("Hello, " + name + "!"); } </script> </head> <body> <button onclick="greet()">Click me</button> </body> </html>

In this example, when the "Click me" button is clicked, the client-side JavaScript code prompts the user for their name and displays a greeting using an alert box, all within the user's browser.

Server-side JavaScript

Server-side JavaScript refers to JavaScript code that is executed on the server, usually in response to HTTP requests. It's used to generate dynamic content, handle data processing, and interact with databases. Server-side JavaScript is often used in conjunction with server-side frameworks and technologies like Node.js to build web applications and APIs.

Example (Node.js):
const http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello from the server!'); }).listen(8080);

In this Node.js example, server-side JavaScript code creates a simple HTTP server that responds with "Hello from the server!" when a request is made to the specified port.

Client side Vs. Server side

Location of Execution

  1. Client-side JavaScript runs in the user's web browser.
  2. Server-side JavaScript runs on the web server.

Purpose

  1. Client-side JavaScript enhances user interactivity and experience within the browser.
  2. Server-side JavaScript is used to generate dynamic content, process data, and handle server-side tasks.

Access to Resources

  1. Client-side JavaScript has access to the browser's Document Object Model (DOM) and can manipulate webpage content.
  2. Server-side JavaScript can access databases, file systems, and other server resources.

Communication

  1. Client-side JavaScript communicates with the server via AJAX requests or by loading new pages.
  2. Server-side JavaScript processes client requests and sends responses back to the client.

Conclusion

Client-side JavaScript focuses on enhancing the user experience within the browser, while server-side JavaScript is used to manage server-related tasks and generate dynamic content on the server before sending it to the client.






Related Topics
  1. JavaScript Interview Questions (Part2)
  2. JavaScript Interview Questions (Part3)
  3. Is JavaScript a true OOP language?
  4. Advantages and Disadvantages of JavaScript
  1. Difference Between JavaScript and ECMAScript?
  2. What is noscript tag?
  3. Escaping Special Characters in JavaScript
  4. What is undefined x 1 in JavaScript?
  5. Logical operators in JavaScript
  6. Difference between '=', '==' and '===' operators in JS
  7. How to loop through objects in JavaScript?
  8. How to write html code dynamically using JavaScript?
  9. How to add html elements dynamically with JavaScript?
  10. How to load another html page from javascript?
  11. What Is The Disadvantages Using InnerHTML In JavaScript?
  12. What is Browser Object Model
  13. How to detect the OS on the client machine in JavaScript?
  14. Difference between window, document, and screen in Javascript?
  15. Difference between the substr() and substring() in JavaScript?
  16. How to replace all occurrences of a string in JavaScript?
  17. Test a string as a literal and as an object in JavaScript
  18. What is Associative Array in JavaScript
  19. What is an anonymous function in JavaScript?
  20. What is the use of 'bind' method in JavaScript?
  21. Pure functions Vs. Impure functions in javascript
  22. Is Javascript a Functional Programming Language?
  23. What's the Difference Between Class and Prototypal Inheritance?
  24. Javascript, Pass by Value or Pass by Reference?
  25. How to prevent modification of an object in Javascript?
  26. What is 'this' keyword in JavaScript?
  27. How Does Function Hoisting Work in JavaScript?
  28. What do mean by NULL in Javascript?
  29. What does the delete operator do in JavaScript?
  30. What is the Infinity property used for in Javascript?
  31. Event bubbling and Event Capturing in JavScript?
  32. What is "strict mode" and how is it used in JavaScript?
  33. What is the difference between call and apply in JavaScript
  34. Entire content of a JavaScript source file in a function block?
  35. What is an immediately-invoked function expression?
  36. What is escape & unescape String functions in JavaScript?
  37. Instanceof operator in JavaScript
  38. What Are RESTful (REpresentational State Transfer)Web Services?
  39. What is Unobtrusive JavaScript & Why it's Important?
  40. What Does JavaScript Void(0) Mean?
  41. What are JavaScript Cookies?
  42. TypeError: document.getelementbyid(...) is null
  43. Uncaught TypeError: Cannot read property of undefined In JavaScript
  44. Null and Undefined in JavaScript