Adding JavaScript to HTML is not as hard as it seems. In this article, we’ll show you how to do it. JavaScript will empower your website to perform even more actions, helping you stand out, and add some advanced functionality!
Now, let’s find out how to add JavaScript to HTML.
Adding JavaScript to HTML
In this article, we’ll learn two methods of adding JavaScript to HTML:
- Add directly to an HTML file between <script> tags
- Include external resources with so-called src attribute
Before we start with the methods, we need to be clear that an HTML block contains <head> and </head> as well as <body> and </body> in pairs. The basic look would be like this:
<html> <head> </head> <body> </body> </html>
The <script> Tags
The first method we will learn is adding the scripts directly to an HTML file, between <script> and </script> tags. You can insert as many scripts as you wish. The scripts, perform in chronological order when the requested page starts loading.
To execute this method you need a text editor. Any default program like Notepad for Windows or TextEdit for Mac should work. We recommend a Third-party code editor like Atom, Sublime Text, or Notepad++. It’s important to save the file containing the script as an HTML document so that browsers can read it properly, the rest is preference.
You can insert the script between the <head> section, <body> section, or both, depending on your needs.
1. <head> Section
You can place the script at the beginning of the block. In this example, we will put it in the <head> section, and play with a function that enables a user to click on it: This way, the JavaScript script will run before the entire page is loaded.
<html>
<head>
<script type = "text/javascript">
<!--
function sayHello() {
alert("Hello Everyone!!")
}
//-->
</script>
</head>
<body>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</body>
</html>
We use Google Chrome and get a result like this
2. <body> Section
Most often, you will place the script in the <body> section. Why? Most content is located there – on the main page. The richer the content, the larger the <body> section is.
Here is an example of a script placed in the <body> that requests an action from a user. It asks a question, and the user can try to guess the answer before finally clicking the button:
<html>
<body>
<h1>A Tricky Question</h1>
<p id="demo">What can one catch that is not thrown?</p>
<button type="button" onclick="myFunction()">Answer</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "A cold";
}
</script>
</body>
</html>
You will have this before clicking the Answer button
And this is how it looks revealing the answer:
3. Both Sections
If you need to insert the script in both <head> and <body> sections, then you can do it altogether like this:
<html>
<head>
<script type = "text/javascript">
<!--
function sayHello() {
alert("Hello Everyone!!")
}
//-->
</script>
</head>
<body>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
<h1>Book Title</h1>
<p id="demo">Introduction</p>
<button type="button" onclick="myFunction()">Next</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Chapter 1";
}
</script>
</body>
</html>
The script will be displayed by your browser will be
Including External Resources
Sometimes you will be in a situation where the same scripts are used repeatedly on different pages of your website. You can be diligent by doing it over and over again. But, the more effective way is to empower the HTML src attribute.
An HTML src attribute mentions the location of the external resource.
We put JavaScript in an external file and insert it into an HTML file. Using HTML code script tags and an src attribute will look like this:
<html> <head> <script type = "text/javascript" src = "filename.js" ></script> </head> <body> </body> </html>
Remember that you should have JavaScript saved with the .js extension. For example, you can write this script and save it as myscript.js to use sayHello function in an HTML file.
function sayHello() {
alert("Hello World")
}
Using scripts with external resources is better because of these three reasons:
- HTML files become simple because large blocks of JavaScript code are reduced.
- Shortened codes mean easier maintenance and efficient disk usage
- It stimulates better caching for better speed.
Conclusion
HTML and JavaScript, along with CSS, are known as the three pillars of a modern website. They work behind the scenes on three different responsibilities: the framework, display, and actions.
HTML plays its role as the core of the construction – the starting point. HTML stands for HyperText Markup Language indicating that as a markup language it deals with something basic: identifying the content based on its category and function.
Meanwhile, JavaScript is anything but plain. Known as a scripting language, it is created to handle interactive scenarios based on user response. For example, when you update a status on Facebook, it will show you the content instantly after you click Post, no page reload needed. Also, when you see a slideshow of amazing pictures on the websites’ homepage, that’s JavaScript at work.
Nowadays, modern browsers have JavaScript integrated so if you type the script into the HTML document, the browsers will recognize it.
Now, that we have learned about adding JavaScript to HTML, you can explore more on its dynamic possibilities. Think of the best interaction you want with your visitors and say Hello to the World!
