Làm việc với javascrip và jquery html5

BÀI 3 LÀM VIỆC VỚI JAVASCRIPT VÀ JQUERY... Làm việc với thư viện Jquery!. Phản ứng ñược với các sự kiện, ví dụ: trang web vừa load xong, sự kiện nhấn chuột, …!. Lệnh javascript ñược nhóm

Trang 1

BÀI 3 LÀM VIỆC VỚI JAVASCRIPT VÀ JQUERY

Trang 2

NHẮC LẠI BÀI TRƯỚC

Trang 3

MỤC TIÊU BÀI HỌC

!   Tổng quan về Javascript và 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

Trang 4

TỔNG QUAN VỀ JAVASCRIPT

Trang 5

!   Thường ñược nhúng trực tiếp vào trang HTML

!   Sử dụng rộng rãi, không cần bản quyền

Trang 6

TỔNG QUAN VỀ JAVASCRIPT

!   Javascript có thể làm ñược gì?

!   Cung cấp cho nhà thiết kế HTML công cụ lập trình

!   Phản ứng ñược với các sự kiện, ví dụ: trang web vừa load xong, sự kiện nhấn chuột, …

!   Có thể ñọc, thay ñổi nội dung của phần tử HTML

!   Xác nhận dữ liệu, ví dụ: dữ liệu ñầu vào

!   Phát hiện trình duyệt của người dùng

!   ðược sử dụng ñể tạo ra các cookie

Trang 7

LÀM VIỆC VỚI JAVASCRIPT

Trang 8

!   Khai báo javascript:

!   Sử dụng cặp thẻ <script>…</script> ñể chèn

javascript vào trang HTML

!   Trong cặp thẻ chứa các thuộc tính ñể xác ñịnh ngôn ngữ kịch bản

!   Mã javascirpt ñược thực hiện bởi trình duyệt

!∀#∃%&∋(∋)&∗+ ∋∗,∋−./0/∀#∃%&∋ 1(

2222233(

!−∀#∃%&∋1(

Trang 9

Trang 10

!   Câu lệnh javascript:

!   ðược thực hiện bởi trình duyệt

!   Thực hiện theo thứ tự câu lệnh

tố ñầu tiên với ID xác ñịnh

document.getElementById("demo").innerHTML="Hello Dolly";

document.getElementById("myDIV").innerHTML="How are you?";

Trang 11

!   Lệnh javascript ñược nhóm lại trong dấu { } ñể các chuỗi lệnh thực hiện cùng nhau

function myFunction() {

document.getElementById("demo").innerHTML="Hello Dolly"; document.getElementById("myDIV").innerHTML="How are you?";

}

Trang 12

!   Truy vấn tới mã lệnh javascript:

•  Thực hiện khai báo hàm js

•  Gán hàm ó với một sự kiện trong HTML

Trang 13

!   Sự kiện trong javascript:

•  Là hành ñộng ñược phát hiện bởi javascript

•  Tất cả các yếu tố trên trang web ñều có sự kiện ñược kích hoạt bởi javascript

•  Các sự kiện ñược thường ñược sử dụng kết hợp với các chức n ng, và các chức n ng sẽ không ñược thực hiện trước khi sự kiện xảy ra!

•  Một số sự kiện: onMouseOver, onSubmit, onFocus, onBlur, onChange, onClick, …

Trang 14

!   Biến trong javascritpt:

!   ðược sử dụng ñể giữ các giá trị hoặc biểu thức

!   Một biến phải ñược gắn tên (ví dụ: x, orderlist, …)

!   Quy tắc ñặt tên biến:

•  Bắt ñầu bằng chữ cái, các ký tự hoặc ký tự gạch dưới

•  Tên biến phân biệt chữ hoa và chữ thường (ví dụ: x và

Trang 15

!   Javascript framework:

!   Là giải pháp tốt nhà thiết kế

!   Cung cấp một số thư viện có sẵn

!   Bao gồm các hàm ã ñược xây dựng và kiểm tra bởi nhà thiết kế và phát triển

!   Bao gồm nhiều hàm có sẵn và sử dụng ñược ngay

Trang 16

JQUERY

45&6−−.78∗∃)3#9:−(

45&6−−;;;3;<∀#499=∀3#9:−.78∗∃)−>∗?/8=∋3/∀&(

(

Trang 18

JQUERY

Trang 19

JQUERY

!   Là thư viện mới của javascript

!   Dễ dàng tiếp cận ñối với người thiết kế

!   Thư viện JQuery làm việc với thành phần sau:

Trang 20

JQUERY

!   Khai báo jQuery:

!   Download Jquery: hiện tại có 2 phiên bản JQuery

<script type= text/javascript src= jquery.js ></script>

≅∃8)(0ΑΒ(0Χ%(∆=∗(.78∗∃)3.∀(

ΕΦ(∋4Γ(>9;Β=9/>(&4%ΗΒ(ΙϑΒ(:Χ%(Β4Α∋(∋∃ΗΒ(;∗Ι∀%∋∗6(45&6−−.78∗∃)3#9:−(

http://docs.jquery.com/Downloading_jQuery#Download_jQuery

Trang 22

JQUERY

!   Jquery selector :

!   Là thành phần quan trọng trong thư viện Jquery

!   Cho phép lựa chọn, thao tác tới các thành phần

HTML như một nhóm hay yếu tố duy nhất

Trang 25

JQUERY

!   Hàm callback trong JQuery:

!   ðược sử dụng ñể ng n chặn các mã tiếp theo ñược chạy

Trang 26

JQUERY

!   Thao tác với Jquery HTML:

!   jQuery có phương pháp mạnh mẽ ñể thay ñổi và

thao tác với các phần tử HTML và thuộc tính của

Trang 27

JQUERY

!   Chèn thêm nội dung HTML:

$("p") append (" W3Schools.");!

Trang 28

JQUERY

$("p") prepend ("W3Schools ");!

Trang 29

JQUERY

$("p") after ("W3Schools");!

Trang 30

JQUERY

$("p") before ("W3Schools");!

Trang 31

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 3 cú pháp khác nhau, nhằm thực hiện các nhiệm vụ khác nhau:

•  css(property) – Trả về giá trị mặc ñịnh của CSS

•  css(property,value) – Thiết lập giá trị và thuộc tính CSS

•  css({properties}) – Thiết lập nhiều thuộc tính và giá trị cho CSS

Trang 32

JQUERY

!   css(property)

$("p").css("background");!

Trang 33

JQUERY

!   css(property,value)

$("p").css("background","yellow");!

Trang 34

JQUERY

!   css({properties})

$("p").css({"background":"yellow","font-size":"200%"});!

Trang 35

HỌC JAVASCRIPT & JQUERY VỚI

W3SCHOOLS

Trang 37

TỔNG KẾT

!   Javascript là ngôn ngữ kịch bản có cấu trúc riêng

!   ðược sử dụng ñể thêm tính tương tác trên trang

web, ñược nhúng trực tiếp vào trang HTML

!   Có thể viết mã javascript ở vùng <body> hoặc

<head> của trang HTML

!   Jquery là một thư viện của javascript

!   Có thể sử dụng các phiên bản jquery tại trang

http://jquery.com/

Định dạng
Số trang	37
Dung lượng	2,56 MB