Biến, kiểu dữ liệu, biểu thức, toán tử

3.3.1. Biến

Cũng như các ngôn ngữ lập trình khác javascript dùng biến để lưu trữ các giá trị nhập vào, các giá trị tính toán . . .Nói cách khác biến là vùng nhớ sử dụng để lưu trữ các giá trị khác nhau trong quá trình chương trình hoạt động.

Mỗi biến có một tên, Tên biến trong JavaScript phải bắt đầu bằng ký tự . Phạm vi của biến có thể là một trong hai kiểu sau:

• Biến toàn cục: Có thể được truy cập từ bất kỳ đâu trong ứng dụng. Được khai báo: x = 0;

• Biến cục bộ: Chỉ được truy cập trong phạm vi chương trình mà nó khai báọ Biến cục bộ được khai báo trong một hàm với từ khoá var: var x = 0;

3.3.2. Kiểu dữ liệu

Khác với C++ hay Java, JavaScript là ngôn ngữ có tính định kiểu thấp. Nghĩa là không phải chỉ ra kiểu dữ liệu cho biến. Kiểu dữ liệu được tự động chuyển thành kiểu phù hợp khi cần.

Ví dụ 1: Tạo trang (DataTypẹhtm) như sau <HTML><Body>

<Script Language= "JavaScript"> var a='Trái Cam ';

var n=52; n = n + 47; var tb ="Có tất cả " + n + " " + a; document.write(tb); </Script> </Body></HTML>

KHOA CÔNG NGHỆ THÔNG TIN 36

Kết quả :

Hình 3-2 Kết quả tính tổng

Trong JavaScript, có bốn kiểu dữ liệu sau đây:  Kiểu nguyên (Interger)

Số nguyên có thể được biểu diễn theo ba cách: Hệ cơ số 10 (hệ thập phân), Hệ cơ số 8 (hệ bát phân) và Hệ cơ số 16 (hệ thập lục phân) -Với hai chữ số đầu tiên là 0x. (VÍ Dụ: 0x5F)

 Kiểu dấu phẩy động (Floating Point)

Một biến có kiểu dấu phẩy động có 4 thành phần sau: Phần nguyên thập phân. Dấu chấm thập phân (.). Phần dư. Phần mũ.

Ví dụ 2: 9.87 hay -0.85E4  Kiểu logic (Boolean)

Kiểu logic được sử dụng để chỉ hai điều kiện : đúng hoặc saị Miền giá trị của kiểu này chỉ có hai giá trị : true , falsẹ

 Kiểu chuỗi (String)

Một biến kiểu chuỗi biểu diễn bởi không hay nhiều ký tự đặt trong cặp dấu " ... " hay '... '

