קורס Front-End Web Development שיעור תרגול JavaScript Syntax

דיונים מקורסים
#18

הי,

להלן פתרונות שלי (גילוי נאות - נעזרתי בגוגל יחד עם ניסוי וטעיה):

תרגיל 1 - לינק פיתרון:

תרגיל 2 - לינק פיתרון:

תרגיל 3 - לינק פיתרון:

תרגיל 4 - לינק פיתרון:

#19

ניסוי וטעיה וגם גוגל הם כלים לגיטימיים לגמרי (כל עוד דאגת ליותר ניסוי וטעיה מאשר גוגל)

בכל מקרה ולעניין-

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

  2. אני רואה שבתנאי ויתרת על הסוגריים המסולסלים (תרגיל 3). זה עובד אבל נראה כמו טעות. מומלץ תמיד לרשום סוגריים מסולסלים אחרי if גם אם מדובר בשורה אחת.

חוץ מזה עבודה טובה

#20

הי,

שולח קוד משופץ עבור תרגיל 1:

ניסיתי במקום לולאת for ליישם באמצעות forEach ושם בסוגריים לשים את יצירת המספר הרנדומלי.
משום מה זה לא מצליח וזה רושם שאין שם פונקציה:
"TypeError: 35 is not a function
at Array.forEach ()
at createThreeRandNum (dinezab.js:9:17)

גם כשיצרתי לשם כך פונקציה והכנסתי ל-forEach זה לא הצליח.
האם אפשרי בכל זאת ליישם זאת ב-forEach?
תודה.

#21

יכול להדביק כאן את הקוד שלא עבד לך?

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

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

print("hello world")
#22

להלן הקוד שניסיתי עם forEach:

function createRandomNum () {
    const createArr = [];
    createArr.forEach((Math.floor(Math.random() * 100) + 1));
    who_is_bigger (createArr);
}

function who_is_bigger (randNumArr) {
    console.log("Here are the three random numbers: "
                     + randNumArr[0] +" " + randNumArr[1] + " " + randNumArr[2]);
    console.log("The biggest number is: " + Math.max(randNumArr[0],randNumArr[1],randNumArr[2]));
}

createRandomNum ();
#23

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

הנה דוגמא למשהו שהיה אפשר לעשות עם forEach (לא למלא מערך, אלא רק להדפיס את כל האלמנטים בו):

const arr = [10, 20, 30];
const printValue = function(val) { console.log(val); }

arr.forEach(printValue);

טריק אחר שאפשר לייצר איתו מערך בשורה אחת משתמש ב fill ו map ואני אראה אותו ואשלח אותך לגוגל לקרוא קצת על שתי הפונקציות כדי להבין בדיוק איך זה עובד:

function randomValue() { return Math.floor(Math.random() * 100) + 1; }

var arr = new Array(5).fill(0).map(randomValue)
#24

הי ינון,

תודה על ההסבר וההכוונה.
אכן הסתכלתי בגוגל על מתודות fill ו-map.
זה נראה ברור יותר ואף ניסיתי קצת להתעמק, על הדרך מצאתי אפשרות נוספת בעזרת מתודת from שם ניתן להכניס שני פרמטרים:
בראשון הכנסתי הגדרת מערך ללא ערכים, ובשניה ישירות את יצירת ה-map להפקת מספר רנדומלי לכל איבר דרך פונקציית חץ (ללא קריאה לפונקציה).

להלן הקוד בשתי הגרסאות:

גרסה ראשונה -

function createRandArrNum (){
      return  Math.floor(Math.random() * 100) + 1;
    }

function createArr () {
    const arrRand = new Array(3).fill(null).map(createRandArrNum);
    who_is_bigger (arrRand);
}

function who_is_bigger (arr) {
          console.log("Here are the three random numbers: "
                     + arr[0] +" " + arr[1] + " " + arr[2]);
          console.log("The biggest number is: " + Math.max(arr[0],arr[1],arr[2]))
        }

createArr ();

גרסה שניה-

function createArr () {
    // "from" method gets 2 parameter : one for definining an Array , second for "map" method
    const arrRand = Array.from(Array(3), () => Math.floor(Math.random() * 100) + 1);
    // by "from" method we can pass in parameter num 2 - direct function - here it's an arrow function
    who_is_bigger (arrRand);
}

function who_is_bigger (arr) {
          console.log("Here are the three random numbers: "
                     + arr[0] +" " + arr[1] + " " + arr[2]);
          console.log("The biggest number is: " + Math.max(arr[0],arr[1],arr[2]))
        }

createArr ();
לייק 1
#25

היי ינון
אשמח אם תוכל לעבור על פתרונות התרגילים ולהגיד אם הם נכונים ומה כדאי לשפר

#26

הי אביגיל,

בשמחה.

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

לגבי התרגילים- הפיתרונות מעולים כתובים יפה וגם עושים את הדבר הנכון.

אני רושם את הדברים החשובים קודם ואחרי זה הערות יותר קטנות:

  1. הפונקציה compare שלך מדפיסה את התוצאה. בדרך כלל אנחנו מעדיפים שפונקציה ״תחזיר״ תוצאה והפונקציה שקראה לה תדפיס את התוצאה - כלומר לא לערבב חישוב עם הדפסה.

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

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

