Presentation is loading. Please wait.

Presentation is loading. Please wait.

Oct 25 1 The Information School of the University of Washington fit100-13-control © 2006 University of Washington Control Flow INFO/CSE 100, Fall 2006.

Published by Modified over 9 years ago

Similar presentations

Presentation on theme: "Oct 25 1 The Information School of the University of Washington fit100-13-control © 2006 University of Washington Control Flow INFO/CSE 100, Fall 2006."— Presentation transcript:

1 Oct 25 1 The Information School of the University of Washington fit100-13-control © 2006 University of Washington Control Flow INFO/CSE 100, Fall 2006 Fluency in Information Technology http://courses.washington.edu/info100/

2 Oct 25 2 The Information School of the University of Washington fit100-13-control © 2006 University of Washington Readings and References Reading »Fluency with Information Technology Chapter 21, Iteration Principles

3 Oct 25 3 The Information School of the University of Washington fit100-13-control © 2006 University of Washington Comments on Debugging Debugging JavaScript can be hard »The browsers all implement things a little differently, particularly old browsers upgrade if you are using something old!

4 Oct 25 4 The Information School of the University of Washington fit100-13-control © 2006 University of Washington Use an editor that helps you The jEdit editor helps you by doing syntax highlighting.

5 Oct 25 5 The Information School of the University of Washington fit100-13-control © 2006 University of Washington Display results using alert(...) Use the alert("This is a message") function

6 Oct 25 6 The Information School of the University of Washington fit100-13-control © 2006 University of Washington Display results using writeln(...) document.writeln("someVariable: "+someVariable);

7 Oct 25 7 The Information School of the University of Washington fit100-13-control © 2006 University of Washington Use a browser that helps you All browsers try to be forgiving of errors, which means that they generally don't produce a lot of error messages »use a browser that helps you debug like Mozilla

8 Oct 25 8 The Information School of the University of Washington fit100-13-control © 2006 University of Washington enable Mozilla JavaScript Console

9 The Mozilla JavaScript console helps you by showing good error messages.

10 Oct 25 10 The Information School of the University of Washington fit100-13-control © 2006 University of Washington Graphical User Interfaces (GUIs) We can also use JavaScript to create Graphical User Interfaces.

11 Oct 25 11 The Information School of the University of Washington fit100-13-control © 2006 University of Washington GUIs A Graphical User Interface provides an intuitive way to control a program instead of having to memorize commands text fields with labels to request user entry text fields with labels to display results buttons to command action radio buttons and checkboxes to set conditions

12 Oct 25 12 The Information School of the University of Washington fit100-13-control © 2006 University of Washington A simple example This GUI has several simple controls. Two buttons to control the results One text field to display the results One pair of radio buttons to control the display One button to reinitialize http://courses.washington.edu/info100/classwork/assets/gui1.html

13 Oct 25 13 The Information School of the University of Washington fit100-13-control © 2006 University of Washington A simple example <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Simple Sample GUI javascript function code HTML form layout and specification

14 Oct 25 14 The Information School of the University of Washington fit100-13-control © 2006 University of Washington Layout of the GUI The layout of the page is controlled with HTML in the body of the page The layout and controls are provided using new tags » »<button type="button"... »<input type="text" … »<input type="radio" … »<button type="reset" … HTML form layout and specification

15 Oct 25 15 The Information School of the University of Washington fit100-13-control © 2006 University of Washington HTML forms provide a way for the user to enter data into a web page »A form can contain several different types of entry, control, and display elements »The data in a form can be passed back to the web server, or it can be processed locally on the client All of our forms will processed locally A form is defined with the... tag »The form has various attributes like id, so we can refer to it and its elements later »the form contains various elements like and

16 Oct 25 16 The Information School of the University of Washington fit100-13-control © 2006 University of Washington <button type="button" onclick="setResults('good results')">Good Results <button type="button" onclick="setResults('bad results')">Bad Results a can have one of three types »type “button” is used locally »type “submit” sends data back to the server »type “reset” re-initializes the form the value of the “onclick” attribute is some JavaScript code, in this case a call to the function setResults(string)

