Slide TaiLieu Chuong6 JS-DOM Phan1

JAVASCRIPT
TH.S LÊ QUANG SONG

1
Giới thiệu về Script
Giới thiệu về Script
Script là gì ?
ClientVSide$Script$
!   ClientVSide$Script$
! 
Script$ được$ thực$ thi$ tại$ Client'Side$ (trình$ duyệt):$
!   Script$ được$ thực$ thi$ tại$ Client'Side$ (trình$ duyệt):$
! 
Thực$
Thực$ hiện$ các$ tương$
hiện$ các$ tương$tác$tác$với$
với$người$
người$dùng$
dùng$($ tạo$
($ tạo$
menu$chuyển$động,$…$)$,$kiểm$tra$dữ$liệu$nhập,…$$ $$
menu$chuyển$động,$…$)$,$kiểm$tra$dữ$liệu$nhập,…
! !    ServerVSide$Script$
ServerVSide$Script$
! !     Script$
Script$ được$ xử$
xử$ lý$
lý$tại$
tại$Server'Side,$
Server'Side,$nhằm$
nhằm$tạo$
tạo$ các$
các$
trang$
trang$ web$ có$
có$khả$
khả$năng$
năng$phát$
phát$sinh$
sinh$nội$
nội$dung$
dung$ động.$
động.$
Một$ lý$ chính:$
Một$ số$ xử$ lý$ chính:$kết$
kết$nối$
nối$CSDL,$
CSDL,$truy$
truy$cập$
cập$
hệ$hệ$
thống$file$trên$server,$phát$sinh$nội$dung$html$trả$
thống$file$trên$server,$phát$sinh$nội$dung$html$trả$ 2
về$người$dùng…$
về$người$dùng…$
Học lập trình trực tuyến tại myclass.vn
Giới thiệu về Javascript
Giới
Giới thiệu
thiệu về Javascript
vềJavaScript
Javascript là gì ?
!  JavaScript$Là$ngôn$ngữ$Client'side-script$hoạt$
!!    JavaScript$Là$ngôn$ngữ$Client'side-script$hoạt$
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ý$
!!!     Chia$sẻ$xử$lý$trong$ứng$dụng$web.$Giảm$các$xử$lý$
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úp$tạo$các$hiệu$ứng,$tương$tác$cho$trang$web.$
Giúp$tạo$các$hiệu$ứng,$tương$tác$cho$trang$web.$

Nhúng Javascript vào trang
Nhúng Javascript vào trang web
web
Nhúng JavaScript vào trang HTML
Định$nghĩa$Script$trực$tếp$trong$trang$HTML:$
Định$nghĩa$Script$trực$tếp$trong$trang$HTML:$
<script$type=“text/javascript”>$
<script$type=“text/javascript”>$
$$$$<!mm$$
$$$$<!mm$$
$ $ $//-Lệnh-Javascript-
$//-Lệnh-Javascript-
$$$$$mm>$
$$$$$mm>$
</script>$$
</script>$$
$
$
Nhúng$sử$dụng$script$cài$đặt$từ$1$file$.js$khác:$
Nhúng$sử$dụng$script$cài$đặt$từ$1$file$.js$khác:$
<script$src=“abc.js”></script>$
<script$src=“abc.js”></script>$ 4

Nhúng JavaScript vào trang Web
Nhúng JavaScript
Nhúng JavaScriptvào
vàotrang
trangWeb
Web
!   Web$ Browser$ sẽ$ thực$ thi$ <script>$ khi$ load$
Web$ Browser$
!!    Web$ Browser$ sẽ$
sẽ$ thực$
thực$thi$
thi$<script>$
<script>$khi$
khi$load$
load$
trang$web$theo$thứ$tự$từ$trên-xuống$dưới.$
!
!!
Đối$
Đối$ với$
Đối$ với$ Source-
với$ Source- code-
Source- code- JavaScript$
code- JavaScript$ có$
JavaScript$có$
có$thể$thể$
thể$đặt$đặt$
đặt$
trong$các$file$.js$sẽ$được$nhúng$vào$file$HTML$
trước$khi$hoạt$động.$$
! !! Các$
Các$ đoạn$
Các$ đoạn$ code-
đoạn$ code- JavaScript$được$
code-JavaScript$
JavaScript$ được$
được$ Browser$
Browser$
Browser$ xử$ xử$
xử$
cùng-
cùng-thứ-
cùng- thứ- tự$
thứ-tự$ với$các$
tự$với$
với$ các$thẻ$
các$ thẻ$HTML.$
thẻ$ HTML.$
HTML.$ Trừ$
Trừ$
Trừ$ các$
các$
các$ hàm$
hàm$
hàm$
(func/on)$chỉ$được$thực$thi$khi$có-lời-gọi-hàm.$
5

