Bài giảng Công nghệ Web - Bài 04: Client Script (javascript) - Lê Quang Lợi

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 trong HTML » Sự kiện trong 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 về 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 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: Rick 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 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 function Add(){ liệu HTML var a= 5;// biến a - Biến trong javascript var b=6 +a;/* tổng*/ - Biến không cần khai báo trước - Có thể gán mọi đối tượng alert(“tổng :” + b); } - Gọi Hàm trong javascript - Khai báo hàm 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à ‘ 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ể 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; 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 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(); 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ẻ bởi các thuộc tính bắt đầu bằng on Onclick, onforcus, ondoubleclick : bắt sự kiện cho thẻ » Trên trang (thẻ Script): áp dụng cho trang document.Write(“chào”); » Ngoài trang bằng thẻ script: áp dụng cho trang » Src chỉ vị trí file mã javascript “.js”: là một 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 trong HTML » 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 » Xây dựng hàm thực thi các sự kiện function myF(){ alert(“Chào các bạn”); } Chú ý: hàm được trả về dữ liệu bởi từ khóa return trong 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 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 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 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í 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ể 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 +=“ đí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ụ 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 Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY