Bài giảng Javascript tổng quan

ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Javascript TỔNG QUAN Giới thiệu  Dynamic HTML DHTML = HTML + CSS + Ngôn ngữ script  Ngôn ngữ script: là ngôn ngữ dạng thông dịch, giúp tăng tính tương tác giữa trang web với người dùng  Javascript  VBscript  … Javascript  Là ngôn ngữ kịch bản dùng để tạo các script ở cả server-side và client-side  Javascript tại server-side (thực thi trên web server):  Kết nối cơ sở dữ liệu  Chia sẻ thông tin cho các người dùng của ứng dụng  Truy cập vào hệ thống file trên server Javascript  Javascript tại client-side (thực thi trên web browser):  Tương tác với người dùng, phát sinh các hành động để đáp lại các sự kiện  Thay đổi nội dung, vị trí các phần tử một cách “động”  Kiểm tra tính hợp lệ của dữ liệu trước khi gửi về web server để xử lý Chèn javascript vào trang html  Liên kết file javascript bên ngoài <script language="Javascript" src=“tên_file.js">  Chèn trực tiếp vào tài liệu html // các câu lệnh  Dùng như giá trị thuộc tính của thẻ <a onClick="alert('Hello world!');“ href="">Click Ví dụ document.write('Sử dụng hộp thoại trong Javascript'); alert('Chào mừng bạn đến với Javascript!'); confirm('Bạn đã sẵn sàng chưa?'); Quy tắc ngữ pháp  Phân biệt chữ hoa và chữ thường  Mỗi câu lệnh kết thúc bởi ;  Dùng cùng cặp ký hiệu mở đóng  Không phân biệt các ký tự khoảng trắng Biến  Tên biến: có thể chứa chữ cái, chữ số, ký hiệu _  Không bắt đầu bằng chữ số  Khai báo bằng từ khóa var VD: var x = 10;  Biến có phạm vi xác định  Toàn cục  Cục bộ Kiểu dữ liệu  Numbers  Boolean  Strings  Null  Object (cấp phát bằng từ khóa new) Lưu ý: một biến có thể thuộc bất kỳ kiểu dữ liệu nào tùy ý Hằng số  Số nguyên: có thể biểu diễn bằng hệ thập phân, nhị phân, thập lục phân  Số thực: có thể có dấu thập phân hoặc e hay E theo sau số nguyên (lũy thừa cơ số 10), số nguyên có thể dương hoặc âm  Boolean: True hoặc False  Null: null (giữ chỗ cho biến)  Chuỗi: đặt trong cặp nháy đơn ‘ ’ hoặc nháy kép “ ” Ký tự đặc biệt trong chuỗi  \b backspace  \f form feed  \n new line  \r carriage return  \t tab Toán tử Số học +, -, *, /, % (chia lấy dư), - (lấy số đối), ++, -- So sánh ==, !=, >, >=, <, <= Logic && (and), || (or), ! (not) Chuỗi + (ghép chuỗi) Khác (condition) ? trueVal : falseVal typeof(value) Biểu thức  Biểu thức là sự kết hợp các biến, hằng số thông qua các toán tử  Các dạng biểu thức  số học: trả về trị số  logic: trả về trị boolean  chuỗi: trả về trị chuỗi Biểu thức quy tắc  Là mẫu để tìm chuỗi ký tự cùng dạng trong một chuỗi  Mẫu đơn giản:  tìm chính xác theo các ký tự trong mẫu  VD: /abc/  Mẫu gồm các ký tự đơn giản và đặc biệt  VD: /ab*c/ Biểu thức quy tắc  Một số ký tự đặc biệt  ? ký tự (trước nó) xuất hiện 0 hoặc 1 lần  * xuất hiện 0 hoặc nhiều lần  + xuất hiện 1 hoặc nhiều lần  {n,m} xuất hiện ít nhất n, nhiều nhất m lần  \w ký tự alphanumeric  \d ký tự số  \s ký tự trắng  […] bất kỳ ký tự nào trong ngoặc Biểu thức quy tắc  Các phương thức:  test kiểm tra mẫu trả về trị true / false  search kiểm tra mẫu trả về chỉ số / -1  exec tìm mẫu và trả về mảng thông tin  match tìm mẫu và trả về mảng thông tin / null  replace tìm và thay chuỗi con  split tách chuỗi thành mảng chuỗi con  Cách gọi phương thức: tên_đối_tượng.tên_phương_thức(tham_số) Biểu thức quy tắc  VD: mau = /abc/ s = mau.test('abcde'); alert(s); Các câu lệnh điều khiển  Điều kiện:  if … else  switch  Lặp  for  while  do … while  for … in  Các từ khóa  break  continue  with Ví dụ  VD: arrMau = new Array('xanh','vàng','đỏ'); for (var i in arrMau) document.write('arrMau[' + i + ']=' + arrMau[i]); Hàm  Hàm định nghĩa sẵn  eval(string) //tính giá trị chuỗi  isNaN(value) //ktra không là số  Hàm do người dùng định nghĩa  Cú pháp function tên_hàm(tsố_1, tsố_2, …) { // các_câu_lệnh }  Hàm có thể trả về giá trị bằng lệnh return Hàm – Ví dụ  Khai báo hàm function Cong(so1, so2){ var tong = so1 + so2; return (tong); }  Gọi hàm var x = Cong(10, 5); ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Javascript CÁC ĐỐI TƯỢNG CƠ BẢN Đối tượng (Object)  Một đối tượng là một gói dữ liệu toàn diện, bao gồm:  các thuộc tính (biến)  các phương thức (hàm)  Truy cập vào thuộc tính tên_đối_tượng.tên_thuộc_tính  Truy cập vào phương thức tên_đối_tượng.tên_phương_thức() Phân cấp đối tượng  Phân cấp đối tượng trong một trang web Các đối tượng trình duyệt Các đối tượng kịch bản Các phần tử HTML Document History Location … String Math Date … Mảng  Mảng dùng để lưu nhiều giá trị vào một biến, phân biệt bởi chỉ số (bắt đầu từ 0)  Mảng trong Javascript được xem như đối tượng. Tạo mảng: mang = new Array([ptử_1, …])  Các thuộc tính: length, indexOf  Các phương thức của mảng: pop, push, reverse, shift, sort Mảng  VD: arrColor = new Array(3); arrColor[0] = 'red'; arrColor[1] = 'green'; arrColor[2] = 'blue'; document.write('' + arrColor); // sắp xếp arrColor.sort(); document.write('' + arrColor); // thêm phần tử arrColor.push('white'); document.write('' + arrColor); Đối tượng String  Dùng để thao tác với chuỗi văn bản  Các cách tạo chuỗi  khai báo biến var s = 'Javascript'; s = 'Javascript';  dùng hàm khởi tạo var s = new String('Javascript'); Đối tượng String  Thuộc tính  length độ dài chuỗi  Phương thức  fontcolor() xác định màu chữ  bold() đậm  italics() nghiêng  strike() gạch giữa  sup() chỉ số trên  sub() chỉ số dưới  toLowerCase() chuyển chữ thường  toUpperCase() chuyển chữ hoa  … Đối tượng String  Ví dụ: s = 'Javascript'; document.write('Độ dài chuỗi ' + s + ' là ' + s.length); document.write('Chữ hoa: ' + s.toUpperCase()); document.write('Chữ thường: ' + s.toLowerCase()); document.write('In đậm: ' + s.bold()); Đối tượng Math  Dùng để thao tác các phép tính toán học nâng cao  Thuộc tính:  PI giá trị pi (~3.1415)  LN10 giá trị lg (~2,302)  E giá trị hằng số Euler (~2.718) Đối tượng Math  Phương thức  abs(num) lấy trị tuyệt đối  sqrt(num) lấy căn bậc 2  sin(num) lấy sin (tính bằng radian)  cos(num) lấy cosin (tính bằng radian)  min(num1, num2) lấy số nhỏ nhất  max(num1, num2) lấy số lớn nhất  round(num) làm tròn Đối tượng Math  Ví dụ: function TinhDT(bk) { var dt; dt = Math.PI * bk * bk; alert ('Diện tích hình tròn có bán kính ' + bk + ' là ' + dt); } Đối tượng Date  Dùng để thiết lập, lấy và xử lý các thông tin thời gian  Đối tượng Date lưu thời gian theo số mili giây, tính từ 01/01/1970 00:00:00  Cách tạo tên_biến = new Date(tham_số); Tham số có thể:  rỗng  dạng 'mm dd, yyyy, hh:mm:ss' Đối tượng Date  Thuộc tính: không có  Phương thức: Date có các nhóm phương thức sau  set thiết lập giá trị  get lấy giá trị  to trả về các chuỗi giá trị từ Date  parse và UTC phân tích các chuỗi  Các giá trị  giây, phút 0 – 59  giờ 0 – 23  ngày (tuần) 0 – 6  ngày (tháng) 1 – 31  tháng 0 – 11  năm từ 1900 trở đi Đối tượng Date Nhóm phương thức get  getDate lấy ngày trong tháng (1-31)  getDay lấy ngày trong tuần (0-6)  getMonth lấy tháng (0-11)  getYear lấy năm (năm – 1990)  getTime lấy số mili giây (từ 1/1/1970)  getHours lấy giờ (0-23)  getMinutes lấy phút (0-59)  getSeconds lấy giây (0-59) Đối tượng Date Nhóm phương thức set  setDate gán ngày trong tháng (1-31)  setMonth gán tháng (0-11)  setYear gán năm (năm lớn hơn 1990)  setTime gán số mili giây (từ 1/1/1970)  setHours gán giờ (0-23)  setMinutes gán phút (0-59)  setSeconds gán giây (0-59) Đối tượng Date  Nhóm phương thức to  toGMTString chuyển sang dạng GMT  toLocalString chuyển sang dạng địa phương  Nhóm phương thức Parse và UTC  Date.parse(date string) số mili giây trong một chuỗi ngày tính từ 1/1/1970  Date.UTC(year, month, day, hours, mins, secs) số mili giây của một đối tượng thời gian tính từ 1/1/1970 Đối tượng Date  Ví dụ: d = new Date(); document.write('Hôm nay là ngày ' + d.getDate() + ' tháng ' + (d.getMonth()+1) + ' năm ' + (d.getYear()+1900)); ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Javascript CÁC ĐỐI TƯỢNG TRÌNH DUYỆT Đối tượng Window  Dùng để truy xuất thông tin về trạng thái cửa sổ làm việc  Thuộc tính:  document tài liệu html trong cửa sổ trình duyệt  history lưu trữ thông tin các url đã được thăm  location thông tin url hiện tại  …  Phương thức:  alert()/prompt()/confirm()hiển thị các hộp thoại  blur()/focus() đặt đối tượng mất/nhận tiêu điểm  close()/open() đóng cửa sổ, mở cửa sổ mới  …  Xem thêm Đối tượng Window  Ví dụ: Nhập URL <input type="button" name="btn" value="Mở" onClick="window.open(frm.txt.value)"/> Đối tượng Location  Thông tin về URL hiện hành  Thuộc tính  href (toàn bộ) chuỗi URL hiện hành  hash dữ liệu sau dấu # của chuỗi href  host tên máy chủ và số cổng của URL  hostname tên máy chủ của URL  Phương thức  assign() tải tài liệu html mới  reload() tải lại trang hiện hành  replace() thay thế trang hiện hành bởi trang khác với URL xác định  Xem thêm Đối tượng History  Thông tin các URL gần đây  Thuộc tính  length số URL đã duyệt  Phương thức:  back() đến URL trước URL hiện tại trong danh sách các trang đã duyệt  forward() đến URL sau URL hiện tại trong danh sách các trang đã duyệt  go() đến URL xác định trong danh sách các trang đã duyệt  Xem thêm Đối tượng Document  Dùng để xử lý thông tin về tài liệu html trong cửa sổ trình duyệt  Thuộc tính  bgColor, fgColor màu nền, màu văn bản  URL url của tài liệu hiện hành  title tiêu đề tài liệu  …  Phương thức  write() ghi ra tài liệu  …  Xem thêm Đối tượng Document  Ví dụ: function khoitao() { document.bgColor = 'lightblue'; document.fgColor = 'darkblue'; } document.write(document.URL); ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Javascript XỬ LÝ SỰ KIỆN Sự kiện (Event)  Sự kiện: hành động xảy ra trên trang web, được tạo ra bởi người dùng hoặc hệ thống, vd:  người dùng click vào một button  trang web được tải xong  Đối tượng Event: cung cấp thông tin về sự kiện, vd:  kiểu sự kiện  vị trí con trỏ tại thời điểm xảy ra sự kiện Sự kiện  Một sự kiện bắt đầu bằng hành động hoặc điều kiện khởi tạo sự kiện, và kết thúc bằng việc đáp lại của trình xử lý sự kiện tương ứng.  Chu trình sống của sự kiện thông thường:  Hành động của người sử dụng hoặc một điều kiện tương ứng khi sự kiện xảy ra  Đối tượng Event được cập nhật để phản ánh trạng thái sự kiện  Phát sinh (kích hoạt) sự kiện  Trình xử lý sự kiện tương ứng được gọi  Trình xử lý sự kiện thực hiện các hành động và trả quyền điều khiển về chương trình Điều khiển sự kiện  Sử dụng trình điều khiển sự kiện như thuộc tính của thẻ <tag eventHandler="JavaScript Code">  Sử dụng trình điều khiển sự kiện như thuộc tính của đối tượng object.eventhandler = function; Các sự kiện thông thường  onClick  onChange  onFocus  onBlur  onMouseOver  onMouseOut  onMouseUp  onMouseDown  onSubmit  onLoad onClick  Sự kiện onClick xảy ra khi người dùng click chuột vào một phần tử  Thường dùng cho các loại nút nhấn, liên kết hoặc checkbox, radio onChange  Sự kiện onChange xảy ra khi nội dung của một phần tử thay đổi  Thường dùng cho ô nhập textbox, ô nhập textarea, hộp lựa chọn select onFocus, onBlur  Sự kiện onFocus xảy ra khi một phần tử nhận được tiêu điểm (trở thành phần tử hiện thời)  Sự kiện onBlur xảy ra khi một phần tử bị mất tiêu điểm onMouseOver, onMouseOut  Sự kiện onMouseOver xảy ra khi con trỏ chuột di chuyển lên trên một phần tử  Sự kiện onMouseOut xảy ra khi con trỏ chuột rời khỏi phần tử đó onMouseDown, onMouseUp  Sự kiện onMouseDown xảy ra khi có hành động nhấp (nhấn) chuột lên phần tử  Sự kiện onMouseUp xảy ra khi có hành động nhả chuột ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Javascript AJAX (Asynchronous JavaScript and XML ) Ajax  Là kỹ thuật trao đổi dữ liệu với server, cho phép cập nhật một phần nội dung trang web mà không cần phải load lại toàn bộ trang  Là sự kết hợp giữa:  Đối tượng XMLHttpRequest  Javascript/DOM  CSS  XML Ajax  Các bước thực hiện chính:  Tạo đối tượng XMLHttpRequest  Gửi yêu cầu đến server  Nhận dữ liệu trả về từ server Tạo đối tượng XMLHttpRequest  Các trình duyệt thông dụng hiện nay variable=new XMLHttpRequest();  Trình duyệt IE cũ hơn variable=new ActiveXObject ("Microsoft.XMLHTTP");  Ví dụ var xmlhttp; if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else{ // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } Gửi yêu cầu đến server  Dùng các phương thức của đối tượng XMLHttpRequest  open(method, url, async) • method: GET/POST • url: đường dẫn file trên server • async: true/false (không đồng bộ / đồng bộ)  send(string) • string: chuỗi tham số nếu dùng phương thức POST, null nếu dùng phương thức GET Gửi yêu cầu đến server  Ví dụ // Phương thức GET xmlhttp.open('GET', 'tên_file',true); xmlhttp.send(); // Phương thức POST xmlhttp.open('POST', 'tên_file',true); xmlhttp.send(); // Nếu dữ liệu gửi từ form bằng phương thức POST xmlhttp.open('POST', 'tên_file',true); xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xmlhttp.send('tham_số=giá_trị&...'); Dữ liệu trả về  Dùng các thuộc tính của đối tượng XMLHttpRequest  responseText: dữ liệu trả về dạng text  responseXML: dữ liệu trả về theo định dạng xml document.getElementById('id').innerHTML=xmlhttp.responseText; xmlDoc=xmlhttp.responseXML; txt=''; x=xmlDoc.getElementsByTagName('tag_name'); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + ''; } document.getElementById('id').innerHTML=txt; Sự kiện onreadystatechange  Nếu tham số async là true (không đồng bộ), cần chỉ định hàm cần thực thi trong sự kiện onreadystatechange Thuộc tính Mô tả onreadystatechange Chứa một hàm (hoặc tên một hàm) sẽ được gọi tự động mỗi khi thuộc tính readyState thay đổi. readyState Trạng thái của XMLHttpRequest. Có các giá trị từ 0 đến 4: 0: yêu cầu (request) chưa được khởi tạo 1: kết nối (với server) được thiết lập 2: yêu cầu đã được gửi 3: yêu cầu đang được xử lý 4: yêu cầu đã hoàn tất và response sẵn sàng status 200: "OK" 404: Page not found Sự kiện onreadystatechange  Ví dụ xmlhttp.open('GET', 'tên_file',true); xmlhttp.send(); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById('id_thẻ').innerHTML= xmlhttp.responseText; } }