To run a JavaScript code in a webpage, we use <script></script> element.
There’re two ways in which we can use this tag to include our JavaScript source code:
Example:
<html>
<head>
<title>Welcome to JavaScript</title>
</head>
<body>
<script type="text/javascript">
console.log("Hello World!");
alert("Hello World!");
</script>
</body>
</html>Note: in the quick example section, we’ve explained the instructions you need to follow in order to run a JavaScript source code. In summary, you need to put the code above in an HTML file and run it in a web browser. Also check the browsers’ console section if you’re not familiar with the Console.
The two statements console.log("Hello World"); and the alert("Hello World"!); are JavaScript codes. As you can see, we put them between the opening <script> and closing </script> tags and when the page is loaded in a web-browser, the codes will be executed.
The second way is to use one of the attributes of the `<script>` tag which is named `src`.
If you worked with <img> tag, it has an attribute with the same name src and we use that to address the target image file that we want to be loaded in the webpage.
Likewise, when there’s an external JavaScript source code and we want it in a webpage, we can set the address of that file in the src attribute of the <script> tag and the browser will download that file and execute its instructions.
Example:
Create a file named simple.js and open it via an IDE. After that put the instructions below into that file:
console.log("Hello World!");
alert("Hello World!");Now save and close the file.
After that, create an HTML file and put the source code below into that file:
<!DOCTYPE html>
<html>
<head>
<title>JS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="simple.js">
</script>
</body>
</html>Note: this HTML file and the simple.js file both are in the same directory and the same folder. Check the URL in HTML section if you’re not familiar on how to address and external file.
It’s important to note that a <script> element using the src attribute should not include additional JavaScript code between the <script> and </script> tags. If both are provided, the script file is downloaded and executed while the inline code is ignored.
The <script> element has multiple attributes and in this section we cover them:
`type`: via this attribute we can define the type of the external file that we're about to load in a webpage. The value of this attribute can be either `text/javascript`, `text/ecmascript`, `application/javascript` or `application/ecmascript`. This attribute was mainly used in the olden days when the browsers weren't smart enough to figure out what the content of the external file is. But these days are smart enough and so this attribute is optional which means we could simply ignore the attribute.
`src`: This attribute is mainly used when the JavaScript source code is an external file and we want to load it in a webpage.Note: this attribute is optional and that means if there’s no external JavaScript file to download we can simply ignore it.
`charset`: Optional. The character set of the code specified using the `src` attribute.Note: this attribute is rarely used because most browsers don't honor its value.
`crossorigin`: Optional. Configures the CORS settings for the associated request; by default, CORS is not used at all. `crossorigin="anonymous"` will configure the request for the file to not have the credentials flag set. `crossorigin="use-credentials"` will set the credentials flag, meaning the outgoing request will include credentials.Note: don’t worry if you didn’t understand what this attribute does. The CORS is a lengthy topic and in the Ajax section we covered this topic in greater details. After that you’ll fully understand what crossorigin does.
`defer`: Optional. This attribute is used when we have an external JavaScript source code. It signals the browsers that the process of downloading of the file should start immediately but the execution of those codes should be deferred until after the document's content (webpage) is completely parsed and displayed.Example:
<!DOCTYPE html>
<html>
<head>
<script defer src="JavaScript.js">
</script>
<title>JS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
</html>
`async`: The `async` attribute is similar to `defer` in that it changes the way the script is processed. Also similar to `defer`, `async` applies only to external scripts and signals the browser to begin downloading the file immediately. Unlike `defer`, scripts marked as `async` are not guaranteed to execute in the order in which they are specified.For Example:
<!DOCTYPE html>
<html>
<head>
<script async src="JavaScript.js">
</script>
<script async src="JavaScript2.js">
</script>
<title>JS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
</html>Here the JavaScript2.js might execute before the JavaScript.js source code. So in such case it is important that there should be no dependencies between the two source codes.
Remember:
In a webpage there can be multiple <script> elements. Regardless of how the code is included, the <script> elements are interpreted in the order in which they appear in the page and so long as the defer and async attributes are not present. The first <script> element’s code must be completely interpreted before the second <script> element begins interpretation, the second must be completed before the third, and so on.