HTML - JavaScript

Quiz

JavaScript allows you to create dynamic and interactive HTML pages. JavaScript is a high-level programming language and core technology behind web developments.

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 based on certain conditions, such as a user clicking 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.

Adding JavaScript in HTML

There are multiple ways of adding scripts (JavaScript) 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.

You can add JavaScript in an HTML document by using the <script> tag. The following are the different ways to add JavaScript into an HTML page:

Inline JavaScript
Internal JavaScript
External JavaScript

Let's see both cases one by one with suitable examples.

Writing Inline JavaScript

You can directly add JavaScript code to an HTML element on the various attributes, such as onclick, onload, or any other.

Example

In the below example, we are writing a script to print "Hi there!" on button click:

<!DOCTYPE html>
<html>
<head>
   <title>Example of Inline JavaScript</title>
</head>

<body>
  <button onclick="alert('Hi there!')">Click Me</button>
</body>

</html>

Writing Internal JavaScript

You can write the JavaScript 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. You are allowed to put the script code anywhere in the document but inside the <script> tag.

Example

In the following example, we are writing internal JavaScript code in the HTML page; it will display "Hello, World" on button click:

<!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>

Adding 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 of .js.

An external JavaScript file is imported (added) using the <script> tag by providing the path to the file in the src attribute. You should also define the type attribute with the "text/javascript" value.

Example

Consider we define a small function using JavaScript in script.js, which has the 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>undefined
</html>

Event Handlers

Event handlers aare nothing but simply defined functions that 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 thousands of lines of code.

Example

The 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 hovers the 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, 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.

Example

In the following example, we are demonstrating how you can hide scripts (JavaScript and VbScript) from older browsers:

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.

Example

In the following example, we are demonstrating how you can use the <noscript> tag for JavaScript and VbScript:

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

Example

The following example demonstrates using the default scripting language in an HTML page:

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

HTML Script Tags

The following two are the script-related tags used in the HTML document:

Script Tag	Use
`<script>`	It is used to import or write JavaScript inside an HTML document.
`<noscript>`	If a browser does not support script, it is used to define alternate content for users.

Print Page