Bài giảng Công nghệ Web (ASP.NET): Bài 4 - Lê Quang Lợi

Bài 4 trang bị cho người học những hiểu biết về Client Script (javascript). Nội dung chính trong bài này gồm: Giới thiệu về Javascript (Client Script), một số hàm thông dụng, cú pháp javscript, sử dụng Javascript trong HTML, sự kiện trong HTML, mô hình DOM.

Bài4: Client Script (javascript)

Lê Quang Lợi Email: loilequang@gmail.com loilq@utehy.edu.vn

» Giới thiệu

» Một số hàm thông dụng

» Cú pháp javscript

» Sử dụng Javascript trong HTML

» Sự kiện trong HTML

» Mô hình DOM

Bài 4: Client script

» Javascript : ngôn ngữ lập trình phía trình duyệt ( khách)

» Hỗ trợ cách thức tương tác với tài liệu HTML(Động)

» Cú pháp tương tự: C , C++ , Java

» Javascript là ngôn ngữ thông dịch

» Javascript hỗ trợ

 Người dùng tương tác với giao diện thân thiện hơn

 Ajax : R ick Internet Application

 Xử lý dữ liệu trước khi gửi: kiểm tra đúng khuôn dạng

 Cho phép xử dụng XML và jSon

4.1 Giới thiệu về Javascript(Client Script)

<script >

function Add(){

var a= 5;// biến a

var b=6 +a;/* tổng*/

alert (“tổng :” + b);

}

</script>

4.3 Cú pháp javascript(cơ bản)

Chú ý: Biến trong javascript không cần phải khai báo trước

Javascript phân biệt hoa thường

Chuỗi trong javscript được đặt trong “ và” hoặc ‘ và ‘

- Biến trong javascript

- Biến không cần khai báo trước

- Có thể gán mọi đối tượng

- Gọi Hàm trong javascript

- Thẻ Script chứa mã javascript

- Xây dựng đoạn mã tương tác với tài

liệu HTML

- Khai báo hàm

» Biểu thức : thể hiện một công thức toán học/ điều kiện

» Hỗ trợ kiểu: số , chuỗi , true/false

» Câu lệnh rẽ nhánh:

 if: if( a>b) { return a;}

 if else: if (a>b){return a;}else {return b;}

» Lệnh lặp:

 for: for ( i =1 ; i < 6; i++ ){ alert(i); }

 while: while ( true ) { i++; }

 Lệnh lặp hỗ trợ cả từ khóa: break ; continue;

4.3 Cú pháp javascript

» alert(mess ); đưa ra cử sổ thông báo

» document Write (string ); ghi ra tài liệu một chuỗi

» prompt(); // thông báo và nhận kế quả

» IsNaN ( a );// false khi a là số; true cho trường hợp khác

» Hàm toán học: Math abs (a); Math PI , Math Sqrt (a);

» Hàm thao tác chuỗi: Lenght , CharAt (i); …

Ví dụ: var str =“Chao các bạn”;

len = str.lenght ();

4.2 Một số hàm thống dụng

» Trên thẻ bởi các thuộc tính bắt đầu bằng on…

Onclick, onforcus, ondoubleclick …: bắt sự kiện cho thẻ

<input type=“button” value=“click” onclick =“ alert(‘CH’); ”/>

» Trên trang (thẻ Script): áp dụng cho trang

<script language =“javascript” type =“text/javascript” >

document.Write (“ chào ”);

</script>

» Ngoài trang bằng thẻ script: áp dụng cho trang

<script language =“javascript” type =“text/javascript” src =“ URL ”>

</sctipt>

» Src chỉ vị trí file mã javascript “.js”: là một URL

4.4 Áp dụng Javascript

» Javascript hỗ trợ bắt sự kiện thông qua thẻ HTML

» Xây dựng thẻ với các thuộc tính bắt đầu bằng on

<input type=“button” value=“click” onClick=“ myF(); ” />

» Xây dựng hàm thực thi các sự kiện

<script>

function myF() {

alert (“Chào các bạn”);

}

</script>

Chú ý: hàm được trả về dữ liệu bởi từ khóa return trong nội dung

4.5 Sự kiện trong HTML

» DOM : D ocument O bject Model

» Mô hình đối tượng tài liệu

» Toàn bộ tài liệu lưu trữ trong đối tượng document

» Tài liệu được biểu diễn dưới dạng hình cây ( tree Node )

» Node đại diện cho một thẻ HTML (tên + thuộc tính )

 Thuộc tính: name, value, text , innerHTML , InnerText

 Phương thức: Add , Remove, Clare, Parent , lastChild…

4.6 Mô hình DOM

» Lấy các thẻ theo thuộc tính id=“tenID”

document getElementById (“tenID”);

» Lấy thẻ theo thuộc tính name=“tenthe”

document getElementByName (“tenthe”);

» Lấy thẻ theo loại thẻ HTML

document getElementByTagName (“taghtml”);

Chú ý: kết quả trả về thuộc một trong các trường hợp sau

1) Không có thẻ nào: không tồn tại thẻ hoặc sai đối

2) Một thẻ được trả về: Có duy nhất một thẻ tồn tại 3) Tập thẻ (mảng): tồn tại nhiều thẻ theo đúng tiêu trí

4.6.1 Các hàm tương tác

» Tươntg tác: thể hiện lấy thẻ/thay đổi nội dung tài liệu

» Quy trình:

B01 : Chuẩn bị dữ liệu (lấy về nội dung HTML)

Dùng các hàm Get dựa trên DOM

Var txt=document.getElementById(“txtName”);

B02 : xử lý dữ liệu theo đúng sự phân tích (đúng thuật toán)

Xử dụng toán tử, câu lệnh rẽ nhánh, lặp …

txt.value += “Chào”;

B03 : Tác động trở lại tài liệu HTML

Dùng thuộc tính: innerHTML , innerText, Text, value …

mydiv.innerHTML +=“<h1> đính thêm nội dung</h1>”

4.6.2 Tương tác tài liệu HTML dùng DOM

» Ví dụ về tương tác giao diện dùng JS trên DOM

» Form thêm sản phẩm

» Form Thêm Tin tức

4.6.2 Tương tác tài liệu HTML dùng DOM(VD)