Core HTML

Lesson 36: Using JavaScript

Overview

In this HTML lesson, we demonstrate how to use JavaScript in an HTML document. This is an HTML lesson and not a JavaScript lesson. So, we will focus on how to include JavaScript in order that you can recognize it when you see it. JavaScript is a language of its own that we cover elsewhere, and this lesson is meant to give you the ability to recognize JavaScript when you see it in used in HTML.

JavaScript in a Script Element

Our first HTML example contains a single line of JavaScript within a script element. This is as simple as a JavaScript program gets. This code writes the image element into the document. So, it is effectively the same as having the image element in place of the script element. This demonstrates that JavaScript can be placed within a script element.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <script>
      document.writeln('<img src="XoaxLogo.png">');
    </script>
  </body>
</html>
 

Output

 

JavaScript in an External File

In this example, we have created the JavaScript file "XoaXLogo.js" and moved the JavaScript code from the last example into it. The .js extension is used to specify that this is a JavaScript file. This external JavaScript file is then included in our HTML file by adding it as the value of the src attribute for the script element. That is all there is to it. The JavaScript in the external file runs exactly the same as when it is included directly inside the script element. This demonstrates that JavaScript can be placed in an external file.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <script src="XoaXLogo.js"></script>
  </body>
</html>

XoaXLogo.js

document.writeln('<img src="XoaxLogo.png">');
 

Output

 

A JavaScript Event Handler

This example introduces event handlers. An event handler is a function that executes in response to some event. A typical example of an event is button being clicked with the mouse. In this example, we use the onload event to execute the function F() when the page is loaded. We do this by specifying the function F() as the value of the onload attribute in the body element.

The function F() consists of two lines of code. The first lines gets the element with its id attribute equal to "idHeading" and sets the variable qP equal to it. With this, we have access to the h1 element via qP, which we use in the second line to set the value inside the h1 element to "XoaX.net." Once this is done, the element looks like this <h1 id="idHeading">XoaX.net</h1> and will display the content as its heading.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
    <script>
      function F() {
        var qP = document.getElementById('idHeading');
        qP.innerHTML = 'XoaX.net';
      }
    </script>
  </head>
  <body onload="F()">
    <h1 id="idHeading"></h1>
  </body>
</html>
 

Output

 

A JavaScript Event Handler in an External File

This example simply moves the JavaScript code from the previous example to the external JavaScript file "InsertHeading.js" as shown here. The external JavaScript file code executes exactly the same way as it does when the code is included directly inside the script element. The main benefit of an external file is that its code can be reused within many HTML documents.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
    <script src="InsertHeading.js"></script>
  </head>
  <body onload="F()">
    <h1 id="idHeading"></h1>
  </body>
</html>

InsertHeading.js

function F() {
  var qP = document.getElementById('idHeading');
  qP.innerHTML = 'XoaX.net';
}
 

Output

 

An Inlined JavaScript Event Handler

Event handlers give us one more way to use JavaScript within an HTML document. In this example, we show that we can include the JavaScript function code as the value of the "onload" attribute. The syntax is slightly different, but it should be clear that it is the same code and acts exactly like the previous two examples. This method is a little subtle since there is no script element to indicate that JavaScript is being used.

Altogether, this gives us three ways to put JavaScript code in an HTML document: We can insert the code inside a script element. We can put the code in an external file and set the src attribute's value of a script element to the file name to include it. Thirdly, when we have an event handler, we can set the function code as the value of the event attribute.

Example5.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body onload="(function(){
        var qP = document.getElementById('idHeading');
        qP.innerHTML = 'XoaX.net';
      })()">
    <h1 id="idHeading"></h1>
  </body>
</html>
 

Output

 

Using Noscript for Disabled JavaScript

Since JavaScript can be disabled by browsers, HTML offers a way to display alternative content when this happens. This can be done by using the noscript element to enclose the alternative content. When a user disables JavaScript in the browser, the browser ignores the JavaScript, but diplays whatever is inside a noscript element. In this example, we use the heading to display "XoaX.net" as an alternative to the logo image. You can try it out by disabling JavaScript to see it.

Example6.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <script>
      document.writeln('<img src="XoaxLogo.png">');
    </script>
    <noscript><h1>XoaX.net</h1></noscript>
  </body>
</html>
 

Output

 
 

© 2007–2024 XoaX.net LLC. All rights reserved.