Introduction to Client-side Scripting & JavaScript
1. Introduction to Client-Side Scripting
Client-side scripting refers to scripts (programs) that are executed on the user's computer
(the client-side) within a web browser, rather than on the server. It helps make websites
dynamic, interactive, and responsive.
When a web page is loaded, it may contain HTML (structure), CSS (style), and JavaScript
(behavior). The browser interprets and runs the JavaScript code after the page is loaded.
Role of Client-Side Scripts:
- To control the behavior of the web page.
- To respond immediately to user interactions.
- To reduce the load on the server.
Common Client-Side Scripting Languages: JavaScript (most used), VBScript, TypeScript,
CoffeeScript.
Difference Between Client-side and Server-side Scripting
Feature Client-side Scripting Server-side Scripting
Execution Runs in the web browser Runs on the web server
Language Examples JavaScript, VBScript PHP, Python, [Link],
[Link]
Purpose Interface interaction, Database operations,
validation authentication
Performance Faster (no server round Depends on server
trip) response
Security Less secure (visible to user) More secure (hidden from
user)
2. What Can JavaScript Do?
JavaScript is the main client-side scripting language of the web. It is used to make web pages
interactive, dynamic, and intelligent.
• Manipulate HTML and CSS dynamically.
• Respond to user actions (clicks, mouse movements, key presses).
• Validate form inputs before submission.
• Create animations, image sliders, and games.
• Communicate with servers using AJAX or Fetch API.
• Work with browser storage: cookies, LocalStorage, SessionStorage.
• Control multimedia (videos and audio files).
3. Need for JavaScript
JavaScript plays a crucial role in modern web development. Here are the main reasons for
its use:
Interactivity: Makes static web pages dynamic and engaging.
Validation: Verifies user input before sending to the server.
Speed and Efficiency: Runs directly in the browser, reducing server load.
Enhanced User Experience (UX): Improves visual appeal and usability.
Integration: Works seamlessly with HTML and CSS.
Platform Independence: Runs on any browser or operating system.
Asynchronous Communication: Uses AJAX and Fetch API for data exchange without
reloading.
4. Enhancing HTML Documents with JavaScript
JavaScript enhances static HTML pages by adding dynamic behavior and interactivity.
Ways to Include JavaScript
• Inline Script:
<button onclick="alert('Hello!')">Click Me</button>
• Internal Script:
<script>
[Link]("Welcome to JavaScript!");
</script>
• External Script:
<script src="[Link]"></script>
DOM Manipulation Example
<p id="text">Click the button to change this text.</p>
<button onclick="[Link]('text').innerHTML='Text Changed!'">Click
Me</button>
Event Handling Example
<button id="btn" onclick="alert('Button clicked!')">Click</button>
5. Summary
• Client-side scripting runs in the browser, not the server.
• JavaScript adds interactivity, validation, and dynamic behavior.
• JavaScript improves user experience and speed.
• Enhancing HTML is done via inline, internal, or external scripts.
• Core abilities include DOM manipulation and event handling.
6. Example: Putting It All Together
Example Code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script>
function changeContent() {
[Link]("message").innerHTML = "Welcome to Client-side Scripting!";
[Link] = "lightyellow";
}
</script>
</head>
<body>
<h2 id="message">Hello User!</h2>
<button onclick="changeContent()">Click Me</button>
</body>
</html>
Explanation: When the user clicks the button, the text and background color of the page
change — demonstrating how JavaScript enhances HTML dynamically.