SEEM4570 Tutorial 05: JavaScript as OOP Cao Yuewen ywcao@se.cuhk.edu.hk 2017.10.26

JavaScript and Objects Technically, ”Everything” in JavaScript is Object Array, String, Number, … An object contains properties and methods Property has a name and value Methods are actions that can be performed on the object

JavaScript Data Type Class Description String To manipulate text strings Number To manipulate numbers Operators To assign values, compare values, perform arithmetic operations … Statements “Instructions" to be "executed" by the web browser in HTML Math To manipulate calculations Date Retrieves and manipulates dates and times Array Creates new array objects Boolean Creates new Boolean objects Error Returns run-time error information RegExp Finds and replaces characters in text strings Global Represents global variables and contains various built-in JS methods Conversion Converts different JS values to Number, String, Boolean

String Case sensitive String Methods: s.length; s.indexOf(“to”) ; s.slice(3,7); s.replace(“CUHK”,”HongKong”); s.toLowerCase(); s.concat(" ", "Campus"); s.charAt(1); …… var s = “Welcome to CUHK”

Number Numbers can be written with scientific notation e.g. var y = 123e-5; Number Methods Number.isFinite(x) ; Number.isInteger(x); Number.isNaN(x); x.toPrecision(3); x.toString(); ……. var x = 2.017;

Statements JavaScript statements often start with a statement identifier while (i < 10){ … } if (i < 10){ … } else if{ } else{ } for (i =0; i < 10; i++ ){ … }

Statements try { switch (i){ … //code to try to run case 1: } … catch(error){ …// code to handle errors finally{ … // code executed regardless of the try / catch result switch (i){ case 1: … break; case 2: default: }

Math Math object allows you to perform mathematical tasks. Math methods: Math.PI; Math.pow(2,3); Math.sqrt(64); Math.abs(-3.17); Math.ceil(3.17); Math.floor(3.17); Math.random(); Math.max(0,10,6,55); ……

Date Date object works with dates and times Four ways to instantiate a date: var d = new Date(); var d = new Date(milliseconds); //zero time is 01 Jan 1970 00:00:00 UTC var d = new Date(dateString); var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

Date Methods …… d.getDate(); //get day as a number(1-31) d.getFullYear(); //get the four digit year(yyyy) d.setDate(15); //set day as a number(1-31) d.setFullYear(2100,0,14); //sets a date object to a specific date Date.parse("March 21, 2012"); // returns the number of milliseconds between the date and January 1, 1970 ……

Array Array object is used to store multiple values in a single variable. e.g. var fruits = [“banana”,”apple”,”orange”]; Array indexes are zero-based. e.g. fruits[0] = “banana”; Array elements can be objects, like functions or arrays. e.g. myArray[0] = Date.getDay(); myArray[1] = fruits;

Array Methods Popping and Pushing Shifting Elements Deleting Elements x=fruits.pop(); // removes the last element, return the last element y=fruits.push(“Mango”); // adds element “Mango” to array fruits, return the length of new array Shifting Elements x=fruits.shift(); // removes the first element, return the first element. y=fruits.unshift(“Lemon”); // add element “Lemon” to array fruits, return the length of new array Deleting Elements delete fruits[1]; // change the second element in fruits to undefined Using delete may leave undefined holes in the array. Use pop() or shift() instead. var fruits = [“Banana”,”Apple”,”Orange”];

Array Methods Splicing an Array Merging Arrays var fruits = [“Banana”,”Apple”,”Orange”]; var color = [“red”,”blue”]; var points = [21,14,17,61,8]; Splicing an Array fruits.splice(1,2,”Lemon”); The first parameter defines the position where to add new elements The second parameter defines how many elements should be removed The rest parameters define the new elements to be added Merging Arrays new_arr=fruits.concat(color); // concatenates array fruits and color Sorting an Array By default, sort() function sorts value as strings fruits.sort(); // sort an array alphabetically fruits.reverse(); // sort an array in descending order points.sort(function(a,b){ return a-b}); //numeric sort points.sort(function(a,b){ return b-a}); //numeric sort in descending order fruits don’t change here!!!

RegExp A regular expression is an object that describes a pattern of characters. RegExp is used to perform pattern-matching and “search-and-replace” function on text. Syntax : /pattern/modifiers; Modifier Description i Perform case-insensitive matching g Perform a global match (find all matches rather than the first match) m Perform multiline matching

RegExp In JS, search() and replace() are often used regular expressions search() : search for a match, and returns the position of the match replace() : returns a modified string where the pattern is replaced e.g. var str = " Welcome to CUHK! "; var n = str.search(/come/i); // n=3 var res = str.replace(/cuhk/i, ”HongKong"); RegExp Object test() : searches a string for a pattern, and returns true or false, depending on the result. e.g. var tag = /e/. test(" Welcome to CUHK!"); exec() : searches a string for a specified pattern, and returns the found text. If no match is found, it returns null. e.g. var tag = /come/.exec(" Welcome to CUHK!"); str doesn’t change here!!!

Conversion The table below shows the result of converting JS values to Numbe, String, and Boolean Original Value Converted to Number Converted to String Converted to Boolean false "false" true 1 "true" "0" "1" "20" 20 "twenty" NaN [ ] "" [20] [10,20] "10,20" ["ten","twenty"] "ten,twenty"

Resources https://www.w3schools.com/js/default.asp https://www.w3schools.com/jsref/default.asp

Question Time