msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'd6f244fed8'
${ noResults }
Web-Dev-For-Beginners/translations/vi/1-getting-started-lessons/1-intro-to-programming-lang.../README.md

59 KiB
Raw Blame History Escape

Giới thiệu về Ngôn ngữ Lập trình và Công cụ Phát triển Hiện đại

Chào bạn, nhà phát triển tương lai! 👋 Tôi có thể nói với bạn điều gì đó khiến tôi vẫn còn cảm thấy rùng mình mỗi ngày không? Bạn sắp khám phá ra rằng lập trình không chỉ là về máy tính – mà nó còn là siêu năng lực thực sự để biến những ý tưởng táo bạo nhất của bạn thành hiện thực!

Bạn có biết cảm giác khi sử dụng ứng dụng yêu thích của mình và mọi thứ hoạt động hoàn hảo không? Khi bạn nhấn một nút và điều gì đó kỳ diệu xảy ra khiến bạn phải thốt lên "wow, làm thế nào họ làm được điều đó?" Thì đây, ai đó giống như bạn – có lẽ đang ngồi trong quán cà phê yêu thích của họ lúc 2 giờ sáng với ly espresso thứ ba – đã viết ra đoạn mã tạo nên điều kỳ diệu đó. Và điều này sẽ khiến bạn kinh ngạc: đến cuối bài học này, bạn không chỉ hiểu cách họ làm điều đó, mà bạn còn sẽ háo hức thử làm điều đó cho chính mình!

Nghe này, tôi hoàn toàn hiểu nếu bạn cảm thấy lập trình có vẻ đáng sợ ngay bây giờ. Khi tôi mới bắt đầu, tôi thực sự nghĩ rằng bạn cần phải là một thiên tài toán học hoặc đã lập trình từ khi còn nhỏ. Nhưng đây là điều đã hoàn toàn thay đổi quan điểm của tôi: lập trình giống hệt như học cách giao tiếp bằng một ngôn ngữ mới. Bạn bắt đầu với "xin chào" và "cảm ơn," sau đó tiến tới gọi cà phê, và trước khi bạn nhận ra, bạn đã có thể thảo luận triết học sâu sắc! Ngoại trừ việc trong trường hợp này, bạn đang trò chuyện với máy tính, và thành thật mà nói? Chúng là những đối tác trò chuyện kiên nhẫn nhất mà bạn từng có – chúng không bao giờ phán xét sai lầm của bạn và luôn sẵn sàng thử lại!

Hôm nay, chúng ta sẽ khám phá những công cụ tuyệt vời làm cho phát triển web hiện đại không chỉ khả thi mà còn thực sự gây nghiện. Tôi đang nói về chính những trình chỉnh sửa, trình duyệt và quy trình làm việc mà các nhà phát triển tại Netflix, Spotify và studio ứng dụng indie yêu thích của bạn sử dụng mỗi ngày. Và đây là phần sẽ khiến bạn nhảy múa vui sướng: hầu hết các công cụ tiêu chuẩn ngành chuyên nghiệp này đều hoàn toàn miễn phí!

Giới thiệu Lập trình

Sketchnote bởi Tomomi Imura

Hãy Xem Bạn Đã Biết Những Gì!

Trước khi chúng ta bắt đầu phần thú vị, tôi tò mò – bạn đã biết gì về thế giới lập trình này? Và nghe này, nếu bạn nhìn vào những câu hỏi này và nghĩ "Tôi thực sự không biết gì về tất cả những điều này," thì không chỉ là ổn, mà còn là hoàn hảo! Điều đó có nghĩa là bạn đang ở đúng nơi. Hãy nghĩ về bài kiểm tra này như việc khởi động trước khi tập luyện – chúng ta chỉ đang làm nóng các cơ não thôi!

Tham gia bài kiểm tra trước bài học

Cuộc Phiêu Lưu Chúng Ta Sắp Đi Cùng Nhau

Được rồi, tôi thực sự đang rất phấn khích về những gì chúng ta sẽ khám phá hôm nay! Thật sự, tôi ước gì có thể nhìn thấy khuôn mặt của bạn khi một số khái niệm này trở nên rõ ràng. Đây là hành trình tuyệt vời mà chúng ta sẽ cùng nhau thực hiện:

  • Lập trình thực sự là gì (và tại sao nó lại tuyệt vời đến thế!) – Chúng ta sẽ khám phá cách mà mã hóa thực sự là phép thuật vô hình vận hành mọi thứ xung quanh bạn, từ chiếc đồng hồ báo thức biết rằng hôm nay là sáng thứ Hai đến thuật toán chọn lọc hoàn hảo các gợi ý trên Netflix của bạn.
  • Ngôn ngữ lập trình và tính cách tuyệt vời của chúng – Hãy tưởng tượng bạn bước vào một bữa tiệc mà mỗi người đều có siêu năng lực và cách giải quyết vấn đề hoàn toàn khác nhau. Đó chính là thế giới của các ngôn ngữ lập trình, và bạn sẽ thích gặp gỡ chúng!
  • Những khối xây dựng cơ bản tạo nên phép thuật số – Hãy nghĩ về chúng như bộ LEGO sáng tạo tối thượng. Một khi bạn hiểu cách các mảnh ghép này kết hợp với nhau, bạn sẽ nhận ra rằng mình có thể xây dựng bất cứ thứ gì mà trí tưởng tượng của bạn mơ ước.
  • Các công cụ chuyên nghiệp sẽ khiến bạn cảm thấy như vừa được trao cây đũa thần – Tôi không hề phóng đại đâu – những công cụ này thực sự sẽ khiến bạn cảm thấy như có siêu năng lực, và điều tuyệt vời nhất? Chúng chính là những công cụ mà các chuyên gia sử dụng!

💡 Điều này rất quan trọng: Đừng nghĩ đến việc cố gắng ghi nhớ mọi thứ hôm nay! Hiện tại, tôi chỉ muốn bạn cảm nhận được sự phấn khích về những gì có thể. Các chi tiết sẽ tự nhiên gắn bó khi chúng ta cùng nhau thực hành – đó là cách học thực sự diễn ra!

Bạn có thể tham gia bài học này trên Microsoft Learn!

Vậy Lập trình Thực sự Là Gì?

Được rồi, hãy cùng giải quyết câu hỏi triệu đô: thực sự thì lập trình là gì?

Tôi sẽ kể cho bạn một câu chuyện đã hoàn toàn thay đổi cách tôi nghĩ về điều này. Tuần trước, tôi đã cố gắng giải thích cho mẹ tôi cách sử dụng điều khiển từ xa của TV thông minh mới. Tôi đã nói những câu như "Nhấn nút đỏ, nhưng không phải nút đỏ lớn, mà là nút đỏ nhỏ ở bên trái... không, bên trái khác của mẹ... được rồi, giờ giữ nó trong hai giây, không phải một, không phải ba..." Nghe quen không? 😅

Đó chính là lập trình! Đó là nghệ thuật đưa ra các hướng dẫn chi tiết, từng bước cho một thứ rất mạnh mẽ nhưng cần mọi thứ được giải thích một cách hoàn hảo. Ngoại trừ việc thay vì giải thích cho mẹ bạn (người có thể hỏi "nút đỏ nào?!"), bạn đang giải thích cho một máy tính (nó sẽ làm chính xác những gì bạn nói, ngay cả khi điều bạn nói không hoàn toàn là điều bạn muốn).

