Date post: | 19-Dec-2015 |
Category: |
Documents |
View: | 231 times |
Download: | 6 times |
HCI 201 Notes #9B 2
What will we learn today?
Control string with JavaScript Validation with JavaScript
Required input Numeric input Consistent input Input length Input format
HCI 201 Notes #9B 3
Control string with JavaScript
What are strings ? Data type used in programming language Group of characters Examples:
“JavaScript” “How are you doing?” “http://www.depaul.edu” “3123621234”
HCI 201 Notes #9B 4
Control string with JavaScript
Put strings in quotes Always put string values in quotation marks. “ ” for HTML code, ‘ ’ for JavaScript variables. Do not mix up the quotes. “Hello’ will not work in
JavaScript. Examples
var a = ‘Hello world!’ var b = ‘I am a JavaScript hacker.’ var c = ‘I\’m a JavaScript hacker.’
HCI 201 Notes #9B 5
Control string with JavaScript
Number to stringvar a = (10*120)+34;
var b = a.toString(); b is a string ‘1234’
String to numbervar a = ‘1234’;
var b = parseInt(a); b is a number 1234What happens if we do this:
var a=‘1234’;
var b=a*1; b=1234
b=a+0; b=‘12340’
HCI 201 Notes #9B 6
Pre-defined string functionsvar a = ‘Hello world!’;var b = ‘I am a JavaScript hacker.’;
StringName.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 #9B 7
Pre-defined string functionsvar a = ‘Hello world!’;
StringName1.indexOf(StringName2) - It returns the position of the StringName2 in StringName1.
index=a.indexOf(‘w’); index=6
- If the same character/string occurs more than once, it returns the position of the first occurrence.
index=a.indexOf(‘o’); index=4
index=a.indexOf(‘or’); index=7
- Search for a character/string after a certain index position.
index=a.indexOf(‘l’, 5); index=9
- It returns -1 if no match is found.
index=a.indexOf(‘a’); index=-1
HCI 201 Notes #9B 8
Pre-defined string functionsvar b = ‘I am a JavaScript hacker.’;
StringName1.lastIndexOf(StringName2) - It returns the position of the last occurrence of StringName2 in StringName1.
index=b.lastIndexOf(‘a’); index=19
StringName.charAt(Index) - It returns the character at a certain position of the StringName.
bChar=b.charAt(5); bChar=‘a’
HCI 201 Notes #9B 9
Pre-defined string functionsvar b = ‘I am a JavaScript hacker.’;
StringName1.split(StringName2) - 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] = ‘JavaScipt’;
temp[4] = ‘hacker.’;
HCI 201 Notes #9B 10
Pre-defined string functionsvar a = ‘Hello world!’;
StringName.substring(index1, index2) - It allows you to retrieve a substring from a specified position of a string.
- This substring starts at index1, ends at index2-1.
SubA = a.substring(4,8); SubA=‘o wo’
StringName.substring(index1) - It allows you to retrieve a substring from a specified position of a string (starting from the index1 to the end)
SubA = a.substring(4); SubA=‘o world!’
HCI 201 Notes #9B 11
Pre-defined string functionsvar a = ‘Hello world!’;
StringName.substr(index, lengthOfSubString) - It allows you to retrieve a substring from a a string.
SubA = a.substring(4,6); SubA=‘o worl’
StringName.toLowerCase() a.toLowerCase() ‘hello world!’
StringName.toUpperCase() a.toUpperCase() ‘HELLO WORLD!’
HCI 201 Notes #9B 12
Pre-defined string functionsStringName.replace(RegExpression, SubString) - It is used to match a specified regular expression against a string and replace any match with a new substring.
StringName.search(RegExpression) - 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.w3schools.com/ - http://www.devguru.com/home.asp
HCI 201 Notes #9B 13
Commonly used regular expression Date mm/dd/yyyy
/^\d{1,2}(\-|\/|\.)\d{1,2}\1\d{4}$/ US zip code 99999 or 99999-9999
/(^\d{5}$)|(^\d{5}-\d{4}$)/ Time HH:MM or HH:MM:SS or HH:MM:SS.mmm
/^([1-9]|1[0-2]):[0-5]\d(:[0-5]\d(\.\d{1,3})?)?$/ IP Address (no check for valid values (0-255))
999.999.999.999 /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/
Dollar Amount 100, 100.00, $100 or $100.00/^((\$\d*)|(\$\d*\.\d{2})|(\d*)|(\d*\.\d{2}))$/
Social Security Number 999-99-9999 or 999999999 /^\d{3}\-?\d{2}\-?\d{4}$/
HCI 201 Notes #9B 14
Validation with JavaScript
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 #9B 15
Validation with JavaScript
Required fields
//Check if the user entered any information (with beginning and ending spaces trimmed)function IsEntered(DataInput) { var StringValue = DataInput.toString().replace(/^[\s]+/g,""); if (StringValue.length > 0)
return true; else
return false;}
HCI 201 Notes #9B 16
Validation with JavaScript
Password confirmation//Check if two inputs are identicalfunction ConsistentCheck (StrInput1, StrInput2) { var strTemp1 = StrInput1.toString(); var strTemp2 = StrInput2.toString(); if (strTemp1.length>0 && strTemp2.length>0 &&
strTemp1==strTemp2) return true; else { alert("Password is not correctly confirmed.");
document.reg.passwd2.focus(); return false; }}
HCI 201 Notes #9B 17
Validation with JavaScript
Checking zip code – length & numeric
//Check if the entered zip code is a 5-digit numberfunction ValidZip(ZipInput) { var ZipValue = ZipInput.toString(); if (ZipValue.length==5 && NumericCheck(ZipValue))
return true; else {
alert("Zip code should be a 5-digit integer.");document.reg.ZipCode.focus();return false;
}}
HCI 201 Notes #9B 18
Validation with JavaScriptChecking numeric input//Check if user's input is a numberfunction NumericCheck (StrInput) { var strLen = StrInput.toString().length; var i=0; var intIndex = 0; var strNumbers="0123456789"; while (i<strLen && intIndex>=0) {
intIndex = strNumbers.indexOf(StrInput.substring(i,i+1)); i++;
} if (intIndex>=0) return true; else return false;}
HCI 201 Notes #9B 19
Validation with JavaScriptChecking length, numeric, and content
//Check if the entered serial number is a 10-digit number, starting with 0011function ValidSerial(SerialInput) { var SerialValue = SerialInput.toString(); if (SerialValue.length==10 && NumericCheck(SerialValue) && SerialValue.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 #9B 20
Validation with JavaScriptEmail address//Check if the entered Email address looks validfunction ValidEmail(EmailAddress) { var EmailValue =
EmailAddress.toString().toLowerCase(); var emailRegEx = /^[^@]+@[^@]+.[a-z]{2,}$/i; if (EmailValue.search(emailRegEx) >= 0){
//see codes on the next slide}
else {alert("Please enter a valid email address.");document.reg.EmailAdd.focus();return false;
}}
HCI 201 Notes #9B 21
Validation with JavaScriptEmail address//Check if the suffix looks validif (EmailValue.search(emailRegEx) >= 0){ if ((EmailValue.indexOf(".com")>2)||
(EmailValue.indexOf(".org")>2)|| (EmailValue.indexOf(".gov")>2)|| (EmailValue.indexOf(".net")>2)|| (EmailValue.indexOf(".mil")>2))return true;
else {alert("A valid email address ends with '.com',
'.org', '.gov', '.net', or '.mil'.");document.reg.EmailAdd.focus();return false;
}}
HCI 201 Notes #9B 22
Validation with JavaScriptDate check//Check if the format of the purchase date is correctfunction ValidDate(DateInput) { var DateValue = DateInput.toString(); var Today=new Date(); var ThisYear=Today.getFullYear(); if ((DateValue.length==10) && (DateValue.substring(2,3)=="/") &&
(DateValue.substring(5,6)=="/")) { //see codes on the next slide } else {
alert("Please the date in ‘mm/dd/yyyy’.");document.reg.PurchaseDate.focus();return false;
}}
HCI 201 Notes #9B 23
Validation with JavaScriptDate check//Check if the product was purchased within 2 yearsif ((DateValue.length==10) && (DateValue.substring(2,3)=="/") && (DateValue.substring(5,6)=="/")) { if (parseInt(DateValue.substring(6,10)) < parseInt(ThisYear.toString())-2) { alert(“You can only register product that was purchased within two years.”);
document.reg.PurchaseDate.focus();return false;
} elsereturn true;
}
HCI 201 Notes #9B 24
Validation with JavaScriptCheck for required inputs on submitfunction CheckInput() {//Check if the user provided all the required information var MissingFields = ""; if (!IsEntered(document.reg.FirstName.value)) MissingFields += "<First Name> " + "\n"; if (!IsEntered(document.reg.LastName.value)) MissingFields += "<Last Name> " + "\n"; if (!IsEntered(document.reg.AddressLine1.value)) MissingFields += "<Address Line 1> " + "\n";
... if (MissingFields != "") alert("Please enter information for the following field(s):" + "\n" + MissingFields); else { //check if the inputs are valid, see next slide }}
HCI 201 Notes #9B 25
Validation with JavaScriptValidate inputs on submitelse { if (ValidZip(document.reg.ZipCode.value) && ValidEmail(document.reg.EmailAdd.value) && ConsistentCheck(document.reg.passwd1.value,
document.reg.passwd2.value) && ValidDate(document.reg.PurchaseDate.value) && ValidSerial(document.reg.Serial.value)) {
alert("Congratulations! You have successfully registered!"); window.close(); }}
HCI 201 Notes #9B 26
Validation with JavaScript//Enter today's date into the field of purchase datefunction ShowDate() { var Today=new Date(); var ThisDay=Today.getDate(); var ThisMonth=Today.getMonth()+1; var ThisYear=Today.getFullYear(); //make sure the input is also in “mm/dd/yyyy” if (ThisDay<10) ThisDay = "0" + ThisDay.toString(); if (ThisMonth<10) ThisMonth = "0" + ThisMonth.toString(); document.reg.PurchaseDate.value=ThisMonth+"/"+ThisDay+"/"+ThisYear;}