Search Here

Javascript Script Tag Tricks Developers Must Know with Improvement Tips

To run JS on an HTML document you must have to add this <script>. Consider this as an entry point for Javascript to be able to execute. Here is this post, you’ll learn script tag tricks.

1. Load scripts asynchronously using the async attribute

By default Javascript downloads and parses the javascript file synchronously one after another. And a lot of script files decrease the website loading speed.

For better webpage loading purpose async attribute is used. The async is a boolean attribute and the default is set to false.

Example

<script src="path/to/app.js" async></script>

The script path/to/app.js is first downloaded by the browser and when a complete HTML document is loaded then it starts parsing the downloaded Javascript files one after another.

2. Load scripts after the document is loaded using defer attribute

The defer the attribute does the reverse of async attribute. It only downloads and parses script files after completely loading of HTML document.

The use-cases of defer attribute would be if you want to execute the script only after the HTML element is completely loaded.

Example

<script src="path/to/app.js" defer></script>

3. Make use of the right type of attribute

By default for a script, the tag implicitly considers all scripts as type/javascript unless explicitly specified.

Apart from type/javascript, there are other types that can be useful from a development point of view. And some of them I’m going to list down.

Using script tag to store JSON object

<script id="json-data" type="application/json" >{"student_name":"Vijay", "course" : "BCA"}</script>

<script>
    let json_data = JSON.parse(document.getElementById('json-data').innerText);
    console.log("Student Name is :"+json_data.student_name);
</script>

Console Output

Student Name is :Vijay

Using script file to import Javascript modules

Javascript modules are a concept of splitting code into a number of files that are compact and easily manageable.

Here is a simple example of importing modules in an HTML file/document using the module attribute in a script tag

//student_module.js
const studentInfo = {
    "name" : "Vijay"
}

export default studentInfo;

//home.html
<script type="module" >
    import studentInfo from './student_module.js';    
    console.log('Student Name: '+studentInfo.name); //Student Name: Vijay
</script>

Fallback if the browser doesn’t support ES2015 module using nomodule attribute in a script tag

If you want your app to be compatible with the legacy browsers then specify an attribute nomodule with the fallback javascript file when the javascript module file is not supported then nomodule will be loaded and executed.

<script type="module" >
    import studentInfo from './student_module.js';    
    console.log('Student Name: '+studentInfo.name);
</script>

<script nomodule src="handle_fail.js"></script>

4. Integrity

The integrity attribute is to check the authenticity of the script tag.
The Integrity can be generated using hashing SHA algorithm and this data is then passed with the script tag as integrity attribute.

Then validation of the SHA Hash is done on the browser side it checks whether the integrity code sent by the server and the hash in the script tag is valid and unchanged.

Example

<script src="www.my-site.com/app.js" integrity="hash-algothrim-characters" />
For more detailed information about how the hash is validated visit Mozilla Docs post on SubResource Integrity.

5. Get the currently executed script tag element

You can get the script tag of the currently executed script inside that script file by using document.currentScript an attribute that returns you the script tag.

Example

Consider, for HTML document home.html we have added two script tags.

<html>
<body>
    <script src="./scripts/one.js" ></script>   
    <script src="./scripts/two.js" ></script>   
</body>
</html>

Now in each one of those script files, we want to retrieve the script tag.
In script file ./scripts/one.js

console.log('one.js', document.currentScript);

In script file ./scripts/two.js

console.log('two.js', document.currentScript);

And once you run the HTML document you see the document.currentScript returns a script tag that is related to that script file.

Get currently executed script tag element - output of the scripts that are loaded

Get currently executed script tag element – output of the scripts that are loaded

6. Pass custom parameters into a script file

You can create a custom attribute within the script tag that you can access in the script file.
For this we can make use of document.currentScript that returns us the HTML script tag

Example

Include the below script tag in your HTML document

<script src="./scripts/one.js" param1="abc" param2="123" ></script>

Now in the one.js file.

let current_script = document.currentScript;
console.log( "Param1 value", current_script.getAttribute('param1') );
console.log( "Param2 value", current_script.getAttribute('param2') );

Console Output

Param1 value abc
Param2 value 123

7. Pass Query Params in script tag src attribute and access it query params within a script using URL class

Suppose, you have to pass some extra data into the script tag that you can achieve by passing query params appended to the script URL like ?id=100.

For this, you would need to class URL() with document.currentScript as it makes fetching the query parameters very easier.

Example

Here is how our HTML document looks. We have to access the query params id inside the two.js script file.

<script src="./scripts/two.js?id=10" ></script>

In script file two.js

let scriptTag = document.currentScript;
let scriptURL = new URL(scriptTag.src);
console.log("The id value is ", scriptURL.searchParams.get("id"))

Console Output

The id value is  10

Conclusion

So that’s all for this part on Javascript script tag tips and tricks. If you like my content do share this post with your other friends.