Điều khiến tôi kinh ngạc khi lần đầu tiên học điều này là: máy tính thực sự khá đơn giản ở cốt lõi của chúng. Chúng chỉ hiểu hai điều – 1 và 0, về cơ bản chỉ là "có" và "không" hoặc "bật" và "tắt." Chỉ vậy thôi! Nhưng điều kỳ diệu ở đây là – chúng ta không cần phải nói bằng 1 và 0 như trong The Matrix. Đó là nơi ngôn ngữ lập trình xuất hiện. Chúng giống như có một người phiên dịch tốt nhất thế giới, người chuyển đổi suy nghĩ bình thường của bạn thành ngôn ngữ máy tính.

Và đây là điều khiến tôi vẫn cảm thấy rùng mình mỗi sáng khi thức dậy: thực sự mọi thứ kỹ thuật số trong cuộc sống của bạn đều bắt đầu từ ai đó giống như bạn, có lẽ đang ngồi trong bộ đồ ngủ với một tách cà phê, gõ mã trên máy tính xách tay của họ. Bộ lọc Instagram làm bạn trông hoàn hảo? Ai đó đã mã hóa nó. Gợi ý dẫn bạn đến bài hát yêu thích mới? Một nhà phát triển đã xây dựng thuật toán đó. Ứng dụng giúp bạn chia tiền ăn tối với bạn bè? Đúng vậy, ai đó đã nghĩ "điều này thật phiền phức, tôi cá là tôi có thể sửa nó" và sau đó... họ đã làm được!

Khi bạn học lập trình, bạn không chỉ học một kỹ năng mới – bạn đang trở thành một phần của cộng đồng tuyệt vời gồm những người giải quyết vấn đề, những người dành cả ngày để nghĩ, "Nếu tôi có thể xây dựng một thứ gì đó làm cho ngày của ai đó tốt hơn một chút thì sao?" Thành thật mà nói, có điều gì tuyệt vời hơn thế không?

✅ Tìm kiếm sự thật thú vị: Đây là một điều rất thú vị để tìm hiểu khi bạn có thời gian rảnh – bạn nghĩ ai là lập trình viên máy tính đầu tiên trên thế giới? Tôi sẽ gợi ý cho bạn: có thể không phải là người bạn mong đợi! Câu chuyện về người này thực sự rất hấp dẫn và cho thấy rằng lập trình luôn là về giải quyết vấn đề sáng tạo và suy nghĩ vượt ra ngoài khuôn khổ.

Ngôn ngữ Lập trình Giống Như Những Hương Vị Phép Thuật Khác Nhau

Được rồi, điều này nghe có vẻ kỳ lạ, nhưng hãy kiên nhẫn – ngôn ngữ lập trình rất giống các loại âm nhạc khác nhau. Hãy nghĩ về nó: bạn có jazz, mượt mà và ngẫu hứng, rock mạnh mẽ và đơn giản, cổ điển thanh lịch và có cấu trúc, và hip-hop sáng tạo và biểu cảm. Mỗi phong cách có một cảm giác riêng, một cộng đồng người hâm mộ đam mê riêng, và mỗi phong cách đều hoàn hảo cho các tâm trạng và dịp khác nhau.

Ngôn ngữ lập trình hoạt động chính xác như vậy! Bạn sẽ không sử dụng cùng một ngôn ngữ để xây dựng một trò chơi di động vui nhộn mà bạn sẽ sử dụng để xử lý lượng dữ liệu khổng lồ về khí hậu, giống như bạn sẽ không chơi nhạc death metal trong một lớp yoga (chà, hầu hết các lớp yoga thôi! 😄).

Nhưng đây là điều khiến tôi kinh ngạc mỗi khi nghĩ về nó: những ngôn ngữ này giống như có người phiên dịch kiên nhẫn và thông minh nhất thế giới ngồi ngay cạnh bạn. Bạn có thể diễn đạt ý tưởng của mình theo cách tự nhiên với bộ não con người, và họ xử lý tất cả công việc phức tạp để chuyển đổi điều đó thành 1 và 0 mà máy tính thực sự hiểu. Nó giống như có một người bạn hoàn toàn thông thạo cả "sáng tạo của con người" và "logic của máy tính" – và họ không bao giờ mệt mỏi, không bao giờ cần nghỉ uống cà phê, và không bao giờ phán xét bạn vì hỏi cùng một câu hỏi hai lần!

Các Ngôn ngữ Lập trình Phổ biến và Ứng dụng của Chúng

Ngôn ngữ Tốt nhất cho Tại sao nó phổ biến
JavaScript Phát triển web, giao diện người dùng Chạy trên trình duyệt và cung cấp sức mạnh cho các trang web tương tác
Python Khoa học dữ liệu, tự động hóa, AI Dễ đọc và học, có thư viện mạnh mẽ
Java Ứng dụng doanh nghiệp, ứng dụng Android Độc lập nền tảng, mạnh mẽ cho các hệ thống lớn
C# Ứng dụng Windows, phát triển trò chơi Hỗ trợ mạnh mẽ từ hệ sinh thái Microsoft
Go Dịch vụ đám mây, hệ thống backend Nhanh, đơn giản, được thiết kế cho tính toán hiện đại

Ngôn ngữ Cấp Cao vs. Ngôn ngữ Cấp Thấp

Được rồi, đây thực sự là khái niệm khiến tôi bối rối khi lần đầu tiên học, vì vậy tôi sẽ chia sẻ phép so sánh cuối cùng đã giúp tôi hiểu – và tôi thực sự hy vọng nó cũng sẽ giúp bạn!

Hãy tưởng tượng bạn đang đến một quốc gia mà bạn không nói được ngôn ngữ, và bạn rất cần tìm nhà vệ sinh gần nhất (chúng ta đều đã từng ở trong tình huống này, đúng không? 😅):

  • Lập trình cấp thấp giống như học ngôn ngữ địa phương đến mức bạn có thể trò chuyện với bà cụ bán trái cây ở góc phố bằng các tham chiếu văn hóa, tiếng lóng địa phương và những câu chuyện cười mà chỉ người bản địa mới hiểu. Rất ấn tượng và cực kỳ hiệu quả... nếu bạn tình cờ thông thạo! Nhưng khá áp lực khi bạn chỉ đang cố gắng tìm nhà vệ sinh.

  • Lập trình cấp cao giống như có một người bạn địa phương tuyệt vời, người hiểu bạn. Bạn có thể nói "Tôi thực sự cần tìm nhà vệ sinh" bằng tiếng Anh đơn giản, và họ xử lý tất cả việc dịch thuật văn hóa và chỉ đường cho bạn một cách dễ hiểu.

