Giới thiệu khóa học

• Giới thiệu khóa học Xem video

Cài đặt

• Cài đặt editor và plugin javascript snippet Xem video

• Cài đặt template sử dụng trong khóa học Xem video

Chương trình đầu tiên và khái niệm cơ bản về javascript

• Khởi động với hàm đầu tiên trong javasript Xem video

• Khái niệm về biến trong javascript Xem video

Toán tử, định danh và câu lệnh so sánh trong javascript

• Toán tử và áp dụng trong viết hiệu ứng click Xem video

• Định danh trong javascript Xem video

• Câu lệnh so sánh trong javascript Xem video

Kiểu hay sử dụng nhất trong javascript – Mảng và đối tượng

• Mảng là gì – Tại sao phải dùng mảng Xem video

• 3 cách khai bảo mảng Xem video

• Kiểu dữ liệu đối tượng Xem video

• Thao tác với kiểu dữ liệu đối tượng Xem video

• Dấu nháy và các toán tử rút gọn Xem video

Xử lý text, xử lý số và sử dụng vòng lặp trong javascript

• Vòng lặp Xem video

• Vòng lặp for in Xem video

• Use Strict là gì Xem video

• Xử lý text trong javascript Xem video

• Xử lý số trong javascript Xem video

Hàm và các loại hàm sử dụng trong javascript

• Hàm là gì Xem video

• Thực hành với hàm có tham số và không có tham số Xem video

• Return là gì – hai tác dụng của return Xem video

• Clousure function hay sử dụng Xem video

• Thao tác với kiểu dữ liệu đối tượng – vì sao cần phải có constructor Xem video

• Khái niệm chuỗi thay thế và const Xem video

Javascript thay cho Jquery

• Giới thiệu một số hàm xử lý frontend trong javascript Xem video

• Giới thiệu phần học javascript thuần viết cho frontend Xem video

Sử dụng vòng lặp thao tác với thẻ HTML

• Cách truy xuất đến một phần tử và thay đổi giá trị của phần tử trong javascript Xem video

• Sử dụng vòng lặp thao tác với các thẻ HTML Xem video

Các hàm truy xuất phần tử dành cho Frontend

• Sử dụng ID trong javascript Xem video

• Sử dụng Class trong javascript Xem video

• Sử dụng hàm querySelector Xem video

• Hàm đa năng sử dụng nhiều nhất – querySelectorAll Xem video

Các hàm xử lý giao diện của javascript

• Ba hàm xử lý giao diện cực mạnh trong javascript Xem video

• Xử lý sự kiện trong javascript và khái niệm về document ready Xem video

Học viết hiệu ứng thực tế qua bài tập

• Bắt đầu viết hiệu ứng bằng javascript thuần dựa trên kiến thức đã học Xem video

• Phương pháp viết hiệu ứng javascript với Animation Xem video

Phương pháp viết hiệu ứng hai chiều với Animation

• Viết hiệu ứng 2 chiều nâng cao với javascript Xem video

• Áp dụng javascript vào animation 2 chiều Xem video

Viết hiệu ứng tương tác notification của facebook

• Viết lại các hiệu ứng tương tác của facebook bằng javascript – Phần HTML Xem video

• Hiệu ứng tương tác facebook – Phần CSS Xem video

• Viết hiệu ứng javascript như facebook – Phần 1 Xem video

• Viết hiệu ứng javascript như facebook – Phần 2 Xem video

Phương pháp viết hiệu ứng tổng quát thông qua truyền tham số bằng HTML5

• Phương pháp viết hiệu ứng tổng quát hóa trong truyền dữ liệu của javascript Xem video

• Truyền tham số giữa HTML và Javascript thế nào Xem video

• Học cách viết javascript cho frontend dạng tổng quát Xem video

Viết hiệu ứng tổng quát cho Facebook bằng phương pháp truyền tham số

• Áp dụng phương pháp tham số HTML qua thực hành hiệu ứng Facebook – Phần HTML Xem video

• Tạo CSS cho phần giao diện hiệu ứng Xem video

• Xử lý hiệu ứng cho Icon bằng javascript Xem video

• Hoàn thiện phần gửi nhận thông tin qua HTML bằng javascript Xem video

Tóm tắt phần kiến thức cơ bản javascript

• Xử lý if else đối với hiệu ứng click Xem video

• Tổng kết kiến thức javascript học được Xem video

Viết hiệu ứng tương tác menu – phần HTML-CSS

• Tống kết kiến thức đã học và giới thiệu phần bài tập xử lý menu Xem video

• Phần HTML cho hiệu ứng Menu bằng javascript Xem video

• Phần CSS cho giao diện menu Xem video

Viết hiệu ứng tương tác menu – phần Javascript

• Phần javascript cho hiệu ứng Xem video

• Phần javascript hoàn thiện và cách sử dụng biểu đồ tốc độ Xem video

• Hướng dẫn cách xử lý các hiệu ứng còn lại Xem video

Các hàm cần thiết để thao tác với hiệu ứng Scroll

• Bắt sự kiện và tính vị trí Xem video

• Bài tập đầu tiên với hàm scroll Xem video

