CS 177 Recitation

1
CS 177 Recitation

• Feb 16th Week 6

2
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?
• 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

3
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

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

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

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

7
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

8
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

9
Button Textbox Example

• Check This Example
• Clicking a button and generating an alert that
  displays text from a textbox.

10
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

11
RandomReal Example

• Check This Example
• 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.

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

13
Temperature Converter Example
14
Temperature Converter Example

• can modify the conversion page to allow for
  entering a temperature in either box, then
  convert to the other
• Check This Example

15
Doubler Example

• Check This Example
• Double the number entered, and uses the same
  textbox for input and output.

16
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

17
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

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

19
Personal Greeting Example
20
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

21
Dynamic Image Example
22

• 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

23
Questions?