You Are Here

HTML JavaScript

A script is a small piece of program which is used to make the web page more interactive, dynamic and attractive. Currently, JavaScript is mostly used as a scripting language for webpages. JavaScript is used with HTML to make more interactive webpages.

Example:

<p id="trial"></p>
<button type="button" onclick="document.getElementById('trial').innerHTML = Date()"> Click here to display Date and Time. </button>
Try it
You can add javaScript code in a separate file and then include it whenever it is needed or you can define functions inside the HTML document itself. Let’s see both the cases of adding JavaScript.

External JavaScript:

If you are going to define a functionality that will be used in various HTML documents then it is better to keep that JavaScript functionality in a separate file and then include that file in your documents. A JS file will have extension as .js and it will be included in HTML file using <script> tag. 
Following is the external JS file with script.js name.
function Hello() {
alert("Hello, World");
}
Following example uses above external JS file.

Example:

<!DOCTYPE html>
<html>
<head>
<title> External JavaScript </title>
<script src = "/html/script.js" type = "text/javascript"></script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "Click Here">
</body>
</html>
Try it

Internal Script:

You can write JS code directly into your HTML document. Generally, we keep JS script code in the header of the document using <script> tag, otherwise, there are no restrictions you can put your JS code anywhere in the document but inside the <script> tag.

Example:

<!DOCTYPE html>
<html>
<head>
<title> Internal JavaScript </title>
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "Click Here">
</body>
</html>
Try it

HTML <script> Tag:

The <script> tag in HTML is used to specify client-side script. The <script> tag either contains the statements to be a script or it points to an external script file through src attribute. JavaScript is mainly used for image manipulation, form validation and to change content dynamically. The document.getElementById() method is used by JS to select an HTML element.
You can place <script> tag in the <body> section or <head> section.

Example:

<p id="trial"></p>
<script>
document.getElementById("trial").innerHTML = "Learn HTML";
</script>
Try it
Let’s see what we can do with JavaScript:

JavaScript to change HTML content:

Example:

<button type="button" onclick="myFunction()"> Click Me! </button>
<p id="trial"> HTML stands for </p>
<script>
function myFunction() { document.getElementById("trial").innerHTML = "Hypertext Markup Language";
}
</script>
Try it

JavaScript to change HTML style:

Example:

<p id="trial"> HTML stands for Hypertext Markup Language </p>
<script>
function myFunction() {
document.getElementById("trial").style.fontSize = "30px";
document.getElementById("trial").style.color = "#fff";
document.getElementById("trial").style.backgroundColor = "#ff5722";
document.getElementById("trial").style.padding = "15px";
}
</script>
<button type="button" onclick="myFunction()"> Click Me! </button>
Try it

JavaScript to change HTML attributes:

Example:

<img id="trial" src="html.jpg" width="100%" height="100%" alt="html-javascript-myImage">
<p>
<button type="button" onclick="technology(1)"> Learn CSS </button>
<button type="button" onclick="technology(0)"> Learn HTML </button>
</p>
Try it

HTML <noscript> Tag:

The <noscript> tag is used to provide alternative content for browsers that don’t support javascript or the browsers script is disabled by the user.
The text is written inside <noscript>…</noscript> is not displayed on the browser.
The <noscript> tag is used with the <script> tag.

Example:

<p id="trial">

<script>
document.getElementById("trial").innerHTML = "Learn JavaScript!";
</script>
<noscript> Sorry, your browser doesn't support JavaScript or you have disabled JavaScript. </noscript>
Try it
Note: You will learn more about JavaScript in our JavaScript tutorial.