1 / 155

Introduction to JavaScript: Basic Web Scripting Language in HTML

Explore the fundamentals of JavaScript, its core objects, events, and client-side usage. Dive into advanced topics like DOM, Cookies, and more. Discover its significance in web development with references for further learning.

porter
Download Presentation

Introduction to JavaScript: Basic Web Scripting Language in HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lectures on JavaScript I: Basic Web Scripting Language and use in HTML Pages CIS 5930-04 Applications of Information Technology II Building the Distributed Object Web Spring Semester 2001 MWF 2:30 pm - 3:20 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@csit.fsu.edu 850-644-4587 dbc@csit.fsu.edu 850-644-0180 http://old-npac.csit.fsu.edu/users/gcf/javascriptImarch99/addonsummary.html it2javascriptIspring01

  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 it2javascriptIspring01

  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 don’t fully support this as we described in DOM lectures • JavaScript is also used to script in other applications such as VRML it2javascriptIspring01

  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 won’t 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/javascript/index.html • A set of slightly dated resources • http://aspen.csit.fsu.edu/webtech/webpage/index.html it2javascriptIspring01

  5. Why would you use JavaScript I? • Examples: http://old-npac.csit.fsu.edu/projects/tutorials/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 it2javascriptIspring01

  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 Sun’s 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 it2javascriptIspring01

  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/DHTML (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) it2javascriptIspring01

  8. Why would you use JavaScript IV? Text ……………………………………………… Computer LanguageHTML---> JavaScript Java <----- 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 ….. it2javascriptIspring01

  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?/scripting/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/index.html it2javascriptIspring01

  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 it2javascriptIspring01

  11. Sun’s 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 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 Java vs. JavaScript I it2javascriptIspring01

  12. 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) Java vs. JavaScript II it2javascriptIspring01

  13. 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 Java vs. JavaScript III it2javascriptIspring01

  14. Java vs. JavaScript IV • Typical Java applet Structure • Java source --> javac compiler --> 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. it2javascriptIspring01

  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 2–8 times slower than C whereas a native Java Compiler (and perhaps future JIT’s) 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 it2javascriptIspring01

  16. JavaScript Basics it2javascriptIspring01

  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 it2javascriptIspring01

  18. JavaScript Scripts • A script is enclosed in a <SCRIPT>container:<SCRIPT LANGUAGE="JavaScript">...</SCRIPT> • Scripts may be put in the <BODY> or the <HEAD>, depending on your needs • Use <NOSCRIPT>…</NOSCRIPT>for JavaScript-disabled browsers • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/3-5.htm it2javascriptIspring01

  19. “Hello World” Example <HTML> <HEAD><TITLE>An Example</TITLE></HEAD> <BODY> <!-- Insert HTML here --> <SCRIPT LANGUAGE="JavaScript"> document.writeln("<H1>Hello World!</H1>"); </SCRIPT> <!-- Insert more HTML here --> </BODY> </HTML> http://old-npac.csit.fsu.edu/projects/tutorials/JavaScript/examples/simple/helloWorld.html and http://msdn.microsoft.com/scripting/default.htm?/scripting/jscript/jslang/jsgrpecmafeatures.htm (see samples in left hand index) it2javascriptIspring01

  20. “Hello World” Example (cont’d) • There is only one JavaScript statement:document.writeln("<H1>Hello World!</H1>"); • The writeln method writes its argument into the current document • The script is in the <BODY> since it writes HTML code into the document; other scripts are written in the <HEAD> 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 construct<SCRIPT LANGUAGE=“JavaScript” ><!-- A comment to a dinosaur…. Bunch of Exciting JavaScript Statements …..//script ends here --></SCRIPT> • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/2-2.htm it2javascriptIspring01

  21. Form Example <HTML> <HEAD><TITLE>JavaScript with Forms</TITLE> <SCRIPT LANGUAGE="JavaScript"> function compute() { if ( window.confirm("Is this what you want?") ) aForm.result.value = eval(aForm.expr.value); } </SCRIPT></HEAD> <BODY><FORM NAME="aForm"> Enter expression: <INPUT TYPE="text" NAME="expr" SIZE=15> <INPUT TYPE="button" VALUE="Compute!" onClick="compute()"> <BR> Result: <INPUT TYPE="text" NAME="result" SIZE=15> </FORM></BODY> </HTML> http://aspen.csit.fsu.edu/it2spring01/lectures/it2extras/formexample.html it2javascriptIspring01

  22. Form Example (cont’d) • 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 codeyourstuff • Note the user-defined names (aForm, expr, result) referred to in the script • http://old-npac.csit.fsu.edu/projects/tutorials/JavaScript/examples/simple/eval.html it2javascriptIspring01

  23. Example of Parameterized HTML • <HTML><HEAD><TITLE>JavaScript Used to Parameterize HTML</HTML> • <SCRIPT LANGUAGE=“JavaScript” >var imagewidth=600;// These could be changed by form var imagefile=“npac.gif”; //input or some computation // based on size of window (available to JavaScript)</SCRIPT></HEAD> • <BODY><h2>Plain old HTML of any type</h2> ……<SCRIPT LANGUAGE=“JavaScript” >document.writeln(‘<img align=top width=‘ + imagewidth + ‘src=“’ + imagefile +’” >’);</SCRIPT> • <b>And the beat goes on …</b> • </BODY></HTML> • Note the horrible mix of ‘ (JavaScript) and “ (HTML) • http://old-npac.csit.fsu.edu/projects/tutorials/books/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 it2javascriptIspring01

  24. The <SCRIPT>Tag • If you have two versions of a JavaScript script, you can load one or the other: <SCRIPT LANGUAGE="JavaScript1.1"> // Ignored by Navigator 2.0: location.replace("newVersion.html"); </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> // Read by Navigator 2.0 and above </SCRIPT> • 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 it2javascriptIspring01

  25. The <SCRIPT>Tag (cont’d) • The newest version is “JavaScript1.5” • Multiple <SCRIPT> tags are allowed • Within a single <SCRIPT>, a function may be called before it is defined • Within a single document, a function defined in one <SCRIPT> may not be called from a previous <SCRIPT> • In particular, a function defined in the <BODY> may not be called from the <HEAD> it2javascriptIspring01

  26. The <SCRIPT>Tag (cont’d) • JavaScript code may be stored in an external file (and is therefore reusable): • <SCRIPT SRC="JScode.js"> // The body of this <SCRIPT> is // executed only if "JScode.js” // is not found! document.write("File not found!"); </SCRIPT> • An external file must have a .js extension and the server must be configured properly • Example:http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/3-6.htm it2javascriptIspring01

  27. JavaScript URLs • A trivial example of a JavaScript URL isjavascript:alert("Hello World!") • You can type this into location field of any browser • A JavaScript URL may appear anywhere an ordinary URL is expected:<A HREF="javascript:history.back()">Previous Page</A> • Note must use<A HREF=” javascript: void(anyoldfunction())” > if you do not want link to be invoked! • Use HREF=“javascript: 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 javascript:into the browser’s 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 ….) it2javascriptIspring01

  28. Examples of JavaScript URL • See Authoring Guide, Using JavaScript URLs • http://old-npac.csit.fsu.edu/projects/tutorials/docs/Netscape/JSGuide4/advtopic.htm#1004952 • function countJumps() {   parent.p1++   window.location=page1}To call the function, use a JavaScript URL in a standard HTML hyperlink: <A HREF="javascript:countJumps()">Page 1</A>This example assumes page1 is a string representing a URL. it2javascriptIspring01

  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 <SCRIPT> tag and no document.writeln -- namely • <IMG width=“&{JSvar1};” src=“&{JSvar2}” > • where JSvar1 and JSvar2 are JavaScript variables holding width and URL of image • Syntax is modeled on that for special characters where • &GT; is > 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/wisdom/IllustrateJS.html it2javascriptIspring01

  30. JavaScript Syntax it2javascriptIspring01

  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.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/4-7.htm it2javascriptIspring01

  32. When to put JavaScript • Defining Functions • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/7-1.htm • A Function Defined in the Wrong Place • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/7-2.htm • Defining Functions---Problem Fixed • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/7-3.htm it2javascriptIspring01

  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 statements:var aNumber = 137;var aString = "1"; • JavaScript “entities” in HTML attributes:<IMG SRC="&{v1};" WIDTH="&{v2};">where v1 and v2 are JavaScript variables it2javascriptIspring01

  34. Examples of Variables I • Simple Variables • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/4-1.htm • Case Sensitivity • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/4-2.htm • Undefined Variables • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/4-3.htm • Variable Scope • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/4-4.htm it2javascriptIspring01

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

  36. Operators • Assignment operators: = += -= *= /= %= <<= >>= >>>= &= ^= |= • JavaScript supports the usual arithmetic operators, as well as: %++-- • Concatenation operator: + • Bit operators: & | ^ ~ << >> >>> • Relational operators: == > >= < <= != • Logical operators: && || ! it2javascriptIspring01

  37. Examples of Operators I • Modulus • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/5-5.htm • Increment • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/5-6.htm • Decrement • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/5-7.htm • Concatenation • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/5-8.htm • Logical Not • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/5-9.htm • Logical And • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/5-10.htm it2javascriptIspring01

  38. Examples of Operators II • Logical Or • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/5-11.htm • Precedence • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/5-12.htm • The typeof Operator • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/5-17.htm • Equality vs. Assignment • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/6-2.htm • Not Equal To • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/6-6.htm • Greater Than • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/6-7.htm • Greater Than or Equal To • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/6-8.htm it2javascriptIspring01

  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 > 21 && age <= 65); • An if-expression returns a value: • p = ( k < 0 ) ? 1/y : y; it2javascriptIspring01

  40. Examples of Expressions I • Adding • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/5-1.htm • Subtracting • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/5-2.htm • Multiplying • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/5-3.htm • Dividing • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/5-4.htm it2javascriptIspring01

  41. Examples of Expressions II • Type Conversion I • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/5-13.htm • Type Conversion II • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/5-14.htm • Type Conversion III • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/5-15.htm • Type Conversion IV • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/5-16.htm • The if Expression • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/6-12.htm it2javascriptIspring01

  42. Reserved Words it2javascriptIspring01

  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/books/Netscape/OLC1.2/3-4.htm it2javascriptIspring01

  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 it2javascriptIspring01

  45. Examples of if Statements • The if-then-else Statement I • http://old-npac.csit.fsu.edu/projects/tutorials/JavaScript/examples/simple/if-then-else.html • The if Statement I • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/6-1.htm • The if-then-else Statement II • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/6-4.htm • The if Statement II • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/6-5.htm • Nested if Statements I • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/6-9.htm • Nested if Statements II • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/6-10.htm • The if Statement III • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/6-11.htm it2javascriptIspring01

  46. The switch Statement • The switch statement was introduced in JS 1.2:switch ( 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/books/Netscape/OLC1.2/6-22.htm it2javascriptIspring01

  47. The for Statement • A simple for-loop: // Compute x^k for k > 0: for (var y=1, i=0; i<k; 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/JavaScript/examples/simple/for-loop.html http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/6-13.htm it2javascriptIspring01

  48. The while Statement • A more general looping structure: // Compute r = m % n for m,n > 0: var r = m; while ( r >= 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/JavaScript/examples/simple/recursion.html it2javascriptIspring01

  49. Examples of While Statement • The while Statement I • http://old-npac.csit.fsu.edu/projects/tutorials/JavaScript/examples/simple/while-loop.html • The while Statement II • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/6-15.htm • The while Statement III • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/6-16.htm • The while Statement IV • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/6-17.htm • The break Statement • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/6-19.htm • Labeled break Statement • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/6-20.htm • The continue Statement • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/6-21.htm it2javascriptIspring01

  50. The do…while Statement • A do…while 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/JavaScript/examples/new/do-while-loop.html • http://old-npac.csit.fsu.edu/projects/tutorials/books/Netscape/OLC1.2/6-18.htm it2javascriptIspring01

More Related