Giáo trình Lập trình Web - Chương 2: Ngôn ngữ kịch bản-Javascript

Nội dung text: Giáo trình Lập trình Web - Chương 2: Ngôn ngữ kịch bản-Javascript

1. Chương 2. Ngôn ngữ kịch bản -JavaScript HTHT – Lập trình Web – Chương II : Javascript
2. 2.1. Khái niệm về Script và kịch bản JavaScript HTHT – Lập trình Web – Chương II : Javascript
3. 2.1.1. Định nghĩa về Script và một số vấn đề cơ bản của JavaScript. HTHT – Lập trình Web – Chương II : Javascript
4. 1) Định nghĩa: Script có thể được viết bằng 2 ngôn ngữ : + JavaScript + VBScript ( Visual Basic Script). HTHT – Lập trình Web – Chương II : Javascript
5. 2) Một số vấn đề cơ bản của JavaScript Vị trí của Javascript ở đâu trên trang HTML -nằm ở phần đầu -hay phần thân của trang web, Đoạn mã của nó nằm trong 2 thẻ đóng mở sau: HTHT – Lập trình Web – Chương II : Javascript
6. New Page 1 // doan ma cua javascript // doan ma cua javascript HTHT – Lập trình Web – Chương II : Javascript
7. Ví dụ: New Page 1 // đưa ra lời cnh báo alert(“chuc cac ban thanh cong”); // doan ma cua javascript window.document.write(“chuc thanh cong”); HTHT – Lập trình Web – Chương II : Javascript
8. lưu ý: + trong một số trình duyệt mới không cần 2 nhóm nó chỉ dùng trong các trình duyệt cũ + Bạn không thể đặt bất kỳ thẻ HTML nào trong phạm vi thẻ và . + Javascript viết bởi netscape lên ngôn ngữ có sự phân biệt giữa chữ hoa và chữ thường . HTHT – Lập trình Web – Chương II : Javascript
9. 2.1.2. giới hạn của Javascript HTHT – Lập trình Web – Chương II : Javascript
10. - Nó là mã nguồn mở, lên không thể bảo mật được các đoạn mã của nó, đó cũng là ưu điểm cho phép bạn cắt dán đoạn mã script từ trang này sang trang khác - JavaScript không thể thao tác với máy chủ mà chỉ làm việc trên trang có chèn chúng. - JavaScript không thể tạo các hình ảnh đồ họa mà chỉ có thể thao tác với hình ảnh có sẵn. - JavaScript làm việc khác nhau trên các trình duyệt khác nhau HTHT – Lập trình Web – Chương II : Javascript
11. 2.2. Làm việc với các JavaScript độc lập HTHT – Lập trình Web – Chương II : Javascript
12. 2.2.1. khởi động (thực hiện) một JavaScript HTHT – Lập trình Web – Chương II : Javascript
13. Khi đoạn mã JavaScript được viết trong trang HTML. Nó sẽ được chạy theo 2 cách : + chạy tự động khi trình duyệt nạp trang + chạy khi người truy cập thực hiện một tác vụ HTHT – Lập trình Web – Chương II : Javascript
14. Cách 2 là cách hay được người thiết kế lựa chọn. Ví dụ bạn muốn JavaScript của bạn chạy khi bạn nhấn vào một hình nh hay một nút lệnh nào đó. - Các tác vụ này được gọi là những sự kiện bản chất. - Bạn có thể sử dụng chúng như những tác nhân quyết định thời điểm tiến hành script HTHT – Lập trình Web – Chương II : Javascript
15. Danh sách các tác vụ - Onload : - OnUnload: 2 thẻ onload và onunload được sủ dụng trong thẻ BODY - OnClick: - OnDBClick : - OnMouseOver: - OnMouseOut: - OnChange: - OnSubmit: - Onreset: - Onselect: - Onblur - Onfocus - Onkeydown - Onkeyup - Onkeypress - (www. w3schools.com) HTHT – Lập trình Web – Chương II : Javascript
16. HTHT – Lập trình Web – Chương II : Javascript
17. Chú ý : - Phía trong các tác vụ có thể trình bày một dòng JavaScript hoàn chỉnh cùng dấu (;) chú ý là các dấu nháy kép của JavaScript sẽ thay bằng dấu nháy đơn nếu không trình duyệt sẽ không hiểu - Các tác vụ trên không được đặt trong thuộc tính của hình ảnh VD2: khi đưa con trỏ vào hình ảnh ảnh đổi thành hình khác, khi di chuyển đi ảnh trở về như cũ; HTHT – Lập trình Web – Chương II : Javascript
18. 2.2.2. Khai báo và sử dụng trong JavaScript HTHT – Lập trình Web – Chương II : Javascript
19. a) Khai báo biến Các biến trong JavaScript được khai báo như sau: var tenbien=giá trị khởi tạo ban đầu (nếu có); var dsbien; Trong đó: + var : + Tenbien: + giá trị khởi tạo ban đầu: + dấu “;” HTHT – Lập trình Web – Chương II : Javascript
20. VD: var hoten= “Trạch Văn Đoanh”; var tuoi=30, heso=1.5; HTHT – Lập trình Web – Chương II : Javascript
21. b) Ghi chú trong JavaScript Trong JavaScript để ghi chú hoặc giải thích cho một câu lệnh dùng từ khóa : // chú thích cho một dòng /* chú thích cho một đoạn */ HTHT – Lập trình Web – Chương II : Javascript
22. c) các phép toán sử dụng + phép toán số học : +,-,*,/ + Phép toán cộng chuỗi : + (vd: hoten=“Nguyen “ + “Van” -> hoten=“nguyen van”) + Các phép toán so sánh: , =,==,!= + Các phép toán logic: &&, ||, ! HTHT – Lập trình Web – Chương II : Javascript
23. d) Cách viết (hiển thị) kết quả ra trình duyệt window.document.write(biểu thức); hoặc: document.write(biểuthuc) trong đó: biểu thức có thể là một chuỗi ký tự, một biến, một biểu thức tính toán VD: window.document.write(“chao cac ban”); var hoten=“Tuc Anh Ach”; window.document.write(“ten toi la “+hoten); window.document.write(“ 3 + 5 = “+3+5); HTHT – Lập trình Web – Chương II : Javascript
24. e) đưa ra một lời cảnh báo alert(lời cảnh báo); lời cảnh báo: có thể là một biến, chuỗi ký tự, một biểu thức VD: var myname=“Trach Van Doanh”; alert(myname); HTHT – Lập trình Web – Chương II : Javascript
25. f) Hàm lấy giá trị từ người sử dụng prompt(“Giá trị hiển thị yêu cầu”,”giá trị mặc đinh ban đầu nếu có”); vd: Nhập vào họ tên và hiển thị họ tên vừa nhập lên trình duyệt var myname=prompt(“cho biet ten ban: ”,”“); window.document.write(“ho ten vua nhap:”+myname); HTHT – Lập trình Web – Chương II : Javascript
26. 2.2.3. Các cấu trúc điều khiển của JavaScript HTHT – Lập trình Web – Chương II : Javascript
27. a) Câu lệnh rẽ nhánh if If (điều kiện ) If (câu điều kiện 1) If(câu điều kiện 1) { khối câu lệnh; } { câu lệnh 1;} {câu lệnh 1;} else else if(câu điều kiện 2) { câu lệnh 2;} { câu lênh 2;} else if else {câu lệnh n+1;} Điều kiện - là các biểu thức so sánh giá trị trả về là true và false. - Ngoài ra trong câu lệnh điều kiện có thể sử dụng các phép toán && và || như trong C để kết hợp các câu lệnh điều kiện. - Trong JavaScript cho phép các câu lệnh if lồng nhau. HTHT – Lập trình Web – Chương II : Javascript
28. Lệnh rẽ nhánh Switch switch(n) { case bt1: khoi cau lenh 1 break; case bt2: khoi cau lenh 2 break; Case btn: khoi cau lenh n break; default: khoi cau lenh n+1 } HTHT – Lập trình Web – Chương II : Javascript
29. Vd 1: Nhập một số từ bàn phím cho biết đó là số chẵn hay số lẻ var so=prompt(“nhap so:”,””); if(so%2==0) window.document.write(“ so ban vua nhap la so chan”); else window.document.write(“ so ban vua nhap la so le”); HTHT – Lập trình Web – Chương II : Javascript
30. Vd2: nhập vào một số, kiểm tra số đó có phải là tháng không var thang=prompt("cho biet thang:",""); switch(thang) { case "1": document.write(" thang 1");break; case "2": document.write(" thang 2");break; case "3": document.write(" thang 3");break; case "4": document.write(" thang 4");break; case "5": document.write(" thang 5");break; case "6": document.write(" thang 6");break; case "7": document.write(" thang 7");break; case "8": document.write(" thang 8");break; case "9": document.write(" thang 9");break; case "10": document.write(" thang 10");break; case "11": document.write(" thang 11");break; case "12": document.write(" thang 12");break; default: document.write(" So vua nhap khong phai thang"); } HTHT – Lập trình Web – Chương II : Javascript
31. b) câu lệnh lặp while while (điều kiện lặp) { câu lệnh;} vd: Viết ra màn hình 5 dòng hello world bằng vòng while var c=1; while( c "); c++; } HTHT – Lập trình Web – Chương II : Javascript
32. c) Vòng lặp for for(phần khởi tạo ; kiểm tra điều kiện lặp ; tăng|giảm ) { các câu lệnh; } các thành phần trong lệnh for giống C VD: Viết ra một ma trận 5x5 chữ X trên màn hình for(var i=0;i ”); } HTHT – Lập trình Web – Chương II : Javascript
33. d) câu lệnh break dùng để thoát khỏi vòng lặp gần nhất có chứa lệnh break (nó sử dụng cho c for và while) trong JavaScript có chứa các câu lệnh lặp vĩnh cửu được viết như sau: while(1) { câu lệnh; } bạn có thể dùng break để thoát khỏi khi cần thiết HTHT – Lập trình Web – Chương II : Javascript
34. 2.2.4. Hàm và mảng trong JavaScript HTHT – Lập trình Web – Chương II : Javascript
35. a) Tạo các hàm JavaScript function tenham(ds tham số) { câu lệnh; } + tên hàm : là tên do người dùng đặt, quy tắc đặt tên hàm giống quy tắc đặt tên biến + ds tham số: có hoặc không có, nếu có thì các tham số phân cách nhau bởi dấu, (phẩy) + dấu () là dầu bắt buộc phi có kể c không có tham số nào trong hàm HTHT – Lập trình Web – Chương II : Javascript
36. VD1: đây là thủ tục nhập và in ra họ tên đầy đủ của bạn function nhap_va_in() { var hodem=prompt(“ cho biet ho dem”,”“); var ten=prompt(“cho biet ten”,”“); var fullname=hodem+ten; alert(“ten day du cua ban la :”+fullname); } đó là một hàm không tra về giá trị (gọi là thủ tục) bạn có thể gọi ra khi kích vào một biểu tượng nào đó ví dụ tạo một liên kết khi kích vào nó không mở đến trang nào cả bằng cách đặt href =“#” HTHT – Lập trình Web – Chương II : Javascript
37. VD2: hàm có giá trị trả về function nhap_va_in() { var hodem=prompt(“ cho biet ho dem”,”“); var ten=prompt(“cho biet ten”,”“); var fullname=hodem+ten; return fullname; } VD3: Hàm có tham số function tinhtong(a,b) { var tong=a+b; return tong; } document.write(“tong cua 3 + 5 la “+tong(3,5)); HTHT – Lập trình Web – Chương II : Javascript
38. b) Mảng trong JavaScript var tenmang=new Array(); var tenmang=new Array( các giá trị khởi tạo ban đầu); Khi bạn đã tạo ra mảng bạn có thể gán giá trị cho các phần tử của mảng giống như ngôn ngữ C: VD1 : var A=new Array(); A[0]=“Hồng”; A[1]=“Lê”; A[2]=“Tao”; A[3]=“ổi”; A[4]=“Cam”; Hoặc khởi tạo giá trị ngay ban đầu var A=new Array("Hồng","Lê","Táo","ổi","Cam"); HTHT – Lập trình Web – Chương II : Javascript
39. VD2: Khởi tạo và in giá trị của mảng var dayso=new Array(0,4,6,2,8); for(i=0;i<=4;i++) document.write(dayso[i]+" "); VD3: Khai báo một mảng và nhập dữ liệu cho mảng var x=new Array(); //nhap gia tri cho mang for(var k=0;k<=3;k++) x[k]=prompt("nhap x["+k+"]",""); // viet gia tri tu mang for(var j=0;j<=3;j++) window.document.write(x[j]+" "); HTHT – Lập trình Web – Chương II : Javascript
40. c) một số hàm có sẵn hay sử dụng trong JavaScript - Hàm Date(): trả về ngày giờ hiện tại của hệ thống VD: document.write(“ ngay gio hien tại cua hệ thống là”+Date()); ngay gio hien tại cua hệ thống là Tue Sep 02 21:53:20 2003 Trong hàm Date() có các đối tượng sau: +getDate(): tr về ngày của tháng dưới dạng số nguyên từ 1 đến 31 +getMonth(): tr về tháng hiện tại với số nguyên từ 0 đến 11 ( 0 là tháng 1 và 11 là tháng 12) +getDay(): tr về ngày trong tuần dưới dạng số nguyên với 0 là chủ nhật 1 là thứ 2 +getYear(): tr về năm hiện tại với 4 số nếu năm đó nằm trong khong 1900 - 1999 và trả về 2 số nếu năm đó nằm trong khong 2000 trỏ đi +getHours(): giờ trong ngày dạng số nguyên từ 0 đến 23 +getMinutes(): số phút dạng số nguyên từ 0 đến 59 +getSeconds(): số giây dưới dạng số nguyên từ 0 đến 59 HTHT – Lập trình Web – Chương II : Javascript
41. Nếu bạn muốn lấy từng phần tử của nó bạn dùng cách khai báo đối tượng sau: Var bien=new Date(); Khi đó bạn có thể lấy giá trị của thành phần Date qua ví dụ sau var bien=new Date(); document.write(" ngay hien tai la"+bien.getDay()); document.write(" thang hien tai la"+bien.getMonth()); document.write(" Nam hien tai la"+bien.getYear()); document.write(" gio hien tai la"+bien.getHours()); HTHT – Lập trình Web – Chương II : Javascript
42. Vd: dùng mảng và Hàm Date chuyển ngày giờ hệ thống thành tiếng việt var thu=new Array("chủ nhất","Thứ 2","th 3","thứ 4","thứ 5","thứ 6","thứ 7"); var thang=new Array("tháng 1","tháng 2","tháng 3","tháng 4","tháng 5","tháng 6","tháng 7","tháng 8","tháng 9","tháng 10","tháng 11","tháng 12"); var date=new Date(); var t=date.getDay(); var ng=date.getDate(); var th=date.getMonth(); var nam=date.getYear(); window.document.write(" "); window.document.write(thu[t]+" ngày "+ng+" "+thang[th]+ " năm "+nam); window.document.write(" "); HTHT – Lập trình Web – Chương II : Javascript
43. Đối tượng trong trang HTML Khi trình duyệt duyệt trang HTML của bạn nó hiểu trang web được tổ chức và phân cấp như sau: Window Location Link document Image Frame Form Navigator HTHT – Lập trình Web – Chương II : Javascript
44. + Đối tượng Window: là đối tượng của của sổ hiện tại đối tượng này có các thuộc tính sau: -close(): đóng của sổ hiện tại đang được mở ( VD: window.close()) -open(): mở một của sổ mới cú pháp đầy đủ của open() như sau var window_name= window.open(URL,”window_name”,”feature1, feature2, ”); HTHT – Lập trình Web – Chương II : Javascript
45. các lựa chọn feature1, feature2, Đặc điểm Chức năng Direction Thêm các nút định hướng cho trình duyệt Height=x Chiều cao của cửa sổ Width=x độ rộng của cột Menubar Thêm thanh menu Resizable=true Cho phép hay không cho phép thay đổi nút kích thước của sổ Scrollbars Thêm các thanh cuộn nếu nội dung của trang lớn hn kích thước của sổ Status Thêm thanh trạng thái HTHT – Lập trình Web – Chương II : Javascript
46. VD: Chuong trinh thu nghiem mo cua so HTHT – Lập trình Web – Chương II : Javascript
47. - window.status=”str text”: thay đổi nội dung thanh trạng thái vd: window.status= “trang quang cao thong tin” - window.location=”URL”: thay đổi trang thành trang khác - window.resizeTo(x,y); thay đổi kích cỡ cửa sổ có width=x, height=y - window.moveTo(x,y): di chuyển cửa sổ đến vị trí mới có toạ độ (x,y) - window.moveBy(x,y): dịch chuyển với số gia x,y - window.location.bgcolor= “yellow”; thay màu nền - window.location.reload(); nạp lại trang HTHT – Lập trình Web – Chương II : Javascript
48. Đối tượng Document của đối tượng window Tập hợp tất cả các hình ảnh, liên kết, biểu mẫu, và các đối tượng khác trên một trang web VD1: thay đổi ảnh của đối tượng ảnh khi kích vào một dòng văn bản VD2: khi đưa con trỏ vào hình ảnh ảnh đổi thành hình khác, khi di chuyển đi ảnh trở về như cũ; HTHT – Lập trình Web – Chương II : Javascript
49. tương tác với văn bản Sử dụng thẻ function chuotvao(idname) { idname.style.color=”red”; idname.style.cursor=”hand”; idname.style.font=”26pt”; } function chuotra(idname) { idname.style.color=”black”; idname.style.cursor=”point”; idname.style.font=”12pt”; } HTHT – Lập trình Web – Chương II : Javascript
50. 2.2.6. JavaScript với Form trong HTML HTHT – Lập trình Web – Chương II : Javascript
51. Để tương tác với các giá trị của form ta có thể theo mô tả sau; tencuaso.document.tenform.tendoituongcuaform.value Ví dụ: Tạo một hộp văn bản hoten, và một nút lệnh khi kích vào sẽ gán tên cho hộp văn bản function gangt() {window.document.gt.hoten.value="trach van doanh" } HTHT – Lập trình Web – Chương II : Javascript
52. Chi tiết khi đọc và thiết lập từng thành phần của form a) Đọc và thiết lập thông tin từ các trường TEXT Đọc: var x=window.document.myform.nametext.value; Thiết lập: window.document.myform.nametext.value=newvalue; b) Đọc và thiết lập thông tin từ các trường TEXTAREA Đọc: var x=window.document.myform.nametextarea.value; Thiết lập: window.document.myform.nametextarea.value=newvalue; c) Thiết lập chọn cho các hộp kiểm CHECKBOX chọn: window.document.myform.namecheck.checked=true; Bỏ chọn: window.document.myform.namecheck.checked=false; HTHT – Lập trình Web – Chương II : Javascript
53. d) Thiết lập chọn cho các hộp chọn RADIO chọn: window.document.myform.nameradio.checked=true; Bỏ chọn: window.document.myform.nameradio.checked=false; Nếu một nhóm radio có tên age thì khi đó Nút số một là age[0] nút số 2 là age[1] nút số 3 là age[2] nút số 4 là age[3] Khi đó sẽ chọn và bỏ chọn theo window.document.myform.nameradio[id].checked HTHT – Lập trình Web – Chương II : Javascript
54. e) Đọc và thiết lập giá trị cho menu thả và danh sách cuộn SELECT - Cho biết phần tử thứ mấy trong danh sách được chọn (chỉ số được tính từ 0) x=window.document.myform.nameselect.selectedIndex; - Giá trị tại phần tử được chọn y= window.document.myform.nameselect.options[x].value; gộp 2 dòng trên ta được một dòng lệnh sau: y=window.document.myform.nameselect.options[window.document.myform. nameselect.selectedIndex].value; HTHT – Lập trình Web – Chương II : Javascript