Open In App

Understanding basic JavaScript code

Improve
Improve
Like Article
Like
Save
Share
Report

Inserting JavaScript into a webpage is much like inserting any other HTML content. The tags used to add JavaScript in HTML are <script> and </script>. The code surrounded by the <script> and </script> tags is called a script blog. <script> tags can be put between the <head> and </head> tags or between <body> and </body> tags. type attribute was the most important attribute of <script> tag. However, it is no longer used. The browser understands that <script> tag has JavaScript code inside it.

Syntax:

<script type="text/javascript">
  ...
</script>

How to write, save and run codes:

Method 1:

  •  Use any note editor like Notepad, or Notepad++ to write the code. 
  •  Save the page with the .html extension and load it in the web browser. 

Method 2: 

  •  Create a .js file, and write your JS code in this file using your favourite editor. 
  •  Add <script src=”relative_path_to_file/file_name.js”></script> at the end of <body> tag inside the HTML file.

Example: Code for Painting the page light blue.

html




<!DOCTYPE html>
<html>
  
<head>
    <title></title>
</head>
  
<body bgcolor="white">
    <p>Paragraph 1</p>
    <script type="text/javascript">
        document.bgColor ="lightblue";
    </script>
</body>
<html>


Output: The colour of the web page is light blue, but the opening body tag is defined to set the background colour to be white.

 

Above code explanation:

  • Here the bgcolor set the background colour of the web page as white.

    <body bgcolor="white"> 
  • The background colour of the page is light blue because JavaScript is used to set the document’s background colour to be light blue.

    document.bgcolor="lightblue";

Example: Code to write something to a web page using JavaScript, let’s write “Hello World!” to a blank page using JavaScript.

html




<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
                      http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
  
<head>
    <title></title>
</head>
  
<body>
    <p id="ResultsP"></p>
    <script type="text/javascript">
             // Script Block 1
              document.getElementById('ResultsP').innerHTML ='Hello World!';
    </script>
</body>
<html>


Output:

Above code explanation:

  • The following line has been added to this code.

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” 
        “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>

    This lets the web browser know that user is using XHTML. It doesn’t actually make any difference to the code; it would work just fine without the extra lines.

  • Notice that <p> tag has been given an id using the id attribute.

    <p id="ResultsP">

    This id must be unique in the web page because it is used by the JavaScript to identify the specific HTML element in the following line:

  • The code simply means “Get me the document element with id ResultsP and set the HTML inside that element to Hello World!” .

    document.getElementById(‘ResultsP’).innerHTML = ‘Hello World!’;

Things you should remember:

  1. A page is known as a document for the purpose of scripting in a web page. 
  2. Properties of the document can be referenced by writing a document followed by a dot, followed by the property name. The document has lots of properties. 
  3. After the <script> tag browser starts to interpret the text as JavaScript until the </script> comes.  


Last Updated : 08 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads