Chuyên đề : Web Design

Chuyên đề : Web Design Trần Tuấn Vinh Bộ môn KTMT - Khoa CNTT Trường ĐH Bách Khoa Hà Nội

Nội dung chương trình • Thiết kế web với HTML • Javascript và CCS • Thiết kế web sử dụng PHP • Cơ sở dữ liệu MySQL • Thiết kế web động sử dụng PHP và MySQL • Thực hành

Web Design Chương 2.(tiếp) JavaScript Trần Tuấn Vinh Bộ môn Kỹ thuật máy tính, Khoa Công nghệ thông tin Đại học Bách Khoa Hà Nội

JavaScript Event • Với JavaScript ta có thể tạo ra các trang web động thông qua xử lý các sự kiện xảy ra trên trang Web • Tất cả các đối tượng trên trang web đều có các event xảy ra với chúng, và các event này ta có thể bắt được thông qua mã JavaScript. Ví dụ như sự kiện OnClick với một nút bấm xác định việc người sử dụng vừa nhấp chuột lên nút bấm • Các event này được định nghĩa trong thẻ HTML tương ứng • Các event thường hay được sử dụng • Click chuột • Trang web hay bức ảnh đang được Load • Dịch chuyển chuột qua một điểm nào đó trên trang web • Lựa chọn một input box trên trang web • Một phím được bấm

JavaScript Events • onLoad là event được phát hiện khi một đối tượng được Load lên, ví dụ như khi bạn truy cập vào một trang web • onUnload là event được phát hiện khi một đối tượng được thoát, ví dụ như khi bạn đóng một trang web • onClick là event được phát hiện khi bạn nhấp chuột lên một đối tượng nào đó • Ví dụ • onMouseOver và onMouseOut được phát hiện khi người dùng di chuột qua một đối tượng hoặc di chuyển chuột ra khỏi đối tượng. • Ví dụ

JavaScript Events

Mảng - Array • Trong JavaScript không hỗ trợ dữ liệu mảng khai báo cho từng kiểu dữ liệu mà sử dụng chung thông qua đối tượng Array(); • Để khai báo một mảng ta có thể sử dụng 2 cấu trúc • var arr1 = new Array(<số phần tử của mảng>) arr1[0] = 1; arr1[1] =2; arr1[2] =3; • Var arr2 = new Array(1,2,3);

Mảng - Array • Để duyệt các phần tử của một mảng ta có thể sử dụng hàm For…in… var arr = new Array(1,2,3); for (i in arr) { document.write(arr[i] + “<br>”) }

Mảng - Array • Để kết nối 2 mảng ta dùng hàm concat() của đối tượng Array. var arr1 = new Array(1,2,3); var arr2 = new Array(4,5,6); arr1 = arr1.concat(arr2); document.write(arr1); • Để chuyển một mảng thành một xâu ký tự sử dụng hàm join( ) của đối tượng Array var arr1 = new Array(“Xin chao”,”cac”,”ban”); document.write( arr.join()); document.write( arr.join(“-”));

Mảng-Array • Để sắp xếp các phần tử trong một mảng theo thứ tự ta có thể sử dụng hàm sort() của đối tượng Array. • Nếu chỉ gọi hàm sort không mảng sẽ được sắp xếp theo thứ tự alphabet(A..Z) • Muốn sắp xếp mảng các số ta phải truyển một hàm so sánh do người lập trình định nghĩa để hàm sort() thực hiện sắp xếp. Ví dụ 1 Ví dụ 2

Mảng Array

