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" />
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
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.