JavaScript cho người mới bắt đầu !

Javascript là gì ?
Mô tả các đoạn script, giúp bạn hiểu được cách hoạt động của chúng và sau đó có thể cắt dán, sử dụng chúng cho các trang Web. Qua các ví dụ, bạn cũng có thể sửa đổi hoặc sáng tạo thành các script riêng của mình.Ở đây sẽ trình bày một số đặc điểm quan trọng của JavaScript, giới thiệu với các bạn cách thức các Web site chuyên nghiệp đã áp dụng và hướng dẫn bạn bổ sung các đặc điểm này vào trang Web. 

Nhúng (embledding) và bao gộp (including) Chúng ta hãy xem ví dụ đầu tiên:

Hi, man!

Thông thường mã lệnh JavaScript bắt đầu bằng thẻ . Đoạn mã JavaScript sẽ được đặt giữa hai thẻ và . Tuy nhiên, chúng ta vẫn có thể nhúng mã JavaScript bên trong thẻ . Ví dụ:

Bạn có thể thắc mắc tại sao chúng ta phải đặt mã JavaScript bên trong cặp thẻ ghi chú . Câu trả lời là vì tính tương thích. Các trình duyệt cũ không hỗ trợ mã JavaScript. Do đó khi đặt mã JavaScript trong thẻ ghi chú, chúng ta có thể bảo đảm trang vẫn hiển thị được trong những trình duyệt cũ.

Thuộc tính LANGUAGE cũng là thứ mà chúng ta cần quan tâm. Mặc dù tham số này là tùy chọn, nhưng bạn vẫn nên dùng để xác định rõ phiên bản JavaScript được sử dụng. Ví dụ: .

- Hàm write() và writeln()
Nếu bạn đã từng lập trình Pascal, chắc hẳn bạn đã biết rõ tác dụng của hai hàm này:
write() dùng để xuất nội dung ra thiết bị xuất chuẩn (ví dụ như màn hình), hàm writeln() cũng có tác dụng tương tự ngoại trừ sau khi xuất xong thì con trỏ sẽ tự động chuyển xuống đầu dòng tiếp theo. Ví dụ:

- Đối tượng Document
Đối tượng Document là một trong những đối tượng rất quan trọng của JavaScript. Sau đây là một ví dụ hết sức đơn giản: document.write(“Hi there.”)
Trong đoạn mã trên, document là một đối tượng, write là một phương thức của đối tượng này. Chúng ta sẽ tìm hiểu thêm vài thuộc tính khác của đối tượng document.

- Thuộc tính lastModified
Bạn có thể dùng phương thức này để hiển thị ngày cuối cùng tài liệu của bạn được cập nhật trong trang web bằng đoạn mã sau:

- Thuộc tính bgColor và fgColor
Thuộc tính bgColor và fgColor dùng để xác định màu nền và màu chữ của tài liệu. Ví dụ:

- Các hộp thông báo (message box)
Hộp alert (cảnh báo)
Dùng để đưa ra lời cảnh báo cho người dùng đang xem trang web:

Hộp confirm (xác nhận)
Một ví dụ dùng hộp confirm:

window.confirm(“Are you sure you want to quit?”)

Hộp prompt (nhắc nhở)
Hộp prompt cho phép người dùng nhập vào thông tin như được yêu cầu. Ví dụ:
window.prompt(“please enter user name”)
Sử dụng biến và điều kiện Hãy xem xét ví dụ sau:

Có nhiều khái niệm chúng ta cần phải hiểu rõ trong đoạn mã trên. Trước tiên, var x= là một khai báo biến. Nếu bạn muốn tạo một biến, bạn phải khai báo biến đó dùng phát biểu var. Trong ví dụ trên, x sẽ nhận trị là true (đúng) hay false (sai). Sau đó chúng ta
dùng phát biểu điều kiện if else để có thể lựa chọn một trong hai khả năng dựa trên kết quả của biến x. Nếu là true (nghĩa là người dùng click Ok) thì sẽ hiển thị hộp alert có nội dung là “Thank you”. Ngược lại, nếu kết quả là false (người dùng click Cancel) hộp alert “Good choice sẽ được hiển thị. Một ví dụ phức tạp hơn:

Welcome to my website!.

Hàm
Hàm là một nhóm mã lệnh.Trước tiên hãy thử tạo một hàmđơn giản:

function test()
{
document.write(“Hello can you see me?”)
}

Tuy nhiên nếu chỉ đặt đoạn mã trên vào giữa hai thẻ thì bạn sẽ... không thấy gì trên màn hình cả bởi vì hàm bạn viết chưa được gọi. Bạn thêm lời gọi hàm test() vào đoạn mã trên, như sau:

function test()
{
document.write(“Hello can you see me?”)
}
test()

Event handler (trình quản lý sự kiện)
Event handler có thể như là một hàm được kích hoạt mỗi khi có một sự kiện nào đó xảy ra. Chẳng hạn như khi bạn click chuột hay di chuyển chuột đến một liên kết nào đó trên trang web. Sau đây là một số sự kiện đáng chú ý: onclick
Sự kiện onclick xảy ra khi người dùng click vào các nút nhấn hay các liên kết trên trang web. Bạn có thể gán một hàm để xử lý khi
sự kiện này xảy ra như trong ví dụ sau:

- Onload
Sự kiện onload xảy ra sau khi đối tượng tương ứng với sự kiện đó đã được nạp xong. Ví dụ:

- OnMouseover, onMouseout
Những sự kiện này thường xảy ra khi bạn di chuyển chuột vào hay ra khỏi một liên kết hay một đối tượng nào đó. Ví dụ:

