Javascript from Zero to Hero (Phần 1): Into Programming

Javascript hiện nay ngày càng phổ biến, ngôn ngữ này được sử dụng trong lập trình: front-end, back-end, app desktop, mobile, IoT, AI,…. Bài viết này mở đầu cho 1 series hướng dẫn về Javascript với mục đích đào sâu và tìm hiểu cách thức hoạt động nó như thế nào, từ đó sẽ giúp việc viết code tối ưu và đạt hiệu suất cao hơn. Trong series bài viết này, mình có sử dụng quyển sách: “You Don’t Know JS” của tác giả Kyle Simpson, đây là một quyển sách khá hay, giúp người đọc hiểu rõ cách thức hoạt động của Javascript như thế nào, format bài viết sẽ bám sát quyển sách này, mọi người có thể đọc online quyển sách này tại đây: https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed.

Code

Một chương trình, hay thường được gọi là source code hoặc đơn giản gọi là code, là một tập những chỉ lệnh đặc biết giúp máy tính biết phải làm những công việc gì. Thường thường code được lưu vào trong tệp văn bản, nhưng đối với Javascript bạn cũng có thể viết code trực tiếp ở developer console ở trình duyệt. Đa số, để mở developer console ở trình duyệt, sử dụng tổ hợp phím ctrl + shift + p. Các quy tắc cho định dạng hợp lệ và sự kết hợp của các chỉ lệnh được gọi là ngôn ngữ máy tính, thỉnh thoảng còn gọi là cú pháp. Giống như trong Tiếng Anh, bạn sử dụng từ và dấu câu để đánh vần và tạo ra một câu hợp lệ.

Statements

Trong ngôn ngữ máy tính, một câu lệnh(statement) là tập hợp của các từ, toán tử và toán hạng. Trong Javascript, một câu lệnh sẽ giống như dưới đây: Ở câu lệnh trên có 4 biểu thức trong đó: • 2 là “literal value expression”: Bản thân 2 là một giá trị. • b là biểu thức biến (variable expression): Lấy giá trị hiện tại được lưu trong b. • b * 2 là một biểu thức toán học: Thực hiện phép nhân. • a = b * 2 là một biểu thức gán giá trị: Lấy kết quả của phép toán b * 2 rồi gán cho biến a. Một biểu thức mà đứng một mình thường được gọi là biểu thức câu lệnh, giống như dưới đây:

Biểu thức câu lệnh thường không được sử dụng và kém hiệu quả bởi vì chúng không có tác động tới chương trình. Chúng đơn giản chỉ là giá trị được lưu trong b và nhân với 2, nhưng sẽ không làm gì với kết quả đó. Một biểu thức thông thường khác nữa là call expression statement, bởi vì toàn bộ câu lệnh là hàm gọi đến biểu thức của chính nó:

Executing a Program

Một câu lệnh như a = b * 2 hữu dụng cho developer khi đọc và viết code, nhưng thực tế đây không phải là dạng mà máy tính có thể hiểu được. Vì vậy, có một tiệc ích đặc biệt (trình thông dịch hoặc biên dịch) được sử dụng để dịch những dòng code bạn viết thành mã máy mà máy tính có thể hiểu được. Đối với một số ngôn ngữ máy tính, quá trình dịch sang mã máy sẽ được thực hiện từ trên xuống dưới, từng dòng lệnh một, mỗi khi chương trình chạy đây được gọi là thông dịch. Đối với ngôn ngữ khác, quá trình dịch sẽ được hoàn thành trước đây gọi là biên dịch. Vì vậy, khi chương trình bạn chạy, cái thực sự được chạy là mã máy mà được biên dịch từ code bởi trình biên dịch. Thông thường, Javascript được gọi là ngôn ngữ thông dịch, bởi vì code của Javascript được xử lí mỗi khi chạy chúng. Nhưng đó không hoàn toàn chính xác. Engine của Javascript đã biên dịch chương trình nhanh chóng và ngay sau đó chạy những dòng code đã được biên dịch.

Try It Yourself

Ở phần này sẽ này sẽ giới thiệu những khái niệm lập trình bằng những đoạn code đơn giản, dĩ nhiên sẽ được viết bằng Javascript. Để hiểu rõ những khái niệm này, cần dành nhiều thời gian để luyện tập và tự tay gõ những dòng code. Cách dễ nhất để làm điều đó là mở trình duyệt lên và Ctrl + Shift + I để mở Developer tool. Để hiểu rõ hơn về cách sử dụng Developer tool, bạn có thể đọc “Mastering The Developer Tools Console” tại đây (http://blog.teamtreehouse.com/mastering-developer-tools-console).

Hãy gõ đoạn code sau và xem cách hoạt động như nào:

Đây là kết quả khi chạy đoạn code trên Developer Tool:

Output

Ở đoạn code ví dụ trước, chúng ta sử dụng console.log(..). Cùng xem tác dụng của dòng code này. Có thể bạn đã đoán ra, đây chính xác là cách làm thế nào để chúng ta in ra đoạn text ở trong developer console. Có hai phần ở trong câu lệnh này chúng ta cần tìm hiểu. Đầu tiên, log(b) là một function. Điều gì sẽ xảy ra nếu chúng ta truyền biến b vào function này, function này sẽ lấy giá trị được lưu trong biến b và in ra màn hình console. Thứ hai, console. Là một object tham chiếu tới log(..) được đặt. Chúng ta sẽ tìm hiểu chi tiết về object và thuộc tính của nó ở phần sau. Một cách khác tạo ra output mà chúng ta có thể nhìn được, là chạy câu lệnh alert(..). Ví dụ:

Khi bạn chạy câu lệnh này, hãy để ý thay vì in output ra mình hình console, thì câu lệnh này sẽ hiện thị một hộp thoại popup với giá trị được trong biến b. Tuy nhiên, sử dụng console.log(..) sẽ thuận tiện hơn trong việc coding và chạy chương trình của bạn thay vì sử dụng alert(..).

Input

Trong khi thảo luận về output, chúng ta cũng phải quan tâm tới input (nhận thông tin từ người dùng). Cách phổ biến nhất là ở trong một trang HTML hiện thị ra một form cho bạn nhập thông tin vào đó, sau đó sử dụng JavaScript đọc những giá trị đó và lưu vào các biến trong chương trình của bạn. Có một cách dễ nhất để lấy input, và cách này sẽ được sử dụng xuyên suốt trong series này đó là sử dụng function prompt(..):

Bạn cũng có thể đoán, đoạn text bạn truyền vào prompt(..), ở trong ví dụ này là “Hay nhap tuoi cua ban:” sẽ được in ra trong hộp thoại popup. Kết quả sẽ như sau:

Khi nhập tuổi và ấn OK, kết quả sẽ như sau:

To be continue....