CIS 593004 Applications of Information Technology II Building the Distributed Object Web

1
CIS 5930-04 Applications of Information
Technology II Building the Distributed Object Web
Lectures on JavaScript I Basic Web Scripting
Language and use in HTML Pages

• Spring Semester 2001 MWF 230 pm - 320 pm
• Instructors Geoffrey Fox and Bryan Carpenter
• Dept. of Computer Science
• School of Computational Science and Information
  Technology
• 400 Dirac Science LibraryFlorida State
  UniversityTallahassee
• Florida 32306-4120
• http//www.csit.fsu.edu
• fox_at_csit.fsu.edu 850-644-4587
• dbc_at_csit.fsu.edu 850-644-0180
• http//old-npac.csit.fsu.edu/users/gcf/javascriptI
  march99/addonsummary.html

2
Outline

• Java vs. JavaScript, Interpreters vs. Compilers
• JavaScript Basics and Syntax
• JavaScript Core Objects
• JavaScript Events
• Client-side JavaScript (the basic browser AWT)
• JavaScript Object Model
• Following Lecture Set is Advanced Topics
• Cookies, LiveConnect, and LiveWire, Security, W3C
  DOM, Dynamic HTML
• Some of this material was prepared by Tom Scavo

3
General Remarks

• JavaScript (originally called LiveScript) is a
  web scripting language for clients and servers
• Client-side JavaScript facilitates rapid
  prototyping and is more responsive than CGI
• Client-side JavaScript is particularly useful for
  frameset documents and HTML forms
• XML is scripted in same way but current browsers
  dont fully support this as we described in DOM
  lectures
• JavaScript is also used to script in other
  applications such as VRML

4
Good References

• JavaScript Bible, 4th Edition, Gold Edition ,
  Danny Goodman, Hungry Minds, Inc ISBN
  0764547186, January 2001 (4 star, 19,621 Amazon)
• http//www.dannyg.com/
• This will cover (for first time) NN 6 but wont
  be out to spring 2001 for paperback and later
  for more complete hardback
• Dynamic HTML The Definitive Reference by Danny
  Goodman, O'Reilly Associates ISBN 1565924940,
  August 1998 (4.5 star, 1190 Amazon)
• http//www.oreilly.com/catalog/dhtmlref/
• Download the latest JavaScript manuals from
  Netscapehttp//developer.netscape.com/tech/javasc
  ript/index.html
• A set of slightly dated resources
• http//aspen.csit.fsu.edu/webtech/webpage/index.ht
  ml

5
Why would you use JavaScript I?

• Examples http//old-npac.csit.fsu.edu/projects/tu
  torials/JavaScript/examples.html
• Originally JavaScript was designed to do what you
  think Java should do -- elegant dynamic animation
  on the client side
• Then along came Java and JavaScript was eclipsed
  as it was just Netscape and not so well designed
• Netscape tried to make it a server side language
  (LiveWire) instead of Perl but Java was much
  better here as well
• JavaScript lived on for simple arithmetic on
  client side to produce somewhat better frames (as
  clicking on a link can call a JavaScript function
  instead of just loading a URL) and to quickly
  check forms client side without going back to
  server which is slow
• A serious weakness was that dynamic aspects of
  JavaScript could only be used at load time and
  other changes of JavaScript required a reload
  which is real ugly and slow

6
Why would you use JavaScript II?

• Then along came Microsoft and Netscape became
  distracted and quality of Java on the client side
  suffered and in fact is still problematical as
  Java in the browser has poor performance and lags
  Suns version (NN6 addresses with proper Sun
  Java 2)
• Further the Web Consortium W3C never really liked
  Java butting in and thought HTML was the answer
• JavaScript is Java with HTML and browser as AWT
• W3C came along with XML and the DOM (Document
  Object Model)
• In particular dynamic HTML extensions allowed one
  to get many benefits of JavaScript dynamically
  without reloading .
• Now all this was screwed up in version 4 browsers
  -- especially by Netscape -- and so the vision
  was obscured!
• IE5 is OK and NN6 better but too incomplete

7
Why would you use JavaScript III?

• So Java is a good low level tool and how you
  program your stock market simulation downloaded
  from the online broker
• However dynamical HTML and JavaScript is becoming
  preferred method of client implementations
• http//old-npac.csit.fsu.edu/projects/tutorials/DH
  TML (NN4, IE5 Not NN6)
• Use JavaScript to manipulate components of
  documents and Java to do arithmetic
• e.g. suppose you want to make your site
  accessible to blind. Then JavaScript identifies
  document components and hands text nuggets to
  Java voice synthesizer and image to fancy
  captioning system
• As world develops HTML JavaScript will become
  XML and HTML -- both with JavaScript to capture
  dynamic issues
• On Server, Java always wins (unless you use C
  for performance)

8
Why would you use JavaScript IV?
Text Computer
LanguageHTML---gt JavaScript
Java lt----- C

• Typically JavaScript is invoked from HTML and
  HTML text and JavaScript text are intertwined
• If you need to make a dynamic page from C Perl
  or Java you must write the HTML from these
  languages
• You can invoke applets from HTML but HTML and
  applet actions are not linked. In case of
  JavaScript HTML and JavaScript are closely linked
• JavaScript is an example of an important concept
  -- the domain specific interpreter which we can
  expect to be of growing importance
• Note Postscript is an interpreter for text
  layout MATLAB an interpreter for Matrix
  arithmetic, Mathematica or Maple for Mathematics
  ..

9
Version History

• JavaScript 1.0 debuted in NN 2.0 (Feb 96)
• JavaScript 1.1 appeared in NN 3.0
• NN 4.0 (a.k.a. Communicator) supports JavaScript
  1.2
• MSIE 3.0 introduced JScript 2.0, a subset of
  JavaScript 1.1
• JScript 3.x is supported in MSIE 4.0 Jscript 5.5
  is supported in IE5