Ghi chú: Để biểu diễn dấu nháy kép ( " ), trong chuỗi sử dụng ( \" ),

Ví dụ 3:

document.write(“ \”This text inside quotes.\” ”);

3.3.3. Lệnh, khối lệnh trong JavaScript

KHOA CÔNG NGHỆ THÔNG TIN 37 Một khối lệnh là đoạn chương trình gồm hai lệnh trở lên và được đặt trong cặp ngoặc nhọn: { . . . }

Bên trong một khối lệnh có thể chứa một hay nhiều khối lệnh khác. { // khối 1 { // khối 2 lệnh 2.1 lệnh 2.2 … } // kết thúc khối lệnh 2 lệnh 1.1 lệnh 1.2 } // kết thúc khối lệnh 1

3.3.4. Toán tử & Biểu thức trong JavaScript

3.3.4.1. Định nghĩa và phân loại biểu thức

Tập hợp các biến và các toán tử nhằm đánh giá một giá trị nào đó được gọi là một biểu thức (expression). Về cơ bản có ba kiểu biểu thức:

 Số học: Nhằm để lượng giá giá trị số. VÍ Dụ: (3+4)+(84.5/3) bằng 197.1666666667.

 Chuỗi: Nhằm để đánh giá chuỗị ví dụ: "The dog”+”barked!" là “The dog barked!”

 Logic: Nhằm đánh giá giá trị logic. ví dụ: 23>32 là Falsẹ

Ngòai ra JavaScript cũng hỗ trợ biểu thức điều kiện, cú pháp như sau:

(condition) ? valTrue : valFalse

Nếu điều kiện condition là đúng, biểu thức nhận giá trị valTrue, ngược lại nhận giá trị là Falsẹ

Ví dụ 3: ketqua = (diemtb>=5) ? "Đậu" : "Rớt"

Trong ví dụ này biến ketqua được gán giá trị "Đậu" nếu giá trị của biến diemtb lớn hơn hoặc bằng 5; ngược lại nó nhận giá trị "Rớt".

KHOA CÔNG NGHỆ THÔNG TIN 38

3.3.4.2. Các Toán tử

Toán tử được sử dụng để thực hiện một phép toán. Được nhóm thành các loại sau đây: gán, so sánh, số học, chuỗi và logic.

Bảng 3-1 Bảng các toán tử

Toán tử Mô tả

= Gán giá trị của toán hạng bên phải cho toán hạng bên tráị

== (Bằng)Trả lại giá trị đúng nếu toán hạng bên trái bằng toán hạng bên phải != (Khác)Trả lại giá trị đúng nếu toán hạng bên trái khác toán hạng bên phải

> Trả lại giá trị đúng nếu toán hạng bên trái lớn hơn toán hạng bên phải

>= (Lớn hơn hoặc bằng)Trả lại giá trị đúng nếu toán hạng bên trái lớn hơn hoặc bằng toán hạng bên phải

< Trả lại giá trị đúng nếu toán hạng bên trái nhỏ hơn toán hạng bên phải

<= (Nhỏ hơn hoặc bằng)Trả lại giá trị đúng nếu toán hạng bên trái nhỏ hơn hoặc bằng toán hạng bên phải

var1 % var2

(Chia lấy phần dư) Trả lại phần dư khi chia var1 cho var2

- (Phủ định) Cho giá trị phủ định toán hạng

var++ Toán tử này tăng var lên 1 (có thể biểu diễn là ++var) var-- Toán tử này giảm var đi 1 (có thể biểu diễn là --var)

+ Kết hợp hai chuỗi expr1

&& expr2

KHOA CÔNG NGHỆ THÔNG TIN 39 expr1 ||

expr2

Toán tử OR trả về giá trị đúng nếu ít nhất 1 trong 2 expr1,expr2 đúng.

3.4. Câu lệnh điều kiện, lệnh lặp for

Có thể chia các cấu trúc lập trình của JavaScript thành 2 nhóm sau:Cấu trúc rẽ nhánh (Điều kiện) và Cấu trúc lặp.

3.4.1. Cấu trúc lập trình rẽ nhánh (Điều Kiện) Cú pháp: Cú pháp:

if ( <điều kiện> ) {

//Các câu lệnh với điều kiện đúng }else{

//Các câu lệnh với điều kiện sai }

Ví dụ 1: Tạo trang (CauTrucDK.htm). Sử dụng phương pháp confirm() với phát biểu if <HTML>

var question="What is 10+10 ?"; var answer=20;

var correct="<IMG SRC='vuịgif'>"; var incorrect="<IMG SRC='buon.gif'>"; var response=prompt(question,"0"); if (response != answer) {

if (confirm("Wrong ! press OK for a second change")) response=prompt(question,"0");

}

var output = (response ==answer ) ? correct:incorrect; </Script>

</Head> <Body>

KHOA CÔNG NGHỆ THÔNG TIN 40 <Script Language="Javascript"> document.write(output); </Script> </Body> </HTML> 3.4.2. Cấu trúc lặp Vòng lặp For

Vòng lặp for thiết lập 1 biểu thức khởi đầu - initExpr, sau đó lặp 1 đoạn mã cho đến khi biểu thức <điều kiện> được đánh giá là đúng. Sau khi kết thúc mỗi vòng lặp, biểu thức incrExpr được đánh giá lạị

Cú pháp:

for (initExpr; <điều kiện>; incrExpr){

//Các lệnh được thực hiện trong khi lặp }

Ví dụ 2: Tạo trang (Default.html) như sau <html>

<head>

KHOA CÔNG NGHỆ THÔNG TIN 41 </html>

Kết quả:

Hình 3-3 Kết quả vòng lặp for 3.5. Câu lệnh while, switch, break, continue

Vòng lặp While

Vòng lặp while lặp khối lệnh chừng nào <điều kiện> còn được đánh giá là đúng

Cú pháp:

while (<điều kiện>){

//Các câu lệnh thực hiện trong khi lặp }

Ví dụ 1: Tạo trang (WhileLoop.htm) như sau <html>

<head>

<Script Language= "JavaScript"> x=1;

KHOA CÔNG NGHỆ THÔNG TIN 42 while (x<=10){ y=x*10; document.write("x="+x +"; y = "+ y + "<BR>"); x++; } </Script> </head> <body> </body> </html>

//Kết quả của ví dụ này giống như ví dụ trước.

Lệnh Break

Câu lệnh break dùng để kết thúc việc thực hiện của vòng lặp for hay whilẹ Chương trình được tiếp tục thực hiện tại câu lệnh ngay sau chỗ kết thúc của vòng lặp.

Cú pháp: break;

Ví dụ 2: Nếu giá trị x đưa vào vòng lặp nhỏ hơn 50, vòng lặp sẽ kết thúc while (x<100){

if (x<50) break; x++;

}

Lệnh Continue

Đối với vòng lặp while lệnh continue điều khiển quay lại <điều kiện>; với for lệnh continue điều khiển quay lại incrExpr.

Cú pháp: continue;

Ví dụ 3: Đoạn mã sau tăng x từ 0 lên 5, nhảy lên 8 và tiếp tục tăng lên 10 <html>

KHOA CÔNG NGHỆ THÔNG TIN 43 <head>

<Script Language= "JavaScript"> x=0; while (x<=10) { document.write(“Giá trị của x là:”+ x+”<BR>”); if (x=5){ x=8; continue; } x++; } </Script> </head> <body> </body> </html> 3.6. Biến mảng, hàm 3.6.1. Mảng

Mặc dù JavaScript không hỗ trợ cấu trúc dữ liệu mảng nhưng tạo ra phương thức cho phép bạn tự tạo ra các hàm khởi tạo mảng như sau:

function taomang(n) { this.length = n;

for (var i=1; i<=n; i++){ this[i]=0

KHOA CÔNG NGHỆ THÔNG TIN 44 return this;

}

Tạo ra 1 mảng với kích thước xác định trước (n) và điền các giá trị 0.

Ví dụ 1: a = new taomang(10);

Tạo ra các thành phần từ a[1] đến a[10] với giá trị là 0. Gán giá trị cho các thành phần: a[1] = "Thành Phố HCM";

a[2] = "Long An";

Ví dụ 2: Tạo trang (Arraỵhtml) <html>

<head>

<Script Language= "JavaScript"> function taomang(n) { this.length = n;

for (var i=1; i<=n; i++){ this[i]=0 } return this; } a = new taomang(10); a[1] = "Thành Phố HCM"; a[2] = "Long An";

document.write(a[1] + "<BR>"); document.write(a[2] + "<BR>"); </Script>

KHOA CÔNG NGHỆ THÔNG TIN 45 </head> <body> </body> </html> Kết quả: Hình 3-4 Kết quả xuất mảng 3.6.2. Hàm  Giới thiệu

Trong lập trình sử dụng hàm là để thực hiện một đoạn chương trình nào đó. Trong Javascript có các hàm được xây dựng sẵn để giúp thực hiện một chức năng và ta cũng có thể định nghĩa ra các hàm khác để thực hiện một công việc nào đó.

Hàm có thể có 1 hay nhiều tham số truyền vào và 1 giá trị trả về. Hàm có thể là thuộc tính của 1 đối tượng, trong trường hợp này nó được xem như là phương thức của đối tượng đó.  Định nghĩa hàm Cú pháp: function fnName([param1],[param2],...,[paramN]){ //function statement }

KHOA CÔNG NGHỆ THÔNG TIN 46

Ví dụ 3: Tạo trang (Function.html) <html>

<head>

function testQuestion(question){ var answer=eval(question);

var output="Trả lời " + question + " ?"; var correct="<IMG SRC='vuịgif'>"; var incorrect="<IMG SRC='buon.gif'>"; var response=prompt(output,"0"); return(response == answer)?correct:incorrect; } </Script> </head> <body> <Script Language="JavaScript"> var result=testQuestion("5 + 10"); document.write(result); </Script> </body> </html> Kết quả:

KHOA CÔNG NGHỆ THÔNG TIN 47

Hình 3-5 Kết quả sử dụng hàm tính toán

Ghi chú: Hàm eval dùng chuyển đổi giá trị chuỗi thành giá trị số eval(“5+10”) trả về giá trị là 15

 Các hàm có sẳn

JavaScript có một số hàm có sẵn, gắn trực tiếp vào chính ngôn ngữ và không nằm trong một đối tượng nào: eval, parseInt, parseFloat

* Hàm eval

Chuyển đổi giá trị chuỗi dạng số thành giá trị số.

Cú pháp:

returnval=eval (biểu thức)

Ví dụ 4: Tạo trang (Eval.html) <html>

<head>

var string="10+ Math.sqrt(81)";

KHOA CÔNG NGHỆ THÔNG TIN 48 </Script> </head> <body> </body> </html> Kết quả: Hình 3-6 Kết quả hàm chuyển đổi chuỗi * Hàm parseInt

Hàm này chuyển một chuỗi số thành số nguyên với cơ số là tham số thứ haị

Cú pháp:

parseInt (string, [, radix])

Ví dụ 5: Tạo trang (ParserInt.htm) <html>

<head>

document.write("Converting 0xC hex to base-10: " + parseInt(0xC,10) + "<BR>"); document.write("Converting 1100 binary to base-10:" + parseInt(1100,2));

</Script> </head> <body>

KHOA CÔNG NGHỆ THÔNG TIN 49 </body> </html> Kết quả: Hình 3-7 Kết quả chuyển số nguyên * Hàm parseFloat

Hàm này giống hàm parseInt nhưng nó chuyển chuỗi thành số biểu diễn dưới dạng dấu phẩy động.

Cú pháp: parseFloat (string)

Ví dụ 6: Tạo trang (ParserFloat.htm) <html>

<head>

document.write("This script will show how diffrent strings are "); document.write("Converted using parseFloat<BR>");

document.write("999= " + parseFloat("999") + "<BR>"); document.write("999abc= " + parseFloat("999abc") + "<BR>"); document.write("abc999= " + parseFloat("abc999") + "<BR>"); document.write("8abc99= " + parseFloat("8abc99")); </Script> </head>

KHOA CÔNG NGHỆ THÔNG TIN 50 <body> </body> </html> Kết quả: Hình 3-8 Kết quả chuyển số thực 3.7. DOM

DOM Document Object Model hay Mô hình đối tượng tài liệu là một chuẩn được định nghĩa bởi Tổ chức Web Toàn Cầu (World Wide Web Consortium – W3C). DOM cung cấp cách thức để truy cập và thay đổi nội dung của các tài liệu HTML. Phần lớn các trình duyệt web hiện này đều triển khai DOM dưới nhiều hình thức và mức độ khác nhaụ Cũng như rất nhiều chuẩn khác, đặc biệt các chuẩn liên quan đến lập trình web, DOM được phát triển và cải tiến qua nhiều năm. Hiện có ba đặc tả DOM, được gọi là các cấp độ của DOM, đặc tả thứ tư hiện đang được phát triển.

KHOA CÔNG NGHỆ THÔNG TIN 51

Hình 3-9 Dưới đây là mô hình cây DOM Cây đối tượng DOM

Như hình ảnh trên, DOM biểu diễn ở dạng câỵ Các phần tử HTML trở thành các nut trong câỵ Như cấu trúc dữ liệu dạng cây, các nút có chứa các nút con. Có một số nút cùng cấp trong câỵ

Xem lại hình trên thì:

• <html> có 2 nút con là <head> và <body>

• <head> có 1 phần tử con là <title> và phần tử cha là <html> • <title> có 1 phần tử cha là <head> và không có phần tử con nào • <body> có phần tử cha là <html> và phần tử con là <h1>, <a> ...

Hiểu rõ cấu trúc quan hệ cha con giữa các phần tử là kiến thức quan trong giúp JavaScript tương tác với HTML

Đối tượng document

Có một đối tượng đã được định nghĩa sẵn trong JavaScript mà qua đó truy cập đến mọi phần tử của DOM, đó chính là đối tượng có tên document

KHOA CÔNG NGHỆ THÔNG TIN 52 Khi sử dụng JavaScript bạn sẽ sử dụng đối tượng này là gốc tương tác với cấu trúc DOM qua đó tương tác với mọi phần tử HTML, ví dụ:

document.bodỵinnerHTML = "Some text"; </script>

Ta thấy, body là một phần tử của DOM, bạn đã truy cập đến phần tử và thay đổi nội dung thuộc tính innerHTML

Thuộc tính innerHTML có trong mọi phần tử và bạn sử dụng nó để thay đổi nội dung trong phần tử.

Chọn phần tử trong DOM

Tất cả các phần tử HTML như body, a, p ... đều là đối tượng trong JavaScript. Đối tượng document có các phương thức giúp bạn chọn ra phần tử mong muốn. Nó có ba phương thức thông dụng:

//tìm 1 phần tử theo id của nó - trả về HTMLElement hoặc null nếu không thấy document.getElementById(id)

//tìm các phần tử theo class - trả về HTMLCollection document.getElementsByClassName(name)

//tìm các phần tử theo tên thẻ - trả về HTMLCollection document.getElementsByTagName(name)

</script>

getElementById

Ví dụ sau, tìm phần tử có id là demo, sau đó đổi nội dung phần tử thành Hello

World!

<title>DEMO JAVASCRIPT</title> </head>

KHOA CÔNG NGHỆ THÔNG TIN 53 <body>

<div id="demo">Demo select Element</div> <script>

var ele = document.getElementById('demó); elẹinnerHTML = "Hello World!";

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

getElementsByTagName

Phương thức getElementsByTagName tìm tất cả các phần tử có tên thẻ trong tham số hàm. Nó trả về một tập hợp HTMLCollection trong nó chứa các phần tử

HTMLElement tìm thấỵ Bạn có thể sử dụng thuộc tính length để biết số lượng phần tử trả về, từ dó có thể duyệt qua tập hợp này dễ dàng

Ví dụ tìm tất cả các phần tử đoạn văn (thẻ p). Sau đó đổi toàn bộ nội dung các đoạn văn thành Hello World!

<html> <head> <title>DEMO JAVASCRIPT</title> </head> <body> <p>hi</p> <p>hello</p> <p>hi</p> <script>

var arr = document.getElementsByTagName("p"); for (var x = 0; x < arr.length; x++) {

arr[x].innerHTML = "Hello World!"; }

KHOA CÔNG NGHỆ THÔNG TIN 54 </script>

</body>

</html>

Đoạn mã trên biến đổi nội dung các thẻ p thành: Hello World!

getElementsByClassName

Phương thức getElementsByClassName tìm tất cả các phần tử có thuộc tính class (lớp) đưa rạ Nó cũng trả về HTMLCollection

var arr = document.getElementsByClassName("demo"); //truy cập phần tử thứ 2 tìm được

arr[1].innerHTML = "Hi";

Phần tử trong DOM - HTMLElement

Mỗi một phần tử trong DOM đều có các thuộc tính và phương thức cung cấp thông tin về phần tử đó trong DOM

Các thuộc tính của phần tử trong DOM:

• element.childNodes : trả về mảng các phần tử con của nó • element.firstChild : phần tử con đầu tiên

• element.lastChild : phần tử con cuối cùng

• element.hasChildNodes : trả về true nếu có phần tử con, ngược lại là false • element.nextSibling : phần tử cùng cấp tiếp theo

• element.previousSibling : phần tử cùng cấp trước • element.parentNode : trả về nút cha Xem ví dụ: <html> <body> <div id ="demo"> <p>some text</p>

KHOA CÔNG NGHỆ THÔNG TIN 55 <p>some other text</p>

</div> <script>

var a = document.getElementById("demo"); var arr = ạchildNodes;

for(var x=0;x<arr.length;x++) { arr[x].innerHTML = "new text"; }

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

Kết luận:

Toàn bộ cấu trúc HTML của trang được mô tả trong DOM, Javascript truy cập tới DOM thông qua đối tượng xây dựng sẵn là document.

Tìm một phần tử trong DOM bằng cách sử dụng các phương

thức: document.getElementById(id), document.getElementsByClassName(name), document.getElementsByTagName(name).

3.8. Sự kiện

3.8.1. Khái niệm sự kiện và xử lý sự kiện

Biến, kiểu dữ liệu, biểu thức, toán tử

Giao tiếp với người sử dụng –Lệnh prompt()

Toán tử &amp; Biểu thức trong JavaScript

Toán tử & Biểu thức trong JavaScript