What Is JavaScript?
JavaScript is the world's most popular programming language.
JavaScript is programming code that can be inserted into HTML pages.
JavaScript code can be executed by all modern web browsers.
JavaScript is easy to learn.
JavaScript:
Writing Into HTML Output
Example
document.write("<h1>This
is a heading</h1>");
document.write("<p>This is a paragraph</p>");
JavaScript:Reacting to Events
Example
<button type="button" onclick="alert('Welcome!')">Click
Me!</button>
The alert () funtion is not much used in JavaScript, but it is quite handy trying out code.
The onclick event
is only one of the many HTML events you will learn about in this
tutorial.
JavaScript:Changing HTLM Content
Using
JavaScript to manipulate the content of HTLM elements is very common.
Example:
x=document.getElementById("demo")
//Find the element
x.innerHTML="Hello JavaScript"; //Change the content
You will often see document.getElementById("some id"). This is defined in the HTML DOM.
The
DOM (Document Object Model)
is the official W3C standard for accessing HTML elements.
JavaScript: Changing HTML Image
This example
dynamically changes the source (src) attribute of an HTML <image>
element:
JavaScript:Changing HTML Styles
Changing the style of an HTML element, is a variant of changing an HTML attribute.
Example:
x=document.getElementById("demo")
//Find the element
x.style.color="#ff0000";
//Change the style
JavaScript: Validate Input
JavaScript is
commonly used to validate input.
Example:
if isNaN(x)
{alert("Not Numeric")};
JavaScripts
in HTML must be
inserted between <script> and </script> tags.
JavaScripts can be put in the <body> and in the
<head> section of an HTML page.
The <script> Tag
To insert a
JavaScript into an HTML page, use the <script> tag.
The <script> and </script> tells where the JavaScript starts and ends.
The lines
between the <script> and </script> contain the JavaScript:
<script>
alert("My First JavaScript");
</script>
JavaScript
in <body>
In this
example, JavaScript writes into the HTML <body> while the page loads:
Example
<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
</script>
.
.
</html>
JavaScript Functions and Events
The JavaScript
statements, in the example above, are executed while the page loads.
More often, we
want to execute code when an event occurs,
like when the user clicks a button.
If we put
JavaScript code inside a function,
we can call that function when an event occurs.
You
will learn much more about JavaScript functions and events in later
chapters.
JavaScript in
<head> or <body>
You can
place an unlimited number
of
scripts in an HTML document.
Scripts can be in
the <body> or in the <head> section of HTML, and/or in both.
It is a
common practice to put functions in the <head> section, or at the
bottom
of the page. This way they are all in one place and do not interfere
with page content.
A
JavaScript Function in <head>
In this example,
a JavaScript function is placed in the <head> section of an HTML page.
The
function is called when
a
button is clicked:
Example
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First
JavaScript Function";
}
</script>
</head>
<body>
<h1>My
Web Page</h1>
<p id="demo">A Paragraph</p>
<button
type="button" onclick="myFunction()">Try
it</button>
</body>
</html>
A
JavaScript Function in <body>
In this example,
a JavaScript function is placed in the <body> section of an HTML page.
The function is
called when a button is clicked:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My
Web Page</h1>
<p
id="demo">A Paragraph</p>
<button
type="button" onclick="myFunction()">Try
it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First
JavaScript Function";
}
</script>
</body>
</html>
External JavaScripts
Scripts can
also be placed in external files. External files often contain code to
be used by several different web pages.
External
JavaScript files have the file extension .js.
To use an external script, point to the .js file
in the "src" attribute of the <script> tag:
Example
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
You can place the script in the <head> or <body>
as you like. The script will behave as if it was located exactly where
you put the <script> tag in the document.
[email protected]