JavaScript

NET 3010

Introducing JavaScript
Client-Side

Server-Side
Programming

01/21/11

Programming

T03_NET3010_JS_01

What is JavaScript
Scripting language
Simple to learn
Extension to HTML
Even driven, object based
Client-based language
Not viewable with older browsers
Can not write files to the server / client
Can not read files from the client
Does not have graphics capabilities
01/21/11

T03_NET3010_JS_01

What can JavaScript do

Client side processing
Interact with users
Keyboard/ mouse/ page interaction
Scrolling, messages on status line
Form validation, calculations
Alert messages
Animate / change images
Detect browsers, versions, plug-ins
Create clocks, calendars, calculators
01/21/11

T03_NET3010_JS_01

The <script> Tag

Defines a script such as JavaScript
type attribute indicates the type of script
language attribute is deprecated

01/21/11

JavaScript

HTML

src attribute defines the URL to a file that contains

the script

T03_NET3010_JS_01

Objects
JavaScript is an object-oriented language
Objects contain properties, methods and event
handlers
Objects are related hierarchically

01/21/11

T03_NET3010_JS_01

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

Window

Object

01/21/11

DefaultStatus

separator

property

T03_NET3010_JS_01

Methods
Methods 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

Object

01/21/11

. write(message);

separator

T03_NET3010_JS_01

method

Alert Windows
Alert the use of some special condition
Use <p> before the JS
Do not use HTML tags
\n can be used

01/21/11

T03_NET3010_JS_01

Confirm Window
Presents a question and two buttons: OK and
Cancel
If 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( ) method
Store the user's response in a variable
Process the user's information

01/21/11

T03_NET3010_JS_01

10

Confirm Window Example

01/21/11

T03_NET3010_JS_01

11

Prompt Window
A 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 NULL
OK: Closes the window and sends the information
appearing in the text field to JS
Cancel: Cancel the current operation. The window is
closed and returns NULL to JS

01/21/11

T03_NET3010_JS_01

12

Prompt Window Example

01/21/11

T03_NET3010_JS_01

13

Event Handlers
Event handlers are code that executes when a user
performs some action
Start with the word on

OnMouseOut

window.status = ;
Return true

Event Hander

01/21/11

T03_NET3010_JS_01

Code

14

JS Event Handlers
Category
Window
Documents

Forms

Mouse
Keyboard

01/21/11

Event Handler
onload
onuload
onerror
onmove
onsize
onscroll
Onfocus
Onblur
Onchange
Onselect
Onsubmit
Onreset
Onkeydown
Onkeypress
Onclick
Ondblclick
Onmousedown
Onmouseup
Onmousemove
Onmouseout

Description
The browser has completed loading
The browser has completed unloading
An error in JS
The user has moved the window
The user has resized the window
The user has moved the scroll bar
The user has entered an input field
The user has exited an input field
The content of an input field has changed
The user has selected text within a input or text field
The user has submitted the form
The user has entered an input field
The user has pressed a key
The user has entered a key and released it
The user has clicked the mouse
The user has double clicked the mouse
The user has pressed down the mouse button
The user has released down the mouse button
The user has move the mouse over the element
The user has move the mouse off the element

T03_NET3010_JS_01

15

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

To run a JS command as a link

<a href = javascript:script>content</a>

01/21/11

T03_NET3010_JS_01

16

Variables
Declaration:
var varname;

Value assignation:
varname = value;

Keyword var is not required

Data types:
Numeric value: No quotation marks
Text string: Enclose in single or double quotation marks
Boolean: true or false
Null: Not value has yet been assigned to the variable

01/21/11

T03_NET3010_JS_01

17

Functions
Function syntax
function funcName( parameter ) {
JavaScript commands
return var
}

Function calling
When 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

18

Hide JS Code
Use comments to hide JS code from older browsers

01/21/11

T03_NET3010_JS_01

19

Case Study

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

01/21/11

T03_NET3010_JS_01

20

Arithmetic Statements
C type operators
Parsing number: Conversion from string to data
type
Integers: parseInt( )
var total = parseInt( prompt(Total Questions:

, ));

Floats: parseFloat( )

Number object: Five properties:

MAX_VALUE & MIN_VALUE
POSITIVE_INFINITY & NEGATIVE_INFINITY
NaN: Not Number

01/21/11

T03_NET3010_JS_01

21

Math Object
Method
abs(x)
acos(x)
asin(x)
atan(x)
atan2(x, y)
ceil(x)
cos(x)
exp(x)
floor(x)
log(x)
max(x)
min(x)
pow(x)
random(X)
round(x)
sin(x)
sqrt(x)
tan(x)

01/21/11

Constants
E
PI
LOG10E
LOG2E
SQRT1_2
SQRT2
LN2
LN10

T03_NET3010_JS_01

22

Tax Example

01/21/11

T03_NET3010_JS_01

23

Date Object
Date 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

24

Methods
Method
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)

01/21/11

Retrieve
Seconds
Minutes
Hour
Day of the month
Day of the week( 0 6 )
Month of the year ( 0 11 )
Four digit year
Milliseconds since Jan 1 / 70
Sets the seconds to s
Sets the min. to m
Sets the hours to h
Sets the month to M ( 0 11 )
Sets the year to y ( 4 digits)
Sets the time to t ( milliseconds)

T03_NET3010_JS_01

25

Working with Date Objects

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

26

Timed Commands
Time-delay commands:
setTimeout(command, delay );
Command is a JS command
Delay 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 / timedelay commands

01/21/11

T03_NET3010_JS_01

27

Selection Statements
Similar to C
if 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

28

if Example

01/21/11

T03_NET3010_JS_01

29

switch Example

01/21/11

T03_NET3010_JS_01

30

Case Study

Display time left in the

year:
daysLeft
hrLeft
minLeft
secLeft

Display current date

dateNow

Display current time:

timeNow

01/21/11

T03_NET3010_JS_01

31