• JScript 3.0 and later from IE are ECMA-compliant
  Standard ECMA-262, June 1997 as is JavaScript
  1.1 and following versions from Netscape
• http//msdn.microsoft.com/scripting/default.htm?/s
  cripting/jscript/jslang/jsgrpecmafeatures.htm
• JavaScript 1.3, 1.4 and 1.5 released with modest
  changes including better exception handling and
  Java-JavaScript linkage
• http//developer.netscape.com/tech/javascript/inde
  x.html

10
ECMAScript

• ECMAScript refers to standard ECMA-262 released
  in June 1997
• http//www.ecma.ch/ecma1/STAND/ECMA-262.HTM
• ECMAScript is essentially JavaScript with all
  client and server-side features removed i.e. It
  is the language and not the browser AWT handler
• The emerging HTML and XML Document Object Models
  (DOMs) will be bound initially to ECMAScript
• So one can use ECMAScript in several different
  domains (HTML XML VRML ) by adding support for
  appropriate domain specific objects
• Netscape Site has ECMAScript standard document

11
Java vs. JavaScript I

• JavaScript is primarily supported by Netscape and
  Microsoft
• JavaScript started quite roughly but is
  improving in design -- however some issues
  connected to browser are totally ill defined as
  browser ill defined -- e.g. what happens in what
  order when frames loaded .
• JavaScript is object-based with no class
  structure
• JavaScript is prototype-based

• Suns Java is fast becoming a broad industry
  standard
• Java is well designed and documented
• Java is object-oriented with (single) inheritance
• Java is class-based

12
Java vs. JavaScript II

• Java classes and instances are distinct
• A Java class has zero or more constructors
• Java property inheritance follows class hierarchy
• In Java, no way to add properties at run-time

• JS object definition and constructor are
  identical and defined like methods
• JavaScript property inheritance follows prototype
  chain
• JavaScript properties may be added or removed at
  run-time
• So essentially in JS, class structure is totally
  dynamic (a.k.a. Ill defined)

13
Java vs. JavaScript III

• Java applets are distinct from HTML
• Java is strongly typed with static (compile-time)
  binding
• Java bytecodes are interpreted (or Just-In-Time
  compiled) on the client

• JavaScript is tightly coupled with HTML
• JavaScript is loosely typed with dynamic
  (run-time) binding
• High-level JavaScript source code is interpreted
  on the client but is often MUCH faster than Java
  as integrated into browser

14
Java vs. JavaScript IV

• Typical Java applet Structure
• Java source --gt javac compiler --gt JavaVM
  Universal Machine code in .class file
• Store JavaVM .class files on Web Server
• Download JavaVM from Server to Client
• Interpreter built into browser, reads JavaVM and
  executes on client
• (User or System) Java event handlers interpret
  events within applet
• Typical JavaScript Structure
• JavaScript Source is included in HTML text or
  special .js files included in HTML files
• Combined JavaScript and HTML is downloaded and
  interpreted by browser on client to produce HTML
  Page
• Events (not in applets but) in HTML Page (mouse
  clicks etc.) are either interpreted by browser
  default or overridden by user JavaScript code.

15
Performance Issues

• Typically, up to 106 C instructions may be
  executed in a few milliseconds (the time it takes
  a person to notice anything!) as one instruction
  in 1 clock cycle (say 108/sec)
• A Java interpreter is roughly 50 times slower
  than C
• Java Just-In-Time compiler is roughly 28 times
  slower than C whereas a native Java Compiler (and
  perhaps future JITs) are about same speed as C
• Perl is 500 times slower than C (an interpreter
  but analyses whole code before interpreting)
• Runtime (e.g. I/O) can be as fast as C as it is
  C!
• Tcl, JavaScript (true interpreters) are 5000
  times slower than C
• BUT If Java Script in browser invokes optimized
  C internal function, it can easily outperform
  Java
• Just as Java itself can of course invoke through
  JNI C code.
• Need C library to be built in as do not want to
  download

16
JavaScript Basics
17
We Need to Know HTML!

• Like most interpreters (just look at BASIC),
  JavaScript has a huge and growing number of
  methods and properties corresponding to the many
  different features in a browser window
• To study JavaScript, we will need to use all the
  features of HTML including
• Frames
• Forms -- including event handlers
• Cookies
• Layers and Dynamic HTML

18
JavaScript Scripts

• A script is enclosed in a ltSCRIPTgt
  containerltSCRIPT LANGUAGE"JavaScript"gt...lt/SC
  RIPTgt
• Scripts may be put in the ltBODYgt or the ltHEADgt,
  depending on your needs
• Use ltNOSCRIPTgtlt/NOSCRIPTgt for JavaScript-disabled
  browsers
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/3-5.htm

19
Hello World Example

• ltHTMLgt
• ltHEADgtltTITLEgtAn Examplelt/TITLEgtlt/HEADgt
• ltBODYgt
• lt!-- Insert HTML here --gt
• ltSCRIPT LANGUAGE"JavaScript"gt
• document.writeln("ltH1gtHello World!lt/H1gt")
• lt/SCRIPTgt
• lt!-- Insert more HTML here --gt
• lt/BODYgt
• lt/HTMLgt
• http//old-npac.csit.fsu.edu/projects/tutorials/Ja
  vaScript/examples/simple/helloWorld.html
• and
• http//msdn.microsoft.com/scripting/default.htm?/s
  cripting/jscript/jslang/jsgrpecmafeatures.htm
• (see samples in left hand index)

20
Hello World Example (contd)

• There is only one JavaScript statementdocument.w
  riteln("ltH1gtHello World!lt/H1gt")
• The writeln method writes its argument into the
  current document
• The script is in the ltBODYgt since it writes HTML
  code into the document other scripts are written
  in the ltHEADgt so they are processed and available
  in body
• Actually in advanced applications, when
  JavaScript is actually defined becomes quite
  tricky and is an example of how there are
  intrinsically undefined features in language
