Bài 4 GIỚI THIỆU JAVASCRIPT

Ngôn ngữ đánh dấu siêu văn bản HTML có thể chứa đựng một định dạng chi tiết về nội dung văn bản dưới dạng một trang Web tĩnh. Nội dung trang này có thể bao gồm văn bản đã định dạng, ảnh, bảng biểu và các siêu liên kết để tạo ra một phương tiện trình bày thông tin một cách ấn tượng. Tuy nhiên, ngoài sự tương tác mức độ thấp của các siêu liên kết bằng cách đưa người sử dụng đi từ trang Web này đến trang Web khác. Nói chung HTML không cho phép đáp ứng các thông tin nhập vào từ phía người dùng ngoài việc đưa họ tới một trang mới. Hãng Netscape Communications thuộc tập đoàn Sun Microsystems đưa ra một giải pháp bằng cách tạo ra một tập các lệnh đính kèm theo trang HTML gọi là JavaScript. Sử dụng JavaScript, ta có thể xây dựng các biểu mẫu, công cụ tính toán và những giải pháp để tạo ra trang Web động. Trước khi có JavaScript, mọi hoạt động giữa người sử dụng với sự tương tác phía máy chủ phải thông qua những ứng dụng web hết sức tinh vi và máy chủ web cao cấp. JavaScript ra đời đã làm cho máy tính của người sử dụng trở nên cân bằng hơn và đem lại một số sức mạnh cho máy khách mà trước kia chỉ thực hiện được ở máy chủ.

Sau khi JavaScript ra đời, hãng Microsoft cũng đưa ra ngôn ngữ lập trình riêng của họ là Visual Basic Scripting Edition hay VBScript.

Ngoài hai ngôn ngữ trên, còn có nhiều ngôn ngữ cho phép lập trình phía máy khách như PerlScript, Pythos.

Tại thời điểm này, JavaScript đã được hai hãng Microsoft và Netscape xây dựng lại thành ngôn ngữ mới và đặt tên là ECMAScript (tuy nhiên thực tế người ta vẫn gọi nó là JavaScript). Phiên bản hiện tại của javascript là 2.0, bao gồm các chức năng tương tác tốt hơn và người sử dụng quản lý mã tốt hơn: kiểu, lớp.

VBScript và JavaScript là các ngôn ngữ lập trình kiểu thông dịch dùng cho Web. Các đoạn chương trình viết bằng ngôn ngữ này nhúng trong các trang HTML và sẽ được các trình duyệt thông dịch để thực hiện. Các ngôn ngữ Script cho phép phát triển nhanh và dễ dàng các chương trình đơn giản hơn là các ngôn ngữ dạng biên dịch như là C, C++.

Cú pháp của VBScript gần giống với Visual Basic còn cú pháp của JavaScript lại giống với ngôn ngữ C, C++.

VbScript và JavaScript là hai ngôn ngữ Script dùng để viết các đoạn chương trình ở phía client rất thông dụng hiện nay. Tuy nhiên JavaScript được hỗ trợ trên hầu hết các trình duyệt, trong khi đóVBScript chỉ được hỗ trợ tốt nhất trên trình duyệt Internet Explorer của

Microsoft. Hiện tại, hai ngôn ngữ này cũng được sử dụng để dịch các chương trình phía server.

4.2 Cách Thức Viết Một Đoạn Mã Javascript

Trong cặp thẻ:<SCRIPT>: JavaScript được thêm vào trang HTML bằng cách sử dụng cặp thẻ là :<SCRIPT language=”JavaScript“> và </SCRIPT>. Về nguyên tắc các đoạn mã JavaScript có thể đặt tại bất kỳ vị trí nào trong trang HTML và trước thẻ </BODY>. Tuy nhiên để dễ quản lý, người ta thường đặt chúng trong cặp thẻ <HEAD> </HEAD>. Đối với những trình duyệt cũ có thể sẽ không hiểu JavaScript, do vậy nếu gặp những đoạn Script này,

