22 - Học tất tần tật về Javascrip từ đầu

GIỚI THIỆU KHÓA HỌC

JavaScript là gì?

JavaScript là một ngôn ngữ lập trình đa nền tảng (cross-platform), ngôn ngữ lập trình kịch bản, hướng đối tượng. JavaScript là một ngôn ngữ nhỏ và nhẹ (small and lightweight). Khi nằm bên trong một môi trường (host environment), JavaScript có thể kết nối tới các Object của môi trường đó và cung cấp các cách quản lý chúng (Object).

JavaScript chứa các thư viện tiêu chuẩn cho các Object, ví dụ như:  Mảng, Ngày, và Hàm toán học,mà điều này bạn không thể sử dụng HTML để lập trình và các yếu tố cốt lõi của ngôn ngữ lập trình như: toán tử (operators), cấu trúc điều khiển (control structures), và câu lệnh. JavaScript có thể được mở rộng cho nhiều mục đích bằng việc bổ sung thêm các Object; ví dụ:

• Client-side JavaScript – JavaScript phía máy khách, JavaScript được mở rộng bằng cách cung cấp các Object để quản lý trình duyệt và Document Object Model (DOM)  của nó. Ví dụ, phần mở rộng phía máy khách cho phép một ứng dụng tác động tới các yếu tố trên một trang HTML và phản hồi giống các tác động của người dùng như click chuột, nhập form, và chuyển trang.
• Server-side JavaScript – JavaScript phía Server, JavaScript được mở rộng bằng cách cung cấp thêm các đối tượng cần thiết để để chạy JavaScript trên máy chủ. Ví dụ, phần mở rộng phía server này cho phép ứng dụng kết nối với cơ sở dữ liệu (database), cung cấp thông tin một cách liên tục từ một yêu cầu tới phần khác của ứng dụng, hoặc thực hiện thao tác với các tập tin trên máy chủ.

THƯ VIỆN HỌC TẬP.

• Hiện nay chúng tôi đã cung cấp sẵn các thư viện, tài liệu học tập về Javascript tại link này, Tại đây cung cấp một cái nhìn tổng quát đến chi tiết về ngôn ngữ JavaScript và các đối tượng của nó

HỌC JAVASCRIPT bắt đầu như thế nào?

Khóa học lập trình JavaScript từ con số 0 tại Fedu do giảng viên Nguyễn Đức Việt: Giúp bạn bắt đầu kiến thức lập trình Javascript bài bản nhất từ số 0 – Ngoài các kiến thức từ trang thư viện chúng tôi đã biên dịch từ nguồn tài liệu chuẩn. Đến với khóa học này, bạn sẽ được thực hành qua các bài tập thực tế tại các website hàng đầu như kenh14.vn, facebook.com, Bạn có thể tham khảo thêm nội dung bài học chi tiết phần TAB nội dung bài học để nắm được khóa học chúng tôi sẽ dạy

ĐIỂM NỔI BẬT CỦA KHÓA HỌC NÀY SO VỚI KHÓA HỌC KHÁC LÀ GÌ?

Như các bạn biết, Javascript là nền tảng rất rộng để có thể cùng một lúc nắm được hết khía cạnh của nó, nếu các bạn đi học offline tại các trung tâm khác phần module này sẽ khiến bạn mất ít nhất 1 – 2 tháng mới có thể hoàn thành khóa học, Nhưng với khóa học lập trình Javascript tại FEDU – do giảng viên Nguyễn Đức Việt ( người có 12 năm kinh nghiệm giảng dạy lập trình web) – đã tổng hợp lại kiến thức trong quá trình làm việc, và các giáo trình chuẩn quốc tế từ các nước như Mỹ, Úc, Ấn Độ bạn sẽ nắm rõ Javascript trong lòng bàn tay chỉ trong vòng 2-3 tuần học.

Với rất nhiều bài tập thực hành thực tế, chi tiết các hiệu ứng từ các website nổi tiếng như kenh14, facebook để lập trình các chức năng tương tác với frontendví dụ : giỏ hàng, các tính năng view ảnh, notification trên facebook.

TẠI SAO PHẢI LÀ JAVASCRIPT?