Trong thuật ngữ lập trình:

  • Ngôn ngữ cấp thấp (như Assembly hoặc C) cho phép bạn có các cuộc trò chuyện cực kỳ chi tiết với phần cứng thực tế của máy tính, nhưng bạn cần phải suy nghĩ như một cỗ máy, điều này... chà, hãy nói rằng đó là một sự thay đổi tư duy khá lớn!
  • Ngôn ngữ cấp cao (như JavaScript, Python hoặc C#) cho phép bạn suy nghĩ như một con người trong khi chúng xử lý tất cả các ngôn ngữ máy móc phía sau. Thêm vào đó, chúng có những cộng đồng cực kỳ thân thiện, đầy những người nhớ cảm giác khi mới bắt đầu và thực sự muốn giúp đỡ!

Bạn đoán xem tôi sẽ gợi ý bạn bắt đầu với loại nào? 😉 Ngôn ngữ cấp cao giống như có bánh xe tập đi mà bạn không bao giờ muốn tháo ra vì chúng làm cho toàn bộ trải nghiệm trở nên thú vị hơn!

Để Tôi Cho Bạn Thấy Tại Sao Ngôn Ngữ Cấp Cao Thân Thiện Hơn

Được rồi, tôi sắp cho bạn thấy điều gì đó hoàn toàn minh họa tại sao tôi yêu thích ngôn ngữ cấp cao, nhưng trước tiên – tôi cần bạn hứa với tôi một điều. Khi bạn nhìn thấy ví dụ mã đầu tiên, đừng hoảng sợ! Nó được thiết kế để trông có vẻ đáng sợ. Đó chính là điểm tôi muốn nhấn mạnh!

Chúng ta sẽ xem cùng một nhiệm vụ được viết bằng hai phong cách hoàn toàn khác nhau. Cả hai đều tạo ra cái gọi là dãy Fibonacci – đó là một mẫu toán học đẹp mắt mà mỗi số là tổng của hai số trước đó: 0, 1, 1, 2, 3, 5, 8, 13... (Sự thật thú vị: bạn sẽ thấy mẫu này xuất hiện ở khắp mọi nơi trong tự nhiên – xoắn hạt hướng dương, mẫu hình quả thông, thậm chí cả cách các thiên hà hình thành!)

Sẵn sàng để thấy sự khác biệt chưa? Bắt đầu nào!

Ngôn ngữ cấp cao (JavaScript) – Thân thiện với con người:

// Step 1: Basic Fibonacci setup
const fibonacciCount = 10;
let current = 0;
let next = 1;

console.log('Fibonacci sequence:');

Đây là những gì đoạn mã này làm:

  • Khai báo một hằng số để chỉ định số lượng số Fibonacci mà chúng ta muốn tạo
  • Khởi tạo hai biến để theo dõi số hiện tại và số tiếp theo trong dãy
  • Thiết lập các giá trị ban đầu (0 và 1) xác định mẫu Fibonacci
  • Hiển thị một thông báo tiêu đề để xác định đầu ra của chúng ta
// Step 2: Generate the sequence with a loop
for (let i = 0; i < fibonacciCount; i++) {
  console.log(`Position ${i + 1}: ${current}`);
  
  // Calculate next number in sequence
  const sum = current + next;
  current = next;
  next = sum;
}

Phân tích những gì xảy ra ở đây:

  • Lặp lại qua từng vị trí trong dãy của chúng ta bằng cách sử dụng vòng lặp for
  • Hiển thị từng số với vị trí của nó bằng cách sử dụng định dạng template literal
  • Tính toán số Fibonacci tiếp theo bằng cách cộng giá trị hiện tại và giá trị tiếp theo
  • Cập nhật các biến theo dõi của chúng ta để chuyển sang lần lặp tiếp theo
// Step 3: Modern functional approach
const generateFibonacci = (count) => {
  const sequence = [0, 1];
  
  for (let i = 2; i < count; i++) {
    sequence[i] = sequence[i - 1] + sequence[i - 2];
  }
  
  return sequence;
};

// Usage example
const fibSequence = generateFibonacci(10);
console.log(fibSequence);

Trong đoạn trên, chúng ta đã:

  • Tạo một hàm có thể tái sử dụng bằng cách sử dụng cú pháp hàm mũi tên hiện đại
  • Xây dựng một mảng để lưu trữ toàn bộ dãy thay vì hiển thị từng số một
  • Sử dụng chỉ số mảng để tính toán từng số mới từ các giá trị trước đó
  • Trả về toàn bộ dãy để sử dụng linh hoạt trong các phần khác của chương trình

Ngôn ngữ cấp thấp (ARM Assembly) – Thân thiện với máy tính:

 area ascen,code,readonly
 entry
 code32
 adr r0,thumb+1
 bx r0
 code16
thumb
 mov r0,#00
 sub r0,r0,#01
 mov r1,#01
 mov r4,#10
 ldr r2,=0x40000000
back add r0,r1
 str r0,[r2]
 add r2,#04
 mov r3,r0
 mov r0,r1
 mov r1,r3
 sub r4,#01
 cmp r4,#00
 bne back
 end

Hãy chú ý cách phiên bản JavaScript gần như đọc giống như các hướng dẫn bằng tiếng Anh, trong khi phiên bản Assembly sử dụng các lệnh khó hiểu trực tiếp điều khiển bộ xử lý của máy tính. Cả hai đều hoàn thành cùng một nhiệm vụ, nhưng ngôn ngữ cấp cao dễ hiểu, viết và duy trì hơn nhiều.

Những khác biệt chính bạn sẽ nhận thấy:

  • Độ dễ đọc: JavaScript sử dụng các tên mô tả như fibonacciCount trong khi Assembly sử dụng các nhãn khó hiểu như r0, r1
  • Bình luận: Ngôn ngữ cấp cao khuyến khích các bình luận giải thích giúp mã dễ hiểu hơn
  • Cấu trúc: Dòng logic của JavaScript phù hợp với cách con người suy nghĩ về các vấn đề từng bước
  • Bảo trì: Cập nhật phiên bản JavaScript cho các yêu cầu khác nhau rất dễ dàng và rõ ràng ✅ Về dãy số Fibonacci: Mẫu số tuyệt đẹp này (mỗi số bằng tổng của hai số trước đó: 0, 1, 1, 2, 3, 5, 8...) xuất hiện ở khắp mọi nơi trong tự nhiên! Bạn sẽ thấy nó trong các vòng xoắn của hoa hướng dương, các mẫu hình trên quả thông, cách vỏ sò nautilus uốn cong, và thậm chí trong cách các nhánh cây mọc. Thật đáng kinh ngạc khi toán học và lập trình có thể giúp chúng ta hiểu và tái tạo các mẫu hình mà tự nhiên sử dụng để tạo ra vẻ đẹp!

Những thành phần cơ bản tạo nên điều kỳ diệu

Được rồi, bây giờ bạn đã thấy cách các ngôn ngữ lập trình hoạt động, hãy cùng phân tích các thành phần cơ bản tạo nên mọi chương trình từng được viết. Hãy nghĩ về chúng như những nguyên liệu thiết yếu trong công thức nấu ăn yêu thích của bạn – một khi bạn hiểu mỗi thành phần làm gì, bạn sẽ có thể đọc và viết mã trong hầu hết mọi ngôn ngữ!

Điều này giống như học ngữ pháp của lập trình. Nhớ lại hồi đi học, khi bạn học về danh từ, động từ và cách ghép câu? Lập trình cũng có phiên bản ngữ pháp riêng, và thành thật mà nói, nó logic và dễ chịu hơn ngữ pháp tiếng Anh rất nhiều! 😄

Câu lệnh: Các bước hướng dẫn từng bước

Hãy bắt đầu với câu lệnh – chúng giống như các câu riêng lẻ trong một cuộc trò chuyện với máy tính của bạn. Mỗi câu lệnh bảo máy tính thực hiện một việc cụ thể, giống như đưa ra chỉ dẫn: "Rẽ trái ở đây," "Dừng lại ở đèn đỏ," "Đỗ xe vào chỗ đó."

Điều tôi thích ở các câu lệnh là chúng thường rất dễ đọc. Xem thử nhé:

// Basic statements that perform single actions
const userName = "Alex";                    
console.log("Hello, world!");              
const sum = 5 + 3;

Đây là những gì đoạn mã này làm:

  • Khai báo một biến hằng để lưu trữ tên người dùng
  • Hiển thị thông điệp chào mừng trên màn hình console
  • Tính toán và lưu kết quả của một phép toán
// Statements that interact with web pages
document.title = "My Awesome Website";      
document.body.style.backgroundColor = "lightblue";

Từng bước, đây là những gì đang diễn ra:

  • Thay đổi tiêu đề của trang web xuất hiện trên tab trình duyệt
  • Thay đổi màu nền của toàn bộ phần thân trang

Biến: Hệ thống bộ nhớ của chương trình

Được rồi, biến thực sự là một trong những khái niệm yêu thích của tôi để giảng dạy vì chúng rất giống với những thứ bạn đã sử dụng hàng ngày!

Hãy nghĩ về danh bạ điện thoại của bạn một chút. Bạn không cần phải nhớ số điện thoại của mọi người – thay vào đó, bạn lưu "Mẹ," "Bạn thân," hoặc "Quán pizza giao hàng đến 2 giờ sáng" và để điện thoại nhớ các số thực tế. Biến hoạt động chính xác như vậy! Chúng giống như các hộp được dán nhãn nơi chương trình của bạn có thể lưu trữ thông tin và truy xuất nó sau này bằng một cái tên thực sự có ý nghĩa.

Điều thú vị là: biến có thể thay đổi khi chương trình của bạn chạy (do đó có tên là "biến" – bạn thấy họ làm gì không?). Giống như bạn có thể cập nhật danh bạ quán pizza khi tìm được nơi nào đó ngon hơn, biến có thể được cập nhật khi chương trình của bạn học được thông tin mới hoặc khi tình huống thay đổi!

Hãy để tôi cho bạn thấy điều này đơn giản và đẹp đẽ như thế nào:

// Step 1: Creating basic variables
const siteName = "Weather Dashboard";        
let currentWeather = "sunny";               
let temperature = 75;                       
let isRaining = false;

Hiểu các khái niệm này:

  • Lưu trữ các giá trị không thay đổi trong biến const (như tên trang web)
  • Sử dụng let cho các giá trị có thể thay đổi trong suốt chương trình
  • Gán các kiểu dữ liệu khác nhau: chuỗi (văn bản), số, và boolean (đúng/sai)
  • Chọn tên mô tả để giải thích mỗi biến chứa gì
// Step 2: Working with objects to group related data
const weatherData = {                       
  location: "San Francisco",
  humidity: 65,
  windSpeed: 12
};

Trong đoạn trên, chúng ta đã:

  • Tạo một đối tượng để nhóm thông tin thời tiết liên quan lại với nhau
  • Tổ chức nhiều mẩu dữ liệu dưới một tên biến
  • Sử dụng cặp khóa-giá trị để dán nhãn rõ ràng cho từng mẩu thông tin
// Step 3: Using and updating variables
console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`);
console.log(`Wind speed: ${weatherData.windSpeed} mph`);

// Updating changeable variables
currentWeather = "cloudy";                  
temperature = 68;

Hãy hiểu từng phần:

  • Hiển thị thông tin bằng cách sử dụng template literals với cú pháp ${}
  • Truy cập thuộc tính của đối tượng bằng cách sử dụng dot notation (weatherData.windSpeed)
  • Cập nhật các biến được khai báo bằng let để phản ánh điều kiện thay đổi
  • Kết hợp nhiều biến để tạo ra các thông điệp có ý nghĩa
// Step 4: Modern destructuring for cleaner code
const { location, humidity } = weatherData; 
console.log(`${location} humidity: ${humidity}%`);

Những gì bạn cần biết:

  • Trích xuất các thuộc tính cụ thể từ đối tượng bằng cách sử dụng destructuring assignment
  • Tạo các biến mới tự động với cùng tên như các khóa của đối tượng
  • Đơn giản hóa mã bằng cách tránh lặp lại dot notation

Luồng điều khiển: Dạy chương trình của bạn cách suy nghĩ

Được rồi, đây là lúc lập trình trở nên cực kỳ thú vị! Luồng điều khiển về cơ bản là dạy chương trình của bạn cách đưa ra quyết định thông minh, giống như bạn làm mỗi ngày mà không cần suy nghĩ.

Hãy tưởng tượng điều này: sáng nay bạn có thể đã trải qua điều gì đó như "Nếu trời mưa, tôi sẽ mang ô. Nếu trời lạnh, tôi sẽ mặc áo khoác. Nếu tôi bị trễ, tôi sẽ bỏ qua bữa sáng và mua cà phê trên đường đi." Bộ não của bạn tự nhiên tuân theo logic nếu-thì hàng chục lần mỗi ngày!

Đây là điều làm cho các chương trình trở nên thông minh và sống động thay vì chỉ tuân theo một kịch bản nhàm chán, dễ đoán. Chúng thực sự có thể nhìn vào một tình huống, đánh giá những gì đang xảy ra, và phản ứng phù hợp. Nó giống như cho chương trình của bạn một bộ não có thể thích nghi và đưa ra lựa chọn!

Muốn xem cách điều này hoạt động đẹp đẽ như thế nào? Để tôi cho bạn thấy:

// Step 1: Basic conditional logic
const userAge = 17;

if (userAge >= 18) {
  console.log("You can vote!");
} else {
  const yearsToWait = 18 - userAge;
  console.log(`You'll be able to vote in ${yearsToWait} year(s).`);
}