17 Oct 25 17 The Information School of the University of Washington fit100-13-control © 2006 University of Washington Result: <input type="radio" name="case" id="radioLC" checked onclick="setResults(document.getElementById('resultField').value)">Lowercase <input type="radio" name="case" id="radioUC" onclick="setResults(document.getElementById('resultField').value)">Uppercase Reset an with type="text" is used for user input and program output value="nada" sets the initial (and reset) value readonly means that the user cannot set the value, only the script can set the value id="resultField" gives us a way to identify this particular control in our JavaScript

18 Oct 25 18 The Information School of the University of Washington fit100-13-control © 2006 University of Washington a with type="reset" resets all the other controls in the same form to their original values Result: <input type="radio" name="case" id="radioLC" checked onclick="setResults(document.getElementById('resultField').value)">Lowercase <input type="radio" name="case" id="radioUC" onclick="setResults(document.getElementById('resultField').value)">Uppercase Reset

19 Oct 25 19 The Information School of the University of Washington fit100-13-control © 2006 University of Washington an with type="radio" allows the user to select one of several choices name="case" identifies all the buttons in the same group (only one will be selected at a time) onclick attribute gives the JavaScript to execute when the user clicks this button id="radioLC" gives us a way to identify this particular control in our JavaScript Result: <input type="radio" name="case" id="radioLC" checked onclick="setResults(document.getElementById('resultField').value)">Lowercase <input type="radio" name="case" id="radioUC" onclick="setResults(document.getElementById('resultField').value)">Uppercase Reset

20 Oct 25 20 The Information School of the University of Washington fit100-13-control © 2006 University of Washington Events Cause Processing After drawing a page, the browser sits idle waiting for something to happen … when we give input, we cause events Processing events is the task of a block of code called an event handler »The code to execute is identified in the tag using the appropriate attribute »There are many event types onClick, onChange, onMouseOver...

21 Oct 25 21 The Information School of the University of Washington fit100-13-control © 2006 University of Washington request processing of an event the onclick attribute defines some JavaScript to call when the button is clicked in this case, the code is a call to the setResults(string) function defined in the page the appropriate string value is supplied to the setResults(string) function and then the function executes <button type="button" onclick="setResults('good results')">Good Results <button type="button" onclick="setResults('bad results')">Bad Results

22 Oct 25 22 The Information School of the University of Washington fit100-13-control © 2006 University of Washington function setResults(resultString) { var tempString = resultString; if (document.getElementById("radioLC").checked) { tempString = tempString.toLowerCase(); } else if (document.getElementById("radioUC").checked) { tempString = tempString.toUpperCase(); } document.getElementById("resultField").value = tempString; } process a button’s onclick event the setResults(string) function is called by several event processors in every case, it takes the string that it is given, decides if upper or lower case is desired, and sets the resultField accordingly

23 Oct 25 23 The Information School of the University of Washington fit100-13-control © 2006 University of Washington setResults(resultString) parameter variable, local variable, if/else statement, field reference, call to toLowerCase() function function setResults(resultString) { var tempString = resultString; if (document.getElementById("radioLC").checked) { tempString = tempString.toLowerCase(); } else if (document.getElementById("radioUC").checked) { tempString = tempString.toUpperCase(); } document.getElementById("resultField").value = tempString; }

24 Oct 25 24 The Information School of the University of Washington fit100-13-control © 2006 University of Washington if statement in Simple Sample GUI the setResults(string) function is called by several event processors in every case, it takes the string that it is given, decides if upper or lower case is desired, and sets the resultField accordingly function setResults(resultString) { var tempString = resultString; if (document.getElementById("radioLC").checked) { tempString = tempString.toLowerCase(); } else if (document.getElementById("radioUC").checked) { tempString = tempString.toUpperCase(); } document.getElementById("resultField").value = tempString; }

