Hướng dẫn what are javascript files on my mac? - các tệp javascript trên máy mac của tôi là gì?

Có bốn cách để chạy mã JavaScript trên máy Mac. Đầu tiên là cài đặt Node.js và mở tập lệnh thông qua thiết bị đầu cuối. Những người khác phải mở trình duyệt và mở bảng điều khiển, trình biên dịch dựa trên web hoặc tài liệu HTML cục bộ với tập lệnh.

Hướng dẫn này cho bạn thấy tất cả chúng.

Trong thiết bị đầu cuối

Bước 1. Cài đặt Node.js

Để chạy mã JavaScript trong thiết bị đầu cuối Mac của bạn, bạn cần cài đặt nút chạy JavaScript.js.

Node.js là một thời gian chạy JavaScript được xây dựng trên động cơ JavaScript V8 của Chrome, cùng một động cơ cung cấp năng lượng cho Google Chrome (và, vì nó là nguồn mở, một vài trình duyệt khác).

Bạn có thể cài đặt Node.js trên máy Mac của mình bằng cách tải xuống mã nguồn hoặc trình cài đặt được xây dựng trước hoặc bằng cách tải xuống gói với bash:

curl "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE 's|.*>node-(.*)\.pkg</a>.*|\1|p')}.pkg" > "$HOME/Downloads/node-latest.pkg" && sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/"

Trang web Node.js cũng mô tả cách cài đặt thời gian chạy bằng Homebrew, MacPorts và PKGSRC. Vì vậy, hãy truy cập vào tài liệu Node.js nếu đó là những gì bạn muốn làm, sau đó quay lại cho phần còn lại của hướng dẫn này sau khi bạn đã cài đặt nó.

Bước 2. Kiểm tra xem Node.js đã cài đặt thành công

Tuy nhiên, bạn đã cài đặt Node.js trên máy Mac của mình, luôn luôn là một ý tưởng tốt để thực hiện kiểm tra xem thời gian chạy được cài đặt thành công.

Để làm điều này, hãy mở ra thiết bị đầu cuối, gõ vào nút Node -v và cho nó vài giây:

Nếu mọi thứ diễn ra tốt đẹp, bạn sẽ thấy một phiên bản Node.js được in trên một dòng mới trong thiết bị đầu cuối. Vào ngày xuất bản bài đăng này, ví dụ, phiên bản Node.js của tôi là v16.14.2.

Bước 3. Đặt mã JavaScript của bạn vào tệp .js

Ví dụ: hãy để Lôi tạo một hàm đơn giản hiển thị văn bản dưới dạng chuỗi và xuất nó vào thiết bị đầu cuối/bảng điều khiển:

// Declare function
function say(something) {
  console.log(something);
}

// Call function
say("Hey there!"); // Outputs Hey there! to the terminal

Bước 4. Mở thiết bị đầu cuối và thay đổi thư mục

Mở thiết bị đầu cuối của bạn và nhập lệnh cd để thay đổi thư mục thành nơi bạn đặt tệp của mình vào.

Ví dụ: không có thói quen, tôi đặt các tệp tạm thời của mình vào thư mục tải xuống của Google:

cd /Users/myusername/Downloads/

Bước 5. Mở tệp trong Node.js thông qua thiết bị đầu cuối:

Mở tệp tập lệnh trong Node.js bằng cách chạy lệnh node theo sau là tên tệp:

Node hello.js

Lo và kìa, tập lệnh của chúng tôi đã xuất hiện

Trong trình duyệt của bạn

Bạn có thể chạy mã JavaScript trong trình duyệt của mình. Bạn có thể thực hiện ngoại tuyến này, trong bảng điều khiển trình duyệt, hoặc trực tuyến, trong trình biên dịch JavaScript dựa trên web.

Nếu bạn chưa quen với phát triển web, bạn sẽ muốn làm quen với hai phương pháp này. Chúng sẽ hữu ích cho bạn khi phát triển, thử nghiệm, triển khai và gỡ lỗi các trang web và ứng dụng dựa trên web.

Trong bảng điều khiển nhà phát triển

Tất cả các trình duyệt có một bộ công cụ phát triển được xây dựng ngay trong chúng. Các công cụ phát triển này cho phép bạn chỉnh sửa các kiểu dáng HTML đánh dấu và CSS, cũng như chạy mã JavaScript cục bộ.

Bước 1. Mở bảng điều khiển trình duyệt của bạn

Truy cập bất kỳ trang web nào và nhấp chuột phải vào các phần tử kiểm tra hoặc kiểm tra, các công cụ phát triển của bạn và các công cụ phát triển của bạn sẽ bật lên. (Gợi ý: Bạn có thể thử cái này ngay tại đây, ngay bây giờ.)Hint: You can give this a try right here, right now.)

Đi đến tab Bảng điều khiển trên mạng:

Bảng điều khiển là nơi bạn có thể chạy mã JavaScript.

Bước 2. Nhập hoặc sao chép/dán mã JavaScript của bạn

Đây là nơi bạn có thể viết và thực hiện các câu lệnh. Ví dụ: gõ mã này vào và nhấn phím enter enter trên bàn phím của bạn sẽ xuất ra thế giới Hello hello! đến bảng điều khiển:

