1. SEEM4570 Tutorial 05: JavaScript as OOP
Cao Yuewen

2. 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

3. 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

4. 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”

5. 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;

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

7. 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: }

8. 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); ……

9. 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 :00:00 UTC
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

10. 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 ……

11. 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;

12. 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”];

13. 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!!!

14. 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

15. 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!!!

16. 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"

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

18. Question Time