[Go to site: main page, start]
Scribd
Upload
3 views3 pages

JavaScript Lecture Notes

The document covers essential JavaScript concepts including the Document Object Model (DOM), event handling, array functions, classes and modules, and asynchronous JavaScript with APIs. It provides examples for modifying elements, handling events, filtering data, and using the Fetch API to retrieve data. The notes serve as a foundational guide for understanding JavaScript programming and web development techniques.

Uploaded by

aribamalickprvt
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views3 pages

JavaScript Lecture Notes

The document covers essential JavaScript concepts including the Document Object Model (DOM), event handling, array functions, classes and modules, and asynchronous JavaScript with APIs. It provides examples for modifying elements, handling events, filtering data, and using the Fetch API to retrieve data. The notes serve as a foundational guide for understanding JavaScript programming and web development techniques.

Uploaded by

aribamalickprvt
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

JavaScript Essentials: Lecture Notes

1. Document Object Model (DOM)

The DOM is a tree-like structure representing your HTML document. Every element
(like <div> or <p> ) is a "node" in this tree [cite: 162, 163].

Selection Methods

• getElementById("id") : Finds a specific element by its ID [cite: 175].


• querySelector(".class") : Uses CSS-style selectors to find the first match [cite:
176].
• querySelectorAll("tag") : Finds all matches and puts them in a NodeList
(which acts like an array) [cite: 164, 176].

Easy Example: Changing Text

// Find a heading and change its text


const title = [Link]("main-title");
[Link] = "Welcome to My Site!";

Modifying Elements

You can change an element's style (color, size) or its content [cite: 197, 198].

• [Link] : Changes color [cite: 199].


• textContent : Safely changes the text inside a tag [cite: 205].
• innerHTML : Changes the HTML inside (use with caution!) [cite: 201, 205].

2. Event Handling

Events are actions like clicks or keypresses. An Event Handler is a function that runs
when that action happens [cite: 221, 222].
Easy Example: Click Button

const btn = [Link]("button");


[Link]("click", () => {
alert("Button was clicked!");
});

Event Propagation

• Bubbling: The event starts at the target and moves "up" to parents [cite: 241].
• Capturing: The event moves from the root "down" to the target [cite: 238].
• Use [Link]() to stop the event from triggering parent handlers
[cite: 247].

3. Array Functions

JavaScript provides powerful ways to process lists of data [cite: 465].

• forEach() : Runs a function once for every item [cite: 466].


• filter() : Creates a new list with only items that pass a test [cite: 473].
• map() : Transforms every item in a list into something new [cite: 476].
• find() : Grabs the first item that matches a condition [cite: 468].

Easy Example: Filtering Numbers

const ages = [15, 20, 25, 30];


const adults = [Link](age => age >= 18);
// adults is now [20, 25, 30]

4. Advanced Features: Classes & Modules

Classes

Classes are templates for creating objects. They use a constructor to set initial
values [cite: 506, 508].
Modules

Modules let you split code into different files. Use export to share a variable and
import to use it elsewhere [cite: 517, 521].

5. Asynchronous JavaScript & APIs

Asynchronous code means the browser can do other things while waiting for data
(like a file download) [cite: 523].

The Fetch API

Used to request data from a server. It returns a Promise—a "placeholder" for data
that will arrive later [cite: 528, 534, 403].

Easy Example: Getting Data

async function getData() {


const response = await fetch("[Link]
const data = await [Link]();
[Link](data);
}

Source: Fundamentals of Web Development, 3rd Edition (Connolly & Hoar)

You might also like