HTML – שפה
לתצוגת דפי אינטרנט מבוססת תגיות
מומלץ לעבוד על תוכנת visual code - (חינמי) תוכנה שמיודעת בעיקר לדפי אינטרנט -
בשיעור יצרנו CLASS בתוך win from אבל ניתן גם לכתוב בתוך קובץ טקסט רגיל ולשמור בסיומת HTML
השפה היא תצוגתית בלבד!! לצורך
ביצוע פעולות נשתמש בשפת Java script שמשולבת בתוך הדף
עיצוב התצוגה נקרא CSS
תגיות - העבודה ב HTML היא בתגיות
תגית פותחת <html> תגית סוגרת </html> (עם
/)
תגית ראשית היא HTML – תגית
שפותחת\סוגרת את הדף
בתוכה יש תגיות (חובה) head ו body
ב head כותבים את ההגדרות של הדף
– מה יעשה הדף מאחורי התצוגה
Body – את מה
שמוצג למשתמש
CSS - בתוך התגית פותחת נגדיר
את העיצוב של התג. באמצעות style = ואח"כ את כל
ההגדרות
בתגית ה head נגדיר עיצוב של כל הדף או בתוך תגית ספציפית נגדיר עיצוב מיוחד
לדוג'
background-color – צבע הרקע
color- צבע הטקסט
text-align- מיקום בדף \ מקטע
(אמצע\סוף\למעלה)
1H - בשביל
להוסיף כותרות במסמך HTML משתמשים בתגיות
<h1> עד<h6> כאשר h1 מציינת
את הכותרת הגדולה ביותר ו- h6 את הקטנה ביותר. בין התגית פותחת לסוגרת
נכתוב את המידע שיוצג למשתמש
display: inline – באופן
דיפולטי התגית תופסת את כל הדף ללא קשר לאורך הטקסט ואם נעשה כותרת שניה היא תרד
שורה במידה ורוצים שיתפוס רק את אורך הטקסט נגדיר style
Div – חלוקה –
הגדרת שטח בדף
כל הדף הוא יחידה אחת ומה שנכניס יכנס לפי הסדר באמצעות div מחלקים את הדף
style
הגדרת הגודל של המקטע
width: 800px - height :400px – גובה
ורוחב בפיקסלים
Margin – הגדרת
הצדדים של האלמנט
margin :auto – להגדיר את האלמנט באמצע המסך – פירוש שאוטומטית 2
הצדדים היו באותו הגודל
margin-top :150px – המרחק של האלמנט מהאלמנט שמעליו
button – תגית
ליצירת כפתור. את הכפתור ניתן לעצב - גודל \מיקום
Onclick- הגדרה (בתוך התגית
הפותחת) מה יקרה בלחיצה על הכפתור
id
<h1 id="number1"> – הגדרת
מזהה לאלמנט. כשיש לנו יותר מאלמנט אחד מאותו הסוג ואנחנו רוצים לפנות לאלמנט
נגדיר לו מזהה ייחודי
Java script
מתוך הקוד של הדף ניתן לבצע קריאות לפונקציות
דוג' לקריאה לפונקציה בעת לחיצה על כפתור
<button onclick="newGame()">NewGame</button>
Var - כל
המשתנים מוגדרים במשתנה מסוג אחד ללא אבחנה בסוג המידע שרוצים לקלוט – והתוכנה לבד
יודעת להגדיר את המשתנה לפי המידע שנקלט
document.getElementById("X") var number1 = – תעבור על כל המסמך (דף) ותביא
את האלמנט שהID שלו הוא X ותכניס
אותו לתוך המשתנה. כך בכל פעם שנקרא למשתנה נקבל את האובייקט ובאמצעות המשתנה נוכל
לבצע פעולות על המידע
Random
rnd1 = Math.floor(Math.random() * 10) + 1;
פונקציה למספר רנדומאלי נותן רק בין 0 ל1 (0.1\0.202)
1. נכפיל ב 10
2. +1 בשביל לקבל 10 המספר הגבוהה הוא 0.9 מה שאומר שנקבל 9 לכן נוסיף
1
3. Math.floor – לעגל את
המספר לשלם
Input – אלמנט
לקבלת מידע מהמשתמש – בדומה לtextbooks בwin from
חשוב לזכור !! כל מידע שמתקבל מהמשתמש הוא string
במידה ונרצה לעשות חישובים
על המידע נצטרך להמיר
InnerHTML – פקודה
להכנסת טקסט לתוך אלמנט
2 פונקציות שכתבנו בשיעור
יצרנו 3 אלמנטים שמציגים תרגיל כפל והמשתמש צריך לענות על התרגיל
1. הגדרת שלושה משתנים עבור שלושת האלמנטים ששמנו במסך
2. הכנסת מספר אקראי לתוך משתנים (שיצרנו מחוץ לפונקציה)
3. הכנסת הערכים שבמשתנים לתוך האלמנטים
function newGame()
{
myanswer.value= "";
var number1 =
document.getElementById("number1");
var number2 =
document.getElementById("number2");
var operator= document.getElementById("operator");
rnd1 = Math.floor(Math.random() * 10)+1;
rnd2 = Math.floor(Math.random() * 10)+1;
number1.innerHTML = rnd1;
operator.innerHTML = "x";
number2.innerHTML = rnd2;
}
1. הגדרת משתנים עבור האלמנטים
2. בדיקה אם התשובה של המשתמש שווה לתוצאה הרצויה
3. הצגת תשובה בהתאם
4. במידה והתשובה שגויה ננקה את השדה להזנה חדשה
function submit()
{
var result =
document.getElementById("result");
var myanswer =document.getElementById("myanswer");
if
(parseInt(myanswer.value) == rnd1 * rnd2) {
result.style.color = "green";
result.innerHTML = "right!!!";
}
else
{
{
result.style.color = "red";
result.innerHTML = "roong!!!";
myanswer.value= "";
}
}
אין תגובות:
הוסף רשומת תגובה