Đây là những gì đoạn mã này làm:

  • Kiểm tra xem tuổi của người dùng có đáp ứng yêu cầu bầu cử không
  • Thực thi các khối mã khác nhau dựa trên kết quả điều kiện
  • Tính toán và hiển thị thời gian còn lại cho đến khi đủ tuổi bầu cử nếu dưới 18
  • Cung cấp phản hồi cụ thể, hữu ích cho từng tình huống
// Step 2: Multiple conditions with logical operators
const userAge = 17;
const hasPermission = true;

if (userAge >= 18 && hasPermission) {
  console.log("Access granted: You can enter the venue.");
} else if (userAge >= 16) {
  console.log("You need parent permission to enter.");
} else {
  console.log("Sorry, you must be at least 16 years old.");
}

Phân tích những gì xảy ra ở đây:

  • Kết hợp nhiều điều kiện bằng cách sử dụng toán tử && (và)
  • Tạo một hệ thống phân cấp điều kiện bằng cách sử dụng else if cho nhiều tình huống
  • Xử lý tất cả các trường hợp có thể với câu lệnh else cuối cùng
  • Cung cấp phản hồi rõ ràng, có thể hành động cho từng tình huống khác nhau
// Step 3: Concise conditional with ternary operator
const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet";
console.log(`Status: ${votingStatus}`);

Những gì bạn cần nhớ:

  • Sử dụng toán tử ternary (? :) cho các điều kiện hai lựa chọn đơn giản
  • Viết điều kiện trước, sau đó là ?, kết quả đúng, sau đó là :, kết quả sai
  • Áp dụng mẫu này khi bạn cần gán giá trị dựa trên điều kiện
// Step 4: Handling multiple specific cases
const dayOfWeek = "Tuesday";

switch (dayOfWeek) {
  case "Monday":
  case "Tuesday":
  case "Wednesday":
  case "Thursday":
  case "Friday":
    console.log("It's a weekday - time to work!");
    break;
  case "Saturday":
  case "Sunday":
    console.log("It's the weekend - time to relax!");
    break;
  default:
    console.log("Invalid day of the week");
}

