1. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 1 http://www.cs.cityu.edu.hk/~helena JavaScript Global Functions and Objects II Array String Document and Adding Cookies Forms Style, Cascading Style Sheets (CSS) and Dynamic HTML (DHTML)

2. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 2 http://www.cs.cityu.edu.hk/~helena Array Objects Arrays - An array is a collection of data values. Name of array 56 70 80 51 72 c[ 0 ] c[ 1 ] c[ 2 ] c[ 3 ] c[ 4 ] index of the data value within the array var c; c = new Array(5); c[0]=56; c[1]=70; c[2]=80; c[3]=51; c[4]=72; alert("The 3rd value is " + c[2]); Each data value in an array has an index The first data value is the 0 th value (its index is 0) To create a new array, we can specify the size as the argument for the Array constructor: var c = new Array(5); c contains 5 values, with indexes : 0, 1, 2, 3, 4 To access a specific value in an array, we write: array_name [ index_of_value] Why do we need Arrays? Allow us to use one single name to refer to all values in the collection. Easy to handle the values in the collection.

3. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 3 http://www.cs.cityu.edu.hk/~helena Array Objects Example 1: To hold 5 marks /* [METHOD 1] Not using array */ var mark1,mark2,mark3,mark4,mark5; mark1=60; mark2=70; mark3=85; mark4=68; mark5=90; /* [METHOD 2] Using array */ var marks=new Array(5); marks[0]=60; marks[1]=70; marks[2]=85; marks[3]=68; marks[4]=90; Need five variable names Only need one array name Example 2: To display five hundred marks /* [METHOD 1] Marks stored in 500 variables : var mark1, mark2, mark3, mark4,.. ; */ document.write(mark1+" "); document.write(mark2+" "); document.write(mark3+" "); document.write(mark4+" "); document.write(mark5+" "); document.write(mark6+" "); document.write(mark7+" "); document.write(mark8+" "); document.write(mark9+" "); document.write(mark10+" "); document.write(mark11+" "); document.write(mark12+" "); /* [METHOD 2] All marks in One array : var marks=new Array(500); */ var i; i=0; while (i<500) {document.write(marks[i]+" "); i++; } 500 lines of document.write(..)! The loop is several lines only!! [Lec09_Slide3_Array.htm]

4. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 4 http://www.cs.cityu.edu.hk/~helena Array Objects We may also specify the array contents during construction: var c = new Array(56, 70, 80, 51, 72); If only one argument is passed to the constructor, this argument specifies the size of the array. eg. var c = new Array(5); //5 elements If two or more arguments: all arguments are treated as array contents. Eg. new Array(56, 70), or new Array(56, 70, 80).. The.length property tells the number of values in the array. Example: var c = new Array(56, 70, 80, 51, 72); alert(c.length); index of the data value within the array Name of array 56 70 80 51 72 c[ 0 ] c[ 1 ] c[ 2 ] c[ 3 ] c[ 4 ]

5. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 5 http://www.cs.cityu.edu.hk/~helena Array Objects Application: The Random Student Picker The page contains a global array for storing 5 values. When the document is loaded, (1) users will be asked to input 5 student IDs. The IDs are stored in the array immediately. (2) the IDs are shown in the document (document.write(..)) The pseudo-URL is displayed after the student IDs. When being clicked, (1) generate a random number among 0, 1, 2, 3, 4 as the array index. (2) use this random index to refer to a value in the array ==> random student is picked.

6. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 6 http://www.cs.cityu.edu.hk/~helena Random Student Picker //The global array of student IDs var all = new Array(5); setupIDs(); writeIDsToDocument(); Pick a student : //Ask for all IDs and //set the content in the array function setupIDs() {var i=0; while (i<5) {all[i]=prompt("Input a student ID"); i++; } //Write all IDs to the document function writeIDsToDocument() {var i=0; while (i<5) {document.write(all[i]); document.write(' '); i++; } //Select a random student ID from the array function pickOne() {var idx=Math.floor(Math.random()*5); document.getElementById("result").innerHTML=all[idx]; }

7. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 7 http://www.cs.cityu.edu.hk/~helena Strings More about String Manipulations Each string may contain 0 or more characters. The.length property tells the number of characters in the string. Examples: Each character in a string has an index. The first character is located at index 0. To get the character at a given location: The charAt(index) method: Returns the character at the given index. If index is wrong (eg., too large), empty string is returned. var x='McDonald\'s'; alert(x+":"+x.length); var x=‘McDonald’; alert(x.length); var x="Computer Programming"; var i=0; while (i<x.length) {document.write(i+": "); document.write(x.charAt(i)); document.write(" "); i++; }

8. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 8 http://www.cs.cityu.edu.hk/~helena Strings Search a substring inside a string: indexOf(substring, start_index) Searches substring starting from position start_index. Once substring is found, its index is returned. If substring is not found, -1 is returned. The argument start_index is optional (if not specified, the search starts at index 0). lastIndexOf(substring, end_index) (Similar to indexOf) Searches for the last occurrence of substring starting from position end_index and searching toward the beginning of the string. The argument end_index is optional (if not specified, the search starts at the end). var x="Computer Programming"; alert(x.indexOf("o")); alert(x.indexOf("o",2)); alert(x.lastIndexOf("mm")); alert(x.lastIndexOf("mm",13));

9. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 9 http://www.cs.cityu.edu.hk/~helena Strings Copy a substring from a string: substring(start_index, end_index) Returns a new string that is a copy of the characters from start_index up to but not including end_index in the original string. The original string is not changed. var x="Computer Programming"; var subX=x.substring(3,6); alert(x); alert(subX); Convert to uppercase / lowercase: toLowerCase() and toUpperCase() Return the result as a new string. The original string is not changed. var x="McDonald's"; alert(x.toUpperCase()); var x="McDonald's"; alert(x.toLowerCase());

10. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 10 http://www.cs.cityu.edu.hk/~helena Strings (1) array method: join(separator_string) Example: To join some words together, separated by ", " Original content should be an array of words (strings). Result will be one single long string. Separator (in this example) is a comma ", ". Note that the original array content is not changed. (2) string method: split(separator_string) Example: To split a sentence into words: Original content should be a string. Result will be an array of words (strings). Separator (in this example) is a space. Note that the original string is not changed. var x ="I like programming"; var result=x.split(" "); var i=0; while (i<result.length) {document.write(result[i]); document.write(" "); i++; } var words =new Array( "apple", "pineapple", "cherry"); var result=words.join(","); alert(result); Splitting and Joining Strings

11. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 11 http://www.cs.cityu.edu.hk/~helena Application: Automatic Formatting Change all CityU to bold and red. - The user can type the contents in the textarea and click convert, - Each "CityU" in the content is changed to bold and red. How? (1) firstly split by "CityU" to obtain several short sections (2) then join the short sections with CityU Automatic Formatting <a href="javascript: var x= document.F1.t1.value; var sections=x.split('CityU'); /*obtain short sections: section[0], section[1],..*/ var result=sections.join(' CityU '); document.getElementById('result').innerHTML=result; void(0);">Convert alert(sections[0]); alert(sections[1]); alert(sections[2]); alert(result); Convert

12. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 12 http://www.cs.cityu.edu.hk/~helena Strings Character  Unicode Unicode is a set of characters that represents a large portion of the world's languages. Contains ASCII codes as a subset: 'a'-'z' : 97-122'A'-'Z': 65-90'0'-'9': 48-57 Space: 32 new line: 10 Common punctuations and math operators: 33-47, 58-64, 91-96, and 123-126 charCodeAt(index) Returns the unicode of a character within a string according to its index in the string. Example: var x="abcdefg McDonald's"; alert(x.charCodeAt(0)); //Gives 97 (‘a’) alert(x.charCodeAt(1)); //Gives 98 (‘b’) alert(x.charCodeAt(2)); //Gives 99 (‘c’) alert(x.charCodeAt(16)); //Gives 39 (what is this?) fromCharCode(c) Returns a new string containing the character according to the given unicode c. fromCharCode does not need an existing string object (just like Math methods). Example: var x=String.fromCharCode(65); alert(x); // Gives 'A'. We can use a loop to show a range of characters. [See Lec09_Slide12_ShowPunctuations.htm]

13. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 13 http://www.cs.cityu.edu.hk/~helena Strings Application: Simple Cryptography //Encrypt a string with 5 characters var x="Happy"; var code0, code1, code2, code3, code4; var newCode0, newCode1, newCode2, newCode3, newCode4; var result; code0 = x.charCodeAt(0); //Unicode of 'H' code1 = x.charCodeAt(1); //Unicode of 'a' code2 = x.charCodeAt(2); code3 = x.charCodeAt(3); code4 = x.charCodeAt(4); newCode0=code0+1; //Unicode of 'I' (next of 'H') newCode1=code1+1; //Unicode of 'b' (next of 'a') newCode2=code2+1; newCode3=code3+1; newCode4=code4+1; result= String.fromCharCode(newCode0)+ //'I' String.fromCharCode(newCode1)+ //'b' String.fromCharCode(newCode2)+ String.fromCharCode(newCode3)+ String.fromCharCode(newCode4); alert(result); "Happy" Encryption 'A‘  'B' 'B'  'C'.. 'H'  'I'.. 'Z'  '[' 'a'  'b'

14. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 14 http://www.cs.cityu.edu.hk/~helena Strings Application: Simple Cryptography Rewrite the encryption code to create a useful function: //Convert input string to encrypted string function encrypt(input) {var code; var newCode; var result=""; var i=0; while (i<input.length) { code=input.charCodeAt(i); newCode=code+1; result+=String.fromCharCode(newCode) i++; } return result; } encrypt(" Happy") "Ibqqz"

15. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 15 http://www.cs.cityu.edu.hk/~helena //Convert input string to encrypted string function encrypt(input) {var code; var newCode; var result=""; var i=0; while (i<input.length) {code=input.charCodeAt(i); newCode=code+1; result+=String.fromCharCode(newCode) i++; } return result; } <input type="button" value="encrypt" onclick="document.getElementById('result').innerHTML=encrypt(document.F1.t1.value)"/> Your exercise: Add one button to restore an input encrypted string back to original string. (Add another function, function restore(input), for this purpose.)

16. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 16 http://www.cs.cityu.edu.hk/~helena Document More about Document Each window object has a document property. The document property refers to a document object that represents the HTML document displayed in the window. Common Document methods: open( ) : Begin a new document, erasing all existing content and reset each property. Actually, it is often used just for resetting the contents. write( ) : Append text to the currently open document. close( ): Actually not much used. Once a document has finished loading (.. ), if you make a single call to document.write(), the call will automatically clear old content and write new content to the page. ie. Old contents will be cleared first!! Note: onload happens just AFTER.. !! So, to write dynamic contents by JavaScript, you should call document.write() within loading of... Recall week 2 lecture: To add new but keeping current content, use innerHTML!! (not document.write) Don’t use document.write() upon pseudo-URL, onload, onclick etc.. (unless you allow current contents to be cleared).

17. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 17 http://www.cs.cityu.edu.hk/~helena Document More about Document Common Document properties: bgColor, fgColor (ie. text) : corresponds to the bgcolor and text attributes in. linkColor : color of unvisited hyperlinks. vlinkColor : color of visited links. alinkColor : color of a link while the user is clicking on it. title : the content between and. lastModified : the modification date of the document.

18. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 18 http://www.cs.cityu.edu.hk/~helena Document Cookies A cookie is a small amount of named data stored by the web browser. A common usage of cookies is to recall user preferences across web browsing sessions. We can create, read, modify, and delete a cookie through the document.cookie property. A typical location of cookies stored in the computer: Internet Explorer  Tools menu  Internet Options  General: Temporary Internet Files - Settings

19. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 19 http://www.cs.cityu.edu.hk/~helena Document Session cookies and persistent cookies Session cookie: Automatically deleted when the user exits the browser. To create or modify a session cookie: document.cookie = "name=value" For example: document.cookie = "imagesPerPage=6" Persistent cookie: Assigned an expiration date/time, after that the cookie will be deleted. Stored in the computer's hard disk. To create or modify a persistent cookie, we need to set the expiration date: document.cookie = "name=value;expires=UTCDate" For example: var expireDate=new Date(2010,11,31); document.cookie = "imagesPerPage=6;expires=" + expireDate.toUTCString() ;

20. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 20 http://www.cs.cityu.edu.hk/~helena Document Deleting Cookies  Session cookies are automatically deleted when the browser session ends. Persistent cookies are automatically deleted when it is expired.  To remove a cookie manually, we may set its expiration date to a date earlier than today, ie. forces the browser to delete the cookie. Reading Cookies  Cookies can be retrieved by JavaScript by referring to the document.cookie property.  document.cookie contains information in one of the following forms: (1) "" (empty): if no cookie is stored. (2) "name=value": if there is only one cookie. (3) "name1=value1; name2=value2;..": if there are 2 or more cookies stored by the website. Example: Suppose the cookies for 2 values: height=180 and imagesPerPage=2 are stored. To get the values, we may apply the string methods like split, substring, indexOf, etc.. alert(document.cookie) 

21. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 21 http://www.cs.cityu.edu.hk/~helena Application: Store image height and page size settings using cookies [Refer to Lec09_Slide19to22_GalleryWithCookies.html] … <input type='button' value='increase height' … onclick="imgHeight+=10; recordHeightCookie (); makeHtmlOfImages()" /> <input type='button' value='decrease height' … onclick="imgHeight-=10; recordHeightCookie (); makeHtmlOfImages()" /> <input type='button' value='set number of images per page' … onclick="page_size=parseInt(prompt('New number of images per page:',page_size)); recordPageSizeCookie(); currentStartImageNum=1; makeHtmlOfImages()" />

22. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 22 http://www.cs.cityu.edu.hk/~helena //Recall settings from cookies function loadCookies() {var idxHeight; //index of "height=" in the cookie string var idxImagePerPage; //index of "imagesPerPage=" in the cookie string //Find the values of idxHeight and idxImagePerPage idxHeight=document.cookie.indexOf('height='); idxImagePerPage=document.cookie.indexOf('imagesPerPage='); //If "height=" exists in the cookies (ie. idxHeight is not -1), set the value of imgHeight if (idxHeight!=-1) imgHeight=parseInt(document.cookie.substring(idxHeight+7,99)); /*99 means up to the 99th position in the cookie string (parseInt will only extract the starting numeric contents in this substring)*/ //If "imagesPerPage=" exists in the cookies (ie. idxImagePerPage is not -1), set the value of page_size if (idxImagePerPage!=-1) page_size=parseInt(document.cookie.substring(idxImagePerPage+14,99)); } //Store a cookie for the image height setting function recordHeightCookie() { //Set expire date var expireDate=new Date(2010,11,31); document.cookie = "height=" + imgHeight + ";" + "expires=" + expireDate.toUTCString(); } //Store a cookie for the page size //(number of images per page) function recordPageSizeCookie() { //Set expire date var expireDate=new Date(2010,11,31); document.cookie = "imagesPerPage=" + page_size + ";" + "expires=" + expireDate.toUTCString(); }

23. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 23 http://www.cs.cityu.edu.hk/~helena Forms More about Forms Common HTML form elements: Button Checkbox Password Select/Option and Radio button Text Textarea Apple Orange Pear Grape Big images Apple Orange Pear Grape

24. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 24 http://www.cs.cityu.edu.hk/~helena Big images Apple Orange Pear Grape Apple Orange Pear Grape <a href="javascript: alert(document.F1.cb.checked+'\n'+ document.F1.pw.value+'\n'+ document.F1.tb.value+'\n'+ document.F1.op.value+'\n'+ document.F1.fruit[0].checked+'\n'+ document.F1.fruit[1].checked+'\n'+ document.F1.fruit[2].checked+'\n'+ document.F1.fruit[3].checked+'\n' );">show all values For preparation of test / exam: Just need to understand, No need to memorize. [Refer to Lec09_Slide24_form.html]

25. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 25 http://www.cs.cityu.edu.hk/~helena Forms alert(document.F1.elements[0].value+ document.F1.elements[1].value+ document.F1.elements[2].value+ document.F1.elements[3].value) Please input the names: Elements in a form can be accessed as a form elements array: document.form_name.elements[ ] Example: An array of 4 textboxes:

26. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 26 http://www.cs.cityu.edu.hk/~helena Forms Checkboxes: A small square that the user can select or deselect by clicking. Useful properties: checked: a boolean value that specifies whether a checkbox is currently checked. disabled: a boolean value that specifies whether the checkbox is disabled and is unavailable for user input. <inputtype="checkbox" name="choice" onclick="showDate()"/> US Date format Date is: //Show date in the format according to the US Date format checkbox function showDate() {var x=new Date; if (document.F1.choice.checked==true) document.getElementById("display").innerHTML=(x.getMonth()+1)+'/'+x.getDate()+'/'+x.getFullYear(); else document.getElementById("display").innerHTML=x.getDate()+'/'+(x.getMonth()+1)+'/'+x.getFullYear(); }

27. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 27 http://www.cs.cityu.edu.hk/~helena Application – Array of checkboxes A list of attractions in Hong Kong Disneyland. Show count of selected games : Reset Selections 2 pseudo-URLs Festival of the Lion King Jungle River Cruise Rafts to Tarzan Island Liki Tikis Dumbo the Flying Elephant Mad Hatter Tea Cups Cinderella Carousel Golden Mickeys at Theater Space Mountain Buzz Lightyear Blasters 10 checkboxes will be handled as document.F1.elements[..] count the selected checkboxes, ie. if document.F1.elements[..].checked equals true set all document.F1.elements[..].checked to false

28. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 28 http://www.cs.cityu.edu.hk/~helena //Display the count of selected choices function showSelectionCount() {var i=0; var tot=0; while (i<10) {if (document.F1.elements[i].checked==true) tot++; i++; } document.getElementById("count").innerHTML=tot; } //Reset all checkboxes function cancelAllSelections() {var i=0; while (i<10) {document.F1.elements[i].checked=false; i++; } } Exercise: Add a pseudo-URL for selecting all choices. Show count of selected games : Reset Selections Festival of the Lion King Jungle River Cruise … Demo: Array of checkboxes document.FormName.elements[..].checked

29. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 29 http://www.cs.cityu.edu.hk/~helena Demo: Array of checkboxes document.FormName.elements[..].disabled Add a Young Visitor checkbox: 3 games are disabled for young visitors: document.F1.elements[4] document.F1.elements[5] document.F1.elements[8] //Update form according to the Young Visitor checkbox function updateForm() {if (document.FGroup.Young.checked==true) {document.F1.elements[4].disabled=true; document.F1.elements[5].disabled=true; document.F1.elements[8].disabled=true; document.F1.elements[4].checked=false; document.F1.elements[5].checked=false; document.F1.elements[8].checked=false; } else {document.F1.elements[4].disabled=false; document.F1.elements[5].disabled=false; document.F1.elements[8].disabled=false; } } Young Visitor

30. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 30 http://www.cs.cityu.edu.hk/~helena Cascading Style Sheets and Dynamic HTML Style – CSS property of HTML Elements Cascading Style Sheets (CSS) CSS: a standard for specifying the visual presentation of HTML documents. Example in HTML: Other commonly used styles: background-color, font-size, height, width, z-index Dynamic HTML (DHTML) We can use JavaScript to dynamically change colors, position of elements and even to hide and show them, by setting their style properties. Examples in JavaScript: document.getElementById("img1").style.left=300; document.getElementById("guess_color_bar").style.backgroundColor=0xFFFF00; Many CSS style attributes contain hyphens, eg. font-size. But hyphens are interpreted as minus in JavaScript. Therefore their names in JavaScript are slightly different: If a CSS attribute name contains any hyphen, its name in JavaScript is formed by removing the hyphen and capitalizing the letter following the hyphen, eg. font-size  fontSize.

31. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 31 http://www.cs.cityu.edu.hk/~helena Application: 10 textboxes to count random numbers Animation of Random Numbers (0-9) Count of 0: Count of 1: Count of 2: Count of 3: Count of 4: Count of 5: Count of 6: Count of 7: Count of 8: Count of 9: //Generate a random number between 0 and 9 and update the counter: function newRandom() {var x=Math.floor(Math.random()*10); document.F1.elements[x].value=parseInt(document.F1.elements[x].value)+1; document.F1.elements[x].style.width=document.F1.elements[x].value*10; } Random numbers (0-9) are generated every 100 ms. Their occurrences are shown in 10 text boxes: (1) The count is shown as the value in the text boxes (2) The width of text boxes are changed correspondingly (width = count * 10)

32. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 7. Functions and Objects II - 32 http://www.cs.cityu.edu.hk/~helena Summary Array  Application: Random Student Picker String: index, length, searching, substrings, case conversion, split and join  Application: Automatic Formatting Character Unicode  Application: Simple Cryptography Document: open, write, close, title, lastModified, bgColor,...  Cookies Added to My Picture Gallery (Using strings and arrays) Forms: more input types, elements array, using Checkboxes  Application: A List of Attractions in Hong Kong Disneyland. Style / Cascading Style Sheets (CSS) and Dynamic HTML (DHTML)  Application: 10 textboxes to count random numbers