JavaScript and HTML

Articles

JavaScript and HTML

This article explains JavaScript and HTML.

YouTube Video

javascript-html-dom.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8      box-sizing: border-box;
  9    }
 10
 11    body {
 12      margin: 0;
 13      padding: 2em;
 14      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 15      background-color: #f7f9fc;
 16      color: #333;
 17      line-height: 1.6;
 18    }
 19
 20    .container {
 21      max-width: 800px;
 22      margin: 0 auto;
 23      padding: 1em;
 24      background-color: #ffffff;
 25      border: 1px solid #ccc;
 26      border-radius: 10px;
 27      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 28    }
 29
 30    h1, h2 {
 31      font-size: 1.5rem;
 32      color: #007bff;
 33      margin-top: 0.5em;
 34      margin-bottom: 0.5em;
 35      border-left: 5px solid #007bff;
 36      padding-left: 0.6em;
 37      background-color: #e9f2ff;
 38    }
 39
 40    button {
 41      display: block;
 42      margin: 1em auto;
 43      padding: 0.75em 1.5em;
 44      font-size: 1rem;
 45      background-color: #007bff;
 46      color: white;
 47      border: none;
 48      border-radius: 6px;
 49      cursor: pointer;
 50      transition: background-color 0.3s ease;
 51    }
 52
 53    button:hover {
 54      background-color: #0056b3;
 55    }
 56
 57    #output {
 58      margin-top: 1em;
 59      background-color: #1e1e1e;
 60      color: #0f0;
 61      padding: 1em;
 62      border-radius: 8px;
 63      min-height: 200px;
 64      font-family: Consolas, monospace;
 65      font-size: 0.95rem;
 66      overflow-y: auto;
 67      white-space: pre-wrap;
 68    }
 69
 70    .highlight {
 71      outline: 3px solid #ffc107; /* yellow border */
 72      background-color: #fff8e1;  /* soft yellow background */
 73      transition: background-color 0.3s ease, outline 0.3s ease;
 74    }
 75
 76    .active {
 77      background-color: #28a745; /* green background */
 78      color: #fff;
 79      box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 80      transition: background-color 0.3s ease, box-shadow 0.3s ease;
 81    }
 82  </style>
 83</head>
 84<body>
 85  <div class="container">
 86    <h1>JavaScript Console</h1>
 87    <button id="executeBtn">Execute</button>
 88    <div id="output"></div>
 89  </div>
 90
 91  <div class="container">
 92    <h2>HTML Sample</h2>
 93    <div id="content">Hello, World!</div>
 94    <button id="changeText">Change Text</button>
 95  </div>
 96
 97  <script>
 98    // Override console.log to display messages in the #output element
 99    (function () {
100      const originalLog = console.log;
101      console.log = function (...args) {
102        originalLog.apply(console, args);
103        const output = document.getElementById('output');
104        output.textContent += args.map(String).join(' ') + '\n';
105      };
106    })();
107
108    document.getElementById('executeBtn').addEventListener('click', () => {
109      // Prevent multiple loads
110      if (document.getElementById('externalScript')) return;
111
112      const script = document.createElement('script');
113      script.src = 'javascript-html-dom.js';
114      script.id = 'externalScript';
115      //script.onload = () => console.log('javascript-html-dom.js loaded and executed.');
116      //script.onerror = () => console.log('Failed to load javascript-html-dom.js.');
117      document.body.appendChild(script);
118    });
119  </script>
120</body>
121</html>

The `window` Object in JavaScript

The window object in JavaScript is the global object in a browser environment, providing functions and information related to the web page and browser window. Since window is the global scope of the browser, all JavaScript code running in the browser becomes part of the window object. The window object plays an important role in running JavaScript in the browser environment, providing many APIs and properties.

Key Features of the `window` Object

Properties

 1// Get and display the document's title
 2console.log(`Title: ${window.document.title}`);
 3
 4// Get and display the current URL
 5console.log(`URL: ${window.location.href}`);
 6
 7// Go back to the previous page
 8// Note: this will navigate back in history, so be careful when running it
 9console.log("Navigating back to the previous page...");
