Multimedia and the World Wide Web HCI 201
Multimedia and the World Wide Web HCI 201 Lecture Notes #9 B # HCI 201 Notes #9 B
What will we learn today? n n Control string with Java. Script Validation with Java. Script n n n Required input Numeric input Consistent input Input length Input format HCI 201 Notes #9 B 2
Control string with Java. Script n What are strings ? n n n Data type used in programming language Group of characters Examples: n n “Java. Script” “How are you doing? ” “http: //www. depaul. edu” “ 3123621234” HCI 201 Notes #9 B 3
Control string with Java. Script n Put strings in quotes n n Always put string values in quotation marks. “ ” for HTML code, ‘ ’ for Java. Script variables. Do not mix up the quotes. “Hello’ will not work in Java. Script. Examples n n n var a = ‘Hello world!’ var b = ‘I am a Java. Script hacker. ’ var c = ‘I’m a Java. Script hacker. ’ HCI 201 Notes #9 B 4
Control string with Java. Script n Number to string var a = (10*120)+34; var b = a. to. String(); n b is a string ‘ 1234’ String to number var a = ‘ 1234’; var b = parse. Int(a); b is a number 1234 What happens if we do this: var a=‘ 1234’; var b=a*1; b=1234 b=a+0; b=‘ 12340’ HCI 201 Notes #9 B 5
Pre-defined string functions var a = ‘Hello world!’; var b = ‘I am a Java. Script hacker. ’; String. Name. length returns the number of chars in a string. var length=a. length; length = 12 Concatenating strings (+) document. write(a+b); document. write(a+‘ ’+b); document. write(a+3*3+b); document. write(a+3+3+b); document. write(a+(3+3)+b); HCI 201 Notes #9 B 6
Pre-defined string functions var a = ‘Hello world!’; String. Name 1. index. Of(String. Name 2) - It returns the position of the String. Name 2 in String. Name 1. index=a. index. Of(‘w’); index=6 - If the same character/string occurs more than once, it returns the position of the first occurrence. index=a. index. Of(‘o’); index=4 index=a. index. Of(‘or’); index=7 - Search for a character/string after a certain index position. index=a. index. Of(‘l’, 5); index=9 - It returns -1 if no match is found. index=a. index. Of(‘a’); HCI 201 Notes #9 B index=-1 7
Pre-defined string functions var b = ‘I am a Java. Script hacker. ’; String. Name 1. last. Index. Of(String. Name 2) - It returns the position of the last occurrence of String. Name 2 in String. Name 1. index=b. last. Index. Of(‘a’); index=19 String. Name. char. At(Index) - It returns the character at a certain position of the String. Name. b. Char=b. char. At(5); b. Char=‘a’ HCI 201 Notes #9 B 8
Pre-defined string functions var b = ‘I am a Java. Script hacker. ’; String. Name 1. split(String. Name 2) - It allows you to split a string at the places of a certain character or string. - You must put results in an array. - It does not work in Netscape 2 and IE 3 or below. var temp = new Array(); temp = b. split(‘ ’); We’ll get: temp[0] = ‘I’; temp[1] = ‘am’; temp[2] = ‘a’; temp[3] = ‘Java. Scipt’; temp[4] = ‘hacker. ’; HCI 201 Notes #9 B 9
Pre-defined string functions var a = ‘Hello world!’; String. Name. substring(index 1, index 2) - It allows you to retrieve a substring from a specified position of a string. - This substring starts at index 1, ends at index 2 -1. Sub. A = a. substring(4, 8); Sub. A=‘o wo’ String. Name. substring(index 1) - It allows you to retrieve a substring from a specified position of a string (starting from the index 1 to the end) Sub. A = a. substring(4); Sub. A=‘o world!’ HCI 201 Notes #9 B 10
Pre-defined string functions var a = ‘Hello world!’; String. Name. substr(index, length. Of. Sub. String) - It allows you to retrieve a substring from a a string. Sub. A = a. substring(4, 6); Sub. A=‘o worl’ String. Name. to. Lower. Case() a. to. Lower. Case() ‘hello world!’ String. Name. to. Upper. Case() a. to. Upper. Case() ‘HELLO WORLD!’ HCI 201 Notes #9 B 11
Pre-defined string functions String. Name. replace(Reg. Expression, Sub. String) - It is used to match a specified regular expression against a string and replace any match with a new substring. String. Name. search(Reg. Expression) - This method is used to search for a match between a regular expression and the specified string, it returns the index if found. What is a “Regular expression”? http: //www. devguru. com/Technologies/ecmascript/quickref/regexp. html Online resource for web development: - http: //www. w 3 schools. com/ - http: //www. devguru. com/home. asp HCI 201 Notes #9 B 12
Commonly used regular expression n n n Date mm/dd/yyyy /^d{1, 2}(-|/|. )d{1, 2}1d{4}$/ US zip code 99999 or 99999 -9999 /(^d{5}$)|(^d{5}-d{4}$)/ Time HH: MM or HH: MM: SS. mmm /^([1 -9]|1[0 -2]): [0 -5]d(. d{1, 3})? )? $/ IP Address (no check for valid values (0 -255)) 999 /^d{1, 3}. d{1, 3}$/ Dollar Amount 100, 100. 00, $100 or $100. 00 /^(($d*)|($d*. d{2})|(d*. d{2}))$/ Social Security Number 999 -99 -9999 or 99999 /^d{3}-? d{2}-? d{4}$/ HCI 201 Notes #9 B 13
Validation with Java. Script Validation checklist - Did the user enter all the required information? - Is the zip code valid (a 5 -digit number)? - Is the email address valid? - Did the user correctly confirm his/her password? HCI 201 Notes #9 B 14
Validation with Java. Script Required fields //Check if the user entered any information (with beginning and ending spaces trimmed) function Is. Entered(Data. Input) { var String. Value = Data. Input. to. String(). replace(/^[s]+/g, ""); if (String. Value. length > 0) return true; else return false; } HCI 201 Notes #9 B 15
Validation with Java. Script Password confirmation //Check if two inputs are identical function Consistent. Check (Str. Input 1, Str. Input 2) { var str. Temp 1 = Str. Input 1. to. String(); var str. Temp 2 = Str. Input 2. to. String(); if (str. Temp 1. length>0 && str. Temp 2. length>0 && str. Temp 1==str. Temp 2) return true; else { alert("Password is not correctly confirmed. "); document. reg. passwd 2. focus(); return false; } } HCI 201 Notes #9 B 16
Validation with Java. Script Checking zip code – length & numeric //Check if the entered zip code is a 5 -digit number function Valid. Zip(Zip. Input) { var Zip. Value = Zip. Input. to. String(); if (Zip. Value. length==5 && Numeric. Check(Zip. Value)) return true; else { alert("Zip code should be a 5 -digit integer. "); document. reg. Zip. Code. focus(); return false; } } HCI 201 Notes #9 B 17
Validation with Java. Script Checking numeric input //Check if user's input is a number function Numeric. Check (Str. Input) { var str. Len = Str. Input. to. String(). length; var i=0; var int. Index = 0; var str. Numbers="0123456789"; while (i<str. Len && int. Index>=0) { int. Index = str. Numbers. index. Of(Str. Input. substring(i, i+1)); i++; } if (int. Index>=0) return true; else return false; } HCI 201 Notes #9 B 18
Validation with Java. Script Checking length, numeric, and content //Check if the entered serial number is a 10 -digit number, starting with 0011 function Valid. Serial(Serial. Input) { var Serial. Value = Serial. Input. to. String(); if (Serial. Value. length==10 && Numeric. Check(Serial. Value) && Serial. Value. substring(0, 4)=="0011") return true; else { alert("Please check your package. The serial number should be a 10 -digit integer, starting with 0011. "); document. reg. Serial. focus(); return false; } } HCI 201 Notes #9 B 19
Validation with Java. Script Email address //Check if the entered Email address looks valid function Valid. Email(Email. Address) { var Email. Value = Email. Address. to. String(). to. Lower. Case(); var email. Reg. Ex = /^[^@]+@[^@]+. [a-z]{2, }$/i; if (Email. Value. search(email. Reg. Ex) >= 0){ //see codes on the next slide } else { alert("Please enter a valid email address. "); document. reg. Email. Add. focus(); return false; } } HCI 201 Notes #9 B 20
Validation with Java. Script Email address //Check if the suffix looks valid if (Email. Value. search(email. Reg. Ex) >= 0){ if ((Email. Value. index. Of(". com")>2)|| (Email. Value. index. Of(". org")>2)|| (Email. Value. index. Of(". gov")>2)|| (Email. Value. index. Of(". net")>2)|| (Email. Value. index. Of(". mil")>2)) return true; else { alert("A valid email address ends with '. com', '. org', '. gov', '. net', or '. mil'. "); document. reg. Email. Add. focus(); return false; } HCI 21 } 201 Notes #9 B
Validation with Java. Script Date check //Check if the format of the purchase date is correct function Valid. Date(Date. Input) { var Date. Value = Date. Input. to. String(); var Today=new Date(); var This. Year=Today. get. Full. Year(); if ((Date. Value. length==10) && (Date. Value. substring(2, 3)=="/") && (Date. Value. substring(5, 6)=="/")) { //see codes on the next slide } else { alert("Please the date in ‘mm/dd/yyyy’. "); document. reg. Purchase. Date. focus(); return false; } HCI 22 } 201 Notes #9 B
Validation with Java. Script Date check //Check if the product was purchased within 2 years if ((Date. Value. length==10) && (Date. Value. substring(2, 3)=="/") && (Date. Value. substring(5, 6)=="/")) { if (parse. Int(Date. Value. substring(6, 10)) < parse. Int(This. Year. to. String())-2) { alert(“You can only register product that was purchased within two years. ”); document. reg. Purchase. Date. focus(); return false; } else return true; } HCI 201 Notes #9 B 23
Validation with Java. Script Check for required inputs on submit function Check. Input() { //Check if the user provided all the required information var Missing. Fields = ""; if (!Is. Entered(document. reg. First. Name. value)) Missing. Fields += "<First Name> " + "n"; if (!Is. Entered(document. reg. Last. Name. value)) Missing. Fields += "<Last Name> " + "n"; if (!Is. Entered(document. reg. Address. Line 1. value)) Missing. Fields += "<Address Line 1> " + "n"; . . . if (Missing. Fields != "") alert("Please enter information for the following field(s): " + "n" + Missing. Fields); else { //check if the inputs are valid, see next slide } } HCI 201 Notes #9 B 24
Validation with Java. Script Validate inputs on submit else { if (Valid. Zip(document. reg. Zip. Code. value) && Valid. Email(document. reg. Email. Add. value) && Consistent. Check(document. reg. passwd 1. value, document. reg. passwd 2. value) && Valid. Date(document. reg. Purchase. Date. value) && Valid. Serial(document. reg. Serial. value)) { alert("Congratulations! You have successfully registered!"); window. close(); } } HCI 201 Notes #9 B 25
Validation with Java. Script //Enter today's date into the field of purchase date function Show. Date() { var Today=new Date(); var This. Day=Today. get. Date(); var This. Month=Today. get. Month()+1; var This. Year=Today. get. Full. Year(); //make sure the input is also in “mm/dd/yyyy” if (This. Day<10) This. Day = "0" + This. Day. to. String(); if (This. Month<10) This. Month = "0" + This. Month. to. String(); document. reg. Purchase. Date. value=This. Month+"/"+Th is. Day+"/"+This. Year; } HCI 201 Notes #9 B 26
- Slides: 26