cÁc ĐỐ i t ƯỢ ng c Ơ b Ản trong javasript20149172131).pdf · gettimezoneoffset(): tr...

Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin

CÁC ĐỐI TƯỢNG CƠ BẢN TRONG JAVASRIPT

NHẬP MÔN HTML VÀ THIẾT KẾ WEB

1


� String� Math� Date� Các đối tượng trình duyệt

NỘI DUNG


� Javascript là ngôn ngữ lập trình dựa trên đốitượng. Một đối tượng là một gói dữ liệu đầy đủ,toàn diện:� Các thuộc tính (biến) dùng để mô tả, định nghĩa đối

tượng.� Các phương thức (hàm) tác động đến dữ liệu nằm trongđối tượng.

� Để truy cập thuộc tính/phương thức ta phải chỉ tênđối tượng và thuộc tính/phương thức của nó.objectName.propertyNameobjectName.method()

GIỚI THIỆU CÁC ĐỐI TƯỢNG


� Cây phân cấp đối tượng:� Khi tài liệu HTML được hiển thị trong trình duyệt,

cây phân cấp đối tượng được tạo dựa trên cácphần tử trang.


Đối tượng của trình duyệt

Đối tượng kịch bản

Phần tử HTML


� Các lệnh thường làm việc với đối tượng:� Lệnh this: Chỉ ra đối tượng hiện hành

this.property<html xmlns="http://www.w3.org/1999/xhtml"><head>

<title></title><script language= "JavaScript" type="text/javascript">

function displayName(name) {alert("Xin chào " + name); }

</script></head><body>

<form name="myform" method="get">

<input type="text" name="ten" value="Nhập tên"onchange="displayName(form.test.value)" />

</form></body></html>



� Các lệnh thường làm việc với đối tượng:� Lệnh for … in

for (variable in Object) { <các câu lệnh>;}

� Ví dụ:<script language= "JavaScript" type="text/javascript">

color = new Array("red","blue","green")

for (cl in color) {document.write(color[cl]);

document.write("<hr color='"+color[cl]+ "'/>");

}

</script>



� Các lệnh thường làm việc với đối tượng:� Lệnh with: Dùng để thực thi tập hợp các câu lệnh dùng

các phương thức của cùng một loại đối tượng:

with (Object) { <các câu lệnh>;}



� Các lệnh thường làm việc với đối tượng:� Lệnh with:

<script language="javascript" type="text/javascript">

var a, b, c;

var r = 10;

with (Math) {

a = PI * r * r;

b = r * cos(PI);

c = r * sin(PI / 2);}document.write(a + "<br/>");

document.write(b + "<br/>");

document.write(c + "<br/>");

</script>



� Các lệnh thường làm việc với đối tượng:� Lệnh new: Toán tử new dùng để tạo ra một thực thể mới

của một loại đối tượng.

