HTML JavaScript enhances the functionality and interactivity of HTML documents.
Web sites can be made more engaging, dynamic, and interactive with the use of a script, which is a short programme used in conjunction with HTML to achieve these goals (think: alert popup window on mouse click). Nowadays, JavaScript is the most widely used scripting language for websites.
The <script> element of HTML Tag
To identify a script that runs on the client, use the HTML <script> tag. For this reason, the <script> tag can go either in the body or the head, depending on whether the scripting statements are located in an internal or external JavaScript.
Its primary functions are dynamic content modification, form validation, and picture manipulation. To target a specific HTML element, JavaScript makes use of the document.getElementById() function.
Example:
<!DOCTYPE html>
<html>
<body><h1>First JavaScript</h1>
<h3 id=”demo”>JavaScript can change the style of an HTML element.</h3>
<script>
function testFunction() {document.getElementById(“demo”).style.backgroundColor = “blue”;
document.getElementById(“demo”).style.fontSize = “40px”;
document.getElementById(“demo”).style.color = “white”;
}
</script><button type=”button” onclick=”testFunction()”>Click Me!</button>
</body>
</html>
HTML events with JavaScript
If we want something to happen whenever the user or browser triggers an event—for example, when the mouse is clicked or when a page loads—JavaScript plays a crucial role.
The HTML specification includes event handler characteristics that, when combined with JavaScript, allow enable a page to respond to a certain event.
Example
<input type=”button” value=”Click Here” onclick=”alert(‘Hi, testing javascript’)”>
The following are examples of events that can be included in HTML:
- Reset, submit, and other form events are examples.
- Choose the appropriate action: text box, text area, etc.
- Focusing on the focus, blurring, etc.
- Select, MouseUp, MouseMove, MouseDown, Click, Double-Click, etc. are all examples of mouse events.
The properties of Window events are as follows:
| Event Event Name | Handler Name | Occurs when |
|---|---|---|
| onBlur | blur | When a form input loses focus |
| onClick | click | When the user clicks on a form element or a link |
| onSubmit | submit | When a user submits a form to the server. |
| onLoad | load | When a page loads in a browser. |
| onFocus | focus | When a user focuses on an input field. |
| onSelect | select | When a user selects the form input filed. |
Use External Script
If many HTML files need to share a common script, we can isolate the script in its own file and reference it from another, where it will run as expected. Use the.js file extension when saving a JavaScript file to disc.
Take care not to include the script> tag when linking to an external file, and give the full location of the JS file.
Example
<!DOCTYPE html>
<html>
<head>
<script type=”text/javascript” src=”quesry.js”></script>
</head>
<body>
<h2>External JavaScript Example</h2>
<form onsubmit=”submit()”>
<input type=”text” name=”name” placeholder=”Enter your name” id=”name” /><br><input type=”email” placeholder=”Enter your Email-address” name=”email” id=”email” /><br>
<input type=”submit”>
</form>
</body>
</html>quesry.js file js code
function submit() {
var x = document.getElementById(“frm1”).value;
alert(“Hi”+” “+x+ “you have successfully submitted the details”);
}
HTML <noscript> Tag
The <noscript> tag in HTML is used to prevent the browser from displaying script. The browser will not show the content between the <noscript> and </noscript> tags.
Example:
<!DOCTYPE html>
<html>
<body>
<h2 id=”test”>click here</h2>
<script>
document.getElementById(“test”).innerHTML = “Testing JavaScript!”;
</script>
<noscript>This text is not visible in the browser.</noscript>
</body>
</html>
HTML Script Tags
| Tag | Description |
|---|---|
| <script> | Defines a client-side script |
| <noscript> | Users who do not support client-side scripts are directed to an alternative content that is defined here. |