• Như các bạn đã biết từ sau khi Flash bị khai tử, Javascript đã trở thành ngôn ngữ lập trình lên ngôi (nhờ khả năng biến hóa linh hoạt, mềm dẻo của nó) -nó xử lý cực mạnh các hiệu ứng web chuyển động vì vậy đến với khóa học tại Fedu học viên có thể viết được các thư viện javascript cho website thay cho các thư viện có sẵn là jquery đang sử dụng.
• Nhờ Javascript – sau này sẽ giúp lập trình viên sử dụng để ứng dụng cho lập trình back-end với các ngôn ngữ đang lên rất mạnh là React JS, NodeJS.
• Tham khảo thêm lợi ích sau khóa học tại TAB lợi ích khóa học.

ĐỐI TƯỢNG CỦA KHÓA HỌC

• Học viên yêu thích về lập trình.
• Học viên muốn tìm hiểu về ngôn ngữ lập trình javascript/typescript từ đầu theo một cách bài bản nhất.
• Học viên muốn tạo ra các ứng dụng web hoàn trình bằng javascript làm chủ các kỹ năng lập trình trong javascript như Type Script, Es6.

YÊU CẦU KHÓA HỌC

• Học viên nên cần nắm qua khóa học lập trình front-end cơ bản, hoặc nắm qua các ngôn ngữ kịch bản HTML/CSS để làm nắm được khóa học tốt nhất

NỘI DUNG KHÓA HỌC

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

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

02 - Cài đặt

  002 - Cài đặt editor và plugin javascript snippet 

  003 - Cài đặt template sử dụng trong khóa học 

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

  004 - Khởi động với hàm đầu tiên trong javasript 

  005 - Khái niệm về biến trong javascript 

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

  006 - Toán tử và áp dụng trong viết hiệu ứng click 

   007 - Định danh trong javascript 

  008 - Câu lệnh so sánh trong javascript 

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

  009 - Mảng là gì - Tại sao phải dùng mảng 

  010 - 3 cách khai bảo mảng

  011 - Kiểu dữ liệu đối tượng 

  012 - Thao tác với kiểu dữ liệu đối tượng 

  013 - Dấu nháy và các toán tử rút gọn

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

  014 - Vòng lặp 

  015 - Vòng lặp for in 

  016 - Use Strict là gì 

  017 - Xử lý text trong javascript 

  018 - Xử lý số trong javascript 

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

   019 - Hàm là gì 

  020 - Thực hành với hàm có tham số và không có tham số 

  021 - Return là gì - hai tác dụng của return 

  022 - Clousure function hay sử dụng 

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

  023.2 - Khái niệm const 

  023.3 - Khái niệm chuỗi thay thế trong javascript 

08 - Javascript thay cho Jquery

  023.4 - Giới thiệu 4 hàm mới sử dụng trong vẽ giao diện frontend bằng javascript 

  023.5 - Tạo dữ liệu demo và duyệt mảng phức hợp 

  023.6 - Hoàn thiện ví dụ demo bằng cách sử dụng Template String trong javascript 

  024 - Giới thiệu phần học javascript thuần viết cho frontend

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

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

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

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

  027 - Sử dụng ID trong javascript 

  028 - Sử dụng Class trong javascript 

  029 - Sử dụng hàm querySelector 

  030 - Hàm đa năng sử dụng nhiều nhất - querySelectorAll 

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

  031 - Ba hàm xử lý giao diện cực mạnh trong javascript 

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

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

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

  034 - Phương pháp viết hiệu ứng javascript với Animation 

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

  035 - Viết hiệu ứng 2 chiều nâng cao với javascript

  036 - Áp dụng javascript vào animation 2 chiều 

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

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

  038 - Hiệu ứng tương tác facebook - Phần CSS

  039 - Viết hiệu ứng javascript như facebook - Phần 1 

  040 - Viết hiệu ứng javascript như facebook - Phần 2 

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

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

  042 - Truyền tham số giữa HTML và Javascript thế nào 

   043 - Học cách viết javascript cho frontend dạng tổng quát

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

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

  045 - Tạo CSS cho phần giao diện hiệu ứng 

  046 - Xử lý hiệu ứng cho Icon bằng javascript 

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

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

  048 - Xử lý if else đối với hiệu ứng click 

  049 - Tổng kết kiến thức javascript học được 

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

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

  051 - Phần HTML cho hiệu ứng Menu bằng javascript 

   052 - Phần CSS cho giao diện menu 

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

  053 - Phần javascript cho hiệu ứng 

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

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

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

  057 - Bắt sự kiện và tính vị trí 

  058 - Bài tập đầu tiên với hàm scroll 

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

  059 - Xử lý phần giao diện 

  060 - Xử lý phần javascript 

  061 - Hoàn thiện hiệu ứng scroll sử dụng javascript 

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

  062 - Thực hành viết hàm scroll qua bài tập thực tế 

  063 - Viết hàm javascript xử lý phần Menu Scroll 

  064 - Viết javascript tương tác cho cột bên phải 

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

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

  066 - Viết hiệu ứng load bằng javascript 