10window.history.back();
11
12// Display the browser's user agent
13console.log(`User Agent: ${window.navigator.userAgent}`);
14
15// Display the width and height of the viewport
16console.log(`Viewport Width: ${window.innerWidth}`);
17console.log(`Viewport Height: ${window.innerHeight}`);

window.document: Accesses the current HTML document.
window.location: Manages the current URL and browser navigation.
window.history: Accesses the browser's history information and allows forward and backward navigation.
window.navigator: Provides information about the browser and device.
window.innerWidth / window.innerHeight: Retrieves the width and height of the viewport.

Methods

 1// Show an alert
 2window.alert('Hello, this is an alert!');
 3
 4// Show a confirmation dialog
 5if (window.confirm('Are you sure you want to proceed?')) {
 6    console.log('User clicked OK');
 7} else {
 8    console.log('User clicked Cancel');
 9}
10
11// Show a prompt dialog
12const userInput = window.prompt('Please enter your name:');
13console.log(`Hello, ${userInput}!`);
14
15// Open a new tab
16window.open('https://www.example.com', '_blank');
17
18// Display a message after 3 seconds
19window.setTimeout(() => {
20    console.log('This message appears after 3 seconds!');
21}, 3000);
22
23// Display a message every second
24const intervalId = window.setInterval(() => {
25    console.log('This message appears every second!');
26}, 1000);
27
28// Clear the interval after 5 seconds
29setTimeout(() => {
30    clearInterval(intervalId);
31    console.log('Interval cleared.');
32}, 5000);

window.alert(): Displays an alert dialog.
window.confirm(): Displays a dialog asking for user confirmation and returns an OK or Cancel result.
window.prompt(): Displays a dialog prompting user input and retrieves the entered value.
window.open(): Opens a new window or tab.
window.setTimeout() / window.setInterval(): Sets a timer to execute a function after a certain time or at regular intervals.

Event Handling

 1// Display a message when the page is fully loaded
 2window.onload = () => {
 3    console.log('Page is fully loaded!');
 4};
 5
 6// Display a message when the window is resized
 7window.onresize = () => {
 8    console.log('Window resized! New size:', window.innerWidth, 'x', window.innerHeight);
 9};
10
11// Display a message when the page is being scrolled
12window.onscroll = () => {
13    console.log('Page is being scrolled!');
14};

window.onload: This event is triggered when the page has fully loaded.
window.onresize: This event is triggered when the window is resized.
window.onscroll: This event fires when the user scrolls the page.

Role as a Global Variable

1var myVar = 10;
2console.log(window.myVar); // 10

The window object holds global variables and functions. In other words, declared variables and functions automatically become properties of window.

DOM Manipulation in JavaScript

JavaScript DOM (Document Object Model) manipulation is used to dynamically interact with elements on the web page. The DOM represents the structure of an HTML document as a tree, which can be altered using JavaScript to modify the structure and control the display of the page.

Basics of the DOM

The DOM treats the HTML of a webpage as objects, allowing access and modification of elements and attributes. Use the document object to access the HTML document.

Retrieving DOM Elements

JavaScript has a number of methods to access elements in the DOM.

document.getElementById(): Retrieves an element by its id attribute.
document.getElementsByClassName(): Retrieves elements by class name. Returns an HTMLCollection. HTMLCollection is a live collection that reflects changes in the DOM in real time.
document.getElementsByTagName(): Retrieves elements by tag name. Returns an HTMLCollection.
document.querySelector(): Uses a CSS selector to retrieve the first matching element.
document.querySelectorAll(): Uses a CSS selector to retrieve all matching elements. Returns a NodeList. NodeList is a static collection that holds the state at the time of retrieval and does not reflect subsequent changes to the DOM.

Example: `getElementById` and `querySelector`

1<div id="content">Hello, World!</div>
2<button id="changeText">Change Text</button>

1const content = document.getElementById('content');
2console.log(content.textContent); // "Hello, World!"
3
4const button = document.querySelector('#changeText');

DOM Manipulation

Various operations can be performed on the elements that are obtained.

Changing Text

To change the text of an element, use textContent or innerHTML.

textContent: Get or change the text content of an element. HTML tags are not interpreted.
innerHTML: Get or change the HTML content of an element. Strings containing HTML tags are also processed.

