Tutorials Exercises Services Upgrade Get Certified Sign In
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTST
JavaScript Where To
❮ Previous Next ❯
The <script> Tag
In HTML, JavaScript code is inserted between <script> and </script> tags.
Example
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
Try it Yourself »
Old JavaScript examples may use a type attribute: <script type="text/javascript">.
The type attribute is not required. JavaScript is the default scripting language in HTML.
JavaScript Functions and Events
A JavaScript function is a block of JavaScript code, that can be executed when "called" for.
For example, a function can be called when an event occurs, like when the user clicks a button.
You will learn much more about functions and events in later chapters.
JavaScript in <head> or <body>
You can place any number of scripts in an HTML document.
Tutorials Exercises Services Upgrade Get Certified Sign In
Scripts can be placed in the <body> , or in the <head> section of an HTML page, or in both.
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTST
JavaScript in <head>
In this example, a JavaScript function is placed in the <head> section of an HTML page.
The function is invoked (called) when a button is clicked:
Example
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
Try it Yourself »
JavaScript in <body>
In this example, a JavaScript function is placed in the <body> section of an HTML page.
The function is invoked (called) when a button is clicked:
Example
<!DOCTYPE
<html>
html>
Tutorials Exercises Services Upgrade Get Certified Sign In
<body>
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTST
<h2>Demo JavaScript in Body</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
Try it Yourself »
Placing scripts at the bottom of the <body> element improves the display speed, because script interpretation slows
down the display.
External JavaScript
Scripts can also be placed in external files:
External file: myScript.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 the file extension .js.
To use an external script, put the name of the script file in the src (source) attribute of a <script> tag:
Tutorials
Example
Exercises Services Upgrade Get Certified Sign In
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTST
<script src="myScript.js"></script>
Try it Yourself »
You can place an external script reference in <head> or <body> as you like.
The script will behave as if it was located exactly where the <script> tag is located.
External scripts cannot contain <script> tags.
External JavaScript Advantages
Placing scripts in external files has some advantages:
It separates HTML and code
It makes HTML and JavaScript easier to read and maintain
Cached JavaScript files can speed up page loads
To add several script files to one page - use several script tags:
Example
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
External References
An external script can be referenced in 3 different ways:
With a full URL (a full web address)
With a file path (like /js/)
Without any path
This example uses a full URL to link to myScript.js:
Tutorials
Example Exercises Services Upgrade Get Certified Sign In
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTST
<script src="https://www.w3schools.com/js/myScript.js"></script>
Try it Yourself »
This example uses a file path to link to myScript.js:
Example
<script src="/js/myScript.js"></script>
Try it Yourself »
This example uses no path to link to myScript.js:
Example
<script src="myScript.js"></script>
Try it Yourself »
You can read more about file paths in the chapter HTML File Paths.
?
Exercise
In HTML, JavaScripts must be inserted inside which HTML tags?
<script> and </script>
<javascript> and </javascript>
<head></head>
Tutorials Exercises Services
Submit Answer »
Upgrade Get Certified Sign In
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTST
Video: JavaScript Where to?
❮ Previous Next ❯
Track your progress - it's free! Sign Up Log in
Tutorials Exercises Services Upgrade Get Certified Sign In
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTST
COLOR PICKER
PLUS SPACES GET CERTIFIED
FOR TEACHERS FOR BUSINESS CONTACT US
Top Tutorials Top References
HTML Tutorial HTML Reference
CSS Tutorial CSS Reference
JavaScript Tutorial JavaScript Reference
How To Tutorial SQL Reference
SQL Tutorial Python Reference
Python Tutorial W3.CSS Reference
W3.CSS Tutorial Bootstrap Reference
Bootstrap Tutorial PHP Reference
PHP Tutorial HTML Colors
Java Tutorial Java Reference
C++ Tutorial Angular Reference
jQuery Tutorial jQuery Reference
Top Examples Get Certified
HTML Examples HTML Certificate
CSS Examples CSS Certificate
JavaScript Examples JavaScript Certificate
How To Examples Front End Certificate
Tutorials SQL Examples
Exercises
Python Examples
W3.CSS Examples
Services SQL Certificate
Upgrade
Python Certificate
PHP Certificate
Get Certified Sign In
HTML
CSS Bootstrap Examples
JAVASCRIPT SQL PYTHON JAVA PHP jQuery Certificate
HOW TO W3.CSS C C++ C# BOOTST
PHP Examples Java Certificate
Java Examples C++ Certificate
XML Examples C# Certificate
jQuery Examples XML Certificate
FORUM ABOUT ACADEMY
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
Copyright 1999-2025 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.