• Scripts may be hidden from old browsers using
  arcane constructltSCRIPT LANGUAGEJavaScript
  gtlt!-- A comment to a dinosaur. Bunch of
  Exciting JavaScript Statements ..//script ends
  here --gtlt/SCRIPTgt
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/2-2.htm

21
Form Example

• ltHTMLgt
• ltHEADgtltTITLEgtJavaScript with Formslt/TITLEgt
• ltSCRIPT LANGUAGE"JavaScript"gt
• function compute()
• if ( window.confirm("Is this what you want?") )
• aForm.result.value eval(aForm.expr.value)
• lt/SCRIPTgtlt/HEADgt
• ltBODYgtltFORM NAME"aForm"gt Enter expression
• ltINPUT TYPE"text" NAME"expr" SIZE15gt
• ltINPUT TYPE"button" VALUE"Compute!"
• onClick"compute()"gt ltBRgt Result
• ltINPUT TYPE"text" NAME"result" SIZE15gt
• lt/FORMgtlt/BODYgt
• lt/HTMLgt
• http//aspen.csit.fsu.edu/it2spring01/lectures/it2
  extras/formexample.html

22
Form Example (contd)

• confirm is a method of the Window object which
  pops up a window requesting confirmation of
  requested action
• eval is a built-in JavaScript function
• onClick is a JavaScript event handler and onClick
  your stuff executes JavaScript code yourstuff
• Note the user-defined names (aForm, expr, result)
  referred to in the script
• http//old-npac.csit.fsu.edu/projects/tutorials/Ja
  vaScript/examples/simple/eval.html

23
Example of Parameterized HTML

• ltHTMLgtltHEADgtltTITLEgtJavaScript Used to
  Parameterize HTMLlt/HTMLgt
• ltSCRIPT LANGUAGEJavaScript gtvar
  imagewidth600// These could be changed by form
  var imagefilenpac.gif //input or some
  computation // based on size of window
  (available to JavaScript)lt/SCRIPTgtlt/HEADgt
• ltBODYgtlth2gtPlain old HTML of any typelt/h2gt
  ltSCRIPT LANGUAGEJavaScript
  gtdocument.writeln(ltimg aligntop width
  imagewidth src imagefile
  gt)lt/SCRIPTgt
• ltbgtAnd the beat goes on lt/bgt
• lt/BODYgtlt/HTMLgt
• Note the horrible mix of (JavaScript) and
  (HTML)
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/15-16.htm
• Color Center http//www.hidaho.com/colorcenter/cc
  .html
• Background Selector http//drizzle.stanford.edu/
  achille/html/hack3/bgcolor.html

JavaScript Variables
24
The ltSCRIPTgt Tag

• If you have two versions of a JavaScript script,
  you can load one or the other
• ltSCRIPT LANGUAGE"JavaScript1.1"gt
• // Ignored by Navigator 2.0
• location.replace("newVersion.html")
• lt/SCRIPTgt
• ltSCRIPT LANGUAGE"JavaScript"gt
• // Read by Navigator 2.0 and above
• lt/SCRIPTgt
• One also needs to do test on which browser you
  have this is some standard code you use in all
  scripts see
• Client Sniffer
• http//www.mozilla.org/docs/web-developer/sniffer/
  browser_type.html

25
The ltSCRIPTgt Tag (contd)

• The newest version is JavaScript1.5
• Multiple ltSCRIPTgt tags are allowed
• Within a single ltSCRIPTgt, a function may be
  called before it is defined
• Within a single document, a function defined in
  one ltSCRIPTgt may not be called from a previous
  ltSCRIPTgt
• In particular, a function defined in the ltBODYgt
  may not be called from the ltHEADgt

26
The ltSCRIPTgt Tag (contd)

• JavaScript code may be stored in an external file
  (and is therefore reusable)
• ltSCRIPT SRC"JScode.js"gt // The body of
  this ltSCRIPTgt is // executed only if
  "JScode.js // is not found!
  document.write("File not found!") lt/SCRIPTgt
• An external file must have a .js extension and
  the server must be configured properly
• Examplehttp//old-npac.csit.fsu.edu/projects/tut
  orials/books/Netscape/OLC1.2/3-6.htm

27
JavaScript URLs

• A trivial example of a JavaScript URL
  isjavascriptalert("Hello World!")
• You can type this into location field of any
  browser
• A JavaScript URL may appear anywhere an ordinary
  URL is expectedltA HREF"javascripthistory.back(
  )"gtPrevious Pagelt/Agt
• Note must use ltA HREF javascript
  void(anyoldfunction()) gt if you do not want link
  to be invoked!
• Use HREFjavascript void(0) if no action at
  all -- used if real action from onclick or other
  event handle for link
• Navigator originally had a mini-scripting
  environment invoked by typing javascriptinto the
  browsers location text field
• This is now (after NN4.5) used to display error
  messages as a console instead of alternative (and
  clumsy) stream of windows (one per error .)

28
Examples of JavaScript URL

• See Authoring Guide, Using JavaScript URLs
• http//old-npac.csit.fsu.edu/projects/tutorials/do
  cs/Netscape/JSGuide4/advtopic.htm1004952
• function countJumps()    parent.p1   window.l
  ocationpage1To call the function, use a
  JavaScript URL in a standard HTML hyperlink ltA
  HREF"javascriptcountJumps()"gtPage 1lt/AgtThis
  example assumes page1 is a string representing a
  URL.

29
JavaScript Entities in NN4

• One can parameterize HTML using
  document.write(ln) commands such as
• document.writeln(string1 Jsvariable
  string2)// etc.
• There is in NN4 another way of achieving this
  without a ltSCRIPTgt tag and no document.writeln --
  namely
• ltIMG widthJSvar1 srcJSvar2 gt
• where JSvar1 and JSvar2 are JavaScript variables
  holding width and URL of image
