The basics of JavaScript

Chapter 4 from the textbook

 Learning Outcomes
 Inthis chapter, you will learn how
to:
◦ Describe common uses of JavaScript in
Web pages.
◦ Describe the considerations for XHTML
conformance and JavaScript.
◦ Use variables, operators and control
structures.
◦ Apply Regular Expressions for form
valiadation.

2
 What is JavaScript?
 Object-based scripting language

 Works with the objects associated with a

Web page document
◦ the window
◦ the document
◦ the elements
 such as forms, images, hyperlinks, etc

3
 What is JavaScript?
 Originally developed by Netscape
◦ Named LiveScript

 Netscape & Sun Microsystems Collaboration

◦ LiveScript renamed JavaScript

 JavaScript is NOT Java

4
Differences between JavaScript and Java
 interpreted, not compiled
 more relaxed syntax and rules
◦ fewer and "looser" data types
◦ variables don't need to be declared
◦ errors often silent (few exceptions)
 key construct is the function rather than the
class
◦ (more procedural less object-oriented)
 contained within a web page and integrates with
its XHTML/CSS content
 Common Uses of JavaScript
 Display a message box
 Select list navigation
 Edit and validate form information
 Create a new window with a specified size
and screen position
 Image Rollovers
 Status Messages
 Display Current Date
 Calculations

6
 Coding JavaScript
 JavaScript statements can be coded on a
Web page using two different techniques:

◦ Place JavaScript code between <script> tags

 embedded or linked
 Implicit embedding or explicit embedding.
 Two locations for JavaScript embedding depends on
the purposes (head/body)

◦ Place JavaScript code as part of an event

attached to an XHTML element
7
Linking to a JavaScript file
 Syntax
◦ <script src="filename"
type="text/javascript"></script>
 Ex.
◦ <script src="example.js"
type="text/javascript"></script>
 should be placed in XHTML page's head
 script code is stored in a separate .js file
JavaScript embedding in XHTML
 Directly embedded
<script type=“text/javascript”>
<!--
…Javascript here…
-->
</script>
Object Orientation and JavaScript
 JavaScript is not an object-oriented
programming language, but an object-based
◦ JavaScript defines objects  no classes
◦ Objects are collections of properties
◦ Properties are either data properties or method
properties
◦ Data properties are either primitive values or
references to other objects
◦ The object is the root of all objects
 Object has no data properties, but several method properties
General Syntactic Characteristics

 Variables
◦ Start with $, _, letter
◦ Case sensitive
 Statements can be terminated with a
semicolon
 Reserved words (25 words)
 Comments (same as Java)
◦ //
◦ /* … */
PRIMITIVES,
OPERATIONS AND
EXPRESSIONS
Primitive Types
 Five primitive types
◦ Number
◦ String
◦ Boolean
◦ Undefined
◦ Null
 There are five objects corresponding to the five
primitive types
◦ These are called Wrapper objects for primitive
values
◦ Primitive values are coerced to the wrapper class as
necessary, and vice-versa
Numeric Literals (or type)
 Number values are represented internally
as double-precision floating-point values
◦ integers and real numbers are the same type
(no int vs. double)
◦ Float values may have a decimal and/or
exponent
◦ same operators: + - * / % ++ -- = += -= *= /=
%=
◦ similar precedence to Java
String Literals (or type)
 A String literal is delimited by either
single or double quotes
◦ There is no difference between single and
double quotes
◦ Certain characters may be escaped in strings
 \‟ or \” to use a quote in a string delimited by the same quotes
 \\ to use a literal backspace
Other Primitive Types
 Null
◦ A single value, null
◦ null is a reserved word
◦ an assignment value, It can be assigned to a variable as a
representation of no value.
◦ Using a null value usually causes an error
 Undefined
◦ A single value, undefined
◦ However, undefined is not, itself, a reserved word
◦ The value of a variable that is declared but not assigned a value
 Boolean
◦ Two values: true and false
Declaring variables
 var name = expression;
----------------------------------------------------------
var clientName = “abc xyz";
var age = 32;
var weight = 45;
-----------------------------------------------------------
 declaring variables:
◦ explicitly, by var keyword (case sensitive)
◦ implicitly, by assignment (give it a value, and it exists!)
 types: not specified, but JS does have types ("loosely
typed")
◦ common types: Number, Boolean, String, Null, Undefined
◦ can find out a variable's type by calling typeof
The Math Object
 Provides a collection of properties and
methods useful for Number values
 This includes the trigonometric functions
such as sin and cos
 methods: abs, ceil, cos,
floor, log, max, min, pow,
random, round, sin, sqrt,
tan
 properties: E, PI
The Number Object
 Properties
◦ MAX_VALUE
◦ MIN_VALUE
◦ NaN
◦ POSITIVE_INFINITY
◦ NEGATIVE_INFINITY
◦ PI
 Operations resulting in errors return NaN
◦ Use isNaN(a) to test if a is NaN
 toString method converts a number to string
The String Object
var s = "Connie Client";
var fName = s.substring(0, s.indexOf(" ")); // “Connie"
var len = s.length; // 13

 methods: charAt, indexOf, lastIndexOf, replace, split,

substring, toLowerCase, toUpperCase
◦ charAt returns a one-letter String (there is no char type)
 length property (not a method as in Java)
 Character positions in strings begin at index 0
String Catenation
 The operation + is the string catenation
operation
 In many cases, other types are
automatically converted to string
Implicit Type Conversion
 JavaScript attempts to convert values in order
to be able to perform operations
◦ “August “ + 1977 causes the number to be converted
to string and a concatenation to be performed
◦ 7 * “3” causes the string to be converted to a number
and a multiplication to be performed
◦ null is converted to 0 in a numeric context, undefined
to NaN
◦ 0 is interpreted as a Boolean false, all other numbers
are interpreted a true
Explicit Type Conversion
 Explicit conversion of string to number
◦ Number(aString)
◦ aString – 0
 Number must begin the string and be followed by
space
 parseInt and parseFloat convert the
beginning of a string but do not cause an
error if a non-space follows the numeric
part
Explicit Type Conversion
 converting a String into a Number
var name = parseInt("String");
var name = parseFloat("String");
◦ parseInt("123hello") returns 123
◦ parseInt(“abcds") returns NaN (not a
number)
The Date Object
 A Date object represents a time stamp, that is, a
point in time
 A Date object is created with the new operator
◦ var now= new Date();
◦ This creates a Date object for the time at which it
was created
 Date methods: toLocaleString,
getDate, getMonth, getDay,
getFullYear, getTime, getHours,
getMinutes, getSeconds,
getMilliseconds
SCREEN OUTPUT AND
KEYBOARD INPUT
Window Object
 The Window object represents the window in
which the document containing the script is
being displayed
 Window has two properties
◦ window refers to the Window object itself
◦ document refers to the Document object
 The Window object is the default object for
JavaScript, so properties and methods of the
Window object may be used without qualifying
with the class name
 Window includes three methods for dialog
boxes.
 The alert Method
 The alert method opens a dialog box with a
message
 The output of the alert is not XHTML, so use
new lines rather than <br/>
alert("The sum is:" + sum + "\n");
 The confirm Method
 The confirm methods displays a message provided as a
parameter
◦ The confirm dialog has two buttons: OK and Cancel
 If the user presses OK, true is returned by the method
 If the user presses Cancel, false is returned

var question =
confirm("Do you want to continue this download?");
 The prompt Method
 This method displays its string argument in a dialog box
◦ A second argument provides a default content for the user entry area
 The dialog box has an area for the user to enter text
 The method returns a String with the text entered by the user

name = prompt("What is your name?", "");

Document Object
 The Document object has several
properties and methods, e.g. write()
 The write method of the Document
object write its parameters to the
browser window
 The output is interpreted as XHTML by
the browser
 If a line break is needed in the output,
interpolate <br /> into the output
CONTROL
STATEMENTS
If/Else Statement
if (condition)
{ statements; }
else if (condition)
{ statements; }
else { statements; }
-----------------------------------------------
 identical structure to Java's if/else statement
 JavaScript allows almost anything as a condition
switch Statement Syntax
switch (expression) {
case value_1:
// statement(s)
case value_2:
// statement(s)
...
[default:
// statement(s)]
}
Loop Statements
 Loop statements in JavaScript are similar to those in
C/C++/Java
 While
while (control expression)
statement or compound statement
 For
for (initial expression; control expression; increment
expression)
statement or compound statement
 do/while
do statement or compound statement
while (control expression)
OBJECT CREATION
AND MODIFICATION
Object Creation and Modification
 The new expression is used to create an object
◦ This includes a call to a constructor
◦ The new operator creates a blank object, the
constructor creates and initializes all properties of
the object
 Properties of an object are accessed using a dot
notation: object.property
 Properties are not variables, so they are not
declared
 The number of properties of an object may
vary dynamically in JavaScript
Dynamic Properties
 Create my_car and add some properties
// Create an Object object
var my_car = new Object();
// Create and initialize the make property
my_car.make = "Ford";
// Create and initialize model
my_car.model = "Contour SVT";
 The delete operator can be used to delete a
property from an object
◦ delete my_car.model
The for-in Loop
 Syntax
for (identifier in object)
statement or compound statement
 The loop lets the identifier take on each property in
turn in the object
 Printing the properties in my_car:
for (var prop in my_car)
document.write("Name: ", prop, "; Value: ",
my_car[prop], "<br />");
 Result:
Name: make; Value: Ford
Name: model; Value: Contour SVT
ARRAYS
Array Object
new Array(10)
var name = []; // empty array
var name = [value, value, ..., value]; // pre-filled
name[index] = value; // store element
-------------------------------
var ducks = ["Huey", "Dewey", "Louie"];
var stooges = []; // stooges.length is 0
stooges[0] = "Larry"; // stooges.length is 1
stooges[1] = "Moe"; // stooges.length is 2
stooges[9] = "Curly"; // stooges.length is 10
--------------------------
 two ways to initialize an array
 length property (grows as needed when elements
added)
 Elements of an array do not have to be of the same type
 Characteristics of Array Objects
 The length of an array is one more than the highest
index to which a value has been assigned or the
initial size (using Array with one argument),
whichever is larger
 Assignment to an index greater than or equal to the
current length simply increases the length of the
array
 Only assigned elements of an array occupy space
Array Methods
var a = ["Stef", "Amit"]; // Stef, Amit
a.push("Brian"); // Stef, Amit, Brian
a.unshift("Kenneth"); // Kenneth, Stef, Amit,
Brian
a.pop(); // Kenneth, Stef, Amit
a.shift(); // Stef, Amit
a.sort(); // Amit, Stef
----------------------------------------
 methods: concat, join, pop, push,
reverse, shift, slice, sort, splice,
toString, unshift
◦ push and pop add / remove from back
◦ unshift and shift add / remove from front
◦ shift and pop return the element that is removed
FUNCTIONS
Functions
Syntax:
function name(parameterName, ..., parameterName)
{statements; }
Example:
function quadratic(a, b, c)
{ return -b + Math.sqrt(b * b - 4 * a * c) / (2 * a); }
-----------------------------------------------------
 parameter/return types are not written
◦ var is not written on parameter declarations
◦ functions with no return statement return an undefined value
 any variables declared in the function are local (exist
only in that function)
 Functions must defined before use in the page header
Calling Functions (same as Java)
Suntax.
name(parameterValue, ...,
parameterValue);
Ex.
var root = quadratic(1, -3, 2);
 if the wrong number of parameters are passed:
◦ too many: extra ones are ignored
◦ too few: remaining ones get an undefined value
Functions are Objects
 Functions are objects in JavaScript
 Functions may, therefore, be assigned to variables and to
object properties
◦ Object properties that have function values are methods of the
object
 Example
function fun()
{document.write("This surely is fun!
<br/>");}
ref_fun = fun; //Now, ref_fun refers to the fun
object
fun(); // A call to fun
ref_fun(); // Also a call to fun
Global and Local Variables
var count = 1;
function f1() { var x = 999; count *= 10; }
function f2() { count++; }
f2();
f1();

 variable count above is global (can be seen by all

functions)
 variable x above is local (can be seen by only f1)
 both f1 and f2 can use and modify count.
Global and Local Variables
 A variable not declared using var has global
scope, visible throughout the page, even if used
inside a function definition
 A variable declared with var outside a function
definition has global scope
 A variable declared with var inside a function
definition has local scope, visible only inside the
function definition
Parameters
 Parameters named in a function header are
called formal parameters
 Parameters used in a function call are called
actual parameters
 Parameters are passed by value
PATTERN MATCHING
BY USING REGULAR
EXPRESSIONS
Using Regular Expressions
 Regular expressions are used to specify patterns in
strings. We use regular expressions to search for
matches on particular text.
 JavaScript provides two methods to use regular
expressions in pattern matching
◦ String methods
◦ RegExp objects (not covered in the text)
 A literal regular expression pattern is indicated by
enclosing the pattern in slashes (/ /)
 The search method returns the position of a match, if
found, or -1 if no match was found
 Example Using search
var str = "Rabbits are furry";
var position = str.search(/bits/);
if (position > 0)
document.write("'bits' appears in position",
position, "<br />");
else
document.write(
"'bits' does not appear in str <br />");

 This uses a pattern that matches the string „bits‟

 The output of this code is as follows:
'bits' appears in position 3
Characters and Character-Classes
 Metacharacters are characters used to represent special patterns
that don‟t necessarily fit in the range of standard letters and
numbers (A-Z; a-z; 0-9, etc.).
 Metacharacters have special meaning in regular expressions
◦ \ | ( ) [ ] { } ^ $ * + ? .
◦ These characters may be used literally by escaping them with \
 A period matches any single character
◦ /f.r/ matches for and far and fir but not fr
 A character class matches one of a specified set of characters
◦ [character set]
◦ List characters individually: [abcdef]
◦ Give a range of characters: [a-z]
◦ Beware of [A-z]
◦ ^ at the beginning negates the class
Predefined character classes

Name Equivalent Matches

Pattern
\d [0-9] A digit
\D [^0-9] Not a digit
\w [A-Za-z_0-9] A word character
(alphanumeric)
\W [^A-Za-z_0-9] Not a word character
\s [ \r\t\n\f] A whitespace character
\S [^ \r\t\n\f] Not a whitespace character
Repeated Matches
 A pattern can be repeated a fixed number of times by
following it with a pair of curly braces enclosing a count
 A pattern can be repeated by following it with one of
the following special characters
◦ * indicates zero or more repetitions of the previous pattern
◦ + indicates one or more of the previous pattern
◦ ? indicates zero or one of the previous pattern
 Examples
◦ /\(\d{3}\)\d{3}-\d{4}/ might represent a telephone
number
 Pattern Modifiers
 Pattern modifiers are specified by characters that
follow the closing / of a pattern
 Modifiers modify the way a pattern is interpreted
or used
 Ex. /Apple/i, matches APPLE, apple, APple
Character Modification
g global search for all matches
i insensitive case searches
m multiple line searches
Other Pattern Matching Methods
 The replace method takes a pattern parameter and a string
parameter
◦ The method replaces a match of the pattern in the target string with
the second parameter
◦ A g modifier on the pattern causes multiple replacements
 Parentheses can be used in patterns to mark sub-patterns
◦ The pattern matching machinery will remember the parts of a matched
string that correspond to sub-patterns
 The match method takes one pattern parameter
◦ Without a g modifier, the return is an array of the match and
parameterized sub-matches
◦ With a g modifier, the return is an array of all matches
 The split method splits the object string using the pattern to
specify the split points
JS ERRORS
Common JavaScript errors
 most common student errors:
◦ My program does nothing. (most errors produce no output)
◦ It just prints undefined. (many typos lead to undefined variables)
 quick debugging tips:
◦ Are you sure the browser is even loading your JS file at all?
Put an alert at the top of it and make sure it appears.
◦ When you change your code, do a full browser refresh
(Shift-Ctrl-R)
◦ Check the bottom-right corner of Firefox for syntax errors.
◦ Paste your code into JSLint tool to find problems.
◦ Type some test code into Firebug's console or use a breakpoint.