Advanced Javascript - Binghamton University

tacitmarigoldInternet και Εφαρμογές Web

25 Ιαν 2014 (πριν από 3 χρόνια και 6 μήνες)

213 εμφανίσεις

Advanced Javascript

Dick Steflik

Binghamton University

What we’re going to do


Lesson 1


Pretest & Review of Javascript Basics


Lesson 2


Event Handling


Lesson 3


HTML Forms Validation


Lesson 4


Advanced Forms Handling

What we’re going to do (cont.)


Lesson 5


Javascript & Database Interactivity


Lesson 6


Dynamic HTML


Cascading Style Sheets, scripting, DOM


Lesson 7


Animation


Lesson 8


Post test


Lesson 1

Javascript Basics Review

What is JavaScript


Object based (not object oriented)
programming language


very limited object creation


a set of pre
-
defined objects associated with


HTML document structure


many HTML tags constitute JS Objects


Browser functionality


provides a limited API to Browser functionality

Where did it come from


Originally called LiveScript at Netscape


started out to be a server side scripting language for
providing database connectivity and dynamic HTML
generation on Netscape Web Servers


Netscape decided it would be a good thing for their
browsers and servers to speak the same language so it
got included in Navigator


Netscape in alliance w/Sun jointly announced the
language and its new name Java Script


Because of rapid acceptance by the web community
Microsoft forced to include in IE Browser

Browser compatibility


For the most part Java Script runs the same
way in all popular browsers


There are a number of areas where there are
slight differences in how Java Script will
run


There will be a separate set of slides
addressing these differences and making
your pages browser neutral.

JavaScript…Java ?


There is no relationship other than the fact
that Java and JavaScript resemble each
other (and C++) syntactically


JavaScript is pretty much the de
-
facto
standard for client
-
side scripting (Internet
Explorer also provides VBScript & JScript)


In Netscape browsers there is an API (Live
Connect) that allows JavaScript and Java
applets embedded in the same page to
communicate.

What can it be used for


Some pretty amazing things….


Text animation


graphic animation


simple browser based application


HTML forms submission


client
-
side forms data validation (relieving the
server of this task)


web site navigation

What do I need to get started


A web browser


Netscape Navigator 4.x or later


MS Internet Explorer 3.x or later


A text Editor


Wordpad, Notepad


Vi, Emacs, xemacs

Process


Open your text editor


create a file containing html and Javascript


save as text file with file type .htm or .html


open your browser


click on file, open file


locate the file you just created


open file in browser


Putting JavaScript into your HTML


in an external file


collect commonly used functions together into
external function libraries on the server


added benefit of privacy from all but the most
curious users


in
-
line with your HTML


as an expression for an HTML tag attribute


within some HTML tags as Event Handlers

<SCRIPT>…</SCRIPT>


<SCRIPT language=…. src=……></SCRIPT>


The <SCRIPT> tag indicates to the browser the
beginning of an embedded script; </SCRIPT>
indicates the end of an embedded script.


the “language” attribute indicates the script
processor to be used


the “src” attribute indicates the URL of a file on
the server containing the script to be embedded


Scripts


Since scripts are placed in line with your
HTML older browsers will attempt to
render them as text.


To preclude this hide them in side of an
HTML comment . <!
--

--
>


For commenting your JavaScript use the
/*…*/ or //

<SCRIPT>


<SCRIPT LANGUAGE=“JavaScript”>


<!
--

start hiding code from old browsers>


Your


Javascript


Code


Goes


Here


// Stop Hiding code
--
>


</SCRIPT>

Programming Fundamentals


Value Types


String “Sample”


Number 2.52 , 5 , .5


Boolean true, false


Null null


Object
-

all properties and methods belonging
to the object or array


Function
-

a function definition


Variables


Naming


start with alpha followed by alphameric (and _)


Creating


use the
var
keyword


var myName


definition and initialization can be combined


var myName = “Dick”

Arrays


One dimensional arrays


var myarray = new Array( ) //empty array


var myarray1 = new Array(10) // 10 elements


var myarray2 = new Array(2,4,6) // 3 elements
initialized to 2, 4, and 6 respectively


0 based
-

myarray[0] is first element

User defined objects


Implemented as associative arrays


var point = new Object() // empty object


point.x = 5 ; point.y = 3; // no longer empty


var newpoint = {x:4 , y:5} // object literal form


var anotherpoint = new Object( )


anotherpoint = newpoint //object assignment

User defined functions


Function definition:


function sum(x,y) { return x + y; }


Function Constructor


var sum = Function(“x”,”y”, “return x + y;”)