Function • JavaScript cũng cho phép ta tạo ra các hàm do lập trình viên tự định nghĩa. • Cú pháp function fnName([param_1],[param_2],...,[param_N]) { //function statement } fnName : tên hàm cần định nghĩa param_i : các tham số truyền vào của hàm (ở đây chỉ truyền tham trị)

Function • Hàm do người dùng định nghĩa trong JavaScript có thể có tham số hoặc không có tham số • Hàm có thể khai báo bất kỳ vị trí nào trong cùng một đoạn script, không nhất thiết phải khai báo hàm trước rồi mới được sử dụng • Hàm trong JavaScript cũng có thể trả về các giá trị. • Kiểu giá trị trả về của hàm cũng không cần định nghĩa trước khi khai báo hàm, ta có thể trả về giá trị tùy ý như người lập trình mong muốn • Để trả về giá trị nào chỉ cần sử dụng hàm Return <giá trị trả về > Ví dụ

String • String là một đối tượng trong JavaScript để lưu trữ một đoạn text và hay được gọi là một xâu ký tự • Một số các thuộc tính của đối tượng String V • Ví dụ var txt = “Xin chao cac ban”; document.write(txt.length()); Kết quả trả về = 16

Các phương thức của đối tượng String • Phương thức anchor() trả về cho ta một dòng HTML tương ứng như bạn tạo một đánh dấu để sau ta có thể tạo Hyperlink đến đó • Phương thức big(),small() biểu diễn một xâu dạng font chữ lớn,hoặc chữ nhỏ • Phương thức bold() ,italics() biểu diễn một xâu dạng chữ đậm hoặc chữ in nghiêng • Phương thức bink() biểu diễn một xâu ký tự nhấp nháy(IE not run) • Phương thức sub() , sup() biểu diễn một xâu ký tự dạng subscript hoặc superscript • Phương thức fontcolor(), fontsize() biểu diễn xâu ký tự với màu sắc và cỡ chữ xác định. • Thuộc tính toUpperCase(),toLowerCase() biểu diễn xâu ký tự dạng toàn chữ viết hoa hoặc chữ viêt thường • Examples\string1.htm

Các phương thức của đối tượng String • Phương thức link(url) tạo ra một Hyperlink trên trang HTML • Phương thức concat(str1,str2…) Kết nối một hoặc nhiều xâu với nhau • Phương thức indexOf(findstring,index) tìm kiếm xâu ký tự con trong một xâu ký tự đã có • Phương thức lastIndexOf(searchvalue,fromindex)tìm kiếm xâu ký tự con từ cuối một xâu ký tự đã có • Phương thức replace(findstring,newstring) tìm kiếm và thay thế một xâu ký tự con bằng một xâu khác • Phương thức split(separator, howmany) tách một xâu ra thành một mảng tập hợp các ký tự với separator là ký tự phân cách. • Phương thức slice(start,end) tách một xâu con từ một xâu ký tự với vị trí bắt đầu và kết thúc xác định • Examples\string2.htm

Date • Đối tượng Date trong JavaScript được sử dụng để thực hiện các thao tác liện quan đến ngày tháng và thời gian • Khởi tạo một đối tượng Date var myDate = new Date(); • Các phương thức của đối tượng Date

Các phương thức của Date

Math • Math là đối tượng trong JavaScript sử dụng để thực hiện các hàm toán học. • Để sử dụng các thuộc tính hoặc phương thức của đối tượng Math a = Math.<thuộc tính/ phương thức> • Các thuộc tính của đối tượng Math

Các phương thức của Math

JavaScript object • Ngoài các đối tượng trên JavaScript còn có một số đối tượng khác

HTML DOM Object • HTML DOM Object là một chuẩn sử dụng trong lập trình web, là ký tự viết tắt của Document Object Model for HTML • HTML DOM định nghĩa một tập chuẩn các đối tượng và các phương thức để truy nhập và sửa đổi các tập tin HTML • Tất cả các thẻ HTML bao gồm cả các thuộc tính của chúng đều có thể truy xuất thông qua các đối tượng DOM • HTML DOM là một flatform và là ngôn ngũ độc lập và có thể được sử dụng bởi bất kỳ ngôn ngữ lập trình nào như Java, JavaScript, VBScript..

HTML DOM Object

Chuyên đề : Web Design