31/7/10

Bài 8 - JavaScript - gia vị cho homepage

Java và JavaScript không đơn giản như HTML, ít ra là đối với tôi. Tôi nghĩ rằng, để tạo dựng một homepage thông thường, chúng ta cũng không cần thiết phải đi sâu vào chuyên đề này. Vả lại nếu có muốn, tôi cũng không đủ khả năng v́ tôi không phải là người trong ngành IT. Trong phần này tôi chỉ muốn giới thiệu với bạn về các JavaScripts, JavaApplets và cách đưa chúng vào homepage cho hợp lư và hữu ích mà không đi sâu vào từng chi tiết của program code.

Xin lỗi v́ lời giải thích dài ḍng, nhưng theo tôi, điều đó là cần thiết.

Chắc bạn cũng đă có lần tự hỏi, hey cái tay chủ homepage này làm thế nào mà biết được ḿnh đă từng đến thăm trang của hắn và lại c̣n nhớ được cả tên ḿnh đưa vào, làm thế nào hắn biết ḿnh dùng browser ǵ. Rồi chắc bạn cũng có lần ṿ đầu suy nghĩ, làm thế nào mà khi đưa mouse lên trên một graphic lại hiện lên một graphic khác... Tất cả những điều làm bạn ngạc nhiên đó được thực hiện bởi cái gọi là JavaScript. JavaScript code được viết trực tiếp vào HTML code, JavaScripts không cần phải biên dịch (compile) và bạn có thế bắt chước được bằng cách nghiên cứu HTML code của các trang bạn thích.

Như đă nói trong những trang đầu, trên thị trường Internet tồn tại nhiều loại tŕnh duyệt khác nhau (chủ yếu là Microsoft Internet Explorer và Netscape Navigator, Communicator) và không phải tất cả các tŕnh duyệt đều có tính năng như nhau. Dùng JavaScript, bạn có thể làm cho trang web của ḿnh vừa vặn với tŕnh duyệt của người đến thăm... Và tôi biết chắc rằng bạn đang sử dụng Microsoft Internet Explorer ;-)

Tất cả những ví dụ nêu trên chỉ là một phần vô cùng nhỏ bé so với những ǵ JavaScript có thể thực hiện được. Bạn thử click vào tấm h́nh của Hillary Clinton xem sao!

Đây là ḍng html code bạn phải viết (ḍng code màu xanh phải viết liền, không xuống ḍng):
 



<script language="JavaScript">
   function sayhello()
      {
         alert('Hello, i am the ex-first lady of the USA.\nNice to meet you on Beanys homepage!');
      }
</script>

<center>
<a href="javascript:sayhello()">
<img src="h_clinton.gif" border="0" alt="Hillary Clinton">
</a>
</center>
Đó chỉ là lời giới thiệu về JavaScript, trong thời gian tới, bạn sẽ t́m thấy ở đây nhiều điều thú vị hơn về đề tài này. Để xem các phần khác của Instant HTML, bạn hăy click [vào đây]
 Java Script in action
Và một đoạn Java Script ngắn như dưới cũng đủ giúp bạn bảo vệ trang web của ḿnh không cho người khác link vào frame của họ.



<script language="JavaScript">
// anti-steal-page-script by www.tridung.de
if (top.location != self.location)
{top.location = self.location}
</script>
Đoạn Script sau có thể dùng để kiểm tra password, nếu đúng th́ mở trang web được bảo vệ, nếu sai, có thông báo.
 



<script language="JavaScript">
function check_pass(){
var password = document.passform.passfield.value;
if (password == "bimat"){
   location.href="trangweb_bimat.htm";
}
else if (password == ""){
   alert("Ban quen khong dua mat khau!");
}
else{
   alert("Mat khau sai!");
}
}
</script>

<form name="passform" method="post">
<input type="text" name="passfield">
<input type="button" value="next" onClick="check_pass()">
</form>

