Understanding basic JavaScript code

Last Updated : 08 Dec, 2022

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:

A page is known as a document for the purpose of scripting in a web page.
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.
After the <script> tag browser starts to interpret the text as JavaScript until the </script> comes.

JavaScript Basics

vikas_56666

Improve

Article Tags :

Practice Tags :

Misc

Understanding basic JavaScript code

Similar Reads

Thank You!

What kind of Experience do you want to share?