HTML JavaScript – Add Javascript File to HTML
Free Web development courses with real-time projects Start Now!!
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.
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-
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-
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 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-
After-
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-
After-
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-
After Clicking River-
After 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.
Did you like this article? If Yes, please give DataFlair 5 Stars on Google
