Scripting is the process of writing small programs (scripts) that automate tasks or control
other programs. Scripts are usually interpreted rather than compiled, meaning they execute
directly without needing a separate compilation step.
Types of Scripting
1. Client-Side Scripting
Runs on the user's web browser.
Improves user interaction and page responsiveness.
Example languages: JavaScript, HTML, CSS
2. Server-Side Scripting
Runs on the web server before sending data to the client.
Processes requests, interacts with databases, and generates dynamic content.
Example languages: PHP, Python, Node.js, ASP.NET
JavaScript
JavaScript is a high-level, interpreted programming language primarily used for adding
interactivity and dynamic behaviour to web pages. It is one of the core technologies of the
web, alongside HTML (for structure) and CSS (for styling).
Need for Client-Side Scripting
Client-side scripting refers to scripts that run in a user's web browser rather than on a web
server. The primary reasons for using client-side scripting include:
Faster Execution: Reduces server load and improves response time.
Enhanced User Experience: Allows real-time interactivity, such as form validation
and dynamic content updates.
Reduced Server Load: Simple tasks like form validation and animations are handled
without server requests.
Rich Web Applications: Enables the creation of interactive elements such as
animations, dropdown menus, and real-time updates.
Improved Responsiveness: Pages respond instantly to user interactions without
reloading.
Use of JavaScript in HTML
JavaScript is a scripting language used to add interactivity to HTML pages. It can be
embedded in HTML in the following ways:
a) Inline JavaScript
Directly placed within an HTML tag using the onclick, onmouseover, etc.
<button onclick="alert('Hello!')">Click Me</button>
b) Internal JavaScript
Defined inside the <script> tag within the HTML file.
<!DOCTYPE html>
<html>
<head>
<script>
function showMessage() {
alert("Welcome to JavaScript!");
}
</script>
</head>
<body>
<button onclick="showMessage()">Click Me</button>
</body>
</html>
c) External JavaScript
Stored in a separate .js file and linked to HTML using <script> tag.
<script src="script.js"></script>
Example (script.js file):
function greet() {
alert("Hello from an external file!");
}
NOTE:
1. Developers use console.log() for logging useful info.
2. document.write modifies what user sees in the browser by adding
additional content to DOM.
3. Alerts are used to alert end users who access the web page.
Programming Elements in JavaScript
1. Variables in JavaScript
Variables are used to store data. JavaScript provides three ways to declare variables:
var (function-scoped, can be re-declared)
let (block-scoped, cannot be re-declared)
const (constant value, cannot be changed)
Example:
var name = "John"; // Global variable
let age = 25; // Block-scoped variable
const pi = 3.14; // Constant variable
2. Data Types in JavaScript
JavaScript has primitive and non-primitive (reference) data types.
Primitive Data Types (Stored by value)
String: "Hello"
Number: 25, 3.14
Boolean: true, false
Undefined: Variable declared but not assigned a value
Null: Represents an empty value
Symbol (ES6): Unique identifiers
BigInt: Used for very large integers
let name = "Alice"; // String
let age = 30; // Number
let isStudent = true; // Boolean
let score; // Undefined
let value = null; // Null
Non-Primitive (Reference) Data Types (Stored by reference)
Objects
Arrays
Functions
let person = {name: "John", age: 30}; // Object
let colors = ["Red", "Green", "Blue"]; // Array
function greet() { console.log("Hello!"); } // Function
3. Operators in JavaScript
Operators are used to perform operations on variables and values.
a) Arithmetic Operators
Used for mathematical calculations.
+ (Addition), - (Subtraction), * (Multiplication), / (Division), % (Modulus), ++ (Increment),
-- (Decrement)
let x = 10, y = 5;
console.log(x + y); // Output: 15
console.log(x % y); // Output: 0
b) Comparison Operators
Used to compare values.
== (Equal to), === (Strict equal), != (Not equal), <, >, <=, >=
console.log(10 == "10"); // true (compares value)
console.log(10 === "10"); // false (compares value & type)
c) Logical Operators
Used for logical conditions.
&& (AND), || (OR), ! (NOT)
let a = true, b = false;
console.log(a && b); // false
console.log(a || b); // true
console.log(!a); // false
d) Assignment Operators
Used to assign values.
=, +=, -=, *=, /=
let num = 10;
num += 5; // Equivalent to num = num + 5
console.log(num); // Output: 15
4. Control Statements
Control flow statements allow decision-making and loops.
Conditional Statements
Conditional statements execute different code blocks based on a given condition.
a) if Statement
Executes a block of code only if a condition is true.
let age = 18;
if (age >= 18) {
console.log("You are eligible to vote.");
}
b) if-else Statement
Executes one block if the condition is true, otherwise executes another block.
let marks = 45;
if (marks >= 50) {
console.log("Pass");
} else {
console.log("Fail");
}
c) if-else if-else Statement
Checks multiple conditions.
let score = 85;
if (score >= 90) {
console.log("Grade: A");
} else if (score >= 75) {
console.log("Grade: B");
} else {
console.log("Grade: C");
}
d) switch Statement
Used when multiple possible values exist for a variable.
let day = 3;
switch (day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
case 3:
console.log("Wednesday");
break;
default:
console.log("Invalid day");
}
✔ Break Statement: Prevents fall-through to the next case.
✔ Default Case: Executes if no match is found.
Looping Statements
Loops help in executing a block of code multiple times.
a) for Loop
Runs a block of code for a fixed number of times.
for (let i = 1; i <= 5; i++) {
console.log("Iteration: " + i);
}
b) while Loop
Executes as long as the condition is true.
let i = 1;
while (i <= 5) {
console.log("Number: " + i);
i++;
}
c) do-while Loop
Executes the block at least once, then checks the condition.
let j = 1;
do {
console.log("Iteration: " + j);
j++;
} while (j <= 5);
Jump Statements
a) break Statement
Stops the loop immediately.
for (let i = 1; i <= 10; i++) {
if (i === 5) {
break; // Stops at 5
}
console.log(i);
}
b) continue Statement
Skips the current iteration and moves to the next.
for (let i = 1; i <= 5; i++) {
if (i === 3) {
continue; // Skips 3
}
console.log(i);
}
5. Functions in JavaScript
Functions are reusable blocks of code.
a) Function Declaration
function greet(name) {
return "Hello, " + name;
}
console.log(greet("Alice"));
b) Function Call
let square = function(num) {
return num * num;
};
console.log(square(4)); // Output: 16
c) Arrow Functions (ES6)
const multiply = (a, b) => a * b;
console.log(multiply(2, 3)); // Output: 6
6. Objects in JavaScript
Objects store key-value pairs.
let person = {
name: "John",
age: 30,
greet: function() {
console.log("Hello " + this.name);
}
};
console.log(person.name); // Access property
person.greet(); // Call method
7. Arrays in JavaScript
Arrays store multiple values.
let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits[1]); // Output: Banana
fruits.push("Orange"); // Adds new element
console.log(fruits.length); // Output: 4
8. Events in JavaScript
Events allow user interaction.
<button onclick="sayHello()">Click Me</button>
<script>
function sayHello() {
alert("Hello, User!");
}
</script>
Using Event Listeners
document.getElementById("btn").addEventListener("click", function() {
alert("Button Clicked!");
});
Document Object Model (DOM)
The DOM represents the structure of an HTML document as a tree of objects, where each
element is a node.
a) Selecting Elements
document.getElementById("demo").innerHTML = "Hello!";
document.querySelector(".className").style.color = "red";
b) Modifying Elements
document.getElementById("demo").style.backgroundColor = "yellow";
c) Creating and Adding Elements
let para = document.createElement("p");
para.innerText = "This is a new paragraph.";
document.body.appendChild(para);
Event Handling in JavaScript
JavaScript can respond to user actions using event handlers.
a) Common Events
onclick - When an element is clicked
onmouseover - When the mouse hovers over an element
onkeyup - When a key is released
b) Adding Event Listeners
document.getElementById("btn").addEventListener("click", function() {
alert("Button clicked!");
});
Data Validation using JavaScript
JavaScript is used to validate user input before sending data to the server.
a) Checking Empty Fields
javascript
CopyEdit
function validateForm() {
let name = document.getElementById("name").value;
if (name == "") {
alert("Name cannot be empty!");
return false;
}
}
Password Strength Check
function checkPassword() {
let password = document.getElementById("password").value;
if (password.length < 8) {
alert("Password must be at least 8 characters long!");
return false;
}
}
Conclusion
JavaScript is a powerful client-side scripting language used to enhance web pages by adding
interactivity. By utilizing JavaScript for event handling, DOM manipulation, and data
validation, developers can create responsive and user-friendly web applications.
