Giáo trình Ngôn ngữ javascript

NGÔN NGỮ JAVASCRIPT Giảng viên: Hoàng Văn Hiệp Viện CNTT – ĐH Bách Khoa Hà Nội JAVASCRIPT LÀ GÌ?  Là ngôn ngữ kịch bản đƣợc thực hiện trên máy client.  Đƣợc nhúng vào trong trang web.  Đƣợc thiết kế để tăng khả năng tƣơng tác cho trang web.  Là ngôn ngữ thông dịch  Đƣợc hỗ trợ bởi trình duyệt  Đƣợc phát triển bởi hãng Netscape (khác với Java) JAVASCRIPT CÓ THỂ LÀM GÌ?  Đặt dữ liệu động vào trong trang HTML  Đáp ứng các sự kiện  Đọc ghi các đối tƣợng HTML  Sử dụng để kiểm tra dữ liệu trƣớc khi gửi đến server  Lƣu trữ và đọc thông tin ngƣời sử dụng (cookie) CHÈN JAVASCRIPT VÀO HTML  Chèn trực tiếp mã vào trong HTML <!-- // Các dòng lệnh JavaScript //-->  Chèn một file JavaScript chứa mã <script language=“JavaScript” src=“hello.js”> VÍ DỤ <script language=“JavaScript”> <!-- document.write(“Hello world!”); //--> VỊ TRÍ ĐẶT JAVASCRIPT  Các kịch bản đƣợc đặt trong phần Chỉ đƣợc thực hiện khi có lời gọi Đáp ứng các sự kiện Thƣờng là các hàm  Các kịch bản đƣợc đặt trong phần Đƣợc thực hiện khi trang web đƣợc nạp bởi trình duyệt VỊ TRÍ ĐẶT JAVASCRIPT  Có thể đặt các kịch bản ở cả phần và phần  Số lƣợng các kịch bản đƣợc nhúng vào HTML không giới hạn CHÚ THÍCH TRONG JAVASCRIPT  Giống nhƣ trong ngôn ngữ C++  Chú thích cho một dòng // Dòng chú thích  Chú thích cho một đoạn /* Đoạn chú thích */ CHÚ Ý  Các lệnh trong JavaScript phân biệt chữ hoa và chữ thƣờng Ví dụ Document.Write(“”) là sai  Kết thúc lệnh bằng dấu ; BIẾN TRONG JAVASCRIPT  Đƣợc sử dụng để lƣu trữ dữ liệu và có thể thay đổi khi kịch bản đƣợc thực hiện  Quy tắc đặt tên biến  Phải bắt đầu bằng một chữ cái hoặc ký tự gạch dƣới _ Ví dụ: x, y, z, length, _height, _width  Phân biệt chữ hoa và chữ thƣờng Biến X khác với biến x KHAI BÁO BIẾN  Cú pháp: var tên_biến; Ví dụ var st; var length;  Khởi tạo giá trị cho biến var tên_biến = giá_trị_khởi_tạo; Ví dụ var st = “Hello”; var length = 100;  Không xác định kiểu cụ thể của biến GÁN GIÁ TRỊ CHO BIẾN  Cú pháp tên_biến = giá_trị; Ví dụ st = “Hello world”; length = 10;  Chú ý Kiểu của biến đƣợc xác định dựa vào giá trị gán => có thể thay đổi đƣợc kiểu KIỂU DỮ LIỆU  Kiểu số  x = 10;  Kiểu logic  ans = true;  Kiểu chuỗi  s = “Hello”; CÁC TOÁN TỬ SỐ HỌC Toán tử Ý nghĩa Ví dụ (y = 5) Kết quả + Cộng x = y + 2 x = 7 - Trừ x = y – 2 x = 3 * Nhân x = y * 2 x = 10 / Chia x = y / 2 x = 2.5 % Lấy số dư x = y % 2 x = 1 ++ Cộng 1 x = ++y x = 6 -- Trừ 1 x = --y x = 4 PHÉP CỘNG VỚI CHUỖI KÝ TỰ  Ghép các chuỗi với nhau  Ví dụ s1 = “hello”; s2 = “world”; s = s1 + s2; // s = “helloworld”  Cộng chuỗi với số, kết quả thu đƣợc là chuỗi  Ví dụ s1 = “5”; s2 = 5; s = s1 + s2; // s = 55 CÁC TOÁN TỬ SO SÁNH Toán tử Ý nghĩa Ví dụ (x = 5) Kết quả == So sánh bằng (giá trị) x == 5 true === So sánh bằng (giá trị và kiểu) x === “5” false != So sánh khác x != 3 true > Lớn hơn x > 6 false < Nhỏ hơn x < 7 true >= Lớn hơn hoặc bằng x >= 6 false <= Nhỏ hơn hoặc bằng x <= 6 true TOÁN TỬ LOGIC Toán tử Ý nghĩa Ví dụ (x = 5, y = 7) Kết quả && và (x > 5) && (y <= 7) false || hoặc (x > 5) || (y <= 7) true ! đảo !(x == y) true TOÁN TỬ ĐIỀU KIỆN  Cú pháp tên_biến = (điều_kiện)?giá_trị_1:giá_trị_2;  Tùy vào điều kiện mà biến đƣợc gán giá trị 1 hoặc giá trị 2  Ví dụ x = 4; y = (x > 5)?x + 1:x – 1; // y = 3 BIỂU THỨC LỰA CHỌN IFELSE  Cú pháp Dạng 1: if (điều_kiện) { // lệnh } Dạng 2: if (điều_kiện) { // lệnh } else { // lệnh } VÍ DỤ var d = new Date(); var time = d.getHours(); if (time < 12) { document.write(“Good morning”); } else if ((time >= 12) && (time < 18)) { document.write(“Good afternoon”); } else { document.write(“Good evening”); } BIỂU THỨC LỰA CHỌN SWITCH  Cú pháp switch (tên_biến) { case giá_trị_1: // khối lệnh 1 break; case giá_trị_2: // khối lệnh 2 break; default: // khối lệnh default } VÍ DỤ Switch Case Statement var date = new Date(); var day = date.getDay(); switch (day) { case 0: document.write("Today is Sunday."); break; case 6: document.write("Today is Saturday."); break; default: document.write("Today is not weekend."); } CÁC HỘP THOẠI THÔNG BÁO  Hộp thoại alert Cú pháp alert(“thông_báo”); Ví dụ: alert(“Hello world!”); CÁC HỘP THOẠI THÔNG BÁO  Hộp thoại confirm Cú pháp return = confirm(“thông_báo”); Ví dụ: var ret = confirm(“Are you sure?”); if (ret == true) document.write(“You pressed OK”); else document.write(“You pressed Cancel”); CÁC HỘP THOẠI THÔNG BÁO  Hộp thoại prompt Cú pháp value = prompt(“thông_báo”, “giá_trị_mặc định”); Ví dụ name = prompt(“What’s your name?”, “Peter”); document.write(“Hello ” + name); HÀM TRONG JAVASCRIPT  Định nghĩa hàm Cú pháp function tên_hàm() { // các lệnh thực hiện bên trong hàm }  Lời gọi hàm tên_hàm(); VÍ DỤ Function 1 function thongbao() { alert("Hello"); } thongbao(); TRUYỀN THAM SỐ CHO HÀM  Cú pháp function tên_hàm(tham_số_1, tham_số_2, ) { }  Lời gọi hàm tên_hàm(tham_số_1, tham_số_2, ); VÍ DỤ Function 2 function thongbao(msg) { alert(msg); } thongbao("Chao cac ban!"); GIÁ TRỊ TRẢ VỀ CỦA HÀM  Cú pháp function tên_hàm(danh_sách_tham_số) { // nội dung hàm return giá_trị_trả_về; }  Lời gọi hàm giá_trị = tên_hàm(danh_sách_tham_số); VÍ DỤ Function 2 function cong3so(x, y, z) { var t = x + y + z; return t; } var t = cong3so(1, 2, 3); document.write(t); BIẾN TOÀN CỤC BIẾN ĐỊA PHƢƠNG  Biến toàn cục Định nghĩa bên ngoài hàm Tồn tại từ khi đƣợc định nghĩa đến khi trang web đóng lại Có thể truy nhập từ mọi nơi  Biến địa phƣơng Định nghĩa bên trong hàm Tồn tại từ khi đƣợc định nghĩa đến khi kết thúc hàm Chỉ truy nhập đƣợc ở bên trong hàm VÕNG LẶP FOR  Cú pháp for (biến=giá_trị_bắt_đầu; biến<giá_trị_kết_thúc;thay_đổi_giá_trị_biến) { // các lệnh cần lặp }  Lặp một đoạn mã theo số lần xác định VÍ DỤ For Loop var i = 0; for (i = 0; i < 10; i++) { document.write(i + ""); } VÕNG LẶP WHILE  Cú pháp while (điều_kiện) { // các lệnh cần lặp }  Lặp khi nào điều kiện còn đúng  Kiểm tra điều kiện trƣớc khi thực hiện lệnh VÍ DỤ While Loop var i = 0; while (i < 10) { document.write(i + ""); i++; } VÕNG LẶP DO WHILE  Cú pháp do { // các lệnh cần lặp } while (điều_kiện);  Lặp khi nào điều kiện còn đúng  Kiểm tra điều kiện sau khi thực hiện lệnh VÍ DỤ Do While Loop var i = 0; do { document.write(i + ""); i++; } while (i < 10); LỆNH BREAK VÀ LỆNH CONTINUE  Lệnh break Thoát khỏi vòng lặp hiện tại  Lệnh continue Chuyển tới vòng lặp tiếp theo VÍ DỤ - LỆNH BREAK Break Statement <script language="JavaScript"> var i; for (i = 0; i < 10; i++) { if (i == 3) break; document.write(i + ""); } VÍ DỤ - LỆNH CONTINUE Continue Statement var i; for (i = 0; i < 10; i++) { if (i == 3) continue; document.write(i + ""); } CÁC KÝ TỰ ĐẶC BIỆT  Một số ký tự đặc biệt  “ „ & \  Hiện ký tự đặc biệt sử dụng JavaScipt  \” \‟ \& \\ \n \r \t CÁC SỰ KIỆN TRONG JAVASCRIPT  Là các hành động đƣợc xác định bởi JavaScript.  Là thuộc tính của các thành phần trong HTML.  Mỗi thành phần trong trang web có những sự kiện nào đó.  Các sự kiện có thể kích hoạt các hàm JavaScript. MỘT SỐ SỰ KIỆN  Mở, đóng một trang web  Di chuyển chuột trên các đối tƣợng, nhấp chuột vào các đối tƣợng  Thay đổi giá trị các đối tƣợng  Nhập ký tự từ bàn phím HÀM XỬ LÝ SỰ KIỆN  Là một hàm JavaScript  Đƣợc thực hiện khi sự kiện xảy ra  Cú pháp sự_kiện=“tên_hàm();” SỰ KIỆN MỞ ĐÓNG TRANG WEB  Mở một trang web  onLoad  Đóng một trang web  onUnload VÍ DỤ Load and Unload Event function load() { alert("Mo trang web"); } function unload() { alert("Dong trang web"); } SỰ KIỆN CHUỘT  onMouseDown  onMouseUp  onMouseMove  onMouseOver  onMouseOut VÍ DỤ Mouse Events function mouseDown() { alert("onMouseDown event"); } function mouseUp() { alert("onMouseUp event"); } function mouseMove() { alert("onMouseMove event"); } function mouseOver() { alert("onMouseOver event"); } function mouseOut() { alert("onMouseOut event"); } <img src="globe.png" onMouseDown="mouseDown();" onMouseUp="mouseUp();" onMouseMove="mouseMove();" onMouseOver="mouseOver();" onMouseOut="mouseOut();"> SỰ KIỆN CHUỘT  onClick  onDblClick VÍ DỤ Mouse Events function Click() { alert("onClick event"); } function DblClick() { alert("onDblClick event"); } <img src="globe.png" onClick="Click();" onDblClick="DblClick();"> CÁC ĐỐI TƯỢNG TRONG JAVASCIPT  JavaScript là một ngôn ngữ lập trình hướng đối tượng  Mỗi đối tượng bao gồm các thuộc tính và phương thức  Thuộc tính là giá trị gắn với đối tượng  Ví dụ: một chuỗi có độ dài khác nhau  Phương thức là hành động được thực hiện trên đối tượng  Ví dụ: đổi các ký tự trong chuỗi thành chữ hoa THUỘC TÍNH VÀ PHƢƠNG THỨC  đối_tƣợng.thuộc_tính  đối_tƣợng.phƣơng_thức() ĐỐI TƢỢNG STRING  Đƣợc tạo khi gán giá trị với một chuỗi  Ví dụ: var st = “Hello”; // st là đối tƣợng chuỗi document.write(st.length); // thuộc tính var stt1 = st.toUpperCase(); // phƣơng thức  Thuộc tính  length độ dài chuỗi (số ký tự) MỘT SỐ PHƢƠNG THỨC  charAt(index)  trả về ký tự tại vị trí index trong chuỗi  indexOf(searchvalue, fromindex)  tìm vị trí của chuỗi ký tự searchvalue từ vị trí fromindex  nếu không tìm thấy thì trả về -1  lastIndexOf(searchvalue, fromindex)  giống indexOf nhƣng bắt đầu từ bên phải MỘT SỐ PHƢƠNG THỨC  match(searchString)  trả về chuỗi searchString nếu tìm thấy, trả về null nếu không tìm thấy  search(searchString)  trả về vị trí chuỗi searchString nếu tìm thấy, trả về null nếu không tìm thấy  substr(start, length)  trích ra chuỗi ký tự có độ dài length bắt đầu tự vị trí start ĐỐI TƢỢNG DATE  Đƣợc sử dụng để làm việc với dữ liệu là thời gian  Tạo đối tƣợng Date  var myDate = new Date();  sau khi khởi tạo, đối tƣợng lƣu trữ thời gian hiện tại MỘT SỐ PHƢƠNG THỨC  getDate()  trả về dữ liệu là ngày (1 – 31)  getDay()  trả về dữ liệu là thứ (0 – 6)  getMonth()  trả về dữ liệu tháng (0 – 11)  getFullYear()  trả về dữ liệu năm, gồm 4 chữ số MỘT SỐ PHƢƠNG THỨC  getHours()  trả về dữ liệu giờ (0 – 23)  getMinutes()  trả về dữ liệu phút (0 – 59)  getSeconds()  trả về dữ liệu giây (0 – 59) MỘT SỐ PHƢƠNG THỨC  setDate(day) Thiết lập ngày (1 – 31)  setMonth(month) Thiết lập tháng (0 – 11)  setFullYear(year) Thiết lập năm MỘT SỐ PHƢƠNG THỨC  setHours(hour) Thiết lập giờ (0 – 23)  setMinutes(minute) Thiết lập phút (0 – 59)  setSeconds(second) Thiết lập giây (0 – 59) ĐỐI TƢỢNG ARRAY  Lƣu trữ mảng dữ liệu  Khai báo var myArray = new Array();  Gán dữ liệu cho mảng myArray[0] = “value1”; myArray[1] = “value2”; myArray[2] = “value3”;  Gán giá trị lúc khởi tạo var myArray = new Array(“value1”, “value2”, “value3”); TRUY NHẬP ĐỐI TƢỢNG MẢNG  tên_mảng[chỉ_số]  Ví dụ:  document.write(myArray[0]) MỘT SỐ PHƢƠNG THỨC  concat(array1, array2,)  ghép các mảng với nhau  pop()  trả về và xóa đối tƣợng cuối cùng trong mảng  push()  thêm 1 hoặc nhiều đối tƣợng vào sau mảng, trả về độ dài mới ĐỐI TƢỢNG MATH  Thực hiện các hàm toán học  Không khai báo đối tƣợng mới  Sử dụng đối tƣợng toàn cục MỘT SỐ THUỘC TÍNH  Math.E  hằng số Euler  Math.PI  hằng số PI MỘT SỐ PHƢƠNG THỨC  Math.abs(x)  Math.cos(x)  Math.sin(x)  Math.log(x)  Math.exp(x)  Math.sqrt(x)  Math.round(x)  Math.pow(x, y) ĐỐI TƢỢNG WINDOWS  Là đối tƣợng ở mức cao nhất trong JavaScript  Biểu diễn cho một cửa sổ trình duyệt  Đƣợc tự động tạo khi có thẻ hoặc MỘT SỐ THUỘC TÍNH  closed  kiểm tra cửa sổ đƣợc đóng hay chƣa  document  đối tƣợng con Document  history  đối tƣợng con History  location  đối tƣợng con Location  status  dòng thông báo trên thanh trạng thái MỘT SỐ PHƢƠNG THỨC  alert(), comfirm(), prompt()  open(), close()  đóng mở cửa sổ  focus()  thiết lập focus cho cửa sổ  setTimeout(code, millisec)  thực hiện một đoạn mã sau một khoảng thời gian VÍ DỤ Windows Object function open_new() { mywin = window.open(''); mywin.document.write('Day la cua so moi'); } function close_win() { mywin.close(); } Mo cua so moi <a onClick="close_win()">Dong cua so ĐỐI TƯỢNG SCREEN  Chứa thông tin về màn hình hiển thị  screen.width, screen.height – chiều rộng, chiều cao màn hình  screen.availWidth, screen.availHeight – chiều rộng và chiều cao màn hình (không bao gồm thanh taskbar) VÍ DỤ Screen Object document.write("Kich thuoc man hinh: " + screen.width + "x" + screen.height); ĐỐI TƯỢNG HISTORY  Chứa thông tin về các địa chỉ đã được duyệt bởi trình duyệt  Thuộc tính history.length chỉ ra số các địa chỉ trong history  Phương thức  history.go() nạp lại một địa chỉ cụ thể  history.back() nạp lại địa chỉ trước địa chỉ hiện tại  history.forward() nạp lại địa chỉ sau địa chỉ hiện tại VÍ DỤ History Object <script language="JavaScript"> function myFunc() { var num = prompt("Di chuyen den trang:"); history.go(num); } <script language="JavaScript"> document.write("History Length: " + history.length + ""); Trang truoc <a onClick="history.forward() "> Trang sau Di chuyen den trang xac dinh ĐỐI TƢỢNG DOCUMENT  Biểu diễn toàn bộ thành phần nội dung của trang HTML  Đƣợc sử dụng để truy nhập đến các thành phần THUỘC TÍNH  title  tiêu đề của trang web hiện tại  URL  địa chỉ của trang web hiện tại VÍ DỤ Document Object document.write("Tieu de cua trang web: " + document.title + ""); document.write("Dia chi trang web: " + document.URL + ""); PHƢƠNG THỨC  getElementById()  trả về đối tƣợng thông qua ID của đối tƣợng đó  đƣợc sử dụng để truy nhập đến đối tƣợng  write()  ghi một chuỗi lệnh HTML ra cửa sổ trình duyệt  writeln()  giống lệnh write(), nhƣng chèn thêm ký tự xuống dòng CÁC ĐỐI TƢỢNG DOCUMENT CÁC ĐỐI TƢỢNG DOCUMENT  Truy nhập thông qua thuộc tính của các đối tƣợng  Thuộc tính innerHTML Nội dung văn bản mà đối tƣợng tác động VÍ DỤ Document Object function changeColor() { document.getElementById("myBody").bgColor = "red"; } Thay doi mau nen VÍ DỤ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Thuoc tinh innerHTML function change() { document.getElementById("heading").innerHTML = "Tiêu đề đã thay đổi"; } Đây là tiêu đề đoạn văn setTimeout("change()", 5000); BÀI TẬP