Js notes
Here’s a simple explanation of each term in the context of JavaScript:
1. JavaScript Object Model (JS Object Model):
The way JavaScript represents and interacts with objects. Objects are collections of key-value
pairs that can store data and methods.
2. DOM (Document Object Model):
A structure representing an HTML or XML document as a tree of elements. JavaScript uses it to
interact with and modify web pages dynamically.
3. Object:
A collection of related data (properties) and functions (methods). For example:
let person = { name: "John", age: 30, greet: () => console.log("Hi!") };
4. Array of Objects:
A list of objects stored in an array. For example:
let users = [{ name: "Alice" }, { name: "Bob" }];
5. Event:
An action or occurrence detected by JavaScript, such as a mouse click, key press, or page load.
6. Event Handler:
A function that runs in response to an event. Example:
button.addEventListener("click", () => console.log("Button clicked!"));
7. Button Element:
An HTML element (<button>) used to create clickable buttons on a webpage.
8. Text Element:
An input field (<input type="text">) that allows users to enter text.
9. Password Element:
An input field (<input type="password">) where users can enter passwords. The characters are
hidden.
10. Checkbox Element:
An input field (<input type="checkbox">) that allows users to toggle a choice on or off.
11. Radio Element:
A group of input fields (<input type="radio">) where users can select only one option at a time.
12. Text Area Element:
A larger text input field (<textarea>) for entering multi-line text.
13. Select and Option Element:
A dropdown menu (<select>) with choices defined using <option> elements.
14. Date Object:
A built-in JavaScript object used to work with dates and times. Example:
let today = new Date();
15. Image Object:
Represents an image on the page. You can use it to manipulate images with JavaScript.
16. Window Object:
Represents the browser's window and provides methods to interact with it, such as resizing,
alerts, or opening new tabs.
17. String Object:
Represents and manipulates text. Example:
let str = "Hello, World!";
18. Time Intervals:
Functions that execute repeatedly after a specified time (setInterval) or once after a delay
(setTimeout). Example:
setTimeout(() => console.log("Hello after 2 seconds"), 2000);
19. Forms Validation and Types:
Checking if the data entered in a form is correct before submission. Types include text, email,
number, etc., with HTML5 attributes like required and pattern. Example:
<input type="email" required>
1. Function and Its Types:
A function is a reusable block of code that performs a specific task. Functions are executed when
called.
Built-in Functions:
Predefined functions provided by JavaScript, like alert(), parseInt(), and
Math.random().
Example:
javascript
Copy code
console.log("Hello, World!");
User-defined Functions:
Functions created by the programmer to perform specific tasks.
Example:
javascript
Copy code
function greet(name) {
console.log("Hello, " + name);
}
greet("Alice");
2. Local Variable:
A variable declared inside a function or block. It is accessible only within that function or block.
Example:
javascript
Copy code
function sayHi() {
let message = "Hi!";
console.log(message); // Accessible here
}
// console.log(message); // Error: message is not defined
3. Global Variable:
A variable declared outside any function or block. It is accessible throughout the entire program.
Example:
javascript
Copy code
let globalVar = "I am global";
function display() {
console.log(globalVar); // Accessible here
}
display();
4. Dialog Boxes:
Pop-up windows used to interact with the user. JavaScript provides three types.
5. Alert Dialog Box:
Displays a message with an OK button. It informs users without expecting input.
Example:
javascript
Copy code
alert("This is an alert box!");
6. Prompt Dialog Box:
Displays a message asking for user input. It has an input field and OK/Cancel buttons.
Example:
javascript
Copy code
let name = prompt("Enter your name:");
console.log("Hello, " + name);
7. Confirm Dialog Box:
Displays a message with OK and Cancel buttons, usually for confirmation.
Example:
javascript
Copy code
let isSure = confirm("Are you sure?");
console.log(isSure); // true if OK is clicked, false otherwise
8. Conversion Function and Its Types:
Functions used to convert data from one type to another.
String Conversion: Converts data to a string.
Example:
javascript
Copy code
let num = 123;
let str = String(num);
Number Conversion: Converts data to a number.
Example:
javascript
Copy code
let str = "456";
let num = Number(str);
Boolean Conversion: Converts data to true or false.
Example:
javascript
Copy code
let isTrue = Boolean(1); // true
9. Arrays:
A collection of data stored in a single variable. It can hold multiple values.
Example:
javascript
Copy code
let fruits = ["Apple", "Banana", "Cherry"];
10. Manipulating Arrays:
Using JavaScript methods to modify arrays.
Add/Remove Elements:
javascript
Copy code
let fruits = ["Apple", "Banana"];
fruits.push("Cherry"); // Adds at the end
fruits.pop(); // Removes the last element
fruits.unshift("Mango"); // Adds at the beginning
fruits.shift(); // Removes the first element
Access Elements:
javascript
Copy code
console.log(fruits[0]); // Accesses the first element
Iterate Over an Array:
javascript code
fruits.forEach(fruit => console.log(fruit));
Sort:
Javascript code
fruits.sort(); // Sorts alphabetically
Filter and Map:
javascript code
let longFruits = fruits.filter(f => f.length > 5);
let upperFruits = fruits.map(f => f.toUpperCase());
