HTML Script Tag: Understanding the HTML <script> Tag

Table of Contents

Understanding the HTML <script> Tag for JavaScript in Web Development

Learn about the HTML <script> tag and its usage in web development with JavaScript.

Explore how to include inline code, link to external files, and add interactivity to your web pages.

Get insights into best practices and examples.

HTML (Hypertext Markup Language) is the standard markup language for creating web pages. It provides the structure and content of a webpage by using various tags and elements. JavaScript, on the other hand, is a programming language that allows you to add interactivity and dynamic features to your web pages. It is often used in conjunction with HTML to enhance the functionality and behavior of a website.

How to cretae HTML page with JavaScript ?

alert("Hello, World!");
    }

To create an HTML page with JavaScript, you can follow these steps:

1-Create a new HTML file using a text editor or an integrated development environment (IDE).

2-Save the file with a .html extension.

2-Start by defining the HTML structure using the <html>, <head>, and <body> tags.

3-The <head> section contains meta information and external resource references.

4- The <body> section contains the visible content of the webpage.

5-Within the <head> section, you can include a <script> tag to import your JavaScript code.

6-You have two Methods :

a)The first method:

You can embed the JavaScript directly within the <script> tag, or

b)The second method:

You can link to an external JavaScript file using the src attribute.

The first method:

By Embedding JavaScript code within <script> tag:

1-Open text editor such as notepad te write the following code:

<!DOCTYPE html>
<html>
<head>
  <title>HTML with JavaScript</title>
  <script>
    // JavaScript code goes here
    function greet() {

</script> </head> <body> <h1>Welcome</h1> <button onclick="greet()">Click me</button> </body> </html>

2- from File menu save the file with nam :[ test.html] or as you like

3- by any web brwoswer open the test.html file to see :

The second method by linking the html file to an external JavaScript file:

1-open the textEditor the write the followin code:

<!DOCTYPE html>
<html>
<head>
  <title>HTML with JavaScript</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>Welcome</h1>
  <button onclick="greet()">Click me</button>
</body>
</html>

2- create javscript file :

Open notepad the write the javascript code:

// External file of JavaScript code

function greet() {
      alert("Hello, World!");
    }

3- by any web browser open the html file to see :

Explanation:

1-In both examples, we define a JavaScript function called greet() that displays an alert box with the message “Hello, World!” when the button is clicked.

2-The onclick attribute in the <button> tag is used to associate the function with the button’s click event.

Uses of JavaScript in HTML page:

JavaScript can be used to perform various tasks on a webpage, such as :

1-form validation

2-DOM manipulation (changing the content or style of HTML elements dynamically)

3-making AJAX requests to fetch data from a server, and much more.

Its versatility and ability to interact with the HTML elements make it an essential tool for creating interactive and dynamic web pages.

Note: Remember to place the JavaScript code either within the <script> tags or in a separate file with the .js extension and link it using the src attribute in the <script> tag.

How to use The HTML <script> Tag ?

The HTML <script> tag is used to embed or reference JavaScript code within an HTML document. It allows you to include JavaScript code directly within the HTML file or link to an external JavaScript file.

Here are the different ways that the <script> tag can be used:

Inline JavaScript:

You can embed JavaScript code directly within the <script> tags in the HTML file.

This is done by placing the JavaScript code between the opening <script> tag and the closing </script> tag.

For example:

<!DOCTYPE html>
<html>
<head>
  <title>HTML with JavaScript</title>
  <script>
    // JavaScript code goes here
    function greet() {
      alert("javascript code inside the html code !");
    }
  </script>
</head>
<body>
  <h1>Welcome</h1>
  <button onclick="greet()">Click me</button>
</body>
</html>

This approach is useful for small code snippets or quick scripting tasks.

External JavaScript:

You can also link to an external JavaScript file using the src attribute of the <script> tag.

The src attribute specifies the path to the JavaScript file.

For example:

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

Explanation:

In this case, the JavaScript code is written in a separate file named “script.js”, and the <script> tag is used to reference and import that file into the HTML document.

This approach is suitable for larger JavaScript codebases or when you want to reuse the same JavaScript file across multiple HTML pages.

Inline event handlers:

The <script> tag can be used to define event handlers directly within HTML elements using the on-event attributes.

For example:

<button onclick="alert('Button clicked!')">Click me</button>

Explanation:

In this case, the JavaScript code alert(‘Button clicked!’) is directly embedded within the onclick attribute of the <button> element. When the button is clicked, the JavaScript code will be executed.

It’s worth noting that the <script> tag is typically placed within the <head> or <body> section of the HTML document. Placing it in the <head> section allows the JavaScript code to be loaded and executed before the entire webpage is rendered, while placing it in the <body> section allows the HTML content to be loaded first, and then the JavaScript code is executed.

complete code example

Here’s a complete code example that demonstrates the usage of the <script> tag to include JavaScript code within an HTML document:

<!DOCTYPE html>
<html>
<head>
  <title>HTML with JavaScript</title>
  <script>
    // Inline JavaScript code
    function greet() {
      alert("Hello, World!");
    }
  </script>
</head>
<body>
  <h1>Welcome</h1>
  <button onclick="greet()">Click me</button>
</body>
</html>

Explanation:

1-In this example, we have an HTML document that includes a <script> tag within the <head> section.

2-Inside the <script> tag, we define a JavaScript function called greet(). This function displays an alert box with the message “Hello, World!” when invoked.

3-In the <body> section, we have an <h1> element with the text “Welcome” and a <button> element.

4-The onclick attribute of the button is set to greet(), which means when the button is clicked, the greet() function will be called, triggering the alert dialog.

You can save the above code in an HTML file, such as index.html, and open it in a web browser to see the result. When you click the “Click me” button, an alert box will pop up with the message “Hello, World!”.

This example shows the basic usage of the <script> tag to include JavaScript code directly within an HTML file.

Note:

Remember to place the JavaScript code between the opening and closing <script> tags or link to an external JavaScript file using the src attribute within the <script> tag.

Mulichoice quiz about this lesson with answers

Here’s a multiple-choice quiz based on the lesson content. Each question is followed by four options (A, B, C, D), and the correct answer is indicated with an asterisk (*) after the option.

1-What does HTML stand for?

A) Hyper Text Markup Language
B) High Tech Markup Language
C) Home Tool Markup Language
D) Hyperlink and Text Markup Language

