Hướng dẫn javascript online compiler - trình biên dịch trực tuyến javascript

Đánh giá

Linda MacDonald

React, Vue, Tailwind CSS trong tầm tay của bạn

Lúc đầu, tôi không hiểu được giá trị của thỏa thuận này, vì vậy đã lấy nó cho một vòng quay, và tôi ngay lập tức bị cuốn hút :) Hãy để tôi bắt đầu bằng cách nói đây là SOOOO SUPER SLEEK !! Chạy một vài lỗi có chủ ý và được hiển thị một mô tả ngay lập tức và chính xác về lỗi mà tôi đã tạo ra. Tính năng gỡ lỗi là giá trị giá một mình! Sau đó, tôi quay một dự án React trong vòng vài giây, (xoay lên có nghĩa là tôi đã nhấp vào một nút!) Và một bản xem trước trực tiếp đã ngay lập tức ở đó! Không có NPM chạy bắt đầu hoặc bất cứ điều gì. Và hầu như có bất kỳ khung phía trước nóng nào bạn có thể nghĩ về Vue.js 3 là ở đó! và toàn bộ các khung CSS bao gồm yêu thích cá nhân của tôi: Tailwind CSS. Siêu hài lòng !!!!!!

MarclaFord

Tuyệt vời cho việc học, kiểm tra và tiết kiệm thời gian

Tôi sử dụng điều này để học và kiểm tra các công nghệ web khác nhau. Đã qua rồi thời gian để thiết lập mọi thứ, tôi cũng nhận được một bản xem trước trực tiếp ngay lập tức về công việc của tôi kết hợp với một bảng điều khiển hữu ích. Tôi làm việc với Tailwindcss, alpinejs, bootstrap và tôi có thể dễ dàng khám phá các công nghệ khác. Tác giả đáp ứng và duy trì ứng dụng. Tôi đã yêu cầu một số khung, những điều này sau đó đã được thêm vào. Tôi rất vui khi có công cụ này trong kho vũ khí của mình vì nó thay đổi cách tôi làm việc trên web.

Emad Alhamou

Một nơi trung tâm để thử mã và kiểm tra các ý tưởng mới

Tôi cần một trung tâm (trực tuyến) để thử mã và kiểm tra các ý tưởng mới. PlayCode rất đơn giản để sử dụng, thanh lịch và dường như đã bao phủ tất cả các khung và thư viện chính.

Konstantin

Chỉ là những gì tôi đang tìm kiếm

Nó thật tuyệt! Công cụ rất bị đánh giá thấp, cực kỳ hữu ích cho các nhà phát triển và những người đam mê dev khác và tất cả những người muốn học mã hóa!

Lewishole

Tuyệt vời và được đề xuất

Một trình chỉnh sửa mã hấp dẫn và hữu ích, đặc biệt là tính năng tên miền phụ là tuyệt vời. Tôi muốn giới thiệu mọi người để thử playcode. Công việc tốt, tiếp tục đi!

Emad Alhamou

Một nơi trung tâm để thử mã và kiểm tra các ý tưởng mới

Tôi cần một trung tâm (trực tuyến) để thử mã và kiểm tra các ý tưởng mới. PlayCode rất đơn giản để sử dụng, thanh lịch và dường như đã bao phủ tất cả các khung và thư viện chính.

JavaScript là một trong những ngôn ngữ lập trình phổ biến nhất hiện nay. Có thể bạn chưa quen với nó hoặc có thể bạn đã sử dụng nó trong nhiều năm. Nhưng bạn không thể phủ nhận rằng có rất nhiều thứ quan trọng, những thứ được sử dụng rộng rãi nhất trên toàn thế giới đều được viết bằng JavaScript (hoặc những framework của nó). Nhưng câu hỏi đặt ra là bạn đã hiểu ngôn ngữ lập trình mạnh mẽ, nhưng đôi khi lại khó hiểu này đến mức nào?

Bạn có bao giờ tự hỏi làm thế nào các câu lệnh lập trình đó báo cho máy tính biết nó phải làm gì?

Các câu lệnh như a = a + 2 đơn giản cho con người khi đọc và viết, nhưng chúng lại khiến cho máy tính không thể hiểu được một cách trực tiếp

Để máy tính có thể hiểu được ngôn ngữ lập trình, sẽ cần một trình dịch (biên dịch hoặc thông dịch) để giải mã những đoạn code của bạn thành các đoạn mà máy tính có thể hiểu được.

Đối với một số ngôn ngữ lập trình, việc dịch các dòng lệnh thường được thực hiện lần lượt, từ trên xuống dưới, từng dòng một mỗi khi chương trình được chạy. Đó được gọi là trình thông dịch.thông dịch.

Đối với một số ngôn ngữ khác, một bản dịch phải được tạo sẵn trước khi chạy, được gọi là biên dịch, vì vậy khi chương trình chạy sau đó, những gì đang chạy thực sự là các đoạn mã máy tính đã được biên dịch và sẵn sàng hoạt động.biên dịch, vì vậy khi chương trình chạy sau đó, những gì đang chạy thực sự là các đoạn mã máy tính đã được biên dịch và sẵn sàng hoạt động.