עכשיו כמה הצעות קטנות יותר לשיפור:

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

    var num1 = Math.floor(Math.random() * max);

מומלץ יותר לכתוב פונקציה שתקבל את הטווח ותחזיר מספר אקראי בטווח.

את שורת ההדפסה הזאת:

    console.log("numbers: num1  "+ num1 + " num2 "+ num2 + " num3 " + num3);

אפשר בדפדפנים חדשים להחליף בשורה הקצת יותר קריאה (טוב תלוי את מי שואלים):

    console.log(`numbers: num1 = ${num1}, num2 = ${num2}, num3 = ${num3}`);

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

מתכנתים היום מעדיפים להשתמש במילה let במקום במילה var. את יכולה לשמוע על ההבדל בין הפקודות בשיעור המתאים מקורס ES6:

https://www.tocode.co.il/bundles/es6/lessons/let-and-const

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

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

// returns 33
Math.max(10, 25, 33, 2)
#27

היי ינון
כשאני כותב את פקודה- console.log יש לי error:unexpected console statment(no-console).
אם אני כותב את בתוך פונקציה זה מדפיס לי חלק מהקוד אבל לא מה שאני רוצה , ואם זה מחוץ לפונקציה זה מדפיס לי מה שביקשתי אבל עדיין יש לי בצד סימון של error.
אתה יודע למה זה?

#28

הי נתנאל,

אתה מתכוון בתוך ה Brackets? או בדפדפן?

#29

יכול לשים פה תמונה של הודעת השגיאה שיהיה יותר ברור?

#30

יש פה אולי סרטוני פתרונות או פתרונות של מי שכתב את השאלות?

#31

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

רוצה לספר איפה נתקעת ואנסה לעזור?

לייק 1
#32 
function randomValue(min, max) {
    return Math.floor(Math.random() * (max-min) + min);
}
//ex1
function greatestOf3() {
    let max = 0;
    for (let i = 0; i < 3; i++) {
        let value = randomValue(0, 100);
        if (max < value) {
            max = value;
        }
        console.log("value " + i + " = " + value);
    }
    console.log("The max value is: " + max);
}

//ex2
function sumOfDigits() {
    let sum = 0;
    let value = randomValue(1000, 9999);
    while (value) {
        sum += value % 10;
        value = Math.floor(value / 10);
    }
    console.log("Sum of digits is: " + sum);
}

//ex3
function gcdoclidis() {
    let first = randomValue(1, 9999);
    let second = randomValue(1, 9999);

    let max = (first, second)=>{
        if(first >= second)
            return first;
        else
            return second;
    }
    let min = (first, second)=>{
        if(first <= second)
            return first;
        else
            return second;
    }
    let gap= max-min;
    while(gap > 0) {
        if(gap === 1) {
            console.log("gcd is: 1");
            return;
        }
        let temp = max;
        max = min;
        min = gap;
        gap = max - min;
    }
    console.log("gcd is: " + min);
}

//ex4
function lcmOftwo() {
    let first = randomValue(1, 9999);
    let second = randomValue(1, 9999);
    while(true){
        let i = 1;
        if((i % first)===0 && (i % second === 0)){
            console.log("lcm is: " + i);
            return;
        }
            
    }
    
}
לייק 1
#33

ממשיך את הדיון מ קורס Front-End Web Development שיעור תרגול JavaScript Syntax:

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

#34

איך מריצים את התוכנית בbrackets?

#35

הי,
בקרטס הוא עורך טקסט. בשביל להריץ את התוכנית צריך למצוא את קובץ ה HTML ב File Explorer של חלונות וללחוץ עליו לחיצה כפולה. זה יפתח את הקובץ בדפדפן.

אם כתבת רק קובץ JavaScript תצטרך לכתוב גם קובץ HTML שיריץ אותו, ואת קובץ ה HTML אתה פותח בדפדפן. אם לדוגמא קובץ ה JavaScript נקרא main.js אז בקובץ ה HTML תוכל לכתוב:

<html>
  <head></head>
  <body>
    <script src="main.js"></script>
  </body>
</html>
#37

נראה לי שהפתרון הכי פשוט לשאלה הראשונה הוא

var a = Math.round(Math.random()*100);
var b = Math.round(Math.random()*100);
while ( b == a) { 
	var b = Math.round(Math.random()*100);
	}
var c = Math.round(Math.random()*100);
while ( c == a || b == c) { 
	var c = Math.round(Math.random()*100);
	}	


console.log("variant a "+a );
console.log("variant b "+b );
console.log("variant c "+c );

if (a >b && a>c) {
	console.log("the bigest number is " + a)
}else if ((b >a && b>c)) {
	console.log("the bigest number is " + b)
} else {console.log("the bigest number is " + c)}

ככה גם הJS דואג שלא תהיה חזרה על מספר

#38

הי @netcohen

עובד, למרות שלפי הגדרת השאלה אין לנו בעיה אם חלק מהמספרים יהיו זהים. ואגב ל JavaScript יש לולאת do…while אז אפשר גם לכתוב:

do { var b = Math.round(Math.random()*100) } while (b == a);