23.2 - 'Đổ bê tông' kiến thức qua bài tập thực hành Javascript

  140 - CSS3 tóm tắt các thuộc tính cơ bản 

  140 - CSS3 tóm tắt các thuộc tính cơ bản 

  141 - Áp dụng thuộc tính tâm quay kết hợp với javascript 

  142 - Áp dụng hiệu ứng CSS3 sử dụng thuộc tính tâm quay 

  143 - Sử dụng After Before kết hợp với Scale 

  144 - Sử dụng thuộc tính Transform Style và Perspective cho hiệu ứng 3D 

  145 - Thực hành thuộc tính CSS 3D qua bài tập đặc trưng tạo hình lập phương bằng 6 div 

  146 - Thực hành làm hiệu ứng Youtube bằng Javascript - Phần 1 khởi động 

  147 - Thực hành làm hiệu ứng Youtube bằng Javascript - Phần 2 xử lý Javascript 

  148 - Thực hành Javascript qua bài tập làm tương tác trên Lazada.vn 

  149 - Tạo hiệu ứng Logo cho website Lazada.vn 

  150 - Xử lý phần cuộn chuột cho website Lazada.vn 

  151 - Hoàn thiện phần hiệu ứng logo cho website Lazada.vn 

  152 - Xử lý phần hiệu ứng cuộn chuột thay đổi menu cho Lazada 

  153 - Xử lý hiệu ứng tương tác cho nút 'Tất cả danh mục'

  154 - Xử lý phần logic của việc click vào nút 'Tất cả danh mục' 

   155 - Hoàn thiện phần tương tác menu của Lazada 

  156 - Khởi động hiệu ứng Content Slider với phần HTML 

  157 - Xử lý giao diện Content Slider với CSS 

  158 - Logic và thao tác với phần nút điều hướng Content Slider 

  159 - Phần Javascript tương tác với nội dung 

  160 - Hoàn thiện hiệu ứng Content Slider 

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

  067 - Viết hiệu ứng Slide bằng javascript 

   068 - Khởi động project Slide bằng javascript

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

  069 - Xử lý CSS phần chuyển slide

  070 - Viết javascript cho phần chuyển slide 

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

  071 - Xử lý phần bố cục HTML cho nội dung slide 

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

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

  073 - Dựng bố cục cơ bản cho Slide bằng relative và absolute 

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

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

  075 - Tính vị trí của đối tượng bằng Javascript 

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

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

29 - Hoàn thiện hiệu ứng

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

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

30 - Viết hàm Auto Slide

  080 - Lý thuyết về auto slide 

  081 - Tính xem đang ở Slide nào 

  082 - Viết hàm tự chuyển động

  083 - Hoàn thiện hiệu ứng Javascript auto slide 

  084 - Ý nghĩa của hàm clearInterval

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

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

  086 - Khởi động project với HTML

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

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

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

33 - Logic của hàm javascript

  089 - Phân tích logic của chương trình 

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

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

  091 - Thêm chuyển động bằng Javascript 

  092 - Viết CSS3 cho chuyển động đầu tiên 

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

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

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

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

  095 - Check chuyển động slide kết thúc 

  096 - Hoàn thiện hiệu ứng tương tác cho nút next trong slide 

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

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

  098 - Xử lý chi tiết biến 'trạng thái' trong chương trình 

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

  099 - Viết hàm Javascript xử lý cho nút Previous 

  100 - Tạo chuyển động sử dụng Javascript

  101 - Tạo chuyển động sử dụng CSS 

  102 - Hoàn thiện logic cho nút Previous 

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

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

  104 - Viết Javascript chi tiết cho việc đóng gói Code 

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

  105 - Sử dụng toán tử ba ngôi viết 1 dòng bằng 6 dòng 

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

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

  108 - Áp dụng toán tử 3 ngôi trong việc đóng gói code - Phần 3 

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

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

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

