1. JS Home
JavaScript is a versatile language used to create dynamic web content...
2. JS Introduction
JavaScript is a programming language that allows you to implement complex features on web pages...
3. JS Where To
JavaScript can be included in HTML using the <script> tag...
4. JS Output
The output of JavaScript code can be displayed using console.log()...
console.log("Hello World");
</script>
Output: Hello World
5. JS Statements
JavaScript statements are the building blocks of JavaScript programs...
6. JS Syntax
JavaScript syntax defines the set of rules that guide the structure of JavaScript code...
7. JS Comments
JavaScript comments help to explain the code and are ignored during execution...
/* This is a multi-line comment */
Output: Comments are ignored by the browser.
8. JS Variables
Variables are used to store data values...
let message = "Hello, JavaScript!";
console.log(message);
</script>
Output: Hello, JavaScript!
9. JS Let
let is used to declare variables that can be reassigned...
let x = 10;
x = 20;
console.log(x);
</script>
Output: 20
10. JS Const
const is used to declare constants that cannot be reassigned...
const PI = 3.14;
console.log(PI);
</script>
Output: 3.14
11. JS Operators
Operators are used to perform operations on variables and values...
12. JS Arithmetic
Arithmetic operators perform basic mathematical operations...
let result = 5 + 3;
console.log(result);
</script>
Output: 8
13. JS Assignment
Assignment operators assign values to variables...
14. JS Data Types
JavaScript has different data types like string, number, boolean, etc...
15. JS Functions
Functions are reusable blocks of code that can be called to execute...
16. JS Objects
Objects are collections of properties and methods...
17. JS Object Properties
Object properties are values associated with an object...
18. JS Object Methods
Object methods are functions that are associated with an object...
19. JS Object Display
You can display object properties using console.log()...
20. JS Object Constructors
Constructors are functions that are used to create and initialize objects...
21. JS Events
Events allow JavaScript to react to user interactions...
Output: An alert will pop up when the button is clicked.
22. JS Strings
Strings are used to store text values in JavaScript...
let text = "Hello, JavaScript!";
console.log(text);
</script>
Output: Hello, JavaScript!
23. JS String Methods
String methods are used to manipulate strings...
let text = "Hello, World!";
console.log(text.toUpperCase());
</script>
Output: HELLO, WORLD!
24. JS String Search
String search methods are used to find a substring within a string...
let text = "Hello, World!";
console.log(text.indexOf("World"));
</script>
Output: 7
25. JS String Templates
Template literals allow embedded expressions and multi-line strings...
let name = "JavaScript";
let text = `Welcome to ${name}!`;
console.log(text);
</script>
Output: Welcome to JavaScript!
26. JS Numbers
Numbers are used to represent numeric values...
let number = 42;
console.log(number);
</script>
Output: 42
27. JS BigInt
BigInt is used to handle large integers that are beyond the Number limit...
let bigInt = 1234567890123456789012345678901234567890n;
console.log(bigInt);
</script>
Output: 1234567890123456789012345678901234567890n
28. JS Number Methods
Number methods are used to work with numeric values...
let num = 4.7;
console.log(Math.round(num));
</script>
Output: 5
29. JS Number Properties
Number properties allow access to number-related constants...
console.log(Number.MAX_VALUE);
</script>
Output: 1.7976931348623157e+308
30. JS Arrays
Arrays are used to store multiple values in a single variable...
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits);
</script>
Output: ["Apple", "Banana", "Cherry"]
31. JS Array Methods
Array methods allow you to manipulate arrays...
let fruits = ["Apple", "Banana", "Cherry"];
fruits.push("Orange");
console.log(fruits);
</script>
Output: ["Apple", "Banana", "Cherry", "Orange"]
32. JS Array Search
Array search methods help you find elements in an array...
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits.indexOf("Banana"));
</script>
Output: 1
33. JS Array Sort
Array sort methods allow you to arrange elements in a specific order...
let fruits = ["Banana", "Apple", "Cherry"];
fruits.sort();
console.log(fruits);
</script>
Output: ["Apple", "Banana", "Cherry"]
34. JS Array Iteration
Array iteration methods allow you to loop over elements in an array...
let fruits = ["Apple", "Banana", "Cherry"];
fruits.forEach(function(fruit) {
console.log(fruit);
});
</script>
Output: Apple
Banana
Cherry
35. JS Array Const
Arrays declared with const cannot be reassigned, but their contents can be modified...
const fruits = ["Apple", "Banana", "Cherry"];
fruits[0] = "Orange";
console.log(fruits);
</script>
Output: ["Orange", "Banana", "Cherry"]
36. JS Dates
The Date object in JavaScript is used to handle dates and times...
let date = new Date();
console.log(date);
</script>
Output: Current date and time (depends on the system time)
37. JS Date Formats
JavaScript provides various ways to format dates...
let date = new Date();
console.log(date.toLocaleDateString());
</script>
Output: Date in local format (varies by system)
38. JS Date Get Methods
Get methods in JavaScript allow you to retrieve parts of a Date object...
let date = new Date();
console.log(date.getFullYear());
console.log(date.getMonth());
console.log(date.getDate());
</script>
Output: Current year, month, and date
39. JS Date Set Methods
Set methods allow you to modify a Date object in JavaScript...
let date = new Date();
date.setFullYear(2025);
console.log(date);
</script>
Output: Date with year set to 2025
40. JS Math
The Math object provides basic mathematical functionality...
console.log(Math.max(1, 2, 3));
console.log(Math.min(1, 2, 3));
</script>
Output: 3, 1
41. JS Random
The Math.random() method generates a random number between 0 and 1...
console.log(Math.random());
</script>
Output: A random decimal number between 0 and 1
42. JS Booleans
Booleans are used to represent truth values, either true or false...
let isTrue = true;
console.log(isTrue);
</script>
Output: true
43. JS Comparisons
Comparison operators are used to compare values...
console.log(5 == 5); // true
console.log(5 != 3); // true
</script>
Output: true, true
44. JS If Else
If...else statements are used for conditional execution...
let age = 18;
if (age >= 18) {
console.log("Adult");
} else {
console.log("Not Adult");
}
</script>
Output: Adult
45. JS Switch
Switch statements are used to execute one of many blocks of code...
let day = 2;
switch(day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
default:
console.log("Weekend");
}
</script>
Output: Tuesday
46. JS Loop For
The for loop is used to repeat a block of code a specified number of times...
for (let i = 0; i < 3; i++) {
console.log(i);
}
</script>
Output: 0, 1, 2
47. JS Loop For In
The for...in loop is used to iterate over the properties of an object...
let person = { name: "John", age: 30 };
for (let key in person) {
console.log(key + ": " + person[key]);
}
</script>
Output: name: John, age: 30
48. JS Loop For Of
The for...of loop is used to iterate over iterable objects like arrays...
let fruits = ["Apple", "Banana", "Cherry"];
for (let fruit of fruits) {
console.log(fruit);
}
</script>
Output: Apple, Banana, Cherry
49. JS Loop While
The while loop repeats a block of code as long as a specified condition is true...
let i = 0;
while (i < 3) {
console.log(i);
i++;
}
</script>
Output: 0, 1, 2
50. JS Break
The break statement is used to exit a loop or switch statement...
for (let i = 0; i < 5; i++) {
if (i == 3) break;
console.log(i);
}
</script>
Output: 0, 1, 2
51. JS Iterables
Iterables are objects that can be iterated over, like arrays...
let iterable = [1, 2, 3];
for (let value of iterable) {
console.log(value);
}
</script>
Output: 1, 2, 3
52. JS Sets
A set is a collection of unique values...
let set = new Set([1, 2, 3]);
set.add(4);
console.log(set);
</script>
Output: Set {1, 2, 3, 4}
53. JS Set Methods
Set methods allow us to add, remove, and check elements in a set...
let set = new Set([1, 2, 3]);
set.delete(2);
console.log(set.has(2));
</script>
Output: false
54. JS Maps
Maps are collections of key-value pairs...
let map = new Map();
map.set("name", "John");
console.log(map);
</script>
Output: Map {"name" => "John"}
55. JS Map Methods
Map methods provide functionality to manage key-value pairs...
let map = new Map();
map.set("name", "John");
map.delete("name");
console.log(map.has("name"));
</script>
Output: false
56. JS Typeof
The `typeof` operator is used to check the type of a variable...
let x = 10;
console.log(typeof x);
</script>
Output: number
57. JS Type Conversion
JavaScript automatically converts between different types, but you can also convert manually...
let num = "5";
console.log(Number(num)); // Converts to number
let str = 5;
console.log(String(str)); // Converts to string
</script>
Output: 5, "5"
58. JS Destructuring
Destructuring allows you to unpack values from arrays or objects into distinct variables...
let [a, b] = [1, 2];
console.log(a, b);
let person = { name: "John", age: 30 };
let { name, age } = person;
console.log(name, age);
</script>
Output: 1 2, John 30
59. JS Bitwise
Bitwise operators allow manipulation of individual bits of numbers...
console.log(5 & 1); // AND operation
console.log(5 | 1); // OR operation
</script>
Output: 1, 5
60. JS RegExp
Regular expressions are patterns used to match character combinations in strings...
let regex = /abc/;
console.log(regex.test("abcdef")); // true
console.log(regex.test("defabc")); // false
</script>
Output: true, false
61. JS Precedence
Operator precedence defines the order in which operators are evaluated...
console.log(5 + 2 * 3); // 11 (multiplication has higher precedence)
</script>
Output: 11
62. JS Errors
JavaScript has built-in error types that help handle exceptions in the code...
try {
let x = y + 1; // ReferenceError
} catch (e) {
console.log(e.message);
}
</script>
Output: y is not defined
63. JS Scope
Scope defines where variables are accessible within your code...
let x = 5;
function test() {
let y = 10;
console.log(x, y);
}
test();
</script>
Output: 5 10
64. JS Hoisting
Hoisting is JavaScript's default behavior of moving declarations to the top...
console.log(x); // undefined
var x = 5;
</script>
Output: undefined
65. JS Strict Mode
Strict mode is a way to opt into a restricted version of JavaScript...
"use strict";
let x = 5;
console.log(x);
</script>
Output: 5
66. JS this Keyword
The `this` keyword refers to the context in which a function is called...
let person = {
name: "John",
greet: function() {
console.log(this.name);
}
}
person.greet();
</script>
Output: John
67. JS Arrow Function
Arrow functions provide a shorter syntax for writing functions...
let sum = (a, b) => a + b;
console.log(sum(2, 3));
</script>
Output: 5
68. JS Classes
Classes provide a blueprint for creating objects with shared properties...
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
console.log("Hello, " + this.name);
}
}
let person = new Person("John");
person.sayHello();
</script>
Output: Hello, John
69. JS Modules
Modules allow you to break your JavaScript code into smaller, reusable pieces...
import { greet } from './greet.js';
greet();
</script>
Output: Hello from the module
70. JS JSON
JSON (JavaScript Object Notation) is a format for storing and exchanging data...
let json = '{"name": "John", "age": 30}';
let obj = JSON.parse(json);
console.log(obj.name);
</script>
Output: John
71. JS Debugging
Debugging helps you identify and fix errors in your code...
let x = 10;
console.log(x);
</script>
Output: 10
72. JS Style Guide
Following a style guide ensures that your JavaScript code is readable and consistent...
let sum = (a, b) => a + b;
console.log(sum(2, 3));
</script>
Output: 5
73. JS Best Practices
Best practices in JavaScript help write clean, efficient, and maintainable code...
let name = "John";
const greet = () => console.log(`Hello, ${name}`);
greet();
</script>
Output: Hello, John
74. JS Mistakes
Common mistakes in JavaScript include variable hoisting, incorrect scope usage, and others...
console.log(x); // ReferenceError
let x = 5;
</script>
Output: ReferenceError: x is not defined
75. JS Performance
Improving JavaScript performance involves optimizing algorithms, reducing DOM manipulations, and more...
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((acc, val) => acc + val, 0);
console.log(sum);
</script>
Output: 15
76. JS Reserved Words
Reserved words in JavaScript are words that have special meanings and cannot be used as identifiers...
let function = "test"; // SyntaxError: Unexpected reserved word
</script>
Output: SyntaxError: Unexpected reserved word
77. JS Versions
JavaScript has evolved through multiple versions, each introducing new features and functionalities...
console.log("JavaScript Version History");
</script>
Output: JavaScript Version History
78. JS 2009 (ES5)
ECMAScript 5 (ES5) introduced many features like strict mode, getters/setters, and better handling of arrays...
"use strict";
let x = 5;
console.log(x);
</script>
Output: 5
79. JS 2015 (ES6)
ES6 (ECMAScript 2015) introduced major features like classes, modules, template literals, and more...
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(`Hello, ${this.name}`);
}
}
let person = new Person("John");
person.sayHello();
</script>
Output: Hello, John
80. JS 2016
ES7 (2016) added the exponentiation operator and Array.prototype.includes...
console.log(2 ** 3); // 8
let arr = [1, 2, 3];
console.log(arr.includes(2)); // true
</script>
Output: 8, true
81. JS 2017
ES8 (2017) introduced async/await, Object.entries, and Object.values...
async function fetchData() {
let result = await fetch("https://api.example.com");
console.log(result);
}
fetchData();
</script>
Output: Fetching result from API...
82. JS 2018
ES9 (2018) introduced asynchronous iteration and rest/spread properties...
let arr = [1, 2, 3];
for await (let num of arr) {
console.log(num);
}
</script>
Output: 1, 2, 3
83. JS 2019
ES10 (2019) introduced methods like Array.prototype.flat and Object.fromEntries...
let arr = [1, [2, 3], [4, 5]];
console.log(arr.flat());
</script>
Output: [1, 2, 3, 4, 5]
84. JS 2020
ES11 (2020) brought in features like BigInt and nullish coalescing operator...
let a = 5;
let b = null;
console.log(a ?? b); // 5
</script>
Output: 5
85. JS 2021
ES12 (2021) added features like logical assignment operators and private class fields...
let x = null;
x ??= 10;
console.log(x);
</script>
Output: 10
86. JS 2022
ES13 (2022) introduced the top-level await and other improvements...
let result = await fetch("https://api.example.com");
console.log(result);
</script>
Output: Fetching result from API...
87. JS 2023
ES14 (2023) introduced new features for better developer experience...
let x = 10;
console.log(x);
</script>
Output: 10
88. JS 2024
ES15 (2024) will bring in new enhancements and features to improve coding...
console.log("JS 2024 features coming soon...");
</script>
Output: JS 2024 features coming soon...
89. JS IE/Edge
Internet Explorer and Edge support specific features in JavaScript...
console.log("IE/Edge specific features...");
</script>
Output: IE/Edge specific features...
90. JS History
JavaScript has evolved over the years, from its creation to becoming a powerful language...
console.log("JavaScript history...");
</script>
Output: JavaScript history...
91. JS Objects
JavaScript objects are collections of key-value pairs...
let person = {
name: "John",
age: 30
};
console.log(person.name);
</script>
Output: John
91. JS Objects
JavaScript objects are collections of key-value pairs...
let person = {
name: "John",
age: 30
};
console.log(person.name);
</script>
Output: John
92. Object Definitions
In JavaScript, an object is defined using curly braces, and properties are specified as key-value pairs...
let person = {
name: "Jane",
age: 25
};
console.log(person);
</script>
Output: {name: "Jane", age: 25}
93. Object Prototypes
Objects in JavaScript have prototypes, which are objects that act as templates for other objects...
function Person(name, age) {
this.name = name;
this.age = age;
}
let person1 = new Person("John", 30);
console.log(person1.constructor);
</script>
Output: function Person(name, age) {...}
94. Object Methods
Object methods are functions defined inside an object. They allow objects to perform specific actions...
let person = {
name: "John",
sayHello: function() {
console.log("Hello, " + this.name);
}
};
person.sayHello();
</script>
Output: Hello, John
95. Object Properties
Object properties are the values associated with an object. They can be accessed using dot or bracket notation...
let person = {
name: "John",
age: 30
};
console.log(person.name);
console.log(person["age"]);
</script>
Output: John, 30
96. Object Get / Set
Getters and setters allow you to access and modify object properties in a controlled way...
let person = {
firstName: "John",
lastName: "Doe",
get fullName() {
return this.firstName + " " + this.lastName;
},
set fullName(name) {
let names = name.split(" ");
this.firstName = names[0];
this.lastName = names[1];
}
};
person.fullName = "Jane Doe";
console.log(person.firstName);
console.log(person.lastName);
</script>
Output: Jane, Doe
97. Object Protection
Objects can be protected by freezing them (Object.freeze) or sealing them (Object.seal)...
let person = {
name: "John",
age: 30
};
Object.freeze(person);
person.age = 35;
console.log(person.age);
</script>
Output: 30 (Object cannot be modified after freezing)
98. JS Functions
Functions in JavaScript are reusable blocks of code that perform specific tasks...
function greet(name) {
console.log("Hello, " + name);
}
greet("John");
</script>
Output: Hello, John
99. Function Definitions
Function definitions in JavaScript are made with the function keyword...
function multiply(a, b) {
return a * b;
}
console.log(multiply(2, 3));
</script>
Output: 6
100. Function Parameters
Function parameters are the variables that are passed into the function when called...
function sum(a, b) {
return a + b;
}
console.log(sum(5, 10));
</script>
Output: 15
101. Function Invocation
Function invocation refers to calling a function in JavaScript...
function greet(name) {
console.log("Hi, " + name);
}
greet("Jane");
</script>
Output: Hi, Jane
102. Function Call
The call() method calls a function with a specified this value and arguments...
function greet(message) {
console.log(message + ", " + this.name);
}
let person = { name: "John" };
greet.call(person, "Hello");
</script>
Output: Hello, John
103. Function Apply
The apply() method is similar to call(), but the arguments are passed as an array...
function greet(message) {
console.log(message + ", " + this.name);
}
let person = { name: "Jane" };
greet.apply(person, ["Hello"]);
</script>
Output: Hello, Jane
104. Function Bind
The bind() method creates a new function that, when invoked, has its this value set to the provided value...
function greet(message) {
console.log(message + ", " + this.name);
}
let person = { name: "Jake" };
let greetJake = greet.bind(person);
greetJake("Hello");
</script>
Output: Hello, Jake
105. Function Closures
A closure is a function that retains access to its lexical environment, even after the function it was created in has finished execution...
function outer() {
let name = "Alice";
function inner() {
console.log(name);
}
return inner;
}
let greet = outer();
greet();
</script>
Output: Alice
106. JS Classes
Classes are a blueprint for creating objects in JavaScript. They are syntactic sugar over the existing prototype-based inheritance...
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log("Hello, " + this.name);
}
}
let person1 = new Person("John", 30);
person1.sayHello();
</script>
Output: Hello, John
107. Class Introduction
Classes in JavaScript provide a way to define objects and their behaviors in a cleaner, more understandable way...
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
console.log("Hello, " + this.name);
}
}
let person = new Person("John");
person.sayHello();
</script>
Output: Hello, John
108. Class Inheritance
Inheritance in JavaScript allows one class to inherit properties and methods from another class...
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + " makes a sound.");
}
}
class Dog extends Animal {
speak() {
console.log(this.name + " barks.");
}
}
let dog = new Dog("Buddy");
dog.speak();
</script>
Output: Buddy barks.
109. Class Static
Static methods are called on the class itself, rather than instances of the class...
class Calculator {
static add(x, y) {
return x + y;
}
}
console.log(Calculator.add(5, 3));
</script>
Output: 8
110. JS Async
Asynchronous programming allows for non-blocking operations in JavaScript...
setTimeout(() => {
console.log("This message is displayed after 2 seconds.");
}, 2000);
</script>
Output: This message is displayed after 2 seconds.
111. JS Callbacks
A callback is a function passed into another function as an argument...
function fetchData(callback) {
setTimeout(() => {
callback("Data fetched!");
}, 2000);
}
fetchData((message) => {
console.log(message);
});
</script>
Output: Data fetched!
112. JS Asynchronous
Asynchronous functions allow other code to run while waiting for a task to complete...
async function fetchData() {
let result = await fetch('https://jsonplaceholder.typicode.com/posts');
let data = await result.json();
console.log(data);
}
fetchData();
</script>
Output: Array of data from the API
113. JS Promises
A Promise is an object representing the eventual completion or failure of an asynchronous operation...
let promise = new Promise((resolve, reject) => {
let success = true;
if (success) {
resolve("Operation successful!");
} else {
reject("Operation failed!");
}
});
promise.then((message) => {
console.log(message);
}).catch((message) => {
console.log(message);
});
</script>
Output: Operation successful!
114. JS Async/Await
Async/await is syntactic sugar for working with Promises...
async function fetchData() {
let response = await fetch('https://jsonplaceholder.typicode.com/posts');
let data = await response.json();
console.log(data);
}
fetchData();
</script>
Output: Array of data from the API
115. JS HTML DOM
The DOM (Document Object Model) represents the structure of an HTML document...
document.getElementById("demo").innerHTML = "Hello, World!";
</script>
Output: Hello, World!
116. DOM Introduction
The DOM provides methods to interact with HTML elements...
console.log(document.title);
</script>
Output: The title of the current HTML document
117. DOM Methods
DOM methods allow us to manipulate the HTML structure dynamically...
let element = document.getElementById("demo");
element.style.color = "red";
</script>
Output: Changes text color to red
118. DOM Elements
DOM elements represent the various nodes in the document's HTML structure...
let element = document.createElement("p");
element.textContent = "New paragraph created.";
document.body.appendChild(element);
</script>
Output: A new paragraph element added to the document
119. DOM HTML
DOM HTML methods help in accessing and modifying HTML content...
let htmlContent = document.body.innerHTML;
console.log(htmlContent);
</script>
Output: The HTML content of the body element
120. DOM Forms
DOM allows you to interact with HTML forms dynamically...
let formElement = document.getElementById("myForm");
formElement.submit();
</script>
Output: Submitting the form programmatically
121. DOM CSS
DOM methods allow you to manipulate the CSS styles of HTML elements...
document.body.style.backgroundColor = "lightblue";
</script>
Output: Changes the background color of the body to light blue
122. DOM Animations
The DOM allows creating animations on elements...
let elem = document.getElementById("animate");
elem.style.transition = "all 2s";
elem.style.transform = "rotate(360deg)";
</script>
Output: Rotate animation applied to the element
123. DOM Events
DOM events allow interaction with user actions like clicks, key presses, etc...
let btn = document.getElementById("myButton");
btn.addEventListener("click", function() {
alert("Button clicked!");
});
</script>
Output: Button click triggers an alert
124. DOM Event Listener
Event listeners are used to bind event handlers to elements...
document.getElementById("myButton").addEventListener("click", () => {
alert("Event triggered!");
});
</script>
Output: Alert appears when the button is clicked
126. DOM Nodes
Nodes are the building blocks of the DOM, representing elements, attributes, and text...
let node = document.createTextNode("Hello, world!");
document.body.appendChild(node);
</script>
Output: "Hello, world!" is added to the document as a text node
127. DOM Collections
DOM collections are a list of DOM nodes that can be accessed and manipulated...
let collection = document.getElementsByTagName("p");
console.log(collection[0]);
</script>
Output: The first paragraph element in the document
128. DOM Node Lists
Node lists are similar to collections, but they represent all nodes matching a query...
let nodeList = document.querySelectorAll("p");
nodeList.forEach(node => console.log(node));
</script>
Output: All paragraph elements in the document
129. JS Browser BOM
The Browser Object Model (BOM) allows interaction with the browser...
console.log(window.innerWidth);
</script>
Output: The width of the browser window
130. JS Window
The Window object represents the browser window and provides methods to interact with it...
window.alert("Hello, world!");
</script>
Output: An alert box with "Hello, world!"
131. JS Screen
The Screen object contains information about the user's screen...
console.log(screen.width);
</script>
Output: The width of the user's screen
132. JS Location
The Location object allows access to the URL of the browser...
console.log(location.href);
</script>
Output: The current URL of the document
133. JS History
The History object allows navigation through the browser's history...
history.back();
</script>
Output: Navigates to the previous page in history
135. JS Popup Alert
The alert() function is used to display an alert box to the user...
alert("This is an alert message!");
</script>
Output: An alert box with the message "This is an alert message!"
136. JS Timing
JavaScript provides methods for timing functions, such as setTimeout and setInterval...
setTimeout(() => {
alert("This alert appears after 3 seconds");
}, 3000);
</script>
Output: Alert appears after 3 seconds
138. JS Web APIs
Web APIs provide browser-based methods and functionality for web developers...
console.log(navigator.geolocation);
</script>
Output: Information about the geolocation Web API
139. Web API Introduction
Web APIs allow web developers to interact with various browser functionalities...
console.log(window.localStorage);
</script>
Output: Information about the localStorage Web API
140. Web Forms API
The Web Forms API allows interaction with form elements in the DOM...
let form = document.getElementById("myForm");
form.reset();
</script>
Output: Resets the form
141. Web History API
The Web History API allows for manipulation of the browser's session history...
history.pushState({},"","newPage");
</script>
Output: Adds a new state to the browser's history
142. Web Storage API
The Web Storage API provides storage for data within the browser...
localStorage.setItem("name", "John");
console.log(localStorage.getItem("name"));
</script>
Output: Saves and retrieves the "name" item from localStorage
143. Web Worker API
The Web Worker API allows running JavaScript in background threads...
let worker = new Worker("worker.js");
</script>
Output: A web worker is created to run a script in the background
144. Web Fetch API
The Fetch API provides a way to make network requests similar to XMLHttpRequest...
fetch("https://jsonplaceholder.typicode.com/posts")
.then(response => response.json())
.then(data => console.log(data));
</script>
Output: Fetches data from an API and logs it to the console
145. Web Geolocation API
The Geolocation API allows you to get the user's geographical position...
navigator.geolocation.getCurrentPosition(function(position) {
console.log(position.coords.latitude, position.coords.longitude);
});
</script>
Output: Logs the user's latitude and longitude
146. JS AJAX
AJAX (Asynchronous JavaScript and XML) allows asynchronous communication between the client and server...
let xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);
xhr.onload = function() {
if (xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
};
xhr.send();
</script>
Output: Fetches data asynchronously from an API and logs it to the console
147. AJAX Intro
AJAX enables web pages to be updated asynchronously by exchanging small amounts of data...
let xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);
xhr.onload = function() {
console.log(xhr.responseText);
};
xhr.send();
</script>
Output: Sends an AJAX request to fetch data
148. AJAX XMLHttp
The XMLHttpRequest object is used in AJAX to send and receive data...
let xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(JSON.parse(xhr.responseText));
}
};
xhr.send();
</script>
Output: Fetches data using XMLHttpRequest and logs it
149. AJAX Request
AJAX requests allow you to send data to a server without refreshing the page...
let xhr = new XMLHttpRequest();
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify({title: "New Post", body: "Post body"}));
</script>
Output: Sends a POST request with JSON data
150. AJAX Response
The response from an AJAX request is processed asynchronously...
let xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);
xhr.onload = function() {
console.log(xhr.responseText);
};
xhr.send();
</script>
Output: Logs the response from the server
151. AJAX XML File
AJAX can also be used to fetch XML files and parse them...
let xhr = new XMLHttpRequest();
xhr.open("GET", "data.xml", true);
xhr.onload = function() {
let xmlDoc = xhr.responseXML;
let items = xmlDoc.getElementsByTagName("item");
console.log(items);
};
xhr.send();
</script>
Output: Fetches an XML file and logs its contents
152. AJAX PHP
AJAX can be used with PHP to send and receive data asynchronously...
let xhr = new XMLHttpRequest();
xhr.open("GET", "process.php", true);
xhr.onload = function() {
console.log(xhr.responseText);
};
xhr.send();
</script>
Output: Sends an AJAX request to a PHP script and logs the response
153. AJAX ASP
AJAX can also be used with ASP (Active Server Pages) to handle asynchronous requests...
let xhr = new XMLHttpRequest();
xhr.open("GET", "process.asp", true);
xhr.onload = function() {
console.log(xhr.responseText);
};
xhr.send();
</script>
Output: Sends an AJAX request to an ASP script and logs the response
154. AJAX Database
AJAX can be used to interact with a database asynchronously...
let xhr = new XMLHttpRequest();
xhr.open("GET", "fetchData.php", true);
xhr.onload = function() {
console.log(xhr.responseText);
};
xhr.send();
</script>
Output: Sends an AJAX request to fetch data from a database
155. AJAX Applications
AJAX is commonly used in real-time applications like social media, chats, and more...
let xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);
xhr.onload = function() {
console.log(xhr.responseText);
};
xhr.send();
</script>
Output: Example of using AJAX in a web application
156. AJAX Examples
Various practical examples of AJAX requests...
let xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);
xhr.onload = function() {
console.log(xhr.responseText);
};
xhr.send();
</script>
Output: Demonstrates AJAX examples
157. JS JSON
JSON (JavaScript Object Notation) is a lightweight data-interchange format...
let person = {"name": "John", "age": 30};
let jsonString = JSON.stringify(person);
console.log(jsonString);
</script>
Output: Converts an object into a JSON string
158. JSON Intro
JSON is a lightweight data format that is easy to read and write...
let person = {"name": "John", "age": 30};
let jsonString = JSON.stringify(person);
console.log(jsonString);
</script>
Output: Introduction to JSON
159. JSON Syntax
JSON syntax is a collection of key-value pairs...
let person = {"name": "John", "age": 30};
let jsonString = JSON.stringify(person);
console.log(jsonString);
</script>
Output: Example of JSON syntax
160. JSON vs XML
JSON and XML are both data formats used for storing and exchanging data...
JSON Example:
{
"name": "John",
"age": 30,
"city": "New York"
}
XML Example:
<person>
<name>John</name>
<age>30</age>
<city>New York</city>
</person>
Output: JSON is more compact and easier to read, while XML is more verbose and uses tags for structure.
161. JSON Data Types
JSON supports the following data types: String, Number, Object, Array, Boolean, and Null...
{
"string": "Hello, world!",
"number": 123,
"object": {"key": "value"},
"array": [1, 2, 3],
"boolean": true,
"nullValue": null
}
Output: Shows JSON data types including strings, numbers, objects, arrays, booleans, and null values.
162. JSON Parse
JSON.parse() is used to convert a JSON string into a JavaScript object...
let jsonString = '{"name": "John", "age": 30, "city": "New York"}';
let obj = JSON.parse(jsonString);
console.log(obj.name); // Output: John
</script>
Output: Converts JSON string into a JavaScript object, and accesses its properties.
163. JSON Stringify
JSON.stringify() converts a JavaScript object into a JSON string...
let person = { "name": "John", "age": 30 };
let jsonString = JSON.stringify(person);
console.log(jsonString); // Output: '{"name":"John","age":30}'
</script>
Output: Converts a JavaScript object into a JSON string.
164. JSON Objects
JSON objects are collections of key-value pairs...
{
"name": "John",
"age": 30,
"city": "New York"
}
Output: A simple JSON object representing a person.
165. JSON Arrays
JSON arrays are ordered lists of values...
{
"names": ["John", "Jane", "Jim"]
}
Output: A JSON array containing names.
166. JSON Server
JSON Server is a package that helps in setting up a mock REST API server...
json-server --watch db.json --port 5000
Output: Running a JSON Server on port 5000 to serve a mock database.
167. JSON PHP
JSON in PHP is used to encode and decode JSON data...
name; // Output: John
?>
Output: Decoding JSON data in PHP and accessing its property.
168. JSON HTML
Embedding JSON data in HTML can be done using JavaScript...
Output: Displays the JSON string in the HTML element.
169. JSON JSONP
JSONP is a method used to overcome cross-origin restrictions...
function handleData(data) {
console.log(data);
}
Output: Fetches JSON data using JSONP to overcome CORS restrictions.
170. JS vs jQuery
JavaScript is the core language, while jQuery is a library that simplifies JavaScript usage...
let element = document.getElementById("myElement");
element.style.color = "blue";
// jQuery
$("#myElement").css("color", "blue");
Output: Comparison of standard JavaScript and jQuery syntax for manipulating DOM elements.
171. jQuery Selectors
jQuery selectors are used to select and manipulate HTML elements...
$("#id").css("color", "red");
$(".class").hide();
Output: Select elements by ID and class using jQuery and apply styles or actions.
172. jQuery HTML
jQuery can be used to manipulate HTML content...
$("#element").html("New HTML Content");
Output: Changes the HTML content of an element using jQuery.
173. jQuery CSS
jQuery can be used to manipulate the CSS styles of elements...
$("#element").css("color", "green");
Output: Changes the CSS style of an element using jQuery.
174. jQuery DOM
jQuery simplifies DOM manipulation...
$("#element").append("New paragraph added!
");
Output: Appends new content to an element using jQuery.
175. JS Graphics
JavaScript can be used for creating graphics on a web page...
Output: Draws a red rectangle on a canvas element using JavaScript.
176. JS Canvas
The canvas element allows for dynamic graphics rendering...
Output: Draws a circle on a canvas element using JavaScript.
177. JS Plotly
Plotly is a JavaScript library for creating interactive graphs...
Output: Creates an interactive scatter plot using Plotly.
178. JS Chart.js
Chart.js is a popular JavaScript library for making charts...
Output: Creates a bar chart using Chart.js.
179. JS Google Chart
Google Charts is a powerful, simple to use tool for creating interactive charts...
Output: Creates an interactive bar chart using Google Charts.
180. JS D3.js
D3.js is a JavaScript library for manipulating documents based on data...
Output: Creates a circle chart using D3.js where the radius depends on the data.
181. JS Examples
Explore various examples of JavaScript concepts...
function greeting() {
alert("Hello, World!");
}
greeting(); // Calls the function and alerts "Hello, World!"
Output: Alerts "Hello, World!"
182. JS HTML DOM
The HTML DOM allows you to interact with the elements on a web page...
document.getElementById("myElement").innerHTML = "New content!";
Output: Changes the inner HTML content of the specified element.
183. JS HTML Input
Handling input fields in HTML with JavaScript...
Output: Displays the input entered by the user.
184. JS HTML Objects
In JavaScript, HTML elements can be treated as objects...
let element = document.getElementById("myElement");
console.log(element.innerHTML);
Output: Retrieves the inner HTML of the specified element.
185. JS HTML Events
Handling HTML events using JavaScript...
Output: Shows an alert when the button is clicked.
186. JS Browser
JavaScript allows interaction with the browser environment...
console.log(navigator.userAgent);
Output: Logs the user agent string of the browser.
187. JS Editor
Choosing the right JavaScript editor for coding...
console.log("Hello, JS Editor!");
Output: Simple console log output in your JS editor.
188. JS Exercises
Practicing JavaScript through exercises can help solidify concepts...
let x = 5;
let y = 10;
console.log(x + y);
Output: Logs the sum of x and y.
189. JS Quiz
Test your knowledge of JavaScript with quizzes...
let answer = prompt("What is 2 + 2?");
if (answer == "4") {
alert("Correct!");
} else {
alert("Wrong!");
}
Output: Shows an alert based on the quiz answer.