- How to Link JavaScript to HTML
- Placement of the Tags
- Embedded JavaScript
- The type Attribute
- Related
- How to link JavaScript to HTML
- Adding JavaScript to a page
- Adding a JavaScript file to a page
- Adding JavaScript using a CDN
- Wrapping Up, How to link JavaScript to HTML
- Recent Posts
- How to Link JavaScript to HTML
- Placement of the Tags
- Embedded JavaScript
- The type Attribute
- Related
How to Link JavaScript to HTML
To link to an external JavaScript file, use where myExternalFile.js is the location of the external file.
The above example links to an external JavaScript file. The location of the JavaScript file is provided as the value for the src attribute. When the HTML file loads, the JavaScript file is also loaded.
Placement of the Tags
External JavaScript files are often linked to from the document but this is not a requirement. You can also place the link within the document element. In fact, more and more developers are linking to their JavaScript files from the bottom of the HTML document (just before the closing tag) for performance reasons. Doing this allows the rest of the HTML page to load without having to wait for external JavaScript resources to be downloaded first.
Embedded JavaScript
This second example uses exactly the same JavaScript as the first example (only the text has changed). The only difference is that the JavaScript is now embedded into the HTML document, as opposed to being located in an external file.
The type Attribute
You can use the type attribute to explictly state the script type. If you omit this attribute the script will be treated as JavaScript. So there is no need to use this attribute if the script is in JavaScript.
If the script is not written in JavaScript, you should use the type attribute to explicitly state the type of script.
Related
How to link JavaScript to HTML
When creating web pages there comes a time when you need to do a bit more than display content. You need to load JavaScript.
One of the first JavaScript files added is Google Analytics to track page loads and visitors.
But how do you link JavaScript to HTML?
In this tutorial, we are going to cover how to link JavaScript to HTML. We will look at:
- Adding JavaScript to a page
- Adding a JavaScript file to a page
- Adding JavaScript from a CDN
Adding JavaScript to a page
When you add JavaScript to a page you use a tag. Sounds simple enough. Let’s look at an example.
We will start simple. Say that as soon as the web page loads we want to say “hello”. To do this we can use the alert() JavaScript function.
We will need a very basic HTML page and then load the script like this:
html lang="en"> head> title>Hello!title> head> body> script> alert("hello") script> body> html>The above is all you would need to say hello when the page loads. The browser reads the page and processes the HTML line by line. When it reads the script tag it knows that this is JavaScript and it will run the code.
When it reads the line alert(«hello») it can see we want to display the word “hello” in an alert:
This is a simple example but it shows how you can write JavaScript within an HTML page. This is “inline” JavaScript.
The script tag has some attributes that we can use. These are:
For example, we could specify that the script is JavaScript by adding a type like this:
script type="text/javascript"> alert("hello") script>It used to be common to use more than one type of script but JavaScript won that battle. So now browsers default the type to Javascript. So the above code is the same as:
So there is no reason to use the type attribute anymore.
What about the other attributes, what do they do?
The other attributes only work when loading an external JavaScript file. Let’s look at this next.
Adding a JavaScript file to a page
To load an external JavaScript file we need to use the src attribute. src stands for source and it is the path to the script that you want to load. This attribute loads an external JavaScript file.
For example, say that we have a JavaScript file called main.js in the assets folder on your web server. The contents of this file are the same as before:
When the file loads it will alert with the word “hello”.
You would load the external file with this HTML:
html lang="en"> head> title>Hello!title> head> body> script src="/assets/main.js">script> body> html>Remember, we don’t need to include the type because the file is JavaScript. All we need is the src attribute which is the path to the file.
The HTML will load the script when it loads the page as it did before. When the browser reads that line it will fetch the JavaScript file and run it.
Now that we have an external script we can look at some of the other script attributes. Let’s start with async and defer .
When the browser finds a script tag in the HTML the page loading stops while the browser fetches the script. Once the file is ready the browser runs the code. Once the code has finished running the page will resume loading.
async and defer will improve web performance by allowing the page to continue to load. But they do it in different ways.
The async attribute tells the browser to download the file in the background. This allows the page to continue loading. As soon as the file has downloaded the browser will run the code.
This is how you would add the async attribute:
html lang="en"> head> title>Hello!title> head> body> script src="/assets/main.js" async>script> body> html>How does defer differ? This attribute tells the browser to download the file in the background like async . Yet, it will only run the code once the browser has finished processing loading the page.
This means that defer will not block the page at all. Whereas, async will only block the page when it runs the code. Both attributes mean that they will not block the page when the script is downloading.
Here is how you would use defer :
html lang="en"> head> title>Hello!title> head> body> script src="/assets/main.js" defer>script> body> html>So which one do you choose and when?
The general rule is that you should use defer because it will never stop the page from loading. Also, if you have more than one script on the page defer will run them in order. With async the code runs as soon as they download and you cannot guarantee order.
There is one more attribute that we have not talked about. It is the charset attribute.
This attribute allows you to specify the encoding of the characters. Which can either be “UTF-8” or “ISO-8859-1”. In 20 years of creating web sites, I have never used this attribute. It is safe to say you can leave the default which is “ISO-8859-1”.
Where should you put your script tags? The general rule is to add them before the