JavaScript Basics

JavaScript is a client-side web programming language. It is used to change the HTML and CSS of a webpage in order to make it more interactive.

Client-side means JavaScript code is run inside a client. A client is usually a web browser, like Google Chrome.

Important Things to Know

The different roles of HTML, CSS and Javscript
Using getElementById to select elements to alter
The placement of JavaScript code is very important
Running JavaScript code when an event occurs (on click or mouseover, etc...)

Roles of HTML, CSS and JavaScript Back to top

HTML	HTML provides the basic structure of a webpage. The bones.
CSS	CSS controls the design and layout of the webpage. The skin.
JavaScript	JavaScript allows you to change HTML and CSS after the page is loaded. It makes the webpage interactive. The muscles.

getElementById Back to top

You can use getElementById to control any HTML element that has an id.

An Example With Each Part Explained

document.getElementById("myheader").innerHTML = "Placement Matters";

document - the webpage (you are getting an HTML element on the current webpage)
getElementById() - a JavaScript method that returns an HTML element
myheader - the value of an HTML element's id attribute, <h1 id="myheader"></h1>
innerHTML - a property that lets you get or replace the content of an HTML element
"Placement Matters" - a string of characters that you are placing inside the HTML element

Using getElementById

Here is an example using getElementById. There are THREE HTML elements that have id attributes, an <h1>, an <h2> and a <p>.

There is a block of JavaScript code that changes the text inside each of them using innerHTML and changes the background color of each of them using style.backgroundColor.

<body>
  <h1 id="myheader"></h1>
  <h2 id="mysub"></h2>
  <p id="mypara"></p>
  
  <script>
    document.getElementById("myheader").innerHTML = "Web Design";
    document.getElementById("mysub").innerHTML = "Is The";
    document.getElementById("mypara").innerHTML = "Best";
    
    document.getElementById("myheader").style.backgroundColor = "#e9fcf3";
    document.getElementById("mysub").style.backgroundColor = "#bcf5dc";
    document.getElementById("mypara").style.backgroundColor = "#8fefc5";    
  </script>
</body>

Placement Matters, A Lot Back to top

You can place JavaScript code directly on a webpage in between <script></script> tags.

JavaScript code is used to alter the HTML and CSS of a webpage.

When a browser loads a webpage, it does so line-by-line, starting at the top of the file.

Example of Bad Placement

The JavaScript code trying to change the text and color of the <h1>.

The <h1> is on line 13. When the browser reaches the JavaScript code, on line 9, the <h1> doesn't exist yet, so it cannot be changed.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Placement Matters</title>
</head>

<body>
  <script>
    document.getElementById("myheader").style.color = "#FF0000";
    document.getElementById("myheader").innerHTML = "Placement Matters";
  </script>
  <h1 id="myheader">XXXXXXXXXX</h1>
</body>
</html>

Example of Good Placement

Here, the <h1> comes before the JavaScript code.

The <h1> is on line 9. When the browser reaches the JavaScript code, on line 10, the <h1> already exists so it can be changed.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Placement Matters</title>
</head>

<body>
  <h1 id="myheader">XXXXXXXXXX</h1>
  <script>
    document.getElementById("myheader").style.color = "#FF0000";
    document.getElementById("myheader").innerHTML = "Placement Matters";
  </script>
</body>
</html>

Events Back to top

You can run JavaScript code when an event occurs by using HTML attributes.

Event	Description
onchange	An HTML element has been changed.
onclick	The user clicks an HTML element.
onmouseover	The user moves the mouse over an HTML element.
onmouseout	The user moves the mouse away from an HTML element.
onkeydown	The user pushes a keyboard key.
onkeyup	The user releases a keyboard key.
onload	The browser has finished loading the page.
and more...	You can view a list of all the HTML event attributes here.

On Change

You can run some JavaScript code when an HTML element has been changed.

Try selecting an option. The color and the text inside the <h1> will change.