Người ta thường khẳng định rằng JavaScript được thông dịch vì code JavaScript của bạn được thực thi ngay lập tức mỗi khi nó chạy. Nhưng điều đó không hoàn toàn chính xác. JavaScript engine thực sự đã biên dịch chương trình một cách cực kì nhanh và sau đó ngay lập tức chạy code đã biên dịch.

Trong bài viết này, chúng ta sẽ tìm hiểu về một số khái niệm cần thiết sẽ giúp bạn hiểu những gì thực sự xảy ra ở tầng bên dưới. Đến cuối bài viết, bạn sẽ hiểu rõ ràng về những gì thực sự xảy ra khi bạn viết JavaScript.

Một số khái niệm chúng ta sẽ tìm hiểu trong bài viết này:

  1. Syntax Parsers
  2. Lexical Environments
  3. Execution Contexts

Syntax Parsers

Lexical Environments

Execution Contexts

Một chương trình đọc code của bạn và xác định nó sẽ thực hiện việc gì và liệu cú pháp của đoạn code có hợp lệ hay khôngcomplier (trình biên dịch), tuy nhiên cũng có đôi khi chúng cũng liên quan đến thông dịch.

Khi bạn viết code JavaScript, không tự nhiên mà nó tự chỉ cho máy tính biết phải làm gì. Chỉ là bạn bị cách ly khỏi tất cả những việc đó. Việc của bạn là viết code, nhưng đã có người khác đã build các chương trình chuyển đổi mã JavaScript của bạn thành thứ mà máy tính có thể hiểu được.từng ký tự một trong code của bạn và xác định xem cú pháp có hợp lệ hay không! Sau đó, nó thực hiện các cú pháp đó theo mã mà máy tính có thể hiểu được.

Các chương trình đó được gọi là complier (trình biên dịch), tuy nhiên cũng có đôi khi chúng cũng liên quan đến thông dịch.

Trình thông dịch và trình biên dịch thực hiện việc đọc từng ký tự một trong code của bạn và xác định xem cú pháp có hợp lệ hay không! Sau đó, nó thực hiện các cú pháp đó theo mã mà máy tính có thể hiểu được.

Đó là tất cả về Syntax Parsers:

Khi bạn viết code, sẽ có một chương trình sẽ chuyển những gì bạn viết thành thứ máy tính có thể hiểu được.

Đại loại nó sẽ như thế này:

Giả sử bạn viết một hàm với một biến bên trong nó. Hàm và biến này sẽ được lưu trữ vào trong bộ nhớ máy tính. Nó cũng sẽ được dịch từ những gì bạn đã viết - thứ mà con người dễ đọc - thành những gì máy tính có thể hiểu được.từng kí tự một kiểu f /u/ n/ c/ t/ i/ o/ n. Và nó sẽ nhận ra đây là một function. Vì thế sau đó nên có một dấu cách, rồi những kí tự giữa dấu cách đó và dấu ngoặc tròn () sẽ là tên của function.

Có một trình biên dịch hoặc thông dịch nằm giữa thứ mà bạn viết và thứ mà máy tính có thể hiểu được. Đó được gọi là Syntax Parsers.Greet là thứ máy tính đọc được giữa dấu cách và dấu ngoặc nhọn, cho nên nó sẽ hiểu đó là tên của function.

Nó sẽ đi qua lần lượt các ký tự trong đoạn code của bạn, từng kí tự một kiểu f /u/ n/ c/ t/ i/ o/ n. Và nó sẽ nhận ra đây là một function. Vì thế sau đó nên có một dấu cách, rồi những kí tự giữa dấu cách đó và dấu ngoặc tròn () sẽ là tên của function.

Lexical Environments

Execution Contexts

Một chương trình đọc code của bạn và xác định nó sẽ thực hiện việc gì và liệu cú pháp của đoạn code có hợp lệ hay không

Khi bạn viết code JavaScript, không tự nhiên mà nó tự chỉ cho máy tính biết phải làm gì. Chỉ là bạn bị cách ly khỏi tất cả những việc đó. Việc của bạn là viết code, nhưng đã có người khác đã build các chương trình chuyển đổi mã JavaScript của bạn thành thứ mà máy tính có thể hiểu được.

Các chương trình đó được gọi là complier (trình biên dịch), tuy nhiên cũng có đôi khi chúng cũng liên quan đến thông dịch.

Trình thông dịch và trình biên dịch thực hiện việc đọc từng ký tự một trong code của bạn và xác định xem cú pháp có hợp lệ hay không! Sau đó, nó thực hiện các cú pháp đó theo mã mà máy tính có thể hiểu được.Hiện tại, khi nói về Lexical Environments của một cái gì đấy trong code - Chúng ta nói về một object đặc biệt, dùng để liên kết định danh của biến và giá trị của nó.

