Linking JavaScript to Dynamically Add Items

Introduction and Lesson Overview

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!

Introduction to JavaScript

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.

Basic JavaScript Concepts

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.

Variables

A variable is a container for storing data values. In JavaScript, you can declare a variable using var, let, or const : JavaScript var name = "John Doe"; let age = 25; const isStudent = true; var name = "John Doe"; let age = 25; const 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 function example() {var x = 1; if (true) {var x = 2; // same variable! console.log(x); // 2} console.log(x); // 2} example(); function example() {var x = 1; if (true) {var x = 2; // same variable! console.log(x); // 2} console.log(x); // 2} example(); 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 function example() {let x = 1; if (true) {let x = 2; // different variable console.log(x); // 2} console.log(x); // 1} example(); function example() {let x = 1; if (true) {let x = 2; // different variable console.log(x); // 2} console.log(x); // 1} example(); 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 const y = 5; y = 10; // Error: Assignment to constant variable. const obj = {name: "John"}; obj.name = "Jane"; // this works because the reference to the object didn't change const y = 5; y = 10; // Error: Assignment to constant variable. const obj = {name: "John"}; obj.name = "Jane"; // this works because the reference to the object didn't change

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

JavaScript

var name = "John Doe";
let age = 25;
const isStudent = true;

JavaScript

function example() {
  var x = 1;
  if (true) {
    var x = 2; // same variable!
    console.log(x); // 2
  }
  console.log(x); // 2
}
example();

JavaScript

function example() {
  let x = 1;
  if (true) {
    let x = 2; // different variable
    console.log(x); // 2
  }
  console.log(x); // 1
}
example();

JavaScript

const y = 5;
y = 10; // Error: Assignment to constant variable.

const obj = {name: "John"};
obj.name = "Jane"; // this works because the reference to the object didn't change

JavaScript

function greet(name) {
  return "Hello, " + name + "!";
}

let greeting = greet("Alice");
console.log(greeting);  // Output: Hello, Alice!

function greet(name) {
  return "Hello, " + name + "!";
}

let greeting = greet("Alice");
console.log(greeting);  // Output: Hello, Alice!

JavaScript

function returnObject() {
  return 
  {
    name: "Alice"
  }
}

console.log(returnObject()); // Output: undefined

function returnObject() {
  return 
  {
    name: "Alice"
  }
}

console.log(returnObject()); // Output: undefined

JavaScript

function returnObject() {
  return; // ASI inserts a semicolon here
  {
    name: "Alice"
  }
}

function returnObject() {
  return; // ASI inserts a semicolon here
  {
    name: "Alice"
  }
}

JavaScript

function returnObject() {
  return {
    name: "Alice"
  };
}

console.log(returnObject()); // Output: { name: "Alice" }

function returnObject() {
  return {
    name: "Alice"
  };
}

console.log(returnObject()); // Output: { name: "Alice" }

JavaScript

let score = 85;

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 80) {
  console.log("Grade: B");
} else {
  console.log("Grade: C");
}

// Output: Grade: B

let score = 85;

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 80) {
  console.log("Grade: B");
} else {
  console.log("Grade: C");
}

// Output: Grade: B

JavaScript

// For loop
for (let i = 0; i < 5; i++) {
  console.log("Number: " + i);
}

// While loop
let j = 0;
while (j < 5) {
  console.log("Number: " + j);
  j++;
}

// For loop
for (let i = 0; i < 5; i++) {
  console.log("Number: " + i);
}

// While loop
let j = 0;
while (j < 5) {
  console.log("Number: " + j);
  j++;
}

plaintext

For loop output:
Number: 0
Number: 1
Number: 2
Number: 3
Number: 4

While loop output:
Number: 0
Number: 1
Number: 2
Number: 3
Number: 4

For loop output:
Number: 0
Number: 1
Number: 2
Number: 3
Number: 4

