Lập trình động với JavaScript

Điều kiện tiên quyết

Trước khi bắt đầu mô-đun này, bạn không cần có kiến thức JavaScript trước, nhưng bạn nên đã hoàn thành các mô-đun trước trong khóa học. Bạn nên biết ít nhất về HTML và các nguyên tắc cơ bản của CSS.

Hướng dẫn và thử thách

JavaScript là gì?

Chào mừng bạn đến với khóa học JavaScript dành cho người mới bắt đầu của MDN! Trong bài đầu tiên này, chúng ta sẽ xem xét JavaScript ở mức độ tổng quan, trả lời các câu hỏi như "nó là gì?", "nó đang làm gì?", và đảm bảo rằng bạn đã nắm được mục đích của JavaScript.

Làm quen với JavaScript lần đầu

Bây giờ bạn đã học được một số lý thuyết về JavaScript và những gì bạn có thể làm với nó, chúng ta sẽ cung cấp cho bạn một khóa học thực hành chuyên sâu về các tính năng cơ bản của JavaScript thông qua một hướng dẫn hoàn toàn thực tế. Ở đây, bạn sẽ xây dựng một trò chơi "Đoán số" đơn giản, từng bước một.

Điều gì đã xảy ra? Gỡ lỗi JavaScript

Khi bạn xây dựng trò chơi "Đoán số" trong bài trước, bạn có thể thấy rằng nó không hoạt động. Đừng lo sợ — bài viết này nhằm mục đích giúp bạn thoát khỏi những vấn đề như vậy bằng cách cung cấp cho bạn một số mẹo đơn giản về cách tìm và sửa lỗi trong chương trình JavaScript.

Lưu trữ thông tin bạn cần — Biến

Sau khi đọc một vài bài trước, bạn sẽ biết JavaScript là gì, nó có thể làm gì cho bạn, cách sử dụng nó cùng với các công nghệ web khác và những tính năng chính của nó trông như thế nào ở mức độ tổng quan. Trong bài này, chúng ta sẽ đi vào những điều cơ bản thực sự, xem xét cách làm việc với những khối xây dựng cơ bản nhất của JavaScript — Biến.

Toán học cơ bản trong JavaScript — số và toán tử

Ở điểm này trong khóa học, chúng ta thảo luận về toán học trong JavaScript — cách chúng ta có thể kết hợp các toán tử và các tính năng khác để thao tác thành công với các con số theo ý muốn.

Xử lý văn bản — chuỗi trong JavaScript

Tiếp theo, chúng ta sẽ chú ý đến chuỗi — đây là cách các đoạn văn bản được gọi trong lập trình. Trong bài này, chúng ta sẽ xem xét tất cả những điều phổ biến mà bạn thực sự cần biết về chuỗi khi học JavaScript, chẳng hạn như tạo chuỗi, thoát dấu ngoặc kép trong chuỗi và nối chúng lại với nhau.

Các phương thức chuỗi hữu ích

Bây giờ chúng ta đã xem xét những điều cơ bản nhất về chuỗi, hãy nâng cao hơn và bắt đầu nghĩ về những thao tác hữu ích mà chúng ta có thể thực hiện trên chuỗi với các phương thức tích hợp, chẳng hạn như tìm độ dài của một chuỗi văn bản, nối và tách chuỗi, thay thế một ký tự trong chuỗi bằng ký tự khác, và nhiều hơn nữa.

Mảng

Trong bài học này, chúng ta sẽ xem xét mảng — một cách gọn gàng để lưu trữ danh sách các mục dữ liệu dưới một tên biến duy nhất. Ở đây chúng ta xem xét lý do tại sao điều này hữu ích, sau đó khám phá cách tạo mảng, truy xuất, thêm và xóa các mục được lưu trữ trong mảng, và nhiều hơn nữa.

Thử thách: Trình tạo câu chuyện ngớ ngẩn ^Challenge

Trong thử thách này, bạn được yêu cầu lấy một số kiến thức đã học trong mô-đun này và áp dụng chúng để tạo ra một ứng dụng thú vị tạo ngẫu nhiên các câu chuyện ngớ ngẩn. Trên đường đi, chúng ta sẽ kiểm tra kiến thức của bạn về biến, toán học, chuỗi và mảng.

