JavaScript chạy tập lệnh bên ngoài

Đây là những ghi chú dựa trên Khóa học video JavaScript dành cho người mới bắt đầu của tôi. Đó là một cách tiếp cận thú vị, nặng nhọc để học JavaScript hiện đại từ đầu

Sử dụng mã BEGINNERJS để được giảm thêm $10

JavaScript mới bắt đầu. com

JavaScript, Trình duyệt, Nút. js Chỉnh sửa bài đăng

Hãy nói về cách thực sự chạy JavaScript

Có một số cách chúng ta có thể chạy JavaScript

• trong bảng điều khiển trình duyệt
• trong nút
• thông qua thẻ script
• chúng ta cũng có thể có một tập lệnh bên ngoài

Chúng ta sẽ nói về cách chúng ta thực sự có thể chạy những

Đơn giản nhất là mở các công cụ phát triển trình duyệt của bạn và chuyển đến bảng điều khiển của bạn

Nếu bạn muốn chạy một số JavaScript để xem nó hoạt động như thế nào, như ở đây Wes đã gõ 1 + 1 và nhấn enter và bảng điều khiển trả về 2

Đây là một bảng điều khiển JavaScript và là một cách hay để nhanh chóng sử dụng một số JavaScript

Để xem nó hoạt động như thế nào, chỉ cần mở bảng điều khiển trình duyệt. Điều thú vị là nếu bạn đang truy cập bất kỳ trang web nào, hãy nói https. //github. com, JavaScript mà bạn nhập vào bảng điều khiển sẽ chạy trên trang thực đã được tải và hiện có

Ví dụ: Bạn có thể nhập nội dung sau để lấy tất cả các đoạn từ trang github mà bạn hiện đang truy cập. 👇

document.querySelectorAll["p"];

[Đừng lo lắng về tài liệu nào. querySelectorAll[] có, chúng tôi sẽ đề cập đến điều đó trong video sau]

Mã chạy trong bảng điều khiển công cụ dành cho nhà phát triển của bạn đang chạy trong ngữ cảnh của trang được tải trong tab trình duyệt của bạn

Cách tiếp theo để làm điều đó là một thẻ script

Vào thư mục /playground và tạo một tệp mới running-js.html

Wes có tiện ích mở rộng Emmet trong Mã VS, vì vậy anh ấy sẽ nhấn vào

  Hey
  
    const p = document.querySelector["p"];
    console.log[p];
  

0 và

  Hey
  
    const p = document.querySelector["p"];
    console.log[p];
  

1 để tạo ra một số mã HTML cho chúng tôi

Trong phần thân, chúng ta có thể có một thẻ script trong đó chúng ta sẽ thêm

  Hey
  
    const p = document.querySelector["p"];
    console.log[p];
  

2

Điều đó sẽ xảy ra khi HTML được tải, nó sẽ báo "OH. Đây là thẻ tập lệnh, tôi đang thay đổi ngôn ngữ từ HTML sang JavaScript và nó sẽ chạy bất kỳ mã nào bên trong thẻ tập lệnh mở và đóng dưới dạng JavaScript

Nếu bạn tiếp tục và mở tệp running-js.html trong trình duyệt và mở bảng điều khiển, bạn sẽ thấy thông báo "hey"

Đừng đổ mồ hôi quá nhiều, chúng tôi sẽ giải thích bảng điều khiển nào. log[] và mọi thứ sẽ diễn ra trong thời gian ngắn

Chạy tập lệnh trước khi đóng thẻ body

Một điều cần lưu ý là hầu như luôn luôn đáng để chạy các tập lệnh ngay trước thẻ đóng nội dung

Vì vậy, nếu chúng tôi sửa đổi running-js.html để bao gồm một thẻ đoạn có nội dung Xin chào ngay sau thẻ nội dung và sau đó chúng tôi muốn lấy đoạn đó qua JavaScript, chúng tôi có thể thực hiện được nếu tập lệnh của chúng tôi nằm ngay trước thẻ đóng nội dung, như bên dưới. 👇

  Hey
  
    const p = document.querySelector["p"];
    console.log[p];
  

Nếu bạn di chuyển thẻ script phía trên thành phần đoạn văn [hoặc di chuyển thành phần đoạn văn bên dưới thẻ script] và làm mới trang, bảng điều khiển sẽ hiển thị

  Hey
  
    const p = document.querySelector["p"];
    console.log[p];
  

5 vì điều đó có nghĩa là nó không tìm thấy gì

Để thẻ tập lệnh của bạn truy cập các thành phần trên trang, trước tiên các thành phần đó phải có trên trang trước khi bạn chọn chúng. Nếu chúng tôi cố gắng chọn thứ gì đó chưa tồn tại [vì nó được tạo sau], chúng tôi sẽ không có quyền truy cập vào nó

Vì sự tỉnh táo của riêng bạn, hãy luôn đặt JavaScript của bạn ngay bên dưới thẻ đóng nội dung. [Chúng ta sẽ nói về việc tải trong các video sau này khi chúng ta tìm hiểu thêm một chút về DOM]

Tệp JavaScript bên ngoài

Một cách khác mà chúng tôi có thể thực hiện là thông qua tệp JavaScript bên ngoài

