học lập trình javascript jquery học lập trình , sider lập trình javascript và jquery dễ hiễu , có hình ảnh , chay sider đầy đủ nội dung có code mẫu tham khảoKhai báo javascript:Sử dụng cặp thẻ … để chèn javascript vào trang HTMLTrong cặp thẻ chứa các thuộc tính để xác định ngôn ngữ kịch bảnMã javascirpt được thực hiện bởi trình duyệt
Trung Tâm Công Nghệ Thông Tin – Thừa Thiên Huế • • GVHD: Trần Văn Tin Email: trantin2310@gmail.com PHẦN JQUERY MỤC TIÊU BÀI HỌC Tổng quan Javascript Jquery Làm việc với Javascript Làm việc với thư viện Jquery Học Javascript, jQuery với w3schools Slide - Làm việc với Javascript JQuery TỔNG QUAN VỀ JAVASCRIPT TỔNG QUAN VỀ JAVASCRIPT Javascript ngôn ngữ kịch có cấu trúc cú pháp riêng Đư ợc sử dụng để thiết kế thêm tương tác trang web Thường đ ược nhúng trực tiếp vào trang HTML Sử dụng rộng rãi, không cần quyền Slide - Làm việc với Javascript JQuery TỔNG QUAN VỀ JAVASCRIPT Javascript làm gì? Cung cấp cho nhà thiết kế HTML công cụ lập trình Phản ứng đư ợ c với kiện, ví dụ: trang web vừa load xong, kiện nhấn chuột, … Có thể đọc, thay đổi nội dung phần tử HTML Xác nhận liệu, ví dụ: liệu đầu vào Phát trình duyệt người dùng Đượ c sử dụng để tạo cookie Slide - Làm việc với Javascript JQuery LÀM VIỆC VỚI JAVASCRIPT LÀM VIỆC VỚI JAVASCRIPT • Khai báo javascript: • • Sử dụng cặp thẻ … để chèn javascript vào trang HTML Trong cặp thẻ chứa thuộc tính để xác định ngôn ngữ kịch Mã javascirpt đ ợ c thực trình duyệt …………… Slide - Làm việc với Javascript JQuery LÀM VIỆC VỚI JAVASCRIPT Javasscript đ ược đặt vùng vùng …………… … Slide - Làm việc với Javascript JQuery LÀM VIỆC VỚI JAVASCRIPT Câu lệnh javascript: Đượ c thực trình duyệt Thực theo thứ tự câu lệnh document.getElementById("demo").innerHTML="Hello Dolly"; document.getElementById("myDIV").innerHTML="How are you?"; getElementById (): phương pháp truy cập yếu tố với ID xác định Slide - Làm việc với Javascript JQuery 10 JQUERY Sự kiện Jquery: Các phương pháp xử lý kiện chức cốt lõi Jquery Sự kiện gọi hàm thực có kiện nhấn chuột $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); Slide - Làm việc với Javascript JQuery 23 JQUERY Một số kiện Jquery: Sự kiện Giải nghĩa $(document).ready(function) Liên kết tới hàm kiện (khi vừa load xong) $(selector).click(function) Liên kết tới hàm gọi kiện nhấn chuột $(selector).dblclick(function) Liên kết tới hàm gọi kiện nhấn đúp chuột $(selector).focus(function) Liên kết tới hàm gọi kiện trọng tâm thành phần chọn $(selector).mouseover(function) Liên kết tới hàm gọi kiện nhấn mouseover Slide - Làm việc với Javascript JQuery 24 JQUERY • Hàm callback Jquery: – Đ ợ c sử dụng để ngăn chặn mã đ ợ c chạy – Hàm có hiệu lực hành động kết thúc Cú pháp: $(selector).hide(speed,callback) Ví dụ: $("p").hide(1000,function(){ alert("The paragraph is now hidden"); }); Slide - Làm việc với Javascript JQuery 25 JQUERY Thao tác với Jquery HTML: jQuery có phương pháp mạnh mẽ để thay đổi thao tác với phần tử HTML thuộc tính chúng $(document).ready(function(){ $("buKon").click(function(){ $("p").html("W3Schools"); }); }); This is a headingThis is a paragraph.
This is another paragraph.
Click me Slide - Làm việc với Javascript JQuery 26 JQUERY Chèn thêm nội dung HTML: $("p").append(" W3Schools."); Slide - Làm việc với Javascript JQuery 27 JQUERY Chèn thêm nội dung HTML: $("p").prepend("W3Schools "); Slide - Làm việc với Javascript JQuery 28 JQUERY Chèn thêm nội dung HTML: $("p").after("W3Schools"); Slide - Làm việc với Javascript JQuery 29 JQUERY Chèn thêm nội dung HTML: $("p").before("W3Schools"); Slide - Làm việc với Javascript JQuery 30 JQUERY Thao tác với Jquery CSS: Là phương thức quan trọng để thao tác với CSS Bao gồm cú pháp khác nhau, nhằm thực nhiệm vụ khác nhau: • • • css(property) – Trả giá trị mặc định CSS css(property,value) – Thiết lập giá trị thuộc tính CSS css({properties}) – Thiết lập nhiều thuộc tính giá trị cho CSS Slide - Làm việc với Javascript JQuery 31 JQUERY css(property) $("p").css("background"); Slide - Làm việc với Javascript JQuery 32 JQUERY css(property,value) $("p").css("background","yellow"); Slide - Làm việc với Javascript JQuery 33 JQUERY css({properties}) $("p").css({"background":"yellow","font-size":"200%"}); Slide - Làm việc với Javascript JQuery 34 HỌC JAVASCRIPT & JQUERY VỚI W3SCHOOLS W3SCHOOLS • Javascript: http://www.w3schools.com/js/default.asp • Jquery: http://www.w3schools.com/jquery/default.asp • Cấu trúc học: • Cụ thể, ngắn gọn • Học thành phần, kiện Try it yourself Slide - Làm việc với Javascript JQuery 36 TỔNG KẾT • Javascript ngôn ngữ kịch có cấu trúc riêng • Được sử dụng để thêm tính tương tác trang web, nhúng trực tiếp vào trang HTML • Có thể viết mã javascript vùng hoặc trang HTML • Jquery thư viện javascript Có thể sử dụng phiên jquery trang http://jquery.com/ Slide - Làm việc với Javascript JQuery 37 ... quan Javascript Jquery Làm việc với Javascript Làm việc với thư viện Jquery Học Javascript, jQuery với w3schools Slide - Làm việc với Javascript JQuery TỔNG QUAN VỀ JAVASCRIPT TỔNG QUAN VỀ JAVASCRIPT. .. để tạo cookie Slide - Làm việc với Javascript JQuery LÀM VIỆC VỚI JAVASCRIPT LÀM VIỆC VỚI JAVASCRIPT • Khai báo javascript: • • Sử dụng cặp thẻ … để chèn javascript vào trang... it Slide - Làm việc với Javascript JQuery 12 LÀM VIỆC VỚI JAVASCRIPT Sự kiện javascript: • • • Là hành động đượ c phát javascript Tất yếu tố trang web có kiện đư ợc kích hoạt javascript Các