├── JavaScript Fundamentals ├── 03 Advanced JavaScript Concepts │ ├── 09 Deployment │ │ ├── deployment.js │ │ └── deployment.html │ ├── 07 AI-ML with JavaScript │ │ ├── ai_ml_javascript.js │ │ └── ai_ml_javascript.html │ ├── 04 Frameworks and Libraries │ │ ├── frameworks_libraries.js │ │ └── frameworks_libraries.html │ ├── 08 Web Security │ │ ├── web_security.js │ │ └── web_security.html │ ├── 05 Meta-Programming │ │ ├── meta_programming.js │ │ └── meta_programming.html │ ├── 06 Server-Side JavaScript │ │ ├── server_side_javascript.js │ │ └── server_side_javascript.html │ ├── 02 Reactive Programming │ │ ├── reactive_programming.js │ │ └── reactive_programming.html │ ├── 03 Advanced Tooling │ │ ├── advanced_tooling.ts │ │ └── advanced_tooling.html │ ├── 01 Web Performance Optimization │ │ ├── web_performance_optimization.js │ │ └── web_performance_optimization.html │ └── README.md ├── 02 Intermediate JavaScript Concepts │ ├── 06 Regular Expressions │ │ ├── regular_expressions.js │ │ └── regular_expressions.html │ ├── 05 Module Systems │ │ ├── module_systems.js │ │ └── module_systems.html │ ├── 08 Memory Management │ │ ├── memory_management.js │ │ └── memory_management.html │ ├── 01 Functional Programming │ │ ├── functional_programming.js │ │ └── functional_programming.html │ ├── 04 AJAX and APIs │ │ ├── ajax_apis.js │ │ └── ajax_apis.html │ ├── 07 Advanced Asynchronous Patterns │ │ ├── advanced_async_patterns.js │ │ └── advanced_async_patterns.html │ ├── 03 Browser APIs │ │ ├── browser_apis.js │ │ └── browser_apis.html │ ├── 02 Advanced DOM and Events │ │ ├── advanced_dom_events.js │ │ └── advanced_dom_events.html │ └── README.md └── 01 Core JavaScript Foundations │ ├── 10 Event Loop │ ├── event_loop.js │ └── event_loop.html │ ├── 03 Functions │ ├── functions.js │ └── functions.html │ ├── 09 ES6+ Features │ ├── es6_features.js │ └── es6_features.html │ ├── 05 Error Handling │ ├── error_handling.js │ └── error_handling.html │ ├── 02 Control Flow │ ├── control_flow.js │ └── control_flow.html │ ├── 07 DOM Manipulation │ ├── dom_manipulation.js │ └── dom_manipulation.html │ ├── 01 Variables and Data Types │ ├── variables_data_types.js │ └── variables_data_types.html │ ├── 04 Array Methods │ ├── array_methods.js │ └── array_methods.html │ ├── 08 Asynchronous JavaScript │ ├── async_javascript.js │ └── async_javascript.html │ ├── 06 Objects and Prototypes │ ├── objects_prototypes.js │ └── objects_prototypes.html │ └── README.md ├── LICENSE └── README.md /JavaScript Fundamentals/03 Advanced JavaScript Concepts/09 Deployment/deployment.js: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to Deployment] 2 | // Learn JavaScript deployment techniques. 3 | 4 | function runDeploymentDemo() { 5 | // %% [2. Service Workers (Simulated)] 6 | const simulateServiceWorker = () => { 7 | console.log('Service Worker: Offline cache simulated'); 8 | }; 9 | simulateServiceWorker(); 10 | 11 | // %% [3. Practical Application] 12 | // Simulate PWA setup for synthetic data in AI/ML-like task 13 | const manifest = { 14 | name: 'ML App', 15 | start_url: './index.html', 16 | display: 'standalone' 17 | }; 18 | console.log(`PWA Manifest: ${JSON.stringify(manifest)}`); 19 | 20 | // %% [4. Interview Scenario: Deployment] 21 | /* 22 | Interview Scenario: Deployment 23 | Q: What are Service Workers and how do they enable PWAs? 24 | A: Service Workers handle caching and offline functionality for PWAs. 25 | Key: Enable fast, reliable apps even offline. 26 | Example: navigator.serviceWorker.register('sw.js'); 27 | */ 28 | } 29 | 30 | // Execute the demo 31 | runDeploymentDemo(); -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 rohanmistry231 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /JavaScript Fundamentals/03 Advanced JavaScript Concepts/07 AI-ML with JavaScript/ai_ml_javascript.js: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to AI/ML with JavaScript] 2 | // Learn AI/ML with TensorFlow.js. 3 | 4 | // Note: TensorFlow.js included via CDN in HTML 5 | async function runAIMLDemo() { 6 | // %% [2. TensorFlow.js Tensors] 7 | const tf = window.tf; 8 | const tensor = tf.tensor([1, 2, 3]); 9 | console.log(`Tensor: ${tensor.toString()}`); 10 | 11 | // %% [3. Practical Application] 12 | // Train a simple model on synthetic data 13 | const xs = tf.tensor2d([[1], [2], [3]]); 14 | const ys = tf.tensor2d([[2], [4], [6]]); 15 | const model = tf.sequential(); 16 | model.add(tf.layers.dense({ units: 1, inputShape: [1] })); 17 | model.compile({ optimizer: 'sgd', loss: 'meanSquaredError' }); 18 | await model.fit(xs, ys, { epochs: 10 }); 19 | const prediction = model.predict(tf.tensor2d([[4]])); 20 | console.log(`Prediction: ${prediction.dataSync()[0]}`); 21 | 22 | // %% [4. Interview Scenario: AI/ML with JavaScript] 23 | /* 24 | Interview Scenario: AI/ML with JavaScript 25 | Q: How does TensorFlow.js enable ML in the browser? 26 | A: TensorFlow.js uses WebGL for GPU acceleration and runs models client-side. 27 | Key: Ideal for real-time inference without server dependency. 28 | Example: const model = tf.sequential(); model.add(tf.layers.dense(...)); 29 | */ 30 | } 31 | 32 | // Execute the demo 33 | runAIMLDemo(); -------------------------------------------------------------------------------- /JavaScript Fundamentals/03 Advanced JavaScript Concepts/04 Frameworks and Libraries/frameworks_libraries.js: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to Frameworks and Libraries] 2 | // Learn JavaScript frameworks with React. 3 | 4 | // Note: React included via CDN in HTML 5 | function runFrameworksLibrariesDemo() { 6 | // %% [2. React Component] 7 | const { useState } = React; 8 | const App = () => { 9 | const [count, setCount] = useState(0); 10 | return React.createElement( 11 | 'div', 12 | null, 13 | React.createElement('p', null, `Count: ${count}`), 14 | React.createElement('button', { onClick: () => setCount(count + 1) }, 'Increment') 15 | ); 16 | }; 17 | ReactDOM.render(React.createElement(App), document.getElementById('root')); 18 | console.log('React: Component rendered'); 19 | 20 | // %% [3. Practical Application] 21 | // Render synthetic data for AI/ML-like task 22 | console.log('React: Synthetic data UI rendered via component'); 23 | 24 | // %% [4. Interview Scenario: Frameworks and Libraries] 25 | /* 26 | Interview Scenario: Frameworks and Libraries 27 | Q: What are React Hooks and how do they work? 28 | A: Hooks manage state and side effects in functional components. 29 | Key: useState and useEffect simplify component logic. 30 | Example: const [count, setCount] = useState(0); 31 | */ 32 | } 33 | 34 | // Execute the demo 35 | runFrameworksLibrariesDemo(); -------------------------------------------------------------------------------- /JavaScript Fundamentals/03 Advanced JavaScript Concepts/08 Web Security/web_security.js: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to Web Security] 2 | // Learn JavaScript web security practices. 3 | 4 | function runWebSecurityDemo() { 5 | // %% [2. XSS Prevention] 6 | const userInput = ''; 7 | const safeInput = userInput.replace(/[<>]/g, ''); 8 | const div = document.createElement('div'); 9 | div.textContent = safeInput; 10 | document.body.appendChild(div); 11 | console.log('XSS Prevention: Sanitized input displayed'); 12 | 13 | // %% [3. Practical Application] 14 | // Secure synthetic data display for AI/ML-like task 15 | const data = ['Safe', '']; 16 | const ul = document.createElement('ul'); 17 | data.forEach(item => { 18 | const li = document.createElement('li'); 19 | li.textContent = item.replace(/[<>]/g, ''); 20 | ul.appendChild(li); 21 | }); 22 | document.body.appendChild(ul); 23 | console.log('Secure Data: Sanitized list rendered'); 24 | 25 | // %% [4. Interview Scenario: Web Security] 26 | /* 27 | Interview Scenario: Web Security 28 | Q: How do you prevent XSS attacks in JavaScript? 29 | A: Sanitize user input and use textContent instead of innerHTML. 30 | Key: Avoid executing untrusted scripts in the DOM. 31 | Example: div.textContent = userInput.replace(/[<>]/g, ''); 32 | */ 33 | } 34 | 35 | // Execute the demo 36 | runWebSecurityDemo(); -------------------------------------------------------------------------------- /JavaScript Fundamentals/02 Intermediate JavaScript Concepts/06 Regular Expressions/regular_expressions.js: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to Regular Expressions] 2 | // Learn JavaScript regular expressions for pattern matching. 3 | 4 | function runRegularExpressionsDemo() { 5 | // %% [2. Pattern Matching] 6 | const text = 'Hello, world!'; 7 | const regex = /world/; 8 | console.log(`Pattern Match: ${regex.test(text)}`); 9 | 10 | // %% [3. RegExp Methods] 11 | const match = text.match(/world/); 12 | const execResult = regex.exec(text); 13 | console.log(`Match: ${match}, Exec: ${execResult ? execResult[0] : null}`); 14 | 15 | // %% [4. Common Patterns] 16 | const email = 'user@example.com'; 17 | const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; 18 | console.log(`Email Validation: ${emailRegex.test(email)}`); 19 | 20 | // %% [5. Practical Application] 21 | // Extract numbers from synthetic data for AI/ML-like task 22 | const data = 'Data: 10, 20, 30'; 23 | const numbers = data.match(/\d+/g); 24 | console.log(`Extracted Numbers: ${numbers}`); 25 | 26 | // %% [6. Interview Scenario: Regular Expressions] 27 | /* 28 | Interview Scenario: Regular Expressions 29 | Q: How do you validate an email address with a regex? 30 | A: Use a pattern to match the email format, ensuring valid characters and structure. 31 | Key: Ensure robust patterns for production use. 32 | Example: /^[^\s@]+@[^\s@]+\.[^\s@]+$/; 33 | */ 34 | } 35 | 36 | // Execute the demo 37 | runRegularExpressionsDemo(); -------------------------------------------------------------------------------- /JavaScript Fundamentals/01 Core JavaScript Foundations/10 Event Loop/event_loop.js: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to Event Loop] 2 | // Learn JavaScript event loop for async execution. 3 | 4 | function runEventLoopDemo() { 5 | // %% [2. Call Stack] 6 | function first() { console.log('First'); second(); } 7 | function second() { console.log('Second'); } 8 | first(); 9 | console.log('Call Stack Done'); 10 | 11 | // %% [3. Task Queue with setTimeout] 12 | setTimeout(() => console.log('setTimeout: Delayed'), 0); 13 | console.log('After setTimeout'); 14 | 15 | // %% [4. Microtask Queue with Promise] 16 | Promise.resolve('Promise: Microtask').then(console.log); 17 | console.log('After Promise'); 18 | 19 | // %% [5. Practical Application] 20 | // Simulate async data processing for AI/ML-like task 21 | function processData() { 22 | console.log('Start Processing'); 23 | setTimeout(() => console.log('Data Processed'), 1000); 24 | Promise.resolve('Metadata Ready').then(console.log); 25 | console.log('End Processing'); 26 | } 27 | processData(); 28 | 29 | // %% [6. Interview Scenario: Event Loop] 30 | /* 31 | Interview Scenario: Event Loop 32 | Q: How does the event loop handle tasks in JavaScript? 33 | A: The event loop processes the call stack, then microtasks, then tasks. 34 | Key: Microtasks (Promises) run before tasks (setTimeout). 35 | Example: Promise.resolve().then(() => console.log('Microtask')); 36 | */ 37 | } 38 | 39 | // Execute the demo 40 | runEventLoopDemo(); -------------------------------------------------------------------------------- /JavaScript Fundamentals/03 Advanced JavaScript Concepts/05 Meta-Programming/meta_programming.js: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to Meta-Programming] 2 | // Learn JavaScript meta-programming with Proxies. 3 | 4 | function runMetaProgrammingDemo() { 5 | // %% [2. Proxies] 6 | const target = { data: 42 }; 7 | const handler = { 8 | get: (obj, prop) => { 9 | console.log(`Accessed: ${prop}`); 10 | return obj[prop]; 11 | } 12 | }; 13 | const proxy = new Proxy(target, handler); 14 | console.log(`Proxy: ${proxy.data}`); 15 | 16 | // %% [3. Reflect API] 17 | const obj = { value: 10 }; 18 | Reflect.set(obj, 'value', 20); 19 | console.log(`Reflect: ${Reflect.get(obj, 'value')}`); 20 | 21 | // %% [4. Practical Application] 22 | // Track synthetic data access for AI/ML-like task 23 | const dataset = { points: [1, 2, 3] }; 24 | const dataProxy = new Proxy(dataset, { 25 | get: (obj, prop) => { 26 | console.log(`Dataset Accessed: ${prop}`); 27 | return obj[prop]; 28 | } 29 | }); 30 | console.log(`Data Proxy: ${dataProxy.points}`); 31 | 32 | // %% [5. Interview Scenario: Meta-Programming] 33 | /* 34 | Interview Scenario: Meta-Programming 35 | Q: What is a Proxy and how is it used? 36 | A: A Proxy intercepts operations on an object, like get or set. 37 | Key: Use for logging, validation, or custom behavior. 38 | Example: const proxy = new Proxy(target, { get: (obj, prop) => obj[prop] }); 39 | */ 40 | } 41 | 42 | // Execute the demo 43 | runMetaProgrammingDemo(); -------------------------------------------------------------------------------- /JavaScript Fundamentals/03 Advanced JavaScript Concepts/06 Server-Side JavaScript/server_side_javascript.js: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to Server-Side JavaScript] 2 | // Learn server-side JavaScript with Express. 3 | 4 | // Note: Simulated for browser; run with Node.js locally 5 | function runServerSideDemo() { 6 | // %% [2. Express.js (Simulated)] 7 | const simulateExpress = () => ({ 8 | get: (path, handler) => console.log(`GET ${path}: ${handler({ query: { id: 1 } }, {})}`), 9 | listen: port => console.log(`Server listening on port ${port}`) 10 | }); 11 | const app = simulateExpress(); 12 | app.get('/api/data', (req, res) => `Data for ID ${req.query.id}`); 13 | app.listen(3000); 14 | 15 | // %% [3. Practical Application] 16 | // Simulate API for synthetic data in AI/ML-like task 17 | const simulateAPI = () => ({ 18 | get: (path, handler) => console.log(`API Response: ${handler({}, {})}`) 19 | }); 20 | const api = simulateAPI(); 21 | api.get('/api/dataset', () => JSON.stringify([{ id: 1, value: 10 }])); 22 | console.log('Simulated API: Synthetic dataset served'); 23 | 24 | // %% [4. Interview Scenario: Server-Side JavaScript] 25 | /* 26 | Interview Scenario: Server-Side JavaScript 27 | Q: How does the Node.js event loop differ from the browser? 28 | A: Node.js event loop handles I/O and timers, not DOM events. 29 | Key: Optimized for server-side tasks like file I/O and networking. 30 | Example: app.get('/data', (req, res) => res.json({ data: 'value' })); 31 | */ 32 | } 33 | 34 | // Execute the demo 35 | runServerSideDemo(); -------------------------------------------------------------------------------- /JavaScript Fundamentals/03 Advanced JavaScript Concepts/02 Reactive Programming/reactive_programming.js: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to Reactive Programming] 2 | // Learn reactive programming with RxJS for event streams. 3 | 4 | // Note: RxJS included via CDN in HTML 5 | function runReactiveProgrammingDemo() { 6 | // %% [2. Observables] 7 | const { fromEvent } = rxjs; 8 | const button = document.createElement('button'); 9 | button.textContent = 'Click Me'; 10 | document.body.appendChild(button); 11 | const clickStream = fromEvent(button, 'click'); 12 | clickStream.subscribe(() => console.log('Observable: Button clicked')); 13 | 14 | // %% [3. Event Streams] 15 | const { map } = rxjs.operators; 16 | clickStream.pipe(map(() => new Date())).subscribe(time => console.log(`Event Stream: Clicked at ${time}`)); 17 | 18 | // %% [4. Practical Application] 19 | // Stream synthetic data for AI/ML-like task 20 | const { interval } = rxjs; 21 | const dataStream = interval(1000).pipe(map(i => ({ id: i, value: Math.random() }))); 22 | dataStream.subscribe(data => console.log(`Data Stream: ID ${data.id}, Value ${data.value}`)); 23 | 24 | // %% [5. Interview Scenario: Reactive Programming] 25 | /* 26 | Interview Scenario: Reactive Programming 27 | Q: What is an Observable in RxJS? 28 | A: An Observable is a stream of data that can be subscribed to for async events. 29 | Key: Use for handling async data like user inputs or API responses. 30 | Example: rxjs.fromEvent(button, 'click').subscribe(() => console.log('Clicked')); 31 | */ 32 | } 33 | 34 | // Execute the demo 35 | runReactiveProgrammingDemo(); -------------------------------------------------------------------------------- /JavaScript Fundamentals/03 Advanced JavaScript Concepts/03 Advanced Tooling/advanced_tooling.ts: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to Advanced Tooling] 2 | // Learn advanced tooling with TypeScript and testing. 3 | 4 | // Note: TypeScript compiled to JS via CDN in HTML 5 | function runAdvancedToolingDemo() { 6 | // %% [2. TypeScript Integration] 7 | interface DataPoint { 8 | id: number; 9 | value: number; 10 | } 11 | const data: DataPoint[] = [{ id: 1, value: 10 }, { id: 2, value: 20 }]; 12 | console.log(`TypeScript: ${JSON.stringify(data)}`); 13 | 14 | // %% [3. Jest Testing (Simulated)] 15 | const add = (a: number, b: number): number => a + b; 16 | const testAdd = () => { 17 | const result = add(2, 3); 18 | console.log(`Jest (Simulated): add(2, 3) === 5: ${result === 5}`); 19 | }; 20 | testAdd(); 21 | 22 | // %% [4. Practical Application] 23 | // Process synthetic data with TypeScript for AI/ML-like task 24 | const normalize = (data: DataPoint[]): DataPoint[] => { 25 | const max = Math.max(...data.map(d => d.value)); 26 | return data.map(d => ({ ...d, value: d.value / max })); 27 | }; 28 | console.log(`Normalized Data: ${JSON.stringify(normalize(data))}`); 29 | 30 | // %% [5. Interview Scenario: Advanced Tooling] 31 | /* 32 | Interview Scenario: Advanced Tooling 33 | Q: How does TypeScript improve JavaScript development? 34 | A: TypeScript adds static typing, catching errors at compile time. 35 | Key: Enhances code reliability and IDE support. 36 | Example: interface User { name: string; age: number; } 37 | */ 38 | } 39 | 40 | // Execute the demo 41 | runAdvancedToolingDemo(); -------------------------------------------------------------------------------- /JavaScript Fundamentals/02 Intermediate JavaScript Concepts/05 Module Systems/module_systems.js: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to Module Systems] 2 | // Learn JavaScript module systems for organized code. 3 | 4 | // Note: Modules require a module system; simulated here for demo 5 | function runModuleSystemsDemo() { 6 | // %% [2. CommonJS (Simulated)] 7 | const commonJSModule = { 8 | add: (a, b) => a + b 9 | }; 10 | console.log(`CommonJS (Simulated): ${commonJSModule.add(2, 3)}`); 11 | 12 | // %% [3. ES Modules (Simulated)] 13 | const esModule = { 14 | multiply: (a, b) => a * b 15 | }; 16 | console.log(`ES Module (Simulated): ${esModule.multiply(2, 3)}`); 17 | 18 | // %% [4. Dynamic Imports (Simulated)] 19 | const dynamicImport = () => Promise.resolve({ divide: (a, b) => a / b }); 20 | dynamicImport().then(module => console.log(`Dynamic Import: ${module.divide(6, 2)}`)); 21 | 22 | // %% [5. Practical Application] 23 | // Modular data processing for AI/ML-like task 24 | const dataModule = { 25 | normalize: data => data.map(x => x / Math.max(...data)) 26 | }; 27 | const data = [10, 20, 30]; 28 | console.log(`Modular Data: ${dataModule.normalize(data)}`); 29 | 30 | // %% [6. Interview Scenario: Module Systems] 31 | /* 32 | Interview Scenario: Module Systems 33 | Q: What are the differences between CommonJS and ES Modules? 34 | A: CommonJS uses require/exports, is synchronous; ES Modules use import/export, support async. 35 | Key: ES Modules are standard for modern JavaScript. 36 | Example: import { add } from './module.js'; 37 | */ 38 | } 39 | 40 | // Execute the demo 41 | runModuleSystemsDemo(); -------------------------------------------------------------------------------- /JavaScript Fundamentals/01 Core JavaScript Foundations/03 Functions/functions.js: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to Functions] 2 | // Learn JavaScript functions for reusable code. 3 | 4 | function runFunctionsDemo() { 5 | // %% [2. Function Declarations and Expressions] 6 | function add(a, b) { return a + b; } 7 | const multiply = function (a, b) { return a * b; }; 8 | console.log(`Add: ${add(2, 3)}, Multiply: ${multiply(2, 3)}`); 9 | 10 | // %% [3. Arrow Functions and Defaults] 11 | const subtract = (a, b = 1) => a - b; 12 | console.log(`Subtract: ${subtract(5)}`); 13 | 14 | // %% [4. Rest and Spread] 15 | function sumAll(...numbers) { return numbers.reduce((sum, n) => sum + n, 0); } 16 | const nums = [1, 2, 3]; 17 | console.log(`Sum All: ${sumAll(...nums)}`); 18 | 19 | // %% [5. Closures] 20 | function counter() { 21 | let count = 0; 22 | return () => ++count; 23 | } 24 | const increment = counter(); 25 | console.log(`Closure Count: ${increment()}, ${increment()}`); 26 | 27 | // %% [6. Practical Application] 28 | // Process synthetic data with IIFE 29 | const processed = (function (data) { 30 | return data.map(x => x * 2); 31 | })([1, 2, 3]); 32 | console.log(`IIFE Processed: ${processed}`); 33 | 34 | // %% [7. Interview Scenario: Functions] 35 | /* 36 | Interview Scenario: Functions 37 | Q: What is a closure and how is it used? 38 | A: A closure is a function that retains access to its outer scope's variables. 39 | Key: Closures are useful for data privacy and stateful functions. 40 | Example: function counter() { let count = 0; return () => ++count; } 41 | */ 42 | } 43 | 44 | // Execute the demo 45 | runFunctionsDemo(); -------------------------------------------------------------------------------- /JavaScript Fundamentals/01 Core JavaScript Foundations/09 ES6+ Features/es6_features.js: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to ES6+ Features] 2 | // Learn modern JavaScript features for concise code. 3 | 4 | function runES6FeaturesDemo() { 5 | // %% [2. Template Literals] 6 | const name = 'Alice'; 7 | const greeting = `Hello, ${name}!`; 8 | console.log(`Template Literal: ${greeting}`); 9 | 10 | // %% [3. Destructuring] 11 | const person = { name: 'Bob', age: 25 }; 12 | const { name: personName, age } = person; 13 | const [first, second] = [1, 2]; 14 | console.log(`Destructuring: ${personName}, ${age}, ${first}, ${second}`); 15 | 16 | // %% [4. Modules (Simulated)] 17 | // Note: Modules require a module system; simulated here 18 | const module = { add: (a, b) => a + b }; 19 | console.log(`Simulated Module: ${module.add(2, 3)}`); 20 | 21 | // %% [5. Classes and Symbols] 22 | class User { 23 | constructor(name) { this.name = name; } 24 | [Symbol('id')] = 123; 25 | } 26 | const user = new User('Charlie'); 27 | console.log(`Class: ${user.name}, Symbol: ${user[Symbol('id')]}`); 28 | 29 | // %% [6. Practical Application] 30 | // Synthetic data processing with generators 31 | function* dataGenerator() { 32 | yield 1; 33 | yield 2; 34 | yield 3; 35 | } 36 | const data = [...dataGenerator()]; 37 | console.log(`Generator Data: ${data}`); 38 | 39 | // %% [7. Interview Scenario: ES6+ Features] 40 | /* 41 | Interview Scenario: ES6+ Features 42 | Q: What are template literals and how are they useful? 43 | A: Template literals allow string interpolation with ${}. 44 | Key: They simplify string formatting and multi-line strings. 45 | Example: const greeting = `Hello, ${name}!`; 46 | */ 47 | } 48 | 49 | // Execute the demo 50 | runES6FeaturesDemo(); -------------------------------------------------------------------------------- /JavaScript Fundamentals/02 Intermediate JavaScript Concepts/08 Memory Management/memory_management.js: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to Memory Management] 2 | // Learn JavaScript memory management for efficient code. 3 | 4 | function runMemoryManagementDemo() { 5 | // %% [2. Garbage Collection] 6 | let obj = { data: [1, 2, 3] }; 7 | obj = null; // Mark for garbage collection 8 | console.log('Garbage Collection: Object marked for cleanup'); 9 | 10 | // %% [3. WeakMap] 11 | const weakMap = new WeakMap(); 12 | let key = { id: 1 }; 13 | weakMap.set(key, 'Data'); 14 | console.log(`WeakMap: ${weakMap.get(key)}`); 15 | key = null; // Key can be garbage collected 16 | console.log('WeakMap: Key marked for cleanup'); 17 | 18 | // %% [4. Optimizing Object References] 19 | const cache = new Map(); 20 | const addToCache = (id, value) => { 21 | if (cache.size > 100) cache.clear(); 22 | cache.set(id, value); 23 | }; 24 | addToCache(1, [1, 2, 3]); 25 | console.log(`Optimized Cache: ${cache.size}`); 26 | 27 | // %% [5. Practical Application] 28 | // Manage memory for synthetic data in AI/ML-like task 29 | const largeData = Array(1000).fill({ value: Math.random() }); 30 | const weakCache = new WeakMap(); 31 | largeData.forEach((item, i) => weakCache.set({ id: i }, item)); 32 | console.log(`WeakCache Size: ${weakCache.has({ id: 0 })} (keys are temporary)`); 33 | 34 | // %% [6. Interview Scenario: Memory Management] 35 | /* 36 | Interview Scenario: Memory Management 37 | Q: What is a memory leak and how can you prevent it? 38 | A: A memory leak occurs when unused objects remain in memory. 39 | Key: Use WeakMap/WeakSet and nullify references to prevent leaks. 40 | Example: let obj = { data: [] }; obj = null; 41 | */ 42 | } 43 | 44 | // Execute the demo 45 | runMemoryManagementDemo(); -------------------------------------------------------------------------------- /JavaScript Fundamentals/01 Core JavaScript Foundations/05 Error Handling/error_handling.js: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to Error Handling] 2 | // Learn JavaScript error handling for robust code. 3 | 4 | function runErrorHandlingDemo() { 5 | // %% [2. Try-Catch] 6 | try { 7 | const result = undefinedVar * 2; 8 | } catch (error) { 9 | console.log(`Try-Catch Error: ${error.message}`); 10 | } 11 | 12 | // %% [3. Throw and Custom Errors] 13 | function divide(a, b) { 14 | if (b === 0) throw new Error('Division by zero'); 15 | return a / b; 16 | } 17 | try { 18 | const result = divide(10, 0); 19 | } catch (error) { 20 | console.log(`Custom Error: ${error.message}`); 21 | } 22 | 23 | // %% [4. Error Objects] 24 | try { 25 | throw new TypeError('Invalid type'); 26 | } catch (error) { 27 | console.log(`Error Type: ${error.name}, Message: ${error.message}`); 28 | } 29 | 30 | // %% [5. Practical Application] 31 | // Validate synthetic data for AI/ML-like task 32 | const data = [1, '2', null]; 33 | const validated = []; 34 | for (const item of data) { 35 | try { 36 | if (typeof item !== 'number') throw new Error('Non-numeric value'); 37 | validated.push(item); 38 | } catch (error) { 39 | console.log(`Validation Error: ${error.message} for ${item}`); 40 | } 41 | } 42 | console.log(`Validated Data: ${validated}`); 43 | 44 | // %% [6. Interview Scenario: Error Handling] 45 | /* 46 | Interview Scenario: Error Handling 47 | Q: How do you handle errors in JavaScript? 48 | A: Use try-catch to catch exceptions and throw to raise custom errors. 49 | Key: Proper error handling ensures robust applications. 50 | Example: try { throw new Error('Test'); } catch (e) { console.log(e.message); } 51 | */ 52 | } 53 | 54 | // Execute the demo 55 | runErrorHandlingDemo(); -------------------------------------------------------------------------------- /JavaScript Fundamentals/02 Intermediate JavaScript Concepts/01 Functional Programming/functional_programming.js: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to Functional Programming] 2 | // Learn JavaScript functional programming for predictable code. 3 | 4 | function runFunctionalProgrammingDemo() { 5 | // %% [2. Pure Functions] 6 | const add = (a, b) => a + b; 7 | console.log(`Pure Function: ${add(2, 3)}`); 8 | 9 | // %% [3. Higher-Order Functions] 10 | const withLogging = fn => (...args) => { 11 | console.log(`Calling function with args: ${args}`); 12 | return fn(...args); 13 | }; 14 | const loggedAdd = withLogging(add); 15 | console.log(`Higher-Order Function: ${loggedAdd(2, 3)}`); 16 | 17 | // %% [4. Currying] 18 | const curryMultiply = a => b => a * b; 19 | const double = curryMultiply(2); 20 | console.log(`Curried Function: ${double(5)}`); 21 | 22 | // %% [5. Function Composition] 23 | const compose = (f, g) => x => f(g(x)); 24 | const square = x => x * x; 25 | const increment = x => x + 1; 26 | const squareThenIncrement = compose(increment, square); 27 | console.log(`Function Composition: ${squareThenIncrement(3)}`); 28 | 29 | // %% [6. Practical Application] 30 | // Process synthetic data immutably for AI/ML-like task 31 | const data = [1, 2, 3]; 32 | const normalize = x => x / Math.max(...data); 33 | const processData = data => Object.freeze(data.map(normalize)); 34 | console.log(`Immutable Data: ${processData(data)}`); 35 | 36 | // %% [7. Interview Scenario: Functional Programming] 37 | /* 38 | Interview Scenario: Functional Programming 39 | Q: What is a pure function and why is it important? 40 | A: A pure function has no side effects and returns the same output for the same input. 41 | Key: Pure functions improve predictability and testability. 42 | Example: const add = (a, b) => a + b; 43 | */ 44 | } 45 | 46 | // Execute the demo 47 | runFunctionalProgrammingDemo(); -------------------------------------------------------------------------------- /JavaScript Fundamentals/02 Intermediate JavaScript Concepts/04 AJAX and APIs/ajax_apis.js: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to AJAX and APIs] 2 | // Learn JavaScript AJAX and API handling for data fetching. 3 | 4 | async function runAjaxAPIsDemo() { 5 | // %% [2. XMLHttpRequest] 6 | const xhr = new XMLHttpRequest(); 7 | xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1'); 8 | xhr.onload = () => console.log(`XMLHttpRequest: ${xhr.responseText}`); 9 | xhr.send(); 10 | 11 | // %% [3. Fetch API] 12 | try { 13 | const response = await fetch('https://jsonplaceholder.typicode.com/todos/2'); 14 | const data = await response.json(); 15 | console.log(`Fetch API: ${data.title}`); 16 | } catch (error) { 17 | console.log(`Fetch Error: ${error.message}`); 18 | } 19 | 20 | // %% [4. Axios] 21 | // Note: Axios included via CDN in HTML 22 | try { 23 | const response = await axios.get('https://jsonplaceholder.typicode.com/todos/3'); 24 | console.log(`Axios: ${response.data.title}`); 25 | } catch (error) { 26 | console.log(`Axios Error: ${error.message}`); 27 | } 28 | 29 | // %% [5. Practical Application] 30 | // Fetch synthetic data for AI/ML-like task 31 | const fakeAPI = () => fetch('https://jsonplaceholder.typicode.com/posts').then(res => res.json()); 32 | const processed = await fakeAPI().then(posts => posts.slice(0, 3).map(post => post.title)); 33 | console.log(`Processed API Data: ${processed.join(', ')}`); 34 | 35 | // %% [6. Interview Scenario: AJAX and APIs] 36 | /* 37 | Interview Scenario: AJAX and APIs 38 | Q: What is CORS and how does it affect API requests? 39 | A: CORS restricts cross-origin requests for security; servers must allow specific origins. 40 | Key: Use proper headers or proxies to handle CORS issues. 41 | Example: fetch('https://api.example.com', { mode: 'cors' }); 42 | */ 43 | } 44 | 45 | // Execute the demo 46 | runAjaxAPIsDemo(); -------------------------------------------------------------------------------- /JavaScript Fundamentals/02 Intermediate JavaScript Concepts/07 Advanced Asynchronous Patterns/advanced_async_patterns.js: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to Advanced Asynchronous Patterns] 2 | // Learn advanced async patterns for efficient code. 3 | 4 | async function runAdvancedAsyncPatternsDemo() { 5 | // %% [2. Promise Chaining] 6 | const fetchData = () => Promise.resolve([1, 2, 3]); 7 | fetchData() 8 | .then(data => data.map(x => x * 2)) 9 | .then(result => console.log(`Promise Chaining: ${result}`)); 10 | 11 | // %% [3. Promise.all] 12 | const promises = [ 13 | Promise.resolve(10), 14 | Promise.resolve(20), 15 | Promise.resolve(30) 16 | ]; 17 | const allResults = await Promise.all(promises); 18 | console.log(`Promise.all: ${allResults}`); 19 | 20 | // %% [4. Async Iterators] 21 | async function* asyncGenerator() { 22 | yield await Promise.resolve(1); 23 | yield await Promise.resolve(2); 24 | yield await Promise.resolve(3); 25 | } 26 | for await (const value of asyncGenerator()) { 27 | console.log(`Async Iterator: ${value}`); 28 | } 29 | 30 | // %% [5. Practical Application] 31 | // Concurrent data fetching for AI/ML-like task 32 | const fetchBatch = id => fetch(`https://jsonplaceholder.typicode.com/posts/${id}`).then(res => res.json()); 33 | const batchResults = await Promise.all([fetchBatch(1), fetchBatch(2)]); 34 | console.log(`Concurrent Fetch: ${batchResults.map(post => post.title).join(', ')}`); 35 | 36 | // %% [6. Interview Scenario: Advanced Asynchronous Patterns] 37 | /* 38 | Interview Scenario: Advanced Asynchronous Patterns 39 | Q: What is Promise.all and when would you use it? 40 | A: Promise.all runs multiple Promises concurrently and resolves when all complete. 41 | Key: Use for parallel API calls to improve performance. 42 | Example: Promise.all([fetch('url1'), fetch('url2')]); 43 | */ 44 | } 45 | 46 | // Execute the demo 47 | runAdvancedAsyncPatternsDemo(); -------------------------------------------------------------------------------- /JavaScript Fundamentals/02 Intermediate JavaScript Concepts/03 Browser APIs/browser_apis.js: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to Browser APIs] 2 | // Learn JavaScript browser APIs for enhanced web functionality. 3 | 4 | function runBrowserAPIsDemo() { 5 | // %% [2. LocalStorage and SessionStorage] 6 | localStorage.setItem('data', JSON.stringify([1, 2, 3])); 7 | const storedData = JSON.parse(localStorage.getItem('data')); 8 | console.log(`LocalStorage: ${storedData}`); 9 | 10 | // %% [3. Canvas API] 11 | const canvas = document.createElement('canvas'); 12 | canvas.width = 200; 13 | canvas.height = 100; 14 | const ctx = canvas.getContext('2d'); 15 | ctx.fillStyle = 'blue'; 16 | ctx.fillRect(10, 10, 50, 50); 17 | document.body.appendChild(canvas); 18 | console.log('Canvas: Blue rectangle drawn'); 19 | 20 | // %% [4. Geolocation API] 21 | if (navigator.geolocation) { 22 | navigator.geolocation.getCurrentPosition( 23 | pos => console.log(`Geolocation: Lat ${pos.coords.latitude}, Lon ${pos.coords.longitude}`), 24 | err => console.log(`Geolocation Error: ${err.message}`) 25 | ); 26 | } else { 27 | console.log('Geolocation: Not supported'); 28 | } 29 | 30 | // %% [5. Practical Application] 31 | // Store synthetic data for AI/ML-like task 32 | const dataset = [{ id: 1, value: 10 }, { id: 2, value: 20 }]; 33 | localStorage.setItem('dataset', JSON.stringify(dataset)); 34 | const retrieved = JSON.parse(localStorage.getItem('dataset')); 35 | console.log(`Stored Dataset: ${JSON.stringify(retrieved)}`); 36 | 37 | // %% [6. Interview Scenario: Browser APIs] 38 | /* 39 | Interview Scenario: Browser APIs 40 | Q: How does LocalStorage differ from SessionStorage? 41 | A: LocalStorage persists until cleared; SessionStorage clears when the tab closes. 42 | Key: Use LocalStorage for persistent data, SessionStorage for temporary data. 43 | Example: localStorage.setItem('key', 'value'); 44 | */ 45 | } 46 | 47 | // Execute the demo 48 | runBrowserAPIsDemo(); -------------------------------------------------------------------------------- /JavaScript Fundamentals/01 Core JavaScript Foundations/02 Control Flow/control_flow.js: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to Control Flow] 2 | // Learn JavaScript control flow for decision-making and iteration. 3 | 4 | function runControlFlowDemo() { 5 | // %% [2. If-Else and Ternary] 6 | const score = 85; 7 | let grade = score >= 90 ? 'A' : score >= 80 ? 'B' : 'C'; 8 | console.log(`Score: ${score}, Grade: ${grade}`); 9 | 10 | // %% [3. Switch Statement] 11 | const day = 'Monday'; 12 | let message; 13 | switch (day) { 14 | case 'Monday': 15 | message = 'Start of the week'; 16 | break; 17 | default: 18 | message = 'Another day'; 19 | } 20 | console.log(`Day: ${day}, Message: ${message}`); 21 | 22 | // %% [4. Loops] 23 | let sum = 0; 24 | for (let i = 1; i <= 5; i++) { 25 | sum += i; 26 | } 27 | let count = 5; 28 | while (count > 0) { 29 | count--; 30 | } 31 | console.log(`For Loop Sum: ${sum}, While Loop Count: ${count}`); 32 | 33 | // %% [5. Break and Continue] 34 | let numbers = ''; 35 | for (let i = 1; i <= 5; i++) { 36 | if (i === 3) continue; 37 | if (i === 5) break; 38 | numbers += i + ' '; 39 | } 40 | console.log(`Break/Continue Result: ${numbers}`); 41 | 42 | // %% [6. Practical Application] 43 | // Filter synthetic data for AI/ML-like task 44 | const data = [10, -5, 20, 0, 15]; 45 | let positiveSum = 0; 46 | outer: for (const num of data) { 47 | if (num <= 0) continue outer; 48 | positiveSum += num; 49 | } 50 | console.log(`Positive Sum: ${positiveSum}`); 51 | 52 | // %% [7. Interview Scenario: Control Flow] 53 | /* 54 | Interview Scenario: Control Flow 55 | Q: How does the continue statement work in a loop? 56 | A: Skips the current iteration and proceeds to the next. 57 | Key: Use continue to bypass specific conditions in loops. 58 | Example: if (i === 3) continue; // Skips i=3 59 | */ 60 | } 61 | 62 | // Execute the demo 63 | runControlFlowDemo(); -------------------------------------------------------------------------------- /JavaScript Fundamentals/01 Core JavaScript Foundations/07 DOM Manipulation/dom_manipulation.js: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to DOM Manipulation] 2 | // Learn JavaScript DOM manipulation for dynamic web pages. 3 | 4 | function runDOMManipulationDemo() { 5 | // %% [2. Selecting Elements] 6 | const output = document.getElementById('output'); 7 | const header = document.querySelector('h1'); 8 | console.log(`Selected Header: ${header.textContent}`); 9 | 10 | // %% [3. Event Listeners] 11 | const button = document.createElement('button'); 12 | button.textContent = 'Click Me'; 13 | button.addEventListener('click', () => { 14 | console.log('Button Clicked'); 15 | }); 16 | document.body.appendChild(button); 17 | 18 | // %% [4. Modifying DOM] 19 | output.style.color = 'blue'; 20 | output.classList.add('highlight'); 21 | console.log(`Modified DOM: Color set to blue, Class added`); 22 | 23 | // %% [5. Event Delegation] 24 | document.body.addEventListener('click', (e) => { 25 | if (e.target.tagName === 'BUTTON') { 26 | console.log('Delegated Button Click'); 27 | } 28 | }); 29 | 30 | // %% [6. Practical Application] 31 | // Synthetic data visualization for AI/ML-like task 32 | const data = [10, 20, 30]; 33 | const ul = document.createElement('ul'); 34 | data.forEach(value => { 35 | const li = document.createElement('li'); 36 | li.textContent = `Value: ${value}`; 37 | ul.appendChild(li); 38 | }); 39 | document.body.appendChild(ul); 40 | console.log(`Data List Added to DOM`); 41 | 42 | // %% [7. Interview Scenario: DOM Manipulation] 43 | /* 44 | Interview Scenario: DOM Manipulation 45 | Q: What is event delegation and why use it? 46 | A: Event delegation attaches a single listener to a parent for child events. 47 | Key: Reduces memory usage and handles dynamic elements. 48 | Example: parent.addEventListener('click', e => { if (e.target.tagName === 'BUTTON') { ... } }); 49 | */ 50 | } 51 | 52 | // Execute the demo 53 | runDOMManipulationDemo(); -------------------------------------------------------------------------------- /JavaScript Fundamentals/01 Core JavaScript Foundations/01 Variables and Data Types/variables_data_types.js: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to Variables and Data Types] 2 | // Learn core JavaScript variables and data types for web development. 3 | 4 | function runVariablesDemo() { 5 | // %% [2. var, let, const] 6 | var globalVar = 'I am global'; 7 | let blockVar = 'I am block-scoped'; 8 | const constant = 'I am constant'; 9 | console.log(`var: ${globalVar}, let: ${blockVar}, const: ${constant}`); 10 | 11 | // %% [3. Primitive Types] 12 | const number = 42; 13 | const string = 'Hello'; 14 | const boolean = true; 15 | const undefinedVar = undefined; 16 | const nullVar = null; 17 | const symbol = Symbol('id'); 18 | console.log(`Types: ${typeof number}, ${typeof string}, ${typeof boolean}, ${typeof undefinedVar}, ${typeof nullVar}, ${typeof symbol}`); 19 | 20 | // %% [4. Objects and Arrays] 21 | const obj = { name: 'Alice', age: 30 }; 22 | const arr = [1, 2, 3]; 23 | console.log(`Object: ${JSON.stringify(obj)}, Array: ${arr}`); 24 | 25 | // %% [5. Type Coercion and Truthy/Falsy] 26 | const coerced = '5' + 5; // '55' 27 | const truthy = 'hello' ? 'Truthy' : 'Falsy'; 28 | const falsy = 0 ? 'Truthy' : 'Falsy'; 29 | console.log(`Coercion: ${coerced}, Truthy: ${truthy}, Falsy: ${falsy}`); 30 | 31 | // %% [6. Practical Application] 32 | // Synthetic data processing for AI/ML-like task 33 | const data = [10, '20', true, null]; 34 | const processed = data.map(item => typeof item); 35 | console.log(`Processed Data Types: ${processed.join(', ')}`); 36 | 37 | // %% [7. Interview Scenario: Variables and Data Types] 38 | /* 39 | Interview Scenario: Variables and Data Types 40 | Q: What's the difference between var, let, and const? 41 | A: var is function-scoped, let and const are block-scoped; const cannot be reassigned. 42 | Key: Use let for variables, const for constants to avoid scoping issues. 43 | Example: let x = 10; const y = 20; 44 | */ 45 | } 46 | 47 | // Execute the demo 48 | runVariablesDemo(); -------------------------------------------------------------------------------- /JavaScript Fundamentals/01 Core JavaScript Foundations/04 Array Methods/array_methods.js: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to Array Methods] 2 | // Learn JavaScript array methods for data manipulation. 3 | 4 | function runArrayMethodsDemo() { 5 | // %% [2. map, filter, reduce] 6 | const numbers = [1, 2, 3, 4, 5]; 7 | const doubled = numbers.map(n => n * 2); 8 | const evens = numbers.filter(n => n % 2 === 0); 9 | const sum = numbers.reduce((acc, n) => acc + n, 0); 10 | console.log(`Map: ${doubled}, Filter: ${evens}, Reduce: ${sum}`); 11 | 12 | // %% [3. forEach, find, some, every] 13 | numbers.forEach(n => console.log(`forEach: ${n}`)); 14 | const found = numbers.find(n => n > 3); 15 | const hasEven = numbers.some(n => n % 2 === 0); 16 | const allPositive = numbers.every(n => n > 0); 17 | console.log(`Find: ${found}, Some: ${hasEven}, Every: ${allPositive}`); 18 | 19 | // %% [4. slice, splice, concat] 20 | const sliced = numbers.slice(1, 3); 21 | const spliced = numbers.splice(2, 1, 10); 22 | const concatenated = numbers.concat([6, 7]); 23 | console.log(`Slice: ${sliced}, Splice: ${spliced}, Concat: ${concatenated}`); 24 | 25 | // %% [5. sort, reverse] 26 | const unsorted = [3, 1, 4, 2]; 27 | const sorted = [...unsorted].sort((a, b) => a - b); 28 | const reversed = [...unsorted].reverse(); 29 | console.log(`Sort: ${sorted}, Reverse: ${reversed}`); 30 | 31 | // %% [6. Practical Application] 32 | // Process synthetic data for AI/ML-like task 33 | const data = [10, -5, 20, 0, 15]; 34 | const normalized = data.map(x => x / Math.max(...data)); 35 | console.log(`Normalized Data: ${normalized}`); 36 | 37 | // %% [7. Interview Scenario: Array Methods] 38 | /* 39 | Interview Scenario: Array Methods 40 | Q: How does reduce work and when would you use it? 41 | A: reduce applies a function to accumulate a single value from an array. 42 | Key: Use reduce for summing, flattening, or transforming arrays. 43 | Example: numbers.reduce((acc, n) => acc + n, 0); 44 | */ 45 | } 46 | 47 | // Execute the demo 48 | runArrayMethodsDemo(); -------------------------------------------------------------------------------- /JavaScript Fundamentals/01 Core JavaScript Foundations/08 Asynchronous JavaScript/async_javascript.js: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to Asynchronous JavaScript] 2 | // Learn JavaScript async programming for non-blocking code. 3 | 4 | async function runAsyncDemo() { 5 | // %% [2. Callbacks] 6 | function fetchData(callback) { 7 | setTimeout(() => callback('Data fetched'), 1000); 8 | } 9 | fetchData(data => console.log(`Callback: ${data}`)); 10 | 11 | // %% [3. Promises] 12 | const promise = new Promise((resolve, reject) => { 13 | setTimeout(() => resolve('Promise resolved'), 1000); 14 | }); 15 | promise.then(result => console.log(`Promise: ${result}`)); 16 | 17 | // %% [4. Async/Await] 18 | async function getData() { 19 | const result = await new Promise(resolve => setTimeout(() => resolve('Async data'), 1000)); 20 | console.log(`Async/Await: ${result}`); 21 | } 22 | await getData(); 23 | 24 | // %% [5. Fetch API] 25 | try { 26 | const response = await fetch('https://jsonplaceholder.typicode.com/todos/1'); 27 | const data = await response.json(); 28 | console.log(`Fetch API: ${data.title}`); 29 | } catch (error) { 30 | console.log(`Fetch Error: ${error.message}`); 31 | } 32 | 33 | // %% [6. Practical Application] 34 | // Synthetic data fetch for AI/ML-like task 35 | const fakeAPI = () => new Promise(resolve => setTimeout(() => resolve([1, 2, 3]), 1000)); 36 | const processed = await fakeAPI().then(data => data.map(x => x * 2)); 37 | console.log(`Processed API Data: ${processed}`); 38 | 39 | // %% [7. Interview Scenario: Asynchronous JavaScript] 40 | /* 41 | Interview Scenario: Asynchronous JavaScript 42 | Q: What’s the difference between Promises and async/await? 43 | A: Promises use .then() for async results; async/await is syntactic sugar for cleaner code. 44 | Key: Async/await improves readability for sequential async operations. 45 | Example: async function getData() { const result = await fetch(...); } 46 | */ 47 | } 48 | 49 | // Execute the demo 50 | runAsyncDemo(); -------------------------------------------------------------------------------- /JavaScript Fundamentals/01 Core JavaScript Foundations/06 Objects and Prototypes/objects_prototypes.js: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to Objects and Prototypes] 2 | // Learn JavaScript objects and prototypal inheritance. 3 | 4 | function runObjectsPrototypesDemo() { 5 | // %% [2. Object Literals] 6 | const person = { name: 'Alice', age: 30 }; 7 | console.log(`Object Literal: ${JSON.stringify(person)}`); 8 | 9 | // %% [3. Constructor Functions] 10 | function Person(name, age) { 11 | this.name = name; 12 | this.age = age; 13 | } 14 | const bob = new Person('Bob', 25); 15 | console.log(`Constructor: ${bob.name}, ${bob.age}`); 16 | 17 | // %% [4. Prototypal Inheritance] 18 | Person.prototype.greet = function () { return `Hi, I'm ${this.name}`; }; 19 | console.log(`Prototype Method: ${bob.greet()}`); 20 | 21 | // %% [5. Object.create, Object.assign] 22 | const proto = { role: 'developer' }; 23 | const dev = Object.create(proto); 24 | dev.name = 'Charlie'; 25 | const merged = Object.assign({}, person, { role: 'manager' }); 26 | console.log(`Object.create: ${dev.role}, Object.assign: ${merged.role}`); 27 | 28 | // %% [6. Practical Application] 29 | // Synthetic data for AI/ML-like task 30 | const dataset = [ 31 | Object.create({ type: 'data', preprocess: function () { return this.value * 2; } }, { value: { value: 10 } }), 32 | Object.create({ type: 'data', preprocess: function () { return this.value * 2; } }, { value: { value: 20 } }) 33 | ]; 34 | const preprocessed = dataset.map(item => item.preprocess()); 35 | console.log(`Preprocessed Data: ${preprocessed}`); 36 | 37 | // %% [7. Interview Scenario: Objects and Prototypes] 38 | /* 39 | Interview Scenario: Objects and Prototypes 40 | Q: How does prototypal inheritance work in JavaScript? 41 | A: Objects inherit properties from their prototype via the prototype chain. 42 | Key: Prototypes enable shared methods and efficient memory usage. 43 | Example: Person.prototype.greet = function () { return 'Hi'; }; 44 | */ 45 | } 46 | 47 | // Execute the demo 48 | runObjectsPrototypesDemo(); -------------------------------------------------------------------------------- /JavaScript Fundamentals/03 Advanced JavaScript Concepts/01 Web Performance Optimization/web_performance_optimization.js: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to Web Performance Optimization] 2 | // Learn JavaScript techniques for optimizing web performance. 3 | 4 | function runWebPerformanceDemo() { 5 | // %% [2. Lazy Loading] 6 | const img = document.createElement('img'); 7 | img.setAttribute('loading', 'lazy'); 8 | img.src = 'https://via.placeholder.com/150'; 9 | document.body.appendChild(img); 10 | console.log('Lazy Loading: Image added with loading="lazy"'); 11 | 12 | // %% [3. Code Splitting (Simulated)] 13 | const loadModule = () => Promise.resolve({ compute: () => 'Computed' }); 14 | loadModule().then(module => console.log(`Code Splitting: ${module.compute()}`)); 15 | 16 | // %% [4. Reducing Reflows and Repaints] 17 | const optimizeDOM = () => { 18 | const div = document.createElement('div'); 19 | div.style.cssText = 'width: 100px; height: 100px; background: blue;'; 20 | document.body.appendChild(div); 21 | console.log('Optimized DOM: Styles set in one operation'); 22 | }; 23 | optimizeDOM(); 24 | 25 | // %% [5. Practical Application] 26 | // Optimize synthetic data rendering for AI/ML-like task 27 | const data = Array(100).fill().map((_, i) => ({ id: i, value: Math.random() })); 28 | const renderData = () => { 29 | const fragment = document.createDocumentFragment(); 30 | data.slice(0, 10).forEach(item => { 31 | const p = document.createElement('p'); 32 | p.textContent = `ID: ${item.id}, Value: ${item.value}`; 33 | fragment.appendChild(p); 34 | }); 35 | document.body.appendChild(fragment); 36 | console.log('Optimized Rendering: Used DocumentFragment'); 37 | }; 38 | setTimeout(renderData, 1000); 39 | 40 | // %% [6. Interview Scenario: Web Performance Optimization] 41 | /* 42 | Interview Scenario: Web Performance Optimization 43 | Q: What are reflows and how can you minimize them? 44 | A: Reflows occur when the browser recalculates layout; minimize by batching DOM updates. 45 | Key: Use DocumentFragment or cssText to reduce reflows. 46 | Example: const fragment = document.createDocumentFragment(); 47 | */ 48 | } 49 | 50 | // Execute the demo 51 | runWebPerformanceDemo(); -------------------------------------------------------------------------------- /JavaScript Fundamentals/02 Intermediate JavaScript Concepts/02 Advanced DOM and Events/advanced_dom_events.js: -------------------------------------------------------------------------------- 1 | // %% [1. Introduction to Advanced DOM and Events] 2 | // Learn advanced DOM manipulation and event handling. 3 | 4 | function runAdvancedDOMEventsDemo() { 5 | // %% [2. Custom Events] 6 | const customEvent = new CustomEvent('dataLoaded', { detail: { value: 42 } }); 7 | document.addEventListener('dataLoaded', e => console.log(`Custom Event: ${e.detail.value}`)); 8 | document.dispatchEvent(customEvent); 9 | 10 | // %% [3. Event Bubbling and Capturing] 11 | const parent = document.createElement('div'); 12 | const child = document.createElement('button'); 13 | child.textContent = 'Click Me'; 14 | parent.appendChild(child); 15 | document.body.appendChild(parent); 16 | parent.addEventListener('click', () => console.log('Parent Click (Bubbling)'), false); 17 | child.addEventListener('click', () => console.log('Child Click (Bubbling)'), false); 18 | parent.addEventListener('click', () => console.log('Parent Click (Capturing)'), true); 19 | 20 | // %% [4. Form Handling] 21 | const form = document.createElement('input'); 22 | form.type = 'text'; 23 | form.placeholder = 'Enter data'; 24 | form.addEventListener('input', e => console.log(`Form Input: ${e.target.value}`)); 25 | document.body.appendChild(form); 26 | 27 | // %% [5. Debouncing] 28 | const debounce = (fn, delay) => { 29 | let timeout; 30 | return (...args) => { 31 | clearTimeout(timeout); 32 | timeout = setTimeout(() => fn(...args), delay); 33 | }; 34 | }; 35 | const logInput = debounce(value => console.log(`Debounced Input: ${value}`), 500); 36 | form.addEventListener('input', e => logInput(e.target.value)); 37 | 38 | // %% [6. Practical Application] 39 | // Dynamic content loading for AI/ML-like task 40 | const loadData = () => { 41 | const ul = document.createElement('ul'); 42 | [10, 20, 30].forEach(value => { 43 | const li = document.createElement('li'); 44 | li.textContent = `Value: ${value}`; 45 | ul.appendChild(li); 46 | }); 47 | document.body.appendChild(ul); 48 | console.log('Dynamic Content Loaded'); 49 | }; 50 | setTimeout(loadData, 1000); 51 | 52 | // %% [7. Interview Scenario: Advanced DOM and Events] 53 | /* 54 | Interview Scenario: Advanced DOM and Events 55 | Q: What is debouncing and when would you use it? 56 | A: Debouncing delays function execution to reduce frequent calls. 57 | Key: Use for input handling, resizing, or scrolling to optimize performance. 58 | Example: const debounce = (fn, delay) => { let timeout; return () => { clearTimeout(timeout); timeout = setTimeout(fn, delay); }; }; 59 | */ 60 | } 61 | 62 | // Execute the demo 63 | runAdvancedDOMEventsDemo(); -------------------------------------------------------------------------------- /JavaScript Fundamentals/01 Core JavaScript Foundations/02 Control Flow/control_flow.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: Control Flow 46 | 50 | 51 | 52 |

