GIỚI THIỆU VỀ

JAVASCRIPT
Mục đích

1. Tạo cập nhật dữ liệu trên DOM

2. Kiểm tra tính hợp lệ dữ liệu phía Client

3. Hiển thị thông báo cho người dùng

4. Ẩn hiện nội dung trên website

5. Sử dụng kỹ thuật Ajax

KHÁI NIỆM Document
Object Model (DOM)
Cấu trúc DOM
Mô hình Client – Server
Hiển thị Client
Một số kiến thức cơ bản

http://web.simmons.edu/~grabiner/comm244/weekfou
r/document-tree.html
 Node of HTML
Node

Element Attribute Text

Property Event

<button id=“nnl” onclick=“ alert(‘hello’); ” >Hello JS</button>

Event of HTML
Nhúng Javascript vào HTML

Inline

Internal

External
Inline JavaScript

<button id=“nnl” onclick=“ alert(‘hello’); ” >Hello</button>

Internal

<button id=“nnl” onclick=“hello()” >Hello</button>

<script>
function hello(){
alert(‘Hello’);
}
</script>
External

<p class=“nnl”>Hello CSS</p>

<header>
<script src=" lam.js“></script>
</header>

function hello(){
lam.js
alert(‘Hello’);
}
Thao tác trên DOM

document.getElementById(“id”)
Thao tác trên DOM

document.getElementsByName(“name”)

<button name=“nnl” >Hello</button>

Thao tác trên DOM

document.getElementsByTagName(“ten_the”)
Thao tác trên DOM

document.getElementsByClassName(“class”)
Thao tác trên DOM

document.getAttribute(“ten_attr”)
Thao tác trên DOM

document.setAttribute(“attr_name”,” attr_value”)
Thao tác trên DOM

document.innerHTML = “value”
Thao tác trên DOM

document.style.attr_name = “value”
Thao tác trên DOM

document.createElement(“ten_the”)
Thao tác trên DOM

document.createTextNode(“chuỗi text”)
Thao tác trên DOM

document.appendChild(value)
Thao tác trên DOM

document.insertBefore(para1, para2);
Thao tác trên DOM

document.replaceChild(para1, para2);
Thao tác trên DOM

document.removeChild(para);
Bài tập 01: Kiểm tra tính hợp lệ
Bài tập 02: Thu và mở rộng form
Bài tập 03 : Lấy dữ liệu table xuống form
Xin chân thành cảm ơn !