kiến thức [Event Tặng Title] Hướng dẫn học Javascript từ 0-> Nâng cao.

cs_50i said:

Trao đổi luôn trong topic này, bạn cứ thoải mái đi. Mà đang là sv năm mấy? Học HN hay SG?

Click to expand...

hoanhdung3 said:

trong quá trình học có khúc mắc e sẽ nhờ bác giúp cảm ơn bác đã nhiệt tình.

Click to expand...

cs_50i said:

Thực hành:
Viết mã JS để hiển thị hiệu ứng trượt ảnh như sau:
View attachment 844734

Gợi ý:
Cách 1: Sử dụng css animation kết hợp cùng JS.
Cách 2: Sử dụng JS và canvas. Chạy callback loop khi có event mouse.

Click to expand...

militarytd said:

hay quá, cảm ơn bác nhiều nhé, bác có skype hay discord gì k ạ

Click to expand...

cs_50i said:

Chào các thím. Ấp ủ đã lâu, viết blog để đóng góp cho cộng đồng. Chứ từ ngày ra trường và đi làm đến nay là 10 năm ròng tận hưởng rất rất nhiều tài liệu quý giá free. Ăn 10 miếng mà không trả nổi một miếng thì tôi cũng áy náy. Trình độ của tôi không cao siêu gì để đóng góp cả nhưng tôi tự tin viết về seri hướng dẫn học javascript (ngôn ngữ phổ biến nhất hiện nay), dễ kiếm việc làm. Tôi đang là một embedded software engineer, 6 năm kinh nghiệm C/C++ song song là 2 năm javascript. Voz không biết tôi là ai, tôi cũng không có nhu cầu biết các bạn là ai. Vì thế, các bạn đọc tài liệu do tôi viết có thể thoải mái gạch đá, góp ý. Miễn chúng ta cùng tiến!

Vào đề luôn!

Bài 1: Giới thiệu về Javascript và viết dòng code đầu tiên.

Không dài dòng. Bạn hãy luôn nhớ rằng JS là ngôn ngữ mà môi trường hoạt động của nó là trên trình duyệt. Thuở sơ khai là vậy, còn giờ nó là ngôn ngữ chạy cả trên môi trường server. Mà chúng ta mới bắt đầu thì cứ làm việc trên môi trường sơ khai của javascript trước, còn lại môi trường server học sau. Đừng ham học liền một lúc cả hai làm gì. Ăn ít no lâu, thọc ít mà sâu sẽ chắc chắn hơn.

Vậy thì khi mới học JS. Bạn hãy luôn chỉ quan tâm rằng mình đang viết code, ý niệm điều khiển cái trình duyệt web (browser) hiển thị ra thứ bạn cần. Đừng đào sâu cách thức mà trình duyệt nó hoạt động ra sao, chúng ta chắc chắn phải biết cái này nhưng cũng tìm hiểu sau đi. Không nên đang học bảng cửu chương mà nhảy vào vẽ đồ thị hàm số làm gì đúng không?

Nào bây giờ chúng ta bắt đầu thiết lập một môi trường viết code javascript luôn.

Bước 1: Đầu tiên, bạn hãy mở một tab chrome lên. Gõ vào "about:blank" rồi nhấn enter. Sau đấy thì nhấn tiếp F12 ---> Công cụ devtool sẽ hiện ra, bạn vào tab console để bắt đầu thôi.

Bước 2: Bắt đầu code:
Bạn hãy gõ vào đoạn code sau vào console:

JavaScript:

let name = prompt('Nhap vao ten cua ban: ');
console.log('Tên của tôi là:___' + name);

// Lưu ý:
---> Hãy nhấn shift + enter để bạn xuống hàng một dòng code.
---> Nhấn enter nếu bạn đã hoàn thành xong đoạn script và muốn thực thi đoạn script ấy.

Xong bài 1.

Bài 2: Cách khai báo biến, phạm vi hoạt động của biến trong javascript.

Biến (variable) dùng để lưu giá trị, như đoạn code bạn vừa thực thi ở bài 1. biến name lưu giá trị mà bạn nhập vào (hoặc bạn gán cho nó). Vậy suy ra biến là để lưu giá trị nào đó. Bạn hiểu vậy là được, mới mà. Chúng ta học từ những khái niệm đơn giản nhất rồi phát triển dần lên.

Trong thực tế, triết lý của lập trình cũng giống cuộc sống ngoài đời thôi. Bạn dùng cái gì của người khác đang quản lý thì bạn phải báo cáo, lập trình cũng vậy. Bạn cần một biến để lưu giá trị, việc đầu tiên bạn phải khai báo cho trình duyệt biết bạn đang sử dụng đến nó. Trình duyệt biết và bắt đầu cho phép bạn sử dụng biến đó, nghĩa là trao quyền cho bạn quản lý biến ấy (gán giá trị, xóa, sửa ...là quyền của bạn) . Cú pháp khai báo sẽ là:

let x; -> Với let là keyword báo cáo lên trình duyệt bạn đang khởi tạo một biến mới. còn x thì rõ ràng là tên biến rồi.

Nào! Bắt đầu khai báo và sử dụng biến đầu tiên nào.

JavaScript:

let x = 6;
console.log(x + 7); //13

