Introduction to JavaScript

This lecture notes is based on Prof Doreen De Leon's lectures.

Reading

Sebesta Chapter 4

Uses

Client-side: provides alternative to some CGI programming (not all: e.g., JavaScript does not support file operations).
Alternative to Java applets.
- Benefit: part of the HTML document (so no secondary downloading needed).
- Downside: not as good at producing graphics in documents.
Interaction with users via form elements easily done in JavaScript.
Makes HTML documents dynamic (see Ch. 6 of Programming the World Wide Web, 2d edition for more details or Dynamic Web Pages with JavaScript).

Basics

Usually put JavaScript code in the <head> section of HTML document.
Enclose JavaScript code by:
<script type="text/javascript">  </script>
JavaScript code may be placed in an external file (a .js file). To include JavaScript code in another file, do:
<script type="text/javascript" src="prog.js"> </script>
Comments in JavaScript denoted as in C++.

Reserved Words in JavaScript

See p. 122 of text and Ecma International.
Predefined words include: alert, open, java, this, self.

Primitive Types

Five types
- Number
- String
- Boolean
- Undefined
- Null
Primitives stored in non-heap memory.
Objects stored in heap.

Numeric and String Literals

Numeric literals
- Type is Number.
- Numeric values in double-precision floating point.
String literal
- Single-quoted or double-quoted (both the same).
- Null string either '' or "".

Other primitive types

Boolean: true or false
- Result of evaluating a relational or Boolean expression).
Null: only value is null (either as a primitive or an object)
- null is value an object reference has when it doesn't refer to any object.
- As a primitive, null is false.
- As a number, null is 0.
Undefined: only value is undefined (value of a variable not yet assigned a value)
- As a Boolean, false
- As a number, NaN

Variables

Variables dynamically typed — type determined by interpreter, usually to whatever needed for the context in which it appears.
Always declared using var.
Variables names: combination of letters, digits, underscores, dollar signs — can't begin with a digit or contain any spaces.
Initial values can be assigned in a var declaration.

Numeric Operators

Binary operators: +, -, /, *, %(remainder after division).
Unary: -(sign), --, ++.
Precedence: unary; *, /, %; +, -.

The `Math` Object

Has methods and properties for Number objects.
Has methods for trigonometric functions and other math operations.
Examples:
- floor: truncates floating point numbers
- round: rounds floating point numbers
- max: finds maximum of two numbers

The `Number` Object

Contains properties with constant values.
Reference properties via Number.
Example: Number.PI — the value of pi.
Any arithmetic operation resulting in error, e.g., division by zero, or in a value that can't be represented as a number, returns not a number (NaN)
isNaN() used to check if a variable has the value NaN
Method: toString() -- converts number calling it to a string
Example: var num = 2.28; . . . str_num = num.toString();

String Concatenation

Use the + operator.

Implicit Type Conversions

JavaScript performs several implicit type conversions, called coercions.
In general, if a value of one type is used in a situation where a value of another type is expected, JavaScript tries to convert the value to the required type.
For examples, if a string is expected and a number is given, the number is converted to a string.
Also, if a number is expected and a string is given, the string is converted to a number (if possible). If string can't be converted to a number, numeric value is NaN
Example: Suppose y = 8
"y + 2 = " + y + 2 gives "y + 2 = 82" Fix: "y + 2 = " +(y + 2) gives "y + 2 = 10"

Some String Properties and Methods

String methods can always be used via String primitives, as if they were objects.
Property: length
- Example:
  var str = "Happy"; var len = str.length; // len = 5

Some methods

Method	Parameters	Result
`charAt`	one number	the character at specified location
`indexOf`	one-character string	the position in the `String` object of the parameter
`substring`	two numbers	the substring of the `String` object from the position given by the first parameter to the position given by the second
`toLowerCase`	no arguments	converts all uppercase letters in the string to lowercase
`toUpperCase`	no arguments	converts all lowercase letters in the string to uppercase

Example:
var str="PIC 40A is fun!"; str.charAt(5); // returns 0 str.indexOf('C'); // returns 2 str.substring(4, 8); // returns "40A i" str.toLowerCase(); // str is now "pic 40 is fun!"

Predefined String Functions

parseInt
parseFloat
These convert the string into an integer or floating point number. If the string starts with a number, that value is returned. If not, NaN is returned.

The `typeof` Operator

Returns the type of its single operand ("number", "string", "boolean") or "object" if the operand is an object or "null".

Assignment Statements

Same as C++: +=, -=, *=, /=, %=

Screen Output

