Javascript
Column 1 For Loops A for loop is a control flow statement that allows you to repeatedly execute a block of code. It consists of three parts: initialization, condition, and increment/decrement. The initialization sets the starting value, the condition determines when to stop looping, and the increment/decrement updates the loop variable after each iteration. // Example
for (let i = 0; i < array.length; i++) {
// Code to be executed
}while loop A while loop is a control flow statement that repeatedly executes a block of code as long as the specified condition evaluates to true. It consists of an initial condition, which is checked before each iteration, and if it's true, the code inside the loop will be executed. let count = 0;
while (count < 5) {
console.log('Count:', count);
count++;
}do while loop The do-while loop is a control flow statement that executes a block of code at least once, and then repeatedly executes the block as long as the specified condition evaluates to true. It differs from the regular 'while' loop in that it checks its condition after executing the code block. // Example: Print numbers from 1 to 5 using do-while
let i = 1;
do {
console.log(i);
i++;
} while (i <= 5);for in loop The for...in loop is used to iterate over the properties of an object. It can be used with arrays or objects, but it's generally recommended to use a regular for loop when iterating over arrays. The syntax is: 'for (variable in object) { // code block }'. Be cautious while using this loop as it iterates not only through own enumerable properties but also inherited ones. const person = { name: 'John', age: 30 };
for(let key in person){
console.log(key + ': ' + person[key]);
}for of loop The for...of statement creates a loop iterating over iterable objects (including Array, Map, Set, arguments object and so on). It allows you to iterate through the elements of an array or other iterable objects without having to keep track of indices. The syntax is: 'for (variable of iterable) { // code block }'. This loop can be used with any data structure that implements the Iterable protocol. let arr = [1, 2 ,3];
// Iterating over each element in the array using for..of
for(let num of arr){
console.log(num);
}Open Chrome Dev Tools on Mac To open the Chrome Developer Tools on a Mac, you can use the following keyboard command: + + I Open Chrome dev tools on Windows To open the Chrome developer tools on Windows, you can use the keyboard shortcut Ctrl + Shift + I. This will open up the DevTools panel in your browser window. Ctrl ++ C Regular Expression Description Example Matches /hello/ Matches the exact string "hello" "hello", "say hello" /[0-9]+/ Matches one or more digits "123", "42 is the answer" /[aeiou]/ Matches any lowercase vowel "apple", "orange" /[^aeiou]/ Matches any character that is not a lowercase vowel "b", "c", "d", "1", "&" /[A-Za-z]+/ Matches one or more uppercase or lowercase letters "Hello", "world" Column 2 Mozilla Developer Network The Mozilla Developer Network (MDN) is a comprehensive resource for web developers. It provides documentation, tutorials, and guides on various web technologies including HTML, CSS, JavaScript, and more. MDN offers detailed explanations of concepts along with code examples to help developers understand how to use different features effectively. It also includes browser compatibility information which helps ensure cross-browser compatibility in your projects. FreeCodeCamp FreeCodeCamp is a non-profit organization that offers free coding courses and projects. It provides a hands-on learning experience with interactive challenges, algorithm scripting, and project-based assignments. FreeCodeCamp covers various topics including HTML/CSS, JavaScript, Data Structures & Algorithms, APIs & Microservices, Information Security and Quality Assurance. Eloquent Javascript (Book) A comprehensive guide to JavaScript programming. It covers the basics of JavaScript, including variables, data types, and control flow. The book also delves into more advanced topics like functions, objects, and error handling. Eloquent Javascript is widely regarded as a valuable resource for both beginners and experienced developers looking to enhance their understanding of JavaScript. String The string data type represents a sequence of characters. It is enclosed in single quotes ('') or double quotes (\"\"). Strings can be concatenated using the + operator. Some important methods for manipulating strings include: - length: returns the number of characters in a string - indexOf(): finds and returns the index position of a specified substring within a larger string - slice(start, end): extracts part of a string based on start and end indices Number The number data type in JavaScript represents numeric values. It includes integers, floating-point numbers, and special numeric values like Infinity and NaN. JavaScript uses the Number object to represent numbers. Some important points related to the number data type are: 1) Numbers can be written with or without decimals; 2) Arithmetic operations such as addition (+), subtraction (-), multiplication (*), division (/), and modulus (%) can be performed on numbers; 3) The parseInt() function converts a string into an integer value; 4) The parseFloat() function converts a string into a floating-point value. Boolean The Boolean data type in JavaScript represents a logical value, either true or false. It is commonly used for conditional statements and comparisons. When evaluating expressions, certain values are automatically converted to boolean: falsy values (false, 0, '', null, undefined) evaluate to false while truthy values (true, non-zero numbers, non-empty strings) evaluate to true. The ! operator can be used as the 'not' operator to invert a boolean value. Object The object data type in JavaScript is a complex data type that allows you to store multiple values as properties and methods. Objects are created using curly braces {}. Properties of an object can be accessed using dot notation or bracket notation. Methods, which are functions stored within objects, can also be called on the object by referencing them with dot notation. Arrow Functions Arrow functions are a concise way to write function expressions in JavaScript. They have a shorter syntax compared to traditional function declarations and do not bind their own 'this' value. () => { // code here }Default parameters In JavaScript, default function parameters allow you to specify a default value for a parameter if no argument is provided or if the argument is undefined. This can be useful when calling functions with missing arguments or optional values. Default parameters are defined using the assignment operator (=) after the parameter name in the function declaration. // Function with default parameter
function greet(name = 'Guest') {
console.log(`Hello, ${name}!`);
}
greet(); // Output: Hello, Guest!
greet('John'); // Output: Hello, John!Column 3 Event Loop
Call Stack
Value Operator Description Example 18 () Expression Grouping (100+50)*3 17 [] Member Of obj["prop"] 17 ?. Optional Chaining x?.y 17 () Function Call myFunc() 17 new New with Arguments new Data() 14 ! Logical NOT !(x==y) 14 typeof Data type typeof x 17 . Member of obj.prop 14 void Evaluate Void void(0) Mouse Events 1. Mouse events are triggered by user interactions with the mouse, such as clicking or moving it. 2. Common mouse events include 'click', 'mouseover', and 'mouseout'. 3. Event listeners can be added to HTML elements to handle these mouse events. 4. The MouseEvent object provides information about the event, including coordinates of the cursor position. Keyboard Events 1. Keyboard events are triggered when a user interacts with the keyboard. 2. Common keyboard events include keydown, keyup, and keypress. 3. The event object provides information about the specific keys that were pressed or released. 4. You can use event listeners to handle keyboard events in JavaScript. 5. Keyboard events allow you to create interactive features like form validation or game controls. Click Events 1. Click events are triggered when a user clicks on an element in the web page. 2. To listen for click events, you can use the addEventListener method or assign an onclick event handler to the element. 3. The event object passed to the click event listener contains information about the clicked element and other useful properties like coordinates of where it was clicked. 4. You can prevent default behavior using methods like preventDefault() to stop certain actions from happening when a specific element is clicked. Form Events 1. The 'submit' event is triggered when a form is submitted. 2. The 'reset' event is triggered when the user clicks on the reset button of a form to clear all input fields. 3. The 'change' event is fired when an element loses focus after its value has been changed, typically used with input elements like textboxes and checkboxes. 4. You can use JavaScript to add event listeners for these events using methods such as `addEventListener` or by assigning functions directly to their respective properties. Scroll Events 1. Scroll events are triggered when the user scrolls up or down on a webpage. 2. You can listen for scroll events using the 'scroll' event listener in JavaScript. 3. The 'window.scrollY' property gives you the current vertical position of the scrollbar. 4. By comparing previous and current scroll positions, you can determine if scrolling is happening upwards or downwards. 5. Utilize throttling or debouncing techniques to optimize performance when handling scroll events. |