húng$Javascript$vào$trang$web$
Nhúng$Javascript$vào$trang$web$
ml>$$ Nhúng$Javascript$vào$trang$web$
head>$$ Nhúng$Javascript$vào$trang$web$
<html>$$
<html>$$
<html>$$
<html>$$ $<head>$$
$<head>$$
$<script$type="text/javascript">$$
$<head>$$
<html>$$
--$$$$$$ $
--------
$$
<html>$$
$<head>$$
$$$<html>$$ $<script$type="text/javascript">$$
-some-statements$$
$<head>$$
$<head>$$
-- -some-statements$$
$$$ --------
$</script>$$$
$$$ $
$<head>$$ -- -some-statements$$
--------
$$$$$$$$$ $ $ $ --$</script>$$
$$$
--------
$ -some-statements$$
-- $</script>$$ -some-statements$$
/head>$$ -------- -------- ----
$$$ $-------- -some-statements$$
-some-statements$$
$$$
$$$ $$ $</script>$$
$</head>$$
$</head>$$ --$</script>$$
$</script>$$ -some-statements$$
body>$$ $$$ $</head>$$
$ $<body>$$
$$$ $ $</script>$$
$</head>$$ $</script>$$
$<body>$$
$</head>$$
$</head>$$
$$$$$<body>$$
$$$$$$$$$$$<script$type="text/javascript">$$
$$$$$$$$<script$type="text/javascript">$$
$$$$
$<body>$$
$</head>$$
$<body>$$
$<body>$$
$$$$ $$$$$$$$$$$<script$type="text/javascript">$$
--------------------------------some-statements$$
$<body>$$
------------------------some-statements$$
$$$$$$$$$$$$$$$$$$$$</script>$$
--------------------------------some-statements$$
--------------------------------some-statements$$
--------------------------------some-statements$$
$$$$
$$$$$$$$</script>$$ $$$$$$$$$$$<script$type="text/javascript">$$
--------------------------------some-statements$$
$$$$$$$$$$$$$$$$</script>$$
$$$$$$$$$$$$$$$$</script>$$
--------------------------------some-statements$$
$$$$$$$$$$$$$$$$</script>$$
$
--------------------------------some-statements$$
$$$$$$$$$$$$$$$$</script>$$
$ $$$$$$$$$$$$$$$$</script>$$
$$ $ $<script$src= Tên_file_script.js">method()</script>$
$$$$$$$$$$$$$$$$</script>$$
$ $$
$<script$src=
$ $ $$ $ $ $<script$src= Tên_file_script.js">method()</script>$
Tên_file_script.js">method()</script>$
Tên_file_script.js">method()</script>$
$<script$src= Tên_file_script.js">method()</script>$
$ $ $$ $ $$ $<script$src= $<script$src= Tên_file_script.js">method()</script>$
$<script$type= Tên_file_script.js">method()</script>$
text/javascript
$<script$type= text/javascript
text/javascript >$ >$
>$
$ $ $ $ $$ $$$$$$$$$$$
$<script$type= $<script$src=
$<script$type=
$<script$type=
$$$$$$$$$$$ Tên_file_script.js">method()</script>$
text/javascripttext/javascript
text/javascript >$ >$ >$
//$gọi$thực$hiện$các$phương$thức$được$định$nghĩa$
//$gọi$thực$hiện$các$phương$thức$được$định$nghĩa$ $$$$ $$
$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$//$trong$
$$$$$$$$$$$ $ $//$gọi$thực$hiện$các$phương$thức$được$định$nghĩa$
$$$$$$$$$$$
$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$//$trong$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$//$trong$
$<script$type=
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$//$trong$ Tên_file_script.js
Tên_file_script.js $$ $
text/javascript
Tên_file_script.js
>$
//$gọi$thực$hiện$các$phương$thức$được$định$nghĩa$ $$
$$ $$ 6
$ $ $$ $</script>$$</script>$ Tên_file_script.js
$<script$type=
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$//$trong$ $
text/javascript
Tên_file_script.js $ >$
$ $</body>$$
$$$$$$$$$$$$$$$$$$$$//$trong$ $$$$$$$$$$$
$$</body>$$
$</body>$$$</script>$Tên_file_script.js $
//$gọi$thực$hiện$các$phương$thức$được$định$nghĩa$ $$
$</script>$ $ $ $</body>$$ $</script>$
$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$//$trong$
</html>$
</html>$ //$gọi$thực$hiện$các$phương$thức$được$định$nghĩa$
Tên_file_script.js $ $$
</html>$ $</body>$$ Học lập trình trực tuyến tại myclass.vn
/body>$$ $</html>$ $</script>$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$//$trong$ Tên_file_script.js $
</html>$
$ $</script>$
ml>$ $</body>$$
</html>$ $</body>$$
</html>$
!
!
Đặt$giữa$tag$<head>$và$</head>:$script$sẽ$thực$
thi$ngay$khi$trang$web$được$mở.$
! thi$ngay$khi$trang$web$được$mở.$
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>).$
<head>).$
!
<head>).$
Số$lượng$đoạn$clientmscript$chèn$vào$trang$không$
! hạn$chế.$
7
! hạn$chế.$
hạn$chế.$ Học lập trình trực tuyến tại myclass.vn

