קורס JavaScript ES6/7/8 שיעור תרגול מחלקות

דיונים מקורסים
#1
זה נושא דיון מלווה לערך המקורי ב- https://www.tocode.co.il/bundles/es6/lessons/classes-lab
#2

לגבי שאלה1:
לא הבנתי כיצד אני אמור בעיצוב של הduv לבצע צביעה של חלק ממנו לפי כמות אובייקטים של המנורות שעובדות עליו ?
זה שינוי שאני צריך לעשות מבחינת css על אלמנט הdiv?

הנה חלק מהפתרון

<!DOCTYPE html>
<html>
<body>
<div>Bulb</div>

<script>

class LightBulb{
    constructor (el){
        //console.log(el);
        this._el=el;
    }

    on(){
        this._el.style.backgroundColor='yellow';
    }

    off(){
        this._el.style.backgroundColor='';
    }

}




const bulb1 = new LightBulb(document.querySelector('div'));
const bulb2 = new LightBulb(document.querySelector('div'));
bulb1.on();
bulb2.on();
//c.off();


</script>
</body>
</html>
#3

אולי עדיף להשתמש ב div שונה לכל מנורה? או שכל מנורה תיצור לעצמה div פנימי בתוך ה div שקיבלה בבנאי?

#4

אוקי אני מקווה שבסופו של דבר התכוונת לזה בשאלה של התרגיל,
אבל אני בתוכנית שכתבתי אומרת שכל אובייקט מנורה שנוצר יוצר דיב משל עצמו
ומוסיף אותו לMAIN
הקוד נראה כך:

<!DOCTYPE html>
<html>
<body>

<main></main>


<script>

class LightBulb{
    constructor (name='New Bulb'){

        var div =document.createElement('div'); 
        main.appendChild(div);
        this._el=div;
        this._el.textContent = name;
        this._el.classList.add(name);
   
  
        
        
    }

    on(){
        this._el.style.backgroundColor='yellow';
    }

    off(){
        this._el.style.backgroundColor='';
    }

}



var main = document.querySelector('main');
const bulb1 = new LightBulb('b1');
const bulb2 = new LightBulb('b2');
bulb1.on();
bulb1.off();
bulb2.on();


</script>
</body>
</html>
לייק 1
#5

למה האירוע של הלחיצה לא נרשם לי ?

#6

דווקא נרשם נדמה לי שהבעיה ב Ternary:

this.isOn() ? this.on() : this.off();
#7

Blockquote

לא ככה כותבים כתיב מקוצר של IF? וגם אחרי ששניתי לכתיב רגיל זה לא עובד ?

#8

הבעיה שהתנאי הפוך :slight_smile: אם המנורה דולקת אתה רוצה לכבות אותה ואם היא מכובית רוצה להדליק - אצלך המצב הפוך

לייק 1
#9 
<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>

<body>
    <script>
        class Car {
            constructor(color, num) {
                this.color = color;
                this.num = num;
            }
        }
        class Race {
            constructor(c1, c2, ) {
                this.c1 = c1;
                this.c2 = c2;
                this.arrayCars = new Array();
                this.arrayCars.push(c1);
                this.arrayCars.push(c2);
            }
            add(c) {
                this.arrayCars.push(c);
            }
            getWinner() {
                let winCar;
                for (let i = 0; i < this.arrayCars.length - 1; i++)
                    if (this.arrayCars[i].num < this.arrayCars[i + 1].num)
                        winCar = this.arrayCars[i + 1];
                //alert("winner is: " + winCar.num + " with color is: "+ winCar.color);
            }
        }

        const c1 = new Car('blue', 20);
        const c2 = new Car('green', 30);
        const c3 = new Car('red', 24);

        const race = new Race(c1, c2);
        race.add(c3);

        // prints: And the winner is... green
        console.log(race.getWinner());
    </script>

</body>

</html>

היי רציתי לדעת האם לזה התכוונת בפתרון שאלה 2?והאם מה שעשיתי נראה לך נכון לעשות:)
משום מה הוא לא נותן לי להעלות את הקוד מסודר:(

#10

הי אוראל,

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

כמו כן למה אתה שומר את c1 ו c2 כמשתני מחלקה אם אתה שומר אותם גם במערך arrayCars?

ואחרון - מומלץ לא להשתמש ב new Array אלא פשוט בסוגריים מרובעים כלומר:

this.arrayCars = [];

לגבי הקוד תיקנתי את הפורמט. צריך לכתוב לפניו ואחריו שורה עם שלושה סימני `. אתה יכול ללחוץ עכשיו על העיפרון ליד ההודעה שלך ותראה איך הכנסתי את זה כדי שיראה טוב

#11

לייק 1
#12

הי,

נראה טוב - אני הייתי משתמש ב bind ב constructor:

this.button.addEventListener('click', this.toggle.bind(this));

או אופציה אחרת אם משתמשים ב Babel הרבה אנשים כותבים משהו כזה:

class LightBulb {
  constructor(bulb, button, color) {
    this.bulb = bulb;
    this.button = button;
    this.color = color;
    this.isOn = false;

    this.button.addEventListener('click', () => this.toggle());
  }

  toggle = () => {
    this.isOn = !this.isOn;
    this.isOn ? this.on() : this.off();
  };

  on() {
    this.bulb.style.backgroundColor = this.color;
  }

  off() {
    this.bulb.style.backgroundColor = '';
  }
}
#13

בנוסף היה נחמד לאפשר לאנשים להדליק או לכבות כל נורה בנפרד באמצעות לחיצה עליה

#14


תודה רבה על המענה!
ערכתי כמה שינויים…להדליק ולכבות כל נורה בנפרד ע"י לחיצה ובחירת הצבע.
שאלה לגבי מה שהנחית,
למה אני עדיין צריכה לעשות את זה?

 toggle = () => {
    this.isOn = !this.isOn;
    this.isOn ? this.on() : this.off();
  };
#15

תשובה לתרגיל מספר 2:

יש דרך לעשות ולידציה אם מדובר ב - car כמו שעשיתי במתודת add?

#16

תרגיל מספר 3:
נתקעתי בתשובה כאן:

מנסה להגיע לכל המתודות של ה - child ולעשות להם bind.
משהו כמו
this.inc = this.inc.bind(this)
איך ניתן לממש?

#17

יפה! מה הכוונה עדיין צריכה לעשות את זה? את מתכוונת למה להשתמש בשווה ואז סוגריים עגולים וחץ?

#18

הי,

לא הכי הבנתי את השאלה אבל אני לא הייתי מכניס שם וולידציה. ממילא בגירסא שלך לוולידציה אם הוולידציה נופלת הקוד יישבר, וגם אם לא תהיה וולידציה ויעבירו לך משהו שאינו Car הקוד יישבר כך שזה לא משנה ואפילו קצת בזבוז.

מה שכן אם את אוהבת לכתוב עם וולידציות שווה לבדוק את טייפסקריפט. סיפרתי עליה בוובינר הזה:
https://www.tocode.co.il/past_workshops/93

טייפסקריפט נותנת ערך יותר גבוה בגלל שהוולידציה מתרחשת לפני שבכלל מעלים את האתר לאוויר

#19

רעיון מעולה! אני רואה שהצלחת להגיע לרשימה עם getMethods, עכשיו נניח שגילית שיש פונקציה בשם hello אז אפשר להגיע אליה עם this['hello'] ואז למשל לכתוב:

this[method_name] = this[method_name].bind(this);
#20

היי,
רציתי לדעת האם אפשר להגדיר את המשתנים בתוך הclass?
זה עושה לי שגיאה:

class Animal{

var mammalis=false;
}