JavaScript

NET 3010

01/21/11 T03_NET3010_JS_01 2

Introducing JavaScriptServer-Side

ProgrammingClient-Side

Programming

01/21/11 T03_NET3010_JS_01 3

What is JavaScriptScripting languageSimple to learnExtension to HTMLEven driven, object basedClient-based languageNot viewable with older browsersCan not write files to the server / client Can not read files from the clientDoes not have graphics capabilities

01/21/11 T03_NET3010_JS_01 4

What can JavaScript doClient side processingInteract with usersKeyboard/ mouse/ page interactionScrolling, messages on status lineForm validation, calculationsAlert messagesAnimate / change imagesDetect browsers, versions, plug-insCreate clocks, calendars, calculators

01/21/11 T03_NET3010_JS_01 5

The TagDefines a script such as JavaScripttype attribute indicates the type of scriptlanguage attribute is deprecatedsrc attribute defines the URL to a file that contains the script

HTM

L

Java

Scrip

t

01/21/11 T03_NET3010_JS_01 6

ObjectsJavaScript is an object-oriented languageObjects contain properties, methods and event handlersObjects are related hierarchically

01/21/11 T03_NET3010_JS_01 7

PropertiesA property is an attribute of an object.To access a property, the object name and the property name is required

Window . DefaultStatus

Object propertyseparator

01/21/11 T03_NET3010_JS_01 8

MethodsMethods are pieces of code that extract information about an object or change an object's properties.Methods always use parenthesis, attributes never use them.You could omit the window object

window.document . write(message);

Object methodseparator

01/21/11 T03_NET3010_JS_01 9

Alert WindowsAlert the use of some special condition

Use before the JSDo not use HTML tags\n can be used

01/21/11 T03_NET3010_JS_01 10

Confirm WindowPresents a question and two buttons: OK and CancelIf user presses OK, the return value is true.If user clicks cancel, the return value is false.The return value can be saved in a variable To process a confirm window:

Call the confirm( ) methodStore the user's response in a variableProcess the user's information

01/21/11 T03_NET3010_JS_01 11

Confirm Window Example

01/21/11 T03_NET3010_JS_01 12

Prompt WindowA prompt window contains a question, a small message space called a text field, and three clickable buttons

Clear: Erases everything that appears in the text field. The text field is set to NULLOK: Closes the window and sends the information appearing in the text field to JSCancel: Cancel the current operation. The window is closed and returns NULL to JS

01/21/11 T03_NET3010_JS_01 13

Prompt Window Example

01/21/11 T03_NET3010_JS_01 14

Event HandlersEvent handlers are code that executes when a user performs some actionStart with the word on

OnMouseOut =window.status = ;

Return true

Event Hander Code=

01/21/11 T03_NET3010_JS_01 15

JS Event HandlersCategory Event Handler Description

Window onload The browser has completed loadingDocuments onuload The browser has completed unloading

onerror An error in JSonmove The user has moved the windowonsize The user has resized the windowonscroll The user has moved the scroll bar

Forms Onfocus The user has entered an input fieldOnblur The user has exited an input fieldOnchange The content of an input field has changedOnselect The user has selected text within a input or text fieldOnsubmit The user has submitted the formOnreset The user has entered an input field

Mouse Onkeydown The user has pressed a keyKeyboard Onkeypress The user has entered a key and released it

Onclick The user has clicked the mouseOndblclick The user has double clicked the mouseOnmousedown The user has pressed down the mouse buttonOnmouseup The user has released down the mouse buttonOnmousemove The user has move the mouse over the elementOnmouseout The user has move the mouse off the element

01/21/11 T03_NET3010_JS_01 16

JS in Response to EventsTo insert an event handler as an element attribute< element onevent = script >

To run a JS command as a linkcontent

01/21/11 T03_NET3010_JS_01 17

VariablesDeclaration:var varname;

Value assignation:varname = value;

Keyword var is not requiredData types:

Numeric value: No quotation marksText string: Enclose in single or double quotation marksBoolean: true or falseNull: Not value has yet been assigned to the variable

01/21/11 T03_NET3010_JS_01 18

FunctionsFunction syntaxfunction funcName( parameter ) { JavaScript commands return var}

Function callingWhen a browser encounters a function, it bypasses without executing it. The function is only execute when called by another JS command.

01/21/11 T03_NET3010_JS_01 19

Hide JS CodeUse comments to hide JS code from older browsers

01/21/11 T03_NET3010_JS_01 20

Case Study

5Write a JS t to create links to email addresses without having the email explicit in the page

01/21/11 T03_NET3010_JS_01 21

Arithmetic StatementsC type operatorsParsing number: Conversion from string to data type

Integers: parseInt( )var total = parseInt( prompt(Total Questions: , ));

Floats: parseFloat( )Number object: Five properties:

MAX_VALUE & MIN_VALUEPOSITIVE_INFINITY & NEGATIVE_INFINITYNaN: Not Number

01/21/11 T03_NET3010_JS_01 22

Math ObjectMethod Constants

abs(x) Eacos(x) PIasin(x) LOG10Eatan(x) LOG2Eatan2(x, y) SQRT1_2ceil(x) SQRT2cos(x) LN2exp(x) LN10floor(x)log(x)max(x)min(x)pow(x)random(X)round(x)sin(x)sqrt(x)tan(x)

01/21/11 T03_NET3010_JS_01 23

Tax Example

01/21/11 T03_NET3010_JS_01 24

Date ObjectDate objects contain information about a specified date and time

Creating a date and time variable

var = new Date(month day, year hr:min:sec);var = new Date(year, month, day, hr, min, sec);var = new Date();

Date in milliseconds since Jan 1, 1970

01/21/11 T03_NET3010_JS_01 25

MethodsMethod Retrieve

SecondsMinutesHourDay of the monthDay of the week( 0 6 )Month of the year ( 0 11 )Four digit yearMilliseconds since Jan 1 / 70Sets the seconds to sSets the min. to mSets the hours to hSets the month to M ( 0 11 )Sets the year to y ( 4 digits)Sets the time to t ( milliseconds)

date.getSeconds()date.getMinutes()date.getHour()date.getDate()date.getDay()date.getMonth()date.getFullYear()date.getTime()date.setSeconds(s)date.setMinutes(m)date.setHours(h)date.setMonth(M)date.setFullYear(y)date.setTime(t)

Working with Date Objects

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 26

01/21/11 T03_NET3010_JS_01 27

Timed CommandsTime-delay commands:setTimeout(command, delay );

Command is a JS commandDelay is in milliseconds

clearTimeout();Cancels the time delay command

Running commands at specific intervals:setInterval(command, interval);clearInterval();

You can have more than one timed-interval / time-delay commands

01/21/11 T03_NET3010_JS_01 28

Selection StatementsSimilar to Cif statements:if (expression) statement;

Switch statements:switch(var) { case value: statement; break; ...

default: statement;}

Conditional operators(condition) ? truevalue : falsevalue

01/21/11 T03_NET3010_JS_01 29

if Example

01/21/11 T03_NET3010_JS_01 30

switch Example

01/21/11 T03_NET3010_JS_01 31

Case Study

Display current datedateNow

Display current time:timeNow

Display time left in the year:daysLefthrLeftminLeftsecLeft

Slide 1Slide 2Slide 3Slide 4Slide 5Slide 6Slide 7Slide 8Slide 9Slide 10Slide 11Slide 12Slide 13Slide 14Slide 15Slide 16Slide 17Slide 18Slide 19Slide 20Slide 21Slide 22Slide 23Slide 24Slide 25Slide 26Slide 27Slide 28Slide 29Slide 30Slide 31