KUNGFU TECH

0
0
Lập trình
Admin Team
Admin Teamtechmely

Bắt Đầu với JavaScript: Cơ Bản về Trình Duyệt và Node.js

Đăng vào 8 tháng trước

• 6 phút đọc

Chủ đề:

#webdev#programming#javascript#node

Giới Thiệu

JavaScript là một ngôn ngữ lập trình hướng đối tượng, kiểu động, và là một công cụ mạnh mẽ cho việc phát triển các dự án web tương tác. Nó có khả năng thao tác linh hoạt với cấu trúc của các trang web và cung cấp nhiều tính năng hữu ích. Bên cạnh đó, với sự hỗ trợ của Node.js, JavaScript có thể chạy trên máy chủ như một lựa chọn phát triển backend, vượt trội về tốc độ, tính bất đồng bộ và khả năng phân tách module.

Sự Khác Biệt Giữa Trình Duyệt và Node.js

JavaScript được tạo ra ban đầu để chạy trong trình duyệt, nơi nó làm cho các trang web trở nên sống động với sự tương tác, hoạt ảnh và hành vi động. Mỗi trình duyệt hiện đại đều có một engine JavaScript tích hợp sẵn để thực hiện điều này.

Tuy nhiên, JavaScript không chỉ giới hạn ở trình duyệt. Nhờ vào Node.js, nó cũng có thể chạy trực tiếp trên máy tính của bạn, bên ngoài bất kỳ trang web nào. Điều này mở ra cơ hội cho JavaScript được sử dụng trên backend, cung cấp dịch vụ cho máy chủ, xử lý tệp và xây dựng các ứng dụng vượt ra ngoài trình duyệt.

Trong bài viết này, chúng ta sẽ khám phá cả hai cách tiếp cận. Đầu tiên, chúng ta sẽ bắt đầu với trình duyệt, ngôi nhà truyền thống của JavaScript, sau đó chuyển sang Node.js để xem cách ngôn ngữ này có thể được sử dụng trong một môi trường hoàn toàn khác.

JavaScript Trong Trình Duyệt

Cách truyền thống:

  1. Tạo một thư mục
  2. Mở nó bằng một trình soạn thảo văn bản (Visual Studio Code là gợi ý chính)
  3. Tạo một tệp HTML có tên index.html
  4. Tạo một tệp JavaScript có tên script.js
  5. Thêm mã của bạn vào trong script.js và kết nối nó với tệp HTML

Mã HTML cơ bản tối thiểu để sao chép và dán vào tệp index.html:

html Copy 
<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bài Thực Hành JavaScript Đầu Tiên</title>
</head>
<body>
  <!-- JavaScript sẽ được tải ở dưới cùng -->
  <script src="script.js"></script>
</body>
</html>

Chúng ta có một cấu trúc HTML cơ bản, với một thẻ script nơi mà mã JavaScript được chèn vào thông qua thuộc tính src, tham chiếu đến vị trí của tệp script.js, mà trong trường hợp này nằm trong cùng thư mục với index.html.

Mã JavaScript cơ bản tối thiểu để sao chép và dán vào tệp script.js:

javascript Copy 
console.log('Xin chào từ script.js')

Bây giờ mở tệp index.html trong trình duyệt của bạn.

Để xem kết quả, hãy mở Developer Tools console:

  • Trên Windows/Linux: nhấn F12 hoặc Ctrl + Shift + I
  • Trên macOS: nhấn Cmd + Option + I

Tại thời điểm này, bạn sẽ thấy "Xin chào từ script.js" hiển thị trong console của trình duyệt.

Một Một Ít Tương Tác Hơn

Việc in ra console là một phương pháp rất hữu ích trong JavaScript, nhưng hãy thực sự thay đổi một cái gì đó trên trang. Cập nhật thân HTML của bạn như sau:

html Copy 
<body>
  <h1 id="title">Chào Mừng!</h1>
  <button onclick="changeText()">Nhấn Tôi</button>
  <script src="script.js"></script>
</body>

Và bên trong script.js:

javascript Copy 
function changeText() {
  const title = document.getElementById("title")
  title.textContent = "Bạn đã nhấn nút!"
}

Bây giờ, khi bạn mở trang và nhấn nút, văn bản trong <h1> sẽ được cập nhật.

Chúc mừng! — Bạn vừa học được một chút về thao tác DOM và sự kiện, hai trong số những ý tưởng quan trọng nhất trong JavaScript dựa trên trình duyệt.

Các Cách Khác Để Hiển Thị Thông Điệp

Ngoài console.log, JavaScript cũng cung cấp các pop-up nhanh:

javascript Copy 
alert("Xin chào!")        // Hiện thông báo trong trình duyệt
prompt("Tên của bạn là gì?") // Yêu cầu người dùng nhập liệu

Những điều này rất tốt cho việc thử nghiệm, nhưng trong các dự án thực tế, các nhà phát triển thường thích cập nhật trang hoặc sử dụng console.

Mẹo Về Developer Tools

Console của trình duyệt không chỉ để ghi lại thông điệp; nó cũng là nơi mà các lỗi và cảnh báo sẽ xuất hiện. Nếu một cái gì đó không hoạt động, hãy kiểm tra console trước tiên. Nó giống như người bạn tốt nhất của bạn khi xử lý lỗi.