// Output Hello world! to the console
console.log('Hello world!')

Bạn cũng có thể khai báo các chức năng mà bạn có thể chạy nhiều lần, bằng cách chuyển các tham số khác nhau cho chúng:

// Declare function
function sumOfTwo(a,b) {
  let sum = a + b;
  console.log(sum);
}

// Call function
sumOfTwo(1,3); // Outputs 4
sumOfTwo(5,15); // Outputs 20

Và, tất nhiên, bạn có thể viết mã JavaScript phân tích cú pháp và thao tác các phần tử DOM trong tài liệu HTML của trang mà bạn đã mở.

Ví dụ: câu lệnh sau sẽ chọn và phân tích thẻ nhờ giao diện

// Declare function
function say(something) {
  console.log(something);
}

// Call function
say("Hey there!"); // Outputs Hey there! to the terminal

// Select and parse and <body> tag
document.querySelector('body');

Trong jsfiddle

Một cách khác để chạy mã JavaScript trong trình duyệt của bạn là mở trình chỉnh sửa và trình biên tập JavaScript trực tuyến, như JSFiddle. (Có rất nhiều, rất nhiều công cụ khác cho công việc ngoài kia, nhưng JSfiddle cho đến nay là yêu thích của tôi.)

Mặc dù bảng điều khiển trong trình duyệt của bạn, các công cụ nhà phát triển của bạn rất hữu ích khi bạn làm việc trên một trang web thực tế, JSFiddle rất tiện dụng khi bạn muốn làm việc trên một đoạn mã trừu tượng.

Nó cho phép bạn chỉnh sửa HTML, CSS và JavaScript, bộ ba thần thánh của sự phát triển web đồng thời. Nó cũng hiển thị kết quả và cung cấp cho bạn quyền truy cập, bạn đoán nó, một bảng điều khiển.

Công cụ này cũng rất tốt cho khi bạn cảm thấy cảm hứng trên đường đi làm hoặc trong một chuyến đi và chỉ có iPhone hoặc iPad của bạn với bạn. Bạn có thể viết mã, thực thi mã và lưu đoạn trích sau này (miễn là bạn tạo tài khoản).

Trong một tài liệu HTML

JavaScript ban đầu được phát triển như một ngôn ngữ kịch bản cho các trang web. Sau đó, không có gì đáng ngạc nhiên khi phương thức chạy JavaScript cuối cùng (nhưng không kém phần quan trọng) trên máy Mac của bạn là nhúng nó vào tài liệu HTML cục bộ.

Bước 1. Tạo một tài liệu HTML từ đầu (hoặc sử dụng mẫu khởi động, như HTML5 Boilerplate). Create an HTML document from scratch (or use a starter template, like HTML5 Boilerplate).

Bước 2. Nhập mã JavaScript của bạn vào thẻ

// Declare function
function say(something) {
  console.log(something);
}

// Call function
say("Hey there!"); // Outputs Hey there! to the terminal

// Declare function
function say(something) {
  console.log(something);
}

// Call function
say("Hey there!"); // Outputs Hey there! to the terminal

// Declare function
function say(something) {
  console.log(something);
}

// Call function
say("Hey there!"); // Outputs Hey there! to the terminal

// Declare function
function say(something) {
  console.log(something);
}

// Call function
say("Hey there!"); // Outputs Hey there! to the terminal

// Declare function
function say(something) {
  console.log(something);
}

// Call function
say("Hey there!"); // Outputs Hey there! to the terminal

// Declare function
function say(something) {
  console.log(something);
}

// Call function
say("Hey there!"); // Outputs Hey there! to the terminal

Nếu một tập lệnh cần phân tích hoặc thao tác các phần tử DOM, hoặc đặt nó ở dưới cùng của thẻ

// Declare function
function say(something) {
  console.log(something);
}

// Call function
say("Hey there!"); // Outputs Hey there! to the terminal

// Declare function
function say(something) {
  console.log(something);
}

// Call function
say("Hey there!"); // Outputs Hey there! to the terminal

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title>My HTML Document</title>
  <!-- Scripts that don't need to manipulate the DOM go here -->
  <script>
    <!-- This is an embedded script -->
    console.log("Hello world!");
  </script>
  <!-- This is a linked script -->
  <script src="my_script.js"></script>
</head>

<body>
<h2></h2>
<!-- Scripts that need to manipulate the DOM go here -->
  <script>
    document.querySelector('h2').innerHTML = "Hello again!";
  </script>
  <script src="my_other_script.js"></script>
</body>

</html>

Bước 3. Mở tệp HTML của bạn trong trình duyệt. Open your HTML file in the browser.

Bất kỳ chức năng JavaScript nào cần phân tích và thao tác các đối tượng DOM trong đánh dấu HTML sẽ chạy. Bạn cũng có thể sử dụng bảng điều khiển trong các công cụ nhà phát triển trình duyệt để xác minh và gỡ lỗi.

Tóm lại là

Cảm ơn bạn đã đọc điều này và tôi hy vọng hướng dẫn này đã giúp bạn tìm ra cách chạy mã JavaScript trên máy Mac, MacBook hoặc bất kỳ máy nào chạy macOS.

Hình ảnh lịch sự của Tianyi MA /Unplash