JavaScript for Client-Side Programming: Scripts, Languages, and Tasks, Slides of Web Programming and Technologies

Download JavaScript for Client-Side Programming: Scripts, Languages, and Tasks and more Slides Web Programming and Technologies in PDF only on Docsity!

COMP519: Web Programming

Autumn 2011

client-side programming with JavaScript

scripts vs. programs



JavaScript vs. JScript vs. VBScript



JavaScript vs. JScript vs. VBScript



common tasks for client-side scripts

JavaScript



data types & expressions



control statements



functions & libraries



strings & arrays



Date, document, navigator, user-defined classes

Client-Side Programming

•^

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 in some form oranother

•^

client-side programming

programs are written in a separate programming (or scripting) language

e.g., JavaScript, JScript, VBScript

programs are embedded in the HTML of a Web page, with (HTML) tags to identify theprogram component

e.g.,

<script

type="text/javascript">

…

the browser executes the program as it loads the page, integrating the dynamic output ofthe program with the static content of HTML

could also allow the user (client) to input information and process it, might be used tovalidate input before

it’s submitted to a remote server

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^ JavaScript:

the first Web scripting language, developed by Netscape in 1995

JavaScript:

the first Web scripting language, developed by Netscape in 1995

syntactic similarities to Java/C++, but simpler, more flexible in some respects,limited in others

(loose typing, dynamic variables, simple objects)

JScript:

Microsoft version of JavaScript, introduced in 1996

same core language, but some browser-specific differencesfortunately, IE, Netscape, Firefox, etc. can (mostly) handle bothJavaScript & JScript JavaScript 1.5 & JScript 5.0 cores both conform to ECMAScript standard

VBScript:

client

- side scripting version of Microsoft Visual Basic

Common Scripting Tasks

•^

adding dynamic features to Web pages

validation of form data

(probably the most commonly used application)

image rollovers

time-sensitive or random page elements

handling cookies

•^

defining programs with Web interfaces

utilize buttons, text boxes, clickable images, prompts, etc

utilize buttons, text boxes, clickable images, prompts, etc

•^

limitations of client-side scripting

since script code is embedded in the page, it is viewable to the world

for security reasons, scripts are limited in what they can do

e.g., can't access the client's hard drive

since they are designed to run on any machine platform, scripts do not contain platformspecific commands

script languages are not full-featured

e.g., JavaScript objects are very crude, not good for large project development

JavaScript

•^

JavaScript code can be embedded in a Web page using

Here is some static text as well.

when the text is displayed

as in C++/Java, statements end with

;

but a line break might

also

be interpreted as

the end of a statement (depends uponbrowser)JavaScript comments similar to C++/Java

//

starts a single line comment

/…/

enclose multi-line comments

view page

JavaScript Data Types & Variables

•^

JavaScript has only three primitive data types

String

:^

"foo"

'how

do

you

do?'

"I

said

'hi'."

""

Number

:^

12

3.

1.5E

Boolean

:

true

false

*Find

info

on

Null,

Undefined

<!–- COMP

js02.html

16.08.06 -->

assignments are as in C++/Java

message

=

"howdy";

pi

=

3.14159;

variable names are sequences of letters,

variable names are sequences of letters, digits, and underscores that

start with a letter

or an underscore variables names are case-sensitive you don't have to declare variables, will becreated the first time

used, but it’s better if

you use

var

statements

var

message,

pi=3.14159;

variables are loosely typed, can be assigneddifferent types of values (Danger!)

view page

JavaScript Operators & Control Statements

<!–- COMP519 js03.html

08.10.10 -->

•^

while, for, do

- while, …

PUZZLE: Suppose you took a pieceof paper and folded it in half, then inhalf again, and so on.How many folds before the thicknessof the paper reaches from the earth tothe sun? *Lots of information is available online

view page

JavaScript Math Routines

<!–- COMP

js04.html

08.10.10 -->

Math.min Math.floorMath.ceilMath.roundMath.PIMath.E

Math.random function returns a realnumber in [0..1)

view page

Interactive Pages Using Prompt

<!-- COMP

js05.html

08.10.10 -->

The rest of the page...

the function returns the valueentered by the user in thedialog box (a string)if value is a number, must use parseFloat

(or

parseInt

) to

convert

forms will provide a betterinterface for interaction (later)

view page

User-Defined Functions

•^

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

no return type for the function (since variables are loosely typed)

no variable typing for parameters (since variables are loosely typed)

by-value parameter passing only

(parameter gets copy of argument)

function isPrime(n)// Assumes: n > 0// Returns: true if n is prime, else false{

