javascript and dom html
TRANSCRIPT
![Page 1: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/1.jpg)
JAVASCRIPT & DOM HTMLJAVASCRIPT & DOM HTML
Phạm Minh TuấnPhạm Minh TuấnTrần Thị Bích HạnhTrần Thị Bích HạnhLương Vĩ MinhLương Vĩ Minh
![Page 2: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/2.jpg)
Nội dungNội dung
Giới thiệu về JavascriptGiới thiệu về Javascript Nhúng Javascript vào trang webNhúng Javascript vào trang web Kiểu dữ liệu & Các cú pháp JavascriptKiểu dữ liệu & Các cú pháp Javascript Xử lý sự kiệnXử lý sự kiện Sử dụng các đối tượng trong HTMLSử dụng các đối tượng trong HTML DOM HTML với JavascriptDOM HTML với Javascript Ví dụVí dụ
![Page 3: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/3.jpg)
Nội dungNội dung
Giới thiệu về JavascriptGiới thiệu về Javascript Nhúng Javascript vào trang webNhúng Javascript vào trang web Kiểu dữ liệu & Các cú pháp JavascriptKiểu dữ liệu & Các cú pháp Javascript Xử lý sự kiệnXử lý sự kiện Sử dụng các đối tượng trong HTMLSử dụng các đối tượng trong HTML DOM HTML với JavascriptDOM HTML với Javascript Ví dụVí dụ
![Page 4: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/4.jpg)
Giới thiệu về JavascriptGiới thiệu về Javascript
Là ngôn ngữ dạng thông dịchLà ngôn ngữ dạng thông dịch Ngôn ngữ script phổ biến trên InternetNgôn ngữ script phổ biến trên Internet Giúp trang web có tính tương tácGiúp trang web có tính tương tác Khả năng của javascript:Khả năng của javascript:
Cho phép đặc dữ liệu động vào trang HTMLCho phép đặc dữ liệu động vào trang HTML Tương tác với các sự kiện của HTMLTương tác với các sự kiện của HTML Thay đổi nội dung của các đối tượng HTMLThay đổi nội dung của các đối tượng HTML ……
![Page 5: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/5.jpg)
Nội dungNội dung
Giới thiệu về JavascriptGiới thiệu về Javascript Nhúng Javascript vào trang webNhúng Javascript vào trang web Kiểu dữ liệu & Các cú pháp JavascriptKiểu dữ liệu & Các cú pháp Javascript Xử lý sự kiệnXử lý sự kiện Sử dụng các đối tượng trong HTMLSử dụng các đối tượng trong HTML DOM HTML với JavascriptDOM HTML với Javascript Ví dụVí dụ
![Page 6: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/6.jpg)
Nhúng Javascript vào trang webNhúng Javascript vào trang web
<html> <html> <head><head>
<<scriptscript type="text/javascript"> type="text/javascript"> some statementssome statements <</script/script>>
</head> </head> <body><body>
<<scriptscript type="text/javascript"> type="text/javascript"> some statementssome statements <</script/script>>
<<scriptscript src=“Tên_file_script.js"> < src=“Tên_file_script.js"> </script/script>></body> </body>
</html></html>
<script type="text/javascript"><script type="text/javascript"> some statementssome statements </script></script>
![Page 7: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/7.jpg)
VD: Nhúng Javascript vào trang webVD: Nhúng Javascript vào trang web
<html> <html>
<body><body>
document.write(“Hello world!”);
<<scriptscript type="text/javascript"> type="text/javascript">
document.write(“Hello world!”);document.write(“Hello world!”);
<</script/script>>
</body> </body>
</html></html>
![Page 8: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/8.jpg)
Nội dungNội dung
Giới thiệu về JavascriptGiới thiệu về Javascript Nhúng Javascript vào trang webNhúng Javascript vào trang web Kiểu dữ liệu & Các cú pháp JavascriptKiểu dữ liệu & Các cú pháp Javascript Xử lý sự kiệnXử lý sự kiện Sử dụng các đối tượng trong HTMLSử dụng các đối tượng trong HTML DOM HTML với JavascriptDOM HTML với Javascript Ví dụVí dụ
![Page 9: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/9.jpg)
Biến số trong JavascriptBiế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ườngphân biệt HOA, Thường
Khai báo biến
Dùng từ khóa var
Ví dụ: var count=10,amount;var count=10,amount;
Thật sự tồn tại khi bắt đầu sử dụng lần đầu tiên
![Page 10: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/10.jpg)
Kiểu dữ liệu trong JavascriptKiểu dữ liệu trong Javascript
Number : số nguyên, thựcNumber : số nguyên, thực
Boolean - True or FalseBoolean - True or False
String - “Hello World”String - “Hello World”
objectobject
ArrayArray
nullnull
undefined – lúc khai báo nhưng chưa sử dụngundefined – lúc khai báo nhưng chưa sử dụng
![Page 11: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/11.jpg)
Đổi kiểu dữ liệuĐổi kiểu dữ liệu
Biến số tự đổi kiểu dữ liệu khi giá trị thay đổiBiến số tự đổi kiểu dữ liệu khi giá trị thay đổiVí dụVí dụ::
var x = 10;var x = 10;x = “hello world !”;x = “hello world !”;
Có thể cộng 2 biến khác kiểu dữ liệuCó thể cộng 2 biến khác kiểu dữ liệuVí dụVí dụ::
var x;var x;x = “12” + 34.5; // KQ: x = “1234.5”x = “12” + 34.5; // KQ: x = “1234.5”
Hàm parseInt(…), parseFloat(…) : Đổi chuổi Hàm parseInt(…), parseFloat(…) : Đổi chuổi sang số.sang số.
![Page 12: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/12.jpg)
Hàm trong JavascriptHàm trong Javascript
Khai báo chung:Khai báo chung:function Tên_hàm(thamso1, thamso2,..)function Tên_hàm(thamso1, thamso2,..){{
………………}}
Hàm có giá trị trả về:Hàm có giá trị trả về:function Tên_hàm(thamso1, thamso2,..)function Tên_hàm(thamso1, thamso2,..){{
………………return (value);return (value);
}}
![Page 13: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/13.jpg)
Hàm trong JavascriptHàm trong Javascript
Ví dụ:Ví dụ:function Sum(x, y)function Sum(x, y){{
tong = x + y;tong = x + y;return tong;return tong;
}}
Gọi hàm:Gọi hàm:var x = Sum(10, 20);var x = Sum(10, 20);
![Page 14: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/14.jpg)
Lớp trong JavasriptLớp trong Javasript
function function Tên_lớpTên_lớp()(){{
//Khai báo biến thành viên//Khai báo biến thành viênthis.bien1 = value;this.bien1 = value;this.bien2 = value; this.bien2 = value;
}}
// Khai báo phương thức của lớp// Khai báo phương thức của lớp
Tên_lớpTên_lớp.prototype..prototype.Ten_phuongthucTen_phuongthuc = function(…) = function(…){{
…………//return value;//return value;
}}
![Page 15: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/15.jpg)
Lớp trong JavasriptLớp trong Javasript// Khai báo lớp Diem// Khai báo lớp Diemfunction Diem()function Diem()
{{this.x = 0; this.y = 0;this.x = 0; this.y = 0;
}}// Khai báo lớp DuongThang// Khai báo lớp DuongThangFunction DuongThang()Function DuongThang()
{{this.diem1 = new Diem();this.diem1 = new Diem();this.diem2 = new Diem();this.diem2 = new Diem();
}}DuongThang.prototype.Tinh_Dodai = function()DuongThang.prototype.Tinh_Dodai = function()
{{var chieudai = new Number();var chieudai = new Number();chieudai = … …chieudai = … …return chieudai;return chieudai;
}}// Sử dụng lớp// Sử dụng lớpvar canhhuyen = new DuongThang();var canhhuyen = new DuongThang();…………var x = canhhuyen.Tinh_Dodai();var x = canhhuyen.Tinh_Dodai();
![Page 16: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/16.jpg)
Các quy tắc chungCác quy tắc chung
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 ; Các lệnh là một trong các lệnh sau:Các lệnh là một trong các lệnh sau:
Điều kiện: if… else…, switchĐiều kiện: if… else…, switch Lặp : while, do while, for, for…in, withLặp : while, do while, for, for…in, with Thao tác đối tượngThao tác đối tượng
Cách ghi chú thích:Cách ghi chú thích: // Chú thích 1 dòng// Chú thích 1 dòng /* Chú thích/* Chú thích
nhiều dòng */ nhiều dòng */
![Page 17: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/17.jpg)
Nội dungNội dung
Giới thiệu về JavascriptGiới thiệu về Javascript Nhúng Javascript vào trang webNhúng Javascript vào trang web Kiểu dữ liệu & Các cú pháp JavascriptKiểu dữ liệu & Các cú pháp Javascript Xử lý sự kiệnXử lý sự kiện Sử dụng các đối tượng trong HTMLSử dụng các đối tượng trong HTML DOM HTML với JavascriptDOM HTML với Javascript Ví dụVí dụ
![Page 18: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/18.jpg)
Xử lý sự kiệnXử lý sự kiện
Các sự kiện thông dụngCác sự kiện thông dụng Xử lý sự kiện cho các thẻ HTMLXử lý sự kiện cho các thẻ HTML Xử lý sự kiện bằng functionXử lý sự kiện bằng function Xử lý sự kiện bằng thuộc tínhXử lý sự kiện bằng thuộc tính Một số ví dụMột số ví dụ
![Page 19: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/19.jpg)
Các sự kiện thông dụngCác sự kiện thông dụng
Có trong hầu hết các đối tượngCó trong hầu hết các đối tượng
onClick onClick
onFocusonFocus onChange onChange onBluronBlur onMouseOveronMouseOver onMouseOutonMouseOut onMouseDownonMouseDown onMouseUponMouseUp
onLoadonLoad onSubmitonSubmit onResizeonResize ………………
![Page 20: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/20.jpg)
Xử lý sự kiện cho các thẻ HTMLXử lý sự kiện cho các thẻ HTML
Cú phápCú pháp
<TAG eventHandler = "JavaScript Code"><TAG eventHandler = "JavaScript Code"> Ví dụ:Ví dụ:
<body><body>
<INPUT TYPE="button“ NAME="Button1“<INPUT TYPE="button“ NAME="Button1“
VALUE="OpenSesame!”VALUE="OpenSesame!”
onClickonClick="="window.open('mydoc.html','newWin');window.open('mydoc.html','newWin');">">
</body></body>
Lưu ýLưu ý: : Dấu “…” và ‘…’Dấu “…” và ‘…’
![Page 21: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/21.jpg)
Xử lý sự kiện bằng functionXử lý sự kiện bằng function
<head><head>
<script<script language=“Javascript” language=“Javascript”>>
function function GreetingMessageGreetingMessage()(){{
window.alert(“Welcome to my world”);window.alert(“Welcome to my world”);}}
</script></script>
</head></head>
<body<body onloadonload=“=“GreetingMessageGreetingMessage()”()”>>
</body></body>
![Page 22: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/22.jpg)
Xử lý sự kiện bằng thuộc tínhXử lý sự kiện bằng thuộc tính
Gán tên hàm xử lý cho 1 object eventGán tên hàm xử lý cho 1 object eventobject.eventhandler = function_name;object.eventhandler = function_name;
Ví dụVí dụ::
<head><head><script<script language=“Javascript” language=“Javascript”>>
function function GreetingMessageGreetingMessage()(){{
window.alert(“Welcome to my world”);window.alert(“Welcome to my world”);}}
window.window.onloadonload = = GreetingMessageGreetingMessage</script></script>
</head></head>
<body><body></body></body>
![Page 23: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/23.jpg)
Ví dụ: onclick EventVí dụ: onclick Event
<SCRIPT LANGUAGE="JavaScript"><SCRIPT LANGUAGE="JavaScript">
function compute(frm)function compute(frm)
{{
var x = frm.var x = frm.exprexpr.value;.value;
resultresult.innerHTML = x*x;.innerHTML = x*x;
} }
</SCRIPT></SCRIPT>
<FORM><FORM>
X = <INPUT TYPE="text" NAME="X = <INPUT TYPE="text" NAME="exprexpr" SIZE=15>" SIZE=15>
<BR><BR><BR><BR>
<INPUT TYPE="button" VALUE=“Calculate” <INPUT TYPE="button" VALUE=“Calculate” ONCLICKONCLICK="="compute(this.form)compute(this.form)">">
<BR><BR>
X * X = <SPAN ID="X * X = <SPAN ID="resultresult"></SPAN>"></SPAN>
</FORM></FORM>
![Page 24: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/24.jpg)
Ví dụ: onFocus - onBlurVí dụ: onFocus - onBlur
Xảy ra khi một thành phần HTML bị focus Xảy ra khi một thành phần HTML bị focus (onFocus) và mất focus (onBlur)(onFocus) và mất focus (onBlur)
Ví dụ:Ví dụ:
<<BBODY BGCOLOR="lavender">ODY BGCOLOR="lavender">
<FORM><FORM>
<INPUT type=“text” name=“myTextbox” <INPUT type=“text” name=“myTextbox”
onbluronblur=“(document.bgColor='aqua')” =“(document.bgColor='aqua')”
onfocusonfocus=“(document.bgColor='dimgray')”>=“(document.bgColor='dimgray')”>
</FORM></FORM>
</BODY></BODY>
![Page 25: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/25.jpg)
Ví dụ: onMouseOver - onMouseOutVí dụ: onMouseOver - onMouseOut
<script language = "javascript"><script language = "javascript">
function showLink(num)function showLink(num) { {
if (num==1) {if (num==1) {
document.forms[0].elements[0].value=document.forms[0].elements[0].value= "You have selected Aptech"; "You have selected Aptech";
}}
else {else {
document.forms[0].elements[0].value=“”;document.forms[0].elements[0].value=“”;
}}
} }
</script></script>
<form><form><input type=text size=60><input type=text size=60>
</form></form>
<a href="#" <a href="#" onMouseOveronMouseOver="="showLink(1)showLink(1)" " onMouseOutonMouseOut=“=“showLink(0)showLink(0)””
document.bgcolor="green">Aptech</a><br>document.bgcolor="green">Aptech</a><br>
![Page 26: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/26.jpg)
Nội dungNội dung
Giới thiệu về JavascriptGiới thiệu về Javascript Nhúng Javascript vào trang webNhúng Javascript vào trang web Kiểu dữ liệu & Các cú pháp JavascriptKiểu dữ liệu & Các cú pháp Javascript Xử lý sự kiệnXử lý sự kiện Sử dụng các đối tượng trong HTMLSử dụng các đối tượng trong HTML DOM HTML với JavascriptDOM HTML với Javascript Ví dụVí dụ
![Page 27: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/27.jpg)
Một số đối tượngMột số đối tượng
Đối tượng StringĐối tượng String Đối tượng ArrayĐối tượng Array Đối tượng DateĐối tượng Date Đối tượng MathĐối tượng Math
![Page 28: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/28.jpg)
Đối tượng StringĐối tượng String
Thuộc tính:Thuộc tính: length length
Phương thứcPhương thức .anchor(anchorString) – tạo Bookmark .link(URL) .charAt(index), .charCodeAt(index) .concat([string2[, string3[,... [, stringn]]]]) .indexOf(subString[, startIndex])
Ví dụ:Ví dụ:
![Page 29: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/29.jpg)
Đối tượng ArrayĐối tượng Array Có chỉ số bắt đầu bằng 0Có chỉ số bắt đầu bằng 0 Cách khai báo Mảng:Cách khai báo Mảng:
new Array( ); new Array(n,n);new Array( ); new Array(n,n); Thuộc tínhThuộc tính
lengthlength Phương thứcPhương thức
.concat.concat – Ghép 2 hay nhiều mảng lại với nhau – Ghép 2 hay nhiều mảng lại với nhau .join.join – Ghép các phần tử thành 1 chuổi. – Ghép các phần tử thành 1 chuổi. .pop .pop – Lấy phần tử cuối ra khỏi mảng– Lấy phần tử cuối ra khỏi mảng .push.push – Thêm một phần tử mới vào cuối mảng – Thêm một phần tử mới vào cuối mảng .reverse.reverse - Đảo ngược vị trí các phần tử trong mảng - Đảo ngược vị trí các phần tử trong mảng .shift.shift – Bỏ phần tử đầu của mảng – Bỏ phần tử đầu của mảng .sort.sort – Sắp xếp thứ tự các phần tử trong mảng – Sắp xếp thứ tự các phần tử trong mảng ……
![Page 30: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/30.jpg)
Đối tượng ArrayĐối tượng Array
Ví dụ:Ví dụ:var myList = new Array();var myList = new Array();
myList[0] = 11;myList[0] = 11;
myList[1] = 22;myList[1] = 22;
myList[2] = “Hello”;myList[2] = “Hello”;
for (i=0; i<myList.length; i++)for (i=0; i<myList.length; i++)
{{
document.write(myList[i] + “-”);document.write(myList[i] + “-”);
}}
![Page 31: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/31.jpg)
Đối tượng DateĐối tượng Date
var my_date=new Date("October 12, 1988 13:14:00");var my_date=new Date("October 12, 1988 13:14:00");
var my_date=new Date("October 12, 1988");var my_date=new Date("October 12, 1988");
var my_date=new Date(88,10,12,13,14,00);var my_date=new Date(88,10,12,13,14,00);
var my_date=new Date(88,10,12); var my_date=new Date(88,10,12);
Phương thức:Phương thức: getDate(), getDay(), getMonth(), getYear(),…getDate(), getDay(), getMonth(), getYear(),… getTime(),…getTime(),… …………
![Page 32: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/32.jpg)
Đối tượng MathĐối tượng Math
Thuộc tính:Thuộc tính: PI PI – trả về hằng số PI 3.14159…– trả về hằng số PI 3.14159… EE – trả về hằng số E 2.718 – trả về hằng số E 2.718
Sử dụng đối tượng Math cho các hàm toán họcSử dụng đối tượng Math cho các hàm toán học Phương thức:Phương thứ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 ) …
![Page 33: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/33.jpg)
Nội dungNội dung
Giới thiệu về JavascriptGiới thiệu về Javascript Nhúng Javascript vào trang webNhúng Javascript vào trang web Kiểu dữ liệu & Các cú pháp JavascriptKiểu dữ liệu & Các cú pháp Javascript Xử lý sự kiệnXử lý sự kiện Sử dụng các đối tượng trong HTMLSử dụng các đối tượng trong HTML DOM HTML với JavascriptDOM HTML với Javascript Ví dụVí dụ
![Page 34: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/34.jpg)
Đối tượng HTML DOMĐối tượng HTML DOM
DOM = Document Object ModelDOM = Document Object Model Gồm một tập hợp các đối tượng HTML chuẩn Gồm một tập hợp các đối tượng HTML chuẩn
và các phương thức truy xuất các đối tượng nàyvà các phương thức truy xuất các đối tượng này DOM cho phép truy xuất nội dung, thuộc tính DOM cho phép truy xuất nội dung, thuộc tính
của toàn bộ thành phần HTML trong trang web của toàn bộ thành phần HTML trong trang web (Sửa, xóa, thêm thành phần mới).(Sửa, xóa, thêm thành phần mới).
Một số đối tượng của DOM: document, Một số đối tượng của DOM: document, window, history, link, form, frame, location, window, history, link, form, frame, location, event, …event, …
![Page 35: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/35.jpg)
Đối tượng Window - DOMĐối tượng Window - DOM
Tồn tại khi mơ 1 tài liệu HTMLTồn tại khi mơ 1 tài liệu HTML Sử dụng để truy cập thông tin windowSử dụng để truy cập thông tin window Điều khiển các sự kiện xảy ra trong 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 Nếu tài liệu định nghĩa nhiều frame, browser
tạo 1 window object cha và các window object tạo 1 window object cha và các window object con cho từng framecon cho từng frame
![Page 36: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/36.jpg)
Đối tượng Window - DOMĐối tượng Window - DOM
PropertiesProperties documentdocument eventevent historyhistory locationlocation namename navigatornavigator screenscreen statusstatus
MethodsMethods alertalert confirmconfirm promptprompt blurblur closeclose focusfocus navigatenavigate openopen
![Page 37: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/37.jpg)
Đối tượng Window - DOMĐối tượng Window - DOM
Ví dụ:Ví dụ:<html><html>
<body><body>
<script type="text/javascript"><script type="text/javascript">
var curURL = var curURL = window.locationwindow.location;;
window.alertwindow.alert(curURL);(curURL);
</script></script>
</body></body>
</html></html>
![Page 38: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/38.jpg)
Đối tượng Document - DOMĐối tượng Document - DOM
Document Object Document Object biểu diên cho tài liệu HTMLbiể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 Dùng để lấy thông tin về tài liệu, các thành
phần HTML và xử lý sự kiệnphần HTML và xử lý sự kiện
![Page 39: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/39.jpg)
Đối tượng Document - DOMĐối tượng Document - DOM
PropertiesProperties aLinkColoraLinkColor bgColorbgColor bodybody fgColorfgColor linkColorlinkColor titletitle URLURL vlinkColorvlinkColor forms[]forms[] images[]images[] childNodes[]childNodes[]
MethodsMethods clearclear closeclose openopen writewrite writelnwriteln createTextNode("txt")createTextNode("txt") createElement("tag") createElement("tag") getElementById()getElementById() getElementsByName()getElementsByName() getElementsByTagName(getElementsByTagName(
"tag")"tag") ……
aLinkColoraLinkColor documentElementdocumentElement cookiecookie …………
![Page 40: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/40.jpg)
Đối tượng Document - DOMĐối tượng Document - DOM
Ví dụ:Ví dụ:<html>
<head> <script type="text/javascript"> function ChangeColor() {
document.body.bgColor="yellow" } </script>
</head>
<body onclick="ChangeColor()"> Click on this document!
</body> </html>
![Page 41: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/41.jpg)
Nội dungNội dung
Giới thiệu về JavascriptGiới thiệu về Javascript Nhúng Javascript vào trang webNhúng Javascript vào trang web Kiểu dữ liệu & Các cú pháp JavascriptKiểu dữ liệu & Các cú pháp Javascript Xử lý sự kiệnXử lý sự kiện Sử dụng các đối tượng trong HTMLSử dụng các đối tượng trong HTML DOM HTML với JavascriptDOM HTML với Javascript Ví dụVí dụ
![Page 42: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/42.jpg)
Ví dụ: Dynamic TableVí dụ: Dynamic Table
Viết trang web cho phép tạo table có số dòng, 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.số cột do người dùng nhập vào.
![Page 43: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/43.jpg)
Ví dụ: Dynamic TableVí dụ: Dynamic Table
<Table><Table>
<Tr><Tr><td> 12 <td> 12
</td></td><td> 13 <td> 13
</td></td></Tr></Tr>
<Tr><Tr><td> 21 <td> 21
</td></td><td> 22 <td> 22
</td></td></Tr></Tr>
</Table></Table>
Table
Tr
Tr
Td
Td
Td
Td
body
![Page 44: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/44.jpg)
Ví dụ:Ví dụ:
<Table><Table><Tbody><Tbody>
<Tr><Tr><td> 12 <td> 12
</td></td><td> 13 <td> 13
</td></td></Tr></Tr>
<Tr><Tr><td> 21 <td> 21
</td></td><td> 22 <td> 22
</td></td></Tr></Tr>
</Tbody></Tbody></Table></Table>
Table
Tr
Tr
Td
Td
Td
Td
TBody
body
![Page 45: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/45.jpg)
Ví dụ: Dynamic TableVí dụ: Dynamic Table
Document.createElement(…)Document.createElement(…) :Tạo một đối :Tạo một đối tượng thẻ DOM HTMLtượng thẻ DOM HTML
Object.appendChild(…):Object.appendChild(…): Thêm một đối tượng Thêm một đối tượng thẻ DOM HTML như là nút con.thẻ DOM HTML như là nút con.
![Page 46: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/46.jpg)
Ví dụ: Dynamic TableVí dụ: Dynamic Tablefunction CreateTable(divTable)function CreateTable(divTable) { { var tagTable = var tagTable = document.createElementdocument.createElement("table");("table"); tagTable.border = 1;tagTable.border = 1; var tagTBody = var tagTBody = document.createElementdocument.createElement("tbody");("tbody"); tagTable.tagTable.appendChildappendChild(tagTBody);(tagTBody); var nDong = nSoDong.value;var nDong = nSoDong.value; var nCot = nSoCot.value;var nCot = nSoCot.value; for (i=0; i<nDong; i++)for (i=0; i<nDong; i++) {{ var tagTR = document.var tagTR = document.createElementcreateElement("tr");("tr"); for (j=0; j<nCot; j++)for (j=0; j<nCot; j++) {{ var tagTD = document.var tagTD = document.createElementcreateElement("td");("td"); var textNode = document.var textNode = document.createTextNodecreateTextNode(i+""+j);(i+""+j); tagTD.tagTD.appendChildappendChild(textNode);(textNode); tagTR.tagTR.appendChildappendChild(tagTD);(tagTD); }} tagTBody.tagTBody.appendChildappendChild(tagTR);(tagTR); }} divTable.divTable.appendChildappendChild(tagTable);(tagTable); }}
![Page 47: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/47.jpg)
Tài liệu tham khảoTài liệu tham khảo
Website môn học trên moodle của trườngWebsite môn học trên moodle của trường Website w3schools Website w3schools httphttp
://www.w3schools.com/htmldom/dom_exampl://www.w3schools.com/htmldom/dom_examples.aspes.asp
MSDN:MSDN: Working with the DOM Working with the DOM DOM and MSXMLDOM and MSXML Modeling Documents as Node Trees Modeling Documents as Node Trees
![Page 48: Javascript and Dom HTML](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546515d5b4af9fde478b48ea/html5/thumbnails/48.jpg)
© 2002 Microsoft Corporation. All rights reserved.© 2002 Microsoft Corporation. All rights reserved.This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.