שיעור 3
דף 5: שעון JavaScript.
הזמן כעת הוא:
לחץ על כפתור התחל שעון (start clock) להדליק את השעון. שעון זה קורא את הזמן מהמחשב שלך ומעדכן את תיבת הטקסט כל חצי שניה. אני מראה לך דוגמא זאת משתי סיבות. הראשונה, זוהי דוגמא נוספת ליצירת מתזמן ע"י פונקציה הקוראת לעצמה. והשנייה, דוגמא זו מראה לך קצת יותר על Date object, אותו הזכרתי קודם כאשר דיברנו על Cookies.
הנה הקוד:
function writeTime() {
// get a date object
var today = new Date();
// ask the object for some information
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
// fixTime makes the minutes and seconds look right
// it just sticks a zero in front of numbers less than 10
minutes = fixTime(minutes);
seconds = fixTime(seconds);
// put together the time string and write it out
var the_time = hours + ":" + minutes + ":" + seconds;
window.document.the_form.the_text.value = the_time;
// run this function again in half a second
the_timeout= setTimeout('writeTime();',500);
}
function fixTime(the_time) {
if (the_time < 10)
{
the_time = "0" + the_time;
}
return the_time;
}
זה אולי נראה קצת ארוך, בגלל ההערות הרבות. הבא נעבור על הקוד שורה אחר שורה:
var today = new Date();
כמו ש- ()new Array יוצרת אובייקט מערך נתונים בשבילך למלא, ()new Date יוצרת אובייקט חדש מסוג תאריך. לאחר שיש לך את האובייקט, אתה יכול להפעיל עליו שאלות על עצמו. כאשר אתה יוצר אובייקט תאריך עם שום דבר בין הסוגריים, כמו שאנו עשינו, JavaScript מסתכלת על השעון של המחשב ומשתמשת בו ליצור אובייקט תאריך חדש. כעת, כשיש לנו אובייקט תאריך, הנקרא "today", אנו יכולים להשיג ממנו מידע על עצמו.
var hours = today.getHours();
פקודה זו מראה כיצד משיגים את השעה הנוכחית. זהו זמן צבאי, לכן אם עכשיו 2 p.m. כאשר תפעיל את ()getHours,האובייקט הנקרא "today" יחזיר "14". הבן כי ()getHours היא מתודת call אשר היא חלק אינטגרלי ממבנה אובייקט התאריך של JavaScript. כמו במקרה בו ישנם הרבה אובייקטי JavaScript, הדרך לדעת שאתה צריך להשתמש ב- getHours היא ע"י בדיקה בספר טוב של JavaScript אליו הופנית.
var minutes = today.getMinutes();
var seconds = today.getSeconds();
שורות אלה הן בדיוק כמו השורה הקודמת עם מתודת getHours.
בעיה אחת עם getMinutes היא שאם השעה היא 11:01, המתודה getMinutes תחזיר את השעה "1". זה בסדר אלא אם כן אתה רוצה ליצור שעון כמו שאנו רוצים, כשבמקרה כזה, אנו רוצים כי "1" ייכתב כ- "01". זה מה שפונקצית fixTime שכתבתי עושה. זוהי פונקציה די ברורה, ולכן אני לא מתכוון להסביר אותה. פשוט העף מבט קצר לראות מה היא עושה.
שתי השורות הבאות מחברות את המחרוזת ביחד וכותבות אותה ל-form element.
ראינו כבר סוג כזה של שטויות מיליון פעמים.
the_timeout = setTimeout('writeTime();', 500);
זוהי השורה אשר יוצרת את הלולאה. היא אומרת "בעוד כחצי שנייה, קרא לפונקציה שוב". כאשר הפונקציה נקראת שוב, היא מבצעת שוב את ()today = new Date, ושוב נקרא שעון המחשב. ההפוגה יכלה להיות כל שנייה, אבל לעשות זאת כל חצי שנייה עוזר לשמור שהזמן יהיה מדויק יותר.
טוב, מספיק עם טריק קוצב הזמן בלולאה. יש עוד דבר אחד שאתה צריך לדעת לגבי קוצבי זמן: איך להשתמש בהם עם משתנים.
חזור לתחילת הדף
לדף הבא «--
|