Đoạn mã này thực hiện các điều sau:

  • So khớp giá trị biến với nhiều trường hợp cụ thể
  • Nhóm các trường hợp tương tự lại với nhau (ngày trong tuần vs. cuối tuần)
  • Thực thi khối mã phù hợp khi tìm thấy một trường hợp khớp
  • Bao gồm một trường hợp default để xử lý các giá trị không mong đợi
  • Sử dụng câu lệnh break để ngăn mã tiếp tục sang trường hợp tiếp theo

💡 Ví dụ thực tế: Hãy nghĩ về luồng điều khiển như có GPS kiên nhẫn nhất thế giới đang chỉ đường cho bạn. Nó có thể nói "Nếu có kẹt xe trên đường Main, hãy đi đường cao tốc. Nếu đường cao tốc bị chặn do xây dựng, hãy thử đi đường cảnh quan." Các chương trình sử dụng logic điều kiện tương tự để phản ứng thông minh với các tình huống khác nhau và luôn mang lại trải nghiệm tốt nhất có thể cho người dùng.

✅ Sắp tới: Chúng ta sẽ có một khoảng thời gian tuyệt vời khám phá sâu hơn các khái niệm này khi tiếp tục hành trình đáng kinh ngạc này cùng nhau! Hiện tại, chỉ cần tập trung vào cảm giác phấn khích về tất cả những khả năng tuyệt vời đang chờ đón bạn. Các kỹ năng và kỹ thuật cụ thể sẽ tự nhiên gắn bó khi chúng ta thực hành cùng nhau – tôi hứa điều này sẽ thú vị hơn bạn mong đợi rất nhiều!

Công cụ hỗ trợ

Được rồi, đây thực sự là phần khiến tôi phấn khích đến mức không thể kiềm chế được! 🚀 Chúng ta sắp nói về những công cụ tuyệt vời sẽ khiến bạn cảm thấy như vừa được trao chìa khóa của một con tàu vũ trụ kỹ thuật số.

Bạn biết đấy, giống như một đầu bếp có những con dao cân bằng hoàn hảo cảm giác như phần mở rộng của bàn tay họ? Hoặc một nhạc sĩ có cây đàn mà dường như hát lên ngay khi họ chạm vào? Vâng, các nhà phát triển có phiên bản riêng của những công cụ kỳ diệu này, và đây là điều sẽ khiến bạn kinh ngạc – hầu hết chúng hoàn toàn miễn phí!

Tôi gần như nhảy lên ghế khi nghĩ đến việc chia sẻ những công cụ này với bạn vì chúng đã hoàn toàn cách mạng hóa cách chúng tôi xây dựng phần mềm. Chúng ta đang nói về các trợ lý lập trình được hỗ trợ bởi AI có thể giúp viết mã của bạn (tôi không đùa đâu!), môi trường đám mây nơi bạn có thể xây dựng toàn bộ ứng dụng từ bất kỳ đâu có Wi-Fi, và các công cụ gỡ lỗi tinh vi đến mức giống như có tầm nhìn X-quang cho chương trình của bạn.

Và đây là phần vẫn khiến tôi nổi da gà: đây không phải là "công cụ dành cho người mới bắt đầu" mà bạn sẽ vượt qua. Đây chính là những công cụ chuyên nghiệp mà các nhà phát triển tại Google, Netflix, và studio ứng dụng indie mà bạn yêu thích đang sử dụng ngay lúc này. Bạn sẽ cảm thấy như một chuyên gia thực thụ khi sử dụng chúng!

Trình chỉnh sửa mã và IDE: Người bạn kỹ thuật số mới của bạn

Hãy nói về trình chỉnh sửa mã – chúng thực sự sẽ trở thành nơi yêu thích mới của bạn để ghé thăm! Hãy nghĩ về chúng như nơi trú ẩn cá nhân của bạn để viết mã, nơi bạn sẽ dành phần lớn thời gian để tạo và hoàn thiện các sáng tạo kỹ thuật số của mình.

Nhưng đây là điều kỳ diệu về các trình chỉnh sửa hiện đại: chúng không chỉ là các trình chỉnh sửa văn bản đẹp mắt. Chúng giống như có một người cố vấn lập trình thông minh nhất, hỗ trợ bạn 24/7. Chúng bắt lỗi chính tả của bạn trước khi bạn nhận ra, gợi ý cải tiến khiến bạn trông như thiên tài, giúp bạn hiểu từng phần mã làm gì, và một số thậm chí có thể dự đoán bạn sắp gõ gì và đề xuất hoàn thành suy nghĩ của bạn!

Tôi nhớ lần đầu tiên tôi phát hiện ra tính năng tự động hoàn thành – tôi thực sự cảm thấy như đang sống trong tương lai. Bạn bắt đầu gõ một cái gì đó, và trình chỉnh sửa của bạn nói, "Này, bạn có đang nghĩ đến hàm này không? Nó làm chính xác những gì bạn cần." Nó giống như có một người đọc suy nghĩ làm bạn đồng hành lập trình!

Điều gì làm cho các trình chỉnh sửa này tuyệt vời đến vậy?

Các trình chỉnh sửa mã hiện đại cung cấp một loạt các tính năng ấn tượng được thiết kế để tăng năng suất của bạn:

Tính năng Nó làm gì Tại sao nó hữu ích
Tô màu cú pháp Tô màu các phần khác nhau của mã Giúp mã dễ đọc hơn và phát hiện lỗi
Tự động hoàn thành Gợi ý mã khi bạn gõ Tăng tốc độ viết mã và giảm lỗi chính tả
Công cụ gỡ lỗi Giúp bạn tìm và sửa lỗi Tiết kiệm hàng giờ thời gian khắc phục sự cố
Tiện ích mở rộng Thêm các tính năng chuyên biệt Tùy chỉnh trình chỉnh sửa cho bất kỳ công nghệ nào
Trợ lý AI Gợi ý mã và giải thích Tăng tốc học tập và năng suất

🎥 Tài liệu video: Muốn thấy các công cụ này hoạt động? Xem video Công cụ hỗ trợ để có cái nhìn tổng quan toàn diện.

Các trình chỉnh sửa được khuyến nghị cho phát triển web

Visual Studio Code (Miễn phí)

  • Phổ biến nhất trong cộng đồng phát triển web
  • Hệ sinh thái tiện ích mở rộng xuất sắc
  • Tích hợp terminal và Git sẵn có
  • Tiện ích mở rộng cần có:

JetBrains WebStorm (Trả phí, miễn phí cho sinh viên)

  • Công cụ gỡ lỗi và kiểm tra nâng cao
  • Hoàn thành mã thông minh
  • Tích hợp kiểm soát phiên bản

IDE dựa trên đám mây (Nhiều mức giá)

  • GitHub Codespaces - Toàn bộ VS Code trên trình duyệt của bạn
  • Replit - Tuyệt vời để học và chia sẻ mã
  • StackBlitz - Phát triển web full-stack tức thì

💡 Mẹo bắt đầu: Bắt đầu với Visual Studio Code – nó miễn phí, được sử dụng rộng rãi trong ngành, và có cộng đồng lớn tạo ra các hướng dẫn và tiện ích mở rộng hữu ích.

Trình duyệt web: Phòng thí nghiệm phát triển bí mật của bạn

