1 / 18

JavaScript Object-Oriented Programming Essentials

Learn about JavaScript objects, data types, statements, Math object, Date object, Array object, methods, and Regular Expressions. Master OOP concepts in JavaScript.

sauer
Download Presentation

JavaScript Object-Oriented Programming Essentials

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. SEEM4570Tutorial 05: JavaScript as OOP Cao Yuewen ywcao@se.cuhk.edu.hk 2017.10.26

  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

  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 { … //code to try to run } catch(error){ …// code to handle errors } finally{ … // code executed regardless of the try / catch result } switch (i){ case 1: … break; case 2: … break; 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 1970 00: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 • 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 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;

  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

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

  18. Question Time

More Related