Introduction to JavaScript

### Meet DOM
- A browser organizes web page components into a hierarchical tree.
- The tree is called the Document Object Model (DOM).
- Each component is nested under the top-level window object.
- JavaScript can access and change HTML document elements using the HTML DOM.
- The DOM enables dynamic webpage changes without reloading.
- It aids JavaScript interaction with HTML and CSS.
- Its essential for creating interactive web applications.
- JavaScript can change HTML elements/attributes/CSS styles in the page.
- Enables JavaScript to remove/add HTML elements/attributes.
- JavaScript can react to all existing HTML events in the page.
- Also lets JavaScript create new HTML events in the page

### Inspect Properties
- The top-level DOM window object has a screen child object.
- The screen child object provides properties that describe user's monitor resolution in pixels.

### Screen Dimensions and Usable Space
- The overall screen size can be accessed through Window.screen.width (total width in pixels) and Window.screen.height (total height in pixels).
- Usable screen space, excluding system UI elements, is found using Window.screen.availWidth (available width) and Window.screen.availHeight (available height).
- These properties help optimize layout design to ensure content fits in the user's available screen area.

### Color Depth Information
- Window.screen.colorDepth represents the bit value for color range.
- Common values include 8-bit (256 colors), 16-bit (65,536 colors), 24-bit (millions of colors), and 32-bit (billions of colors).
- 8-bit = low color
- 16-bit = high color
- 24-bit = true color
- 32-bit = deep color

### Show Dialogs
- The top-level DOM window object provides three methods for JavaScript to display dialog messages.
- A simple warning message can be displayed via window.alert(message).
- A confirmation box with "OK" and "Cancel" buttons is displayed via window.confirm(message), returning true for "OK" and false for "Cancel".
- The function window.prompt(message, defaultValue) displays a prompt box with a text input field, an "OK" button (returns the input value), and a "Cancel" button (returns null).

### Extract Info
- The document object is a child of the window object.
- Provides access to and allows manipulation of the HTML document.
- Dynamically updating web pages is useful.
- Commonly utilized in JavaScript for dynamic page interactions.
- The document object provides access to the page title (document.title), current URL (document.URL), domain name (document.domain), last modified date (document.lastModified), and referrer URL (document.referrer).
- document.title retrieves or sets the page title.
- document.URL provides the full URL of the current document.
- document.domain retrieves the domain name of the document, similar to location.host.

### Address Arrays
- The document object has child objects like forms, images, links, styleSheets, and scripts.
- Each object is represented as an array corresponding to elements in the HTML document.
- The number of each object in the document can be returned via:
  - document.forms.length (number of forms)
  - document.images.length (number of images)
  - document.links.length (number of links)
  - document.scripts.length (number of scripts)

### Address Array
- To access the first image (HTML tag) in the document body: document.images[0].
- The URL can be referenced using document.images[0].src.
- Dynamically replacing the old URL with a new URL in script is possible.

### Address Elements
- Error-prone: Accessing elements via index in component arrays can lead to errors because index positions change when modifying HTML.
- Solution is tedious and hard to maintain due to complexity in dynamic pages.
- Modern methods:
  - Accessing element by ID.
  - Accessing element by tag name.
  - Accessing element by class name.

### Accessing element by ID
- Retrieves a single element by its id.
- Best for unique elements like headers, buttons, or sections.

### Accessing element by tag name
- Retrieves all elements with the given tag name.
- Returns an HTMLCollection (array-like structure).

### Accessing element by class name
- Retrieves all elements with a specific class.
- Returns an HTMLCollection.
- Applies styles or modifications to multiple elements at once.

### Write Content
- Methods to Write Content in the DOM:
  - Insert or Change HTML Content (innerHTML). 
  - Insert or Change Text (No HTML).
  - Writing Content Directly to the Page (document.write).

### Insert or Change HTML Content
- Allows setting or retrieving an element's HTML content.
- Supports text and HTML elements.

### Insert or Change Text
- Returns only the content between an elements tags.
- Used to sets or retrieves only text content.
- Ignores HTML tags, treating them as plain text

### Writing Content Directly to the Page
- Writes directly into the document body.
- Replaces all existing HTML content if executed after page load.
- Not recommended for modern web development.
- Used mainly for testing or when loading a new page dynamically.
- Creates an HTML element dynamically by using createElement(tagName)
- Takes the tag name as an argument
- Content can be added using .innerHTML or .innerText
- Appends the new element inside an existing parent.
- Places the new element at the end of the parent's content
- Adds attributes new attributes dynamically to DOM elements
- Takes two arguments" Attribute and Value