chúng sẽ xem như những text bình thường và hiển thị trên màn hình. Vì lý do này, chúng ta nên đặt mã của nó trong chú thích trang HTML (trong cặp dấu <!- - và - ->

<!-- Sử dụng để dấu mã JavaScript đối với những trình duyệt không hiểu JavaScript

(mã JavaScript đặt tại đây) --> </SCRIPT> </HEAD> <BODY> (mã html) <SCRIPT language=”JavaScript “> <!- - (mã JavaScript ) - -> </SCRIPT> (mã html) </BODY> <HTML>

Trong các sự kiện (event): Mã JavaScript còn được đặt trong các sự kiện (event) của thẻ HTML theo cú pháp: <tag_html onEvent=” đoạn mã JavaScript “>…</tag_html>. Ta thấy trong các sự kiện (onEvent) mã JavaScript được đặt trong cặp dấu “..”. Các đoạn mã này thường là các hàm do người sử dụng viết hoặc do ngôn ngữ cung cấp nhằm mục đích thực hiện một tác vụ nào đó.

Các chú thích của JavaScript giống như ngôn ngữ C, C++ là được đặt trong cặp /* và */ nếu chú thích trên nhiều dòng và sau dấu // nếu ở trên một dòng. Mỗi câu lệnh của JavaScript kết thúc bởi dấu chấm phẩy(;).

Ví dụ:

<!-- //Ẩn đối với các trình duyệt không hỗ trợ JavaScript function show_hello() // Viết một hàm tên là show_hello

{

var fullname=”Nguyen Van An”; //khai báo một biến

alert(“chào bạn “ + fullname); /*sử dụng hàm của JavaScript xuất ra hộp hội thoại thông báo. */

}

//chấm dứt mã JavaScript - -> </SCRIPT>

Chương trình JavaScript đầu tiên <SCRIPT language="JavaScript"> <!- -

- ->

</SCRIPT>

<A href=”#” onClick=”show_hello(); “> Click here</A> </BODY>

</HTML>

Trong ví dụ trên ta đã viết một hàm JavaScript và đặt trong thẻ <HEAD>. Đây là một hàm được định nghĩa bởi người lập trình. Hàm này được gọi trong phần thân trang HTML giữa cặp thẻ <SCRIPT> và </SCRIPT> và trong sự kiện onClick của thẻ liên kết <A>.

Các biến JavaScript và kiểu dữ liệu

Biến là tên được gán cho một vùng nhớ sử dụng để lưu trữ dữ liệu. Trước khi sử dụng ta phải khai báo biến sử dụng từ khoá var theo cú pháp: var ten_bien;

Trong đó tên biến là danh hiệu được đặt theo qui tắc trên.

Chú ý: JavaScript phân biệt ký tự hoa và thường, do vậy biến ten sẽ khác với Ten, và từ khoá var phải là chữ thường.

Ta cũng có thể khai báo nhiều biến một lượt và vừa khai báo vừa gán giá trị.

Ví dụ: var a, b=10, c=”Tuan”;

4.3 Biến - Kiểu Dữ Liệu – Biểu Thức 4.3.1 Biến

JavaScript có cú pháp gần giống với C và Java. Có một sự khác biệt lớn giữa JavaScript và các ngôn ngữ trên là: JavaScript là ngôn ngữ không ràng buộc kiểu (untype). Do vậy một biến có thể chứa bất cứ một loại dữ liệu nào tại một thời điểm nào đó.

Ví dụ:

var x=10; // khai báo biến x và gán giá trị nguyên bằng 10 x = “ Nguyen Van Tuan”; // x nhận giá trị là một chuỗi.

Tại dòng đầu tiên, ta khai báo và gán giá trị cho biến x là một số nguyên. Tại dòng thứ hai, x lại mang một giá trị kiểu chuỗi. Mỗi câu lệnh của JavaScript được kết thúc bởi dấu chấm phẩy (;).

Các kiểu dữ liệu cơ bản trong JavaScript : - Number: Lưu trữ số nguyên và số thực.

- String: Lưu trữ chuỗi ký tự. Một chuỗi ký tự được bao bởi cặp dấu nháy đơn hoặc cặp dấu nháy kép.

- Bool: gồm hai giá trị: true và false.

Ví dụ:

x=10; y=”10”; z=’JavaScript ‘;

Giá trị một biến là: null: dùng để ám chỉ biến không chứa giá trị thuộc kiểu nào (giống kiểu void trong c). Một biến được tạo ra nhưng chưa được gán giá trị nào sẽ có giá trị là undefined.

4.3.2 Biểu Thức Và Phép Toán

Biểu thức: Là một tổ hợp các giá trị, hằng, danh hiệu, biến và các lời gọi hàm, các cặp dấu ngoặc và các toán tử hợp lệ.

Ví dụ: (a+3) * 2 – b/c;

Phép gán (=): Sử dụng để gán một giá trị, biểu thức vào một biến. Cú pháp: ten_bien = bieu_thuc ;

Các toán tử khác: các toán tử có thể tạm phân loại theo từng loại như: toán tử số học, toán tử logic. . .

Bảng dưới liệt kê các toán tử và loại dữ liệu có thể sử dụng cùng vối toán tử đó. Trong bảng có sử dụng các ví dụ minh hoạ cho các biến có các giá trị như sau: x=10; y=4; z=”ab”, t=”ab”, r = true, s = false;

Loại toán tử Toá n tử Ý nghĩa Ví dụ Kết quả Số h ọc

+ Cộng 2 số kiểu number hoặc nối 2 chuỗi kiểu string A=x+y;B=y + z; A=14B = ”4ab”

- Trừ 2 số A= x – y; A = 6

* Nhân 2 số A= x*y A = 40

/ Chia 2 số, kết quả trả về một số thực A = x/y A = 2.5 % Lấy phần dư của hai số. A = x%y A = 2; (dư 2) ++ Tăng một số lên 1 đơn vị x++ x = 11

ic ! Toán tử not, đảo ngược giá trị của biến logic A = !r A = false

Toán tử so sánh nhỏ hơn. Trả về giá trị true nếu biểu thức đúng, ngược lại trả về false (sử dụng cho kiểu number, string và các kiểu dữ liệu khác)

A = (x < y) A=false

> Toán tử so sánh lớn hơn. Ý nghĩa giống toán tử trên A = (x > y) A=true <= So sánh nhỏ hơn hoặc bằng A= (x<=y) A = false >= So sánh lớn hơn hoặc bằng A= (x>= y) A=true

== So sánh bằng A= (x==y) A = false

!= Khác A= (x!=y) A=true

ết

ợp +=-= a+=b a-=b  a = a-b a = a+b *= a*=b  a = a*b /= a/=b  a = a/b %= a%=b  a = a%b

Chú ý:

• Phép toán +: Trong phép cộng 2 số hoặc chuỗi. Nếu một toán hạng là kiểu chuỗi và toán hạng kia là một kiểu khác thì JavaScript sẽ đổi toán hạng kia về kiểu chuỗi và thực hiện phép toán cộng nối hai chuỗi. Nếu cộng một số với một biến logic thì true có giá trị là 1 và false có giá trị 0.

A = true + “cb”; A có giá trị là “truecb”. A = false + 10; A có giá trị là 10.

A = true + 10; A có giá trị là 11. A = “ab “ + 1; A có giá trị “ab1”

• Các phép toán so sánh: Được sử dụng trong những khẳng định điều kiện như: if, switch, while. Nếu so sánh 2 chuỗi, JavaScript sẽ so sánh từng ký tự theo mã ASCII. Ví dụ: “tuan” > “Tuan”, “tuan.” > “tuan“.

4.4 Các Cấu Trúc Điều Khiển

4.4.1 Cấu trúc If… Else

4.4.2 Câu Lệnh Switch

4.4.3Câu Lệnh For …Loop

4.4.4Cấu Trúc While… Loop

Cú pháp:

while (biểu_thức_đk) {

S; }

Chương trình sẽ kiểm tra biểu_thức_đk. Nếu biểu_thức_đk dúng sẽ thi hành lệnh S cho đến khi nào biểu_thức_đk là một giá trị sai.

4.4.5 Cấu trúc do … while Cú pháp do { S } while (biểu_thức_đk);

Câu lệnh S được thi hành cho đến khi biểu_thức_đk bị sai. Vòng lặp này khác với vòng lặp trên là thực hiện lệnh S trước và kiểm tra điều kiện sau.

Ví dụ : Chương trình sau sẽ tính giá trị: 1 + ½ + 1/3 +…+1/n cho đến khi điều kiện 1/(n+1) <α xảy ra (α là một số thực cho trước).

vòng lặp while

<SCRIPT language="JavaScript"> var anpha=0.01;

var tong = 0, i=1, x=1/i; while (x>= anpha) { tong +=(1/i); i++; x= 1/i; } alert("Tổng 1 + ½ + …là" + tong); </SCRIPT>

4.4.6 Câu Lệnh Break, continue…Loop

Lệnh break: được thực thi trong vòng lặp và cho phép thoát ra khỏi vòng lặp trong cùng (gần với nó nhất).

for (i=0; i<10; i++) if (i==4) break; alert(“Giá trị của I là: “ + i);

Câu lệnh continue: Lệnh continue cho phép bỏ qua các lệnh sau nó trong vòng lặp để thực thi vòng lặp kế tiếp.

var tong=0;

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

if (i%2 ==0) continue; tong = tong + i;

} alert("Tong cac so le <=10 la : " + tong); Kết quả:

