CS 177 Recitation

1
CS 177 Recitation

• September 28, 2007 Week 6

2
Announcements

• Exam 1
• Answer key
• Stats
• Average         71.5
• Median         73.0
• Maximum         94.0
• Minimum         34.0
• Standard Deviation        12.61
• Missing a shirt?
• Somebody forgot a shirt after the exam
• Claim it at Dr. KC VanZandts office (HAAS 142)
• Project 2 is posted
• Due 900 pm on October 17, 2007
• Start early!

3
The Hardest Questions from Exam 1

• 3. What is the minimum number of bytes required
  to represent a certain color in a system that can
  represent 256 different colors?
• (a) 256
• (b) 8
• (c) 1
• (d) 2
• 18. You learned the UNIX command, pwd, during
  lab0. What does it do?
• (a) displays your password and allows you to
  change it
• (b) displays the name of the current shell you
  are running
• (c) displays the content of the current directory
• (d) displays the name of the current directory

4
The Hardest Questions from Exam 1

• 3. What is the minimum number of bytes required
  to represent a certain color in a system that can
  represent 256 different colors?
• (a) 256
• (b) 8
• (c) 1
• (d) 2
• 18. You learned the UNIX command, pwd, during
  lab0. What does it do?
• (a) displays your password and allows you to
  change it
• (b) displays the name of the current shell you
  are running
• (c) displays the content of the current directory
• (d) displays the name of the current directory

5
The Hardest Questions from Exam 1

• 3. What is the minimum number of bytes required
  to represent a certain color in a system that can
  represent 256 different colors?
• (a) 256
• (b) 8
• (c) 1
• (d) 2
• 18. You learned the UNIX command, pwd, during
  lab0. What does it do?
• (a) displays your password and allows you to
  change it
• (b) displays the name of the current shell you
  are running
• (c) displays the content of the current directory
• (d) displays the name of the current directory

6
The Hardest Questions from Exam1

• 22. What will the given code segment display in a
  web page?
• ltscript type"text/javascript"gt
• document.write(10 parseFloat("5"
  parseFloat("5.83")))
• lt/scriptgt
• (a) 20.83
• (b) 65.83
• (c) 1055.83
• (d) It gives a JavaScript error.
• 24. Which of the following can produce a run-time
  error in a program?
• I. The JavaScript code does some calculation but
  wrongly uses
• multiplication in a place where division is
  needed.
• II. The JavaScript code uses the JavaScript
  parseInt function
• without validating the input given to it.
• III. The JavaScript code does some calculation
  that includes
• division without doing any validation on the
  numbers used.
• (a) I only
• (b) II and III
• (c) I, II and III

7
The Hardest Questions from Exam1

• 22. What will the given code segment display in a
  web page?
• ltscript type"text/javascript"gt
• document.write(10 parseFloat("5"
  parseFloat("5.83")))
• lt/scriptgt
• (a) 20.83
• (b) 65.83
• (c) 1055.83
• (d) It gives a JavaScript error.
• 24. Which of the following can produce a run-time
  error in a program?
• I. The JavaScript code does some calculation but
  wrongly uses
• multiplication in a place where division is
  needed.
• II. The JavaScript code uses the JavaScript
  parseInt function
• without validating the input given to it.
• III. The JavaScript code does some calculation
  that includes
• division without doing any validation on the
  numbers used.
• (a) I only
• (b) II and III
• (c) I, II and III

8
The Hardest Questions from Exam1

• 22. What will the given code segment display in a
  web page?
• ltscript type"text/javascript"gt
• document.write(10 parseFloat("5"
  parseFloat("5.83")))
• lt/scriptgt
• (a) 20.83
• (b) 65.83
• (c) 1055.83
• (d) It gives a JavaScript error.
• 24. Which of the following can produce a run-time
  error in a program?
• I. The JavaScript code does some calculation but
  wrongly uses
• multiplication in a place where division is
  needed.
• II. The JavaScript code uses the JavaScript
  parseInt function
• without validating the input given to it.
• III. The JavaScript code does some calculation
  that includes
• division without doing any validation on the
  numbers used.
• (a) I only
• (b) II and III
• (c) I, II and III

9
The Hardest Questions from Exam1

• 25. What was the first programmable device in the
  history of computers?
• (a) Analytic engine
• (b) Jacquards loom
• (c) Tabulating machine
• (d) Pascals calculating device
• 32. Suppose there is a function randint that
  returns a random integer between 1 and 100. You
  want to call that function and print the returned
  integer using the following statement
• document.write("The random number is "
  randint)
• Would this statement work?
• (a) Yes it would work. It would print a random
  integer between 1 and 100
• (b) No, it would not work because randint should
  be followed by a pair of parenthesis
• (c) No, it would not work because randint is not
  enclosed in double quotes
• (d) No, it would not work because randint is the
  name of a Math library function

10
The Hardest Questions from Exam1

• 25. What was the first programmable device in the
  history of computers?
• (a) Analytic engine
• (b) Jacquards loom
• (c) Tabulating machine
• (d) Pascals calculating device
• 32. Suppose there is a function randint that
  returns a random integer between 1 and 100. You
  want to call that function and print the returned
  integer using the following statement
• document.write("The random number is "
  randint)
• Would this statement work?
• (a) Yes it would work. It would print a random
  integer between 1 and 100
• (b) No, it would not work because randint should
  be followed by a pair of parenthesis
• (c) No, it would not work because randint is not
  enclosed in double quotes
• (d) No, it would not work because randint is the
  name of a Math library function

11
The Hardest Questions from Exam1

• 25. What was the first programmable device in the
  history of computers?
• (a) Analytic engine
• (b) Jacquards loom
• (c) Tabulating machine
• (d) Pascals calculating device
• 32. Suppose there is a function randint that
  returns a random integer between 1 and 100. You
  want to call that function and print the returned
  integer using the following statement
• document.write("The random number is "
  randint)
• Would this statement work?
• (a) Yes it would work. It would print a random
  integer between 1 and 100
• (b) No, it would not work because randint should
  be followed by a pair of parenthesis
• (c) No, it would not work because randint is not
  enclosed in double quotes
• (d) No, it would not work because randint is the
  name of a Math library function

12
Project 2

• Developing a simple calculator
• Sample
• Do not use the code from the sample as a template
  for your project
• If you do, you project will not work correctly
• Your project requires features that are different
  from the ones shown by the sample
• Understand the sample and start your project from
  scratch

13
Chapter 9 Event-Driven Programming
14
Button Inputs

• How would you create a button called button1
  with the text Press Me! on it?
• ltinput typebutton namebutton1 valuePress
  Me!gt
• How would you make the same button call a
  JavaScript function buttonPressed() when it is
  clicked.
• ltinput typebutton namebutton1 valuePress
  Me! onClickbuttonPressed()gt
• The onClick attribute is used to run JavaScript
  code when the button is clicked.

15
JavaScript Forms

• What HTML tag is the container for inputs that
  the user can interact with?
• The ltformgt tag
• ltform namemyFormgtlt/formgt
• The name attribute specifies the name that you
  will use to refer to this form in your JavaScript
  code (more on this later).
• What can you put between the form tags?
• Any HTML tags that can be normally used in body
  tags (e.g. lttablegt, ltdivgt, etc).
• However, remember that ALL inputs must be inside
  form tags.

16
LuckyForm Example

• What does the example here do?
• - When the user clicks a button, a random number
  is generated and displayed in an alert.
• Note that even if DisplayNumber() was not
  defined, you would not get an error until the
  button is clicked.

17
Text Inputs

• How would you create a text box called txtbox1
  with the string Enter text in it?
• ltinput typetext nametxtbox1 valueEnter
  textgt
• How can you control the size of the text box?
• Use the size attribute.
• ltinput typetext namemph value size10gt
• ltinput typetext namemph value size50gt

18
Text Inputs Continued

• How would you get the value from a text box in
  JavaScript?
• document.ltform namegt.ltinput namegt.value
• For example, if the forms name is myForm and
  the text boxs name is myText
• var username document.myForm.myText.value
• You can think of the . as narrowing the scope.
• The whole HTML document gt the form youre
  interested in gt the input element gt its value.
• What is the data type of the value returned?
• String
• What if I want a number?
• Use parseFloat()!
• Example for the form and text box given above
• var x parseFloat(document.myForm.myText.value)
  
• x x 10

19
Temperature Converter Example

• What does this example do?
• - Converts user input into a text box from
  Fahrenheit to Celsius.
• Note parseFloat() is used to convert the value
  in fahrBox to a floating point number.

20
Temperature Converter Example
21
Text Areas

• Similar to a text box but can contain any number
  of text lines.
• General form
• lttextarea name"TEXTAREA_NAME" rowsNUM_ROWS
  colsNUM_COLS wrap"virtual"gt
• INITIAL_TEXT
• lt/textareagt
• The NAME attribute gives the element a name so
  that it can be referenced
• The ROWS attribute specifies the height (number
  of text lines) of the area
• The COLS attribute specifies the width (number of
  characters) of the area
• The WRAP attribute ensures that the text will
  wrap from one line to the next instead of running
  off the edge of the text area

22
Text Areas (cont.)

• Unlike a text box, opening and closing tags are
  used to define a text area
• Any text appearing between the tags will be the
  initial text in the text area
• Otherwise, the contents of a text area are
  accessed/assigned in the same way

23
Personal Greeting Example

• What does this example do?
• The user enters first and last names into text
  boxes
• A long greeting is constructed using the names
  and assigned to the text area
• Note The textareas wrap attribute is set to
  virtual to allow text wrapping.

24
Personal Greeting Example
25
Dynamic Images

• Recall that to put an image in a webpage you use
  the ltimagegt tag like below
• ltimg srcapple.jpg namefruitgt
• What if you want to change the image to an orange
  later in the webpages execution?
• Modify the images src attribute from JavaScript!
• document.images.ltimage namegt.src ltnew valuegt
• Example from above
• document.images.fruit.src orange.jpg

26
Dynamic Image Example
27

• Dynamic Image Example
• Initially the image is set to happy.gif
• When a button is clicked, the ChangeImage
  function is called to change the image
• The new image is specified by the parameter to
  the function
• Note the use of single quotes around the file
  names to avoid conflicts with the onClick double
  quotes

28
Questions?