Function literal format (Javascript 1.2)


var sum = Function(x,y) {return x + y;}


a function assigned to a property of an
object is called a method of the object


within the body of a function arguments[]
contains an array of the arguements

Built
-
in functions


Many commonly used functions are built
into the language for:


string manipulations


math operations


built
-
in object methods


parsing


dynamic expression evaluation



Regular Expressions


Javascript 1.2 supports using the same
syntax as Perl 4


specified literally asa sequence of
characterswith forward slashes (/) or as a
Javascript string passed to the RegExp( )
constructor

Regular Expression Syntax

/n,/r,/t

match literal newline, carraige return, tab

\
\
,
\
/,
\
*

match a special character literally, ignoring or escaping its special meaning

[…]

Match any one character between the brackets

[^…]

Match any one character not between the brackets

.

Match any character other than the newline

\
w,
\
W

Match any word
\
non
-
word character

\
s,
\
S

Match any whitespace/non
-
whitespace

\
d,
\
D

Match any digit/non
-
digit

^, $

require match at beginning/end of a string or in multi
-
line mode,


beginning/end of a line

\
b,
\
B

require a match at a word/non
-
word boundary

?

Optional term : Match zero or one time

+

Match previous term one or more times


Regular Expressions (more)

*

Match term zero or more times

{n}

Match pervious term n times

{n,}

Match previous term n or more times

{n,m}

Match prev term at least n time but no more than m times

a | b

Match either a or b

(sub)

Group sup
-
expression

sub

into a single term and remember the text that it matched

\
n

Match exactly the same chars that were matched by sup
-
expression number n

$n

In replacement strings, substitute the text that matched the nth sub
-
expression

Object Based not Object Oriented


Javascript treats the browser’s objects as a
pre
-
defined set of objects to which
Javascript provides an API.


Javascript, in addition to being a
programming language, is meant to be a
way to program a user’s browser


Object Hierarchy

window

link

anchor

layer

form

applet

image

area

history

document

location

toolbar

text

radio

button

fileUpload

select

textarea

password

checkbox

reset

submit

option

Objects


window
-

the current browser window


window.history
-

the Netscape history list


window.document
-

the html document currently in the
browser client area


window.location
-

the browser location field


window.toolbar
-

the browser toolbar


window.document.link
-

an array containing all of the links
in the document


window.document.anchor
-

an array of all the anchor
points in the document


Objects (more…)


Window.document.layer
-

a named document layer


window.document.applet
-

a named java applet area


window.document.image
-

a named image tag


window.document.area
-

a named area


window.document.form
-

a named form or the default form


ect, ect

A few examples...


window.location = “http://www.yahoo.com”


will take you to the specified URL (like a goto)


window.history.back()


back( ) is a method on history


will be like clicking the back button in Nav 3


in Nav 4 will take you back to prev window


window.history.goto(1)


takes you back to first URL in history array



The Object Model


It is very important to understand the object
model


each object has its own properties, some of
which are read only some of which you can
be set directly by assignment (as location)


each object also has a set of behaviors
called methods

Object Model

defaultValue

form

name

type

value

Red
-

gettable and settable

=

B l u r ()

focus()

handleEvent

Select()

Text Object

HTML text tag

Lesson 2

Event Handling

Object Event Handlers


Most of the objects that make up the Document Object
Model respond to asynchronous, user generated events
through predefined event handlers that handle the event and
transfer control to a user provided event handling function


Each object has particular events that they will respond to


the way you specify an event handler is by adding an
additional attribute to the HTML tag that specifies the event
and the particular handler


<input name=bt1 type=button value=ok onClick=“acb( );”>


if the button is click the function abc( ) will be run

Alert

The “Alert” function is useful in user notification and debugging of
Javascripts.


Pops up a message in a pop
-
up dialog box


Ex, alert(“help, help, help”);

Events


onAbort


onBlur


onChange


onClick


onError


onFocus


onLoad


onMouseOut


onMouseOver


onReset


onSelect


onSubmit


onUnload

onAbort


Activated when a user aborts the loading of
an image

<img name=ball src=images/ball.gif onAbort=“alert(‘You missed a nice picture’)”>

onBlur


Used with frame, select, text, textarea and
window objects


invoked when an object loses focus


use with select, text and textarea for data
validation


onChange


Used with select, text and textarea objects


use instead of onBlur to validate only if a
value has changed

<form>

Color: <select onChange=“processSelection()”>

<option value=“R”>Red

<option value=“G”>Green

<option value=“B”>Blue

</select>

</form>

onClick


Used with button, checkbox,link, radio,
reset, and submit objects.


