Understanding basic JavaScript code

0 0 2 minutes read

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.