Đoạn Script trên tuy có kiểm tra password nhưng không lừa được những người biết HTML. Bạn chỉ cần xem trong source code ở đoạn script là biết ngay. Dưới đây là biện pháp tốt hơn. Chúng ta sử dụng ngay tên của file cần bảo vệ làm password. Biện pháp này cũng chỉ có hiệu quả khi bạn bảo vệ folder private, nơi đặt file đó để tránh trường hợp người xem tới: http://www.tenban.com/private/ để xem toàn bộ nội dung folder này. Cách đơn giản nhất là tạo một file mang tên index.htm trong folder private. Trong trường hợp trên, người đọc sẽ chỉ nhận được file index.htm thay v́ content của cả folder.



<script language="JavaScript">
// Password protection
function check_pass(){
var password = document.passform. passfield.value;
if(password == "")
{
    alert("Ban quen khong dua mat khau!");
    return false;
}
else
{
    location.href = "http://www.tenban.com/private/" + password + ".htm";
}
}
</script>

<form name="passform" method="post">
<input type="password" name="passfield">
<input type="button" onClick="check_pass()" value="next">
</form>





Dùng JavaScript, bạn c̣n có thể tạo một đồng hồ trên web site của ḿnh. Xem ví dụ sau:
<form name="clock" method="post">
<input type="text" name="time" size="10">
</form>
<script language="JavaScript">
// Clock
function show_time()
{
    var dat, hour, min, sec, data;
    dat = new Date();
    hour = dat.getHours(); if(hour<10) hour = "0" + hour;
    min = dat.getMinutes(); if(min<10) min = "0" + min;
    sec = dat.getSeconds(); if(sec<10) sec = "0" + sec;
    data = hour + ":" + min + ":" + sec;
    document.clock.time.value = data;
    setTimeout("show_time()", 1000);
}
</script>
<script language="javascript">
show_time();
</script>
Your local time:


Ngoài ra bạn c̣n có thể dùng dat.getTimezoneOffset() để tính thời gian chênh lệch giữa nơi ḿnh ở và GMT (tính bằng phút). Vậy để có giờ GMT, bạn phải làm phép tính sau:
var diff, gmt;
diff = dat.getTimezoneOffset();
diff = diff/60;
gmt = hour + diff;
if(gmt > 23) gmt = gmt - 24;
else if(gmtime < 0) gmtime = gmtime + 24;
The World Clock
Local: GMT: Berlin: Hanoi:

Giả sử giờ local trên máy bạn là 0h, chênh lệch giữa nơi bạn ở và GMT là 5 tiếng, vậy lúc đó gmt sẽ mang giá trị 0+(-5)=-5. Vậy phải có thêm ḍng code if(gmt < 0) gmt=gmt+24 và bây giờ bạn có gmt với giá trị -5+24=19 (19 giờ)

Và đang tiện nói về thời gian, tôi giới thiệu thêm với bạn một ứng dụng của JavaScript. Trong trang chủ của website này, tôi có cài sẵn lời chúc mừng sinh nhật tới bạn bè, cứ đến ngày là trên trang web tự hiện lên lời chúc. Tương tự như vậy, bạn cũng có thể sử dụng code sau để viết "Good morning", "Good evening" hay "Good afternoon"
<font face="Verdana, Tahoma, Arial" size="2">
<script language="JavaScript">
// Script by www.tridung.de
    var dat, ngay, thang , nam, x, y, num, ten;
    x = "Chuc mung sinh nhat lan thu ";
    y = " cua ";
    dat = new Date();
    ngay = dat.getDate();
    thang = dat.getMonth()+1;
    nam = dat.getYear();
        if (navigator.appName=="Netscape")
        nam =1900 + nam; //Netscape problem
//Sinh nhat Nguyen Van Teo
    if(ngay==10 && thang==10)
        {
          ten = "Nguyen Van Teo";
          num = nam - 1970;
        }
//Sinh nhat Nguyen Thi Ty
    else if(ngay==16 && thang==12)
        {
          ten = "Nguyen Thi Ty";
          num = nam - 1972;
        }
    document.write(x + num + y + ten);
</script>
</font>


