Bài giảng Lập trình web - Javascript cơ bản

2/16/2011 1 ĐẠI HỌC SÀI GÒN – KHOA CNTT LẬP TRÌNH WEB B P T R Ì N H W E JavaScript cơ bản T K Ế V À L Ậ P GV: Trần Đình Nghĩa tdnghia1977@gmail.com T H I Ế T 1 2/16/2011 2 Nội dung thiết kế web HTML Form CSS B Hosting P T R Ì N H W E Publish website T K Ế V À L Ậ P T H I Ế T 2 2/16/2011 3 Nội dung DHTML Ngôn ngữ client-script B P T R Ì N H W E JavaScript cơ bản T K Ế V À L Ậ P Thực hành JavaScript T H I Ế T 3 2/16/2011 4 Đánh giá 1. Điểm chuyên cần 0.1 2. Điểm thực hành 0.4 3 Điểm thi cuối kỳ 0 5 B . . Điểm HP = [1]*0.1 + [2]*0.4 + [3]*0.5 P T R Ì N H W E • Bài thực hành: Đồ án làm theo nhóm T K Ế V À L Ậ P • Bài thi cuối kỳ: Bài thi viết T H I Ế T 4 2/16/2011 5 Đồ án website  Sinh viên tự chọn nhóm làm việc: 1 nhóm 3- 4sv.  Mỗi nhóm sẽ chọn 1 đăng ký đề tài cụ thể cho B đồ án.  Các đề tài sẽ có một danh sách yêu cầu cụ thể. P T R Ì N H W E  Giảng viên sẽ đưa ra các tiêu chí chấm đề tài.  Thời i à á h thứ ộ h hấ đề tài T K Ế V À L Ậ P g an v c c c n p ay c m giảng viên sẽ thông báo cụ thể. T H I Ế T 5 2/16/2011 6 Đồ án website  Đánh giá đồ án môn học và tính điểm cho mỗi thành viên trong nhóm sẽ theo qui tắc sau:  Điểm đồ án không phải là điểm của mỗi thành viên nhóm  Điểm cá nhân căn cứ trên % công việc làm trong nhóm  Vd: Điểm đồ án của nhóm 1: là 8 điểm B  Nhóm 1 có 3 thành viên ( A, B, C)  Nếu mỗi thành viên đều đóng góp công sức bằng nhau P T R Ì N H W E (33.33%) thì điểm mỗi thành viên là 8.  Ngược lại: (tính theo qui tắc sau) • A làm 40%  Điểm của A = (40%*8)/33 33% = 9 6 T K Ế V À L Ậ P . . • B làm 30%  Điểm của B = (30%*8)/33.33% = 7.2 • C làm 30%  Điểm của C = (30%*8)/33.33% = 7.2 T H I Ế T 6  Tất cả các điểm trên 10 sẽ được làm tròn thành 10 2/16/2011 7 Tài liệu tham khảo  và Lisa Lopuck, Web Design For Dummies (2nd Edition) Wiley Publishing 2006 B , , Craig Grannell, The Essential Guide to CSS and P T R Ì N H W E HTML Web Design, Friends of ED, 2007 Dave Thau, The book of JavaScript (2nd T K Ế V À L Ậ P edition), No Starch Press, 2007 T H I Ế T 7 Google, google, google ….. 2/16/2011 8 Liên hệ Giảng viên: Trần Đình Nghĩa Phòng KT & KĐCLGD – ĐHSG Email: tdnghia1977@gmail com B . Groups: P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 8 2/16/2011 9 Script language & DHTML B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 9 2/16/2011 10 Script language  Script : Ngôn ngữ lập trình thông dịch giúp website tương tác với người dùng  Client-side-script (JavaScript, VBScript, …)  Được tải về máy client và thực thi bằng B web browser  Thiên về xử lý giao diện P T R Ì N H W E  Server-side-script (Php, jsp, asp, aspx,…)  Được thực thi ở web server và trả kết quả T K Ế V À L Ậ P về client  Thiên về xử lý truy cập hệ thống file trên T H I Ế T 10 server, kết nối với CSDL trên server. 2/16/2011 11 Script language  Khi Browser gởi yêu cầu truy cập 1 trang web trên web server có chứa script server-side và client-side (HTML, client-side script, css, …) B  Khi nhận được 1 yêu cầu, web server (runtime-engine) sẽ thực hiện các lệnh server à ở ế á P T R Ì N H W E script v g i đ n browser c c trang web DHTML (chứa HTML, javascript, …) T K Ế V À L Ậ P T H I Ế T 11 2/16/2011 12 DHTML  DHTML = Dynamic HyperText Markup Language  DHTML = HTML + CSS + ClientScript + HTML DOM B  Tích hợp các tính năng của các trình duyệt P T R Ì N H W E thế hệ thứ 4 (IEv6, Firefox 2.0, Opera 7.0, Netscape 4, …) T K Ế V À L Ậ P T H I Ế T 12 2/16/2011 13 JavaScript  Là ngôn ngữ dạng thông dịch  Ngôn ngữ script phổ biến trên Internet  Giúp trang web có tính tương tác  Khả năng của javascript: B  Cho phép đặt dữ liệu động vào trang HTML  Tương tác với các sự kiện của HTML P T R Ì N H W E  Thay đổi nội dung của các đối tượng HTML  Kết hợp với HTML DOM để tương tác với người T K Ế V À L Ậ P dùng (menu động, các nút đồ hoạ, …)  Kiểm tra dữ liệu nhập từ phía client (Form T H I Ế T 13 Validation) 2/16/2011 14 Nhúng Javascript vào trang web some statements some statements scr p B P T R Ì N H W E some statements ê / T K Ế V À L Ậ P T H I Ế T 14 2/16/2011 15 Nhúng Javascript vào trang web  Đặt giữa tag và :  Đoạn script sẽ thực thi ngay khi trang web được mở. B  Đặt giữa tag và :  Đoạn script được thực thi khi trang web P T R Ì N H W E đang mở (sau khi thực thi các đoạn script trong phần T K Ế V À L Ậ P  Số lượng đoạn script không hạn chế. T H I Ế T 15 2/16/2011 16 JavaScript  Giới thiệu JavaScript  Chức năng B  Cú pháp và quy ước P T R Ì N H W E  Cấu trúc lập trình cơ bản T K Ế V À L Ậ P C T H I Ế T 16  ác ví dụ 2/16/2011 17 Giới thiệu JavaScript  Web browser thực thi thẻ script khi load trang web HTML theo thứ tự từ trên xuống dưới  Source code JavaScript có thể đặt trong file B riêng (*.js) và nhúng (embed, include) vào file HTML bằng thuộc tính scr của thẻ script P T R Ì N H W E  Code JavaScript được browser xử lý cùng T K Ế V À L Ậ P thứ tự với các thẻ HTML. Trừ các hàm (function) chỉ được thực hiện khi có lời gọi hàm T H I Ế T 17 2/16/2011 18 Giới thiệu JavaScript document.write(“Hello world!”); d i (“ ll ld!”) B ocument.wr te He o wor ; P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 18 2/16/2011 19 Giới thiệu JavaScript JavaScriptIntro.html B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 19 //JavaScript document alert(“JavaScript in external js file!”); external.js 2/16/2011 20 JavaScript – Cú pháp & quy ước  Quy ước của ngôn ngữ lập trình  Biến và kiểu dữ liệu  Toán tử và phép so sánh ấ ề ể B  C u trúc đi u khi n  Hàm P T R Ì N H W E  Một số đối tượng xây dựng sẵn (build- in) T K Ế V À L Ậ P  Các hàm mở cửa sổ thông báo (pop-up windows) T H I Ế T 20 2/16/2011 21 JavaScript – Cú pháp & quy ước  JavaScript có cú pháp, ký hiệu tương tự như Java và C++  Phân biệt hoa thường  Mọi lệnh phải kết thúc bằng dấu ; B  Không phân biệt khoảng trắng, tab, xuống dòng trong câu lệnh. P T R Ì N H W E // Ghi chú 1 dòng /* ..*/ Ghi chú 1 khối { } Khối lệnh [ ] Sử dụng cho mảng T K Ế V À L Ậ P ( ) Sử dụng cho hàm \n, \t Xuống hàng, ký tự Tab \’ Ký tự nháy đơn trong chuỗi \” Ký tự nháy kép trong chuỗi T H I Ế T 21  Chuỗi phân biệt khi dùng dấu nháy đơn ‘ và dấu nháy kép “ 2/16/2011 22 JavaScript – Phân biệt chuỗi với ‘ và ‘’ B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 22 2/16/2011 23 JavaScript – Biến và kiểu dữ liệu  Cách đặt tên biến  ắ ầ ằ ấB t đ u b ng một chữ cái hoặc d u _  A..Z,a..z,0..9, : phân biệt HOA, Thường B _  Khai báo biến P T R Ì N H W E  Dùng từ khóa var  Ví dụ: var count=10 amount; T K Ế V À L Ậ P ,  Thật sự tồn tại khi bắt đầu sử dụng lần T H I Ế T 23 đầu tiên 2/16/2011 24 JavaScript – Biến và kiểu dữ liệu  Kiểu dữ liệu  Number : số nguyên, thực  Boolean - True or False  String - “Hello World”  object B  Array  Null P T R Ì N H W E  Trong JavaScript, mọi thứ là Object  từ khóa new để cấp phát. Một số kiểu dữ liệu cơ bản, T K Ế V À L Ậ P không cần cấp phát  Biến có thể lưu kiểu dữ liệu bất kỳ và có thể T H I Ế T 24 thay đổi kiểu dữ liệu trong quá trình hoạt động 2/16/2011 25 JavaScript – Biến và kiểu dữ liệu  Biến tự đổi kiểu dữ liệu khi giá trị thay đổi  Ví dụ: var x = 10; x = “hello world !”; B  Có thể cộng 2 biến khác kiểu dữ liệu  Ví dụ: P T R Ì N H W E var x; x = “12” + 34.5; // KQ: x = “1234.5” T K Ế V À L Ậ P  Hàm parseInt(…), parseFloat(…) : Đổi chuỗi sang số T H I Ế T 25 . 2/16/2011 26 JavaScript – Biến và kiểu dữ liệu B P T R Ì N H W E str.replace(‘A', ‘E'); document.write(str); // str ‘Anyone’ phương thức KHÔNG thay đổi giá trị T K Ế V À L Ậ P obj.reverse(); document write(obj); == phương thức ĐƯỢC thay đổi T H I Ế T 26 . // obj = (3, 2, 1) giá trị 2/16/2011 27 JavaScript – Toán tử và phép so sánh  Các toán tử số học: với y = 3 Operator Description Example Result +, -, *, / Cộng, trừ, nhân, chia % Modulus (div remainder) x = y%2 x = 1 B ++ Increment x = ++y x = 4 -- Decrement x = --y x = 2 P T R Ì N H W E  Toán tử ghép chuỗi + : T K Ế V À L Ậ P  var x = 5, y = x + " tiết"; // y = “5 tiết”  var z = 2 + “+” + 3; // z = “2+3” T H I Ế T 27 2/16/2011 28 JavaScript – Toán tử và phép so sánh  Toán tử gán: x = 10 và y = 5 Operator Example Same as Result (x) = x = y 5 B += x + = y x = x + y 15 -= x - = y x = x – y 5 P T R Ì N H W E *= x * = y x = x * y 50 /= x / = y x = x / y 2 T K Ế V À L Ậ P %= x %=y x = x % y 0 T H I Ế T 28 2/16/2011 29 JavaScript – Toán tử và phép so sánh  Toán tử so sánh: x = 5 O D i i E lperator escr pt on xamp e == Bằng x == 8  false ằ B === Chính xác b ng (value & type) x ===“5”  false != Khác x != 8  true P T R Ì N H W E > Lớn hơn x > 8  false < Nhỏ hơn x < 8  true T K Ế V À L Ậ P >= Lớn hơn hoặc bằng x >= 8  false <= Nhỏ hơn hoặc bằng x <= 8  true T H I Ế T 29 2/16/2011 30 JavaScript – Cấu trúc điều khiển  if và if {} else {}  switch  while B  do {} while  for P T R Ì N H W E  for .. in T K Ế V À L Ậ P  break và continue T H I Ế T 30 2/16/2011 31 JavaScript – IF … ELSE var d=new Date(); var time=d getHours(); var time = new Date().getHours(); if (time < 10) . if (time<10) { document.write("Good morning"); } document.write("Good morning!"); else document.write("Good day!"); / B P T R Ì N H W E var time = new Date().getHours(); if (time<10) document.write("Good morning"); else if (time>10 && time<16) T K Ế V À L Ậ P document.write("Good day"); else document.write("Hello World!"); T H I Ế T 31 2/16/2011 32 JavaScript – while – do … while B Phân biệt sự khác nhau giữa 2 cấu trúc While () {} P T R Ì N H W E Kiểm tra ĐK đúng  thực hiện và T K Ế V À L Ậ P Do{} while() Thực hiện  kiểm tra ĐK đúng T H I Ế T 32 2/16/2011 33 JavaScript – for – For … IN for (i = 0; i <= 5; i++) { document.write("The number is " + i); document.write(""); } B var x; P T R Ì N H W E var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW"; T K Ế V À L Ậ P for (x in mycars) { document.write(mycars[x] + ""); T H I Ế T 33 } 2/16/2011 34 JavaScript – switch case B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 34 2/16/2011 35 JavaScript - Function  Hàm không cần khai báo kiểu trả về  Hàm có thể trả về mọi kiểu giá trị  Nên khai báo hàm trong thẻ head hoặc trong file .js để tái sử dụng B  Hàm chỉ được thực hiện khi có lệnh gọi  Hàm thường kết với HTML DOM để xử lý sự P T R Ì N H W E kiện function tenHam(thamSo1 ) function tenHam(thamSo1,…) T K Ế V À L Ậ P ,… { //Code { … T H I Ế T 35 } return (xxx); } 2/16/2011 36 JavaScript - Function B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 36 2/16/2011 37 JavaScript - Một số đối tượng xây dựng sẵn  String object  Number object  Date object B  Math object  Array object P T R Ì N H W E  Popup windows  Một số hàm toàn cục (global functions) T K Ế V À L Ậ P thường sử dụng T H I Ế T 37 2/16/2011 38 JavaScript – String  var txt="Hello world!"; Thuộc tính / Phương thức Mô tả Ví dụ / Giải thích Giá trị length Chiều dài chuỗi x = txt.length; x==12 x = txt indexOf(‘o’); x==4 B indexOf() lastIndexOf() Tìm vị trí chuỗi con . txt.lastIndexOf(‘o’); x = txt.indexOf(‘d’); x = txt.indexOf(‘D!’); x==7 x==10 x==-1 P T R Ì N H W E substr() substring() Lấy chuỗi con txt=txt.substr(4); txt.substr(4, 2); txt=‘o World!’ txt = ??? T K Ế V À L Ậ P replace() Thay 1 chuỗi con bằng 1 chuỗi khác txt=txt.replace(‘lo’, ‘’); txt=txt.replace(‘o’, ‘a’); txt=‘Hel World!’txt=‘Hella World!’ T H I Ế T 38 2/16/2011 39 JavaScript – String  Lớp String của JavaScript hỗ trợ 1 số phương thức để định dạng chuỗi B P T R Ì N H W E T K Ế V À L Ậ P  Không nên sử dụng các phương thức T H I Ế T 39 định dạng của lớp String 2/16/2011 40 JavaScript – Number  var num=45.678; Thuộc tính / Phương thức Mô tả Ví dụ / Giải thích Làm tròn số (quy định số ố ầ document write(num toFixed(2)); B toFixed() chữ s của ph n thập phân) . . // 45.68 toPrecision() Làm tròn số (quy định số document.write(num.toPrecision(3)); P T R Ì N H W E chữ số) // 45.7 document.write(num.toExponential(2)); // 4.57e+1 T K Ế V À L Ậ P toExponential() Đổi số thành dạng số khoahọc var x = -15000; num = num.toPrecision(1); // -1.5e+4 T H I Ế T 40 2/16/2011 41 JavaScript - Math Thuộc tính / Phương thức Mô tả Ví dụ / Giải thích PI Hằng số PI document write("PI: “ + Math PI toFixed(2)); E Hằng số Euler . . . // PI: 3.14 document.write(“Euler: “+ Math.E.toFixed(2)); // Euler: 2.72 B ceil() floor() round() Hàm làm tròn x = Math.ceil(2.3);// x = 3 y = Math.floor(3.7); // x = 3 x = Math.round(-4.3); // x = ? y = Math.round(-4.7); // x = ? P T R Ì N H W E pow() Hàm lũy thừa x = Math.pow(2, 3); x = 8 d () Hàm phát sinh ố ẫ hiê // phát sinh x ngẫu nhiên 1 10 T K Ế V À L Ậ P ran om s ng u n n từ 0 đến 1 x = Math.round(Math.random() * 9) + 1; sin(), asin() cos() acos() Các hàm lượng T H I Ế T 41 , tan(), atan() giác … 2/16/2011 42 JavaScript - Array var arr = new Array(3); arr[0] = 2, arr[1] = 0, arr[2] = 1; Th ộ tí h/u c n Phương thức Mô tả Ví dụ / Giải thích Kết quả length Số phần tử của var x = arr.length; x == 3 B mảng document.write(arr); 2, 0, 1 arr.sort(); document write(arr); P T R Ì N H W E sort() Sắp xếp mảng . arr = arr.sort(); document write(arr); ??? ??? T K Ế V À L Ậ P . slice() Lấy 1 số phần tử ủ ả var arr1 = arr.slice(1); document.write(arr1); 1 li (1 1) 0, 1 T H I Ế T 42 c a m ng arr = arr.s ce , ; document.write(arr1); 0 2/16/2011 43 JavaScript - Date Th ộ í h / d a t e u c t n Phương thức Giá trị Mô tả getDate() getMonth() 1- 31 0 11 ) ; R E N T d getFullYear() getHours() getMinutes() – xxxx 0 – 23 0- 59 Lấy các thành phần của date B D a t e ( ) C U R R m getSeconds() 0 – 59 setFullYear() tD t () xxxx 1 31 Gá á thà h hầ ủ d t P T R Ì N H W E = n e w i s t h e s y s t e m se a e setMonth() setHours() setMinutes() - 0 – 11 0 – 23 0 59 n c c n p n c a a e Lưu ý: date.setFullYear(2009, 1,1); T K Ế V À L Ậ P r d a t e / / d a t e o f t h e setSeconds() - 0 – 59 var date1 = date; d t tD t (d t tD t () + 5) // d t 1 < d t T H I Ế T 43 v a r a e.se a e a e.ge a e ; a e a e // tăng ngày lên 5 ngày, tự động đổi tháng, năm 2/16/2011 44 JavaScript – Hàm toàn cục (global functions) Hàm Mô tả isNaN() Kiểm tra 1 đối tượng có giá trị là số hay không N b () Đổi 1 đối kiể ốum er tượng sang u s String() Đổi 1 đối tượng sang kiểu chuỗi B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 44 2/16/2011 45 JavaScript – Hàm toàn cục (global functions) B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 45 2/16/2011 46 JavaScript – Các hàm mở cửa sổ (pop-up windows) Hàm Mô tả alert(msg) Mở cửa sổ thông báo confirm(msg) Mở cửa sổ chờ người dùng trả lời Yes / No prompt(msg, defaul_value) Mở cửa sổ cho người dùng nhập B alert('Alert used to debug!'); P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 46 2/16/2011 47 JavaScript – Các hàm mở cửa sổ (pop-up windows) B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 47 2/16/2011 48 JavaScript – Các hàm mở cửa sổ (pop-up windows) B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 48 2/16/2011 49 Tham khảo   B  P T R Ì N H W E  T K Ế V À L Ậ P  Google…. !!! T H I Ế T 49 2/16/2011 50 ĐẠI HỌC SÀI GÒN – KHOA CNTT LẬP TRÌNH WEB B P T R Ì N H W E THỰC HÀNH JavaScript cơ bản T K Ế V À L Ậ P T H I Ế T 50 2/16/2011 51 Thực hành  Demo code JavaScript (Lưu ý cách xác định lỗi)  JavaScript không báo lỗi! Từ đoạn code ó lỗi t ở ố ẽ KHÔNG đượ thự B c r xu ng s c c hiện   Debug bằng cách làm từng bước và P T R Ì N H W E hàm alert T K Ế V À L Ậ P  Bài tập code JavaScript: BTJavaScript.pdf T H I Ế T 51