Fundamentals

Variables

• Declare: var name = value;
• Let: let name = value;
• Const: const name = value;

Datatypes

• String
• Number
• Boolean
• Object
• Array
• Null
• Undefined

Operators

• Arithmetic (+, -, *, /)
• Assignment (=, +=, -=, etc.)
• Comparison (==, ===, !=, !==)
• Logical (&&, ||, ``)

JS Scope and Scope Chain

• Global scope
• Local scope
• Hoisting

Functions

• Declaration: function functionName() { }
• Expression: const functionName = function() { };
• Arrow function: (param) => {}

Arrays

• Declaration: let arrayName = [];
• Methods: push(), pop(), shift(), unshift(), splice(), slice(), concat(), join(), reverse(), sort()

Loops

• for loop
• while loop
• do...while loop
• for...in loop
• for...of loop

Conditionals

• if statement
• else statement
• switch statement

Strings

• Concatenation: string1 + string2
• Template literals: `${variable} Hello World`

Regular Expressions

• Pattern matching
• Search, replace, split operations

Introduction to DOM

• Definition: The Document Object Model (DOM) is a tree-like representation of a web page's structure, allowing JavaScript to interact with and modify the page's content.
• Purpose: Enables dynamic interaction with web pages, allowing for changes in response to user actions or other events.

Creating and Modifying Elements

• Creating Elements: Use document.createElement(tagName) to create a new element.
• Appending Elements: Add newly created elements to the DOM using parentNode.appendChild(childNode).
• Modifying Text: Change the content of an element using element.innerHTML = "New Content".

Selecting Elements

• By ID: Access elements by their ID using document.getElementById("id").
• By Class Name: Select elements by class name with document.getElementsByClassName("className").
• By Tag Name: Retrieve elements by their tag name via document.getElementsByTagName("tag").
• Using Query Selector: Utilize CSS selectors to find elements with document.querySelector(selector) or multiple elements with document.querySelectorAll(selector).

Event Handling

• Adding Event Listeners: Attach event listeners to elements using element.addEventListener(event, function, useCapture).

Traversing the DOM

• Parent Nodes: Access parent nodes using parentNode or parentElement.
• Child Nodes: Get child nodes with childNodes or children.
• Siblings: Find siblings using nextSibling or previousSibling.

Removing Elements

• Removing Child Nodes: Remove a child node from its parent using parentNode.removeChild(childNode).

Attributes and Styles

• Setting Attributes: Modify an element's attributes with element.setAttribute(name, value).
• Getting Attributes: Retrieve an element's attribute values using element.getAttribute(name).
• Changing Styles: Alter an element's styles with element.style.property = value.

Miscellaneous

• DOM Tree Structure: Understand the hierarchical structure of the DOM, where elements form a tree with parents, children, and siblings.
• Live vs. Static NodeList: Be aware of the difference between live (document.getElementsByClassName) and static (document.querySelectorAll) NodeLists.

Events

• Mouse events: click, dblclick, mousedown, mouseup
• Keyboard events: keydown, keyup, keypress
• Form events: submit, change
• Window events: resize, scroll

Error Handling

• Try-catch-finally blocks
• Throw statements

Date Objects

• Creating dates: new Date()
• Formatting dates: toLocaleDateString(), toLocaleTimeString()