Được rồi, chuẩn bị để bị choáng ngợp hoàn toàn! Bạn biết cách bạn đã sử dụng trình duyệt để lướt mạng xã hội và xem video? Vâng, hóa ra chúng đã giấu một phòng thí nghiệm phát triển bí mật tuyệt vời này suốt thời gian qua, chỉ chờ bạn khám phá!

Mỗi lần bạn nhấp chuột phải vào một trang web và chọn "Inspect Element," bạn đang mở ra một thế giới ẩn của các công cụ dành cho nhà phát triển mà thực sự mạnh mẽ hơn một số phần mềm đắt tiền tôi từng trả hàng trăm đô la để sử dụng. Nó giống như phát hiện ra rằng nhà bếp bình thường của bạn đang che giấu một phòng thí nghiệm của đầu bếp chuyên nghiệp sau một tấm vách bí mật!

Lần đầu tiên ai đó chỉ cho tôi công cụ DevTools của trình duyệt, tôi đã dành khoảng ba giờ chỉ để nhấp chuột xung quanh và nói "CHỜ ĐÃ, NÓ CŨNG LÀM ĐƯỢC ĐIỀU ĐÓ SAO?!" Bạn có thể chỉnh sửa bất kỳ trang web nào trong thời gian thực, xem chính xác tốc độ tải mọi thứ, kiểm tra cách trang web của bạn hiển thị trên các thiết bị khác nhau, và thậm chí gỡ lỗi JavaScript như một chuyên gia thực thụ. Thật sự đáng kinh ngạc!

Đây là lý do tại sao trình duyệt là vũ khí bí mật của bạn:

Khi bạn tạo một trang web hoặc ứng dụng web, bạn cần xem nó trông như thế nào và hoạt động ra sao trong thế giới thực. Trình duyệt không chỉ hiển thị công việc của bạn mà còn cung cấp phản hồi chi tiết về hiệu suất, khả năng truy cập, và các vấn đề tiềm ẩn.

Công cụ dành cho nhà phát triển của trình duyệt (DevTools)

Các trình duyệt hiện đại bao gồm các bộ công cụ phát triển toàn diện:

Danh mục công cụ Nó làm gì Ví dụ sử dụng
Trình kiểm tra phần tử Xem và chỉnh sửa HTML/CSS trong thời gian thực Điều chỉnh kiểu dáng để thấy kết quả ngay lập tức
Console Xem thông báo lỗi và kiểm tra JavaScript Gỡ lỗi và thử nghiệm mã
Network Monitor Theo dõi cách tài nguyên tải Tối ưu hóa hiệu suất và thời gian tải
Accessibility Checker Kiểm tra thiết kế toàn diện Đảm bảo trang web của bạn hoạt động cho mọi người dùng
Device Simulator Xem trước trên các kích thước màn hình khác nhau Kiểm tra thiết kế đáp ứng mà không cần nhiều thiết bị

Trình duyệt được khuyến nghị cho phát triển

  • Chrome - DevTools tiêu chuẩn ngành với tài liệu phong phú
  • Firefox - Công cụ CSS Grid và kiểm tra khả năng truy cập xuất sắc
  • Edge - Dựa trên Chromium với tài nguyên dành cho nhà phát triển của Microsoft

⚠️ Mẹo kiểm tra quan trọng: Luôn kiểm tra trang web của bạn trên nhiều trình duyệt! Những gì hoạt động hoàn hảo trên Chrome có thể hiển thị khác trên Safari hoặc Firefox. Các nhà phát triển chuyên nghiệp kiểm tra trên tất cả các trình duyệt chính để đảm bảo trải nghiệm người dùng nhất quán.

Công cụ dòng lệnh: Cánh cổng đến siêu năng lực của nhà phát triển

Được rồi, hãy nói thật lòng về dòng lệnh, vì tôi muốn bạn nghe điều này từ một người thực sự hiểu. Khi tôi lần đầu tiên nhìn thấy nó – chỉ là một màn hình đen đáng sợ với văn bản nhấp nháy – tôi thực sự nghĩ, "Không, chắc chắn là không! Điều này trông giống như một thứ trong phim hacker thập niên 80, và tôi chắc chắn không đủ thông minh để làm điều này!" 😅

Nhưng đây là điều tôi ước ai đó đã nói với tôi lúc đó, và bây giờ tôi đang nói với bạn: dòng lệnh không đáng sợ – thực ra nó giống như đang trò chuyện trực tiếp với máy tính của bạn. Hãy nghĩ về nó như sự khác biệt giữa việc đặt đồ ăn qua một ứng dụng sang trọng với hình ảnh và menu (rất tiện lợi) so với việc bước vào nhà hàng yêu thích của bạn, nơi đầu bếp biết chính xác bạn thích gì và có thể làm ra một món ăn hoàn hảo chỉ cần bạn nói "hãy làm tôi ngạc nhiên với một thứ tuyệt vời."

Dòng lệnh là nơi các nhà phát triển cảm thấy như những phù thủy thực thụ. Bạn gõ một vài từ có vẻ như phép thuật (được rồi, chúng chỉ là các lệnh, nhưng chúng cảm thấy như phép thuật!), nhấn enter, và BÙM – bạn đã tạo ra toàn bộ cấu trúc dự án, cài đặt các công cụ mạnh mẽ từ khắp nơi trên thế giới, hoặc triển khai ứng dụng của bạn lên internet cho hàng triệu người xem. Một khi bạn cảm nhận được sức mạnh đó lần đầu tiên, nó thực sự khá gây nghiện!

Tại sao dòng lệnh sẽ trở thành công cụ yêu thích của bạn:

Trong khi giao diện đồ họa rất tuyệt vời cho nhiều tác vụ, dòng lệnh vượt trội trong việc tự động hóa, chính xác và nhanh chóng. Nhiều công cụ phát triển chủ yếu hoạt động thông qua giao diện dòng lệnh, và học cách sử dụng chúng một cách hiệu quả có thể cải thiện đáng kể năng suất của bạn.

# Step 1: Create and navigate to project directory
mkdir my-awesome-website
cd my-awesome-website

Đoạn mã này làm gì:

  • Tạo một thư mục mới tên là "my-awesome-website" cho dự án của bạn
  • Chuyển đến thư mục vừa tạo để bắt đầu làm việc
# Step 2: Initialize project with package.json
npm init -y

# Install modern development tools
npm install --save-dev vite prettier eslint
npm install --save-dev @eslint/js

Từng bước, đây là những gì đang diễn ra:

  • Khởi tạo một dự án Node.js mới với cài đặt mặc định bằng npm init -y
  • Cài đặt Vite như một công cụ xây dựng hiện đại cho phát triển nhanh và xây dựng sản phẩm
  • Thêm Prettier để định dạng mã tự động và ESLint để kiểm tra chất lượng mã
  • Sử dụng cờ --save-dev để đánh dấu đây là các phụ thuộc chỉ dành cho phát triển
# Step 3: Create project structure and files
mkdir src assets
echo '<!DOCTYPE html><html><head><title>My Site</title></head><body><h1>Hello World</h1></body></html>' > index.html

# Start development server
npx vite

Trong đoạn trên, chúng ta đã:

  • Tổ chức dự án bằng cách tạo các thư mục riêng biệt cho mã nguồn và tài nguyên
  • Tạo một tệp HTML cơ bản với cấu trúc tài liệu đúng
  • Khởi động máy chủ phát triển Vite để tải lại trực tiếp và thay thế module nóng

Công cụ dòng lệnh thiết yếu cho phát triển web

