├── BOM.md ├── Basic-Operators.md ├── Conditional-Statements.md ├── DOM.md ├── Data-Types.md ├── Functions.md ├── Hello-world.md ├── JS-Comments.md ├── JavaScript-Engine.md ├── Logical-Operators.md ├── Loops.md ├── Nullish-Coalescing.md ├── README.md ├── Switch-Case.md ├── Type-Conversions.md ├── User-Interaction.md ├── Variables.md ├── images ├── DOM1.png ├── DOM2.png ├── DOM3.png ├── DOM4.png ├── DOM5.png ├── DOM6.png └── DOM7.gif └── what-is-JavaScript.md /BOM.md: -------------------------------------------------------------------------------- 1 | # JavaScript - Browser Object Model 2 | 3 | ## Browser Object Model in JavaScript 4 | 5 | The Browser Object Model (BOM) in JavaScript helps to interact with the browser, not just the webpage. While the DOM handles the content of the page, BOM gives you control over things like the browser window, the URL, and the Cookies. 6 | 7 | 8 | ### `window.location` in JavaScript** 9 | 10 | The `window.location` object in JavaScript provides details about the current page URL and allows you to modify it. It’s commonly used for getting URL information, redirecting users, or reloading the page. 11 | 12 | --- 13 | 14 | ### **Main Properties of `window.location`** 15 | 16 | Here’s a breakdown of its key properties: 17 | 18 | |Property|Description|Example Output| 19 | |---|---|---| 20 | |`window.location.href`|The full URL of the page|`"https://example.com/page.html?search=query"`| 21 | |`window.location.protocol`|The protocol used (`http:` or `https:`)|`"https:"`| 22 | |`window.location.host`|The domain name and port (if any)|`"example.com"` or `"localhost:3000"`| 23 | |`window.location.hostname`|The domain name only (without port)|`"example.com"`| 24 | |`window.location.port`|The port number (if any)|`"3000"` (if running on `localhost:3000`)| 25 | |`window.location.pathname`|The path after the domain|`"/page.html"`| 26 | |`window.location.search`|The query string (after `?`)|`"?search=query"`| 27 | |`window.location.hash`|The fragment identifier (after `#`)|`"#section1"`| 28 | |`window.location.origin`|The full URL origin (protocol + hostname + port)|`"https://example.com:8080"`| 29 | 30 | --- 31 | 32 | ### **Example: Getting URL Information** 33 | 34 | ```js 35 | console.log("Full URL:", window.location.href); 36 | console.log("Protocol:", window.location.protocol); 37 | console.log("Host:", window.location.host); 38 | console.log("Hostname:", window.location.hostname); 39 | console.log("Port:", window.location.port); 40 | console.log("Pathname:", window.location.pathname); 41 | console.log("Query String:", window.location.search); 42 | console.log("Hash:", window.location.hash); 43 | console.log("Origin:", window.location.origin); 44 | 45 | ``` 46 | 47 | **If the page URL is:** 48 | `https://example.com:8080/page.html?search=bug#results` 49 | This code will output: 50 | 51 | ``` 52 | Full URL: https://example.com:8080/page.html?search=bug#results 53 | Protocol: https: 54 | Host: example.com:8080 55 | Hostname: example.com 56 | Port: 8080 57 | Pathname: /page.html 58 | Query String: ?search=bug 59 | Hash: #results 60 | Origin: https://example.com:8080 61 | 62 | ``` 63 | 64 | --- 65 | 66 | ### **Redirecting & Reloading the Page** 67 | 68 | You can use `window.location` to navigate or refresh the page dynamically. 69 | 70 | #### **1. Redirect to Another Page** 71 | `window.location.href = "https://google.com";` 72 | Acts like clicking a link. 73 | 74 | #### **2. Reload the Page** 75 | `window.location.reload();` 76 | Equivalent to pressing **F5**. 77 | 78 | #### **3. Navigate Without Keeping History** 79 | `window.location.replace("https://example.com");` 80 | Unlike `href`, this removes the current page from history, so the user **can’t go back**. 81 | 82 | --- 83 | 84 | ### **Modifying URL Parts Dynamically** 85 | 86 | You can change specific parts of the URL. 87 | #### **1. Update the Query String** 88 | `window.location.search = "?user=Islam&role=admin";` 89 | Changes the query parameters. 90 | 91 | #### **2. Change the Hash** 92 | `window.location.hash = "#section3";` 93 | Scrolls to `#section3` **without reloading**. 94 | 95 | --- 96 | 97 | #### **Example: Redirect Based on User Choice** 98 | ```html 99 | 100 | 101 | 102 | 111 | 112 | ``` 113 | clicking a button redirects the user to a different page. 114 | 115 | 116 | --- 117 | ## JavaScript Cookies 118 | 119 | Cookies are small pieces of data stored in the browser, mainly used for tracking user sessions, storing preferences, and authentication. JavaScript allows you to **create, read, and delete** cookies using the `document.cookie` property. 120 | 121 | ### **How Cookies Work** 122 | 123 | A cookie is a simple key-value pair stored in the browser. Here’s an example: 124 | ``` 125 | username=Islam; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/ 126 | ``` 127 | - `username=Islam` → Stores the user’s name. 128 | - `expires=...` → Sets the expiration date. 129 | - `path=/` → Cookie is accessible across the whole website. 130 | 131 | 132 | ### **Creating a Cookie** 133 | 134 | You can set a cookie using `document.cookie` like this: 135 | ```js 136 | document.cookie = "username=Islam"; 137 | 138 | ``` 139 | 140 | This creates a basic cookie **without an expiration date**, meaning it will be deleted when the browser closes (a **session cookie**). 141 | 142 | #### **Setting an Expiration Date** 143 | 144 | To make a cookie persist, you must add an `expires` attribute. 145 | ```js 146 | document.cookie = "username=Islam; expires=Fri, 31 Dec 2025 23:59:59 GMT"; 147 | 148 | ``` 149 | This cookie will **stay** in the browser until **December 31, 2025**. 150 | 151 | #### **Setting a Path** 152 | 153 | If you want the cookie to be accessible across all pages, add `path=/`: 154 | ```js 155 | document.cookie = "username=Islam; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/"; 156 | 157 | ``` 158 | Without `path=/`, the cookie is **only available on the current page**. 159 | 160 | ### **Reading Cookies** 161 | 162 | You can retrieve all cookies using: 163 | ```js 164 | console.log(document.cookie); 165 | 166 | ``` 167 | This returns a string of all cookies: 168 | ``` 169 | "username=Islam; theme=dark; language=en" 170 | 171 | ``` 172 | Since cookies are stored as a **single string**, you may need to parse them manually. 173 | 174 | #### **Extracting a Specific Cookie** 175 | 176 | Example: Get the `username` cookie. 177 | ```js 178 | function getCookie(name) { 179 | let cookies = document.cookie.split("; "); 180 | for (let i = 0; i < cookies.length; i++) { 181 | let [key, value] = cookies[i].split("="); 182 | if (key === name) { 183 | return value; 184 | } 185 | } 186 | return null; 187 | } 188 | 189 | console.log(getCookie("username")); // Output: Islam 190 | 191 | ``` 192 | 193 | 194 | ### **Updating a Cookie** 195 | 196 | To update a cookie, you **set it again** with the same name but a new value. 197 | ```js 198 | document.cookie = "username=Matr; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/"; 199 | 200 | ``` 201 | The `username` cookie is now `"Matr"`. 202 | 203 | -------------------------------------------------------------------------------- /Basic-Operators.md: -------------------------------------------------------------------------------- 1 | ### Arithmetic Operators 2 | 3 | | Operator | Name | Purpose | Example | 4 | | -------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | 5 | | `+` | Addition | Adds two numbers together. | `6 + 9` | 6 | | `-` | Subtraction | Subtracts the right number from the left. | `20 - 15` | 7 | | `*` | Multiplication | Multiplies two numbers together. | `3 * 7` | 8 | | `/` | Division | Divides the left number by the right. | `10 / 5` | 9 | | `%` | Remainder (sometimes called modulo) | Returns the remainder left over after you've divided the left number into a number of integer portions equal to the right number. | `8 % 3` (returns 2, as three goes into 8 twice, leaving 2 left over). | 10 | | `**` | Exponent | Raises a `base` number to the `exponent` power, that is, the `base` number multiplied by itself, `exponent` times. | `5 ** 2` (returns `25`, which is the same as `5 * 5`). | 11 | | `++` | Increment | Increases the variable's number by 1. | let x=20; x++; x=21 | 12 | | `--` | Decrement | Decreases the variable's number by 1 | let x=20;x--;x=19 | 13 | 14 | ### Assignment Operators 15 | 16 | | Operator | Example | Same As | 17 | | -------- | ------- | ---------- | 18 | | = | x = y | x = y | 19 | | += | x += y | x = x + y | 20 | | -= | x -= y | x = x - y | 21 | | *= | x *= y | x = x * y | 22 | | /= | x /= y | x = x / y | 23 | | %= | x %= y | x = x % y | 24 | | **= | x **= y | x = x ** y | 25 | 26 | -------------------------------------------------------------------------------- /Conditional-Statements.md: -------------------------------------------------------------------------------- 1 | ### Conditional statements: if, else, ternary operator (?). 2 | 3 | JavaScript conditional statements allow you to execute specific blocks of code based on conditions. If the condition is met, a particular block of code will run; otherwise, another block of code will execute based on the condition. 4 | 5 | ##### 1. Using if Statement 6 | The if statement is used to evaluate a particular condition. If the condition holds true, the associated code block is executed. 7 | 8 | ``` 9 | let x = 20; 10 | 11 | if (x % 2 === 0) { 12 | console.log("Even"); 13 | } 14 | 15 | if (x % 2 !== 0) { 16 | console.log("Odd"); 17 | }; 18 | ``` 19 | 20 | --- 21 | ##### 2. Using if-else Statement 22 | Use `else` to specify a block of code to be executed, if the same condition is false 23 | 24 | ``` 25 | let age = 25; 26 | 27 | if (age >= 18) { 28 | console.log("Adult") 29 | } else { 30 | console.log("Not an Adult") 31 | }; 32 | ``` 33 | 34 | --- 35 | ##### 3. else if Statement 36 | Use `else if` to specify a new condition to test, if the first condition is false 37 | 38 | ``` 39 | if (time < 10) { 40 |   greeting = "Good morning"; 41 | } else if (time < 20) { 42 |   greeting = "Good day"; 43 | } else { 44 |   greeting = "Good evening"; 45 | } 46 | // the result is Good evening 47 | ``` 48 | --- 49 | 50 | ##### 4. JavaScript Ternary Operator 51 | The Ternary Operator in JavaScript is a shortcut for writing simple if-else statements. It’s also known as the Conditional Operator because it works based on a condition. The ternary operator allows you to quickly decide between two values depending on whether a condition is true or false. 52 | 53 | ##### How Does the Ternary Operator Work? 54 | The ternary operator works with three parts: 55 | - ****Condition:**** A statement that returns true or false. 56 | - ****Value if True:**** What happens if the condition is true? 57 | - ****Value if False:**** What happens if the condition is false? 58 | 59 | ****Syntax:**** 60 | condition ? trueExpression : falseExpression 61 | 62 | Example --> 63 | 64 | ``` 65 | let age = 60; 66 | 67 | let res = (age > 59) ? "Adult" : "Not Adult"; 68 | 69 | console.log(res); 70 | // res --> Adult 71 | ``` 72 | 73 | if we want to convert it to normal if condition will be like that --> 74 | ``` 75 | let age = 60; 76 | let res; 77 | 78 | if (age > 59) { 79 | res = "Adult"; 80 | } else { 81 | res = "Not Adult"; 82 | } 83 | console.log(res); 84 | // res --> Adult 85 | ``` 86 | 87 | ##### Nested Ternary Operators 88 | multiple Conditional operators 89 | 90 | ``` 91 | let marks = 95; 92 | let res = (marks < 40) ? "Unsatisfactory" : 93 | (marks < 60) ? "Average" : 94 | (marks < 80) ? "Good" : "Excellent"; 95 | 96 | console.log(res); 97 | 98 | // res --> Excellent 99 | ``` 100 | 101 | -------------------------------------------------------------------------------- /DOM.md: -------------------------------------------------------------------------------- 1 | 2 | ### **What is the DOM?** 3 | 4 | The Document Object Model (DOM) is a programming interface for web documents. In simpler terms, it's like an organized map that represents the structure and content of a webpage. Think of it as a tree-like structure where each part of a webpage – like headings, paragraphs, images, buttons, and more – is a node. This tree of nodes is what allows JavaScript to access, modify, and manipulate the content of a webpage. 5 | 6 | Let's take a look at this HTML code to better understand the DOM tree structure. 7 | ``` 8 | 9 | 10 | 11 | 12 | Exploring the DOM in JavaScript 13 | 14 | 15 |

