Java Script - những gì cơ bản nhất

1. Sơ lược về JavaScript

Tổng quan về JavaScript

Ngôn ngữ JavaScript

Phương thức và đối tượng

Các phép toán và hàm cơ bản

JavaScript cũng là ngôn ngữ lập trình để tạo ra các ứng dụng mà ta có thể nhúng vào các HTML. Ðây là ngôn ngữ ngày càng trở nên phổ biến trên các Website. JavaScript là ngôn ngữ kịch bản (script) không cần trình biên dịch vì vậy JavaScript là công cụ hữu dụng để phát triển các Website. Do đó với HTML chưa đủ để tạo ra các Website mang tích tương tác và có sự thu hút độc giả ví vậy bạn cần biết thêm về JavaScript để thăng tiến các Website của mình.

Dù JavaScript vàø Java có phần tương đồng về tên gọi, nhưng Java là một ngôn ngữ cấp cao mạnh hơn chúng được dùng để tạo ra các chương trình ứng dụng, nhưng phải có trình biên dịch. Còn JavaScript được dùng chủ yếu để thiết kế trang Web.

2. Sự phát triển của JavaScript

JavaScript được hãng Netscape phát minh với phiên bản đầu tiên là LiveScript. Và phiên bản của Microsoft là JScript. Vào tháng 12 năm 1996 công ty Netscape và Microsoft cùng hợp tác với 11 nước châu âu để phát triển chuẩn cho JavaScript. Do đoá Javascript hoạt động được trên hai trình duyệt Web là Netscape và Internet Exploere.

Ðể lập trình được JavaScript bạn cần nắp vững àkiết thức HTML. Nếu bạn đã biết các ngôn ngữ lập trình khác như Pascal, C, Visual Basic ... Thì JavaScript cũng sẽ trở nên đơn giản với bạn. Trong phần này chung tôi sẽ trình bày sơ lược các kiến thức cơ bản về JavaScript. Ðể vận hành tốt với JavaScript chúng ta sẽ khảo sát chúng thông qua các ví dụ. Các mã mệnh (code) của JavaScript mà chúng tôi trình bày chỉ tương thích cho các trình duyệt web Netscape 3.x trở lên và Internet Explorer 4.x trở lên. Do vậy để áp dụng tốt JavaScript thì máy tình của bạn phải có một trong hai trình duyệt web này.

Ðể bắt đầu với ngôn ngữ JavaScript chúng ta cùng nhau tìm hiểu về các cấu trúc lệnh trong JavaScript.

1. Các đối tượng trong JavaScript. Linh hồn của JavaScript là đối tượng. Tất cả các chức năng mà bạn truy xuất thông qua bề mặt JavaScript là các đối tượng.

- Navigator: Ðối tượng cho biết về trình duyệt mà người sử dụng đang dùng chúng bao gồm cả phiên bản sử dụng, trên nền tảng nào v.v...

- Window: Ðối tượng này truy cập đến cửa sổ của trình duyệt như là thanh Toolbar, thanh statusbar v.v..

- Document: Tất cả cái gì hiển thị lên trang web được truy xuất thông qua đối tượng Document.

- Form: Ðối tượng này sẽ tóm lược các nội dung của HTML.

- Button: Ðối tượng button, để truy cập đến các đối tượng button trong form của trang Web như submit button, reset button, radio button, checked button v.v..

- Text: Ðối tượng text, dùng để truy cập vào các đối tượng text trong Form.

Và còn nhiều đối tượng khác, ở đây chúng tôi chỉ cung cấp các ý niệm cơ bản, với những đối tượng này bạn có thể đưa chúng vào trang web và có thể truy xuất chúng từ JavaScript.

2. Thuộc tính của đối tượng: Với mỗi đối tượng khác nhau sẽ có những thuộc tính khác nhau, Thuộc tính là giá trị dữ liệu của đối tượng. Do vậy các thuộc tính của đối tượng trong JavaScript cũng sẽ các thuộc tính trong HTML.

vd: document.bgcolor ="blue"

3. Các phương thức trong JavaScript.

Cũng như các ngôn ngữ lập trình khác. JavaScript cũng hỗ trợ các chức năng để gọi đến phương các thức trong đối tượng.

vi dụ: document.write('<img scr="logo.jpg" width = 100, height = 100>')

4. Các sự kiện của đối tượng. Cũng như các ứng dụng khác, mỗi đối tượng sẽ có các sự kiện khác nhau. Các sự kiện trong JavaScript là:

