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” <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.