1content.textContent = 'Hello, world!';  // Change the text
2button.innerHTML = '<strong>Click to change</strong>';  // Change including HTML

Changing Attributes

Use setAttribute() and getAttribute() to change element attributes.

1button.setAttribute('disabled', 'true');  // Disable the button
2const id = content.getAttribute('id');  // Get the "content"
3console.log(id);

Changing CSS

Use the style property to change CSS styles.

1content.style.color = 'red';  // Change the text color to red
2content.style.fontSize = '20px';  // Change the font size

Manipulating Classes

Use classList to add or remove classes from an element.

add(): Adds a class.
remove(): Removes a class.
toggle(): Adds or removes a class depending on whether it exists.
contains(): Checks whether a class exists.

1content.classList.add('highlight');  // Add a class
2button.classList.toggle('active');   // Toggle a class

Creating and Deleting DOM Elements

Creating New Elements

Use document.createElement() to create a new element and add it to the DOM.

1const newDiv = document.createElement('div');  // Create a new div element
2newDiv.textContent = 'This is a new element';
3document.body.appendChild(newDiv);  // Append to the body element

Deleting Elements

Use the remove() method to delete an element.

1newDiv.remove();  // Remove the created element

Adding Events

As part of DOM manipulation, you can add event handlers that respond to user interactions. Use addEventListener() to handle events such as clicks and keyboard interactions.

1button.addEventListener('click', () => {
2    content.textContent = 'The text has been changed';
3});

In this example, clicking a button changes the text of the #content element.

Navigating the DOM Tree

You can navigate the DOM to access parent and sibling elements.

parentNode: Accesses the parent node.
childNodes: Accesses the child nodes. You can access all types of nodes, not just element nodes like HTML tags, but also text nodes and comment nodes.
firstChild / lastChild: Accesses the first and last child elements.
nextSibling / previousSibling: Accesses the next and previous sibling elements.

1const parent = content.parentNode;  // Get the parent element
2const firstChild = parent.firstChild;  // Get the first child element
3console.log(firstChild);

Example: Adding a New Item to a List

Here is an example of adding a new item to a list.

 1// Get the container element where the HTML will be inserted
 2const content = document.getElementById('content');
 3
 4// Create the <ul> element with id="list"
 5const list = document.createElement('ul');
 6list.id = 'list';
 7
 8// Add initial list items
 9const item1 = document.createElement('li');
10item1.textContent = 'Item 1';
11list.appendChild(item1);
12
13const item2 = document.createElement('li');
14item2.textContent = 'Item 2';
15list.appendChild(item2);
16
17// Create the <button> element with id="addItem"
18const addItemButton = document.createElement('button');
19addItemButton.id = 'addItem';
20addItemButton.textContent = 'Add Item';
21
22// Append the list and button to the content container
23content.appendChild(list);
24content.appendChild(addItemButton);
25
26// Add event listener to the button
27addItemButton.addEventListener('click', () => {
28    const newItem = document.createElement('li');
29    newItem.textContent = 'New Item';
30    list.appendChild(newItem);
31});

In this code, clicking the "Add Item" button adds a new <li> element to the list.

Summary

JavaScript DOM manipulation allows you to get, change, create, and delete elements within an HTML document.
You can get elements using methods like getElementById() and querySelector().
Use textContent or innerHTML to change text and HTML, and setAttribute() to manipulate attributes.
Use createElement() to create new elements and remove() to delete them.
You can create interactive web pages that respond to user actions through event handling.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video

Generator Functions in JavaScript

JavaScript and HTML

YouTube Video

The window Object in JavaScript

Key Features of the window Object

Properties

Methods

Event Handling

Role as a Global Variable

DOM Manipulation in JavaScript

Basics of the DOM

Retrieving DOM Elements

Example: getElementById and querySelector

DOM Manipulation

Changing Text

Changing Attributes

Changing CSS

Manipulating Classes

Creating and Deleting DOM Elements

Creating New Elements

Deleting Elements

Adding Events

Navigating the DOM Tree

Example: Adding a New Item to a List

Summary

YouTube Video

The `window` Object in JavaScript

Key Features of the `window` Object

Example: `getElementById` and `querySelector`