�ݺ�ߣ

GVLT: ThS Phạm Thi Vương
JAVASCRIPT & DOM HTML

Nội dung
Giới thiệu về Javascript
Nhúng Javascript vào trang web
Kiểu dữ liệu & cú pháp trong Javascript
Xử lý sự kiện
DOM HTML với Javascript
Ví dụ

Nội dung
Kiểu dữ liệu & Các cú pháp Javascript
Ví dụ

Giới thiệu
HTML nguyên thủy không có khả năng xử
lý các tương tác của người dùng
Mọi tương tác với trang web cần phải xử
lý ở server -> chi phí về thời gian, thông
lượng quá mức cần thiết
Các trình duyệt có khả năng hỗ trợ thông
dịch ngôn ngữ kịch bản
Company Logo

Giới thiệu về Javascript
Client-Side Script:
 Script được thực thi tại Client-Side ( trình duyệt ): Thực
hiện các tương tác với người dùng ( tạo menu chuyển
động, … ) , kiểm tra dữ liệu nhập, …
Server-Side Script:
 Script được xử lý tại Server-Side, nhằm tạo các trang
web có khả năng phát sinh nội dung động. Một số xử lý
chính: kết nối CSDL, truy cập hệ thống file trên server,
phát sinh nội dung html trả về người dùng…

Là ngôn ngữ Client-side script hoạt động
trên trình duyệt của người dùng ( client )
Chia sẻ xử lý trong ứng dụng web. Giảm
các xử lý không cần thiết trên server.
Giúp tạo các hiệu ứng, tương tác cho
trang web.

Giới thiệu
Khả năng thường được dùng của
JavaScript
 Nhận và kiểm tra tính hợp lệ của dữ liệu
 Tính toán dữ liệu tạm thời
 Tạo các hiệu ứng hoạt ảnh, xử lý các sự kiện
Bị quy định không được phép truy cập
vào các tài nguyên mức hệ thống
Company Logo

JavaScript
Web động -> Netscape -> Script Language:
LiveScript => JavaScript
JavaScript là ngôn ngữ dưới dạng script có thể
gắn với các file HTML và dùng thông dịch
(interpreter)
JavaScript là ngôn ngữ dựa trên đối tượng: math,
document, windows,…
JavaScript không phải là ngôn ngữ hướng đối
tượng như C++, Java,…
Thiết kế độc lập với hệ điều hành

oKhi trình duyệt (Client browser) truy cập
trang web có chứa các đoạn mã xử lý tại
server-side. Server ( run-time engine) sẽ
thực hiện các lệnh Server-side Scipts và
trả về nội dung HTML cho trình duyệt
Nội dung html trả về chủ yếu bao gồm: mã
html, client-script.

Nhúng Javascript vào trang web
Định nghĩa script trực tiếp trong trang html:
<script type=“text/javascript”>

</script>
Nhúng sử dụng script cài đặt từ 1 file .js khác:
<script src=/slideshow/c3javascriptpdf/259750623/“xxx.js”></script>

<html>
<head>
<script type="text/javascript">
some statements
</script>
</head>
<body>
some statements
</script>
<script src=/slideshow/c3javascriptpdf/259750623/“Tên_file_script.js">method()</script>
<script type=“text/javascript”>
// gọi thực hiện các phương thức được định nghĩa
// trong “Tên_file_script.js”
</script>
</body>
</html>

Đặt giữa tag <head> và </head>: script sẽ thực
thi ngay khi trang web được mở.
Đặt giữa tag <body> và </body>: script trong
phần body được thực thi khi trang web đang
mở (sau khi thực thi các đoạn script có trong
phần <head>).
Số lượng đoạn client-script chèn vào trang
không hạn chế.

VD: Nhúng Javascript vào trang web
<html>
<head>
<title>New Page 1</title>
</head>
<body>
<script language="JavaScript">
document.write("Xin chao ban");
</script>
</body>
</html>

VD: Nhúng Javascript vào trang web
<html>
<body>
document.write(“Hello world!”);
document.write(“Hello world!”);
</script>
</body>
</html>

Biến số trong Javascript
Cách đặt tên biến
 Bắt đầu bằng một chữ cái hoặc dấu _
 A..Z,a..z,0..9,_ : phân biệt HOA, Thường
