CS 177 Recitation

1
CS 177 Recitation

• Sep 29, 2006 Week 6

2
Announcements

• Project 2 is on the course website.
• It is due on Wed Oct 18 at 10PM.
• Start early! It will be more difficult than the
  first project.
• The material covered in todays recitation will
  be VERY useful!

3
Event-Driven Programming

• What is Event-Driven Programming?
• A programming paradigm in which the flow of the
  program is determined by the occurrence of
  events.
• So what does that mean for us?
• Users trigger events through interaction with the
  webpage, and the page provides JavaScript
  functions to handle the events.
• What are some examples of actions a user can do
  to trigger events on a webpage?
• Clicking a button
• Submitting a form
• Setting the focus to a text input
• Clicking a hyperlink

4
JavaScript Inputs

• What tag is used to define a user input element?
• The ltinputgt tag.
• ltinput typeINPUT_TYPE name INPUT_NAMEgt
• What are some JavaScript inputs you have
  discussed in class?
• Buttons
• Textboxes

5
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.

6
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.

7
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.

8
Text Inputs

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

9
Text Inputs Continued

• How would you get the value from a textbox in
  JavaScript?
• document.ltform namegt.ltinput namegt.value
• For example, if the forms name is myForm and
  the textboxs 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 textbox given above
• var x parseFloat(document.myForm.myText.value)
  
• x x 10

10
Button Textbox Example

• rec6ex1.html
• Clicking a button and generating an alert that
  displays text from a textbox.

11
Changing a textboxs value

• How would you change the value displayed in a
  textbox?
• document.ltform namegt.ltinput namegt.value ltnew
  valuegt
• For example
• document.userInfoForm.zipCode.value 47906
• How would you change the value of a textbox
  called fullName on a form called taxForm to
  Al Capone?
• document.taxForm.fullName.value Al Capone

12
RandomReal Example

• rec6ex2.html
• Generating a random floating point number whose
  interval and precision are specified in
  textboxes.
• Things to Note
• The user-defined JavaScript functions cannot be
  defined in the same ltscriptgt tag that allows the
  use of the random.js library.
• Use of parseFloat() in GenerateRandom().
• Normal HTML tags are used within ltformgt tags.

13
Temperature Converter Example

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

14
Doubler Example

• doubler.html
• Double the number entered, and uses the same
  textbox for input and output.

15
Textarea Inputs

• How would you create a textarea called
  textarea1 with with 30 rows, 8 columns, and the
  string Enter text here in it?
• lttextarea nametextarea1 rows30 cols8gtEnter
  text here...lt/textareagt
• Note that we do not use an ltinputgt tag.
  Textareas are containers and you put the default
  text between the opening and closing tags.
• You can get the value of the textarea just like
  you get if for textboxes
• document.ltform namegt.lttextarea namegt.value
• You can disable wrapping of text in the textarea
  by setting the attribute wrap to off.
• lttextarea nametextarea1 wrapoffgtThis text
  will not be wrapped even though it is obnoxiously
  long and seems like it will never ever ever ever
  ever ever end.lt/textareagt

16
Personal Greeting Example

• What does this example do?
• - Converts user input into a textbox from
  Fahrenheit to Celsius.
• Note The textareas wrap attribute is set to
  virtual to allow text wrapping.

17
Personal Greeting Example
18
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

19
All-In-One Example

• all_in_one.html
• An example of four forms that do the topics
  discussed in this recitation in order to make
  crazy behavior.

20
Questions?