SlideShare ist ein Scribd-Unternehmen logo
1 von 12
Downloaden Sie, um offline zu lesen
JAVASCRIPT OBJECTS
Object
Objects are variables too. But objects can contain
many values.
Objects store a collection of key-value pairs: each
item in the collection has a name that we call
the key and an associated value
An object's keys are strings or symbols, but the
values can be any type, including other objects
We can create an object using object
literal syntax:
let person = {
name: 'Jane',
age: 37,
hobbies: ['photography', 'genealogy'],
};
 This code shows an object named person that has 3
key-value pairs:
i) The name of the person, a string, defined by
the name key.
ii) The age of the person, a number, defined by
the age key.
iii) A list of the person's hobbies, an array of strings,
defined by the hobbies key.
 Braces ({}) delimit the list of key-value pairs
contained by the object. Each key-value pair ends
with a comma (,), and each pair has a key, a colon
(:), and a value. The comma that follows the last
pair is optional. Though the keys are strings, we
typically omit the quotes when the key consists
entirely of alphanumeric characters and
underscores. The values of each pair can be any
type.
 We can access a specific value in an object in two
ways: 1) dot notation and 2) bracket notation
 Person.name= 'Jane‘ //dot notation
 person['age'] =37 // bracket notation
Let's add some more key-value pairs to
the person object:
person= { name: 'Jane', age: 37, hobbies:
['photography', 'genealogy'], height: '5 ft',
gender: 'female' }
To remove something from an existing object, you
can use the delete keyword
delete person.age = true
JAVASCRIPT ARRAY
 An array is a set of variables (e.g., strings or
numbers) that are grouped together and given a
single name.
 Creating Arrays
 To create an array, a new Array object must be
declared. This can be done in two ways:
var myArray = new
Array("Sarah","Patrick","Jane","Tim");
Or
var myArray =
["Sarah","Patrick","Jane","Tim"];
POPULATING ARRAY WITH DATA
Syntax
arrayName[index] = value;
 arrayName: The name of the array variable
 index: The array index number where you want
the value stored
 value: The value you’re storing in the array
Example
var dogPhotos = new Array(5);
dogPhotos[0] = "dog-1";
dogPhotos[1] = "dog-2";
dogPhotos[2] = "dog-3";
 Using a loop to populate an array
var dogPhotos = new Array(5);
for (var counter = 0; counter < 5; counter++) { dogPhotos[counter] =
"dog-" + (counter + 1);
}
Full code
// Declare the array
var dogPhotos = new Array(5);
// Initialize the array values using a loop
for (var counter = 0; counter < 5; counter++) {
dogPhotos[counter] = "dog-" + (counter + 1);
}
// Get the photo number
var promptNum = prompt("Enter the dog you want to see (1-5):", "");
if (promptNum !== "" && promptNum !== null) {
// Construct the primary part of the filename var promptDog = "dog-
" + promptNum;
// Work with the array values using a loop
for (counter = 0; counter < 5; counter++) {
if (promptDog === dogPhotos[counter] {
document.body.style.backgroundImage =
"url('/images/" + dogPhotos[counter] + ".png')";
break; }
} }
Creating Multidimensional Arrays
A multidimensional array is one where two or more
values are stored within each array element
// define array
var myArray = [ ['apple', 'orange', 'mango'],
['rose', 'lotus', 'lily'], ['cabbage', 'carrot',
'beans'] ];
Access elements of the array
console.log(myArray[0][1]); // orange
console.log(myArray[1][0]); // rose
console.log(myArray[2][2]); // beans
 Get key by value
var position = myArray[0].indexOf('mango');
console.log(position); // 2
Get position of element in the array
console.log(myArray[0].indexOf('mango')); // 2
Get size of the array
console.log(myArray.length); // 3
Using for loop
for (i = 0; i < myArray.length; i++) {
console.log(i, myArray[i]);
}
//0 ["apple", "orange", "mango"]
//1 ["rose", "lotus", "lily"]
//2 ["cabbage", "carrot", "beans"]
for (i = 0; i < myArray.length; i++) {
for (j = 0; j < myArray[i].length; j++) {
console.log(i, j, myArray[i][j]);
} }
// 0 0 "apple"
// 0 1 "orange"
// 0 2 "mango"
Add item at the end of the array
myArray[2].push('potato');
console.log(myArray[2]); // ["cabbage", "carrot",
"beans", "potato"]
Add item at the beginning of the array
myArray[2].unshift('tomato');
console.log(myArray[2]);
// ["tomato", "cabbage", "carrot", "beans", "potato"]
Remove item from end of the array
myArray[2].pop();
console.log(myArray[2]); // ["tomato", "cabbage",
"carrot", "beans"]
Remove item from the beginning
myArray[2].shift();
console.log(myArray[2]); // ["cabbage", "carrot",
"beans"]

Weitere ähnliche Inhalte

Ähnlich wie JAVASCRIPT OBJECTS.pdf

arrays in c# including Classes handling arrays
arrays in c#  including Classes handling arraysarrays in c#  including Classes handling arrays
arrays in c# including Classes handling arrays
JayanthiM19
 
Lecture 5 array in PHP.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 5 array in PHP.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 5 array in PHP.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 5 array in PHP.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
ZahouAmel1
 
ARTDM 170, Week10: Arrays + Using Randomization
ARTDM 170, Week10: Arrays + Using RandomizationARTDM 170, Week10: Arrays + Using Randomization
ARTDM 170, Week10: Arrays + Using Randomization
Gilbert Guerrero
 
Artdm170 Week10 Arrays Math
Artdm170 Week10 Arrays MathArtdm170 Week10 Arrays Math
Artdm170 Week10 Arrays Math
Gilbert Guerrero
 

Ähnlich wie JAVASCRIPT OBJECTS.pdf (20)

ARRAYS.ppt
ARRAYS.pptARRAYS.ppt
ARRAYS.ppt
 
Array lecture
Array lectureArray lecture
Array lecture
 
Chapter 2 wbp.pptx
Chapter 2 wbp.pptxChapter 2 wbp.pptx
Chapter 2 wbp.pptx
 
Fp201 unit4
Fp201 unit4Fp201 unit4
Fp201 unit4
 
12. arrays
12. arrays12. arrays
12. arrays
 
Arrays are used to store multiple values in a single variable, instead of dec...
Arrays are used to store multiple values in a single variable, instead of dec...Arrays are used to store multiple values in a single variable, instead of dec...
Arrays are used to store multiple values in a single variable, instead of dec...
 
ARRAYS.ppt
ARRAYS.pptARRAYS.ppt
ARRAYS.ppt
 
ARRAYS.ppt
ARRAYS.pptARRAYS.ppt
ARRAYS.ppt
 
What are arrays in java script
What are arrays in java scriptWhat are arrays in java script
What are arrays in java script
 
Array properties
Array propertiesArray properties
Array properties
 
Computer programming 2 Lesson 13
Computer programming 2  Lesson 13Computer programming 2  Lesson 13
Computer programming 2 Lesson 13
 
arrays in c# including Classes handling arrays
arrays in c#  including Classes handling arraysarrays in c#  including Classes handling arrays
arrays in c# including Classes handling arrays
 
Array
ArrayArray
Array
 
Arrays in java
Arrays in javaArrays in java
Arrays in java
 
Php array
Php arrayPhp array
Php array
 
Java script arrays
Java script arraysJava script arrays
Java script arrays
 
Java script arrays
Java script arraysJava script arrays
Java script arrays
 
Lecture 5 array in PHP.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 5 array in PHP.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 5 array in PHP.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 5 array in PHP.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
 
ARTDM 170, Week10: Arrays + Using Randomization
ARTDM 170, Week10: Arrays + Using RandomizationARTDM 170, Week10: Arrays + Using Randomization
ARTDM 170, Week10: Arrays + Using Randomization
 
Artdm170 Week10 Arrays Math
Artdm170 Week10 Arrays MathArtdm170 Week10 Arrays Math
Artdm170 Week10 Arrays Math
 

Kürzlich hochgeladen

SPLICE Working Group: Reusable Code Examples
SPLICE Working Group:Reusable Code ExamplesSPLICE Working Group:Reusable Code Examples
SPLICE Working Group: Reusable Code Examples
Peter Brusilovsky
 
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes GuàrdiaPersonalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
EADTU
 
SURVEY I created for uni project research
SURVEY I created for uni project researchSURVEY I created for uni project research
SURVEY I created for uni project research
CaitlinCummins3
 
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
中 央社
 

Kürzlich hochgeladen (20)

