SlideShare ist ein Scribd-Unternehmen logo
1 von 13
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Was ist angesagt?

深入浅出Jscex
深入浅出Jscex深入浅出Jscex
深入浅出Jscex
jeffz
 
Jscex: Write Sexy JavaScript
Jscex: Write Sexy JavaScriptJscex: Write Sexy JavaScript
Jscex: Write Sexy JavaScript
jeffz
 
20070329 Java Programing Tips
20070329 Java Programing Tips20070329 Java Programing Tips
20070329 Java Programing Tips
Shingo Furuyama
 
Node 관계형 데이터베이스_바인딩
Node 관계형 데이터베이스_바인딩Node 관계형 데이터베이스_바인딩
Node 관계형 데이터베이스_바인딩
HyeonSeok Choi
 
スマートフォン勉強会@関東 #11 どう考えてもdisconなものをiPhoneに移植してみた
スマートフォン勉強会@関東 #11 どう考えてもdisconなものをiPhoneに移植してみたスマートフォン勉強会@関東 #11 どう考えてもdisconなものをiPhoneに移植してみた
スマートフォン勉強会@関東 #11 どう考えてもdisconなものをiPhoneに移植してみた
Taro Matsuzawa
 
Scala-对Java的修正和超越
Scala-对Java的修正和超越Scala-对Java的修正和超越
Scala-对Java的修正和超越
Caoyuan Deng
 

Was ist angesagt? (20)

深入浅出Jscex
深入浅出Jscex深入浅出Jscex
深入浅出Jscex
 
Codemash-Clojure.pdf
Codemash-Clojure.pdfCodemash-Clojure.pdf
Codemash-Clojure.pdf
 
Jscex: Write Sexy JavaScript
Jscex: Write Sexy JavaScriptJscex: Write Sexy JavaScript
Jscex: Write Sexy JavaScript
 
DevFest Istanbul - a free guided tour of Neo4J
DevFest Istanbul - a free guided tour of Neo4JDevFest Istanbul - a free guided tour of Neo4J
DevFest Istanbul - a free guided tour of Neo4J
 
Scala in Places API
Scala in Places APIScala in Places API
Scala in Places API
 
Coding in Style
Coding in StyleCoding in Style
Coding in Style
 
Clojure And Swing
Clojure And SwingClojure And Swing
Clojure And Swing
 
Grammarware Memes
Grammarware MemesGrammarware Memes
Grammarware Memes
 
20070329 Java Programing Tips
20070329 Java Programing Tips20070329 Java Programing Tips
20070329 Java Programing Tips
 
Node 관계형 데이터베이스_바인딩
Node 관계형 데이터베이스_바인딩Node 관계형 데이터베이스_바인딩
Node 관계형 데이터베이스_바인딩
 
Soft Shake Event / A soft introduction to Neo4J
Soft Shake Event / A soft introduction to Neo4JSoft Shake Event / A soft introduction to Neo4J
Soft Shake Event / A soft introduction to Neo4J
 
Dart
DartDart
Dart
 
Breaking the wall
Breaking the wallBreaking the wall
Breaking the wall
 
MongoDB Live Hacking
MongoDB Live HackingMongoDB Live Hacking
MongoDB Live Hacking
 
スマートフォン勉強会@関東 #11 どう考えてもdisconなものをiPhoneに移植してみた
スマートフォン勉強会@関東 #11 どう考えてもdisconなものをiPhoneに移植してみたスマートフォン勉強会@関東 #11 どう考えてもdisconなものをiPhoneに移植してみた
スマートフォン勉強会@関東 #11 どう考えてもdisconなものをiPhoneに移植してみた
 
Scala for Java programmers
Scala for Java programmersScala for Java programmers
Scala for Java programmers
 
Groovy intro for OUDL
Groovy intro for OUDLGroovy intro for OUDL
Groovy intro for OUDL
 
Scala-对Java的修正和超越
Scala-对Java的修正和超越Scala-对Java的修正和超越
Scala-对Java的修正和超越
 
Mary Had a Little λ (QCon)
Mary Had a Little λ (QCon)Mary Had a Little λ (QCon)
Mary Had a Little λ (QCon)
 
V8
V8V8
V8
 

Andere mochten auch (7)

Indian spirituality
Indian spiritualityIndian spirituality
Indian spirituality
 
Marshall.monday
Marshall.mondayMarshall.monday
Marshall.monday
 
Plagio. udea
Plagio. udeaPlagio. udea
Plagio. udea
 
Component Framework Primer for JSF Users
Component Framework Primer for JSF UsersComponent Framework Primer for JSF Users
Component Framework Primer for JSF Users
 
Adv html
Adv htmlAdv html
Adv html
 
RCEC Email 4.7.03 (b)
RCEC Email 4.7.03 (b)RCEC Email 4.7.03 (b)
RCEC Email 4.7.03 (b)
 
Advisor Jumpstart: JavaScript
Advisor Jumpstart: JavaScriptAdvisor Jumpstart: JavaScript
Advisor Jumpstart: JavaScript
 

Ähnlich wie tutorial5

