CIS 89C
Client-Side Programming with JavaScript
Unit 3 - Writing scripts (week 2)
References:
McDuffie - Chapter 2
Writing Scripts with JavaScript
Topics:
Tools - McDuffie page 46
Use an external file
The script tag - McDuffie page 55
Where to put the script - McDuffie page 57
Testing a sample line of JavaScript in the location bar - McDuffie page 63
Hiding Scripts from Old Browsers - McDuffie page 63
Definition of widget - Wikipedia - Widget(computing)
Comment your code - McDuffie page 65
Semicolon - McDuffie page 66
navigator object - McDuffie page 67
***********************************************************
Tools
JavaScript, XHTML, and CSS are all written in text.
So you need a text editor.
The simplest is notepad on windows.
Be careful to use save as to save the file with the correct file extension:
.html for XHTML, .js for JavaScript, .css for Cascading style sheet.
The book makes other suggestions for tools.
You need a good browser.
We will use the current version of Firefox.
Sometimes we will use a different browser, to see the difference.
There are differences between browsers, and between different releases of the same browser.
A major problem for commercial JavaScript developers is these differences between browsers.
We will try to avoid most of these problems in this, a beginning course.
This problem is because JavaScript is interpreted by the browsers,
rather than being a compiled language.
With a compiler, your program needs to compile and work using one compiler.
With JavaScript, it is interpreted by all the different browsers on the user's machines.
Development process is needed to produce good results.
For a course, that means read the problem first.
Decide what approach you are going to use.
Build the XHTML first, before you start on the JavaScript.
Validate the XHTML.
JavaScript can have mysterious errors, if everything is not just right,
so you should write your JavaScript a line or two at a time.
Test after writing a couple of lines.
You do NOT have a compiler to help you;
write very small amounts of code at a time.
Slowly build up your complete script.
We might use the development toolbar in Firefox, to look at some JavaScript activities for debugging.
***********************************************************
Use an external file
Iin unit 1, we discussed that you can put the script mixed in with the HTML, or you can put it in the head container, or you can put it in a separate file.
The best place to put the JavaScript is in a separate file.
Review from unit 1:
sample-1-4-externalFile.js
contains just:
document.write("hello");
It contains the JavaScript code, only.
The JavaScript file has the file extension
of .js
Look at sample 1-4-external-file.
sample-1-4-external-file.html
The result is the same as the previous
example in unit 1, that hade the JavaScript in the same file with the html.
The only difference is that the JavaScript
code is in a different file.
In this example, the JavaScript file is in
the same directory; if it is in a different directory it needs the relative or
absolute path to the file, or its URI.
Note that the script tag is
now a singleton tag.
The script tag has a src attribute, that tells what file has the JavaScript.
Note
about the samples in the book:
Notice that there should be NO language
attribute in the script tag.
The book shows a language attribute, but
that is becoming obsolete,
so you should NOT code a language attribute.
***********************************************************
The script tag
The script tag
should contain the type and src attributes, to refer to a JavaScript page. Do not use the language attribute, it is
becoming obsolete.
<script
type="text/javascript" src="my-script.js" />
type="text/javascript
is always used, to indicate
that we are using Javascript.
The value of
the src attribute is
the location of our JavaScript file.
Note:
I have observed a
bug (or feature).
The use of both:
<script />
and
<script> </script>
in the same file,
seems to sometimes cause problems.
If you have a
problem, use an empty
<script></script> rather than <script />
***********************************************************
Where to put the script
There are several
ways the script
element can be used:
1. script tag in the body
The script tag can
be put anywhere in the body of an html page.
As the page is
loaded, the script executes when that line in the html page is reached.
If the script does
a document.write("some
text");
then some text will be written at that location
in the page.
We just looked at
sample 1-4, which shows this.
2. script in an event attribute
The script event
attribute can be used in an element in the body of an html page.
When the event
happens, the script executes.
For example:
<body
onload="alert("This page was just loaded.");
<button
onclick="alert("You clicked on the button.");
3. script tag in the head
The script tag can
be putin the head of an html page.
When the page is
loaded, the script executes before the body is loaded.
Do NOT use
document.write() in the head.
You cannot write
text in the head.
A script tag is
often used in the head, to specify functions, that can be used later, or to set
up variables, with their initial values.
We will look at a
script tag in the head later.
4. script tag in a pseudo-protocall
In an
href value, you can specify the
http protocol.
For example:
<a
href="http://voyager.deanza.edu/~yourID">
Your index page
</a>
Instead of a protocol, you can specify the javascript: pseudo-protocall.
<a
href="javascript: some-javascript-address-function();">
Your index page
</a>
The JavaScript can
return a URL, which will then be used as the destination of the link.
Other ways to use the script tag
The book lists
another one or two ways to use the script tag.
We will stick to these four. They
are more likely to work. We will start
by using these two:
1. script tag in
the body
2. script tag in an
event attribute
Later we will use:
3. script tag in
the head
We will not see
much of
4. script tag in a pseudo-protocall
Examples for the above
Remember, we saw an example of a script
element in unit 1.
The script element was in the HTML body .
It referred to an external.
Look at sample 1-4-external-file.
sample-1-4-external-file.html
The JavaScript file contains only:
document.write("hello");
Next, let's look at
an example which uses an onclick event.
Look at sample 3-1-external-file.
sample-3-1-onclick.html
The button is:
<button onclick=
"alert('You clicked the
button');">Click here</button>
The JavaScript
alert() method puts up a popup box with the text
You clicked the button
Next, let's look at
a fancy example which uses a script file in the head,
onclick attributes
in the buttons, and a pseudo-protocol in the <a> tag.
This is more stuff
than you will do now.
We can look at it
now, and you can learn it later.
Look at sample 3-2-head-and-onclick.
sample-3-2-head-and-onclick.html
The JavaScript file
contains:
var cat =
"Cleos page";
function showCat() {
return this.cat; }
function
setCat(cat_parm) { this.cat = cat_parm; }
this is used in the
functions to access the global variable cat
setCat() sets the value of cat to the value of the
parameter.
showCat() returns the current value of the cat variable.
The three buttons
use setCat to set the text.
The <a> uses the pseudo-protocol to build a new page with the cat text in the new page.
***********************************************************
Testing a sample line of JavaScript in the location
bar
You can type:
javascript: some JavaScript command
in the location bar.
This is a way to test a command.
It will open a new page with the result.
Sometimes this might be helpful when writing code.
Example:
javascript:
document.write("hello")
will open a new page with the word hello in the body.
***********************************************************
Hiding Scripts from Old Browsers
The book has a section on using HTML comments to hide a script in an HTML file from old browsers that do not recognize the <script> element.
This is an old
technique that may not always work.
Instead, put the
JavaScript in a separate file.
That is what we
will do.
JavaScript in a
separate file causes no problems.
***********************************************************
Definition of widget
Wikipedia - Widget(computing)
Wikipedia, under Widget, includes in its Etymology discussion:
"…any mechanical product without artistic or spiritual value."
Wikipedia, under Widget(computing), includes:
"… an interface element that a computer user interacts
with, such as a window or a text box.”
I mention this to remind me to use the term widget.
I tend to call them controls, which is a Visual Basic term.
***********************************************************
Comment your code
Like all code, you should comment your code.
Put a comment at the top of every file, saying what is.
Put your name an lab number at the top.
In HTML, put the first comment after the <!DOCTYPE> element.
Put a comment before every function, with an eyecatcher.
In JavaScript comments may be in either C style:
/*
This is a long comment.
It may extend over several lines
*/
// This is a short
comment.
// It ends at the
end of the line.
***********************************************************
Semicolon
A JavaScript statement is ended by the end of a line.
A JavaScript statement is ended by a semicolon.
It is nice to have both.
Example:
var x = 5;
var y = 6;
***********************************************************
navigator object
The book has a section on the navigator object in chapter 2.
We will skip that for now.
We will come back to it later, when we need it.