Tuần 2. HTMLL – CSS [3 tiết]

Mục tiêu:

▪ Hiểu rõ Cascading Style Sheets [sử dụng với mục đích mô tả và định dạng các tài liệu được viết bởi ngôn ngữ markup] ▪ Áp dụng được các thành phần CSS và thuộc tính để định dạng các trang HTML ▪ Hiểu rõ và áp dụng được các thành phần của CSS Yêu cầu:

▪ Tất cả các bài tập lưu trong thư mục: T:\MaSV_HoTen\Tuan ▪ Hình ảnh được lưu trữ trong thư mục riêng T:\MaSV_HoTen\Tuan02\images ▪ Các tập tin CSS được lưu trữ trong thư mục riêng T:\MaSV_HoTen\Tuan02\css ▪ Cuối mỗi buổi thực hành, SV phải nén [.rar hoặc .zip] thư mục làm bài và nộp lại bài tập đã thực hiện trong buổi đó. Tóm tắt lý thuyết − Cú pháp tổng quát CSS selector { property1: value1; property2: value2; ... } − Sử dụng CSS trong HTML ▪ Inline style

▪ Internal style sheet

▪ External style sheet

Bài 1. CSS background – CSS font – CSS Text – CSS link – CSS List:

a]. Sử dụng CSS định dạng trang web như sau:

b]. Sử dụng CSS Box - CSS Layout – CSS Border – CSS Padding – CSS Margin định dạng menu như sau:

c]. Sử dụng CSS Position – CSS Menu – CSS Form định dạng trang web như hình

Bài 2. Dùng HTML và CSS thiết kế Layout

Sử dụng dữ liệu trong folder Tuan2\Bai1, thiết kế trang web có layout như hình

Layout gợi ý cho website như sau:

Bài 3. Thiết kế website

− Cho mô hình liên kết website như sau:

− Sử dụng dữ liệu trong thư mục Tuan2/Bai2 thiết kế các trang web như sau:

1. Tạo trang index với hình nền là hình background và chứa các hình Salogo và Siggie như sau [trong đó Siggie là liên kết hình đến trang home],

− Layout chung cho 4 trang home, maze, hauntt, petting, produce như sau:

1. Tạo trang home như hình dưới [chèn thêm các hình ảnh tương ứng] với bố cục lại trang thành 3 phần, sử dụng
   . a. Phần 1: [chứa các liên kết] [

   ] b. Phần 2: [phần nội dung] [

   ] c. Phần còn lại sử dụng
2. Tạo file farm thiết lập định dạng các style cho trang home như hình sau: Gợi ̋ c·c style: − body [background, color, font-family] − h2 [width, padding-left, font-size, font-style, letter-spacing, text-indent, background-color] − h3[width; padding-left, background-color] − address [text-align, border-top, padding-top, clear:all] − a: link, a: visited, a: active, a: hover −

   links[float, width, background-color, border- style, border-width] −

   noidung[ margin-left, padding-left, boder-left, ] Nhúng file farm vào tất cả các trang .html.

3. Tạo các trang maze, haunt, petting, produce có cùng layout. Kết quả: Website minh họa khi hoàn thành

home

Tương tự cho các trang còn lại như trang maze

Bài 4. Sử dụng Style thiết kế website

Sử dụng dữ liệu trong thư mục Tuan2\Bai3

Thiết kế trang Web như sau: Home, Start

Home Start

Tuần 3. HTMLL – CSS nâng cao [3 tiết]

Mục tiêu:

▪ Hiểu rõ Cascading Style Sheets [sử dụng với mục đích mô tả và định dạng các tài liệu được viết bởi ngôn ngữ markup] ▪ Áp dụng được các thành phần CSS và thuộc tính để định dạng các trang HTML ▪ Hiểu rõ và áp dụng được các thành phần của CSS3 Yêu cầu:

▪ Tất cả các bài tập lưu trong thư mục: T:\MaSV_HoTen\Tuan03 ▪ Hình ảnh được lưu trữ trong thư mục riêng T:\MaSV_HoTen\Tuan03\images ▪ Các tập tin CSS được lưu trữ trong thư mục riêng T:\MaSV_HoTen\Tuan03\css

Bài 1. Sử dụng HTML và Style thiết kế trang web