*Answer: A

2-What is the purpose of JavaScript in web development?

A) To create the structure and content of web pages.
B) To add interactivity and dynamic features to web pages.
C) To define the style and layout of web pages.
D) To manage server-side operations for web applications.

*Answer: B

3-Which HTML tag is used to include JavaScript code within an HTML file?

A) <style>
B) <link>
C) <script>
D) <javascript>

*Answer: C

4-How can you embed JavaScript code within an HTML file?

A) By placing it between <script> tags in the <head> section or the <body> section.
B) By using the <js> tag to enclose the JavaScript code.
C) By using the <code> tag to enclose the JavaScript code.
D) By placing it directly within the HTML tags without any additional markup.

*Answer: A

5-What is the purpose of the src attribute in the <script> tag?

A) It specifies the type of script being used (e.g., JavaScript, Python).
B) It defines the scope of the JavaScript code within the HTML document.
C) It indicates the position of the JavaScript code within the HTML file.
D) It references an external JavaScript file to be imported.

*Answer: D

6-Which of the following examples demonstrates linking to an external JavaScript file?

function greet() {

alert(“Hello, World!”);

}

</script>

src=”script.js”

</script>

*Answer: B

7-Where should you typically place the <script> tag within an HTML document?

A) It can be placed anywhere within the <head> section or the <body> section.
B) It should be placed before the closing </head> tag.
C) It should be placed before the closing </body> tag.
D) It should be placed immediately after the opening <html> tag.

*Answer: A

8-What can JavaScript be used for in web development?

