Bài tập Thực hành Lập trình Web (JavaScript)

Bài  tập  Thực  hành  Lập  trình  Web  (CT428)  –  GV.  Trần  Công  Án   -­‐26-­‐   THỰC  HÀNH  LẬP  TRÌNH  WEB   BUỔI  3  –  JavaScript   Nội  dung:  -­‐ Lập  trình  web  động  bằng  JavaScript:   o Dùng  JS  để  xử  lý  sự  kiện  và  thực  hiện  một  số  tính  toán.   o Kết  hợp  JS,  DOM  và  CSS.       Bài  1. Viết  trang  web  giải  phương  trình  bậc  2  dùng  JS.   v Mục  tiêu:    1) Làm  quen  với  ngôn  ngữ  lập  trình  JS.  2) Truy  xuất  giá  trị  của  các  phần  tử  trong  form  bằng  JS  và  DOM.     v Yêu  cầu:  1) Thiết  kế  trang  web  như  Figure  17.1  2) Khi  người  sử  dụng  ấn  nút  “Giải  phương  trình”,  một  đoạn  chương  trình  JS  sẽ  được  gọi  để  tính  các  giá  trị  delta,  x1,  và  x2.  3) Các  giá  trị  tính  được  sẽ  được  hiển  thị  tại  vị  trí  tương  ứng  trong  trang  web  như  Figure  17.2  4) Nâng  cao:  Sinh  viên  thêm  các  kiểm  tra  dữ  liệu  nhập  vào  và  hiển  thị  câu  thông  báo  tại  vị  trí  thích  hợp  nếu  dữ  liệu  nhập  vào  không  hợp  lệ  như  Figure  17.3     v Hướng  dẫn:    1) Trang  web  có  1  form  bao  gồm  3  textfield  và  1  button.  Ngoài  ra,  nơi  sẽ  hiển  thị  các  giá  trị  delta  và  nghiệm  thì  ta  bố  trí  các    với  nội  dung  trống.  Các    này  phải  được  đặt  id  để  ta  tham  chiếu  và  gán  giá  trị  sau  này.  Giữa  dòng  hiển  thị  delta  và  nghiệm  x1,  ta  cũng  tạo  1    nhưng  để  trống  nội  dung.  Paragraph  này  cũng  phải  có  id.  2) Viết  hàm  giải  phương  trình  bậc  hai  bằng  JS  và  trên  sự  kiện  onclick  của  nút  “Giải  phương  trình”  sẽ  gọi  đến  hàm  này.  Trong  hàm  sẽ  dùng  các  DOM  API  để  truy  xuất  đến  giá  trị  A,  B,  C  để  giải  phương  trình  (document.getElementById()).  Sau  đó,  hàm  này  cũng  sử  dụng  DOM  để  gán  giá  trị  cho  các    và    tương  ứng.    3) Sinh  viên  tự  nghĩ  ra  các  trường  hợp    không  hợp  lệ  của  dữ  liệu  và  viết  các  thủ  tục  kiểm  tra.  Để  xuất  thông  báo  thì  ta  đặt  các    trống  bên  cạnh  các  ô  nhập  liệu  cho  A,  B,  C  để  có  thể  hiển  thị  thông  báo.  Ngoài  ra,  sinh  viên  cũng  có  thể  cải  tiến  thêm  là  nếu  giá  trị  nào  bị  lỗi  thì  sẽ  tự  động  di  chuyển  con  trỏ  nhập  liệu  đến  ô  nhập  liệu  tương  ứng  (gọi  hàm  focus()  của  phần  tử).   Bài  tập  Thực  hành  Lập  trình  Web  (CT428)  –  GV.  Trần  Công  Án   -­‐27-­‐    Figure  17.  Giải  phương  trình  bậc  2     Bài  2. Tạo  1  máy  tính  đơn  giản  trên  web  sử  dụng  CSS  và  JavaScript.   v Mục  tiêu:    1) Xứ  lý  sự  kiện  bằng  JS  2) Sử  dụng  các  cấu  trúc  điều  khiển,  lệnh  của  JS     v Yêu  cầu:    1) Thiết  kế  một  máy  tính  đơn  giản  trên  trang  web  như  Figure  18.   Bài  tập  Thực  hành  Lập  trình  Web  (CT428)  –  GV.  Trần  Công  Án   -­‐28-­‐   2)  Người  sử  dụng  có  thể  dùng  chuột  hoặc  bàn  phím  để  nhập  vào  một  biểu  thức  gồm  2  toán  hạng  và  1  toán  tử  (+,  -­‐,  *,  /).  3) Thực  hiện  kiểm  tra  biểu  thức  người  dùng  nhập  vào.  Nếu  hợp  lệ  thì  tìm  giá  trị  hai  toán  hạng  và  toán  tử  rồi  định  giá  biểu  thực  và  hiển  thị  ra  màn  hình.  Nếu  không  hợp  lệ  thì  hiển  thị  thông  báo  thích  hợp.      Figure  18.  Máy  tính  đơn  giản   v Hướng  dẫn:    1) Thiết  kế  giao  diện:  gồm  1  textfield  vừa  để  nhập  biểu  thức,  vừa  hiển  thị  kết  quả;  và  16  button.  Để  các  nút  có  kích  thước  bằng  nhau,  sử  dụng  font  Courier  New  cho  các  nút.  2) Do  textfield  cho  phép  người  dùng  nhập  liệu  từ  bàn  phím  nên  không  cần  xử  lý  trường  hợp  này.  Chỉ  cần  xử  lý  trường  hợp  người  sử  dụng  dùng  chuột:  bắt  sự  kiện  chuột  trên  các  nút  và  nối  vào  giá  trị  hiện  tại  của  textfield  các  giá  trị  tương  ứng  với  nút  được  click.  3) Dùng  biểu  thức  chính  qui  để  kiểm  tra  biểu  thức  nhập  vào.  Sau  đó,  dùng  các  cấu  trúc  điều  khiển  để  tính  giá  trị  biểu  thức  và  hiển  thị  lên  textfield.     Bài  3. Tạo  1  form  đăng  ký  người  dùng  có  kiểm  tra  dữ  liệu  nhập  vào.   v Mục  tiêu:    1) Dùng  JS  để  kiểm  tra  dữ  liệu  phía  trình  duyệt,  sử  dụng  biểu  thức  chính  qui.  2) Sử  dụng  mô  hình  DOM  để  xuất  thông  báo.     v Yêu  cầu:    1) Tạo  1  form  như  Figure  19.  2) Nếu  người  sử  dụng  nhấn  nút  Clear,  xóa  tất  cả  các  điều  khiển  nhập  liệu.  3) Nếu  người  sử  dụng  nhấn  nút  Finish,  thực  hiện  kiểm  tra  dữ  liệu  như  sau:   o Tất  cả  các  trường  có  dấu  *  thì  không  được  rỗng  hoặc  không  chọn.   o Email:  phải  có  1  dấu  @.  Phía  trước  dấu  @  là  tên  accout,  có  nhiều  nhất  1  dấu  chấm.  Phía  sau  dấu  thăng  là  domain,  phải  có  ít  nhất  1  dấu  chấm.   Bài  tập  Thực  hành  Lập  trình  Web  (CT428)  –  GV.  Trần  Công  Án   -­‐29-­‐   o Ngày  tháng  năm  sinh:  có  thể  nhập  vào  theo  dạng  mm/dd/yyyy  hoặc  mm-­‐dd-­‐yyyy.  Thực  hiện  kiểm  tra  ngày  tháng  nhập  vào  (tháng  từ  1-­‐12,  năm  phải  nhỏ  hơn  hay  bằng  năm  hiện  tại,  ).   o Zip  code:  có  đúng  5  số.      Figure  19.  Form  nhập  thông  tin  cá  nhân     Bài  4. Thêm  các  hướng  dẫn  nhập  liệu  cho  các  thành  phần  của  form.   v Mục  tiêu:  Vận  dụng  khả  năng  xử  lý  sự  kiện  của  JS  để  tạo  các  form  thân  thiện  với  người  sử  dụng.   v Yêu  cầu:  Thêm  hướng  dẫn  nhập  liệu  bên  trong  các  điều  khiển  nhập  liệu  cho  một  số  điều  khiển  trong  Bài  3.  Các  hướng  dẫn  này  tự  động  mất  đi  khi  người  dùng  đưa  con  trỏ  vào  để  bắt  đầu  nhập  dữ  liệu.  Sinh  viên  có  thể  tham  khảo  trang    để  hiểu  rõ  yêu  cầu.  Khi  ta  đưa  con  trỏ  vào  ô  gõ  câu  hỏi,  dòng  chữ  hướng  dẫn  “Ask  us  anything”  sẽ  biến  mất  để  cho  ta  nhập  liệu.   v Hướng  dẫn:    1) Gán  giá  trị  cho  textfield  là  nội  dung  hướng  dẫn.  Có  thể  sử  dụng  CSS  để  làm  cho  màu  của  nội  dung  hướng  dẫn  mờ  hơn  bình  thường.  2) Khi  textfield  có  con  trỏ,  một  đoạn  mã  JS  được  gọi  để  kiểm  tra  xem  nếu  nội  dung  hiện  tại  của  textfield  là  câu  hướng  dẫn  thì  sẽ  xóa  nội  dung  đó  đi,  đồng  thời  thay  đổi  màu  của  textfield  lại  bình  thường.   Bài  tập  Thực  hành  Lập  trình  Web  (CT428)  –  GV.  Trần  Công  Án   -­‐30-­‐   3) Nếu  người  sử  dụng  không  gõ  vào  nội  dung  mà  di  chuyển  con  trỏ  ra  khỏi  textfield  thì  ta  sẽ  gán  giá  trị  của  textfield  là  nội  dung  hướng  dẫn  và  đồng  thời  thay  đổi  màu  nền  mờ  lại.     Bài  5. Thiết  kế  trang  web  cho  phép  chọn  theme.   v Mục  tiêu:    1) Dùng  JS  và  DOM  để  thay  đổi  giá  trị  của  một  phần  tử  HTML  trên  trang  web  2) Sử  dụng  external  CSS  3) Khai  báo  một  phần  tử  thuộc  nhiều  lớp.     v Yêu  cầu:    1) Sửa  trang  web  máy  tính  trong  Bài  2:  thêm  vào  một  drop-­‐down  list  như  Figure  20.1.  2) Khi  người  sử  dụng  chọn  theme  trong  dropdown  list,  giao  diện  của  máy  tính  sẽ  thay  đổi  tương  ứng  (Figure  20.2  và  Figure  20.3).        Figure  20.  Máy  tính  cho  phép  chọn  theme     v Hướng  dẫn:    1) Tạo  3  tập  tin  CSS:  một  để  định  nghĩa  theme  default,  một  để  định  nghĩa  theme  dark  và  một  để  định  nghĩa  theme  colorful.   2) Mặc  nhiên,  trang  web  cài  đặt  máy  tính  sử  dụng  theme  default  bằng    cách  import  tập  tin  CSS  định  nghĩa  default  theme  vào:        Thuộc  tính  id  trong  thẻ    cho  phép  ta  tham  chiếu  đến  thẻ  này  để  thay  đổi  CSS  sử  dụng  cho  trang  web.  3) Viết  một  hàm  JS  nhận  vào  tên  theme  và  thay  đổi  thuộc  tính  href  của  thẻ  link  liên  kết  đến  tập  tin  CSS  tương  ứng:      document.getElementById(“themeCSS”).href  =  ;  4) Trong  sự  kiện  onchange  của  dropdown  list  (),  hàm  thay  đổi  thuộc  tính  sẽ  được  gọi  và  truyền  tên  theme  vào  cho  hàm.     Bài  tập  Thực  hành  Lập  trình  Web  (CT428)  –  GV.  Trần  Công  Án   -­‐31-­‐   Bài  tập  Thực  hành  Lập  trình  Web  (CT428)  –  GV.  Trần  Công  Án   -­‐32-­‐