HTML
Menu Log in
JavaScript Where To
‹ Previous Next ›
The <script> Tag
In HTML, JavaScript code is inserted between
<script> and </script> tags.
Example
<script>
[Link]("demo").innerHT
ML = "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.
Scripts can be placed in the <body> , or in the
<head> section of an HTML page, or in both.
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() {
[Link]("demo").inner
HTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph</p>
<button type="button"
it</button>
</body>
</html>
Try it Yourself »
ADVERTISEMENT
Learn how to get Gig WiFi.
Introducing
More speed.
devices
than
Or get started with
WiFi
connected
gig Internet.
that
50 Mbps for Plus, ask about
breaks
at [Link] 3 Gbps speed
$ barrier. that's 3x faster
gig
Gig
20 WiFi. a mo./ than AT&T.
12 mos.
w/ 1-yr agmt., paperless
billing, and auto pay
w/ stored bank account Get It Now
Equipment, taxes, and other charges extra, and
subject to change. See disclaimer for details.
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>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="demo">A Paragraph</p>
<button type="button"
it</button>
<script>
function myFunction() {
[Link]("demo").innerHT
ML = "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: [Link]
function myFunction() {
[Link]("demo").innerHT
ML = "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:
Example
<script src="[Link]"></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="[Link]"></script>
<script src="[Link]"></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
[Link]:
Example
<script
src="[Link]
[Link]"></script>
Try it Yourself »
This example uses a file path to link to
[Link]:
Example
<script src="/js/[Link]"></script>
Try it Yourself »
This example uses no path to link to [Link]:
Example
<script src="[Link]"></script>
Try it Yourself »
You can read more about file paths in the chapter
HTML File Paths.
‹ Previous Next ›
NEW
We just launched
W3Schools videos
Explore now
COLOR PICKER
Get certified
by completing
a course today!
school
w3 s
1
CE
02
TI 2
R
FI
ED .
Get started
CODE GAME
Play Game
Report Error
Forum
About
Shop
Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
[Link] Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial
Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
[Link] Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
Top Examples
HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
[Link] Examples
Bootstrap Examples
PHP Examples
Java Examples
XML Examples
jQuery Examples
Web Courses
HTML Course
CSS Course
JavaScript Course
Front End Course
SQL Course
Python Course
PHP Course
jQuery Course
Java Course
C++ Course
C# Course
XML Course
Get Certified »
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-2021 by Refsnes Data. All Rights
Reserved.
W3Schools is Powered by [Link].