Xử lý phần giao diện và tương tác cho hiệu ứng Scroll đầu tiên

• Xử lý phần giao diện Xem video

• Xử lý phần javascript Xem video

• Hoàn thiện hiệu ứng scroll sử dụng javascript Xem video

Viết hàm tương tác Scroll qua bài tập thực tế trên facebook – kenh14

• Thực hành viết hàm scroll qua bài tập thực tế Xem video

• Viết hàm javascript xử lý phần Menu Scroll Xem video

• Viết javascript tương tác cho cột bên phải Xem video

• Tổng kết các hàm javascript xử lý cho tương tác scroll Xem video

Viết hiệu ứng load bằng Javascript

• Viết hiệu ứng load bằng javascript Xem video

Khởi động Project viết hiệu ứng Slide bằng javascript

• Viết hiệu ứng Slide bằng javascript Xem video

• Khởi động project Slide bằng javascript Xem video

Phương thức xử lý phần chuyển Slide bằng javascript

• Xử lý CSS phần chuyển slide Xem video

• Viết javascript cho phần chuyển slide Xem video

Cách xử lý giao diện luôn luôn Full màn hình

• Xử lý phần bố cục HTML cho nội dung slide Xem video

• Cách xử lý giao diện lúc nào cũng full màn hình Xem video

Dựng bố cục và nội dung cho Slide

• Dựng bố cục cơ bản cho Slide bằng relative và absolute Xem video

• Xử lý chi tiết giao diện của Slide và hoàn thiện giao diện Xem video

Logic của việc tạo hiệu ứng chuyển động trong Slide

• Tính vị trí của đối tượng bằng Javascript Xem video

• Viết hiệu ứng Slide chuyển động tương ứng khi click vào nút Xem video

• Logic của việc tạo hiệu ứng chuyển động bằng CSS3 kết hợp với javascript Xem video

Hoàn thiện hiệu ứng

• Viết hoàn chỉnh hiệu ứng chuyển động của toàn bộ slide – Phần 1 Xem video

• Viết hoàn chỉnh hiệu ứng chuyển động của toàn bộ slide – Phần 2 Xem video

Viết hàm Auto Slide

• Lý thuyết về auto slide Xem video

• Tính xem đang ở Slide nào Xem video

• Viết hàm tự chuyển động Xem video

• Hoàn thiện hiệu ứng Javascript auto slide Xem video

• Ý nghĩa của hàm clearInterval Xem video

Khởi động projec thứ 2 viết hiệu ứng slide nâng cao

• Giới thiệu phần hướng dẫn viết hiệu ứng nâng cao Xem video

• Khởi động project với HTML Xem video

Hoàn thiện phần giao diện

• Xử lý giao diện Project trực tiếp bằng Chrome Dev Tool Xem video

• Hoàn thiện giao diện chuẩn bị cho viết tương tác bằng Javascript Xem video

Logic của hàm javascript

• Phân tích logic của chương trình Xem video

• Cách xác định phần tử hiện tại và phần tử tiếp theo khi ấn nút Next Xem video

Viết chuyển động bằng Javascript và CSS3

• Thêm chuyển động bằng Javascript Xem video

• Viết CSS3 cho chuyển động đầu tiên Xem video

Giới thiệu hàm Javascript check trạng thái của chuyển động

• Phân tích luồng hoạt động tiếp theo của hiệu ứng tương tác Xem video

• Giới thiệu hàm Javascript check trạng thái của chuyển động Xem video

Hoàn thiện hàm xử lý nút next của hiệu ứng

• Check chuyển động slide kết thúc Xem video

• Hoàn thiện hiệu ứng tương tác cho nút next trong slide Xem video

Xử lý lỗi click liên tiếp nhiều lần

• Xử lý lỗi khi click liên tiếp nhiều lần Xem video

• Xử lý chi tiết biến ‘trạng thái’ trong chương trình Xem video

Hoàn thiện hàm xử lý nút previous của hiệu ứng

• Viết hàm Javascript xử lý cho nút Previous Xem video

• Tạo chuyển động sử dụng Javascript Xem video

• Tạo chuyển động sử dụng CSS Xem video

• Hoàn thiện logic cho nút Previous Xem video

Phương pháp đóng gói code trong javascript

• Sử dụng kiến thức về Function và tham số để đóng gói code Xem video

• Viết Javascript chi tiết cho việc đóng gói Code Xem video

Sử dụng thành thạo toán tử 3 ngôi qua việc đóng gói code

• Sử dụng toán tử ba ngôi viết 1 dòng bằng 6 dòng Xem video

• Áp dụng toán tử 3 ngôi trong việc đóng gói code – Phần 1 Xem video

• Áp dụng toán tử 3 ngôi trong việc đóng gói code – Phần 2 Xem video

• Áp dụng toán tử 3 ngôi trong việc đóng gói code – Phần 3 Xem video

Thiết kế hiệu ứng số 2 và số 3

• Chữa bài tập số 2 về thiết kế hiệu ứng hiển thị trên Slide Xem video

• Chữa bài tập số 3 về thiết kế hiệu ứng hiển thị trên Slide Xem video