SlideShare a Scribd company logo
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
Giới thiệu về Javascript
Nhúng Javascript vào trang web
Kiểu dữ liệu & Các cú pháp Javascript
Xử lý sự kiện
DOM HTML với 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…
Giới thiệu về Javascript
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
Giới thiệu về Javascript
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) sẽ
thực hiện các lệnh Server-side Scipts và
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.
Nội dung
Giới thiệu về Javascript
Nhúng Javascript vào trang web
Kiểu dữ liệu & Các cú pháp Javascript
Xử lý sự kiện
DOM HTML với Javascript
Ví dụ
Nhúng Javascript vào trang web
Định nghĩa script trực tiếp trong trang html:
<script type=“text/javascript”>
<!--
// Lệnh Javascript
-->
</script>
Nhúng sử dụng script cài đặt từ 1 file .js khác:
<script src=“xxx.js”></script>
Nhúng Javascript vào trang web
<html>
<head>
<script type="text/javascript">
some statements
</script>
</head>
<body>
<script type="text/javascript">
some statements
</script>
<script src=“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>
Nhúng Javascript vào trang web
Đặ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!”);
<script type="text/javascript">
document.write(“Hello world!”);
</script>
</body>
</html>
Nội dung
Giới thiệu về Javascript
Nhúng Javascript vào trang web
Kiểu dữ liệu & Các cú pháp Javascript
Xử lý sự kiện
DOM HTML với Javascript
Ví dụ
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.
Ví dụ
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
 Hàm eval được dùng để đánh giá một chuỗi
và không cần tham chiếu đến bất kỳ một đối
tượng cụ thể nào.
 eval(string)
Hàm isNaN
 Hàm isNaN được dùng để kiểm tra xem đối
số truyền vào có phải là 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
Giới thiệu về Javascript
Nhúng Javascript vào trang web
Kiểu dữ liệu & Các cú pháp Javascript
Sử dụng các đối tượng trong Javascript
Xử lý sự kiện
DOM HTML với 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]]]])
String
String
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
Nội dung
Giới thiệu về Javascript
Nhúng Javascript vào trang web
Kiểu dữ liệu & Các cú pháp Javascript
Xử lý sự kiện
DOM HTML với Javascript
Ví dụ
Xử lý sự kiện – Event Object
Events là 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 sẽ 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
Nội dung
Giới thiệu về Javascript
Nhúng Javascript vào trang web
Kiểu dữ liệu & Các cú pháp Javascript
Sử dụng các đối tượng trong Javascript
Xử lý sự kiện
DOM HTML với Javascript
Ví dụ
DOM
DOM = Document Object Model
DOM là tổ mô hình cho phép truy xuất đến các
thành phần trong một tà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 là 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 tài liệu HTML, XHTML, XML.
Sử dụng javascript để tương tác với DOM.
DOM - các thuộc tính và phương thức
HTML DOM
HTML DOM = HTML Document Object
Model
HTML DOM: là một thành phần của DOM
HTML DOM: Xem trang web như một cây
gồm nhiều node
Mỗi node là một thà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 - Các loại node
HTML DOM - Ví dụ
HTML DOM - Ví dụ
HTML DOM - Thuộc tính và 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 và phương thức:
 document.documentElement: node gốc của tà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
Là thể hiện của đối tượng cửa sổ trình duyệt
Tồn tại khi mở 1 tà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 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
Đối tượng Window - DOM
Properties
 document
 event
 history
 location
 name
 navigator
 screen
 status
 Methods
 alert
 confirm
 prompt
 blur
 close
 focus
 open
Đối tượng Window - DOM
Ví dụ:
<html>
<body>
<script type="text/javascript">
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
Đối tượng Document - DOM
 Properties
 aLinkColor
 bgColor
 body
 fgColor
 linkColor
 title
 URL
 vlinkColor
 forms[]
 images[]
 childNodes[]
 Methods
 close
 open
 createTextNode(“ text ")
 createElement(“HTMLtag")
 getElementById(“id”)
 …
 documentElement
 cookie
 ……
HTML DOM – document Object
HTML DOM – Image Object
HTML DOM – form Object
HTML DOM – element Object
Đối tượng Document - DOM
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 ()
Đối tượng Document - DOM
createElement ( nodeName )
Cho phép tạo ra 1 node HTML mới tùy
theo đối số nodeName đầu vào
Ví dụ:
var imgNode = document.createElement(“img”);
imgNode.src = “images/test.gif”;
// <img src=“images/test.gif” />
Đối tượng Document - DOM
createTextNode ( content )
Ví dụ:
var textNode = document.createTextNode(“New
text”);
var pNode = document.createElement(“p”);
pNode.appendChild(textNode);
// <p>New text</p>
Đối tượng Document - DOM
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 = “images/test.gif”;
pNode.appendChild(imgNode);
//<p id="id1" >
// some text<img src=“images/test.gif” />
//</p>
Ví dụ
DOM – insertBefore() , removeChild() , replaceChild()
DOM – firstChild , lastChild, nextSibling , hasChildNode()
Đối tượng Document - DOM
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>
Đối tượng Document - DOM
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 – innerHTML, innerText, outerText, OuterHTML
DOM – node.setAttribute (), getAttribute (), removeAttribute ()
DOM – node.setAttribute (), getAttribute (), removeAttribute ()
DOM – node.style
DOM – node.className
DOM trên các trình duyệt
DOM trên các trình duyệt
DOM - Table
Nội dung
Giới thiệu về Javascript
Kiểu dữ liệu & Các cú pháp Javascript
Nhúng Javascript vào trang web
Sử dụng các đối tượng trong Javascript
Xử lý sự kiện
DOM HTML với 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.
Ví dụ: Dynamic Table
<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
Ví dụ: Dynamic Table
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.
Ví dụ: Dynamic Table
function CreateTable(divTable)
{
var tagTable = document.createElement("table");
tagTable.border = 1;
var tagTBody = document.createElement("tbody");
tagTable.appendChild(tagTBody);
var nDong = txtSoDong.value;
var nCot = txtSoCot.value;
for (i=0; i<nDong; i++)
{
var tagTR = document.createElement("tr");
for (j=0; j<nCot; j++)
{
var tagTD = document.createElement("td");
var textNode = document.createTextNode(i+""+j);
tagTD.appendChild(textNode);
tagTR.appendChild(tagTD);
}
tagTBody.appendChild(tagTR);
}
divTable.appendChild(tagTable);
}
Javascript - thuộc tính prototype

More Related Content

Similar to C3-Javascript.pdf

Các ví dụ về cách viết và sử dụng chương trình con
Các ví dụ về cách viết và sử dụng chương trình conCác ví dụ về cách viết và sử dụng chương trình con
Các ví dụ về cách viết và sử dụng chương trình conNhungoc Phamhai
 
Kiem tra Javasrctip
Kiem tra JavasrctipKiem tra Javasrctip
Kiem tra Javasrctip
nguyenkiet2k14
 
Tài liệu hướng dẫn sử dụng javascript cho lập trình web
Tài liệu hướng dẫn sử dụng javascript cho lập trình webTài liệu hướng dẫn sử dụng javascript cho lập trình web
Tài liệu hướng dẫn sử dụng javascript cho lập trình web
PhanThanhToan1
 
Tai lieu huong_dan_ve_lap_trinh_php_7512
Tai lieu huong_dan_ve_lap_trinh_php_7512Tai lieu huong_dan_ve_lap_trinh_php_7512
Tai lieu huong_dan_ve_lap_trinh_php_7512
lekytho
 
Bài 3: Làm việc với kiểu dữ liệu và mã kịch bản - Giáo trình FPT
Bài 3: Làm việc với kiểu dữ liệu và mã kịch bản - Giáo trình FPTBài 3: Làm việc với kiểu dữ liệu và mã kịch bản - Giáo trình FPT
Bài 3: Làm việc với kiểu dữ liệu và mã kịch bản - Giáo trình FPT
MasterCode.vn
 
Chuong1 ontapcoso
Chuong1 ontapcosoChuong1 ontapcoso
Chuong1 ontapcoso
Tran Van
 
Dsd05 02b-json-rpca
Dsd05 02b-json-rpcaDsd05 02b-json-rpca
Dsd05 02b-json-rpca
Văn Đào Tiến
 
Thdc3 Lap Trinh C
Thdc3 Lap Trinh CThdc3 Lap Trinh C
Thdc3 Lap Trinh C
quyloc
 
Session 07 Final
Session 07 FinalSession 07 Final
Session 07 FinalSamQuiDaiBo
 
Hàm và nạp chồng hàm
Hàm và nạp chồng hàmHàm và nạp chồng hàm
Hàm và nạp chồng hàm
LAnhHuy4
 
Những điểm mới trong c# 3.0
Những điểm mới trong c# 3.0Những điểm mới trong c# 3.0
Những điểm mới trong c# 3.0Trần Thiên Đại
 
lap-trinh-web_nguyen-huy-khanh_web1-07-javascript - [cuuduongthancong.com] (1...
lap-trinh-web_nguyen-huy-khanh_web1-07-javascript - [cuuduongthancong.com] (1...lap-trinh-web_nguyen-huy-khanh_web1-07-javascript - [cuuduongthancong.com] (1...
lap-trinh-web_nguyen-huy-khanh_web1-07-javascript - [cuuduongthancong.com] (1...
PhanThanhToan1
 
Giao trinh java script
Giao trinh java scriptGiao trinh java script
Giao trinh java script
Toàn Trần Mạnh
 

Similar to C3-Javascript.pdf (20)

Kiem tra javascript
Kiem tra javascriptKiem tra javascript
Kiem tra javascript
 
Các ví dụ về cách viết và sử dụng chương trình con
Các ví dụ về cách viết và sử dụng chương trình conCác ví dụ về cách viết và sử dụng chương trình con
Các ví dụ về cách viết và sử dụng chương trình con
 
Kiem tra Javasrctip
Kiem tra JavasrctipKiem tra Javasrctip
Kiem tra Javasrctip
 
Php02 ngon nguphp
Php02 ngon nguphpPhp02 ngon nguphp
Php02 ngon nguphp
 
Php day4
Php day4Php day4
Php day4
 
Tài liệu hướng dẫn sử dụng javascript cho lập trình web
Tài liệu hướng dẫn sử dụng javascript cho lập trình webTài liệu hướng dẫn sử dụng javascript cho lập trình web
Tài liệu hướng dẫn sử dụng javascript cho lập trình web
 
Chuong 2
Chuong 2Chuong 2
Chuong 2
 
Tai lieu huong_dan_ve_lap_trinh_php_7512
Tai lieu huong_dan_ve_lap_trinh_php_7512Tai lieu huong_dan_ve_lap_trinh_php_7512
Tai lieu huong_dan_ve_lap_trinh_php_7512
 
Bài 3: Làm việc với kiểu dữ liệu và mã kịch bản - Giáo trình FPT
Bài 3: Làm việc với kiểu dữ liệu và mã kịch bản - Giáo trình FPTBài 3: Làm việc với kiểu dữ liệu và mã kịch bản - Giáo trình FPT
Bài 3: Làm việc với kiểu dữ liệu và mã kịch bản - Giáo trình FPT
 
Java Tieng Viet
Java Tieng VietJava Tieng Viet
Java Tieng Viet
 
Chuong1 ontapcoso
Chuong1 ontapcosoChuong1 ontapcoso
Chuong1 ontapcoso
 
Dsd05 02b-json-rpca
Dsd05 02b-json-rpcaDsd05 02b-json-rpca
Dsd05 02b-json-rpca
 
Thdc3 Lap Trinh C
Thdc3 Lap Trinh CThdc3 Lap Trinh C
Thdc3 Lap Trinh C
 
Session 07 Final
Session 07 FinalSession 07 Final
Session 07 Final
 
Hàm và nạp chồng hàm
Hàm và nạp chồng hàmHàm và nạp chồng hàm
Hàm và nạp chồng hàm
 
Những điểm mới trong c# 3.0
Những điểm mới trong c# 3.0Những điểm mới trong c# 3.0
Những điểm mới trong c# 3.0
 
temp.pdf
temp.pdftemp.pdf
temp.pdf
 
lap-trinh-web_nguyen-huy-khanh_web1-07-javascript - [cuuduongthancong.com] (1...
lap-trinh-web_nguyen-huy-khanh_web1-07-javascript - [cuuduongthancong.com] (1...lap-trinh-web_nguyen-huy-khanh_web1-07-javascript - [cuuduongthancong.com] (1...
lap-trinh-web_nguyen-huy-khanh_web1-07-javascript - [cuuduongthancong.com] (1...
 
Giao trinh java script
Giao trinh java scriptGiao trinh java script
Giao trinh java script
 
Chuong 08 tai dinh nghia
Chuong 08 tai dinh nghiaChuong 08 tai dinh nghia
Chuong 08 tai dinh nghia
 

C3-Javascript.pdf

  • 1. GVLT: ThS Phạm Thi Vương JAVASCRIPT & DOM HTML
  • 2. 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ụ
  • 3. Nội dung Giới thiệu về Javascript Nhúng Javascript vào trang web Kiểu dữ liệu & Các cú pháp Javascript Xử lý sự kiện DOM HTML với Javascript Ví dụ
  • 4. 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
  • 5. 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…
  • 6. Giới thiệu về Javascript 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.
  • 7. 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
  • 8. 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
  • 9. Giới thiệu về Javascript 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) sẽ thực hiện các lệnh Server-side Scipts và 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.
  • 10. Nội dung Giới thiệu về Javascript Nhúng Javascript vào trang web Kiểu dữ liệu & Các cú pháp Javascript Xử lý sự kiện DOM HTML với Javascript Ví dụ
  • 11. Nhúng Javascript vào trang web Định nghĩa script trực tiếp trong trang html: <script type=“text/javascript”> <!-- // Lệnh Javascript --> </script> Nhúng sử dụng script cài đặt từ 1 file .js khác: <script src=“xxx.js”></script>
  • 12. Nhúng Javascript vào trang web <html> <head> <script type="text/javascript"> some statements </script> </head> <body> <script type="text/javascript"> some statements </script> <script src=“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>
  • 13. Nhúng Javascript vào trang web Đặ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ế.
  • 14. 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>
  • 15. VD: Nhúng Javascript vào trang web <html> <body> document.write(“Hello world!”); <script type="text/javascript"> document.write(“Hello world!”); </script> </body> </html>
  • 16. Nội dung Giới thiệu về Javascript Nhúng Javascript vào trang web Kiểu dữ liệu & Các cú pháp Javascript Xử lý sự kiện DOM HTML với Javascript Ví dụ
  • 17. 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
  • 18. 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
  • 19. Đổ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ố.
  • 20. 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
  • 21. 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.
  • 22. 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
  • 23. 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.
  • 24. 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
  • 25. Mảng  arrayObjectName = new Array([element0, element1, ..., elementN])  arrayObjectName = new Array(3)  MyArray = new Array(5,5);  MyArray[0, 0]
  • 26. 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.
  • 28. 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); }
  • 29. Hàm trong Javascript Ví dụ: function Sum(x, y) { tong = x + y; return tong; } Gọi hàm: var x = Sum(10, 20);
  • 30. 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 */
  • 31. Một vài hàm thường dùng eval  Hàm eval được dùng để đánh giá một chuỗi và không cần tham chiếu đến bất kỳ một đối tượng cụ thể nào.  eval(string) Hàm isNaN  Hàm isNaN được dùng để kiểm tra xem đối số truyền vào có phải là một số hay không.  isNaN(testValue)
  • 32. 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;
  • 33. 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") }
  • 34. 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; }
  • 35. 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; }
  • 36. 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);
  • 37. Nội dung Giới thiệu về Javascript Nhúng Javascript vào trang web Kiểu dữ liệu & Các cú pháp Javascript Sử dụng các đối tượng trong Javascript Xử lý sự kiện DOM HTML với Javascript Ví dụ
  • 38. Các đối tượng trong Javascript String Number Array Date Math navigator window Document. location History
  • 39. 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>
  • 40. 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"
  • 41. String Phương thức  stringObj.anchor(anchorString) – tạo Bookmark  strVariable.link(URL)  string1.concat([string2[, string3[,... [, stringn]]]])
  • 44.
  • 45. 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().
  • 46. Date getDate(), getDay(), getMonth(), getYear(),… getTime(), getHours(), getMinutes(), getSeconds()  setDate, setFullYear, setHours, setMinutes, setMonth, setSeconds, setTime, setYear,… toDateString, toString
  • 47. 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 ) ,…
  • 48. 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
  • 49. 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");
  • 50. 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);
  • 51. 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á.
  • 52. 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
  • 53. 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()
  • 54. Location Object Chứa thông tin về URL hiện tại Properties  Hostname  href, … Methods  Reload  …
  • 55. 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
  • 56.
  • 57. Nội dung Giới thiệu về Javascript Nhúng Javascript vào trang web Kiểu dữ liệu & Các cú pháp Javascript Xử lý sự kiện DOM HTML với Javascript Ví dụ
  • 58. Xử lý sự kiện – Event Object Events là 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 sẽ 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
  • 59. 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  ………
  • 60. 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à „…‟
  • 61. 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>
  • 62. 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>
  • 63. 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>
  • 64. 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>
  • 65. Xử lý sự kiện – Danh sách các sự kiện của Form field
  • 66.
  • 67. Mở một cửa sổ bằng java script
  • 68.
  • 69.
  • 70. Nội dung Giới thiệu về Javascript Nhúng Javascript vào trang web Kiểu dữ liệu & Các cú pháp Javascript Sử dụng các đối tượng trong Javascript Xử lý sự kiện DOM HTML với Javascript Ví dụ
  • 71. DOM DOM = Document Object Model DOM là tổ mô hình cho phép truy xuất đến các thành phần trong một tà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 là 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 tài liệu HTML, XHTML, XML. Sử dụng javascript để tương tác với DOM.
  • 72. DOM - các thuộc tính và phương thức
  • 73. HTML DOM HTML DOM = HTML Document Object Model HTML DOM: là một thành phần của DOM HTML DOM: Xem trang web như một cây gồm nhiều node Mỗi node là một thành phần:  tag HTML  thuộc tính  nội dung của tag
  • 74. 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
  • 75. HTML DOM - Các loại node
  • 76. HTML DOM - Ví dụ
  • 77. HTML DOM - Ví dụ
  • 78. HTML DOM - Thuộc tính và phương thức của node
  • 79. 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 và phương thức:  document.documentElement: node gốc của tài liệu HTML (thẻ html)  document.body: node body (thẻ body)  document.getElementById("id_of_element_node")  document.getElementsByTagName("tagname_of_node")
  • 80. Các đối tượng DOM trong javascript
  • 81. Đối tượng Window - DOM Là thể hiện của đối tượng cửa sổ trình duyệt Tồn tại khi mở 1 tà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 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
  • 82. Đối tượng Window - DOM Properties  document  event  history  location  name  navigator  screen  status  Methods  alert  confirm  prompt  blur  close  focus  open
  • 83. Đối tượng Window - DOM Ví dụ: <html> <body> <script type="text/javascript"> var curURL = window.location; window.alert(curURL); </script> </body> </html>
  • 84. DOM – navigator Object Cung cấp thông tin về trình duyệt Browser
  • 85. DOM – location Object Chứa thông tin về URL hiện tại
  • 86.
  • 87. Đố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
  • 88. Đối tượng Document - DOM  Properties  aLinkColor  bgColor  body  fgColor  linkColor  title  URL  vlinkColor  forms[]  images[]  childNodes[]  Methods  close  open  createTextNode(“ text ")  createElement(“HTMLtag")  getElementById(“id”)  …  documentElement  cookie  ……
  • 89. HTML DOM – document Object
  • 90. HTML DOM – Image Object
  • 91.
  • 92. HTML DOM – form Object
  • 93. HTML DOM – element Object
  • 94. Đối tượng Document - DOM 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
  • 97.
  • 98. Đối tượng Document - DOM createElement ( nodeName ) Cho phép tạo ra 1 node HTML mới tùy theo đối số nodeName đầu vào Ví dụ: var imgNode = document.createElement(“img”); imgNode.src = “images/test.gif”; // <img src=“images/test.gif” />
  • 99. Đối tượng Document - DOM createTextNode ( content ) Ví dụ: var textNode = document.createTextNode(“New text”); var pNode = document.createElement(“p”); pNode.appendChild(textNode); // <p>New text</p>
  • 100. Đối tượng Document - DOM 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 = “images/test.gif”; pNode.appendChild(imgNode); //<p id="id1" > // some text<img src=“images/test.gif” /> //</p>
  • 102. DOM – insertBefore() , removeChild() , replaceChild()
  • 103. DOM – firstChild , lastChild, nextSibling , hasChildNode()
  • 104. Đối tượng Document - DOM 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>
  • 105. Đối tượng Document - DOM 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”
  • 106. DOM – innerHTML, innerText, outerText, OuterHTML
  • 107. DOM – innerHTML, innerText, outerText, OuterHTML
  • 108. DOM – node.setAttribute (), getAttribute (), removeAttribute ()
  • 109. DOM – node.setAttribute (), getAttribute (), removeAttribute ()
  • 112. DOM trên các trình duyệt
  • 113. DOM trên các trình duyệt
  • 115.
  • 116.
  • 117. Nội dung Giới thiệu về Javascript Kiểu dữ liệu & Các cú pháp Javascript Nhúng Javascript vào trang web Sử dụng các đối tượng trong Javascript Xử lý sự kiện DOM HTML với Javascript Ví dụ
  • 118. 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.
  • 119. Ví dụ: Dynamic Table <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
  • 120. 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
  • 121. Ví dụ: Dynamic Table 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.
  • 122. Ví dụ: Dynamic Table function CreateTable(divTable) { var tagTable = document.createElement("table"); tagTable.border = 1; var tagTBody = document.createElement("tbody"); tagTable.appendChild(tagTBody); var nDong = txtSoDong.value; var nCot = txtSoCot.value; for (i=0; i<nDong; i++) { var tagTR = document.createElement("tr"); for (j=0; j<nCot; j++) { var tagTD = document.createElement("td"); var textNode = document.createTextNode(i+""+j); tagTD.appendChild(textNode); tagTR.appendChild(tagTD); } tagTBody.appendChild(tagTR); } divTable.appendChild(tagTable); }
  • 123. Javascript - thuộc tính prototype