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

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

JavaScript là ngôn ngữ định hướng sự kiện, nghĩa là sẽ phản ứng trước các sự kiện như: Click chuột …

Chương trình xử lý sự kiện (Event handler) là 1 đoạn mã hay 1 hàm được thực hiện để phản ứng trước 1 sự kiện được xác định là một thuộc tính của một thẻ HTML:

<tagName eventHandler = "JavaScript Code or Function">

Ví dụ 1:Trang EventHander.htm thẩm định giá trị đưa vào trong trường text Tuổi phai hợp lệ nếu sẽ xuất hiện thông báo yêu cầu nhập lạị

KHOA CÔNG NGHỆ THÔNG TIN 56 <meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Lập trình Web</title> <Script Language= "JavaScript">

function CheckAge(form) {

if ( (form.AGẸvalue<0)||(form.AGẸvalue>120) ) { alert("Tuổi nhập vào không hợp lệ! Mời nhập lại"); form.AGẸvalue=0; } } </Script> </Head><Body> <Form NAME="frmDieutra"> Nhập vào tên của bạn:<BR>

Tên <Input Type=Text Name="TEN" ><BR> Đệm <Input Type=Text Name="DEM" ><BR> Họ <Input Type=Text Name="HO" ><BR>

Age <Input Type=Text Name="AGE" onChange="CheckAge(frmDieutra)"> <BR>

</Body></HTML>

KHOA CÔNG NGHỆ THÔNG TIN 57

Hình 3-10 Kết quả sử dụng sự kiện 3.8.2. Một số sự kiện trong JavaScript

Bảng 3-2 Bảng một số sự kiện trong javascript

onBlur Xảy ra khi input focus bị xoá từ thành phần form

onClick Xảy ra khi người dùng kích vào các thành phần hay liên kết của form.

onChange Xảy ra khi giá trị của thành phần được chọn thay đổi onFocus Xảy ra khi thành phần của form được focus(làm nổi lên). onLoad Xảy ra trang Web được tảị

onMouseOver Xảy ra khi di chuyển chuột qua kết nối hay anchor.

onSelect Xảy ra khi người sử dụng lựa chọn một trường nhập dữ liệu trên form.

onSubmit Xảy ra khi người dùng đưa ra một form. onUnLoad Xảy ra khi người dùng đóng một trang

3.8.3. Các sự kiện có sẵn của một sốđối tượng

Bảng 3-3 Bảng một số sự kiện có sẵn của đối tượng

KHOA CÔNG NGHỆ THÔNG TIN 58 Selection list onBlur, onChange, onFocus

Text onBlur, onChange, onFocus, onSelect

Textarea onBlur, onChange, onFocus, onSelect

Button onClick

Checkbox onClick

Radio button onClick

Hypertext link onClick, onMouseOver, onMouseOut Clickable Imagemap area onMouseOver, onMouseOut

Reset button onClick

Submit button onClick

Document onLoad, onUnload, onError

Window onLoad, onUnload, onBlur, onFocus

Framesets onBlur, onFocus

Form onSubmit, onReset

Image onLoad, onError, onAbort

Ví dụ 2: Trang LoadUnLoad.htm <HTML>

<HEAD> <TITLE>Event Handler</TITLE> </HEAD>

KHOA CÔNG NGHỆ THÔNG TIN 59 </HTML>

3.9. Bài tập áp dụng

1. Cho người dùng nhập vào tên và tuổị Hãy viết lại tên và tuổi của người đó ra màn hình bằng hàm document.write, trong đó tên có màu đậm, tuổi được gạch chân.

2. Tạo một nút nhấn (button) có name là welcome, value là " Welcome ". Một textbox có tên là msg, value = "Welcome to".

Hướng dẫn : Sử dụng phương thức (hàm) write của đối tượng document để tạọ 3. Tạo một nút như trong ví dụ 2 và thêm chức năng sau: Khi người dùng click vào nút welcome thì hiển thị thông báo "Welcome to JavaScript !"

Hướng dẫn: Dùng thẻ để tạo nút nhấn và thêm thuộc tính onClick = "<Câu lệnh JavaScript>;" (Trong đó <Câu lệnh JavaScript> có thể là một lệnh JavaScript bất kỳ, ví dụ lệnh document.write, alert, prompt hoặc lệnh gọi hàm v.v...)

4. Nhập vào năm sinh nhập vào không được lớn hơn năm hiện tạị

Hướng dẫn: Sử dụng vòng lặp do…while để yêu cầu nhập lại nếu năm sinh > năm hiện tạị

5. Xây dựng chương trình có một ô Input, một button. Khi click vào button thì in các số từ 1 tới giá trị của ô input.

6. Viết chương trình có một ô input, một button. Khi click vào button thì in ra các số nguyên tố từ 1 tới giá trị của ô input.

7. Cho 10 thẻ div, hãy viết chương trình khi click vào button thì sẽ đổi màu cho các thẻ div. Nếu div nào vị trí chẵn thì background màu đỏ và lẽ thì background màu xanh.

Đối với bài này chúng ta sẽ lấy danh sách các thẻ div, sau đó sử dụng vòng lặp for để kiểm tra, nếu thẻ nào nằm vị trí chẵn thì đổi thành màu đỏ và vị trí lẽ đổi thành màu xanh.

Vì kết quả trả về sẽ là một mảng bắt đầu bằng 0 nên khi kiểm tra chẵn lẽ ta phải cộng thêm một nữa:

• (i+1) % 2 == 0 là số chẵn • (i+1) % 2 != 0 là số lẻ

KHOA CÔNG NGHỆ THÔNG TIN 60

CHƯƠNG 4: KỊCH BẢN TRÌNH CHỦ

Giới thiệu: Giới thiệu về cách cấu hình IIS, các điều khiển hiển thị danh sách dựa trên các điều khiền GridView, DataList, Repeater ngôn ngữ lập trình C#.

Mục tiêu:

- Trình bày được các kiến thức về kịch bản trình chủ

- Sử dụng được các Server control để xây dựng các giao diện cho kịch bản trình chủ.

Nội dung chính:

4.1. Giới thiệu về ngôn ngữ lập trình Web động

Lập trình web không chỉ có những cần giao diện ở front-end mà cần những dữ liệu, xử lý ở mức server. Hay nói cách khác, để có được những gì thể hiện trên website ở front-end phải có các dữ liệu, thông tin từ các chức năng do lập trình web back-end cung

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

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

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