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 Bài 4: Client script » Giới thiệu » Một số hàm thông dụng » Cú pháp javscript » Sử dụng Javascript HTML » Sự kiện HTML » Mô hình DOM Lê Quang Lợi: loilequang@gmail.com Mơn học : Cơng nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 4.1 Giới thiệu Javascript(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 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 Ajax: Rick Internet Application Xử lý liệu trước gửi: kiểm tra khuôn dạng Cho phép xử dụng XML jSon Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 4.3 Cú pháp javascript(cơ bản) - Thẻ Script chứa mã javascript - Xây dựng đoạn mã tương tác với tài liệu HTML function Add(){ var a= 5;// biến a var b=6 +a;/* tổng*/ - Biến javascript - Biến khơng cần khai báo trước - Có thể gán đối tượng alert(“tổng :” + b); } - Gọi Hàm javascript - Khai báo hàm Chú ý: Biến javascript không cần phải khai báo trước Javascript phân biệt hoa thường Chuỗi javscript đặt “ và” ‘ ‘ Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 4.3 Cú pháp javascript » Biểu thức : thể cơng thức tố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ợ từ khóa: break; continue; Lê Quang Lợi: loilequang@gmail.com Mơn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 4.2 Một số hàm thống dụng » alert(mess); đưa cử sổ thông báo » document.Write(string); ghi tài liệu chuỗi » prompt(); // thông báo nhận kế » IsNaN(a);// false a 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 bạn”; len = str.lenght(); Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 4.4 Áp dụng Javascript » Trên thẻ thuộc tính bắt đầu on… Onclick, onforcus, ondoubleclick …: bắt kiện cho thẻ » Trên trang (thẻ Script): áp dụng cho trang document.Write(“chào”); » Ngoài trang thẻ script: áp dụng cho trang » Src vị trí file mã javascript “.js”: URL Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 4.5 Sự kiện HTML » Javascript hỗ trợ bắt kiện thông qua thẻ HTML » Xây dựng thẻ với thuộc tính bắt đầu on » Xây dựng hàm thực thi kiện function myF(){ alert(“Chào bạn”); } Chú ý: hàm trả liệu từ khóa return nội dung Lê Quang Lợi: loilequang@gmail.com Môn học : Cơng nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 4.6 Mơ hình DOM » DOM: Document Object Model » Mơ hình đối tượng tài liệu » Toàn tài liệu lưu trữ đối tượng document » Tài liệu biểu diễn dạng hình (tree Node) » Node đại diện cho 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… Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 4.6.1 Các hàm tương tác » Lấy 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 trả thuộc trường hợp sau 1) Khơng có thẻ nào: không tồn thẻ sai đối 2) Một thẻ trả về: Có thẻ tồn 3) Tập thẻ (mảng): tồn nhiều thẻ theo tiêu trí Lê Quang Lợi: loilequang@gmail.com Mơn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 4.6.2 Tương tác tài liệu HTML dùng DOM » Tươntg tác: thể lấy thẻ/thay đổi nội dung tài liệu » Quy trình: B01: Chuẩn bị liệu (lấy nội dung HTML) Dùng hàm Get dựa DOM Var txt=document.getElementById(“txtName”); B02: xử lý liệu theo 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 +=“ đính thêm nội dung” Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 4.6.2 Tương tác tài liệu HTML dùng DOM(VD) » Ví dụ tương tác giao diện dùng JS DOM » Form thêm sản phẩm » Form Thêm Tin tức Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY ... dụng XML jSon Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 4. 3 Cú pháp javascript(cơ bản) - Thẻ Script chứa mã javascript - Xây dựng đoạn... CharAt(i); … Ví dụ: var str=“Chao bạn”; len = str.lenght(); Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 4. 4 Áp dụng Javascript » Trên thẻ thuộc tính bắt đầu... i++; } Lệnh lặp hỗ trợ từ khóa: break; continue; Lê Quang Lợi: loilequang@gmail.com Mơn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 4. 2 Một số hàm thống dụng » alert(mess); đưa cử sổ