The community is working on translating this tutorial into Uzbek, but it seems that no one has started the translation process for this article yet. If you can help us, then please click "More info".
The SCRIPT tag
When developing websites, there are three important technologies that you should know: HTML, CSS and JavaScript. They are listed in order of importance, with HTML being the most important, but also the easiest to understand and learn. To work with JavaScript in the browser, you need to at least know HTML but a good understanding of CSS is recommended as well. So, if you need to brush up on your HTML and/or CSS skills, go have a look at our HTML tutorial and our CSS tutorial.
HTML is the foundation of a web page, allowing you to specify the structure as well as the content of the page. CSS allows you to apply various types of styling to the elements defined in your HTML, and with JavaScript, you can manipulate both content (HTML) and style (CSS), creating much more dynamic web pages.
The SCRIPT tag
Now, with that in place, let's talk about how you can integrate JavaScript into your web pages. A web page is basically a set of HTML tags, which the browser translates into various elements. Most elements will be visible for the visitor, but some elements are meant purely as instructions to the browser. In that latter category, we'll find the SCRIPT tag, which tells the browser that it should switch to a script interpreter when dealing with the contents of the SCRIPT tag.
The SCRIPT tag was originally introduced to HTML to allow for integration of JavaScript, but was later expanded to also allow other languages and technologies like VBScript (no longer used). For this reason, you are allowed to specify the type of scripting code to be expected by the browser by using the type attribute, but by default, most browsers will assume that if not directly specified, the SCRIPT tag refers to JavaScript code.
Inline scripts
In its most basic form, the SCRIPT tag doesn't need any attributes - just place it anywhere in your HTML code and write your JavaScript inside the start and end tag, like this:
<script>
alert("Hello, world!");
</script>As soon as the browser reaches this script block, it will use its JavaScript engine to interpret and execute the code within it.
External scripts
While it makes sense to have some JavaScript code inline in your HTML documents, you might want to move some or all of it into one or several external JavaScript files and then include these files by reference. This is still done using the SCRIPT tag, but instead of supplying the code, you will pass in a filename through the src attribute, like this:
<script src="javascript.js"></script>If a file exists with the name "javascript.js", it will be executed once the browser reaches this tag as if it was a part of the page.
You should always use external JavaScript files instead of inline script blocks if you have more than a few lines of code, as it has multiple advantages:
- It will make your HTML documents shorter easier to read
- You will be able to reference the same JavaScript code from multiple web pages
- The browser won't have to download the same JavaScript code for each page view - instead it can cache the JavaScript file and use it from memory
Placing the SCRIPT tags
In a comment above, I stated that you can place your SCRIPT tags anywhere you want within your HTML documents, and while that is true, there are some common places where you would normally place them. Also, since the SCRIPT tags are, by default, interpreted and executed as soon as the browser reaches them, it matters where you place them.
Here's how a mostly empty HTML document may look like:
<!DOCTYPE html>
<html>
<head>
<title>My web page</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>...An awesome place on the World Wide Web!</p>
</body>
</html>Hopefully you recognize these HTML tags, especially the HEAD and BODY sections - if not, please brush up on your HTML skills in our HTML tutorial.
Now, whenever you want to add JavaScript code to your document, I would recommend doing it either in the HEAD section or at the end of the BODY section, like this:
<!DOCTYPE html>
<html>
<head>
<title>My web page</title>
<script>
// Common JavaScript position #1
// Should be used mostly for external scripts
</script>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>...An awesome place on the World Wide Web!</p>
<script>
// Common JavaScript position #2
// Can be used for both inline and external scripts
</script>
</body>
</html>Its common to use both positions, and as mentioned, it makes a difference where you have your JavaScript code. For instance, if your code needs to interact with the elements of the web page, you generally need to have it at the bottom of the document (position #2) because the elements need to be interpreted and rendered by the browser before your JavaScript code can interact with them.
On the other hand, you may need to have JavaScript code executed at the very beginning of the page load, e.g. for doing statistics. In that case, I recommend position #2, preferably as an external JavaScript file.
SCRIPT attributes
While this is not an HTML tutorial, I do want to mention a couple of important attributes for the SCRIPT tag, which directly relates to how your JavaScript code is processed. I already mentioned the type attribute and we covered the src attribute as well. For complete details, please refer to the documentation.
The following details are mainly for more advanced usage of JavaScript, so if you're just getting started in your learning process, feel free to skip it for now and return later.
The async attribute
As mentioned above, whenever a SCRIPT tag is parsed by the browser, it will immediately execute any inline script found. If the SCRIPT tag is a reference to an external script file, this file will be loaded and only when it has been fully loaded and processed, the browser will continue parsing the rest of the page. This can of course lead to some waiting time for the visitor, especially if you are referencing big and complex JavaScript files.
Using the async attribute is as simple as using any other boolean HTML attribute - just add the word to the tag and you're good to go:
<script src="javascript.js" async></script>Just be aware than when you use the async attribute, your JavaScript is downloaded in parallel with other content on your page and therefore it might be executed before everything is fully loaded, creating a situation where you might be trying to reference something that doesn't exist yet.
The defer attribute
This attribute is only relevant for external script references (using the src attribute). When added, the browser will only execute the referenced JavaScript when the document has been fully parsed, but before raising the DOMContentLoaded event. Just like the async attribute, the defer attribute will allow the browser to fetch the external JavaScript file in parellel, allowing it to keep parsing the rest of the document while simultaneously fetching your JavaScript code.
The defer attribute can be used when the JavaScript code you want to load relies on elements found elsewhere on the page. It can be used just like the async attribute, simply by adding it to your SCRIPT tag, like this:
<script src="javascript.js" defer></script>So, to sum up, if neither async or defer is specified, an external script reference will cause the browser to stop parsing the rest of the document until the referenced JavaScript file has been loaded and executed. This can make your page seem slow and sluggish if you're loading a lot of JavaScript code, and is therefore normally not what you want, so consider specifying either of these attributes, depending on the behavior you want:
Use async if the JavaScript can be executed as soon as it has been loaded, or use defer if you want the browser to wait with the execution of the code until the rest of the document has been fully parsed.