CSS and JavaScript are essential and widely-used programming languages in the field of web development. They are used to add styling and interactivity to web pages, allowing for the creation of interactive and dynamic content.
We’ve covered different ways to handle CSS in our recent blog.
While CSS is used for styles, JavaScript, which is a programming language, is used to add interactive and dynamic functionality to web pages. It can be used on both the front end and back end of web projects, allowing for the creation of full-stack web applications, using a single language.
In short, CSS and JavaScript are crucial for creating user-friendly and engaging web experiences.
Modern apps are dynamic in nature and feature-rich thanks to the power of JavaScript as it enables developers to add features like form validation, user authentication, and logical operations, making it possible to create interactive and engaging web experiences. We can add JavaScript to our HTML files using the script tags.
Script tags are used in HTML files to incorporate JavaScript.
The script tag includes a variety of properties that may be used to control the script’s behavior. We’ll cover the most important ones in this blog.
Deep Dive into Script Tags
Script tags are used in HTML files to incorporate JavaScript.
The script tag includes a variety of properties that may be used to control the script’s behavior. We’ll cover the most important ones in this blog.
Type & Source Attributes
One of the basic tags that you can add is the “type” attribute which specifies the media type of the script. The commonly used script type is JavaScript, as shown in the example below.
<script type="application/javascript">
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
Another attribute is the “src” attribute which is used to specify the URL of an external script file.
<script src="myscripts.js"></script>
If you are not using an external script and want to write JavaScript directly inside your HTML file, you do not need the ‘src’ attribute as you can see in the code snippet provided below.
<html>
<body>
<h1>The script element</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello
JavaScript!";
</script>
</body>
</html>
Async and Defer Loading
In addition, the “async” and “defer” properties in script tags allow for more control over script execution, making the overall web development process more efficient and effective.
The main difference between the async and defer attributes lies in the script execution. If the async attribute is set, the script is executed as soon as it is available, without waiting for the rest of the page to load. This can be useful for scripts that are independent of the page’s content and do not need to be executed in a specific order.
On the other hand, if the defer attribute is set, the script is executed after the page has finished parsing. This is useful for scripts that depend on the page’s content, as it ensures that the script is executed after all the necessary content has been loaded.
In general, the async attribute is best used for scripts that do not need to be executed in a specific order, while the defer attribute is best used for scripts that depend on the page’s content and need to be executed in a specific order.
With the help of these, developers can control the order in which scripts are executed, which is crucial for ensuring that their websites function properly. This allows developers to create robust and reliable websites and ensures that their users have a positive experience. Additionally, by being able to control the execution of scripts, developers can optimize the performance of their websites and make them more efficient.
How to Use JavaScript in HTML files?
We can use JavaScript using the <script /> tag and we can place it inside the head or body section.
You can directly write the JavaScript code inside the script tags in the head section.
<!DOCTYPE html>
<html>
<head>
<title>My webpage</title>
<script type="text/javascript">
console.log(“Hello World”);
</script>
</head>
<body>
<h1>Go to your console.</h1>
</body>
</html>
The second way is that you can place the script tags inside the body section and write the JavaScript code.
Here is an example.
<!DOCTYPE html>
<html>
<head>
<title>My webpage</title>
</head>
<body>
<h1>Go to your console.</h1>
<script type="text/javascript">
console.log(“Hello World”);
</script>
</body>
</html>
Although it is possible to write JavaScript code directly within an HTML file, it is not the most effective or efficient way to do so. This can make the HTML file large and difficult to read and can cause problems when running the file.
A better approach is to include external JavaScript files in the HTML file using the <script> tag. This allows for cleaner and more organized code and makes it easier to manage and maintain the website. For that, you can place the <script> tag which calls the external file in the head or body section of the HTML file.
Let’s take an example.
In the head section:
<!DOCTYPE html>
<html>
<head>
<title>My webpage</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
In the body section:
<!DOCTYPE html>
<html>
<head>
<title>My webpage</title>
</head>
<body>
<h1>Hello, world!</h1>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Where should the script tags go for optimal performance?
There is no definitive answer to the question of where to place script tags as it depends on the purpose of the script.
For scripts that are critical to the page contents and should be loaded first such as analytics, API, or authentication-type of scripts, it is recommended to place them in the head section of the HTML page.
And other script tags should be placed at the bottom of the page before the closing </body> tag. These are scripts that you can afford to load after the web page is rendered like jQuery or animations script such as Lottie’s animation scripts at the end.
Lets take the example of Lottie scripts to create smooth animations.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="display: flex; justify-content: center; margin: auto;">
<div style="display: flex; flex-direction: column;">
<h1>Lottie Animation</h1>
<lottie-player src="https://assets9.lottiefiles.com/packages/lf20_uktq0eKz9C.json" background="transparent"
speed="1" style="width: 300px; height: 300px;" hover loop controls autoplay></lottie-player>
</div>
</div>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js">
</script>
</body>
</html>
Here, we simply used a script tag to include Lottie animation and a lottie-player tag inside the body.
Let us first look at the output.
Likewise, you may utilize numerous sorts of free Lottie animation on your website & this is one of the examples of how you can use the script tags to create a smooth experience for your users.
Some of the other popular use cases of script tags:
Form Validation: Most websites nowadays have sign-up and login forms and that’s where script tags can be useful to validate user inputs like a correct email address or a strong password.
Chatbots: JavaScript can be useful to create chatbots with the help of Artificial Intelligence to provide quick customer support and improve the user experience.
Integration: With the help of scripts, you can integrate several other technologies like animations using Lottie script tags, TailwindCSS & jQuery.
Interactivity: Without JavaScript, it is challenging to create animations and add any dynamic functionality to web pages. Tasks like loading custom user data from a server, digesting an API, or performing authentication cannot be done with just HTML and CSS.
Some more use cases of script tags are to authenticate users, create online surveys, and many more.
However, script tags can only make the UI interactive and dynamic; hence you always need a pixel-perfect UI in the first place to get started.
This is where Locofy.ai can help you. It is a plugin for Figma & Adobe XD that allows you to convert your beautiful design files into React, HTML-CSS, Gatsby, Next.js, and even React Native for mobile development.
With the UI taken care of, you can now focus solely on interactivity and extending the code.
The code generated by Locofy is production-ready and extensible and, moreover, you can add & write custom JS script for interactivity and further functionality.
Hope you like it.
That’s it — thanks.
Top comments (0)