1 / 36

Lecture 9

Lecture 9. 21/11/12. Comments in JavaScript. // This is a single line JavaScript comment <!-- -- >. For Loops. Executes a statement or statements for a number of times – iteration. Syntax for(initialize; test; increment) { // statements to be executed }

merritt-baldwin
Télécharger la présentation

Lecture 9

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lecture 9 21/11/12

  2. Comments in JavaScript • // This is a single line JavaScript comment • <!-- -- >

  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.

  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

  5. For Loops <html> <head> <title> For</title> </head> <body> <script type="text/javascript"> 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("<br />"); } </script> </body> </html>

  6. Another Example <html> <head> <title> For</title> </head> <body> <script type="text/javascript"> 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("<br />"); } </script> </body> </html> The number is 0The number is 2The number is 4

  7. Another Example <html> <head> <title> For</title> </head> <body> <script type="text/javascript"> 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("<br />"); } </script> </body> </html> The number is 1The number is 3The number is 5

  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. <html> <script type="text/javascript"> <!-- varlinebreak = "<br />"; 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!"); </script> </html>

  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

  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…

  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.

  12. <html> <body> <script type="text/javascript"> i=0; while (i<=5) { document.write("The number is " + i); document.write("<br />"); i++; } </script> </body> </html>

  13. While Loops <html> <body> <script type="text/javascript"> i=1; while (i<=5) { document.write("The number is " + i); document.write("<br />"); i++; } </script> </body> </html> What happens in this example? <html> <body> <script type="text/javascript"> i=6; while (i<=5) { document.write("The number is " + i); document.write("<br />"); i++; } </script> </body> </html> Loop DOES not run

  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. <html> <script type="text/javascript"> <!-- varmyCounter = 0; varlinebreak = "<br />"; 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!"); </script> </html>

  15. Do While Loops <html> <body> <script type="text/javascript"> vari=0; do   { document.write("Output= " + i); document.write("<br />"); i++;   } while (i<=12); </script> </body> </html> Will run once to evaluate condition – <html> <body> <script type="text/javascript"> vari=13; do   { document.write("Output= " + i); document.write("<br />"); i++;   } while (i<=12); </script> </body> </html>

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

  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

  18. Length() <script type="text/javascript"> varmyString = "123456"; document.write("The string is this long: " + myString.length); myString = myString + "7890"; document.write("<br />The string is now this long: " + myString.length); </script>

  19. IndexOf Another Example… <html> <script type="text/javascript"> varaURL = "http://www.ucc.ie"; varaPosition = aURL.indexOf("ucc"); document.write("The position of ucc = " + aPosition); </script> </html>

  20. Substring and substranother example.. <script type="text/javascript"> varstr="End of term is near!"; document.write(str.substring(4)+"<br />"); document.write(str.substring(4,7)); </script> <script type="text/javascript"> varstr="Hello world!"; document.write(str.substr(3)+"<br />"); document.write(str.substr(3,4)); </script>

  21. CharAt () <html> <head> <title>JavaScript String charAt() Method</title> </head> <body> <script type="text/javascript"> varstr = new String( "This is string" ); document.writeln("str.charAt(0) is:" + str.charAt(0)); document.writeln("<br />str.charAt(1) is:" + str.charAt(1)); document.writeln("<br />str.charAt(2) is:" + str.charAt(2)); document.writeln("<br />str.charAt(3) is:" + str.charAt(3)); document.writeln("<br />str.charAt(4) is:" + str.charAt(4)); document.writeln("<br />str.charAt(5) is:" + str.charAt(5)); </script> </body> </html>

  22. Operators… <script type="text/JavaScript"> <!-- var two = 2 var ten = 10 varlinebreak = "<br />" 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) //--> </script> </body>

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

  24. Form Validation Example <html> <head> <script language="javascript"> var x; varfirstname; 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;

  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; }

  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; } </script>

  27. </head> <body> <form name="myForm" action="submitform.html" onSubmit="return validate1();"> Enter your First Name: <input type="text" name="myname"> <br> Enter your Country: <input type="text" name="country"> <br> Enter your e-mail: <input type="text" name="myEmail"> <br> Enter your Phone Number: <input type="text" name="phone"> <br> Your Comment: <input type="textarea" name="comment"> <br> <input type="submit" value="Send input"> </form> </body> </html>

  28. CSS Recap • Inline • Internal • External • Browser Default • Ref to external CSS <head>< link rel="stylesheet" type="text/css" href="mystyle.css" />< /head>

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

  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). • <div> • The <div> tag defines a division or a section in an HTML document. • The <div> 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

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

  32. Course Content to 5/12/11 • Website Design and Usability • Introduction to xHTML • Basic xHTMLTags • AdditonalxHTMLtag • Cascading Style Sheets • Introduction to Client Side Processing

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

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

  35. Sample Question What is the outcome from the following JavaScript code? <html> <head> <script type="text/javascript"> function mymessage() { alert("Hello World") } </script> </head> <body onload="mymessage()"> </body> </html> • A syntax error occurs • “Hello World” is printed to the browser window • An alert box is triggered by the onload event • The function triggers the onload event

  36. Sample Question What is the output from the following JavaScript code? <html> <head> <title> Char At</title> <script language="javascript"> var a; a="MCQ’s are great!"; document.write(x.charAt(6)); </script> </head> <html> • s • ’ • a • It will generate an error.

More Related