4.4.7Câu Lệnh For .. In

Sử dụng để duyệt qua từng thuộc tính của đối tượng hay từng phần tử trong đối tượng mảng, nhất là các mảng dạng tập hợp (mảng mà các chỉ số không phải là số nguyên).

Cú pháp:

for(bien in [collection|Array]) {

S; }

Trong đó collection và Array là các biến. Ví dụ cho vòng lặp for dạng này được thể hiện trong phần đối tượng Array.

4.4.8 Câu Lệnh try … catch

Khi duyệt một trang web, ta thường thấy hộp thoại hiển thị thông báo lỗi và yêu cầu ta có debug lỗi hay không ("Do you wish to debug?"). Thông báo lỗi này thường có ích cho người phát triển nhưng gây khó chịu cho người sử dụng. Phần này sẽ hướng dẫn cách bẫy và xử lý lỗi một cách thân thiện hơn.

Có hai cách để bắt một lỗi trên trang web: - Sử dụng lệnh try … catch

- Sử dụng sự kiện onerror. Đây là giải pháp cũ hay sử dụng

Cấu trúc try … catch cho phép ta kiểm tra lỗi của một khối code. Khối try chứa code cần chạy để kiểm tra, khối catch chứa code được thực thi khi lỗi xảy ra.

Cú pháp: try {

}

