What is JavaScript?

Get an overview of JavaScript and how it can add interactivity to web pages.

We'll cover the following

Overview

JavaScript is the programming language of the web. So far, we have used HTML to structure the content of our web pages and CSS to stylize our content. But what if you want to have your web page change based on input from your user? Javascript allows us to take our pages from static web pages to dynamic web applications.

Press + to interact

First steps: Understanding the DOM

One of the main reasons we use JavaScript to build interactivity is because it allows us to manipulate the Document Object Model (or DOM) for short.

Recall our discussion from the first lesson where we discussed how HTML is structured as a tree. Similarly, the DOM stores HTML elements as objects that can then be manipulated in various ways.

Press + to interact
The DOM stores HTML elements in a tree-like structure
The DOM stores HTML elements in a tree-like structure

Using JavaScript, we can manipulate the DOM to do things like:

  • Modify existing HTML elements.
  • Modify attributes on HTML elements.
  • Add or modify the CSS associated with HTML elements.
  • Add and delete HTML elements.

Let’s start looking at how we can use Javascript to build in interactivity to our websites by capturing input from the DOM. Don’t worry if you don’t totally understand what the code is doing just yet.

Creating a button to display "Hello World"
Let’s dig in deeper and examine the first line in our JS code:


Press +  to interact
var button = document.querySelector('button');
The var keyword is used to declare a variable. Variables are useful for storing data that we may want to use later. The code after the = sign assigns a value to the variable. It does this by finding the first element in the document that matches the selector wrapped in quotation marks, and then storing it in button. Therefore, the first line creates a variable and stores the first <button> element it finds in our HTML.


Just storing the <button> is fairly boring though. Our next step is to figure out how to interact with the <button>. One of the main ways we can do this is by adding an event listener that tells our program to execute some code when a user does something on the web page.


Press +  to interact
button.onclick = function(){
	alert("Hello, World!");
}
In the code above, we tell the program to execute the code stored in a function when a user clicks the button. Functions are used to store code you may want to execute more than once.


In this case, the function will create a pop-up with the message Hello, World! every time a user clicks the button.


Test your understanding


1
Indicate what the following code will do:


var h1Element = document.querySelector('h1');



A)
An <h1> element from the HTML document will be found and stored in the variable h1Element.


B)
An <h1> element will be created and stored in the variable h1Element.


C)
The first <h1> element from the HTML document will be found and stored in the variable h1Element.


Question 1 of 30 attempted
Exercise


Create an event listener that shows a message when you click the <h1> element in the HTML page below.


Test your learning 
Next steps


Before we delve deeper into DOM manipulation, it is important to understand some programming fundamentals. These fundamentals will allow you to engage more deeply with the different programming interfaces the browser provides that allow you to interact with the DOM.


Let’s dive into the world of JavaScript!