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

JavaScript Noted

This document provides comprehensive notes on JavaScript, covering essential topics for beginners and intermediate learners, including basics, data types, control flow, functions, objects, DOM manipulation, ES6+ features, and asynchronous programming. It emphasizes the versatility of JavaScript in creating dynamic web pages and the importance of mastering core concepts to unlock advanced capabilities. Key features such as error handling and modern syntax are also highlighted to enhance code readability and functionality.

Uploaded by

Michael Angachaab
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

JavaScript Noted

This document provides comprehensive notes on JavaScript, covering essential topics for beginners and intermediate learners, including basics, data types, control flow, functions, objects, DOM manipulation, ES6+ features, and asynchronous programming. It emphasizes the versatility of JavaScript in creating dynamic web pages and the importance of mastering core concepts to unlock advanced capabilities. Key features such as error handling and modern syntax are also highlighted to enhance code readability and functionality.

Uploaded by

Michael Angachaab
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

A comprehensive set of notes on JavaScript, covering the essentials for both beginners and

intermediate learners. We'll break it down into several key sections: Basics, Data Types,
Control Flow, Functions, Objects, DOM Manipulation, ES6+ Features, and Asynchronous
JavaScript.

1. Basics
What is JavaScript?

 A scripting language used to create dynamic web pages.


 Can run both on the client-side (in browsers) and server-side
(using Node.js).
 Interacts with HTML and CSS to build interactive websites.

Embedding JavaScript

 Inline: <script>console.log("Hello, World!");</script>


 External:
 <script src="script.js"></script>

Comments

 Single-line: // This is a comment


 Multi-line:
 /*
 This is a
 multi-line comment
 */

2. Data Types
Primitive Types

1. String: "Hello"
2. Number: 42, 3.14
3. Boolean: true, false
4. Undefined: A variable declared but not assigned.
5. Null: Intentional absence of value.
6. Symbol: Unique and immutable value (rarely used).
7. BigInt: For integers larger than 2^53 - 1.
Non-Primitive Types

 Object: { name: "Alice", age: 25 }


 Array: [1, 2, 3, 4]

Type Checking

 typeof operator:
 console.log(typeof "Hello"); // string
 console.log(typeof 42); // number

3. Variables
Declaration Keywords

 var: Function-scoped, can be redeclared.


 let: Block-scoped, cannot be redeclared.
 const: Block-scoped, must be initialized, immutable reference.

Examples
var a = 10;
let b = 20;
const PI = 3.14;

4. Operators
Arithmetic Operators

 +, -, *, /, % (modulus), ** (exponentiation).

Comparison Operators

 == (loose equality), === (strict equality), !=, !==, >, <, >=, <=.

Logical Operators

 && (AND), || (OR), ! (NOT).

Assignment Operators

 =, +=, -=, *=, /=, %=.


5. Control Flow
Conditional Statements

 if-else
 if (x > 10) {
 console.log("Greater");
 } else {
 console.log("Smaller or equal");
 }

 switch-case
 switch (day) {
 case 1:
 console.log("Monday");
 break;
 default:
 console.log("Other day");
 }

Loops

 for
 for (let i = 0; i < 5; i++) {
 console.log(i);
 }

 while
 let i = 0;
 while (i < 5) {
 console.log(i);
 i++;
 }

 do-while
 let j = 0;
 do {
 console.log(j);
 j++;
 } while (j < 5);

6. Functions
Function Declaration
function add(a, b) {
return a + b;
}
Function Expression
const multiply = function(a, b) {
return a * b;
};

Arrow Functions
const divide = (a, b) => a / b;

Default Parameters
function greet(name = "Guest") {
console.log("Hello, " + name);
}

7. Objects
Creating Objects
const person = {
name: "Alice",
age: 25,
greet() {
console.log("Hello, " + this.name);
},
};

Accessing Properties

 Dot notation: person.name


 Bracket notation: person["age"]

8. Arrays
Creating Arrays
const fruits = ["Apple", "Banana", "Mango"];

Array Methods

 .push(), .pop(), .shift(), .unshift()


 .map(), .filter(), .reduce()
 .forEach()
9. DOM Manipulation
Selecting Elements
const title = document.getElementById("title");
const items = document.querySelectorAll(".item");

Modifying Content
title.textContent = "New Title";

Event Handling
button.addEventListener("click", () => {
alert("Button clicked!");
});

10. ES6+ Features


Template Literals
const name = "Alice";
console.log(`Hello, ${name}!`);

Destructuring
const [a, b] = [1, 2];
const { name, age } = person;

Spread and Rest Operators


const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];

function sum(...numbers) {
return numbers.reduce((acc, num) => acc + num);
}

Classes
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a sound.`);
}
}

11. Asynchronous JavaScript


Callbacks
setTimeout(() => console.log("Executed after 2 seconds"), 2000);
Promises
let promise = new Promise((resolve, reject) => {
if (success) resolve("Success!");
else reject("Failure!");
});

Async/Await
async function fetchData() {
const response = await fetch("https://api.example.com");
const data = await response.json();
console.log(data);
}

12. Error Handling


try-catch
try {
let result = riskyFunction();
} catch (error) {
console.log("Error:", error.message);
}

Summary
 JavaScript is versatile with a range of features for building dynamic
web pages.
 Understanding the basics, data types, and control flow is essential.
 Mastering functions, objects, and asynchronous programming
unlocks advanced capabilities.
 ES6+ features streamline code and enhance readability.

You might also like