• Syntax is modeled on that for special characters
  where
• GT is gt etc.
• Such JavaScript Entities can only appear on right
  hand side of attributes values and cannot appear
  in HTML text such as titles
• document.writeln approach has no such
  restriction!
• Example http//old-npac.csit.fsu.edu/users/gcf/wi
  sdom/IllustrateJS.html

30
JavaScript Syntax
31
Basic Syntax

• JavaScript syntax resembles Java and C
• Braces are used for grouping
• Use single or double quotes (equivalently) around
  string literals
• Escapes \b \t \n \f \r \" \' \\
• Other literals null, true, and false
• JavaScript is case-sensitive while HTML is not
  (which sometimes leads to problems!)
• Example of Quoted Strings http//old-npac.csit.f
  su.edu/projects/tutorials/books/Netscape/OLC1.2/4-
  7.htm

32
When to put JavaScript

• Defining Functions
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/7-1.htm
• A Function Defined in the Wrong Place
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/7-2.htm
• Defining Functions---Problem Fixed
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/7-3.htm

33
Variables

• Variables (identifiers) must begin with a letter,
  underscore, or dollar sign
• var a-zA-Z_a-zA-Z0-9_
• Declare variables in var statementsvar aNumber
  137var aString "1"
• JavaScript entities in HTML attributesltIMG
  SRC"v1" WIDTH"v2"gtwhere v1 and v2 are
  JavaScript variables

34
Examples of Variables I

• Simple Variables
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/4-1.htm
• Case Sensitivity
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/4-2.htm
• Undefined Variables
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/4-3.htm
• Variable Scope
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/4-4.htm

35
Examples of Variables II

• The var Keyword I
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/4-5.htm
• The var Keyword II
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/4-6.htm
• A Boolean Variable
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/6-3.htm
• JavaScript Entities (NN4 only)
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/13-12.htm

36
Operators

• Assignment operators - / ltlt gtgt
  gtgtgt
• JavaScript supports the usual arithmetic
  operators, as well as --
• Concatenation operator
• Bit operators ltlt gtgt gtgtgt
• Relational operators gt gt lt lt !
• Logical operators !

37
Examples of Operators I

• Modulus
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/5-5.htm
• Increment
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/5-6.htm
• Decrement
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/5-7.htm
• Concatenation
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/5-8.htm
• Logical Not
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/5-9.htm
• Logical And
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/5-10.htm

38
Examples of Operators II

• Logical Or
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/5-11.htm
• Precedence
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/5-12.htm
• The typeof Operator
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/5-17.htm
• Equality vs. Assignment
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/6-2.htm
• Not Equal To
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/6-6.htm
• Greater Than
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/6-7.htm
• Greater Than or Equal To
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/6-8.htm

39
Expressions

• Examples
• sum x // sum sum x
• r - n q
• s "temp" 1 // assign "temp1" to s
• phi (1 Math.sqrt(5))/2
• valid (age gt 21 age lt 65)
• An if-expression returns a value
• p ( k lt 0 ) ? 1/y y

40
Examples of Expressions I

• Adding
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/5-1.htm
• Subtracting
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/5-2.htm
• Multiplying
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/5-3.htm
• Dividing
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/5-4.htm

41
Examples of Expressions II

• Type Conversion I
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/5-13.htm
• Type Conversion II
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/5-14.htm
• Type Conversion III
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/5-15.htm
• Type Conversion IV
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/5-16.htm
• The if Expression
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/6-12.htm

42
Reserved Words
43
Statements

• JavaScript statements include break, continue,
  do, for, function, if, return, switch, var,
  while, and with
• Multiple statements on one line are separated by
  semicolons
• Statement blocks are delimited by braces
• Comments come in two flavors/ any text
  including newlines /// comment terminated by
  newline
• Example of Comments
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/3-4.htm

44
The if Statement

• Assuming boolean variable isWhite
• if ( isWhite )
• document.bgColor "pink"
• isWhite false
• else
• document.bgColor "white"
• isWhite true
• The else block is optional, of course

45
Examples of if Statements

• The if-then-else Statement I
• http//old-npac.csit.fsu.edu/projects/tutorials/Ja
  vaScript/examples/simple/if-then-else.html
• The if Statement I
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/6-1.htm
• The if-then-else Statement II
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/6-4.htm
• The if Statement II
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/6-5.htm
• Nested if Statements I
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/6-9.htm
• Nested if Statements II
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/6-10.htm
• The if Statement III
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/6-11.htm

46
The switch Statement

• The switch statement was introduced in JS
  1.2switch ( fruit ) case "oranges"
  price 0.59 break case "apples" price
  0.32 break case "bananas" price
  0.48 break default price null
• Example of Switch statement
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/6-22.htm

47
The for Statement

• A simple for-loop
• // Compute xk for k gt 0
• for (var y1, i0 iltk i)
• y x
• Here is another type of for-loop
• for (var prop in object)
• statements
• Examples of for
• http//old-npac.csit.fsu.edu/projects/tutorials/Ja
  vaScript/examples/simple/for-loop.html
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/6-13.htm

48
The while Statement

• A more general looping structure
• // Compute r m n for m,n gt 0
• var r m
• while ( r gt n )
• r - n
• break, labeled break, and continue are permitted
  in for and while loops
• JavaScript supports recursion as well
• http//old-npac.csit.fsu.edu/projects/tutorials/Ja
  vaScript/examples/simple/recursion.html

49
Examples of While Statement

• The while Statement I
• http//old-npac.csit.fsu.edu/projects/tutorials/Ja
  vaScript/examples/simple/while-loop.html
• The while Statement II
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/6-15.htm
• The while Statement III
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/6-16.htm
• The while Statement IV
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/6-17.htm
• The break Statement
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/6-19.htm
• Labeled break Statement
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/6-20.htm
• The continue Statement
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/6-21.htm

50
The dowhile Statement

