זהו נושא דיון מלווה לערך המקורי שב־https://www.tocode.co.il/bundles/frontend/lessons/events-lab
היי אני מכיר שבפייתון אם אתה רוצה לדעת שבמחרוזת יש אות גדולה, אות קטנה או מספר יש לזה פונקציה בנויה.
גם בגאווה סקריפט יש את זה?
אני לא חושב. בדרך כלל משתמשים בביטוי רגולארי בשביל זה
שלום,
האם הכוונה בתרגיל 3 היא לבדוק את חוזק הסיסמא ע"י ביטוי רגולרי או שיש דרך אחרת?
שאלה שנייה, אשמח לדעת האם יש לך פוסט\סרטונים שמלמדים ביטויים רגולריים.
ראיתי את הפוסט הנ"ל:
אך אשמח לדעת אם יש משהו יותר מעמיק כמו הסרטונים שיש לך בקורסים.
(או אפילו רק טקסט אך כולל יותר מהפוסט הנ"ל).
תודה.
הי
כן בטח יש בקורס יוניקס שיעור על ביטויים רגולאריים:
https://www.tocode.co.il/bundles/unix1/lessons/regexp?tab=video
ויש וובינר ביטויים רגולאריים:
https://www.tocode.co.il/past_workshops/59
וכן אני חושב שביטוי רגולארי יכול לעזור פה בתרגיל, אבל הוא לא יהיה לבד. לדוגמה בשביל לבדוק שיש יותר מ-5 תווים לא צריכים ביטוי רגולארי. אבל כן לשני האחרים זה רעיון טוב.
שמעתי את השיעורים מהקישורים שצירפת ועדיין לא מצאתי איך בודקים אם הinput מכיל אותיות עבריות ורווחים וכו’-
היכן אני יכולה ללמוד על זה?
הי
לגבי אותיות עבריות אנחנו צריכים לחפש ב input תווים בטווח תווים מסוים. תווי יוניקוד בעברית הם בין:
\u0590
ל
\u05FF
ולכן שימוש בתבנית הבאה בביטוי רגולארי יזהה אם קיימת בקלט אות בעברית:
/[\u0590-\u05FF]/
לדוגמה הפקודה הבאה ב JavaScript מחזירה True:
Boolean("ש".match(/[\u0590-\u05FF]/))
לגבי תווים אחרים זה יהיה דומה רק נחליף את התבנית, לדוגמה הקוד הבא מחזיר True כיוון שהטקסט מכיל רווח או פסיק:
> Boolean("hello world".match(/[ ,]/))
< true
> Boolean("hello,world".match(/[ ,]/))
< true
מה קורה ינון לגבי שאלה 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);
}
הי,
בטח אז שים לב ששמת את ה 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
הלכתי לאיבוד מהתרגיל הראשון בבונוס 1…
יצרתי 3 עיגולים מתחת לתמונות אבל אני לא מצליחה לחשוב איך למלא כל פעם עיגול אחר
אשמח לכיוון
הי,
בשביל למלא עיגול אפשר לשנות ב CSS את ה background-color שלו.
עכשיו נשאר רק לחשוב איזה עיגול למלא - ופה צריך לחבר את זה לתמונה שעכשיו מציגים, כלומר בקוד שמחליף את התמונה חפשי את העיגול שמתאים לתמונה שאת מראה בגדול, ועדכני את ה background-color שלו (או החליפי לו class לאחד עם background-color)
היי משום מה ההזזה של הריבועים לא פועלת לי אשמח להסבר
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 });
}
הי בר קצת קשה לראות לפי הקטע הזה מה בדיוק לא עובד, יכולה לשלוח את הקוד המלא אליי למייל? ynon שטרודל tocode.co.il