tutorial5

Programming on the Web(CSC309F)

Tutorial 5: JAVASCRIPT
TA:Wael Abouelsaadat
WebSite: http://www.cs.toronto.edu/~wael

Office-Hour: Friday 12:00-1:00 (SF2110)

Email: wael@cs.toronto.edu

1

JavaScript

Ø JavaScript vs. JScript:
§ Jscript Homepage: http://msdn.microsoft.com/scripting/default.htm
§ JavaScript Homepage: http://developer.netscape.com/tech/javascript/index.html

ØJavaScript Built-in Data Types:
§ Boolean (true or false)
§ Null
§ Number ( double-precision 64-bit format)
§ Object (encompassing the Array object)
§ String
§ Undefined

Ø JavaScript Built-in Objects:

Array1 Boolean Date Error2
EvalError2 Function1 Math Number1
Object1 RangeError2 ReferenceError2 RegExp 3

String1 SyntaxError2 TypeError2 URIError2
(1) ECMA Level 1 (2) ECMA Level 2 (3) ECMA Level 3

2

JavaScript Built-in Objects

Ø String Object:
§ Properties:
• constructor length prototype

§ Methods:
• charAt( index ) charCodeAt([index]) concat( string2)
indexOf( SearchString, StartIndex ) lastIndexOf( searchString, StartIndex ) localeCompare( string2 )
match( regExpression ) replace( regExpression, replaceString) slice( startIndex, endIndex )
split( “delimiterCharacter”, limitInteger ) substr( start, length ) substring( indexA, indexB )
toLocaleLowerCase( ) toLocaleUpperCase( ) toLowerCase( )
toUpperCase() toString() valueOf()

§ Formatting methods:
• anchor( “anchorName”), blink( ) bold( )
fixed() fontcolor(colorValue) fontsize( integer1-7)
italics() link( locationOrURL) big()
small() strike() sub(), sup()

§ Special inline characters:
• ” Double quote ’ Single quote Blackslash
b Backspace t tab n new line
r Carriage return f form feed

3

JavaScript Built-in Objects

Ø Math Object:
§ Properties:
• E( Euler’s constant) LN2(Natural log of 2) LN10(natural log of 10)
LOG2E(log base-2 of E) LOG10E(log base-10 of E) PI
SQRT1_2( square root of 0.5) SQRT2(square root of 2)

§ Methods:
• abs( value ) acos( value ) asin( value )
atan( value ) atan2( value1, value2 ) ceil( value )
cos( value ) exp( value ) floor( value )
log( value ) max( value1, value2 ) min( value1, value2 )
pow( value1, value2 ) random( ) round( value )
sin( value ) sqrt( value ) tan( value )

Ø Number Object:
• Properties:
• constructor MAX_VALUE MIN_VALUE
NaN NEGATIVE_INFINITY POSITIVE_INIFINITY
prototype

§ Methods:
• toExponential( value ) toFixed( value ) toLocaleString( value )
toString( value ) toPrecision( ) valueOf( )

4

JavaScript Built-in Objects (cont’d)
Ø Boolean Object:
• Properties:
• constructor prototype

§ Methods:
• toString( BooleanValue ) valueOf( )

Ø Date Object:
§ Methods:
• getFullYear( ) getYear( ) getMonth( )
getDate( ) getDay( ) getHours( )
getMinutes( ) getSeconds( value ) getTime( value )
getMilliseconds( ) getUTCFullYear( value1, value2 ) getUTCMonth( value1, value2 )
getUTCDate( value1, value2 ) getUTCDay( ) getUTCHours( value )
getUTCMinutes( ) getUTCSeconds( ) tgetUTCMilliseconds( )
setYear( value ) setFullYear( value ) setMonth( value )
setDate ( value ) setHours( value ) setMinutes( value )
setSeconds( value ) setMilliseconds( value ) setTime( value )
setUTCFullYear( value ) setUTCMonth( value ) setUTCDate ( value )
setUTCHours( value ) setUTCMinutes( value ) setUTCSeconds( value )
setUTCMilliseconds( value ) getTimezoneOffset( ) toDateString( )
toGMTString( ) toLocaleString( ) toLocateTimeString( )
toString( ) toTimeString( ) toUTCString( )
parse( “a date string”) UTC( date values )

5

JavaScript Built-in Objects (cont’d)
Ø Array Object:
• Properties:
• constructor prototype

§ Methods:
• concat( array2 ) join( SeparatorString ) pop( )
push( value or Object ) shift( ) unshift( )
reverse( ) slice( StartIndex , EndIndex ) sort( compareFunction )
splice( StartIndex, DeleteCount, item ) toLocaleString toString( )

6

