Java Tutorial Blog

JavaScript Elements Placements

//  by 

Javascript can be written internaly (in the program) or externally. These two are discussed in detail in the following sections.

Internal JavaScript Code

JavaScript code is written inside the html page. The script code can be written in html page either in <head> , <body> or in both <head> and <body< section. The JavaScript code is written within start and end tag of <script> in the html page document.

Syntax for Elements Placement

<head> section

<head>
<script> body content </script>
 </head>

<body> section

<body>
<script> body content  </script>
</body>

Example of Element Placement in <head> Section

<!DOCTYPE html>
<head>

<script type="text/javascript">
document.write("<b>Welcome to Javabeat</b>")
</script>

</head>
<body>

</body>
</html>
  • The above example is used to write the JavaScript code inside the head tag by using the <script> tag.
  • <script type=”text/javascript”> tag is used to specify as content type .It should be set to “text/javascript”. There is no default value for this attribute.
  • document.write(“<b>Welcome to Javabeat</b>”) is used to print the text in the output which is written inside the head tag of the html page.

JavaScript Elements Placements Demo

  • Save the file as head_element_placement.html in your system.
  • Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML specification.

When the execution process is completed successfully we will get the following output:

js_placement1

Example of Element Placement In <body> section

<!DOCTYPE html>
<head>

<!-- No Javascript Code Here-->

</head>

<body>

<script type="text/javascript">

document.write("Hello Javabeat")

</script>

</body>
</html>
  • The above example is used to write the JavaScript code inside the body tag by using the <script> tag.
  • <script type=”text/javascript”> tag is used to specify as content type .It should be set to “text/javascript”. There is no default value for this attribute.
  • document.write(“Hello Javabeat”) is used to print the text in the output which is written inside the body tag.

JavaScript Elements Placements Demo

  • Save the file as body_element_placement.html in your system.
  • Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML specification.

When the execution process is completed successfully we will get the following output:

js_placement2

Example of Element Placement In <head> and <body> section

<!DOCTYPE html>
<head>
<script type="text/javascript">

 document.write("<b>Welcome to Javabeat</b>")
</script>
</head>
<body>
<script type="text/javascript">
document.write("Javabeat is a place for java and related tutorials")
</script>
</body>
</html>
  • The above example is used to write the JavaScript code inside both the head tag and body tag by using the <script> tag.
  • <script type=”text/javascript”> tag is used to specify as content type .It should be set to “text/javascript”. There is no default value for this attribute.
  • document.write(“Welcome to Javabeat”) and document.write(“Hello Javabeat”) is used to print the text in the output which is written inside the both body and head tag.

JavaScript Elements Placements Demo

  • Save the file as headbody_placement.html in your system.
  • Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML specification.

Output

When the execution process is completed successfully we will get the following output:
js_placement3

External JavaScript File

We can also create a separate file of JavaScript . We can specify the external javascript file by giving an source path in the <script> tag in html document. The external JavaScript file has to be saved as .js (Ex: hello.js).

Example of External JavaScript File

Following is the code for the html file which includes the external JS.

<!DOCTYPE html>
<head>
<title>External JavaScript File</title>
</head>
<body>
	<script type="text/javascript" src="hello.js"></script>
</body>
</html>

Following is the code of the external Javascript

alert("Hello World");
  • We have to save the above JavaScript file as hello.js
  • We have created two files i.e. html file and JavaScript file.
  • In html file, we have given an src(source path) of external JavaScript file in script tag.
  • In Second file we have written source code of JavaScript in text file and saved that file by using an extension .js i.e. hello.js
  • We have linked JavaScript file to html file to get an output of what we have written in JavaScript File.

Example Application Test

  • Save the file as external_javascript.html in your system.
  • Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML specification.

Output

When the execution process is completed successfully we will get the following output:
js_placement4