• A dowhile loop tests its condition at the bottom
  of the loop do statements while (
  condition )
• In this case, the statements in the loop body are
  guaranteed to execute at least once
• This loop was new in JavaScript 1.2 and JScript
  3.0
• Examples
• http//old-npac.csit.fsu.edu/projects/tutorials/Ja
  vaScript/examples/new/do-while-loop.html
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/6-18.htm

51
The with Statement

• with ( someObject ) statements
• someObject is the default object used for any
  unqualified object referenceswith ( Math )
  area PIrr // Math property PI x
  rcos(theta) // Math method cos y
  rsin(theta) // Math method sin

52
JavaScript Core Objects
53
Basic Concepts

• JavaScript is object-based with no classes and,
  hence, no (class) inheritance
• An object possesses properties and methods
• A property is an attribute of an object
• A method acts on an object
• All JavaScript objects have toString() and
  valueOf() methods
• Examples
• http//old-npac.csit.fsu.edu/projects/tutorials/Ja
  vaScript/examples/advanced/prop-lists.html
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/13-6.htm

54
The Global Object

• The implicitly defined Global object is the
  top-level JavaScript object
• It has two properties NaN (Not-a-Number) and
  Infinity (but NN supports neither)
• Example of the escape() Function
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/7-14.htm
• Example of the the unescape() Function
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/7-15.htm
• Example of the the isNaN() Function
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/7-16.htm
• There are seven global functions

plus the eval() function on next foil!
55
The eval Function

• The function eval( string ) invokes the
  JavaScript interpreter on its string argument,
  which is evaluated in the context of the current
  window (i.e., globally)
• In NN3.0 only, we may also write object.eval(
  string ) In this case, the string argument is
  evaluated in the context of some object
• In NN4.0, the above is identical to with
  (object) eval( string )
• Example of eval()
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/7-11.htm

56
Parsing Functions

• parseInt() and parseFloat() convert their
  arguments to numbers parseFloat("12.34")
  //returns 12.34 parseInt("12.34") //returns
  12 parseFloat("12.34 ft")
  //returns 12.34 parseInt("111", 2)
  //returns 7 parseFloat("12.34") //returns NaN
• A handy trick var numeric_var string_val -
  0
• Example of parseInt() Function
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/7-12.htm
• Example of parseFloat() Function
• http//old-npac.csit.fsu.edu/projects/tutorials/bo
  oks/Netscape/OLC1.2/7-13.htm

57
Other Global Functions

• isNaN( number ) returns true if and only if its
  argument is NaN
• isFinite( number ) returns false if its argument
  is NaN, Infinity, or ?Infinity otherwise, it
  returns true
• escape( string ) returns a URL-encoded string
  unescape( string ) performs the inverse operation

58
Built-in Objects

• JavaScript has ten built-in objects

• plus the Global object discussed earlier
• An instance object is created with new
• var today new Date()
• var answers new Array(0,1,0)
• We will learn how to create objects in other ways
  later on e.g. fred creates a null object.

59
Array Objects I

• The syntax has changed somewhat but now is quite
  clean The following creates an array of length
  50
• var states new Array(50)states0
  "Alabama"states1 "Alaska" // etc.
• As does the following
• var states new Array()// define first 49
  statesstates49 Last State"
• Every array has a length propertyvar n
  states.length // n 50 in examples
• Var firststates new Array(Alabama)firststate
  s1 "Alaska" //
• Creates an Array of length 2

60
Array Objects II

• If you give Array() more than one argument, they
  are treated as initialization. If there is one
  integer argument it is the length otherwise it
  is an initialization for newarray0
• The length of Array is always updated to be one
  more than last index set
• Two-dimensional arrays are allowed but they are
  as in Java arrays of arraysvar acodes new
  Array(50)acodes0 new Array(205,334)
• Here acodes0 is a two dimensional array with
  values 205 and 334 in first elements.

61
Array Methods

• JavaScript 1.1 (and above) supports some powerful
  array methods
• myArray.sort( compFunc )sorts myArray according
  to compFunc (a user-defined, numeric-valued
  function of two arguments) function compFunc(
  a, b ) return a - b
• myArray.join( sep )returns a string of elements
  separated by sep
• myArray.slice( beginindex,endindex)returns a
  slice of myArray
• myArray.push(el1,e2, elN)adds N elements to end
  of myArray and returns new length
• myArray.reverse()reverses the order of the
  elements in myArray

62
Examples of JavaScript Arrays

• Create an Array
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/9-6.htm
• Extend an Array length automatically
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/9-7.htm
• Initialize Array using Constructor
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/9-8.htm
• Use of properties as array indices
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/9-9.htm
• Multidimensional Arrays
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/9-10.htm
• Sorting an array
• http//www.npac.syr.edu/projects/tutorials/JavaScr
  ipt/examples/advanced/arraySort.html

63
Boolean Objects

• To create a false Boolean object, usenew
  Boolean()new Boolean( 0 )new Boolean( null
  )new Boolean( "" )new Boolean( false ) or
  simply use the literal false
• All other values create a Boolean object with
  initial value true!
• Examples of Instantiating Boolean Objects
• http//www.npac.syr.edu/projects/tutorials/JavaScr
  ipt/examples/simple/booleanObj.html
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/11-8.htm

64
Date Objects

• The Date constructor has many forms today
  new Date() xmas new Date( 97, 12, 25 )
  birthday new Date( "April 6, 1952" )
• The Date() constructor may also be used as a
  function with no arguments
• Time measured in milliseconds past January 1,
  1970 UTC (Universal Coordinated Time)
• Warning from the past The Date object is buggy
  in NN2!
• Year 2000 Calculation
• http//www.npac.syr.edu/projects/tutorials/JavaScr
  ipt/examples/simple/date.html
• Instantiating Date Objects
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/11-1.htm

65
Date Methods

• The Date object has no properties access to date
  and time fields is via dozens of set and get
  methods xmas.setYear(xmas.getYear()1)
