Cách viết chương trình JavaScript đầu tiên của bạn
Câu "Xin chào, Thế giới!" chương trình 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 cấu hình đúng cách.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, ta sẽ sửa đổi câu “Hello, World!” Truyền thống chương trình để nó hỏi user tên của họ. Sau đó, ta sẽ sử dụng tên trong lời chào. Khi bạn hoàn thành hướng dẫn này, bạn sẽ có một tương tác “Xin chào, Thế giới!” chương trình.
Yêu cầu
Bạn có thể hoàn thành hướng dẫn này bằng cách sử dụng Control panel dành cho nhà phát triển JavaScript trong trình duyệt web của bạn . 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 ta “ Cách sử dụng Control panel dành cho nhà phát triển JavaScript ”.
Tạo "Xin chào, Thế giới!" Chương trình
Để viết "Xin chào, Thế giới!" , trước tiên hãy mở Control panel JavaScript của trình duyệt web bạn muốn .
Có hai cách chính mà ta có thể thực hiện để tạo "Hello, World!" chương trình 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à 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à OK cho phép user đóng cảnh báo.
Trong phương thức, ta sẽ chuyển kiểu 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.
Để viết kiểu đầu tiên này của "Xin chào, Thế giới!" chương trình, ta sẽ đặt chuỗi trong dấu ngoặc đơn của phương thức alert() . Ta sẽ kết thúc câu lệnh JavaScript của bạn bằng dấu chấm phẩy .
alert("Hello, World!"); Khi bạn nhấn ENTER sau dòng JavaScript của bạn , bạn sẽ thấy cảnh báo sau bật lên trong trình duyệt của bạn :
Control panel cũng sẽ in ra kết quả đánh giá một biểu thức, kết quả này sẽ được đọc là undefined khi biểu thức không trả về một thứ gì đó một cách rõ ràng.
Thông báo bật lên có thể tẻ nhạt khi tiếp tục nhấp ra, vì vậy 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 Control panel bằng console.log() .
Sử dụng console.log()
Ta có thể in cùng một chuỗi, ngoại trừ lần này ra console JavaScript, 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 terminal của máy tính.
Như ta đã làm với alert() , ta sẽ vượt qua "Hello, World!" chuỗi vào phương thức console.log() , giữa các dấu ngoặc đơn của nó. Ta sẽ kết thúc câu lệnh của bạn bằng dấu chấm phẩy, như là điển hình của các quy ước cú pháp JavaScript.
console.log("Hello, World!"); Sau khi ta nhấn ENTER , Hello, World! thông báo sẽ được in ra Control panel :
OutputHello, World! Trong phần tiếp theo, ta sẽ xem xét cách làm cho chương trình này tương tác hơn cho user .
Nhắc đầu vào
Mỗi khi ta chạy "Hello, World!" chương trình, nó tạo ra cùng một kết quả . Hãy nhắc người đang chạy chương trình của ta tên của họ. Sau đó, ta có thể sử dụng tên đó để tùy chỉnh kết quả .
Đố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. Ta sẽ sử dụng phương thức prompt() của JavaScript và chuyển cho nó chuỗi "What is your name?" để hỏi user cho tên của họ. Đầu vào được nhập bởi user sau đó sẽ được lưu trữ trong name biến . Ta sẽ kết thúc biểu thức của bạn bằng dấu chấm phẩy.
let name = prompt("What is your name?"); Khi bạn nhấn ENTER để chạy dòng mã này, bạn sẽ nhận được một dấu nhắc bật lên:
Hộp thoại bật lên trên cửa sổ trình duyệt web bao gồm một trường văn bản để user nhập đầu vào. Khi user 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ữ. User cũng có thể ngăn ghi lại giá trị 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 user .
Đế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 đã thu thập giá trị của tên user , ta có thể chuyển sang sử dụng giá trị đó để chào user .
Chào user 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. Ta có thể sử dụng phương pháp này để chào user bằng cách sử dụng name biến.
Ta sẽ sử dụng nối chuỗi để viết lời chào "Xin chào!" địa chỉ trực tiếp cho user . Vì vậy, hãy nối chuỗi Hello với biến cho name:
"Hello, " + name + "!" Ta đã kết hợp hai chuỗi, "Hello, " và "!" với biến name ở giữa. Bây giờ, ta có thể chuyển biểu thức này cho phương thức alert() .
alert("Hello, " + name + "!"); Khi ta nhấn ENTER tại đây, ta sẽ nhận được hộp thoại sau trên màn hình:
Trong trường hợp này, tên của user là Sammy, vì vậy kết quả đã chào Sammy.
Bây giờ ta hãy viết lại điều này để thay vào đó kết quả được in ra Control panel .
Chào user bằng console.log()
Như ta đã xem xét trong phần trước, phương thức console.log() in kết quả tới Console, giống như hàm print() có thể in kết quả tới terminal 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 phương thức console.log() để ta nhận được một lời chào dưới dạng kết quả .
console.log("Hello, " + name + "!"); Đối với user có tên Sammy, kết quả trên Control panel sẽ như sau:
OutputHello, Sammy! Đến đây bạn có một chương trình JavaScript lấy đầu vào từ user 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!” chương trình, cũng như nhắc user nhập và hiển thị kết quả , bạn có thể làm việc để mở rộng chương trình của bạn hơn nữa. Ví dụ: hỏi màu yêu thích của user 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 đỏ. Bạn thậm chí có thể thử sử dụng kỹ thuật tương tự này để tạo chương trình Mad Lib.
Các tin liên quan
Hiểu mảng trong JavaScript2017-07-28
Làm thế nào để làm toán trong JavaScript với các toán tử
2017-07-20
Cách lập chỉ mục, tách và thao tác chuỗi trong JavaScript
2017-07-14
Object.values và Object.entries trong JavaScript
2017-07-12
Cách làm việc với chuỗi trong JavaScript
2017-07-11
Giới thiệu về Maps bằng JavaScript
2017-07-06
Hiểu cú pháp và cấu trúc mã trong JavaScript
2017-07-05
Cách thêm JavaScript vào HTML
2017-06-30
Cách sử dụng control panel dành cho nhà phát triển JavaScript
2017-06-29
Cách viết comment bằng JavaScript
2017-06-20
