Thử thách chuỗi javascript

Nút. js là một nền tảng để xây dựng các ứng dụng máy chủ nhanh và có thể mở rộng bằng JavaScript. Nút. js là thời gian chạy và npm là Trình quản lý gói cho Nút. mô-đun js

Visual Studio Code có hỗ trợ sẵn các ngôn ngữ JavaScript và TypeScript cũng như Node. gỡ lỗi js. Tuy nhiên, để chạy một Node. js, bạn sẽ cần cài đặt Node. thời gian chạy js trên máy của bạn

Để bắt đầu hướng dẫn này, hãy cài đặt Node. js cho nền tảng của bạn. Trình quản lý gói Node được bao gồm trong Node. phân phối js. Bạn sẽ cần mở một thiết bị đầu cuối mới (dấu nhắc lệnh) để các công cụ dòng lệnh

var msg = 'Hello World';
console.log(msg);
9 và
var msg = 'Hello World';
console.log(msg);
0 có trên PATH của bạn

Để kiểm tra xem bạn có Node. js được cài đặt chính xác trên máy tính của bạn, hãy mở một thiết bị đầu cuối mới và nhập

var msg = 'Hello World';
console.log(msg);
1 và bạn sẽ thấy Nút hiện tại. phiên bản js được cài đặt

Linux. Có Node cụ thể. js có sẵn cho các hương vị khác nhau của Linux. Xem Cài đặt nút. js thông qua trình quản lý gói để tìm Nút. js và hướng dẫn cài đặt phù hợp với phiên bản Linux của bạn

Hệ thống con Windows cho Linux. Nếu bạn đang dùng Windows, WSL là một cách tuyệt vời để thực hiện Node. phát triển js. Bạn có thể chạy các bản phân phối Linux trên Windows và cài đặt Node. js vào môi trường Linux. Khi được kết hợp với tiện ích mở rộng WSL, bạn sẽ nhận được đầy đủ hỗ trợ chỉnh sửa và gỡ lỗi Mã VS khi chạy trong ngữ cảnh của WSL. Để tìm hiểu thêm, hãy đến phần Phát triển trong WSL hoặc thử hướng dẫn Làm việc trong WSL

Chào thế giới

Hãy bắt đầu bằng cách tạo Nút đơn giản nhất. ứng dụng js, "Xin chào thế giới"

Tạo một thư mục trống có tên "xin chào", điều hướng đến và mở Mã VS

mkdir hello
cd hello
code .

Mẹo. Bạn có thể mở tệp hoặc thư mục trực tiếp từ dòng lệnh. thời kì'. ' đề cập đến thư mục hiện tại, do đó Mã VS sẽ bắt đầu và mở thư mục

var msg = 'Hello World';
console.log(msg);
2

Từ thanh công cụ File Explorer, nhấn nút Tệp mới

Thử thách chuỗi javascript

và đặt tên cho tệp

var msg = 'Hello World';
console.log(msg);
3

Thử thách chuỗi javascript

Bằng cách sử dụng phần mở rộng tệp

var msg = 'Hello World';
console.log(msg);
4, Mã VS diễn giải tệp này dưới dạng JavaScript và sẽ đánh giá nội dung bằng dịch vụ ngôn ngữ JavaScript. Tham khảo chủ đề ngôn ngữ VS Code JavaScript để tìm hiểu thêm về hỗ trợ JavaScript

Tạo một biến chuỗi đơn giản trong

var msg = 'Hello World';
console.log(msg);
3 và gửi nội dung của chuỗi tới bàn điều khiển

var msg = 'Hello World';
console.log(msg);

Lưu ý rằng khi bạn gõ

var msg = 'Hello World';
console.log(msg);
6 IntelliSense trên đối tượng
var msg = 'Hello World';
console.log(msg);
7 sẽ tự động hiển thị cho bạn

Thử thách chuỗi javascript

Cũng lưu ý rằng Mã VS biết rằng

