How to add JavaScript to a Webpage – for Beginners
Working with web-related files requires loading and executing JavaScript together with HTML markup. Either directly within an HTML document or in a separate file that the browser downloads along with the HTML document, this can be done.
JavaScript does nothing on its own within a browser. JavaScript is executed from within your HTML pages. The <script> element is required to call JavaScript code from within HTML.
You can place any number of scripts in an HTML document.
Scripts can be placed in the <head>, or in the <body> section of an HTML page, or in both.
This article will explain how to include JavaScript in your web pages as a separate file as well as inline within an HTML Document.
JavaScript in <head>
You can place any number of scripts in an HTML document.
Typically, the script tag is placed in the head of the HTML document:
<html>
<head>
<script>
</script>
</head>
<body>
</body>
</html>
There is also a <noscript> tag. Its content will be shown if the client’s browser doesn’t support JS scripts.
JavaScript in <body>
Alternatively, include the JavaScript in the <body> tag.
<html>
<head>
</head>
<body>
<script>
</script>
</body>
</html>
It’s a good idea to place scripts at the bottom of the
element.This can improve page load, because HTML display is not blocked by scripts loading.
The <script> Tag
The <script> tag can take two attributes, language and type, which specify the script’s type:
<script> ... </script>
The language attribute is deprecated, and should not be used.
Also, old JavaScript examples may use a type attribute: <script type=“text/javascript”>.
The type attribute is not required. JavaScript is the default scripting language in HTML.
In the example below, we created an alert box inside the script tag, using the alert() function.
<html>
<head>
<title></title>
<script type="text/javascript">
alert("This is an alert box!");
</script>
</head>
<body>
</body>
</html>
External JavaScript
Scripts can also be placed in external files. If you want to execute a .js script from your webpage, just use <script> with an src attribute pointing to the script file, using its URL.
Here is an example of a function inside an external scripts.js file.
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph update.";
}
External scripts are practical when the same code is used in many different web pages.
To use an external script, put the name of the script file in the src (source) attribute of a <script> tag. JavaScript files have the file extension .js, like the example below.
<script src="scripts.js"></script>
You can place an external script reference in <head> or <body> as you like.
The script will behave as if it was located exactly where the <script> tag is located.
External JavaScript Advantages
Placing scripts in external files has some advantages:
- It distinguishes between HTML and JavaScript code.
- It simplifies the reading and maintenance of HTML and JavaScript.
- JavaScript files that have been cached can help to speed up page loads.
Conclusion
This article demonstrated how to include JavaScript in your web files, both inline and as a separate .js file.
Further reading
Want to learn some more about using JavaScript within a webpage? Then check out – Use JavaScript within a webpage – Learn web development | MDN
See also
What exactly is JavaScript?
What is the Syntax of JavaScript?
How to find and get HTML Elements in JavaScript
If you liked this article, then please share. You can also find me on Twitter for more updates.
Top comments (0)