DEMONSTRATION LESSON IN ENGLISH 4 MATATAG CURRICULUM
DEMONSTRATION LESSON IN ENGLISH 4 MATATAG CURRICULUMDEMONSTRATION LESSON IN ENGLISH 4 MATATAG CURRICULUM
DEMONSTRATION LESSON IN ENGLISH 4 MATATAG CURRICULUM
 
SPLICE Working Group: Reusable Code Examples
SPLICE Working Group:Reusable Code ExamplesSPLICE Working Group:Reusable Code Examples
SPLICE Working Group: Reusable Code Examples
 
Basic Civil Engineering notes on Transportation Engineering & Modes of Transport
Basic Civil Engineering notes on Transportation Engineering & Modes of TransportBasic Civil Engineering notes on Transportation Engineering & Modes of Transport
Basic Civil Engineering notes on Transportation Engineering & Modes of Transport
 
Andreas Schleicher presents at the launch of What does child empowerment mean...
Andreas Schleicher presents at the launch of What does child empowerment mean...Andreas Schleicher presents at the launch of What does child empowerment mean...
Andreas Schleicher presents at the launch of What does child empowerment mean...
 
Đề tieng anh thpt 2024 danh cho cac ban hoc sinh
Đề tieng anh thpt 2024 danh cho cac ban hoc sinhĐề tieng anh thpt 2024 danh cho cac ban hoc sinh
Đề tieng anh thpt 2024 danh cho cac ban hoc sinh
 
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes GuàrdiaPersonalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
 
How to Send Pro Forma Invoice to Your Customers in Odoo 17
How to Send Pro Forma Invoice to Your Customers in Odoo 17How to Send Pro Forma Invoice to Your Customers in Odoo 17
How to Send Pro Forma Invoice to Your Customers in Odoo 17
 
Major project report on Tata Motors and its marketing strategies
Major project report on Tata Motors and its marketing strategiesMajor project report on Tata Motors and its marketing strategies
Major project report on Tata Motors and its marketing strategies
 
Improved Approval Flow in Odoo 17 Studio App
Improved Approval Flow in Odoo 17 Studio AppImproved Approval Flow in Odoo 17 Studio App
Improved Approval Flow in Odoo 17 Studio App
 
Mattingly "AI and Prompt Design: LLMs with NER"
Mattingly "AI and Prompt Design: LLMs with NER"Mattingly "AI and Prompt Design: LLMs with NER"
Mattingly "AI and Prompt Design: LLMs with NER"
 
SURVEY I created for uni project research
SURVEY I created for uni project researchSURVEY I created for uni project research
SURVEY I created for uni project research
 
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
 
e-Sealing at EADTU by Kamakshi Rajagopal
e-Sealing at EADTU by Kamakshi Rajagopale-Sealing at EADTU by Kamakshi Rajagopal
e-Sealing at EADTU by Kamakshi Rajagopal
 
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
 
An overview of the various scriptures in Hinduism
An overview of the various scriptures in HinduismAn overview of the various scriptures in Hinduism
An overview of the various scriptures in Hinduism
 
How to Manage Website in Odoo 17 Studio App.pptx
How to Manage Website in Odoo 17 Studio App.pptxHow to Manage Website in Odoo 17 Studio App.pptx
How to Manage Website in Odoo 17 Studio App.pptx
 
OSCM Unit 2_Operations Processes & Systems
OSCM Unit 2_Operations Processes & SystemsOSCM Unit 2_Operations Processes & Systems
OSCM Unit 2_Operations Processes & Systems
 
An Overview of the Odoo 17 Knowledge App
An Overview of the Odoo 17 Knowledge AppAn Overview of the Odoo 17 Knowledge App
An Overview of the Odoo 17 Knowledge App
 
UChicago CMSC 23320 - The Best Commit Messages of 2024
UChicago CMSC 23320 - The Best Commit Messages of 2024UChicago CMSC 23320 - The Best Commit Messages of 2024
UChicago CMSC 23320 - The Best Commit Messages of 2024
 
PSYPACT- Practicing Over State Lines May 2024.pptx
PSYPACT- Practicing Over State Lines May 2024.pptxPSYPACT- Practicing Over State Lines May 2024.pptx
PSYPACT- Practicing Over State Lines May 2024.pptx
 