Sử dụng dữ liệu trong folder Tuan3\Bai1, thực hiện các styles cho trang web như sau:

1. Layout
2. Links
3. Các style cho Form
4. Font chữ

Bài 2. Sử dụng HTML và Style thiết kế trang web [tt]

Dữ liệu trong folder Tuan3\Bai2, thực hiện các styles cho trang web như sau:

1. Layout
2. Links
3. Các style cho Form
4. Font chữ

Bài 3. Sử dụng HTML và Style thiết kế trang web [tt]

Sử dụng dữ liệu trong folder Tuan3\Bai3, thực hiện các styles cho trang web như sau:

1. Layout
2. Links
3. Các style cho Form
4. Font chữ

Tuần 4. HTMLL – CSS – Bootstrap [3 tiết]

Mục tiêu:

▪ Hiểu và áp dụng cách sử dụng Bootstrap với Grid System, Image, Button, Navigation Bar kết hợp Dropdown, Table, Form và Modal. Yêu cầu:

▪ Tất cả các bài tập lưu trong thư mục: T:\MaSV_HoTen\Tuan09-10 ▪ Hình ảnh được lưu trữ trong thư mục riêng T:\MaSV_HoTen\ Tuan09-10\images ▪ Các tập tin CSS được lưu trữ trong thư mục riêng T:\MaSV_HoTen\ Tuan09-10\css ▪ Các tập tin JavaScript được lưu trữ trong thư mục riêng T:\MaSV_HoTen\ Tuan09- 10\js ▪ Cuối mỗi buổi thực hành, SV phải nén [.rar hoặc .zip] thư mục làm bài và nộp lại bài tập đã thực hiện trong buổi đó. Thực hiện lại các bài tập Tuần 2,3 sử dụng thư viện Boostrap:

• Boostrap Grid
• Typography
• Boostrap Images
• Navigation Bar
• Tables
• Border

Bài 1. Bootstrap cơ bản

a]. Sử dụng Boostrap Grid thiết kế trang web sau: Hình sinh viên tự chọn tùy ý

b]. Sử dụng Bootstrap Thumbnails thiết kế trang web sau:

c]. Thiết kế bảng sử dụng bootstrap table kết hợp images, badges, buttons, secondary texts và hover state

Bài 2. Bootstrap Form

a]. Sử dụng bootstrap Form và Table thiết kế Form Payment

b]. Bootstrap - Collapsible navigation bar: Thiết kế trang Web với màn hình nhỏ cho phép ẩn navigation links và thay thế bằng 1 nút, người dùng có thể nhấn vào vào chọn các links của Navigation

Nhấn chuột vào nút, các link trong Navigation links hiển thị

Khi ở chế độ màn hình lớn, nút được ẩn và menu xuất hiện bình thường

c]. Sử dụng Bootstrap Form thiết kế form đăng ký tài khoản Facebook

d]. Sử dụng Bootstrap Form thiết kế form đăng ký tài khoản, khi nhập thiếu hoặc sai định dạng thì hệ thống hiển thị thông báo lỗi

Bài 3. Bootstrap – Modal

a]. Thiết kế form Modal login

b]. Bootstrap - Modal kết hợp Carousel và Tab trên Modal

Tuần 5. HTMLL – CSS – Bootstrap [3 tiết]

Bài 1. Sử dụng thư viện Bootstrap thiết kế trang web sau

a]. Web page Restaurant

b]. WebPage magazine

Bài 2. Thực hiện Website theo cấu trúc sau:

home

menu

about

home

menu

book order

about

book

order

Tuần 6. Javascript cơ bản [3 tiết]

Mục tiêu:

▪ Hiểu rõ ngôn ngữ lập trình JavaScript [kiểu dữ liệu, toán tử, biểu thức, cấu trúc điều khiển, vòng lặp, mảng ...] ▪ Hiểu rõ và áp dụng được mô hình DOM. Yêu cầu:

