JavaScript Fundamentals

Event Handling

• Event: an action or occurrence that triggers a response in a program
• Event Handler: a function that is executed in response to an event
• Types of Events:
  • Mouse Events: click, dblclick, mouseover, mouseout, etc.
  • Keyboard Events: keydown, keyup, keypress, etc.
  • Form Events: submit, change, focus, blur, etc.
• Event Listeners: attached to elements to listen for events
  • addEventListener() method: adds an event listener to an element
  • removeEventListener() method: removes an event listener from an element
• Event Object: provides information about the event, such as the target element and coordinates of the mouse click

JavaScript Frameworks

• Definition: a collection of pre-built components and tools that simplify JavaScript development
• Popular Frameworks:
  • React: for building user interfaces and single-page applications
  • Angular: for building complex web applications
  • Vue.js: for building progressive and flexible web applications
• Benefits:
  • Faster development: pre-built components and tools speed up development
  • Easier maintenance: frameworks provide a structured approach to coding
  • Large communities: frameworks have large communities that provide support and resources

DOM Manipulation

• DOM (Document Object Model): a tree-like representation of an HTML document
• Methods for DOM Manipulation:
  • document.getElementById(): retrieves an element by its ID
  • document.querySelector(): retrieves an element using a CSS selector
  • createElement(): creates a new element
  • appendChild(): adds a new element to a parent element
  • removeChild(): removes an element from a parent element
• Properties for DOM Elements:
  • innerHTML: sets or retrieves the HTML content of an element
  • textContent: sets or retrieves the text content of an element
  • style: sets or retrieves the CSS styles of an element
• Common Use Cases:
  • Dynamic content generation: creating and adding elements dynamically
  • Responsive design: updating styles and layouts based on screen size and device type