JavaScript™ Within XHTML™
JavaScript™ Within XHTML™
If you are using JavaScript™ commands, they go in a <script> tag or inside another tag. For example, we can use
<input type=”button” onclick=”alert(‘You clicked me!’)” />
However, you cannot put an HTML tag inside a <script>…</script> pair!
Terminology
A browser hosts a JavaScript™ interpreter, or has a JavaScript™ interpreter embedded in it.
An HTML page has JavaScript™ code or scripts embedded in it.
object: a self contained component having data and functions (called methods)
method: a function associated with an object. JavaScript™ has functions and methods.
this: the current object.
instantiation: creation of a specific object (new).
constructor: a special method to create an object.
The Unchained Tour offers the best Java training in Chennai, and if you’re from Chennai make sure to check them out for your Java requirements
Starting To Find Problems
No two browsers contain the same JavaScript interpreter. Therefore, no two browsers will count the same things as mistakes nor will they report mistakes in code the same way. In IE, you will either get a pop-up window if you have configured it that way, or just a little yellow triangle briefly shown on the left end of the status bar.
In FireFox (Mozilla) you need to open the error console by going to Tools | Error Console on the menu bar. You can leave that console open and just clear it every so often.
Depending on the nature of the error, one will give a better description than the other. You can also use an editor I found recently called “Northgate Coda.” Coda is very good for being free. However, I seem to have found a couple of bugs; but after that, it is quite helpful, giving real time feedback if there are any problems.
Specifying a JavaScript™ version:
Before XHTML1.1, we could identify a specific version of JavaScript, like this
<script language=”JavaScript”>
<script language=”JavaScript1.1">
<script language=”JavaScript1.2">
The intention was that a 1.1 interpreter wouldn’t try to execute the script that had been labeled “JavaScript1.2.” It does NOT mean that a 1.2 interpreter will limit it’s command set. Recall the technique for dealing with older browsers. However, this was never really very helpful since the question was always, “Okay, if the browser can’t handle version 1.2, why don’t we just use 1.1 for everyone?”
A Basic Script Template — A Review
<?xml version=”1.0" charset=”iso-8859–1"?>
<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml1">
<head>
<title> …</title>
<script type=”text/javascript” charset=”ISO-8859–15">
//JavaScript™ code here. (This line is not absolutely necessary.)
var nameVar = “Jane Doe”;
var browserName=navigator.appName;
document.write(‘My name is ‘+ nameVar + ‘ and you are using ‘ + browserName + ‘.<br />’);
var xyz = document.formName.entry.value
</script>
</head>
<body>
</body>
</html>
Note: Not all Internet servers can handle XML at this time. In that case, simply omit the first line.
Where to Place the Script
The script portion(s) of your HTML document can be placed between the <head>…</head> tags, between the <body>…</body> tags, or both.
The script will run when loaded, no matter where it is placed, unless it is part of a function. If it is a function, it will look like the following and run when it is called.
<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml1">
<head>
<title> …</title>
<script type=”text/javascript” charset=”ISO-8859–15">
function getIt() {
// Function commands will go here
}
</script>
</head>
Having said that, it is still a good idea to organize your HTML file logically. This will make debugging and adding or changing sections much easier.
If you want the script to run while the page is loading, place it inside the <body>…</body> tags. Reserve the area inside the <head>…</head> tags for functions and variable declarations. Occasionally a script needs to be run after the ENTIRE file has loaded. We will address this later.
Note that JavaScript™ is case sensitive! (Try parseint().)
(Use the javascript: typein to experiment!)
Comment Lines
In HTML, comments start with <!
However, they actually can be different!
<! > is not the same as
<!- — — ->
For this class, you will need to use the form <!- — — ->. It is the form used in XHTML1.1. Just remember, if your browser chokes at your JavaScript™ code, don’t overlook the HTML comment tags! There should be no spaces between the dashes.
In JavaScript, comments start with either // which will comment out everything to the end of the line or start with /* and end with*/ which can span any number of lines.