JavaScript Control Structures
Ø If… Else: var boolChecked = new Boolean( true );
if( boolChecked.valueof( ) ){
}
Ø for Loops: var nIndex, nCount = 10;
for( var nIndex= 0; nIndex < nCount ; nIndex++ ) {
// statements
}
Ø while Loops: var nIndex, nCount = 10;
while( nIndex < nCount ) {
// statements
nIndex++;
}
Ø do-while Loops: var nIndex, nCount = 10;
do{
// statements
nIndex++;
} while(nIndex < nCount )
Ø with Statement: function seeColor( form )
with( form.colorsList ){
newColor = (options[selectedIndex].text);
}
}
Øswitch Statement: switch( nPrice ){
case 10: // statements
break;
case 20: // statements
break;
default: // statements 7
}

JavaScript Operators
Ø Comparison Operators:
== , != , === (strictly equals), !== (strictly does not equal), > , >=, < , <=

Ø Connubial Operators:
+, -, *, /, % (module), ++, --, +value, -value

Ø Assignment Operators:
=, +=, -=, *=, /=, %=, <<=, >=, >>=, >>>=, &=, |=, ^=

Ø Boolean Operators:
&&, ||, !

Ø Bitwise Operators:
&, |, ^, ~, <<, >>, >>>

Ø Object Operators:
delete, in, instanceof, new, this

Ø Other Operators:
typeof, void

8

JavaScript Global Functions and Statements
Ø Global Functions:
§ decodeURI( “encodedURI” )
§ decodeURIComponent(“encodedURIComponent” )
§ encodeURI( “URIString” )
§ encodeURIComponent( “URIComponentString” )
§ escape( “URIString” )
§ unescape( “escapedURIString” )
§ eval( “string” ) // evaluate any JavaScript statement or expression stored as string
§ isFinite( number ) // checks if number is beyond JavaScript ability to handle
§ isNan( expression ) // tests whether a value is a number or not
§ Number( “string” ) // converts a string to a numeric value
§ parseFloat( “string” ) // converts a string to a float
§ parseInt( “string” , radix ) // converts a string to an integer
§ toString( ) // returns a string representation
§ unwatch( ) // for debugging purposes
§ watch( ) // for debugging purposes

Ø Statements:
§ const // e.g. const FREEZING_F = 32;
§ var // e.g.: var temperature = 32;
§ // comments

9

JavaScript Events
Event Supported By
OnAbort Image
OnBlur Button, Checkbox, FileUpload, Layer, Password,Radio, Reset, Select, Submit, Text, TextArea, Window.
OnChange Select, text, input elements
OnClick Select, text, input elements
onDblClick Document, image button elements, Link
onDragDrop Window elements
onError Image, Window
onFocus Button, Checkbox, FileUpload, Password, Radio, Reset, Select, Submit, Text, TextArea, Window.
onKeyDown Document, Image, Link, TextArea.
onKeyPress Document, Image, Link, TextArea
onKeyUp Document, Image, Link, TextArea
onload Image, Window.
onMouseDown Button, Document, Link
onMouseOut Layer, link, image
onMouseOver Layer, link, image
onMouseUp Document, image, button elements, link
onMove Window
onReset Form
onResize Window
onSelect Text, textarea

onSubmit Form
10
onUnload Window

JavaScript – Applet Communication
Ø test.html
<html>
<head><title>test</title></head>
<body>
<h1>This is a test of applets</h1>
<hr></hr>
<applet name="testapplet" code="TestApplet.class" height="300" width="300">
<param name="text" value="Grizzly Dave!"></param>
Text displayed by non-java enabled browsers
</applet>
<hr></hr>
<form>
<input type="button“ onclick="alert(document.testapplet.getText())“ value="Get Data From Applet">
</form>
</body>
</html>
Ø TestApplet.java
import java.applet.*;
import java.awt.*;

public class TestApplet extends Applet {
String text = "error";
public void init() {
text = getParameter("text");
}
public void paint(Graphics g) {
g.drawString(text,50,50);
}
public String getText() {
return text;
}
} 11

DOM Hierarchy
Window
(frame,self,top,parent)

navigator screen history document location event

link stylesheets applets form images plugins embeds

anchor all
textarea text radio button reset select

selection
[elements]
option
password checkbox submit

style

12

Sites:

Ø JavaScript
§ http://developer.netscape.com/docs/manuals/javascript.html
§ http://www.gatescript.com/
§ http://www.devguru.com/Technologies/ecmascript/quickref/javascript_intro.html
§ http://webdeveloper.earthweb.com/webjs/
§ http://www.jsworld.com/

Ø Dynamic HTML
§ http://www.dynamicdrive.com/
§ http://www.htmlguru.com/guru.html
§ http://www.w3schools.com/dhtml/

13

tutorial5

More Related Content

What's hot

Viewers also liked

Similar to tutorial5

More from tutorialsruby

Recently uploaded

tutorial5