<input type=button name=btn1 value=“Click Me” onClick=“alert(‘button was clicked’;” >

onError


Used with image and window objects to
invoke a handler if an error occurs while an
image or window is loading.


Setting window.onerror = null will prevent
users from seeing JavaScript generated
errors

onFocus


Used with frame, select, text, textarea and
window objects.


Just the opposite of onBlur; i.e. invoked
when the object gets focus.

<body bgcolor=“lightgrey” onBlur=“document.bgColor=‘black’ onFocus=“document.bgColor=‘white’” >

onLoad


Used with window, frame and image objects (use
with <body ….><frameset ….> and <img ...>)



Activated when the body, frameset, or
image is loaded


<img name=spinball src=images/spinball.gif onLoad=“startAnimation(this)”>

onMouseOut and onMouseOver


Used with area and link objects


user moves mouse off of an area or link

<map name=flower>

<area name=top coords=“0,0,200,300 href=“javascript:displayMessage()”


onMouseOver=“self.status=‘when you see this message click your left mouse button’ ;


return true”


onMouseOut=“self.status = ‘’ ; return true”>

onReset


Used with form objects


<form onReset=“alert(‘the form has been reset’)” >

onSelect


Used with text and textarea objects


run some Javascript whenever a user selects
a piece of text in a text or textarea object

<input type=text name=line onSelect=“showHelp()” >

onSubmit


Use with form objects to run a handler
whenever a form has been submitted.


Usefull to validate all fields prior to actual
submission

onUnload


Just like onLoad but the handler is run when
the window/frame is exited

<body onUnload=“cleanup()” >

Lesson 3

HTML Forms Handling

the Form object


Tag : <form name = n method = get|post action=URL>


Properties:


action
-

action attribute of tag


elements[ ]
-

creeated from like named form elements


encoding
-

ENCTYPE attribute of tag


length
-

length of an elements array


method
-

method attribute of tag


name
-

name attribute of tag


target
-

target attribute of tag, where to display response page


Methods


handleEvent( )


reset( )
-

reset all elements to initial value


submit( )
-

submit to server for processing (like submit button)

Text Based Objects


text


password


textarea


hidden

Properties and methods


Tag: <input name=name type=fieldtype ….>


Properties:


defaultValue
-

value attribute of tag


form
-

form that this field is an element of


name
-

name attribute of tag


type
-

type attribute of tag (text, password, textarea, hidden)


value
-

user entered value or value attribute of tag


Methods:


blur( ) *
-

unselects any selected text


focus( ) *
-

readies the field for user input


handleEvent( ) *


select( ) *
-

selects the text in the field


* doesn’t apply to hidden fields

Additional Events


onKeyDown =


as soon as the key is depresses


allows filtering of key strokes before the character is displayed


onKeyUp =


as soon as key is released


onKeyUp = signals the end of a key down and a key up sequence

Carriage returns...


Forewarned is forearmed….


Windows

\
r
\
n


Mac


\
r


Unix


\
n

Button objects


button


submit


reset


checkbox


radio

button, submit and reset


Properties:


name
-

name attribute of tag


type
-

type attribute of tag (button | submit | reset )


value
-

value attribute of tag (text on face of button )


Methods:


click( )
-

simulates the button being clicked on


handleEvent( )
-



Additional events
-


onMouseDown =


onMouseUp =

checkbox object


Properties:


checked
-

true if checked, false otherwise; setting doesn’t cause a click


defaultChecked
-

true if CHECKED attribute is present, false otherwise


name
-

name attribute of the tag


type
-

type attribute of the tag


value
-

value attribute of the tag


Methods:


click( )
-



handleEvent( )
-


Additional events


onMouseDown =


onMouseUp =

radio object


one of n choices


Properties:


checked
-

true if checked, false otherwise; setting doesn’t cause a click


defaultChecked
-

true if CHECKED attribute is present, false otherwise


name
-

name attribute of the tag


type
-

type attribute of the tag


value
-

value attribute of the tag


Methods:


click( )
-



handleEvent( )
-


Additional events


onMouseDown =


onMouseUp =


select object


Properties:


length
-

number of option elements


option[ ]
-

element array of the options tags


name
-

name attribute of the tag


selectedIndex
-

index of selected option


options[i].defaultSelected
-



options[i].index


options[I].selected


Methods:


blur( )
-


focus()
-



handleEvent( )
-



Lesson 4

Advanced Forms Handling

Lesson 5

Javascript & Database Interactivity

Lesson 6

Dynamic HTML

Lesson 7

Animation

Lesson 8

Wrap
-
up and Exam