1. Client-Side Scripting (15 hrs)
JavaScript: Introduction, Need of Client-Side Scripting Language, and Related Concepts
Introduction:
- JavaScript is a lightweight, interpreted, or just-in-time compiled programming language. It is primarily used for adding interactivity to web pages, enabling client-side scripting on the user's browser.
- JavaScript can manipulate the DOM (Document Object Model), handle events, validate forms, and create animations, among other things.
Need of Client-Side Scripting Language:
- Enhanced User Experience: Client-side scripting languages like JavaScript enable interactive web pages. For instance, you can modify the content of the webpage dynamically without needing to reload the page.
- Performance: By moving processing to the client (browser), JavaScript reduces server load and speeds up the response time of the application.
- Cross-Platform Compatibility: JavaScript runs on almost all browsers and platforms, providing universal compatibility.
- Asynchronous Operations: JavaScript can handle asynchronous operations (e.g., loading content in the background) using technologies like AJAX, which helps in creating dynamic and faster web applications.
Formatting and Coding Conventions:
Adhering to formatting and coding conventions ensures that the code is clean, readable, and maintainable. Some common conventions are:
- Indentation: Use consistent indentation (e.g., 2 spaces or 4 spaces per level) for better readability.
- Naming Conventions: Use camelCase for variable and function names (e.g.,
myFunction, userData).
- Comments: Use comments to describe your code for others and yourself.
JavaScript Files:
-
External JavaScript Files: To maintain clean code and improve performance, JavaScript is often written in external files and linked to HTML files using the <script> tag.
Example:
<script src="script.js"></script>
Comments in JavaScript:
- Single-line comments start with
//.
- Multi-line comments are enclosed between
/* and */.
// This is a single-line comment
/*
This is a
multi-line comment
*/
Embedding JavaScript in HTML:
JavaScript can be embedded directly within an HTML document using the <script> tag.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<h1>Welcome to JavaScript</h1>
<script>
alert("Hello, world!");
</script>
</body>
</html>
Using the <script> Tag:
- The
<script> tag is used to embed JavaScript code within an HTML document. It can be placed in the <head> or <body> section.
- JavaScript code in the
<head> is loaded before the body, while JavaScript in the <body> is executed after the content is loaded.
<script>
console.log("This is a message.");
</script>
NoScript Tag:
- The
<noscript> tag is used to provide alternative content for users who have JavaScript disabled in their browsers.
<noscript>
<p>Your browser does not support JavaScript or it is disabled.</p>
</noscript>
Operators in JavaScript:
Operators are symbols that perform operations on variables or values.
- Arithmetic Operators: Used to perform mathematical operations.
+ (addition), - (subtraction), * (multiplication), / (division), % (modulus)
let x = 10;
let y = 5;
console.log(x + y); // Output: 15
- Comparison Operators: Used to compare values.
== (equal to), != (not equal), > (greater than), < (less than), >= (greater than or equal to)
console.log(5 == 5); // true
console.log(5 != 10); // true
- Logical Operators: Used to combine conditions.
&& (AND), || (OR), ! (NOT)
let a = true, b = false;
console.log(a && b); // false
Control Structures in JavaScript:
Control structures dictate the flow of the program.
- If-Else Statement: A conditional structure that executes code based on a condition.
let age = 18;
if (age >= 18) {
console.log("Adult");
} else {
console.log("Minor");
}
- Switch-Case: A control structure that evaluates an expression and matches it with different cases.
let fruit = "apple";
switch (fruit) {
case "apple":
console.log("It's an apple.");
break;
case "banana":
console.log("It's a banana.");
break;
default:
console.log("Unknown fruit.");
}
- Loops (For, While, Do-While): Used for repeated execution.
// For loop
for (let i = 0; i < 5; i++) {
console.log(i); // Outputs numbers from 0 to 4
}
// While loop
let j = 0;
while (j < 5) {
console.log(j); // Outputs numbers from 0 to 4
j++;
}
Array and forEach Loop:
An array is a special variable that can store multiple values. JavaScript arrays are zero-indexed.
let fruits = ["apple", "banana", "orange"];
console.log(fruits[0]); // Outputs: apple
The forEach loop allows you to iterate through array elements.
fruits.forEach(function(fruit) {
console.log(fruit); // Outputs each fruit in the array
});
Defining and Invoking Functions:
Functions allow you to define reusable blocks of code.
// Function declaration
function greet(name) {
console.log("Hello, " + name);
}
// Function invocation
greet("Alice"); // Output: Hello, Alice
Built-in Objects in JavaScript:
JavaScript provides various built-in objects like Date, Math, and String to perform specific tasks.
- Date Object: Used to handle date and time.
let today = new Date();
console.log(today); // Outputs current date and time
- Math Object: Provides mathematical functions.
console.log(Math.random()); // Outputs a random number between 0 and 1
console.log(Math.max(1, 2, 3)); // Outputs 3
Date Objects in JavaScript:
The Date object is used to represent dates and times.
let currentDate = new Date();
console.log(currentDate.getFullYear()); // Outputs the current year
Interacting With the Browser:
JavaScript can interact with the browser using the window object and manipulate browser features.
// Alert box
window.alert("This is an alert");
// Prompt box to collect user input
let userInput = window.prompt("Enter your name:");
console.log(userInput); // Outputs the name entered by the user
Windows and Frames in JavaScript:
JavaScript allows interaction with browser windows and frames.
// Opening a new window
let newWindow = window.open("https://www.example.com", "exampleWindow", "width=600,height=400");
Document Object Model (DOM):
The DOM represents the structure of an HTML document as an object. JavaScript interacts with this structure, allowing you to manipulate HTML and CSS dynamically.
document.getElementById("header").innerHTML = "New Header Text"; // Changes the content of an element with id 'header'
Event Handling in JavaScript:
JavaScript can handle events like clicks, keypresses, and mouse movements.
<button onclick="changeText()">Click me</button>
<script>
function changeText() {
document.getElementById("header").innerHTML = "Button Clicked!";
}
</script>
Events can also be handled using Event Listeners:
document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});
Forms and Client-Side Validations:
Forms are essential for collecting user input. JavaScript can validate form fields before submitting them.
<form id="myForm">
<input type="text" id="name" placeholder="Enter your name" required>
<input type="submit" value="Submit">
</form>
<script>
document.getElementById("myForm").onsubmit = function() {
let name = document.getElementById("name").value;
if (name === "") {
alert("Name is required!");
return false; // Prevent form submission
}
};
</script>
Cookies in JavaScript:
Cookies are small pieces of data stored on the client-side. JavaScript can create, read, and delete cookies.
// Create a cookie
document.cookie = "username=John Doe; expires=Fri, 31 Dec 2025 23:59:59 GMT";
// Read cookies
Read more