Lời nói đầu: bài viết này nằm trong loạt 5 bài viết hướng dẫn các kỹ thuật nền tảng để xây dựng 1 ứng dụng J2EE hoàn chỉnh. Các bài viết này dành riêng cho khóa "J2EE nền tảng" củaJava Developer Training Center (JDTC). Sau đây là danh sách toàn bộ bài viết:
- Cốt lõi Java trong phần mềm quản lý J2EE
- Kết nối thế giới hướng đối tượng và quan hệ
- Giao diện người - máy thế hệ mới
- Máy ảo javascript với jquery
- MVC framework nào, đó là câu hỏi cần trả lời
- Kết nối thế giới hướng đối tượng và quan hệ
- Giao diện người - máy thế hệ mới
- Máy ảo javascript với jquery
- MVC framework nào, đó là câu hỏi cần trả lời
1. Div của dhtml đã thay đổi thế giới:
là viết tắt của Dynamic HTML. Như tên gọi dhtml là một mở rộng của html cung cấp các tiện ích cho phép lập trình viên tương tác với tất cả các thành phần của trang web thông qua javascript.
html tĩnh truyền thống thường rất tẻ nhạt với các thẻ định dạng header (từ h1 đến h5), in nghiêng, đậm, các thẻ liên quan đến table, td, tr. Khi thao tác với form, html tĩnh cung cấp text field, select box, radio button, button, text area.
Điểm ấn tượng nhất của dhtml là nó cung cấp thẻ div và hàm javascript getElementById. Với sự bổ sung của 2 thành phần này trang web trở nên sống động hơn trước rất nhiều.
Ví dụ: trang web có 1 button và dùng 1 thẻ div để hiện thông báo. Khi người dùng nhấn vào nút này, thẻ div sẽ thông báo "Hello world".
2. CSS, trang điểm cho trang web đầy sắc màu:
CSS là một ngôn ngữ giúp đặc tả màu sắc, font chữ, vị trí, đường viền của các đối tượng trên 1 trang web. CSS có khả năng tác động đến tất cả các thành phần của trang web.
Các điểm ấn tượng nhất của CSS bao gồm:
- Tạo border 1 cách đẹp mắt: CSS cho phép tạo border cho bất cứ đối tượng nào: text, paragraph, hoặc nội dung trong thẻ div (được dùng phổ biến nhất). Format border bao gồm: màu, style (đường liền hoặc đứt né), và độ dày (thick, thin, medium).
http://www.html.net/tutorials/css/lesson11_ex1.asp
- Format chữ với các hiệu ứng khác nhau: CSS cho phép chuyển đổi (text-transform) kiểu chữ thành viết chữ in hay kiểu viết hoa, cho phép trang trí (decorate) chữ bằng gạch dưới hoặc gạch ngang, kéo giãn chữ.
http://www.html.net/tutorials/css/lesson5_ex3.asp
- Tạo layer trên trang web: ngoài chiều ngang và chiều dọc, với layer trang web sẽ có thêm chiều sâu. Việc chồng lớp được sử dụng nhiều nhất để tạo message box bằng div cho hiệu quả tự nhiên hơn thay vì dùng popup hoặc javascript confirm box.
Ví dụ sau cho thấy 5 quân bài được xếp chồng lên nhau (thực chất là 5 tấm hình và dùng z-index và position để xếp lớp):
http://www.html.net/tutorials/css/lesson15_ex1.asp
3. Ajax (đọc là "ei jax"): là 1 công nghệ đình đám hiện nay đóng vai trò cột trụ cho web 2.0. Ajax cho phép load lại từng phần của trang web (chủ yếu là thay đổi nội dung của 1 thẻ div nào đó). Như vậy, ajax chỉ phát huy hiệu quả khi kết hợp với lấy việc lấy dữ liệu từ server. Nguyên tắc hoạt động của ajax có thể được tóm tắt như sau: từ trang web hiện hành thông qua javascript gọi 1 url với một hoặc nhiều thông số, url này có thể là 1 action (Struts2) hoặc là trang .php. Trang này có nhiệm vụ xử lý yêu cầu bằng cách tiến hành query vào cơ sở dữ liệu dựa trên các tham số nhận được, và trả kết quả trả lại dưới 2 dạng: html hoặc xml.
Với định dạng html, trang hiện hành chỉ việc dùng javascript lấy id của div và điền vào nội dung bằng cách dùng innerHTML. Đối với dạng xml, trang hiện hành cần phải duyệt (traverse) các node của cây xml sau đó điền kết quả vào trang web.
Như vậy, trong trang hiện hành phải có 2 hàm js: hàm thứ 1 phát động gọi xử lý trên server, hàm thứ 2 xử lý kết quả nhận được.
Với sự hỗ trợ của jquery, ajax trở nên "nhuyễn và kỳ ảo hơn bao giờ hết".
Bài tập:
1. Thiết kế trang đăng nhập của facebook (https://login.facebook.com/login.php) sử dụng CSS, javascript
2. Xây dựng lại top menu của trang (http://tuoitre.vn/)
3. Hiện thực chức năng "Write a comment" trong facebook. Ban đầu hiện text field có dòng chữ Write a comment bên trong. Khi người dùng click vào, sẽ mất dòng chữ Write a comment và hiện ra 1 button Save. Khi người dùng thoát focus ra khỏi text field, nếu chưa nhập nội dung gì thì trả về trạng thái cũ, nếu không sẽ giữ nguyên.
4. Tạo 1 form giống như trang sau http://slave.vatgia.com/home/register.php. Lưu ý các validate dùng javascript và hiển thị nội dung ngay tại control cần validate.
No comments:
Post a Comment