JavaScript: Control Structures

1. JavaScript: Control Structures September 27, 2005 Slides modified fromInternet & World Wide Web: How to Program. 2004 (3rd) edition. By Deitel, Deitel, and Goldberg. Published by Prentice Hall. ISBN 0-13-145091-3

2. Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing a Line of Text in a Web Page 7.3 Obtaining User Input with prompt Dialogs 7.3.1 Dynamic Welcome Page 7.3.2 Adding Integers 7.4 Memory Concepts 7.5 Arithmetic 7.6 Decision Making: Equality and Relational Operators 7.7 Web Resources

3. Objectives • In this lesson, you will learn: • To be able to write simple JavaScript programs. • To be able to use input and output statements. • To understand basic memory concepts. • To be able to use arithmetic operators. • To understand the precedence of arithmetic operators. • To be able to write decision-making statements. • To be able to use relational and equality operators.

4. Introduction to JavaScripting

5. 7.1 Introduction • JavaScript scripting language • Enhances functionality and appearance • Client-side scripting • Makes pages more dynamic and interactive • Foundation for complex server-side scripting • Program development • Program control

6. What can JavaScript programs do?From http://www.javascripter.net/faq/javascri.htm • Giving the user more control over the browser • Detecting the user's browser, OS, screen size, etc. • Performing simple computations on the client side • Validating the user's input • Handling dates and time • Generating HTML pages on-the-fly without accessing the Web server.

7. What can’t JavaScript programs do?From http://www.javascripter.net/faq/javascr2.htm • Use printers or other devices on the user's system or the client-side LAN • Directly access files on the user's system or the client-side LAN ; the only exception is the access to the browser's cookie files. • Directly access files on the Web server. • Implement multiprocessing or multithreading.

8. Programming context • Interpreted language • Web browser as the interpreter • Client-side only • Compatibility depends on browser version • But virtually every browser supports JavaScript • Follow ECMAScript standard! • Security issues • You cannot access the client’s system beyond their web browser • Thus, no file access or direct printing

9. Notes on compatibility • Browser versions • 80-90% of people user Internet Explorer • Of which 99% use IE 6 or IE 5 • 10-15% use Gecko-based browsers • Firefox, Netscape, Mozilla • JavaScript and cookies • Only 85-90% have JavaScript enabled • Cookies usually enabled by default—I don’t have statistics for how many leave this on • Screen resolutions • 25% use 800x600 • 70% use 1024x768 or higher • Recommendations: • Test all pages with IE 5/6 and Firefox • Don’t assume that users have JavaScript or cookies enabled • Your site should still be functional without client-side scripting or cookies • Design to be comfortably viewable with 800x600 resolution • Sources • http://www.upsdell.com/BrowserNews/stat_trends.htm • http://www.w3schools.com/browsers/browsers_stats.asp

10. Object orientation in JavaScript • JavaScript is an object-oriented programming language • Based on objects with properties and methods • JavaScript uses prototyping to replicate behaviour, rather than classification (classes) • There are two types of variables: • Simple variables (also called “primitives”) • Objects

11. Objects in JavaScript • An object is a complex type of variable that contains its own variables (properties), and has its own functions (methods) • Properties • The variables of an object • Can also be other objects • Methods • The functions that belong to an object • e.g. document.bgColor, window.location • JavaScript has a rich set of built-in objects • http://www.devguru.com/Technologies/ecmascript/quickref/js_objects.html • You can also define your own objects

12. How to specify JavaScript code • Inline Code • Add dynamic functionality to an individual element • <img onMouseOver=“doThisFunction(this)”> • Write JavaScript code directly in appropriate event attributes • Embedded scripts • Embed JavaScript code in an XHTML document—either in the head or in the body • <script type=“text/javascript”> x=3; y=9; document.writeln( x + y ); </script> • Inserting external scripts • Insert a file with “.js” extension that contains JavaScript code • <script type=“text/javascript” src=“external.js” /> • JavaScript libraries can be shared by multiple XHTML documents • A note on CDATA • <![CDATA[ ]]> • Necessary for legal XML to ignore & and < symbols (which are common in scripts) • However, most browsers work fine without them • http://www.w3schools.com/xml/xml_cdata.asp • The textbook says to use <!-- comments to hide your code --> • But CDATA is proper XML syntax • Comments should validate, but not guaranteed

13. First scripts

14. 7.2 Simple Program: Printing a Line of Text in a Web Page • Inline scripting • Written in the <body> of a document • <script> tag • Indicate that the text is part of a script • type attribute • Specifies the type of file and the scripting language use • writeln method • Write a line in the document • Escape character ( \ ) • Indicates “special” character is used in the string • alert method • Dialog box

15. welcome.html(1 of 1)

16. welcome2.html(1 of 1)

17. welcome3.html1 of 1

18. welcome4.html1 of 1

19. Illegal characters inXHTML vs. JavaScript • XHTML • HTML entities • &amp; &lt; &gt; • Others: http://www.w3schools.com/tags/ref_entities.asp • JavaScript • Escape sequences • \’ \” \n \t \\ • Others: http://www.devguru.com/Technologies/ecmascript/quickref/escaped_characters.html • To convert between the two,use an XHTML  JavaScript converter • Google “HTML JavaScript converter” • Best that I’ve found: • http://javascript.about.com/library/blscr02.htm