catch(err) {

//Handle errors here }

Ví dụ:

Ví dụ này chứa một lỗi và không sử dụng try … catch để bắt lỗi. <html>

<head>

adddlert("Welcome guest!"); /Hàm viết sai }

</script> </head> <body>

</html>

Ví dụ sau sử dụng try … catch để xử lý lỗi của ví dụ trên <html> <head> <script type="text/javascript"> var txt="" function message() { try { adddlert("Welcome guest!") } catch(err) {

txt="There was an error on this page.\n\n"

txt+="Error description: " + err.description + "\n\n" txt+="Click OK to continue.\n\n" alert(txt) } } </script> </head> <body>

</html>

Câu lệnh throw

Câu lệnh này cho phép ta tạo ra một ngoại lệ và được sử dụng cùng cấu trúc try … catch để tạo có thể điều khiển chương trình phát sinh ra các thông báo lỗi chính xác hơn.

Cú pháp: thow(exception)

exception có thể là chuỗi, số nguyên, giá trị boolean hay một đối tượng.

Ví dụ này cho ta nhập vào một số nguyên từ 0 đến10. Nếu nhập ngoài các số này, chương trình phát sinh ra lỗi. Thông tin lỗi được truyền vào khối catch (qua lệnh throw) và được hiển thị.

var x=prompt("Enter a number between 0 and 10:","") try

{

if(x>10) throw "Err1" ; else if(x<0) throw "Err2"; }

