Javascript is the most popular scripting language which is used to make more dynamic and interactive HTML pages.
Example:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get Current Timestamp.</p>
<button type="button"
onclick="document.getElementById('click').innerHTML = Date()">
Click Me</button>
<p id="click"></p>
</body>
</html>
Explanation:
In the above example, we are using Javascript with HTML to display the current date and time.
HTML <script> Tag:
To specify a client-side script or JavaScript, the <script> tag is used in HTML. It contains internal script statements. It can also be used to point to an external script file. Image manipulation, form validation, and dynamic changes of content are the main purposes served by the HTML <script> tag for JavaScript. The document.getElementById() method is used by Javascript to select HTML elements.
Example:
<!DOCTYPE html>
<html>
<body>
<p id="hello"></p>
<script>
document.getElementById("hello").innerHTML = "Hello World!!";
</script>
</body>
</html>
Explanation:
In the above example, we are writing “Hello World!!” to an HTML element using Javascript.
HTML events with JavaScript:
The event handler attributes of HTML are used with JavaScript codes to perform actions on an event.
Example:
<!DOCTYPE html>
<html>
<body>
<p>Click the button below to see a pop-up message.</p>
<input type="button" value="Click Me" onclick="alert('Hello World!!')">
</body>
</html>
Explanation:
In the above example, a pop-up message is displayed on a button click.
Types of HTML events:
There are four types of events in HTML. These are:
Form:
Example: reset, submit.
Select:
Example: text field, text area.
Focus:
Example: focus, blur.
Mouse:
Example: select, mouseup, mousemove, mousedown, click, dblclick.
Window event attributes:
| Event | Handler | Description |
| onBlur | blur | Occurs when a form input loses focus. |
| onClick | click | Occurs when a form element or a link is clicked. |
| onSubmit | submit | Occurs when a form is submitted to the server. |
| onLoad | load | Occurs when a page loads in a browser. |
| onFocus | focus | Occurs when an input field is focused. |
| onSelect | select | Occurs when a form input field is selected. |
Uses of Javascript:
To change HTML content.
Example:
<!DOCTYPE html>
<html>
<body>
<p id="hello">Bye Bye!!</p>
<script>
function Function() {
document.getElementById("hello").innerHTML = "Hello HTML!!";
}
</script>
<button type="button" onclick="Function()">Click Me</button>
</body>
</html>
To change HTML styles.
Example:
<!DOCTYPE html>
<html>
<body>
<p id="hello">Change the style of the HTML element on Click.</p>
<script>
function Function() {
document.getElementById("hello").style.fontSize = "10px";
document.getElementById("hello").style.fontSize = "30px";
document.getElementById("hello").style.color = "white";
document.getElementById("hello").style.backgroundColor = "crimson";
}
</script>
<button type="button" onclick="Function()">Click Me</button>
</body>
</html>
To change HTML attributes.
Example:
<!DOCTYPE html>
<html>
<body>
<script>
function glow(sw) {
var light;
if (sw == 0) {
light = "pic_bulboff.gif"
} else {
light = "pic_bulbon.gif"
}
document.getElementById('bulb').src = light;
}
</script>
<img id="bulb" src="pic_bulboff.gif" width="100" height="150">
<p>
<button type="button" onclick="glow(1)">On</button>
<button type="button" onclick="glow(0)">Off</button>
</p>
</body>
</html>
Using External Script:
JavaScript codes can also be written in a separate file but the file must be saved using .js extension. This file can be called in an HTML file.
Syntax:
<script type="text/javascript" src="URL ></script>
Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jsexample.js"></script>
</head>
<body>
<form onsubmit="fun()">
<label>Name:</label><br>
<input type="text" name="name" id="111"><br><br>
<label>City:</label><br>
<input type="text" name="city"><br><br>
<input type="submit">
</form>
</body>
</html>
jsexample.js:
function fun() {
var x = document.getElementById("111").value;
alert("Welcome"+" "+x+ "!!");
}
Explanation:
In the above example, we used an external javascript to display a pop-up message on form submission.
HTML <noscript> Tag:
The text written in between the <noscript> opening and closing tags is not displayed on the browser. This tag is mainly used to provide alternate content. It is thus of great use for users who have disabled scripts in their browser or have a browser that doesn’t support client-side scripts.
Example:
<!DOCTYPE html>
<html>
<body>
<p id="hello"></p>
<script>
document.getElementById("hello").innerHTML = "Hello World!!";
</script>
<noscript>Sorry, JavaScript is not supported!</noscript>
<p>How are you today?</p>
</body>
</html>
Explanation:
In the above example, we used the <noscript> tag to provide the disabled script. The text written in between the <noscript> opening and closing tags is not displayed as the output.