User ID: ${user.id}
43 |Name: ${user.name}
44 |Email: ${user.email}
45 |Username: ${user.username}
46 | `; 47 | } 48 | 49 | function clearUserData() { 50 | const userDataDiv = document.getElementById('userData'); 51 | userDataDiv.innerHTML = ''; 52 | } 53 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript Learning Notebooks 📚 2 | 3 | Welcome to my JavaScript learning journey captured through Jupyter notebooks! 🚀 This repository serves as a collection of my interactive code snippets, experiments, and projects as I delve deeper into the world of JavaScript. 4 | 5 | ## Introduction 6 | 7 | In this repository, you'll find Jupyter notebooks containing my progress, insights, and challenges as I explore various aspects of JavaScript. From basic syntax and data types to advanced topics like DOM manipulation and asynchronous programming, I aim to document my learning process for both personal reference and to assist fellow learners. 8 | 9 | ## Run Locally 10 | 11 | 1. Clone this repository: 12 | 13 | ```bash 14 | git clone https://github.com/yasir2002/js-learning-jupyter 15 | 16 | 2. Navigate to folder: 17 | ```bash 18 | cd ./js-learning-jupyter 19 | 20 | 3. Node and Jupyter is required to run all the snippets. Download node from [here](https://nodejs.org/en), Jupyter can be installed in VS Code from [here](https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter). 21 | 22 | 4. Open the project in VS code and easily learn JavaScript executing every example individually. 23 | 24 | 25 | ## Usage 🚀 26 | 27 | Feel free to explore the notebooks and use them as a reference for your own JavaScript learning journey. If you find any errors or have suggestions for improvement, please don't hesitate to reach out. 28 | 29 | ## Contributions 🤝 30 | 31 | I welcome contributions and feedback from the community. If you have any valuable insights or code examples to add, please feel free to open a pull request. Let's learn and grow together! 32 | 33 | ## License 📋 34 | 35 | This project is licensed under the [GPL License](LICENSE). 36 | 37 | Happy coding! 🌟 38 | -------------------------------------------------------------------------------- /3. Advance 🚀/event__loop.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [ 3 | { 4 | "cell_type": "markdown", 5 | "metadata": {}, 6 | "source": [ 7 | "**Event Loop in JavaScript**: The event loop is a core concept in JavaScript, enabling non-blocking, asynchronous execution. It ensures JavaScript can handle multiple tasks concurrently without freezing the main thread.\n", 8 | "\n", 9 | "- **Single-Threaded Nature**: JavaScript operates on a single thread, executing one piece of code at a time—known as the \"main thread.\"\n", 10 | "\n", 11 | "- **Blocking Operations**: Lengthy tasks, like I/O operations, could freeze an application if executed synchronously. JavaScript avoids this by using asynchronous mechanisms like [callbacks](https://www.w3schools.com/js/js_callback.asp), [promises](https://www.w3schools.com/js/js_promise.asp), and async/await.\n", 12 | "\n", 13 | "- **The Event Loop**: This loop constantly checks for pending tasks (e.g., callbacks) in the message queue. When the main thread is idle, it picks and executes the next task, ensuring responsive and non-blocking execution.\n", 14 | "\n", 15 | "Below representation of the event loop provides a way to grasp this fundamental concept:\n", 16 | "\n", 17 | "" 18 | ] 19 | } 20 | ], 21 | "metadata": { 22 | "kernelspec": { 23 | "display_name": "Python 3", 24 | "language": "python", 25 | "name": "python3" 26 | }, 27 | "language_info": { 28 | "codemirror_mode": { 29 | "name": "ipython", 30 | "version": 3 31 | }, 32 | "file_extension": ".py", 33 | "mimetype": "text/x-python", 34 | "name": "python", 35 | "nbconvert_exporter": "python", 36 | "pygments_lexer": "ipython3", 37 | "version": "3.12.0" 38 | } 39 | }, 40 | "nbformat": 4, 41 | "nbformat_minor": 2 42 | } 43 | -------------------------------------------------------------------------------- /2. Intermediate 🌟/2-Closures.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [ 3 | { 4 | "cell_type": "markdown", 5 | "metadata": {}, 6 | "source": [ 7 | "## Closures\n", 8 | "Imagine you have a treasure box, and you want to keep it safe from others. So, you lock it with a key, and only you have that key to open it. The treasure box is like a function, and the key is like a closure." 9 | ] 10 | }, 11 | { 12 | "cell_type": "markdown", 13 | "metadata": {}, 14 | "source": [ 15 | "In JavaScript, closures are used to keep variables and functions private, just like a treasure box that is only accessible through a key. The key is nothing but a closure, which keeps the variables and functions inside a function safe and secure from the outer world.\n", 16 | "When you create a closure, you create a small space where variables and functions can live, and it can be accessed by its inner functions. But these variables and functions are not accessible by the outer world, making it private." 17 | ] 18 | }, 19 | { 20 | "cell_type": "markdown", 21 | "metadata": {}, 22 | "source": [ 23 | "## Example \n", 24 | "For example, suppose you have a function that returns another function. The inner function can access the variables and functions of its outer function, but the outer function cannot access the variables and functions of the inner function" 25 | ] 26 | }, 27 | { 28 | "cell_type": "code", 29 | "execution_count": 3, 30 | "metadata": { 31 | "vscode": { 32 | "languageId": "javascript" 33 | } 34 | }, 35 | "outputs": [ 36 | { 37 | "name": "stdout", 38 | "output_type": "stream", 39 | "text": [ 40 | "\u001b[33m10\u001b[39m\n" 41 | ] 42 | } 43 | ], 44 | "source": [ 45 | "%%script node\n", 46 | "function outer() {\n", 47 | "let x = 10;\n", 48 | "\n", 49 | "function inner() {\n", 50 | "console.log(x);\n", 51 | "}\n", 52 | "\n", 53 | "return inner;\n", 54 | "}\n", 55 | "\n", 56 | "let innerFunction = outer();\n", 57 | "\n", 58 | "innerFunction(); // output: 10" 59 | ] 60 | } 61 | ], 62 | "metadata": { 63 | "kernelspec": { 64 | "display_name": "Python 3", 65 | "language": "python", 66 | "name": "python3" 67 | }, 68 | "language_info": { 69 | "codemirror_mode": { 70 | "name": "ipython", 71 | "version": 3 72 | }, 73 | "file_extension": ".py", 74 | "mimetype": "text/x-python", 75 | "name": "python", 76 | "nbconvert_exporter": "python", 77 | "pygments_lexer": "ipython3", 78 | "version": "3.12.0" 79 | } 80 | }, 81 | "nbformat": 4, 82 | "nbformat_minor": 2 83 | } 84 | -------------------------------------------------------------------------------- /1. Basics 🔰/9. DOMManipulation.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [ 3 | { 4 | "cell_type": "markdown", 5 | "metadata": {}, 6 | "source": [ 7 | "# DOM Manipulation in JavaScript\n", 8 | "\n", 9 | "## Introduction to the DOM\n", 10 | "\n", 11 | "The Document Object Model (DOM) represents the structure of an HTML document as a tree of objects. It provides a way for JavaScript to interact with and manipulate HTML elements.\n", 12 | "\n", 13 | "## Selecting Elements\n", 14 | "\n", 15 | "- **getElementById:** Selecting an element by its unique ID.\n", 16 | "- **getElementsByClassName and getElementsByTagName:** Selecting elements by class name or tag name.\n", 17 | "- **querySelector and querySelectorAll:** Using CSS selectors to select elements.\n", 18 | "\n", 19 | "## Modifying Elements\n", 20 | "\n", 21 | "- **innerHTML and textContent:** Changing the content of an element.\n", 22 | "- **setAttribute:** Modifying attributes of HTML elements.\n", 23 | "- **classList:** Adding, removing, and toggling CSS classes.\n", 24 | "\n", 25 | "## Creating and Deleting Elements\n", 26 | "\n", 27 | "- **createElement:** Creating new HTML elements.\n", 28 | "- **appendChild and removeChild:** Adding and removing elements from the DOM.\n", 29 | "\n", 30 | "## Event Handling with DOM\n", 31 | "\n", 32 | "- **addEventListener:** Attaching event listeners to respond to user interactions.\n", 33 | "- **Event Object:** Understanding the event object passed to event handlers.\n", 34 | "\n", 35 | "## Example:" 36 | ] 37 | }, 38 | { 39 | "cell_type": "code", 40 | "execution_count": null, 41 | "metadata": { 42 | "vscode": { 43 | "languageId": "javascript" 44 | } 45 | }, 46 | "outputs": [], 47 | "source": [ 48 | "// DOM Manipulation Example\n", 49 | "\n", 50 | "// Selecting an element by ID\n", 51 | "let myElement = document.getElementById(\"myElement\");\n", 52 | "\n", 53 | "// Modifying the content of the element\n", 54 | "myElement.innerHTML = \"New content\";\n", 55 | "\n", 56 | "// Creating a new element and appending it to the document\n", 57 | "let newElement = document.createElement(\"p\");\n", 58 | "newElement.textContent = \"This is a new paragraph\";\n", 59 | "document.body.appendChild(newElement);\n", 60 | "\n", 61 | "// Adding an event listener\n", 62 | "myElement.addEventListener(\"click\", function() {\n", 63 | " alert(\"Element clicked!\");\n", 64 | "});" 65 | ] 66 | }, 67 | { 68 | "cell_type": "markdown", 69 | "metadata": {}, 70 | "source": [ 71 | "Understanding DOM manipulation is crucial for building interactive and dynamic web applications. It forms the basis for creating responsive user interfaces and handling user input." 72 | ] 73 | } 74 | ], 75 | "metadata": { 76 | "language_info": { 77 | "name": "python" 78 | } 79 | }, 80 | "nbformat": 4, 81 | "nbformat_minor": 2 82 | } 83 | -------------------------------------------------------------------------------- /2. Intermediate 🌟/3-Promises&Async.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [ 3 | { 4 | "cell_type": "markdown", 5 | "metadata": {}, 6 | "source": [ 7 | "# Promises and Asynchronous Programming\n", 8 | "\n", 9 | "## Introduction to Promises\n", 10 | "\n", 11 | "- **Definition:** A promise represents the eventual completion or failure of an asynchronous operation and its resulting value.\n", 12 | "- **States:** Pending, Fulfilled, Rejected.\n", 13 | "- **Creating Promises:** Using the `Promise` constructor.\n", 14 | "\n", 15 | "## Chaining Promises\n", 16 | "\n", 17 | "- **`.then()` and `.catch()`:** Handling resolved and rejected states.\n", 18 | "- **Chaining Promises:** Sequencing asynchronous operations.\n", 19 | "\n", 20 | "## Async/Await Syntax\n", 21 | "\n", 22 | "- **`async` Functions:** Defining asynchronous functions.\n", 23 | "- **`await` Operator:** Pausing execution until a promise is settled.\n", 24 | "\n", 25 | "## Error Handling in Asynchronous Code\n", 26 | "\n", 27 | "- **Try-Catch with Promises:** Handling errors in asynchronous code.\n", 28 | "- **Promise.all and Promise.race:** Handling multiple promises concurrently.\n", 29 | "\n", 30 | "## Example:" 31 | ] 32 | }, 33 | { 34 | "cell_type": "code", 35 | "execution_count": null, 36 | "metadata": { 37 | "vscode": { 38 | "languageId": "javascript" 39 | } 40 | }, 41 | "outputs": [], 42 | "source": [ 43 | "\n", 44 | "// Promises and Asynchronous Programming Example\n", 45 | "\n", 46 | "// Creating a Promise\n", 47 | "let fetchData = new Promise((resolve, reject) => {\n", 48 | " setTimeout(() => {\n", 49 | " let data = { message: \"Async data fetched!\" };\n", 50 | " resolve(data);\n", 51 | " }, 2000);\n", 52 | "});\n", 53 | "\n", 54 | "// Chaining Promises\n", 55 | "fetchData\n", 56 | " .then((data) => {\n", 57 | " console.log(data.message);\n", 58 | " return new Promise((resolve) => {\n", 59 | " resolve(\"Additional data processed!\");\n", 60 | " });\n", 61 | " })\n", 62 | " .then((additionalData) => {\n", 63 | " console.log(additionalData);\n", 64 | " })\n", 65 | " .catch((error) => {\n", 66 | " console.error(\"Error:\", error);\n", 67 | " });\n", 68 | "\n", 69 | "// Async/Await Syntax\n", 70 | "async function fetchDataAsync() {\n", 71 | " try {\n", 72 | " let data = await fetchData;\n", 73 | " console.log(data.message);\n", 74 | " } catch (error) {\n", 75 | " console.error(\"Error:\", error);\n", 76 | " }\n", 77 | "}\n", 78 | "\n", 79 | "fetchDataAsync();" 80 | ] 81 | }, 82 | { 83 | "cell_type": "markdown", 84 | "metadata": {}, 85 | "source": [ 86 | "A [User Infromation Fetcher Project](../Projects%20📁/user-information-fetcher/) has the usage of Promises and Asynchronous programming in JavaScript." 87 | ] 88 | } 89 | ], 90 | "metadata": { 91 | "language_info": { 92 | "name": "python" 93 | } 94 | }, 95 | "nbformat": 4, 96 | "nbformat_minor": 2 97 | } 98 | -------------------------------------------------------------------------------- /1. Basics 🔰/10. Fuctions&Scopes.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [ 3 | { 4 | "cell_type": "markdown", 5 | "metadata": {}, 6 | "source": [ 7 | "# Functions and Scope in JavaScript\n", 8 | "\n", 9 | "## Introduction to Functions\n", 10 | "\n", 11 | "- **Function Definition:** Declaring and defining functions.\n", 12 | "- **Function Invocation:** Calling functions to execute their code.\n", 13 | "- **Parameters and Arguments:** Passing data into functions.\n", 14 | "\n", 15 | "## Function Scope\n", 16 | "\n", 17 | "- **Global Scope:** Variables defined outside functions.\n", 18 | "- **Local Scope:** Variables defined inside functions.\n", 19 | "- **Block Scope (with let and const):** Variables defined within blocks.\n", 20 | "\n", 21 | "## Function Expressions and Arrow Functions\n", 22 | "\n", 23 | "- **Function Expressions:** Defining functions as variables.\n", 24 | "- **Arrow Functions:** A concise syntax for function expressions.\n", 25 | "\n", 26 | "## Anonymous Functions and Callbacks\n", 27 | "\n", 28 | "- **Anonymous Functions:** Functions without a name.\n", 29 | "- **Callbacks:** Passing functions as arguments to other functions.\n", 30 | "\n", 31 | "## Closures\n", 32 | "\n", 33 | "- **Definition:** Functions that have access to variables from their outer (enclosing) scope.\n", 34 | "- **Use Cases:** Maintaining state, creating private variables.\n", 35 | "\n", 36 | "## Example:" 37 | ] 38 | }, 39 | { 40 | "cell_type": "code", 41 | "execution_count": null, 42 | "metadata": { 43 | "vscode": { 44 | "languageId": "javascript" 45 | } 46 | }, 47 | "outputs": [], 48 | "source": [ 49 | "// Functions and Scope Example\n", 50 | "\n", 51 | "// Function declaration\n", 52 | "function greet(name) {\n", 53 | " return \"Hello, \" + name + \"!\";\n", 54 | "}\n", 55 | "\n", 56 | "// Function invocation\n", 57 | "let greeting = greet(\"John\");\n", 58 | "console.log(greeting);\n", 59 | "\n", 60 | "// Function expression\n", 61 | "let multiply = function(a, b) {\n", 62 | " return a * b;\n", 63 | "};\n", 64 | "\n", 65 | "// Arrow function\n", 66 | "let add = (x, y) => x + y;\n", 67 | "\n", 68 | "// Closure example\n", 69 | "function outerFunction() {\n", 70 | " let outerVariable = \"I am from the outer function\";\n", 71 | "\n", 72 | " function innerFunction() {\n", 73 | " console.log(outerVariable);\n", 74 | " }\n", 75 | "\n", 76 | " return innerFunction;\n", 77 | "}\n", 78 | "\n", 79 | "let closureExample = outerFunction();\n", 80 | "closureExample(); // Prints \"I am from the outer function\"\n" 81 | ] 82 | }, 83 | { 84 | "cell_type": "markdown", 85 | "metadata": {}, 86 | "source": [ 87 | "Understanding functions and scope is fundamental to JavaScript development. Functions provide modularity, reusability, and structure to your code, while scope determines the visibility and lifetime of variables." 88 | ] 89 | } 90 | ], 91 | "metadata": { 92 | "language_info": { 93 | "name": "python" 94 | } 95 | }, 96 | "nbformat": 4, 97 | "nbformat_minor": 2 98 | } 99 | -------------------------------------------------------------------------------- /1. Basics 🔰/8. ConditionalStatements.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [ 3 | { 4 | "cell_type": "markdown", 5 | "metadata": {}, 6 | "source": [ 7 | "# Conditional Statements in JavaScript\n", 8 | "\n", 9 | "Conditional statements in JavaScript allow you to make decisions in your code. They are used to perform different actions based on different conditions. Let's explore the basic conditional statements: `if`, `else if`, and `else`.\n", 10 | "\n", 11 | "## Basic `if`, `else if`, and `else` Statements\n", 12 | "\n", 13 | "In JavaScript, the basic syntax for conditional statements looks like this:" 14 | ] 15 | }, 16 | { 17 | "cell_type": "code", 18 | "execution_count": null, 19 | "metadata": { 20 | "vscode": { 21 | "languageId": "javascript" 22 | } 23 | }, 24 | "outputs": [], 25 | "source": [ 26 | "// Basic if statement\n", 27 | "let temperature = 25;\n", 28 | "\n", 29 | "if (temperature > 30) {\n", 30 | " console.log(\"It's a hot day!\");\n", 31 | "} else if (temperature <= 30 && temperature >= 20) {\n", 32 | " console.log(\"It's a pleasant day.\");\n", 33 | "} else {\n", 34 | " console.log(\"It's a cold day.\");\n", 35 | "}\n" 36 | ] 37 | }, 38 | { 39 | "cell_type": "markdown", 40 | "metadata": {}, 41 | "source": [ 42 | "In the above code:\n", 43 | "\n", 44 | "- We use the if statement to check if the temperature is greater than 30.\n", 45 | "- If the condition is true, it prints \"It's a hot day!\"\n", 46 | "- If the condition is false, it moves to the else if statement and checks if the temperature is between 20 and 30.\n", 47 | "- If the second condition is true, it prints \"It's a pleasant day.\"\n", 48 | "- If none of the conditions is true, it goes to the else block and prints \"It's a cold day.\"\n" 49 | ] 50 | }, 51 | { 52 | "cell_type": "markdown", 53 | "metadata": {}, 54 | "source": [ 55 | "## Ternary Operator\n", 56 | "JavaScript also provides a concise way to write conditional statements using the ternary operator. Here's an example:" 57 | ] 58 | }, 59 | { 60 | "cell_type": "code", 61 | "execution_count": null, 62 | "metadata": { 63 | "vscode": { 64 | "languageId": "javascript" 65 | } 66 | }, 67 | "outputs": [], 68 | "source": [ 69 | "// Ternary Operator\n", 70 | "let isRaining = true;\n", 71 | "\n", 72 | "// Using a ternary operator to determine the message based on the value of isRaining\n", 73 | "let weatherMessage = isRaining ? 'Bring an umbrella.' : 'Enjoy the day!';\n", 74 | "\n", 75 | "console.log(weatherMessage);" 76 | ] 77 | }, 78 | { 79 | "cell_type": "markdown", 80 | "metadata": {}, 81 | "source": [ 82 | "The above code demonstrates the use of a ternary operator. The expression `isRaining` ? `'Bring an umbrella.'` : `'Enjoy the day!'` evaluates to `'Bring an umbrella.'` if `isRaining` is true and `'Enjoy the day!'` otherwise." 83 | ] 84 | }, 85 | { 86 | "cell_type": "markdown", 87 | "metadata": {}, 88 | "source": [ 89 | "Conditional statements are fundamental for controlling the flow of your JavaScript code. They allow you to execute different blocks of code based on varying conditions, making your programs more dynamic and responsive." 90 | ] 91 | } 92 | ], 93 | "metadata": { 94 | "language_info": { 95 | "name": "python" 96 | } 97 | }, 98 | "nbformat": 4, 99 | "nbformat_minor": 2 100 | } 101 | -------------------------------------------------------------------------------- /1. Basics 🔰/4. ArraysAndObjects.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [ 3 | { 4 | "cell_type": "markdown", 5 | "metadata": {}, 6 | "source": [ 7 | "# Working with Arrays and Objects in JavaScript\n", 8 | "\n", 9 | "## Introduction\n", 10 | "\n", 11 | "Arrays and objects are essential data structures in JavaScript that allow you to store and manipulate collections of data. This guide will cover the basics of working with arrays and objects in JavaScript.\n", 12 | "\n", 13 | "### Working with Arrays\n", 14 | "\n", 15 | "You can create arrays in JavaScript to store lists of values. You can see Arrays in detail in [Arrays in JavaScript](5.%20ArraysInJS.ipynb). Here's an example of creating an array and accessing its elements:" 16 | ] 17 | }, 18 | { 19 | "cell_type": "code", 20 | "execution_count": null, 21 | "metadata": { 22 | "vscode": { 23 | "languageId": "javascript" 24 | } 25 | }, 26 | "outputs": [], 27 | "source": [ 28 | "%%script node\n", 29 | "// Run node in Jupyter Notebook\n", 30 | "\n", 31 | "// Creating an array\n", 32 | "let fruits = [\"apple\", \"banana\", \"cherry\"];\n", 33 | "\n", 34 | "// Accessing array elements\n", 35 | "console.log(fruits[0]); // Output: 'apple'\n", 36 | "console.log(fruits.length); // Output: 3" 37 | ] 38 | }, 39 | { 40 | "cell_type": "markdown", 41 | "metadata": {}, 42 | "source": [ 43 | "You can also use various array methods such as push, pop, shift, unshift, slice, and splice to add, remove, and modify elements in the array.\n", 44 | "\n", 45 | "### Working with Objects\n", 46 | "\n", 47 | "Objects in JavaScript allow you to store collections of key-value pairs. You can see Objects in detail in [Objects in JavaScript](6.%20ObjectsInJS.ipynb) Here's an example of creating an object and accessing its properties:" 48 | ] 49 | }, 50 | { 51 | "cell_type": "code", 52 | "execution_count": null, 53 | "metadata": { 54 | "vscode": { 55 | "languageId": "javascript" 56 | } 57 | }, 58 | "outputs": [], 59 | "source": [ 60 | "%%script node\n", 61 | "// Run node in Jupyter Notebook\n", 62 | "\n", 63 | "// Creating an object\n", 64 | "let person = { name: \"Alice\", age: 25, profession: \"Engineer\" };\n", 65 | "\n", 66 | "// Accessing object properties\n", 67 | "console.log(person.name); // Output: 'Alice'\n", 68 | "console.log(person[\"age\"]); // Output: 25" 69 | ] 70 | }, 71 | { 72 | "cell_type": "markdown", 73 | "metadata": {}, 74 | "source": [ 75 | "You can add new properties to an object, delete existing properties, and loop through an object's properties using for...in loops.\n", 76 | "\n", 77 | "## Conclusion\n", 78 | "\n", 79 | "Mastering the manipulation of arrays and objects is crucial for handling complex data structures and creating dynamic applications in JavaScript. Experiment with various array and object methods to enhance your coding skills and build more robust applications." 80 | ] 81 | } 82 | ], 83 | "metadata": { 84 | "kernelspec": { 85 | "display_name": "Python 3", 86 | "language": "python", 87 | "name": "python3" 88 | }, 89 | "language_info": { 90 | "codemirror_mode": { 91 | "name": "ipython", 92 | "version": 3 93 | }, 94 | "file_extension": ".py", 95 | "mimetype": "text/x-python", 96 | "name": "python", 97 | "nbconvert_exporter": "python", 98 | "pygments_lexer": "ipython3", 99 | "version": "3.11.4" 100 | } 101 | }, 102 | "nbformat": 4, 103 | "nbformat_minor": 2 104 | } 105 | -------------------------------------------------------------------------------- /1. Basics 🔰/3. EventHandeling.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [ 3 | { 4 | "cell_type": "markdown", 5 | "metadata": {}, 6 | "source": [ 7 | "# JavaScript Events and Event Handling\n", 8 | "\n", 9 | "## Introduction\n", 10 | "\n", 11 | "Imagine your web page as a playground, and JavaScript events are like the playground rules. They tell your web page what to do when something exciting happens. 🎉\n", 12 | "\n", 13 | "For instance, when someone clicks a button, you can make a message appear. When they move their mouse over a picture, you can make it change color. JavaScript events are like the magic wand that brings your webpage to life!\n", 14 | "\n", 15 | "\n", 16 | "### Event Handling in HTML\n", 17 | "\n", 18 | "In HTML, you can use event attributes to handle events directly within the elements. Here's an example:\n", 19 | "\n", 20 | "```html\n", 21 | "\n", 22 | "\n", 23 | " \n", 24 | " \n", 25 | "\n", 26 | " \n", 31 | " \n", 32 | "\n", 33 | "```\n", 34 | "\n", 35 | "### Event Listeners in JavaScript\n", 36 | "\n", 37 | "JavaScript also allows you to add event listeners to elements, providing more flexibility and separation of concerns. Here's an example of adding an event listener to a button:\n", 38 | "\n", 39 | "```html\n", 40 | "\n", 41 | "\n", 42 | " \n", 43 | " \n", 44 | "\n", 45 | " \n", 51 | " \n", 52 | "\n", 53 | "```\n", 54 | "\n", 55 | "### Common Events and Event Handlers\n", 56 | "\n", 57 | "Here are some common events and their corresponding event handler functions:\n", 58 | "\n", 59 | "- **click event:**\n", 60 | "\n", 61 | "```javascript\n", 62 | "element.addEventListener(\"click\", function () {\n", 63 | " // code to handle click event\n", 64 | "});\n", 65 | "```\n", 66 | "\n", 67 | "- **mouseover event:**\n", 68 | "\n", 69 | "```javascript\n", 70 | "element.addEventListener(\"mouseover\", function () {\n", 71 | " // code to handle mouseover event\n", 72 | "});\n", 73 | "```\n", 74 | "\n", 75 | "- **keydown event:**\n", 76 | "\n", 77 | "```javascript\n", 78 | "document.addEventListener(\"keydown\", function (event) {\n", 79 | " // code to handle keydown event\n", 80 | " console.log(\"Key pressed: \" + event.key);\n", 81 | "});\n", 82 | "```\n", 83 | "\n", 84 | "- **contextmenu event:**\n", 85 | " - This event is triggered when the right mouse button is clicked, opening the context menu. It can be used to customize actions for right-click interactions.\n", 86 | "\n", 87 | "- **scroll event:**\n", 88 | " - The scroll event is fired when the user scrolls through a web page. It's useful for implementing effects that respond to scrolling, such as parallax backgrounds or fixed navigation bars.\n", 89 | "\n", 90 | "- **resize event:**\n", 91 | " - This event is triggered when the size of the browser window is changed. It's beneficial for dynamically adjusting the layout or elements based on the window dimensions.\n", 92 | "\n", 93 | "- **error event:**\n", 94 | " - The error event is triggered when an error occurs while loading an external resource, like an image or script. It's useful for handling errors gracefully and providing fallbacks.\n", 95 | "\n", 96 | "## Conclusion\n", 97 | "\n", 98 | "Understanding JavaScript events and event handling is crucial for creating interactive and dynamic web applications. Experiment with different events and event handlers to enhance the user experience and interactivity of your web pages.\n" 99 | ] 100 | } 101 | ], 102 | "metadata": { 103 | "kernelspec": { 104 | "display_name": "Python 3", 105 | "language": "python", 106 | "name": "python3" 107 | }, 108 | "language_info": { 109 | "name": "python", 110 | "version": "3.11.4" 111 | } 112 | }, 113 | "nbformat": 4, 114 | "nbformat_minor": 2 115 | } 116 | -------------------------------------------------------------------------------- /2. Intermediate 🌟/1-AsynchronousJS.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [ 3 | { 4 | "cell_type": "markdown", 5 | "metadata": {}, 6 | "source": [ 7 | "# Asynchronous JavaScript\n", 8 | "\n", 9 | "## Introduction\n", 10 | "\n", 11 | "Asynchronous JavaScript allows the execution of multiple tasks without blocking the main thread. It enables handling time-consuming operations such as fetching data from servers, reading files, or waiting for user input without freezing the user interface.\n", 12 | "\n", 13 | "### Callbacks\n", 14 | "\n", 15 | "Callbacks are a traditional way to handle asynchronous operations in JavaScript. They are functions passed as arguments to other functions and executed upon the completion of a task." 16 | ] 17 | }, 18 | { 19 | "cell_type": "code", 20 | "execution_count": null, 21 | "metadata": { 22 | "vscode": { 23 | "languageId": "javascript" 24 | } 25 | }, 26 | "outputs": [], 27 | "source": [ 28 | "%%script node\n", 29 | "// Run node in Jupyter Notebook\n", 30 | "\n", 31 | "// Example of a callback\n", 32 | "function fetchData(callback) {\n", 33 | " // Simulating data fetching\n", 34 | " setTimeout(() => {\n", 35 | " const data = 'Some data retrieved!';\n", 36 | " callback(data);\n", 37 | " }, 2000);\n", 38 | "}\n", 39 | "\n", 40 | "fetchData((data) => {\n", 41 | " console.log(data);\n", 42 | "});" 43 | ] 44 | }, 45 | { 46 | "cell_type": "markdown", 47 | "metadata": {}, 48 | "source": [ 49 | "### Promises\n", 50 | "\n", 51 | "Promises provide a more structured approach to handling asynchronous operations. They represent a value that may be available now, in the future, or never." 52 | ] 53 | }, 54 | { 55 | "cell_type": "code", 56 | "execution_count": null, 57 | "metadata": { 58 | "vscode": { 59 | "languageId": "javascript" 60 | } 61 | }, 62 | "outputs": [], 63 | "source": [ 64 | "%%script node\n", 65 | "// Run node in Jupyter Notebook\n", 66 | "\n", 67 | "\n", 68 | "// Example of a promise\n", 69 | "const fetchData = () => {\n", 70 | " return new Promise((resolve, reject) => {\n", 71 | " // Simulating data fetching\n", 72 | " setTimeout(() => {\n", 73 | " const data = \"Some data retrieved!\";\n", 74 | " resolve(data);\n", 75 | " }, 2000);\n", 76 | " });\n", 77 | "};\n", 78 | "\n", 79 | "fetchData()\n", 80 | " .then((data) => {\n", 81 | " console.log(data);\n", 82 | " })\n", 83 | " .catch((error) => {\n", 84 | " console.error(error);\n", 85 | " });" 86 | ] 87 | }, 88 | { 89 | "cell_type": "markdown", 90 | "metadata": {}, 91 | "source": [ 92 | "### Async/Await\n", 93 | "\n", 94 | "Async/Await is a modern approach to handle asynchronous operations, providing a more concise and readable syntax for writing asynchronous code." 95 | ] 96 | }, 97 | { 98 | "cell_type": "code", 99 | "execution_count": 1, 100 | "metadata": { 101 | "vscode": { 102 | "languageId": "javascript" 103 | } 104 | }, 105 | "outputs": [ 106 | { 107 | "name": "stdout", 108 | "output_type": "stream", 109 | "text": [ 110 | "Some data retrieved!\n" 111 | ] 112 | } 113 | ], 114 | "source": [ 115 | "%%script node\n", 116 | "// Run node in Jupyter Notebook\n", 117 | "\n", 118 | "// Example of async/await\n", 119 | "const fetchData = () => {\n", 120 | " return new Promise((resolve, reject) => {\n", 121 | " // Simulating data fetching\n", 122 | " setTimeout(() => {\n", 123 | " const data = \"Some data retrieved!\";\n", 124 | " resolve(data);\n", 125 | " }, 2000);\n", 126 | " });\n", 127 | "};\n", 128 | "\n", 129 | "async function getData() {\n", 130 | " try {\n", 131 | " const data = await fetchData();\n", 132 | " console.log(data);\n", 133 | " } catch (error) {\n", 134 | " console.error(error);\n", 135 | " }\n", 136 | "}\n", 137 | "\n", 138 | "getData();" 139 | ] 140 | }, 141 | { 142 | "cell_type": "markdown", 143 | "metadata": {}, 144 | "source": [ 145 | "### Conclusion\n", 146 | "\n", 147 | "Understanding asynchronous JavaScript is crucial for developing responsive and efficient web applications. By mastering asynchronous programming, you can create smoother user experiences and handle complex tasks seamlessly." 148 | ] 149 | } 150 | ], 151 | "metadata": { 152 | "kernelspec": { 153 | "display_name": "Python 3", 154 | "language": "python", 155 | "name": "python3" 156 | }, 157 | "language_info": { 158 | "codemirror_mode": { 159 | "name": "ipython", 160 | "version": 3 161 | }, 162 | "file_extension": ".py", 163 | "mimetype": "text/x-python", 164 | "name": "python", 165 | "nbconvert_exporter": "python", 166 | "pygments_lexer": "ipython3", 167 | "version": "3.11.4" 168 | } 169 | }, 170 | "nbformat": 4, 171 | "nbformat_minor": 2 172 | } 173 | -------------------------------------------------------------------------------- /1. Basics 🔰/7. LoopsInJS.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [ 3 | { 4 | "cell_type": "markdown", 5 | "metadata": {}, 6 | "source": [ 7 | "# JavaScript Loops\n", 8 | "\n", 9 | "## Introduction\n", 10 | "\n", 11 | "Loops in JavaScript are used to execute a block of code repeatedly as long as a specified condition is true. They provide a way to iterate over arrays, objects, and perform various tasks efficiently.\n", 12 | "\n", 13 | "### For Loop\n", 14 | "\n", 15 | "The for loop is commonly used when the number of iterations is known. It consists of three parts: initialization, condition, and increment/decrement." 16 | ] 17 | }, 18 | { 19 | "cell_type": "code", 20 | "execution_count": null, 21 | "metadata": { 22 | "vscode": { 23 | "languageId": "javascript" 24 | } 25 | }, 26 | "outputs": [], 27 | "source": [ 28 | "%%script node\n", 29 | "// Run node in Jupyter Notebook\n", 30 | "\n", 31 | "// For loop\n", 32 | "console.log(\"For Loop:\");\n", 33 | "for (let i = 0; i < 5; i++) {\n", 34 | " console.log(\"Iteration:\", i);\n", 35 | "}" 36 | ] 37 | }, 38 | { 39 | "cell_type": "markdown", 40 | "metadata": {}, 41 | "source": [ 42 | "### While Loop\n", 43 | "\n", 44 | "The while loop is used when the number of iterations is not known beforehand but depends on a condition being true." 45 | ] 46 | }, 47 | { 48 | "cell_type": "code", 49 | "execution_count": null, 50 | "metadata": { 51 | "vscode": { 52 | "languageId": "javascript" 53 | } 54 | }, 55 | "outputs": [], 56 | "source": [ 57 | "%%script node\n", 58 | "// Run node in Jupyter Notebook\n", 59 | "\n", 60 | "//While loop\n", 61 | "console.log(\"While Loop:\");\n", 62 | "let i = 0;\n", 63 | "while (i < 5) {\n", 64 | " console.log(\"Iteration:\", i);\n", 65 | " i++;\n", 66 | "}" 67 | ] 68 | }, 69 | { 70 | "cell_type": "markdown", 71 | "metadata": {}, 72 | "source": [ 73 | "### Do-While Loop\n", 74 | "\n", 75 | "The do-while loop is similar to the while loop but ensures that the code inside the loop is executed at least once, even if the condition is initially false." 76 | ] 77 | }, 78 | { 79 | "cell_type": "code", 80 | "execution_count": null, 81 | "metadata": { 82 | "vscode": { 83 | "languageId": "javascript" 84 | } 85 | }, 86 | "outputs": [], 87 | "source": [ 88 | "%%script node\n", 89 | "// Run node in Jupyter Notebook\n", 90 | "\n", 91 | "//Do while loop\n", 92 | "console.log(\"Do While Loop:\");\n", 93 | "i = 0;\n", 94 | "do {\n", 95 | " console.log(\"Iteration:\", i);\n", 96 | " i++;\n", 97 | "} while (i < 5);" 98 | ] 99 | }, 100 | { 101 | "cell_type": "markdown", 102 | "metadata": {}, 103 | "source": [ 104 | "### For-In Loop\n", 105 | "\n", 106 | "The for-in loop is used to iterate over the properties of an object." 107 | ] 108 | }, 109 | { 110 | "cell_type": "code", 111 | "execution_count": null, 112 | "metadata": { 113 | "vscode": { 114 | "languageId": "javascript" 115 | } 116 | }, 117 | "outputs": [], 118 | "source": [ 119 | "%%script node\n", 120 | "// Run node in Jupyter Notebook\n", 121 | "\n", 122 | "// For-In Loop\n", 123 | "console.log(\"For-In Loop:\");\n", 124 | "const obj = { a: 1, b: 2, c: 3 };\n", 125 | "for (const key in obj) {\n", 126 | " console.log(`${key}: ${obj[key]}`);\n", 127 | "}" 128 | ] 129 | }, 130 | { 131 | "cell_type": "markdown", 132 | "metadata": {}, 133 | "source": [ 134 | "### For-Of Loop\n", 135 | "\n", 136 | "The for-of loop is used to iterate over the elements of an array." 137 | ] 138 | }, 139 | { 140 | "cell_type": "code", 141 | "execution_count": null, 142 | "metadata": { 143 | "vscode": { 144 | "languageId": "javascript" 145 | } 146 | }, 147 | "outputs": [], 148 | "source": [ 149 | "%%script node\n", 150 | "// Run node in Jupyter Notebook\n", 151 | "\n", 152 | "// For-Of Loop\n", 153 | "console.log(\"For-Of Loop:\");\n", 154 | "const arr = [1, 2, 3, 4, 5];\n", 155 | "for (const element of arr) {\n", 156 | " console.log(\"Element:\", element);\n", 157 | "}" 158 | ] 159 | }, 160 | { 161 | "cell_type": "markdown", 162 | "metadata": {}, 163 | "source": [ 164 | "## Conclusion\n", 165 | "\n", 166 | "Understanding and using different types of loops is essential for writing efficient and effective JavaScript code. By leveraging these loop structures, you can easily handle repetitive tasks and iterate over data structures in your applications.\n", 167 | "\n", 168 | "Happy coding!" 169 | ] 170 | } 171 | ], 172 | "metadata": { 173 | "kernelspec": { 174 | "display_name": "Python 3", 175 | "language": "python", 176 | "name": "python3" 177 | }, 178 | "language_info": { 179 | "codemirror_mode": { 180 | "name": "ipython", 181 | "version": 3 182 | }, 183 | "file_extension": ".py", 184 | "mimetype": "text/x-python", 185 | "name": "python", 186 | "nbconvert_exporter": "python", 187 | "pygments_lexer": "ipython3", 188 | "version": "3.11.4" 189 | } 190 | }, 191 | "nbformat": 4, 192 | "nbformat_minor": 2 193 | } 194 | -------------------------------------------------------------------------------- /1. Basics 🔰/5. ArraysInJS.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [ 3 | { 4 | "cell_type": "markdown", 5 | "metadata": {}, 6 | "source": [ 7 | "# Arrays in JavaScript\n", 8 | "\n", 9 | "## Introduction\n", 10 | "\n", 11 | "Arrays in JavaScript are used to store multiple values in a single variable. They are a special type of object that provides a way to manage and manipulate collections of data efficiently.\n", 12 | "\n", 13 | "### Creating Arrays\n", 14 | "\n", 15 | "Arrays can be created using the array literal syntax or the `Array` constructor." 16 | ] 17 | }, 18 | { 19 | "cell_type": "code", 20 | "execution_count": null, 21 | "metadata": { 22 | "vscode": { 23 | "languageId": "javascript" 24 | } 25 | }, 26 | "outputs": [], 27 | "source": [ 28 | "// Array literal\n", 29 | "const fruits = [\"apple\", \"banana\", \"cherry\"];\n", 30 | "\n", 31 | "// Using Array constructor\n", 32 | "const numbers = new Array(1, 2, 3, 4, 5);" 33 | ] 34 | }, 35 | { 36 | "cell_type": "markdown", 37 | "metadata": {}, 38 | "source": [ 39 | "### Accessing Array Elements\n", 40 | "\n", 41 | "Individual elements within an array can be accessed using their index, starting from 0." 42 | ] 43 | }, 44 | { 45 | "cell_type": "code", 46 | "execution_count": null, 47 | "metadata": { 48 | "vscode": { 49 | "languageId": "javascript" 50 | } 51 | }, 52 | "outputs": [], 53 | "source": [ 54 | "%%script node\n", 55 | "// Run node in Jupyter Notebook\n", 56 | "\n", 57 | "// Accessing array elements\n", 58 | "const colors = [\"red\", \"green\", \"blue\"];\n", 59 | "console.log(colors[0]); // Output: 'red'\n", 60 | "console.log(colors[2]); // Output: 'blue'" 61 | ] 62 | }, 63 | { 64 | "cell_type": "markdown", 65 | "metadata": {}, 66 | "source": [ 67 | "### Modifying Arrays\n", 68 | "\n", 69 | "Arrays in JavaScript are mutable, meaning you can add, remove, and modify elements within an array." 70 | ] 71 | }, 72 | { 73 | "cell_type": "code", 74 | "execution_count": null, 75 | "metadata": { 76 | "vscode": { 77 | "languageId": "javascript" 78 | } 79 | }, 80 | "outputs": [], 81 | "source": [ 82 | "// Modifying arrays\n", 83 | "const animals = [\"dog\", \"cat\", \"rabbit\"];\n", 84 | "animals.push(\"horse\"); // Adding an element\n", 85 | "animals[1] = \"bird\"; // Modifying an element\n", 86 | "animals.pop(); // Removing the last element" 87 | ] 88 | }, 89 | { 90 | "cell_type": "markdown", 91 | "metadata": {}, 92 | "source": [ 93 | "### Array Methods\n", 94 | "\n", 95 | "JavaScript provides a variety of built-in methods for working with arrays, such as push, pop, shift, unshift, slice, splice, and more." 96 | ] 97 | }, 98 | { 99 | "cell_type": "code", 100 | "execution_count": null, 101 | "metadata": { 102 | "vscode": { 103 | "languageId": "javascript" 104 | } 105 | }, 106 | "outputs": [], 107 | "source": [ 108 | "// Array methods\n", 109 | "const numbers = [1, 2, 3, 4, 5];\n", 110 | "numbers.push(6); // Adding an element at the end\n", 111 | "numbers.pop(); // Removing the last element\n", 112 | "numbers.shift(); // Removing the first element\n", 113 | "numbers.unshift(0); // Adding an element at the beginning" 114 | ] 115 | }, 116 | { 117 | "cell_type": "markdown", 118 | "metadata": {}, 119 | "source": [ 120 | "### Iterating Over Arrays\n", 121 | "\n", 122 | "You can iterate over array elements using loops such as the for loop or the forEach method." 123 | ] 124 | }, 125 | { 126 | "cell_type": "code", 127 | "execution_count": null, 128 | "metadata": { 129 | "vscode": { 130 | "languageId": "javascript" 131 | } 132 | }, 133 | "outputs": [], 134 | "source": [ 135 | "%%script node\n", 136 | "// Run node in Jupyter Notebook\n", 137 | "\n", 138 | "// Iterating over arrays\n", 139 | "const numbers = [1, 2, 3, 4, 5];\n", 140 | "for (let i = 0; i < numbers.length; i++) {\n", 141 | " console.log(\"Element:\", numbers[i]);\n", 142 | "}\n", 143 | "\n", 144 | "// Using forEach method\n", 145 | "numbers.forEach((number) => {\n", 146 | " console.log(\"Element:\", number);\n", 147 | "});" 148 | ] 149 | }, 150 | { 151 | "cell_type": "markdown", 152 | "metadata": {}, 153 | "source": [ 154 | "## Conclusion\n", 155 | "\n", 156 | "Understanding how to work with arrays is crucial for handling collections of data in JavaScript. With the knowledge of array manipulation and iteration, you can effectively manage and process data within your applications.\n", 157 | "\n", 158 | "Happy coding!" 159 | ] 160 | } 161 | ], 162 | "metadata": { 163 | "kernelspec": { 164 | "display_name": "Python 3", 165 | "language": "python", 166 | "name": "python3" 167 | }, 168 | "language_info": { 169 | "codemirror_mode": { 170 | "name": "ipython", 171 | "version": 3 172 | }, 173 | "file_extension": ".py", 174 | "mimetype": "text/x-python", 175 | "name": "python", 176 | "nbconvert_exporter": "python", 177 | "pygments_lexer": "ipython3", 178 | "version": "3.11.4" 179 | } 180 | }, 181 | "nbformat": 4, 182 | "nbformat_minor": 2 183 | } 184 | -------------------------------------------------------------------------------- /1. Basics 🔰/2. FunctionsInJs.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [ 3 | { 4 | "cell_type": "markdown", 5 | "metadata": {}, 6 | "source": [ 7 | "## Introduction\n", 8 | "\n", 9 | "Functions in JavaScript are reusable blocks of code that can be called and executed. They play a crucial role in structuring and organizing code. This guide will cover the basics of creating and using functions in JavaScript.\n", 10 | "\n", 11 | "### Function Declaration\n", 12 | "\n", 13 | "You can declare a function in JavaScript using the `function` keyword, followed by the function name and parameters, if any. Here's an example:" 14 | ] 15 | }, 16 | { 17 | "cell_type": "code", 18 | "execution_count": 1, 19 | "metadata": { 20 | "vscode": { 21 | "languageId": "javascript" 22 | } 23 | }, 24 | "outputs": [], 25 | "source": [ 26 | "%%script node\n", 27 | "// Run node in Jupyter Notebook\n", 28 | "\n", 29 | "// Function Declaration\n", 30 | "function greet(name) {\n", 31 | " return 'Hello, ' + name + '!';\n", 32 | "}" 33 | ] 34 | }, 35 | { 36 | "cell_type": "markdown", 37 | "metadata": {}, 38 | "source": [ 39 | "### Function Call\n", 40 | "\n", 41 | "Once you've declared a function, you can call it and pass values to its parameters. Here's an example of calling the greet function:" 42 | ] 43 | }, 44 | { 45 | "cell_type": "code", 46 | "execution_count": 2, 47 | "metadata": { 48 | "vscode": { 49 | "languageId": "javascript" 50 | } 51 | }, 52 | "outputs": [ 53 | { 54 | "name": "stdout", 55 | "output_type": "stream", 56 | "text": [ 57 | "Hello, John!\n" 58 | ] 59 | } 60 | ], 61 | "source": [ 62 | "%%script node\n", 63 | "// Run node in Jupyter Notebook\n", 64 | "\n", 65 | "// Function declaration\n", 66 | "function greet(name) {\n", 67 | " return 'Hello, ' + name + '!';\n", 68 | "}\n", 69 | "\n", 70 | "// Function call\n", 71 | "console.log(greet('John'));" 72 | ] 73 | }, 74 | { 75 | "cell_type": "markdown", 76 | "metadata": {}, 77 | "source": [ 78 | "### Anonymous Functions\n", 79 | "\n", 80 | "You can also create anonymous functions, which are functions without a name. They are often used as callback functions or for immediate invocation. Here's an example:" 81 | ] 82 | }, 83 | { 84 | "cell_type": "code", 85 | "execution_count": 1, 86 | "metadata": { 87 | "vscode": { 88 | "languageId": "javascript" 89 | } 90 | }, 91 | "outputs": [ 92 | { 93 | "name": "stdout", 94 | "output_type": "stream", 95 | "text": [ 96 | "Delayed greeting after 3 seconds!\n" 97 | ] 98 | } 99 | ], 100 | "source": [ 101 | "%%script node\n", 102 | "// Run node in Jupyter Notebook\n", 103 | "\n", 104 | "// Anonymous function as a callback\n", 105 | "setTimeout(function() {\n", 106 | " console.log('Delayed greeting after 3 seconds!');\n", 107 | "}, 3000);" 108 | ] 109 | }, 110 | { 111 | "cell_type": "markdown", 112 | "metadata": {}, 113 | "source": [ 114 | "### Arrow Functions\n", 115 | "\n", 116 | "Arrow functions provide a more concise syntax for writing function expressions. They are particularly useful for shorter, one-line functions. Here's an example:" 117 | ] 118 | }, 119 | { 120 | "cell_type": "code", 121 | "execution_count": 4, 122 | "metadata": { 123 | "vscode": { 124 | "languageId": "javascript" 125 | } 126 | }, 127 | "outputs": [ 128 | { 129 | "name": "stdout", 130 | "output_type": "stream", 131 | "text": [ 132 | "Total Amount: $137.5\n" 133 | ] 134 | } 135 | ], 136 | "source": [ 137 | "%%script node\n", 138 | "// Run node in Jupyter Notebook\n", 139 | "\n", 140 | "\n", 141 | "const calculateTotal = (price, quantity) => {\n", 142 | " const subtotal = price * quantity;\n", 143 | " const tax = subtotal * 0.1; // if we keep the tax 10% \n", 144 | " return subtotal + tax;\n", 145 | "}\n", 146 | "\n", 147 | "console.log(`Total Amount: $${calculateTotal(25, 5)}`); // Output: Total Amount: $137.5\n" 148 | ] 149 | }, 150 | { 151 | "cell_type": "markdown", 152 | "metadata": {}, 153 | "source": [ 154 | "Pro Tip: Keep in mind that arrow functions are widely used in React.js for defining methods within components. They provide a clean and convenient way to handle event callbacks and other functions while preserving the context of `this` within your components. You'll see arrow functions playing a significant role in your future React projects.\n" 155 | ] 156 | }, 157 | { 158 | "cell_type": "markdown", 159 | "metadata": {}, 160 | "source": [ 161 | "## Conclusion\n", 162 | "\n", 163 | "Understanding how to create and use functions in JavaScript is fundamental for writing organized and efficient code. Experiment with different types of functions to improve your coding skills and create more robust applications." 164 | ] 165 | } 166 | ], 167 | "metadata": { 168 | "kernelspec": { 169 | "display_name": "Python 3", 170 | "language": "python", 171 | "name": "python3" 172 | }, 173 | "language_info": { 174 | "codemirror_mode": { 175 | "name": "ipython", 176 | "version": 3 177 | }, 178 | "file_extension": ".py", 179 | "mimetype": "text/x-python", 180 | "name": "python", 181 | "nbconvert_exporter": "python", 182 | "pygments_lexer": "ipython3", 183 | "version": "3.12.0" 184 | } 185 | }, 186 | "nbformat": 4, 187 | "nbformat_minor": 2 188 | } 189 | -------------------------------------------------------------------------------- /1. Basics 🔰/6. ObjectsInJS.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [ 3 | { 4 | "cell_type": "markdown", 5 | "metadata": {}, 6 | "source": [ 7 | "# Objects in JavaScript\n", 8 | "\n", 9 | "## Introduction\n", 10 | "\n", 11 | "Objects in JavaScript are a fundamental data structure used to store collections of data in key-value pairs. They allow for the creation of complex data structures and are a cornerstone of the language.\n", 12 | "\n", 13 | "### Creating Objects\n", 14 | "\n", 15 | "Objects can be created using object literal syntax or the `new Object()` constructor." 16 | ] 17 | }, 18 | { 19 | "cell_type": "code", 20 | "execution_count": null, 21 | "metadata": { 22 | "vscode": { 23 | "languageId": "javascript" 24 | } 25 | }, 26 | "outputs": [], 27 | "source": [ 28 | "const person = {\n", 29 | " name: \"John Doe\",\n", 30 | " age: 30,\n", 31 | " isStudent: true,\n", 32 | " hobbies: [\"reading\", \"hiking\", \"coding\"],\n", 33 | "};\n", 34 | "\n", 35 | "// Using Object constructor\n", 36 | "const car = new Object();\n", 37 | "car.make = \"Toyota\";\n", 38 | "car.model = \"Camry\";\n", 39 | "car.year = 2020;" 40 | ] 41 | }, 42 | { 43 | "cell_type": "markdown", 44 | "metadata": {}, 45 | "source": [ 46 | "### Accessing Object Properties\n", 47 | "\n", 48 | "You can access object properties using dot notation or square brackets." 49 | ] 50 | }, 51 | { 52 | "cell_type": "code", 53 | "execution_count": null, 54 | "metadata": { 55 | "vscode": { 56 | "languageId": "javascript" 57 | } 58 | }, 59 | "outputs": [], 60 | "source": [ 61 | "%%script node\n", 62 | "// Run node in Jupyter Notebook\n", 63 | "\n", 64 | "// Creating an object\n", 65 | "const person = {\n", 66 | " name: \"John Doe\",\n", 67 | " age: 30,\n", 68 | " isStudent: true,\n", 69 | " hobbies: [\"reading\", \"hiking\", \"coding\"],\n", 70 | " };\n", 71 | " \n", 72 | "// Accessing object properties\n", 73 | "console.log(person.name); // Output: 'John Doe'\n", 74 | "console.log(person[\"age\"]); // Output: 30" 75 | ] 76 | }, 77 | { 78 | "cell_type": "markdown", 79 | "metadata": {}, 80 | "source": [ 81 | "### Modifying Objects\n", 82 | "\n", 83 | "Objects in JavaScript are mutable, allowing you to add, update, or delete properties." 84 | ] 85 | }, 86 | { 87 | "cell_type": "code", 88 | "execution_count": null, 89 | "metadata": { 90 | "vscode": { 91 | "languageId": "javascript" 92 | } 93 | }, 94 | "outputs": [], 95 | "source": [ 96 | "%%script node\n", 97 | "// Run node in Jupyter Notebook\n", 98 | "\n", 99 | "//Creating an object\n", 100 | "const person = {\n", 101 | " name: \"John Doe\",\n", 102 | " age: 30,\n", 103 | " isStudent: true,\n", 104 | " hobbies: [\"reading\", \"hiking\", \"coding\"],\n", 105 | " };\n", 106 | "\n", 107 | "// Modifying objects\n", 108 | "person.age = 32; // Updating a property\n", 109 | "person.location = \"New York\"; // Adding a new property\n", 110 | "delete person.isStudent; // Deleting a property\n", 111 | "\n", 112 | "console.log(person); //displaying the object after modification" 113 | ] 114 | }, 115 | { 116 | "cell_type": "markdown", 117 | "metadata": {}, 118 | "source": [ 119 | "### Object Methods\n", 120 | "\n", 121 | "Objects can also contain functions as properties, known as methods." 122 | ] 123 | }, 124 | { 125 | "cell_type": "code", 126 | "execution_count": 7, 127 | "metadata": { 128 | "vscode": { 129 | "languageId": "javascript" 130 | } 131 | }, 132 | "outputs": [ 133 | { 134 | "name": "stdout", 135 | "output_type": "stream", 136 | "text": [ 137 | "Hello, my name is Alice!\n" 138 | ] 139 | } 140 | ], 141 | "source": [ 142 | "%%script node\n", 143 | "// Run node in Jupyter Notebook\n", 144 | "\n", 145 | "// Object methods\n", 146 | "const student = {\n", 147 | " name: \"Alice\",\n", 148 | " age: 25,\n", 149 | " greet: function () {\n", 150 | " return \"Hello, my name is \" + this.name + \"!\";\n", 151 | " },\n", 152 | "};\n", 153 | "console.log(student.greet()); // Output: 'Hello, my name is Alice!'" 154 | ] 155 | }, 156 | { 157 | "cell_type": "markdown", 158 | "metadata": {}, 159 | "source": [ 160 | "### Object Iteration\n", 161 | "\n", 162 | "You can iterate over an object's properties using for...in loops or Object.keys and Object.values methods." 163 | ] 164 | }, 165 | { 166 | "cell_type": "code", 167 | "execution_count": null, 168 | "metadata": { 169 | "vscode": { 170 | "languageId": "javascript" 171 | } 172 | }, 173 | "outputs": [], 174 | "source": [ 175 | "// Object iteration\n", 176 | "for (let key in person) {\n", 177 | " console.log(`${key}: ${person[key]}`);\n", 178 | "}\n", 179 | "\n", 180 | "Object.keys(car).forEach((key) => {\n", 181 | " console.log(`${key}: ${car[key]}`);\n", 182 | "});" 183 | ] 184 | }, 185 | { 186 | "cell_type": "markdown", 187 | "metadata": {}, 188 | "source": [ 189 | "## Conclusion\n", 190 | "\n", 191 | "Understanding how to create, access, and manipulate objects is essential for building complex data structures and applications in JavaScript. With objects, you can organize and manage data more effectively, enabling you to create dynamic and interactive web applications.\n", 192 | "Happy coding!" 193 | ] 194 | } 195 | ], 196 | "metadata": { 197 | "kernelspec": { 198 | "display_name": "Python 3", 199 | "language": "python", 200 | "name": "python3" 201 | }, 202 | "language_info": { 203 | "codemirror_mode": { 204 | "name": "ipython", 205 | "version": 3 206 | }, 207 | "file_extension": ".py", 208 | "mimetype": "text/x-python", 209 | "name": "python", 210 | "nbconvert_exporter": "python", 211 | "pygments_lexer": "ipython3", 212 | "version": "3.11.4" 213 | } 214 | }, 215 | "nbformat": 4, 216 | "nbformat_minor": 2 217 | } 218 | -------------------------------------------------------------------------------- /1. Basics 🔰/1.GettingStartedWithJS.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [ 3 | { 4 | "cell_type": "markdown", 5 | "metadata": {}, 6 | "source": [ 7 | "# Getting Started with JavaScript\n", 8 | "\n", 9 | "## Introduction\n", 10 | "\n", 11 | "JavaScript is a high-level, interpreted programming language that conforms to the [ECMAScript](https://262.ecma-international.org/) specification. It is commonly used to create interactive and dynamic elements within web pages. This guide will walk you through the foundational concepts of JavaScript.\n", 12 | "\n", 13 | "### Setting Up\n", 14 | "\n", 15 | "To run JavaScript code, you have several options:\n", 16 | "\n", 17 | "- **Web Browser and Developer Tools:** The quickest way to experiment with JavaScript is to use your web browser's built-in developer tools. Simply open your favorite browser (like [Google Chrome](https://www.google.com/chrome/), [Mozilla Firefox](https://www.mozilla.org/firefox/), or [Microsoft Edge](https://www.microsoft.com/edge/)), right-click on a web page, and select \"Inspect\" or \"Inspect Element.\" In the developer console, you can write and run JavaScript code.\n", 18 | "\n", 19 | "- **Local Development Environment:**\n", 20 | " - [Node.js](https://nodejs.org/): If you want to write JavaScript outside of the browser, Node.js is a popular choice. It provides a runtime environment for executing JavaScript code on your computer.\n", 21 | " - Text Editors: Consider using code editors like [Visual Studio Code](https://code.visualstudio.com/), [Sublime Text](https://www.sublimetext.com/), or [Atom](https://atom.io/) for a more customized development experience. These editors offer features like code highlighting, debugging, and extensions that make JavaScript development easier.\n", 22 | "\n", 23 | "- **Online Code Editors:** If you prefer a hassle-free setup, you can use online code editors that allow you to write and run JavaScript in your web browser without installing anything on your local machine. Here are a few popular options:\n", 24 | " - [CodePen](https://codepen.io/): An online community where you can write and share HTML, CSS, and JavaScript code snippets. Great for quickly prototyping and sharing your work.\n", 25 | " - [JSFiddle](https://jsfiddle.net/): A web-based tool for testing and sharing JavaScript, HTML, and CSS code. You can see live results on the page.\n", 26 | " - [Repl.it](https://replit.com/): An online platform that supports a wide range of programming languages, including JavaScript. You can code in the browser and run your programs instantly.\n", 27 | "\n", 28 | "These tools and platforms offer different options for experimenting with JavaScript, so choose the one that best fits your needs.\n", 29 | "\n", 30 | "\n", 31 | "## Basic Syntax\n", 32 | "\n", 33 | "### Variables and Data Types\n", 34 | "\n", 35 | "In JavaScript, you can declare variables using the `var`, `let`, or `const` keywords. It has various data types such as numbers, strings, booleans, objects, arrays, and more.\n", 36 | "\n" 37 | ] 38 | }, 39 | { 40 | "cell_type": "code", 41 | "execution_count": 2, 42 | "metadata": { 43 | "vscode": { 44 | "languageId": "javascript" 45 | } 46 | }, 47 | "outputs": [ 48 | { 49 | "ename": "SyntaxError", 50 | "evalue": "invalid syntax (649402130.py, line 1)", 51 | "output_type": "error", 52 | "traceback": [ 53 | "\u001b[1;36m Cell \u001b[1;32mIn[2], line 1\u001b[1;36m\u001b[0m\n\u001b[1;33m // Variable declaration\u001b[0m\n\u001b[1;37m ^\u001b[0m\n\u001b[1;31mSyntaxError\u001b[0m\u001b[1;31m:\u001b[0m invalid syntax\n" 54 | ] 55 | } 56 | ], 57 | "source": [ 58 | "// Variable declaration\n", 59 | "var greeting = 'Hello, world!';\n", 60 | "let number = 42;\n", 61 | "const pi = 3.14;\n", 62 | "\n", 63 | "// Data types\n", 64 | "let name = 'John Doe';\n", 65 | "let age = 30;\n", 66 | "let isStudent = true;\n", 67 | "let fruits = ['apple', 'banana', 'cherry'];\n", 68 | "let person = { name: 'Alice', age: 25 };\n" 69 | ] 70 | }, 71 | { 72 | "cell_type": "markdown", 73 | "metadata": {}, 74 | "source": [ 75 | "### Functions\n", 76 | "\n", 77 | "Functions in JavaScript are reusable blocks of code that can be called and executed. They can take parameters and return values." 78 | ] 79 | }, 80 | { 81 | "cell_type": "code", 82 | "execution_count": null, 83 | "metadata": { 84 | "vscode": { 85 | "languageId": "javascript" 86 | } 87 | }, 88 | "outputs": [], 89 | "source": [ 90 | "%%script node\n", 91 | "// Run node in Jupyter Notebook\n", 92 | "\n", 93 | "\n", 94 | "// Function declaration\n", 95 | "function greet(name) {\n", 96 | " return \"Hello, \" + name + \"!\";\n", 97 | "}\n", 98 | "\n", 99 | "// Function call\n", 100 | "console.log(greet(\"John\"));" 101 | ] 102 | }, 103 | { 104 | "cell_type": "markdown", 105 | "metadata": {}, 106 | "source": [ 107 | "### Control Structures\n", 108 | "\n", 109 | "JavaScript supports various control structures such as if-else statements, switch cases, and loops like for and while loops.\n" 110 | ] 111 | }, 112 | { 113 | "cell_type": "code", 114 | "execution_count": null, 115 | "metadata": { 116 | "vscode": { 117 | "languageId": "javascript" 118 | } 119 | }, 120 | "outputs": [], 121 | "source": [ 122 | "%%script node\n", 123 | "// Run node in Jupyter Notebook\n", 124 | "\n", 125 | "// If-else statement\n", 126 | "let num = 10;\n", 127 | "\n", 128 | "if (num > 0) {\n", 129 | " console.log(\"The number is positive.\");\n", 130 | "} else if (num < 0) {\n", 131 | " console.log(\"The number is negative.\");\n", 132 | "} else {\n", 133 | " console.log(\"The number is zero.\");\n", 134 | "}" 135 | ] 136 | }, 137 | { 138 | "cell_type": "code", 139 | "execution_count": null, 140 | "metadata": { 141 | "vscode": { 142 | "languageId": "javascript" 143 | } 144 | }, 145 | "outputs": [ 146 | { 147 | "name": "stdout", 148 | "output_type": "stream", 149 | "text": [ 150 | "Iteration: 0\n", 151 | "Iteration: 1\n", 152 | "Iteration: 2\n", 153 | "Iteration: 3\n", 154 | "Iteration: 4\n" 155 | ] 156 | } 157 | ], 158 | "source": [ 159 | "%%script node\n", 160 | "// Run node in Jupyter Notebook\n", 161 | "\n", 162 | "// For loop\n", 163 | "for (let i = 0; i < 5; i++) {\n", 164 | " console.log(\"Iteration: \" + i);\n", 165 | "}" 166 | ] 167 | }, 168 | { 169 | "cell_type": "markdown", 170 | "metadata": {}, 171 | "source": [ 172 | "### Document Object Model (DOM)\n", 173 | "\n", 174 | "JavaScript can work its magic on the Document Object Model (DOM) to breathe life into your web pages. With the power of DOM manipulation, you can seamlessly transform static web content into dynamic and interactive experiences, making your website truly come alive! 🚀\n" 175 | ] 176 | }, 177 | { 178 | "cell_type": "code", 179 | "execution_count": null, 180 | "metadata": { 181 | "vscode": { 182 | "languageId": "html" 183 | } 184 | }, 185 | "outputs": [], 186 | "source": [ 187 | "\n", 188 | "\n", 189 | " \n", 190 | " \n", 199 | " \n", 200 | " \n", 201 | "