catch(er) {

if(er=="Err1")

alert("Error! The value is too high"); if(er == "Err2")

alert("Error! The value is too low") ; }

</script> </body> </html>

4.5 Hàm Trong Javascript

Hàm là thành phần quan trọng trong việc lập trình cho phép thi hành những tác vụ đặc biệt. Trong JavaScript chúng ta có thể sử dụng những hàm thư viện của ngôn ngữ hoặc viết các hàm của riêng mình.

4.5.1 Hàm Được Định Nghĩa Bởi Người Lập Trình.

Cú pháp để tạo một hàm:

function ten_ham(thamso_1, thamso_2, ..,thamso_n) {

(code trong thân hàm) }

Trong đó: ten_ham tuân theo qui tắc định danh của JavaScript, function là từ khoá. Thamso_1, thamso2… là các tham số hình thức truyền vào hàm.

Chú ý: hàm trong JavaScript khác với trong C là nó không xác định kiểu trả về và các tham số hình thức cũng không được xác định kiểu.

Hàm có thể có hay không có giá trị trả về (qua phép toán return).

Ví dụ: Viết một hàm tính giai thừa của một số n. <SCRIPT language="JavaScript">

function giai_thua(n) //hàm tính n! {

var i=1, S=1;

if (n<0) return –1; //kiểm tra giá trị n. Trả về –1 nếu n<0 if ((n ==0) ||(n==1)) return 1; //Nếu n==0 hoặc n==1 thì n!=1 else { while (i<=n) { S*=i; i++; } return S; } }

alert (“ Giai thừa của 6 là “ + giai_thua(6)); </SCRIPT>

Các hàm cũng có thể gọi lẫn nhau hoặc gọi đệ qui.

Ví dụ: Hàm đệ qui tính giai thừa của n: function gtdequi(n)

{

if (n<=1) return 1; return n * gtdequi(n-1); }

Ví dụ sau cho xây dựng một hàm cho người lập trình nhập số cần tính giai thừa n từ bàn phím. Hàm này có kiểm tra giá trị n cho đến khi người sử dụng nhập đúng (n là một số và không âm). Khi đó hàm này sẽ gọi hàm hàm giai_thua() để tính và xuất ra giá trị.

function giai_thua(n) // Hàm tính giai thừa của n { var i=1, gt=1; while (i<=n) { gt*= i; i++; } return gt;

} function thuc_hien() { var n; do {

n = prompt(“Nhập vào giá trị n”); // Nhập giá trị vào n từ bàn phím. }

while (isNaN(n) || (n< 0)); // Nếu n không là một số hoặc n<0 thì nhập tiếp. n = parseInt(n); // lấy giá trị nguyên của n nếu n là số thực

alert(n + “ ! = “ + giai_thua(n)); }

</SCRIPT> </HEAD> <BODY>

<A href=”#” onClick=”thuc_hien();”>Click vào đây để thực hiện</A> </BODY>

</HTML>

Trong Ví dụ này chúng ta đã sử dụng thêm hàm prompt(). Đây là hàm được định nghĩa sẵn trong ngôn ngữ. Hàm này cho phép người sử dụng nhập vào một số và trả về số đã nhập. Câu lệnh n = prompt(“Nhập vào giá trị n”) trong ví dụ trên nếu người sử dụng nhập vào số 4 và click OK thì số này sẽ được gán cho n. Cũng trong chương trình này ta đặt hàm trong sự kiện onClick của liên kết để gọi hàm khi liên kết được click.

Hãy viết thêm phần kiểm tra nếu người sử dụng không nhập hoặc click nút cancel.

4.5.2 Tầm Vực Của Biến

Tầm vực của biến là nơi mà ta có thể truy cập đến biến. Biến được khai báo trong một hàm gọi là biến cục bộ và chỉ có thể tham khảo được tại trong hàm đó hoặc các hàm mà nó gọi thi

Bài 5 CÁC ĐỐI TƯỢNG JAVASCRIPT

Bài 7 LẬP TRÌNH PHP – LẬP TRÌNH PHÍA SERVER