HTML document modeled with the Document object.
The window in which the browser displays an HTML document modeled by the Window object.
Window object has two properties:
- document (Document object), and
- window (Window object)

Write a line of text to an HTML document (`Document` object)

writeln
- Puts output cursor in the HTML document to the beginning of the next line after writing the argument.
- Example: document.writeln("<h1>Heading into JavaScript</h1>");
write
- Does not reposition the cursor — the next character appears directly after the last character written.
- Example:
```
document.write("<h1>Happy Days ");
document.writeln("Are Here Again</h1>");
//displays: Happy Days Are Here Again as <h1> header
```

Can use <br /> in a write or writeln argument to get multiple lines of text
Example:

document.writeln("<h1>Happy Days<br />Are Here Again</h1>");
// displays: Happy Days
//           Are Here Again
// as a level 1 header

Printing a line (or lines) in a dialog box (`Window` object)

Default object is the window being displayed, so don't need to include object reference.
alert
- Opens dialog window and displays its parameter in the window.
- Displays button labeled OK.
- Parameter is plain text, not HTML code.
- Example: alert("Always be alert to changes in the wind!"); .
confirm
- Opens a dialog box displaying its string parameter along with two buttons, OK and Cancel.
- Returns Boolean value: true for OK and false for Cancel
- Example: var query = confirm("Continue program?");
prompt
- Creates dialog window containing a text box.
- Allows user to input values for use in the script.
- Dialog box has two buttons, OK and Cancel.
- Reads in value as a string.
- Can use parseInt or parseFloat to convert string to a number.
- Example use:
  prompt("Enter an integer", "");

Equality/Relational Operators

Mostly same as C++: ==, !=, >, >=, <, <=
Also: ===, !== (stand for strict equality, inequality)

Control Structures

Boolean Conditions

Any non-zero numeric value is true.
0 is false.
Strings: any string with one or more characters is true.
The empty string is false.
Any variable declared with var but not yet assigned a variable is false.
If the operators are not of the same type and the relational operator is not === or !==, JavaScript attempts to convert operands to type that can be compared.
- For example, if one operand is a string and one is a number, the string is converted to a number for the comparison.
- If one operand is Boolean and the other is not, the Boolean is converted to a number (1 = true, 0 = false).
Example:
true == 1 // true true === 1 // false

Compound Conditions

Uses short-circuit evaluation, like C++ and Perl.

`if-else`

Same syntax as C++
As in C++, use curly braces for multiple statements.
Can nest if- statements, use multi-way branching.

`switch` statement

Same as in C++

Loops

while loops
- Example:
```
var n = 1, product = 1;
while (n <= 5) {
   product *= n;
   n++;
}
```
- Counter-controlled repetition: know in advance the number of repetitions (see above for example)
- Sentinel-controlled repetition
  - User enters a "flag" value, indicating the loop should terminate

for loop
Example:

var prod = 1;
for (var i = 1; i <=5; i++) 
    prod *= i; // i local to for loop

do-while loop
```
do {
 .
 .
 .
} while(condition);
```

Functions

Predefined: like parseInt, parseFloat
User-defined: similar to a combination of C++ and Perl
Header consists of
- reserved word function
- name of the function
- parenthesized list of parameters (if any)
return statement required to return control to the point where the function was called (either return; or return expr;)
Function call: like in C++
Define functions before they are used. It is best to call functions as part of a script defined in the <body> section of the document and define them in the <head>.
Can nest functions.
Use var to declare variables within a function -- makes them local variables (without using var, they are global).
Arguments passed by value.
Objects passed by reference.
Extra parameters passed to a function are ignored; extra formal parameters not given a value are undefined.
All parameters are communicated through a property array, arguments.
- arguments has property length.
- Can use this to ensure correct number of parameters passed.

Object Creation and Modification

Objects often created with a new expression, which must include a call to a constructor method
The constructor creates the properties characterizing the new object.
Calls to constructors must include parentheses, even if there are no parameters.
Example:
var default_circle = new Object(); // creates a blank object
Number of members of a class is dynamic — at any time, can add or delete properties.
Use the "." to assign a property (like in C++).
Example:
default_circle.radius = 1.0; default_circle.center = new Object(); default_circle.center.x_coord = 0; default_circle.center.y_coord = 0;
A property can be accessed in two ways
1. The way it is assigned a value (i.e., using the "." notation), e.g., var rad=default_circle.radius;.
2. Accessed as if it is an element of an array using the property name (as a string literal) as a subscript, e.g., var rad = default_circle["radius"];
Must use "." notation when defining a property (like earlier example)
If you try to access a property that has not been assigned, undefined returned.
To delete a property, use the delete method, e.g., delete default_circle.radius;
See constructors section for definition of constructors.
The for-in loop
- Like Perl's foreach
- Useful for listing the properties of an object
- Syntax: for (identifier in object) statement;
- Example:
```
for (var prop in default_circle)
   document.writeln("<p>Name: " + prop + "; value: " + default_circle[prop] + "</p>");
```

