How to use JavaScript in HTML page
In this JavaScript tutorial you will learn how to use JavaScript in HTML page, how to write output to a page, different places where JavaScript can be paced in HTML, JavaScript in external file and how to place and execute JavaScript in external file.
How to Insert JavaScript into a HTML page:
You can insert JavaScript into an HTML page by using <script> tag.
JavaScript is placed between tags starting with <script type = text/javascript> and ending with </script>.
General syntax of JavaScript is as follows:
|
How to write output to a page:
The JavaScript command used for writing output to a page is document.write. The document.write command takes the argument as the text required for producing output. The example below shows how to place JavaScript command inside an HTML page :
Example:
|
Output of the above script as produced in a HTML page is shown below:
Observe that semicolons have not been placed to mark the end of statement, which differs from code writing style in programming languages C and C++. In JavaScript, the placement of a semicolon is optional. If a programmer wants to place more than one statement on a single line then the programmer can make use of the semicolon.
Different places where JavaScript can be paced in HTML:
JavaScript can be placed in various locations in HTML such as
- JavaScript in HEAD section
- JavaScript in BODY section
- JavaScript in both HEAD and BODY section
- JavaScript in External File
The placing of JavaScript in the above location differs in the timing of their execution. JavaScript placed in the HEAD section of HTML will be executed when called whereas, JavaScript placed in the BODY section of HTML will be executed only when the page is loaded.
The general structure for placing a JavaScript in the HEAD section is:
|
The general structure for placing a JavaScript in the BODY section is
|
If a programmer wants to execute JavaScript when called, or when an event is triggered, then JavaScript is placed in the HEAD section. JavaScript is placed in the HEAD Section because scripts gets loaded first. When a programmer wants to execute JavaScript when the page loads then JavaScript should be placed in the BODY section. In addition to these, you can also place JavaScripts in both HEAD and BODY sections of an HTML page. Moreover, you can place any number of scripts in an HTML page.
The general structure of JavaScript for placement in both head and body sections is as follows:
|
Output of the above script as produced in a HTML page is shown below:
JavaScript in External File:
There may be scenarios in which the same functionality of script needs to be executed in several places in program. For handling this scenario instead of writing the same JavaScript in several places which would cause poor optimization of code one can place the JavaScript in external file.
How to place the JavaScript in External file:
This process is very simple. The code or the JavaScript which needs to be executed in several places in the program is written separately in a file and is saved with extension as .js for the file.
How to execute this JavaScript placed in External File:
This is done by using the attribute named as src for the <script> tag.
Te general syntax of this is as follows:
|
The script tag is placed as needed in either HEAD section or BODY section as seen in earlier chapter but with the src attribute as follows:
It is important to note that external JavaScript file cannot contain HTML tags.
Suppose if the JavaScript placed in external file is named as exforsys.js then it is executed by placing it as
|