Công cụ Mục đích Tại sao bạn cần nó
Git Kiểm soát phiên bản Theo dõi thay đổi, cộng tác với người khác, sao lưu công việc của bạn
Node.js & npm Runtime JavaScript & quản lý gói Chạy JavaScript ngoài trình duyệt, cài đặt các công cụ phát triển hiện đại
Vite Công cụ xây dựng & máy chủ phát triển Phát triển nhanh với thay thế module nóng
ESLint Chất lượng mã Tự động tìm và sửa lỗi trong JavaScript của bạn
Prettier Định dạng mã Giữ mã của bạn được định dạng và dễ đọc một cách nhất quán

Tùy chọn theo hệ điều hành

Windows:

macOS:

  • Terminal 💻 - Ứng dụng terminal tích hợp sẵn
  • iTerm2 - Terminal nâng cao với các tính năng tiên tiến

Linux:

  • Bash 💻 - Shell tiêu chuẩn của Linux
  • KDE Konsole - Trình giả lập terminal tiên tiến

💻 = Được cài đặt sẵn trên hệ điều hành

🎯 Lộ trình học tập: Bắt đầu với các lệnh cơ bản như cd (chuyển thư mục), ls hoặc dir (liệt kê tệp), và mkdir (tạo thư mục). Thực hành với các lệnh trong quy trình làm việc hiện đại như npm install, git status, và code . (mở thư mục hiện tại trong VS Code). Khi bạn cảm thấy thoải mái hơn, bạn sẽ tự nhiên học thêm các lệnh nâng cao và kỹ thuật tự động hóa.

Tài liệu: Người thầy luôn sẵn sàng của bạn

Được rồi, để tôi chia sẻ một bí mật nhỏ sẽ khiến bạn cảm thấy tốt hơn khi là người mới bắt đầu: ngay cả những nhà phát triển giàu kinh nghiệm nhất cũng dành một phần lớn thời gian của họ để đọc tài liệu. Và đó không phải vì họ không biết mình đang làm gì – thực ra đó là dấu hiệu của sự khôn ngoan!

Hãy nghĩ về tài liệu như việc có quyền truy cập vào những người thầy kiên nhẫn và hiểu biết nhất trên thế giới, luôn sẵn sàng 24/7. Bị mắc kẹt với một vấn đề lúc 2 giờ sáng? Tài liệu ở đó với một cái ôm ảo ấm áp và câu trả lời chính xác bạn cần. Muốn tìm hiểu về một tính năng mới thú vị mà mọi người đang nói đến? Tài liệu sẽ hỗ trợ bạn với các ví dụ từng bước. Đang cố gắng hiểu tại sao một thứ hoạt động theo cách nó hoạt động? Đúng vậy – tài liệu sẵn sàng giải thích theo cách khiến bạn cuối cùng hiểu ra!

Đây là điều đã hoàn toàn thay đổi quan điểm của tôi: thế giới phát triển web di chuyển cực kỳ nhanh, và không ai (ý tôi là hoàn toàn không ai!) nhớ hết mọi thứ. Tôi đã thấy các nhà phát triển cấp cao với hơn 15 năm kinh nghiệm tra cứu cú pháp cơ bản, và bạn biết không? Điều đó không hề xấu hổ – đó là sự thông minh! Không phải là về việc có trí nhớ hoàn hảo; mà là biết nơi tìm câu trả lời đáng tin cậy một cách nhanh chóng và hiểu cách áp dụng chúng.

Đây là nơi phép màu thực sự xảy ra:

Các nhà phát triển chuyên nghiệp dành một phần đáng kể thời gian của họ để đọc tài liệu – không phải vì họ không biết mình đang làm gì, mà vì lĩnh vực phát triển web tiến hóa nhanh đến mức việc cập nhật liên tục đòi hỏi phải học hỏi không ngừng. Tài liệu tốt giúp bạn hiểu không chỉ cách sử dụng một thứ gì đó, mà còn tại sao và khi nào nên sử dụng nó.

Tài nguyên tài liệu thiết yếu

Mozilla Developer Network (MDN)

  • Tiêu chuẩn vàng cho tài liệu công nghệ web
  • Hướng dẫn toàn diện về HTML, CSS, và JavaScript
  • Bao gồm thông tin tương thích trình duyệt
  • Có các ví dụ thực tế và demo tương tác

Web.dev (của Google)

  • Các thực hành tốt nhất về phát triển web hiện đại
  • Hướng dẫn tối ưu hóa hiệu suất
  • Nguyên tắc thiết kế toàn diện và khả năng truy cập
  • Các nghiên cứu trường hợp từ các dự án thực tế

Microsoft Developer Documentation

  • Tài nguyên phát triển trình duyệt Edge
  • Hướng dẫn về ứng dụng web tiến bộ
  • Thông tin chi tiết về phát triển đa nền tảng

Frontend Masters Learning Paths

  • Chương trình học có cấu trúc
  • Các khóa học video từ các chuyên gia trong ngành
  • Bài tập mã hóa thực hành

📚 Chiến lược học tập: Đừng cố gắng ghi nhớ tài liệu – thay vào đó, hãy học cách điều hướng nó một cách hiệu quả. Đánh dấu các tài liệu tham khảo thường dùng và thực hành sử dụng các chức năng tìm kiếm để tìm thông tin cụ thể nhanh chóng.

✅ Suy ngẫm: Đây là một điều thú vị để suy nghĩ – bạn nghĩ các công cụ để xây dựng trang web (phát triển) có thể khác với các công cụ để thiết kế giao diện của chúng (thiết kế) như thế nào? Nó giống như sự khác biệt giữa một kiến trúc sư thiết kế một ngôi nhà đẹp và nhà thầu thực sự xây dựng nó. Cả hai đều rất quan trọng, nhưng họ cần các bộ công cụ khác nhau! Kiểu suy nghĩ này sẽ thực sự giúp bạn nhìn thấy bức tranh lớn hơn về cách các trang web được tạo ra.

Thử thách GitHub Copilot Agent 🚀

Sử dụng chế độ Agent để hoàn thành thử thách sau:

Mô tả: Khám phá các tính năng của một trình soạn thảo mã hoặc IDE hiện đại và chứng minh cách nó có thể cải thiện quy trình làm việc của bạn như một nhà phát triển web.

Yêu cầu: Chọn một trình soạn thảo mã hoặc IDE (như Visual Studio Code, WebStorm, hoặc một IDE dựa trên đám mây). Liệt kê ba tính năng hoặc tiện ích mở rộng giúp bạn viết, gỡ lỗi, hoặc duy trì mã hiệu quả hơn. Đối với mỗi tính năng, cung cấp một giải thích ngắn gọn về cách nó mang lại lợi ích cho quy trình làm việc của bạn.

🚀 Thử thách

Được rồi, thám tử, sẵn sàng cho vụ án đầu tiên của bạn chưa?

Bây giờ bạn đã có nền tảng tuyệt vời này, tôi có một cuộc phiêu lưu sẽ giúp bạn thấy thế giới lập trình đa dạng và hấp dẫn như thế nào. Và nghe này – đây không phải là về việc viết mã ngay bây giờ, vì vậy đừng áp lực nhé! Hãy nghĩ rằng bạn là một thám tử ngôn ngữ lập trình trong vụ án thú vị đầu tiên của mình!

