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

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

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

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

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

Bài 5: Vẫn nói về DOM nhưng kỹ hơn

• 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

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 sẽ là cách khai báo biến, phạm vi hoạt động của biến trong javascript (Hẹn tối nay tôi trình bày).

Click to expand...

uytuhgdfr said:

Bác viết bài giải thích về Promise và Agreegate đi. Toàn khái niệm nâng cao.

Click to expand...

cs_50i said:

Có vẻ ae muốn tôi viết luôn về phần nâng cao nhỉ? Thế thì tối nay ta bắt đầu vừa viết về cơ bản nhưng lại nâng cao nhé. Chú ý, phần cơ bản tôi sẽ chỉ nói lướt qua thôi. Ae nào mới học thì tự phải tra google những cái cơ bản vậy.

Click to expand...

cs_50i said:

Có vẻ ae muốn tôi viết luôn về phần nâng cao nhỉ? Thế thì tối nay ta bắt đầu vừa viết về cơ bản nhưng lại nâng cao nhé. Chú ý, phần cơ bản tôi sẽ chỉ nói lướt qua thôi. Ae nào mới học thì tự phải tra google những cái cơ bản vậy.

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

Click to expand...

**Doremon** said:

Embedded học js cho vui hay có tay ngang mảng khác vậy bác

Click to expand...

cs_50i said:

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 và Object trong JS.

Vấn đề đặt ra:
Tôi có một danh bạ số điện thoại gồm 5 số:
---->035543453, 0934343454, 082342342, 033434343, 0934343434.

Tôi thể hiện như này trong JS được không? Các bạn xem nhé

let number_1 = 035543453;
let number_2 = 093434345;
let number_3 = 082342342;
let number_4 = 033434343;
let number_5 = 093434343;

Được chứ! Sao không. Chương trình chạy sẽ không lỗi nhưng chẳng ai làm vậy cả. JS sinh ra kiểu cấu trúc dữ liệu mảng để giải quyết vấn đề rườm ra kia.

Trông nó như thế này:

JavaScript:

let num_i = [035543453, 093434345, 082342342, 093434343];
console.log(num_i[1]); //093434345.

Với kiểu dữ liệu mảng, nó đánh ngầm một chỉ số "ẩn" (chỉ số này gọi là index) đằng sau để biểu thị cho vị trí phần tử trong mảng. Chỉ số ẩn này tuần tự từ 0-n (n là tổng số phần tử).

Làm việc với array thì chúng ta được JS cung cấp các phương thức như sau:
1. push-> thêm phần tử vào cuối mảng | 3. pop-> xóa phần tử cuối mảng
2. unshift-> thêm phần tử vào đầu mảng | 4. shift-> xóa phần tử đầu mảng
5. splice-> Delete, Insert, and Replace một phần tử bất kỳ trong mảng.

Next luôn đi, bạn hãy cứ nhớ là thao tác với mảng gồm khai báo mảng, thêm sửa, xóa JS đều cung cấp các phương thức để thực hiện. Khi nào đi vào thực hành cụ thể khi học qua if, loop thì thực hành các phương thức này luôn thể.

Object trong JS thì nó như thế nào?
Vẫn ví dụ trên, danh bạ 5 số điện thoại. Tôi muốn thêm thông tin như tên, địa chỉ, tuổi của người sở hữu số điện thoại và truy xuất thông tin cụ thể ấy ra thì thế nào? JS cung cấp một kiểu dữ liệu gọi là Object(đối tượng) để giải quyết bài toán này. Trông nó như thế này:

JavaScript:

let user = {
      user_1: {
         name: "John",
         numPhone: 03904034,
         Address: "HaNoi - Vietnam",
         age: 30
      },
      user_2: {
         name: "Zen",
         numPhone: 09044034,
         Address: "HaNoi - Vietnam",
         age: 33
      }
   };


   console.log(user.user_1.name);

Bạn hãy nhớ là Array vs object rất hay sử dụng trong JS, là lõi của JS rồi. Đọc lý thuyết nhanh quên lắm. Thực hành nhiều sẽ vỡ ra thôi.

Để các bạn mới học thành thạo sử dụng Array, Object bài tới mình sẽ viết về cách mà JS làm việc với DOM. Từ đây chúng ta sẽ thao tác với DOM cùng với mảng, với Object. Xử lý tình huống cụ thể luôn là viết một website bằng JS chỉ với Object, Array và DOM.

Click to expand...

Có rất nhiều phương thức để làm việc với DOM thông qua JS nhưng chúng ta thường xuyên làm việc với những phương thức và Property sau:​

Finding HTML Elements​

Changing HTML Elements​

Adding and Deleting Elements​