Công nghệ web - Bài 4: Client Script (javascript)

Bài4: Client Script (javascript) Lê Quang Lợi Email: loilequang@gmail.com loilq@utehy.edu.vn Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY » 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 Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY » 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 4.1 Giới thiệu về Javascript(Client Script) Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY function Add(){ var a= 5;// biến a var b=6 +a;/* tổng*/ alert(“tổng :” + b); } 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 Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY » 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 Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY » 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 Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY » 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 4.4 Áp dụng Javascript Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY » 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 4.5 Sự kiện trong HTML Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY » 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 4.6 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 » 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 Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY » 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” 4.6.2 Tương tác tài liệu HTML dùng DOM Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY » 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)