Bài giảng Lập trình Web - JavaScript cơ bản
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:
- bai_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
- 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/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
- 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
- 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
- 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
- 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
- 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
- 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
- THIẾT KẾ VÀ LẬP TRÌNH WEB Script language & DHTML 9 2/16/2011 9
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- THIẾT KẾ VÀ LẬP TRÌNH WEB JavaScript – switch case switch JavaScript – 34 2/16/2011 34
- 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
- THIẾT KẾ VÀ LẬP TRÌNH WEB aacit-Function JavaScript - 36 2/16/2011 36
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- THIẾT KẾ VÀ LẬP TRÌNH WEB aacit–Hàm toànc JavaScript – 45 ụ c (globalfunctions) 2/16/2011 45
- 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
- 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
- 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
- 2/16/2011 Tham khảo B TRÌNH WE PP Ậ VÀ L Google . !!! Ế K TT Ế THI 49 49
- 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
- 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