Object Overview. Built-in Objects -- String (cont d) Built-in Objects -- String &6&7XWRULDO -DYD6UFLSW (GZDUG;LD )HEUXDU\ Built-in objects

Size: px

Start display at page:

Download "Object Overview. Built-in Objects -- String (cont d) Built-in Objects -- String &6&7XWRULDO -DYD6UFLSW (GZDUG;LD )HEUXDU\ Built-in objects"

Veronica McCarthy
5 years ago
Views:

1 &6&7XWRULDO Object Overview -DYD6UFLSW (GZDUG;LD Built-in objects Array EvalError Object String Boolean Function RangeError SyntaxErro Date Math ReferenceError TypeError Error Number RegExp URIError )HEUXDU\ Navigator objects: window, form, Objects can have properties, methods and event handlers. e.g. for checkbox, Properties: checked, defaultchecked, type, name, value, form Methods: blur, focus, click Event handler: onclick Acknowledgement: Parts of slides are provided by Wael Abouelsaadat 1 2 Built-in Objects -- String Built-in Objects -- String (cont d) Properties constructor length prototype charat( index ) charcodeat([index]) concat( string2) indexof( SearchString, StartIndex) astindexof( 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 method anchor( anchorname ) blink( ) bold( ) fixed() fontcolor(colorvalue) fontsize( integer1-7) italics() link( locationorurl) big() small() strike() sub(), sup() Special inliine characters \ Double quote \ Single quote \\ Blackslas \b Backspace \t tab \n new line \r Carriage return \f form feed 3 4

2 Built-in Objects -- Math Built-in Objects -- Number & Boolean 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) 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 Objects Properties: constructor MAX_VALUE MIN_VALUE NaN NEGATIVE_INFINITY POSITIVE_INIFINITY prototype Methods: toexponential(value) tofixed(value) tolocalestring(value) tostring(value) toprecision( ) valueof( ) Boolean Objects Properties: constructor prototype Methods: tostring(booleanvalue) valueof( ) 5 6 Built-in Objects -- Date Built-in Objects -- Array 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 ) Properties constructor prototype concat( array2 ) join( SeparatorString ) pop( ) push( value or Object ) shift( ) unshift( ) reverse( ) slice( StartIndex, EndIndex ) sort( comparefunction ) splice( StartIndex, DeleteCount, item ) tolocalestring tostring( ) 7 8

