• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

JavaScript Elements Placements

April 17, 2014 //  by Manisha//  Leave a Comment

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

Category: JavaScriptTag: JavaScript Tutorials

Previous Post: «jquery JQuery Callback Function
Next Post: JQuery – How To Find CSS Class In a Element jquery»

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact