קורס Front-End Web Development שיעור תרגול פונקציות

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

לא הצלחתי להבין לפח הרמז לתקן את התוכנית בשאלה 2:
ניסתי כך
‘’’
var newFunc=function(text){
return text;
}

panel.innerHTML= newFunc();
‘’’

#3

הי,

קודם כל אתה משתמש בגרש הלא נכון בשביל קוד - הסימן הסודי הוא שלוש פעמים גרש הפוך (זה הכפתור שמצייר ~ כשלוחצים עליו עם Shift אבל בלי ה Shift יוצא גרש הפוך)

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

var b1 = document.querySelector('#btn1');
var b2 = document.querySelector('#btn2');
var panel = document.querySelector('p');

function writeText(text) {
  /* Write Code Here To Make The Program Work */  
}

b1.addEventListener('click', writeText('Yo'));
b2.addEventListener('click', writeText('Nice To Meet You'));
#4

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

var b1 = document.querySelector('#btn1');
var b2 = document.querySelector('#btn2');
var panel = document.querySelector('p');

function writeText(text) {
  /* Write Code Here To Make The Program Work */  	var newFunc=function warp(){
  	panel.textContent=text;
  };
  return newFunc;
}

b1.addEventListener('click', writeText('Yo'));
b2.addEventListener('click', writeText('Nice To Meet You'));
#5

תיקון העיצוב לפוסט הקודם

var b1 = document.querySelector('#btn1');
var b2 = document.querySelector('#btn2');
var panel = document.querySelector('p');

function writeText(text) {
  /* Write Code Here To Make The Program Work */  	
var newFunc=function warp(){
  	panel.textContent=text;
  };
  return newFunc;
}

b1.addEventListener('click', writeText('Yo'));
b2.addEventListener('click', writeText('Nice To Meet You'));
לייק 1
#6

ינון, לא הבנתי מדוע צריך לקרוא לעוד פונקציה ואיך מעבירים לפונקציה ערך כשהיא רק פרמטר .

במקרה הספציפי פתרתי על ידי השמת שם הפקד בעזרת this

var b1 = document.querySelector('#btn1');
var b2 = document.querySelector('#btn2');
var panel = document.querySelector('p');

function writeText(text) {
  /* Write Code Here To Make The Program Work */  
  
  panel.innerText = this.innerHTML;
}

b1.addEventListener('click', writeText);
b2.addEventListener('click', writeText);
#7

הי @benmen

קודם כל עדכנתי את ההודעה שלך כך שהקוד יראה נורמלי - בשביל לעשות את זה צריך לסגור את הקוד בתוך שלושה סימני גרש הפוך (זה הסימן הזה: `). אתה יכול לעשות ״עריכה״ על ההודעה ותראה למה אני מתכוון.

עכשיו לשאלה- יש הרבה דרכים לבצע כל דבר ב JavaScript (ובעצם בכל שפה :slight_smile: ) המטרה של התרגיל הזה היא לבדוק שאתה מבין מנגנון מסוים בשפה, המנגנון שיאפשר לך לקבל את הקלט כפרמטר לפונקציה. בגלל זה ביקשתי לשנות אך ורק את הטקסט שבתוך הפונקציה ולא את הקוד שקורא ל addEventListener.

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

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

#8

עשיתי שהפונקציה תחזיר פונקציה - אבל זה לא עובד
כותב לי את שם האירוע ???

var b1 = document.querySelector('#btn1');
var b2 = document.querySelector('#btn2');
var panel = document.querySelector('p');

function writeText(text) {
  /* Write Code Here To Make The Program Work */ 
  var f=function(text) { panel.textContent=text;};
  return f;
   
 
}

b1.addEventListener('click', writeText('Yo'));
b2.addEventListener('click', writeText('Nice To Meet You'));
#9

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

לייק 1
#10

אם אתה רוצה שפונקציה אנונימית תוחזר פשוט השתמש כך:

var b1 = document.querySelector('#btn1');
var b2 = document.querySelector('#btn2');
var panel = document.querySelector('p');

function writeText(text) {
  /* Write Code Here To Make The Program Work */  	
return (function (){
  	panel.textContent=text;
  });
  
}

b1.addEventListener('click', writeText('Yo'));
b2.addEventListener('click', writeText('Nice To Meet You'));
לייק 1
#11

או שפוט בפונקציה הפנימית אל תשתמש בפרמטר מקומי TEXT:

var b1 = document.querySelector('#btn1');
var b2 = document.querySelector('#btn2');
var panel = document.querySelector('p');

function writeText(text) {
  /* Write Code Here To Make The Program Work */ 
  var f=function() { panel.textContent=text;};
  return f;
   
 
}

b1.addEventListener('click', writeText('Yo'));
b2.addEventListener('click', writeText('Nice To Meet You'));
לייק 1
#12

הרצתי את תרגיל 1:

image
image1366×768 59.2 KB

וההודעה ‘Nice To Meet You’ לא מופיע בכלל לא לפני לחיצה ולא אחרי לחיצה. כי בתרגיל רשמתה שההודעה מופיעה לפני לחיצה

#13

הי,
בתרגיל שצירפת לא מופיע קוד ה HTML אז קשה לדעת אם הבעיה מגיעה משם. הכי טוב לקחת מהקודפן הזה שעובד:

ולוודא שהעתקת את כל שלושת הטאבים (HTML, CSS ו JavaScript)

#14

הי,

להלן הפיתרון שלי לתרגיל 2 באמצעות פונקציית חץ:

var b1 = document.querySelector('#btn1');
var b2 = document.querySelector('#btn2');
var panel = document.querySelector('p');

function writeText(text) {
  /* Write Code Here To Make The Program Work */  
    
   const funcForEventListener =() => panel.textContent = text;
   return funcForEventListener;
   // send back created function with related textContant for "addEventListenet"  
}

b1.addEventListener('click', writeText('Yo'));
b2.addEventListener('click', writeText('Nice To Meet You'));
#15

עובד אבל רק הערה קטנה על סגנון -

יש שני סוגים של פונקציות חץ, נקרא להן קצרות וארוכות. הקצרות נראות כך:

const f = (x) => x * 2

והארוכות נראות כך:

const g = (x) => {
  // I'm an arrow function
  const result = x * 2;
  return result;
}

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

#16

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

#17

אני רואה שמחקת את ה return בסוף הפונקציה writeText - צריך להחזיר את הפונקציה שיצרת בשביל שזה יעבוד

#18

או קי, נכון.
עכשיו זה עובד, תודה.

לייק 1
#19

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

#20

הי אביגיל,

תוכלי לפרט?

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

  2. קודם כל נסי לשנות את הקוד בכל דרך שאת יכולה לחשוב עליה כדי שזה יעבוד

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

יותר ברור עכשיו?