Đi vào sân chơi và tạo một tệp JavaScript bên ngoài, được gọi là

  Hey
  
    const p = document.querySelector["p"];
    console.log[p];
  

6. Trong tệp đó, thêm đoạn mã sau 👇

console.log["I am in another file"];

Trong tệp running-js.html, hãy xóa khối tập lệnh hiện có và thay vào đó thêm thẻ tập lệnh có thuộc tính

  Hey
  
    const p = document.querySelector["p"];
    console.log[p];
  

8. [Bạn không cần thuộc tính

  Hey
  
    const p = document.querySelector["p"];
    console.log[p];
  

9 cho đến khi chúng tôi nhấn vào Mô-đun ECMAScript. ]

Bên trong thuộc tính

console.log["I am in another file"];

0, bạn cần cung cấp cho nó một đường dẫn tương đối, như vậy 👇

Điều đó hoạt động vì tệp HTML nằm trong một thư mục chứa tệp anh chị em là

  Hey
  
    const p = document.querySelector["p"];
    console.log[p];
  

6

• console.log["I am in another file"];

  2 có nghĩa là trong thư mục này

• console.log["I am in another file"];

  3 có nghĩa là tăng cấp thư mục

Trong trường hợp của chúng tôi, nó nằm trong cùng một thư mục nên

console.log["I am in another file"];

4 là đường dẫn tương đối đến tệp của chúng tôi

Bây giờ nếu bạn chạy nó, nó sẽ nói trong bảng điều khiển

console.log["I am in another file"];

5 và thậm chí nó sẽ hiển thị cho bạn tệp nào và số dòng của nơi JavaScript đó đã được chạy. 👇

Một lần nữa, nếu bạn đặt tập lệnh bên trong phần tử

console.log["I am in another file"];

6, nó vẫn hoạt động

Tuy nhiên, nếu bạn cố gắng chọn một số thứ trên trang, chẳng hạn như thẻ đoạn văn, bạn sẽ nhận được

  Hey
  
    const p = document.querySelector["p"];
    console.log[p];
  

5

Tại sao? . Để lại thẻ tập lệnh ngay trước thẻ nội dung đóng để có hiệu suất tốt nhất và để tự cứu mình khỏi những cơn đau đầu gỡ lỗi trong tương lai

[Có một số tùy chọn như các thuộc tính

console.log["I am in another file"];

8 và

console.log["I am in another file"];

9 mà bạn có thể thêm vào các thẻ tập lệnh của mình. Các thuộc tính này sẽ trì hoãn việc chạy JavaScript thực tế và nó sẽ tải xuống một cách không đồng bộ và sau đó chạy nó sau khi HTML đã được tải, tuy nhiên điều đó còn nhiều hơn thế nữa. . Nhưng trước tiên chúng ta sẽ cần hiểu ý nghĩa của bất đồng bộ là gì, v.v.]

Một điều khác mà bạn có thể nhận thấy là tại sao lại có thẻ script đóng nếu không có nội dung ở giữa thẻ mở và thẻ đóng?

Đó là một điều khó hiểu với thẻ script. Nó không thể tự đóng

Bạn cũng không thể thêm JavaScript bổ sung giữa thẻ tập lệnh như vậy. 👇

Rằng sẽ không làm việc

Bạn có thể có nhiều thẻ tập lệnh trong một tệp HTML nếu muốn

Nhược điểm duy nhất của điều đó là mỗi khi nó chạm vào một trong các thẻ tập lệnh đó, nó sẽ tắt và tải xuống tệp JavaScript và phân tích cú pháp đó cho bạn

Khi nhấn vào các mô-đun, chúng tôi sẽ xem xét cách chúng tôi có thể gộp nhiều tệp đó thành một. Hoặc bạn có thể thực hiện một thao tác gọi là tách mã, tách chúng thành nhiều tệp JavaScript nhỏ hơn và tải chúng theo yêu cầu

Chạy nó trong Node. js

Một điều nữa là thực sự chạy nó trong Node. js

console.log["I'm from node"];

Nút. js là JavaScript có thể chạy trong máy chủ. Thay vì chạy JavaScript trên một trang web, chúng tôi chạy nó trên một máy thực tế [giống như nhiều ngôn ngữ lập trình khác]

Cách chúng tôi làm điều đó là chúng tôi mở thiết bị đầu cuối của mình và

0 vào thư mục

1

Bạn có thể chạy tập lệnh trong Node bằng cách nhập thông tin sau vào thiết bị đầu cuối và nhấn enter 👇

node node-example.js

Điều đó sẽ chạy bất kỳ mã nào trong tệp tập lệnh và sau khi hoàn thành, nó sẽ thoát khỏi nút và đưa bạn trở lại thiết bị đầu cuối

Đó là tóm tắt về cách tải JavaScript

Chúng tôi sẽ sử dụng hỗn hợp chạy JavaScript trong bảng điều khiển, trong thẻ tập lệnh và trong các tệp JavaScript bên ngoài

Làm cách nào để chạy tập lệnh bên ngoài trong JavaScript?

Tập lệnh bên ngoài trong JavaScript là gì?

JavaScript có thể ở bên ngoài không?

chúng ta có thể chạy không. JS trong trình duyệt?