- JavaScript Basics
- JS Home
- JS Syntax
- JS Placements
- JS Output
- JS Statements
- JS Keywords
- JS Comments
- JS Variables
- JS var
- JS let
- JS const
- JS var Vs let Vs const
- JS Operators
- JS Arithmetic Operators
- JS Assignment Operators
- JS Comparison Operators
- JS Logical Operators
- JS Bitwise Operators
- JS Ternary Operator
- JS Operator Precedence
- JS Data Types
- JS typeof
- JS Conditional Statements
- JS Conditional Statement
- JS if Statement
- JS if...else Statement
- JS switch Statement
- JS Loops
- JS for Loop
- JS while Loop
- JS do...while Loop
- JS break Statement
- JS continue Statement
- JS break Vs. continue
- JavaScript Popup Boxes
- JS Dialog Box
- JS alert Box
- JS confirm Box
- JS prompt Box
- JavaScript Functions
- JS Functions
- JS setTimeout() Method
- JS setInterval() Method
- JavaScript Events
- JS Events
- JS onclick Event
- JS onload Event
- JS Mouse Events
- JS onreset Event
- JS onsubmit Event
- JavaScript Arrays
- JS Array
- JS Find Length of Array
- JS Add Elements at Beginning
- JS Add Element at End
- JS Remove First Element
- JS Remove Last Element
- JS Get First Index
- JS Get Last Index
- JS Reverse an Array
- JS Sort an Array
- JS Concatenate Arrays
- JS join()
- JS toString()
- JS from()
- JS Check if Value Exists
- JS Check if Array
- JS Slice an Array
- JS splice()
- JS find()
- JS findIndex()
- JS entries()
- JS every()
- JS fill()
- JS filter()
- JS forEach()
- JS map()
- JavaScript Strings
- JS String
- JS Length of String
- JS Convert to Lowercase
- JS Convert to Uppercase
- JS String Concatenation
- JS search()
- JS indexOf()
- JS search() Vs. indexOf()
- JS match()
- JS match() Vs. search()
- JS replace()
- JS toString()
- JS String()
- JS includes()
- JS substr()
- JS Slice String
- JS charAt()
- JS repeat()
- JS split()
- JS charCodeAt()
- JS fromCharCode()
- JS startsWith()
- JS endsWith()
- JS trim()
- JS lastIndexOf()
- JavaScript Objects
- JS Objects
- JS Boolean Object
- JavaScript Math/Number
- JS Math Object
- JS Math.abs()
- JS Math.max()
- JS Math.min()
- JS Math.pow()
- JS Math.sqrt()
- JS Math.cbrt()
- JS Math.round()
- JS Math.ceil()
- JS Math.floor()
- JS Math.trunc
- JS toFixed()
- JS toPrecision()
- JS Math.random()
- JS Math.sign()
- JS Number.isInteger()
- JS NaN
- JS Number()
- JS parseInt()
- JS parseFloat()
- JavaScript Date and Time
- JS Date and Time
- JS Date()
- JS getFullYear()
- JS getMonth()
- JS getDate()
- JS getDay()
- JS getHours()
- JS getMinutes()
- JS getSeconds()
- JS getMilliseconds()
- JS getTime()
- JS getUTCFullYear()
- JS getUTCMonth()
- JS getUTCDate()
- JS getUTCDay()
- JS getUTCHours()
- JS getUTCMinutes()
- JS getUTCSeconds()
- JS getUTCMilliseconds()
- JS toDateString()
- JS toLocaleDateString()
- JS toLocaleTimeString()
- JS toLocaleString()
- JS toUTCString()
- JS getTimezoneOffset()
- JS toISOString()
- JavaScript Browser Objects
- JS Browser Objects
- JS Window Object
- JS Navigator Object
- JS History Object
- JS Screen Object
- JS Location Object
- JavaScript Document Object
- JS Document Object Collection
- JS Document Object Properties
- JS Document Object Methods
- JS Document Object with Forms
- JavaScript DOM
- JS DOM
- JS DOM Nodes
- JS DOM Levels
- JS DOM Interfaces
- JavaScript Cookies
- JS Cookies
- JS Create/Delete Cookies
- JavaScript Regular Expression
- JS Regular Expression
- JS RegEx .
- JS RegEx \w and \W
- JS RegEx \d and \D
- JS RegEx \s and \S
- JS RegEx \b and \B
- JS RegEx \0
- JS RegEx \n
- JS RegEx \xxx
- JS RegEx \xdd
- JS RegEx Quantifiers
- JS RegEx test()
- JS RegEx lastIndex
- JS RegEx source
- JavaScript Advance
- JS Page Redirection
- JS Form Validation
- JS Validations
- JS Error Handling
- JS Exception Handling
- JS try-catch throw finally
- JS onerror Event
- JS Multimedia
- JS Animation
- JS Image Map
- JS Debugging
- JS Browser Detection
- JS Security
- JavaScript Misc
- JS innerHTML
- JS getElementById()
- JS getElementsByClassName()
- JS getElementsByName()
- JS getElementsByTagName()
- JS querySelector()
- JS querySelectorAll()
- JS document.write()
- JS console.log()
- JS instanceof
- JavaScript Programs
- JavaScript Programs
Where to Write JavaScript Code in HTML
List of places in HTML, where we can write our JavaScript code are:
- <HEAD>
- <BODY>
That is, either we can write our JavaScript code anywhere between <HEAD> and </HEAD>, or anywhere between <BODY> and </BODY>.
Note - We can also write our JavaScript code, in both HEAD and BODY section of an HTML document.
Write JavaScript in HEAD Section of an HTML Document
Before writing JavaScript code inside an HTML document, open a <SCRIPT> tag, and after the completion of JavaScript code, close the </SCRIPT> tag.
<!DOCTYPE html> <html> <head> <script> function fresherearth() { alert("Hello there!"); } </script> </head> <body> <input type="button" onclick="fresherearth()" value="Click Me"> </body> </html>
When you will click on the Click Me button, a function named fresherearth will be called, that displays Hello there! as an alert box.
Write JavaScript in BODY Section of an HTML Document
<!DOCTYPE html> <html> <body> <input type="button" onclick="fresherearth()" value="Click Me"> <script> function fresherearth() { alert("Hello there!"); } </script> </body> </html>
Write JavaScript in HEAD and BODY Section of an HTML Document
<!DOCTYPE html> <html> <head> <script> function codes() { alert("Hello there!"); } </script> </head> <body> <script> function cracker() { alert("JavaScript is Fun!"); } </script> <input type="button" onclick="codes()" value="Button 1"><br><br> <input type="button" onclick="cracker()" value="Button 2"> </body> </html>
Note - To include an external JavaScript in an HTML document, use src attribute of SCRIPT tag.
Include External JavaScript File in HTML
We can also write our JavaScript code in an external file, and then include/link that file into an HTML document anywhere in the HEAD or BODY section.
For example, write the following JavaScript code in any text editor say NotePad:
function fresherearth() { alert("Hello there!"); }
Save this file with any name ending with .js extension say fresherearth.js, inside the same directory (the directory where the .html file is saved). Now, here is the code of fresherearth.html file:
<!DOCTYPE html> <html> <head> <script src="fresherearth.js"></script> </head> <body> <input type="button" onclick="fresherearth()" value="Click Me"> </body> </html>
You will get the same output, as the output of the first example available at top of this article.
Here is the snapshot of both files, that is fresherearth.html and fresherearth.js, available in the same folder:
You can also include an external JavaScript file, from other directory or folder. For that, provide the full path, to the src attribute. For example:
<script src="file:///C:/javascript/files/fresherearth.js"></script>
Here are the ways, to access and include an external JavaScript file in an HTML document, from different-different directories.
- <script src="fresherearth.js"> - Indicates to the file fresherearth.js available in the same folder
- <script src="myjs/fresherearth.js"> - Indicates to the file fresherearth.js available in the myjs folder of current folder
- <script src="/myjs/fresherearth.js"> - Indicates to the file fresherearth.js available in the myjs folder from the root
- <script src="../fresherearth.js"> - Indicates to the file fresherearth.js available in the one level up folder from the current folder
« Previous Tutorial Next Tutorial »