Home
Fullpage
HTML

9.1 script | HTML

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.

Post a Comment