Lý thuyết cốt lõi và ví dụ thực hành Javascript & jQuery dành cho Web Publisher (Giáo trình, bản hoàn thiện)
Giáo trình lý thuyết cốt lõi và ví dụ thực hành JS dành cho Web Publisher là tài liệu giảng dạy được biên soạn dưới dạng PDF. Giáo trình này đóng vai trò giúp các Web Publisher nắm vững các kiến thức cơ bản về JavaScript và jQuery mà họ nhất thiết phải biết. Đặc điểm của giáo trình này là giúp củng cố lý thuyết vững chắc hơn thông qua các nhiệm vụ nhỏ (Small Mission) được liên kết trực tiếp với lý thuyết. Đặc biệt, đây là bộ giáo trình được chuẩn bị kỹ lưỡng với các ví dụ thực hành vận dụng tất cả các lý thuyết đã học. Toàn bộ tài liệu PDF này bao gồm hơn 320 trang về JavaScript thuần (Vanilla JavaScript) và jQuery, được Coding Works bổ sung giải thích chi tiết để người học có thể dễ dàng thấu hiểu.
Đặc biệt, bạn có thể học các ví dụ thực hành tương tác jQuery thiết yếu để Web Publisher xây dựng trang web.
Nó đã giúp tôi rất nhiều trong quá trình thực hiện dự án cuối cùng của mình.
Cảm ơn bạn rất nhiều.
5.0
한우진
80% đã tham gia
Nó chứa lý thuyết và nhiều ví dụ thực tế, vì vậy tôi nghĩ bạn sẽ có thể cải thiện kỹ năng của mình một cách nhanh chóng bằng cách làm theo! Đó là một cuốn sách điện tử chứ không phải là một bài giảng trực tuyến nên rất dễ dàng để kiểm tra bất cứ lúc nào và thật tuyệt khi không có thời gian giảng cố định nên tôi có thể học theo tốc độ của riêng mình. Tôi sẽ học chăm chỉ!
Bạn sẽ nhận được điều này sau khi học.
Lý thuyết JavaScript thiết yếu và ví dụ ứng dụng thực tế
Lý thuyết thiết yếu và ví dụ ứng dụng thực tế jQuery
Bản hoàn thiện Javascript & jQuery HTML+CSS+JS
<Giáo trình lý thuyết cốt lõi và ví dụ thực hành JS dành cho Web Publisher & Bản hoàn thiện>
Tài liệu cốt lõi về JS cơ bản được Coding Works biên soạn tỉ mỉ, với những giải thích và nhiệm vụ nhỏ (small mission) dành riêng cho các nhà thiết kế web, web publisher và nhà phát triển web, cùng với những ví dụ thực tế thú vị và bám sát thực tiễn cần thiết cho công việc, giúp bạn trở nên tự tin với JavaScript và jQuery!!
Đặc biệt, bạn có thể học các ví dụ thực hành tương tác jQuery cần thiết để một người làm publisher có thể xây dựng trang web.
'Giúp việc học JS vốn nặng nề đối với nhà thiết kế web và người làm web publisher trở nên dễ hiểu hơn!'
Đây là giáo trình PDF tự biên soạn về lý thuyết cốt lõi và ví dụ thực tiễn JS, được Coding Works dành hết tâm huyết để tạo ra. Khác với những cuốn sách thông thường, giáo trình này chứa đựng những giải thích đầy đủ giúp các nhà thiết kế web và những người đang chuẩn bị xin việc làm publisher vốn cảm thấy áp lực với JavaScript và jQuery có thể dễ dàng hiểu được những nội dung thực sự cần thiết. Trong quá trình biên soạn giáo trình này, tôi đã làm việc chăm chỉ và luôn suy nghĩ rằng 'Làm thế nào để giải thích điều này giúp học viên dễ hiểu hơn nữa đây..' .
'Học lý thuyết theo từng bước và thực hiện ngay nhiệm vụ nhỏ áp dụng lý thuyết đó!'
Các giáo trình JavaScript và jQuery hiện nay thường giải thích quá dàn trải cả những nội dung chưa cần thiết ngay lập tức, nhưng lại thiếu sự phân loại và giải thích về các nội dung cốt lõi. Đứng từ lập trường của người đọc, thật khó để biết nên tập trung học cái gì và học như thế nào. Đặc biệt, các ví dụ thực tế cho phần lý thuyết còn khá sơ sài. Dù có ví dụ nhưng nhiều trường hợp khó có thể coi đó là ví dụ thực tế. Tuy nhiên, cuốn <Giáo trình Lý thuyết cốt lõi và Ví dụ thực tế JS dành cho Web Publisher & Bản hoàn thiện> do Coding Works biên soạn đã hệ thống lại rất tốt chỉ những nội dung trọng tâm có thể áp dụng ngay trong công việc thực tế. Và nó được cấu trúc sao cho khi bạn học một lý thuyết mới, bạn nhất định phải thực hiện một ví dụ vận dụng lý thuyết đó, tức là một Nhiệm vụ nhỏ (Small Mission).
'Đã từng thắc mắc cái này dùng để làm gì.. À~ Hóa ra lý thuyết đã học được sử dụng vào những lúc như thế này!'
Sử dụng tất cả các lý thuyết đã học để tạo ra các ví dụ thực tế. Khi học lý thuyết, bạn có thể tự hỏi "Cái này dùng để làm gì?", nhưng thông qua việc thực hiện nhiều nhiệm vụ nhỏ (small mission) và ví dụ thực tế ở phần cuối, bạn sẽ nhận ra rằng "À, thì ra lý thuyết đã học được sử dụng vào những lúc như thế này!". Bằng cách này, bạn có thể ghi nhớ lý thuyết một cách vững chắc hơn. Đặc biệt, việc tạo ra các ví dụ thực tế sẽ giúp bạn thấy rằng JavaScript và jQuery không chỉ là những thứ khó khăn và áp lực dành cho các nhà phát triển, mà còn là động lực để bạn có thể học JavaScript và jQuery một cách thú vị hơn trong tương lai.
'Tài liệu giáo trình PDF nên thật tuyệt vì có thể xem mọi lúc mọi nơi, và các tệp thành phẩm cũng giúp ích rất nhiều!'
Trước đây, để học về xuất bản web hoặc lập trình, mọi người thường mua sách tại các hiệu sách. Tôi cũng từng như vậy. Tuy nhiên, sách giấy luôn cần phải mang theo bên mình để xem khi cần, nhưng chúng lại nặng nề và hầu hết mọi người thường để chúng ở nhà. Vì vậy, sách điện tử (e-book) sẽ tốt hơn vì bạn có thể xem ngay lập tức bất cứ khi nào và ở bất cứ đâu nếu có thắc mắc.
Nói ngoài lề một chút... thói quen học lập trình web và publishing mà không có giáo trình thì không phải là một thói quen tốt cho lắm. Mặc dù bạn có thể tiếp nhận kiến thức từ nhiều người thông qua việc tìm kiếm trên YouTube hay blog, nhưng cuối cùng những kiến thức đó thường trở nên vụn vặt đối với bản thân. Dù là sách in hay sách điện tử, dưới bất kỳ hình thức nào, bạn nhất định phải có sách tham khảo để cải thiện kỹ năng của mình.
Tất cả các nhiệm vụ nhỏ (small mission) và tệp ví dụ thực tế được giải thích trong giáo trình đều có thể được tải xuống dưới dạng tệp HTML+CSS+JS. Vì vậy, trước khi lập trình các nội dung trong giáo trình, bạn có thể mở tệp để xem trước và luyện tập thông qua giáo trình, đồng thời có thể kiểm tra những phần còn thiếu sót thông qua tệp hoàn chỉnh.
📖 PDF Nội dung giáo trình (Javascript, 212 trang)
01. Cú pháp cơ bản của JavaScript
Liên kết ngôn ngữ JavaScript
Thêm chú thích
Xuất dữ liệu
Kiểu dữ liệu
Các toán tử số học và toán tử so sánh
02. Biến trong JavaScript
Khai báo biến, gán giá trị, khởi tạo và xuất ra trình duyệt
Quy tắc đặt tên biến
Các loại dữ liệu được lưu trữ trong biến
Khai báo lại biến
Lý do sử dụng biến
Tạo chương trình sử dụng biến và hàm (Tính trung bình cộng)
ES2015 Dấu phẩy ngược (`) và Chuỗi mẫu (Template String)
03. Câu lệnh điều kiện JavaScript if, switch
Cấu trúc điều kiện if else cơ bản
Câu điều kiện if đa nhánh
Toán tử logic
Câu lệnh điều kiện if lồng nhau
Câu lệnh switch
Toán tử ba ngôi
Xử lý điều kiện bằng cách sử dụng if và '?'
04. Vòng lặp trong JavaScript - vòng lặp while, vòng lặp do while, vòng lặp for
Toán tử gán phức hợp
Toán tử tăng giảm
vòng lặp while
vòng lặp do while
vòng lặp for
Vòng lặp for lồng nhau
05. Mảng trong JavaScript và vòng lặp for in
Mảng (Array)
Mảng và vòng lặp for
vòng lặp for in
Từ khóa break
Từ khóa continue
06. Hàm (function) trong JavaScript
Khai báo và gọi hàm
Tham số và từ khóa return
Khai báo hàm kiểu biến số
Hàm có sẵn
Hàm thực thi ngay lập tức
Biểu thức hàm, hàm mũi tên
07. Đối tượng JavaScript và Hàm khởi tạo
Các loại đối tượng
Khai báo và gọi đối tượng
So sánh khái niệm biến, mảng và đối tượng
từ khóa this
Hàm khởi tạo và Nguyên mẫu (Prototype)
08. Các đối tượng tích hợp sẵn cơ bản trong JavaScript
String chuỗi ký tự
Number số & Math toán học
Thuộc tính và phương thức của mảng Array
Date Ngày tháng
Các phương thức Getter và Setter của đối tượng Date
09. BOM(Browser Object Model) : Đối tượng trình duyệt
BOM(Browser Object Model)
Thuộc tính và phương thức của đối tượng window
10. DOM(Document Object Model) : Đối tượng tài liệu
Đối tượng tài liệu DOM là gì?
Các phương thức lấy đối tượng tài liệu DOM
Phương thức cú pháp chuẩn bị đối tượng tài liệu DOM (onload)
Các thuộc tính và phương thức của đối tượng tài liệu
Các thuộc tính và phương thức của đối tượng sự kiện
Thuộc tính và phương thức của đối tượng sự kiện chuột & bàn phím
11. HTML DOM Node
HTML DOM Node là gì?
Điều hướng giữa các HTML DOM Node
12. JavaScript - Thuộc tính đối tượng tài liệu
Đối tượng tài liệu - Form (Biểu mẫu)
Đối tượng tài liệu - Thuộc tính class
Đối tượng tài liệu - Thuộc tính vùng (Area)
Đối tượng tài liệu - thuộc tính dataset
13. Ví dụ thực hành JavaScript
Di chuyển mượt mà bằng cách nhấp chuột
Làm đồng hồ kỹ thuật số (Cách 1)
Làm đồng hồ kỹ thuật số (Cách 2)
Mở cửa sổ Modal (1)
Hiển thị Modal (2)
Tạo đồng hồ bấm giờ (StopWatch) (Phút:Giây:Mili giây)
Tạo đồng hồ bấm giờ (StopWatch) (Giờ:Phút:Giây)
Tạo trò chơi Kéo Búa Bao (Rock Paper Scissors)
Tạo máy tính với Grid (phương thức Inline JavaScript)
Tạo máy tính với Grid (phương thức gọi tham số hàm)
📖 PDF Nội dung giáo trình (jQuery, trang 112)
01. Kết nối jQuery và cú pháp cơ bản
Kết nối jQuery - Phương thức liên kết sau khi tải về
Kết nối jQuery - Phương thức liên kết CDN
Cú pháp cơ bản của jQuery - Vị trí viết script/Chú thích
02. Các phương thức jQuery thiết yếu Phần 1
Phương thức thay đổi phong cách CSS
Phương thức tìm kiếm phần tử
Tạo hàm (function) sự kiện chuột & Biến (variables) jQuery
Phương thức thêm và xóa class
Các phương thức hiệu ứng (Effect methods)
Các phương thức liên quan đến văn bản
Các phương thức liên quan đến thuộc tính
Chèn/Xóa phần tử HTML một cách động
Các phương thức liên quan đến width, height
Các phương thức liên quan đến vị trí
Phương thức vị trí cuộn của phần tử
Các phương thức liên quan đến sao chép và bao quanh (wrap)
Các loại sự kiện (sự kiện chuột, sự kiện bàn phím, sự kiện liên quan đến biểu mẫu)
03. Các phương thức thiết yếu trong jQuery Phần 2
Hiệu ứng hoạt ảnh animate()
Phương thức load() dùng để tải các tài liệu riêng lẻ vào vị trí mong muốn trên trang.
04. Ví dụ thực tế về jQuery
Tạo 3 loại slider hình ảnh khác nhau
Nội dung menu tab jQuery
Nội dung Accordion jQuery
Hộp chọn (select) tùy chỉnh cho trang web liên kết (family site) ở phần chân trang (footer)
Thay đổi màu nền bằng cách sử dụng input color
Thay đổi CSS khi cuộn chuột xuống và cuộn lên đầu trang một cách mượt mà
Cuộn mượt mà để tìm đến từng phần (section) tương ứng
Tạo thanh điều chỉnh tăng giảm kích thước phông chữ
Tạo nút tăng giảm kích thước phông chữ
Chuyển đổi Chế độ sáng & Chế độ tối
Tạo biểu mẫu tải lên tệp tin
Tạo biểu mẫu tải lên ảnh đại diện
Làm hiện trường nhập liệu bị ẩn khi đánh dấu vào ô checkbox
Tải nội dung ẩn khi nhấn nút xem thêm
Bộ sưu tập ảnh hiển thị ảnh lớn khi nhấn vào ảnh thu nhỏ (thumbnail)
Hiện/ẩn giá trị nhập mật khẩu với biểu tượng font (font icon)
Kiểm tra số lượng ký tự trong ô nhập văn bản (textarea)
Tạo chức năng kính lúp di chuyển theo con trỏ chuột
Hiệu ứng Parallax (Parallax Effect) theo cuộn chuột
Tạo thanh điều hướng tab biểu tượng ở phía dưới màn hình di động
Tạo danh sách việc cần làm (To Do List)
Slider (nút Trước Sau, nút điều khiển Autoplay)
Slider (Tự động Autoplay, dừng khi di chuột vào và bắt đầu lại khi di chuột ra)
Hiệu ứng hoạt ảnh văn bản di chuyển lên trên khi nhấp vào trường nhập liệu (form input)
Tạo hiệu ứng hover hình ảnh bằng jQuery animate
Mở nội dung ẩn bằng thanh điều hướng bên (sidebar)
Tạo thư viện ảnh Lightbox
Hiển thị modal hoạt hình đáp ứng (responsive)
Chuyển đổi màn hình Transition Front Back
05. Cách sử dụng plugin jQuery
Cách sử dụng plugin Slick Slider cho jQuery
Cách sử dụng plugin tạo hiệu ứng đánh chữ jQuery Typed.js
Cách sử dụng plugin jQuery Lightbox featherlight.js
Plugin bộ đếm ngược Jquery The Final Countdown
※ Giáo trình jQuery này không bao gồm cách sử dụng Ajax.
🚩 PDF Ảnh chụp màn hình xem trước giáo trình (JavaScript)
🚩 Xem trước PDF ảnh chụp màn hình giáo trình (jQuery)
⚡ Xem trước bản hoàn thiện các ví dụ thực hành JavaScript
▲ Slider (Nút trước sau, nút điều khiển Autoplay)
▲ Slider (Tự động Autoplay, dừng khi di chuột vào và bắt đầu lại khi di chuột ra)
▲ Di chuyển bằng cách cuộn mượt mà khi nhấp chuột (phương pháp JavaScript)
▲ Tạo đồng hồ bấm giờ (Stop Watch) [Phút:Giây:Mili giây]
▲ Tạo trò chơi Kéo Búa Bao (Rock Paper Scissors)
▲ Tạo máy tính với Grid
▲ Thay đổi màu nền bằng sự kiện chuột
▲ Hiển thị Modal (Cách 2)
⚡ Xem trước bản hoàn thiện ví dụ thực hành jQuery
▲ Di chuyển bằng cách cuộn mượt mà khi nhấp chuột (phương pháp jQuery)
▲ Tạo danh sách việc cần làm (To Do List)
▲ Tạo thanh điều hướng Tab Bar ở dưới cùng trên thiết bị di động (Tab Bar navigation)
▲ Tạo chức năng kính lúp di chuyển theo con trỏ chuột
▲ Chuyển đổi Chế độ sáng & Chế độ tối
▲ Tạo thanh tăng giảm kích thước phông chữ
▲ Kiểm tra số lượng ký tự trong ô nhập văn bản (textarea)
▲ Hiển thị và ẩn giá trị nhập mật khẩu với biểu tượng font
▲ Tạo biểu mẫu tải lên ảnh đại diện
▲ Hiệu ứng hoạt họa văn bản di chuyển lên khi nhấp vào trường nhập liệu của biểu mẫu
▲ Tạo thư viện ảnh Lightbox
▲ Tạo hiệu ứng hover hình ảnh bằng jQuery animate
▲ Mở nội dung ẩn bằng thanh điều hướng bên (Sidebar Navigation)
▲ Chuyển đổi màn hình hiệu ứng Front Back
▲ Cách sử dụng plugin Slick Slider cho jQuery
▲ Cách sử dụng plugin gõ chữ jQuery Typed.js
▲ Cách sử dụng plugin jQuery Featherlight
▲ Cách sử dụng plugin bộ đếm ngược jQuery The Final Countdown
🌈 Xem trước tệp hoàn thiện JavaScript & jQuery
Những điều cần lưu ý trước khi học 📢
Bộ giáo trình này dành cho những người đang chuẩn bị tìm việc làm Web Publisher hoặc những người đang làm việc thực tế với tư cách là Web Publisher.Đây không phải là bài giảng có chiều sâu ở mức độ mà các nhà phát triển Front-end hay Back-end mong muốn. Tuy nhiên, điều đó không có nghĩa là nội dung lý thuyết cốt lõi của JavaScript và jQuery được trình bày sơ sài. Toàn bộ giáo trình đều bao quát những nội dung thiết yếu nhất. Đối với mức độ chuyên sâu về JS mà các nhà phát triển Front-end hoặc Back-end mong muốn, các bộ giáo trình JavaScript trình độ trung cao cấp trên thị trường sẽ phù hợp hơn.
🟢Trước khi tham gia khóa học này, bạn nên đọc qua bài viết trên blog của Coding Works dưới đây. Lý do tại sao nhà thiết kế web và người làm web publisher cần giỏi jQuery hơn JavaScript: https://www.inflearn.com/blogs/3527
Kiến thức tiên quyết và lưu ý
Vì đây là giáo trình học JS không tập trung vào publishing nên chỉ cần có kỹ năng cơ bản về HTML+CSS là đủ.
Giới thiệu người chia sẻ kiến thức ✒️
Hiện) Giảng viên Publishing & Frontend chương trình hỗ trợ quốc gia Hiện) Freelancer Frontend Publisher Hiện) Vận hành kênh YouTube 'Coding Works' chuyên về HTML+CSS+JQUERY Publishing Giảng viên Web Publishing tại Green Computer Academy Giảng viên Web Publishing tại The Joeun Computer Academy Giảng viên Web Publishing tại Ezen Computer Academy Frontend Publisher, Giảng viên chuyên nghiệp Frontend Publishing Giảng dạy Portfolio thiết kế Web UI/UX Giảng dạy lớp chứng chỉ thực hành Kỹ thuật viên Thiết kế Web Easy & Edu Frontend UI/UX Design và Publishing
🌏Danh sách bài giảng Coding Works trên Inflearn - https://www.inflearn.com/users/@codingworks
🌏Thứ tự học các bài giảng Coding Works trên Inflearn (Lộ trình học tập) - https://www.inflearn.com/blogs/2351
🌏Blog xuất bản CodingWorks trên Inflearn - https://www.inflearn.com/users/@codingworks/blogs
🌏Kênh YouTube Coding Works Publishing - https://www.youtube.com/codingworks
Khuyến nghị cho những người này
Khóa học này dành cho ai?
Những ai muốn xem nội dung cốt lõi cần thiết về JavaScript & jQuery dưới dạng giáo trình PDF
Nhà thiết kế web, Web Publisher, nhà phát triển web cần cải thiện kỹ năng JavaScript & jQuery
Cần biết trước khi bắt đầu?
Vì đây là giáo trình học JS chứ không tập trung vào mảng xuất bản (publishing), nên chỉ yêu cầu năng lực cơ bản về HTML+CSS.
■ [Hiện tại] Giảng viên Publishing & Front-end được nhà nước hỗ trợ kinh phí ■ [Hiện tại] Freelance Front-end Publisher ■ [Hiện tại] Vận hành kênh YouTube 'Coding Works' chuyên về HTML+CSS+JQUERY Publishing ■ Giảng viên Web Publishing tại Green Computer Academy ■ Giảng viên Web Publishing tại The Joeun Computer Academy ■ Giảng viên Web Publishing tại Ezen Computer Academy ■ Front-end Publisher, Giảng viên chuyên nghiệp về Front-end Publishing ■ Giảng dạy Portfolio thiết kế Web UI/UX ■ Giảng dạy lớp chứng chỉ thực hành Kỹ thuật viên Thiết kế Web ■ Thiết kế UI/UX và Publishing Front-end tại Easy & Edu
Nó chứa lý thuyết và nhiều ví dụ thực tế, vì vậy tôi nghĩ bạn sẽ có thể cải thiện kỹ năng của mình một cách nhanh chóng bằng cách làm theo! Đó là một cuốn sách điện tử chứ không phải là một bài giảng trực tuyến nên rất dễ dàng để kiểm tra bất cứ lúc nào và thật tuyệt khi không có thời gian giảng cố định nên tôi có thể học theo tốc độ của riêng mình. Tôi sẽ học chăm chỉ!