- JavaScript Basics
- JavaScript Home
- JavaScript Syntax
- JavaScript Placements
- JavaScript Output
- JavaScript Statements
- JavaScript Keywords
- JavaScript Comments
- JavaScript Variables
- JavaScript var
- JavaScript let
- JavaScript const
- JavaScript var Vs let Vs const
- JavaScript Operators
- JavaScript Comparison/Logical
- JavaScript Data Types
- JS Conditional Statements
- JavaScript Conditional Statement
- JavaScript if Statement
- JavaScript if-else Statement
- JavaScript switch Statement
- JavaScript Loops
- JavaScript for Loop
- JavaScript while Loop
- JavaScript do-while Loop
- JavaScript Break Continue
- JavaScript Popup Boxes
- JavaScript Dialog Box
- JavaScript alert Box
- JavaScript confirm Box
- JavaScript prompt Box
- JavaScript Functions
- JavaScript Functions
- JS Function with Parameter
- JavaScript Return Statement
- JavaScript Variable Scope
- JavaScript setTimeout() Method
- JavaScript setInterval() Method
- JavaScript Events
- JavaScript Events
- JavaScript onclick Event
- JavaScript onload Event
- JavaScript Mouse Events
- JavaScript onreset Event
- JavaScript onsubmit Event
- JavaScript Objects
- JavaScript Objects
- JavaScript Number Object
- JavaScript Array Object
- JavaScript String Object
- JavaScript Boolean Object
- JavaScript Math Object
- JavaScript RegExp Object
- JavaScript Date Object
- JavaScript Browser Objects
- JavaScript Browser Objects
- JavaScript Window Object
- JavaScript Navigator Object
- JavaScript History Object
- JavaScript Screen Object
- JavaScript Location Object
- JavaScript Document Object
- JS Document Object Collection
- JS Document Object Properties
- JS Document Object Methods
- JS Document Object with Forms
- JavaScript DOM
- JavaScript DOM
- JavaScript DOM Nodes
- JavaScript DOM Levels
- JavaScript DOM Interfaces
- JavaScript Cookies
- JavaScript Cookies
- JavaScript Create/Delete Cookies
- JavaScript Advance
- JavaScript Regular Expression
- JavaScript Page Redirection
- JavaScript Form Validation
- JavaScript Validations
- JavaScript Error Handling
- JavaScript Exception Handling
- JavaScript try-catch throw finally
- JavaScript onerror Event
- JavaScript Multimedia
- JavaScript Animation
- JavaScript Image Map
- JavaScript Debugging
- JavaScript Browser Detection
- JavaScript Security
- JavaScript Misc
- JavaScript innerHTML
- JavaScript getElementById()
- JS getElementsByClassName()
- JS getElementsByName()
- JS getElementsByTagName()
- JavaScript querySelector()
- JavaScript querySelectorAll()
- JavaScript document.write()
- JavaScript console.log()
- JavaScript Programs
- JavaScript Programs
- JavaScript Test
- JavaScript Online Test
- Give Online Test
- All Test List
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 codescracker() { alert("Hello there!"); } </script> </head> <body> <input type="button" onclick="codescracker()" value="Click Me"> </body> </html>
When you will click on the Click Me button, a function named codescracker 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="codescracker()" value="Click Me"> <script> function codescracker() { 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 codescracker() { alert("Hello there!"); }
Save this file with any name ending with .js extension say codescracker.js, inside the same directory (the directory where the .html file is saved). Now, here is the code of codescracker.html file:
<!DOCTYPE html> <html> <head> <script src="codescracker.js"></script> </head> <body> <input type="button" onclick="codescracker()" 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 codescracker.html and codescracker.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/codescracker.js"></script>
Here are the ways, to access and include an external JavaScript file in an HTML document, from different-different directories.
- <script src="codescracker.js"> - Indicates to the file codescracker.js available in the same folder
- <script src="myjs/codescracker.js"> - Indicates to the file codescracker.js available in the myjs folder of current folder
- <script src="/myjs/codescracker.js"> - Indicates to the file codescracker.js available in the myjs folder from the root
- <script src="../codescracker.js"> - Indicates to the file codescracker.js available in the one level up folder from the current folder
« Previous Tutorial Next Tutorial »