You might have noticed there are buttons in websites. On clicking it some action is performed.
This can be achieved using javascript.
JavaScript is a programming language commonly used with HTML to develop dynamic web pages.
Let us understand it with the below example.
<html>
<head>
<script>
function display() {
document.getElementById("myPara").innerHTML = "Hello!! How are you?";
}
</script>
</head>
<body>
<button onclick="display()">Click me</button>
<p id="myPara"></p>
</body>
</html>
So, if you look at the above output, there is a button named Click me. On clicking it the text, Hello!! How are you? is displayed just below it.
Now, let us look at the code and understand how it happens.
<script>
function display() {
document.getElementById("myPara").innerHTML = "Hello!! How are you?";
}
</script>function display() {
document.getElementById("myPara").innerHTML = "Hello!! How are you?";
}document.getElementById("myPara").innerHTML = "Hello!! How are you?";<p id="myPara"></p>
The <script> tag is placed inside the <head> tag.
In the above example, we have seen the use of <script> tag.
<script>
function display() {
document.getElementById("myPara").innerHTML = "Hello!! How are you?";
}
</script>And the <script> tag is placed inside the <head> tag.
<head>
<script>
function display() {
document.getElementById("myPara").innerHTML = "Hello!! How are you?";
}
</script>
</head>There are two ways you can use JavaScript in HTML :
Internal JavaScript can be added using the <script> tag in the HTML file itself. We can write the JavaScript code within the <script> tag and it gets added.
Let us take the same example we have used above.
<html>
<head>
<script>
function display() {
document.getElementById("myPara").innerHTML = "Hello!! How are you?";
}
</script>
</head>
<body>
<button onclick="display()">Click me</button>
<p id="myPara"></p>
</body>
</html>
In the above example, we have placed the JavaScript code within the <script> tag. This is internal to the HTML file and is called Internal JavaScript.
<script>
function display() {
document.getElementById("myPara").innerHTML = "Hello!! How are you?";
}
</script>And the <script> tag is placed within the <head> tag.
<head>
<script>
function display() {
document.getElementById("myPara").innerHTML = "Hello!! How are you?";
}
</script>
</head>Next, let us look at the external JavaScript file.
An external JavaScript file has .js extension and can be defined as an independent file.
To understand external JavaScript, let us take the above example,
<html>
<head>
<script>
function display() {
document.getElementById("myPara").innerHTML = "Hello!! How are you?";
}
</script>
</head>
<body>
<button onclick="display()">Click me</button>
<p id="myPara"></p>
</body>
</html>
Now, what we would do is, take the JavaScript code that is within the <script> tag,
<script>
function display() {
document.getElementById("myPara").innerHTML = "Hello!! How are you?";
}
</script>And place the JavaScript code in an external file named myScript.js.
function display() {
document.getElementById("myPara").innerHTML = "Hello!! How are you?";
}
Now, that we have placed the code in an external file named 'myScript.js'. The next task is to place it inside the HTML file.
<html>
<head>
<script src="myScript.js">
</script>
</head>
<body>
<button onclick="display()">Click me</button>
<p id="myPara"></p>
</body>
</html>
So, in the above example, we have included the external file myScript.js using the src attribute of the <script> tag.
<script src="myScript.js"> </script>
Now, for your information, JavaScript can be disabled in a computer. And there can be scenarios where the user can disable JavaScript in their computer.
In such cases the above example would not work as expected. The user would click on the button and nothing happens.
To avoid these scenarios there is a tag called <noscript> tag.
The text inside the noscript tag would be displayed if JavaScript is disabled in user's system.
<html>
<head>
<script>
function display() {
document.getElementById("myPara").innerHTML = "Hello!! How are you?";
}
</script>
<noscript>JavaScript is not supported</noscript>
</head>
<body>
<button onclick="display()">Click me</button>
<p id="myPara"></p>
</body>
</html>
Now, if JavaScript is disabled in user's machine the message JavaScript is not supported would be displayed in the browser of that user's machine.