שפת 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>
