ICS 325
Class Notes
- JavaScript
§
JavaScript
is Netscape's built-in, cross-platform scripting language. It works on all
platforms.
§
JScript
is Microsoft's version of JavaScript.
§
Often
JavaScript appears in the <head> section of the XHTML document.
§
The
browser interprets the contents of the <head> section first.
§
A
JavaScript starts right after the <script> tag and ends before the tag
</script>.
§
Both
Microsoft Internet Explorer (IE) and Netscape Navigator use JavaScript as the
default client side scripting language.
§
The
browser contains a complete set of objects that allow script programmers to
access and manipulate every element of an HTML document.
§
The
document object's writeln method writes a line of HTML text in the HTML
document being displayed.
§
Every
statement should end with a semicolon, although none is required by JavaScript.
§
JavaScript
is case sensitive.
§
The
keyword var is used to declare the names of variables.
§
By
convention, variable name identifiers begin with a lowercase letter.
§
JavaScript
does not require variables to have a type before they can be used in a program.
§
A
variable in JavaScript can contain a value of any data type. For this reason,
JavaScript is referred to as a loosely typed language.
§
A
single-line comment begins with the characters // and terminates at the end of
the line. Multiple-line comments begin with delimiter /* and end with delimiter
*/. Nesting multiple-line comments is a syntax error.
·
Variables
are case sensitive.
·
Although
JavaScript does not require variables be declared it is good programming
practice to declare all variables that are used.
·
The
following list of key words can be used in code, but not as variables:
break case continue delete do else false for
function if in new null return switch this
true typeof var void while with
·
The
following list of reserved words are not used by JavaScript, but still cannot
be used as variables:
catch class const debugger default enum export extends
finally import super try
·
Other
built in variables and objects in JavaScript
window The Current Browser Window that is open
document The entire html document
location Sets the location of the
current web browser (i.e., what web page it is showing)
history allows for going forward
and backward pages in the current browser.
button A
push button on an HTML form.
checkbox A checkbox on an HTML form.
fileUpload A file upload element on an HTML
form.
form Lets
users input text and make choices from Form elements.
hidden A Text object that is
suppressed from form display on an HTML form.
option A Select object option.
password A text field on an HTML form that
conceals its value by displaying asterisks (*).
radio A set of radio buttons on
an HTML form.
reset A reset button on an HTML
form.
select A selection list on an HTML
form.
submit A submit button on an HTML
form.
text A text input field on
an HTML form.
textarea A multiline input field on an
HTML form.
Example: document.formName.fieldName.value
= value1
The following list is a list of
operators that can be used in JavaScript
|
Operator Description |
Operator |
|
Addition |
+ |
|
Subtraction |
- |
|
Multiplication |
* |
|
Division |
/ |
|
Modulus |
% |
|
Increment |
++ |
|
Decrement |
-- |
|
Add Value to Current Value |
+= |
|
Subtract Value from Current Value |
-= |
|
Multiply Value with Current Value |
*= |
|
Divide Value by Current Value |
/= |
|
Modulo Value by Current Value |
%= |
|
Equal To |
== |
|
Not Equal To |
!= |
|
Greater Than |
> |
|
Less Than |
< |
|
Greater Than or Equal To |
>= |
|
Less Than or Equal To |
<= |
|
Logical AND |
&& |
|
Logical OR |
|| |
·
JavaScript
uses if, if/else, and switch to implement selection structures
·
Example
of if statement:
if ( value1 >
value2 ) {
statements;
}
·
Example
of if/else statement:
if ( value1 >
value2 ) {
statements;
}
else {
statements;
}
·
Example
of a switch statement:
switch (selection) {
case
“value1”:
statements;
break;
case
“value2”:
statements;
break;
default:
statements;
}
§
JavaScript
uses for loops, while loops, and do/while loops to implement the repetition
structures
§
Example
of a for loop in JavaScript:
for ( var i
= 0; i < 5; i++) {
statements;
}
§
Although
the value of the control variable can be changed in the body of a for loop,
avoid changing it, because doing so can lead to subtle errors.
§
Example
of a while loop in JavaScript:
while
(value1 < value2) {
statements;
}
§
Example
of a do/while loop in JavaScript:
do {
statements;
} while (value1 < value2);
JavaScript Functions
§
Experience
has shown that the best way to develop and maintain a large program is to
construct it from small, simple pieces or modules.
§
Modules
in JavaScript are called functions.
§
Usually,
the "built-in" methods are called methods, and all others are called
functions.
§
Do
not try to rewrite existing methods of JavaScript objects to make them more
efficient. You usually will not be able to increase the performance of these
methods.
§
Syntax:
function function-name (
parameter-list ) {
body of the function
including "declarations and statements".
}
§
Example:
function rectangle ( x, y ) {
return x * y ;
}
§
Choosing
meaningful function names and meaningful parameter names makes programs more
readable and helps avoid excessive use of comments.
§
A
function should usually be not longer than half a printed page.
§
Regardless
of how long a function is, it should perform one task well.
§
Small
functions promote software reusability.
§
To
design a constant variable, we use all capital letters to name it. In other
words, we do not intend to modify it and to make it stand out in the program.
§
Local
variables: the variables that are defined inside the body of a function.
§
Global
variables: the variables that are defined in the <head> section.
§
Duration:
§
Duration:
the duration of a variable is defined as the period during which the variable
exists in memory.
§
Duration
of a local variable: it is started when the function is called and it is
terminated when the function is finished.
§
Duration
of a global variable: it is started when the <head> section is
interpreted and it is finished when the browsing session is terminated.
See JavaScript Reference for
Available Methods
JavaScript Objects
§
Classes
(objects), documents and window, are provided by the Web browsers, such as IE,
Netscape, Mozzilla, or Opera.
§
The
designers of the Web Browsers have defined a set of objects that encapsulate
the elements of an XHTML document and expose it to a JavaScript programmer
through its attributes. This enables the
JavaScript programmer to control the web page’s behaviors and elements while
giving it a dynamic feel.
§
JavaScript
is often referred as being an object based programming language, because it
uses many objects to perform tasks.
§
Invoking
(or calling), a method of an object is called “sending a message to the object”
§
An
object’s methods are called by giving the object name, then using the dot
operator, then the method name, then in parenthesis any arguments passed to the
method.
Example:
math.round (21.1) //
math is the object, round is the method, and 21.1 is the parameter passed
// to be rounded.
§
Common
Objects used in JavaScript
§
Math allows
the programmer to perform mathematical computations.
§
String allows
the programmer to manipulate strings.
§
Date allows
the programmer to add/change time and dates.
§
Window allows
the programmer to modify the browsing window.
§
Document allows
the programmer to control the elements within the web page.
§
Boolean & Number are
defined as the wrappers for Boolean and Numbers
§
Form allows
the programmer to access and change the form’s elements.
§
For
example of these objects please see the JavaScript Reference guide handed out
in class.