var msg = 'Hello World';
console.log(msg);
8 là một chuỗi dựa trên việc khởi tạo thành
var msg = 'Hello World';
console.log(msg);
9. Nếu bạn nhập
var msg = 'Hello World';
console.log(msg);
20, bạn sẽ thấy IntelliSense hiển thị tất cả các chức năng chuỗi có sẵn trên
var msg = 'Hello World';
console.log(msg);
8

Thử thách chuỗi javascript

Sau khi thử nghiệm với IntelliSense, hoàn nguyên mọi thay đổi bổ sung từ ví dụ mã nguồn ở trên và lưu tệp ( ⌘S (Windows, Linux < . Ctrl+S)).

Chạy Hello World

Thật đơn giản để chạy

var msg = 'Hello World';
console.log(msg);
3 với Node. js. Từ một thiết bị đầu cuối, chỉ cần gõ

var msg = 'Hello World';
console.log(msg);
2

Bạn sẽ thấy đầu ra "Xin chào thế giới" đến thiết bị đầu cuối và sau đó Nút. js trả về

Thiết bị đầu cuối tích hợp

Mã VS có một thiết bị đầu cuối tích hợp mà bạn có thể sử dụng để chạy các lệnh trình bao. Bạn có thể chạy Nút. js trực tiếp từ đó và tránh tắt Mã VS trong khi chạy các công cụ dòng lệnh

Xem > Thiết bị đầu cuối ( ⌃` (Windows, Linux Ctrl+`) with the backtick character) will open the integrated terminal and you can run

var msg = 'Hello World';
console.log(msg);
23 there:

Thử thách chuỗi javascript

Đối với hướng dẫn này, bạn có thể sử dụng thiết bị đầu cuối bên ngoài hoặc thiết bị đầu cuối tích hợp VS Code để chạy các công cụ dòng lệnh

Gỡ lỗi Hello World

Như đã đề cập trong phần giới thiệu, Mã VS cung cấp trình gỡ lỗi cho Node. ứng dụng js. Hãy thử gỡ lỗi ứng dụng Hello World đơn giản của chúng ta

Để đặt điểm dừng trong

var msg = 'Hello World';
console.log(msg);
3, hãy đặt con trỏ soạn thảo trên dòng đầu tiên và nhấn F9 hoặc nhấp vào máng xối bên trái của trình soạn thảo bên cạnh . Một vòng tròn màu đỏ sẽ xuất hiện trong máng xối.

Thử thách chuỗi javascript

Để bắt đầu gỡ lỗi, hãy chọn chế độ xem Chạy và Gỡ lỗi trong Thanh hoạt động

Thử thách chuỗi javascript

Bây giờ, bạn có thể nhấp vào mũi tên màu xanh lục của thanh công cụ Gỡ lỗi hoặc nhấn F5 để khởi chạy và gỡ lỗi "Xin chào thế giới". Điểm ngắt của bạn sẽ bị tấn công và bạn có thể xem và duyệt qua ứng dụng đơn giản. Lưu ý rằng Mã VS hiển thị Thanh trạng thái có màu khác để cho biết nó đang ở chế độ Gỡ lỗi và BẢNG XỬ LÝ GỠ LỖI được hiển thị.

Thử thách chuỗi javascript

Bây giờ bạn đã thấy Mã VS hoạt động với "Xin chào thế giới", phần tiếp theo hiển thị cách sử dụng Mã VS với một nút đầy đủ. ứng dụng web js

Ghi chú. Chúng ta đã hoàn thành ví dụ "Xin chào thế giới" vì vậy hãy điều hướng ra khỏi thư mục đó trước khi bạn tạo ứng dụng Express. Bạn có thể xóa thư mục "Xin chào" nếu muốn vì nó không bắt buộc đối với phần còn lại của hướng dẫn

Một ứng dụng Express

Express là một khung ứng dụng rất phổ biến để xây dựng và chạy Node. ứng dụng js. Bạn có thể dàn dựng (tạo) một ứng dụng Express mới bằng công cụ Express Generator. Express Generator được vận chuyển dưới dạng mô-đun npm và được cài đặt bằng cách sử dụng công cụ dòng lệnh npm

