HTML JavaScript

❮ Prev Next ❯

HTML JavaScript refers to the integration of JavaScript code into an HTML document. JavaScript is a programming language that enables dynamic interactions on web pages, allowing developers to create interactive and engaging content.

Using the <script>tag, JavaScript code can be added directly into an HTML document. And it can be placed in the <head> section, the <body> section, or at the end of the HTML document. Here is an example:

You can include it inline, using an opening tag, the JavaScript code and then the closing tag: 

<script>
  ...some JS
</script>

Or you can load an external JavaScript file by using the src attribute: 

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

There is something pretty important to know about this tag.

Sometimes this tag is used at the bottom of the page, just before the closing </body> tag. Why? For performance reasons.

Loading scripts by default blocks the rendering of the page until the script is parsed and loaded.

By putting it at the bottom of the page, the script is loaded and executed after the whole page is already parsed and loaded, giving a better experience to the user over keeping it in the headtag.

My opinion is that this is now bad practice. Let script live in the headtag.

In modern JavaScript we have an alternative this is more performant than keeping the script at the bottom of the page -- the deferattribute. This is an example that loads a file.js file, relative to the current URL: 

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

This is the scenario that triggers the faster path to a fast-loading page, and fast-loading JavaScript.

Placing script tag inside head 

<!DOCTYPE HTML>
  <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
    <script>
    alert("This page will not load untill you press ok")
    </script>
    </head>
    <body>
      <h1>Script at head</h1>
      <p>This content will not show first because of the script at the head</p>
    </body>
</html>

In this example, the<script>tag is placed in the <head> section of the document. Any JavaScript code placed within the <script>tags will be executed when the page loads.

Placing script tag outside head 

<!DOCTYPE HTML>
  <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
    </head>
    <body>
      <h1>Script at head</h1>
      <p>This content will show first because of the script at the button</p>
      <script>
      alert("This page will show after the page content display")
      </script>
    </body>
</html>

In this example, the<script>tag is placed outside the <body>section of the document. Any JavaScript code placed within the <script>tags will be executed after the page loads.

Working with external javascript file

JavaScript can also be linked to an HTML document using an external file. This is done by creating a separate JavaScript file with the .js extension and then linking it to the HTML document using the <script>tag.

Example 

<!DOCTYPE HTML>
  <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
    </head>
    <body>
    <h1>working with external Script</h1>
    <p>The content will be modify using external JavaScript </p>
    <script src="script.js"></script>
    </body>
</html>

In this example, the JavaScript code is stored in an external file named "script.js".The <script> tag references the file using the "src" attribute, and the JavaScript code within the file will be executed when the page loads.

Basic example of adding a button that displays an alert when clicked:

Example 

<!DOCTYPE HTML>
  <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
    </head>
    <body>
    <h1>working with button</h1>
    <button onClick="alert('Hello World!')">Click Me</button>
    </body>
</html>

Example of changing the text of an HTML element using JavaScript:

Example 

<!DOCTYPE HTML>
  <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
    </head>
    <body>
    <h1>working with button</h1>
    <p id="myText">Original Text</p>
    <button onClick="changeText()">Change Text</button>
    <script>
      // JavaScript code goes here
      function changeText() {
       document.getElementById("myText").innerHTML = "New Text!";
      }
    </script>
  </body>
</html>

JavaScript can be used to manipulate HTML elements, create dynamic animations, validate user input, and perform many other functions on a web page. It is a powerful tool for web developers looking to create dynamic and engaging content for their users. Lets us see how to work with File Path in the next chapter.

❮ Prev Next ❯