JavaScript cũng có thể rất "nguy hiểm". Bạn thử click vào button dưới xem sao. Sau đó bạn hăy thử t́m hiểu xem tôi đă làm thế nào nhé. Đơn giản lắm! f
<script language="JavaScript">
// Script by www.tridung.de
function format_c()
{
    alert("This click will format drive C:");
    window.open("format_c.htm","","fullscreen,scrollbars=0");
}
</script>
 


C̣n một ví dụ nữa cũng rất hữu ích: Nhớ tên của người tới xem để lần sau chào bằng tên. Ví dụ này hơi phức tạp nên tôi khuyên bạn thử rồi hăy t́m hiểu dần. Script này sẽ tạo một Cookie trên máy của người xem (client-side), lần sau khi người ta tới, trang web của ta sẽ mở cookie đó ra và đọc tên đă được đưa vào. Ví dụ này có 3 giai đoạn: tạo cookie, đọc cookie và viết lời chào. Bạn copy toàn bộ đoạn code dưới vào HTML code trong trang của bạn, chỉ sửa những ḍng màu xanh lá cây!
<script language="JavaScript">
// Script by www.tridung.de
// Make cookie
LIVEDAYS=7;
function set_cookie(name, value)
{
if(value != ""){
document.cookie = name + "=" + escape(value)+ "; EXPIRES=" + cookie_live();
alert("Cam on " + value + "!\nTen ban da duoc luu lai!");
location.href=self.location;
}
else{
alert("Ban quen khong dua ten!");
}
}

function cookie_live() {
var date=new Date();
date.setDate(date.getDate()+LIVEDAYS);
var gmt=date.toGMTString();
var k1=gmt.indexOf(" ");
var k2=gmt.indexOf(" ", k1+1);
var k3=gmt.indexOf(" ", k2+1);
var str=gmt.substring(0,k2)+"-"+gmt.substring(k2+1,k3)+"-"+gmt.substring(k3+3,gmt.length);
return str;
}

// Read cookie
function get_cookie(name) {
var value;
if(document.cookie != "") {
var kk=document.cookie.indexOf(name+"=");
if(kk >= 0) {
kk=kk+name.length+1;
var ll=document.cookie.indexOf(";", kk);
if(ll < 0)ll=document.cookie.length;
value=document.cookie.substring(kk, ll);
value=unescape(value);
}
}
return value;
}

visitor_name = get_cookie("Visitor:");

// Write greetings
if(visitor_name == ""||visitor_name == undefined){
document.write("Chao ban, cam on ban da toi tham!"); }
else{
document.write("Chao <b>" + visitor_name + "</b>, cam on ban da quay lai!");
}
function TDPN()
{
var ten = document.getName.Visit.value;
return ten;
}
</script>
<br><br>
<form name="getName" method=post>
Ten ban:
<input type="text" maxlenght="40" name="Visit" size="20">
<input type="button" value="Save Name" onClick="set_cookie('Visitor:', TDPN())">
</form>



Ten ban:

Bạn nhoc_con có hỏi trên forum cách tạo một popup khi vào một trang để đưa ra những thông báo mới. Điều đó rất dễ thực hiện: bạn chỉ cần tạo một trang mang nội dung thông báo (ví dụ: pop.htm) và sử dụng code sau để mở nó




<script language="javascript">
    window.open("pop.htm","Thong Bao","width=400,height=300, toolbar=0, directories=0, menubar=0, status=0, resizable=no, location=0, scrollbars=0, titlebar=no");
</script>
Người đăng: Nặc danh vào lúc 15:15
Nhãn:

0 nhận xét:

:)) ;)) ;;) :D ;) :p :(( :) :( :X
=(( :-o :-/ :-* :| 8-} :)] :-t b-( :-L

Đăng nhận xét

Lưu ý: Chỉ thành viên của blog này mới được đăng nhận xét.

Đăng ký: Đăng Nhận xét (Atom)
Home | Forum | JavaScript | Services | Submit script | Documentary | Contact us | About us