if (n < 2) {

Can limit variable scope to thefunction. if the first use of a variable is preceded

if (n < 2) {

return false; } else if (n == 2) {

return true; } else {

for (

var

i = 2; i <= Math.sqrt(n); i++) {

if (n % i == 0) {

return false; } } return true;

} }

if the first use of a variable is preceded with

var

, then that variable is local

to

the function for modularity, should make all variables in a function local

docsity.com

Function Example

<!–- COMP

js06.html

16.08.2006 -->

Function definitions

(usually) go in the

section

section is

loaded first, so thenthe function is defined before code

defined before code in the

is

executed (and,therefore, thefunction can beused later in thebody of the HTMLdocument)

view page

AnotherExample

<!–- COMP

js07.html

11.10.2011 -->

recall the dynamic dicepage could define a function for generating random

generating random numbers in a range, thenuse whenever neededeasier to remember,promotes reuse

view page

JavaScript Libraries

•^

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

•^

the file at

http://www.csc.liv.ac.uk/~martin/teaching/comp519/JS/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)

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,

do not put

Library Example

<!–- COMP

js08.html

11.10.2011 -->

<script type="text/javascript"

src="http://www.csc.liv.ac.uk/~martin/teaching/comp519/JS/random.js">

view page

JavaScript Objects

•^

an object defines a new type (formally,

Abstract Data Type

)

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

•^

a String object 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)(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 (in this case) 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

function strip(str)// Assumes: str is a string// Returns: str with all but letters removed{

var copy = "";for (var i = 0; i <

str.length

; i++) {

if ((

str.charAt(i)

= "A" &&

str.charAt(i)

<= "Z") ||

(

str.charAt(i)

= "a" &&

str.charAt(i)

<= "z")) {

copy +=

str.charAt(i)

;

} } return copy;

suppose we want totest whether a wordor phrase is apalindrome

noon

Radar

Madam, I'm Adam. A man, a plan, a canal:

return copy; } function isPalindrome(str)// Assumes: str is a string// Returns: true if str is a palindrome, else false{

str =

strip(str.toUpperCase())

;

for(var i = 0; i < Math.floor(

str.length

/2); i++) {

if (

str.charAt(i)

!=

str.charAt(str.length-i-1)

) {

return false; } } return true; }

A man, a plan, a canal:

Panama!

must strip non-letters out of theword or phrasemake all chars uppercase inorder to be case-insensitivefinally, traverse and comparechars from each end

<!–- COMP

js09.html

11.10.2011 -->

^

view page

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 given, 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

<!–- COMP

js10.html

11.10.2011 -->

display each counter

view page

•

Arrays have predefined methods that allow them to be used as stacks,

queues, or other common programming data structures. var

stack

=

new

Array();

stack.push("blue");stack.push(12);

//

stack

is

now

the

array

["blue",

12]

stack.push("green");

//

stack

=

["blue",

12,

"green"]

var

item

=

stack.pop();

//

item

is

now

equal

to

"green"

Arrays (cont.)

var

q

=

[1,2,3,4,5,6,7,8,9,10];

item

=

q.shift();

//

item

is

now

equal

to

1,

remaining

//

elements

of

q

move

down

one

position

//

in

the

array,

i.e.

q[0]

equals

2

q.unshift(125);

//

q

is

now

the

array

[125,2,3,4,5,6,7,8,9,10]

q.push(244);

//

q

=

[125,2,3,4,5,6,7,8,9,10,244]

Date Object

•^

String & Array are the most commonly used objects in JavaScript

other, special purpose objects also exist

•^

the Date object 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

<!–- COMP519

js11.html

16.08.2006 -->

Time when page was loaded:

can pull out portions of the date using the methods and display as desired

here, determine if "AM" or "PM" andadjust so hour between 1-12 10:55:20 PM

view page

Another Example

<!–- COMP519

js12.html

11.10.2011 -->

Elapsed time in this year:

(note

: January is month 0)

divide into number of days, hours,minutes and seconds

view page

document Object

Internet Explorer, Firefox, Opera, etc. allow you to access information about anHTML document using the

document

object

<!–- COMP519

js13.html

16.08.2006 -->

document.write(…)

method that displays text inthe page

document.URL

document.URL

property that gives thelocation of the HTMLdocument

document.lastModified

property that gives the date &time the HTML document waslast changed

view page

navigator Object

<!–- COMP519

js14.html

16.08.2006 -->

Here is some text with alink.

<!

--

MSIE.css

--

a {text-decoration:none;

font-size:larger;color:red;font-family:Arial} a:hover {color:blue} <!-- Netscape.css

-->

a {font-family:Arial;

color:white;background-color:red}

view page