Scribd
Upload
3 views2 pages

JavaScript Fundamentals Guide

The document outlines essential programming concepts including variables, data types, functions, and control structures. It covers DOM manipulation, event handling, array and object methods, local storage, and advanced JavaScript features like destructuring and the spread/rest operator. Each section provides code examples to illustrate the concepts effectively.

Uploaded by

chukwuemekadavid2007
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
3 views2 pages

JavaScript Fundamentals Guide

The document outlines essential programming concepts including variables, data types, functions, and control structures. It covers DOM manipulation, event handling, array and object methods, local storage, and advanced JavaScript features like destructuring and the spread/rest operator. Each section provides code examples to illustrate the concepts effectively.

Uploaded by

chukwuemekadavid2007
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

LEVEL 1: BASICS YOU MUST MASTER

Variables:
let name = "David"; // changeable
const age = 18; // fixed value

Data Types:
- String -> "hello"
- Number -> 21
- Boolean -> true / false
- Array -> ["red", "blue"]
- Object -> { name: "David", age: 18 }

Functions:
function greet(name) {
return "Hello " + name;
}

// Arrow version
const greet = (name) => "Hello " + name;

If/else:
if (age >= 18) {
[Link]("You're an adult");
} else {
[Link]("Too young");
}

Loops:
for (let i = 0; i < 5; i++) {
[Link](i);
}

let colors = ["red", "blue"];


[Link]((color) => [Link](color));

LEVEL 2: DOM & EVENTS


Selecting:
let btn = [Link]("#click-me");

Changing content:
[Link] = "Clicked!";

Adding events:
[Link]("click", () => {
alert("Button clicked!");
});

Changing classes/styles:
[Link]("active");
[Link] = "red";

LEVEL 3: ARRAYS & OBJECTS


Useful array methods:
let nums = [1, 2, 3, 4];

[Link](n => n * 2); // [2, 4, 6, 8]


[Link](n => n > 2); // [3, 4]
[Link]((a, b) => a + b); // 10

Looping through objects:


let user = { name: "David", age: 18 };

for (let key in user) {


[Link](key, user[key]);
}

LEVEL 4: LOCAL STORAGE


[Link]("theme", "dark");

let theme = [Link]("theme");

[Link]("theme");

LEVEL 5: LOGIC YOU'LL NEED FOR REACT


Destructuring:
let person = { name: "David", age: 18 };
let { name, age } = person;

Spread/rest:
let nums = [1, 2, 3];
let newNums = [...nums, 4]; // [1, 2, 3, 4]

function sum(...numbers) {
return [Link]((a, b) => a + b);
}

You might also like