HTML JavaScript – Add Javascript File to HTML

HTML documents can be made interactive and dynamic using a script. A script is a piece of code that adds dynamism to a website. The popular scripting languages are VBScript, JavaScript, Python, etc. Nowadays, JavaScript, along with its frameworks, are prevailing and used for web development. The JavaScript file can be stored with ‘.js’ extension and can be accessed using the <script> tag of HTML.

HTML JavaScript

Keeping you updated with latest technology trends, Join DataFlair on Telegram

Advantages of JavaScript in HTML

1. Client-side Language – JavaScript is a client-side language, i.e. it is executed on the processor of the user, thus reducing the load on the web-server and bandwidth.

2. Easy to Learn – We can easily learn JavaScript because of its syntax closer to the English language and a large number of predefined functionalities.

3. Faster Execution – JavaScript provides faster execution since it executes on the client-side and does not consume any server bandwidth.

4. Compiler-free – JavaScript does not need any explicit compiler, as it is interpreted as the HTML tags.

5. Test and Debug – It is easy to test and debug the JavaScript code.

6. Platform – JavaScript is a platform-independent scripting language.

7. Event-based – JavaScript provides event-based programming, i.e.;certain methods are executed when a particular event occurs.

8. Procedural Programming – Procedural programming capabilities such as condition-checking, looping, branching, etc. can be easily executed using JavaScript.

9. Prevailing Frameworks – JavaScript has become extremely popular with the advent of Node.js, being used as the back-end.

HTML <script> tag

The script tag of an HTML document contains the client-side script, used to perform tasks on that particular document. It contains either the code written implicitly or an external file, specified in the ‘src’ attribute with an extension ‘.js’.

External JavaScript

Code-

<!DOCTYPE html>
<html>
<head>
<title>External Script</title>
<script src = "script.js" type = "text/javascript"/></script>
</head>
<body>
<input type = "button" onclick = "myFunction();" name = "okay" value = "Click"> </input>
</body>
</html>

Script.js –

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

Output-

external javascript

Internal JavaScript

Code-

<!DOCTYPE html>
<html>
<head>
<title>External Script</title>
<script>
  function myFunction() {
   alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "myFunction();" name = "okay" value = "Click"> </input>
</body>
</html>

Output-

internal javascript

The script tag can be placed anywhere within the document, but usually, it is kept in the <head> tag.

HTML JavaScript Event Handlers

As seen from the name, event handlers are functions called after occurrence of a particular event. This event may be a button on-click, mouse hovering, keyboard-related event, etc.

Code-

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/JavaScript">
         function EventHandler() {
            alert("Welcome to DataFlair");
         }
      </script>
   </head>
   <body>
   <p onmouseover = "EventHandler();">Roll the mouse here</p>
   </body>
</html>

Output-

html event handlers

HTML Events with JavaScript

JavaScript is for handling certain events. Its syntax is <element event=”JavaScript”>. The events can be of the following types-

Common HTML Events

Event Description
onchange Occurs when there is a change in an HTML element.
onclick Occurs when the user clicks an HTML element.
onmouseover This occurs when the mouse moves over an HTML element.
onmouseout Occurs when the mouse moves away from the HTML element.
onkeydown Occurs when we press a key.
onload It occurs when the page is loaded by the browser.

getElementByID() method (Change HTML content)-

In order to select an element in HTML document and perform dynamic tasks on it, the getElementByID() method is useful.
Code-

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript</h1>
<p>JavaScript to change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click</button>
<p id="demo">Initially</p>
<script>
function myFunction() { 
  document.getElementById("demo").innerHTML = "Hello World!";
}
</script>
</body>
</html>

Output-
Before-

 getElementByID()

After-

getElementByID()

Changing Style in JavaScript

Code-

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript</h1>
<p>JavaScript to change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click</button>
<p id="demo">DataFlair</p>
<script>
function myFunction() {
  document.getElementById("demo").style.fontSize = "25px"; 
  document.getElementById("demo").style.color = "white";
  document.getElementById("demo").style.backgroundColor = "blue";        
}
</script>
</body>
</html>

Output-
Before-

before changing style

After-

after changing style

HTML JavaScript Image Attributes (Change HTML Attribute)

Code-

<!DOCTYPE html>
<html>
<body>
<script>
function myFun(sw) {
  var pic;
  if (sw == 1) {
    pict = "images/river.jpg"
  } else {
    pict = "images/mountain.jpg"
  }
  document.getElementById('myImage').src = pict;
}
</script>

<img id="myImage" src="images/landscape.jpg" width="100" height="180">

<p>
<button type="button" onclick="myFun(1)">River</button>
<button type="button" onclick="myFun(0)">Mountain</button>
</p>

</body>
</html>

Output-
Before-

before image attributes

After Clicking River-

after,image attributes,clicking river
After Clicking Mountain-

,after,image attributes,clicking mountain

JavaScript <noscript> tag

Some browsers do not support client-side scripts, or client-side scripts have been disabled in them. For such browsers, the <noscript> tag is useful to display alternate text.
For example,

<html>
<body>
<h1>JavaScript</h1>
<p>JavaScript to change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click</button>
<p id="demo">Initially</p>
<script>
function myFunction() { 
  document.getElementById("demo").innerHTML = "Hello World!";
}
</script>
<noscript>
Your browser does not support JavaScript
</noscript>
</body>
</html>

Default Scripting Language

An HTML document may comprise multiple scripts, thus multiple files. HTML5 allows developers to write the script language only once, for these multiple scripts in the <meta> tag . For example,

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

Summary

In order to make web-pages interactive and dynamic, we need a scripting language. In this article, we’ve discussed the most popular scripting language, JavaScript. JavaScript is useful for manipulation of images, event-handling, validation of forms, etc. We’ve looked at the advantages of HTML JavaScript, the <script> tag, how to access elements using JavaScript, and a basic taste of JavaScript. We’ve also looked at the event handlers in JavaScript and the <noscript> tag.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.