20. 7.2 Common escape sequences For full list, see http://www.devguru.com/Technologies/ecmascript/quickref/escaped_characters.html

21. 7.3.1 Dynamic Welcome Page • A script can adapt the content based on input from the user or other variables

22. welcome5.html(1 of 2)

23. When the user clicks OK, the value typed by the user is returned to the program as a string. This is the promptto the user. This is the default value that appears when the dialog opens. 7.3.1 Dynamic Welcome Page This is the text field in which the user types the value. Fig. 7.7 Prompt dialog displayed by the window object’s prompt method.

24. JavaScript data types • In JavaScript, you can use the var statement to create a variable, but it is not required • You do not declare any data type (loosely typed) • For scripting languages, data types are automatically determined • Automatically converts between values of different types • JavaScript data types • Numbers • Numbers are numbers, whether integer or floating point • Boolean values • true or false • Strings • “Anything within quotes” • ‘Anything within quotes’ • Null • "special key word denoting a null value" • Means “no value” • From http://www.ryerson.ca/JavaScript/lectures/basicDataTypes/basicTypes.html

25. 7.3.2 Adding Integers • Prompt user for two integers and calculate the sum (Fig. 7.8) • NaN (not a number) • parseInt • Converts its string argument to an integer

26. Addition.html(1 of 2)

27. JavaScript native functions • See http://www.devguru.com/Technologies/ecmascript/quickref/js_functions.html • parseInt() • Converts a string into an integer, if possible • parseFloat () • Converts a string into a floating-point number, if possible • string () • Converts any object into a string • number () • Converts any object into a number, if possible • isNAN () • true if the object is Not A Number • escape() and unescape() • Converts and deconverts strings to “safe” characters

28. Operators in JavaScript http://www.devguru.com/Technologies/ecmascript/quickref/js_operators.html

29. 7.5 Arithmetic operators

30. 7.6 Decision Making: Equality and Relational Operators  £

31. welcome6.html(1 of 3)

32. welcome6.html(2 of 3)

33. 7.6 Decision Making: Equality and Relational Operators

34. Chapter 8 - JavaScript: Control Statements I Outline 8.1 Introduction 8.2 Algorithms 8.3 Pseudocode 8.4 Control Structures 8.5 if Selection Statement 8.6 if…else Selection Statement 8.7 while Repetition Statement 8.8 Formulating Algorithms: Case Study 1 (Counter-Controlled Repetition) 8.9 Formulating Algorithms with Top-Down, Stepwise Refinement: Case Study 2 (Sentinel-Controlled Repetition) 8.10 Formulating Algorithms with Top-Down, Stepwise Refinement: Case Study 3 (Nested Control Structures) 8.11 Assignment Operators 8.12 Increment and Decrement Operators 8.13 Note on Data Types 8.14 Web Resources

35. Objectives • In this lesson, you will learn: • To understand basic problem-solving techniques. • To be able to develop algorithms through the process of top-down, stepwise refinement. • To be able to use the if and if…else selection statements to choose among alternative actions. • To be able to use the while repetition statement to execute statements in a script repeatedly. • To understand counter-controlled repetition and sentinel-controlled repetition. • To be able to use the increment, decrement and assignment operators.

36. 8.1 Introduction • Writing a script • Thorough understanding of problem • Carefully planned approach • Understand the types of building blocks that are available • Employ proven program-construction principles

37. 8.4 Control Structures • Sequential execution • Statements execute in the order they are written • Transfer of control • Next statement to execute may not be the next one in sequence • Three control structures • Sequence structure • Selection structure • if • if…else • switch • Repetition structure • while • do…while • for • for…in

38. 8.4 JavaScript keywords

39. 8.5 if Selection Statement • Single-entry/single-exit structure • Indicate action only when the condition evaluates to true • Indicate different actions to be perform when condition is true or false • Conditional operator (?:) • JavaScript’s only ternary operator • Three operands • Forms a conditional expression

40. 8.7 while Repetition Statement • Repetition structure (loop) • Repeat action while some condition remains true

41. 8.10 Formulating Algorithms with Top-Down, Stepwise Refinement: Case Study 3 (Nested Control Structures) • Consider problem • Make observations • Top-down, stepwise refinement

42. analysis.html(1 of 2)

44. More on JavaScript operators

45. 8.11 Compound Assignment Operators

46. 8.12 Increment and Decrement Operators • Preincrement or predecrement operator • Increment of decrement operator placed before a variable • Postincrement or postdecrement operator • Increment of decrement operator placed after a variable

47. 8.12 Increment and Decrement Operators

48. increment.html(1 of 2)

49. 8.12 Increment and Decrement Operators

50. Chapter 9 - JavaScript: Control Statements II Outline 9.1 Introduction 9.2 Essentials of Counter-Controlled Repetition 9.3 for Repetition Statement 9.4 Examples Using the for Statement 9.5 switch Multiple-Selection Statement 9.6 do…while Repetition Statement 9.7 break and continue Statements 9.8 Labeled break and continue Statements 9.9 Logical Operators 9.10 Summary of Structured Programming 9.11 Web Resources