As we Know that Java Script is nothing, when we do not add or connect this with a HTML or Web Document.
Java Script Provide Two ways to add a Java Script on the Web Document.
- Inline or Inside the Web Page / Web Document
- External or Outside the Web Page / Web Document
Inline or Inside the Web Page / Web Document
The JavaScript code can also be embedded in
<script> tag as shown below.
Example: <script> tag
<script>
//write JavaScript here..
</script>
Example: <script> tag
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>JavaScript Demo</title>
<script>
document.writeln ("This is contained in an external JavaScript file")
</script>
</head>
<body>
</body>
</html>
Copy this Code and save as a.html and you got the output like "This is contained in an external JavaScript file" Try this....
Html 4.x requires type attribute in script tag. The type attribute is used to identify the language of script code embedded within script tag. This is specified as MIME type e.g. text/javascript, text/ecmascript, text/vbscript etc. So, for the JavaScript code, specify type="text/javascript" in the script tag in html 4.x page.
Example: Script tag in HTML 4.x:
<script type="text/javascript">
//write JavaScript here..
</script>
Html 5 page does not require type attribute in the <script> tag, because in HTML 5 the default script language is JavaScript.
External or Outside the Web Page / Web Document
If you don't want to write JavaScript between script tag in a web page then you can also write JavaScript code in a separate file with .js extension and include it in a web page using <script> tag and reference the file via src attribute.
<script src="/a2pstudy.js"></script>
The script tag can appear any number of times in the <head> or <body> tag.
Script Tag into <head> Tag
You can include script tag into head tag as shown below.
Example: Script tag into <head> tag
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>JavaScript Demo</title>
<script>
//write JavaScript code here.
</script>
<script src="/a2pstudy.js"></<script> @* External JavaScript file *@
</head>
<body>
<h1> JavaScript Tutorials</h1>
<p>This is JavaScript sample.</p>
</body>
</html>
The browser loads all the scripts in head tag before loading and rendering body html. It is recommended to include scripts before ending body tag if scripts are not required while window is loading.
Script at the end of <body>
Scripts can also be added at the end of body tag. This way you can be sure that all the web page resources are loaded and it is safe to interact with DOM.
Example: Script at the end of <body> tag:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>JavaScript Demo</title>
</head>
<body>
<h1> JavaScript Tutorials</h1>
<p>This is JavaScript sample.</p>
<!--Some HTML here.. -->
<script>
//write JavaScript code here..
</script>
<script src="/a2pstudy.js"></<script> @* External JavaScript file *@
</body>
</html>
Thus, you can write JavaScript in script tag at appropriate places in a web page.
Points to Remember :- JavaScript code must be written within <script> tag.
- External JavaScript file (.js) can be referenced using
<script src="/a2pstudy.js"></script>where src attribute is used to specify the full path of .js file. - Html5 standard does not required type="text/javascript" attribute, whereas prior html standards requires type attribute.
- The <script> tag can be added into <head> or <body> tag.
- The script included into <head> tag may not be able to access DOM elements because <head> loads before <body>. Write script before ending of </body> tag if script code needs to access DOM elements.