JavaScript: Control Flow

53 |
54 | 
Interview Scenario: Control Flow
55 | Q: How does the continue statement work in a loop?
56 | A: Skips the current iteration and proceeds to the next.
57 | Key: Use continue to bypass specific conditions in loops.
58 | Example: if (i === 3) continue; // Skips i=3
59 | 60 | 67 | 68 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/03 Advanced JavaScript Concepts/09 Deployment/deployment.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: Deployment 46 | 50 | 51 | 52 |

JavaScript: Deployment

53 |
54 | 
Interview Scenario: Deployment
55 | Q: What are Service Workers and how do they enable PWAs?
56 | A: Service Workers handle caching and offline functionality for PWAs.
57 | Key: Enable fast, reliable apps even offline.
58 | Example: navigator.serviceWorker.register('sw.js');
59 | 60 | 67 | 68 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/01 Core JavaScript Foundations/09 ES6+ Features/es6_features.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: ES6+ Features 46 | 50 | 51 | 52 |

JavaScript: ES6+ Features

53 |
54 | 
Interview Scenario: ES6+ Features
55 | Q: What are template literals and how are they useful?
56 | A: Template literals allow string interpolation with ${}.
57 | Key: They simplify string formatting and multi-line strings.
58 | Example: const greeting = `Hello, ${name}!`;
59 | 60 | 67 | 68 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/03 Advanced JavaScript Concepts/08 Web Security/web_security.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: Web Security 46 | 50 | 51 | 52 |

