Scribd
Upload
4 views3 pages

Lecture JavaScript DOM and Basics

The document is a lecture on JavaScript covering core concepts and the Document Object Model (DOM). It includes sections on variables, data types, strings, arrays, objects, numbers, DOM access and manipulation, events, and practical examples. Additionally, it provides exercises for hands-on practice with JavaScript functionalities.

Uploaded by

flikzslayer
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
4 views3 pages

Lecture JavaScript DOM and Basics

The document is a lecture on JavaScript covering core concepts and the Document Object Model (DOM). It includes sections on variables, data types, strings, arrays, objects, numbers, DOM access and manipulation, events, and practical examples. Additionally, it provides exercises for hands-on practice with JavaScript functionalities.

Uploaded by

flikzslayer
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

Lecture: JavaScript DOM and Core Concepts

I. Introduction to JavaScript and DOM


■ JavaScript makes web pages dynamic by interacting with the Document Object Model (DOM).
■ The DOM represents HTML as a tree of nodes accessible by JavaScript.

II. Variables and Data Types


■ Use let, const, and var to declare variables.
let name = "Mike";
const PI = 3.14;
let active = true;
let scores = [90, 85, 88];
let user = {name:"Mike", age:21};

III. Strings
Method Example Description
length [Link] Returns length of string.
toUpperCase() [Link]() Converts to uppercase.
includes() [Link]('word') Checks if substring exists.
slice() [Link](0,4) Extracts substring.
split() [Link](' ') Splits into array.
trim() [Link]() Removes spaces.

IV. Arrays
Method Example Description
push() [Link](5) Add to end.
pop() [Link]() Remove last.
map() [Link](x=>x*2) Transform values.
filter() [Link](x=>x>5) Filter by condition.
reduce() [Link]((a,b)=>a+b) Combine values.
forEach() [Link](x=>[Link](x)) Loop through items.

V. Objects
let car = {brand:"BMW", model:"X5"};
[Link]; // Access
[Link](car); // Get keys
[Link](car); // Get values

VI. Numbers and Math


let n = 5.678;
[Link](2); // "5.68"
parseInt("12"); // 12
[Link](1,5,3); // 5
[Link](); // Random 0–1
VII. DOM Access
[Link]("id");
[Link](".class");
[Link]("div");

VIII. DOM Manipulation


[Link] = "Hello";
[Link] = "red";
[Link]("highlight");
[Link]("src","[Link]");
[Link]();

IX. Events and Listeners


[Link]("click", () => alert("Clicked!"));
[Link]("input", e => [Link]([Link]));
[Link]();

X. Examples
Example 1: Change color on click.
ClickText [Link]("btn").onclick = () => {
[Link]("msg").[Link] = "blue"; };
Example 2: Add list items and count.
Add let c=0; [Link]=()=>{ let li=[Link]("li");
[Link]="Item "+ ++c; [Link](li); [Link]="Total:
"+c; };

XI. Exercises
1. Build a counter app with increment/decrement.
2. Display all even numbers from an array in the DOM.
3. Make a color changer that randomizes background on click.
4. Create a form that shows entered info below on submit.

You might also like