KUNGFU TECH

0
0
Lập trình
Sơn Tùng Lê
Sơn Tùng Lê103931498422911686980

Giới thiệu về JavaScript: Từ Trình Duyệt đến Node.js

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

• 6 phút đọc

Chủ đề:

#webdev#javascript#node#spanish

Giới thiệu

JavaScript là một ngôn ngữ lập trình hướng đối tượng, kiểu động, rất hiệu quả cho việc phát triển các dự án web tương tác. Nó cho phép thao tác mạnh mẽ cấu trúc của các trang web và cung cấp nhiều chức năng và linh hoạt. Ngoài ra, với sự hỗ trợ của Node.js, JavaScript cũng có thể chạy trên máy chủ như một giải pháp phát triển backend, nổi bật với tốc độ, tính bất đồng bộ và tính mô-đun.

Trình duyệt vs Node.js

JavaScript được tạo ra ban đầu để chạy trong trình duyệt, nơi nó mang lại sự sống cho các trang web thông qua sự tương tác, hoạt ảnh và hành vi động. Tất cả các trình duyệt hiện đại đều có động cơ JavaScript tích hợp để thực hiện điều này.

Tuy nhiên, JavaScript không chỉ giới hạn trong trình duyệt. Nhờ 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 một trang web. Điều này mở ra cánh cửa cho việc sử dụng JavaScript trong backend, nâng cao máy chủ, quản lý tệp và tạo ra các ứng dụng vượt xa khả năng của 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. Chúng ta sẽ bắt đầu với trình duyệt, môi trường truyền thống của JavaScript, và sau đó chuyển sang Node.js để xem cách mà 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 hoặc thư mục con
  2. Mở nó bằng một trình soạn thảo văn bản (Visual Studio Code được khuyến nghị)
  3. Tạo một tệp HTML có tên là index.html
  4. Tạo một tệp JavaScript có tên là script.js
  5. Thêm mã của bạn vào script.js và kết nối nó với tệp HTML

Mã HTML 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>Thực hành JavaScript đầu tiên của tôi</title>
</head>
<body>
  <!-- JavaScript sẽ được tải ở cuối -->
  <script src="script.js"></script>
</body>
</html>

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

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

javascript Copy 
console.log('Xin chào thế giới từ Script.js')

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

Để xem kết quả, hãy mở bảng điều khiển trong công cụ dành cho nhà phát triển:

  • 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 nên thấy "Xin chào thế giới từ Script.js" được in ra trong bảng điều khiển của trình duyệt.

Một chút tương tác

In ra bảng điều khiển là một công cụ rất hữu ích trong JavaScript, nhưng bây giờ hãy thay đổi một số thứ trên trang. Cập nhật thân (body) của HTML như sau:

html Copy 
<body>
  <h1 id="title">Chào mừng bạn!</h1>
  <button onclick="changeText()">Bấm vào 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 đã bấm vào nút!"
}

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

Chúc mừng bạn! — Bạn vừa học được một chút về thao tác DOM và về sự kiện, hai trong số những khái niệm quan trọng nhất trong JavaScript chạy 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 hộp thoại:

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

Những điều này khá tốt để 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 hoặc thay đổi trang, hoặc sử dụng bảng điều khiển.

Lời khuyên về Công cụ dành cho Nhà phát triển

Bảng điều khiển của trình duyệt không chỉ dùng để ghi lại các thông điệp; nó cũng là nơi hiển thị lỗi và cảnh báo.
Nếu có gì đó không hoạt động, hãy kiểm tra bảng điều khiển trước tiên. Nó là người bạn tốt nhất của bạn trong việc gỡ lỗi.

Tại thời điểm này, bạn đã hiểu cách:

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

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

JavaScript trong Node.js

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

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

Cài đặt Node.js

  1. Truy cập https://nodejs.org
  2. Tải xuống 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 mọi thứ theo hướng dẫn cấu hình (cấu hình mặc định là tốt)
  4. Kiểm tra cài đặt bằng cách mở terminal (hoặc dấu nhắc lệnh) và nhập:
bash Copy 
node -v

Nếu mọi thứ diễn ra suôn sẻ, bạn sẽ thấy số phiên bản được cài đặt (ví dụ: v20.0.0).

Script đầu tiên của bạn trong Node.js

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 thế giới từ Node.js")

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

bash Copy 
node app.js

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

Copy 
Xin chào thế giới từ Node.js

Chúc mừng bạn! — Bạn vừa chạy JavaScript 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 của trang web), các sự kiện như onclick và các API cụ thể của trình duyệt như alert hoặc prompt.

Trong Node.js, các 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 các thứ như:

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

Ví dụ đơn giản về Máy chủ HTTP

Một trong những điều phổ biến nhất mà bạn có thể làm với Node.js là tạo một máy chủ web đơn giản. Dưới đây là ví dụ nhỏ nhất sử dụng mô-đun http tích hợp 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 thế giới từ Máy chủ của tôi trong Node.js!")
})

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

Chạy máy chủ bằng:

bash Copy 
node server.js

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

Copy 
Xin chào thế giới từ Máy chủ của tôi trong Node.js!

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

Tại 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 đơn giản đầu tiên của bạn trong Node.js

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:

  • Trong trình duyệt, nơi nó có thể tương tác với các trang web, quản lý các sự kiện của người dùng và cập nhật DOM.
  • 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 các tệp, mạng và máy chủ.

Điều quan trọng là phải hiểu cả hai khía cạnh, vì JavaScript là một trong số ít ngôn ngữ có thể thúc đẩy toàn bộ stack 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ộ những bài viết của 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 do Growtika trên Unsplash cung cấp.

Xem quảng cáo để đọc tiếpHoặc nâng cấp tài khoản để tắt quảng cáo

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