Tutorials Tonight's Logo

HTML JAVASCRIPT


Javascript is a scripting language that makes HTML pages dynamic and more interactive.

There are two ways by which javascript programs can be added to the HTML webpage :

  • internal javascript
  • External javascript


HTML script tag

The script tag is used either to give a source to an external javascript file or is used for writing a javascript program within the HTML document.

When we have javascript program written in another file then we link it with HTML file using src attribute as shown below:

<script src="external-javascript.js"></script>

We can also write javascript programs within the HTML document using script tag either inside the head section or in the body section.

<!DOCTYPE html>
<html>

<head>
  <script>
    function my_function() {
      document.getElementById("id1").innerHTML = "Welcome to javascript";
    }
  </script>
</head>

<body>
  <h2>Using javascript to change element content.</h2>
  <button onClick="my_function()">click to change content of id1</button>
  <p id="id1">Learning HTML javascript.</p>
</body>

</html>
▶ Run the code

use of javascript

Javascript can perform various tasks on the webpage like it can change or modify content of any element, can change size of container, can change color of text and many more.

Here we are going to see few usage of javascript.

Changing element content using javascript:

<script>
    function my_function() {
        document.getElementById("id1").innerHTML = " and javascript";
    }
    </script>
    <h2>Using javascript to change element content.</h2>
    <button onClick="my_function()">click to change content of id1</button>
    <p>You are learning HTML<span id="id1"></span> on TutorialTonight.</p>
▶ Run the code

Changing box sizing using javascript:

<script>
    function my_function() {
        document.getElementById("id1").style.height = "300px";
    }
    </script>
    <h2>Changing box size using javascript.</h2>
    <button onClick="my_function()">click to change content of id1</button>
    <div id="id1">Box size can be chaged by clicking button.</div>
▶ Run the code

Changing color, font-size, background-color etc using javascript.

<script>
  function my_function() {
    document.getElementById("id1").style.color = "red";
    document.getElementById("id1").style.fontSize = "30px";
    document.getElementById("id1").style.backgroundColor = "Gold";
  }
</script>
<h2>Changing box size using javascript.</h2>
<button onClick="my_function()">click to change content of id1</button>
<p id="id1">Changing various text properties using javascript.</p>
▶ Run the code

The noscript tag

The noscript tag is used to display the message it contains in case your browser does not support javascript.

<noscript>Sorry, your browser does not support javascript.</noscript>
▶ Run the code

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.