O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Intro to JavaScript - Week 4: Object and Array

155 visualizações

Publicada em

Intro to Programming with JavaScript Seminar, Fall 2017 semester
Week 4: Object and Array

Led by Jeongbae Oh, in conjunction with YCC (Yonsei Computer Club) @ Yonsei University

This seminar intends to introduce newcomers to programming using JavaScript, one of the most versatile languages of the modern world.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Intro to JavaScript - Week 4: Object and Array

  1. 1. Introduction to Programming with JavaScript Week 4: Object, Array Jeongbae Oh YCC JavaScript Seminar 2017.10.30
  2. 2. Object and Array • Since primitive data types cannot be changed ("immutable"), a more complicated form of data needs something else to be stored as information. • Object (객체) and array (배열) are most frequently used form of data structure in JavaScript. • Object and array allows for complex manipulation and operation of data.
  3. 3. Object • Almost all values that is not a primitive type or an operator is an object. • Object consists of property and method.
  4. 4. Object • Properties are "status" or "characteristics" of an object. • Properties are composed of key-value pair, • Methods are the "actions" that an object takes. • Example: car (object), color (property), accelerate (method)
  5. 5. Object • var name = { [key: value] }; or 
 var name = new Object(); • Keys and values are optional (i.e. an empty object is allowed). • But a key must have its value.
  6. 6. Property • Key has to be unique (i.e. no repeating keys). • Key can be a string or a number.
 ("" is not used for keys) • Value does not have to be unique. • Value can hold almost any data type.
 (Number, string, boolean, another object, function*, etc.)
  7. 7. Property • Property can be accessed by: object.key or object[key]; • If the property's key is a number, the latter must be used. • Property can be created/changed similarly to assigning a value to a variable. • object.newKey = "newValue";
  8. 8. Method • A property whose value is a function is called a method. • Since it's a function, it has to include () at the end when calling.
  9. 9. Array Object • Array is a special type of object that is one-dimensional list. • Items in an array is called an element. • Array does not use key-value pairs.
  10. 10. Creating Array • Empty • var arrayName = []; or 
 var arrayName = new Array(); • With elements • var arrayName = [1, 2, 3]; • Elements can be of almost any data type.
  11. 11. Indexing • As array does not have keys, its elements have to be accessed by using index (position of element within array).
 arrayName[index]; • In programming, index starts with 0, instead of 1.
  12. 12. Array Properties & Methods • arrayName.length; • arrayName.indexOf(value);
 → Returns index of the value • arrayName.push(element); 
 → Returns index of added element • arrayName.pop();
 → Returns removed value

  13. 13. String Object • string.includes() • string.startsWith() • string.endsWith() • string.split()
  14. 14. String Object • string.slice() or
 string.substring() • string.toLowerCase() • string.toUpperCase() • string.trim() • string.length (property)
  15. 15. Number Object • Number.isFinite() • Number.isInteger() • Number.isNaN() • Number.parseFloat() • Number.parseInt() • number.toExponential()* • number.toString()*
  16. 16. Date Object • Allows calculation of date/time • Time is assigned when called/ initialized • Date object's methods allow formatting date within string. • getMonth() starts with 0, not 1
  17. 17. UNIX Time • JavaScript uses UNIX time, which means the beginning (time 0) is defined as 1970-01-01 00:00:00.000 (UTC). • All times are calculated in relation to the time 0. • 86399999: 1970-01-01 23:59:59.999 (UTC) • 1509346681342: 2017-10-30 06:58:01.342 (UTC) • This number is called a timestamp. • Browser automatically formats time in the local/server time, but calculations must be done based on UTC.
  18. 18. Date Object • Dates can be created/calculated using UNIX time. • Dates can also be created using time string.
  19. 19. JSON • JavaScript Object Notation • Constructed the same way as an object • Used to transfer data in various settings (web, app, database, API server, etc.)
  20. 20. JSON for API • Example: Foursquare API • Developer sign up: https://ko.foursquare.com/ developers/apps • Developer documentation: https:// developer.foursquare.com/docs
  21. 21. JSON for API https://api.foursquare.com/v2/venues/ search?v=20171030&m=foursquare&
 client_id=[CLIENT_ID]&client_secret=[CLIE NT_SECRET]&ll=[COORDINATES] Client API Server {"meta":{"code": 200,"requestId":"59fbf3496a607142ba7a7d f4"},"response":{"venues": [{"id":"5340142111d247f646bce6f6","name ":"4x4","location":{"lat": 37.557804107666016,"lng": 126.93865203857422,"labeledLatLngs": [{"label":"display","lat": 37.557804107666016,"lng": 126.93865203857422}], ... • Searching for venues around a specific coordinate
  22. 22. JSON for API • Response (use JSON formatter Chrome extension)
  23. 23. JSON for API • Response (JSON formatter extension used)
  24. 24. JSON for API • Using loops to process raw data
  25. 25. JSON for API • Refining data to find insights
  26. 26. Object-Oriented Programming (OOP) • JavaScript can also be used as an OOP language such as Java. (But no real connection to Java, of course.) • OOP is a programming paradigm which centers around making objects and using methods. • In Java, a language designed for OOP, there is no function (all function must be constructed as a method of an object). • Opposite paradigm to OOP is called functional programming (FP).