var msg = 'Hello World';
console.log(msg);
0

Mẹo. Để kiểm tra xem bạn đã cài đặt đúng

var msg = 'Hello World';
console.log(msg);
0 trên máy tính chưa, hãy nhập
var msg = 'Hello World';
console.log(msg);
27 từ thiết bị đầu cuối và bạn sẽ thấy tài liệu sử dụng

Cài đặt Trình tạo tốc độ bằng cách chạy phần sau từ thiết bị đầu cuối

mkdir hello
cd hello
code .
1

Công tắc

var msg = 'Hello World';
console.log(msg);
28 cài đặt Express Generator trên toàn cầu trên máy của bạn để bạn có thể chạy nó từ mọi nơi

Bây giờ chúng ta có thể tạo một ứng dụng Express mới có tên là

var msg = 'Hello World';
console.log(msg);
29 bằng cách chạy

mkdir hello
cd hello
code .
4

Điều này tạo ra một thư mục mới có tên là

var msg = 'Hello World';
console.log(msg);
29 với nội dung của ứng dụng của bạn. Các tham số
mkdir hello
cd hello
code .
11 yêu cầu trình tạo sử dụng công cụ mẫu pug

Để cài đặt tất cả các phụ thuộc của ứng dụng (một lần nữa được vận chuyển dưới dạng mô-đun npm), hãy chuyển đến thư mục mới và thực thi

mkdir hello
cd hello
code .
12

mkdir hello
cd hello
code .
8

Tại thời điểm này, chúng ta nên kiểm tra xem ứng dụng của chúng ta có chạy không. Ứng dụng Express đã tạo có tệp

mkdir hello
cd hello
code .
13 bao gồm tập lệnh
mkdir hello
cd hello
code .
14 để chạy
mkdir hello
cd hello
code .
15. Điều này sẽ bắt đầu nút. ứng dụng js đang chạy

Từ một thiết bị đầu cuối trong thư mục ứng dụng Express, hãy chạy

var msg = 'Hello World';
console.log(msg);
2

nút. js sẽ khởi động và bạn có thể duyệt đến http. //máy chủ cục bộ. 3000 để xem ứng dụng đang chạy

Thử thách chuỗi javascript

Chỉnh sửa mã tuyệt vời

Đóng trình duyệt và từ một thiết bị đầu cuối trong thư mục

var msg = 'Hello World';
console.log(msg);
29, dừng Node. js bằng cách nhấn CTRL+C .

Bây giờ hãy khởi chạy Mã VS

var msg = 'Hello World';
console.log(msg);
4

Ghi chú. Nếu bạn đang sử dụng thiết bị đầu cuối tích hợp Mã VS để cài đặt trình tạo Express và dàn dựng ứng dụng, bạn có thể mở thư mục

var msg = 'Hello World';
console.log(msg);
29 từ phiên bản Mã VS đang chạy của mình bằng lệnh Tệp > Mở thư mục

nút. js và Express thực hiện rất tốt công việc giải thích cách xây dựng các ứng dụng phong phú bằng cách sử dụng nền tảng và khung. Visual Studio Code sẽ giúp bạn làm việc hiệu quả hơn trong việc phát triển các loại ứng dụng này bằng cách cung cấp trải nghiệm điều hướng và chỉnh sửa mã tuyệt vời

Mở tệp

var msg = 'Hello World';
console.log(msg);
3 và di chuột qua Nút. js đối tượng toàn cầu
mkdir hello
cd hello
code .
19. Lưu ý cách Mã VS hiểu rằng
mkdir hello
cd hello
code .
19 là một chuỗi. Thú vị hơn nữa, bạn có thể nhận được đầy đủ IntelliSense đối với Node. khung js. Ví dụ: bạn có thể yêu cầu
mkdir hello
cd hello
code .
41 và nhận đầy đủ IntelliSense đối với lớp
mkdir hello
cd hello
code .
41 khi bạn nhập Visual Studio Code

Thử thách chuỗi javascript

