javaScript & DOM
An introduction to JavaScript and how it interacts with the
Document Object Model (DOM) to create dynamic web pages.
What is JavaScript?
JavaScript is a high-level, dynamic programming language.
It allows developers to create interactive and responsive web pages.
Runs in the browser (client-side) and also on servers (Node.js).
Used for DOM manipulation, event handling, animations, APIs, and more.
JavaScript Features
Lightweight – Doesn't require compilation.
Interpreted – Runs line by line in the browser.
Dynamic Typing – No need to declare variable types.
Prototype-based Object Orientation – Uses objects for inheritance.
Event-driven & Asynchronous – Handles user actions and API calls.
JavaScript Basics - Variables & Data Types
Variables: Store values using var, let, or const.
Data Types:
● Primitive: String, Number, Boolean, Null, Undefined, Symbol
● Non-primitive: Object, Array, Function
let name = "John";
const age = 25;
let isStudent = true;
JavaScript Operators
Arithmetic Operators: +, -, *, /, %, **
Comparison Operators: ==, ===, !=, <, >
Logical Operators: &&, ||, !
let x = 10, y = 5;
console.log(x + y); // Output: 15
console.log(x > y); // Output: true
Conditional Statements
Used to execute code based on conditions.
let age = 20;
if (age >= 18) {
console.log("You can vote!");
} else {
console.log("You are underage.");
}
Loops in JavaScript
For Loop: Runs a block of code a set number of times.
While Loop: Runs until a condition becomes false.
Do-While Loop: Executes at least once before checking condition
for(let i = 1; i <= 5; i++) {
console.log("Number:", i);
}
Functions in JavaScript
Functions help organize code into reusable blocks.
function greet(name) {
return "Hello, " + name;
console.log(greet("Alice"));
Arrays & Objects
Arrays: Store multiple values.
Objects: Store key-value pairs.
let fruits = ["Apple", "Banana", "Cherry"];
let person = { name: "John", age: 30 };
What is the DOM?
● DOM (Document Object Model) is a tree-like structure of an HTML document.
● JavaScript interacts with the DOM to modify content dynamically.
Selecting Elements in DOM
● Use JavaScript methods to select elements:
● document.getElementById("heading");
● document.querySelector(".myClass");
Modifying HTML Content
● Change text using .innerHTML or .textContent
● document.getElementById("demo").innerHTML = "Hello, JavaScript!";
Changing CSS with JavaScript
● Modify styles dynamically.
● document.getElementById("box").style.backgroundColor = "blue";
Adding & Removing Elements
Use createElement() & appendChild() to add elements.
let newPara = document.createElement("p");
newPara.textContent = "New paragraph";
document.body.appendChild(newPara);
Handling Events in JavaScript
JavaScript can handle user actions like clicks.
document.getElementById("btn").addEventListener("click", function() {
alert("Button clicked!");
});
Simple Counter Example
let count = 0;
document.getElementById("increase").addEventListener("click", () => {
count++;
document.getElementById("counter").textContent = count;
});
