1 / 48

Lecture 8

Lecture 8. 21/11/11. Increment Operators. Decrement Operators. Example Increment Operators. <html> <title>Increment Operators </title> <head> <script langauge="JavaScript"> var c; // declare c as a variable c=5; // let c equal to 5 document.writeln("<h3>Postincrementing</h3>");

slade
Download Presentation

Lecture 8

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 8 21/11/11

  2. Increment Operators

  3. Decrement Operators

  4. Example Increment Operators <html> <title>Increment Operators </title> <head> <script langauge="JavaScript"> var c; // declare c as a variable c=5; // let c equal to 5 document.writeln("<h3>Postincrementing</h3>"); document.writeln(c); //prints the value of c document.writeln("<br>" + c++); /prints the value of c then increments document.writeln("<br>" + c); //prints the incremented value of c

  5. Continued…. var c; // declare c as a variable c=10; // let c equal to 10 document.writeln("<h3>Preincrementing</h3>"); document.writeln(c); //prints the value of c document.writeln("<br>" + ++c); // increments c by 1 document.writeln("<br>" + c); //prints the incremented value of c </script> </head> </html>

  6. Output

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

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

  9. For Loops <html> <head> <title> For</title> </head> <body> <script type="text/javascript"> for (i = 0; i <= 5; i++) { document.write("The number is " + i); document.write("<br />"); } </script> </body> </html>

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

  11. 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…

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

  13. HTML Forms • The opening and close of forms are in themselves little use. • Knowing the different form elements that can be placed within these tags is central to effective form design. • Text Field • Password Field • Hidden field • Text Area • Check box • Radio button • Drop-down menu • Submit Button • Reset Button • Image Button

  14. JavaScript Form Validation • Using Different Methods and Built in functions to validate data entered to the HTML form

  15. Form Validation • Form validation is accomplished by using JavaScript to pre-process the information the user types into a form before the data is sent to a server application • This practice is much more efficient that allowing incorrectly formatted data to be sent to the server

  16. Form Validation • If the Information is incorrectly formatted you can alert the user with a pop up and force them to correct the mistake • Form Validation is one of the more common uses of JavaScript. • How do we know if a form field is: • Blank • Not of proper data type • Incorrectly filled out in any other way

  17. Built in JavaScript Objects – Strings • The reason that that String values and String Objects can be used interchangeably is that JavaScript converts between these two types where necessary. • When you invoke a String object method on a string value (which is not an object and does not have methods) JavaScript coverts the value to a temporary String Object allowing the relevant method to be invoked.

  18. What are the methods and properties? • String.charAt() Method • String.subString()Method • String.indexOf() Method • String.lastindexOf() Method • String.length Property • String.toLowerCase() • String.toUpperCase()

  19. String Method Descriptions and Examples • Length Property • The String.length property is a read only Integer that indicates the number of characters in the specified string

  20. Example <html> <body> <script language="javascript"> varstr="Ecommerce is great!“; document.write("<p>" + str + "</p>"); document.write(str.length); </script> </body> </html>

  21. String Method Descriptions and Examples • String.toLowerCase() Method. • String.toLowerCase() • Takes no arguments. • Returns a copy of string with all uppercase letters converted to lowercase. • String.toUpperCase() • String.toUpperCase() • Takes no arguments. • Returns a copy of string with all lowercase letters converted to uppercase.

  22. Example <html> <body> <script language="javascript"> varstr=("HELLO World!"); document.write(str.toLowerCase()); document.write("<br>"); document.write(str.toUpperCase()); </script> </body> </html>

  23. String Method Descriptions and Examples • String.indexOf() Method • string.indexOf(substring) • string.indexOf(substring, start) • Substring is the string that is being searched for within string. • Start is an optional argument. It specifies the position within the string at which the search is to start. • The method returns the position of the first character of the first occurrence of the substring within a string that appears after the start position, if any or –1 if no such occurrence is found. <html> <head><title> IndexOf Example</title> <script language="javascript"> var myString="Ba Humbug!" var pos=myString.indexOf("umb") document.write(pos + "<br />"); </script> </head> <html>

  24. <html> <head><title> IndexOf Example</title> <script language="javascript"> var greeting="How are you"; var locate=greeting.indexOf("you",5); if (locate>=0) { document.write("found at position: "); document.write(locate + "<br />"); } else { document.write("Not found!"); } </script> </head> <html>

  25. LastIndexOf Method • String.lastIndexOf() Method • Same as String.indexOf() but searches a String backwards. • String.charAt(n) • The index of the character to be returned from the string. • Returns the nth character of the string.

  26. <html> <head><title> IndexOf Example</title> <script language="javascript"> varstr="Is great College?“; var pos=str.lastIndexOf("College"); if (pos>=0) { document.write("College found at position: "); document.write(pos + "<br />"); } else { document.write("College not found!"); } </script> </head> <html>

  27. Example <html> <head><title> Char At</title> <script language="javascript"> var x="JavaScript is so exciting"; document.write(x.charAt(5)); </script> </head> <html>

  28. SubString Method • String.substring() • string.substring(from, to) • From specifies the position within string of the first character of the desired substring. • From must be between 0 and string.length-1 • To is an optional integer argument and can range from anywhere 1 and string.length. • This returns specified substring of the string

  29. <html> <body> <script language="javascript"> varstr="Ecommerce is great!"; // 0123456789 document.write(str.substring(2,6)); document.write("<br /><br />"); document.write(str.substr(2,6)); </script> </body> </html>

  30. Converting Strings to Numbers • We know that strings that represent numbers are automatically converted to actual numbers when used in a numeric context. • This can also be done explicitly. • To allow flexible conversions we use two built in functions: • parseInt() • parseFloat() • These functions convert and return any number at the beginning of a string, ignoring any trailing non-numbers.

  31. Converting Strings to Numbers • parseInt() • parses a string and returns an integer <html> <script type="text/javascript"> document.write(parseInt("40 years") + "<br />"); document.write(parseInt("He was 40") + "<br />"); document.write("<br />"); document.write(parseInt("10")+ "<br />"); </script> </html>

  32. Converting Strings to Numbers • What happens when the data type conversion cannot be performed. var anystring = “one”; var y = parseInt(anystring); • In this instance “NaN” is returned. • NaN stands for Not ANumber. • How do we deal with this?

  33. Continued… • isNaN() - This built in function will determine whether or not a datatype is numeric. • Checks for not-a-number. • It will return true if argument passed is not a legal number. It will return false if it is a legal number.

  34. parseFloat() • The parseFloat() function parses a string and returns a floating point number. • This function determines if the first character in the specified string is a number.

  35. <html> <script type="text/javascript"> document.write(parseFloat("10.33") + "<br />"); document.write(parseInt("10.33") + "<br />"); document.write(parseFloat("40 years") + "<br />"); document.write(parseFloat("He was 40") + "<br />"); </script> </html>

  36. Converting Strings to Numbers • We know that strings that represent numbers are automatically converted to actual numbers when used in a numeric context. • This can also be done explicitly. • To allow flexible conversions we use two built in functions: • parseInt() • parseFloat() • These functions convert and return any number at the beginning of a string, ignoring any trailing non-numbers.

  37. Converting Strings to Numbers • parseInt() • parses a string and returns an integer <html> <script type="text/javascript"> document.write(parseInt("40 years") + "<br />"); document.write(parseInt("He was 40") + "<br />"); document.write("<br />"); document.write(parseInt("10")+ "<br />"); </script> </html>

  38. Converting Strings to Numbers • What happens when the data type conversion cannot be performed. var anystring = “one”; var y = parseInt(anystring); • In this instance “NaN” is returned. • NaN stands for Not ANumber. • How do we deal with this?

  39. Continued… • isNaN() - This built in function will determine whether or not a datatype is numeric. • Checks for not-a-number. • It will return true if argument passed is not a legal number. It will return false if it is a legal number.

  40. parseFloat() • The parseFloat() function parses a string and returns a floating point number. • This function determines if the first character in the specified string is a number.

  41. <html> <script type="text/javascript"> document.write(parseFloat("10.33") + "<br />"); document.write(parseInt("10.33") + "<br />"); document.write(parseFloat("40 years") + "<br />"); document.write(parseFloat("He was 40") + "<br />"); </script> </html>

  42. 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;

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

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

  45. </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>

  46. Sample MCQ Questions • A pixel is a _____ measurement of length • Absolute • Relative • Indeterminate • Positioning • Checkboxes are not mutually exclusive form objects, this means • Only one option may be checked • They may use the checked keyword • More than one option may be checked • None of the above

  47. 3. String methods ____ and ____ search for the first and last occurrence of a substring in a string respectively. • substr and substring • indexOf and lastIndexOf • charAt and indexOf • None of the above

  48. <html> <head><title> IndexOf Example</title> <script language="javascript"> var greeting="How are you"; var locate=greeting.indexOf("you",5); if (locate>=0) { document.write("found at position: "); document.write(locate + "<br />"); } else { document.write("Not found!"); } </script> </head> <html> a)error b)Not found! c)found at position: 8 d)found at position:5

More Related