یک پروژه

ساعت

سلام

تغییرات:
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: آی‌دی، همان نام شی است.
innerText: با این دستور، متن یک تگ در قسمت بدنه - مانند محتویات تگ پاراگراف - نمایش داده می‌شود؛ و می‌توانیم  آنرا تغییر داده و ویرایش کنیم.
outerHTML - innerHTML - outerText: این 3 متد، شبیه دستور قبلی است؛ البته با کمی تفاوت.
setTimeout: دستور تایمر و زمان شمار است. بعد از آن، یک جفت پرانتز، قرار دارد که داخلش، دو پارامتر نوشته می‌شود:
1. اسم چیزی است که قرار است اجرا شود؛ مانند یک تابع.
2. زمانی که تایمر در آن فعال خواهد شد. واحد زمان، میلی ثانیه است. (1000 = یک ثانیه)
setInterval: دستور تایمر و زمان شمار است. مانند دستور قبل، عمل می‌کند.

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