- onMouseOver: Sự kiện này được gọi mỗi khi đưa trỏ chuột đến đối tượng tạo hyperlink.

- onMouseOut: Sự kiện này được gọi mỗi khi trỏ chuột ra đối tượng tạo hyperlink.

- onLoad: Sự kiện này được gọi sau khi trang web kết thúc việc tãi dữ liệu).

-onClick: Sự kiện này được gọi khi ta Click vào đối tượng button.

Ðể nắm vững về JavaScript chúng ta cùng nhau khảo sát về các đối tượng cơ bản của JavaScript.

1. Ðối tượng Button: Ðối tượng này được tạo khi ta tạo Form trong HTML.

Thuộc tính:

- name: Thiết lập tên cho đối tượng.

- value: Giá trị của đối tượng Button.

- type: Kiểu đối tượng button.

Sự kiện:

- onClick: Sự kiện này được kích hoạt khi ta Click chuột.

2. Ðối tượng Checkbox: Ðây là đối tượng tạo các lựa chọn trong form củ HTML.

Thuộc tính:

- checked: Thuộc tính này cho biết đối tượng có được check hay không.

- name: Thiết lập tên cho đối tượng.

- value: Giá trị trả về của đối tượng.

- type: Kiểu đối tượng button.

Sự kiện:

- onClick: Sự kiện này được kích hoạt khi ta

3. Ðối tượng Radiobutton:

Thuộc tính:

- checked: Thuộc tính này cho biết đối tượng có được check hay không.

- length: Thuộc tính này cho biết số đối tượng Radiobutton trong from.

- name: Thiết lập tên cho đối tượng.

- value: Giá trị trả về của đối tượng.

- type: Kiểu đối tượng button.

Sự kiện:

- onClick: Sự kiện này được kích hoạt khi ta.

4. Ðối tượg Textbox, Textarea:

Thuộc tính:

- defaultValue: Xác lập giá trị mặc định cho đối tượng Textbox.

- name: Thiết lập tên cho đối tượng.

- value: Giá trị trả về của đối tượng.

- type: Kiểu đối tượng button.

Phương thức:

- focus(): phương thức này đưa dấu nháy (dấu nhập liệu) vào đối tượng Textbox.

- blur(): Phương thức này ngược với phương thức focus().

- select():Phương thức này sẽ đánh dấu chuỗi văn bản trong Textbox.

Sự kiện:

- onBlur: Sự kiện này được gọi khi dấu nháy rời khõi đối tượng.

- onFocus: Sự kiện này được gọi khi dấu nháy đưa vào đối tượng.

- onChange: Sự kiện này được gọi khi ta thay đổi dữ liệu trong Textbox.

- onSelect: Sự kiện này được gọi khi ta đánh dấu chọn một vài hoặc tất cả các từ trong Textbox.

5. Ðối tượng Select (combobox):Ðối tượng này cũng được tạo ra trong Form của HTML.

Thuộc tính:

- name: Xác lập tên cho đối tượng.

- index: Thuộc tính này lấy vị trí thứ n của đối tượng.

- length: Trả về số mục trong đối tượng.

- selected: Thuộc tính cho biết mục nào được chọn.

- selectedindex: Trả về vị trí thứ n của mục đang chọn.

- text: Lấy chuỗi dang hiển thị trong đối tượng.

- type: Kiểu đối tượng.

- value: gán hoặc lấy giá trị trong đối tượng.

Sự kiện:

- onBlur: Sự kiện này được gọi khi dấu nháy rời khõi đối tượng.

- onFocus: Sự kiện này được gọi khi dấu nháy đưa vào đối tượng.

- onChange: Sự kiện này được gọi khi ta thay đổi giá trị trong đối tượng.

6. Ðối tượng Document: Ðây là đối tượng thông dụng khi ta muốn truy xuất đến bất kỳ phần tử nào trong Form hay trong HTML. Hoặc khi ta muốn hiển thị giá trị nào trong HTML ta có thể sử dụng đối tượng document này. Tóm lại, bất cứ cái gì thể hiện trong HTML ta có thể truy xuất đến chúng thông qua đối tượng Document.

Phương thức:

- clear(): Phương thức xoá tài liệu trong window.

- close(): Phương thức đóng lớp hiện hành đang mở.

- write(): Ðây là phương thức sẽ ghi chuỗi hoặc cấu trúc HTML trong tài liệu đặc biệt.

- writeln(): Giống như phương thức write() nhưng tạo ra dòng mới.

7. Ðối tượng Window: Ðây là mức đối tượng đầu của mỗi Window hay Frame và cũng là đối tượng cha của mỗi tài liệu tải trong trang web.

