Objectives
- Understand the purpose and usage of the <script> element in HTML.
- Learn how to include JavaScript code directly in an HTML document.
- Explore different ways to load external JavaScript files using the <script> element.
- Understand the importance of the "defer" and "async" attributes in script loading.
- Discover best practices for working with JavaScript in HTML documents.
Introduction to the <script> Element
The <script> element in HTML is used to embed or reference executable JavaScript code within a webpage. JavaScript is a programming language that allows you to create dynamic and interactive web content. By using the <script> element, you can add functionality to your webpage, such as form validation, dynamic content updates, animations, and much more.
Basic Usage of <script>
The <script> element can be used in two main ways: embedding JavaScript code directly within your HTML document or referencing an external JavaScript file. Here’s an example of each:
Example 1: Embedding JavaScript Directly
<script>
alert('Hello, world!');
</script>This code displays a simple alert box with the message "Hello, world!" when the webpage is loaded.
Example 2: Referencing an External JavaScript File
<script src="script.js"></script>In this example, the <script> element references an external JavaScript file named "script.js". The JavaScript code within that file will be executed when the webpage loads.
Attributes of the <script> Element
The <script> element has several important attributes that control how and when the JavaScript code is executed:
- src: Specifies the URL of an external JavaScript file.
- type: Specifies the scripting language (usually "text/javascript"). This attribute is optional in modern HTML5 documents.
- defer: Defers the execution of the script until the entire HTML document has been parsed. This is useful for scripts that don't need to run immediately.
- async: Allows the script to be downloaded asynchronously, meaning it will be executed as soon as it is available, without blocking the rest of the page loading.
- crossorigin: Specifies how the script should be loaded from a different origin (useful for scripts hosted on different domains).
Best Practices for Using <script>
- Place <script> elements just before the closing </body> tag to ensure that the HTML content loads first.
- Use the "defer" attribute for scripts that are not critical to the initial rendering of the page.
- Use the "async" attribute for scripts that can load independently of other scripts or content.
- Avoid using inline JavaScript within the <script> element; instead, reference external files to keep your HTML code clean and maintainable.
Fun Question
Why do you think the <script> element has attributes like "defer" and "async"? What scenarios would you use them in?
Exercises
1. Write a <script> element that alerts "Hello, world!" when the page loads.
2. Create a separate JavaScript file that logs "Page loaded" to the console, and reference it in your HTML using the <script> element.
3. Modify your script reference to use the "defer" attribute and observe how it affects the loading of your page.
4. Add a second <script> element with the "async" attribute and compare its behavior to the "defer" attribute.
5. Experiment with placing a <script> element in the <head> section of your document and see how it impacts page load times.
Summary
- The <script> element is used to embed or reference JavaScript code within an HTML document.
- You can either write JavaScript code directly inside the <script> element or link to an external JavaScript file using the "src" attribute.
- The "defer" and "async" attributes help control when and how the script is executed, optimizing the loading and rendering of your webpage.
- Following best practices when using the <script> element ensures that your web pages load efficiently and that your code is easy to manage.
Understanding the <script> element and how to use it effectively is key to creating dynamic and interactive web pages that perform well and provide a great user experience.