HTML JavaScript
In this tutorial, you will learn what is javascript, how to use javascript in HTML, how to include external javascript in HTML, and will see few examples related to this.
What is JavaScript?
Javascript is a scripting language that is mainly used in web development. Using javascript you can write programs that can interact with a webpage's element.
It can control HTML element's behavior and makes HTML pages dynamic and more interactive by giving users a way to interact with the webpage. HTML use javascript for client-side scripting.
Nowadays JavaScript is compatible to works on both front-end and back-end🔥. But here we will only talk about the front end.
How to use JavaScript in HTML?
Both HTML and javascript are different languages. So for them to work together you first have to connect then in some way.
There are two ways by which javascript programs can be added to the HTML webpage:
- By writing javascript code within the webpage (Internal javascript)
- By writing javascript code in an extern js file and then connecting it to the webpage (External javascript)
1. Internal JavaScript
One way to use javascript in HTML is by writing javascript within the HTML file.
To write javascript within the HTML file, you have to add a script tag in the HTML file.
For example:
<script></script>Now you can write the javascript code within the script tag.
For example:
<script>
alert('Hello world!');
</script>This is the javascript code within the HTML file.
Here is the complete code of a javascript within the HTML file. You can insert a script tag anywhere within the head or body of the document, also you can add as many scripts as you want.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
alert("script in head");
</script>
</head>
<body>
<p>First script tag in body.</p>
<script>
alert("script in body 1");
</script>
<p>Second script tag in body.</p>
<script>
alert("script in body 2");
</script>
</body>
</html>2. External JavaScript
Another way to use javascript in HTML is by writing javascript in an external js file and then connecting it to the HTML file.
For example:
<script src="js/script.js"></script>Here is the external javascript file. You can put it anywhere you want.
alert('Hello world!');Now connect the external javascript file to HTML with a script tag. Here is the complete code.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>External JavaScript file added to this html document.</h1>
<script src="js/hello-world-external.js"></script>
</body>
</html>Use of javascript
Javascript is mainly used in developing websites. It can perform various tasks on the webpage like it can change or modify the content of any element, can change the size of the container, can change the color of the text, can create animations, and many more.
Here we are going to see a few usages of javascript.
1. Changing the color of the text
Javascript can change the color of text on the webpage. Here is the code to change the color of the text.
<script>document.getElementById("my-text").style.color = "red";</script>Here is the complete code.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1 id="my-text">This is a red text</h1>
<script>
document.getElementById("my-text").style.color = "red";
</script>
</body>
</html>2. Changing the size of container
Javascript can change the size of the container on the webpage. Here is the code to change the size of the container.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1 id="my-container">This is a 500px container</h1>
<script>
document.getElementById("my-container").style.width = "500px";
</script>
</body>
</html>3. Changing element content using javascript
Javascript can change the content of any element on the webpage.
Example
<p>You are learning HTML<span id="id1"></span> on TutorialTonight.</p>
<button onclick="changeContent()">click to change content of id1</button>
<script>
function changeContent() {
document.getElementById("id1").innerHTML = " and javascript";
}
</script>4. Changing box sizing using javascript
Javascript can change the container sizing of any element on the webpage. You can change the width or height of the container by selecting it from the document.
Example
<button onClick="changeSize()">click to change box size</button>
<div id="id1">Box size can be chaged by clicking button.</div>
<script>
function changeSize() {
document.getElementById("id1").style.height = "300px";
}
</script>Changing other style using javascript
Javascript can change the style of any element on the webpage.
Example
<button onClick="changeStyle()">click to change content of id1</button>
<p id="id1">Changing various text properties using javascript.</p>
<script>
function changeStyle() {
const element = document.getElementById("id1");
element.style.color = "white";
element.style.fontSize = "30px";
element.style.backgroundColor = "tomato";
}
</script>The noscript tag
The noscript tag is used to hide the content of the page from non-javascript enabled browsers. It displays a message in case your browser does not support javascript. It is used to hide the content of the page from non-javascript enabled browsers.