Thuộc tính:

- defaultStatus: giá trị hiển thị mặc định trong thanh trạng thái (status bar) của cửa sổ trang Web.

- frames: mảng chứa các frame được thiết lập trong trang HTML.

- length: cho biết số frames được thiết lập trong trang HTML.

- name: cho biết tên của window hay frame.

- status: dùng hiển thị các thông điệp trong thanh trang thái (status bar).

Phương thức:

- alert(message): hiển thị thông điệp (message) trong hộp thoại (dialog box).

- Close(): đóng cửa sổ.

- Confirm(message): hiển thị thông điệp trong hộp thoại với 2 nút OK và Cancel. Giá trị trả về là True hay False tùy thuộc người dùng click chọn OK hay Cancel.

- Open(url,name,option): Mở (load) trang HTML (URL) vào trong cửa sổ window với tên (name). Trong đó Option gồm:

+ Toolbar=[yes,no,1,0]: Cho biết tạo window có thanh Tollbar không?

+ Directories=[yes,no,1,0]: Cho biết tạo window có directorie không?

+ Status=[yes,no,1,0]: Cho biết tạo window có thanh trạng thái không?

+ menu=[yes,no,1,0]: Cho biết tạo window có thanh menu không?

+ scrollbars=[yes,no,1,0]: Cho biết tạo window có thanh cuộn không?

+ resizabled=[yes,no,1,0]: Cho biết tạo window có thể thay đổi kích thước không?

+ width=pixel: Ðịnh kích thuớc bề rộng của cửa sổ.

+ height=pixel: Ðịnh kích thuớc chiều cao của cửa sổ.

Sự kiện:

- onload: Sự kiện này được gọi khi mở trang web.

- onUnload: Sự kiện này được kích hoạt khi thoát trang web.

8. Ðối tượng Navigator: Ðối tượng cho biết về trình duyệt mà người sử dụng đang dùng chúng bao gồm cả phiên bản sử dụng, trên nền tảng nào v.v...

9. Ðối tượng history: Ðối tượng này kích hoạt đến các sự kiện trong history củ trình duyệt web.

Thuộc tính:

- length: Cho biết số mục có trong danh sách history.

Phương thức:

- back(): Phương thức này để quay lại tài liệu trước đó trong history.

- forward(): Phương thức này đến tài liệu kế trong history.

-go(location): Phương thức này sẽ đến tài liệu trong history. location có thể dùng với chuỗi hoặc số. Nếu là chuỗi thì ta phải 9iền đầy đủ các thành phần của URL. Nếu là số thì phương thức này sẽ lấy vị trí tài liệu cần đến trong history.

I. Các phép toán

1. Các phép toán số học (+, -, *, / , %, ++, --)

+ : Phép cộng.

- : Phép trừ.

* : Phép nhân

/ : Phép chia

% : Phép chia lấy phần dư.

++: Phép tăng một đơn vị.

--: Phép giảm một đơn vị.

2. Các phép gán: JavaScript dùng phép gán = để gán giá trị.

vd : var str = 'Hello word'

3. Phép so sánh:

== : So sánh bằng.

> : So sánh lớn hơn.

< : Nhỏ hơn.

>= : So sánh lớn hơn hoặc bằng.

<= : Nhỏ hơn hoặc bằng.

!= : So sánh khác

4. Phép toán Logic.

&& (and): Giá trị đúng khi cả hai cùng đúng.

|| (or) : Giá trị đúng nếu một trong 2 đều đúng.

5. Phép cộng chuỗi: Ðể ghép (cộng) hai chuỗi JavaScript sử dụng toán tử + để cộng hai chuỗi.

VD: Str = 'Hello' + ' ' + 'World'

kết qủa str = Hello World.