objectName= new ObjectType(para1[,para2,..);<script language="javascript" type="text/javascript">

function employee(name, code) {

this.name = name;

this.code = code; }

var myemp = new employee("Nguyễn Văn Hòa", "EM03");document.write("<br/> Họ tên:" + myemp.name);

document.write("<br/> Mã nhân viên: " + myemp.code);

</script>



� Các lệnh thường làm việc với đối tượng:� Lệnh eval: Đánh giá một chuỗi.

eval(string);<script language="javascript" type="text/javascript">

var x = 10;

var y = 5;

document.write(eval("x+y*3"));

</script>



� Đối tượng string được dùng để thao tác và làm việcvới chuỗi ký tự, sử dụng theo cú pháp:

stringName.propertyName;

� Các phương thức tạo chuỗi:� Dùng lệnh var và gán giá trị:

var str = "Xin chào";� Dùng toán tử gán (=) gán chuỗi cho biến:

str = "Xin chào";� Dùng hàm khởi tạo String(“chuỗi”):

var str = String("Xin chào“);

ĐỐI TƯỢNG STRING


� Các thuộc tính:stringName.length: độ dài của chuỗi.

� Các phương thức:� big(): Tăng kích thước của chuỗi văn bản.� bold(): In đậm chuỗi� fontcolor(“màu”): Xác định mầu cho chữ� italics(): In nghiêng� small(): giảm kích thước� strike(): hiển thị có đường gạch ngang� sub: chỉ số dưới� sup: chỉ số trên� TolowerCase: Chuyển thành ký tự thường� ToUpperCase: Chuyển thành ký tự hoa



� Các thuộc tính:<script language="javascript"type="text/javascript">

var str = String("Xin chào");

document.write(str.length);

document.write(str.big());

document.write(str.blink());

document.write(str.fontcolor("#FFBBDD"));

document.write(str.strike());

document.write(str.sub());

</script>



� Đối tượng Math: được dùng để thao tác các phép toán học� Các thuộc tính:

� PI: Giá trị Pi=3.14…� LN10: Giá trị của lo cơ số 10, ~2.302� E: Giá trị của hằng số Euler, ~2.718

� Phương thức:� abs(number): Giá trị tuyệt đối,� sin(number): sin của một số, tính bằng radian� cos(number): cos của một số, tính bằng radian� tan(number): tan của một số� min(n1, n2): giá trị nhỏ nhất của hai số� max(n1, n2): giá trị lớn nhất của hai số.� round(number): làm tròn đến số nguyên gần nhất� sqrt(number): căn bậc hai của một số

ĐỐI TƯỢNG MATH


� Ví dụ:<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script language="javascript" type="text/javascript">

function dientich(r) {

var s;

s = Math.PI * r * r;

myform.txtKQ.value = s; }

</script>

</head>

<body>

<form id="myform" >

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

<input type="button" name="cmdTinh" value="Tính" onclick="dientich(myform.txtR.value)"/>

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

</form>

</body>

</html>

ĐỐI TƯỢNG MATH


� Đối tượng Date: là đối tượng có sẵn chứa thông tin về ngàygiờ.`

� Tạo đối tượng Date:� Không tham số: Lấy ngày giờ của hệ thống hiện tại

var today=new Date()� Có tham số: Khởi tạo bằng chuỗi ngày giờ

var today=new Date(“MM DD YYYY, hh:mm:ss” )� Phương thức:

� getDate() : Trả về ngày trong tháng từ đối tượng Date (1-31)� getDay() : Trả về ngày trong tuần (0-6)� getHours() : Trả về giờ từ đối tượng Date(0-23)� getMinutes(): Trả về phút của đối tượng Date (0-59)� getSecond(): Trả về giây từ đối tượng Date(0-59)� getMonth() : Trả về tháng (0-11)

ĐỐI TƯỢNG DATE


� Phương thức:� getYear() : Trả về năm từ đối tượng Date� getTime() : Trả về số mili giây của thời gian hiện tại.� getTimeZoneOffset(): Trả về chênh lệch bằng phút giữa

giờ địa phương và giờ chuẩn GMT.� setDate(): Thiết lập ngày trong tháng cho đối tượng Date� setHours() : Thiết lập giờ cho đối tượng Date.� setMinutes(): Thiết lập phút cho đối tượng Date.� setSecond(): Thiết lập giây cho đối tượng Date� setMonth() : Thiết lập tháng cho đối tượng Date� setYear() : Thiết lập năm cho đối tượng Date� setTime() : Thiết lập giá trị thời gian.



� Phương thức:� toGMTString(): Chuyển đối tượng Date() từ chuỗi thời

gian sang dạng GMT.� toLocaleString(): Chuyển một đối tượng Date từ một

chuỗi sang dạng thời gian địa phương.� Date.parse(date_string): Số mili giây trong chuỗi thời

gian tính từ 1/1/1970� Date.UTC(year, month, day, hour, min, secs): Số mili

giây của đối tượng thời gian.



ĐỐI TƯỢNGTRÌNH DUYỆT

� Giới thiệu: Các trình duyệt cung cấp một số đối tượng cóthể truy cập và sử dụng trong script. Đối tượng trình duyệtcũng hoạt động như các đối tượng lưu chứa đối với phần tửHTML trong một trang web.

Window object

Document Object

Event

Frames

History

Location

Navigator

Screen

Đối tượng trình duyệt IE

Window

Document

Frame

Location

History

Navigator

Plugin

Mime type

Đối tượng trình duyệt Netcase



� Mô hình đối tượng (Document Object Model - DOM):� Javascript là ngôn ngữ dựa trên đối tượng: Cho phép người phát

triển theo module và có thể được sử dụng lại� Javascript không hoàn toàn là ngôn ngữ hướng đối tượng, nhưng nó

hỗ trợ một vài đặc điểm của đối tượng.<html><head><title>DOM Example</title><script type="text/javascript" language="javascript">

var oHtml = document.documentElement;var oHead = oHtml.firstChild;var oBody = oHtml.lastChild;alert(oHead.nodeName); //outputs “HEAD”alert(oBody.parentNode == oHtml); //outputs “true”

</script></head><body><p>Hello World!</p><p>You’re learning to use the DOM!</p></body></html>



� Đối tượng Window:� Thể hiện các cửa sổ của trình duyệt và thường dùng để

lấy thông tin trạng thái của trình duyệt. Khi trình duyệtmở tài liệu HTML nó thường tạo ra một đối tượngwindow

� Các thuộc tính:� document: Thể hiện tài liệu HTML trong cửa sổ trình duyệt� event: Thể hiện trạng thái của một sự kiện� history: Lưu trữ thông tin của những URL đã được viếng thăm� location: Lưu trữ thông tin của URL hiện tại� name: Thiết lập hoặc lấy tên của window hoặc frame� navigator: Lưu trữ thông tin của trình duyệt� screen:Lưu trữ thông tin về màn hình mà người sử dụng sử dụng� status: Thiết lập hoặc khôi phục trạng thái của cửa sổ trình duyệt



� Đối tượng Window:� Các phương thức:

� alert(): Hiển thị hộp thoại chứa thông báo� blur(): Làm cho đối tượng mất focus và kích hoạt sự

kiện Onblur� close(): Đóng cửa sổ trình duyệt hiện thời hoặc ứng

dụng HTML� focus(): Thiết lập focus cho điều khiển� navigate(): Tải URL được chỉ định vào cửa sổ hiện

thời� open(): Mở cửa sổ mới và tải tài liệu chỉ ra bởi địa chỉ

URL



� Đối tượng Document:� Là thể hiện của tài liệu HTML trong trình duyệt và được

dùng để lấy thông tin về tài liệu, kiểm tra và sửa đổi cácphần tử HTML, văn bản trong tài liệu và xử lý sự kiện.

� Các thuộc tính:� aLinkColor: Thiết lập hoặc lấy màu của các liên kết

trong tài liệu.� bgColor: Thiết lập hay lấy màu của đối tượng

document� body: Chỉ ra phần đầu và cuối của tài liệu.� location: Chứa các thông tin về URL hiện tại.� title: Chứa tiêu đề của tài liệu� URL: Thiết lập hay lấy URL cho tài liệu hiện tại.



� Đối tượng Document:� Các phương thức:

� clear(): Xóa tài liệu hiện thời� close(): Đóng một luồng dữ liệu xuất và hiển thị dữ

liệu nhận được.� open(): Mở một tài liệu để nhận dữ liệu từ phương

thức write hoặc writeln� write(): Viết một hay nhiều biểu thức đến một tài liệu

trong một cửa sổ chỉ định.� writeln(): Viết một hay nhiều biểu thức được theo sau

bởi dấu xuống dòng đến một tài liệu trong một cửa sổchỉ định.



� Đối tượng Document:<script type="text/javascript"language="javascript">

alert(document.title);

</script>



� Đối tượng History:� Đối tượng này cung cấp một danh sách các URL được

viếng thăm gần đây nhất.� Các phương thức:

� back(): Nạp URL trước đó trong danh sách các trangđã duyệt qua.

� forward(): Nạp URL sau trang hiện tại trong danh sáchcác trang đã duyệt qua.

� go(): Nạp một URL xác định trong danh sách cáctrang đã duyệt qua.



� Đối tượng Location:� Đối tượng này lưu thông tin về URL hiện tại.� Các thuộc tính:

� Hash: Thiết lập hay lấy phần tử dữ liệu sau dấu #trong thuộc tính href

� host: Thiết lập hay lấy tên máy chủ và số cổng củaURL.

� hostname: Thiết lập hay lấy tên của máy chủ� Các phương thức:

� assign(): Nạp một tài liệu mới.� reload(): Nạp lại một trang hiện thời.� replace(): Thay thế tài liệu hiện thời bằng cách tải một

tài liệu khác với URL xác định.


ĐỐI TƯỢNG EVENT

� Các chương trình Javascript thường là hướng sự kiện. Cácsự kiện là các hành động xảy ra trên trang web.

� Mỗi sự kiện có một đối tượng Event tương ứng. Đối tượngEvent cung cấp thông tin về sự kiện, loại sự kiện và vị trícon trỏ tại thời điểm xảy ra sự kiện.

� Một vòng đời của sự kiện thường gồm các bước sau:

Điều kiện xảy ra sự kiện

Đối tượng Event được cập nhật tức thì

Sự kiện kích hoạt

xử lý sự kiện

Trả điều khiển



� Sự kiện OnClick(): Được tạo ra khi người dùng click chuộtlên một phần tử form.

<head><script type="text/javascript" language="javascript">

function computer(form) {form.txtKQ.value = eval(form.txtBT.value);}

</script></head><body>

<form><input type="text" name="txtBT" /> <br />

<input type="button" name="cmdTinh" value="Tính"onclick="computer(this.form)"/> <br />

Kết quả: <br /><input type="text" name="txtKQ" /> <br />

</form></body>



� Sự kiện OnChange(): Xảy ra khi một phần tử form thay đổi.<head><title>DOM Example</title><script type="text/javascript" language="javascript">

function checkNum(num) {if (num == "") {

aler("Chưa điền số");return false; }if (isNaN(num)) {

alert("Phải điền số");return false; }}

</script></head>

<body><form>

<input type="text" name="txtBT"onchange="checkNum(this.value)" /> <br />

</form></body>



� Sự kiện onFocus (): Xảy ra khi một phần tử form trở thànhphần tử hiện thời.

� Sự kiện onBlur(): Xuất hiện khi phần tử mất focus, tức làngười dùng rời khỏi một phần tử trên form.

<html xmlns="http://www.w3.org/1999/xhtml"><head><title>DOM Example</title></head><body>

<form>

<input type="text" name="txtBT"onblur="(document.bgColor='aqua')"onfocus="(document.bgColor='blue')"/> <br />

</form></body></html>



� Sự kiện onMouseOver(): Được tại ra khi con trỏ chuột dichuyển lên trên một phần tử

� Sự kiện onMouseOut(): Được tạo ra khi con trỏ chuột dichuyển ra khỏi phần tử đó.

<body>

<form>

<img src="Images/main1.jpg" name="imSach"onmouseout="window.document.imgSach.src='Images/main2.jpg'" onmouseover="window.document.imgSach.src='Images/main1.jpg'"/> </form>

</body>



� Sự kiện onLoad(): Phát sinh sinh khi tải xong tàiliệu (áp dụng cho đối tượng body)

� Sự kiện OnSubmit(): Xuất hiện khi người dùngsubmit

� Sự kiện onMouseDown(): Xuất hiện khi hành độngnhấp chuột xảy ra.

� Sự kiện onMouseUp(): Xuất hiện khi hành độngnhả chuột xảy ra.

� Sự kiện Onresize(): Xuất hiện khi hàng động thayđổi kích thước cửa sổ xảy ra.


THẢO LUẬN – CÂU HỎI


� Thực hành các ví dụ� Thiết kế các chức năng cho bài tập lớn

BÀI TẬP

cÁc ĐỐ i t ƯỢ ng c Ơ b Ản trong javasript20149172131).pdf · gettimezoneoffset(): tr...

Documents