Bài giảng lập trình web chương 3 ths nguyễn minh vi

Javascript TỔNG QUAN ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Giới thiệu  Dynamic HTML DHTML = HTML + CSS + Ngôn ngữ script  Ngôn ngữ script: ngôn ngữ dạng thông dịch, giúp tăng tính tương tác trang web với người dùng  Javascript  VBscript … Javascript  Là ngôn ngữ kịch dùng để tạo script server-side client-side  Javascript server-side (thực thi web server):  Kết nối sở liệu  Chia sẻ thông tin cho người dùng ứng dụng  Truy cập vào hệ thống file server Javascript  Javascript client-side (thực thi web browser):  Tương tác với người dùng, phát sinh hành động để đáp lại kiện  Thay đổi nội dung, vị trí phần tử cách “động”  Kiểm tra tính hợp lệ liệu trước gửi web server để xử lý Chèn javascript vào trang html  Liên kết file javascript bên Click Ví dụ document.write('Sử dụng hộp thoại Javascript'); alert('Chào mừng bạn đến với Javascript!'); confirm('Bạn sẵn sàng chưa?'); Quy tắc ngữ pháp  Phân biệt chữ hoa chữ thường  Mỗi câu lệnh kết thúc ;  Dùng cặp ký hiệu mở đóng  Không phân biệt ký tự khoảng trắng Biến  Tên biến: chứa chữ cái, chữ số, ký hiệu _  Không bắt đầu chữ số  Khai báo từ khóa var VD:  var x = 10; Biến có phạm vi xác định  Toàn cục  Cục Kiểu liệu Numbers  Boolean  Strings  Null  Object (cấp phát từ khóa new)  Lưu ý: biến thuộc kiểu liệu tùy ý Hằng số Số nguyên: biểu diễn hệ thập phân, nhị phân, thập lục phân  Số thực: có dấu thập phân e hay E theo sau số nguyên (lũy thừa số 10), số nguyên dương âm  Boolean: True False  Null: null (giữ chỗ cho biến)  Chuỗi: đặt cặp nháy đơn ‘ ’ nháy kép “ ”  Các kiện thông thường onClick  onChange  onFocus  onBlur  onMouseOver  onMouseOut  onMouseUp  onMouseDown  onSubmit  onLoad  onClick  Sự kiện onClick xảy người dùng click chuột vào phần tử  Thường dùng cho loại nút nhấn, liên kết checkbox, radio onChange  Sự kiện onChange xảy nội dung phần tử thay đổi  Thường dùng cho ô nhập textbox, ô nhập textarea, hộp lựa chọn select onFocus, onBlur Sự kiện onFocus xảy phần tử nhận tiêu điểm (trở thành phần tử thời)  Sự kiện onBlur xảy phần tử bị tiêu điểm  onMouseOver, onMouseOut Sự kiện onMouseOver xảy trỏ chuột di chuyển lên phần tử  Sự kiện onMouseOut xảy trỏ chuột rời khỏi phần tử  onMouseDown, onMouseUp Sự kiện onMouseDown xảy có hành động nhấp (nhấn) chuột lên phần tử  Sự kiện onMouseUp xảy có hành động nhả chuột  Javascript AJAX (Asynchronous JavaScript and XML ) ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Ajax Là kỹ thuật trao đổi liệu với server, cho phép cập nhật phần nội dung trang web mà không cần phải load lại toàn trang  Là kết hợp giữa:      Đối tượng XMLHttpRequest Javascript/DOM CSS XML Ajax  Các bước thực chính:  Tạo đối tượng XMLHttpRequest  Gửi yêu cầu đến server  Nhận liệu trả từ server Tạo đối tượng XMLHttpRequest  Các trình duyệt thông dụng variable=new XMLHttpRequest();  Trình duyệt IE cũ variable=new ActiveXObject ("Microsoft.XMLHTTP");  Ví dụ var xmlhttp; if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else{ // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } Gửi yêu cầu đến server  Dùng phương thức đối tượng XMLHttpRequest  open(method, url, async) • method: GET/POST • url: đường dẫn file server • async: true/false (không đồng / đồng bộ)  send(string) • string: chuỗi tham số dùng phương thức POST, null dùng phương thức GET Gửi yêu cầu đến server  Ví dụ // Phương thức GET xmlhttp.open('GET', 'tên_file',true); xmlhttp.send(); // Phương thức POST xmlhttp.open('POST', 'tên_file',true); xmlhttp.send(); // Nếu liệu gửi từ form phương thức POST xmlhttp.open('POST', 'tên_file',true); xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xmlhttp.send('tham_số=giá_trị& '); Dữ liệu trả  Dùng thuộc tính đối tượng XMLHttpRequest  responseText: liệu trả dạng text document.getElementById('id').innerHTML=xmlhttp.responseText;  responseXML: liệu trả theo định dạng xml xmlDoc=xmlhttp.responseXML; txt=''; x=xmlDoc.getElementsByTagName('tag_name'); for (i=0;i[...]... Javascript CÁC ĐỐI TƯỢNG CƠ BẢN ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Đối tượng (Object)  Một đối tượng là một gói dữ liệu toàn diện, bao gồm:  các thuộc tính (biến)  các phương thức (hàm) Truy cập vào thuộc tính tên_đối_tượng.tên_thuộc_tính  Truy cập vào phương thức tên_đối_tượng.tên_phương_thức()  Phân cấp đối tượng  Phân cấp đối tượng trong một trang web Các đối tượng trình duyệt Các đối tượng... 23 0–6 1 – 31 0 – 11 từ 1900 trở đi Đối tượng Date Nhóm phương thức get  getDate lấy ngày trong tháng (1 -31 ) lấy ngày trong tuần (0-6)  getDay lấy tháng (0-11)  getMonth lấy năm (năm – 1990)  getYear  getTime lấy số mili giây (từ 1/1/1970) lấy giờ (0- 23)  getHours lấy phút (0-59)  getMinutes lấy giây (0-59)  getSeconds Đối tượng Date Nhóm phương thức set  setDate gán ngày trong tháng (1 -31 )... tròn + bk + Đối tượng Date Dùng để thiết lập, lấy và xử lý các thông tin thời gian  Đối tượng Date lưu thời gian theo số mili giây, tính từ 01/01/1970 00:00:00  Cách tạo tên_biến = new Date(tham_số); Tham số có thể:   rỗng  dạng 'mm dd, yyyy, hh:mm:ss' Đối tượng Date   Thuộc tính: không có Phương thức: Date có các nhóm phương thức sau      set thiết lập giá trị get lấy giá trị to trả về các... document.write('Chữ thường: ' + s.toLowerCase()); document.write('In đậm: ' + s.bold()); Đối tượng Math Dùng để thao tác các phép tính toán học nâng cao  Thuộc tính:   PI  LN10 E giá trị pi ( ~3. 1415) giá trị lg (~2 ,30 2) giá trị hằng số Euler (~2.718) Đối tượng Math  Phương thức        abs(num) lấy trị tuyệt đối sqrt(num) lấy căn bậc 2 sin(num) lấy sin (tính bằng radian) cos(num) lấy cosin (tính... tượng Tạo mảng: mang = new Array([ptử_1, …])  Các thuộc tính: length, indexOf  Các phương thức của mảng: pop, push, reverse, shift, sort  Mảng  VD: arrColor = new Array (3) ; arrColor[0] = 'red'; arrColor[1] = 'green'; arrColor[2] = 'blue'; document.write('' + arrColor); // sắp xếp arrColor.sort(); document.write('' + arrColor); // thêm phần tử arrColor.push('white');... Đối tượng Date Nhóm phương thức set  setDate gán ngày trong tháng (1 -31 ) gán tháng (0-11)  setMonth gán năm (năm lớn hơn 1990)  setYear gán số mili giây (từ 1/1/1970)  setTime  setHours gán giờ (0- 23) gán phút (0-59)  setMinutes gán giây (0-59)  setSeconds ... ĐỐI TƯỢNG TRÌNH DUYỆT ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Đối tượng Window   Dùng để truy xuất thông tin trạng thái cửa sổ làm vi c Thuộc tính:      tài liệu html cửa sổ trình duyệt... XỬ LÝ SỰ KIỆN ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Sự kiện (Event)  Sự kiện: hành động xảy trang web, tạo người dùng hệ thống, vd:  người dùng click vào button  trang web tải xong ... kiện  Phát sinh (kích hoạt) kiện  Trình xử lý kiện tương ứng gọi  Trình xử lý kiện thực hành động trả quyền điều khiển chương trình Điều khiển kiện  Sử dụng trình điều khiển kiện thuộc tính