Bài giảng lập trình web chương 3 ths nguyễn minh vi

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 …... Đối tượng D

ThS Nguyễn Minh Vi

BM Tin học – ĐH An Giang

Javascript

TỔNG QUAN

 Javascript

 VBscript

 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

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"></script>

 Chèn trực tiếp vào tài liệu html

<script language ="Javascript">

// các câu lệnh

</script>

 Dùng như giá trị thuộc tính của thẻ

<a onClick ="alert('Hello world!');“

href ="">Click</a>

Ví dụ

<script language ="Javascript" >

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?' );

</script>

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

 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 ý

 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

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

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ố)

Các câu lệnh điều khiển

Ví dụ

 VD:

<script language ="Javascript">

arrMau = new Array( 'xanh' , 'vàng' , 'đỏ' );

for (var i in arrMau)

document.write( '<br/>arrMau['

+ i + ']=' + arrMau[i]);

</script>

 Hàm định nghĩa sẵn

Hàm – Ví dụ

 Khai báo hàm

}

 Gọi hàm

var x = Cong(10, 5);

Đối tượng (Object)

 Một đối tượng là một gói dữ liệu toàn diện, bao gồm:

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

…

<script language ="Javascript">

arrColor = new Array( 3 );

arrColor[ 0 ] = 'red' ; arrColor[ 1 ] = 'green' ; arrColor[ 2 ] = 'blue' ; document.write( '<br/>' + arrColor);

Đối tượng String

 Dùng để thao tác với chuỗi văn bản

Đối tượng String

 toLowerCase() chuyển chữ thường

 toUpperCase() chuyển chữ hoa

Đối tượng String

Đố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:

 LN10 giá trị lg (~2,302)

Đố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

Đối tượng Math

Đố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

Đố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

Đố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

 toLocalString chuyển sang dạng địa

Đối tượng Date

Đố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ụ:

<form name ="frm">

Nhập URL

<input type ="text" name ="txt"/>

<input type ="button" name ="btn"

value ="Mở"

onClick ="window.open(frm.txt.value)"/>

</form>

Đố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

 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

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

Đối tượng Document

document.bgColor = 'lightblue' ; document.fgColor = 'darkblue' ; }

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

 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

 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

ThS Nguyễn Minh Vi

BM Tin học – ĐH An Giang

Javascript

AJAX (Asynchronous JavaScript and XML )

 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

Gửi yêu cầu đến server

 Dùng các phương thức của đối tượng XMLHttpRequest

• method: GET/POST

• url: đường dẫn file trên server

• async: true/false (không đồng bộ / đồng bộ)

• 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

// 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

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

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ị

404: Page not found

if (xmlhttp.readyState== 4 && xmlhttp.status== 200 ){

document.getElementById( 'id_thẻ' ).innerHTML=

xmlhttp.responseText; }

}