Lập trình web - Chương 5: Javascrip

Trình bày: Nguyễn Phú Trường NộI DUNG Bộ môn Mạng máy tính & Truyền thông21/5/2011 Giới thiệu về JavaScript Biến, kiểu dữ liệu, phép toán Lệnh điều khiển Popup Sử dụng các đối tượng NộI DUNG Bộ môn Mạng máy tính & Truyền thông31/5/2011 Giới thiệu về JavaScript Biến, kiểu dữ liệu, phép toán Lệnh điều khiển Popup Sử dụng các đối tượng JAVASCRIPT LÀ GÌ? Bộ môn Mạng máy tính & Truyền thông41/5/2011 1 Được thiết kế cùng với HTML tạo trang Web sinh động Là ngôn ngữ script, hướng đối tượng, chứa các dòng lệnh thực thi được 2 Được viết trực tiếp vào trang HTML Là ngôn ngữ thông dịch 3 Khác với Java JAVASCRIPT DÙNG ĐỂ LÀM GÌ? 51/5/2011 Bộ môn Mạng máy tính & Truyền thông Kiểm tra dữ liệu trước khi submit Cung cấp thông tin về browser Đọc, viết phần tử /nội dung trang HTML Tạo cookie Viết trang HTML sinh động Bắt và xử lý các sự kiện Xuất động trang HTML VÍ Dụ 1 Về JAVASCRIPT 1/5/2011 6 Bộ môn Mạng máy tính & Truyền thông VÍ Dụ 2 Về JAVASCRIPT 1/5/2011 7 Bộ môn Mạng máy tính & Truyền thông VÍ Dụ 3 Về JAVASCRIPT 1/5/2011 8 Bộ môn Mạng máy tính & Truyền thông VÍ Dụ 4 Về JAVASCRIPT 1/5/2011 9 Bộ môn Mạng máy tính & Truyền thông VÍ Dụ 5 Về JAVASCRIPT 1/5/2011 10 Bộ môn Mạng máy tính & Truyền thông BIẾN 111/5/2011 Bộ môn Mạng máy tính & Truyền thông Đặc điểmặc iể Khai báoai á Gán trịá trị zChứa dữ liệu zPhân biệt hoa và thường zPhạm vi: ƒToàn cục ƒCục bộ • var strname = some value Hoặc • strname = some value • var strname = "Hege" Hoặc • strname = "Hege" VÍ Dụ 1/5/2011 12 Bộ môn Mạng máy tính & Truyền thông KIểU Dữ LIệU „ Kiểu dữ liệu z Số nguyên : 10, -301, 1974, etc. z Số thực và số chấm động : 13.5, 1.35E1 z Luận lý : true, false z Chuỗi : “do thanh nghi”, “sinh nam 1974”, \b, \n, \r, \t, \\ var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service." document.write(quote) Kết quả sẽ là : He read "The Cremation of Sam McGee" by R.W. Service. 1/5/2011 13 Bộ môn Mạng máy tính & Truyền thông KIểU Dữ LIệU „ Kiểu dữ liệu z Mảng : myArray = new Array(10); foo = new Array(5); myArray[0] = 56; myArray[9] = 44; colors = new Array(); colors[99] = "midnightblue"; numberOfElements = myArray.length; 1/5/2011 14 Bộ môn Mạng máy tính & Truyền thông KIểU Dữ LIệU „ Kiểu dữ liệu z Đối tượng : 1/5/2011 15 Bộ môn Mạng máy tính & Truyền thông CHUYểN KIểU Dữ LIệU „ Kiểu dữ liệu z Được chuyển tự động : var answer = 42 answer = "Thanks for all the fish..." x = "The answer is " + 42 z Chuyển chuỗi sang số : ParseInt(), ParseFloat() 1/5/2011 16 Bộ môn Mạng máy tính & Truyền thông PHÉP TOÁN „ Phép toán z Gán : = z Phép tăng hoặc giảm 1 : ++, -- z Gán rút gọn : +=, -=, *=, /=, %= z So sánh : ==, !=, , >= z Phép tính số học : +, -, *, /, % z Phép toán luận lý : &&, ||, !, z Phép : (cond) ? Expr1:Expr2 1/5/2011 17 Bộ môn Mạng máy tính & Truyền thông PHÉP TOÁN 1/5/2011 18 Bộ môn Mạng máy tính & Truyền thông PHÉP TOÁN 1/5/2011 19 Bộ môn Mạng máy tính & Truyền thông PHÉP TOÁN 1/5/2011 20 Bộ môn Mạng máy tính & Truyền thông PHÉP TOÁN 1/5/2011 21 Bộ môn Mạng máy tính & Truyền thông PHÉP TOÁN 1/5/2011 22 Bộ môn Mạng máy tính & Truyền thông ĐịNH NGHĨA HÀM „ Định nghĩa function functionname(var1,var2,...,varX) { some code } 1/5/2011 23 Bộ môn Mạng máy tính & Truyền thông ĐịNH NGHĨA HÀM „ Ví dụ function total(a,b) { x=a*b return x } product=total(2,3) 1/5/2011 24 Bộ môn Mạng máy tính & Truyền thông ĐịNH NGHĨA HÀM „ Ví dụ function displaymessage() { alert("Hello World!") } <input type="button" value="Click me!" onclick="displaymessage()" > 1/5/2011 25 Bộ môn Mạng máy tính & Truyền thông ĐịNH NGHĨA HÀM 1/5/2011 26 Bộ môn Mạng máy tính & Truyền thông ĐịNH NGHĨA HÀM 1/5/2011 27 Bộ môn Mạng máy tính & Truyền thông NộI DUNG Bộ môn Mạng máy tính & Truyền thông281/5/2011 Giới thiệu về JavaScript Biến, kiểu dữ liệu, phép toán Lệnh điều khiển Popup Sử dụng các đối tượng CấU TRÚC IF-ELSE „ Cú pháp if (condition) { statements1 } Hay if (condition) { statements1 } else { statements2 } 1/5/2011 29 Bộ môn Mạng máy tính & Truyền thông CấU TRÚC IF-ELSE 1/5/2011 30 Bộ môn Mạng máy tính & Truyền thông CấU TRÚC IF-ELSE 1/5/2011 31 Bộ môn Mạng máy tính & Truyền thông CấU TRÚC SWITCH-CASE „ Cú pháp switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; default: execute code block n } 1/5/2011 32 Bộ môn Mạng máy tính & Truyền thông CấU TRÚC SWITCH-CASE „ Ví dụ theDay=d.getDay() switch (theDay) { case 5: document.write("Finally Friday") break; case 6: document.write("Super Saturday"); break; case 0: document.write("Sleepy Sunday"); break default: document.write("I'm looking forward to this weekend!") } 1/5/2011 33 Bộ môn Mạng máy tính & Truyền thông CấU TRÚC SWITCH-CASE 1/5/2011 34 Bộ môn Mạng máy tính & Truyền thông CấU TRÚC LặP FOR „ Cú pháp for (initial-expression; condition; increment-expression) { statements } Ví dụ: var n = 0; for (var i = 0; i < 3; i++) { n += i; alert("The value of n is now " + n); } 1/5/2011 35 Bộ môn Mạng máy tính & Truyền thông CấU TRÚC LặP FOR 1/5/2011 36 Bộ môn Mạng máy tính & Truyền thông CấU TRÚC LặP FOR 1/5/2011 37 Bộ môn Mạng máy tính & Truyền thông CấU TRÚC WHILE, DO-WHILE „ Cú pháp while (var<=endvalue) { code to be executed } do { code to be executed } while (var<=endvalue) 1/5/2011 38 Bộ môn Mạng máy tính & Truyền thông CấU TRÚC WHILE, DO-WHILE 1/5/2011 39 Bộ môn Mạng máy tính & Truyền thông CấU TRÚC WHILE, DO-WHILE „ Ví dụ var i=0 do { document.write("The number is " + i) document.write("") i=i+1 } while (i<0) 1/5/2011 40 Bộ môn Mạng máy tính & Truyền thông CấU TRÚC WHILE, DO-WHILE 1/5/2011 41 Bộ môn Mạng máy tính & Truyền thông CấU TRÚC WHILE, DO-WHILE 1/5/2011 42 Bộ môn Mạng máy tính & Truyền thông BREAK TRONG CấU TRÚC LặP 1/5/2011 43 Bộ môn Mạng máy tính & Truyền thông CONTINUE TRONG CấU TRÚC LặP 1/5/2011 44 Bộ môn Mạng máy tính & Truyền thông NộI DUNG Bộ môn Mạng máy tính & Truyền thông451/5/2011 Giới thiệu về JavaScript Biến, kiểu dữ liệu, phép toán Lệnh điều khiển Popup Sử dụng các đối tượng ALERT("SOMETEXT") 1/5/2011 46 Bộ môn Mạng máy tính & Truyền thông CONFIRM("SOMETEXT") 1/5/2011 47 Bộ môn Mạng máy tính & Truyền thông PROMPT("SOMETEXT","DEFAULTVALUE") 1/5/2011 48 Bộ môn Mạng máy tính & Truyền thông KếT HợP VớI FORM 1/5/2011 49 Bộ môn Mạng máy tính & Truyền thông KếT HợP VớI FORM 1/5/2011 50 Bộ môn Mạng máy tính & Truyền thông NộI DUNG Bộ môn Mạng máy tính & Truyền thông511/5/2011 Giới thiệu về JavaScript Biến, kiểu dữ liệu, phép toán Lệnh điều khiển Popup Sử dụng các đối tượng ĐốI TƯợNG „ Các đối tượng z String z Date z Array z Boolean z Math z HTML DOM 1/5/2011 52 Bộ môn Mạng máy tính & Truyền thông ĐốI TƯợNG STRING 1/5/2011 53 Bộ môn Mạng máy tính & Truyền thông ĐốI TƯợNG STRING 1/5/2011 54 Bộ môn Mạng máy tính & Truyền thông ĐốI TƯợNG STRING „ Ví dụ var txt="Hello world!" document.write(txt.length) document.write(txt.toUpperCase()) document.write(txt.substring(4, 8)) document.write(txt.small()) document.write(txt.strike()) document.write(txt.charAt(8)) 1/5/2011 55 Bộ môn Mạng máy tính & Truyền thông ĐốI TƯợNG DATE 1/5/2011 56 Bộ môn Mạng máy tính & Truyền thông ĐốI TƯợNG DATE 1/5/2011 57 Bộ môn Mạng máy tính & Truyền thông ĐốI TƯợNG DATE 1/5/2011 58 Bộ môn Mạng máy tính & Truyền thông ĐốI TƯợNG DATE 1/5/2011 59 Bộ môn Mạng máy tính & Truyền thông ĐốI TƯợNG DATE „ Ví dụ var myDate=new Date() myDate.setFullYear(2010,0,14) myDate.setDate(myDate.getDate()+5) myDate.setFullYear(2010,0,14) var today = new Date() if (myDate>today) alert("Today is before 14th January 2010") else alert("Today is after 14th January 2010") 1/5/2011 60 Bộ môn Mạng máy tính & Truyền thông ĐốI TƯợNG ARRAY 1/5/2011 61 Bộ môn Mạng máy tính & Truyền thông ĐốI TƯợNG ARRAY „ Ví dụ: var mycars=new Array() mycars[0]="Saab" mycars[1]="Volvo" mycars[2]="BMW“ var mycars=new Array("Saab","Volvo","BMW") var mycars=new Array(3) mycars[0]="Saab" mycars[1]="Volvo" mycars[2]="BMW" 1/5/2011 62 Bộ môn Mạng máy tính & Truyền thông ĐốI TƯợNG ARRAY „ Ví dụ var arr = new Array(3) arr[0] = "Jani" arr[1] = "Tove" arr[2] = "Hege" var arr2 = new Array(3) arr2[0] = "John" arr2[1] = "Andy" arr2[2] = "Wendy" document.write(arr.concat(arr2)) 1/5/2011 63 Bộ môn Mạng máy tính & Truyền thông ĐốI TƯợNG ARRAY „ Ví dụ var arr = new Array(6) arr[0] = "Jani" arr[1] = "Hege" arr[2] = "Stale" arr[3] = "Kai Jim" arr[4] = "Borge" arr[5] = "Tove" document.write(arr + "") document.write(arr.sort()) 1/5/2011 64 Bộ môn Mạng máy tính & Truyền thông ĐốI TƯợNG BOOLEAN 1/5/2011 65 Bộ môn Mạng máy tính & Truyền thông ĐốI TƯợNG BOOLEAN „ Ví dụ var myBoolean=new Boolean() var myBoolean=new Boolean(0) var myBoolean=new Boolean(null) var myBoolean=new Boolean("") var myBoolean=new Boolean(false) var myBoolean=new Boolean(NaN) var myBoolean=new Boolean(true) var myBoolean=new Boolean("true") var myBoolean=new Boolean("false") var myBoolean=new Boolean("Richard") 1/5/2011 66 Bộ môn Mạng máy tính & Truyền thông ĐốI TƯợNG MATH 1/5/2011 67 Bộ môn Mạng máy tính & Truyền thông ĐốI TƯợNG MATH 1/5/2011 68 Bộ môn Mạng máy tính & Truyền thông ĐốI TƯợNG MATH 1/5/2011 69 Bộ môn Mạng máy tính & Truyền thông ĐốI TƯợNG MATH „ Ví dụ Math.E Math.PI Math.SQRT2 Math.SQRT1_2 Math.LN2 Math.LN10 Math.LOG2E Math.LOG10E document.write(Math.round(4.7)) document.write(Math.random()) document.write(Math.floor(Math.random()*11)) document.write(Math.round(-4.60)) 1/5/2011 70 Bộ môn Mạng máy tính & Truyền thông ĐốI TƯợNG HTML DOM 1/5/2011 71 Bộ môn Mạng máy tính & Truyền thông ĐốI TƯợNG HTML DOM 1/5/2011 72 Bộ môn Mạng máy tính & Truyền thông ĐốI TƯợNG HTML DOM 1/5/2011 73 Bộ môn Mạng máy tính & Truyền thông Bài tập áp dụng JavaScript 1. Viết chương trình hiển thị ngày và giờ của máy tính. 2. Viết chương trình yêu cầu người dùng nhập vào Tên và Tuổi. Khi người dùng nhập thiếu một trong hai giá trị trên thì hiện ra thông báo yêu “ Vui long nhap day du thong tin”. Khi người dùng đã nhập đầy đủ thông tin thì: 1. Nếu người dùng nhỏ hơn 18 tuổi thì xuất ra màn hình thông báo “Co len ban nhe!!!” 2. Ngược lai xuất ra thông báo “Tu tin vao chinh minh!!!”. 3. Thiết kế một trang HTML (nhapthongtin.html) cho phép người dùng nhập thông tin: họ tên, địa chỉ, email,…. Sau khi người dùng nhập đầy đủ thông tin, hãy hiển thị tất cả thông tin của người dùng vừa nhập sang 1 trang HTML khác (xuatthongtin.html). Chú ý: kiểm tra dữ liệu người dùng nhập đầy đủ, chính xác; nếu người dùng nhập thiếu giá trị nào đó hoặc địa chỉ email không hợp lệ thì hiển thị thông báo yêu cầu nhập lại.