JavaScript: Cách viết chương trình JavaScript đầu tiên

Giới thiệu

Chương trình "Hello, World!" là một truyền thống cổ điển và lâu đời trong lập trình máy tính. Đây là một chương trình đầu tiên ngắn gọn và hoàn chỉnh dành cho người mới bắt đầu và đó là một cách tốt để đảm bảo rằng môi trường của bạn được định cấu hình đúng cách.

Bài hướng dẫn này sẽ hướng dẫn bạn cách tạo chương trình này bằng JavaScript. Tuy nhiên, để làm cho chương trình thú vị hơn, chúng ta sẽ sửa đổi chương trình “Hello, World!” để nó hỏi người dùng tên của họ. Sau đó, chúng ta sẽ sử dụng tên trong một lời chào. Khi bạn hoàn thành hướng dẫn này, bạn sẽ có một chương trình tương tác “Hello, World!”.

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

Bạn có thể hoàn thành hướng dẫn này bằng cách sử dụng Console dành cho nhà phát triển JavaScript trong trình duyệt web của mình. Trước khi bắt đầu hướng dẫn này, bạn nên làm quen với công cụ này. Để tìm hiểu thêm về nó, bạn có thể đọc hướng dẫn của chúng tôi “Cách sử dụng Console dành cho nhà phát triển JavaScript”.

Tạo chương trình "Hello, World!"

Trước tiên bạn hãy mở Console JavaScript của trình duyệt web ưa thích của bạn.

Có hai cách chính mà chúng ta có thể thực hiện để tạo chương trình "Hello, World!" bằng JavaScript, với phương thức alert() và phương thức console.log().

Sử dụng alert()

Cách đầu tiên mà chúng ta có thể viết chương trình này là sử dụng phương thức alert(), phương thức này sẽ hiển thị một hộp cảnh báo trên cửa sổ hiện tại của bạn với một thông báo được chỉ định (trong trường hợp này, nó sẽ là “Hello, World!”) và một nút OK cho phép người dùng đóng cảnh báo.

Trong phương thức, chúng ta sẽ truyền dữ liệu chuỗi làm tham số. Chuỗi này sẽ được đặt thành giá trị Hello, World! để giá trị đó sẽ được in vào hộp cảnh báo.

Ta sẽ đặt chuỗi trong dấu ngoặc đơn của phương thức alert(). Chúng ta sẽ kết thúc câu lệnh JavaScript của mình bằng dấu chấm phẩy.

alert("Hello, World!");

Khi bạn nhấn phím ENTER sau dòng lệnh JavaScript của mình, bạn sẽ thấy cảnh báo sau bật lên trong trình duyệt của bạn:

Console cũng sẽ in kết quả đánh giá một biểu thức, kết quả sẽ là undefined nếu như biểu thức không trả về một cách rõ ràng một thứ gì đó.

Thông báo bật lên có thể tẻ nhạt khi tiếp tục nhấp ra, vì vậy chúng ta hãy xem xét cách tạo chương trình tương tự bằng cách đăng nhập nó vào Console với console.log().

Sử dụng console.log()

Chúng ta có thể in chuỗi bằng cách sử dụng phương thức console.log(). Sử dụng tùy chọn này tương tự như làm việc với ngôn ngữ lập trình trong môi trường đầu cuối của máy tính.

Như chúng ta đã làm với alert(), chúng ta sẽ truyền chuỗi "Hello, World!" vào phương thức console.log() trong cặp ngoặc đơn của nó. Chúng ta sẽ kết thúc câu lệnh của mình bằng dấu chấm phẩy, đây là một điển hình của các quy ước cú pháp JavaScript.

console.log("Hello, World!");

Sau khi nhấn ENTER, thì thông báo Hello, World! sẽ được in ra Console:

Hello, World!

Trong phần tiếp theo, ta sẽ xem xét cách làm cho chương trình này có thể tương tác hơn cho người dùng.

Prompt

Ta có thể mời người dùng nhập vào tên của họ, sau đó ta có thể tùy chỉnh đầu ra.

Đối với mỗi phương thức JavaScript mà ta đã sử dụng ở trên, ta có thể bắt đầu bằng một dòng nhắc nhập (prompt). Ta sẽ sử dụng phương thức của JavaScript là prompt() và truyền vào nó chuỗi "What is your name?" để hỏi người dùng tên của họ. Đầu vào được nhập bởi người dùng sau đó sẽ được lưu trữ trong biến name.

let name = prompt("What is your name?");

Khi nhấn ENTER để chạy dòng mã này, bạn sẽ nhận được lời nhắc bật lên như sau:

Hộp thoại bật lên trên cửa sổ trình duyệt web của bạn bao gồm một trường văn bản để người dùng nhập liệu. Khi người dùng nhập giá trị vào trường văn bản, họ sẽ phải nhấp vào OK để giá trị được lưu trữ. Người dùng cũng có thể ngăn một giá trị được ghi lại bằng cách nhấp vào nút Cancel.

Điều quan trọng là chỉ sử dụng phương thức JavaScript prompt() khi nó có ý nghĩa trong ngữ cảnh của chương trình, vì việc lạm dụng nó có thể trở nên tẻ nhạt đối với người dùng.

Tại thời điểm này, hãy nhập tên mà bạn muốn chương trình chào. Đối với ví dụ này, ta sẽ sử dụng tên Sammy.

Bây giờ ta có thể chuyển sang sử dụng giá trị đó để chào người dùng.

Chào người dùng với alert()

Như đã thảo luận ở trên, phương thức alert() tạo một hộp bật lên trên cửa sổ trình duyệt. Chúng ta có thể sử dụng phương thức này để chào người dùng bằng cách sử dụng biến name.

Ta sẽ sử dụng cách ghép chuỗi để viết lời chào:

"Hello, " + name + "!"

Ở trên ta đã kết hợp hai chuỗi "Hello, " và "!"với biến name ở giữa. Bây giờ, chúng ta có thể truyền biểu thức này cho phương thức alert().

alert("Hello, " + name + "!");

Khi ta nhấn ENTER thì sẽ nhận được hộp thoại sau trên màn hình:

Bây giờ chúng ta hãy viết lại điều này để thay thế đầu ra mà được in ra Console.

Chào người dùng với console.log()

Như chúng ta đã xem xét trong phần trước, phương thức console.log() in kết quả ra Console, giống như hàm print() có thể in đầu ra tới thiết bị đầu cuối bằng Python.

Ta sẽ sử dụng cùng một chuỗi được nối mà ta đã sử dụng với phương thức alert(), kết hợp các chuỗi "Hello, " và "!" với biến name:

"Hello, " + name + "!"

Toàn bộ biểu thức này sẽ được đặt trong dấu ngoặc đơn của console.log() để nhận được một lời chào dưới dạng đầu ra (output).

console.log("Hello, " + name + "!");

Đối với người dùng có tên Sammy, kết quả trên Console sẽ như sau:  

Hello, Sammy!

Bây giờ bạn có một chương trình JavaScript lấy đầu vào từ người dùng và in nó trở lại màn hình.

Kết luận

Giờ thì bạn đã biết cách viết câu nói cổ điển “Hello, World!” cũng như nhắc người dùng nhập và hiển thị đầu ra, bạn có thể làm việc để mở rộng chương trình của mình hơn nữa. Ví dụ: hỏi màu yêu thích của người dùng và yêu cầu chương trình nói rằng màu yêu thích của họ là màu gì. Bạn thậm chí có thể thử sử dụng kỹ thuật tương tự này để tạo một chương trình Mad Lib.