1. CSD 340 (Blum)1 Introducing Text Input elements and Ifs

2. CSD 340 (Blum)2 Start a page

3. CSD 340 (Blum)3 In Design, go to Layout/Insert Table (4 rows and 3 columns)

4. CSD 340 (Blum)4 Highlight all the cells in the last column, right click and choose Merge Cells

5. CSD 340 (Blum)5 Result of previous step in Source Only two cells here. Three cells here, last with rowspan attribute.

6. CSD 340 (Blum)6 Highlight the first two cells in the first row, right click, choose Merge Cells.

7. CSD 340 (Blum)7 Result of merging cells in same row: colspan What was two cells has been replaced by one with a colspan attribute.

8. CSD 340 (Blum)8 Repeat the steps to merge the first two cells in the last row.

9. CSD 340 (Blum)9 Place the cursor in the second column, second row and double click on the Input Text button on the Toolbox.

10. CSD 340 (Blum)10 Change the id attribute to indicate that this textbox is for inputting a username.

11. CSD 340 (Blum)11 Place the cursor in the second column, third row and double click on the Input (Password) button on the Toolbox.

12. CSD 340 (Blum)12 If necessary, change the id attribute to indicate that this textbox is for inputting a password.

13. CSD 340 (Blum)13 Highlight txtUserName input element, place cursor next to style and click button.

14. CSD 340 (Blum)14 In the Style Builder dialog box, click Position along the left, enter a width value and click OK.

15. CSD 340 (Blum)15 Repeat the procedure for the password textbox.

16. CSD 340 (Blum)16 Place the cursor in the cell in the last row, click on the drop-down arrow next to the Align Left button and choose Align Right.

17. CSD 340 (Blum)17 With cursor in cell, double click on Input (Button) button on the Toolbox.

18. CSD 340 (Blum)18 In Source, change the id and the value attributes of the button.

19. CSD 340 (Blum)19 Double click on the OK button to generate the shell of a function that handles the clicking of the OK button.

20. CSD 340 (Blum)20 Code added automatically (Part 1) The tags and the start of the function code were generated by double clicking the OK button.

21. CSD 340 (Blum)21 Code added automatically (Part 2) Double clicking also generated the calling of the function when the button is clicked.

22. CSD 340 (Blum)22 Function Starter

23. CSD 340 (Blum)23 First line: declare a variable to hold the user’s “attempt” at a username. Second line: assign to this variable the text element’s value which is whatever the user types into the textbox. Third line: use a alert to display the information var UserNameAttempt; UserNameAttempt = document.getElementById("txtUserName").value; alert("Welcome " + UserNameAttempt);

24. CSD 340 (Blum)24 Result of user entering text and clicking OK.

25. CSD 340 (Blum)25 Declare variables for the correct username and password.

26. CSD 340 (Blum)26 Declarations The declarations must be made within tags. The declarations made inside a function are for variables used only by that function. Declarations made outside a function may be shared by different functions (without the information being passed as an argument).

27. CSD 340 (Blum)27 Add an if statement.

28. CSD 340 (Blum)28 Keyword “if” Condition in parentheses –The condition asks a true-or-false question. In this particular case the question is whether two variables happen to have the same value. –Note that two equals signs are used to ask if two things are equal. One equal sign would make them equal – even as part of an if. Statement or block of statement to be done/executed should the condition result in an answer of “true” if ( UserNameAttempt == TheUserName) { alert("Welcome " + UserNameAttempt); }

29. CSD 340 (Blum)29 Nothing seems to happen when user clicks OK button.

30. CSD 340 (Blum)30 Now the alert function is only executed if the condition is true.

31. CSD 340 (Blum)31 Add an else to the if

32. CSD 340 (Blum)32 Result of adding else. One can follow the if and the statement block to execute when the condition evaluates to true by the keyword else and another statement block which is to be executed when the condition evaluates to false.

33. CSD 340 (Blum)33 Note case sensitivity: the answer to the question does marxg1 equal MarxG1 is false.

34. CSD 340 (Blum)34 Nesting ifs. Putting one if statement inside another is called nesting.

35. CSD 340 (Blum)35 Nested if can also have else.

36. CSD 340 (Blum)36 Add a variable to count how many times the user has attempted to log on. It is important that this particular variable be declared outside the function because its value has to be remembered from click to click.

37. CSD 340 (Blum)37 Incrementing the counter each time the button is clicked (whether or not there is any match)

38. CSD 340 (Blum)38 Disable the Ok button if three logons are attempted (whether successful or not)

39. CSD 340 (Blum)39 After three attempts. OK button is disabled after three logon attempts.

40. CSD 340 (Blum)40 Assign an id to the cell on the left.

41. CSD 340 (Blum)41 Add innerHTML code document.getElementById("Greeting").innerHTML = "Welcome " + UserNameAttempt;

42. CSD 340 (Blum)42 Result of innerHTML code This was HTML code, boring in this case, but it could be anything like an image.