GEHC JavaScript
Class 1
Introductions
o Instructor
o Students
The Text
o JavaScript: The Definitive Guide ... 4th Edition
Will use exclusively the first seven weeks
-----------------------------------
JavaScript
----------
JavaScript is primarily a client-side programming language, written on and for
web pages. It was invented by Netscape for Navigator 2. Originally called
LiveScript, but the name was changed to link it to Java, a language invented by
Sun, which JavaScript resembles, but is otherwise unrelated to. ECMAScript,
JScript.
JavaScript is a direct descendent of C and C++, and familiarity with either of
those two languages will be helpful. If you have no experience with C or C++,
exposure to any of their other descendants, like Perl, Java, Python, C#, or
PHP, will be helpful as well. Lacking any experience with those, experience
with any other programming language like VisualBasic, will be helpful to
understanding JavaScript more quickly.
A programming language course or other experience in programming is a
prerequisite for the course. If you are not familiar with any of the following
topics, be sure to read the text carefully. We will go over each of these and
discuss them briefly.
Variables
White Space
Line Endings
Comments
Data Types
Expressions/Operators
Statements
Variables
---------
Variables in JS are stateless - this means that they can hold any kind of data.
Some languages require you to declare that a variable will only hold numbers,
or only strings, or only objects. A JS variable can hold any of these types of
data. This is a mixed blessing:
a = 1; // Holds a number
a = "Hello"; // Same variable now holds a string
but ...
for (temp = 0; temp < 10; temp++) {
...
temp = "Hello.";
}
** JS1-1 illustrates variables
If you don't have one open already, start up a web browser - you can use either
Internet Explorer or Netscape Navigator, though the college prefers we use IE.
Navigate to the course web site, then the syllabus, and scroll down to Week 1.
Click on the JS1-1 link.
Something we will do quite often in this class is view the source of an HTML
page. As you develop your own skills, being able to see how other pages do
things is very useful. If you are not familiar with View Source now, you will
be very soon. A note about Netscape: in versions prior to 6, when you did a
View Source, you saw the result of the page after the JS parser was done. In
other words, the JS code is already gone. In versions 6 and higher, you do
actually see the JS code.
A pause to discuss placement of JS into a web page.
JS can be placed in several different places in a web page. The two main
places are within the head and within the body. We'll discover the reasons to
place JS in the head a little later. For now, we will use the body.
blah blah
... script goes here ...
... script goes here ...
The beginning of the JS code is the opening script tag:
tag.
JS1-1 simply illustrates the best way to create variables. Use the var
keyword, then name the variable to use.
var a;
creates the a variable and sets memory aside for it - is has no value (when
printed with the document.write() method, it prints "undefined").
var b = 0;
creates the variable and gives it a value.
** JS1-2 illustrates statelessness
JS1-2 shows how we can declare a variable and give it any of a number of
different values. The four illustrated here are plain integers, floating
point values, strings, and the built-in Boolean values, true and false.
One other thing to notice in this example is the ability to place HTML code in
JavaScript code, for output to the page itself. This can come in very handy.
The following characters can be used in JS variable names: A-Z, a-z, 0-9, and
underscore. $ may be used but I heartily discourage it. The \uXXXX format
can be used in newer versions to use any Unicode character - stay away from
that for now, too. Oh, yes, the name cannot start with a number.
Case sensitive.
White Space
-----------
White space is ignored, so use it to your advantage. White space includes
tabs, spaces, and newlines (ENTER key). Judicious use of white space can turn
unreadable code into readable code:
var a=0;var b=1;var c=3;document.write(a);document.write(b);document.write(c);
var a=0; // This is, hopefully, much more readable
var b=1;
var c=3;
document.write(a);
document.write(b);
document.write(c);
Comments
--------
Three kinds of comments, and two main types, are supported by JS. Comments are
used to explain your code in plain text - especially important if the code is
not intuitive or if it is otherwise confusing.
// -> line oriented. Everything following the // is ignored until the end of
the line
/* */ -> block oriented. Everything from the /* until the */ is ignored, no
matter how many lines are blocked off
is NOT supported
It is typical to see the following:
Guesses?
** JS1-3 shows a variety of comment styles, and also combines code in the
head and body
Data Types
----------
Numeric data comes in just one flavor: floating point.
1.5
3.124
1 (is a floating point of 1.0)
JS has no strictly integer data type as do other languages. If you're used to
3/2 being 1, it won't be in JS - it will be 1.5.
String data is defined in two ways.
"Double quoted strings"
'single quoted strings'
In JS, "" and '' are interchangeable, but it would be best if you use the ""
form unless you have to use the '' form, because the "" form is the one we will
use most often in Perl.
Booleans indicate trueness or falseness
true
false
Expressions and operators
-------------------------
An expression is a JavaScript "phrase." Every expression has a value.
1 + 2 Expression using the addition operator, has a value of 3.
a = 1 + 2; Same expression, but the result is saved in variable a
a=5; // has a value of 5
a=0; // has a value of 0
a = 1 + 3; // has a value of 4
1; // has a value of 1
Operators come in one main type: numeric
+ = addition
- = subtraction
* = multiplication
/ = division
% = modulus (little used)
The + can also be used with strings to "add" two strings together
(concatenation):
a = "Hello " + "world";
Other operators are used to test values with, for example, the if statement.
== - tests for equality
!= - tests for inequality
< - less than
<= - less than or equal to
> - greater than
>= - greater than or equal to
alert() = used to output a string or number in a box
if (a == 0) { // block starts with a {
alert("a is 0"); // string is placed inside the (), ends with a ;
} // block ends with a }
if (a == 0) {
alert("a is 0");
}
else if (a < 5) {
alert("a is less than 5");
}
else if (a >=5) {
alert("a is 5 or more");
else {
alert("a is less than 0");
}
This code should work:
** JS1-4 shows this code and shows that just because you think it should
work doesn't mean it will
Why not? Time to debug - see:
** JS1-5 shows that by adding judiciously placed alerts, you can debug your
code to find out what's not working. In this case, we thought we'd
covered all of our bases, but we forgot about "undefined".
** JS1-6 uses a for loop, one of JS's looping abilities, to create a list
for (i=0; i<10; i++) {
document.write("
Point " + i);
}
i=0 : initialization set i to 0
i<10 : test is i less than 10?
i++ : change bump up i by one
One other thing illustrated by JS1-6 is the use of "place-holder code" which
will display if JavaScript is turned off. This is something you will need to be
aware of as you start to implement JS on public sites. Using the
tags, you can provide content that does not use
JavaScript. Browsers with JavaScript will not show this information, and it
will show in browsers that don't have scripting or have it turned off. To see
it in action, set Scripting to Disable in IE.