It should be easy to add a code to a HTML page. However, if you want to make an efficient code, there are some rules that you may need to follow. Please review the following sections to read more details about that.
Table of Contents
- The type attribute
- Using the defer keyword
- Using the async keyword
- What is the purpose of the <noscript> element?
- Which method to use in the code
However, the language has evolved over time. Each version of the ECMAScript specification brings us more and more new features.
However, the problem may occur when you need to make complex changes in the HTML page. For example, you may want to combine several scripts into a single block of code. Or you have to write a handler for the click event. In all such cases, you should be familiar with the basics of web development.
Each HTML web page should have a
To make that, you can simply add the opening and closing tags there:
<script></script>. Inside of that block, you may put the desired code.
See the following HTML code example. It shows how to make a simple alert popup that is triggered on a page load.
<body> tag. In that case, the rendered page will appear much faster to the user.
Usually, web developers place all non-critical code in a footer of the web page. That's an important web speed optimization that is widely used in web development.
Please see the following code that shows how it can be done. You just need to move the
<script></script> code block into the desired location.
<script> tag. The HTML specification allows you to create various event handlers that are executed by the browser.
The most popular is probably the "onclick" event. It can be used to write a code that is called when someone clicks on a button.
Please review the following sample. There, you can see how to show a simple alert window. If you run the given code and click on the "Submit" button, you'll see the "This is a sample application" message.
There are many more event types available in the HTML language. For example, mouse, keyboard, focus events and others. For a full list, we recommend reviewing the official W3C specification.
The inlined code has some benefits, it runs faster. However, if the code is large, you may want to add it into a separate file and save it somewhere on a server.
After that, to access it in the HTML document, you have to use the "src" attribute of the
<script> tag. There, you may specify the URL of the static JS file.
<body> section of the HTML document. You just have to move the
<script> tag into the desired place. No additional changes are required in the code.
It is worth mentioning that the JS files are usually large. And if you move them into the footer, the site will work much faster.
Please see the given code sample, it shows how exactly to load the JS file in the
In our code sample, we use a simple JS file that only shows the alert message to the user. The source code is given below.
alert('This is a sample application.');
However, you may create a more advanced code in your web application. The JS file may contain any logic. The most important rule is that the file should have valid syntax and no compilation errors.
You may provide an URL in different formats. The most common case is a relative URL. It links a file that is available on the same domain as the main application. The benefit of this method is that the page may be a little smaller in size. See our example below.
Also, it's possible to use the full URL that contains the domain name and the protocol. Please see such a sample below.
The previous URL may be served from a protocol that is not currently used in a browser. For example, the web page is available on the HTTP version of the site, but the JS file is loaded via HTTPS connection.
In such a case, you can use the "//" value in your code. It should be placed before the domain name. Then, the JS file will be loaded via the same protocol that is used on the site. Our code sample is given below.
The type attribute
The source code of such an application would typically look like the following.
<script src="js/code.js"></script> <script src="js/math.js"></script> <script src="js/effects.js"></script> <script src="js/library.js"></script>
However, such a structure creates a huge issue for use. Web pages may be very slow and users may see a delay when loading a website into a browser.
Finally, after those steps, the system produces a single JS file and adds it to the web page, like it's shown below.
Using the defer keyword
See below how to properly configure this attribute.
<script src="js/code.js" defer></script>
Using the async keyword
This attribute also allows you to execute some code that is not blocking the rendering of a page. If you use it, the script will be downloaded and parsed asynchronously while the other content is processed.
<script src="js/code.js" async></script>
What is the purpose of the
Which method to use in the code
However, if you are making a custom HTML website or modifying some website theme, then you may need to manually add
<script> tags into the code.