›
›

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

pdf 51 trang phuongnguyen 6150
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Lập trình Web - JavaScript cơ bản", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfbai_giang_lap_trinh_web_javascript_co_ban.pdf

Nội dung text: Bài giảng Lập trình Web - JavaScript cơ bản

  1. 2/16/2011 ĐẠI HỌC SÀI GÒN – KHOA CNTT LẬP TRÌNH WEB B JavaScript cơ bản TRÌNH WE PP Ậ GV: Trần Đình Nghĩa VÀ L Ế tdnghia1977@gmail.com K TT Ế THI 1 1
  2. 2/16/2011 Nội dung thiết kế web HTML Form CSS Hosting B Publish website TRÌNH WE PP Ậ VÀ L Ế K TT Ế THI 2 2
  3. 2/16/2011 Nội dung DHTML Ngôn ngữ client-script B JavaScript cơ bản TRÌNH WE PP Ậ VÀ L Ế K TT Ế Thực hành JavaScript THI 3 3
  4. 2/16/2011 Đánh giá 1. Điểm chuyên cần0.1 2. Điểm thực hành 0.4 3. Điểm thi cuối kỳ 050.5 Điểm HP = [1]*0.1 + [2]*0.4 + [3]*0.5 B • Bài thực hành: Đồ án làm theo nhóm TRÌNH WE PP Ậ VÀ L • Bài thi cuối kỳ: Bài thi viết Ế K TT Ế THI 4 4
  5. 2/16/2011 Đồ á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 đồ án.  Các đề tài sẽ có một danh sách yêu cầu cụ thể. B  Giảng viên sẽ đưa ra các tiêu chí chấm đề tài. TRÌNH WE PP Ậ  Thời gian và cách thức nộp hay ch ấm đề tài VÀ L Ế giảng viên sẽ thông báo cụ thể. K TT Ế THI 5 5
  6. 2/16/2011 Đồ á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 . 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 B (33.33%) thì điểm mỗi thành viên là 8. . Ngược lại: (tính theo qui tắc sau) TRÌNH WE PP • A làm 40% Điểm của A = (40%*8)/33.33% = 9.6 Ậ • B làm 30% Điểm của B = (30%*8)/33.33% = 7.2 VÀ L Ế •C làm 30% Điểm của C = (30%*8)/33.33% = 7.2 K TT Ế  Tất cả các điểm trên 10 sẽ được làm tròn thành 10 THI 6 6
  7. 2/16/2011 Tài liệu tham khảo  và http//p://www.w3.or g/ Lisa Lopuck, Web Design For Dummies (2nd Edition), Wiley Publishing, 2006 Craig Grannell, The Essential Guide to CSS and B HTML Web Design, Friends of ED, 2007 TRÌNH WE PP Daaeve Thau, The book ofo Jav aScript (2nd Ậ edition), No Starch Press, 2007 VÀ L Ế K TT Ế THI Google, google, google 7 7
  8. 2/16/2011 Liên hệ  Giảng viên: Trần Đình Nghĩa  Phòng KT & KĐCLGD – ĐHSG  Email: tdnghia1977@gmail.com  Groups: B TRÌNH WE PP Ậ VÀ L Ế K TT Ế THI 8 8
  9. THIẾT KẾ VÀ LẬP TRÌNH WEB Script language & DHTML 9 2/16/2011 9
  10. 2/16/2011 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 web browser  Thiên về xử lý giao diện B  Server-side-script (Php, jsp, asp, aspx, ) TRÌNH WE  Được thực thi ở web server và trả kết quả PP Ậ về client VÀ L Ế K  Thiên về xử lý truy cập hệ thống file trên TT Ế server, kết nối với CSDL trên server. THI 10 10
  11. 2/16/2011 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, )  Khi nhận được 1 yêu cầu, web server (runtime-engine) sẽ thực hiện các lệnh server B script và gởi đến browser các trang web DHTML (chứa HTML, javascript, ) TRÌNH WE P P Ậ VÀ L Ế K T T Ế THI 11 11
  12. 2/16/2011 DHTML  DHTML = Dynamic HyperText Markup Language  DHTML = HTML + CSS + ClientScript + HTML DOM  Tích hợp các tính năng của các trình duyệt B thế hệ thứ 4 (IEv6, Firefox 2.0, Opera 7.0, Netscape 4, ) TRÌNH WE PP Ậ VÀ L Ế K TT Ế THI 12 12
  13. 2/16/2011 JavaScript  Là ngôn ngữ dạng thông dịch  Ngôn n gữ scri pt phổ biến trêeeên Internet  Giúp trang web có tính tương tác  Khả năng của javascript:  Cho phép đặt dữ liệu động vào trang HTML B  Tương tác với các sự kiện của HTML  Thay đổi nội dung của các đối tượng HTML TRÌNH WE  Kết hợp với HTML DOM để tương tác với người PP Ậ dùng (menu động, các nút đồ hoạ, ) VÀ L Ế K TT Ế  Kiểmtradm tra dữ liệuunh nhậppt từ phía client (Form THI Validation) 13 13
  14. 2/16/2011 Nhúng Javascript vào trang web some statements some statements B some statements TRÌNH WE PP Ậ VÀ L Ế K TT Ế THI 14 14
  15. 2/16/2011 Nhúng Javascript vào trang web  Đặt giữa tag và :  Đoạn scri pt sẽ thực thi n gay khi tr an g w eb được mở.  Đặt giữa tag và : B  Đoạn scri pt đượcct thựctc thi khi t tarang web đang mở (sau khi thực thi các đoạn script TRÌNH WE trong phần PP Ậ VÀ L Ế K  Số lượng đoạn script không hạn chế. TT Ế THI 15 15
  16. 2/16/2011 JavaScript  Giới thiệu JavaScript  Chức năng  Cú pháp và quy ước B TRÌNH WE PP Ậ  Cấu trúc lập trình cơ bản VÀ L Ế K TT Ế  Các ví dụ THI 16 16
  17. 2/16/2011 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 riêng (*.js) và nhúng (embed, include) vào file HTML bằng thuộc tính scr của thẻ script B TRÌNH WE  Code JavaScript được browser xử lý cùng PP Ậ thứ tự với các thẻ HTML. Trừ các hàm VÀ L Ế (function) chỉ được thực hiện khi có lời gọi K TT Ế hàm THI 17 17
  18. 2/16/2011 Giới thiệu JavaScript document.write(“Hello world!”); document.wr ite (“He llo world!”) ; B TRÌNH WE P P Ậ VÀ L Ế K TT Ế THI 18 18
  19. 2/16/2011 Giới thiệu JavaScript JavaScriptIntro.html B TRÌNH WE PP Ậ VÀ L Ế K TT Ế //JavaScript document THI alert(“JavaScript in external js file!”); 19 external.js 19
  20. 2/16/2011 JavaScript – Cú pháp & quy ước  Quy ước của ngôn ngữ lập trình  Biếnnvàki và kiểuud dữ liệu  Toán tử và phép so sánh  Cấu trúc điều khiển  Hàm B  Một số đối tượng xây dựng sẵn (build- TRÌNH WE PP in) Ậ VÀ L  Các hàm mở cửa sổ thông báo Ế K TT Ế (pop-up windows) THI 20 20
  21. 2/16/2011 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 ;  Không phân biệt khoảng trắng, tab, xuống dòng trong câu lệnh. B // Ghi chú 1 dòng /* */ Ghi chú 1 khối { } Khốilệnh [ ] Sử dụng cho mảng TRÌNH WE PP Ậ ( ) Sử dụng cho hàm \n, \t Xuống hàng, ký tự Tab VÀ L Ký tự nháy đơn trong chuỗi Ký tự nháy kép trong chuỗi Ế \’ \” K TT Ế THI  Chuỗi phân biệt khi dùng dấu nháy đơn ‘ và dấu nháy kép21 “ 21
  22. 2/16/2011 JavaScript – Phân biệt chuỗi với ‘ và ‘’ B TRÌNH WE PP Ậ VÀ L Ế K TT Ế THI 22 22
  23. 2/16/2011 JavaScript – Biến và kiểu dữ liệu  Cách đặt tên biến  Bắt đầubằng mộtchữ cái hoặcdấu _  A Z,a z,0 9,,_ : phân biệtHOA, Thường  Khai báo biến B  Dùng từ khóa var TRÌNH WE PP  Ví dụ: var count=10,amount; Ậ VÀ L Ế  Thậtsự tồntạikhibắt đầusử dụng lần K TT Ế THI đầutiên 23 23
  24. 2/16/2011 JavaScript – Biến và kiểu dữ liệu  Kiểu dữ liệu  Number : số ngyguyên, thực  Boolean - True or False  String - “Hello World”  object  Array  Null B  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, TRÌNH WE PP Ậ không cần cấp phát VÀ L Ế K TT  Biến có thể lưu kiểu dữ liệu bất kỳ và có thể Ế THI thay đổi kiểu dữ liệu trong quá trình hoạt động 24 24
  25. 2/16/2011 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 !”;  Có thể cộng 2 biến khác kiểu dữ liệu B  Ví dụ: var x; x = “12” + 34.5; // KQ: x = “1234.5” TRÌNH WE PP Ậ VÀ L  Hàm parseInt( ), parseFloat( ) : Đổi chuỗi Ế K TT sang số. Ế THI 25 25
  26. 2/16/2011 JavaScript – Biến và kiểu dữ liệu B str.replace(‘A', ‘E'); phương thức document.write(str); KHÔNG thay đổi TRÌNH WE ggátiá trị PP // str == ‘Anyone’ Ậ VÀ L Ế obj.reverse(); phương thức K TT ĐƯỢC thay đổi Ế document.write(obj); giá trị THI // obj = (3, 2, 1) 26 26
  27. 2/16/2011 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 ++ Increment x = ++y x = 4 B Decrement x = y x = 2  Toán tử ghép chuỗi + : TRÌNH WE PP Ậ  var x = 5, y = x + " tiết"; VÀ L // y = “5 tiết” Ế K TT  Ế varz=2+var z = 2 + “+” +3;//z=+ 3; // z = “2+3” THI 27 27
  28. 2/16/2011 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 += x + = y x = x + y 15 -= x - = y x = x – y 5 B *= x * = y x = x * y 50 /= x / = y x = x / y 2 TRÌNH WE PP Ậ %= x %=y x = x % y 0 VÀ L Ế K TT Ế THI 28 28
  29. 2/16/2011 JavaScript – Toán tử và phép so sánh  Toán tử so sánh: x = 5 Operator DDiiescription EElxample == Bằng x == 8 false === Chính xác bằng (value & type) x ===“5” false != Khác x != 8 true B >Lớnhơn x > 8 false = Lớnhơn hoặc bằng x >= 8 false VÀ L Ế <= Nhỏ hơn hoặc bằng x <= 8 true K TT Ế THI 29 29
  30. 2/16/2011 JavaScript – Cấu trúc điều khiển  if và if {} else {}  switch  while  do {} while  for B  for in TRÌNH WE PP Ậ VÀ L Ế  break và continue K TT Ế THI 30 30
  31. 2/16/2011 JavaScript – IF ELSE var d=new Date(); var time = new Date().getHours(); var time=d .getHours(); if (time Good morning "); document.write("Good day!"); } B var time = new Date().getHours(); if (time Good morning "); TRÌNH WE PP else if (time>10 && time Good day "); VÀ L else Ế K document.write(()" Hello World! "); TT Ế THI 31 31
  32. 2/16/2011 JavaScript – while – do while Phân biệt sự khác nhau giữa 2 cấu trúc B While ( ){} {} Kiểm tra ĐK đúng thực hiện và TRÌNH WE PP Ậ Do{} while( ) VÀ L Ế Thực hiện kiểm tra ĐK đúng K TT Ế THI 32 32
  33. 2/16/2011 JavaScript – for – For IN for (i = 0; i "); } B var x; var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; TRÌNH WE PP mycars[2] = "BMW"; Ậ for (x in mycars) VÀ L { Ế K document.write(mycars[x] + " "); TT Ế } THI 33 33
  34. THIẾT KẾ VÀ LẬP TRÌNH WEB JavaScript – switch case switch JavaScript – 34 2/16/2011 34
  35. 2/16/2011 JavaScript - Function  Hàm không cần khai báo kiểu trả về  Hàcóàm có thể trả về mọi kiểugáu giá trị  Nên khai báo hàm trong thẻ head hoặc trong file .js để tái sử dụng  Hàm chỉ được thực hiện khi có lệnh gọi B  Hààtm thường kết với HTML DOM để xử lýsý sự kiện function tenHam(thamSo1, ) TRÌNH WE PP function tenHam(thamSo1, ) Ậ { { VÀ L Ế K TT //Code Ế return (xxx); THI } 35 } 35
  36. THIẾT KẾ VÀ LẬP TRÌNH WEB aacit-Function JavaScript - 36 2/16/2011 36
  37. 2/16/2011 JavaScript - Một số đối tượng xây dựng sẵn  String object  Number object  Date object  Math object  Array object B  Popup windows TRÌNH WE PP Ậ  Mộtst số hàm toàn cục (global functions) VÀ L thường sử dụng Ế K TT Ế THI 37 37
  38. 2/16/2011 JavaScript – String  var txt="Hello world!"; Thuộc tính / Mô tả Ví dụ / Giải thích Giá trị Phương thức length Chiều dài chuỗi x = txt.length; x==12 x=x = txt.indexOf (‘oo);’); x==4 indexOf() txt.lastIndexOf(‘o’); x==7 Tìm vị trí chuỗicon lastIndexOf() x = txt.indexOf(‘d’); x==10 x = txt.indexOf(‘D!’); x==-1 B txt=‘o World!’ substr() txt=txt.substr(4); Lấychuỗicon txt = ??? substring() txt.substr(4, 2); TRÌNH WE PP Ậ VÀ L txt=txt.replace(‘lo’, ‘’); Ế Thay 1 chuỗi con txt=‘Hel World!’ K replace() txt=txt.replace(‘o’, ‘a’); TT bằng 1 chuỗi khác txt=‘Hella World!’ Ế THI 38 38
  39. 2/16/2011 JavaScript – String  Lớp String của JavaScript hỗ trợ 1 số phương thức để định dạng chuỗi B TRÌNH WE PP Ậ VÀ L Ế K TT Ế  Không nên sử dụng các phương thức THI định dạng của lớp String 39 39
  40. 2/16/2011 JavaScript – Number  var num=45.678; Thuộctính/ Mô tả Ví dụ / Giảithích Phương thức Làm tròn số (quy định số document. write(num. toFixed(2)); toFixed() chữ số củaphầnthập // 45.68 phân) Làm tròn số (quy định số document.write(num.toPrecision(3)); B toPrecision() chữ số) // 45.7 document.write(num.toExponential(2)); TRÌNH WE // 4.57e+1 PP Ậ Đổisố thành dạng số khoa toExponential() học var x = -15000; VÀ L num = num.toPrecision(1); Ế K // -1.5e+4 TT Ế THI 40 40
  41. 2/16/2011 JavaScript - Math Thuộctính/ Mô tả Ví dụ / Giảithích Phương thức PI Hằng số PI document.write (PI("PI: “ + Math.PI .toFixed (2)); // PI: 3.14 document.write(“Euler: “+ Math.E.toFixed(2)); E Hằng số Euler // Euler: 2.72 x = Math.ceil(2.3);// x = 3 ceil() y = Math.floor(3.7); // x = 3 floor() Hàm làm tròn x = Math.round(-4.3); // x = ? round() B y = Math.round(-4.7); // x = ? pow() Hàm lũythừa x = Math.pow(2, 3); x = 8 Hàm phát sinh TRÌNH WE // phát sinh x ngẫu nhiên 1 10 PP rand()dom() số ngẫunhiên Ậ x = Math.round(Math.random() * 9) + 1; từ 0 đến1 VÀ L Ế sin(), asin() K Các hàm lượng TT cos(), acos() Ế giác tan(), atan() THI 41 41
  42. 2/16/2011 JavaScript - Array var arr = new Array(3); arr[0] = 2, arr[1] = 0, arr[2] = 1; Thuộc tính/ Mô tả Ví dụ / Giảithích Kếtquả Phương thức Số phầntử của var x = arr.length; x == 3 length mảng document.write(arr); 2, 0, 1 arr.sort(); B document. write(arr); ??? sort() Sắpxếpmảng arr = arr.sort(); ??? TRÌNH WE PP document. write(arr); Ậ var arr1 = arr.slice(1); VÀ L Ế Lấy1số phần document.write(arr1); 0, 1 K slice() TT Ế tử củamảng arr1 = arr.slice(1, 1); THI document.write(arr1); 0 42 42
  43. 2/16/2011 JavaScript - Date Thuộctíhính / Giá trị Mô tả Phương thức getDate() 1- 31 ate d d getMonth() 0 – 11 getFullYear() xxxx Lấy các thành phầncủa date getHours() 0–23 ; ENT )) getMin ut es() 0- 59 RR getSeconds() 0–59 setFullYear() xxxx Date( CUR B mm setDa te() 1- 31 Gáncác thàn h phầncủa dtdate setMonth() 0–11 setHours() 0–23 Lưu ý: date.setFullYear(2009, 1,1); is the syste TRÌNH WE = new setMinutes() PP 0- 59 Ậ setSeconds() 0–59 VÀ L Ế var date1 = date; date K //date of the TT rr Ế dtdate.setD tDtate(dtdate.ge tDttDate() + 5) ; // dt1<dtdate1 < date va THI // tăng ngày lên 5 ngày, tựđộng đổi tháng, năm 43 43
  44. 2/16/2011 JavaScript – Hàm toàn cục (global functions) Hàm Mô tả isNaN() Kiểmtra1đốitượng có giá trị là số hay không NNb()umber() Đổi 1 đối tượng sang kiểusố String() Đổi1đốitượng sang kiểuchuỗi B TRÌNH WE PP Ậ VÀ L Ế K TT Ế THI 44 44
  45. THIẾT KẾ VÀ LẬP TRÌNH WEB aacit–Hàm toànc JavaScript – 45 ụ c (globalfunctions) 2/16/2011 45
  46. 2/16/2011 JavaScript – Các hàm mở cửa sổ (pop-up windows) Hàm Mô tả alert(msg) Mở cửasổ thông báo confirm(msg) Mở cửasổ chờ người dùng trả lờiYes/No prompt(msg, defaul_value) Mở cửasổ cho người dùng nhập alert('Alert used to debug!'); B TRÌNH WE PP Ậ VÀ L Ế K TT Ế THI 46 46
  47. THIẾT KẾ VÀ LẬP TRÌNH WEB JavaScript – Các hàm m Các JavaScript – ở 47 c ử a s ổ (pop-up windows) 2/16/2011 47
  48. THIẾT KẾ VÀ LẬP TRÌNH WEB JavaScript – Các hàm m Các JavaScript – ở 48 c ử a s ổ (pop-up windows) 2/16/2011 48
  49. 2/16/2011 Tham khảo    B  TRÌNH WE PP Ậ VÀ L  Google . !!! Ế K TT Ế THI 49 49
  50. 2/16/2011 ĐẠI HỌC SÀI GÒN – KHOA CNTT LẬP TRÌNH WEB B THỰC HÀNH TRÌNH WE JavaScript cơ bản PP Ậ VÀ L Ế K TT Ế THI 50 50
  51. 2/16/2011 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 có lỗi trở xuống sẽ KHÔNG được thực hiện B  Debug bằng cách làm từng bước và hàm alert TRÌNH WE PP Ậ  Bài tập code JavaScript: VÀ L Ế BTJavaScript.pdf K TT Ế THI 51 51