25 Oct 25 25 The Information School of the University of Washington fit100-13-control © 2006 University of Washington A Fancier Example of a GUI program a single tall latte, what a great way to start the morning

26 Oct 25 26 The Information School of the University of Washington fit100-13-control © 2006 University of Washington Nested if/else Statements if (temp < 32) { if (sky == "cloudy) { alert("Snow is forecast!"); } if (temp < 32 && sky == "cloudy") { alert("Snow is forecast!"); }

27 Oct 25 27 The Information School of the University of Washington fit100-13-control © 2006 University of Washington Iteration Iteration or looping is a way to execute a block of program statements more than once we will use the for statement to create loops »The for loop is generally controlled by counting »There is an index variable that you increment or decrement each time through the loop »When the index reaches some limit condition, then the looping is done and we continue on in the code

28 Oct 25 28 The Information School of the University of Washington fit100-13-control © 2006 University of Washington Why do we want loops in our code? Do something for a given number of times or for every object in a collection of objects »for every radio button in a form, see if it is checked »for every month of the year, charge $100 against the balance »calculate the sum of all the numbers in a list »etc. Many loops are counting loops »they do something a certain number of times

29 Oct 25 29 The Information School of the University of Washington fit100-13-control © 2006 University of Washington The for loop A counting loop is usually implemented with for for (var i=0; i < count; i++) { document.writeln(" index value is : "+i); } initialize check for limit update loop control index shorthand for i=i+1 one or more statements in the loop body var count = 10;

30 for example

31 Oct 25 31 The Information School of the University of Washington fit100-13-control © 2006 University of Washington i++ is a shortcut for (i=0; i < count; i++) at the end of every pass through the for loop body, do the following: »get the value of i »increment i »store the incremented value Used as it is here, this is the same as writing »i = i + 1

32 Oct 25 32 The Information School of the University of Washington fit100-13-control © 2006 University of Washington body of loop may not execute at all Notice that depending on the values of the control variables, it is quite possible that the body of the loop will not execute at all var itemCount = 0;... for (var i=0; i < itemCount; i++) { document.writeln("..processing item "+i); } check for limit condition itemCount is 0 when we get here, so i<itemCount is immediately false and the loop body is skipped completely

33 Oct 25 33 The Information School of the University of Washington fit100-13-control © 2006 University of Washington loop body skip

34 Oct 25 34 The Information School of the University of Washington fit100-13-control © 2006 University of Washington “Off By 1” Error The most common error when working with iterations is to miscount by 1 »Everyone makes this mistake »A common place where the “off by 1” error matters is in how many times a loop loops »One advantage of a simple loop control statement is that it's easier to tell how many loops there will be Number of iterations for ( var i=0; i<n; i++) { }

35 Oct 25 35 The Information School of the University of Washington fit100-13-control © 2006 University of Washington Avoid Infinite Loops var count = 10; for ( var i=0; i<count; j++) { document.write("All work and no play, makes Jack a dull boy."); }

36 Oct 25 36 The Information School of the University of Washington fit100-13-control © 2006 University of Washington Homework / Projects Homework 3 - Due Monday Oct 30 @ start of class »Programming questions. Verify your answers! Project 2a - Due Monday Nov 6 @ 10:00 PM »Hangman Game

Download ppt "Oct 25 1 The Information School of the University of Washington fit100-13-control © 2006 University of Washington Control Flow INFO/CSE 100, Fall 2006."

Similar presentations

23-Aug-14 HTML/XHTML Forms. 2 What are forms? is just another kind of XHTML/HTML tag Forms are used to create (rather primitive) GUIs on Web pages Usually.

23-Aug-14 HTML/XHTML Forms. 2 What are forms? is just another kind of XHTML/HTML tag Forms are used to create (rather primitive) GUIs on Web pages Usually.
24-Aug-14 HTML Forms. 2 What are forms? is just another kind of HTML tag HTML forms are used to create (rather primitive) GUIs on Web pages Usually the.

24-Aug-14 HTML Forms. 2 What are forms? is just another kind of HTML tag HTML forms are used to create (rather primitive) GUIs on Web pages Usually the.
Java Script Session1 INTRODUCTION.

Java Script Session1 INTRODUCTION.
The Web Warrior Guide to Web Design Technologies

The Web Warrior Guide to Web Design Technologies
JavaScript Forms Form Validation Cookies. What JavaScript can do  Control document appearance and content  Control the browser  Interact with user.

JavaScript Forms Form Validation Cookies. What JavaScript can do  Control document appearance and content  Control the browser  Interact with user.
1 The Information School of the University of Washington Nov 1fit100-16-dom © 2006 University of Washington Document Object Model (DOM) INFO/CSE 100, Fall.

1 The Information School of the University of Washington Nov 1fit dom © 2006 University of Washington Document Object Model (DOM) INFO/CSE 100, Fall.
Chapter 7 © 2001 by Addison Wesley Longman, Inc. 1 Chapter 7 Sebesta: Programming the World Wide Web.

Chapter 7 © 2001 by Addison Wesley Longman, Inc. 1 Chapter 7 Sebesta: Programming the World Wide Web.
1 The Information School of the University of Washington Oct 30fit100-15-review Programming Review INFO/CSE 100, Fall 2006 Fluency in Information Technology.

1 The Information School of the University of Washington Oct 30fit review Programming Review INFO/CSE 100, Fall 2006 Fluency in Information Technology.
Forms Review. 2 Using Forms tag  Contains the form elements on a web page  Container tag tag  Configures a variety of form elements including text.

Forms Review. 2 Using Forms tag  Contains the form elements on a web page  Container tag tag  Configures a variety of form elements including text.
The Information School of the University of Washington Oct 23 fit100-12-functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information.

The Information School of the University of Washington Oct 23 fit functions 1 Functions / If Else INFO/CSE 100, Fall 2006 Fluency in Information.
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Fluency with Information Technology Third Edition by Lawrence Snyder Chapter.

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Fluency with Information Technology Third Edition by Lawrence Snyder Chapter.
The Information School of the University of Washington Dec 8fit100-26-review1 Final Exam Review INFO/CSE 100, Fall 2006 Fluency in Information Technology.

The Information School of the University of Washington Dec 8fit review1 Final Exam Review INFO/CSE 100, Fall 2006 Fluency in Information Technology.
29 November JavaScript: Arrays and Iterations Functions.

29 November JavaScript: Arrays and Iterations Functions.
Computer Science 103 Chapter 4 Advanced JavaScript.

Computer Science 103 Chapter 4 Advanced JavaScript.
JavaScript Lesson 1 TBE 540. Prerequisites  Before beginning this lesson, the learner must be able to… Create a basic web page using a text editor and/or.

JavaScript Lesson 1 TBE 540. Prerequisites  Before beginning this lesson, the learner must be able to… Create a basic web page using a text editor and/or.
Tutorial 6 Forms Section A - Working with Forms in JavaScript.

Tutorial 6 Forms Section A - Working with Forms in JavaScript.
XHTML Forms for Data Collection and Submission Chapter 5.

XHTML Forms for Data Collection and Submission Chapter 5.
Forms, Validation Week 7 INFM 603. Announcements Try placing today’s example in htdocs (XAMPP). This will allow you to execute examples that rely on PHP.

Forms, Validation Week 7 INFM 603. Announcements Try placing today’s example in htdocs (XAMPP). This will allow you to execute examples that rely on PHP.
Form Handling, Validation and Functions. Form Handling Forms are a graphical user interfaces (GUIs) that enables the interaction between users and servers.

Form Handling, Validation and Functions. Form Handling Forms are a graphical user interfaces (GUIs) that enables the interaction between users and servers.
CST 200 - JavaScript Validating Form Data with JavaScript.

CST JavaScript Validating Form Data with JavaScript.

Similar presentations

Ads by Google