Client-side programming recall: html is good for developing static pages

Client-side programming

• recall: HTML is good for developing static pages

• can specify text/image layout, presentation, links, …
• Web page looks the same each time it is accessed
• in order to develop interactive/reactive pages, must integrate programming

Scripts vs. programs

• a scripting language is a simple, interpreted programming language

• scripts are embedded as plain text, interpreted by application
• simpler execution model: don't need compiler or development environment
• saves bandwidth: source code is downloaded, not compiled executable
• platform-independence: code interpreted by any script-enabled browser
• but: slower than compiled code, not as powerful/full-featured

Common scripting tasks

• adding dynamic features to Web pages

• validation of form data
• image rollovers
• time-sensitive or random page elements
• handling cookies

• defining programs with Web interfaces

• utilize buttons, text boxes, clickable images, prompts, frames

JavaScript

• JavaScript code can be embedded in a Web page using SCRIPT tags

• the output of JavaScript code is displayed as if directly entered in HTML

JavaScript data types & variables

• JavaScript has only three primitive data types

• strings : "foo" 'howdy do' "I said 'hi'." ""
• numbers : 12 3.14159 1.5E6
• booleans : true false

JavaScript operators & control statements

JavaScript Math routines

Interactive pages using prompt

User-defined functions

• function definitions are similar to C++/Java, except:

• no return type for the function (since variables are loosely typed)
• no types for parameters (since variables are loosely typed)
• by-value parameter passing only (parameter gets copy of argument)

Function example

Another example

JavaScript libraries

• better still: if you define functions that may be useful to many pages, store in a separate library file and load the library when needed

• the file at http://www.creighton.edu/~davereed/csc551/JavaScript/random.js contains definitions of the following functions:

• RandomNum(low, high) returns random real in range [low..high)
• RandomInt(low, high) returns random integer in range [low..high)
• RandomChar(string) returns random character from the string
• RandomOneOf([item1,…,itemN]) returns random item from list/array
• Note: as with external style sheets, no tags in the JavaScript library file

Library example

JavaScript Strings

• a class defines a new type (formally, Abstract Data Type)

• encapsulates data (properties) and operations on that data (methods)

• a String encapsulates a sequence of characters, enclosed in quotes

• properties include
• length : stores the number of characters in the string
• methods include
• charAt(index) : returns the character stored at the given index
• (as in C++/Java, indices start at 0)
• substring(start, end) : returns the part of the string between the start
• (inclusive) and end (exclusive) indices
• toUpperCase() : returns copy of string with letters uppercase
• toLowerCase() : returns copy of string with letters lowercase
• to create a string, assign using new or just make a direct assignment (new is implicit)
• word = new String("foo"); word = "foo";
• properties/methods are called exactly as in C++/Java
• word.length word.charAt(0)

String example: palindromes

JavaScript arrays

• arrays store a sequence of items, accessible via an index

• since JavaScript is loosely typed, elements do not have to be the same type
• to create an array, allocate space using new (or can assign directly)
• items = new Array(10); // allocates space for 10 items
• items = new Array(); // if no size, will adjust dynamically
• items = [0,0,0,0,0,0,0,0,0,0]; // can assign size & values []
• to access an array element, use [] (as in C++/Java)
• for (i = 0; i < 10; i++) {
• items[i] = 0; // stores 0 at each index
• }
• the length property stores the number of items in the array
• for (i = 0; i < items.length; i++) {
• document.write(items[i] + "
  "); // displays elements
• }

Array example

Date class

• String & Array are the most commonly used classes in JavaScript

• other, special purpose classes & objects also exist

• the Date class can be used to access the date and time

• to create a Date object, use new & supply year/month/day/… as desired
• today = new Date(); // sets to current date & time
• newYear = new Date(2002,0,1); //sets to Jan 1, 2002 12:00AM
• methods include:
• newYear.getYear() can access individual components of a date
• newYear.getMonth()
• newYear.getDay()
• newYear.getHours()
• newYear.getMinutes()
• newYear.getSeconds()
• newYear.getMilliseconds()

Date example

Another example

document object

• Both IE and Netscape allow you to access information about an HTML document using the document object (Note: not a class!)

navigator object

User-defined classes

• can define new classes, but the notation is awkward

• simply define a function that serves as a constructor
• specify data fields & methods using this
• no data hiding: can't protect data or methods

Class example