<body>
  <h1 id="myheader">XXXXXXXXXX</h1>
  <select onchange="document.getElementById('myheader').innerHTML = 'You chose ' + this.value;
                    document.getElementById('myheader').style.color = this.value;">
    <option></option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
  </select>
</body>

On Click

You can run some JavaScript code when an HTML element has been clicked.

Try clicking the paragraph, hyperlink or strong tags. The text inside the <h1> will change.

<body>
  <h1 id="myheader">XXXXXXXXXX</h1>

  <p onclick="document.getElementById('myheader').innerHTML = 'You clicked the paragraph!';">Click me!!</p>

  <a href="#" onclick="document.getElementById('myheader').innerHTML = 'You clicked the hyperlink!';">Click me!!</a><br><br>

  <strong onclick="document.getElementById('myheader').innerHTML = 'You clicked the strong tag!';">Click me!!</strong>
</body>

On Mouse Over & On Mouse Out

You can run some JavaScript code when the mouse cursor enteres or leaves an HTML element.

Try moving your mouse cursor over the <h1>. The background color and the text inside the <h1> will change.

<body>
  <h1 onmouseover="this.innerHTML = 'The mouse cursor has ENTERED the H1'; this.style.backgroundColor = 'yellow';"
      onmouseout="this.innerHTML = 'The mouse cursor has LEFT the H1'; this.style.backgroundColor = 'red';">Mouse Over Me</h1>
</body>

On Key Up & On Key Down

You can run some JavaScript code as you type into an HTML. You choose to run the code when the key is pressed or the key is released..

Try typing into the <input>. The text inside the <h1> will change when you release the key. The text inside the <h2> will change when you press the key.

<body>
  <h1 id="myheader">On Key Up</h1>
  <h2 id="myheader2">On Key Down</h2>
  <input onkeyup="document.getElementById('myheader').innerHTML = this.value;" onkeydown="document.getElementById('myheader2').innerHTML = this.value;">
</body>

On Load

You can run some JavaScript code as soon as the webpage completely loads.

Since this JavaScript code only runs once the webpage has completely loaded, it can be placed before the <h1> and still work.

<body onload="document.getElementById('myheader').innerHTML = 'The Page Has Loaded'; 
              document.body.style.backgroundColor = 'yellow';">
  <h1 id="myheader">XXXXXXXXXXXXX</h1>
</body>

Syntax

What is syntax? It is a set of rules that make up JavaScript.

Values

There are two types of values:

Fixed values, which are called literals, and can be
- Numbers
Variable values, which are called variables

Placement	Description
inside the <head>	JavaScript code can be placed inside the <head>.
inside the <body>	JavaScript code can be placed inside the <body>.
external JavaScript file	JavaScript code can be placed in an external JavaScript file and then linked using the <script> element.

JavaScript in the <head> Back to top

JavaScript code can be placed in the <head>.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Placement</title>
<script>
  console.log('I am placed in the head.');
</script>
</head>

<body>
  <h1>JavaScript in the Head</h1>
  <p>Check the Chrome console log.</p>
</body>
</html>

Try it out.

JavaScript in the <body> Back to top

JavaScript code can be placed in the <body>.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Placement</title>
</head>

<body>
  <h1>JavaScript in the Body</h1>
  <p>Check the Chrome console log.</p>
  <script>
    console.log('I am placed in the body.');
  </script>
</body>
</html>

Try it out.

JavaScript in an external File Back to top

JavaScript code can be placed in an external JavaScript file and then linked using the <script> element.

The <script> that links to the external .js file can be placed in the <head> or the <body>.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Placement</title>
  <script src="scripts/external.js"></script>
</head>

<body>
  <h1>JavaScript in an external File</h1>
  <p>Check the Chrome console log.</p>
</body>
</html>

Try it out.

Here is the scripts/external.js file:

console.log('I am placed in an external .js file.');