JavaScript: Web Security

53 |
54 | 
Interview Scenario: Web Security
55 | Q: How do you prevent XSS attacks in JavaScript?
56 | A: Sanitize user input and use textContent instead of innerHTML.
57 | Key: Avoid executing untrusted scripts in the DOM.
58 | Example: div.textContent = userInput.replace(/[<>]/g, '');
59 | 60 | 67 | 68 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/01 Core JavaScript Foundations/03 Functions/functions.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: Functions 46 | 50 | 51 | 52 |

JavaScript: Functions

53 |
54 | 
Interview Scenario: Functions
55 | Q: What is a closure and how is it used?
56 | A: A closure is a function that retains access to its outer scope's variables.
57 | Key: Closures are useful for data privacy and stateful functions.
58 | Example: function counter() { let count = 0; return () => ++count; }
59 | 60 | 67 | 68 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/01 Core JavaScript Foundations/10 Event Loop/event_loop.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: Event Loop 46 | 50 | 51 | 52 |

JavaScript: Event Loop

53 |
54 | 
Interview Scenario: Event Loop
55 | Q: How does the event loop handle tasks in JavaScript?
56 | A: The event loop processes the call stack, then microtasks, then tasks.
57 | Key: Microtasks (Promises) run before tasks (setTimeout).
58 | Example: Promise.resolve().then(() => console.log('Microtask'));
59 | 60 | 67 | 68 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/01 Core JavaScript Foundations/04 Array Methods/array_methods.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: Array Methods 46 | 50 | 51 | 52 |