▪ Tất cả các bài tập lưu trong thư mục: T:\MaSV_HoTen\Tuan06 ▪ Hình ảnh được lưu trữ trong thư mục riêng T:\MaSV_HoTen\Tuan06\images ▪ Các tập tin CSS được lưu trữ trong thư mục riêng T:\MaSV_HoTen\Tuan06\css ▪ Các tập tin JavaScript được lưu trữ trong thư mục riêng T:\MaSV_HoTen\Tuan06\js ▪ Cuối mỗi buổi thực hành, SV phải nén [.rar hoặc .zip] thư mục làm bài và nộp lại bài tập đã thực hiện trong buổi đó. Tóm tắt lý thuyết Khai báo đoạn code JavaScript 1 Khai báo biến, gán giá trị 2 Toán tử 3 Cấu trúc điều khiển if/switch case. Cấu trúc lặp, break, continue 4 Định nghĩa hàm [function] trong JavaScript 5 Một số hàm thông dụng: a] Hàm alert[] - confirm[] - prompt[] trong JavaScript b] Hàm setTimeout[] dùng để thiết lập một khoảng thời gian nào đó sẽ thực hiện một nhiệm vụ nào đó và nó chỉ thực hiện đúng một lần. Xóa thời gian này sử dụng hàm clearTimeout[]. c] Hàm setInterval[] có cú pháp và chức năng giống như hàm setTimeout[], tuy nhiên với hàm setInterval[] thì số lần thực hiện là mãi mãi. Xóa lặp này sử dụng hàm clearInterval[]. 6 Đối tượng Date 7 Đối tượng Math Mô hình đối tượng trong tài liệu HTML [Document Objects Model – DOM] DOM là tên gọi tắt của [Document Object Model], là một chuẩn được định nghĩa bởi W3C dùng để truy xuất và thao tác trên các tài liệu có cấu trúc dạng HTML hay XML bằng các ngôn ngữ lập trình Script như Javascript, PHP, Python Trong HTML DOM, mọi thành phần đều được xem là 1 nút [node], được biểu diễn trên 1 cây cấu trúc dạng cây gọi là DOM Tree. Các phần tử khác nhau sẽ được phân loại nút khác nhau nhưng quan trọng nhất là 3 loại: nút gốc [document node], nút phần tử [element node], nút văn bản [text node]. o Nút gốc: chính là tài liệu HTML, thường được biểu diễn bởi tag .

o Nút phần tử: biểu diễn cho 1 phần tử HTML. o Nút văn bản: mỗi đoạn kí tự trong tài liệu HTML, bên trong 1 tag đều là 1

nút văn bản. o Ngoài ra còn có nút thuộc tính [attribute node] và nút chú thích [comment node]. Thuộc tính và phương thức thường gặp

Thuộc tính Ý nghĩa id Định danh [tên] – duy nhất cho mỗi phần tử nên thường được dùng để truy xuất DOM trực tiếp và nhanh chóng. className Tên lớp – Cũng dùng để truy xuất trực tiếp như id, nhưng 1 className có thể dùng cho nhiều phần tử. tagName Tên thẻ HTML. innerHTML Trả về mã HTML bên trong phần tử hiện tại. Đoạn mã HTML này là chuỗi kí tự chứa tất cả phần tử bên trong, bao gồm các nút phần tử và nút văn bản. outerHTML Trả về mã HTML của phần tử hiện tại. Nói cách khác, outerHTML = tagName + innerHTML. textContent Trả về 1 chuỗi kí tự chứa nội dung của tất cả nút văn bản bên trong phần tử hiện tại. attributes Tập các thuộc tính như id, name, class, href, title... style Tập các thiết lập định dạng của phần tử hiện tại. value Lấy giá trị của thành phần được chọn thành một biến. Phương thức Ý nghĩa getElementById[id] Tham chiếu đến 1 nút duy nhất có thuộc tính id giống với id cần tìm.

getElementsByTagNa me[tagname]

Tham chiếu đến tất cả các nút có thuộc tính tagName giống với tên thẻ cần tìm, hay hiểu đơn giản hơn là tìm tất cả các phần tử DOM mang thẻ HTML cùng loại. Nếu muốn truy xuất đến toàn bộ thẻ trong tài liệu HTML thì hãy sử dụng document[&

039;*&

039;]. getElementsByName[n ame]

Tham chiếu đến tất cả các nút có thuộc tính name cần tìm. getAttribute[attribute Name]

Lấy giá trị của thuộc tính.

setAttribute[attribute Name, value]

Sửa giá trị của thuộc tính.

