Summary: This tutorial helps you get started with JavaScript by showing you how to embed JavaScript code into an HTML page.
To insert JavaScript into an HTML page, you use the <script>
element. There are two ways to use the <script>
element in an HTML page:
- Embed JavaScript code directly into the HTML page.
- Reference an external JavaScript code file.
Embed JavaScript code on an HTML page
Placing JavaScript code inside the <script>
element directly is not recommended and should be used only for proof of concept or testing purposes.
The JavaScript code in the <script>
element is interpreted from top to bottom. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Hello World Example</title>
<script>
alert('Hello, World!');
</script>
</head>
<body>
</body>
</html>
Code language: HTML, XML (xml)
In the <script>
element, we use the alert()
function to display the Hello, World!
message.
Include an external JavaScript file
To include a JavaScript from an external file:
- First, create a file whose extension is
.js
, for example,app.js
and place it in thejs
directory. Note that while placing the JavaScript file in thejs
directory is not required, it is considered good practice. - Then, use the URL to the JavasScript source code file in the
src
attribute of the<script>
element.
The following shows the contents of the app.js file:
alert('Hello, World!');
Code language: JavaScript (javascript)
The following displays the contents of the helloworld.html
file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Hello World Example</title>
<script src="js/app.js"></script>
</head>
<body>
</body>
</html>
Code language: HTML, XML (xml)
If you launch the helloworld.html
file in the web browser, you will see an alert that displays the Hello, World!
message.
Note that you can load a JavaScript file from a remote server. This enables you to serve up JavaScript from various domains e.g., content delivery network (CDN) to enhance page loading speed.
When you have multiple JavaScript files on a page, the JavaScript engine interprets the files in the order in which they appear. For example:
<script src="js/service.js"></script>
<script src="js/app.js"></script>
Code language: HTML, XML (xml)
In this example, the JavaScript engine will interpret the service.js
and the app.js
files sequentially. It completes interpreting the service.js
file first before moving on to the app.js
file.
For a page that includes many external JavaScript files, the blank page may be displayed during the rendering phase.
To prevent this, you include the JavaScript file just before the </body>
tag as shown in this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Hello World Example</title>
</head>
<body>
<!-- end of page content here-->
<script src="js/service.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Code language: HTML, XML (xml)
The async and defer attributes
To modify how the browser load and execute JavaScript files, you use one of two attributes of the <script>
element: async
and defer
. These attributes take effect only on the external script files.
async attribute
The async
attribute instructs the web browser to execute the JavaScript file asynchronously. However, it does not guarantee that the script files will execute in the order in which they appear. For example:
<script async src="service.js"></script>
<script async src="app.js"></script>
Code language: HTML, XML (xml)
The app.js
file might execute before the service.js
file. Therefore, you must ensure that there is no dependency between them.
defer attribute
The defer
attribute requests the web browser to execute the script file after the HTML document has been parsed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript defer demonstration</title>
<script defer src="defer-script.js"></script>
</head>
<body>
</body>
</html>
Code language: HTML, XML (xml)
Even though we place the <script>
element in the <head>
section, the script will wait until the browser receives the closing </html>
tag to start executing.
Summary
- Use
<script>
element to include a JavaScript file in an HTML page. - The
async
attribute of the<script>
element instructs the web browser to fetch the JavaScript file in parallel and then parse and execute it as soon as the JavaScript file becomes available. - The
defer
attribute of the<script>
element allows the web browser to execute the JavaScript file after the document has been parsed.