KIỂM TRA DỮ
LIỆU VÀ CÚ
PHÁP
NGÔN NGỮ
JAVASCRIPT
Biến$số$trong$Javascript$
Biến$số$trong$Javascript$ Biến số trong Javascript
Cách$đặt$tên$biến$
!! Cách$đặt$tên$biến$
! Cách$đặt$tên$biến$
! ! ! !Cách$đặt$tên$biến$
Bắt$đầu$bằng$một$chữ$cái$hoặc$dấu$_$
! Bắt$đầu$bằng$một$chữ$cái$hoặc$dấu$_$
! ! 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$
!   A..Z,a..z,0..9,_$:$phân$biệt$HOA,$Thường$
Ví dụ: var chuoiSo;
A..Z,a..z,0..9,_$:$phân$biệt$HOA,$Thường$
Khai$báo$biến$
Khai$báo$biến$
!! !   A..Z,a..z,0..9,_$:$phân$biệt$HOA,$Thường$
  A..Z,a..z,0..9,_$:$phân$biệt$HOA,$Thường$
A..Z,a..z,0..9,_$:$phân$biệt$HOA,$Thường$
! !  !  Bắt$đầu$bằng$một$chữ$cái$hoặc$dấu$_$
var ChuoiSo;
!   A..Z,a..z,0..9,_$:$phân$biệt$HOA,$Thường$
! ! Sử$dụng$từ$khóa$var$$$
Sử$dụng$từ$khóa$var$$$
  A..Z,a..z,0..9,_$:$phân$biệt$HOA,$Thường$