JavaScript: Array Methods

53 |
54 | 
Interview Scenario: Array Methods
55 | Q: How does reduce work and when would you use it?
56 | A: reduce applies a function to accumulate a single value from an array.
57 | Key: Use reduce for summing, flattening, or transforming arrays.
58 | Example: numbers.reduce((acc, n) => acc + n, 0);
59 | 60 | 67 | 68 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/02 Intermediate JavaScript Concepts/08 Memory Management/memory_management.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: Memory Management 46 | 50 | 51 | 52 |

JavaScript: Memory Management

53 |
54 | 
Interview Scenario: Memory Management
55 | Q: What is a memory leak and how can you prevent it?
56 | A: A memory leak occurs when unused objects remain in memory.
57 | Key: Use WeakMap/WeakSet and nullify references to prevent leaks.
58 | Example: let obj = { data: [] }; obj = null;
59 | 60 | 67 | 68 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/03 Advanced JavaScript Concepts/05 Meta-Programming/meta_programming.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: Meta-Programming 46 | 50 | 51 | 52 |

JavaScript: Meta-Programming

53 |
54 | 
Interview Scenario: Meta-Programming
55 | Q: What is a Proxy and how is it used?
56 | A: A Proxy intercepts operations on an object, like get or set.
57 | Key: Use for logging, validation, or custom behavior.
58 | Example: const proxy = new Proxy(target, { get: (obj, prop) => obj[prop] });
59 | 60 | 67 | 68 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/01 Core JavaScript Foundations/05 Error Handling/error_handling.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: Error Handling 46 | 50 | 51 | 52 |