appendChild[node] Thêm 1 nút con vào nút hiện tại. removeChild[node] Xóa 1 nút con khỏi nút hiện tại. Quan hệ giữa các node: Thuộc tính quan hệ Ý nghĩa parentNode Nút cha childNodes Các nút con firstChild Nút con đầu tiên lastChild Nút con cuối cùng nextSibling Nút anh em liền kề sau previousSibling Nút anh em liền kề trước Tìm các thành phần HTML.

▪ Tìm thành phần HTML theo id

▪ Tìm thành phần HTML theo tag name

Tìm thành phần HTML có id="main", sau đó tìm tất cả các thành phần

bên trong "main"

▪ Tìm thành phần HTML theo class name

▪ Tìm thành phần HTML theo CSS selectors

▪ Tìm thành phần HTML bởi tập hợp đối tượng HTML [object collections]

Bài 1. Hàm Prompt

Viết chương trình nhập thông tin mã số SV, Họ tên, Lớp sau đó xuất ra trang web như sau:

Bài 2. Tương tác trên Form

a]. Viết chương trình tạo trang Form đăng ký và đăng nhập

b]. Viết chương trình nhập 2 số sau đó thực hiện các phép toán Cộng, Trừ, Nhân, Chia, Chia lấy dư và hiển thị kết quả:

Kiểm tra giá trị nhập số 1, số 2 là số thì thực hiện kết quả của phép tính, nếu sai thì thông báo lỗi [*]

c]. Viết chương trình thực hiện thực thi các checkbox như sau:

d]. Viết chương trình thực hiện thực thi các checkbox như sau:

dangky dangnhap

Bài 3. Sử dụng Array thực hiện form đổi hình ngẫu nhiên

Viết chương trình cho phép người dùng khi chọn button Play Hình ảnh sẽ thay đổi trong các tập hình b1 đến b10. Khi chọn button Stop thì dừng thay đổi:

Gợi ý: - Javascript sử dụng Array - Hàm setTimeOut[], clearTimeOut[]

Tuần 7. Javascript – jQuery cơ bản [3 tiết]

Mục tiêu:

▪ Hiểu rõ ngôn ngữ lập trình JavaScript [kiểu dữ liệu, toán tử, biểu thức, cấu trúc điều khiển, vòng lặp, mảng ...] ▪ Hiểu rõ thư viện jquery, các thuộc tính các sự kiện trên các đối tượng trên trang HTML Yêu cầu:

▪ Tất cả các bài tập lưu trong thư mục: T:\MaSV_HoTen\Tuan07 ▪ Hình ảnh được lưu trữ trong thư mục riêng T:\MaSV_HoTen\Tuan07\images ▪ Các tập tin CSS được lưu trữ trong thư mục riêng T:\MaSV_HoTen\Tuan07\css ▪ Các tập tin JavaScript được lưu trữ trong thư mục riêng T:\MaSV_HoTen\Tuan07\js ▪ Cuối mỗi buổi thực hành, SV phải nén [.rar hoặc .zip] thư mục làm bài và nộp lại bài tập đã thực hiện trong buổi đó. Tóm tắt lý thuyết: sử dụng JavaScript Framework Libraries: jQuery Khai báo thư viện JavaScript Framework Libraries – jQuery

− Phiên bản hiện tại của jQuery [12/2018]: ▪ code.jquery/jquery-3.3.1.js ▪ code.jquery/jquery-3.3.1.min.js − jQuery Described  Hàm chính của jQuery là $[].  jQuery cho phép chọn các thành phần trong trang HTML dùng CSS selectors.

− Mức độ cao nhất trong jQuery là hàm $[] [có thể dùng jQuery[]].

Với jQuery, thực hiện các chức năng bằng các để các mã lệnh trong một hàm sau đó truyền vào [document].ready[ ... ]. Hoặc có thể dùng cách ngắn gọn $[function[] {}]

Bài 1. Tạo trang Gallery

Thực hiện trang Web thể hiện thư viện hình như sau, sử dụng thư viện jQuery, Boostrap Grid, Boostrap Galery, ...

Bài 2. Tạo trang form tương tác

Thiết kế trang Web như hình

Các thành phần trên form

− Mua va ̄o, Ba ̆n ra la ̄ trˆÙ ̄ng textbox − LoaÔi xe la ̄ Select list go‡m ca ̆c option với value tương ứng: Text Value Toyota ../images/car1; 35000 KIA ../images/car2;15000 Ford ../images/car3;40000 Civic ../images/car4;32000 Ferrari ../images/car5;50000 Mercedes ../images/car7;45000

