Javascript and Dom HTML

JAVASCRIPT & DOM HTML
Phạm Minh Tuấn

Trần Thị Bích Hạnh
Lương Vĩ Minh
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
 Sử dụng các đối tượng trong HTML
 DOM HTML với Javascript
 Ví dụ
Nội dung
 Ví dụ
Giới thiệu về Javascript
 Là ngôn ngữ dạng thông dịch
 Ngôn ngữ script phổ biến trên Internet
 Giúp trang web có tính tương tác
 Khả năng của javascript:
 Cho phép đặc dữ liệu động vào trang HTML
 Tươ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 HTML
 …
Nội dung
 Ví dụ
Nhúng Javascript vào trang web
<html>
<script type="text/javascript">
<head>
some statements
</script>
some statements
</script>
</head>
<body>
some statements
</script>
<script src=“Tên_file_script.js"> </script>
</body>
</html>
VD: Nhúng Javascript vào trang web
<html>
<body>
document.write(“Hello world!”);
document.write(“Hello world!”);
</script>
</body>
</html>
Nội dung
 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

 Dùng từ khóa var
 Ví dụ: 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 Javascript
 Number : số nguyên, thực
 Boolean - True or False
 String - “Hello World”
 object
 Array
 null
 undefined – lúc khai báo nhưng chưa sử dụng
Đổi kiểu dữ liệu
 Biến số tự đổi kiểu dữ liệu khi giá trị thay đổi
Ví dụ:
var x = 10;
x = “hello world !”;
 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 chuổi
sang số.
Hàm trong Javascript
 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);
Lớp trong Javasript
function Tên_lớp()
{
//Khai báo biến thành viên
this.bien1 = value;
this.bien2 = value;
}
// Khai báo phương thức của lớp

Tên_lớp.prototype.Ten_phuongthuc = function(…)
{
……
//return value;
}
Lớp trong Javasript
// Khai báo lớp Diem
function Diem()
{
this.x = 0; this.y = 0;
}
// Khai báo lớp DuongThang
Function DuongThang()
{
this.diem1 = new Diem();
this.diem2 = new Diem();
}
DuongThang.prototype.Tinh_Dodai = function()
{
var chieudai = new Number();
chieudai = … …
return chieudai;
}
// Sử dụng lớp
var canhhuyen = new DuongThang();
……
var x = canhhuyen.Tinh_Dodai();
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ác lệnh là một trong các lệnh sau:
 Điều kiện: if… else…, switch
 Lặp : while, do while, for, for…in, with
 Thao tác đối tượng
 Cách ghi chú thích:
 // Chú thích 1 dòng
 /* Chú thích
nhiều dòng */
Nội dung
 Ví dụ
Xử lý sự kiện
 Các sự kiện thông dụng
 Xử lý sự kiện cho các thẻ HTML
 Xử lý sự kiện bằng function
 Xử lý sự kiện bằng thuộc tính
 Một số ví dụ
Các sự kiện thông dụng
 Có trong hầu hết các đối tượng
 onClick  onLoad
 onSubmit
 onFocus  onResize
 onChange  ………
 onBlur
 onMouseOver
 onMouseOut
 onMouseDown
 onMouseUp
Xử lý sự kiện cho các thẻ HTML
 Cú pháp
<TAG eventHandler = "JavaScript Code">
 Ví dụ:
<body>
<INPUT TYPE="button“ NAME="Button1“

VALUE="OpenSesame!”
onClick="window.open('mydoc.html','newWin');">
</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
 Gán tên hàm xử lý 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>
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>
Ví dụ: onMouseOver - onMouseOut
<script language = "javascript">
function showLink(num) {
if (num==1) {
document.forms[0].elements[0].value=
"You have selected Aptech";
}
else {
document.forms[0].elements[0].value=“”;
}
}
</script>
<form>
<input type=text size=60>
</form>
<a href="#" onMouseOver="showLink(1)" onMouseOut=“showLink(0)”
document.bgcolor="green">Aptech</a><br>
Nội dung
 Ví dụ
Một số đối tượng
 Đối tượng String
 Đối tượng Array
 Đối tượng Date
 Đối tượng Math
Đối tượng String
 Thuộc tính:
 length
 Phương thức
 .anchor(anchorString) – tạo Bookmark
 .link(URL)
 .charAt(index),
 .charCodeAt(index)
 .concat([string2[, string3[,... [, stringn]]]])
 .indexOf(subString[, startIndex])
 Ví dụ:
Đối tượng Array
 Có chỉ số bắt đầu bằng 0
 Cách khai báo Mảng:
 new Array( ); new Array(n,n);
 Thuộc tính
 length
 Phương thức
 .concat – Ghép 2 hay nhiều mảng lại với nhau
 .join – Ghép các phần tử thành 1 chuổi.
 .pop – Lấy phần tử cuối ra khỏi mảng
 .push – Thêm một phần tử mới vào cuối mảng
 .reverse - Đảo ngược vị trí các phần tử trong mảng
 .shift – Bỏ phần tử đầu của mảng
 .sort – Sắp xếp thứ tự các phần tử trong mảng
 …
Đối tượng Array
 Ví dụ:
var myList = new Array();
myList[0] = 11;
myList[1] = 22;
myList[2] = “Hello”;
for (i=0; i<myList.length; i++)

{
document.write(myList[i] + “-”);
}
Đối tượng Date
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,10,12,13,14,00);
var my_date=new Date(88,10,12);
 Phương thức:
 getDate(), getDay(), getMonth(), getYear(),…
 getTime(),…
 ……
Đối tượng Math
 Thuộc tính:
 PI – trả về hằng số PI 3.14159…
 E – trả về hằng số E 2.718
 Sử dụng đối tượng Math cho các hàm toán họ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 )
 …
Nội dung
 Ví dụ
Đối tượng HTML DOM
 DOM = Document Object Model
 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ày
 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
(Sửa, xóa, thêm thành phần mới).
 Một số đối tượng của DOM: document,
window, history, link, form, frame, location,
event, …
Đối tượng Window - DOM
 Tồn tại khi mở 1 tài liệu HTML
 Sử dụng để truy cập thông tin window
 Điều khiển các sự kiện xảy ra trong window
 Nếu tài liệu định nghĩa nhiều frame, browser
tạo 1 window object cha và các window object
con cho từng frame
 Properties  Methods
 document  alert
 event  confirm
 history
 location
 prompt
 name
 blur
 navigator  close
 screen  focus
 status  navigate
 open
 Ví dụ:
<html>
<body>
var curURL = window.location;
window.alert(curURL);
</script>
</body>
</html>
Đối tượng Document - DOM
 Document Object biểu diễn cho tài liệu HTML
 Dùng để lấy thông tin về tài liệu, các thành
phần HTML và xử lý sự kiện
 Properties  Methods
 aLinkColor  aLinkColor  clear
 bgColor  documentElement  close
 body  cookie  open
 fgColor  ……  write
 linkColor  writeln
 title  createTextNode("txt")
 URL  createElement("tag")
 vlinkColor  getElementById()
 forms[]  getElementsByName()
 images[]  getElementsByTagName
("tag")
 childNodes[]
 …
 Ví dụ:
<html>
<head>
function ChangeColor()
{
document.body.bgColor="yellow"
}
</script>
</head>
<body onclick="ChangeColor()">
Click on this document!
</body>
</html>
Nội dung
 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.
body
<Table>
Table
<Tr>
<td> 12 </td> Tr
<td> 13 </td>
</Tr> Td
<Tr> Td
<td> 21 </td>
<td> 22 </td> Tr
</Tr>
Td
</Table>
Td
Ví dụ: body
Table
<Table>
TBody
<Tbody>
<Tr>
<td> 12 </td> Tr
<td> 13 </td>
</Tr> Td
<Tr> Td
<td> 21 </td>
<td> 22 </td> Tr
</Tr>
</Tbody> Td
</Table>
Td
 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.
function CreateTable(divTable)
{
var tagTable = document.createElement("table");
tagTable.border = 1;
var tagTBody = document.createElement("tbody");
tagTable.appendChild(tagTBody);
var nDong = nSoDong.value;

var nCot = nSoCot.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);
}
Tài liệu tham khảo
 Website môn học trên moodle của trường
 Website w3schools http
://www.w3schools.com/htmldom/dom_examples.
 MSDN:
 Working with the DOM
 DOM and MSXML
 Modeling Documents as Node Trees
© 2002 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

Javascript and Dom HTML

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

Javascript and Dom HTML

Uploaded by

Copyright:

Available Formats

JAVASCRIPT & DOM HTML

Phạm Minh Tuấn

 Khai báo biến

// Khai báo phương thức của lớp

<INPUT TYPE="button“ NAME="Button1“

for (i=0; i<myList.length; i++)

var nDong = nSoDong.value;

for (i=0; i<nDong; i++)

You might also like