JavaScript là ngôn ngữ kịch bản phía máy khách và là một trong những ngôn ngữ kịch bản hiệu quả nhất, được sử dụng phổ biến nhất. thuật ngữ. ngôn ngữ kịch bản phía máy khách có nghĩa là nó chạy ở phía máy khách [hoặc trên máy khách] bên trong trình duyệt web, nhưng một điều quan trọng cần nhớ là trình duyệt web của máy khách cũng cần hỗ trợ JavaScript hoặc phải là JavaScript . Ngày nay, hầu hết các trình duyệt web hiện đại đều hỗ trợ JavaScript và có các công cụ JavaScript của chúng. Ví dụ: Google Chrome có công cụ JavaScript riêng có tên là V8
Một số trình duyệt web khác với công cụ JavaScript của họ
Trình duyệt web Công cụ JavaScript 1. CạnhChakra2. Safari JavaScript Core3. Người nhện FirefoxNó hoàn toàn phụ thuộc vào cách các nhà phát triển web sử dụng JavaScript như thế nào và để làm gì, bởi vì nó có thể được sử dụng cho một số thứ trong quá trình phát triển web. Một trong những cách sử dụng JavaScript phổ biến nhất là xác thực dữ liệu do người dùng cung cấp trong các trường biểu mẫu
Với sự trợ giúp của ví dụ sau, chúng ta có thể hiểu cách JavaScript hoạt động
Trong ví dụ này, chúng tôi đã tạo một tài liệu HTML đơn giản và thêm mã JavaScript của chúng tôi vào đó
Chương trình
Trong chương trình trên, chúng tôi chỉ hiển thị một thông báo cảnh báo cho người dùng bằng cách sử dụng phương thức "alert []" là phương thức được xác định trước của JavaScript. Chúng tôi cũng đã sử dụng "bảng điều khiển. log[];" và chuyển "JavaScript" dưới dạng Chuỗi và trong chế độ kiểm tra, chúng ta có thể thấy "JavaScript" trong bảng điều khiển như được hiển thị trong đầu ra bên dưới
đầu ra
Như chúng ta có thể thấy ở đầu ra, các chương trình chạy tốt trên trình duyệt web của chúng ta
Đây là một câu hỏi khác xuất hiện "làm thế nào trình duyệt hiểu mã JavaScript và chạy nó. "
Hầu hết mọi trình duyệt web hiện nay đều có công cụ JavaScript của riêng chúng, như chúng ta đã thảo luận ở trên. Vì vậy, nó là công cụ JavaScript hiểu mã và chạy nó
Bây giờ hãy xem cách JavaScript engine xử lý và chạy. mã js
Trong trường hợp này, chúng tôi đã sử dụng trình duyệt chrome để chạy chương trình có công cụ JavaScript "V8", cũng được sử dụng để tạo Nút. js. Như chúng ta đã biết, JavaScript là một ngôn ngữ được diễn giải có nghĩa là nó được thực thi theo từng dòng [hoặc có nghĩa là công cụ JavaScript chuyển đổi từng dòng mã Js và chạy theo cùng một cách thay vì chuyển đổi toàn bộ chương trình một lần]
Chúng ta có thể hiểu cách một công cụ JavaScript điển hình hoạt động với sự trợ giúp của sơ đồ
Bất cứ khi nào chúng tôi chạy chương trình JavaScript bên trong trình duyệt web, mã JavaScript sẽ được công cụ của trình duyệt nhận và công cụ sẽ chạy mã nguồn để lấy đầu ra
Trong một công cụ JavaScript tiêu chuẩn, mã nguồn trải qua một số bước và được thực thi như bạn có thể thấy trong sơ đồ đã cho ở trên
Hãy để chúng tôi hiểu từng bước này chi tiết hơn
Bước 1. Trình phân tích cú pháp
Đây là giai đoạn đầu tiên của công cụ, mỗi khi chúng tôi chạy một chương trình JavaScript, mã của chúng tôi sẽ được nhận đầu tiên bởi "trình phân tích cú pháp" bên trong công cụ JS. Công việc của trình phân tích cú pháp là kiểm tra mã JavaScript để tìm lỗi cú pháp theo từng dòng vì JavaScript là ngôn ngữ kịch bản diễn giải, do đó, bất cứ khi nào trình phân tích cú pháp phát hiện ra lỗi, nó sẽ đưa ra một loại lỗi và ngừng thực thi mã
Tóm lại, chúng ta có thể nói rằng nó phân tích mã JavaScript
Bước 2. AST
Khi trình phân tích cú pháp kiểm tra tất cả các mã JavaScript và hài lòng rằng không có lỗi/lỗi nào trong mã, nó sẽ tạo cấu trúc dữ liệu có tên AST [viết tắt của Cây cú pháp trừu tượng]
Chúng ta có thể dễ dàng hiểu AST là gì với sự trợ giúp của ví dụ sau
Ví dụ
Giả sử chúng ta có một chương trình JavaScript như bên dưới
Chương trình
Khi trình phân tích cú pháp kiểm tra mã JavaScript ở trên, nó sẽ tạo cấu trúc dữ liệu có tên là AST như chúng ta đã thảo luận ở trên. AST [Cây cú pháp trừu tượng] được tạo trông giống như hình ảnh đã cho
Ghi chú. Nó không phải là cây cú pháp trừu tượng chính xác, nhưng nó là biểu diễn bằng hình ảnh của Cây cú pháp trừu tượng
Bước 3. Chuyển đổi sang Mã máy
Sau khi Trình phân tích cú pháp tạo ra Cây cú pháp trừu tượng, công cụ JavaScript sẽ chuyển đổi mã JavaScript thành mã máy [hoặc bằng ngôn ngữ mà máy có thể hiểu được]
Bước 4. Mã máy
Khi chương trình được viết bằng JavaScript được chuyển đổi thành ngôn ngữ máy [hoặc mã byte], mã được chuyển đổi sẽ được gửi đến hệ thống để thực thi và cuối cùng, mã byte đó được chạy bởi hệ thống/công cụ giống như chúng ta quan sát trong phần đầu tiên của mình.
Để theo dõi khóa học này, bạn cần biết cách thức và nơi bạn chạy mã JavaScript của mình. Bạn có một số tùy chọn để chạy chương trình chào thế giới đầu tiên của mình
Mở trình chỉnh sửa của bạn và tạo một tệp có tên index.js
file_type_js chỉ mục. js
console.log['hello world']
Cách chạy JavaScript từ dòng lệnh
Chạy một chương trình JS từ dòng lệnh được xử lý bởi NodeJS. Bắt đầu bằng cách cài đặt NodeJS trên máy cục bộ nếu cần
- Cài đặt nút. js
Bây giờ, chỉ cần mở dòng lệnh trong cùng thư mục với tập lệnh index.js mà bạn đã tạo [VS Code sẽ tự động thực hiện việc này với thiết bị đầu cuối tích hợp]
dòng lệnh
node .
// or
node index.js
Cách chạy JavaScript từ trình duyệt
Khi mọi người nghĩ về “JavaScript”, họ thường nghĩ đến một trình duyệt web. Bạn có thể chạy mã trong trình duyệt bằng cách tạo tệp HTML tham chiếu tập lệnh. Trong trường hợp của chúng tôi, chúng tôi đã sử dụng tùy chọn defer, tùy chọn này sẽ thực thi JS sau khi tải xong tệp HTML
Chạy tập lệnh từ tệp HTML
file_type_html chỉ mục. html
Bây giờ, chỉ cần mở tệp HTML này trên máy cục bộ của bạn và mở bảng điều khiển dành cho nhà phát triển [bước tiếp theo] để xem đầu ra
Kiểm tra bảng điều khiển trình duyệt
Trong Chrome, bạn có thể mở bảng điều khiển dành cho nhà phát triển bằng Ctrl+Shift+J [Windows] hoặc Ctrl+Option+J [Mac] hoặc theo cách thủ công từ menu cài đặt bằng cách chọn Công cụ khác -> Công cụ dành cho nhà phát triển. Bảng điều khiển cho phép bạn chạy mã trong trình duyệt, tương tự như cách
Đầu ra của bảng điều khiển trình duyệt trong Chrome
Chạy JavaScript với Framework
Điều đáng nói là các framework như React, Angular, Svelte, v.v. sẽ tự động đảm nhiệm việc xây dựng và chạy ứng dụng của bạn, đồng thời cung cấp công cụ và các bước dành riêng cho framework để chạy mã. Trong thế giới thực, bạn có nhiều khả năng sử dụng các công cụ do khung cung cấp để chạy mã của mình hơn là các phương pháp cơ bản được trình bày trong khóa học này
Chạy JavaScript trong Sandbox
Khóa học này sử dụng StackBlitz để chạy các ví dụ về mã JS trong hộp cát riêng biệt trong trình duyệt. Đây là một lựa chọn tuyệt vời để chia sẻ các bản trình diễn nhanh và bản sao vấn đề 💡