− Ca‰p nha‰t cho: go‡m 2 radio la‡n lˆÙÔt co ̆ gia ̆ trÚ la ̄ 1, 0, maÎc ÒÚnh kho‚ng choÔn nu ̆t na ̄o. − Update, State la ̄ button. Ye‚u ca‡u xˆ ̊ ly ̆:

1. Khi trang load le‚n thÏ con tro ̊ nha‰p lie‰u trong trˆÙ ̄ng ‘Mua vaøo’ va ̄ nu ̆t State Ù ̊ che· Òo‰ kho‚ng cho phe ̆p choÔn.
2. Khi di chuyeÂn con tro ̊ ra kho ̊i trˆÙ ̄ng ‘Mua vaøo’ ne·u nhˆ gia ̆ trÚ trˆÙ ̄ng na ̄y la ̄ so· va ̄ kho‚ng ro„ng thÏ nu ̆t State sa ̆ng le‚n.
3. Khi Click va ̄o muÔc choÔn loại xe thÏ seı the hie‰n hÏnh va ̄ gia ̆ cu ̊a loaÔi Òo ̆ sang vu ̄ng be‚n pha ̊i. [ta ̆ch chuo„i]
4. Khi ba·m va ̄o nu ̆t Update va ̄ ne·u nu ̆t radio ‘Vaøng’ ÒˆÙÔc choÔn thÏ ca‰p dˆı lie‰u Ù ̊ ‘Baûng tin thò tröôøng’ trong muïc ‘Va ̄ng’ coøn ngöôïc laïi thì caäp nhaät ôû muïc ‘USD’ tˆÙng ˆ ̆ng vÙ ̆i trˆÙ ̄ng ‘Mua vaøo’ cu ̊a co‰t ‘Mua vaøo’ va ̄ trˆÙ ̄ng ‘Baùn ra’ cu ̊a co‰t ‘Baùn ra’ [Du ̄ng inner Òe ca‰p nha‰t].

Bài 3. Regular expression

Hãy thực hiện kiểm tra cho các text field của form đăng ký với yêu cầu như sau: − Các field có dấu * là bắt buộc nhập − Tên đăng nhập ít nhất là 6 ký tự − Điện thoại phải là số − Email phải đúng mẫu [dùng regular expression]

− Khi nhấn nút đăng ký, nếu nhập đúng dữ liệu sẽ chuyển sang trang thongtin ghi lại tất cả các thông tin đã đăng ký, nếu nhập sai thì sẽ đặt con trỏ lại ô đã nhập sai đầu tiên.

Tuần 8. Javascript – jQuery – Form – Modal- Styles [3 tiết]

Bài 1. Sử dụng thư viện Jquery và regular expression

a]. Thực hiện form Đăng ký như sau: − Tên đăng nhập: bắt đầu là ký tự, có hoặc không có ký tự số, ký tự đặc biệt và không được có khoảng trắng. − Mật khẩu: từ 8 ký tự trở lên, có ít nhất 1 ký tự số, 1 ký tự in hoa, 1 ký tự đặc biệt − Nhập lại mật khẩu phải giống Mật khẩu. − Họ tên: Phải có ít nhất Họ, Tên. Ký tự đầu bắt buộc phải viết hoa − Ngày tháng năm sinh phải trên 16 tuổi − Địa chỉ không được để trống − Điện thoại: là số điện thoại 10 ký tự số, bắt đầu là 09, 03, 07, 06, 05, 04 − Email: luôn đúng định dạng của địa chỉ email. − Các textbox nếu sai kiểu dữ liệu thì phải thông báo lỗi hợp lệ [*]

b]. Thiết kế form đăng ký tài khoản FaceBook, dùng JavaScript hoặc jquery kiểm tra dữ liệu nhập.

Yêu cầu kiểm tra

− Tất cả các thông tin là bắt buộc nhập − Họ và tên đều bắt đầu bằng ký tự chữ hoa − Email phải đúng định dạng − Nhập lại email phải trùng khớp với email đã nhập − Mật khẩu phải có ký tự chữ, số và ít nhất là 6 ký tự − Năm sinh phải