!! ! ! Khai$báo$biến$
Khai$báo$biến$
Khai$báo$biến$
Khai$báo$biến$
Khai$báo$biến$
!
!
$Ví$dụ:$var3count3=310,3amount;3
Ví$dụ:$var3count3=310,3amount;3
Khai$báo$biến$
!! !! Không-cần-khai-báo-biến-trước-khi-sử-dụng,$biến$thật$sự$tồn$tại$
! ! Sử$dụng$từ$khóa$var$$$
Không-cần-khai-báo-biến-trước-khi-sử-dụng,$biến$thật$sự$tồn$tại$
! Sử$dụng$từ$khóa$var$$$
! khi$bắt$đầu$sử$dụng$lần$đầu$tên.$
khi$bắt$đầu$sử$dụng$lần$đầu$tên.$
$$Ví$dụ:$var3count3=310,3amount;3
$$Ví$dụ:$var3count3=310,3amount;3
Biến$ không- cần- khải- báo- kiểu- dữ$ liệu$ vì$ vì$
biến$ trong$ javascript$
!! $Ví$dụ:$var3count3=310,3amount;3
Biến$ $ không- cần- khải- báo- kiểu-
Ví$dụ:$var3count3=310,3amount;3 dữ$ liệu$ biến$ trong$ javascript$
! Không-cần-khai-báo-biến-trước-khi-sử-dụng,$biến$thật$sự$tồn$tại$
!! không-có-kiểu-dữ-liệu-nhất-định-
không-có-kiểu-dữ-liệu-nhất-định-
! Không-cần-khai-báo-biến-trước-khi-sử-dụng,$biến$thật$sự$tồn$tại$
!
Không-cần-khai-báo-biến-trước-khi-sử-dụng,$biến$thật$sự$tồn
! khi$bắt$đầu$sử$dụng$lần$đầu$tên.$ 10
! Biến$ không- cần- khải- báo- kiểu- dữ$ liệu$ vì$ biến$ trong$ javascript$
Biến$
Biến$
!! ! ! Biến$ không-
không-
không-
Biến$ cần-
cần-
không- cần-khải-
khải-
cần- báo-báo-
khải-
khải- báo-
kiểu-
kiểu-
báo-dữ$kiểu-dữ$dữ$
liệu$
kiểu- liệu$
vì$
dữ$ vì$trong$
liệu$
biến$
liệu$ biến$
vì$
vì$ trong$
biến$ javascript$
trong$
javascript$
biến$ trong$ javascript$
javascript$
! Biến$ không-Học cần- khải- báo- kiểu- dữ$ liệu$ vì$ biến$ trong$ javasc
lập trình trực tuyến tại myclass.vn
Kiểu
Kiểu
Kiểu
Kiểu dữ
dữ
dữ
dữ liệu
liệu
liệu
liệu trong
trong
trong
trong Javascript
Javascript
Javascript
Kiểu
Kiểu dữ
dữ liệu
liệu trong
trong Javascript
Javascript
Kiểu
Kiểu$dữ$liệu
dữ
Ví$dụ
liệu trong Javascript
Mô$tả
Kiểu$dữ$liệu
Kiểu$dữ$liệu Ví$dụ
Ví$dụ Mô$tả
Mô$tả
Object
var$listBooks$=$new$Array(10)$; Mô$tả
Trước$khi$sử$dụng,$phải$cấp$phát$bằng$
Kiểu$dữ$liệu
Object
Object Ví$dụ
var$listBooks$=$new$Array(10)$; Mô$tả
Kiểu$dữ$liệu
Object
var$listBooks$=$new$Array(10)$;
Ví$dụ Mô$tả
từ$khóa$new
Mô$tả
Object var$listBooks$=$new$Array(10)$;
var$listBooks$=$new$Array(10)$; Trước$khi$sử$dụng,$phải$cấp$phát$bằng$
từ$khóa$new
Object var$listBooks$=$new$Array(10)$; từ$khóa$new
từ$khóa$new
Object
String var$listBooks$=$new$Array(10)$;
The$cow$jumped$over$the$moon. $ $
Chứa$được$chuổi$unicode
từ$khóa$new
String
String
String
The$cow$jumped$over$the$moon.
40
The$cow$jumped$over$the$moon.
40
The$cow$jumped$over$the$moon. $$$ Chứa$được$chuổi$unicode
từ$khóa$new
từ$khóa$new
Chuổi$rỗng$
Chứa$được$chuổi$unicode $
$$
$
String 40
The$cow$jumped$over$the$moon. $ Chuổi$rỗng$
String 40
Chứa$được$chuổi$unicode$
String
Number 0.066218
40 $
Chứa$được$chuổi$unicode$
Theo$chuẩn$IEEE$754
Chuổi$rỗng$
Number 40
0.066218 $ Chuổi$rỗng$
Number
Number 0.066218
1240
0.066218 $
$$ Theo$chuẩn$IEEE$754
Chuổi$rỗng$
Number 12
0.066218
12 Theo$chuẩn$IEEE$754
Number 0.066218$
Number
boolean 0.066218$
true$/$false
boolean 12
true$/$false
boolean
boolean true$/$false
12
true$/$false
boolean
undefined
boolean true$/$false
var$myVariable$;
true$/$false myVariable$=$undefined
undefined
boolean
undefined var$myVariable$;
true$/$false
var$myVariable$; myVariable$=$undefined
myVariable$=$undefined
undefined
undefined var$myVariable$;
var$myVariable$; myVariable$=$undefined
myVariable$=$undefined
undefined var$myVariable$; myVariable$=$undefined
undefined
null var$myVariable$;
connecton.Close(); myVariable$=$undefined
connecton$=$null
null
null connecton.Close(); connecton$=$null
null
null connecton.Close();
connecton.Close(); connecton$=$null
connecton$=$null
connecton.Close(); connecton$=$null
Một3biến3trong3JavaScript3có3thể3lưu3bất3kỳ3kiểu3nào3
Đổi$kiểu$dữ$liệu$
Đổi
kiểu dữ liệu
Biến$tự$đổi$kiểu$dữ$liệu$khi$giá$trị$mà$nó$
! Đổ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$
!
! ! Biến$tự$đổi$kiểu$dữ$liệu$khi$giá$trị$mà$nó$lưu$trữ$
!thay$đổi$
thay$đổi$
!thay$đổi$
thay$đổi$ Biến$tự$đổi$kiểu$dữ$liệu$khi$giá$trị$mà$nó$lưu$trữ$
!thay$đổi$
thay$đổi$
:$
$$$$$$Ví$dụ
$$$$$$Ví$dụ :$
thay$đổi$
thay$đổi$
thay$đổi$
$$$$$$Ví$dụ
$$$$$$Ví$dụ
$$$$$$Ví$dụ :$:$
$$$$$$Ví$dụ
$$$$$$$var-x-=-10;-
$$$$$$Ví$dụ :$:$ - -//-x-kiểu-Number-
$$$$$$$
$$$$$$$ $$$$$$$
$$$$$$Ví$dụ
--------x-=-
$$$$$$$ var-x-=-10;-
$$$$$$$var-x-=-10;-
var-x-=-10;-
var-x-=-10;-
$$$$$$$
hello-world-!
--------x-=-
:$
:$var-x-=-10;-
var-x-=-10;-
$$$$$$Ví$dụ
var-x-=-10;- -;----
hello-world-! ;----
-
-- -- - -//-x-kiểu-String- -//-x-kiểu-Number-
-//-x-kiểu-Number-
-//-x-kiểu-String-
$$$$$$$
--------x-=-
--------x-=- $$$$$$$ hello-world-!
var-x-=-10;-
hello-world-! ;----;----
-;---- -//-x-kiểu-String-
- -//-x-kiểu-String-
! --------x-=- hello-world-! ;---- -//-x-kiểu-String-
--------x-=-
--------x-=- var-x-=-10;-
--------x-=- hello-world-!
hello-world-!
hello-world-!
Có$thể$cộng$2$biến$khác$kiểu$dữ$liệu$
;----
;---- ;----
;---- -//-x-kiểu-Number-
! Có$thể$cộng$2$biến$khác$kiểu$dữ$liệu$
!! ! Có$thể$cộng$2$biến$khác$kiểu$dữ$liệu$
!
$$$$$$Ví$dụ:
$$$$$$$$
$$$$$$Ví$dụ:
! $Có$thể$cộng$2$biến$khác$kiểu$dữ$liệu$
! Có$thể$cộng$2$biến$khác$kiểu$dữ$liệu$
$$$$$$Ví$dụ:
!$$$$$$Ví$dụ: $
$$$$$$Ví$dụ:
$$$$$$Ví$dụ:
$
$
$ $ $var-x;-
var-x;-
$$$$$$$$
$$$$$$Ví$dụ:
$$$$$$Ví$dụ: $
$$$$$$$$ $$$$$$$$ var-x;-
$$$$$$Ví$dụ:
$$$$$$$$
var-x;-
var-x;-
$$$$$$$$$$$$$$$$
var-x;-
$$$$$$$$$
----------x-=-“12”-+-34.5;--------------//-KQ:-x-=-
var-x;-
var-x;- 1234.5
----------x-=-“12”-+-34.5;--------------//-KQ:-x-=- $
1234.5$ $
var-x;-
----------x-=-“12”-+-34.5;--------------//-KQ:-x-=-
----------x-=-“12”-+-34.5;--------------//-KQ:-x-=-
----------x-=-“12”-+-34.5;--------------//-KQ:-x-=-
----------x-=-“12”-+-34.5;--------------//-KQ:-x-=- 1234.5$ $
1234.5
1234.5
1234.5
----------x-=-“12”-+-34.5;--------------//-KQ:-x-=-
Hàm$parseInt(…),$parseFloat(…)$:$$Đổi$KDL$từ$ 1234.5
----------x-=-“12”-+-34.5;--------------//-KQ:-x-=-
Hàm$parseInt(…),$parseFloat(…)$:$$Đổi$KDL$từ$
----------x-=-“12”-+-34.5;--------------//-KQ:-x-=- $
1234.5
1234.5 $$
! Hàm$parseInt(…),$parseFloat(…)$:$$Đổi$KDL$từ$
! $$$$$$$$
!
!
var-x;-
! Hàm$parseInt(…),$parseFloat(…)$:$$Đổi$KDL$từ$
!
chuỗi$sang$số.$
!chuỗi$sang$số.$
!chuỗi$sang$số.$
chuỗi$sang$số.$
chuỗi$sang$số.$
----------x-=-“12”-+-34.5;--------------//-KQ:-x-=-
chuỗi$sang$số.$
chuỗi$sang$số.$
chuỗi$sang$số.$ Học lập trình trực tuyến tại myclass.vn 1234.5 $
chuỗi$sang$số.$
! Hàm$parseInt(…),$parseFloat(…)$:$$Đổi$KD
Hàm$trong$Javascript$
Hàm trong javascript
!
!
Dạng$thức$khai$báo$chung:$
Dạng$thức$khai$báo$chung:$
! Dạng$thức$khai$báo$chung:$
-func/on-Tên_hàm(thamso1,-thamso2,-…)-
! Dạng$thức$khai$báo$chung:$
{-
{- -func/on-Tên_hàm(thamso1,-thamso2,-…)-
{-
{--…--…-
-…-
}}$$ }$ -…-
$
! }Hàm$có$giá$trị$trả$về:$
!! Hàm$có$giá$trị$trả$về:$
Hàm$có$giá$trị$trả$về:$
! Hàm$có$giá$trị$trả$về:$
-func/on-Tên_hàm(thamso1,-thamso2,-...)-
{-
{- -…-
{-{- -return3(value);3
-…-
-…- $ -return3(value);3
}-…-
}$
-return3(value);3
-return3(value);3
}$
}$ Học lập trình trực tuyến tại myclass.vn
!! Ví$dụ:$
Ví$dụ:$
Hàm
Hàm trong
trong
trong
Hàm
Javascript
Javascript
-func/on-Sum(x,-y)-
Hàm trong
trong Javascript
-func/on-Sum(x,-y)-
Hàm Javascript
Javascript
Ví dụ Hàm trong javascript
{-{-
Ví$dụ:$
! ! ! Ví$dụ:$
Ví$dụ:$ ! !
-tong-=-x-+-y;-
-tong-=-x-+-y;-
Ví$dụ:$
Ví$dụ:$
-return-tong;
-return-tong;
-func/on-Sum(x,-y)-
-func/on-Sum(x,-y)-
-func/on-Sum(x,-y)- ----
-func/on-Sum(x,-y)-
-func/on-Sum(x,-y)-
{- }}$$
{- {- {- {-
-tong-=-x-+-y;-
-tong-=-x-+-y;- -tong-=-x-+-y;-
-tong-=-x-+-y;-
-tong-=-x-+-y;-
-return-tong;
-return-tong; ---return-tong;
---return-tong; ----
}$ }-return-tong;
$ }$ --
}$
}$
!! Gọi$hàm:$
Gọi$hàm:$
! ! Gọi$hàm:$
Gọi$hàm:$! Gọi$hàm:$
! Gọi$hàm:$
! -var-x-=-Sum(10,-20);-
-var-x-=-Sum(10,-20);-
Gọi$hàm:$
-var-x-=-Sum(10,-20);-
-var-x-=-Sum(10,-20);-
-var-x-=-Sum(10,-20);-
-var-x-=-Sum(10,-20);-
----alert(x);-
----alert(x);- ----alert(x);-
----alert(x);-----alert(x);-
----alert(x);-
-var-x-=-Sum(10,-20);-
----alert(x);- Học lập trình trực tuyến tại myclass.vn
Các$quy$tắc$chung$
Các qui tắc chung
! Khối$lệnh$được$bao$trong$dấu${}$
!! Khối$lệnh$được$bao$trong$dấu${}$
Khối$lệnh$được$bao$trong$dấu${}$
! Mỗi$lệnh$nên$kết$thúc$bằng$dấu$;$
!! Mỗi$lệnh$nên$kết$thúc$bằng$dấu$;$
Mỗi$lệnh$nên$kết$thúc$bằng$dấu$;$
! Cách$ghi$chú$thích:$
!! Cách$ghi$chú$thích:$
Cách$ghi$chú$thích:$
!   //3Chú-thích-1-dòng-
!!    //3Chú-thích-1-dòng-
//3Chú-thích-1-dòng-
!   /*$Chú$thích$
!!    /*$Chú$thích$
/*$Chú$thích$
$$$$nhiều$dòng$*/$

