How to use the

In this tutorial, we will learn how to use the <script> tag to define client-side JavaScript.

The HTML <script> tag is used for declaring a script within your HTML document. Through this, you can define client-side JavaScript. Users can write the client-side JavaScript code directly in the script tag, or the script tag can be pointed to an external JavaScript file using the ‘src’ attribute.

The client-side JavaScript can be written in multiple parts of the HTML file, such as inside the body tag, head tag, or inline of an element tag. Still, writing any JavaScript code in between the script tag inside the body tag only is recommended.

Syntax

<html>
<head>
</head>
<body>
   ...
   <!-- Script tag goes here -->
   <script>
      // JavaScript code
   </script>
</body>
</html>

The above syntax shows the recommended place to use the script tag to write JavaScript code.

Attributes

Attribute	Value	Description
async	async	It specifies that the script is executed asynchronously.
defer	defer	It specifies that the script will generate no content. As a result, the browser/user agent can proceed with parsing and rendering the rest of the page.
charset	charset	It specifies the character encoding used by the script.
src	URL	It specifies the URI/URL of an external script.
type	application/ecmascript text/JavaScript text/vbscript application/JavaScript	It specifies the scripting language as a content type or MIME type.
crossorigin	anonymous use-credentials	It specifies the mode of the request to an HTTP CORS Request.
integrity	filehash	It allows a browser to validate the fetched script, ensuring that the code is never loaded if the source has been manipulated.

Example 1

In the below example, we have used the script tag to define client-side JavaScript. We have used the script tag inside of the body tag. The JavaScript code here will change a text of an element with a button click. The button “Change text” is associated with a click event that executes the “changeText()” function. This function changed the element’s content using the document.getElementById() method.


<html>
<body>
   <h2>Using the <i>script tag</i> to to define client-side JavaScript</h2>
   <button onclick = "changeText()"> Change text </button>
   <div
      id = "root"
      style = "padding: 10px; background-color: bisque; border: 1px solid black">
      This element's text will change after the button click!
   </div>
   <!-- script tag -->
   <script>
      function changeText() {
         const root = document.getElementById('root')
         root.innerHTML = 'Welcome to Tutorialspoint!'
      }
   </script>
</body>
</html>

Example 2

In the below example, we have used the script tag to define client-side JavaScript to update the style of an element. We have placed the script tag inside at the end of the body tag. The script tag contains the JavaScript code to change the background color of an element using a button click. Two buttons, ‘Blue’ and ‘Green’, are associated with click events that execute their respective functions to change the background color to blue and green, respectively. The document.getElementById() method is used to change the background color.


<html>
<body>
   <h2>Using the <i>script tag</i> to define client-side JavaScript</h2>
   <button onclick = "bgBlue()" >Blue</button>
   <button onclick = "bgGreen()" >Green</button>
   <div
      id = "root"
      style = "padding: 10px; margin: 5px 0px; background-color: blue; border: 1px solid black; color: white;">
      This element's background color will change by button click!
   </div>
   <!-- script tag -->
   <script>

      // element
      const root = document.getElementById('root')
      function bgBlue() {
         root.style.backgroundColor = 'blue'
      }
      function bgGreen() {
         root.style.backgroundColor = 'green'
      }
   </script>
</body>
</html>

This tutorial taught us to use the <script> tag to define client-side JavaScript. We have discussed the syntax and attributes of the script tag. In the first example, we use the script tag and write the JavaScript code in between it to change an element’s content. In the second example, we use the script tag to change the background color of an element. Users can write any JavaScript code in between the script tag. It is recommended to go through the examples to understand the topic better.

Shubham Vora

Updated on: 31-Oct-2022

188 Views

Kickstart Your Career

Get certified by completing the course

Get Started