### Events
- The DOM allows JavaScript to react to "events" that occur on a web page. Functions are executed when a particular event happens.
- These functions are known as "event-handlers", and can react to events such as:
  - load: Page loaded.
  - click: User clicks a mouse button.
  - keydown: User presses a keyboard key.
  - change: User modifies an input field.
  - submit: User submits an HTML form.
- 2 Main components to consider:
  - The Event Itself
  - The Reaction

### The Event Itself
- What happens that you want to respond to like:
  - load
  - click
  - mousemove
  - keydown, keyup
  - submit

### The Reaction
- This is the function you define to react to the event
- For example, you might:
  - Change the style (e.g., make a button red)
  - Add or remove text/content from the page
  - Send data to the server
  - Show/hide an element
- two main ways to use or handle events:
  - HTML Event Attributes (Inline Method)
  - JavaScript (addEventListener Method)

### HTML Event Attributes (Inline Method)
- You directly add the event in the HTML element using an attribute like onclick, onmouseover, etc.

### JavaScript (addEventListener Method)
- It allows you to register a function to be executed when a specific event occurs on a specific element.
- This is the recommended way, especially in modern development.

### Load Events
- Fired when the entire page has completely loaded.
- The browser waits for loading everything before triggering the event.
- When responding to the load event in JavaScript, there are two main ways to define the event handler:
  - Using the window.onload Property.
  -  Using add an event listener.

### Mouse Events
- Triggered when the user interacts with the mouse (or similar input device) over an element on the page
- click: Fired when the user clicks on an element (press + release)
- dblclick: Fired when the user double-clicks.
- mouseover: When the pointer enters an element.
- mouseout: When the pointer leaves an element.

### Events Values
- An event object contains information about the event that occurred, such as:
  - What type of event it was (e.g. click, keydown)
  - Where it happened (mouse coordinates)
  - Which key was pressed
  - Which element triggered the event

### Check Boxes
- Checkboxes and Radio Buttons

### Checkboxes
- Allow users to select multiple options.
- Each checkbox is independent.

### Radio Buttons
- Allow users to select only one option from a group.
  - All buttons in a group share the same name attribute.
- Grouping Behavior and JavaScript Access
  - Grouping by name
    - Checkboxes and radio buttons are grouped by the same name.
  - Javascript access
    - You can access the group using JavaScript
 - The result is an array-like object, and you can:
    - Loop through it.
    - Access each element using an index.
    - Read or assign the .checked property.
-  The .checked Property is a Boolean property on both checkboxes and radio buttons.
- True = selected, false= not selected

### Select options
- The <select> element is used in HTML to create a drop-down list of options that a user can choose from.
- You can interact with a <select> element in JavaScript using several useful properties:
  - selectedIndex = Returns or sets the index of the selected option (starts at 0).
  - value = Returns or sets the value of the selected option.
  - options = Returns a collection (array-like) of all <option> elements inside <select>.
  - length = Returns the number of options in the drop-down.
  - multiple = A Boolean that indicates whether multiple options can be selected.

### Summary of Script Flow Management
- The `if` keyword performs the basic conditional test to test a condition for a boolean true or false value.
- An alternative branch to the basic conditional test uses the `else` keyword to extend an `if` statement.
- `switch` statement tests a large number of conditions for a boolean true or false value.
- In a `switch` block, each `case` statement must end with the `break` keyword to exit upon finding a match.
- A `switch` block may contain a final `default` statement to execute when no match has been found.
- A `for` loop specifies an initializer, a condition to be tested for a boolean true or false value, and a modifier, and the modifier must enable the tested condition to become false at some point to exit the loop.
- The `while` and `for` loops evaluate a test condition before any statements are executed.
- The `do while` loop evaluates a test condition after its statements have been executed.
- The `break` keyword exits from a loop when a specified condition is encountered.
- The `continue` keyword skips a single iteration of a loop when a specified condition is encountered.
- The document object has title, URL, domain, lastModified, and referrer properties that describe that document.
- The document object has forms, images, links, styleSheets, and scripts child objects that are arrays of document components.
- The document object has getElementById( ), getElementsByTagName(), and getElementsByClassName( ) methods that can be used to reference HTML elements.
- The innerHTML and innerText properties of the document object can be used to write content into existing elements.
- The document object has createElement( ), appendChild( ), and setAttribute( ) methods that can add content to a document.
- The DOM allows JavaScript to react to events such as load, click, keydown, change, and submit in response to user actions.
- Event-handler functions can be assigned to an object property or specified by the addEventListener( ) method.
- An event object can be passed to an event-handler function and the event can be identified by its event.type property.
- Radio and checkbox button objects have a checked boolean property, which is only true when the button is selected.
- A selection list object has a selectedIndex property, which contains the index number of the currently selected options[ ] array element.