Đến thời điểm này, bạn đã biết cách:

  • Chạy JavaScript bên trong trình duyệt
  • Ghi lại thông điệp và lỗi
  • Tương tác với trang (thao tác DOM)
  • Xử lý các sự kiện người dùng đơn giản

Điều này tạo ra một nền tảng tốt. Tiếp theo, hãy xem cách JavaScript có thể chạy bên ngoài trình duyệt với Node.js.

JavaScript Với Node.js

Cho đến nay, chúng ta đã thấy JavaScript chạy bên trong trình duyệt. Nhưng JavaScript cũng có thể chạy bên ngoài trình duyệt nhờ vào Node.js.

Node.js là một môi trường chạy cho phép bạn thực thi JavaScript trực tiếp trên máy tính của bạn. Điều này cực kỳ mạnh mẽ vì nó cho phép bạn xây dựng máy chủ backend, APIs, công cụ xử lý tệp, và nhiều điều tuyệt vời khác mà trình duyệt không thể làm được.

Cài Đặt Node.js

  1. Truy cập https://nodejs.org
  2. Tải về phiên bản Hỗ Trợ Dài Hạn, hay LTS. (Được khuyến nghị cho hầu hết người dùng)
  3. Cài đặt theo hướng dẫn cài đặt (Cài đặt mặc định là đủ)
  4. Xác minh cài đặt bằng cách mở terminal (hoặc command prompt) và gõ:
bash Copy 
node -v

Nếu mọi thứ diễn ra như mong đợi, nó sẽ in ra số phiên bản đã cài đặt (ví dụ: v20.0.0).

Tệp Script Đầu Tiên Với Node.js

Hãy tạo một thư mục mới và một tệp có tên app.js:

javascript Copy 
// app.js
console.log("Xin chào từ Node.js")

Bây giờ, mở terminal và chạy lệnh sau:

bash Copy 
node app.js

Kết quả bạn sẽ thấy:

plaintext Copy 
Xin chào từ Node.js

Chúc mừng! — Bạn đã vừa chạy JavaScript bên ngoài trình duyệt với Node.js.

Sự Khác Biệt Là Gì?

Trong trình duyệt, JavaScript có quyền truy cập vào DOM (cấu trúc trang web), các sự kiện như onclick, và các APIs đặc biệt của trình duyệt như alert hoặc prompt.

Trong Node.js, những tài nguyên đó không tồn tại. Thay vào đó, Node cung cấp cho bạn quyền truy cập vào những thứ như:

  • Hệ thống tệp (đọc/ghi tệp)
  • Thông tin hệ điều hành của máy tính của bạn
  • Mạng (tạo máy chủ, xử lý yêu cầu HTTP)

Một Ví Dụ Về Máy Chủ HTTP Đơn Giản

Một trong những điều phổ biến nhất để làm với Node.js là tạo một máy chủ web đơn giản. Đây là ví dụ nhỏ nhất sử dụng module http tích hợp sẵn của Node:

javascript Copy 
// server.js
const http = require("http")

const server = http.createServer((req, res) => {
  res.writeHead(200, { "Content-Type": "text/plain" })
  res.end("Xin chào từ máy chủ Node.js của tôi!")
})

server.listen(3000, () => {
  console.log("Máy chủ đang chạy tại http://localhost:3000")
})

Chạy máy chủ với:

bash Copy 
node server.js

Sau đó mở trình duyệt của bạn và truy cập http://localhost:3000
Bạn sẽ thấy điều sau:

plaintext Copy 
Xin chào từ máy chủ Node.js của tôi!

Cuối cùng, nhấn Ctrl + C để dừng máy chủ và giải phóng cổng.

Đến thời điểm này, bạn đã có một hiểu biết cơ bản về:

  • Cách cài đặt và chạy Node.js
  • Sự khác biệt giữa việc chạy JavaScript trong trình duyệt và Node.js
  • Cách tạo và chạy máy chủ web Node.js đơn giản đầu tiên của bạn

Kết Luận

Trong bài viết này, bạn đã học cách chạy JavaScript trong hai môi trường khác nhau:

  • Bên trong trình duyệt, nơi nó có thể tương tác với các trang web, xử lý các sự kiện người dùng và cập nhật DOM.
  • Bên trong Node.js, nơi nó chạy trực tiếp trên máy tính của bạn và có thể làm việc với tệp, mạng và máy chủ.

Hiểu cả hai khía cạnh này là rất quan trọng, vì JavaScript là một trong số ít ngôn ngữ có thể điều khiển toàn bộ ngăn xếp web — từ giao diện người dùng, đến logic máy chủ chạy ở phía sau.

Cảm ơn bạn đã dành thời gian!

Nếu bạn muốn ủng hộ tôi, bạn có thể mua cho tôi một tách cà phê tại đây: PayPal.me/martinxcvi ☕

Hình ảnh bìa bởi Growtika trên Unsplash

Nội dung bài viết

Gợi ý câu hỏi phỏng vấn
Không có dữ liệu

Không có dữ liệu

Bài viết được đề xuất
Bài viết cùng tác giả

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào