Syntax for JavaScript:
JS code is placed within <script> tags i.e. in between <script> and </script> of the HTML document.
There are 2 ways to include JS code in the HTML file-
i. Internal
In this, JS code is written within <script> tags. The <script> tag is used either in the header section or inside the <body> tag of the HTML file.
Note- <script> is interpreted in the order they appears in the HTML document.
On using <script> tag under header section may cause error sometimes. So, it is preferred to use the <script> tag at the bottom inside the body tag to get an error-free output.
Now, there are 4 different ways to print the output on the screen:-
a. alert()- It is a method in JS used to display alert box with a message specified by user.
Syntax:
alert (message);
Let's understand with the help of an example.
//js program to demonstrate the use of alert()
Explanation: In this example, alert() is used in the <script> tag. To run the program, copy the file path and paste over the browser's search bar to get the output which appears as a pop-up box.
b. console.log()- It is a method used to write messages on the console. It is also used for testing/debugging i.e. it helps us to find errors and correct them.
Syntax:
console.log(message)
Example
//js program to demonstrate the use of console.log()
OUTPUT:
Explanation: The output appears in the console. To go to console, open the browser, right click on browser and select inspect. Hence, console window appears.
c. document.write()- This method is used to write anything in a document. It enables us to manipulate HTML document.
Syntax:
document.write(expression1, expression2, ...);
Example
//js program to demonstrate document.write()
OUTPUT:
Explanation: It is a simple program where the text is displayed on the browser. You can modify the HTML content and overwrite it by the help of document.write(). You can do this by the help of functions which will be studying in later tutorial.
document.getElementById.innerHTML- This method is widely used on your document. It can access the inner text of an HTML tag by using id attribute's value. An id is given to an HTML element. It returns the HTML element with specified id.
Syntax:
document.getElementById(id_name).innerHTML=message;
Example
//js program to demonstrate getElementById()
OUTPUT:
Here, an id attribute is added to the HTML element which we want to get returned. Using specified id name, the element is manipulated.
Note: Id is unique for each document. If same id name is specified in a document, then the first element with the id is returned.
i. Internal External JavaScript
In this, a separate file of JS is created and embedded to the HTML file. The external file does not contain the <script> tag. It contains only JavaScript codes.
Let's understand with the help of an example.
Below is the JS file
Now, save the above file with extension .js.
Below is the HTML file.
Add an attribute 'src' in the <script> tag. 'src' is to link the JS file to the HTML. Its value is the name of the js file which is to be linked. In this case, JS file should be saved in the same folder as the HTML. If JS file is saved at different folder, then the JS file path name is given to 'src' attribute.
OUTPUT:
Advantages of using external JS
• Easy maintenance of codes.
• Easy debugging.
• Allows code reusability.
Hence, you can use any of the ways to get the output on your screen as per your convenience.
In this way, JavaScript can be used to manipulate HTML document and is responsible for an interactive web page. We'll make use of the 4 methods for our interactive and dynamic web page designing.
0 Comments