onMouseOver=”document.write(‘Hi, nice to see you!”>Over Here!

Get Out Here!

- Onunload
Sự kiện onunload xảy ra khi người dùng thoát khỏi trang web.
Ví dụ:

- Quản lý nhiều tác vụ
Làm thế nào để thiết kế một event handler có thể gọi nhiều hàm hay phát biểu? Rất đơn giản, bạn cứ nhúng các hàm/phát biểu vào even handler như bình thường nhưng ngăn cách chúng bởi chấm phẩy: ;

- Form
Giả sử bạn có một form như sau:

value=”” name=”bb”>

Chú ý rằng chúng ta đã đặt tên cho form và các thành phần của nó. Như vậy chúng ta có thể truy xuất đến chúng bằng mã JavaScript.
-Onblur
Nếu bạn muốn lấy thông tin từ người dùng và muốn kiểm tra từng phần tử (vd: tên người dùng, mật khẩu, địa chỉ e – mail). Sau đó cảnh báo khi người dùng nhập dữ liệu không đúng, bạn có thể tận dụng sự kiện onblur:

Email:


Comment:
rows=”2" cols=”20"><br>

Nếu bạn nhập vào một địa chỉ e – mail không có ký tự @, bạn sẽ nhận được một thông báo yêu cầu nhập lại. x.indexOf(@)==-1 có nghĩa là gì? Đây là một phương thức dùng để duyệt từng ký tự trong một chuỗi và tìm kiếm ký tự chúng ta cần. Nếu tìm thấy
nó sẽ trả về chỉ số của ký tự đó trong chuỗi, ngược lại nó sẽ trả về trị -1. Do đó x.indexOf(@)==- 1 nghĩa là nếu chuỗi không chứa ký tự @ thì sẽ thực thi dòng lệnh
tiếp theo:
alert(“It seems you entered an invalid email address.”)
document.feedback.email.focus()
Vậy focus() là gì? Đó là một phương thức của đối tượng text box. Nó được dùng để buộc dấu nháy (dấu xác định vị trí khi bạn nhập văn bản) đến một text box xác định.
- Onsubmit

Không giống như onblur, sự kiện onsubmit chỉ có tác dụng bên trong thẻ form. Như trong ví dụ sau:

onsubmit=”return validate()”>
name=”userName”>
name=”password”>
name=”submit” value=”Submit”>

Trong đó, if(document.login.userName.value==””) có nghĩa là nếu hộp userName không chứa gì cả thì sẽ trả về false. Việc này sẽ khiến form không được đăng ký (submit). return validate() nghĩa là nếu form được đăng ký thì hàm validate() sẽ được gọi. Bảo vệ tập tin bằng cách dùng Login
Chúng ta hãy xem xét ví dụ sau:

UserID:


Password:



p>

Trong đó || có nghĩa là “hoặc” (or) và != nghĩa là “không bằng”. Như vậy chúng ta có thể giải thích đoạn mã trên như sau: “nếu id không phải là ‘Sam’, hoặc
password không phải là ‘Sam123’ thì sẽ hiển thị thông báo ‘Invalid Login’ và ngừng việc đăng ký trở về trang main.htm”

>- Đối tượng Date (ngày tháng)
Đoạn mã sau sẽ hiển thị ngày giờ hệ thống trên trang web:

Để kích hoạt một đối tượng Date, bạn có thể làm tương tự như sau: var x=new Date().
Một ví dụ khác dùng để hiển thị các trang khác nhau vào những thời điểm khác nhau:

var banTime= new Date()
var ss=banTime.getHours()
if (ss<=12)
document.write(“”)
else
document.write(“”)

- Làm việc với đối tượng Window
Mở một cửa sổ
Để mở một cửa sổ bạn dùng phương thức window.open()

onclick=”window.open(‘test.htm’)”>

Bạn có thể thay test.htm bằng địa chỉ của bất kỳ một trang web nào khác, chẳng hạn như www.yahoo.com
Các thuộc tính khác như: Size (kích thước), toolbar (thanh công cụ), scrollbar (thanh cuộn), location (vị trí), status (trạng thái) Cú pháp để thêm vào một thuộc tính là:
open (“địa chỉ URL”, “tên đặt cho cửa sổ”, “các thuộc tính”)
Ví dụ:

onclick=”window.open(‘page2.htm’,’ win1',’width=200,height=200,menubar’)”>

reload (nạp lại)

Để nạp lại một cửa sổ bạn dùng phương thức
window.location.reload()

Đóng cửa sổ
Bạn có thể dùng đoạn mã sau:

Close Window

Nạp một cửa sổ
Cú pháp để nạp nội dung mới vào một cửa sổ là:
window.location = “tên trang web”. Chúng ta sẽ xem xét ví dụ sau, trong đó một hộp thoại xác nhận sẽ cho phép người dùng lựa chọn để đi đến một trong hai trang web:

Điều khiển cửa sổ từ nơi khác Giả sử bạn đã mở một cửa sổ mới từ cửa sổ hiện hành. Sau đó, bạn có thể sẽ tự hỏi làm thế nào để có thể điều khiển cửa sổ này từ cửa sổ kia. Hãy xem ví dụ sau:

value=”Open another page”
onClick=”aa=window.open(‘test.htm’,’’,width=200,height=200')”>

do
xanh


vang

Thuộc tính opener
Dùng thuộc tính opener, bạn có thể truy xuất đến cửa sổ chính từ một cửa sổ vừa mới mở. Trước tiên, chúng ta sẽ tạo trang Main.htm như sau:

onClick=”aa=window.open (‘test.htm’,’’,’width=100,height=200')”>

Sau đó tạo thêm một trang khác để điều khiển trang Main, ví dụ test.htm












File 1



File 2