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

Chia sẻ: Tằng Túy | Ngày: | Loại File: PDF | Số trang:12

Thêm vào BST

Báo xấu

54
lượt xem 6
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Bài giảng Công nghệ Web (ASP.NET): Bài 4 - 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