While loop output:
Number: 0
Number: 1
Number: 2
Number: 3
Number: 4

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
    <!-- Link to external JavaScript file -->
    <script src="script.js"></script>
  </head>

  <body>
    <h1 id="header">Hello, world!</h1>
    <script>
      document.getElementById("header").onclick = function() {
        this.innerHTML = "You clicked me!";
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
    <!-- Link to external JavaScript file -->
    <script src="script.js"></script>
  </head>

  <body>
    <h1 id="header">Hello, world!</h1>
    <script>
      document.getElementById("header").onclick = function() {
        this.innerHTML = "You clicked me!";
      }
    </script>
  </body>
</html>

JavaScript

document.getElementById('add-btn').addEventListener('click', function() {
    const newTodo = document.getElementById('new-todo').value;
    if (newTodo.trim() === '') return;
    const li = document.createElement('li');
    li.textContent = newTodo;
    document.getElementById('todo-list').appendChild(li);
    document.getElementById('new-todo').value = '';
});

document.getElementById('add-btn').addEventListener('click', function() {
    const newTodo = document.getElementById('new-todo').value;
    if (newTodo.trim() === '') return;
    const li = document.createElement('li');
    li.textContent = newTodo;
    document.getElementById('todo-list').appendChild(li);
    document.getElementById('new-todo').value = '';
});

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Todo List</title>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>My Todo List</h1>
    <input type="text" id="new-todo" placeholder="Enter a new todo">
    <button id="add-btn">Add Todo</button>
    <ul id="todo-list"></ul>
    <script>
      // Include the JavaScript code here or in an external script.js file
      document.getElementById('add-btn').addEventListener('click', function() {
        const newTodo = document.getElementById('new-todo').value;
        if (newTodo.trim() === '') return;
        const li = document.createElement('li');
        li.textContent = newTodo;
        document.getElementById('todo-list').appendChild(li);
        document.getElementById('new-todo').value = '';
      });
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Todo List</title>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>My Todo List</h1>
    <input type="text" id="new-todo" placeholder="Enter a new todo">
    <button id="add-btn">Add Todo</button>
    <ul id="todo-list"></ul>
    <script>
      // Include the JavaScript code here or in an external script.js file
      document.getElementById('add-btn').addEventListener('click', function() {
        const newTodo = document.getElementById('new-todo').value;
        if (newTodo.trim() === '') return;
        const li = document.createElement('li');
        li.textContent = newTodo;
        document.getElementById('todo-list').appendChild(li);
        document.getElementById('new-todo').value = '';
      });
    </script>
  </body>
</html>

JavaScript

function greet(name) {
  return "Hello, " + name + "!";
}

let greeting = greet("Alice");
console.log(greeting);  // Output: Hello, Alice!

JavaScript

function returnObject() {
  return 
  {
    name: "Alice"
  }
}

console.log(returnObject()); // Output: undefined

JavaScript

function returnObject() {
  return; // ASI inserts a semicolon here
  {
    name: "Alice"
  }
}

JavaScript

function returnObject() {
  return {
    name: "Alice"
  };
}

console.log(returnObject()); // Output: { name: "Alice" }

JavaScript

let score = 85;

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 80) {
  console.log("Grade: B");
} else {
  console.log("Grade: C");
}

// Output: Grade: B

JavaScript

// For loop
for (let i = 0; i < 5; i++) {
  console.log("Number: " + i);
}

// While loop
let j = 0;
while (j < 5) {
  console.log("Number: " + j);
  j++;
}

plaintext

For loop output:
Number: 0
Number: 1
Number: 2
Number: 3
Number: 4

While loop output:
Number: 0
Number: 1
Number: 2
Number: 3
Number: 4

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
    <!-- Link to external JavaScript file -->
    <script src="script.js"></script>
  </head>

  <body>
    <h1 id="header">Hello, world!</h1>
    <script>
      document.getElementById("header").onclick = function() {
        this.innerHTML = "You clicked me!";
      }
    </script>
  </body>
</html>

JavaScript

document.getElementById('add-btn').addEventListener('click', function() {
    const newTodo = document.getElementById('new-todo').value;
    if (newTodo.trim() === '') return;
    const li = document.createElement('li');
    li.textContent = newTodo;
    document.getElementById('todo-list').appendChild(li);
    document.getElementById('new-todo').value = '';
});

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Todo List</title>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>My Todo List</h1>
    <input type="text" id="new-todo" placeholder="Enter a new todo">
    <button id="add-btn">Add Todo</button>
    <ul id="todo-list"></ul>
    <script>
      // Include the JavaScript code here or in an external script.js file
      document.getElementById('add-btn').addEventListener('click', function() {
        const newTodo = document.getElementById('new-todo').value;
        if (newTodo.trim() === '') return;
        const li = document.createElement('li');
        li.textContent = newTodo;
        document.getElementById('todo-list').appendChild(li);
        document.getElementById('new-todo').value = '';
      });
    </script>
  </body>
</html>

Introduction and Lesson Overview

Introduction to JavaScript

Basic JavaScript Concepts

Variables

Join the 1M+ learners on CodeSignal

Data Types

Functions

Using Semicolons in JavaScript

Conditionals

Loops

Linking JavaScript to HTML

Dynamically Adding a Todo Item with JavaScript

Lesson Summary