Khai báo biến
 Sử dụng từ khóa var
Ví dụ: var count=10,amount;
 Không cần khai báo biến trước khi sử dụng,
biến thật sự tồn tại khi bắt đầu sử dụng lần đầu tiên

Kiểu dữ liệu trong Javascript
Kiểu dữ liệu Ví dụ Mô tả
Object var listBooks = new Array(10) ; Trước khi sử dụng, phải cấp phát
bằng từ khóa new
String “The cow jumped over the moon.”
“40”
Chứa được chuổi unicode
Chuổi rỗng “”
Number 0.066218
12
Theo chuẩn IEEE 754
boolean true / false
undefined var myVariable ; myVariable = undefined
null connection.Close(); connection = null

Đổi kiểu dữ liệu
Biến tự đổi kiểu dữ liệu khi giá trị mà nó lưu
trữ thay đổi
Ví dụ:
var x = 10; // x kiểu Number
x = “hello world !”; // x kiểu String
Có thể cộng 2 biến khác kiểu dữ liệu
Ví dụ:
var x;
x = “12” + 34.5; // KQ: x = “1234.5”
Hàm parseInt(…), parseFloat(…) : Đổi KDL từ
chuỗi sang số.

Special Characters
b backspace
f form feed
n
new line (xuống dòng và đưa con
trỏ về đầu dòng đó)
r
Carriage return (đưa con trỏ về
đầu dòng hiện tại)
t Tab

Toán tử số học
Toán tử Mô tả Ví dụ
+ Phép cộng A = 5 + 8
- Phép trừ A = 8 - 5
/ Phép chia A = 20 / 5
% Phép chia lấy số dư 10 % 3 = 1
++ Tăng lên một đơn vị. Toán tử này nhận một
toán hạng. Giá trị của toán hạng sẽ tăng lên 1
đơn vị. Giá trị được trả về sẽ tuỳ thuộc vào
toán tử ++ nằm sau hay nằm trước toán hạng.
++x sẽ trả về giá trị của
x sau khi tăng.
x++ sẽ trả về giá trị của
x trước khi tăng.
- - Giảm một đơn vị. Toán tử này nhận một toán
hạng. Giá trị được trả về tuỳ thuộc vào toán tử
-- nằm trước hay nằm toán hạng.
--x sẽ trả về giá trị của
x sau khi giảm.
x-- sẽ trả về giá trị của
x trước khi giảm. .
- Lấy số đối. Nó sẽ trả về số đối của toán hạng Nếu a là 5, thì –a = -5.

Toán tử so sánh
Toán tử Mô tả Ví dụ
= = Bằng. Trả về giá trị true nếu
các toán hạng bằng nhau.
a = = b
!= Không bằng. Trả về giá trị true
nếu các toán hạng không bằng
nhau.
Var2 != 5
> Lớn hơn. Trả về giá trị true nếu
toán hạng trái lớn hơn toán
hạng phải.
Var1 > var2
>= Lớn hơn hoặc bằng. Trả về giá
trị true nếu toán hạng trái lớn
hơn hoặc bằng toán hạng phải.
Var1 >= 5
Var1 >= var2
< Nhở hơn. Trả về giá trị true nếu
toán hạng trái nhỏ hơn toán
hoạng phải.
Var2 < var1
<= Nhỏ hơn hoặc bằng. Trả vè giá
trị true nếu toán hạng trái nhỏ
hơn hoặc bằng toán hạng phải.
Var2 <= 4
Var2 <= var1

Toán tử logic
Toán tử Giá trị Mô tả
And ( &&) expr1 &&
expr2
Trả về giá trị của expr1 nếu nó là
false. Nếu không thì nó trả về giá trị
của expr2.
Or ( ||) expr1 || expr2 Trả về giá trị của expr1 nếu nó là true.
Nếu không thì nó sẽ trả về giá trị của
expr2.
Not (!) !expr Trả về giá trị false nếu biểu thức đúng
và trả về giá trị true nếu biểu thức sai.

Toán tử khác
Toán tử điều kiện
 (condition) ? trueVal : falseVal
typeof
 Toán tử typeof trả về chuỗi cho biết tên kiểu
dữ liệu của toán hạng

Mảng
 arrayObjectName =
