Javascript and Dom HTML

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

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ụ



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 ……



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>

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>



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

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

Đổ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ố.

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);

}}

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);

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;

}}

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();

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 */



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ụ

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 ………………

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à ‘…’

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>

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>

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>

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>

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>



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

Đố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ụ:

Đố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 ……

Đố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] + “-”);

}}

Đố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(),… …………

Đố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 ) …



Đố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, …

Đố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


PropertiesProperties documentdocument eventevent historyhistory locationlocation namename navigatornavigator screenscreen statusstatus

MethodsMethods alertalert confirmconfirm promptprompt blurblur closeclose focusfocus navigatenavigate openopen


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>

Đố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


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 …………


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>



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.


<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


</Table></Table>

Table

Tr

Tr

Td

Td

Td

Td

body

Ví dụ:Ví dụ:

<Table><Table><Tbody><Tbody>

<Tr><Tr><td> 12 <td> 12

</td></td><td> 13 <td> 13


<Tr><Tr><td> 21 <td> 21

</td></td><td> 22 <td> 22


</Tbody></Tbody></Table></Table>

Table

Tr

Tr

Td

Td

Td

Td

TBody

body


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.

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); }}

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

http://www.w3schools.com/htmldom/dom_examples.asp



© 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.