Scripts in HTML must be between tags. Scripts can be placed in and parts of an HTML page, or even anywhere in the HTML. JavaScript doesn’t have any printing or output functions, but JavaScript can output data in different ways

  • Use window.alert() to pop up an alert box
  • Write to an HTML element using innerHTML
  • Write content to an HTML document using the document.write() method
  • Use console.log() to write to the browser’s console

usage

The script tag

If you need to insert JavaScript into an HTML page, the user will tell the JavaScript where to start and end. The line contains JavaScript:

<script>
alert("My first JavaScript");
</script>
Copy the code

The ⚠️ browser interprets and executes JavaScript code in between, where older instances may be found

The embedded JavaScript

You can put an unlimited number of scripts in AN HTML document. Scripts are conventionally located in either a section or a section of the HTML, or in both sections, usually by putting functions in sections or at the bottom of the page. This allows them to be placed in the same place without interfering with the content of the page

JavaScript functions in head

In this example, we place a JavaScript function into the section of the HTML page that is called when the button is clicked:

<! DOCTYPEhtml>
<html>
  
  <head>
    <meta charset="utf-8">
    <title>JavaScript Tutorial</title>
    <script>
      function myFunction() {
        document.getElementById("demo").innerHTML = "My first JavaScript function";
      }
    </script>
  </head>

  <body>
    <h1>My Web page</h1>
    <p id="demo">One paragraph.</p>
    <button type="button" onclick="myFunction()">Click here to</button>
  </body>

</html>
Copy the code

Try it »

The JavaScript function in the body

In this case, we put a JavaScript function into the section of the HTML page. This function is called when the button is clicked:

<! DOCTYPEhtml>
<html>

  <head>
    <meta charset="utf-8">
    <title>JavaScript Tutorial</title>
  </head>

  <body>
    <h1>My first Web page</h1>
    <p id="demo">One paragraph.</p>
    <button type="button" onclick="myFunction()">Click here to</button>
    <script>
      function myFunction() {
        document.getElementById("demo").innerHTML = "My first JavaScript function";
      }
    </script>
  </body>

</html>
Copy the code

Try it » In this case, JavaScript writes text to HTML when the page loads:

<! DOCTYPEhtml>
<html>

  <head>
    <meta charset="utf-8">
    <title>JavaScript Tutorial</title>
  </head>

  <body>
    <p>JavaScript can be written directly to the HTML output stream:</p>

    <script>
      document.write("
 This is a heading 
");
      document.write("
 This is a paragraph. 
");
    </script>

    <p>You can only use it in HTML output streams<strong>document.write</strong>. If you use it after the document has been loaded (in a function, for example), the entire document is overwritten.</p>
  </body>
  
</html>
Copy the code

Try it »

Outreach JavaScript

You can also save your script to an external file, which usually contains code used by multiple web pages. The file extension for an external JavaScript file is.js

<! DOCTYPEhtml>
<html>

  <head>
    <meta charset="utf-8">
    <title>JavaScript Tutorial</title>
  </head>

  <body>
    <h1>My Web page</h1>
    <p id="demo">One paragraph.</p>
    <button type="button" onclick="myFunction()">Click here to</button>
    <p><b>Note:</b>MyFunction is stored in an external file named "myscript.js".</p>
    <script src="myScript.js"></script>
  </body>

</html>
Copy the code

You can place the script in or, in

function myFunction() {
  document.getElementById("demo").innerHTML = "My first JavaScript function";
}
Copy the code

Try it »

The output

Window.alert () displays an alert

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>JavaScript Tutorial</title>
</head>

  <body>
    <h1>My first page</h1>
    <p>My first paragraph</p>
  
    <script>
      window.alert(5 + 6);
    </script>
  </body>

</html>
Copy the code

Try it »

Console.log () writes to the console

If your browser supports debugging, you can use the console.log() method to display JavaScript values in the browser to enable debugging mode using F12 in the browser. In the debug window, click the “console” menu

<! DOCTYPEhtml>
<html>
  <body>
    
    <h1>My first Web page</h1>

    <script>
      a = 5;
      b = 6;
      c = a + b;
      console.log(c);
    </script>

  </body>
</html>
Copy the code

Try it »

Document.write () writes to an HTML document

<! DOCTYPEhtml>
<html>

  <head>
    <meta charset="utf-8">
    <title>JavaScript Tutorial</title>
  </head>

  <body>
    <h1>My first Web page</h1>
    <p>My first paragraph.</p>

    <script>
      document.write(Date());
    </script>
  </body>
  
</html>
Copy the code

⚠️ use document.write() to write only to the document. If you execute Document.write after the document has finished loading, the entire HTML page will be overwritten. Try it »

<! DOCTYPEhtml>
<html>
<body>

<h1>My first Web page</h1>

<p>My first paragraph.</p>

<button onclick="myFunction()">Am I</button>

<script>
function myFunction() {
   	document.write(Date());
}
</script>

</body>
</html>
Copy the code

Try it »

InnerHTML Operates on an HTML element

To access an HTML element from JavaScript, you can use the document.getelementById (ID) method. Use the “ID” attribute to identify the HTML element and innerHTML to retrieve or insert the element’s content:

<! DOCTYPEhtml>
<html>
  <body>
    
    <h1>My first Web page</h1>
    <p id="demo">My first paragraph</p>

    <script>
      setTimeout(() = > {
        document.getElementById("demo").innerHTML = new Date() + "Paragraph amended";
      }, 1000);
    </script>
    
  </body>
</html>

<! -- document.getelementById ("demo") is JavaScript code that uses the ID attribute to find HTML elements. Is JavaScript code that modifies the innerHTML of an element -->
Copy the code

Try it »