new Array([element0, element1, ...,
elementN])
 arrayObjectName = new Array(3)
 MyArray = new Array(5,5);
 MyArray[0, 0]

Phương thức mảng
Phương thức Mô tả
Join Kết hợp các phần tử của mảng thành một chuỗi
Pop Trả về phần tử cuối cùng của mảng, sau khi xoá nó
từ mảng.
Push Thêm một hoặc nhiều phần tử vào cuối mảng. Trả
lại phần tử cuối cùng thêm vào.
Reverse Đảo ngược các phần tử của mảng: phần tử đầu tiên
của mảng trở thành phần tử cuối cùng và phần tử
cuối cùng trở thành phần tử đầu tiên.
Shift Xoá phần tử đầu tiên của mảng và trả về phần tử
đó.
Sort Sắp xếp các phần tử của mảng.

Hàm trong Javascript
Dạng thức khai báo chung:
function Tên_hàm(thamso1, thamso2,..)
{
………
}
Hàm có giá trị trả về:
function Tên_hàm(thamso1, thamso2,..)
{
………
return (value);
}

Hàm trong Javascript
Ví dụ:
function Sum(x, y)
{
tong = x + y;
return tong;
}
Gọi hàm:
var x = Sum(10, 20);

Các quy tắc chung
Khối lệnh được bao trong dấu {}
Mỗi lệnh nên kết thúc bằng dấu ;
Cách ghi chú thích:
 // Chú thích 1 dòng
 /* Chú thích
nhiều dòng */

Một vài hàm thường dùng
eval
 Hàm eval được dùng để đánh giá một chuỗi
và không cần tham chiếu đến bất kỳ một đối
tượng cụ thể nào.
 eval(string)
Hàm isNaN
 Hàm isNaN được dùng để kiểm tra xem đối
số truyền vào có phải là một số hay không.
 isNaN(testValue)

Câu lệnh if
if (condition)
{
statement[s] if true
}
else
{
statement[s] if false
}
Ví dụ:
var x = 5, y = 6, z;
if (x == 5) { if (y == 6) z = 17; } else z = 20;