• There are two static Date methods
• Date.parse( date_string )
• Date.UTC( year, month, day )
• Both convert their argument(s) to milliseconds
  past January 1, 1970 UTC
• Example Digital Clock Example
• http//www.npac.syr.edu/projects/tutorials/JavaScr
  ipt/examples/simple/setTimeout.html
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/11-2.htm

66
Function Objects

• Every function statement gives rise to a Function
  object
• Function objects are also created with the new
  operator window.onload new Function(
  "document.bgColor'white'" )
• Function objects may be anonymous as above (have
  no name)
• Note Function arguments are passed by value
• Example Instantiating a Function Object
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/7-17.htm
• Example Assigning a Function Object to an Event
  Handler
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/7-18.htm
• Example A Function Object With Parameters
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/7-19.htm

67
Function Arguments

• Functions may take an arbitrary number of
  argumentsfunction User() this.name
  User.arguments0 this.group
  User.arguments1 this.email new Array()
  var n User.arguments.length for (var i 2
  i lt n i) this.emaili-2User.argumentsi
  
• Note the arguments array is built in

68
The Math Object

• Math is the only built-in object that does not
  have a constructor
• Its sole purpose is to provide constants
  (properties) and functions (methods)
• The with statement is particularly useful in
  conjunction with Math with ( Math ) x
  rcos( PI/2 ) y rsin( PI/2 )

69
Math Properties

• These properties are primarily for convenience

Example http//www.npac.syr.edu/projects/tutorials
/JavaScript/examples/simple/math-props.html
70
Math Methods
Each method in the middle column requires two
arguments
71
Examples of Math Methods

• Example The max() Method
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/11-3.htm
• Example The sqrt() Method
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/11-4.htm
• Example Single-argument Math Methods
• http//www.npac.syr.edu/projects/tutorials/JavaScr
  ipt/examples/simple/math-meths.html
• Example All Math Methods
• http//www.npac.syr.edu/projects/tutorials/JavaScr
  ipt/examples/advanced/math-meths.html

72
Number Objects

• There is a Number constructor, but it is rarely
  used since JavaScript automatically converts
  numeric literals to numeric objects as needed
• Some useful properties are provided MAX_VALUE,
  MIN_VALUE, NaN, NEGATIVE_INFINITY, and
  POSITIVE_INFINITY

73
Number Properties

• Number.MIN_VALUE is the smallest positive number
  representable
• Number.POSITIVE_INFINITY is returned by any
  operation that is greater than Number.MAX_VALUE
• Number.NEGATIVE_INFINITY is returned by any
  operation that is less than ?Number.MAX_VALUE

74
Number Properties (contd)

• Number.NaN is returned by parseInt() and
  parseFloat() when the parsing operation fails
• An attempt to divide by zero also returns
  Number.NaN
• Test for Number.NaN using the global boolean
  function isNaN()
• Note NN2.0 and MSIE3.0 do not support
  Number.NaN!

75
Object Objects

• The Object constructor converts its argument (any
  numeric, boolean, or string literal) to a
  JavaScript object var s new Object( "NPAC"
  )is equivalent to var s new String( "NPAC"
  )This is usually unnecessary, however
• The corresponding function is Object()

76
Regular Expressions

• In days gone by all students knew Perl and
  Regular expressions and latter were heart of most
  web page analysis engines
• Now we will assume we need to teach regular
  expressions
• We have a string str that we want to analyze
• We have a probe (matching object) regexp1 which
  uses characters in special ways
• We may have a substitute object regexp2 which has
  some special use of characters to allow
  generation of modified strings
• We have a set of results which depend on
  operation performed
• Basic operation are match and substitute
• Operations are affected by flags which determine
  treatment of case (are upper and lower to be
  distinguished) and depth of search do we stop
  at first match or not

77
RegExp Examples

• The match() Method I
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/14-14.htm
• The replace() Method I
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/14-15.htm
• The replace() Method II
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/14-16.htm
• The replace() Method III
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/14-17.htm
• The match() Method II
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/14-18.htm
• The split() Method
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/14-19.htm
• A Comprehensive Example
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/14-20.htm

78
Simple Regular Expression Patterns

• Simple Single-character Patterns are
• Single explicit character e.g. a
• dot . which matches ANY character except newline
  \n
• Character class is a Single-character Pattern and
  represented as a set c1c2c3...cN which matches
  any one of the listed characters
• ABCDE matches A B C D or E
• 0-9 is same as 0123456789
• a-zA-Z matches any lower or upper case letter
• Negated character class is represented by a carat
  after left square bracket
• 0-9 matches any character which is NOT a
  digit 0 1 2 3 4 5 6 7 8 9 (there is another
  critical use of -- see later)
• There are a set of special character classes
  shown overleaf such as \w which is equivalent to
  A-Za-z0-9_.

79
Regular Expressions -- Special Characters
\b backspace
\S Not a White Space
\b Word Boundary
\t tab
\B NOT a Word Boundary
\v vertical tab
\cC Control Character C
\w Any word Character
\d Matches a digit
\W Not a word Character
\D Matches a NON digit
\\ Backslash itself
\f Form Feed
\n (n integer) nth () selected as in n
\n New Line
\ooctal Char with this octal rep
\r Carriage Return
\xhex Char with this hex rep
. Anything
\s White Space \f\n\r\t\v
80
Grouping Patterns in Regular Expressions

• Sequence is c1c2c3.. -- a sequence of single
  characters
• or 0, is "zero or more" of previous character
• or 1, is "one or more" of previous character
• ? or 0,1 is "zero or one" of previous character
• All matching is greedy -- one maximizes number of
  characters "eaten up" starting with leftmost
  matching
• Curly Brace Notation
• cn1,n2 means from n1 to n2 instances of
  character c
• cn1, means n1 or more instances of
  character c
• cn1 means exactly n1 instances of
  character c
