Bài Giảng Lập Trình Web -Chương 5: Javascript

Chia sẻ: Nguyen Van Nghia | Ngày: | Loại File: PDF | Số trang:20

Thêm vào BST

Báo xấu

117
lượt xem 28
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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ỉ,...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Bài Giảng Lập Trình Web -Chương 5: Javascript

NộI DUNG 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 Trình bày: Nguyễn Phú Trường 1/5/2011 2 Bộ môn Mạng máy tính & Truyền thông JAVASCRIPT LÀ GÌ? NộI DUNG 1 2 3 Giới thiệu về JavaScript Được thiết kế cùng Được viết trực tiếp Khác với Java với HTML tạo vào trang HTML Biến, kiểu dữ liệu, phép toán trang Web sinh động Là ngôn ngữ Là ngôn ngữ Lệnh điều khiển script, hướng đối thông dịch tượng, chứa các dòng lệnh thực thi được Popup Sử dụng các đối tượng 1/5/2011 3 1/5/2011 4 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
JAVASCRIPT DÙNG ĐỂ LÀM GÌ? VÍ Dụ 1 Về JAVASCRIPT Viết Cung trang cấp HTML thông tin về sinh browser động Kiểm tra Xuất Tạ o dữ liệu động trước cookie trang khi HTML submit Đọc, Bắt và viết phần tử /nội xử lý dung các sự trang kiện HTML 1/5/2011 5 1/5/2011 6 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông VÍ Dụ 2 Về JAVASCRIPT VÍ Dụ 3 Về JAVASCRIPT 1/5/2011 7 1/5/2011 8 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
VÍ Dụ 4 Về JAVASCRIPT VÍ Dụ 5 Về JAVASCRIPT 1/5/2011 9 1/5/2011 10 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông BIẾN VÍ D ụ Đặc điiểm Khai báo Gán trịị Đặc đ ểm Khai báo Gán tr • var strname var strname = Chứa dữ liệu • some value = "Hege" Phân biệt hoa và Hoặc thường Hoặc • strname = some Phạm vi: • strname = value Toàn cục "Hege" Cục bộ 1/5/2011 11 1/5/2011 12 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
KIểU Dữ LIệU KIểU Dữ LIệU Kiểu dữ liệu Kiểu dữ liệu Số nguyên : 10, -301, 1974, etc. Mảng : Số thực và số chấm động : 13.5, 1.35E1 myArray = new Array(10); foo = new Array(5); Luận lý : true, false myArray[0] = 56; myArray[9] = 44; Chuỗi : “do thanh nghi”, “sinh nam 1974”, \b, \n, \r, \t, \\ colors = new Array(); var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service." colors[99] = "midnightblue"; document.write(quote) numberOfElements = myArray.length; Kết quả sẽ là : He read "The Cremation of Sam McGee" by R.W. Service. 1/5/2011 13 1/5/2011 14 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông KIểU Dữ LIệU CHUYểN KIểU Dữ LIệU Kiểu dữ liệu Kiểu dữ liệu Đối tượng : Được chuyển tự động : var answer = 42 answer = "Thanks for all the fish..." x = "The answer is " + 42 Chuyển chuỗi sang số : ParseInt(), ParseFloat() 1/5/2011 15 1/5/2011 16 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
PHÉP TOÁN PHÉP TOÁN Phép toán Gán : = Phép tăng hoặc giảm 1 : ++, -- Gán rút gọn : +=, -=, *=, /=, %= So sánh : ==, !=, = Phép tính số học : +, -, *, /, % Phép toán luận lý : &&, ||, !, Phép : (cond) ? Expr1:Expr2 1/5/2011 17 1/5/2011 18 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông PHÉP TOÁN PHÉP TOÁN 1/5/2011 19 1/5/2011 20 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
PHÉP TOÁN PHÉP TOÁN 1/5/2011 21 1/5/2011 22 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông ĐịNH NGHĨA HÀM ĐịNH NGHĨA HÀM Định nghĩa Ví dụ function functionname(var1,var2,...,varX) function total(a,b) { { some code x=a*b } return x } product=total(2,3) 1/5/2011 23 1/5/2011 24 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
ĐịNH NGHĨA HÀM ĐịNH NGHĨA HÀM Ví dụ function displaymessage() { alert("Hello World!") } 1/5/2011 25 1/5/2011 26 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông NộI DUNG ĐịNH NGHĨA HÀM 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 1/5/2011 27 1/5/2011 28 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
CấU TRÚC IF-ELSE CấU TRÚC IF-ELSE Cú pháp if (condition) { statements1 } Hay if (condition) { statements1 } else { statements2 } 1/5/2011 29 1/5/2011 30 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông CấU TRÚC IF-ELSE 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 31 1/5/2011 32 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
CấU TRÚC SWITCH-CASE 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 1/5/2011 34 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông CấU TRÚC LặP FOR 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 1/5/2011 36 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
CấU TRÚC LặP FOR CấU TRÚC WHILE, DO-WHILE Cú pháp while (var
CấU TRÚC WHILE, DO-WHILE CấU TRÚC WHILE, DO-WHILE 1/5/2011 41 1/5/2011 42 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông BREAK TRONG CấU TRÚC LặP CONTINUE TRONG CấU TRÚC LặP 1/5/2011 43 1/5/2011 44 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
NộI DUNG ALERT("SOMETEXT") 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 1/5/2011 45 1/5/2011 46 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông CONFIRM("SOMETEXT") PROMPT("SOMETEXT","DEFAULTVALUE") 1/5/2011 47 1/5/2011 48 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
KếT HợP VớI FORM KếT HợP VớI FORM 1/5/2011 49 1/5/2011 50 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông NộI DUNG ĐốI TƯợNG Các đối tượng Giới thiệu về JavaScript String Date Biến, kiểu dữ liệu, phép toán Array Boolean Lệnh điều khiển Math HTML DOM Popup Sử dụng các đối tượng 1/5/2011 51 1/5/2011 52 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG STRING ĐốI TƯợNG STRING 1/5/2011 53 1/5/2011 54 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông ĐốI TƯợNG DATE Đố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 1/5/2011 56 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG DATE ĐốI TƯợNG DATE 1/5/2011 57 1/5/2011 58 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông ĐốI TƯợNG DATE Đố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 59 1/5/2011 60 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG ARRAY Đố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 61 1/5/2011 62 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông ĐốI TƯợNG ARRAY ĐốI TƯợNG ARRAY Ví dụ Ví dụ var arr = new Array(3) var arr = new Array(6) arr[0] = "Jani" arr[0] = "Jani" arr[1] = "Tove" arr[1] = "Hege" arr[2] = "Hege" arr[2] = "Stale" var arr2 = new Array(3) arr[3] = "Kai Jim" arr2[0] = "John" arr[4] = "Borge" arr2[1] = "Andy" arr[5] = "Tove" arr2[2] = "Wendy" document.write(arr + "") document.write(arr.concat(arr2)) document.write(arr.sort()) 1/5/2011 63 1/5/2011 64 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG BOOLEAN Đố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 65 1/5/2011 66 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông ĐốI TƯợNG MATH ĐốI TƯợNG MATH 1/5/2011 67 1/5/2011 68 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông
ĐốI TƯợNG MATH Đố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 69 1/5/2011 70 Bộ môn Mạng máy tính & Truyền thông Bộ môn Mạng máy tính & Truyền thông ĐốI TƯợNG HTML DOM ĐốI TƯợNG HTML DOM 1/5/2011 71 1/5/2011 72 Bộ môn Mạng máy tính & Truyền thông 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.