קורס JavaScript ES6/7/8 שיעור המילה החדשה class


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

איך אפשר להגדיר בתוך מחלקה קבוע בתוך ה-constractor שלא יהיה ניתן לשנות אותו בכל המחלקה אך שיהיה זמין לכל המחלקה ולא רק לבלוק של הפונקציית בנאי?

אולי להגדיר const בתחילת הקובץ?

משהו כמו:

const globalDemo = 5
class FooBar {
}

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

this.btn

הדרך היחידה היא להגדיר את המחלקות בקבצים נפרדים ואז המשתנה שלך יהיה פרטי לקובץ (וממילא בקובץ יש רק מחלקה אחת)

לייק 1

שלום ינון
תן לי ציון אם הבנתי נכון את השיעור

<!DOCTYPE html>
<html>
<head>	
</head>
<body>
<input type="number" id="num">
 <p id="now"></p>
 <button id="action">start</button>

<script>

class timer{

constructor(){
	this.btn = document.querySelector('button');
	this.now = document.querySelector('p');
	this.input = document.querySelector('input');
	this.isPly = '';
	this.router = this.router.bind(this);
	
	this.event();
}
event(){
	
	this.btn.addEventListener("click", this.router);
}
router(){
	
	if(this.btn.textContent === "start"){
				this.on();
			}else{
				this.stop();
			}
}

on(){
	console.log(10);
	let num = this.input.value ? this.input.value : this.now.textContent;
	this.input.value = '';
	this.now.textContent = num;
	this.start();
	this.btn.textContent = "stop";
	
}
start(){
	this.isPly = setInterval(() => this.now.textContent++,1000);
	
}
stop(){
	clearInterval(this.isPly);
	this.btn.textContent = "start";
}


 }

const action = new timer;
</script>

 </body>
 </html>
לייק 1

פה לא נותנים ציונים - אנחנו פה בשביל ללמוד :slight_smile:

נראה שהבנת יופי את השיעור ובכל זאת כמה הערות קטנות לשיפור לפעם הבאה:

  1. שם של קלאס נהוג להתחיל באות גדולה

  2. לא חושב שהייתי קורא לפונקציה event בשם הזה. אולי createEventListeners או משהו יותר אינפורמטיבי

  3. אם כבר יצרת פונקציה עבור יצירת ה Event Listeners, הייתי מכניס לתוכה את ה bind-ים, משהו כזה:

this.btn.addEventListener("click", this.router.bind(this));
  1. כדאי להיות עקבי בשמות - on ו off או start ו stop. כשאתה מערבב זה קשה לעקוב

  2. למה השתמשת בפונקציית חץ ב setInterval במקום להעביר מתודה של הקלאס?

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

const TEXTS = {
  start: 'start',
};

if(this.btn.textContent === TEXTS.start)

כי אז כשתרצה בעתיד לתרגם את היישום יהיה לך יותר קל.

100% צודק.

שאר ההערות נכונות בהחלט והתשובה (לא כזאת תשובה…) - ניסיתי לעשות משהו בזריזות (נו… זו לא תשובה… אבל בכל זאת…:slight_smile: )
בהקשר להערה 5 - ניסיתי עוד לפני כן, זה ביצע את הפעולה פעם אחת בלבד, פשוט לא התייחס לsetInterval.

כתבתי כך:
this.isPly = setInterval(this.myFunctionName(),1000);

יודע להגיד מה ההבדל בין:

this.myFunctionName()

ל:

this.myFunctionName

?

אתה מתכוון לומר שאין הבדל…?
אני ניסיתי בלי סוגריים וזה לא עבד…

להיפך - יש המון הבדל. אני מדבר עליו בשיעור כאן:
https://www.tocode.co.il/bundles/html5-web-development/lessons/js-functions

נסה לצפות שוב ולספר מהו כאן

אחרי זה בעזרת Debugger נסה למצוא מה הבעיה בכל אחת משיטות הכתיבה שניסית (נכון ששני הדברים לא עובדים, אבל כל אחד מסיבה אחרת) וספר מה שתי הבעיות שמצאת

תודה @ynonp רק עכשיו ראיתי את התשובה… :wink:
תודה רבה למדתי משהו נוסף :slight_smile: