...

Web Technologies - HTML

Back to Course

Lesson Description


Lession - #162 HTML Javascript



A script is a short piece of software that may be used to make your website more interactive. A script might, for example, create a pop-up alert box message or a dropdown menu. This script might be developed in JavaScript or Visual Basic for Applications (VBScript>
.
Any programming language may be used to create numerous little routines known as event handlers, which can then be triggered using HTML properties.
Most web developers nowadays utilise solely JavaScript and related frameworks; VBScript isn't even supported by most major browsers.
You may either retain JavaScript code in a separate file and include it whenever it's needed, or provide functionality directly in the HTML content. Let's take a look at each circumstance individually, with appropriate samples.

External JavaScript

If you're going to describe functionality that will be utilised in several HTML documents, you should put it in a separate JavaScript file and then include that file in your HTML documents. The extension of a JavaScript file is.js, and it is incorporated in HTML files using the script> element.
Example
Consider the following code in script.js, which defines a tiny JavaScript function:


function Hello(>
{ alert("Hello, World">
; } <!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>

Internal Script

You may insert script code right into your HTML text. Script code is often kept in the document's header using the <script> tag; otherwise, there are no restrictions and you can place your source code wherever in the text except within the <script> tag.
Script code is often kept in the document's header using the <script> tag; otherwise, there are no restrictions and you can place your source code wherever in the text except within the <script> tag.

<!DOCTYPE html>
<html>

   <head>
      <title>JavaScript Internal Script</title>
      <base href = "https://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>

Event Handlers

Event handlers are basic functions that may be invoked in response to any mouse or keyboard event. Inside your event handler, you may define your business logic, which can range from a single line of code to thousands of lines.
The example that follows demonstrates how to create an event handler. In the document's header, create a single function called EventHandler(>
. When a user moves the mouse over a paragraph, we will call this method.

<!DOCTYPE html>
<html>

   <head>
      <title>Event Handlers Example</title>
      <base href = "https://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>

Scripts should be hidden from older browsers.

Although most (if not all>
modern browsers support JavaScript, some older browsers do not. If a browser does not support JavaScript, it will show the code to the user instead of running it. To avoid this, just add HTML comments around the script, like seen below.


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

The Element <noscript>

You may also give alternate information to users whose browsers do not support scripts or who have deactivated the script option in their browsers. You may accomplish this by using the <noscript> tag.

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

Scripting Language by default

There may be times when you will include numerous script files and, as a result, use multiple script> tags. For each of your script tags, you may select a default scripting language. This saves you from having to declare the language every time you use a script tag on a page. The following is an example:


<meta http-equiv = "Content-Script-Type" content = "text/JavaScript" />