Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

java script dom

This document provides an introduction to JavaScript and its interaction with the Document Object Model (DOM) for creating dynamic web pages. It covers JavaScript features, basic syntax, operators, conditional statements, loops, functions, arrays, objects, and methods for manipulating the DOM. Additionally, it explains how to handle events and modify HTML and CSS using JavaScript.

Uploaded by

talharaja100
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

java script dom

This document provides an introduction to JavaScript and its interaction with the Document Object Model (DOM) for creating dynamic web pages. It covers JavaScript features, basic syntax, operators, conditional statements, loops, functions, arrays, objects, and methods for manipulating the DOM. Additionally, it explains how to handle events and modify HTML and CSS using JavaScript.

Uploaded by

talharaja100
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

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;

});

You might also like