Đưa ra quyết định trong mã — câu lệnh điều kiện

Trong bất kỳ ngôn ngữ lập trình nào, mã cần đưa ra quyết định và thực hiện hành động tương ứng tùy thuộc vào các đầu vào khác nhau. Ví dụ, trong một trò chơi, nếu số mạng sống của người chơi là 0, thì đó là trò chơi kết thúc. Trong một ứng dụng thời tiết, nếu xem vào buổi sáng, hãy hiển thị đồ họa mặt trời mọc; hiển thị ngôi sao và mặt trăng nếu là ban đêm. Trong bài này, chúng ta sẽ khám phá cách các câu lệnh điều kiện trong JavaScript hoạt động.

Vòng lặp mã

Các ngôn ngữ lập trình rất hữu ích để hoàn thành nhanh chóng các tác vụ lặp đi lặp lại, từ nhiều phép tính cơ bản đến bất kỳ tình huống nào khác khi bạn có nhiều mục công việc tương tự cần hoàn thành. Ở đây chúng ta sẽ xem xét các cấu trúc vòng lặp có sẵn trong JavaScript để xử lý những nhu cầu như vậy.

Hàm — các khối mã có thể tái sử dụng

Một khái niệm thiết yếu khác trong lập trình là hàm, cho phép bạn lưu trữ một đoạn mã thực hiện một tác vụ duy nhất bên trong một khối được xác định, sau đó gọi mã đó bất cứ khi nào bạn cần bằng một lệnh ngắn gọn — thay vì phải gõ lại cùng một mã nhiều lần. Trong bài này, chúng ta sẽ khám phá các khái niệm cơ bản đằng sau hàm như cú pháp cơ bản, cách gọi và định nghĩa chúng, phạm vi và tham số.

Xây dựng hàm của riêng bạn

Với hầu hết các lý thuyết thiết yếu đã được đề cập trong bài trước, bài này cung cấp kinh nghiệm thực tế. Ở đây bạn sẽ thực hành xây dựng hàm tùy chỉnh của riêng mình. Trên đường đi, chúng ta cũng sẽ giải thích một số chi tiết hữu ích về cách xử lý hàm.

Giá trị trả về của hàm

Có một khái niệm thiết yếu cuối cùng về hàm mà chúng ta cần thảo luận — giá trị trả về. Một số hàm không trả về giá trị đáng kể, nhưng những hàm khác thì có. Điều quan trọng là phải hiểu các giá trị của chúng là gì, cách sử dụng chúng trong mã của bạn và cách làm cho hàm trả về các giá trị hữu ích. Chúng ta sẽ đề cập tất cả những điều này dưới đây.

Giới thiệu về sự kiện

Trong bài này, chúng ta thảo luận về một số khái niệm quan trọng xung quanh sự kiện và xem xét những nguyên tắc cơ bản về cách chúng hoạt động trong trình duyệt.

Bong bóng sự kiện

Bài này giới thiệu các khái niệm về bong bóng sự kiện, bắt sự kiện và ủy quyền sự kiện, tất cả đều liên quan đến những gì xảy ra khi bạn thêm trình lắng nghe vào một phần tử chứa phần tử khác và sự kiện sau đó xảy ra với phần tử được chứa.

Thử thách: Thư viện hình ảnh ^Challenge

Bây giờ chúng ta đã xem xét các khối xây dựng cơ bản của JavaScript, chúng ta sẽ kiểm tra kiến thức của bạn về vòng lặp, hàm, câu lệnh điều kiện và sự kiện bằng cách yêu cầu bạn xây dựng một mục khá phổ biến mà bạn sẽ thấy trên nhiều trang web — thư viện hình ảnh được hỗ trợ bởi JavaScript.

Cơ bản về đối tượng

Trong bài này, chúng ta sẽ xem xét cú pháp đối tượng JavaScript cơ bản và xem lại một số tính năng JavaScript mà chúng ta đã thấy trước đó trong khóa học, nhấn mạnh lại thực tế rằng nhiều tính năng bạn đã xử lý đều là đối tượng.

Giới thiệu về lập trình DOM

