JAVASCRIPT & 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
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
DOM HTML với 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.
Giới thiệu về Javascript
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…
Giới thiệu về Javascript
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) sẽ thực hiện các lệnh Server-side Scipts và trả 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.


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
DOM HTML với Javascript
Ví dụ
Nhúng Javascript vào trang web
Định nghĩa script trực tiếp trong trang html:



Nhúng sử dụng script cài đặt từ 1 file .js khác:

Nhúng Javascript vào trang web











Nhúng Javascript vào trang web
Đặt giữa tag và : script sẽ thực thi ngay khi trang web được mở.

Đặt giữa tag và : 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 ).

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


document.write(“Hello world!”);



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

Xử lý sự kiện cho các thẻ HTML
Cú pháp 1:

Ví dụ:



Lưu ý: Dấu “…” và ‘…’
Xử lý sự kiện bằng function







Xử lý sự kiện bằng thuộc tính
Gán tên hàm xử lý cho 1 object event
object.eventhandler = function_name;
Ví dụ:







Ví dụ: onclick Event

X =






X * X =

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

onblur=“(document.bgColor=`aqua`)”
onfocus=“(document.bgColor=`dimgray`)”>

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
Sử dụng các đối tượng trong Javascript
Xử lý sự kiện
DOM HTML với 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 tại khi mở 1 tài liệu HTML
Sử dụ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 … )
Đối tượng Window - DOM
Properties
document
event
history
location
name
navigator
screen
status
Methods
alert
confirm
prompt
blur
close
focus
open
Đối tượng Window - DOM
Ví dụ:





Đố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
Dùng để lấy thông tin về tài liệu, các thành phần HTML và xử lý sự kiện
Đối tượng Document - DOM
Properties
aLinkColor
bgColor
body
fgColor
linkColor
title
URL
vlinkColor
forms[]
images[]
childNodes[]
Methods
close
open
createTextNode(“ text ")
createElement(“HTMLtag")
getElementById(“id”)
…

documentElement
cookie
……
Đối tượng Document - DOM
Biểu diễn nội dung của tài liệu theo cấu trúc cây

DOM Test Heading

---

A paragraph of text
is just an example

• 
  Yahoo!
  

Đối tượng Document - DOM
Cấu trúc cây nội dung tài liệu
Đối tượng Document - DOM
Các loại DOM Node chính
Đối tượng Document - DOM
getElementById ( id1 )
Trả về node có giá trị thuộc tính id = id1
Ví dụ:
//

// some text
//

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
Text Node
Đối tượng Document - DOM
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”;

//
Đối tượng Document - DOM
createTextNode ( content )
Ví dụ:
var textNode = document.createTextNode(“New text”); var pNode = document.createElement(“p”); pNode.appendChild(textNode);

//

New text

Đối tượng Document - DOM
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ụ:
//

// some text
//

var pNode = document.getElementById(“id1”);
var imgNode = document.createElement(“img”);
imgNode.src = “images/test.gif”;
pNode.appendChild(imgNode);

//

// some text
//

Đối tượng Document - DOM
innerHTML
Chỉ định nội dung HTML bên trong một node.
Ví dụ:
//

// some text
//

var theElement = document.getElementById("para1");
theElement.innerHTML = “Some new text”;

// Kết quả :
//

// Some new text
//

Đối tượng Document - DOM
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 new text”;
// Kết quả hiển thị trên trình duyệt
// bên trong thẻ p: “Some new text”


Đối tượng Document - DOM
Thay đổi định dạng CSS của một node thông qua thuộc tính style
Ví dụ:

This is a text

Đối tượng Document - DOM
Thay đổi định dạng css thông qua thuộc tính className
Ví dụ:

this is my text

Đối tượng Document - DOM
Thay đổi tham chiếu đến file CSS
Ví dụ:

Hello world

Nội dung
Giới thiệu về Javascript
Kiểu dữ liệu & Các cú pháp Javascript
Nhúng Javascript vào trang web
Sử dụng các đối tượng trong Javascript
Xử lý sự kiện
DOM HTML với 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.
Ví dụ: Dynamic Table

12	13
21	22

Table
body
Ví dụ:

12	13
21	22

Table
TBody
body
Ví dụ: Dynamic Table
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.
Ví dụ: Dynamic Table
function CreateTable(divTable)
{
var tagTable = document.createElement("table");
tagTable.border = 1;
var tagTBody = document.createElement("tbody");
tagTable.appendChild(tagTBody);

var nDong = txtSoDong.value;
var nCot = txtSoCot.value;

for (i=0; i {
var tagTR = document.createElement("tr");
for (j=0; j {
var tagTD = document.createElement("td");
var textNode = document.createTextNode(i+""+j);
tagTD.appendChild(textNode);

tagTR.appendChild(tagTD);
}

tagTBody.appendChild(tagTR);
}

divTable.appendChild(tagTable);
}