JAVASCRIPT OBJECTS.pdf

  • 2. Object Objects are variables too. But objects can contain many values. Objects store a collection of key-value pairs: each item in the collection has a name that we call the key and an associated value An object's keys are strings or symbols, but the values can be any type, including other objects We can create an object using object literal syntax: let person = { name: 'Jane', age: 37, hobbies: ['photography', 'genealogy'], };
  • 3.  This code shows an object named person that has 3 key-value pairs: i) The name of the person, a string, defined by the name key. ii) The age of the person, a number, defined by the age key. iii) A list of the person's hobbies, an array of strings, defined by the hobbies key.  Braces ({}) delimit the list of key-value pairs contained by the object. Each key-value pair ends with a comma (,), and each pair has a key, a colon (:), and a value. The comma that follows the last pair is optional. Though the keys are strings, we typically omit the quotes when the key consists entirely of alphanumeric characters and underscores. The values of each pair can be any type.
  • 4.  We can access a specific value in an object in two ways: 1) dot notation and 2) bracket notation  Person.name= 'Jane‘ //dot notation  person['age'] =37 // bracket notation Let's add some more key-value pairs to the person object: person= { name: 'Jane', age: 37, hobbies: ['photography', 'genealogy'], height: '5 ft', gender: 'female' } To remove something from an existing object, you can use the delete keyword delete person.age = true
  • 5.
  • 6. JAVASCRIPT ARRAY  An array is a set of variables (e.g., strings or numbers) that are grouped together and given a single name.  Creating Arrays  To create an array, a new Array object must be declared. This can be done in two ways: var myArray = new Array("Sarah","Patrick","Jane","Tim"); Or var myArray = ["Sarah","Patrick","Jane","Tim"];
  • 7. POPULATING ARRAY WITH DATA Syntax arrayName[index] = value;  arrayName: The name of the array variable  index: The array index number where you want the value stored  value: The value you’re storing in the array Example var dogPhotos = new Array(5); dogPhotos[0] = "dog-1"; dogPhotos[1] = "dog-2"; dogPhotos[2] = "dog-3";
  • 8.  Using a loop to populate an array var dogPhotos = new Array(5); for (var counter = 0; counter < 5; counter++) { dogPhotos[counter] = "dog-" + (counter + 1); } Full code // Declare the array var dogPhotos = new Array(5); // Initialize the array values using a loop for (var counter = 0; counter < 5; counter++) { dogPhotos[counter] = "dog-" + (counter + 1); } // Get the photo number var promptNum = prompt("Enter the dog you want to see (1-5):", ""); if (promptNum !== "" && promptNum !== null) { // Construct the primary part of the filename var promptDog = "dog- " + promptNum; // Work with the array values using a loop for (counter = 0; counter < 5; counter++) {
  • 9. if (promptDog === dogPhotos[counter] { document.body.style.backgroundImage = "url('/images/" + dogPhotos[counter] + ".png')"; break; } } } Creating Multidimensional Arrays A multidimensional array is one where two or more values are stored within each array element // define array var myArray = [ ['apple', 'orange', 'mango'], ['rose', 'lotus', 'lily'], ['cabbage', 'carrot', 'beans'] ]; Access elements of the array console.log(myArray[0][1]); // orange console.log(myArray[1][0]); // rose console.log(myArray[2][2]); // beans
  • 10.  Get key by value var position = myArray[0].indexOf('mango'); console.log(position); // 2 Get position of element in the array console.log(myArray[0].indexOf('mango')); // 2 Get size of the array console.log(myArray.length); // 3
  • 11. Using for loop for (i = 0; i < myArray.length; i++) { console.log(i, myArray[i]); } //0 ["apple", "orange", "mango"] //1 ["rose", "lotus", "lily"] //2 ["cabbage", "carrot", "beans"] for (i = 0; i < myArray.length; i++) { for (j = 0; j < myArray[i].length; j++) { console.log(i, j, myArray[i][j]); } } // 0 0 "apple" // 0 1 "orange" // 0 2 "mango"
  • 12. Add item at the end of the array myArray[2].push('potato'); console.log(myArray[2]); // ["cabbage", "carrot", "beans", "potato"] Add item at the beginning of the array myArray[2].unshift('tomato'); console.log(myArray[2]); // ["tomato", "cabbage", "carrot", "beans", "potato"] Remove item from end of the array myArray[2].pop(); console.log(myArray[2]); // ["tomato", "cabbage", "carrot", "beans"] Remove item from the beginning myArray[2].shift(); console.log(myArray[2]); // ["cabbage", "carrot", "beans"]