ساعت

سلام

تغييرات:
1- پاسخ به سوالات جديد در جلسه 12.
2- در جدول شماره 4، جلسه 9 تغييراتي داده شد.

حالا كه با توابع آشنا شده‌ايد، برنامه ساخت يك ساعت را با هم تمرين مي‌كنيم. اين پروژه را در چند فاز، انجام مي‌دهيم كه هر فاز، به تنهايي قابل اجراست.
 

مواد مورد نياز:
. دستورات جاوا را در بخش سر (Head) صفحه خود بنويسيد.
. در قسمت بدنه، يك پاراگراف، درست كرده و نام آنرا Font بگذاريد.

<p ID="Font"></p>

• فاز اول. به دست آوردن زمان كلي: متغيري به نام Time مي‌سازيم كه زمان را به دست مي‌آورد.

// 1.
var Time = new Date ();
document.write ("زمان: " + Time);// با اين دستور، زمان به دست آمده، نوشته مي‌شود

• فاز دوم. به دست آوردن اجزاء زمان (ساعت، دقيقه و ثانيه): سه متغير مي‌سازيم براي به دست آوردن سه قسمت از زمان.

// 2.
var H = Time.getHours();// ساعت
var M = Time.getMinutes();// دقيقه
var S = Time.getSeconds();// ثانيه
var Clock = H + ":" + M + ":" + S;// متغيري مي‌سازيم كه اين سه عنصر را يك جا ذخيره كند
document.write ("<br>ساعت: " + Clock);// با اين دستور، زمان به دست آمده، نوشته مي‌شود

• فاز سوم. قرار دادن دستورات در يك تابع: تابعي ساخته به نام funTime تا كنترل بيشتري بر كدهاي خود داشته باشيم. تمام كدهايي كه نوشته‌ايم داخل اين تابع قرار مي‌دهيم.

// 3.
function funTime()
{
var Time = new Date ();
var H = Time.getHours();
var M = Time.getMinutes();
var S = Time.getSeconds();
var Clock = H + ":" + M + ":" + S;
Font.innerText = "ساعت: " + Clock;// اين، همان پاراگرافي است كه قبلا در بدنه نوشته‌ايم
}

در تگ بدنه، اين كد را نوشته و با آن، تابعي را كه ساختيد، صدا كنيد.

onLoad="funTime()"

• فاز چهارم. ساخت تايمر: تا اينجا، پروژه ما كامل شده و ساعت را نشان مي‌دهد؛ اما فقط زماني را نشان مي‌دهد كه براي اولين بار، پنجره را باز كرده‌ايم. به نظر شما چه بايد كرد كه لحظه به لحظه، زمان را به ما نمايش دهد؟ يك راه، اين است كه مدام، صفحه را بازخواني و رفرش كنيم. اين كار چندان راحت و معقول نيست. بهترست فقط تابع خود را بازخواني كنيم. براي اين كار از setTimeout استفاده مي‌كنيم كه يك تايمر است.

// 4.
function funTime()
{
var Time = new Date ();
var H = Time.getHours();
var M = Time.getMinutes();
var S = Time.getSeconds();
var Clock = H + ":" + M + ":" + S;
Font.innerText = "ساعت: " + Clock;
setTimeout ("funTime()", 1000);// با اين تايمر، تابع ما، در هر يك ثانيه، دوباره خواني مي‌شود
}

• براي ديدن نمونه عملي آن، اينجا كليك كنيد.

واژه نامه:

ID: آي‌دي، همان نام (Name) شي است؛ البته گاهي در عمل تفاوتهايي با هم دارند.
innerText: با اين دستور، متن يك تگ در قسمت بدنه - مانند محتويات تگ پاراگراف - نمايش داده مي‌شود؛ و مي‌توانيم  آنرا تغيير داده و ويرايش كنيم.
outerHTML - innerHTML - outerText: اين 3 متد، شبيه دستور قبلي است؛ البته با كمي تفاوت.
setTimeout: دستور تايمر و زمان شمار است. بعد از آن، يك جفت پرانتز، قرار دارد كه داخلش، دو پارامتر نوشته مي‌شود:
1. اسم چيزي است كه قرار است اجرا شود؛ مانند يك تابع.
2. زماني كه تايمر در آن فعال خواهد شد. واحد زمان، ميلي ثانيه است. (1000 = يك ثانيه)
setInterval: دستور تايمر و زمان شمار است. مانند دستور قبل، عمل مي‌كند.

به اميد ديدار
خدانگهدار