Hello, World!

16 |

This is a simple HTML example.

17 | 18 | 19 | ``` 20 | 21 | From a DOM perspective, each HTML element becomes a node in the DOM tree: 22 | 23 | - `html` is the root node. 24 | - `head` and `body` are child nodes of `html`. 25 | - `meta` and `title` are child nodes of `head`. 26 | - `h1` and `p` are child nodes of `body`. 27 | 28 | Here's an alternative approach to visually represent this hierarchy of nodes. 29 | 30 | [DOM Structure](images/DOM1.png) 31 | 32 | ### **Understanding** `window` and `document` 33 | 34 | Before we dive into the practical examples, let's meet two important players: `window` and `document`. 35 | 36 | - `window`: This is like the boss of the browser window. It represents the entire browser window and has control over things like opening new tabs, resizing the window, and more. 37 | - `document`: This is like the page itself. It's an object that holds all the HTML elements on your page. When we say "DOM," we often mean the `document` object. 38 | 39 | ### **Finding Elements: Your Webpage's Treasure Hunt** 40 | 41 | To truly grasp the magic of the DOM, let's start with a hands-on example. Imagine you have the following HTML structure: 42 | ```HTML 43 | 44 | 45 | 46 | Finding Elements Example 47 | 48 | 49 |

Welcome to the DOM Treasure Hunt

