JavaScript Functions and Events

A JavaScript function is a block of JavaScript code that can be executed when “called” for.

For example, a function can be called when an event occurs, like when the user clicks a button.

JavaScript in <head> or <body>

You can place any number of scripts in an HTML document.

Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.

JavaScript in <head>

In this example, a JavaScript function is placed in the <head> section of an HTML page.

The function is invoked (called) when a button is clicked:

<!DOCTYPE html>
<html>
<head>
    <script>
       function myFunction() {
       document.getElementById("demo").innerHTML = "Paragraph changed.";
       }
   </script>
</head>
           <body>
<h1>A Web Page</h1>
            <p id="demo">A Paragraph</p>
           <button type="button" onclick="myFunction()">Try it</button>
</body>
</html> 

JavaScript in <body>

In this example, a JavaScript function is placed in the <body> section of an HTML page.

The function is invoked (called) when a button is clicked:

<!DOCTYPE html>
<html>
        <body> 
              <h1>A Web Page</h1>
              <p id="demo">A Paragraph</p>
              <button type="button" onclick="myFunction()">Try it</button>
           <script>
           function myFunction() {
           document.getElementById("demo").innerHTML = "Paragraph changed.";
           }
          </script>

      </body>
</html> 

External JavaScript

Scripts can also be placed in external files:

External file:  myScript.js
function myFunction() {
 document.getElementById("demo").innerHTML = "Paragraph changed.";
}

External scripts are practical when the same code is used in many different web pages.

JavaScript files have the file extension .js.

To use an external script, put the name of the script file in the src (source) attribute of a <script> tag:

<script src="myScript.js"></script> 

External JavaScript Advantages

Placing scripts in external files has some advantages:

  • It separates HTML and code
  • It makes HTML and JavaScript easier to read and maintain
  • Cached JavaScript files can speed up page loads

To add several script files to one page  – use several script tags:

JavaScript Display Possibilities

JavaScript can “display” data in different ways:

  • Writing into an HTML element, using innerHTML.
  • Writing into the HTML output using document.write().
  • Writing into an alert box, using window.alert().
  • Writing into the browser console, using console.log()

Using innerHTML

To access an HTML element, JavaScript can use the document.getElementById(id) method.

The id attribute defines the HTML element. The innerHTML property defines the HTML content:

<!DOCTYPE html>
<html>
       <body>
          <h1>My First Web Page</h1>
          <p>My First Paragraph</p>

          <p id="demo"></p>

          <script>
               document.getElementById("demo").innerHTML = 5 + 6;
         </script>
</body>
</html> 

Changing the innerHTML property of an HTML element is a common way to display data in HTML

Using document.write()

For testing purposes, it is convenient to use document.write()

<!DOCTYPE html>
<html>
       <body>

         <h1>My First Web Page</h1>
         <p>My first paragraph.</p>

         <button type="button" onclick="document.write(5 + 6)">Try it</button>

       </body>
</html> 

The document.write() method should only be used for testing

Using window.alert()

You can use an alert box to display data:

<!DOCTYPE html>
<html>
       <body>

          <h1>My First Web Page</h1>
          <p>My first paragraph.</p>

         <script>
           window.alert(5 + 6);
         </script>

      </body>
</html> 

<!DOCTYPE html>
      <html>
           <body>

           <script>
               console.log(5 + 6);
           </script>

         </body>
    </html>