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

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ụ

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

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ụ

Nhúng Javascript vào trang web <script type="text/javascript"> some statements <script type="text/javascript"> some statements <script type="text/javascript"> some statements <script src=“Tên_file_script.js">

VD: Nhúng Javascript vào trang web document.write(“Hello world!”); <script type="text/javascript"> 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 Sử dụng các đối tượng trong HTML 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 

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 { tong = return }



Sum(x, y) x + y; 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       

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ụ

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

 

      

onFocus onChange onBlur onMouseOver onMouseOut onMouseDown onMouseUp

 

onLoad onSubmit onResize ………

Xử lý sự kiện cho các thẻ HTML 



Cú pháp Ví dụ:


TYPE="button“

NAME="Button1“

VALUE="OpenSesame!” onClick="window.open('mydoc.html','newWin');"> 

Lưu ý: Dấu “…” và ‘…’

Xử lý sự kiện bằng function <script language=“Javascript”> function GreetingMessage() { window.alert(“Welcome to my world”); }

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

<script language=“Javascript”> function GreetingMessage() { window.alert(“Welcome to my world”); } window.onload = GreetingMessage

Ví dụ: onclick Event <SCRIPT LANGUAGE="JavaScript"> function compute(frm) { var x = frm.expr.value; result.innerHTML = x*x; }

X =


X * X = <SPAN ID="result">

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

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=“”; } }

Aptech


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ụ

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



Phương thức      



length .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: 



Thuộc tính 



new Array( ); new Array(n,n); 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] myList[1] myList[2]

= = =

11; 22; “Hello”;

for (i=0; i<myList.length; i++) { document.write(myList[i] + “-”); }

Đối tượng Date var var var var



my_date=new my_date=new my_date=new my_date=new

Date("October 12, 1988 13:14:00"); Date("October 12, 1988"); Date(88,10,12,13,14,00); Date(88,10,12);

Phương thức:   

getDate(), getDay(), getMonth(), getYear(),… getTime(),… ……

Đối tượng Math 

Thuộc tính:  

 

– trả về hằng số PI 3.14159… E – trả về hằng số E 2.718 PI

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

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ụ

Đố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 tại khi mở 1 tài liệu HTML Sử dụng để truy cập thông tin 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 tạo 1 window object cha và các window object con cho từng frame

Đối tượng Window - DOM 

Properties        

document event history location name navigator screen status



Methods        

alert confirm prompt blur close focus navigate open

Đối tượng Window - DOM 

Ví dụ:

<script type="text/javascript"> var curURL = window.location; window.alert(curURL);

Đối tượng Document - DOM 

Document Object biể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 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[]

    

aLinkColor documentElement cookie ……

Methods           

clear close open write writeln createTextNode("txt") createElement("tag") getElementById() getElementsByName() getElementsByTagName ("tag") …

Đối tượng Document - DOM 

Ví dụ:

<script type="text/javascript"> function ChangeColor() { document.body.bgColor="yellow" } Click on this document!

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ụ

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 body



Table



Tr



Td



Td



Tr

Td

12	13
21	22

Td

Ví dụ:

body

Table



TBody



Tr



Td



Td

12	13
21	22

Tr Td Td

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 = nSoDong.value; var nCot = nSoCot.value;

for (i=0; i
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.