Javascript and 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
 Kiểu dữ liệu & Các cú pháp Javascript
 Ví dụ

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.

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

o Khi 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) sẽ
thực hiện các lệnh Server-side Scipts và trả
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.

Nhúng Javascript vào trang web

Định nghĩa script trực tiếp trong trang html:

<script type=“text/javascript”>

</script>

Nhúng sử dụng script cài đặt từ 1 file .js khác:
<script src=“xxx.js”></script>

<html>
<script type="text/javascript">
<head>
some javascript statements
</script>type="text/javascript">
<script
some statements
</script>
</head>
<body>
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>


 Đặ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>
<body>
document.write(“Hello world!”);
document.write(“Hello world!”);
</script>
</body>
</html>

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.” Chứa được chuổi unicode
“40” Chuổi rỗng “”
Number 0.066218 Theo chuẩn IEEE 754
12
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ố.

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

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
Ví dụ :
switch (expression) var diem = “G”;
{ switch (diem) {
case “Y”:
case label : document.write(“Yếu");
break;
      statementlist case “TB”:
case label : document.write(“Trung bình");
break;
statementlist case “K”:
  ... document.write(“Khá");
break;
default : case “G” :
document.write(“Giỏi");
      statement list 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);

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  onLoad
 onSubmit
 onFocus  onResize
 onChange  ………
 onBlur
 onMouseOver
 onMouseOut
 onMouseDown
 onMouseUp

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

Nội dung
 Sử dụng các đối tượng trong Javascript
 Ví dụ

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

Đối tượng Window - DOM
 Là thể hiện của đối tượng cửa sổ trình duyệt
 Tồn tại khi mở 1 tài liệu HTML
 Sử dụ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 … )

 Properties  Methods
 document  alert
 event  confirm
 history
 location
 prompt
 name
 blur
 navigator  close
 screen  focus
 status  open

 Ví dụ:
<html>
<body>
var curURL = window.location;
window.alert(curURL);
</script>
</body>
</html>

Đố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
 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  documentElement  close
 bgColor  cookie  open
 body  ……  createTextNode(“ text ")
 fgColor  createElement(“HTMLtag")
 linkColor  getElementById(“id”)
 title  …
 URL
 vlinkColor
 forms[]
 images[]
 childNodes[]

 Biểu diễn nội dung của tài liệu theo cấu trúc cây
<html>
<head>
<title>DOM Test</title>
</head>
<body>
<h1>DOM Test Heading</h1>
<hr />

<p id=“p1” >A paragraph of <em>text</em>
is just an example</p>
<ul>
<li>
<a href=“http://www.yahoo.com” > Yahoo!
</a>
</li>
</ul>
</body>
</html>

 Cấu trúc cây nội dung tài liệu

 Các loại DOM Node chính

 getElementById ( id1 )
Trả về node có giá trị thuộc tính id = id1
Ví dụ:
//<p id="id1" >
// some text Text Node
//</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

 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” />

 createTextNode ( content )

Ví dụ:
var textNode = document.createTextNode(“New
text”);
var pNode = document.createElement(“p”);
pNode.appendChild(textNode);

// <p>New text</p>

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

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

 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”

Nội dung
 Sử dụng các đối tượng trong 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.

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.

Javascript and dom_html

More Related Content

What's hot (18)

Similar to Javascript and dom_html (20)

More from Trường Dạy Nghề (20)

Javascript and dom_html