Slide thiết kế lập trình chương 5 ngôn ngữ java

ĐẠI HỌC QUỐC GIA TP.HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN KHAO CÔNG NGHỆ THÔNG TIN BỘ MƠN CƠNG NGHỆ PHẦN MỀM Bài  05: Ngơn ngữ JavaScript CuuDuongThanCong.com https://fb.com/tailieudientucntt   Nội  dung                 Nhúng   JavaScript                             vào  HTML                 Giới                t    hiệu               l iệu   Kiểu      d      ữ      c      ú          p        háp     JavaScript                 Ví    d        ụ            ứ      ng   JavaScript   dụng                 HTML                    D        OM                 Xử  lý  sự  kiện                         với  J    avaScript   CuuDuongThanCong.com  JavaScript   https://fb.com/tailieudientucntt                                                     Giới  thiệu   JavaScript   Ngôn  ngữ  JavaScript               CuuDuongThanCong.com https://fb.com/tailieudientucntt Giới thiệu Script !  Client-­‐Side  Script   !  !  Script     thực   thi     Client-­‐Side   (trình   duyệt):   Thự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     xử   lý     Server-­‐Side,   nhằm   tạo     trang   web   có   khả     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ả    người  dùng…   CuuDuongThanCong.com https://fb.com/tailieudientucntt Giới thiệu Javascript !  !  ! JavaScript  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   CuuDuongThanCong.com https://fb.com/tailieudientucntt Giới thiệu Javascript !  ! Khi trình   duyệt   (Client browser) truy   cập   trang   web   có   chứa     đoạn   mã   xử   lý     server-­‐side Server (run-time engine) thực lệnh Server-side Scipts trả nội  dung  HTML cho  trình  duyệt   Nội   dung   HTML   trả     chủ   yếu   bao   gồm:   mã   html,  client-­‐script   CuuDuongThanCong.com https://fb.com/tailieudientucntt                                         Nhúng  JavaScript   vào  trang  HTML   Ngôn  ngữ  JavaScript               CuuDuongThanCong.com https://fb.com/tailieudientucntt Nhúng Javascript vào trang web Định  nghĩa  Script  trực  tếp  trong  trang  HTML:                     Nhúng  sử  dụng  script  cài  đặt  từ  1  file  .js  khác:     CuuDuongThanCong.com https://fb.com/tailieudientucntt Nhúng JavaScript vào trang Web !  ! ! Web   Browser     thực   thi       load   trang  web  theo  thứ  tự  từ  trên  xuống  dưới   Đối   với   Source   code   JavaScript   có   thể   đặt    các  file  .js  sẽ  được  nhúng  vào  file  HTML   trước  khi  hoạt  động     Các   đoạn   code   JavaScript     Browser   xử     thứ   tự   với     thẻ   HTML   Trừ     hàm   (func/on)  chỉ  được  thực  thi  khi  có  lời  gọi  hàm   CuuDuongThanCong.com https://fb.com/tailieudientucntt Nhúng  Javascript  vào  trang  web                                                some  statements                                                                                                                                some  statements                                                 //  some  text   //

  var  theElement  =  document.getElementById("para1");   theElement.innerHTML  =  “Some    new    text”;     //  Kết  quả  :   //  

  //  Some    new    text   //  

          CuuDuongThanCong.com https://fb.com/tailieudientucntt Đối  tượng  Document  -­‐  DOM   !     innerText    Tương  tự  innerHTML,  tuy  nhiên  bất  kỳ  nội  dung    đưa  vào  cũng  được  xem  như  là  text  hơn  là    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”         CuuDuongThanCong.com     https://fb.com/tailieudientucntt                                         Ví  dụ   Ứng  dụng   Ngôn  ngữ  JavaScript               CuuDuongThanCong.com https://fb.com/tailieudientucntt 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   CuuDuongThanCong.com https://fb.com/tailieudientucntt Ví  dụ  Dynamic  Table   body   Table   12 13 Tr   Td   21 22 Td   Tr   CuuDuongThanCong.com Td   https://fb.com/tailieudientucntt Td   Ví  dụ   body   Table   TBody   12 13 Tr   Td   21 22 CuuDuongThanCong.com Td   Tr   Td   https://fb.com/tailieudientucntt Td   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   CuuDuongThanCong.com https://fb.com/tailieudientucntt 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