JavaScript: Error Handling

53 |
54 | 
Interview Scenario: Error Handling
55 | Q: How do you handle errors in JavaScript?
56 | A: Use try-catch to catch exceptions and throw to raise custom errors.
57 | Key: Proper error handling ensures robust applications.
58 | Example: try { throw new Error('Test'); } catch (e) { console.log(e.message); }
59 | 60 | 67 | 68 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/02 Intermediate JavaScript Concepts/05 Module Systems/module_systems.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: Module Systems 46 | 50 | 51 | 52 |

JavaScript: Module Systems

53 |
54 | 
Interview Scenario: Module Systems
55 | Q: What are the differences between CommonJS and ES Modules?
56 | A: CommonJS uses require/exports, is synchronous; ES Modules use import/export, support async.
57 | Key: ES Modules are standard for modern JavaScript.
58 | Example: import { add } from './module.js';
59 | 60 | 67 | 68 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/02 Intermediate JavaScript Concepts/06 Regular Expressions/regular_expressions.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: Regular Expressions 46 | 50 | 51 | 52 |

JavaScript: Regular Expressions

53 |
54 | 
Interview Scenario: Regular Expressions
55 | Q: How do you validate an email address with a regex?
56 | A: Use a pattern to match the email format, ensuring valid characters and structure.
57 | Key: Ensure robust patterns for production use.
58 | Example: /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
59 | 60 | 67 | 68 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/02 Intermediate JavaScript Concepts/01 Functional Programming/functional_programming.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: Functional Programming 46 | 50 | 51 | 52 |

JavaScript: Functional Programming

53 |
54 | 
Interview Scenario: Functional Programming
55 | Q: What is a pure function and why is it important?
56 | A: A pure function has no side effects and returns the same output for the same input.
57 | Key: Pure functions improve predictability and testability.
58 | Example: const add = (a, b) => a + b;
59 | 60 | 67 | 68 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/01 Core JavaScript Foundations/01 Variables and Data Types/variables_data_types.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: Variables and Data Types 46 | 50 | 51 | 52 |

JavaScript: Variables and Data Types

53 |
54 | 
Interview Scenario: Variables and Data Types
55 | Q: What's the difference between var, let, and const?
56 | A: var is function-scoped, let and const are block-scoped; const cannot be reassigned.
57 | Key: Use let for variables, const for constants to avoid scoping issues.
58 | Example: let x = 10; const y = 20;
59 | 60 | 67 | 68 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/01 Core JavaScript Foundations/06 Objects and Prototypes/objects_prototypes.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: Objects and Prototypes 46 | 50 | 51 | 52 |

JavaScript: Objects and Prototypes

53 |
54 | 
Interview Scenario: Objects and Prototypes
55 | Q: How does prototypal inheritance work in JavaScript?
56 | A: Objects inherit properties from their prototype via the prototype chain.
57 | Key: Prototypes enable shared methods and efficient memory usage.
58 | Example: Person.prototype.greet = function () { return 'Hi'; };
59 | 60 | 67 | 68 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/02 Intermediate JavaScript Concepts/03 Browser APIs/browser_apis.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: Browser APIs 46 | 51 | 52 | 53 |

JavaScript: Browser APIs

54 |
55 | 
Interview Scenario: Browser APIs
56 | Q: How does LocalStorage differ from SessionStorage?
57 | A: LocalStorage persists until cleared; SessionStorage clears when the tab closes.
58 | Key: Use LocalStorage for persistent data, SessionStorage for temporary data.
59 | Example: localStorage.setItem('key', 'value');
60 | 61 | 68 | 69 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/03 Advanced JavaScript Concepts/06 Server-Side JavaScript/server_side_javascript.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: Server-Side JavaScript 46 | 50 | 51 | 52 |

JavaScript: Server-Side JavaScript

53 |
54 | 
Interview Scenario: Server-Side JavaScript
55 | Q: How does the Node.js event loop differ from the browser?
56 | A: Node.js event loop handles I/O and timers, not DOM events.
57 | Key: Optimized for server-side tasks like file I/O and networking.
58 | Example: app.get('/data', (req, res) => res.json({ data: 'value' }));
59 | 60 | 67 | 68 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/01 Core JavaScript Foundations/07 DOM Manipulation/dom_manipulation.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: DOM Manipulation 46 | 51 | 52 | 53 |

JavaScript: DOM Manipulation

54 |
55 | 
Interview Scenario: DOM Manipulation
56 | Q: What is event delegation and why use it?
57 | A: Event delegation attaches a single listener to a parent for child events.
58 | Key: Reduces memory usage and handles dynamic elements.
59 | Example: parent.addEventListener('click', e => { if (e.target.tagName === 'BUTTON') { ... } });
60 | 61 | 68 | 69 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/01 Core JavaScript Foundations/08 Asynchronous JavaScript/async_javascript.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: Asynchronous JavaScript 46 | 50 | 51 | 52 |

JavaScript: Asynchronous JavaScript

53 |
54 | 
Interview Scenario: Asynchronous JavaScript
55 | Q: What’s the difference between Promises and async/await?
56 | A: Promises use .then() for async results; async/await is syntactic sugar for cleaner code.
57 | Key: Async/await improves readability for sequential async operations.
58 | Example: async function getData() { const result = await fetch(...); }
59 | 60 | 67 | 68 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/02 Intermediate JavaScript Concepts/07 Advanced Asynchronous Patterns/advanced_async_patterns.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: Advanced Asynchronous Patterns 46 | 50 | 51 | 52 |

JavaScript: Advanced Asynchronous Patterns

53 |
54 | 
Interview Scenario: Advanced Asynchronous Patterns
55 | Q: What is Promise.all and when would you use it?
56 | A: Promise.all runs multiple Promises concurrently and resolves when all complete.
57 | Key: Use for parallel API calls to improve performance.
58 | Example: Promise.all([fetch('url1'), fetch('url2')]);
59 | 60 | 67 | 68 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/02 Intermediate JavaScript Concepts/04 AJAX and APIs/ajax_apis.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: AJAX and APIs 46 | 50 | 51 | 52 | 53 |

JavaScript: AJAX and APIs

54 |
55 | 
Interview Scenario: AJAX and APIs
56 | Q: What is CORS and how does it affect API requests?
57 | A: CORS restricts cross-origin requests for security; servers must allow specific origins.
58 | Key: Use proper headers or proxies to handle CORS issues.
59 | Example: fetch('https://api.example.com', { mode: 'cors' });
60 | 61 | 68 | 69 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/03 Advanced JavaScript Concepts/01 Web Performance Optimization/web_performance_optimization.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: Web Performance Optimization 46 | 50 | 51 | 52 |

JavaScript: Web Performance Optimization

53 |
54 | 
Interview Scenario: Web Performance Optimization
55 | Q: What are reflows and how can you minimize them?
56 | A: Reflows occur when the browser recalculates layout; minimize by batching DOM updates.
57 | Key: Use DocumentFragment or cssText to reduce reflows.
58 | Example: const fragment = document.createDocumentFragment();
59 | 60 | 67 | 68 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/03 Advanced JavaScript Concepts/07 AI-ML with JavaScript/ai_ml_javascript.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: AI/ML with JavaScript 46 | 50 | 51 | 52 | 53 |

JavaScript: AI/ML with JavaScript

54 |
55 | 
Interview Scenario: AI/ML with JavaScript
56 | Q: How does TensorFlow.js enable ML in the browser?
57 | A: TensorFlow.js uses WebGL for GPU acceleration and runs models client-side.
58 | Key: Ideal for real-time inference without server dependency.
59 | Example: const model = tf.sequential(); model.add(tf.layers.dense(...));
60 | 61 | 68 | 69 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/02 Intermediate JavaScript Concepts/02 Advanced DOM and Events/advanced_dom_events.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: Advanced DOM and Events 46 | 51 | 52 | 53 |

JavaScript: Advanced DOM and Events

54 |
55 | 
Interview Scenario: Advanced DOM and Events
56 | Q: What is debouncing and when would you use it?
57 | A: Debouncing delays function execution to reduce frequent calls.
58 | Key: Use for input handling, resizing, or scrolling to optimize performance.
59 | Example: const debounce = (fn, delay) => { let timeout; return () => { clearTimeout(timeout); timeout = setTimeout(fn, delay); }; };
60 | 61 | 68 | 69 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/03 Advanced JavaScript Concepts/02 Reactive Programming/reactive_programming.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: Reactive Programming 46 | 51 | 52 | 53 | 54 |

JavaScript: Reactive Programming

55 |
56 | 
Interview Scenario: Reactive Programming
57 | Q: What is an Observable in RxJS?
58 | A: An Observable is a stream of data that can be subscribed to for async events.
59 | Key: Use for handling async data like user inputs or API responses.
60 | Example: rxjs.fromEvent(button, 'click').subscribe(() => console.log('Clicked'));
61 | 62 | 69 | 70 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/03 Advanced JavaScript Concepts/04 Frameworks and Libraries/frameworks_libraries.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: Frameworks and Libraries 46 | 50 | 51 | 52 | 53 | 54 |

JavaScript: Frameworks and Libraries

55 |
56 |
57 | 
Interview Scenario: Frameworks and Libraries
58 | Q: What are React Hooks and how do they work?
59 | A: Hooks manage state and side effects in functional components.
60 | Key: useState and useEffect simplify component logic.
61 | Example: const [count, setCount] = useState(0);
62 | 63 | 70 | 71 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/03 Advanced JavaScript Concepts/03 Advanced Tooling/advanced_tooling.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | JavaScript: Advanced Tooling 46 | 50 | 51 | 58 | 59 | 60 |

JavaScript: Advanced Tooling