Khi viết các trang web và ứng dụng, một trong những điều phổ biến nhất bạn muốn làm là thay đổi cấu trúc tài liệu theo một cách nào đó. Điều này thường được thực hiện bằng cách thao tác với Document Object Model (DOM) thông qua một tập hợp các API trình duyệt tích hợp để kiểm soát HTML và thông tin styling. Trong bài này, chúng ta sẽ giới thiệu cho bạn về lập trình DOM.

Thực hiện yêu cầu mạng với JavaScript

Một tác vụ rất phổ biến khác trong các trang web và ứng dụng hiện đại là thực hiện các yêu cầu mạng để lấy các mục dữ liệu riêng lẻ từ máy chủ để cập nhật các phần của trang web mà không cần phải tải toàn bộ trang mới. Chi tiết tưởng chừng nhỏ này đã có tác động rất lớn đến hiệu suất và hành vi của các trang web, vì vậy trong bài này, chúng ta sẽ giải thích khái niệm và xem xét các công nghệ làm cho điều đó trở nên khả thi.

Làm việc với JSON

JavaScript Object Notation (JSON) là một định dạng dựa trên văn bản tiêu chuẩn để biểu diễn dữ liệu có cấu trúc dựa trên cú pháp đối tượng JavaScript. Nó thường được sử dụng để truyền dữ liệu trong các ứng dụng web (ví dụ: gửi một số dữ liệu từ máy chủ đến máy khách, để có thể hiển thị trên trang web, hoặc ngược lại). Bạn sẽ gặp nó khá thường xuyên, vì vậy trong bài này, chúng ta cung cấp cho bạn tất cả những gì bạn cần để làm việc với JSON bằng JavaScript, bao gồm phân tích JSON để bạn có thể truy cập dữ liệu bên trong và tạo JSON.

Thử thách: Xây dựng giao diện người dùng dữ liệu ngôi nhà ^Challenge

Trong thử thách này, chúng ta sẽ yêu cầu bạn viết một số JavaScript cho trang tìm kiếm nhà trên một trang web bất động sản. Điều này sẽ bao gồm lấy dữ liệu JSON, lọc dữ liệu đó dựa trên các giá trị được nhập vào các điều khiển biểu mẫu được cung cấp và hiển thị dữ liệu đó lên giao diện người dùng. Trên đường đi, chúng ta cũng sẽ kiểm tra kiến thức của bạn về câu lệnh điều kiện, vòng lặp, mảng và các phương thức mảng, và nhiều hơn nữa.

Gỡ lỗi JavaScript và xử lý lỗi

Trong bài học này, chúng ta sẽ trở lại chủ đề gỡ lỗi JavaScript (mà chúng ta đã xem xét lần đầu tiên trong Điều gì đã xảy ra?). Ở đây chúng ta sẽ đi sâu hơn vào các kỹ thuật để theo dõi lỗi, nhưng cũng xem xét cách lập trình phòng thủ và xử lý lỗi trong mã của bạn, tránh các vấn đề ngay từ đầu.

Kiểm tra kỹ năng của bạn

Bạn sẽ tìm thấy các bài viết "Kiểm tra kỹ năng của bạn" được đặt giữa các bài hướng dẫn để kiểm tra xem bạn có ghi nhớ những thông tin quan trọng nhất trước khi tiếp tục hay không. Nếu bạn muốn khám phá tất cả chúng cùng nhau, bạn có thể tìm thấy chúng được liệt kê tại Kiểm tra kỹ năng: JavaScript.

Xem thêm

Scrimba: Học JavaScript ^{MDN learning partner}

Khóa học Học JavaScript của Scrimba dạy bạn JavaScript thông qua việc giải quyết hơn 140 thử thách lập trình tương tác, xây dựng các dự án bao gồm trò chơi, tiện ích mở rộng trình duyệt và thậm chí là ứng dụng di động. Scrimba có các bài học tương tác thú vị được giảng dạy bởi các giáo viên có kiến thức.

Học JavaScript

Một tài nguyên xuất sắc dành cho các nhà phát triển web đầy tham vọng — Học JavaScript trong môi trường tương tác, với các bài học ngắn và kiểm tra tương tác, được hướng dẫn bởi đánh giá tự động. 40 bài học đầu tiên là miễn phí và khóa học đầy đủ có sẵn với mức phí một lần nhỏ.

• Overview: Các mô-đun học tập cốt lõi
• Next