קורס Front End למתכנתים שיעור תרגול: אירועים ושעונים

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

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

#3

אני לא חושב. בדרך כלל משתמשים בביטוי רגולארי בשביל זה

#4

שלום,
האם הכוונה בתרגיל 3 היא לבדוק את חוזק הסיסמא ע"י ביטוי רגולרי או שיש דרך אחרת?
שאלה שנייה, אשמח לדעת האם יש לך פוסט\סרטונים שמלמדים ביטויים רגולריים.
ראיתי את הפוסט הנ"ל:

אך אשמח לדעת אם יש משהו יותר מעמיק כמו הסרטונים שיש לך בקורסים.
(או אפילו רק טקסט אך כולל יותר מהפוסט הנ"ל).
תודה.

#5

הי

כן בטח יש בקורס יוניקס שיעור על ביטויים רגולאריים:
https://www.tocode.co.il/bundles/unix1/lessons/regexp?tab=video

ויש וובינר ביטויים רגולאריים:
https://www.tocode.co.il/past_workshops/59

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

#6

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

#7

הי

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

\u0590

ל

\u05FF

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

/[\u0590-\u05FF]/

לדוגמה הפקודה הבאה ב JavaScript מחזירה True:

Boolean("ש".match(/[\u0590-\u05FF]/))

לגבי תווים אחרים זה יהיה דומה רק נחליף את התבנית, לדוגמה הקוד הבא מחזיר True כיוון שהטקסט מכיל רווח או פסיק:

> Boolean("hello world".match(/[ ,]/))
< true
> Boolean("hello,world".match(/[ ,]/))
< true
#8

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


HTML 
<!`DOCTYPE` html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <h1><p></p> Points</h1>
    <div class="boxes">
        <div class="boxRed"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>

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


----
CSS 
--------
html , body{
    display: flex;
    flex-direction: column;

    overflow: hidden;
    
    width: 100vw;
    height: 100vh;
    margin: 0;
    background-position: center;
    background-image: url("https://images.pexels.com/photos/313782/pexels-photo-313782.jpeg?cs=srgb&dl=pexels-quintin-gellar-313782.jpg&fm=jpg&w=5103&h=3320&_gl=1*pm14a5*_ga*MzY2NjA4Njc2LjE2ODY0NzAxNzI.*_ga_8JE65Q40S6*MTY5MTUwNjU2NS4yNi4xLjE2OTE1MDY1NzcuMC4wLjA.");
    background-size: cover;
    background-position: center; 

}
.box{
    width: 40px;
    height: 40px;
    background-color: rgb(93, 93, 93);
    margin: 5px;
}
.boxRed{
    width: 40px;
    height: 40px;
    background-color: red;
    margin: 5px;
}
h1{
    /*border: 5px solid black;*/
    margin:0;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 20%;
}
p{
    /* border:3px solid red; */
    margin-right: 5px;
}
.boxes{
    margin: 0;
    padding: 0;
    /*border: 3px solid blue;*/
    width: 100%;
    height: 80%;
    justify-content: space-between;
    display: flex;
}

JS
------
const redBox = document.querySelector('.boxRed');
const simpelBox = document.querySelector('.boxes').children;
const numPoints = document.querySelector('h1 p');
let point = 0;
numPoints.textContent=point;


function clickRed(){
    point+=5;
    numPoints.textContent=point;
}


function clickNotRed(){
    if(point-2>=0){
        point-=2;
        numPoints.textContent=point;
    }
    else{
        point=0;
        numPoints.textContent=point;
    }
}

simpelBox[0].addEventListener('click', clickRed);
for(let i =1 ; i<simpelBox.length;i++){
    simpelBox[i].addEventListener('click',clickNotRed);
}
#9

הי,

בטח אז שים לב ששמת את ה Event Listener על כל אחד מהריבועים. זאת בעיה כי עכשיו אם תזיז את האדום אתה צריך להזיז איתו גם את ה Event Listener וזה קצת יותר מסורבל.

יותר פשוט ליצור Event Listener אחד על boxes, ובו לבדוק את הקלאס של האלמנט שלחצו עליו - אם לחצו על משהו שיש לו קלאס boxRed אתה יודע לתת נקודות ואם לחצו על משהו שיש לו קלאס box אתה מוריד נקודות.

עכשיו אחרי הלחיצה תוכל פשוט להגריל מספר בין 0 ל-7, להוריד את הקלאס boxRed מזה שיש לו עכשיו את הקלאס ולתת את הקלאס למי שהוגרל. למשל נגיד שהמספר שהגרלת נשמר במשתנה newIndex אז אפשר לכתוב:

const oldRed = boxes.querySelector('.boxRed');
oldRed.classList.remove('boxRed');
oldRed.classList.add('boxRed');
const newRed = boxes.querySelectorAll('.box')[newIndex];
newRed.classList.remove('box');
newRed.classList.add('boxRed');

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

לייק 1
#10

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

#11

הי,

בשביל למלא עיגול אפשר לשנות ב CSS את ה background-color שלו.

עכשיו נשאר רק לחשוב איזה עיגול למלא - ופה צריך לחבר את זה לתמונה שעכשיו מציגים, כלומר בקוד שמחליף את התמונה חפשי את העיגול שמתאים לתמונה שאת מראה בגדול, ועדכני את ה background-color שלו (או החליפי לו class לאחד עם background-color)

#12

היי משום מה ההזזה של הריבועים לא פועלת לי אשמח להסבר

for(let i = 0; i < boxes.length; i ++){
    const start = Date.now();
    boxes[i].addEventListener('click' , function(){
        const diff = Date.now() - start; 
        if(i === indexRed){
            if(diff !== 2000){
                score = score - 1;
            }
            score = score + 5;
            changeRedBox();
        }
        else{
            score = score - 2;
        }
        p.textContent = `${score}`;
        for(const box of boxes){
            runaway(box);
        }
    })
}

function runaway(box) {
    const width = document.body.clientWidth - 100;
    const x = Math.random() * width;
    const height = document.body.clientHeight - 100;
    const y = Math.random() * height;
    Velocity(box, { left: x, top: y }, { duration: 500 });
}
#13

הי בר קצת קשה לראות לפי הקטע הזה מה בדיוק לא עובד, יכולה לשלוח את הקוד המלא אליי למייל? ynon שטרודל tocode.co.il

#14

לא מספיק ברור לי איך לעשות את הבונוס הראשון בשלב 4, איך אני יודעת אם לא נלחץ הריבוע 2 שניות?

#15

הי,

הפקודה setTimeout ב JavaScript מקבלת פונקציה ומפעילה אותה אחרי X זמן. בשביל הבונוס אחרי כל לחיצה על ריבוע מפעילים setTimeout לשתי שניות, עם פונקציה שמורידה ניקוד.
הפונקציה clearTimeout מוחקת timeout ש setTimeout יצרה. בכל לחיצה צריך גם לזכור לבטל את ה setTimeout הקודם לפני שמפעילים חדש.

אפשר לקרוא על שתי הפונקציות בתיעוד:

#16

תודה

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

יש דבר כזה? אין X וY, זה אינדקסים של המערך שמחליפה ביניהם

#17

נכון זה באמת אתגר

אפשר להשתמש במיקום אבסולוטי position: absolute, למקם את כל התיבות בפינה השמאלית עליונה של המסך, ואז לחשב לפי הגדלים מה צריך להיות ה x וה y של כל תיבה ולהשתמש באנימציה של קואורדינטות למשל:

$element.velocity({
    translateX: "200px",
});