42 - Phản xạ về cách viết hiệu ứng CSS3 qua 6 bài tập

  111 - Ứng dụng 4 về xử lý hiệu ứng 

  112 - Bài tập 5 về hiệu ứng javascript

  113 - Bài tập 6 về hiệu ứng javascript 

  114 - Bài tập 7 về hiệu ứng javascript 

  115 - Bài tập 8 về hiệu ứng javascript 

  116 - Bài tập 9 về hiệu ứng javascript 

43 - Khởi động project viết hiệu ứng tương tác ảnh của Facebook bằng Javascript

  117 - Viết chức năng tương tác ảnh của facebook bằng javascript native 

  118 - Dựng HTML cho project viết tương tác ảnh trên facebook 

44 - Hoàn thiện phần setup HTML - CSS

   119 - Hoàn chỉnh HTML nội dung cho tương tác ảnh trên facebook 

  120 - Phần CSS cho nội dung 

   121 - Hoàn thiện giao diện HTML - CSS 

45 - Viết Javascript cho chức năng ban đầu của chương trình

  122 - Xử lý logic ban đầu cho chương trình 

  123 - Xử lý javascript cho khối nền 

  124 - Viết Javascript cho chức năng đóng cửa sổ

  125 - Xử lý phần nội dung hiển thị ra 

46 - Lại xử lý tiếp CSS

  126 - Xử lý phần CSS cho khối thông tin ảnh facebook 

  127 - Xử lý hiển thị khối thông tin bằng javascript 

47 - Bắt đầu Code phần ảnh

  128 - Bắt đầu làm phần ảnh 

  129 - Xử lý phần CSS cho khối các ảnh 

  130 - Căn giữa một phần tử theo chiều dọc thế nào 

48 - Lại xử lý tiếp Javascript

  131 - Logic code của phần gallery ảnh 

  132 - Sử dụng Javascript nhận biết ảnh Active 

  133 - Cách xử lý code sau khi active và bí mật của nút X 

49 - Logic thực hiện hiệu ứng chuyển ảnh của Facebook

  134 - Logic thực hiện việc chuyển ảnh của Facebook 

   135 - Xác định chỉ số phần tử hiện tại bằng Javascript 

   136 - Xác định chỉ số phần tử tiếp theo bằng Javascript 

50 - Hoàn thiện hiệu ứng ảnh Facebook

  137 - Xử lý hoàn thiện logic cho nút Next facebook 

  138 - Xử lý nút Prev Facebook 

51 - Bài tập nâng cao cho phần tương tác ảnh Facebook

  139 - Bài tập làm hoàn chỉnh hiệu ứng ảnh facebook 

LỢI ÍCH KHÓA HỌC

SAU KHOÁ HỌC HỌC VIÊN ĐƯỢC CUNG CẤP ĐẦY ĐỦ KIẾN THỨC:

• Học viên được cung cấp kiến thức từ cơ bản – nâng cao về Javascript.
• Được thực hành và làm theo các bài tập thực tế để nắm được cấu trúc các hàm, biến, câu lệnh của Javascript.
• Nắm và hiểu rõ các hiển thị, thêm, sửa xóa edit các dòng code Javascript với các công cụ trong lập trình hiện đại hiện nay như Chrome tool, Bootstrap.
• Kết hợp các bài thực hành thực tế từ những website hàng đầu như facebook, google học viên sẽ nắm được toàn bộ Javascript. Học xong học viên có thể viết các thư viện Javascript thay thế cho Jquery, tự viết các hiệu ứng hoàn chỉnh cho website từ đầu.
• Học xong khóa này, học viên sẽ có thể áp dụng được kiến thức để hoàn thiện các website front-end với giao diện chức năng đẹp đẽ theo mọi cách để giúp học viên có thể