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

Nirb · 29 בנובמבר,‏ 2018,‏ 8:52pm

הי ינון,

תודה על ההסבר וההכוונה.
אכן הסתכלתי בגוגל על מתודות 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 ();

11120 · 5 בפברואר,‏ 2019,‏ 8:15am

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

ynonp · 6 בפברואר,‏ 2019,‏ 1:43pm

הי אביגיל,

בשמחה.

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

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

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

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

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

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

    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)

11141 · 26 בנובמבר,‏ 2019,‏ 12:20pm

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

ynonp · 26 בנובמבר,‏ 2019,‏ 2:39pm

הי נתנאל,

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

ynonp · 26 בנובמבר,‏ 2019,‏ 2:40pm

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

ketter · 1 בדצמבר,‏ 2019,‏ 5:23pm

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

ynonp · 1 בדצמבר,‏ 2019,‏ 7:08pm

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

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

11148 · 30 בינואר,‏ 2020,‏ 4:42pm

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;
        }
            
    }
    
}

11148 · 30 בינואר,‏ 2020,‏ 7:45pm

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

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

y0583233661 · 18 במרץ,‏ 2020,‏ 9:02am

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

ynonp · 22 במרץ,‏ 2020,‏ 7:06am

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

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

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

netcohen · 14 במאי,‏ 2020,‏ 7:27pm

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

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 דואג שלא תהיה חזרה על מספר

ynonp · 17 במאי,‏ 2020,‏ 11:51am

הי @netcohen

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

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

11159 · 31 במאי,‏ 2020,‏ 9:02am

הי,
האם תוכל בבקשה לעבור על הפתרונות שלי - אשמח להערות! תודה רבה!


//Random between min to max include both
function RandomInt(min,max) {
   return (Math.floor((Math.random()*(Math.floor(max-min+1))) + min));
}

//T1;
function max_between_3_numbers() {
    var num1 = RandomInt(0,100);
    var num2 = RandomInt(0,100);
    var num3 = RandomInt(0,100);
    console.log("num1: " + num1 + " num2: " + num2 + " num3: " + num3);
    console.log ("The max number is: " + (Math.max(num1,num2,num3)));
}

//T2
function sum_of_digits(min,max) {
    var num = RandomInt(min,max);
    var sum = 0;
    var num_tmp = num;
    while(num) {
        sum+=num%10;
        num=Math.floor(num/10); 
    }
    console.log ("The number is: " + num_tmp + "\nAnd the sum of the digits is: " + sum);
}

function first_devide_by_second(num1,num2) {
    if (num1/num2 == (Math.floor(num1/num2))) {
        return 1;
    }
    
    return 0;
}

//T3
function largest_number_that_they_both_devide (num1,num2) {
    min_num = Math.min(num1,num2);
    for (var i = min_num; i>0; i--) {
        if(first_devide_by_second(num1,i) && first_devide_by_second(num2,i)){
            console.log ("The largest number is: " + i)
            break;
        }
    }
}

//T4
function smallest_common_multiple(num1,num2) {
    for (var i = Math.max(num1,num2); i<=num1*num2; i++) {
        if(first_devide_by_second(i,num1) && first_devide_by_second(i,num2)) {
            console.log ("The number is: " + i);
            break;
        }
    }
}


function main() {
    max_between_3_numbers();
    sum_of_digits(1000,100000000);
    largest_number_that_they_both_devide(128,236);
    smallest_common_multiple(20,8);
}

main();

ynonp · 31 במאי,‏ 2020,‏ 11:53am

הי

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

היום כבר לא כל כך מקובל להשתמש ב var. אני יודע זה מה שאני עובד איתו בקורס אבל האמת שממש בקרוב תעלה גירסא חדשה של הקורס הזה שם במקום var אני אכתוב תמיד let או const. שווה לזרוק מבט לשיעור כאן כדי להבין מה ההבדל ביניהם ובאופן כללי כמעט תמיד להתרגל לכתוב const או let במקום var:
https://www.tocode.co.il/bundles/es6/lessons/let-and-const
מבחינת שמות לפונקציות ב JavaScript אוהבים להשתמש בכתיב אותיות גמל אז smallestCommonMultiple יהיה שם יותר מתאים מאשר זה עם הקו תחתי.

11159 · 31 במאי,‏ 2020,‏ 5:46pm

תודה רבה על ההיענות המהירה!
אקח לתשומת ליבי את ההערות.

ZaZza · 30 בדצמבר,‏ 2020,‏ 8:16pm

היי,

פתרון שלי:

var arr = Array.from({length:3} , () => Math.floor(Math.random() * 100) + 1);
console.log(arr + " Max=> " + Math.max(...arr));

ynonp · 3 בינואר,‏ 2021,‏ 8:21am

הי @ZaZza

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

חוץ מזה יש לקורס הזה גירסה חדשה יותר בקישור כאן:
https://www.tocode.co.il/bundles/frontend

שווה ללמוד ממנה

ZaZza · 4 בינואר,‏ 2021,‏ 12:00am

var arr = Array.from({length:3} , () => Math.floor(Math.random() * 100) + 1);
console.log(arr + " Max=> " + Math.max(...arr));

תודה