HTML - JavaScript

A script is a small piece of program that can add interactivity to our websites. For example, a script could generate a pop-up alert box message, or provide a dropdown menu. 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.

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.

Example

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>

This will produce the following result, where you can try to click on the given button −

Internal Script

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.

Example

<!DOCTYPE html>
<html>
<head>
   <title>JavaScript Internal Script</title>
   <base href="http://www.tutorialspoint.com/" />
   <script type="text/JavaScript"> function Hello(){
      alert("Hello, World");
   }
   </script>
</head>
<body>
   <input type="button" onclick="Hello();" name="ok" value="Click Me" />
</body>
</html>

This will produce the following result, where you can try to click on the given button −

Event Handlers

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

Example

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>
   <base href="http://www.tutorialspoint.com/" />
   <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>

After running the above HTML code, bring your mouse over the output screen to see the result.

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>

The <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.

Advertisements