楽々Scalaプログラミング
楽々Scalaプログラミング楽々Scalaプログラミング
楽々Scalaプログラミング
Tomoharu ASAMI
 
Coq to Rubyによる証明駆動開発@名古屋ruby会議02
Coq to Rubyによる証明駆動開発@名古屋ruby会議02Coq to Rubyによる証明駆動開発@名古屋ruby会議02
Coq to Rubyによる証明駆動開発@名古屋ruby会議02
Hiroki Mizuno
 
Robust Operations of Kafka Streams
Robust Operations of Kafka StreamsRobust Operations of Kafka Streams
Robust Operations of Kafka Streams
confluent
 
みゆっき☆Think#7 「本気で学ぶJavascript」
みゆっき☆Think#7 「本気で学ぶJavascript」みゆっき☆Think#7 「本気で学ぶJavascript」
みゆっき☆Think#7 「本気で学ぶJavascript」
techtalkdwango
 
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
Takuya Fujimura
 
Meta-objective Lisp @名古屋 Reject 会議
Meta-objective Lisp @名古屋 Reject 会議Meta-objective Lisp @名古屋 Reject 会議
Meta-objective Lisp @名古屋 Reject 会議
dico_leque
 

Ähnlich wie tutorial5 (20)

楽々Scalaプログラミング
楽々Scalaプログラミング楽々Scalaプログラミング
楽々Scalaプログラミング
 
Spark schema for free with David Szakallas
Spark schema for free with David SzakallasSpark schema for free with David Szakallas
Spark schema for free with David Szakallas
 
Coq to Rubyによる証明駆動開発@名古屋ruby会議02
Coq to Rubyによる証明駆動開発@名古屋ruby会議02Coq to Rubyによる証明駆動開発@名古屋ruby会議02
Coq to Rubyによる証明駆動開発@名古屋ruby会議02
 
Robust Operations of Kafka Streams
Robust Operations of Kafka StreamsRobust Operations of Kafka Streams
Robust Operations of Kafka Streams
 
みゆっき☆Think#7 「本気で学ぶJavascript」
みゆっき☆Think#7 「本気で学ぶJavascript」みゆっき☆Think#7 「本気で学ぶJavascript」
みゆっき☆Think#7 「本気で学ぶJavascript」
 
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
 
Scala introduction
Scala introductionScala introduction
Scala introduction
 
Meta-objective Lisp @名古屋 Reject 会議
Meta-objective Lisp @名古屋 Reject 会議Meta-objective Lisp @名古屋 Reject 会議
Meta-objective Lisp @名古屋 Reject 会議
 
SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generationSVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generation
 
Angular2 for Beginners
Angular2 for BeginnersAngular2 for Beginners
Angular2 for Beginners
 
Java Script Workshop
Java Script WorkshopJava Script Workshop
Java Script Workshop
 
Serializing EMF models with Xtext
Serializing EMF models with XtextSerializing EMF models with Xtext
Serializing EMF models with Xtext
 
Lisp Macros in 20 Minutes (Featuring Clojure)
Lisp Macros in 20 Minutes (Featuring Clojure)Lisp Macros in 20 Minutes (Featuring Clojure)
Lisp Macros in 20 Minutes (Featuring Clojure)
 
Coding for
Coding for Coding for
Coding for
 
MongoDB + node.js で作るソーシャルゲーム
MongoDB + node.js で作るソーシャルゲームMongoDB + node.js で作るソーシャルゲーム
MongoDB + node.js で作るソーシャルゲーム
 
Continuation Passing Style and Macros in Clojure - Jan 2012
Continuation Passing Style and Macros in Clojure - Jan 2012Continuation Passing Style and Macros in Clojure - Jan 2012
Continuation Passing Style and Macros in Clojure - Jan 2012
 
Command Liner with Scala
Command Liner with ScalaCommand Liner with Scala
Command Liner with Scala
 
SVGo workshop
SVGo workshopSVGo workshop
SVGo workshop
 
Spark Summit EU talk by Ted Malaska
Spark Summit EU talk by Ted MalaskaSpark Summit EU talk by Ted Malaska
Spark Summit EU talk by Ted Malaska
 
Introduction to Scalding and Monoids
Introduction to Scalding and MonoidsIntroduction to Scalding and Monoids
Introduction to Scalding and Monoids
 

Mehr von tutorialsruby

&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
tutorialsruby
 
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
tutorialsruby
 
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
tutorialsruby
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
tutorialsruby
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
tutorialsruby
 
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0
tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
tutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
tutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
tutorialsruby
 

Mehr von tutorialsruby (20)

&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
 
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
xhtml-documentation
xhtml-documentationxhtml-documentation
xhtml-documentation
 
xhtml-documentation
xhtml-documentationxhtml-documentation
xhtml-documentation
 
CSS
CSSCSS
CSS
 
CSS
CSSCSS
CSS
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 

Kürzlich hochgeladen

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Kürzlich hochgeladen (20)

DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 

tutorial5

  • 1. 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
  • 2. 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
  • 3. 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
  • 4. 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
  • 5. 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
  • 6. 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
  • 7. 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 }
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. 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