6. Khai báo chuỗi: Ðể khai báo một giá trị chuỗi, Javascript sử dụng cặp dấu nháy đơn (') để khai báo chuỗi.

vd : str = 'Hello world'

II. Các hàm thông dụng trong JavaScript.

- eval(expression) : Hàm này sẽ thực hiện phép toán nằm trong Expression.

Vd: c = eval(5 + 5).

- alert(message): Hàm xuất hiện hộp thoại thông điệp (message).

- parseInt(string): Hàm đổi chuỗi số thành số nguyên.

- parseFloat(string): Hàm đổi chuỗi số thành số thực.

- confirm(message): Hàm xuất hiện hộp thoại thông điệp (message) với 2 button OK và Cancel.

Cũng như các ngôn ngữ lập trình khác, JavaScript cung cấp các cấu trúc điều khiển sau:.

1. Cấu trúc của JavaScript. Ðể bắt đầu câu lệnh JavaScript trong HTML ta chỉ sử dụng cấu trúc sau:

<Script Language="Javascript">

<staterment>

</script>

Trong đó:

<Script Language="JavaScript">: Khai báo cho trình duyệt biết bắt đầu sử dụng JavaScript.

</Script>: Kết thúc câu lênh JavaScript.

2. Khai báo biến trong JavaScript. Việc khai báo biến trong JavaScript cũng tương tự như các ngôn ngữ lập trình khác với cú pháp:

var <tên biến>

Ngoài ra ta có thể khai báo biến trong khi thi hành lệnh.

vd : for (var i = 0; i< 10; i++)

3. Cấu trúc điểu kiện IF.

If (<dk>)

<staterment>

else

<staterment>

Lưu ý: Nếu trong câu điều kiện nếu có từ 2 dòng lệnh trở lên, ta phải đặt chúng trong cặp từ khoá { }

4. Cấu trúc lặp FOR.

Cú pháp:

For (val=start; val<end; val++)

<staterment>

Trong đó:

+ val: là biên đếm.

+ start: phần tử bắt đầu

+ end: phần tử kết thúc.

+ val++: tăng biến đếm lên 1 đơn vị

ví duï: xuất một dãy số từ 1 đến 10.

for (var i=1; i<10; i++)

document.write('<p > i </p>')

5. Cấu trúc lập While

Cú pháp:

While(<đk>)

{

<staterment>

}

ví dụ: Xuất ra dãy số từ 1 đến 10.

var i = 1

while (i<=10)

{

document.write('<p> i </p>')

i++

}

6. Hàm và cách gọi hàm. Ðể khai báo hàm trong JavaScript ta sử dụng từ khoá function. Từ khoá này phải nằm trong cặp từ khoá <script> với cú pháp sau:

- Khai báo hàm:

function <tên hàm>([<P1, P2, ..., Pn>])

{ <staterment>

[return <kết quả>]

}

Trong đó:

+ <tên hàm>: tên hàm sẽ sử dụng

+ <P1, P2, ..., Pn>: là các tham số sẽ truyền vào khi gọi hàm.

+ return: Giá trị trả về cho hàm, Thông số này có thể dùng hoặc không dùng tùy thuộc vào mục đích tạo hàm.

vd1: sử dụng hàm không có tham số và không có giá trị trả về:

<Script Language="JavaScript">

function tong()

{

var c = 5 + 5

document.write(c)

}

</Script>

vd2: sử dụng hàm có dùng tham số và không có giá trị trả về:

<Script Language="JavaScript">

function tong(a,b)

{

var c = a + b

document.write(c)

}

</Script>

vd3: sử dụng hàm có giá trị trả về.

<Script Language="JavaScript">

function tinhtong(a,b)

{

return(a+b)

}

function tong(a,b)

{

var c = tinhtong(5,6)

document.write(c)

}

</Script>

- Cách gọi hàm:

Ðể gọi đến hàm đã khai báo ta sử dụng cú pháp sau:

<tên hàm>([P1, P2, ..., Pn]) trong đó:

+ <tên hàm>: tên hàn cần gọi.

+ [P1, P2, ... , Pn]: Các giá trị sẽ truyền vào cho hàm.

ví dụ 1: Gọi hàm không có truyền tham số.

<HTML>

<HEAD>

...

<Script Language="JavaScript">

function tong()

{ var c= 5+5

document.write(c)

}

</Script>

</HEAD>

<BODY onLoad="tong()">

...

</BODY>

</HTML>

ví dụ 2: Gọi hàm có truyền tham số.

<HTML>

<HEAD>

...

<Script Language="JavaScript">

function tong(a,b)

{ var c= a+b

document.write(c)

}

</Script>

</HEAD>

<BODY onLoad="tong(5,6)">

...

</BODY>

</HTML>

    Ðể áp dụng tốt các lệnh trong JavaScript, phương pháp tốt nhất là chúng ta khảo sát các bài mẫu. Ở mỗi bài mẫu chúng tôi sẽ giải thích thêm các thuộc tính, sự kiện, hay các đối tượng mới (nếu có). Ðể tạo thử các Script của JavaScript, bạn có thể mở Notepab, hay frontpage (với Frontpage, bạn phải chuyển qua cửa sổ html thì mới tạo đợc Script). Trước hết chúng ta tìm hiểu các ví dụ sau:

1. Tạo Script đơn giản. Xuất từ Hello Word mỗi khi mở trang Web.

<html>

<head>

<meta name="GENERATOR" content="Htlm and avaScript ">

<tile> Hello Word </tile>

</head>

<body bgcolor ="#FFFFFF">

<Script Language="JavaScript">

document.write('Hello Word')

</script>

</body>

</html>

Bây giờ bạn hãy lưu file này với tên hello.html, sau đó chạy thử file hello này bằng cách, Click (Double Click) trực tiếp vào file Hello.html trong cửa sổ Window Explorer. Hoặc mở Internet Explorer, vào trình đơn File \ Open. Sau cho chọn tập tin Hello.html và Click Open để xem kết qủa của trang Web.

2. Tạo Script xuất từ Hello Word nhưng có thêm các thuộc tính của html như căn giữa, chọn font chữ, cỡ chữ v.v..

<html>

<head>

<meta name="GENERATOR" content="Htlm and avaScript ">

<tile> Hello Word 2</tile>

</head>

<body bgcolor ="#FFFFFF">

<Script Language="JavaScript">

document.write('<p align ="center"><font face="Arial" size="4" color="#FF0000"><b> Hello Word </b></font></p>')

</script>

</body>

</html>

Bạn hãy lưu file này và chạy thử xem kết qủa ra sao.

Kết Luận: Với phương thức Write của JavaScript, bạn có thể trình bày lên trình duyệt bất cứ cái gì mà html thể hiện được thì JavaScript cũng sẽ thể hiện được.

Ví duï: Tạo script xuất từ Hello word và hình ảnh bất kỳ.

<html>

<head>

<meta name="GENERATOR" content="Htlm and avaScript ">

<tile> Hello Word 2</tile>

</head>

<body bgcolor ="#FFFFFF">

<Script Language="JavaScript">

document.write('<p align="center"><font face="Arial" size="4" color="#FF0000"><B>Hello Word </b></font></p><p><img src="../image/about1.gif" alt="Gioi thieu" width="53" height="60"></p>')

</script>

</body>

</html>

Phần này chúng ta làm quyen với các tạo hàm trong JavaScript và phương thức gọi hàm JavaScript trong HTML. Trước hết chúng ta tìm hiểu các ví dụ sau:

1. Tạo Script xuất từ Hello Word mỗi khi mở trang Web. Trong bài này chúng ta sử dụng biến onLoad của thẻ Body. Sự kiện này sẽ gọi tới hàm hello ngay sau khi load trang Web.

<html>

<head>

<meta name="GENERATOR" content="Htlm and avaScript ">

<tile> Hello Word </tile>

<Script Language="JavaScript">

function hello()

{

document.write('<p align ="center"><font face="Arial" size="4" color="#FF0000"><b> Hello Word </b></font></p>')

}

</script>

</head>

<body bgcolor ="#FFFFFF" onLoad="hello()">

</body>

</html>

Bây giờ bạn hãy lưu file này sau đó chạy thử file này.

2. Xuất hiện ghi chú (tip) trên thanh Status bar của trình duyệt Web mỗi khi ta đưa trỏ chuột đến thành phần có tạo Hyperlink.

<html>

<head>

<meta name="GENERATOR" content="Htlm and avaScript ">

<tile> Hello Word 2</tile>

</head>

<body bgcolor ="#FFFFFF">

<p> <a href="index.html" onMouseover= "window.status='Go to page index'" onMouseout="window.status=' '">index</a></p>

</body>

</html>

Trong đó:Khi đưa trỏ chuột đến thành phần Hyperlink thì sự kiện onMouseover được gọi. Và trên thanh Status sẽ xuất hiện từ "Go to page index'. Khi đưa trỏ chuột ra ngoài thành phần Hyperlink thì sự kiện onMouseout sẽ được gọi.

Bạn hãy lưu file này và chạy thử xem kết qủa ra sao.

Vd3: Tương tự như trên nhưng lần này ta tạo hàm showstatus với tham số truyền vào là nội dung cần hiển thị.

<html>

<head>

<meta name="GENERATOR" content="Htlm and avaScript ">

<tile> Hello Word 2</tile>

<script Language="JavaScript">

function showstatus(text)

{

window.status=text

}

</script>

</head>

<body bgcolor ="#FFFFFF">

<p> <a href="index.html" onMouseover=showstatus('Go to page index') onMouseout=showstatus(' ')>index</a></p>

</body>

</html>

    Chúc vui!