how to insert javascript in html

JavaScript Where To Place

JavaScript can be implemented in a web page using JavaScript statements placed within the <script> .... </script> HTML tag.

The <script> Tag

The <script> tag alerts the browser program to begin interpreting all text between these tags as scripts. The script tag states that we are using JavaScript. JavaScript code is inserted between the <script> and </script> tags in HTML.

<script> Tag Syntax / JavaScript Syntax

A simple syntax of JavaScript will appear as follows.

<script language = "javascript" type = "text/javascript">
JavaScript code

Text / JavaScript is the type of content that provides information about data to the browser .

Older JavaScript examples may use a type attribute: <script type = "text / javascript">. Html does not require a type attribute in a script tag. JavaScript is the default scripting language in HTML.

The script tag takes two important attributes − 

Language - This attribute specifies which scripting language you are using. Typically, its value will be JavaScript. However, recent versions of HTML (and XHTML, its successor) phased out the use of this feature.

Type - This attribute is now recommended to indicate the scripting language in use and its value should be set to "text / javascript".

JavaScript Demo

Places to put JavaScript code in Html Document

JavaScript provides 3 locations for inserting or writing JavaScript code: within the body tag, within the head tag, and within the external JavaScript file.

  • JavaScript in <head> / within head tag
  • JavaScript in <body> / within body tag
  • External JavaScript / JavaScript File

JavaScript in <head>

<script language = "javascript" type = "text/javascript">
JavaScript code

JavaScript in <body>

<script language = "javascript" type = "text/javascript">
JavaScript code

Placing the script under the <body> element improves performance speed, as script interpretation slows down the speed of performance.

External JavaScript

We can create an external JavaScript file and embed it in many html documents. This code provides reusability because a single JavaScript file can be used in many HTML pages. This helps in reusability of the code in more than one HTML file.

For example, there is a code that is saved in the file "w3_javascript.js".

function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; }

External scripts are practical when the same code is used in many different web pages. JavaScript files have a file extension of (.js).

External scripts do not contain script tags.

To use external JavaScript in an HTML page, name the script file in the source (source) attribute of the <script> tag

<script src="w3 javascript.js"></script>

We can place an external script reference in <head> or <body> as per your choice. The script will behave as if it were located exactly where the <script> tag is located .