Presentation is loading. Please wait.

Presentation is loading. Please wait.

The conditional statement General form: if ( ) { consequent-action-list } Actual Example: if (applicationForm.name.value= ='') { alert("Name is empty")

Similar presentations


Presentation on theme: "The conditional statement General form: if ( ) { consequent-action-list } Actual Example: if (applicationForm.name.value= ='') { alert("Name is empty")"— Presentation transcript:

1 The conditional statement General form: if ( ) { consequent-action-list } Actual Example: if (applicationForm.name.value= ='') { alert("Name is empty") }

2 Conditions Many forms are possible. Equality is one type General form of equality condition: = = Actual Example: applicationForm.name.value= ='’ Note that, in conditions, equality is written as two = characters, that is as = =

3 More on conditions Besides = = (for equality) we can use these other types of comparison operators in conditions: != not equal < less than > greater than <= less than or equal to >= greater than or equal to

4 More on conditions We can also build compound conditions using the following logical operators: && logical and || logical or ! logical not Examples: applnForm.name.value = = ‘Fred’ || applnForm.name.value==‘Tom’ applnForm.age.value >= 16 && applnForm.age.value <= 20

5 Alert actions General form of alert action: alert( ) Actual Examples: alert(“Name is empty”) alert(applicationForm.name.value)

6 Complete docmn’t spec (Part I) Membership Application Form FORM {BACKGROUND-COLOR : red; PADDING : 0.2in} FIELDSET {PADDING : 0.2in} BUTTON {MARGIN : 0.1in} function checkApplication() {if (applicationForm.name.value=='') { alert("Name is empty") } ; if (applicationForm.email.value=='') { alert("Email address is empty") } }

7 Complete docmn’t spec (Part II) If you want to join our club, complete the form below and we will get back to you. Membership Application Form Contact Information What is your name? Please enter your email address:

8 Complete docmn’t spec (Part III) Form Submission Check application Submit application

9 The SIZE attribute In the examples so far, INPUT elements of TYPE=text were given, on the form, a user-input box of a default size You can, however, specify the exact size you want, by using the attribute SIZE Examples: You can see the effect of these size specifications on the next slide WARNING: Microsoft Internet Explorer 5.0 actually makes user-input boxes one character longer than your specified size! Navigator 4.08 does not -- but, then again, it does not yet handle fieldsets either!

10

11 Length of user-input versus size of user-input box The user’s input is not restricted to the size of the user-input box On the next four slides, you can see, from the server-side responses, that the user input names which were much longer than the user-input box

12 User’s input exceeds default size of user-input box

13 Here we can see how long the user’s name really was

14 User’s input can exceed a box of specified SIZE too:

15 Again, we see the full-name:

16 We can, however, impose an upper-limit on the user’s input: We can use the MAXLENGTH attribute Example This is used on the next slide: –when the user tries to input more than 6 characters in this box the browser refuses to accept them (even though the form shows the box as longer than 6 characters!)

17

18

19 More types of INPUT elements

20

21 Of course, the server does not send the password back:

22 INPUTs of TYPE=checkbox An INPUT element of TYPE=checkbox produces a little box into which the user can place a mark to indicate a desire to select the value that is associated with the element This type of element must have a VALUE attribute to specify the associated value Example If the user places a in the box produced by this element the server-side program would be told that the user selected navyBlue as a colour Three check-boxes are used on the next slide

23

24 Using the checkboxes By clicking on one or more of these checkboxes, the user can select one or more T-shirts that he wants to order

25

26

27 Form Specification : Order What is your name? Please select which style(s) of T-shirt you want: Batman's cloak Superman’s cloak Dr. Who's coat Form Submission Submit order

28 Oh, by the way: On the screen below, we eliminate list “bullets” by the following line in a stylesheet LI {LIST-STYLE-TYPE : none}

29 Using text with checkboxes You must use text with checkboxes –otherwise, the user will not know what he is selecting –this is because the VALUE associated with the checkbox is not printed by a browser Example: Batman's cloak The user sees Batman's cloak in the browser beside the checkbox

30 Multiple checkboxes with same NAME Notice that we can have multiple checkboxes with the same name: Batman's cloak Superman’s cloak Dr. Who's coat If the user selects more than one checkbox with the same name, several equations involving this name are sent to the server-side program, e.g.: products=Batman products=Superman

31 Default selection of checkboxes The web page on the next slide is trying to encourage the user to buy the Superman T- shirt It does so by “pre-selecting” the checkbox for this T-shirt and by having some associated “pushy” text

32

33 More on default selection A checkbox is preselected by using the word CHECKED in the INPUT element: Batman's cloak Superman's cloak (our best-selling item) Dr. Who's coat The user can, of course, remove the from a checkbox by clicking on the box

34 INPUT elements of TYPE=radio The word radio derives from the concept of “radio buttons” -- the station selection buttons on car-radios Properties of radio buttons: –they represent alternatives –only one alternative can be selected –selecting one alternative has the side-effect of automatically de-selecting any previous selection INPUT elements of TYPE=radio have the same properties

35 More on INPUT elements of TYPE=radio The following slide shows a radio button version of the previous order form Now the user can buy only one T-shirt

36

37 Suppose the user has selected the Batman T-shirt

38 If he now clicks the Dr. Who button, Batman is deselected

39 Implementation of the above: Batman's cloak Superman's cloak Dr. Who's coat

40 Preselection of radio buttons Just as checkboxes can be preselected, one radio button in a group which all have the same NAME can be preselected HOWEVER, –more than one checkbox can be preselected –but ONLY ONE radio button can be preselected

41 Example Batman's cloak Superman's cloak (our best-selling item) Dr. Who's coat

42 Other types of INPUT element There are some types of INPUT element that we have not considered: –TYPE=hidden –TYPE=file –TYPE=image They have their uses but are too specialized to be considered here You should study their uses yourself

43 Cs 3314 got here on 5 nov 2005 still have to discuss hidden elements

44 Other user-input elements So far we have considered two classes of user-input elements: –the BUTTON element –the INPUT element There are two other kinds: –the SELECT element –the TEXTAREA element


Download ppt "The conditional statement General form: if ( ) { consequent-action-list } Actual Example: if (applicationForm.name.value= ='') { alert("Name is empty")"

Similar presentations


Ads by Google