• c0,n2 means n2 or less instances of character
  c

81
Anchoring and Alternation in Regular Expressions

• For single characters, alternates can be
  specified by square brackets with
• abc meaning a or b or c
• For general strings one can use to represent
  alternatives or so that above example can also be
  written
• abc means a or b or c but this operator can be
  generalized to longer sequences so that 1995
  CPS616 (first year this course was taught!)
  instructor can be written
• FoxFurmanski or if we can't spell Polish names
• FoxFurmansk(iyie) // See later for use of
  parentheses
• Patterns can be Anchored in four ways
• /Keyname/ matches to Keyname ONLY if it starts
  string -- only has this special meaning at
  start of regular expression
• /Quit/ matches Quit ONLY if it ends string --
  only has this meaning if at end of regular
  expression
• \b matches a word(JavaScript/C variable) boundary
  so that
• /Variable\b/ matches Variable but not Variables (
  inside construct, \b means a backspace as
  described in earlier table)
• \B matches NOT a word boundary so that
• /Variable\B/ matches Variables but not Variable

82
Parentheses in Regular Expressions

• Parentheses can be used as "memory" for relating
  different parts of a match or for relating
  substitution to match
• If a part of a regular expression is enclosed in
  parentheses, the MATCHED value is stored in
  temporary variables \1 \2 .. for first,second ..
  set of parentheses
• /apple(,)\sorange\1/ matches apple, orange, in
  apple, orange, cherry, peach.
• Note ONLY use \1 \2 etc. in pattern. Use 1 2
  (static properties of RegExp object) outside
  pattern
• re1 /Geoffrey(.)Fox/ when matched to str
  Geoffrey Charles Fox stores
• \1 ' Charles ' which can be transferred to
  substitution string (via newstr
  str.replace(re1,re2)) which could be
• re2 /Geoffrey \(1\) Fox/ for result Geoffrey (
  Charles ) Fox
• Parentheses can also be used to clarify meaning
  of a regular expression by defining precedence of
  a set of operations and so distinguish for
  instance
• /(ab)/ from /a(b)/
• There is a definite convention for precedence,
  but as usual I recommend using parentheses

83
The Backslash \ Operator

• When using the constructor function, the normal
  string escape rules (preceding special characters
  with \ when included in a string) are necessary.
  For example, the following are equivalent
• re new RegExp("\\w")
• re /\w/
• For characters that are usually treated
  literally,\ indicates that the next character is
  special and not to be interpreted literally.
• For example, /b/ matches the character b. By
  placing a backslash in front of b, that is by
  using /\b/, the character becomes special to mean
  match a word boundary.
• While for characters that are usually treated
  specially, \ indicates that the next character is
  not special and should be interpreted literally.
• For example, is a special character that means
  0 or more occurrences of the preceding character
  should be matched
• For example, /a/ means match 0 or more a's.
• To match literally, precede the it with a
  backslash
• For example, /a\/ matches a.

84
Some Regular Expression Examples

• /\s0(1)/ matches "white space", followed by zero
  and 1 or more ones -- the set of ones is stored
  in \1 ( 1)
• /0-9\.0\D/ matches "the answer is 1.0 exactly"
  but not "The answer is 1.00".
• In first case is "the answer is ", is "1.0
  " and ' is "exactly"
• /a.c.d/ matches "axxxxcxxxxcdxxxxd" with and
  ' as null and as full string
• /(a.b)c.d/ matches "axxxxbcxxxxbd" with
• \1 as "axxxxb" -- note backtracking as greedy
  (a.b) first matches to "axxxxbcxxxxb" but then
  tries again when following c.d fails to match

85
RegExp Objects I

• A RegExp object (new in JavaScript 1.2)
  corresponds to a regular expression
• Regular expressions were popular in Perl and
  JavaScript implementation is modeled on this
  version
• There are two syntax's for defining regular
  expressions regexp1 new RegExp( "pattern
  ) // or regexp1 new RegExp(
  "pattern,flags ) regexp2 /pattern/flags
  // no quotes(Perl Syntax)
• Flags are g (match to all occurences) and i
  (ignore case) or of course gi
• The last Perl version compiles the pattern
  and is equivalent to
• regexp2 regexp1.compile("pattern")
• Compilation is done for efficiency
• The RegExp object has two other methods
  exec(str) and test(str)and we can also invoke
  regular expression processing using new String
  object methods
• There are both static (as in RegExp.input) and
  dynamic (instance dependent as in regexp1.global)
  properties of regular expressions

86
RegExp Objects II test Examples

• Here are two examples function isDigit( str )
  var regexp /0-9/ return
  regexp.test( str ) function isSSN( str )
  // match 999999999 or 999-99-9999 var
  regexp /(\d9\d3-\d2-\d4)/
  return regexp.test( str )
• test returns true or false exec described latter
  returns an array of detailed matching characters
  and sets properties of regexp object
• Use test if you want just to know if match is
  made exec if you want to know more information.

87
Examples of Replace and test

• Suppose re is a RegExp object and str a string,
  then
• function testinput(re, str)
• if (re.test(str))
• midstring " contains "
• else
• midstring " does not contain "
• document.write (str midstring re.source)
• Prints out a summary of matching result
• ltSCRIPT LANGUAGE"JavaScript1.2"gt
• re /(\w)\s(\w)/
• str "John Smith"
• newstrstr.replace(re, "2, 1")
• document.write(newstr)
• lt/SCRIPTgt // Prints out Smith, John

88
RegExp Objects III -- String Methods

• String object methods have been added to
  JavaScript 1.2 to handle regular expressions --
  consider an ordinary string ordstr
• ordstr.search( regexp ) // like test()and
  equivalent to ordstr m/regexp/ in
  PERLreturns true or false
• ordstr.match( regexp ) // like exec()and
  returns a results array as described for exec