61 |
62 | 
Interview Scenario: Advanced Tooling
63 | Q: How does TypeScript improve JavaScript development?
64 | A: TypeScript adds static typing, catching errors at compile time.
65 | Key: Enhances code reliability and IDE support.
66 | Example: interface User { name: string; age: number; }
67 | 68 | 75 | 76 | -------------------------------------------------------------------------------- /JavaScript Fundamentals/02 Intermediate JavaScript Concepts/README.md: -------------------------------------------------------------------------------- 1 | # 🧩 Intermediate JavaScript Concepts 2 | 3 | ## 📖 Introduction 4 | Building on the **Core JavaScript Foundations**, this section, **Intermediate JavaScript Concepts**, dives into advanced techniques for creating robust, efficient, and scalable web applications. It covers **Functional Programming**, **Advanced DOM and Events**, **Browser APIs**, **AJAX and APIs**, **Module Systems**, **Regular Expressions**, **Advanced Asynchronous Patterns**, and **Memory Management**, preparing you for AI/ML and web development interviews. These skills are crucial for browser-based ML (e.g., TensorFlow.js), dynamic UIs, and optimized code, complementing your Python (e.g., `neural_networks.py`), TensorFlow.js (e.g., `tensors_operations.html`), Keras, Matplotlib, Pandas, and NumPy expertise. 5 | 6 | ## 🎯 Learning Objectives 7 | - Apply functional programming for predictable, testable code. 8 | - Master advanced DOM manipulation and event handling for dynamic UIs. 9 | - Leverage browser APIs for storage, graphics, and geolocation. 10 | - Fetch and process API data with AJAX techniques. 11 | - Organize code with modern module systems. 12 | - Use regular expressions for pattern matching. 13 | - Implement advanced async patterns for efficient workflows. 14 | - Optimize memory usage to prevent leaks. 15 | 16 | ## 🔑 Key Concepts 17 | - **Functional Programming**: 18 | - Pure Functions 19 | - Higher-Order Functions 20 | - Currying 21 | - Function Composition 22 | - Immutability 23 | - **Advanced DOM and Events**: 24 | - Custom Events 25 | - Event Bubbling and Capturing 26 | - Form Handling 27 | - Dynamic Content Loading 28 | - Performance Optimization (Debouncing, Throttling) 29 | - **Browser APIs**: 30 | - LocalStorage and SessionStorage 31 | - Canvas API 32 | - WebGL (via TensorFlow.js or Three.js) 33 | - Geolocation API 34 | - WebRTC 35 | - Service Workers 36 | - **AJAX and APIs**: 37 | - XMLHttpRequest 38 | - Fetch API 39 | - Axios 40 | - Handling JSON 41 | - Cross-Origin Resource Sharing (CORS) 42 | - **Module Systems**: 43 | - CommonJS 44 | - ES Modules 45 | - Module Bundlers (Webpack, Rollup) 46 | - Dynamic Imports 47 | - Tree Shaking 48 | - **Regular Expressions**: 49 | - Pattern Matching 50 | - RegExp Methods (`test`, `exec`) 51 | - Common Patterns (Email, URL, Phone) 52 | - Lookaheads and Lookbehinds 53 | - Replacing with Callbacks 54 | - **Advanced Asynchronous Patterns**: 55 | - Promise Chaining 56 | - `Promise.all`, `Promise.race` 57 | - Async Iterators 58 | - Concurrent Task Management 59 | - Error Handling Strategies 60 | - **Memory Management**: 61 | - Garbage Collection 62 | - Memory Leaks 63 | - WeakMap and WeakSet 64 | - Optimizing Object References 65 | - Profiling with DevTools 66 | 67 | ## 📝 Example Walkthroughs 68 | The following `.js` and `.html` file pairs demonstrate each subsection: 69 | 70 | 1. **`functional_programming.js` and `functional_programming.html`**: 71 | - Demonstrates pure functions, higher-order functions, currying, composition, and immutability. 72 | - Normalizes synthetic data immutably for an AI/ML-like task. 73 | - Outputs results to console and DOM. 74 | 75 | Example code: 76 | ```javascript 77 | const normalize = x => x / Math.max(...data); 78 | const processData = data => Object.freeze(data.map(normalize)); 79 | ``` 80 | 81 | 2. **`advanced_dom_events.js` and `advanced_dom_events.html`**: 82 | - Implements custom events, bubbling/capturing, form handling, and debouncing. 83 | - Dynamically loads synthetic data as a list. 84 | - Displays interactions in the browser. 85 | 86 | Example code: 87 | ```javascript 88 | const debounce = (fn, delay) => { 89 | let timeout; 90 | return (...args) => { 91 | clearTimeout(timeout); 92 | timeout = setTimeout(() => fn(...args), delay); 93 | }; 94 | }; 95 | ``` 96 | 97 | 3. **`browser_apis.js` and `browser_apis.html`**: 98 | - Covers LocalStorage, Canvas API, and Geolocation API. 99 | - Stores and retrieves synthetic dataset. 100 | - Outputs to console and DOM, with a canvas visualization. 101 | 102 | Example code: 103 | ```javascript 104 | localStorage.setItem('dataset', JSON.stringify(dataset)); 105 | ``` 106 | 107 | 4. **`ajax_apis.js` and `ajax_apis.html`**: 108 | - Demonstrates XMLHttpRequest, Fetch API, and Axios for API calls. 109 | - Processes synthetic API data for an AI/ML-like task. 110 | - Displays results in the browser. 111 | 112 | Example code: 113 | ```javascript 114 | const response = await fetch('https://jsonplaceholder.typicode.com/todos/2'); 115 | ``` 116 | 117 | 5. **`module_systems.js` and `module_systems.html`**: 118 | - Simulates CommonJS, ES Modules, and dynamic imports. 119 | - Normalizes synthetic data modularly. 120 | - Outputs to console and DOM. 121 | 122 | Example code: 123 | ```javascript 124 | const dataModule = { 125 | normalize: data => data.map(x => x / Math.max(...data)) 126 | }; 127 | ``` 128 | 129 | 6. **`regular_expressions.js` and `regular_expressions.html`**: 130 | - Implements pattern matching, RegExp methods, and common patterns. 131 | - Extracts numbers from synthetic data. 132 | - Displays results in the browser. 133 | 134 | Example code: 135 | ```javascript 136 | const numbers = data.match(/\d+/g); 137 | ``` 138 | 139 | 7. **`advanced_async_patterns.js` and `advanced_async_patterns.html`**: 140 | - Covers Promise chaining, `Promise.all`, and async iterators. 141 | - Fetches concurrent API data for an AI/ML-like task. 142 | - Outputs to console and DOM. 143 | 144 | Example code: 145 | ```javascript 146 | const batchResults = await Promise.all([fetchBatch(1), fetchBatch(2)]); 147 | ``` 148 | 149 | 8. **`memory_management.js` and `memory_management.html`**: 150 | - Demonstrates garbage collection, WeakMap, and reference optimization. 151 | - Manages memory for synthetic data in a cache. 152 | - Displays results in the browser. 153 | 154 | Example code: 155 | ```javascript 156 | const weakMap = new WeakMap(); 157 | let key = { id: 1 }; 158 | weakMap.set(key, 'Data'); 159 | key = null; 160 | ``` 161 | 162 | ## 🛠️ Practical Tasks 163 | 1. **Functional Programming**: 164 | - Write a curried function to preprocess data. 165 | - Compose functions to normalize and filter an array. 166 | 2. **Advanced DOM and Events**: 167 | - Create a custom event for data updates. 168 | - Implement throttling for a resize event listener. 169 | 3. **Browser APIs**: 170 | - Store a dataset in LocalStorage and retrieve it. 171 | - Draw a bar chart using the Canvas API. 172 | 4. **AJAX and APIs**: 173 | - Fetch and display data from a public API using Axios. 174 | - Handle CORS errors in a Fetch request. 175 | 5. **Module Systems**: 176 | - Simulate an ES Module for data processing. 177 | - Implement a dynamic import for a utility function. 178 | 6. **Regular Expressions**: 179 | - Validate a URL with a regex. 180 | - Extract phone numbers from a string. 181 | 7. **Advanced Asynchronous Patterns**: 182 | - Use `Promise.all` to fetch multiple APIs concurrently. 183 | - Write an async iterator for paginated data. 184 | 8. **Memory Management**: 185 | - Create a WeakMap-based cache for large datasets. 186 | - Profile a memory leak using DevTools. 187 | 188 | ## 💡 Interview Tips 189 | - **Common Questions**: 190 | - What’s the difference between debouncing and throttling? 191 | - How does `Promise.all` improve performance? 192 | - What causes a memory leak in JavaScript? 193 | - **Tips**: 194 | - Explain functional programming benefits (e.g., predictability). 195 | - Demonstrate API error handling (e.g., CORS, async errors). 196 | - Be ready to code a regex or optimize DOM performance. 197 | - **Coding Tasks**: 198 | - Implement a debounced input handler. 199 | - Fetch and process API data with `Promise.all`. 200 | - Write a regex to validate an email. 201 | 202 | ## 📚 Resources 203 | - [MDN Web Docs: JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) 204 | - [JavaScript.info](https://javascript.info/) 205 | - [Eloquent JavaScript by Marijn Haverbeke](https://eloquentjavascript.net/) 206 | - [You Don’t Know JS by Kyle Simpson](https://github.com/getify/You-Dont-Know-JS) 207 | - [TensorFlow.js Documentation](https://js.tensorflow.org/) (for WebGL context) 208 | - [Axios Documentation](https://axios-http.com/docs/intro) 209 | 210 | ## 🛠️ Setup Instructions 211 | 1. Place all `.js` and `.html` files in the same directory. 212 | 2. Install a local server (e.g., `live-server` via npm: `npm install -g live-server`). 213 | 3. Run `live-server` in the directory to serve the files. 214 | 4. Open each `.html` file in a browser to view outputs and interact with the demos. 215 | 5. Check the browser console for additional logs and errors. 216 | 6. Note: `ajax_apis.html` uses Axios via CDN; ensure internet access. -------------------------------------------------------------------------------- /JavaScript Fundamentals/03 Advanced JavaScript Concepts/README.md: -------------------------------------------------------------------------------- 1 | # 🚀 Advanced JavaScript Concepts 2 | 3 | ## 📖 Introduction 4 | Building on **Core** and **Intermediate JavaScript Concepts**, this section, **Advanced JavaScript Concepts**, explores cutting-edge techniques for building high-performance, secure, and scalable web applications with AI/ML integration. It covers **Web Performance Optimization**, **Reactive Programming**, **Advanced Tooling**, **Frameworks and Libraries**, **Meta-Programming**, **Server-Side JavaScript**, **AI/ML with JavaScript**, **Web Security**, and **Deployment**, preparing you for advanced AI/ML and web development interviews. These skills are essential for browser-based ML (e.g., TensorFlow.js), reactive UIs, and production-ready apps, complementing your Python (e.g., `neural_networks.py`), TensorFlow.js (e.g., `tensors_operations.html`), Keras, Matplotlib, Pandas, NumPy, and prior JavaScript expertise. 5 | 6 | ## 🎯 Learning Objectives 7 | - Optimize web performance for fast, efficient apps. 8 | - Implement reactive programming for dynamic UIs. 9 | - Use advanced tooling like TypeScript and Jest for robust development. 10 | - Build apps with modern frameworks like React. 11 | - Leverage meta-programming for dynamic behavior. 12 | - Develop server-side APIs with Node.js and Express. 13 | - Integrate AI/ML with TensorFlow.js for browser-based inference. 14 | - Secure apps against common vulnerabilities. 15 | - Deploy apps as PWAs with CI/CD pipelines. 16 | 17 | ## 🔑 Key Concepts 18 | - **Web Performance Optimization**: 19 | - Lazy Loading 20 | - Code Splitting 21 | - Minification and Compression 22 | - Critical Rendering Path 23 | - Reducing Reflows and Repaints 24 | - **Reactive Programming**: 25 | - Observables 26 | - RxJS Basics 27 | - Event Streams 28 | - Reactive UI Updates 29 | - Integration with React 30 | - **Advanced Tooling**: 31 | - TypeScript Integration 32 | - ESLint and Prettier 33 | - Jest for Testing 34 | - Webpack Configuration 35 | - Babel for Transpilation 36 | - **Frameworks and Libraries**: 37 | - React (Components, Hooks, State Management) 38 | - Vue.js (Directives, Vuex) 39 | - Angular (Modules, Services) 40 | - Svelte Basics 41 | - Framework-Agnostic Patterns 42 | - **Meta-Programming**: 43 | - Proxies 44 | - Reflect API 45 | - Dynamic Property Access 46 | - Intercepting Function Calls 47 | - Custom Object Behavior 48 | - **Server-Side JavaScript**: 49 | - Node.js (Event Loop, Streams) 50 | - Express.js for APIs 51 | - Serverless Functions (AWS Lambda) 52 | - MongoDB Integration 53 | - Authentication (JWT, OAuth) 54 | - **AI/ML with JavaScript**: 55 | - TensorFlow.js (Tensors, Models, Training) 56 | - Pretrained Models (MobileNet, PoseNet) 57 | - WebGL Acceleration 58 | - Real-Time Inference (Webcam, Audio) 59 | - Visualization with D3.js 60 | - **Web Security**: 61 | - Cross-Site Scripting (XSS) 62 | - Cross-Site Request Forgery (CSRF) 63 | - Content Security Policy (CSP) 64 | - Secure Cookies 65 | - HTTPS and CORS 66 | - **Deployment**: 67 | - Static Hosting (Netlify, Vercel) 68 | - Progressive Web Apps (PWAs) 69 | - Service Workers 70 | - CI/CD Pipelines 71 | - Docker for Node.js Apps 72 | 73 | ## 📝 Example Walkthroughs 74 | The following `.js` (or `.ts`) and `.html` file pairs demonstrate each subsection: 75 | 76 | 1. **`web_performance_optimization.js` and `web_performance_optimization.html`**: 77 | - Demonstrates lazy loading, code splitting, and reflow reduction. 78 | - Optimizes synthetic data rendering with DocumentFragment. 79 | - Outputs results to console and DOM. 80 | 81 | Example code: 82 | ```javascript 83 | const fragment = document.createDocumentFragment(); 84 | data.forEach(item => { 85 | const p = document.createElement('p'); 86 | p.textContent = `ID: ${item.id}, Value: ${item.value}`; 87 | fragment.appendChild(p); 88 | }); 89 | ``` 90 | 91 | 2. **`reactive_programming.js` and `reactive_programming.html`**: 92 | - Implements RxJS Observables for click and data streams. 93 | - Streams synthetic data for an AI/ML-like task. 94 | - Displays interactions in the browser. 95 | 96 | Example code: 97 | ```javascript 98 | const clickStream = rxjs.fromEvent(button, 'click'); 99 | clickStream.subscribe(() => console.log('Button clicked')); 100 | ``` 101 | 102 | 3. **`advanced_tooling.ts` and `advanced_tooling.html`**: 103 | - Uses TypeScript for typed data processing and simulated Jest tests. 104 | - Normalizes synthetic data with TypeScript interfaces. 105 | - Outputs to console and DOM. 106 | 107 | Example code: 108 | ```typescript 109 | interface DataPoint { id: number; value: number; } 110 | const normalize = (data: DataPoint[]): DataPoint[] => { 111 | const max = Math.max(...data.map(d => d.value)); 112 | return data.map(d => ({ ...d, value: d.value / max })); 113 | }; 114 | ``` 115 | 116 | 4. **`frameworks_libraries.js` and `frameworks_libraries.html`**: 117 | - Builds a React component with hooks for state management. 118 | - Renders synthetic data UI. 119 | - Displays results in the browser. 120 | 121 | Example code: 122 | ```javascript 123 | const [count, setCount] = React.useState(0); 124 | ``` 125 | 126 | 5. **`meta_programming.js` and `meta_programming.html`**: 127 | - Uses Proxies and Reflect API for dynamic behavior. 128 | - Tracks synthetic data access. 129 | - Outputs to console and DOM. 130 | 131 | Example code: 132 | ```javascript 133 | const proxy = new Proxy(target, { get: (obj, prop) => { 134 | console.log(`Accessed: ${prop}`); 135 | return obj[prop]; 136 | } }); 137 | ``` 138 | 139 | 6. **`server_side_javascript.js` and `server_side_javascript.html`**: 140 | - Simulates Express.js API for synthetic data. 141 | - Logs API responses in the browser. 142 | - Notes local Node.js execution. 143 | 144 | Example code: 145 | ```javascript 146 | const app = simulateExpress(); 147 | app.get('/api/data', (req, res) => `Data for ID ${req.query.id}`); 148 | ``` 149 | 150 | 7. **`ai_ml_javascript.js` and `ai_ml_javascript.html`**: 151 | - Trains a TensorFlow.js model on synthetic data. 152 | - Performs prediction and logs results. 153 | - Outputs to console and DOM. 154 | 155 | Example code: 156 | ```javascript 157 | const model = tf.sequential(); 158 | model.add(tf.layers.dense({ units: 1, inputShape: [1] })); 159 | await model.fit(xs, ys, { epochs: 10 }); 160 | ``` 161 | 162 | 8. **`web_security.js` and `web_security.html`**: 163 | - Prevents XSS by sanitizing input. 164 | - Securely displays synthetic data. 165 | - Outputs to console and DOM. 166 | 167 | Example code: 168 | ```javascript 169 | div.textContent = userInput.replace(/[<>]/g, ''); 170 | ``` 171 | 172 | 9. **`deployment.js` and `deployment.html`**: 173 | - Simulates Service Workers and PWA setup. 174 | - Logs manifest for synthetic data app. 175 | - Outputs to console and DOM. 176 | 177 | Example code: 178 | ```javascript 179 | const manifest = { name: 'ML App', start_url: './index.html', display: 'standalone' }; 180 | ``` 181 | 182 | ## 🛠️ Practical Tasks 183 | 1. **Web Performance Optimization**: 184 | - Implement lazy loading for a gallery of images. 185 | - Optimize a large DOM update with DocumentFragment. 186 | 2. **Reactive Programming**: 187 | - Create an RxJS stream for real-time input updates. 188 | - Stream API data with RxJS for visualization. 189 | 3. **Advanced Tooling**: 190 | - Write a TypeScript interface for a dataset and normalize it. 191 | - Simulate a Jest test for a utility function. 192 | 4. **Frameworks and Libraries**: 193 | - Build a React app to display synthetic data. 194 | - Add a useEffect hook for API fetching. 195 | 5. **Meta-Programming**: 196 | - Use a Proxy to log dataset access. 197 | - Implement Reflect API for dynamic property updates. 198 | 6. **Server-Side JavaScript**: 199 | - Create an Express API for synthetic data (run locally). 200 | - Add JWT authentication to an endpoint. 201 | 7. **AI/ML with JavaScript**: 202 | - Train a TensorFlow.js model on synthetic data. 203 | - Visualize predictions with D3.js. 204 | 8. **Web Security**: 205 | - Sanitize user input for a comment section. 206 | - Implement a basic CSP header (simulated). 207 | 9. **Deployment**: 208 | - Create a PWA manifest for an ML app. 209 | - Simulate a Service Worker for offline caching. 210 | 211 | ## 💡 Interview Tips 212 | - **Common Questions**: 213 | - How does TensorFlow.js leverage WebGL for ML? 214 | - What are Proxies and their use cases? 215 | - How do you prevent XSS in a web app? 216 | - **Tips**: 217 | - Explain performance optimization (e.g., lazy loading, reflows). 218 | - Demonstrate React hooks or TensorFlow.js model training. 219 | - Be ready to code a secure API or PWA setup. 220 | - **Coding Tasks**: 221 | - Implement a Proxy for logging. 222 | - Train a TensorFlow.js model on synthetic data. 223 | - Sanitize input to prevent XSS. 224 | 225 | ## 📚 Resources 226 | - [MDN Web Docs: JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) 227 | - [JavaScript.info](https://javascript.info/) 228 | - [Eloquent JavaScript by Marijn Haverbeke](https://eloquentjavascript.net/) 229 | - [You Don’t Know JS by Kyle Simpson](https://github.com/getify/You-Dont-Know-JS) 230 | - [TensorFlow.js Documentation](https://js.tensorflow.org/) 231 | - [React Documentation](https://reactjs.org/) 232 | - [RxJS Documentation](https://rxjs.dev/) 233 | - [TypeScript Documentation](https://www.typescriptlang.org/) 234 | - [Express.js Documentation](https://expressjs.com/) 235 | 236 | ## 🛠️ Setup Instructions 237 | 1. Place all `.js`, `.ts`, and `.html` files in the same directory. 238 | 2. Install a local server (e.g., `live-server` via npm: `npm install -g live-server`). 239 | 3. Run `live-server` in the directory to serve the files. 240 | 4. Open each `.html` file in a browser to view outputs and interact with the demos. 241 | 5. For `server_side_javascript.js`, install Node.js and run locally with Express (e.g., `npm init`, `npm install express`). 242 | 6. Check the browser console for additional logs and errors. 243 | 7. Note: Files use CDNs (e.g., TensorFlow.js, React, RxJS); ensure internet access. -------------------------------------------------------------------------------- /JavaScript Fundamentals/01 Core JavaScript Foundations/README.md: -------------------------------------------------------------------------------- 1 | # 🏗️ Core JavaScript Foundations 2 | 3 | ## 📖 Introduction 4 | JavaScript is the backbone of web-based AI/ML and dynamic applications, powering everything from DOM manipulation to TensorFlow.js models. This section, **Core JavaScript Foundations**, establishes the essential skills needed for web development and AI/ML interviews. It covers **Variables and Data Types**, **Control Flow**, **Functions**, **Array Methods**, **Error Handling**, **Objects and Prototypes**, **DOM Manipulation**, **Asynchronous JavaScript**, **ES6+ Features**, and **Event Loop**, providing a solid foundation for intermediate and advanced JavaScript concepts. This complements your Python (e.g., `neural_networks.py`), TensorFlow.js (e.g., `tensors_operations.html`), Keras, Matplotlib, Pandas, and NumPy skills. 5 | 6 | ## 🎯 Learning Objectives 7 | - Master JavaScript variables, data types, and scoping for robust code. 8 | - Implement control flow for decision-making and iteration. 9 | - Write reusable functions with modern features like closures and arrow functions. 10 | - Manipulate arrays and handle errors for data processing. 11 | - Understand objects, prototypes, DOM, async programming, ES6+ features, and the event loop for web ML. 12 | 13 | ## 🔑 Key Concepts 14 | - **Variables and Data Types**: 15 | - `var`, `let`, `const` 16 | - Primitive Types (Number, String, Boolean, Undefined, Null, Symbol) 17 | - Objects and Arrays 18 | - Type Coercion 19 | - Truthy and Falsy Values 20 | - **Control Flow**: 21 | - If-Else Statements 22 | - Switch Statements 23 | - Ternary Operator 24 | - For Loops 25 | - While Loops 26 | - Do-While Loops 27 | - Break and Continue 28 | - Labels 29 | - **Functions**: 30 | - Function Declarations and Expressions 31 | - Arrow Functions 32 | - Default Parameters 33 | - Rest and Spread Operators 34 | - Closures 35 | - Immediately Invoked Function Expressions (IIFEs) 36 | - Function Hoisting 37 | - **Array Methods**: 38 | - `map`, `filter`, `reduce` 39 | - `forEach`, `find`, `some`, `every` 40 | - `slice`, `splice`, `concat` 41 | - `sort`, `reverse` 42 | - Array Destructuring 43 | - **Error Handling**: 44 | - Try-Catch 45 | - Throw Statement 46 | - Custom Errors 47 | - Error Objects 48 | - Async Error Handling 49 | - **Objects and Prototypes**: 50 | - Object Literals 51 | - Constructor Functions 52 | - Prototypal Inheritance 53 | - `Object.create`, `Object.assign` 54 | - Getters and Setters 55 | - Property Descriptors 56 | - **DOM Manipulation**: 57 | - Selecting Elements (`querySelector`, `getElementById`) 58 | - Event Listeners 59 | - Modifying DOM (Attributes, Classes, Content) 60 | - Event Delegation 61 | - Browser Events (Click, Input, Load) 62 | - **Asynchronous JavaScript**: 63 | - Callbacks 64 | - Promises 65 | - Async/Await 66 | - `setTimeout`, `setInterval` 67 | - Fetch API 68 | - Error Handling in Async Code 69 | - **ES6+ Features**: 70 | - Template Literals 71 | - Destructuring Assignment 72 | - Modules (`import`, `export`) 73 | - Classes 74 | - Symbols 75 | - Iterators and Generators 76 | - Optional Chaining (`?.`) 77 | - Nullish Coalescing (`??`) 78 | - **Event Loop**: 79 | - Call Stack 80 | - Task Queue 81 | - Microtask Queue 82 | - `setTimeout` vs. `Promise` 83 | - Browser Rendering 84 | 85 | ## 📝 Example Walkthroughs 86 | The following `.js` and `.html` file pairs demonstrate each subsection: 87 | 88 | 1. **`variables_data_types.js` and `variables_data_types.html`**: 89 | - Demonstrates `var`, `let`, `const`, primitive types, objects, arrays, type coercion, and truthy/falsy values. 90 | - Processes synthetic data types for an AI/ML-like task. 91 | - Outputs results to the console and DOM. 92 | 93 | Example code: 94 | ```javascript 95 | const data = [10, '20', true, null]; 96 | const processed = data.map(item => typeof item); 97 | ``` 98 | 99 | 2. **`control_flow.js` and `control_flow.html`**: 100 | - Implements if-else, switch, loops, break, continue, and labels. 101 | - Filters synthetic data to sum positive values. 102 | - Displays results in the browser. 103 | 104 | Example code: 105 | ```javascript 106 | outer: for (const num of data) { 107 | if (num <= 0) continue outer; 108 | positiveSum += num; 109 | } 110 | ``` 111 | 112 | 3. **`functions.js` and `functions.html`**: 113 | - Covers function declarations, expressions, arrow functions, rest/spread, closures, and IIFEs. 114 | - Processes synthetic data with an IIFE. 115 | - Shows results via DOM. 116 | 117 | Example code: 118 | ```javascript 119 | const processed = (function (data) { 120 | return data.map(x => x * 2); 121 | })([1, 2, 3]); 122 | ``` 123 | 124 | 4. **`array_methods.js` and `array_methods.html`**: 125 | - Demonstrates `map`, `filter`, `reduce`, `forEach`, `find`, `some`, `every`, `slice`, `splice`, `concat`, `sort`, `reverse`. 126 | - Normalizes synthetic data for an AI/ML-like task. 127 | - Outputs to console and DOM. 128 | 129 | Example code: 130 | ```javascript 131 | const normalized = data.map(x => x / Math.max(...data)); 132 | ``` 133 | 134 | 5. **`error_handling.js` and `error_handling.html`**: 135 | - Implements try-catch, throw, custom errors, and error objects. 136 | - Validates synthetic data for non-numeric values. 137 | - Displays errors in the browser. 138 | 139 | Example code: 140 | ```javascript 141 | if (typeof item !== 'number') throw new Error('Non-numeric value'); 142 | ``` 143 | 144 | 6. **`objects_prototypes.js` and `objects_prototypes.html`**: 145 | - Covers object literals, constructor functions, prototypal inheritance, `Object.create`, `Object.assign`. 146 | - Preprocesses synthetic data using prototypes. 147 | - Shows results via DOM. 148 | 149 | Example code: 150 | ```javascript 151 | Person.prototype.greet = function () { return `Hi, I'm ${this.name}`; }; 152 | ``` 153 | 154 | 7. **`dom_manipulation.js` and `dom_manipulation.html`**: 155 | - Demonstrates element selection, event listeners, DOM modification, and event delegation. 156 | - Visualizes synthetic data as a list in the DOM. 157 | - Outputs interactions to the browser. 158 | 159 | Example code: 160 | ```javascript 161 | document.body.addEventListener('click', (e) => { 162 | if (e.target.tagName === 'BUTTON') { console.log('Delegated Button Click'); } 163 | }); 164 | ``` 165 | 166 | 8. **`async_javascript.js` and `async_javascript.html`**: 167 | - Implements callbacks, Promises, async/await, and Fetch API. 168 | - Processes synthetic API data for an AI/ML-like task. 169 | - Displays async results in the browser. 170 | 171 | Example code: 172 | ```javascript 173 | const response = await fetch('https://jsonplaceholder.typicode.com/todos/1'); 174 | ``` 175 | 176 | 9. **`es6_features.js` and `es6_features.html`**: 177 | - Covers template literals, destructuring, modules (simulated), classes, Symbols, and generators. 178 | - Processes synthetic data with a generator. 179 | - Shows results via DOM. 180 | 181 | Example code: 182 | ```javascript 183 | function* dataGenerator() { yield 1; yield 2; yield 3; } 184 | ``` 185 | 186 | 10. **`event_loop.js` and `event_loop.html`**: 187 | - Demonstrates call stack, task queue, microtask queue, and `setTimeout` vs. `Promise`. 188 | - Simulates async data processing for an AI/ML-like task. 189 | - Outputs execution order in the browser. 190 | 191 | Example code: 192 | ```javascript 193 | Promise.resolve('Promise: Microtask').then(console.log); 194 | setTimeout(() => console.log('setTimeout: Delayed'), 0); 195 | ``` 196 | 197 | ## 🛠️ Practical Tasks 198 | 1. **Variables and Data Types**: 199 | - Write a function to detect falsy values in an array. 200 | - Create an object to represent a dataset and log its types. 201 | 2. **Control Flow**: 202 | - Implement a grading system using if-else and switch. 203 | - Write a loop to sum even numbers in an array. 204 | 3. **Functions**: 205 | - Create a closure to track API calls. 206 | - Write an IIFE to preprocess an array. 207 | 4. **Array Methods**: 208 | - Normalize an array using `map` and `reduce`. 209 | - Filter and sort a dataset of objects. 210 | 5. **Error Handling**: 211 | - Validate an array for numeric values with try-catch. 212 | - Throw a custom error for invalid inputs. 213 | 6. **Objects and Prototypes**: 214 | - Create a prototype chain for a data processor. 215 | - Merge objects using `Object.assign`. 216 | 7. **DOM Manipulation**: 217 | - Build a dynamic list with event delegation. 218 | - Create a button that toggles a class on click. 219 | 8. **Asynchronous JavaScript**: 220 | - Fetch data from a public API and display it. 221 | - Chain Promises to process synthetic data. 222 | 9. **ES6+ Features**: 223 | - Use template literals to format a dataset summary. 224 | - Write a generator for paginated data. 225 | 10. **Event Loop**: 226 | - Simulate a task queue with `setTimeout` and Promises. 227 | - Log the execution order of async tasks. 228 | 229 | ## 💡 Interview Tips 230 | - **Common Questions**: 231 | - What’s the difference between `var`, `let`, and `const`? 232 | - How does a closure work in JavaScript? 233 | - What’s the role of the event loop in async code? 234 | - **Tips**: 235 | - Explain scoping rules clearly (e.g., block vs. function scope). 236 | - Demonstrate async patterns (e.g., Promises vs. async/await). 237 | - Be ready to code DOM manipulation or array processing tasks. 238 | - **Coding Tasks**: 239 | - Reverse an array using `reduce`. 240 | - Implement a Promise-based API fetch with error handling. 241 | - Create a closure-based counter. 242 | 243 | ## 📚 Resources 244 | - [MDN Web Docs: JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) 245 | - [JavaScript.info](https://javascript.info/) 246 | - [Eloquent JavaScript by Marijn Haverbeke](https://eloquentjavascript.net/) 247 | - [You Don’t Know JS by Kyle Simpson](https://github.com/getify/You-Dont-Know-JS) 248 | - [TensorFlow.js Documentation](https://js.tensorflow.org/) (for AI/ML context) 249 | 250 | ## 🛠️ Setup Instructions 251 | 1. Place all `.js` and `.html` files in the same directory. 252 | 2. Install a local server (e.g., `live-server` via npm: `npm install -g live-server`). 253 | 3. Run `live-server` in the directory to serve the files. 254 | 4. Open each `.html` file in a browser to view outputs and interact with the demos. 255 | 5. Check the browser console for additional logs and errors. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🟨 JavaScript Interview Preparation 2 | 3 |
4 | JavaScript Logo 5 | Node.js 6 | React 7 | TensorFlow.js 8 | D3.js 9 | WebGL 10 |
11 |