Nhiệm vụ của bạn, nếu bạn chọn chấp nhận:

  1. Trở thành nhà thám hiểm ngôn ngữ: Chọn ba ngôn ngữ lập trình từ ba lĩnh vực hoàn toàn khác nhau – có thể là một ngôn ngữ xây dựng trang web, một ngôn ngữ tạo ứng dụng di động, và một ngôn ngữ xử lý dữ liệu cho các nhà khoa học. Tìm ví dụ về cùng một nhiệm vụ đơn giản được viết bằng mỗi ngôn ngữ. Tôi hứa bạn sẽ hoàn toàn ngạc nhiên khi thấy chúng có thể khác nhau như thế nào trong khi làm cùng một việc!

  2. Khám phá câu chuyện nguồn gốc của chúng: Điều gì làm cho mỗi ngôn ngữ trở nên đặc biệt? Đây là một sự thật thú vị – mỗi ngôn ngữ lập trình đều được tạo ra vì ai đó nghĩ rằng, "Bạn biết không? Phải có một cách tốt hơn để giải quyết vấn đề cụ thể này." Bạn có thể tìm ra những vấn đề đó là gì không? Một số câu chuyện này thực sự rất thú vị!

  3. Gặp gỡ cộng đồng của họ: Tìm hiểu cách mỗi cộng đồng của ngôn ngữ đó chào đón và đam mê. Một số có hàng triệu nhà phát triển chia sẻ kiến thức và giúp đỡ lẫn nhau, những cộng đồng khác thì nhỏ hơn nhưng cực kỳ gắn bó và hỗ trợ. Bạn sẽ thích thú khi thấy những tính cách khác nhau mà các cộng đồng này có!

  4. Lắng nghe cảm giác của bạn: Ngôn ngữ nào cảm thấy dễ tiếp cận nhất với bạn ngay bây giờ? Đừng lo lắng về việc đưa ra lựa chọn "hoàn hảo" – chỉ cần lắng nghe cảm giác của bạn! Thực sự không có câu trả lời sai ở đây, và bạn luôn có thể khám phá những ngôn ngữ khác sau này.

Công việc thám tử bổ sung: Xem liệu bạn có thể khám phá những trang web hoặc ứng dụng lớn nào được xây dựng bằng mỗi ngôn ngữ. Tôi đảm bảo bạn sẽ ngạc nhiên khi biết những gì đang vận hành Instagram, Netflix, hoặc trò chơi di động mà bạn không thể ngừng chơi!

💡 Nhớ rằng: Bạn không cần phải trở thành chuyên gia trong bất kỳ ngôn ngữ nào hôm nay. Bạn chỉ cần làm quen với khu vực trước khi quyết định nơi bạn muốn bắt đầu. Hãy dành thời gian, tận hưởng nó, và để sự tò mò dẫn dắt bạn!

Hãy ăn mừng những gì bạn đã khám phá!

Trời ơi, hôm nay bạn đã tiếp thu rất nhiều thông tin tuyệt vời! Tôi thực sự háo hức xem bạn đã học được bao nhiêu từ hành trình tuyệt vời này. Và nhớ rằng – đây không phải là bài kiểm tra mà bạn cần phải làm mọi thứ hoàn hảo. Đây giống như một lễ kỷ niệm về tất cả những điều thú vị bạn đã học được về thế giới hấp dẫn mà bạn sắp bước vào!

Tham gia bài kiểm tra sau bài học

Ôn tập & Tự học

Hãy dành thời gian khám phá và tận hưởng nó!

Hôm nay bạn đã đi được một chặng đường dài, và đó là điều đáng tự hào! Bây giờ đến phần thú vị – khám phá những chủ đề khiến bạn tò mò. Nhớ rằng, đây không phải là bài tập về nhà – đây là một cuộc phiêu lưu!

Khám phá sâu hơn những gì làm bạn hứng thú:

Thực hành với các ngôn ngữ lập trình:

  • Truy cập trang web chính thức của 2-3 ngôn ngữ mà bạn thấy thú vị. Mỗi ngôn ngữ đều có cá tính và câu chuyện riêng!
  • Thử một số sân chơi mã trực tuyến như CodePen, JSFiddle, hoặc Replit. Đừng ngại thử nghiệm – bạn không thể làm hỏng gì cả!
  • Đọc về cách ngôn ngữ yêu thích của bạn ra đời. Thật sự, một số câu chuyện nguồn gốc này rất thú vị và sẽ giúp bạn hiểu tại sao ngôn ngữ hoạt động theo cách nó làm.

Làm quen với công cụ mới của bạn:

  • Tải xuống Visual Studio Code nếu bạn chưa làm – nó miễn phí và bạn sẽ thích nó!
  • Dành vài phút để duyệt qua thị trường Extensions. Nó giống như một cửa hàng ứng dụng cho trình soạn thảo mã của bạn!
  • Mở công cụ dành cho nhà phát triển của trình duyệt và chỉ cần nhấp xung quanh. Đừng lo lắng về việc hiểu mọi thứ – chỉ cần làm quen với những gì có ở đó.

Tham gia cộng đồng:

  • Theo dõi một số cộng đồng nhà phát triển trên Dev.to, Stack Overflow, hoặc GitHub. Cộng đồng lập trình rất chào đón người mới!
  • Xem một số video lập trình dành cho người mới bắt đầu trên YouTube. Có rất nhiều nhà sáng tạo tuyệt vời ngoài kia, họ hiểu cảm giác khi mới bắt đầu học lập trình.
  • Hãy cân nhắc tham gia các buổi gặp mặt tại địa phương hoặc các cộng đồng trực tuyến. Tin tôi đi, các lập trình viên rất thích giúp đỡ người mới!

🎯 Nghe này, đây là điều tôi muốn bạn nhớ: Bạn không cần phải trở thành một chuyên gia lập trình ngay lập tức! Hiện tại, bạn chỉ đang làm quen với thế giới tuyệt vời mà bạn sắp trở thành một phần của nó. Hãy dành thời gian, tận hưởng hành trình, và nhớ rằng – mọi lập trình viên mà bạn ngưỡng mộ đều đã từng ngồi đúng vị trí của bạn bây giờ, cảm thấy hào hứng và có thể hơi choáng ngợp. Điều đó hoàn toàn bình thường, và nó có nghĩa là bạn đang đi đúng hướng!

Bài tập

Đọc tài liệu

💡 Một chút gợi ý cho bài tập của bạn: Tôi rất mong bạn khám phá một số công cụ mà chúng ta chưa đề cập đến! Bỏ qua các trình soạn thảo, trình duyệt và công cụ dòng lệnh mà chúng ta đã nói đến – có cả một vũ trụ tuyệt vời của các công cụ phát triển đang chờ bạn khám phá. Hãy tìm những công cụ được duy trì thường xuyên và có cộng đồng sôi động, hữu ích (những công cụ này thường có hướng dẫn tốt nhất và những người hỗ trợ nhiệt tình nhất khi bạn gặp khó khăn và cần sự giúp đỡ thân thiện).

Tuyên bố miễn trừ trách nhiệm:
Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI Co-op Translator. Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng các bản dịch tự động có thể chứa lỗi hoặc không chính xác. Tài liệu gốc bằng ngôn ngữ bản địa nên được coi là nguồn thông tin chính thức. Đối với thông tin quan trọng, nên sử dụng dịch vụ dịch thuật chuyên nghiệp bởi con người. Chúng tôi không chịu trách nhiệm cho bất kỳ sự hiểu lầm hoặc diễn giải sai nào phát sinh từ việc sử dụng bản dịch này.