Một số sự kiện thông dụng
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
! …

ĐỐI TƯỢNG DOM
Đối$tượng$HTML$DOM$
!  DOM$=$Document$Object$Model$
! Là$tập$hợp$các$đối$tượng$HTML$chuẩn$được$
dùng$để$truy$xuất$và$thay$đổi$thành$phần$HTML$
trong$trang$web$($thay$đổi$nội$dung$tài$liệu$của$
trang$)$
! Một$số$đối$tượng$của$DOM:$window,-document,-
history,-link,-form,-frame,-locazon,-event,-…-

ĐỐI TƯỢNG DOM

ĐỐI TƯỢNG DOM
Đối$tượng$Window$m$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$tn$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$têu$đề,$thanh$trạng$thái$
…$)$$

ĐỐI TƯỢNG DOM
Đối$tượng$Window$m$DOM$
!  ProperÜes$ !  Methods$
!  document$ !  Alert$
!  event$ !  Confirm$
!  history$ !  Prompt$
!  locaton$
!  Blur$
!  name$
!  close$
!  navigator$
!  Focus$
!  screen$
!  status$ !  open$

Đối$tượng$Document$m$DOM$
ĐỐI TƯỢNG 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$tn$về$tài$liệu,$các$thành$phần$
HTML$và$xử$lý$sự$kiện$

