HTML - JavaScript

Previous
Next

JavaScript is a high level programming language and core technology behind web developments. A script is an HTML element that works with JavaScript to help make our webpages more interactive.

For example, a script could generate a pop-up alert box message, or provide a dropdown menu based on certain conditions such user clicked a button. This script could be written using JavaScript or VBScript. Nowadays, only JavaScript and associated frameworks are being used by most web developers, VBScript is not even supported by major browsers.

There are multiple ways of adding scripts to the HTML document. We can keep JavaScript code in a separate file and then include it wherever it's needed, or it is also possible to define functionality inside the HTML document itself. Let's see both cases one by one with suitable examples.

Syntax

<script>
   function Hello() {
      alert("Hello, World");
   }
</script>

Examples of JavaScript in HTML

Following are some example that illustrate use of JavaScript in a HTML page. This explore what are the ways to connect a HTML page with JavaScript.

Script inside HTML Document

We can write the script code directly into our HTML document. Usually, we keep script code in the header of the document inside the <script> tag, however, there is no restriction. We are allowed to put the script code anywhere in the document but inside the <script> tag.

<!DOCTYPE html>
<html>

<head>
   <title>
      JavaScript Internal Script
   </title>
   <script type="text/JavaScript"> 
      function Hello(){
         alert("Hello, World");
      }
   </script>
</head>

<body>
   <input type="button" 
          onclick="Hello();" 
          name="ok" 
          value="Click Me" />
</body>

</html>

Import External JavaScript

If developers are going to define a functionality that will be used in various HTML documents, then it's better to keep that functionality in a separate JavaScript file and then include that file in the HTML documents.

A JavaScript file will have an extension as .js and it will be included in HTML files using the <script> tag.

Consider we define a small function using JavaScript in script.js which has following code:

function Hello() {
   alert("Hello, World");
}

Now, let's make use of the above external JavaScript file in our following HTML document: 

<!DOCTYPE html>
<html>

<head>
   <title>JavaScript External Script</title>
   <script src="/html/script.js" type="text/JavaScript" />
   </script>
</head>

<body>
   <input type="button" 
          onclick="Hello();" 
          name="ok" 
          value="Click Me" />
</body>

</html>

Event Handlers in JavaScript

Event handlers are simple functions which can be called against any mouse or keyboard event. We can define any kind of logic inside our event handler which can vary from a single to 1000s line of code.

Following example explains how to write an event handler. We are going to write one simple function named EventHandler() in the header of the document. We will call this function when any user brings mouse over a paragraph.

<!DOCTYPE html>
<html>

<head>
   <title>Event Handlers Example</title>
   <script type="text/JavaScript"> 
      function EventHandler(){
      alert("I'm event handler!!");
      }
   </script>
</head>

<body>
   <p onmouseover="EventHandler();">
      Bring your mouse here to see an alert
   </p>
</body>

</html>

Hide Scripts from Older Browsers

Although most browsers these days’ support JavaScript, but still some older browsers don't. If a browser doesn't support JavaScript, instead of running your script, it would display the code to the user. To prevent this, we can simply place HTML comments around the script as shown below.

JavaScript Example: 
<script type="text/JavaScript">
   <!--
   document.write("Hello JavaScript!");
   //-->
</script>
VBScript Example: 
<script type="text/vbscript">
   <!--
   document.write("Hello VBScript!")
   '-->
</script>

HTML <noscript> Element

For users whose browsers do not support scripts, or for those who have disabled scripts in their browsers, we can embed scripts into the web page using the <noscript> tag as illustrated in the below example.

JavaScript Example: 
<script type="text/JavaScript">
   <!--
   document.write("Hello JavaScript!");
   //-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>
VBScript Example: 
<script type="text/vbscript">
   <!--
   document.write("Hello VBScript!")
   '-->
</script>
<noscript>Your browser does not support VBScript!</noscript>

Default Scripting Language

There may be a situation when we are required to include multiple script files and ultimately using multiple <script> tags. We can specify a default scripting language for all the script tags at once. This saves us from specifying the language every time we use a script tag within the page. Below is the example.

<meta http-equiv="Content-Script-Type" content="text/JavaScript" />
Note that you can still override the default by specifying a language within the script tag.
Print Page
Previous
Next
Advertisements