Bài giảng Ngôn ngữ lập trình Java script và DOM HTMl

Nội dung text: Bài giảng Ngôn ngữ lập trình Java script và DOM HTMl

1. JAVASCRIPT & DOM HTML
2. Nội dung l Giới thiệu về Javascript l Nhúng Javascript vào trang web l Kiểu dữ liệu & cú pháp trong Javascript l Xử lý sự kiện l DOM HTML với Javascript l Ví dụ
3. Nội dung l Giới thiệu về Javascript l Nhúng Javascript vào trang web l Kiểu dữ liệu & Các cú pháp Javascript l Xử lý sự kiện l DOM HTML với Javascript l Ví dụ
4. Giới thiệu về Javascript l Là ngôn ngữ Client-side script hoạt động trên trình duyệt của người dùng ( client ) l Chia sẻ xử lý trong ứng dụng web. Giảm các xử lý không cần thiết trên server. l Giúp tạo các hiệu ứng, tương tác cho trang web.
5. Giới thiệu về Javascript l Client-Side Script: Ø ScriptScript đượcđược thựcthực thithi tạitại Client-SideClient-Side (( trìnhtrình duyệtduyệt ):): ThựcThực hiệnhiện cáccác tươngtương táctác vớivới ngườingười dùngdùng (( tạotạo menumenu chuyểnchuyển động,động, )) ,, kiểmkiểm tratra dữdữ liệuliệu nhập,nhập, l Server-Side Script: Ø ScriptScript đượcđược xửxử lýlý tạitại Server-Side,Server-Side, nhằmnhằm tạotạo cáccác trangtrang webweb cócó khảkhả năngnăng phátphát sinhsinh nộinội dungdung động.động. MộtMột sốsố xửxử lýlý chính:chính: kếtkết nốinối CSDL,CSDL, truytruy cậpcập hệhệ thốngthống filefile trêntrên server,server, phátphát sinhsinh nộinội dungdung htmlhtml trảtrả vềvề ngườingười dùng dùng
6. Giới thiệu về Javascript 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) 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.
7. Nội dung l Giới thiệu về Javascript l Nhúng Javascript vào trang web l Kiểu dữ liệu & Các cú pháp Javascript l Xử lý sự kiện l DOM HTML với Javascript l Ví dụ
8. Nhúng Javascript vào trang web ĐịnhĐịnh nghĩanghĩa scriptscript trựctrực tiếptiếp trongtrong trangtrang html:html: NhúngNhúng sửsử dụngdụng scriptscript càicài đặtđặt từtừ 11 filefile .js.js khác:khác:
9. Nhúng Javascript vào trang web some javascript statements some statements some statements method() // gọi thực hiện các phương thức được định nghĩa // trong “Tên_file_script.js”
10. Nhúng Javascript vào trang web l Đặt giữa tag và : script sẽ thực thi ngay khi trang web được mở. l Đặ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 ). l Số lượng đoạn client-script chèn vào trang không hạn chế.
11. VD: Nhúng Javascript vào trang web document.write(“Hello world!”); document.write(“Hello world!”);
12. Nội dung l Giới thiệu về Javascript l Nhúng Javascript vào trang web l Kiểu dữ liệu & Các cú pháp Javascript l Xử lý sự kiện l DOM HTML với Javascript l Ví dụ
13. Biến số trong Javascript l 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ânphân biệtbiệt HOA,HOA, ThườngThường l 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
14. 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
15. Đổi kiểu dữ liệu l 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 l 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” l Hàm parseInt( ), parseFloat( ) : Đổi KDL từ chuỗi sang số.
16. Hàm trong Javascript l Dạng thức khai báo chung: function Tên_hàm(thamso1, thamso2, ) { } l Hàm có giá trị trả về: function Tên_hàm(thamso1, thamso2, ) { return (value); }
17. Hàm trong Javascript l Ví dụ: function Sum(x, y) { tong = x + y; return tong; } l Gọi hàm: var x = Sum(10, 20);
18. Các quy tắc chung l Khối lệnh được bao trong dấu {} l Mỗi lệnh nên kết thúc bằng dấu ; l Cách ghi chú thích: Ø //// ChúChú thíchthích 11 dòngdòng Ø /*/* ChúChú thíchthích nhiềunhiều dòngdòng */*/
19. 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;
20. Câu lệnh switch Ví dụ : switch (expression) var diem = “G”; { switch (diem) { case “Y”: case label : document.write(“Yếu"); statementlist break; case “TB”: case label : document.write(“Trung bình"); break; statementlist case “K”: document.write(“Khá"); break; default : case “G” : statement list document.write(“Giỏi"); break; } default: document.write(“Xuất sắc") }
21. 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; }
22. 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; }
23. 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);
24. Nội dung l Giới thiệu về Javascript l Nhúng Javascript vào trang web l Kiểu dữ liệu & Các cú pháp Javascript l Xử lý sự kiện l DOM HTML với Javascript l Ví dụ
25. Các sự kiện thông dụng l CácCác sựsự kiệnkiện đượcđược hỗhỗ trợtrợ bởibởi hầuhầu hếthết cáccác đốiđối tượngtượng Ø onClick Ø onLoad Ø onFocus Ø onSubmit Ø onChange Ø onResize Ø onBlur Ø Ø onMouseOver Ø onMouseOut Ø onMouseDown Ø onMouseUp
26. Xử lý sự kiện cho các thẻ HTML l CúCú pháppháp 1:1: = "JavaScript Code"> l VíVí dụ:dụ: l LưuLưu ýý: DấuDấu “ ”“ ” vàvà ‘ ’‘ ’
27. Xử lý sự kiện bằng function function GreetingMessage() { window.alert(“Welcome to my world”); }
28. Xử lý sự kiện bằng thuộc tính l Gán tên hàm xử lý cho 1 object event object.eventhandler = function_name; l Ví dụ: function GreetingMessage() { window.alert(“Welcome to my world”); } window.onload = GreetingMessage ()
29. Ví dụ: onclick Event function compute(frm) { var x = frm.expr.value; result.innerHTML = x*x; } X = X * X =
30. Ví dụ: onFocus - onBlur l Xảy ra khi một thành phần HTML bị focus (onFocus) và mất focus (onBlur) l Ví dụ:
31. Nội dung l Giới thiệu về Javascript l Nhúng Javascript vào trang web l Kiểu dữ liệu & Các cú pháp Javascript l Sử dụng các đối tượng trong Javascript l Xử lý sự kiện l DOM HTML với Javascript l Ví dụ
32. Đối tượng HTML DOM l DOM = Document Object Model l 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 ) l Một số đối tượng của DOM: window, document, history, link, form, frame, location, event,
33. Đối tượng Window - DOM l Là thể hiện của đối tượng cửa sổ trình duyệt l Tồn tại khi mở 1 tài liệu HTML l 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 )
34. Đối tượng Window - DOM l PropertiesProperties l Methods Ø document Ø alertalert Ø event Ø confirmconfirm Ø history Ø promptprompt Ø location Ø name Ø blurblur Ø navigator Ø closeclose Ø screen Ø focusfocus Ø status Ø openopen
35. Đối tượng Window - DOM l Ví dụ: var curURL = window.location; window.alert(curURL);
36. Đối tượng Document - DOM l Biểu diễn cho nội dung trang HTML đang được hiển thị trên trình duyệt l 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
37. Đối tượng Document - DOM l Properties l MethodsMethods Ø aLinkColor Ø documentElement Ø close Ø bgColor Ø cookie Ø open Ø body Ø Ø createTextNode(“ text ") Ø fgColor Ø createElement(“HTMLtag") Ø linkColor Ø getElementById(“id”) Ø title Ø Ø URL Ø vlinkColor Ø forms[] Ø images[] Ø childNodes[]
38. Đối tượng Document - DOM l Biểu diễn nội dung của tài liệu theo cấu trúc cây DOM Test DOM Test Heading A paragraph of text is just an example
39. Đối tượng Document - DOM l Cấu trúc cây nội dung tài liệu
40. Đối tượng Document - DOM l Các loại DOM Node chính
41. Đối tượng Document - DOM l getElementById ( id1 ) Trả về node có giá trị thuộc tính id = id1 Ví dụ: // // some text Text Node // 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
42. Đối tượng Document - DOM ll 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”; //
43. Đối tượng Document - DOM ll createTextNode ( content ) Ví dụ: var textNode = document.createTextNode(“New text”); var pNode = document.createElement(“p”); pNode.appendChild(textNode); // New text
44. Đối tượng Document - DOM ll 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 //
45. Đối tượng Document - DOM l 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 //
46. Đối tượng Document - DOM l 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”
47. Nội dung l Giới thiệu về Javascript l Kiểu dữ liệu & Các cú pháp Javascript l Nhúng Javascript vào trang web l Sử dụng các đối tượng trong Javascript l Xử lý sự kiện l DOM HTML với Javascript l Ví dụ
48. Ví dụ: Dynamic Table l 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.
49. Ví dụ: Dynamic Table body Table 12 Tr 13 Td Td 21 22 Tr Td Td
50. Ví dụ: body Table TBody 12 Tr 13 Td Td 21 22 Tr Td Td
51. Ví dụ: Dynamic Table l Document.createElement( ) :Tạo một đối tượng thẻ DOM HTML l Object.appendChild( ): Thêm một đối tượng thẻ DOM HTML như là nút con.
52. 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<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); }