Chú ý: Bạn chỉ được phép khai báo biến trong một phạm vi, một lần duy nhất. Vì đây là quy định rồi, báo 2 lần thì sẽ lỗi. Bạn hãy thử xem

JavaScript:

let a = 5;
let a = 6;
console.log(a); // Uncaught SyntaxError: Identifier 'a' has already been declared

JS ngày xưa sử dụng từ khóa var để khai báo biến. Tuy nhiên ngày nay, nó đã được thay thế bởi let bởi vì từ khóa var gây ra lộn xộn trong phạm vi sử dụng nên kể từ bây giờ let thay cho var. Nó tường minh và rõ ràng hơn.

khi khai báo biến bạn phải luôn chú ý luồng chạy của biến nó ra sao, để biết được thì phải nắm được phạm vi hoạt động của biến. Đầy lập trình viên kể cả lão làng, có lúc code nhưng nhầm hoặc quên phạm vi sử dụng biến nên gây ra bug là chuyện rất chi bình thường.

Ở trên mạng thì tôi thấy các tutorial nói khá kỹ về việc phạm vi của biến nhưng luôn viết dưới kiểu đi sâu quá vào chuyên môn (nào là hoisting, closure với let với var bla...), gây khó khăn cho người mới học. Tôi nghĩ là chưa cần thiết, khi người học có basic rồi thì viết uyên bác thế nào cũng được. Còn tôi, tôi luôn cố gắng diễn giải vấn đề gần gũi, dễ hiểu nhất cho người mới.

Vậy thì phạm vi hoạt động của biến khi khai báo với let nó như thế nào?

Hiểu đơn giản là phạm vi của biến (variable scope), khi bạn khai báo biến let trong một bao đóng {} thì luồng hoạt động của nó ở trong bao đóng thôi. Nó không tác động ra bên ngoài mà bên ngoài cũng chẳng tác động được vào nó. Người ta định nghĩa khi khai báo với let ở phạm vi bao đóng thì nó chỉ hoạt động trong bao đóng ấy thôi chính là block scope (hiểu nôm na tiếng việt là trong khai báo let trong một thẻ {}). Đây, bạn xem là hiểu ngay. Không dài dòng.

View attachment 843081

Ngoài let ra thì const hoạt động tương tự vậy nhưng nó là kiểu khai báo hằng. Mà hằng thì chỉ khai báo một lần và giá trị là cố định. Không thể update lại giá trị. Bạn nhớ thế là được rồi.

Ví dụ:

JavaScript:

const Age = 33;
let plusAge = 4;
Age  = 34;      //  error
Age = plusAge;   // error

Nào bây giờ chúng ta tiếp tục. Gõ "about:blank" vào chrome, F12 để mở devtool và ta lại vừa học vừa thực hành code luôn.

Sở dĩ tôi không giới thiệu các bạn nên code bằng IDE nào ngay lúc này vì mục tiêu sâu xa hơn là để các bạn quen dần với devtool để còn thành thạo sử dụng debug nữa (một việc không thể thiếu khi bạn viết code). Sau này bạn có sử dụng IDE nào đi nữa thì debugger vẫn là trên devtool mà thôi. Vậy thì ngay lúc này ta làm quen luôn đi chứ chờ gì nữa. Vào bài mới thôi nhỉ

Bài 3: Array & Object
Bài 4: Giới thiệu về DOM
Bài 5: Vẫn nói về DOM nhưng kỹ hơn
Bài 6: Giới thiệu cách học JS cơ bản (vòng lặp, logic, function...) Chỉ mất một ngày duy nhất
bài 7: Closure
Bài 8: This trong JS (phần cơ bản).
Bài 9: This nâng cao và bản chất
Bài 10: Cơ chế hoisting trong JS

________TẠM KẾT THÚC JS CƠ BẢN----------

Bây giờ chúng ta sẽ đế phần JS nâng cao. Ở phần này chúng ta sẽ làm quen với rất nhiều khái niệm nâng cao của JS như:

• Functional Programming
• Chốt hạ phần Functional programming JS.
• Scope and Execution Context
• Inheritance + Prototype Chain
• JS pattern
• Asynchronous JavaScript + Event Loop
• JavaScript Modules
• JavaScript Engine and Runtime
• Error Handling
• Stack Overflow
• Memory Leaks
• Composition vs Inheritance
• Type Coersion
• Pass By Reference vs Pass by Value
• Higher Order Functions
• IIFE
• .call(), .apply(), .bind()
• Interpreter/ Compiler/ JIT Compiler
• Garbage Collection

Để đi vào cụ thể, chúng ta cùng làm một dự án thực tế luôn. Vừa làm vừa học ...cho thấm.
Vừa làm vừa học mới đỡ chán và trong quá trình làm đụng phải lý thuyết nâng cao như list trên mình sẽ giải thích đến đấy. Lần lượt ok không các fen?

Click to expand...

Nanatu said:

E học xong js cơ bản rồi học song song js nâng cao + animation ổn k bác, hay là chia js nâng cao với animation riêng lẻ ra

Click to expand...

AnhIuEm.EmIuNo.DKM2conCho said:

bác update thêm đi bác

Click to expand...

prof duong cam said:

Ngôn ngữ lập trình đầu tiên nên học là C/C++ hay js vậy thím

Click to expand...

uytuhgdfr said:

Đừng học ngôn ngữ nhé. Học Framework ấy.

Click to expand...