Đang tải... (xem toàn văn)
Bài 3: Cấu trúc điều khiển, hàm và xử lý sự kiện trình bày các nội dung tiếp theo của cấu trúc điều khiển, cấu trúc lựa chọn, cấu trúc lặp, hàm, phạm vi biến, mảng, xử lý sự kiện.
Bài 3: Cấ u trúc điề u khiể n, hàm xử lý kiệ n Hệ thố ng cũ Biế n kiể u biế n Ép kiể u Khai báo biế n Toán tử Cấ u trúc điề u khiể n Lệ nh lự a chọ n n Cấ u trúc điề u khiể n, hàm xử lý kiệ n Mụ c tiêu họ c Cấ u trúc điề u khiể n (tiế p) Cấ u trúc lự a chọ n Lệ nh lự a chọ n kép Lệ nh đa lự a chọ n Cấ u trúc lặ p Lặ p không biế t trư c số lầ n lặ p Lặ p biế t trư c số lầ n lặ p Hàm Phạ m vi biế n Mả ng Xử lý kiệ n Cấ u trúc điề u khiể n, hàm xử lý kiệ n CẤ U TRÚC ĐI Ề U KHI Ể N Biế n toán tử Lệ nh lự a chọ n Lệ nh lự a chọ n n (Bài 2) Lệ nh lự a chọ n kép Lệ nh đa lự a chọ n Cấ u trúc điề u khiể n, hàm xử lý kiệ n Lệ nh lự a chọ n kép Cú pháp if (dieukien) { //Thự c hiệ n } else { //Thự c hiệ n } Ví dụ : var x = prompt("Hay nhap vao so be hon 100:"); if ( x > 50) { alert("Ban vua nhap gia tri la: " + x + ", gia tri lon hon 50"); } else{ alert("Ban vua nhap gia tri la: " + x) } Cấ u trúc điề u khiể n, hàm xử lý kiệ n Lệ nh đa lự a chọ n Cú pháp switch ( dieukien ) { case giatri1: //Th //Thự c hi hiệ n break; case giatri2: //Thự c hiệ n break; default: //Thự hiệ n //Th c hi } Sử dụ ng break để khỏ i lệ nh switch Nế u khơng chuyể n xuố ng thự c hiệ n lệ nh mệ nh đề case tiế p theo Cấ u trúc điề u khiể n, hàm xử lý kiệ n Ví dụ lệ nh đa lự a chọ n var diem = prompt("Hay nhap diem:") switch ( diem ) { case "A": alert("Tuyet voi!"); break; case "B": case "C": alert("Kha."); break; case "D": case "E": case "F": alert("Ban can co gang hon."); break; default: alert("Gia tri ban nhap vao khong hop le."); Cấ u trúc } điề u khiể n, hàm xử lý kiệ n Ví dụ lệ nh đa lự a chọ n var diem = prompt("Hay nhap diem:") switch ( diem ) { case "A": alert("Tuyet voi!"); case "B": case "C": alert("Kha."); case "D": case "E": case "F": alert("Ban can co gang hon."); default: alert("Gia tri ban nhap vao khong hop le."); } Hãy cho biế t kế t củ a đoạ n mã nế u ngư i dùng nhậ p vào giá trị Tuyet voi! Cấ u trúc điề u khiể n, hàm xử lý kiệ n Lệ nh lặ p Lệ nh lặ p không biế t trư c số lầ n lặ p While Do … While Lệ nh lặ p biế t trư c số lầ n lặ p For Cấ u trúc điề u khiể n, hàm xử lý kiệ n 10 Phạ m vi biế n Scoping Example function() { var x = "toi la bien cuc bo."; } alert(x); Cấ u trúc điề u khiể n, hàm xử lý kiệ n 23 SỰ Biế n toán tử KI Ệ N 24 Xử lý kiệ n Tấ t element trang web đề u có mộ t tậ p kiệ n tư ng ứ ng vớ i Chú ý: Đố i vớ i mộ t element đư ợ c browser khác hỗ trợ tậ p kiệ n khác Cấ u trúc điề u khiể n, hàm xử lý kiệ n 25 Mộ t số kiệ n onClick Đư ợ c kích hoạ t nhấ n chuộ t vào mộ t element onLoad on Unload Đư ợ c kích hoạ t ngư i dùng vào hoặ c thoát khỏ i trang web onFocus, onBlur, onChange Đư ợ c kích hoạ t trư ng nhậ n đư ợ c focus, mấ t focus hay đư ợ c thay đổ i giá trị onMouseOver Đư ợ c kích hoạ t ngư i dùng di chuộ t lên mộ t element HTML form Cấ u trúc điề u khiể n, hàm xử lý kiệ n 26 Demo kiệ n Click cho element Body Chú ý: IE không hỗ trợ kiệ n onclick củ a element body Cấ u trúc điề u khiể n, hàm xử lý kiệ n 27 Demo kiệ n Click cho element Body Có thể thêm nhiề u dòng lệ nh Trong trư ng hợ p xử lý phứ c tạ p cho kiệ n???? Cấ u trúc điề u khiể n, hàm xử lý kiệ n 28 Xử lý phứ c tạ p cho kiệ n Sử dụ ng hàm để thự c hiệ n xử lý cho kiệ n function hienThiLoiChao() { alert("Hi"); alert("Hello"); } Hien thi loi chao Sự kiệ n click đư ợ c hỗ trợ IE FireFox Cấ u trúc điề u khiể n, hàm xử lý kiệ n 29 Xử lý phứ c tạ p cho kiệ n Ngư i dùng nhấ n vào M Ng i dùng Ngư nhấ n vào Gi y Giầ Xem Tai nguyen\Xu ly su kien Cấ u trúc điề u khiể n, hàm xử lý kiệ n 30 Xử lý phứ c tạ p cho kiệ n function hienThiAnh(dovat) { if (dovat == "mu") { document.write(""); } else { document.write(""); } }Hãy chọ n đồ vậ t mà bạ n thích:
Cấ u trúc điề u khiể n, hàm xử lý kiệ n 31 Timer JavaScript cung cấ p phư ng thứ c để xử lý kiệ n thờ i gian Các phư ng thứ c thuộ c đố i tư ợ ng w indow Mộ t số phư ng thứ c quan trọ ng Phư ng thứ c Giả i thích setTimeout Thự c hiệ n công việ c sau mộ t khoả ng thờ i gian tư ng lai clearTimeout Hủ y bỏ setTimeout trư c ó setInterval Thự c hiệ n lặ p lạ i công việ c sau mộ t khoả ng thờ i gian clearInterval Hủ y bỏ setInterval Lậ p trình hư ng đố i tư ợ ng mơ hình BOM 32 Timer Cú pháp var t=setTimeout("Lệ nh_javascript",số _mili _giây ); Lệ nh_javascirpt: Mã thự c thi hoặ c lờ i gọ i hàm mili_giây: Sau thờ i gian mã đư ợ c thự c hiệ n setTimeout() trả giá trị , giá trị đư ợ c lư u biế n t Muố n muố n hủ y bỏ setTimeout, sử dụ ng hàm clearTimeout truyề n đố i số t vào Cú pháp tư ng tự đố i vớ i setInterval() Lậ p trình hư ng đố i tư ợ ng mơ hình BOM 33 Demo setTimeout function onClickEvent() { var t = setTimeout("alert('Hi');", 1000); } Lậ p trình hư ng đố i tư ợ ng mơ hình BOM 34 Demo setI nterval function onClickEvent() { var t = setInterval("alert('Hi');", 1000); } So sánh khác vớ i ví dụ setTimeout Lậ p trình hư ng đố i tư ợ ng mơ hình BOM 35 Tổ ng kế t họ c JavaScript cung cấ p cấ u trúc điề u khiể n: Cấ u trúc tuầ n tự , cấ u trúc lự a chọ n cấ u trúc lặ p Cấ u trúc lặ p gồ m lệ nh lự a chọ n n (if), lệ nh lự a chọ n kép (if…else), lệ nh đa lự a chọ n (switch) Cấ u trúc lặ p gồ m lệ nh lặ p không biế n số lầ n lặ p (while, do…while) lặ p biế t số lầ n lặ p (for) Hàm thự c hiệ n mộ t c cụ thể Hàm trả giá trị hoặ c khơng Biế n có phạ m vi cụ c toàn cụ c Cấ u trúc điề u khiể n, hàm xử lý kiệ n 36 Tổ ng kế t họ c Hàm Confirm hàm đư ợ c xây dự ng sẵ n dùng để lấ y thông tin hồ i đáp từ ngư i dùng JavaScript cung cấ p kiệ n cho element củ a trang web Mỗ i element có mộ t tậ p kiệ n khác Javascript cung cấ p phư ng thứ c để xử lý kiệ n thờ i gian Cấ u trúc điề u khiể n, hàm xử lý kiệ n 37 ... Trong trư ng hợ p xử lý phứ c tạ p cho kiệ n???? Cấ u trúc điề u khiể n, hàm xử lý kiệ n 28 Xử lý phứ c tạ p cho kiệ n Sử dụ ng hàm để thự c hiệ n xử lý cho kiệ n