Multimedia and the World Wide Web

HCI 201 Lecture Notes #9B

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