• newstr oldstr.replace( regexp, newsubstr ) //
  equivalent to ordstr s/regexp/newsubstr/ in
  PERL but returns a new string -- leaving original
  unchanged
• The split() method now takes a regular
  expression as optional parameter
• var strArray str.split( /\s\s/ )
• splits using surrounded by any whitespace
  characters

89
Static Properties of RegExp Object I

• RegExp.input or RegExp._ is text which we are
  comparing regular expression with
• It is set automatically in some circumstances
  (e.g. when event handle for Form text field
  called as in example below)
• ltSCRIPT LANGUAGE"JavaScript1.2"gt
• function getInfo()
• re /(\w)\s(\d)/
• re.exec() // equivalent to re()
• window.alert(RegExp.1 ", your age is "
  RegExp.2)
• lt/SCRIPTgt
• Enter your first name and your age, and then
  press Enter.
• ltFORMgt
• ltINPUT TYPE"TEXT" NAME"NameAge"
  onChange"getInfo(this)"gt
• lt/FORMgt

90
Static Properties of RegExp Object II

• RegExp.multiline if true, search through newlines
• RegExp. or RegExp.leftContext is part of
  searched string before matched part
• RegExp. or RegExp.lastMatch is part of searched
  string that is matched to by regular expression
• RegExp. or RegExp.rightContext is part of
  searched string after matched part
• So String searched is RegExp.leftContext
  RegExp.lastMatch RegExp.rightContext
• RegExp.lastParen The last parenthesized substring
  match, if any
• RegExp.1,2 .. 9 are the first through ninth
  parenthesized expressions matched

91
Examples of match (string) and exec (RegExp)

• //Match one d followed by one or more b's
  followed by one d
• //Remember matched b's and the following d
• myRe/d(b)(d)/ig str "cdbBdbsbz"
• myArray myRe.exec( str )
• myArray.index Index of First Character Matched
  i.e. 1
• myArray.input The original String i.e. cdbBdbsbz
• myArray0 The characters matched i.e. dbBd
• myArray1 The first parenthesis i.e. bB
• myArray2 The second parenthesis i.e. d
• The static properties of RegExp are set including
  1 2 lastMatch lastParen
• Properties source lastIndex multiline global
  ignoreCase of myRe are also set
• Can also use myArray str.match(myRe)

92
Multiple Calls to exec Method

• If your regular expression uses the g flag, you
  can use the exec method multiple times to find
  successive matches in the same string. When you
  do so, the search starts at the substring of str
  specified by the regular expression's lastIndex
  property. For example, assume you have this
  script
• ltSCRIPT LANGUAGE"JavaScript1.2"gt
• myRe/ab/g
• str "abbcdefabh"
• myArray myRe.exec(str)
• document.writeln("Found " myArray0 ". Next
  match starts at " myRe.lastIndex)
• mySecondArray myRe.exec(str)
• document.writeln("Found " mySecondArray0 ".
  Next match starts at " myRe.lastIndex)
• lt/SCRIPTgt
• This script displays the following text
• Found abb. Next match starts at 3
• Found ab. Next match starts at 9

93
String Objects

• String objects are created as in var myStr
  new String("NPAC")or more simply with var
  myStr "NPAC"
• Actually, the latter is a string literal, but
  these are automatically converted as needed
• String characters are indexed starting with 0
• The String object has one property var n
  myStr.length

94
String Methods

• Core JavaScript String methods
• charAt( pos )
• charCodeAt( pos )
• indexOf( searchstring, pos )
• lastIndexOf( searchstring, pos )
• split( separator )
• substring( start, end )
• toLowerCase() and toUpperCase()
• Static method String.fromCharCode()
• Examples The toUpperCase() Method
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/10-3.htm
• The charAt() Method
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/11-5.htm
• The lastIndexOf() Method
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/11-7.htm

95
String Methods (contd)

• Client-side JavaScript defines more than a dozen
  String methods
• Six new methods added in JavaScript 1.2
• concat( string2 )
• match( regexp )
• replace( regexp, newSubstr )
• search( regexp )
• slice( begSlice, endSlice )
• substr( start, length )
• Example Scrolling Text
• http//www.npac.syr.edu/projects/tutorials/JavaScr
  ipt/examples/simple/scrolling-text.html

96
JavaScript Events
97
Events

• Events are associated with
• forms
• hyperlinks
• images and image maps
• loading and unloading of documents
• input focus of a window or form element
• JavaScript introduces event handlers to handle
  these events

98
Event Handlers
99
Examples of Event Handlers I

• Example The onLoad Event Handler
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/2-7.htm
• Example The onUnload Event Handler
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/2-8.htm
• Example The onLoad Event Handler Revisited
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/12-5.htm
• Example The onUnload Event Handler A Bug
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/12-10.htm
• Example The onMouseOver Event Handler I
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/2-9.htm
• Example The onMouseOver Event Handler II
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/12-6.htm
• Example The onMouseOut Event Handler
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/12-15.htm

100
Examples of Event Handlers II

• Example The onMouseOver and onMouseOut Event
  Handlers
• http//www.npac.syr.edu/projects/tutorials/JavaScr
  ipt/examples/simple/event-handlers.html
• Example The onSubmit Event Handler I
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/12-8.htm
• Example The onSubmit Event Handler II
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/12-9.htm
• Example The onReset Event Handler I
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/12-16.htm
• Example The onReset Event Handler II
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/12-17.htm
• Example The onReset Event Handler III
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/12-18.htm

101
Examples of Event Handlers III

• Example The onChange Event Handler
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/12-2.htm
• Example The onSelect Event Handler
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/12-7.htm
• Example The onAbort Event Handler
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/12-11.htm
• Example The onError Event Handler I
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/12-12.htm
• Example The onError Event Handler II
• http//www.npac.syr.edu/projects/tutorials/books/N
  etscape/OLC1.2/12-13.htm
• Example The onError Event Handler III
• http//www.npac.syr.edu/projects/tutorials/books/N
  ets