1. LECTURE 9 21/11/12 1

2. Comments in JavaScript // This is a single line JavaScript comment 2

3. For Loops Executes a statement or statements for a number of times – iteration. Syntax for(initialize; test; increment) { // statements to be executed } Initial Value is the starting number of the loop. If the condition(test) is true the code is executed. The initial value is changed by the step size. 3

4. For Loops The expression is evaluated, if it is false, JavaScript moves to the next statement in the program If it is true then the statement is executed and expression is evaluated again Again if the expression is false the JavaScript moves on the next statement in script, otherwise it executes the statement that forms the body of the loop 4

5. For Loops For for (i=0;i<= 5; i++) //the position of the ++ here does not have an impact on the output it will always start at 0 { document.write("The number is " + i);// change to i++ and ++i here to see the impact on the output document.write(" "); } 5

6. Another Example For for (i=0;i<= 5; i++) //the position of the ++ here does not have an impact on the output it will always start at 00 { document.write("The number is " + i++ ); document.write(" "); } The number is 0 The number is 2 The number is 4 6

7. Another Example For for (i=0;i<= 5; i++) //the position of the ++ here does not have an impact on the output it will always start at 00 { document.write("The number is " + ++i); document.write(" "); } The number is 1 The number is 3 The number is 5 7

8. For Loop Another Example The counter variable is something that is created and usually used only in the for loop to count how many times the for loop has looped. i is the normal label for this counter variable and what we will be using. The conditional statement - It is what decides whether the for loop continues executing or not. This check usually includes the counter variable in some way. The counter variable is incremented after every loop in the increment section of the for loop. The code that is executed for each loop through the for loop. <!-- var linebreak = " "; document.write("For loop code is beginning"); document.write(linebreak); for(i = 2; i < 10; i++) { document.write("Counter i = " + i); document.write(linebreak); } document.write("For loop code is finished!"); 8

9. While Loops: While a condition is true execute one or more statements. “While Loops” are especially useful when you do not know how many times you have to loop but you know you should stop when you meet the condition, i.e. an indeterminate loop 9

10. While Loop The while Loop is the basic statement that allows JavaScript to perform repetitive actions. It has the following syntax. while (expression) { // Statement to be executed } … more code… 10

11. While Loops This cycle continues until the expression evaluates to false It is important that a Loop counter that is used within the body of the Loop is declared outside it. 11

12. i=0; while (i<=5) { document.write("The number is " + i); document.write(" "); i++; } 12

13. While Loops i=1; while (i<=5) { document.write("The number is " + i); document.write(" "); i++; } What happens in this example? i=6; while (i<=5) { document.write("The number is " + i); document.write(" "); i++; } Loop DOES not run 13

14. While Another Example There are two key parts to a JavaScript while loop: The conditional statement which must be True for the while loop's code to be executed. The while loop's code that is contained in curly braces "{ and }" will be executed if the condition is True. <!-- var myCounter = 0; var linebreak = " "; document.write("While loop is beginning"); document.write(linebreak); while(myCounter < 10){ document.write("myCounter = " + myCounter); document.write(linebreak); myCounter++; } document.write("While loop is finished!"); 14

15. Do While Loops var i=0; do { document.write("Output= " + i); document.write(" "); i++; } while (i<=12); Will run once to evaluate condition – var i=13; do { document.write("Output= " + i); document.write(" "); i++; } while (i<=12); 15

16. Do While Another Example.. <!-- var count = 0; document.write("Starting Loop" + " "); Do { document.write("Current Count : " + count + " "); count++; } while (count < 0); document.write("Loop stopped!"); //--> 16

17. Why use Loops? When you want the same block of code to run over and over again in a row Instead of adding several almost equal lines in a script we can use loops to perform a task like this While v For A while loop doesn't initialize or increment any fields automatically as part of the command, it just tests a condition and executes the loop for as long as the condition remains true A while loop can easily be substituted wherever you have a for loop by moving the initialization statement (e.g. i=1) in front of the loop and the increment statement (e.g. i++) to just inside the end of the loop This may make the loop easier to read 17

18. Length() var myString = "123456"; document.write("The string is this long: " + myString.length); myString = myString + "7890"; document.write(" The string is now this long: " + myString.length); 18

19. IndexOf Another Example… var aURL = "http://www.ucc.ie"; var aPosition = aURL.indexOf("ucc"); document.write("The position of ucc = " + aPosition); 19

20. Substring and substr another example.. var str="End of term is near!"; document.write(str.substring(4)+" "); document.write(str.substring(4,7)); var str="Hello world!"; document.write(str.substr(3)+" "); document.write(str.substr(3,4)); 20

21. CharAt () JavaScript String charAt() Method var str = new String( "This is string" ); document.writeln("str.charAt(0) is:" + str.charAt(0)); document.writeln(" str.charAt(1) is:" + str.charAt(1)); document.writeln(" str.charAt(2) is:" + str.charAt(2)); document.writeln(" str.charAt(3) is:" + str.charAt(3)); document.writeln(" str.charAt(4) is:" + str.charAt(4)); document.writeln(" str.charAt(5) is:" + str.charAt(5)); 21

22. Operators… <!-- var two = 2 var ten = 10 var linebreak = " " document.write("two plus ten = ") var result = two + ten document.write(result) document.write(linebreak) document.write("ten * ten = ") result = ten * ten document.write(result) document.write(linebreak) document.write("ten / two = ") result = ten / two document.write(result) //--> 22

23. Another If Else var username = "Agent006"; if(username == "Agent007") document.write("Welcome special agent 007"); else document.write("Access Denied!"); document.write(" Would you like to try again? "); // User enters a different name username = "Agent007"; if(username == "Agent007") document.write("Welcome special agent 007"); else document.write("Access Denied!"); 23

24. Form Validation Example var x; var firstname; var country1; var email; var phone1; var comment1; var at; var dot; function validate1() { x=document.myForm; at=x.myEmail.value.indexOf("@"); dot=x.myEmail.value.indexOf("."); firstname=x.myname.value; country1=x.country.value; email=x.myEmail.value; phone1=x.phone.value; comment1=x.comment.value; 24

25. if (firstname =="") { alert("You must complete the name field"); x.myname.focus(); return false; } else if(isNaN(firstname)== false) { alert("Please enter your name correctly"); x.myname.focus(); return false; } else if (country1 =="") { alert("You must complete the country field"); x.country.focus(); return false; } else if(isNaN(country1)== false) { alert("Please enter country correctly"); x.country.focus(); return false; } else if(email == "") { alert("Please enter a vaild e-mail address"); x.myEmail.focus(); return false; } 25

26. else if (at==-1) { alert("Please enter a vaild e-mail address "); x.myEmail.focus(); return false; } else if (dot==-1) { alert("Please enter a vaild e-mail address "); x.myEmail.focus(); return false; } else if(phone1=="") { alert("Please enter your phone number"); x.phone.focus(); return false; } else if(isNaN(phone1)==true) { alert("That phone number is not valid"); x.phone.focus(); return false; } else if(comment1=="") { alert("Please enter your comment!"); x.comment.focus(); return false; } return true; } 26

27. Enter your First Name: Enter your Country: Enter your e-mail: Enter your Phone Number: Your Comment: 27

28. CSS Recap Inline Internal External Browser Default Ref to external CSS 28

29. CSS Rules Inline – This is a paragraph. Internal hr {color:blue;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} External Create page and save as style1.css (example) h3 { text-align:right; font-size:20pt; } 29

30. CSS Relative Font Measurements em, ex, px Absolute in, cm, mm, pt, pc Positioning Absolute – When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go. Relative – If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. Z-index - The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). The tag defines a division or a section in an HTML document. The tag is often used to group block-elements to format them with styles. Div id Specifies a unique id for an element Generally ids are used for the main elements of the page, such as header, main content, sidebar, footer, etc. id attribute 30

31. MCQ – IS6116 MONDAY 5 TH DEC 1PM 10% BRING PENCIL 30 MINUTES 30 QUESTIONS NEGATIVE MARKING +3 -1 NO ANSWER 0 31

32. Course Content to 5/12/11 Website Design and Usability Introduction to xHTML Basic xHTML Tags Additonal xHTML tag Cascading Style Sheets Introduction to Client Side Processing 32

33. Summary JavaScript-Variables and Operators Control Flow Structures Forms and String Object 33

34. Every JavaScript statement should end with a _______ a) Colon b) Semi-colon c) Curly bracket d) None of the above Methods ____ and ____ of the _____ object write xHTML text into an xHTML document. a) Document, window and string b) write, writeln and document c) Lastindexof, indexof and string d) None of the above Like JAVA variables JavaScript variables are typed. True or False. You may only place JavaScript in the tag in the xHTML document. True or False. 34

35. Sample Question What is the outcome from the following JavaScript code? function mymessage() { alert("Hello World") } a) A syntax error occurs b) “Hello World” is printed to the browser window c) An alert box is triggered by the onload event d) The function triggers the onload event 35

36. Sample Question What is the output from the following JavaScript code? Char At var a; a="MCQ’s are great!"; document.write(x.charAt(6)); a) s b) ’ c) a d) It will generate an error. 36