Đó là tất cả về Syntax Parsers:function Greet() với một biến msg bên trong nó. Biến này được đặt bên trong function, và liên quan đến lưu trữ giá trị.

Khi bạn viết code, sẽ có một chương trình sẽ chuyển những gì bạn viết thành thứ máy tính có thể hiểu được.

Đại loại nó sẽ như thế này:

Execution Contexts

Một chương trình đọc code của bạn và xác định nó sẽ thực hiện việc gì và liệu cú pháp của đoạn code có hợp lệ hay không

Khi bạn viết code JavaScript, không tự nhiên mà nó tự chỉ cho máy tính biết phải làm gì. Chỉ là bạn bị cách ly khỏi tất cả những việc đó. Việc của bạn là viết code, nhưng đã có người khác đã build các chương trình chuyển đổi mã JavaScript của bạn thành thứ mà máy tính có thể hiểu được.Execution Context.

Các chương trình đó được gọi là complier (trình biên dịch), tuy nhiên cũng có đôi khi chúng cũng liên quan đến thông dịch. bạn bắt đầu chạy đoạn code của mình, bạn sẽ tạo ra một thứ gọi là Global Execution Context:

  • Trình thông dịch và trình biên dịch thực hiện việc đọc từng ký tự một trong code của bạn và xác định xem cú pháp có hợp lệ hay không! Sau đó, nó thực hiện các cú pháp đó theo mã mà máy tính có thể hiểu được.từng dòng một
  • Đó là tất cả về Syntax Parsers:

Khi bạn viết code, sẽ có một chương trình sẽ chuyển những gì bạn viết thành thứ máy tính có thể hiểu được.

Đại loại nó sẽ như thế này:function, bạn sẽ tạo mới một Execution Context bên trong Global Execution context:

  • Giả sử bạn viết một hàm với một biến bên trong nó. Hàm và biến này sẽ được lưu trữ vào trong bộ nhớ máy tính. Nó cũng sẽ được dịch từ những gì bạn đã viết - thứ mà con người dễ đọc - thành những gì máy tính có thể hiểu được.từng dòng một
  • Một bộ nhớ cục bộ (Variable Environment): nơi các biến được định nghĩa trong function sẽ được lưu trữ.

Execution Context bao gồm 2 giai đoạn:

  • Giai đoạn Khởi tạo - Creation Phrase: các function và biến được assign vào bộ nhớ máy tính
  • Giai đoạn Thực thi - Execution Phrase: các function và biến được thực thi

Trong ảnh phía trên, bạn có thể thấy, tồn tại một Global Execution Context lớn nằm trên cùng, bên trong nó sẽ là một Execution Context độc nhất của function Greet đã được khởi tạo.Global Execution Context lớn nằm trên cùng, bên trong nó sẽ là một Execution Context độc nhất của function Greet đã được khởi tạo.

Mỗi khi bạn tạo một function mới, một Execution Context độc nhất mới sẽ được khởi tạo, và nó sẽ vẫn được bọc trong Global Execution Context.

Chúng ta sẽ không đi sâu vào chi tiết của hai giai đoạn. Nó chứa những thứ ngoài sức tưởng tượng để trình bày trong bài viết này. Anyway, Execution Context chứa code bạn đã viết và nó cũng chạy code của bạn.

Nhớ rằng, Code của bạn được dịch, được xử lý bởi một đống tính năng khác - một chương trình mà một ai đó đã viết. Đó là quá trình code của bạn được thực thi.

Bây giờ để hiểu đơn giản, khi chúng ta nói về Execution Context, hãy nghĩ về nó như một wrapper giúp bạn quản lý code bạn đang chạy. Hãy xem nó như một nơi (scope) mà code của bạn được thực thi từng dòng một. JavaScript runtime duy trì một stack của Execution Context và Execution Context hiện diện ở đầu stack này là Execution Context hiện đang được thực thi.Execution Context, hãy nghĩ về nó như một wrapper giúp bạn quản lý code bạn đang chạy. Hãy xem nó như một nơi (scope) mà code của bạn được thực thi từng dòng một. JavaScript runtime duy trì một stack của Execution Context và Execution Context hiện diện ở đầu stack này là Execution Context hiện đang được thực thi.

Tổng kết

  • Đoạn code bạn viết không phải là cái được thực thi trực tiếp, JavaScript engine sẽ xử lý đoạn code và đưa ra quyết định.
  • Syntax Parser là một chương trình giúp đọc code của bạn và xác định xem cú pháp có hợp lệ hay không. là một chương trình giúp đọc code của bạn và xác định xem cú pháp có hợp lệ hay không.
  • Lexical Environment là một object đặc biệt, dùng để liên kết định danh của biến và giá trị của nó là một object đặc biệt, dùng để liên kết định danh của biến và giá trị của nó
  • Execution Context là một wrapper giúp bạn quản lý code đang chạy. là một wrapper giúp bạn quản lý code đang chạy.

Phần 2: JavaScript "cơ bản" (Phần 2): Lexical Environment - Thứ cần biết để hiểu về Closures