50 |
51 |

Find Me!

52 |

And Me Too!

53 |
54 | 55 | 56 | 57 | ``` 58 | 59 | Now, let's dive into the various methods the DOM provides to help you find elements like a seasoned treasure hunter. 60 | 61 | 62 | **1.** `getElementById()`**: The One with the ID** 63 | Each element can have a unique ID. To locate an element by its ID, use the `getElementById()` method: 64 | 65 | ```js 66 | document.getElementById('container'); 67 | ``` 68 | 69 | ![getElementById Example](images/DOM2.png) 70 | 71 | 72 | **2.** `querySelector()`**: The Versatile Searcher** 73 | For a broader search, the `querySelector()` method lets you use CSS selectors: 74 | 75 | ```js 76 | document.querySelector('.highlight'); 77 | ``` 78 | ![querySelector Example](images/DOM3.png) 79 | 80 | 81 | **3.** `querySelectorAll()`**: Gathering a Crowd** 82 | Need to target multiple elements? The `querySelectorAll()` method is your friend: 83 | 84 | ```js 85 | document.querySelectorAll('.btn'); 86 | ``` 87 | 88 | ![querySelectorAll Example](images/DOM4.png) 89 | 90 | **4.** `getElementsByClassName()`**: Grouping by Class** 91 | 92 | When elements share a class, use `getElementsByClassName()`: 93 | 94 | ```js 95 | document.getElementsByClassName('highlight'); 96 | ``` 97 | 98 | ![getElementsByClassName Example](images/DOM5.png) 99 | 100 | --- 101 | 102 | ### **Creating and Adding Elements to the DOM** 103 | 104 | Creating and adding elements to the Document Object Model (DOM) is a fundamental aspect of web development that allows you to dynamically modify the content and structure of a web page. In this section, we will explore how to create new elements and insert them into the DOM using JavaScript. 105 | 106 | **Creating Elements** 107 | 108 | To create a new element in the DOM, you can use the `document.createElement()` method. This method takes the tag name of the element you want to create as an argument and returns a new element node. For example: 109 | 110 | ```js 111 | const newDiv = document.createElement('div'); 112 | ``` 113 | 114 | In this example, a new `
` element is created and stored in the `newDiv` variable. 115 | 116 | **Modifying Element Properties** 117 | 118 | You can modify various properties of the newly created element before adding it to the DOM. This includes setting attributes, adding classes, and applying styles. 119 | 120 | ```js 121 | newDiv.className = 'box'; 122 | newDiv.id = 'myBox'; 123 | newDiv.setAttribute('title', 'A Box Element'); 124 | newDiv.style.backgroundColor = 'blue'; 125 | newDiv.textContent = 'This is a blue box.'; 126 | ``` 127 | 128 | **Appending Elements** 129 | 130 | Once you've created and configured the new element, you can append it to an existing element in the DOM using methods like `appendChild()` or `insertBefore()`. 131 | 132 | ```js 133 | const parentElement = document.getElementById('container'); 134 | parentElement.appendChild(newDiv); 135 | ``` 136 | 137 | In this example, the `newDiv` element is appended as a child of the element with the ID `container`. 138 | 139 | **Example: Creating a Dynamic List** 140 | 141 | Let's create a simple example where we generate an unordered list (UL) and populate it with list items (LI) based on an array of data. 142 | 143 | ```HTML 144 | 145 | 146 | 147 | Dynamic List Example 148 | 149 | 150 | 151 | 162 | 163 | 164 | ``` 165 | 166 | ![Dynamic List Example](images/DOM6.png) 167 | 168 | ## How Finding HTML Objects 169 | 170 | | Property | Description | 171 | | ------------------------ | ---------------------------------------------------------------- | 172 | | document.baseURI | Returns the absolute base URI of the document | 173 | | document.body | Returns the `` element | 174 | | document.cookie | Returns the document's cookie | 175 | | document.doctype | Returns the document's doctype | 176 | | document.documentElement | Returns the `` element | 177 | | document.documentMode | Returns the mode used by the browser | 178 | | document.documentURI | Returns the URI of the document | 179 | | document.domain | Deprecated. Do not use it. | 180 | | document.domConfig | Deprecated. Do not use it. | 181 | | document.embeds | Returns all `` elements | 182 | | document.forms | Returns all `
` elements | 183 | | document.head | Returns the `` element | 184 | | document.images | Returns all elements | 185 | | document.implementation | Returns the DOM implementation | 186 | | document.inputEncoding | Returns the document's encoding (character set) | 187 | | document.lastModified | Returns the date and time the document was updated | 188 | | document.links | Returns all and `` elements that have a href attribute | 189 | | document.readyState | Returns the (loading) status of the document | 190 | | document.referrer | Returns the URI of the referrer (the linking document) | 191 | | document.scripts | Returns all ` 253 | 254 | 255 | ``` 256 | 257 | 258 | ![Event Listener Example](images/DOM7.gif) 259 | 260 | #### **Explanation of the Code** 261 | 262 | 1. **We selected the buttons using `document.getElementById()`** 263 | 264 | ```js 265 | const btn1 = document.getElementById('btn1'); const btn2 = document.getElementById('btn2'); const btn3 = document.getElementById('btn3');` 266 | ``` 267 | 268 | 2. **We added an event listener for each button:** 269 | - **Button 1 (`click` event)** 270 | ```js 271 | btn1.addEventListener('click', function() { 272 | alert('Islam clicked this button!'); 273 | }); 274 | 275 | ``` 276 | When clicked the button, an **alert message** appears 277 | 278 | - Button 2 (`mouseover` event) 279 | 280 | ```js 281 | btn2.addEventListener('mouseover', function() { 282 | alert('Welcom Eng. Mater!'); 283 | }); 284 | 285 | ``` 286 | When hover over the button, an **alert message** appears. 287 | 288 | - **Button 3 (`dblclick` event)** 289 | ```js 290 | btn3.addEventListener('dblclick', function() { 291 | alert('Islam double-clicked this button!'); 292 | }); 293 | 294 | ``` 295 | When **double-clicks** the button, an **alert message** appears. 296 | 297 | --- 298 | 299 | ### **This is a List of JavaScript Event Handlers"** 300 | 301 | - **Page Events** such as: `onload`, `onunload`, `onbeforeunload`, `onpageshow`, `onpagehide`. 302 | - **User Interaction Events** such as: `onclick`, `ondblclick`, `onmousedown`, `onmouseup`, `onmousemove`. 303 | - **Input & Form Events** such as: `onchange`, `oninput`, `onfocus`, `onblur`, `onsubmit`, `onreset`. 304 | - **Media Events** such as: `onplay`, `onpause`, `onended`, `onvolumechange`. 305 | - **Animation & Transition Events** such as: `onanimationstart`, `onanimationend`, `ontransitionend`. 306 | - **Drag & Drop Events** such as: `ondrag`, `ondragover`, `ondrop`. 307 | - **Mouse Events** such as: `onmouseover`, `onmouseout`, `onmouseenter`, `onmouseleave`. 308 | - **Keyboard Events** such as: `onkeydown`, `onkeyup`, `onkeypress`. 309 | - **Scroll Events** such as: `onscroll`, `onscrollend`. 310 | - **Pointer Events** such as: `onpointerdown`, `onpointermove`, `onpointerup`. 311 | - **Touch Events** such as: `ontouchstart`, `ontouchmove`, `ontouchend`. 312 | -------------------------------------------------------------------------------- /Data-Types.md: -------------------------------------------------------------------------------- 1 | **It’s time to see the available types of data that we can store within our variables. This will cover some of the basics you’ll be using** 2 | 3 | - Strings: ‘Welcome’ or "Welcome" 4 | - Arrays: [1, 2, 3] 5 | - Objects: {Name: ‘islam’, WillBe: ‘Master Hacker’} 6 | - Booleans: true or false 7 | - Numbers: 123456 8 | - Floating-Point Numbers: 10.5 9 | - Undefined: x --> because if u want make it a String u must adding " or ' 10 | -------------------------------------------------------------------------------- /Functions.md: -------------------------------------------------------------------------------- 1 | ### Functions 2 | 3 | Quite often we need to perform a similar action in many places of the script. 4 | For example, we need to show a nice-looking message when a visitor logs in, logs out and maybe somewhere else. 5 | 6 | Functions are the main “building blocks” of the program. They allow the code to be called many times without repetition. 7 | 8 | We’ve already seen examples of built-in functions, like `alert(message)`, `prompt(message, default)` and `confirm(question)`. But we can create functions of our own as well. 9 | 10 | ### Function Declaration 11 | 12 | To create a function we can use a _function declaration_. 13 | 14 | It looks like this: 15 | ``` 16 | function showMessage() { 17 | alert( 'Hello everyone!' ); 18 | } 19 | ``` 20 | 21 | The `function` keyword goes first, then goes the _name of the function_, then a list of _parameters_ between the parentheses and finally the code of the function, also named “the function body”, between curly braces. 22 | 23 | Our new function can be called by its name: `showMessage()`. 24 | For instance: 25 | ``` 26 | function showMessage() { 27 | alert( 'Hello everyone!' ); 28 | } 29 | 30 | showMessage(); 31 | showMessage(); 32 | ``` 33 | 34 | The call `showMessage()` executes the code of the function. Here we will see the message two times. 35 | 36 | This example clearly demonstrates one of the main purposes of functions: to avoid code duplication. 37 | 38 | If we ever need to change the message or the way it is shown, it’s enough to modify the code in one place: the function which outputs it. 39 | 40 | 41 | #### Local variables 42 | 43 | A variable declared inside a function is only visible inside that function. 44 | For example: 45 | ``` 46 | function showMessage() { 47 | let message = "Hello, I'm islam!"; // local variable 48 | 49 | alert( message ); 50 | } 51 | 52 | showMessage(); // Hello, I'm islam! 53 | 54 | alert( message ); // <-- Error! The variable is local to the function 55 | ``` 56 | 57 | 58 | #### Outer variables 59 | 60 | A function can access an outer variable as well, for example: 61 | ``` 62 | let userName = 'John'; 63 | 64 | function showMessage() { 65 | let message = 'Hello, ' + userName; 66 | alert(message); 67 | } 68 | 69 | showMessage(); // Hello, John 70 | ``` 71 | The function has full access to the outer variable. It can modify it as well. 72 | 73 | For instance: 74 | ``` 75 | let userName = 'John'; 76 | 77 | function showMessage() { 78 | userName = "Bob"; // (1) changed the outer variable 79 | 80 | let message = 'Hello, ' + userName; 81 | alert(message); 82 | } 83 | 84 | alert( userName ); // John before the function call 85 | 86 | showMessage(); 87 | 88 | alert( userName ); // Bob, the value was modified by the function 89 | ``` 90 | The outer variable is only used if there’s no local one. 91 | 92 | If a same-named variable is declared inside the function then it _shadows_ the outer one. For instance, in the code below the function uses the local `userName`. The outer one is ignored: 93 | ``` 94 | let userName = 'John'; 95 | 96 | function showMessage() { 97 | let userName = "Bob"; // declare a local variable 98 | 99 | let message = 'Hello, ' + userName; // Bob 100 | alert(message); 101 | } 102 | 103 | // the function will create and use its own userName 104 | showMessage(); 105 | 106 | alert( userName ); // John, unchanged, the function did not access the outer variable 107 | ``` 108 | 109 | --- 110 | 111 | #### Parameters 112 | 113 | We can pass arbitrary data to functions using parameters. 114 | In the example below, the function has two parameters: `from` and `text`. 115 | ``` 116 | function showMessage(from, text) { // parameters: from, text 117 | alert(from + ': ' + text); 118 | } 119 | 120 | showMessage('Islam', 'Hello!'); // Islam: Hello! (*) 121 | showMessage('Islam', "What's up?"); // Islam: What's up? (**) 122 | ``` 123 | 124 | When a value is passed as a function parameter, it’s also called an _argument_. 125 | 126 | In other words, to put these terms straight: 127 | 128 | - A parameter is the variable listed inside the parentheses in the function declaration (it’s a declaration time term). 129 | - An argument is the value that is passed to the function when it is called (it’s a call time term). 130 | 131 | We declare functions listing their parameters, then call them passing arguments. 132 | 133 | In the example above, one might say: “the function `showMessage` is declared with two parameters, then called with two arguments: `from` and `"Hello"`”. 134 | 135 | #### Default values 136 | 137 | If a function is called, but an argument is not provided, then the corresponding value becomes `undefined`. 138 | 139 | For instance, the aforementioned function `showMessage(from, text)` can be called with a single argument: 140 | `showMessage("islam");` 141 | 142 | That’s not an error. Such a call would output `"*islam*: undefined"`. As the value for `text` isn’t passed, it becomes `undefined`. 143 | 144 | We can specify the so-called “default” (to use if omitted) value for a parameter in the function declaration, using `=`: 145 | ``` 146 | function showMessage(from, text = "no text given") { 147 | alert( from + ": " + text ); 148 | } 149 | 150 | showMessage("Islam"); // Islam: no text given 151 | ``` 152 | Now if the `text` parameter is not passed, it will get the value `"no text given"`. 153 | 154 | --- 155 | 156 | Real-World Example: Checking a User's Password 157 | ``` 158 | function authenticateUser(username, password) { 159 | const storedUsername = "admin"; 160 | const storedPassword = "admin123"; 161 | 162 | if (username === storedUsername && password === storedPassword) { 163 | return "Login successful! "; 164 | } else { 165 | return "Invalid credentials "; 166 | } 167 | } 168 | 169 | // Testing the function 170 | console.log(authenticateUser("admin", "admin123")); // Login successful! 171 | console.log(authenticateUser("user", "password")); // Invalid credentials 172 | 173 | ``` 174 | 175 | **Try it to know how it's work ** 176 | -------------------------------------------------------------------------------- /Hello-world.md: -------------------------------------------------------------------------------- 1 | ### Hello World in JS 2 | 3 | We can print "Hello World" in multiple ways using JavaScript, but for now, we’ll take a simple look at them. Later, we will explain everything here in more detail. 4 | 5 | ### Using `console.log()` 6 | 7 | First, we have something called the **console log**. 8 | 9 | > The **console log** is a debugging tool in JavaScript that allows developers to print messages, test code, and debug applications. It is part of the browser’s Developer Tools and helps developers see the output of their scripts. 10 | 11 | To print "Hello World" using the console, we use: 12 | `console.log("Hello World");` 13 | 14 | You can try this by opening the browser console (`Ctrl + Shift + i` in Chrome) and typing the above command. 15 | 16 | --- 17 | 18 | ### Using `document.write()` and `document.writeln()` 19 | 20 | We can also print "Hello World" directly on a web page using: 21 | `document.write("Hello World");` 22 | Or 23 | `document.writeln("Hello World");` 24 | 25 | > `document.write()` adds content to the web page dynamically, while `document.writeln()` works similarly but adds a newline (`\n`) at the end of each statement. 26 | 27 | It’s important to note that **any JavaScript code can be executed in the console** as well. This means we can run `document.write("Hello World");` directly in the browser console, but it is more commonly used inside an HTML file. 28 | 29 | --- 30 | 31 | ### Writing "Hello World" in an HTML Page 32 | 33 | Another way to display "Hello World" is by embedding JavaScript inside an **HTML file** using the ` 40 | 41 | ``` 42 | 43 | When you open this HTML file in a browser, **"Hello World"** will appear on the page. 44 | 45 | --- 46 | 47 | 48 | ### Using innerHTML 49 | 50 | To access an HTML element, you can use the document.getElementById(id) method. 51 | 52 | Use the id attribute to identify the HTML element. 53 | 54 | Then use the innerHTML property to change the HTML content of the HTML element: 55 | 56 | Example 57 | ``` 58 | 59 | 60 | 61 | 62 |

