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>
<Head> <Title>Cấu Trúc Điều Kiện</Title> <Script Language="Javascript">
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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Lập trình Web</title>
<Script Language= "JavaScript"> for (x=1; x<=10 ; x++) { y=x*10; document.write("x ="+ x +"; y= "+ y + "<BR>"); } </Script> </head> <body> </body>
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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Lập trình Web</title>
<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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Lập trình Web</title>
<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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Lập trình Web</title>
<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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Lập trình Web</title>
<Script Language= "JavaScript">
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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Lập trình Web</title>
<Script Language= "JavaScript">
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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Lập trình Web</title>
<Script Language= "JavaScript">
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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Lập trình Web</title>
<Script Language= "JavaScript">
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ụ:
<script>
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:
<script>
//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!
<html> <head>
<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ạị
<html> <head>
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>
<Input Type=Submit Value=”Submit”> <Input Type=Reset Value=”Reset”> </Form>
</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>
<BODY onLoad="alert('Welcome to my page!');" onUnload="alert('Goodbye! ');"> <IMG SRC="hotec.jpg">
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