Arrays

Considered as objects of type Array.
Indexing same as in C++.
Have dynamic length.

`Array` Object Creation

Arrays are dynamically allocated
Examples:
var arr = new Array(5); // creates array of length 5
Create empty array: var a = new Array();
Can make an array any size by just giving elements a value — the array dynamically grows to hold the values

Example:

for (var i = 0; i < 5; i++)
   a[i] = i + 1;

So, a is an array of size 5.

Initialization of array in declaration:
1. Example: var b = [2, 4, 6, 8, "appreciate"];
  - Initializer list in square brackets.
  - Size determined by number of elements listed.
  - new not required to create the Array object — done by interpreter automatically upon seeing initializer list.
2. Example: var b = new Array(2, 4, 6, 8, "appreciate");
  - Creates 5-element array.
  - Initial values are arguments of the constructor.
Can reserve space in an array for a value to be specified later by using a comma as a placeholder
Example: var b = [2, 4, , 8, "appreciate"];
Then, can later do: b[2] = 6;
Any element not given a value has the value undefined

Length of an array

Length both read- and write-accessible through the length property
Example: b.length = 25; -- makes length of array b 25
Example: var len = arr.length; -- so, len is equal to the length of arr, 5
Only assigned elements of an array actually take up space.
Elements dynamically allocated from the heap.

`Array` methods

join: turns all elements into strings and joins them together into a single string. With no arguments, a comma separates the elements.
reverse: reverses the order of elements in the array
sort: uses string comparison to determine the sorting order (i.e., via ASCII values).
- sort takes an optional argument, the comparator function
- Comparator function returns:
  - <0 if first argument is smaller than the second
  - 0 if arguments are equal
  - >0 if first argument is larger than the second
concat: concatenates its parameters to the end of the array
slice: returns the part of the array starting from the position of the first parameter and up to, but not including, the position of the second parameter
push, pop, shift, unshift: like the Perl functions

Constructors

Called by the new operator

Example:

function Circle (rad, cx, cy) {
   this.radius = rad;
   this.centerx = cx;
   this.centery = cy;
}

Use: this_circle = new Circle(5, 4, 2);
To add methods to the object, must include it in the constructor as well

Example:

function display_circle () {
   document.write("Circle: <br />");
   document.write("Radius: " + this.radius + "<br />");
   document.write("Center: (" + this.centerx + ", " + this.centery + ")<br />");
}

So, the constructor must look like:

function Circle (rad, cx, cy) {
   this.radius = rad;
   this.centerx = cx;
   this.centery = cy;
   this.display = display_circle;
}

Then, to display the circle, do: this_circle.display();
(Gives output:

 
Circle:
Radius: 5
Center: (4, 2)

Pattern Matching

Methods for pattern matching in the String object class.
The pattern is the parameter.
Some methods:
- search: returns first position of the character in the match (-1, if no match).
- replace: corresponds to s/// in Perl, stores matches in $1, $2, etc.
  Example:
```
var str = "Sally sells seashells by the seashore.";
str.replace(/sea/g, "cow");
```
  replaces "sea" in "seashells" and "seashore" by "cow" and stores "sea" in "seashells" in $1 and the "sea" in "seashore" in $2.
- split: corresponds to split in Perl
  - Argument: pattern on which split done
  - Returns array of substrings

Introduction to JavaScript

Reading

Uses

Basics

Reserved Words in JavaScript

Primitive Types

Numeric and String Literals

Other primitive types

Variables

Numeric Operators

The Math Object

The Number Object

String Concatenation

Implicit Type Conversions

Some String Properties and Methods

Predefined String Functions

The typeof Operator

Assignment Statements

Screen Output

Write a line of text to an HTML document (Document object)

Printing a line (or lines) in a dialog box (Window object)

Equality/Relational Operators

Control Structures

Boolean Conditions

Compound Conditions

if-else

switch statement

Loops

Functions

Object Creation and Modification

Arrays

Array Object Creation

Length of an array

Array methods

Constructors

Pattern Matching

The `Math` Object

The `Number` Object

The `typeof` Operator

Write a line of text to an HTML document (`Document` object)

Printing a line (or lines) in a dialog box (`Window` object)

`if-else`

`switch` statement

`Array` Object Creation

`Array` methods