3 Control Structures Control Structures (cont d) if else var boolchecked = new Boolean( true ); if( boolchecked.valueof( ) ){ // statements 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 9 10 Operators Global Functions and Statements Comparison ==,!=, === (strictly equals),!== (strictly does not equal), >, >=, <, <= Connubial +, -, *, /, % (module), ++, --, +value, -value Assignment =, +=, -=, *=, /=, %=, <<=, >=, >>=, >>>=, &=, =, ^= Boolean &&,,! Bitwise &,, ^, ~, <<, >>, >>> Object delete, in, instanceof, new, this Others typeof, void 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 11 12

4 Events Events (cont d) Event Support By Event Support By OnAbort Image onkeyup Document, Image, Link, TextArea. OnBlur Button, Checkbox, FileUpload, Layer, Password,Radio, Reset, onload Image,, Select, Submit, Text, TextArea,. onmousedown Button, Document, Link OnChange Select, text, input, elements onmouseout Layer, Link, Image OnClick Select, text, input, elements onmouseover Layer, Link, Image ondblclick Document, Image button elements, Link onmouseup Document, Image, Button elements, Link ondragdrop elements onmove onerror Image, onreset Form onfocus Button, Checkbox, FileUpload, Password, Radio, Reset, Select, onresize Submit, Text, TextArea,. onselect Text, textarea onkeydown Document, Image, Link, TextArea. onsubmit Form onkeypress Document, Image, Link, TextArea. onunload Navigator Object Hierarchy /Document/Form window (frame, self, top, parent) history document location... form button, radio, checkbox, text, password... Reference to objects: using dot notation following the hierarchy window.framename.document.formname.elementname.value or window.frames[i].document.forms[j].elements[k].value We can also use relative paths. the parent object of all objects. self or window: the current window top: topmost window parent: parent of the current window frame is a special type of window. methods: open, close, alert, confirm, prompt,... object arrays: frames[], history[],... Document each page has only one document object. properties: bgcolor, fgcolr, linkcolor, lastmodified, referrer,... document.write(...) object arrays: forms[], anchors[], images[], links[], Form properties: name,... object arrays: elements[] (such as radio, checkbox, text,... in source order) 15 16

5 Example -- Form Example -- Form (cont d) <html><head> <title>an Form Example</title>  </script> </head> <body> <FORM method="post" action= "... /cgi-bin/form.cgi" onsubmit="redir()"> <INPUT type="hidden" name="recipient" value="edward Xia"> <INPUT type="hidden" name="subject" value="an form example"> Your age: <INPUT type="text" name="user-age" size="2">< br/> Your gender:<input type="radio" name="user-gender" value="m">male <INPUT type="radio" name="user-gender" value="f">female< br/> Check the all names of the people listed whom you have heard about:< br/> <INPUT type="checkbox" name="knows-marc">marc Andreessen <INPUT type="checkbox" name="knows-lisa">lisa Schmeiser <INPUT type="checkbox" name="knows-al">al Gore <INPUT type="checkbox" name="knows-bbg">boutros Boutros-Ghali< br/> Check your listening interests (check all that apply):<br> <input type="checkbox" name="musictype" value="rock" checked> Rock <input type="checkbox" name="musictype" value="alternative"> Alternative <input type="checkbox" name="musictype" value="classical" checked> Classical <input type="checkbox" name="musictype" value="etc."> Anything else<br> Example -- Form (cont d) Example -- Form (cont d) What is your favorite Web browser? <SELECT name="favorite-web-browser"> <OPTION>Arena</OPTION> <OPTION>Cello</OPTION> <OPTION>Chimera</OPTION> <OPTION>Lynx</OPTION> <OPTION>MacWeb</OPTION> <OPTION>Mosaic</OPTION> <OPTION selected>netscape</option> <OPTION>SlipKnot</OPTION> <OPTION>Viola</OPTION> <OPTION>Web Explorer</OPTION> <OPTION>None of the above</option> </SELECT>< br/> Which of these ice cream flavors have you tried? <SELECT name="tried-ice-cream" size="3" multiple> <OPTION value="conservative">vanilla</option> <OPTION value="conservative">chocolate</option> <OPTION value="daring">cherry Garcia</OPTION> <OPTION value="strange">pizza Pancake</OPTION> </SELECT>< br/> 19 Guess the secret password: <INPUT type="password" name="password-guess">< br/> Do you have an informal nickname? <INPUT type="radio" name="nickname" value="no" checked>no <INPUT type="radio" name="nickname" value="yes">yes, it is: <INPUT type="text" name="user-nickname" size="12" maxlength="12">< br/> Enter your personal motto:<br/> <TEXTAREA name="user-motto" rows="2" cols="40"> All is well that ends well. </TEXTAREA>< br/> <INPUT type="submit" value="send this survey"> <INPUT type="reset" value="cancel this survey">< br/> </FORM> </body></html> 20

6 Example Example (cont d)  <html> <head> <title>using radio button, array</title>  Example (cont d) Interesting Example (1) -- Time & Date  <body onload="initial()"> <h1> 1 </h1> <form> <table> <tr><td>top</td><td>end</td><td>next</td><td>prev</td></tr> <tr> <td><input type="radio" name="topics" value="top" onclick="display(0) checked></td> <td><input type="radio" name="topics" value="end" onclick="display(1)"></td> <td><input type="radio" name="topics" value="next" onclick="display(2)"></td> <td><input type="radio" name="topics" value="prev" onclick="display(3)"></td> </tr> </table> </form> <P> Click the radio button to browse each chapter in 2. </body> </html> 23 <html><head><title>clock and date example</title>  24

Interesting Example (1) -- Time & Date (cont d) Interesting Example (2) -- Scrolling Message <body onload="showdateandtime()" onunload="cleartimeout(timeid)"> <center> <h2>time and Date</h2> <form

-- function rollingmsg() { msg = document.form1.text1.

value = msg timeid = settimeout("rollingmsg()",300) // --> <body onunload="cleartimeout(timeid)"> <h1>scrolling Message</h1> <form name="form1"> <input type="text" name="text1" value=" ---CSC309

7 Interesting Example (1) -- Time & Date (cont d) Interesting Example (2) -- Scrolling Message <body onload="showdateandtime()" onunload="cleartimeout(timeid)"> <center> <h2>time and Date</h2> <form name="form1"> Time: <input type="text" name="time" size=12> Date: <input type="text" name="date" size=10> </form> </center> </body> </html> 25 <htm><head><title>scrolling message</title>  <body onunload="cleartimeout(timeid)"> <h1>scrolling Message</h1> <form name="form1"> <input type="text" name="text1" value=" ---CSC309 assignment #1 is due on Oct. 18, it will be returned in one or two weeks!" size="50"> </form> rollingmsg(); </script></body></html> 26 Interesting Example (3) -- Automated Animations Interesting Example (3) -- Automated Animations (cont d) <html><head> <title>automated Animations</title> function initial(){ timedelay = 1000; counter = 0; numberofimages = 8; animation = new Array(); for (i = 0; i < numberofimages; i++) animation[i] = 'anim' + (i + 1) + '.jpg'; animateimages(); <body onload="initial()" onunload="cleartimeout(timeid)"> <h2>automated Animations</h2> <img src="image3.gif" name="animatedimage" width="50" height="60" border="0"> </body> </html> function animateimages(){ document.animatedimage.src = animation[counter++]; if(counter>= numberofimages) counter= 0; timeid = settimeout("animateimages()", timedelay); 27 28

What Is JavaScript? A scripting language based on an object-orientated programming philosophy.

What Is JavaScript? A scripting language based on an object-orientated programming philosophy. Each object has certain attributes. Some are like adjectives: properties. For example, an object might have