Đối$tượng$Document$m$DOM$
ĐỐI TƯỢNG DOM
!  ProperÜes$ $ !  Methods$
"  aLinkColor$ "  documentElement$ "  close$
"  bgColor$ "  cookie$ "  open$
"  body$ "  ……$ "  createTextNode( $text$")$
"  fgColor$ "  createElement( HTMLtag")$$
"  linkColor$ "  getElementById( id )$
"  ttle$ "  …$
"  URL$
"  vlinkColor$
"  forms[]$
"  images[]$
"  childNodes[]$

TÌM PHẦN TỬ/THẺ (ELEMENT) HTML
PHƯƠNG THỨC MÔ TẢ
document.getElementByI Tìm thẻ thông qua Id

của thẻ
d(id)
document.getElementsBy Tìm TẤT CẢ các thẻ
thông qua tên thẻ
TagName(name)
document.getElementsBy Tìm TẤT CẢ các thẻ
thông qua CSS class
ClassName(name)
3 4 5
THAY ĐỔI NỘI DUNG HTML CỦA THẺ
element.innerHTML = Thay đổi nội dung HTML

new html content bên trong của thẻ
element.style.property
Thay đổi Style cho thẻ
= new style

THÊM VÀ XOÁ THẺ
document.createElem Tạo một thẻ mới

ent(element)
document.removeChil Xoá một thẻ
d(element)
document.appendChil Thêm một thẻ
d(element)
document.replaceChil Thay thế một thẻ
d(element)
document.write(text) Viết ngay vào HTML

Slide TaiLieu Chuong6 JS-DOM Phan1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Slide TaiLieu Chuong6 JS-DOM Phan1

Uploaded by

Copyright:

Available Formats

JAVASCRIPT

TH.S LÊ QUANG SONG

Học lập trình trực tuyến tại myclass.vn

Học lập trình trực tuyến tại myclass.vn

Học lập trình trực tuyến tại myclass.vn

Học lập trình trực tuyến tại myclass.vn

Học lập trình trực tuyến tại myclass.vn

Học lập trình trực tuyến tại myclass.vn

Học lập trình trực tuyến tại myclass.vn

Học lập trình trực tuyến tại myclass.vn

Học lập trình trực tuyến tại myclass.vn

Học lập trình trực tuyến tại myclass.vn

Học lập trình trực tuyến tại myclass.vn

Học lập trình trực tuyến tại myclass.vn

document.getElementByI Tìm thẻ thông qua Id

element.innerHTML = Thay đổi nội dung HTML

Học lập trình trực tuyến tại myclass.vn

document.createElem Tạo một thẻ mới

Học lập trình trực tuyến tại myclass.vn

You might also like