My First Web Page

63 |

My First Paragraph

64 | 65 |

66 | 67 | 70 | 71 | 72 | 73 | ``` 74 | --- 75 | 76 | This is a basic introduction to printing "Hello World" in JavaScript. We will go into more detail about these methods and when to use them later. 77 | -------------------------------------------------------------------------------- /JS-Comments.md: -------------------------------------------------------------------------------- 1 | #### Single Line Comments 2 | 3 | Single line comments start with `//`. 4 | 5 | Any text between `//` and the end of the line will be ignored by JavaScript (will not be executed). 6 | 7 | This example uses a single-line comment. 8 | ``` 9 | let x = 5; // I will be executed 10 | // x = 6; I will NOT be executed 11 | 12 | ``` 13 | 14 | #### Multi-line Comments 15 | 16 | Multi-line comments start with `/*` and end with `*/`. 17 | 18 | Any text between `/*` and `*/` will be ignored by JavaScript. 19 | 20 | This example uses a multi-line comment (a comment block) to explain the code: 21 | 22 | ``` 23 | /* 24 | This is Comment and u can adding multiples line here 25 | */ 26 | ``` 27 | **We need to know this to prevent execution of code when we are testing vulnerabilities later** -------------------------------------------------------------------------------- /JavaScript-Engine.md: -------------------------------------------------------------------------------- 1 | ### In order to know how JavaScript works, we must know what JavaScript Engine is. 2 | A **JavaScript engine** is a program that **interprets and executes JavaScript code** inside a web browser or server. Every modern browser has its own JavaScript engine that **parses, compiles, and runs JavaScript efficiently**. 3 | - Google Chrome --> V8 Engine 4 | - Mozilla Firefox --> SpiderMonkey Engine 5 | - Microsoft Edge --> Chakra Engine 6 | ### From here we can know how The JavaScript Working. 7 | When you load a webpage, JavaScript runs inside the **JavaScript Engine** of the browser or on the **server**, It follows a specific execution process: 8 | 1. **Parsing:** The engine reads JavaScript code and converts it into an **Abstract Syntax Tree (AST)**. 9 | 2. **Compilation:** Modern JavaScript engines use **Just-In-Time (JIT) compilation** to convert JS code into machine code for faster execution. 10 | 3. **Execution:** The JavaScript Engine executes the code line by line using the **Call Stack** and **Event Loop** 11 | -------------------------------------------------------------------------------- /Logical-Operators.md: -------------------------------------------------------------------------------- 1 | ### Logical operators 2 | There are four logical operators in JavaScript: `||` (OR), `&&` (AND), `!` (NOT), `??` (Nullish Coalescing). Here we cover the first three, the `??` operator is in the next lesson. 3 | 4 | Although they are called “logical”, they can be applied to values of any type, not only Boolean. Their result can also be of any type. 5 | 6 | | Operator | Description | Example | 7 | | -------- | ----------- | ----------------------------- | 8 | | && | and | (x < 10 && y > 1) is true | 9 | | \|\| | or | (x == 5 \|\| y == 5) is false | 10 | | ! | not | !(x == y) is true | 11 | 12 | --- 13 | 14 | ### Comparison Operators 15 | Comparison operators are used in logical statements to determine equality or difference between variables or values. 16 | Let's say that `x=5` 17 | 18 | | == | equal to | x == 8 | false | 19 | | --- | --------------------------------- | --------- | ----- | 20 | | | | x == 5 | true | 21 | | | | x == "5" | true | 22 | | === | equal value and equal type | x === 5 | true | 23 | | | | x === "5" | false | 24 | | != | not equal | x != 8 | true | 25 | | !== | not equal value or not equal type | x !== 5 | false | 26 | | | | x !== "5" | true | 27 | | | | x !== 8 | True | 28 | -------------------------------------------------------------------------------- /Loops.md: -------------------------------------------------------------------------------- 1 | ### JavaScript Loops 2 | Loops are handy, if you want to run the same code over and over again, each time with a different value. 3 | 4 | #### The For Loop 5 | The `for` statement creates a loop with 3 optional expressions: 6 | ``` 7 | for (begin; condition; step) { 8 | // ... loop body ... 9 | } 10 | ``` 11 | 12 | ##### Example: 13 | ``` 14 | for (let i = 0; i < 3; i++) { // shows 0, then 1, then 2 15 | alert(i); 16 | } 17 | ``` 18 | 19 | Let’s examine the `for` statement part-by-part: 20 | 21 | | begin | `let i = 0` | Executes once upon entering the loop | 22 | | --------- | ----------- | -------------------------------------------------------------- | 23 | | condition | `i < 3` | Checked before every loop iteration. If false, the loop stops. | 24 | | body | `alert(i)` | Runs again and again while the condition is truthy | 25 | | step | `i++` | It increases by one with each iteration of the value. | 26 | 27 | #### Real-World Example: Looping Through an Array of Usernames 28 | you have a list of usernames and you want to print each one. Instead of writing `console.log()` multiple times, you can use a `for` loop 29 | ``` 30 | let users = ["islam", "khaled", "Matar", "Macro"]; 31 | 32 | for (let i = 0; i < users.length; i++) { 33 | console.log("Welcome, " + users[i] + "!"); 34 | } 35 | 36 | ``` 37 | 38 | users.length it's mean length of array --> 3 39 | so it will show all user tell rich number 4 or index 4 and stop 40 | and console log will show this result : 41 | 42 | ``` 43 | Welcome, islam! 44 | Welcome, khaled! 45 | Welcome, Matar! 46 | Welcome, Macro! 47 | ``` 48 | 49 | --- 50 | 51 | ### **While Loop in JavaScript** 52 | 53 | The `while` loop **keeps running as long as the condition is `true`**. It is useful when you **don’t know in advance** how many times the loop will run. 54 | 55 | ##### Example (Counting Numbers) 56 | ``` 57 | let i = 1; 58 | 59 | while (i <= 5) { 60 | console.log(i); 61 | i++; 62 | } 63 | ``` 64 | the console log will show from 1 to 5 65 | 66 | 67 | ##### Real-World Example 68 | ``` 69 | let password; 70 | 71 | while (password !== "admin123") { 72 | password = prompt("Enter the password:"); 73 | } 74 | 75 | alert("Access granted!"); 76 | 77 | ``` 78 | 79 | - The loop keeps asking the user for input **until** they enter `"admin123"`. 80 | - Once the correct password is entered, the loop stops, and `"Access granted!"` is shown. 81 | **you can try it in console to see how it work** 82 | 83 | ##### Summary: 84 | 85 | - Use `**for**` → When **you know** the number of iterations. 86 | - Use `**while**` → When **you don’t know** how many times the loop will execute. 87 | -------------------------------------------------------------------------------- /Nullish-Coalescing.md: -------------------------------------------------------------------------------- 1 | ### Nullish coalescing operator '??' 2 | 3 | The `??` operator returns the first argument if it is not **Nullish** (`null` or `undefined`). 4 | Otherwise it returns the second argument. 5 | The common use case for `??` is to provide a default value. 6 | 7 | For example, here we show `user` if its value isn’t `null/undefined`, otherwise `Anonymous`: 8 | ``` 9 | let user; 10 | 11 | alert(user ?? "Anonymous"); // Anonymous (user is undefined) 12 | ``` 13 | this mean if the user undefined make a Default value for it as an Anonymous 14 | 15 | Here’s the example with `user` assigned to a name 16 | ``` 17 | let user = "islam"; 18 | 19 | alert(user ?? "Anonymous"); // islam (user is not null/undefined) 20 | ``` 21 | 22 | We can also use a sequence of `??` to select the first value from a list that isn’t `null/undefined`. 23 | ``` 24 | let firstName = null; 25 | let lastName = null; 26 | let nickName = "Hacker"; 27 | 28 | // shows the first defined value: 29 | alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Hacker 30 | ``` 31 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript for Cyber Security 2 | 3 | This repository contains notes on JavaScript concepts relevant to penetration testers and bug hunters. It serves as a reference for myself and others who want to learn JavaScript for cybersecurity purposes. 4 | 5 | --- 6 | ## Table of Contents 7 | 8 | ### 1️⃣ JavaScript Basics 9 | - [What is JavaScript?](what-is-JavaScript.md) 10 | - [JavaScript Engine](JavaScript-Engine.md) 11 | - [Hello World in JavaScript](Hello-world.md) 12 | - [JavaScript Comments](JS-Comments.md) 13 | - [JavaScript Variables](Variables.md) 14 | - [JavaScript Data Types](Data-Types.md) 15 | 16 | ### 2️⃣ Core Operations & Data Handling 17 | - [Basic Operators](Basic-Operators.md) 18 | - [Type Conversions](Type-Conversions.md) 19 | - [User Interaction "Popup Boxes"](User-Interaction.md) 20 | 21 | ### 3️⃣ Control Flow 22 | - [Conditional Statements](Conditional-Statements.md) 23 | - [Logical Operators](Logical-Operators.md) 24 | - [Nullish Coalescing Operator](Nullish-Coalescing.md) 25 | - [Switch-Case Statement](Switch-Case.md) 26 | 27 | ### 4️⃣ Loops 28 | - [Loops: while, for](Loops.md) 29 | 30 | ### 5️⃣ Functions 31 | - [JavaScript Functions](Functions.md) 32 | 33 | ### 6️⃣ DOM 34 | - [Document Object Model](DOM.md) 35 | 36 | ### 7️⃣ BOM 37 | - [Browser Object Model](BOM.md) 38 | 39 | ### 8️⃣ Strict Mode & Code Quality 40 | - ["use strict" Mode](Use-Strict.md) 41 | 42 | --- 43 | --- 44 | -------------------------------------------------------------------------------- /Switch-Case.md: -------------------------------------------------------------------------------- 1 | ### **Switch Statement in JavaScript** 2 | 3 | The `switch` statement in JavaScript is used for decision-making when you need to compare a variable against multiple possible values. Instead of writing multiple `if-else` statements, a `switch` can make the code more readable and efficient. 4 | 5 | #### Example 6 | The `switch` has one or more `case` blocks and an optional default. 7 | It looks like this: 8 | ``` 9 | let a = 2 + 2; 10 | 11 | switch (a) { 12 | case 3: 13 | alert( 'Too small' ); 14 | break; 15 | case 4: 16 | alert( 'Exactly!' ); 17 | break; 18 | case 5: 19 | alert( 'Too big' ); 20 | break; 21 | default: 22 | alert( "I don't know such values" ); 23 | } 24 | ``` 25 | 26 | The alert here will be Exactly! 27 | Here the `switch` starts to compare `a` from the first `case` variant that is `3`. The match fails. 28 | Then `4`. That’s a match, so the execution starts from `case 4` until the nearest `break`. 29 | **If there is no `break` then the execution continues with the next `case` without any checks.** 30 | 31 | An example without `break`: 32 | ``` 33 | let a = 2 + 2; 34 | 35 | switch (a) { 36 | case 3: 37 | alert( 'Too small' ); 38 | case 4: 39 | alert( 'Exactly!' ); 40 | case 5: 41 | alert( 'Too big' ); 42 | default: 43 | alert( "I don't know such values" ); 44 | } 45 | ``` 46 | In the example above we’ll see sequential execution of three `alert`s: 4, 5, default. 47 | 48 | 49 | Now if we want to convert the first Example from `switch` to `if, else` To compare them 50 | 51 | will be like this 52 | ``` 53 | let a = 2 + 2; 54 | 55 | if (a === 3) { 56 | alert('Too small'); 57 | } else if (a === 4) { 58 | alert('Exactly!'); 59 | } else if (a === 5) { 60 | alert('Too big'); 61 | } else { 62 | alert("I don't know such values"); 63 | } 64 | 65 | ``` 66 | -------------------------------------------------------------------------------- /Type-Conversions.md: -------------------------------------------------------------------------------- 1 | ## Type conversions (Number(), String(), Boolean()). 2 | **Note:** You can try all the code examples in the console log. As mentioned before, any JavaScript code can be executed in the console log. 3 | ### String Conversion 4 | 5 | String conversion happens when we need the string form of a value. 6 | For example, `alert(value)` does it to show the value. 7 | We can also call the `String(value)` function to convert a value to a string: 8 | 9 | ``` 10 | let x = true; 11 | alert(typeof x); // boolean 12 | 13 | value = String(x); // now value is a string --> "true" 14 | alert(typeof x); // string 15 | ``` 16 | 17 | String conversion is mostly obvious. A `false` becomes `"false"`, `null` becomes `"null"`, etc. 18 | 19 | --- 20 | ### Numeric Conversion 21 | 22 | Numeric conversion in mathematical functions and expressions happens automatically. 23 | For example, when division `/` is applied to non-numbers: 24 | ``` 25 | alert( "6" / "2" ); // 3, strings are converted to numbers 26 | ``` 27 | 28 | We can use the `Number(value)` function to explicitly convert a `value` to a number: 29 | ``` 30 | let str = "123"; 31 | alert(typeof str); // string 32 | 33 | let num = Number(str); // becomes a number 123 without "" 34 | 35 | alert(typeof num); // number 36 | ``` 37 | 38 | Explicit conversion is usually required when we read a value from a string-based source like a text form but expect a number to be entered. 39 | 40 | If the string is not a valid number, the result of such a conversion is `NaN`. For instance: 41 | 42 | ``` 43 | let age = Number("an arbitrary string instead of a number"); 44 | 45 | alert(age); // NaN, conversion failed 46 | ``` 47 | 48 | ##### There is Rules For Numeric conversion --> 49 | Number(true) --> 1 50 | Number(false) -->0 51 | empty String : Number("") --> 0 52 | 53 | --- 54 | ### Boolean Conversion 55 | 56 | Boolean conversion is the simplest one. 57 | ##### The conversion rule --> 58 | 59 | - Values that are intuitively “empty”, like `0`, an empty string, `null`, `undefined`, and `NaN`, become `false`. 60 | - Other values become `true`. 61 | 62 | ``` 63 | alert( Boolean(1) ); // true 64 | alert( Boolean(0) ); // false 65 | 66 | alert( Boolean("hello") ); // true 67 | alert( Boolean("") ); // false 68 | 69 | alert( Boolean("0") ); // true 70 | alert( Boolean(" ") ); // spaces, also true (any non-empty string is true) 71 | ``` 72 | 73 | -------------------------------------------------------------------------------- /User-Interaction.md: -------------------------------------------------------------------------------- 1 | ### User interaction: alert(), prompt(), confirm(). 2 | 3 | **Note:** You can try all the code examples in the console log. As mentioned before, any JavaScript code can be executed in the console log. 4 | 5 | JavaScript allows us the privilege to which we can interact with the user and respond accordingly. It includes several user-interface functions which help in the interaction. Let’s take a look at them one by one. 6 | 7 | **JavaScript Window alert() Method** **:** It simply creates an alert box that may or may not have specified content inside it, but it always comes with the ‘OK’ button. It simply shows a message and pauses the execution of the script until you press the ‘OK’ button. The mini-window that pops up is called the ‘modal window’. 8 | 9 | ``` 10 | alert('HI there'); // with specified content 11 | alert(); // without any specified content 12 | ``` 13 | 14 | --- 15 | 16 | **JavaScript Window prompt() Method****:** Prompt is another user-interface function that normally contains two arguments. 17 | `prompt('text', default value);` 18 | 19 | The text is basically what you want to show the user and the default value argument is optional though it acts like a placeholder inside a text field. It is the most used interface as with it you can ask the user to input something and then use that input to build something. 20 | 21 | **Example:** With default parameter. 22 | ``` 23 | let x = prompt('Are you Hacker?', 'Iam Hacker'); 24 | 25 | alert(x); 26 | ``` 27 | 28 | You can enter anything and it will print that, it doesn’t necessarily have to be a number. Without the default value, you have to enter something in the text field otherwise it will print a blank space simply. 29 | 30 | **Example:** 31 | ``` 32 | let age = prompt('How old are you?'); 33 | 34 | alert(`You are ${age} years old!`); 35 | ``` 36 | 37 | --- 38 | 39 | **JavaScript Window confirm() Method** **:** The confirm function basically outputs a modal window with a question and two buttons ‘OK’ and ‘CANCEL’. 40 | 41 | Example: 42 | ``` 43 | // confirm example 44 | let isHappy = confirm('Are you Happy?'); 45 | alert(`You are ${isHappy}`); 46 | ``` 47 | 48 | It will print true or false based on your choice of clicking the ‘OK’ button or ‘CANCEL’ button respectively. 49 | -------------------------------------------------------------------------------- /Variables.md: -------------------------------------------------------------------------------- 1 | ### Variables (let, const, var). 2 | 3 | There are 3 types of variables in JavaScript: **var**, **let**, and **const**. 4 | 5 | The **var** (variable) keyword was originally the only variable available, but thanks to the upgrade to ECMAScript 6 back in 2015, we now have another 2 ways of declaring a variable or data types. 6 | 7 | **Quick Overview:** 8 | - **let**: If a variable is going to be reassigned later within the application, this is the ideal variable type to use. 9 | - **var**: It’s better to use either let or const for variables, but this variable type will still work and is still used in applications to this day. This variable can be updated and re-declared. 10 | - **const**: If the variable will never change or won’t be reassigned anywhere else in the application, this keyword is the best option. 11 | 12 | **Good things to remember:** 13 | - The **var** variable is globally scoped and can be updated and re-declared. 14 | - The **let** variable is block-scoped and can be updated but not re-declared. 15 | - The **const** variable is block-scoped and cannot be updated or re-declared. 16 | 17 | - Global Scope: A variable declared outside a function. This means all scripts and functions on a web application or webpage can access this variable. 18 | - Block Scope: A variable declared inside a block. This means we can use these variables inside of loops, if statements, or other declarations within curly brackets and have them be only used for that declaration instead of the entire application having access to it. 19 | --- 20 | -------------------------------------------------------------------------------- /images/DOM1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/islamkh0x0/JavaScript-for-Cyber-Security/283d0ea5c9a83e86737918f5986ab2d605b716e7/images/DOM1.png -------------------------------------------------------------------------------- /images/DOM2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/islamkh0x0/JavaScript-for-Cyber-Security/283d0ea5c9a83e86737918f5986ab2d605b716e7/images/DOM2.png -------------------------------------------------------------------------------- /images/DOM3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/islamkh0x0/JavaScript-for-Cyber-Security/283d0ea5c9a83e86737918f5986ab2d605b716e7/images/DOM3.png -------------------------------------------------------------------------------- /images/DOM4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/islamkh0x0/JavaScript-for-Cyber-Security/283d0ea5c9a83e86737918f5986ab2d605b716e7/images/DOM4.png -------------------------------------------------------------------------------- /images/DOM5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/islamkh0x0/JavaScript-for-Cyber-Security/283d0ea5c9a83e86737918f5986ab2d605b716e7/images/DOM5.png -------------------------------------------------------------------------------- /images/DOM6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/islamkh0x0/JavaScript-for-Cyber-Security/283d0ea5c9a83e86737918f5986ab2d605b716e7/images/DOM6.png -------------------------------------------------------------------------------- /images/DOM7.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/islamkh0x0/JavaScript-for-Cyber-Security/283d0ea5c9a83e86737918f5986ab2d605b716e7/images/DOM7.gif -------------------------------------------------------------------------------- /what-is-JavaScript.md: -------------------------------------------------------------------------------- 1 | # What is the JavaScript ? 2 | 3 | **JavaScript** is a **scripting** or **programming language** that runs on the **client-side** and, more recently, on the **server-side**. 4 | - It makes web pages **interactive** and allows content to be **updated dynamically** by writing specific code that executes the desired action. 5 | - It can **manipulate HTML and CSS elements**, allowing us to **add or remove inputs**, **attach actions to buttons**, and perform various tasks. 6 | - Additionally, it enables us to **control user input data** by defining and enforcing expected values. 7 | - **Fetching Data:** Communicate with servers via **APIs (AJAX, Fetch, WebSockets)**. 8 | 9 | --------------------------------------------------------------------------------