Câu lệnh switch
switch (expression)
{
case label :
statementlist
case label :
statementlist
...
default :
statement list
}
Ví dụ :
var diem = “G”;
switch (diem) {
case “Y”:
document.write(“Yếu");
break;
case “TB”:
document.write(“Trung bình");
break;
case “K”:
document.write(“Khá");
break;
case “G” :
document.write(“Giỏi");
break;
default:
document.write(“Xuất sắc")
}

Vòng lặp for
for ([initial expression]; [condition];
[update expression]) {
statement[s] inside loop
}
Ví dụ:
var myarray = new Array();
for (i = 0; i < 10; i++)
{
myarray[i] = i;
}

Vòng lặp while
while (expression)
{
statements
}
Ví dụ:
var i = 9, total = 0;
while (i < 10)
{
total += i * 3 + 5;
i = i +5;
}

Vòng lặp do.. while
do
{
statement
}while (expression);
Ví dụ:
var i = 9, total = 0;
do
{
total += i * 3 + 5;
i = i +5;
} while (i > 10);

Nội dung
Sử dụng các đối tượng trong Javascript
Ví dụ

Các đối tượng trong Javascript
String
Number
Array
Date
Math
navigator
window
Document.
location
History

String
Thuộc tính:
 length : chiều dài của chuỗi
 constructor : Dùng để kiểm tra kiểu của biến
 Nối kết các chuỗi bằng toán tử “+”
<script language="javascript">
var sTenBien = new String();
sTenBien = 256;
if(sTenBien.constructor == String)
{
document.writeln("sTenBien la mot chuoi co chieu dai la:" +
sTenBien.length);
}
else
{
document.writeln("sTenBien la mot so co gia tri la: " + sTenBien);
}
</script>

FCE-UIT-VNU.HCM
TS.Vũ
40
Đối tượng String
s1 = "foo" //creates a string literal value
s2 = new String("foo") //creates a String object
Sự khác biệt:
s1 = "2 + 2" //creates a string literal value
s2 = new String("2 + 2")//creates a String object
eval(s1) //returns the number 4
eval(s2) //returns the string "2 + 2"

String
Phương thức
 stringObj.anchor(anchorString) – tạo Bookmark
 strVariable.link(URL)
 string1.concat([string2[, string3[,... [, stringn]]]])

Date
dateObjectName = new Date([parameters])
 Các constructor
 var dateObj = new Date()
 var dateObj = new Date(dateVal)
 var dateObj = new Date(year, month,
date[,hours[,minutes[,seconds[,ms]]]])
 var dateObj = new Date(dateString)
Ví dụ:
var my_date=new Date("October 12, 1988 13:14:00")
var my_date=new Date("October 12, 1988")
var my_date=new Date(88,09,12,13,14,00)
var my_date=new Date(88,09,12)
today = new Date().

Date
getDate(), getDay(), getMonth(), getYear(),…
getTime(), getHours(), getMinutes(), getSeconds()
 setDate, setFullYear, setHours, setMinutes,
setMonth, setSeconds, setTime, setYear,…
toDateString, toString

Math
Sử dụng đối tượng Math cho các hàm toán học
Math.abs(number)
Math.cos(number), Math.acos(number)
Math.tan(number), Math.atan(number)
Math.ceil(number)
Math.floor(number)
Math.max([number1[, number2[. . . [, numberN]]]])
Math.random( )
Math.round(number )
Math.sqrt(number ) ,…

Window
Tồn tại khi mở 1 tài liệu HTML
Sử dụng để truy cập thông tin window
Điều khiển các sự kiện xảy ra trong window
Nếu tài liệu định nghĩa nhiều frame,
browser tạo 1 window object cha và các
window object con cho từng frame

Window methods
 alert()
 window.alert("How are you doing?");
 prompt()
 window.prompt("Please provide your name","optional text");
 confirm()
 window.confirm("Are you sure you want to do this?");
 blur() - Move This Window to Back
 focus() - Bring Main Window to Front
 open()
 window.open("URL", "window name", "attributes");
 newWin=window.open("","","width=300,height=250");

Window methods
 moveBy(): di chuyển cả window đi
 window.moveBy(xDistance,yDistance);
<form>
<input type="Button" value="Move Window"
onclick="window.moveBy(50,50);">
<input type="Button" value="Close Window" onclick="window.close();">
</form>
 moveTo(): Di chuyển đến vị trí so với góc màn hình
(0,0)
 window.moveTo(xDistance,yDistance);
 resizeBy()
 window.resizeBy(xSize,ySize);
 resizeTo()
 window.resizeTo(xWidth,yLength);

Window Object Event Handlers
<body onLoad="alert('This page has finished loading!)"
window.onload=functionName;
<body onUnload="alert('You're leaving so soon?)"
onResize
onError
onBlur
onFocus
C¸c ch¬ng tr×nh xö lý sù kiÖn
onLoad - XuÊt hiÖn khi cöa sæ kÕt thóc viÖc t¶i.
onUnLoad - XuÊt hiÖn khi cöa sæ ®îc lo¹i bá.

Document object
Document Object biểu diễn cho tài liệu
HTML
Dùng để lấy thông tin về tài liệu, các thành
phần HTML và xử lý sự kiện
 Properties
– aLinkColor
– bgColor
– Body
– fgColor
– linkColor
– Location
– Title
– URL
– vlinkColor
 Methods
– clear
– close
– open
– write
– writeln

History Object
History Object cung cấp danh sách các
URL đã được duyệt bởi người dùng
Methods
 Back
 Forward
 go
History.go(-1) -- history.back()
History.go(+1) – history.forward()

Location Object
Chứa thông tin về URL hiện tại
Properties
 Hostname
 href, …
Methods
 Reload
 …

HTML Objects
Mỗi form trong 1 document sẽ tạo ra 1 đối tượng
form
1 document có thể có nhiều form, được lưu trong 1
forms array (bắt đầu từ form[0])
Truy cập đến form
 document.forms[0]
 document.formName
Truy cập đến các thành phần của form
 document.forms[0].item[0].value
 document.formName.InputName.value

Xử lý sự kiện – Event Object
Events là các sự kiện xảy ra trên trang Web
Do người dùng hoặc do hệ thống tạo ra
Mỗi sự kiện sẽ liên quan đến một event object
Cung cấp thông tin về event
– Loại event
– Vị trí con trỏ tại thời điềm xảy ra sự kiện

Các sự kiện thông dụng
Các sự kiện được hỗ trợ bởi hầu hết các đối
tượng
 onClick
 onFocus
 onChange
 onBlur
 onMouseOver
 onMouseOut
 onMouseDown
 onMouseUp
 onLoad
 onSubmit
 onResize
 ………

Xử lý sự kiện cho các thẻ HTML
Cú pháp 1:
<TAG eventHandler = "JavaScript Code">
Ví dụ:
<body>
<INPUT TYPE="button“ NAME="Button1“
VALUE="OpenSesame!”
onClick="window.open('mydoc.html');">
</body>
Lưu ý: Dấu “…” và „…‟

Xử lý sự kiện bằng function
<head>
<script language=“Javascript”>
function GreetingMessage()
{
window.alert(“Welcome to my world”);
}
</script>
</head>
<body onload=“GreetingMessage()”>
</body>

Xử lý sự kiện bằng thuộc tính
 Gán tên hàm xử lý cho 1 object event
object.eventhandler = function_name;
 Ví dụ:
<head>
<script language=“Javascript”>
function GreetingMessage()
{
window.alert(“Welcome to my world”);
}
window.onload = GreetingMessage ()
</script>
</head>
<body>
</body>

Ví dụ: onclick Event
<SCRIPT LANGUAGE="JavaScript">
function compute(frm)
{
var x = frm.expr.value;
result.innerHTML = x*x;
}
</SCRIPT>
<FORM name=“frm”>
X = <INPUT TYPE="text" NAME="expr" SIZE=15>
<BR><BR>
<INPUT TYPE="button" VALUE=“Calculate”
ONCLICK="compute(this.form)">
<BR>
X * X = <SPAN ID="result"></SPAN>
</FORM>

Ví dụ: onFocus - onBlur
Xảy ra khi một thành phần HTML bị focus
(onFocus) và mất focus (onBlur)
Ví dụ:
<BODY BGCOLOR="lavender">
<FORM>
<INPUT type=“text” name=“myTextbox”
onblur=“(document.bgColor='aqua')”
onfocus=“(document.bgColor='dimgray')”>
</FORM>
</BODY>

Xử lý sự kiện – Danh sách các sự kiện của Form field

Mở một cửa sổ bằng java script

DOM
DOM = Document Object Model
DOM là tổ mô hình cho phép truy xuất đến các
thành phần trong một tài liệu có cấu trúc.
DOM được hỗ trợ bởi tất cả các trình duyệt.
DOM trong trình duyệt là một thư viện cung cấp
các đối tượng, thuộc tính, phương thức hỗ trợ để
truy xuất các tài liệu HTML, XHTML, XML.
Sử dụng javascript để tương tác với DOM.

DOM - các thuộc tính và phương thức

HTML DOM
HTML DOM = HTML Document Object
Model
HTML DOM: là một thành phần của DOM
HTML DOM: Xem trang web như một cây
gồm nhiều node
Mỗi node là một thành phần:
 tag HTML
 thuộc tính
 nội dung của tag

HTML DOM - Các loại node
document node: the entire document
element node: HTML tag
text node: The text in the HTML element
attribute node: HTML attribute
comment node: comments

HTML DOM - Thuộc tính và phương thức của node

Truy cập đến các node - document node
Cách truy cập:
 Sử dụng: document hoặc window.document
Một số thuộc tính và phương thức:
 document.documentElement: node gốc của tài liệu HTML
(thẻ html)
 document.body: node body (thẻ body)
 document.getElementById("id_of_element_node")
 document.getElementsByTagName("tagname_of_node")

Các đối tượng DOM trong javascript

Đối tượng Window - DOM
Là thể hiện của đối tượng cửa sổ trình duyệt
Tồn tại khi mở 1 tài liệu HTML
Sử dụng để truy cập thông tin của các đối
tượng trên cửa sổ trình duyệt ( tên trình
duyệt, phiên bản trình duyệt, thanh tiêu đề,
thanh trạng thái … )
Nếu tài liệu định nghĩa nhiều frame, browser
tạo 1 window object cha và các window
object con cho từng frame

Properties
 document
 event
 history
 location
 name
 navigator
 screen
 status
 Methods
 alert
 confirm
 prompt
 blur
 close
 focus
 open

Ví dụ:
<html>
<body>
var curURL = window.location;
window.alert(curURL);
</script>
</body>
</html>

DOM – navigator Object
Cung cấp thông tin về trình duyệt Browser

DOM – location Object
Chứa thông tin về URL hiện tại

Đối tượng Document - DOM
Biểu diễn cho nội dung trang HTML đang
được hiển thị trên trình duyệt
Dùng để lấy thông tin về tài liệu, các
thành phần HTML và xử lý sự kiện

 Properties
 aLinkColor
 bgColor
 body
 fgColor
 linkColor
 title
 URL
 vlinkColor
 forms[]
 images[]
 childNodes[]
 Methods
 close
 open
 createTextNode(“ text ")
 createElement(“HTMLtag")
 getElementById(“id”)
 …
 documentElement
 cookie
 ……

getElementById ( id1 )
Trả về node có giá trị thuộc tính id = id1
Ví dụ:
//<p id="id1" >
// some text
//</p>
var node = document.getElementById(“id1”);
var nodeName = node.nodeName; // p
var nodeType = node.nodeType; // 1
var nodeValue = node.nodeValue; // null
var text = node.innerText ; // some text
Text Node

DOM – document.getElementsByName ()

DOM – document.getElementsByTagName ()

createElement ( nodeName )
Cho phép tạo ra 1 node HTML mới tùy
theo đối số nodeName đầu vào
Ví dụ:
var imgNode = document.createElement(“img”);
imgNode.src = /slideshow/c3javascriptpdf/259750623/“images/test.gif”;
// <img src=“images/test.gif” />

createTextNode ( content )
Ví dụ:
var textNode = document.createTextNode(“New
text”);
var pNode = document.createElement(“p”);
pNode.appendChild(textNode);
// <p>New text</p>

appendChild ( newNode )
Chèn node mới newNode vào cuối danh
sách các node con của một node.
Ví dụ:
//<p id="id1" >
// some text
//</p>
var pNode = document.getElementById(“id1”);
var imgNode = document.createElement(“img”);
imgNode.src = /slideshow/c3javascriptpdf/259750623/“images/test.gif”;
pNode.appendChild(imgNode);
//<p id="id1" >
// some text<img src=“images/test.gif” />
//</p>

DOM – insertBefore() , removeChild() , replaceChild()

DOM – firstChild , lastChild, nextSibling , hasChildNode()

innerHTML
Chỉ định nội dung HTML bên trong một node.
Ví dụ:
//<p id=“para1" >
// some text
//</p>
var theElement = document.getElementById("para1");
theElement.innerHTML = “Some <b> new </b> text”;
// Kết quả :
// <p id=“para1” >
// Some <b> new <b/> text
// </p>

innerText
Tương tự innerHTML, tuy nhiên bất kỳ
nội dung nào đưa vào cũng được xem
như là text hơn là các thẻ HTML.
Ví dụ:
var theElement = document.getElementById("para1");
theElement.innerText = “Some <b> new </b> text”;
// Kết quả hiển thị trên trình duyệt
// bên trong thẻ p: “Some <b> new </b> text”

DOM – innerHTML, innerText, outerText, OuterHTML

DOM – node.setAttribute (), getAttribute (), removeAttribute ()

Nội dung
Sử dụng các đối tượng trong Javascript
Ví dụ

Ví dụ: Dynamic Table
Viết trang web cho phép tạo table có số
dòng, số cột do người dùng nhập vào.

<Table>
<Tr>
<td> 12 </td>
<td> 13 </td>
</Tr>
<Tr>
<td> 21 </td>
<td> 22 </td>
</Tr>
</Table>
Table
Tr
Tr
Td
Td
Td
Td
body

Ví dụ:
<Table>
<Tbody>
<Tr>
<td> 12 </td>
<td> 13 </td>
</Tr>
<Tr>
<td> 21 </td>
<td> 22 </td>
</Tr>
</Tbody>
</Table>
Table
Tr
Tr
Td
Td
Td
Td
TBody
body

Document.createElement(…) :Tạo một
đối tượng thẻ DOM HTML
Object.appendChild(…): Thêm một đối
tượng thẻ DOM HTML như là nút con.

Javascript - thuộc tính prototype

�ݺ�ߣ

C3-Javascript.pdf

Recommended

More Related Content

Similar to C3-Javascript.pdf (20)

C3-Javascript.pdf