/index.js

https://gitlab.com/zuitt-project-medes/s18 · JavaScript · 257 lines · 89 code · 102 blank · 66 comment · 0 complexity · 4ca1cee463c9489325d4e30bece2315e MD5 · raw file

  1. // alert("hi")
  2. // a variable with multiple values
  3. // a:array
  4. let cartoons = ["Elmo", "Mickey", "Daisy", "Barbie"]
  5. // javascript objects
  6. // similar to an array, it also contains multiple values''unlike an array that uses index, objects use properties
  7. // with object, we can easily ive labels to each value
  8. /*
  9. Structure of Syntax:
  10. letobjectName = {
  11. key : value
  12. key : value (function)
  13. key : object{
  14. key : value
  15. },
  16. key : [array]
  17. }
  18. */
  19. let cellphone = {
  20. name: "Nokia 3210",
  21. manufactureDate: "1999"
  22. };
  23. console.log(cellphone);
  24. console.log(typeof cellphone);
  25. // creating objects using a constructor function
  26. /*
  27. Syntax:
  28. function objectName(keyA, keyB){
  29. this.keyA = keyA;
  30. this.keyB = keyB;
  31. };
  32. */
  33. function Laptop(name, manufactureDate){
  34. this.name = name;
  35. this.releaseDate = manufactureDate;
  36. };
  37. let laptop = new Laptop("Lenovo", 2008);
  38. console.log(laptop);
  39. // will create new object
  40. // new operator creates an instance of an object
  41. let laptop1 = Laptop("Asus", 2010);
  42. console.log(laptop1);
  43. // result: undefined
  44. // creating empty objects
  45. let computer = {}
  46. let myComputer = new Object();
  47. console.log(computer);
  48. console.log(myComputer);
  49. // accessing array objects
  50. let machines = [laptop, laptop1];
  51. // access the property of an object inside an array
  52. console.log(machines[0].name);
  53. // result: Lenovo
  54. // another way of accessing properties in an array
  55. console.log(machines[0]["releaseDate"]);
  56. // result: 2008
  57. // initializing/ adding/ deleting/ reassigning object properties
  58. let car = {};
  59. // initializing/ adding object properties
  60. car.name = "Honda Civic";
  61. console.log(car);
  62. // adding object properties with square brackets
  63. car["manufactureDate"] = 2019;
  64. console.log(car);
  65. // deleting object properties
  66. delete car["name"];
  67. console.log(car);
  68. /*
  69. Mini-Activity
  70. 1. Add properties tp the object car:
  71. a. name
  72. b. model
  73. c. color
  74. d. location
  75. */
  76. car.brand = "Honda";
  77. car.model = "Civic";
  78. car.color = "Pearl White";
  79. car.location = "QC";
  80. console.log(car);
  81. // reassigning object properties
  82. car.manufactureDate = 1986
  83. console.log(car);
  84. // objet methods
  85. // a metgid in an object is a function which is a property of an object
  86. // they are also functions and one of the key differences they have is that methods are functions related to a specific object
  87. // methods are defined based on what an object is capable of doing and how it should work
  88. let person = {
  89. name: "Jin",
  90. talk: function(){
  91. console.log(`Hello my name is ${this.name}`);
  92. }
  93. };
  94. person.talk();
  95. let friend = {
  96. firstName: "Bam",
  97. lastName: "Jeon",
  98. address: {
  99. city: "Caloocan",
  100. country: "Philippines",
  101. },
  102. emails: ["bam@mail.com", "jeonbam@gmail.com"],
  103. introduce: function(){
  104. console.log(`Hello my name is ${this.firstName} ${this.lastName}, I live in ${this.address.city}. My personal email is ${this.emails[0]}`)
  105. }
  106. }
  107. friend.introduce();
  108. // real world application
  109. // scenario:
  110. // 1. create a game that would have several pokemons to interact with each other
  111. // 2. every pokemon should have stats, properies, functions
  112. let myPokemon = {
  113. name: "Bulbasaur",
  114. level: 3,
  115. health: 100,
  116. attack: 50,
  117. tackle: function(){
  118. console.log(`${this.name} tackled another pokemon`)
  119. console.log(`targetPokemon's health is now reduced`)
  120. },
  121. faint: function(){
  122. console.log(`${this.name} fainted`);
  123. }
  124. };
  125. myPokemon.tackle();
  126. myPokemon.faint();
  127. // creating object with an object constructor
  128. function Pokemon(name, lvl, hp){
  129. // properties
  130. this.name = name;
  131. this.lvl = lvl;
  132. this.health = hp * 2;
  133. this.attack = lvl;
  134. // methods
  135. this.tackle = function(target){
  136. console.log(`${this.name} tackled ${target.name}`)
  137. console.log(`targetPokemon's health is now reduced`);
  138. console.log(this.name);
  139. }
  140. this.faint = function(){
  141. console.log(`${this.name} fainted`)
  142. }
  143. }
  144. // create new instances of the Pokemon object each with their unique properties
  145. let pikachu = new Pokemon("Pikachu", 3, 50);
  146. let ratata = new Pokemon("Ratata", 5, 25);
  147. // Providing the "ratata" object as an argument to "pikachu" tackle methood will create interaction between the two objects
  148. pikachu.tackle(ratata);
  149. ratata.tackle(pikachu);