JavaScript is the premier client-side scripting language used today on the Web. It’s widely used in tasks ranging from the validation of form data to the creation of complex user interfaces.JavaScript can be used to manipulate the very markup in the documents in which it is contained.
Our first look at JavaScript is the ever-popular “Hello World” example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>JavaScript Hello World</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<h1 align="center">First JavaScript</h1>
<hr />
<script type="text/javascript">
document.write("Hello World from JavaScript!");
</script>
</body>
</html>
Notice how the script is included directly in the markup using the <script> element that encloses the simple one-line script:
document.write("Hello World from JavaScript!");
If we wanted to bold the text we could modify the script to output not only some text but also some markup. However, we need to be careful when the world of JavaScript and the world of markup in XHTML, or HTML, intersect—they are two different technologies. For example, consider if we substituted the following <script> block in the preceding document, hoping that it would emphasize the text.
<script type="text/javascript">
<strong>
document.write("Hello World from JavaScript!");
</strong>
</script>
Doing so should throw an error in our browser window. The reason is that <strong> tags are markup, not JavaScript. Because the browser treats everything enclosed in <script> tags as JavaScript, it naturally throws an error when it encounters something that is out of place.
To output the string properly we could either include the <strong> element directly within the output string, like so,
document.write("<strong>Hello World</strong> from
<font color='red'>JavaScript</font>!");
or we could surround the output of the <script> element in a <strong> element like this:
<strong>
<script type="text/javascript">
document.write("Hello World from JavaScript!");
</script>
</strong>
Adding JavaScript to XHTML Documents
As suggested by the previous example, the <script> element is commonly used to add script to a document. However, there are four standard ways to include script in an (X)HTML document:
--Within the <script> element
--As a linked file via the src attribute of the <script> element
--Within an XHTML event handler attribute such as onclick
--Via the pseudo-URL javascript: syntax referenced by a link
The <script> Element
The primary method to include JavaScript within HTML or XHTML is the <script> element. A script-aware browser assumes that all text within the <script> tag is to be interpreted as some form of scripting language; by default this is generally JavaScript.
Traditionally, the way to indicate the scripting language in use is to specify the language attribute for the tag. For example,
<script language="JavaScript">
----
----
</script>
is used to indicate the enclosed content is to be interpreted as JavaScript. Other values are possible; for example,
<script language="VBS">
-----
-----
</script>
would be used to indicate VBScript is in use. A browser should ignore the contents of the <script> element when it does not understand the value of its language attribute.
Using the <script> Element
You can use as many <script> elements as you like. Documents will be read and possibly executed as they are encountered, unless the execution of the script is deferred for later. The next example shows the use of three simple printing scripts that run one after another.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>JavaScript and the Script Tag</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<h1>Ready start</h1>
<script type="text/javascript">
alert("First Script Ran");
</script>
<h2>Running...</h2>
<script type="text/javascript">
alert("Second Script Ran");
</script>
<h2>Keep running</h2>
<script type="text/javascript">
alert("Third Script Ran");
</script>
<h1>Stop!</h1>
</body>
</html>
Script in the <head>
A special location for the <script> element is within the <head> tag of an (X)HTML document. Because of the sequential nature of Web documents, the <head> is always read in first, so scripts located here are often referenced later on by scripts in the <body> of the document. Very often scripts within the <head> of a document are used to define variables or functions that may be used later on in the document.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>JavaScript in the Head</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
function alertTest()
{
alert("Danger! Danger! JavaScript Ahead");
}
</script>
</head>
<body>
<h2 align="center">Script in the Head</h2>
<hr />
<script type="text/javascript">
alertTest();
</script>
</body>
</html>
Script Hiding
Most browsers tend to display the content enclosed by any tags they don’t understand, so it is important to mask code from browsers that do not understand JavaScript. Otherwise, the JavaScript would show up as text in the page for these browsers.One easy way to mask JavaScript is to use HTML comments around the script code.
For example:
<script type="text/javascript">
<!--
put your JavaScript here
//-->
</script>
The <noscript> Element
In the situation that a browser does not support JavaScript or that JavaScript is turned off, you should provide an alternative version or at least a warning message telling the user what happened. The <noscript> element can be used to accomplish this very easily. All JavaScript-aware browsers should ignore the contents of <noscript> unless scripting is off. Browsers that aren’t JavaScript-aware will show the enclosed message
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>noscript Demo</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<script type="text/javascript">
<!--
alert("Your JavaScript is on!");
//-->
</script>
<noscript>
<em>Either your browser does not support JavaScript or it is currently disabled.</em>
</noscript>
</body>
</html>
Event Handlers
To make a page more interactive, you can add JavaScript commands that wait for a user to perform a certain action. Typically, these scripts are executed in response to form actions and mouse movements. To specify these scripts, we set up various event handlers, generally by setting an attribute of an (X)HTML element to reference a script. We refer to these attributes collectively as event handlers—they perform some action in response to a user interface event. All of these attributes start with the word “on,” indicating the event in response to which they’re executed, for example, onclick, ondblclick, and onmouseover.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>JavaScript and HTML Events Example</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<form action="#" method="get">
<input type="button" value="press me"
onclick="alert('Hello from JavaScript!');" />
</form>
</body>
</html>
Uses:
Some of the common uses of JavaScript include:
--Form validation
--Page embellishments and special effects
--Navigation systems
--Basic mathematical calculations
--Dynamic document generation
--Manipulation of structured documents
--JavaScript does have its limits. It does not support robust error-handling features, strong typing, or facilities useful for building large-scale applications
Our first look at JavaScript is the ever-popular “Hello World” example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>JavaScript Hello World</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<h1 align="center">First JavaScript</h1>
<hr />
<script type="text/javascript">
document.write("Hello World from JavaScript!");
</script>
</body>
</html>
Notice how the script is included directly in the markup using the <script> element that encloses the simple one-line script:
document.write("Hello World from JavaScript!");
If we wanted to bold the text we could modify the script to output not only some text but also some markup. However, we need to be careful when the world of JavaScript and the world of markup in XHTML, or HTML, intersect—they are two different technologies. For example, consider if we substituted the following <script> block in the preceding document, hoping that it would emphasize the text.
<script type="text/javascript">
<strong>
document.write("Hello World from JavaScript!");
</strong>
</script>
Doing so should throw an error in our browser window. The reason is that <strong> tags are markup, not JavaScript. Because the browser treats everything enclosed in <script> tags as JavaScript, it naturally throws an error when it encounters something that is out of place.
To output the string properly we could either include the <strong> element directly within the output string, like so,
document.write("<strong>Hello World</strong> from
<font color='red'>JavaScript</font>!");
or we could surround the output of the <script> element in a <strong> element like this:
<strong>
<script type="text/javascript">
document.write("Hello World from JavaScript!");
</script>
</strong>
Adding JavaScript to XHTML Documents
As suggested by the previous example, the <script> element is commonly used to add script to a document. However, there are four standard ways to include script in an (X)HTML document:
--Within the <script> element
--As a linked file via the src attribute of the <script> element
--Within an XHTML event handler attribute such as onclick
--Via the pseudo-URL javascript: syntax referenced by a link
The <script> Element
The primary method to include JavaScript within HTML or XHTML is the <script> element. A script-aware browser assumes that all text within the <script> tag is to be interpreted as some form of scripting language; by default this is generally JavaScript.
Traditionally, the way to indicate the scripting language in use is to specify the language attribute for the tag. For example,
<script language="JavaScript">
----
----
</script>
is used to indicate the enclosed content is to be interpreted as JavaScript. Other values are possible; for example,
<script language="VBS">
-----
-----
</script>
would be used to indicate VBScript is in use. A browser should ignore the contents of the <script> element when it does not understand the value of its language attribute.
Using the <script> Element
You can use as many <script> elements as you like. Documents will be read and possibly executed as they are encountered, unless the execution of the script is deferred for later. The next example shows the use of three simple printing scripts that run one after another.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>JavaScript and the Script Tag</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<h1>Ready start</h1>
<script type="text/javascript">
alert("First Script Ran");
</script>
<h2>Running...</h2>
<script type="text/javascript">
alert("Second Script Ran");
</script>
<h2>Keep running</h2>
<script type="text/javascript">
alert("Third Script Ran");
</script>
<h1>Stop!</h1>
</body>
</html>
Script in the <head>
A special location for the <script> element is within the <head> tag of an (X)HTML document. Because of the sequential nature of Web documents, the <head> is always read in first, so scripts located here are often referenced later on by scripts in the <body> of the document. Very often scripts within the <head> of a document are used to define variables or functions that may be used later on in the document.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>JavaScript in the Head</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
function alertTest()
{
alert("Danger! Danger! JavaScript Ahead");
}
</script>
</head>
<body>
<h2 align="center">Script in the Head</h2>
<hr />
<script type="text/javascript">
alertTest();
</script>
</body>
</html>
Script Hiding
Most browsers tend to display the content enclosed by any tags they don’t understand, so it is important to mask code from browsers that do not understand JavaScript. Otherwise, the JavaScript would show up as text in the page for these browsers.One easy way to mask JavaScript is to use HTML comments around the script code.
For example:
<script type="text/javascript">
<!--
put your JavaScript here
//-->
</script>
The <noscript> Element
In the situation that a browser does not support JavaScript or that JavaScript is turned off, you should provide an alternative version or at least a warning message telling the user what happened. The <noscript> element can be used to accomplish this very easily. All JavaScript-aware browsers should ignore the contents of <noscript> unless scripting is off. Browsers that aren’t JavaScript-aware will show the enclosed message
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>noscript Demo</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<script type="text/javascript">
<!--
alert("Your JavaScript is on!");
//-->
</script>
<noscript>
<em>Either your browser does not support JavaScript or it is currently disabled.</em>
</noscript>
</body>
</html>
Event Handlers
To make a page more interactive, you can add JavaScript commands that wait for a user to perform a certain action. Typically, these scripts are executed in response to form actions and mouse movements. To specify these scripts, we set up various event handlers, generally by setting an attribute of an (X)HTML element to reference a script. We refer to these attributes collectively as event handlers—they perform some action in response to a user interface event. All of these attributes start with the word “on,” indicating the event in response to which they’re executed, for example, onclick, ondblclick, and onmouseover.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>JavaScript and HTML Events Example</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<form action="#" method="get">
<input type="button" value="press me"
onclick="alert('Hello from JavaScript!');" />
</form>
</body>
</html>
Uses:
Some of the common uses of JavaScript include:
--Form validation
--Page embellishments and special effects
--Navigation systems
--Basic mathematical calculations
--Dynamic document generation
--Manipulation of structured documents
--JavaScript does have its limits. It does not support robust error-handling features, strong typing, or facilities useful for building large-scale applications
No comments:
Post a Comment