Bài giảng Thiết kế và lập trình Web - Bài 4: JS (JavaScript)
Giới thiệu về Javascript
Script?
– Ngôn ngữ kịch bản
– Là một ngôn ngữ lập trình cho phép tạo ra sự điều khiển trong
một ứng dụng khác.
– Các ngôn ngữ kịch bản thường được thông dịch
JS 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.Thiết kế và lập trình 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
Tóm tắt nội dung tài liệu: Bài giảng Thiết kế và lập trình Web - Bài 4: JS (JavaScript)
Thiết kế và lập trình Web Viện CNTT & TT Bài 4 JS – JavaScript Thiết kế và lập trình Web 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ụ Thiết kế và lập trình Web Giới thiệu về Javascript Script? – Ngôn ngữ kịch bản – Là một ngôn ngữ lập trình cho phép tạo ra sự điều khiển trong một ứng dụng khác. – Các ngôn ngữ kịch bản thường được thông dịch JS 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. Thiết kế và lập trình 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 Thiết kế và lập trình Web Giới thiệu về Javascript Cung cấp sự tương tác với người dùng – Sự kiện do người dùng tạo ra: di chuột, click chuột – Sự kiện do hệ thống tạo ra: thay đổi kích thước trang, tải trang Thay đổi động nội dung – Thay đổi nội dung và vị trí các thành phần trên trang Web theo sự tương tác của người dùng Hợp lệ hóa dữ liệu – Kiểm tra xem dữ liệu có hợp lệ không trước khi nó được gửi (submit) đến Web Server để xử lý Thiết kế và lập trình Web 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ụ Thiết kế và lập trình Web Nhúng Javascript vào trang web Định nghĩa script trực tiếp trong trang html: <!-- // Lệnh Javascript --> Nhúng sử dụng script cài đặt từ 1 file .js khác: Thiết kế và lập trình 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ế. File JavaScript bên ngoài cho phép sử dụng lại nhiều lần và chỉnh sửa dễ dàng Nhúng Javascript vào trang web Thiết kế và lập trình Web Nhúng Javascript vào trang web document.write("Welcome to JavaScript"); Thiết kế và lập trình Web 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ụ Thiết kế và lập trình Web 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 */ Thiết kế và lập trình Web 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 Thiết kế và lập trình Web Biến số trong Javascript Phạm vi của biến – Được xác định bởi nơi biến được khai báo Biến toàn cục – Khai báo bên ngoài hàm – Được truy cập từ mọi nơi trong kịch bản – Khai báo không cần từ khóa var Biến cục bộ – Khai báo bên trong hàm – Phạm vi trong hàm khai báo – Bắt buộc phải có từ khóa var Script Global variable Function 1 Local variable Function 2 Local varibale Thiết kế và lập trình Web 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.” “40” Chứa được chuổi unicode Chuổi rỗng “” Number 0.066218 12 Theo chuẩn IEEE 754 boolean true / false undefined var myVariable ; myVariable = undefined null connection.Close(); connection = null Thiết kế và lập trình Web Đổ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ố. Chuyển không thành công: “NaN” Thiết kế và lập trình Web Đổi kiểu dữ liệu var x = 10; document.write(x); x=true; x = "Hello World"; document.write(x); x = "12"+4.3; document.write(x); x = parseInt("-32"); document.write(x); Thiết kế và lập trình Web Phép toán số học Phép toán Mô tả Ví dụ + Cộng A = 5 + 8 - Trừ A = 8 – 5 / Chia A = 20 / 5 % Số dư 10 % 3 = 1 ++ Tăng 1 ++ x và x ++ -- Giảm 1 -- x và x -- - Đảo dấu nếu A = 5 thì –A = -5 Thiết kế và lập trình Web Phép toán so sánh Phép toán Mô tả so sánh Ví dụ (x=5) Kết quả = = Bằng giá trị x = = 5 true = = = Bằng giá trị và kiểu x = = = “5” false ! = Không bằng x ! = 4 true > Lớn hơn x > 5 false >= Lớn hơn hoặc bằng x >= 5 true < Nhỏ hơn x < 4 false <= Nhỏ hơn hoặc bằng x <=5 true Thiết kế và lập trình Web Phép toán logic Phép toán Mô tả Ví dụ (x=6, y=3) Kết quả && And (x1) true || Or (x5) false ! Not !(x==y) true Thiết kế và lập trình Web Phép toán định lượng Phép toán điều kiện Cú pháp tênbiến = điềukiện ? giátrị1:giátrị2; Ví dụ: status = (diem >= 5) ? “đạt”: “thi lại”; 20 Thiết kế và lập trình Web Phép toán định lượng typeof – Trả về xâu xác định kiểu dữ liệu của biến Ví dụ: 21 var x = 5; document.write(typeof(x)); => number Thiết kế và lập trình Web 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); } Thiết kế và lập trình Web Ví dụ: function Sum(x, y) { tong = x + y; return tong; } Gọi hàm: var x = Sum(10, 20); Hàm trong Javascript Thiết kế và lập trình Web 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; Thiết kế và lập trình Web 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") } Thiết kế và lập trình Web 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; } Thiết kế và lập trình Web Vòng lặp while, do.. while while (expression) { statements } Ví dụ: var i = 9, total = 0; while (i < 10) { total += i * 3 + 5; i = i +5; } do { statement }while (expression); Ví dụ: var i = 9, total = 0; do { total += i * 3 + 5; i = i +5; } while (i > 10); Thiết kế và lập trình Web Hộp thông báo Sử dụng các phương thức: confirm, alert, prompt Phương thức alert() Cú pháp alert (“thông_báo”); 28 Thiết kế và lập trình Web Hộp thông báo Phương thức confirm() Cú pháp ret = confirm (“thông_báo”); 29 Thiết kế và lập trình Web Hộp thông báo Phương thức prompt() Cú pháp value = prompt(“thông_báo”, giá_trị_mặc_định); 30 Thiết kế và lập trình Web Hộp thông báo 31 alert("Welcome to JavaScript"); var value = prompt("What's your name?","JS"); alert("Hello "+value); var ret = confirm("Do you like JavaScript?"); alert("You pressed "+ret); Thiết kế và lập trình Web Hộp thông báo 32 Thiết kế và lập trình Web Viết chú thích Viết chú thích trên một dòng: // Viết chú thích trên nhiều dòng: /* và */ 33 /*Todo: Example in MessageBox include: alert(), confirm(), prompt() */ var value = prompt("What's your name?","JS"); //get your name Thiết kế và lập trình Web Các kí tự đặc biệt Vấn đề: var txt=“He is very “intelligence””; Các kí tự đặc biệt trong JavaScript: “ ‘ & \ n r t b f Để sử dụng: thêm dấu \ phía trước var txt= “He is very \“intelligence\””; 34 Thiết kế và lập trình Web 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ụ Thiết kế và lập trình Web Giới thiệu về sự kiện Sự kiện (event) – Là các hành động có thể được thể hiện bằng JavaScript – Mỗi thành phần trên trang Web đều có những sự kiện xác định, có thể kích hoạt một script Ví dụ – Sự kiện click chuột – Trang web hoặc ảnh được tải – Nhập dữ liệu vào một trường trên form 36 Thiết kế và lập trình Web Giới thiệu về sự kiện Chú ý: – Sự kiện thường được kết hợp với hàm. Hàm sẽ không thực thi chừng nào sự kiện chưa xuất hiện – Cú pháp sự_kiện = “tên_hàm ();” hoặc sự_kiện = “tên_hàm (ds_tham_số);” 37 Thiết kế và lập trình Web 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 Thiết kế và lập trình Web Xử lý sự kiện cho các thẻ HTML Cú pháp 1: Ví dụ: <INPUT TYPE="button“ NAME="Button1“ VALUE="OpenSesame!” onClick="window.open('mydoc.html');"> Lưu ý: Dấu “” và ‘’ Thiết kế và lập trình Web Xử lý sự kiện bằng function function GreetingMessage() { window.alert(“Welcome to my world”); } Thiết kế và lập trình Web Một số sự kiện thông dụng Sự kiện Ý nghĩa onMouseUp nút chuột được nhả onMouseDown ấn chuột onMouseOver chuột di chuyển qua vùng onMouseOut chuột di chuyển khỏi vùng onMouseMove chuột được di chuyển onclick click chuột ondbclick click đúp chuột onFocus Đối tượng được sử dụng(đặt con trỏ) onBlus Đối tượng không còn được sử dụng onChange Đối tượng được thay đổi (nhập dữ liệu) onSubmit Xác nhận tất cả dữ liệu trên form Thiết kế và lập trình Web Ví dụ: onclick Event function compute(frm) { var x = frm.expr.value; result.innerHTML = x*x; } X = <INPUT TYPE="button" VALUE=“Calculate” ONCLICK="compute(this.form)"> X * X = Thiết kế và lập trình Web 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ụ: <INPUT type=“text” name=“myTextbox” onblur=“(document.bgColor='aqua')” onfocus=“(document.bgColor='dimgray')”> Thiết kế và lập trình Web Bài tập 1 Tạo 2 phần tử: một nút bấm và một ô textbox. Hãy viết đoạn mã JavaScript khi người dùng click chuột vào nút Welcome thì hiển thị nội dung chứa trong textbox. – Hướng dẫn: Để lấy giá trị của một phần tử HTML: <Tên phần tử>.value – Ví dụ: msg.value cho ta giá trị của text tên là msg. 44 Thiết kế và lập trình Web Bài tập 1 <input type="button" name="welcome" value="Welcome" onclick="alert(document.frm.msg.value);" /> <input type="text" name="msg" value="Welcome to JavaScript" size="30" /> 45 Thiết kế và lập trình Web Bài tập 2 Tạo 2 nút, nút thứ nhất có value = "Xanh", nút thứ hai có value = "Đỏ". Yêu cầu: Khi người dùng click vào nút xanh thì màu nền của tài liệu là: xanh (blue), còn khi người dùng click vào nút đỏ thì màu nền của tài liệu là: đỏ (red). – Hướng dẫn: Thuộc tính màu nền của tài liệu được lưu trong thuộc tính bgColor của đối tượng document. Thuộc tính này có thể thay đổi được. 46 Thiết kế và lập trình Web Bài tập 2 <input type="button" value="Xanh" onclick="window.document.bgColor = 'blue'; " /> <input type="button" value="Đỏ" onclick="window.document.bgColor = 'red'; " /> 47 Thiết kế và lập trình Web Bài tập 3 Tạo một danh sách lựa chọn gồm có 4 màu: red, blue, brown và lavender. Khi người dùng chọn một màu thì màu nền của tài liệu sẽ thay đổi tương ứng. 48 Thiết kế và lập trình Web function DoiMau() { document.bgColor = frm.Mau.value; // Hoặc viết: window.document.bgColor = frm.Mau.value; } Bạn hãy chọn màu nền: Màu đỏ Màu xanh Màu nâu Màu xanh nhạt 49 Thiết kế và lập trình Web Bài tập 4 Tạo một textarea có tên là NoiDung, một Textbox có tên là : SoKyTu. Với yêu cầu như sau: – Khi người sử dụng gõ các phím vào trong textarea thì số lượng ký tự (Độ dài xâu) chứa trong textarea đó sẽ được hiển thị trong textbox. – Nếu số lượng ký tự trong textarea gõ vào vượt quá 200 ký tự thì thông báo : "Bạn đã gõ quá số ký tự cho phép !". 50 Thiết kế và lập trình Web Bài tập 4 51 Thiết kế và lập trình Web Bài tập 4 function KiemTra() { if (frm.NoiDung.value.length > 200) alert("Bạn đã gõ qúa số ký tự cho phép !"); frm.SoKyTu.value = frm.NoiDung.value.length; } Số ký tự đã gõ : <textarea name="NoiDung" cols="50" rows="10" onKeyUp="KiemTra();"> 52 Thiết kế và lập trình Web Bài tập 5 Tạo một nút có value = "Gửi", textbox có name = "HoTen", 2 nút radio có tên là GioiTinh và nhãn tương ứng là Nam, nữ. Yêu cầu: Khi người dùng di chuyển chuột vào phần tử nào thì hiển thị thông báo tương ứng dưới thanh trạng thái. – Ví dụ nếu người sử dụng di chuyển chuột qua nút nhấn "Gửi" thì thanh trạng thái sẽ là "Bạn đang di chuyển chuột vào nút"... 53 Thiết kế và lập trình Web Bài tập 5 54 Thiết kế và lập trình Web Bài tập 5 Xu ly su kien <input type="button" value="Gửi" onmousemove="window.status = 'Chuột trong nút'; "> <input onMouseMove ="window.status='Chuột trong textbox';"> <input type="radio" name="GioiTinh" onMouseMove="window.status='Trong nam';">Nam <input type="radio" name="GioiTinh" onMouseMove="window.status='Trong nữ';"> Nữ 55 Thiết kế và lập trình Web Bài tập 6 Tạo 3 textbox, có tên lần lượt là: SoLuong (Số lượng), DonGia (Đơn giá) và ThanhTien (Thành tiền); Yêu cầu: Khi người dùng nhập giá trị trong DonGia thì kết quả sẽ được cập nhật ngay trong ThanhTien. 56 Thiết kế và lập trình Web Bài tập 6 Tinh tich Bạn hãy nhập vào số lượng và giá: Số lượng: Đơn giá:<input name="DonGia" onKeyUp="ThanhTien.value=SoLuong.value*DonGia.value"> Thành tiền: USD 57 Thiết kế và lập trình Web Bài tập 7 Cho người dùng nhập vào tên và tuổi. Hãy viết lại tên và tuổi của người đó ra màn hình bằng hàm document.write, trong đó tên có màu đậm, tuổi được gạch chân. var Ten, Tuoi; // Khai báo 2 biến để lưu tên và tuổi Ten = prompt("Bạn hãy ... hương thức 69 Thiết kế và lập trình Web 1. Giới thiệu về đối tượng JavaScript là ngôn ngữ lập trình hướng đối tượng Khi tạo trang Web, chúng ta có thể sử dụng các đối tượng được cung cấp bởi browser, JavaScript, HTML Truy nhập – Thuộc tính: tên_đối_tượng . tên_thuộc_tính – Phương thức: tên_đối_tượng . tên_phương_thức() 70 Thiết kế và lập trình Web 1. Giới thiệu về đối tượng Phân tầng các đối tượng 71 Browser Objects Script Objects HTML Objects Thiết kế và lập trình Web 1. Giới thiệu về đối tượng Khởi tạo đối tượng tên_đối_tượng = new đối_tượng(danh_sách_tham_số) Cấu trúc for..in và with – Cú pháp for (variable in object) lệnh; và with (object) lệnh; 72 Thiết kế và lập trình Web Đối tượng của browser IE Objects Window Obj Frame Screen Document Obj History Navigator Event Location Thiết kế và lập trình Web Đối tượng Window Mỗi thành phần trên trang web được xem như một đối tượng, Tất cả các đối tượng trong Javascript được tổ chức phân cấp dạng hình cây gọi là mô hình DOM (Document Object Model), Ở mức trên cùng là đối tượng window biểu thị cho khung hay cửa sổ của trình duyệt, các phần tử còn lại là đối tượng con của window Để truy xuất đến một đối tượng trong IE và thay đổi dữ liệu cho chính phần tử đó dùng thuộc tính ID , tất cả các đối tượng trên trang đều có một ID duy nhất. Thiết kế và lập trình Web Đối tượng Window Đối tượng Window – Thể hiện cửa sổ của trình duyệt – Được sử dụng để • nhận các thông tin về trạng thái của cửa sổ • hiển thị các đối tượng khác • truy cập các sự kiện Thiết kế và lập trình Web Đối tượng Window document Obj: biểu diễn tài liệu HTML event: biểu diễn trạng thái của sự kiện frame: biểu diễn các frame (child windows) history: thông tin về URLs đã mở location: thông tin về URL hiện tại navigator: thông tin về Web browser screen: thông tin về màn hình client, khả năng render Thiết kế và lập trình Web Đối tượng Window Ví dụ: window.defaultStatus="String"; window.status="String"; window.location="URL"; Ta cũng có thể mở một trang web mới bằng lệnh: window.location.href= "URL"; Thiết kế và lập trình Web Đối tượng Window 78 Thiết kế và lập trình Web Đối tượng Window 79 Thiết kế và lập trình Web Đối tượng Window Ví dụ: Objwindow.close() Từ khoá self: trong trường hợp muốn thao tác trên cửa sổ hiện hành ta dùng từ khoá self thay thế cho đối tượng window Ví dụ : đóng cửa sổ hiện hành: Self.close() hoặc window.close() Thiết kế và lập trình Web Đối tượng Document Đối tượng document cung cấp các thuộc tính và phương thức để làm việc với toàn bộ tài liệu hiện hành gồm: form, liên kết, hình ảnh, tiêu đề, vị trí hiện hành, màu hiện hành Đối tượng document được định nghĩa khi tag body được xử lý trong trang HTML và nó vẫn tồn tại nếu trang được nạp. Các thuộc tính của document phản ánh thuộc tính của tag body. – Trong body có 2 sự kiện OnLoad và Unload Thiết kế và lập trình Web Đối tượng Document Thuộc tính Thiết kế và lập trình Web Đối tượng Document Thuộc tính Thiết kế và lập trình Web Đối tượng Document Phương thức Thiết kế và lập trình Web Đối tượng History Cung cấp các URLs được mở gần nhất Phương thức – back: quay lại URL ngay trước – go(number): quay lại vị trí xác định trong tài liệu – forward: mở URL tiếp theo 85 Thiết kế và lập trình Web Đố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, Thiết kế và lập trình Web Đối tượng Window - DOM Properties – document – event – history – location – name – navigator – screen – status Methods alert confirm prompt blur close focus open Thiết kế và lập trình Web Đối tượng Window - DOM Ví dụ: var curURL = window.location; window.alert(curURL); Thiết kế và lập trình Web Đố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 Thiết kế và lập trình Web Đố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 Thiết kế và lập trình Web Đố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 DOM Test Heading A paragraph of text is just an example Yahoo! Thiết kế và lập trình Web Đối tượng Document - DOM Cấu trúc cây nội dung tài liệu Thiết kế và lập trình Web Đối tượng Document - DOM Các loại DOM Node chính Thiết kế và lập trình Web Đố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 Thiết kế và lập trình Web Đố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”; // Thiết kế và lập trình Web Đố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 Thiết kế và lập trình Web Đố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 // Thiết kế và lập trình Web Đố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 // Thiết kế và lập trình Web Đố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” Thiết kế và lập trình Web 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ụ Thiết kế và lập trình Web 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. Thiết kế và lập trình Web Ví dụ: Dynamic Table 12 13 21 22 Table Tr Tr Td Td Td Td body Thiết kế và lập trình Web Ví dụ: 12 13 21 22 Table Tr Tr Td Td Td Td TBody body Thiết kế và lập trình Web 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. Thiết kế và lập trình Web 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); } Thiết kế và lập trình Web Đối tượng JavaScript 1. Đối tượng String .2. Đối tượng Date 3. Đối tượng Math 4. Đối tượng Array Thiết kế và lập trình Web 1. Đối tượng String Được sử dụng để làm việc với xâu văn bản Khởi tạo var tên_xâu = “nội_dung_xâu”; tên_xâu=“nội_dung_xâu”; var tên_xâu = String(“nội_dung_xâu); Thiết kế và lập trình Web 1. Đối tượng String Thuộc tính – length: độ dài xâu Phương thức – big: tăng kích thước xâu – small: giảm kích thước xâu – toLowerCase: chuyển thành chữ thường – toUpperCase: chuyển thành chữ hoa – fontcolor: xác định màu chữ – charAt: vị trí kí tự trong xâu Thiết kế và lập trình Web 2. Đối tượng Date Chứa các thông tin về ngày, giờ Lưu trữ thời điểm thông qua số lượng ms từ ngày 1/1/1970 tại 00:00:00 Khởi tạo tên_đối_tượng = new Date(tham_số); Ví dụ today = new Date(); dateobj = new Date(“Octorber 13,2009,10:10:10”); Thiết kế và lập trình Web 2. Đối tượng Date Phương thức chia làm: get: lấy giá trị ngày và giờ set: thiết lập giá trị ngày và giờ Bao gồm: Hours, Minutes, Seconds, Time, Year, Month, Date Giá trị – seconds và minutes: 0-59 – hours: 0-23 – day: 0-6 – date: 0-31 – months: 0-11 Thiết kế và lập trình Web 3. Đối tượng Math Thuộc tính – PI: số Pi, xấp xỉ 3.1415 – E: số e, xấp xỉ 2.718 Phương thức – abs: lấy giá trị tuyệt đối – sin, cos, tan – min (number1, number2) – max (number1, number2) – sqrt – pow Thiết kế và lập trình Web 4. Đối tượng Array Khởi tạo tên_mảng = new Array(kích_thước_mảng); hoặc tên_mảng = new Array(ds_phần_tử); Ví dụ: mybook = new Array(2); mybook[0] = “Access 2000”; mybook[1] = “Programming Techniques”; Phương thức – reverse: đảo ngược các phần tử trong mảng – pop: trả về phần tử cuối cùng của mảng, rồi xóa nó – push: thêm một phần tử vào cuối mảng Thiết kế và lập trình Web 4. Đối tượng Array color = new Array("red“,"blue","green"); var scolor; for(var elem in color){ scolor = "color " + elem + " = " + color[elem] + ""; document.write(scolor); } Thiết kế và lập trình Web Bài tập 1 Thiết kế và lập trình Web Bài tập 1 function show(content){ alert(content); } <input type="text onFocus="show('focus');" onChange="show('change');"> Thiết kế và lập trình Web Bài tập 2 – Sự kiện trên checkbox Thiết kế và lập trình Web function switchlight(){ var check = window.document.frmlight.chklight; if(check.checked) document.bgColor = 'white'; else document.bgColor='black‘; } <input type="checkbox" name = "chklight" onClick="switchlight();">The light switch Thiết kế và lập trình Web Bài tập 3 – Đổi màu nền Thiết kế và lập trình Web Bài tập 3 function bat_dau(){ var mau=prompt("Nhap mau nen cua trang",""); document.body.style.backgroundColor=mau; } Chao mung den Website Thiết kế và lập trình Web Bài tập 4 – Văn bản di chuyển Thiết kế và lập trình Web function moveleft(){ document.getElementById('header').style.position= "absolute"; document.getElementById('header').style.left="0"; } function moveback(){ document.getElementById('header').style.left="100"; } <h1 id="header“ onmouseover="moveleft()“ onmouseout="moveback()“> Mouse over this text Thiết kế và lập trình Web Bài tập 5 – Đèn tắt, bật Thiết kế và lập trình Web bLight=0; function changeimage(){ if (bLight==0){ bLight=1; document.myimage.src="bulbon.gif"; } else{ bLight=0; document.myimage.src="bulboff.gif“; } } <img name="myimage" onClick="changeimage()" src="bulboff.gif"> Thiết kế và lập trình Web Dynamic 124 Bài tập 6 – Bổ sung các thành phần động Thiết kế và lập trình Web Enter Your Mail Address <input id="Button1" type="button" value="Add More" onclick="Button1_onclick()" /> 125 Bài tập 6 Thiết kế và lập trình Web var NumOfRow=1; function Button1_onclick() { NumOfRow++; // lấy tham chiếu đến main Div var mainDiv=document.getElementById('MainDiv'); // tạo một div để chứa các điều khiển khác var newDiv=document.createElement('div'); newDiv.setAttribute('id','innerDiv'+NumOfRow); //tạo span để chứa đoạn text var newSpan=document.createElement('span'); newSpan.innerHTML="Enter Your Mail Address "; // tạo một textbox mới var newTextBox=document.createElement('input'); newTextBox.type='text'; newTextBox.setAttribute('id','txtAddr'+NumOfRow); // tạo một nút button Remove mới var newButton=document.createElement('input'); newButton.type='button'; newButton.value='Remove'; newButton.id='btn'+NumOfRow; // gắn sự kiện click cho button mới newButton.onclick=function RemoveEntry() { var mainDiv=document.getElementById('MainDiv'); mainDiv.removeChild(this.parentNode); } // append span, textbox và the button vào div newDiv.appendChild(newSpan); newDiv.appendChild(newTextBox); newDiv.appendChild(newButton); // cuối cùng gắn div mới vào main div mainDiv.appendChild(newDiv); } Thiết kế và lập trình Web Bài tập 7 Xây dựng một trang Web liệt kê danh sách các hóa đơn “Orders.html”: Nút “Save” cho phép các gửi các hóa đơn được đánh dấu đến file “Process.php” trên server để xử lý, nút “Back” cho phép quay lại trang trước đó và nút “Reset” dùng để xóa các nút chọn (checkbox). Nút chọn trên cùng cho phép có thể chọn tất cả hoặc hủy chọn tất cả các dòng hóa đơn bên dưới. Nếu tất cả các dòng bên dưới đều được chọn thì nút trên cùng cũng được đánh dấu. 127 Thiết kế và lập trình Web <input type="checkbox" name="chkall" onClick="docheck(document.frmList.chkall.checked);"/> <input type="checkbox" name="chkid" value="SHD11" onClick="docheckone();"/> <input type="checkbox" name="chkid" value="SHD12" onClick="docheckone();"/> 128 Thiết kế và lập trình Web Bài tập 7 function docheck(status){ var num = document.frmList.chkid.length; for(var i=0; i<num; i++) document.frmList.chkid[i].checked = status; } 129 Thiết kế và lập trình Web Bài tập 7 function docheckone(){ var checked = true; var num = document.frmList.chkid.length; for(var i=0; i<num; i++) if(document.frmList.chkid[i].checked==false){ checked = false; break; } document.frmList.chkall.checked = checked; } 130 Thiết kế và lập trình Web Bài tập 8 – Đổi màu nền thành màu của ô Thiết kế và lập trình Web Bài tập 9 - Ẩn hiện văn bản Thiết kế và lập trình Web Bài tập 10 – Kiểm tra các ô nhập liệu Thiết kế và lập trình Web Bài tập 11 – Tính toán đơn giản Thiết kế và lập trình Web Bài tập 12 – Mô phỏng máy tính Thiết kế và lập trình Web Bài tập 13 – Đồng hồ
File đính kèm:
- bai_giang_thiet_ke_va_lap_trinh_web_bai_4_js_javascript.pdf