Cài đặt và cấu hình cơ bản để chạy JavaScript trong dự án đầu tiên với Visual Studio

Nếu bạn mới bắt đầu học lập trình web, việc chạy được JavaScript (JS) trong một dự án thực tế là bước cực kỳ quan trọng. Bài viết này sẽ hướng dẫn bạn cách tạo project, cấu hình và chạy JS bằng Visual Studio + ASP.NET Core một cách đơn giản, dễ hiểu.

Tổng quan mô hình chạy JavaScript trong Visual Studio

Trong dự án ASP.NET Core Web App, JavaScript thường được đặt trong thư mục:

wwwroot/js/site.js

👉 Đây là nơi chứa file JS dùng cho giao diện web (frontend).

Luồng hoạt động:

HTML (Razor Pages) load
Gọi file JS (site.js)
JS chạy trên trình duyệt

Bước 1: Mở Visual Studio và tạo project mới

Mở Visual Studio
Chọn Create a new project

👉 Đây là bước khởi tạo dự án web để có môi trường chạy JS.

Bước 2: Chọn loại project phù hợp

Chọn:

ASP.NET Core Web App (Razor Pages)

✔ Vì:

Có sẵn giao diện web
Có thư mục wwwroot chứa JS, CSS
Dễ học cho người mới

Bước 3: Cấu hình project ban đầu

Nhập thông tin:

Project name: ví dụ VohaipTest
Location: chọn thư mục lưu
Solution name: giữ mặc định

Nhấn Next

Bước 4: Cấu hình nâng cao

Thiết lập:

Framework: .NET (LTS)
Authentication: None
Tick: Configure for HTTPS

👉 Sau đó nhấn Create

Bước 5: Cấu trúc project sau khi tạo

Sau khi tạo xong, bạn sẽ thấy:

wwwroot/
 ├── css/
 ├── js/
 │    └── site.js   ← file JavaScript chính
 ├── lib/

Pages/
Program.cs
appsettings.json

👉 Quan trọng nhất: site.js

Bước 6: Viết code JavaScript đầu tiên

Mở file:

wwwroot/js/site.js

Thêm code:

var xin_chao = "hello";
document.write(xin_chao);

👉 Đây là cách đơn giản để hiển thị nội dung ra trình duyệt.

Bước 7: Build project

Trên menu:

Build → Build Solution

Hoặc phím tắt:

Ctrl + Shift + B

👉 Mục đích:

Kiểm tra lỗi code
Chuẩn bị chạy chương trình

Bước 8: Chạy project

Chọn:

Debug → Start Debugging (F5)

👉 Trình duyệt sẽ tự mở:

https://localhost:xxxx

Bước 9: Xem kết quả

Nếu đúng, bạn sẽ thấy:

hello

hiển thị trên trang web 🎉

👉 Điều này chứng tỏ:

JS đã được load
Project chạy thành công

Những lỗi thường gặp khi chạy JS

1. Không thấy JS chạy

Kiểm tra file site.js có được load chưa
Mở file _Layout.cshtml và kiểm tra:

<script src="~/js/site.js"></script>

2. JS không cập nhật

Do cache trình duyệt
👉 Nhấn:

Ctrl + F5

3. Viết JS sai vị trí

Phải đặt trong:

wwwroot/js/

Mẹo nâng cao

Không nên dùng document.write() trong project thật
👉 Nên dùng:

console.log("hello");

hoặc:

document.getElementById("demo").innerHTML = "hello";

Kết luận

Chỉ với vài bước cơ bản, bạn đã có thể:

✔ Tạo project web bằng Visual Studio
✔ Cấu hình môi trường ASP.NET Core
✔ Viết và chạy JavaScript thành công
✔ Hiểu cách JS hoạt động trong web thực tế

Cài đặt và cấu hình cơ bản để chạy JavaScript trong dự án đầu tiên với Visual Studio