Hello there, and welcome to our exciting journey into the world of web development! Today, we're going to take a deeper step into understanding the structure of a webpage and how we can make it interactive.

Every web page you see on the Internet, from social media sites to your favorite news portals, is built using a combination of HTML and JavaScript. HTML structures the content, but JavaScript provides the interactivity!

Our goal in this lesson is to grasp the basic structure of HTML and learn how to infuse life into it using JavaScript. We're going to start with a general overview of HTML and JavaScript, delve into understanding the structure of an HTML document, and then look at how we can add interactivity by linking JavaScript to HTML. Ready? Let's get started!

JavaScript is a powerful and versatile programming language that enhances the functionality of web pages. Unlike HTML, which is a markup language used to structure and present content, JavaScript is a scripting language that enables you to create interactive and dynamic experiences on the web.

JavaScript operates on the client's browser, meaning it runs directly on your visitors' devices, enabling quick responses to user actions without needing to communicate with a server. It can update and change both HTML and CSS, control multimedia, animate images, and even store data.

For instance, JavaScript can display a pop-up alert, validate form data before it's submitted, or dynamically change the appearance of a webpage based on user interactions. This wide range of capabilities makes JavaScript essential for creating modern, interactive web applications. Imagine features like interactive photo galleries, real-time form validation, or dynamically updating content — all these can be achieved using JavaScript.

Before we dive deeper into integrating JavaScript with HTML, it's essential to understand some fundamental JavaScript concepts. These concepts form the building blocks of JavaScript programming and will help you write more effective and efficient code.

A variable is a container for storing data values. In JavaScript, you can declare a variable using var, let, or const:

JavaScript
Copy to clipboard
1var name = "John Doe";
2let age = 25;
3const isStudent = true;

• var: var is function-scoped and can be re-declared. It has a wider scope, which sometimes leads to unexpected behavior due to its ability to be hoisted (moved to the top of the scope). Function-scoped means that the variable is available within the function it is declared in, regardless of block boundaries within that function.

  JavaScript
  Copy to clipboard
  1function example() {
  2  var x = 1;
  3  if (true) {
  4    var x = 2; // same variable!
  5    console.log(x); // 2
  6  }
  7  console.log(x); // 2
  8}
  9example();

• let: let is block-scoped and can't be re-declared within the same scope. It is more predictable and less prone to errors compared to var as it does not hoist within its block. Block-scoped variables are confined to the block (defined by {}) in which they are declared.

  JavaScript
  Copy to clipboard
  1function example() {
  2  let x = 1;
  3  if (true) {
  4    let x = 2; // different variable
  5    console.log(x); // 2
  6  }
  7  console.log(x); // 1
  8}
  9example();

• const: const is block-scoped and can't be re-assigned after it's initialized. It is used for variables that should not change their value as they establish a contract that the variable will not be re-bound.

  JavaScript
  Copy to clipboard
  1const y = 5;
  2y = 10; // Error: Assignment to constant variable.
  3
  4const obj = {name: "John"};
  5obj.name = "Jane"; // this works because the reference to the object didn't change

JavaScript supports various data types, including:

• String: Text data (e.g., "Hello, world!")
• Number: Numeric data (e.g., 42, 3.14)
• Boolean: Represents logical values (true or false)
• Array: Collection of values (e.g., [1, 2, 3])
• Object: Key-value pairs (e.g., {name: "John", age: 25})

Functions are reusable blocks of code designed to perform a particular task. Here’s an example of how to define and use a function in JavaScript:

JavaScript
Copy to clipboard
1function greet(name) {
2  return "Hello, " + name + "!";
3}
4
5let greeting = greet("Alice");
6console.log(greeting);  // Output: Hello, Alice!

console.log is an example of a function that prints a statement.

In JavaScript, semicolons (;) are used to terminate statements, making it clear where one statement ends and the next begins. Although JavaScript has automatic semicolon insertion (ASI) which allows certain statements to work without explicitly ending in a semicolon, it is generally a good practice to use them to avoid potential pitfalls and ambiguities in your code.

Without semicolons, JavaScript might misinterpret the code, leading to unexpected results. For instance:

JavaScript
Copy to clipboard
1function returnObject() {
2  return 
3  {
4    name: "Alice"
5  }
6}
7
8console.log(returnObject()); // Output: undefined

Since there's no semicolon after the return, JavaScript interprets it as:

JavaScript
Copy to clipboard
1function returnObject() {
2  return; // ASI inserts a semicolon here
3  {
4    name: "Alice"
5  }
6}

This causes the function to return undefined instead of the intended object.

Correct usage with semicolons:

JavaScript
Copy to clipboard
1function returnObject() {
2  return {
3    name: "Alice"
4  };
5}
6
7console.log(returnObject()); // Output: { name: "Alice" }

In summary, while semicolons might sometimes seem optional due to ASI, consistently using them helps prevent bugs and makes your code more readable and maintainable.

Conditionals allow you to perform different actions based on different conditions. The most common conditional statement is if:

JavaScript
Copy to clipboard
1let score = 85;
2
3if (score >= 90) {
4  console.log("Grade: A");
5} else if (score >= 80) {
6  console.log("Grade: B");
7} else {
8  console.log("Grade: C");
9}
10
11// Output: Grade: B

Loops are used to perform repeated tasks based on a condition. The most common types of loops are for and while:

JavaScript
Copy to clipboard
1// For loop
2for (let i = 0; i < 5; i++) {
3  console.log("Number: " + i);
4}
5
6// While loop
7let j = 0;
8while (j < 5) {
9  console.log("Number: " + j);
10  j++;
11}

In the for loop:

• let i = 0 initializes the variable i with the value 0.
• i < 5 is the condition that keeps the loop running as long as i is less than 5.
• i++ is a shorthand for i = i + 1, incrementing i by 1 after each iteration.

So, during each loop iteration, the console will log the current value of i, and then i++ will increase i by 1 until the condition i < 5 is no longer true.

The while loop behaves similarly, initializing the variable j with the value 0, after which it is manually increased until the condition j < 5 is not true.

The outputs of the loops are:

Plain text
Copy to clipboard
1For loop output:
2Number: 0
3Number: 1
4Number: 2
5Number: 3
6Number: 4
7
8While loop output:
9Number: 0
10Number: 1
11Number: 2
12Number: 3
13Number: 4

The main difference between for and while loops in JavaScript is their structure. A for loop runs a set number of times, making it ideal for counting iterations., whereas a while loop continues to run as long as a specified condition is met, making it useful when the number of iterations isn't known beforehand.

Understanding these fundamental JavaScript concepts will enable you to create more dynamic and interactive web pages as you progress in your learning.

Now, how do we infuse our static HTML pages with dynamic JavaScript? The answer lies in the <script> tag.

You can write your JavaScript directly within HTML using the <script> tag. Or, if your JavaScript is in a separate file, you can link it using the src attribute of the <script> tag.

Here's an example of adding interactive functionality that changes the text of the <h1> element when clicked:

HTML, XML
Copy to clipboard
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>My First Web Page</title>
5    <!-- Link to external JavaScript file -->
6    <script src="script.js"></script>
7  </head>
8
9  <body>
10    <h1 id="header">Hello, world!</h1>
11    <script>
12      document.getElementById("header").onclick = function() {
13        this.innerHTML = "You clicked me!";
14      }
15    </script>
16  </body>
17</html>

By placing the <script> tag before the closing </body> tag, we ensure that the page loads faster since the script execution is deferred until the HTML is completely parsed. This improves the user experience as the visible content loads quickly.

In the JavaScript code, document.getElementById("header").onclick attaches an event handler to the element with the ID header, which waits for a click event. When the element is clicked, the function is executed, and this.innerHTML refers to the content within the clicked element. The function sets the innerHTML of the element to "You clicked me!", updating the text displayed on the webpage.

Let's take a look at a practical example of how you can use JavaScript to add a new todo item to a list when a button is clicked. The following code demonstrates how to accomplish this:

JavaScript
Copy to clipboard
1document.getElementById('add-btn').addEventListener('click', function() {
2    const newTodo = document.getElementById('new-todo').value;
3    if (newTodo.trim() === '') return;
4    const li = document.createElement('li');
5    li.textContent = newTodo;
6    document.getElementById('todo-list').appendChild(li);
7    document.getElementById('new-todo').value = '';
8});

1. Event Listener: We start by selecting the button with the id add-btn and attaching an event listener to it. This listener waits for the click event to occur. Unlike onclick, addEventListener allows for multiple event handlers to be attached to the same event, offering more flexibility. The addEventListener method is used here to set up an event that will fire a function when the button is clicked.

2. Get Input Value: When the button is clicked, we retrieve the value from the input field with the id new-todo. This is done using document.getElementById('new-todo').value, which accesses the DOM element and gets the current value entered by the user.

3. Check Input: We check if the input is empty (or only whitespace) using trim(), which removes whitespace from both ends of a string (e.g., " example ".trim() becomes "example"). If it is, we exit the function early to prevent adding empty items. The if (newTodo.trim() === '') return; line ensures we don't process empty or whitespace-only inputs.

4. Create List Item: If the input is valid, we proceed to create a new <li> element. This is achieved using document.createElement('li'), which creates a new list item element in the document.

5. Set Text Content: We set the text content of the new <li> element to the value of the todo item input. This is done using li.textContent = newTodo, which assigns the value from the input field to the text content of the newly created list item.

6. Add to List: We append the new <li> element to the existing unordered list with the id todo-list. This step involves using document.getElementById('todo-list').appendChild(li), which adds the new list item as a child element of the todo list.

7. Clear Input: Finally, we clear the input field by setting its value to an empty string. This is done with document.getElementById('new-todo').value = '', ensuring the input field is empty and ready for the next todo item to be entered by the user.

This script dynamically adds new items to a todo list, making our webpage interactive and responsive to user actions. Here's how you would include this script in your HTML:

HTML, XML
Copy to clipboard
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Todo List</title>
5    <script src="script.js"></script>
6  </head>
7  <body>
8    <h1>My Todo List</h1>
9    <input type="text" id="new-todo" placeholder="Enter a new todo">
10    <button id="add-btn">Add Todo</button>
11    <ul id="todo-list"></ul>
12    <script>
13      // Include the JavaScript code here or in an external script.js file
14      document.getElementById('add-btn').addEventListener('click', function() {
15        const newTodo = document.getElementById('new-todo').value;
16        if (newTodo.trim() === '') return;
17        const li = document.createElement('li');
18        li.textContent = newTodo;
19        document.getElementById('todo-list').appendChild(li);
20        document.getElementById('new-todo').value = '';
21      });
22    </script>
23  </body>
24</html>

This example illustrates how to create a dynamic todo list where users can add new items by interacting with the webpage.

And we're done for today! Congratulations, you now understand the fundamental structure of an HTML document and how you can add a layer of dynamic interactivity using JavaScript. We've covered a lot, from understanding what JavaScript is, to building the basic structure of a web page, and then linking an external JavaScript file to it.

Next, we have some great practice exercises lined up for you. It is through practice that we will solidify today's knowledge and build upon it, preparing us for more complex and exciting things ahead in the world of web development. So roll up your sleeves and let's get practicing! Great job reaching this far! You've just built your first interactive webpage!