Bài thực hành số 3 – Làm việc với Javascript & JQuery có mục tiêu giúp sinh viên làm quen với thành phần hỗ trợ cho HTML5 & CSS3, đó là Javascript & JQuery. Tài liệu sau đây dành cho đối tượng học Kỹ thuật lập trình.
Trang 1WEB302_ HTML5 & CSS3 Lab3
Bài thực hành số 3 – Làm việc với
Javascript & JQuery
Chú ý chung với toàn bộ các buổi lab:
- Toàn bộ bài tập trong các buổi lab, bắt buộc sinh viên phải viết mã bằng tay, sử dụng một trong các chương trình soạn thảo mã sau:
o Notepad ++
o E- Text Editor
Mục tiêu
Buổi thực hành số 4 giúp sinh viên làm quen với thành phần hỗ trợ cho HTML5 & CSS3, đó là Javascript & JQuery
Trang 2WEB302_ HTML5 & CSS3 Lab3
Bài 1
Sinh viên tự thực hành trước các bước trong SGK (từ trang 195 – trang 209) với thư mục:
- HTML5_08lessons
Nộp thư mục hoàn thiện theo tên:
- HTML5_08lessons_done
Đây là dạng bài tập không chấm điểm, tuy nhiên bắt buộc sinh viên phải có kết quả để nộp cho giảng viên theo dõi Nếu sinh viên nào không thực hiện, giảng viên có quyền trừ điểm vào các bài tập sau
Bài 2
Sử dụng hình ảnh gallery.jpg có trong thư mục TaiNguyen\Lesson2 để thực hiện yêu cầu sau:
1 Dàn layout theo chuẩn HTML5
2 Sử dụng Javascript/ Jquery để thực hiện công việc:
o Khi người dùng nhấn 2 nút tam giác, thì hình ảnh sẽ chạy theo chiều ngang
o Khi người dùng thực hiện thao tác nhấn xem 1 bức hình, sẽ hiển thị tấm hình đó
với kích thước to hơn, đồng thời trang web sẽ tối hơn (như hình minh họa)
Trang 3WEB302_ HTML5 & CSS3 Lab3
Hiển thị khi xem một tấm hình:
Trang 4WEB302_ HTML5 & CSS3 Lab3
Yêu cầu nộp bài
Cuối giờ thực hành, sinh viên tạo thư mục theo tên <Tên đăng nhập SV>_Lab4, chứa tất cả
sản phẩm của những bài lab trên, nén lại thành file zip và upload lên mục nộp bài tương ứng trên LMS