Your comprehensive guide to mastering JavaScript for AI/ML and web development interviews

12 | 13 | --- 14 | 15 | ## 📖 Introduction 16 | 17 | Welcome to my JavaScript prep for AI/ML and web development interviews! 🚀 This repository is your essential guide for mastering JavaScript, the cornerstone of web-based AI, data visualization, and dynamic applications. From core fundamentals to advanced techniques, it’s crafted to help you excel in technical interviews and build cutting-edge web ML projects with confidence and precision. 18 | 19 | ## 🌟 What’s Inside? 20 | 21 | - **Core JavaScript Mastery**: Dive deep into variables, functions, DOM manipulation, and more to ace coding tests. 22 | - **AI/ML Integration**: Explore TensorFlow.js for browser-based machine learning and D3.js for data visualization. 23 | - **Hands-on Practice**: Solve curated coding problems with detailed solutions to sharpen your skills. 24 | - **Interview Question Bank**: Tackle common questions with clear, concise answers. 25 | - **Performance Optimization**: Learn tips for writing efficient, interview-ready JavaScript code. 26 | 27 | ## 🔍 Who Is This For? 28 | 29 | - Web Developers prepping for technical interviews. 30 | - Machine Learning Engineers building browser-based AI with TensorFlow.js. 31 | - AI Researchers enhancing web ML and visualization skills. 32 | - Software Engineers transitioning to web or AI/ML roles. 33 | - Anyone mastering JavaScript for dynamic, data-centric applications. 34 | 35 | ## 🗺️ Comprehensive Learning Roadmap 36 | 37 | --- 38 | 39 | ### 🏗️ Core JavaScript Foundations 40 | 41 | #### 📊 Variables and Data Types 42 | - `var`, `let`, `const` 43 | - Primitive Types (Number, String, Boolean, Undefined, Null, Symbol) 44 | - Objects and Arrays 45 | - Type Coercion 46 | - Truthy and Falsy Values 47 | 48 | #### 🔄 Control Flow 49 | - If-Else Statements 50 | - Switch Statements 51 | - Ternary Operator 52 | - For Loops 53 | - While Loops 54 | - Do-While Loops 55 | - Break and Continue 56 | - Labels 57 | 58 | #### 🧩 Functions 59 | - Function Declarations and Expressions 60 | - Arrow Functions 61 | - Default Parameters 62 | - Rest and Spread Operators 63 | - Closures 64 | - Immediately Invoked Function Expressions (IIFEs) 65 | - Function Hoisting 66 | 67 | #### 🔍 Array Methods 68 | - `map`, `filter`, `reduce` 69 | - `forEach`, `find`, `some`, `every` 70 | - `slice`, `splice`, `concat` 71 | - `sort`, `reverse` 72 | - Array Destructuring 73 | 74 | #### ⚠️ Error Handling 75 | - Try-Catch 76 | - Throw Statement 77 | - Custom Errors 78 | - Error Objects 79 | - Async Error Handling 80 | 81 | #### 🧬 Objects and Prototypes 82 | - Object Literals 83 | - Constructor Functions 84 | - Prototypal Inheritance 85 | - `Object.create`, `Object.assign` 86 | - Getters and Setters 87 | - Property Descriptors 88 | 89 | #### 📦 DOM Manipulation 90 | - Selecting Elements (`querySelector`, `getElementById`) 91 | - Event Listeners 92 | - Modifying DOM (Attributes, Classes, Content) 93 | - Event Delegation 94 | - Browser Events (Click, Input, Load) 95 | 96 | #### 📄 Asynchronous JavaScript 97 | - Callbacks 98 | - Promises 99 | - Async/Await 100 | - `setTimeout`, `setInterval` 101 | - Fetch API 102 | - Error Handling in Async Code 103 | 104 | #### 🎁 ES6+ Features 105 | - Template Literals 106 | - Destructuring Assignment 107 | - Modules (`import`, `export`) 108 | - Classes 109 | - Symbols 110 | - Iterators and Generators 111 | - Optional Chaining (`?.`) 112 | - Nullish Coalescing (`??`) 113 | 114 | #### 🔄 Event Loop 115 | - Call Stack 116 | - Task Queue 117 | - Microtask Queue 118 | - `setTimeout` vs. `Promise` 119 | - Browser Rendering 120 | 121 | --- 122 | 123 | ### 🧩 Intermediate JavaScript Concepts 124 | 125 | #### 🏋️ Functional Programming 126 | - Pure Functions 127 | - Higher-Order Functions 128 | - Currying 129 | - Function Composition 130 | - Immutability 131 | 132 | #### ⚙️ Advanced DOM and Events 133 | - Custom Events 134 | - Event Bubbling and Capturing 135 | - Form Handling 136 | - Dynamic Content Loading 137 | - Performance Optimization (Debouncing, Throttling) 138 | 139 | #### 📈 Browser APIs 140 | - LocalStorage and SessionStorage 141 | - Canvas API 142 | - WebGL (via TensorFlow.js or Three.js) 143 | - Geolocation API 144 | - WebRTC 145 | - Service Workers 146 | 147 | #### 🌍 AJAX and APIs 148 | - XMLHttpRequest 149 | - Fetch API 150 | - Axios 151 | - Handling JSON 152 | - Cross-Origin Resource Sharing (CORS) 153 | 154 | #### 🛠️ Module Systems 155 | - CommonJS 156 | - ES Modules 157 | - Module Bundlers (Webpack, Rollup) 158 | - Dynamic Imports 159 | - Tree Shaking 160 | 161 | #### 📦 Regular Expressions 162 | - Pattern Matching 163 | - RegExp Methods (`test`, `exec`) 164 | - Common Patterns (Email, URL, Phone) 165 | - Lookaheads and Lookbehinds 166 | - Replacing with Callbacks 167 | 168 | #### 🔄 Advanced Asynchronous Patterns 169 | - Promise Chaining 170 | - `Promise.all`, `Promise.race` 171 | - Async Iterators 172 | - Concurrent Task Management 173 | - Error Handling Strategies 174 | 175 | #### 🧠 Memory Management 176 | - Garbage Collection 177 | - Memory Leaks 178 | - WeakMap and WeakSet 179 | - Optimizing Object References 180 | - Profiling with DevTools 181 | 182 | --- 183 | 184 | ### 🚀 Advanced JavaScript Concepts 185 | 186 | #### 🌐 Web Performance Optimization 187 | - Lazy Loading 188 | - Code Splitting 189 | - Minification and Compression 190 | - Critical Rendering Path 191 | - Reducing Reflows and Repaints 192 | 193 | #### 🧠 Reactive Programming 194 | - Observables 195 | - RxJS Basics 196 | - Event Streams 197 | - Reactive UI Updates 198 | - Integration with React 199 | 200 | #### 🛠️ Advanced Tooling 201 | - TypeScript Integration 202 | - ESLint and Prettier 203 | - Jest for Testing 204 | - Webpack Configuration 205 | - Babel for Transpilation 206 | 207 | #### 📦 Frameworks and Libraries 208 | - React (Components, Hooks, State Management) 209 | - Vue.js (Directives, Vuex) 210 | - Angular (Modules, Services) 211 | - Svelte Basics 212 | - Framework-Agnostic Patterns 213 | 214 | #### 🔄 Meta-Programming 215 | - Proxies 216 | - Reflect API 217 | - Dynamic Property Access 218 | - Intercepting Function Calls 219 | - Custom Object Behavior 220 | 221 | #### 🌍 Server-Side JavaScript 222 | - Node.js (Event Loop, Streams) 223 | - Express.js for APIs 224 | - Serverless Functions (AWS Lambda) 225 | - MongoDB Integration 226 | - Authentication (JWT, OAuth) 227 | 228 | #### 🧬 AI/ML with JavaScript 229 | - TensorFlow.js (Tensors, Models, Training) 230 | - Pretrained Models (MobileNet, PoseNet) 231 | - WebGL Acceleration 232 | - Real-Time Inference (Webcam, Audio) 233 | - Visualization with D3.js 234 | 235 | #### 📄 Web Security 236 | - Cross-Site Scripting (XSS) 237 | - Cross-Site Request Forgery (CSRF) 238 | - Content Security Policy (CSP) 239 | - Secure Cookies 240 | - HTTPS and CORS 241 | 242 | #### 📦 Deployment 243 | - Static Hosting (Netlify, Vercel) 244 | - Progressive Web Apps (PWAs) 245 | - Service Workers 246 | - CI/CD Pipelines 247 | - Docker for Node.js Apps 248 | 249 | --- 250 | 251 | ## 💡 Why Master JavaScript for AI/ML and Web Development? 252 | 253 | JavaScript is the backbone of web-based AI/ML and dynamic applications, and here’s why: 254 | 1. **Ubiquity**: Powers client-side, server-side, and AI/ML workflows in the browser. 255 | 2. **Rich Ecosystem**: Packed with libraries like TensorFlow.js, React, and D3.js. 256 | 3. **Interactivity**: Enables real-time ML apps (e.g., webcam inference, speech recognition). 257 | 4. **Industry Demand**: A must-have skill for 6 LPA+ web and AI/ML roles. 258 | 5. **Community Support**: Tap into a vast network of developers and resources. 259 | 260 | This repo is my roadmap to mastering JavaScript for technical interviews and AI/ML careers—let’s build that skill set together! 261 | 262 | ## 📆 Study Plan 263 | 264 | - **Week 1-2**: Core JavaScript Fundamentals 265 | - **Week 3-4**: Intermediate Concepts (DOM, Async, Modules) 266 | - **Week 5-6**: Advanced Concepts (Performance, AI/ML, Deployment) 267 | - **Week 7-8**: Framework Integration and Interview Practice 268 | 269 | ## 🛠️ Hands-on Practice 270 | 271 | - **Coding Problems**: 272 | - Reverse a string using recursion. 273 | - Implement a Promise-based API fetch with error handling. 274 | - Build a real-time webcam classifier with TensorFlow.js. 275 | - Create a D3.js visualization for a dataset. 276 | - **Projects**: 277 | - Develop a React-based ML dashboard with TensorFlow.js. 278 | - Build a PWA with Service Workers and lazy-loaded models. 279 | - Create a Node.js API for server-side ML inference. 280 | - Implement a text similarity app with Universal Sentence Encoder. 281 | 282 | ## 💬 Interview Question Bank 283 | 284 | - **Core**: 285 | - What’s the difference between `var`, `let`, and `const`? 286 | - Explain closures and their use cases. 287 | - How does the event loop work in JavaScript? 288 | - **Intermediate**: 289 | - How do you handle CORS in a Fetch API request? 290 | - What’s the difference between `Promise.all` and `Promise.race`? 291 | - How do you optimize DOM manipulation for performance? 292 | - **Advanced**: 293 | - How do you implement a custom WebGL kernel in TensorFlow.js? 294 | - What’s the role of Service Workers in a PWA? 295 | - How do you secure a Node.js API against XSS attacks? 296 | 297 | ## 🤝 Contributions 298 | 299 | Love to collaborate? Here’s how! 🌟 300 | 1. Fork the repository. 301 | 2. Create a feature branch (`git checkout -b feature/amazing-addition`). 302 | 3. Commit your changes (`git commit -m 'Add some amazing content'`). 303 | 4. Push to the branch (`git push origin feature/amazing-addition`). 304 | 5. Open a Pull Request. 305 | 306 | ## 📚 Resources 307 | 308 | - [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript) 309 | - [JavaScript.info](https://javascript.info/) 310 | - [TensorFlow.js Documentation](https://js.tensorflow.org/) 311 | - [React Documentation](https://reactjs.org/) 312 | - [Node.js Documentation](https://nodejs.org/en/docs/) 313 | - [Eloquent JavaScript by Marijn Haverbeke](https://eloquentjavascript.net/) 314 | - [You Don’t Know JS by Kyle Simpson](https://github.com/getify/You-Dont-Know-JS) 315 | 316 | --- 317 | 318 |
319 |

Happy Learning and Good Luck with Your Interviews! ✨

320 |
--------------------------------------------------------------------------------