A) Performing form validation.
B) Changing the content and style of HTML elements dynamically.
C) Making AJAX requests to fetch data from a server.
D) All of the above.

*Answer: D

9-Which of the following is true about inline JavaScript code?

A) It must be placed in a separate JavaScript file.
B) It is defined using the <js> tag.
C) It is enclosed between <script> and <script> tags in the <head> section.
D) It is embedded directly within HTML tags using the <script> tag.

*Answer: D

10-What is the purpose of the defer attribute in the <script> tag?

A) It specifies that the script should be executed as soon as it is available.
B) It delays the script execution until the page has finished parsing.
C) It marks the script as an external file that needs to be fetched asynchronously.
D) It prevents the script from being executed in certain browsers.

*Answer: B

11-Which attribute is used to specify an alternative script for browsers that do not support the <script> tag?

A) alternative
B) fallback
C) src
D) no-script

*Answer: D

12-What happens if the async attribute is added to the <script> tag?

A) The script is executed as soon as it is available, while the page continues parsing.
B) The script is fetched asynchronously and executed as soon as it is available, without blocking the page parsing.
C) The script is ignored by the browser.
D) The script is executed in the order it appears in the HTML document.

*Answer: B

13-How can you use the <noscript> tag in combination with the <script> tag?

A) To define a fallback content that is displayed when JavaScript is disabled or not supported.
B) To enclose JavaScript code that should be executed only when JavaScript is disabled.
C) To indicate a separate JavaScript file that should be loaded if the primary script fails to load.
D) To specify an external JavaScript file that should be loaded instead of the embedded JavaScript code.

*Answer: A

14-Which of the following is true about the placement of the <script> tag in an HTML file?

A) It is recommended to place the <script> tag in the <head> section.
B) It is recommended to place the <script> tag at the end of the <body> section.
C) It can be placed anywhere within the HTML file without any specific recommendations.
D) It should always be placed immediately after the opening <html> tag.

*Answer: B

15-How can you specify the MIME type of a script included using the <script> tag?

A) By using the type attribute and specifying the MIME type as a value.
B) By using the mime attribute and specifying the MIME type as a value.
C) By using the src attribute and specifying the MIME type as a query parameter.
D) The MIME type is automatically determined based on the script content.

*Answer: A

16-What is the purpose of the integrity attribute in the <script> tag?

A) It specifies the encoding format of the script content.
B) It ensures that the script is executed securely by checking its integrity against a cryptographic hash.
C) It specifies the version number of the script.
D) It prevents the script from being cached by the browser.

*Answer: B

17-How can you include an external JavaScript file using the <script> tag and ensure it is loaded asynchronously?

A) By adding the defer attribute to the <script> tag.
B) By adding the async attribute to the <script> tag.
C) By setting the type attribute to “module” in the <script> tag.
D) By specifying the async value for the src attribute in the <script> tag.

*Answer: B

18-What is the purpose of the document.write() method in JavaScript?

A) It writes the content of a JavaScript variable to the HTML document.
B) It writes the content of an HTML element to the JavaScript console.
C) It writes content directly to the HTML document while it is being parsed.
D) It writes content to a separate file specified by the write attribute in the <script> tag.

*Answer: C

19-Remember to review the answers and explanations to ensure you understand each question thoroughly.

References of this lesson

MDN Web Docs – <script>: The official Mozilla Developer Network (MDN) documentation provides a comprehensive guide on using the <script> tag in HTML. It covers various attributes, placement options, and best practices.

Reference: MDN Web Docs – <script>

MDN Web Docs – JavaScript: MDN also provides extensive documentation on JavaScript, including language fundamentals, syntax, and usage in web development.

HTML

Curriculum

HTML Script Tag: Understanding the HTML <script> Tag

Understanding the HTML <script> Tag for JavaScript in Web Development

How to cretae HTML page with JavaScript ?

The first method:

How to use The HTML <script> Tag ?

Inline JavaScript:

External JavaScript:

Inline event handlers:

Mulichoice quiz about this lesson with answers

References of this lesson

Leave a Reply

Modal title