Skip to main content

Script tag in HTML

The <script> Tag​

The <script> tag is used to embed JavaScript code within an HTML document.

It is placed within the <head> or <body> section of an HTML document and can be used to define JavaScript functions, declare variables, and execute code.

Example of <script> tag​

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Example</title>
    <script>
      // JavaScript code goes here
    </script>
  </head>
  <body>
    <!-- HTML code goes here -->
  </body>
</html>

Explanation:

  • The <script> tag is used to enclose JavaScript code.
  • This code can be placed either within the <head> section of the HTML document or within the <body> section.

JavaScript Functions and Events​

  • JavaScript functions: JavaScript functions are blocks of code that can be defined and called at any point within a script. JavaScript functions are the fundamental building block of JavaScript programming and are used to organize and modularize code, making it more reusable and easier to maintain.

  • JavaScript event: JavaScript event is an action or occurrence that happens in the browser or on a web page. Examples of events include clicking a button, submitting a form, resizing the window, or loading a web page.

Example of JavaScript Function and Events:

Editor

Loading...

Explanation:

In this example, greet() represents a function and "Click me" button represents an Event.

  • The greet() function creates a variable name with the value "SkillUpwards".
  • It then uses the document.getElementById() method to get a reference to the div element with the ID "output".
  • Finally, it sets the innerHTML property of the div element to a greeting message that concatenates the name variable with the string "Hello, ".
  • When the user clicks the "Click me" button [an Event], the greet() function is executed and the greeting message "Hello, SkillUpwards!" is displayed in the div element.

JavaScript in <head> or <body>​

  • JavaScript can be included in an HTML document in the head or body section.
  • If included in the head section, it will be loaded and executed before the page is rendered.
  • This may cause a delay in rendering, especially if the script is large or requires external resources.
  • If included in the body section, it will be loaded and executed after the page is rendered.
Tip - Including JavaScript

It's generally better to include JavaScript in the body section just before the closing body tag to ensure quick rendering and access to all page elements.

Example - Including in the <head> section:​

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
    <script src="my-script.js"></script>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>Welcome to my website.</p>
  </body>
</html>

Example - Including in the <body> section​

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>Welcome to my website.</p>
    <script>
      alert("Welcome to my website!");
    </script>
  </body>
</html>

External JavaScript​

External JavaScript is the Javascript code that is stored in a separate file and referenced in an HTML document using the script tag with the src attribute.

Advantages:

  • External JavaScript separates the JavaScript code from the HTML content, making it easier to manage and maintain.
  • External JavaScript files can be edited separately from the HTML content, which makes it easier to modify and update the code.
  • It can be cached by the browser, which can improve the performance of the website.
  • The browser can reuse the cached JavaScript file for subsequent visits to the website, resulting in faster page load times.

Example of including an external JavaScript file​

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
    <script src="my-script.js"></script>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>Welcome to my website.</p>
  </body>
</html>

Example Explanation:

  • We've included an external JavaScript file called my-script.js in the <head> section of the HTML document using the <script> tag with the src attribute.
  • When the browser encounters this tag, it will load the contents of my-script.js and execute the code in the file.