Hải Nam

Lập trình Tip of the Day như thế nào?

Chúng ta sẽ thử thực hiện nhé!

Làm "Tip of the Day" như thế nào? Khi khởi động chương trình, một alert window hiện ra tip thì không ổn: chỉ dùng text-only, phiền phức cho cú nhấn OK. Ta phải chèn vào tập tin html thôi.

Ngôn ngữ cần dùng là Javascript. Đúng, nó hoàn toàn đáp ứng vấn đề của ta.

Bây giờ là thuật toán: làm Tip of the Day là hiện ra tip một các ngẫu nhiên trong một tập hợp tip có sẵn. Hiển nhiên, ta nghĩ đến đánh số các tip, sau đó hiện ra một tip có số thứ tự nào đó.

Ta sẽ cho hiện ra tip tại một vị trí xác định nào đó. Dùng frame hay không tùy bạn, nhưng rõ ràng là nội dung tip sẽ được gán vào phần innerHtml của một đoạn nào đó. Như lẽ tự nhiên, ta nghĩ là: tên_đoạn_chèn_tip.inner = tip(k). Có lẽ ổn rồi, bây giờ ta tạo mảng chứa tip, việc đơn giản là gõ vào, hoặc nhờ chương trình tự trình bày từ tập tin dữ liệu có sẵn. Tôi thường dùng chương trình (ngôn ngữ Pascal) cho các công việc nhỏ này: chỉ mất 5 phút để viết, 5 phút để thử => 10 phút. Nhưng để tạo mảng chứ 100 tip dạng tip(k) = "Nội dung tip k" thì chỉ cần 5 phút. Không sao! Ta còn dùng lại chương trình này.

Khoan đã, dùng mỗi chuỗi cho một tip cũng không tiện lắm: có thể tip là một đoạn, hay là một câu dài, hay là có nhiều thẻ... nói tóm lại là có lí do để chiếm năm ba dòng. Dùng một chuỗi mà xuống dòng thì phiền quá. Một cách khác hay hơn được Microsoft Internet Explorer sử dụng trong Tip of the Day của họ như sau:

Ghi thẳng toàn bộ tip vào, nhưng chỉ cho hiện ra một tip nào đó thôi. OK! Vấn đề sáng tỏ rồi. Ta bắt đầu:

HTML

<div ID="Tip0" style="display:none">
To make the text on Web pages larger or smaller, click the <b>View</b> menu, and then click <b>Text Size</b>. Press F5 to refresh the screen.</div>
<div ID="Tip1" style="display:none">
To quickly save a Web page to your Favorites list, press CTRL+D.</div>
<div ID="Tip2" style="display:none">
You can send a Web page in e-mail by clicking the <b>File</b> menu, pointing to <b>Send</b>, and then clicking <b>Page By Email</b>.</div>

Thủ tục goNext() sẽ hiện ra một tip kế tiếp:

Mã lệnh (JS)

function goNext()
{
eval("document.all.Tip"+i+".style.display='none'");
i=(((i%nTips)+1)%nTips);
// bạn cũng có thể làm cách khác
eval("document.all.Tip"+i+".style.display=''");
}

Ta cũng cần lưu ý:

Thủ tục eval(chuỗi) sẽ chuyển chuỗi thành lệnh rồi thực hiện
Ta dùng property display chứ không dùng visibility vì khi display=none thì tip không hiện ra và cũng không chiếm mất chỗ.
Phần cài đặt cho mỗi tip dài hơn kiểu gán mảng, nhưng bạn cũng chỉ mất 10 phút để hoàn thành một chương trình tự động làm việc này.

Cách này còn có thể áp dụng trong các công việc khác. Một thí dụ: nó được áp dụng trong trang Thơ của mục Văn học tại web site VNstars này.