Adding JavaScript to HTML
Adding JavaScript to a web page is easy, you just need to write the programs in a HTML <script> tag in the HTML file. When the HTML file is sent from the server to the client, the browser will use its inbuilt JavaScript engine to interpret and execute the program. You can have multiple script elements in a single HTML file. And since the file is interpreted from top to bottom. JavaScript programs higher up in the file will be executed first. The following code will create an alert window with 'Hello' and then an alert window with 'Goodbye'.
<!doctype html>
<html>
<head>
<title>Testing JavaScript</title>
<script>alert('Hello');</script>
</head>
<body>
<h1>Testing JavaScript</h1>
<script>alert('Goodbye');</script>
</body>
</html>
These instructions will be run as soon as the browser receives the file and executes it. But since JavaScript is a synchronous language. The second alert box wouldn't pop up until the first alert box is dismissed. You are free to place the script tags in either the <head> or the <body>. But remember that if your JavaScript programs have dependencies on each other, you need to place the dependent programs lower down so that it will have all its dependencies available when it's executed.
Lets get a little ahead of ourselves by demonstrating the content manipulation ability of JavaScript with the following code.
<!doctype html>
<html>
<head>
<title>Testing JavaScript</title>
<script>
var changeContent = function () {
document.getElementById("special").innerHTML = "I was changed by JavaScript!";
}
</script>
</head>
<body>
<p id="special">Hello World!</p>
<button onclick="changeContent()">Click me</button>
</body>
</html>
The function changeContent will change the content of the paragraph element with id "special" when it is called. This function is then passed to the onclick event of the button element as a callback. So that when the user clicks the button, the onclick event fires and executes the changeContent function. Try it out on this repl. We will cover all these concepts as we go.
The JavaScript program in the example above is called in-line JavaScript. It's great for small JavaScript programs and easy to maintain. If your programs are large or they need to be used by multiple HTML files, you can create a separate file for your JavaScript programs. JavaScript files uses the extension .js. You need to link your JavaScript file to your HTML file in the head element. To do this, you still use the <script> element. Except you provide the path (can be a URL or a local path) to your JavaScript file in the src source attribute.
<title>Testing JavaScript</title>
<script src="index.js"></script>
You just need to copy your JavaScript program into your "index.js" file and refresh the website and everything should work as before. Try it out on this repl.
// index.js
var changeContent = function () {
document.getElementById("special").innerHTML = "I was changed by JavaScript!";
}