Mã VS sử dụng các tệp khai báo (đánh máy) kiểu TypeScript (ví dụ:

mkdir hello
cd hello
code .
43) để cung cấp siêu dữ liệu cho Mã VS về các khung dựa trên JavaScript mà bạn đang sử dụng trong ứng dụng của mình. Các tệp khai báo loại được viết bằng TypeScript để chúng có thể biểu thị các loại dữ liệu của tham số và chức năng, cho phép Mã VS cung cấp trải nghiệm IntelliSense phong phú. Nhờ tính năng có tên là
mkdir hello
cd hello
code .
44, bạn không phải lo lắng về việc tải xuống các tệp khai báo kiểu này, VS Code sẽ tự động cài đặt chúng cho bạn

Bạn cũng có thể viết mã tham chiếu các mô-đun trong các tệp khác. Ví dụ: trong

var msg = 'Hello World';
console.log(msg);
3, chúng tôi yêu cầu mô-đun
mkdir hello
cd hello
code .
46, xuất một lớp
mkdir hello
cd hello
code .
47. Nếu bạn mở IntelliSense trên
mkdir hello
cd hello
code .
48, bạn có thể thấy hình dạng của lớp
mkdir hello
cd hello
code .
49

Thử thách chuỗi javascript

Gỡ lỗi ứng dụng Express của bạn

Bạn sẽ cần tạo tệp cấu hình trình gỡ lỗi

mkdir hello
cd hello
code .
80 cho ứng dụng Express của mình. Nhấp vào Chạy và gỡ lỗi trong Thanh hoạt động ( ⇧⌘D (Windows, Linux Ctrl+Shift+D< . json để tạo tệp
mkdir hello
cd hello
code .
80 mặc định. Chọn nút. js bằng cách đảm bảo rằng thuộc tính
mkdir hello
cd hello
code .
82 trong
mkdir hello
cd hello
code .
83 được đặt thành
mkdir hello
cd hello
code .
84. Khi tệp được tạo lần đầu tiên, Mã VS sẽ tìm kiếm tập lệnh
mkdir hello
cd hello
code .
14 trong
mkdir hello
cd hello
code .
13 và sẽ sử dụng giá trị đó làm
mkdir hello
cd hello
code .
87 (trong trường hợp này là
mkdir hello
cd hello
code .
88) cho cấu hình Chương trình khởi chạy.
)
) and then select the create a launch.json file link to create a default
mkdir hello
cd hello
code .
80 file. Select the Node.js environment by ensuring that the
mkdir hello
cd hello
code .
82 property in
mkdir hello
cd hello
code .
83 is set to
mkdir hello
cd hello
code .
84. When the file is first created, VS Code will look in
mkdir hello
cd hello
code .
13 for a
mkdir hello
cd hello
code .
14 script and will use that value as the
mkdir hello
cd hello
code .
87 (which in this case is
mkdir hello
cd hello
code .
88) for the Launch Program configuration.

var msg = 'Hello World';
console.log(msg);
7

Lưu tệp mới và đảm bảo rằng Chương trình khởi chạy được chọn trong menu thả xuống cấu hình ở đầu chế độ xem Chạy và gỡ lỗi. Mở

var msg = 'Hello World';
console.log(msg);
3 và đặt điểm dừng gần đầu tệp nơi đối tượng ứng dụng Express được tạo bằng cách nhấp vào máng xối ở bên trái của số dòng. Nhấn F5 để bắt đầu gỡ lỗi ứng dụng. Mã VS sẽ khởi động máy chủ trong một thiết bị đầu cuối mới và đạt đến điểm dừng mà chúng tôi đã đặt. Từ đó, bạn có thể kiểm tra các biến, tạo đồng hồ và xem qua mã của mình.

Thử thách chuỗi javascript

Triển khai ứng dụng của bạn

Nếu bạn muốn tìm hiểu cách triển khai ứng dụng web của mình, hãy xem hướng dẫn Triển khai ứng dụng cho Azure, nơi chúng tôi chỉ ra cách chạy trang web của bạn trong Azure