Objects

שפת JavaScript – הפעם נלמד אובייקטים.

הגדרת אובייקט person עם מאפיינים בקובץ JS

לאובייקט person יש מספר מאפיינים:
– firstName
– lastName
– dateSignup
– fullName מקבלים מפונקציה אנונימית אשר מחזירה מחרוזת firstName+lastName

function printI(){

var person = {
firstName: "Shalom",
lastName : "Rochkind",
dateSignup : 2018,
fullName : function() {
return this.firstName + " " + this.lastName;
}

};

document.getElementById("testID").innerHTML ="First name is: " + person.firstName + ", Last Name is " + person.lastName + ", date signup " + person.dateSignup + "</br>" + person.fullName();

}

מילה שמורה this ב-JS מדגישה שיש לקחת פרמטר מאובייקט עצמו שזה firstName ו-lastName

מטרה של פונקציה אנונימית זה להחזיר משהו מסוים והיא תמיד ללא שם.
במקרה שלנו – אנחנו מחזירים this.firstName + " " + this.lastName

הדפסת מאפיינים של אובייקט PERSON ל-HTML ושינוי טקסט "Let's change it."

לכל מאפיין של האובייקט person ניגשים בצורה:
person.firstName – שזה שם פרטי
person.lastName – שם משפחה

בקובץ HTML נגדיר את התג "id="testID ונקרא לפונקציה ()printI

<!DOCTYPE html>
<html>
<head>
<title>Java Script</title>
<script type="text/javascript" src="MyJavaScript.js"></script>
</head>
<body>

<p id="testID">Let's change it.</p>
<script>printI()</script>
</body>
</html>

בנאי ב-JavaScript

קובץ JS

אותה דוגמה רק עם בנאי:
בקובץ JS הוגדר אובייקט Person עם מאפיינים ב

* firstName
* lastName
* dateSignup
* NameChange

אבל יש כאן כמה הבדלים!

בדוגמה קודמת אובייקט person היה מוגדר כך

var person = { 
firstName: "Shalom", 
lastName : "Rochkind", 
dateSignup : 2018, 
fullName : function() { 
return this.firstName + " " + this.lastName; 
}

בדוגמה הזאת אובייקט person מקבל פרמטרים (firstName,lastName,dateSignup) ולא מוגדר מראש.

בנוסף הגדרנו פונקציה אנונימית (בכחולאשר מקבלת פרמטר newName 
ואז מחליפים את firstName ב-newName  

function printI(){

 function Person(firstName,lastName,dateSignup) 
 { 
 this.firstName = firstName; 
 this.lastName = lastName; 
 this.dateSignup = dateSignup; 
 this.NameChange = function (newName) 
 { 
  this.firstName = newName; 
 } 
 } 

בהמשך נגדיר אובייקט person לפי Person
אשר מקבל פרמטרים:

firstName=Shalom

lastName=Rochkind

2018=dateSignup

var person = new Person("Shalom","Rochkind",2018); 

ואז מדפיסים מאפיינים של אובייקט,
כאשר פניה למאפיין מתבצעת דרך נקודה
– לדוגמה: person.firstName פניה ל-firstName

בנוסף בהתחלה הגדרנו firstName=Shalom
וכזכור יש לנו פונקציה אנונימית אשר עושה שינוי לשם באובייקט person:

this.NameChange = function (newName) { 
this.firstName = newName; 
} 

לכן בעזרת ("person.NameChange("Daniel אנו משנים את firstName מ-Shalom ל-Daniel
ואז מדפיסים שוב.

document.getElementById("testID").innerHTML ="First name is: " + person.firstName + ", Last Name is " + person.lastName + ", date signup " + person.dateSignup + "</br>" + person.fullName();

person.NameChange("Daniel");

document.getElementById("testIDchanged").innerHTML ="First name is: " + person.firstName + ", Last Name is " + person.lastName + ", date signup " + person.dateSignup + "</br>" + person.fullName();

לסיכום קובץ JS שלנו יהיה:

function printI(){

 function Person(firstName,lastName,dateSignup) 
 { 
 this.firstName = firstName; 
 this.lastName = lastName; 
 this.dateSignup = dateSignup; 
 this.NameChange = function (newName) 
 { 
  this.firstName = newName; 
 } 
 } 

  var person = new Person("Shalom","Rochkind",2018); 

  document.getElementById("testID").innerHTML ="First name is: " + person.firstName + ", Last Name is " + person.lastName + ", date signup " + person.dateSignup + "</br>";

 person.NameChange("Daniel"); 

document.getElementById("testIDchanged").innerHTML ="First name is: " + person.firstName + ", Last Name is " + person.lastName + ", date signup " + person.dateSignup + "</br>"; 


}

ובקובץ HTML

הערה: הוספנו עוד תג testIDchanged להדפסה של מאפיינים של האובייקט
לאחר שינוי firstName

<!DOCTYPE html>
<html>
<head>
<title>Java Script</title>
<script type="text/javascript" src="MyJavaScript.js"></script>
</head>
<body>

<p id="testID">Let's change it.</p>
<p id="testIDchanged">Let's change it.</p>
<script>printI()</script>
</body>
</html>

דילוג לתוכן