Unit 3: JavaScript
Faculty Name:
Vartika Jain
Assistant Professor
CSE Department
Introduction to JavaScript
• High-level, interpreted programming language
primarily used for creating interactive effects
within web browsers
• Key features:
- Dynamic typing (variables can hold any type)
- Event-driven programming
- First-class functions
- Prototype-based object orientation
Uses:
• Manipulate HTML and CSS (DOM
manipulation)
• Validate form input
• Create interactive elements (animations,
sliders)
• Communicate asynchronously with servers
(AJAX)
Example
<html>
<body>
<h2>JavaScript</h2>
<p id="demo">JavaScript can change HTML
content.</p>
<button type="button"
onclick='[Link]("demo").inner
HTML = "Hello JavaScript!"'>Click Me!</button>
</body>
</html>
Documents (DOM Manipulation)
DOM represents the HTML document as a tree
structure where each node is an object representing
a part of the document.
JS can access and manipulate the DOM using:
• [Link](id)
• [Link](className)
• [Link](selector)
• [Link](tagName)
• [Link](node)
• [Link] to change content
Common use cases:
• Change text or styles dynamically
• Add or remove elements
• Respond to user actions (clicks, input)
Syntax:
[Link]('myDiv').innerHTML
= "Hello, World!";
Forms
• Check if required fields are filled.
• Validate email format, phone numbers, passwords.
• Prevent form submission on invalid data using
[Link]().
• Access form elements via:
- [Link]["formName"]["inputName"].value
- Or by id or name attributes.
Example of simple validation:
function validateForm() {
let x =
[Link]["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
Statements
• Statements are instructions executed by the
JavaScript engine.
• Types:
-Expression statements: Evaluate expressions
(e.g., assignments, function calls).
-Declaration statements: Declare variables,
functions, or classes.
-Control flow statements: if, else, switch, for,
while, do-while, break, continue.
-Block statement: { ... } groups multiple
statements.
Example:
let age = 25;
if (age >= 18) {
[Link]("Adult");
} else {
[Link]("Minor");
}
Functions
• Functions are blocks of code designed to
perform a particular task and can be reused.
• Functions can be:
-Named functions
-Anonymous functions (assigned to variables)
-Arrow functions (ES6:ECMAScript 6)
• Parameters can have default values.
• Functions support closures (access variables
from outer scopes).
Examples:
1) function add(a, b) {
return a + b;
}
let sum = add(5, 10);
2) const myFunction = function() {
[Link]("anonymous function!");
};
myFunction(); // Output: anonymous function!
3) const add = (a, b) => a + b;
[Link](add(5, 3)); // Output: 8
Objects
• An object is a collection of key-value pairs
(called properties).
• It allows you to group related data and
functionality (methods) together.
• Objects are one of the core building blocks in
JavaScript.
Creating Objects
• Syntax:
const person = {
name: "Alice",
age: 30,
greet: function() {
[Link]("Hello!");
}
};
AJAX(Asynchronous JavaScript and XML)
• A set of web development techniques used to
create asynchronous web applications.
• AJAX allows web pages to send and receive
data from a server asynchronously, without
reloading the entire page.
• Improves user experience and page
responsiveness
Components of AJAX
• HTML/XHTML – Page structure
• CSS – Styling
• JavaScript – Dynamic behavior
• DOM – Manipulating webpage elements
• XMLHttpRequest – Server communication
• XML/JSON – Data format
Step-by-Step Process of AJAX
1. Event Occurs (e.g., button click, keypress)
2. JavaScript creates an XMLHttpRequest object.
3. The XHR object sends a request to the server
(e.g., via GET or POST).
4. The server processes the request (possibly
querying a database).
5. The server sends a response (in XML, JSON,
HTML, etc.).
6. JavaScript processes the response.
7. JavaScript updates the web page content
dynamically (via DOM manipulation) without a
full reload.
AJAX Example (JavaScript)
let xhr = new XMLHttpRequest();
[Link]("GET", "[Link]", true);
[Link] = function() {
if ([Link] === 4 && [Link] === 200) {
[Link]("result").innerHTML =
[Link];
}
};
[Link]();