1. Client-Side Scripting
What it means
- Client-side scripting refers to code that runs directly in the user’s browser rather than on a server.
- It is used to make web pages interactive, dynamic, and responsive without reloading the page.
Examples of client-side scripting languages
- JavaScript (most common)
- TypeScript (transpiles to JavaScript)
- VBScript (obsolete)
- Dart (via Flutter Web)
Where it runs
- Runs inside the web browser after the page is loaded.
- No need for server communication unless explicitly coded (like making an API call).
Advantages
- Fast: No need to wait for the server for every action.
- Interactive: Can change page content dynamically.
- Reduced server load: Many tasks happen on the client side.
Limitations
- Security risks: Code is visible to users (can’t hide sensitive logic).
- Browser dependency: Some features may work differently in different browsers.
- Can be disabled: If JavaScript is turned off, scripts won’t run.
Example of client-side scripting with JavaScript:
<!DOCTYPE html>
<html>
<body>
<h1>Click the Button</h1>
<button onclick="alert('Hello Sandip!')">Click Me</button>
</body>
</html>
- No server needed — all interaction is handled in the browser.
2. JavaScript Basics
JavaScript (JS) is the most popular client-side scripting language.
2.1 How to include JavaScript in HTML
Inline:
<button onclick="alert('Hello!')">Click</button>
Internal:
<script>
alert("Hello from internal script!");
</script>
External:
<script src="script.js"></script>
2.2 JavaScript Syntax Basics
Variables:
let name = "Sandip"; // Block scoped, preferred
const PI = 3.1416; // Constant value
var age = 23; // Function scoped (old style)
Data Types:
- String:
"Hello" - Number:
42 - Boolean:
true - Object:
{name: "Sandip", age: 23} - Array:
["HTML", "CSS", "JavaScript"] - Null:
null - Undefined:
undefined
Operators:
let sum = 5 + 3; // Addition
let compare = 5 > 3; // true
Conditionals:
if (age > 18) {
console.log("Adult");
} else {
console.log("Minor");
}
Loops:
for (let i = 0; i < 5; i++) {
console.log(i);
}
Functions:
function greet(name) {
return "Hello " + name;
}
console.log(greet("Sandip"));
3. JavaScript DOM (Document Object Model)
What is DOM?
- The DOM is a programming interface that represents the HTML document as a tree of objects.
- With JavaScript, you can access, modify, add, or remove HTML elements dynamically.
Example DOM Tree for:
<html>
<body>
<h1>Hello</h1>
</body>
</html>
Would look like:
Document
└── html
└── body
└── h1 ("Hello")
3.1 Selecting Elements
document.getElementById("myId");
document.getElementsByClassName("myClass");
document.getElementsByTagName("p");
document.querySelector("#myId");
document.querySelectorAll(".myClass");
3.2 Changing Content
document.getElementById("title").innerHTML = "New Title";
document.getElementById("title").textContent = "Plain Text Title";
3.3 Changing Attributes
document.getElementById("myImage").src = "newimage.jpg";
3.4 Changing Styles
tdocument.getElementById("title").style.color = "red";
3.5 Adding & Removing Elements
javascriptCopyEditlet para = document.createElement("p");
para.textContent = "This is a new paragraph";
document.body.appendChild(para);
document.getElementById("oldElement").remove();
3.6 Event Handling
document.getElementById("btn").addEventListener("click", function() {
alert("Button clicked!");
});
3.7 Example: Complete DOM Manipulation
<!DOCTYPE html>
<html>
<body>
<h1 id="title">Original Title</h1>
<button id="changeBtn">Change Title</button>
<script>
document.getElementById("changeBtn").addEventListener("click", function() {
document.getElementById("title").textContent = "Title Changed!";
document.getElementById("title").style.color = "blue";
});
</script>
</body>
</html>
- Clicking the button changes the text and color instantly — no page reload.
