JavaScript có cần HTML để chạy không?

Đặt tập lệnh ở dưới cùng của phần tử sẽ cải thiện tốc độ hiển thị, vì việc giải thích tập lệnh làm chậm màn hình


JavaScript bên ngoài

Tập lệnh cũng có thể được đặt trong các tệp bên ngoài

tệp bên ngoài. myScript. js

hàm myFunction() {
tài liệu. getElementById("bản trình diễn"). innerHTML = "Đoạn đã thay đổi. “;
}

Tập lệnh bên ngoài là thực tế khi cùng một mã được sử dụng trong nhiều trang web khác nhau

Các tệp JavaScript có phần mở rộng tệp. js

Để sử dụng tập lệnh bên ngoài, hãy đặt tên của tệp tập lệnh trong thuộc tính src (nguồn) của

Để 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

  1. 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

<html>
    <head>
        <script defer src="./index.js">script>
    head>
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

JavaScript có cần HTML để chạy không?

Đầ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 đề 💡

Hãy xem JavaScript có gì đặc biệt, chúng ta có thể đạt được những gì với nó và những công nghệ nào khác hoạt động tốt với nó

JavaScript ban đầu được tạo ra để “làm cho các trang web trở nên sống động”

Các chương trình trong ngôn ngữ này được gọi là tập lệnh. Chúng có thể được viết ngay trong HTML của trang web và chạy tự động khi tải trang

Các tập lệnh được cung cấp và thực thi dưới dạng văn bản thuần túy. Họ không cần chuẩn bị hoặc biên dịch đặc biệt để chạy

Ở khía cạnh này, JavaScript rất khác so với một ngôn ngữ khác có tên là Java

Tại sao nó được gọi là JavaScript?

Khi JavaScript được tạo ra, ban đầu nó có tên khác. “Kịch bản trực tiếp”. Nhưng Java rất phổ biến vào thời điểm đó, vì vậy người ta quyết định định vị một ngôn ngữ mới là “em trai” của Java sẽ giúp

Nhưng khi nó phát triển, JavaScript đã trở thành một ngôn ngữ hoàn toàn độc lập với đặc điểm kỹ thuật riêng của nó được gọi là ECMAScript và giờ đây nó hoàn toàn không liên quan đến Java

Ngày nay, JavaScript không chỉ có thể thực thi trên trình duyệt mà còn trên máy chủ hoặc thực tế là trên bất kỳ thiết bị nào có chương trình đặc biệt gọi là công cụ JavaScript

Trình duyệt có một công cụ nhúng đôi khi được gọi là “máy ảo JavaScript”

Các động cơ khác nhau có “tên mã” khác nhau. Ví dụ

  • V8 – trong Chrome, Opera và Edge
  • SpiderMonkey – trong Firefox
  • …Có các tên mã khác như “Chakra” cho IE, “JavaScriptCore”, “Nitro” và “SquirrelFish” cho Safari, v.v.

Các thuật ngữ trên rất tốt để ghi nhớ vì chúng được sử dụng trong các bài viết dành cho nhà phát triển trên internet. Chúng tôi cũng sẽ sử dụng chúng. Chẳng hạn, nếu “một tính năng X được hỗ trợ bởi V8”, thì nó có thể hoạt động trong Chrome, Opera và Edge

Động cơ hoạt động như thế nào?

Động cơ phức tạp. Nhưng những điều cơ bản là dễ dàng

  1. Công cụ (được nhúng nếu đó là trình duyệt) đọc ("phân tích cú pháp") tập lệnh
  2. Sau đó, nó chuyển đổi (“biên dịch”) tập lệnh thành mã máy
  3. Và sau đó mã máy chạy, khá nhanh

Công cụ áp dụng tối ưu hóa ở mỗi bước của quy trình. Nó thậm chí còn xem tập lệnh được biên dịch khi nó chạy, phân tích dữ liệu chảy qua nó và tiếp tục tối ưu hóa mã máy dựa trên kiến ​​thức đó

JavaScript hiện đại là ngôn ngữ lập trình “an toàn”. Nó không cung cấp quyền truy cập cấp thấp vào bộ nhớ hoặc CPU vì ban đầu nó được tạo cho các trình duyệt không yêu cầu

Các khả năng của JavaScript phụ thuộc rất nhiều vào môi trường mà nó chạy trong đó. Chẳng hạn, Nút. js hỗ trợ các chức năng cho phép JavaScript đọc/ghi các tệp tùy ý, thực hiện các yêu cầu mạng, v.v.

JavaScript trong trình duyệt có thể thực hiện mọi thứ liên quan đến thao tác trang web, tương tác với người dùng và máy chủ web

Chẳng hạn, JavaScript trong trình duyệt có thể

  • Thêm HTML mới vào trang, thay đổi nội dung hiện có, sửa đổi kiểu
  • Phản ứng với hành động của người dùng, chạy khi nhấp chuột, di chuyển con trỏ, nhấn phím
  • Gửi yêu cầu qua mạng đến máy chủ từ xa, tải xuống và tải lên tệp (được gọi là công nghệ AJAX và COMET)
  • Nhận và đặt cookie, đặt câu hỏi cho khách truy cập, hiển thị tin nhắn
  • Ghi nhớ dữ liệu ở phía máy khách (“bộ nhớ cục bộ”)

Khả năng của JavaScript trong trình duyệt bị hạn chế để bảo vệ sự an toàn của người dùng. Mục đích là để ngăn chặn một trang web độc ác truy cập thông tin cá nhân hoặc làm hại dữ liệu của người dùng

Ví dụ về những hạn chế như vậy bao gồm

  • JavaScript trên trang web có thể không đọc/ghi các tệp tùy ý trên đĩa cứng, sao chép chúng hoặc thực thi chương trình. Nó không có quyền truy cập trực tiếp vào các chức năng của hệ điều hành

    Các trình duyệt hiện đại cho phép nó hoạt động với các tệp, nhưng quyền truy cập bị hạn chế và chỉ được cung cấp nếu người dùng thực hiện một số hành động nhất định, chẳng hạn như “thả” tệp vào cửa sổ trình duyệt hoặc chọn tệp qua thẻ

    Có nhiều cách để tương tác với máy ảnh/micrô và các thiết bị khác, nhưng chúng cần có sự cho phép rõ ràng của người dùng. Vì vậy, một trang hỗ trợ JavaScript có thể không lén lút kích hoạt web-camera, quan sát môi trường xung quanh và gửi thông tin đến NSA

  • Các tab/cửa sổ khác nhau thường không biết về nhau. Đôi khi chúng xảy ra, chẳng hạn như khi một cửa sổ sử dụng JavaScript để mở cửa sổ kia. Nhưng ngay cả trong trường hợp này, JavaScript từ một trang có thể không truy cập được vào trang kia nếu chúng đến từ các trang khác nhau (từ một miền, giao thức hoặc cổng khác)

    Đây được gọi là “Chính sách xuất xứ giống nhau”. Để giải quyết vấn đề đó, cả hai trang phải đồng ý trao đổi dữ liệu và phải chứa mã JavaScript đặc biệt xử lý dữ liệu đó. Chúng tôi sẽ đề cập đến điều đó trong hướng dẫn

    Giới hạn này, một lần nữa, vì sự an toàn của người dùng. Ví dụ: một trang từ http://anysite.com mà người dùng đã mở không thể truy cập tab trình duyệt khác có URL http://gmail.com và đánh cắp thông tin từ đó

  • JavaScript có thể dễ dàng giao tiếp qua mạng đến máy chủ nơi trang hiện tại xuất phát. Nhưng khả năng nhận dữ liệu từ các trang web/tên miền khác bị tê liệt. Mặc dù có thể, nó yêu cầu thỏa thuận rõ ràng (được thể hiện trong các tiêu đề HTTP) từ phía xa. Một lần nữa, đó là một giới hạn an toàn

Những hạn chế như vậy không tồn tại nếu JavaScript được sử dụng bên ngoài trình duyệt, chẳng hạn như trên máy chủ. Các trình duyệt hiện đại cũng cho phép plugin/tiện ích mở rộng có thể yêu cầu quyền mở rộng

Có ít nhất ba điều tuyệt vời về JavaScript

  • Tích hợp đầy đủ với HTML/CSS
  • Những điều đơn giản được thực hiện đơn giản
  • Được hỗ trợ bởi tất cả các trình duyệt chính và được bật theo mặc định

JavaScript là công nghệ trình duyệt duy nhất kết hợp ba điều này

Đó là điều làm cho JavaScript trở nên độc đáo. Đó là lý do tại sao nó là công cụ phổ biến nhất để tạo giao diện trình duyệt

Điều đó nói rằng, JavaScript có thể được sử dụng để tạo máy chủ, ứng dụng di động, v.v.

Cú pháp của JavaScript không phù hợp với nhu cầu của mọi người. Những người khác nhau muốn các tính năng khác nhau

Đó là điều được mong đợi, bởi vì các dự án và yêu cầu là khác nhau đối với mọi người

Vì vậy, gần đây có rất nhiều ngôn ngữ mới xuất hiện, được phiên mã (chuyển đổi) sang JavaScript trước khi chúng chạy trên trình duyệt

Các công cụ hiện đại giúp quá trình chuyển đổi diễn ra rất nhanh và minh bạch, thực sự cho phép các nhà phát triển viết mã bằng ngôn ngữ khác và tự động chuyển đổi ngôn ngữ đó “dưới mui xe”

Ví dụ về các ngôn ngữ như vậy

  • CoffeeScript là “đường cú pháp” cho JavaScript. Nó giới thiệu cú pháp ngắn hơn, cho phép chúng ta viết mã rõ ràng và chính xác hơn. Thông thường, các nhà phát triển Ruby thích nó
  • TypeScript tập trung vào việc bổ sung “gõ dữ liệu nghiêm ngặt” để đơn giản hóa việc phát triển và hỗ trợ các hệ thống phức tạp. Nó được phát triển bởi Microsoft
  • Flow cũng thêm tính năng nhập dữ liệu, nhưng theo một cách khác. Được phát triển bởi Facebook
  • Dart là một ngôn ngữ độc lập có công cụ riêng chạy trong môi trường không có trình duyệt (như ứng dụng dành cho thiết bị di động), nhưng cũng có thể được dịch sang JavaScript. Được phát triển bởi Google
  • Brython là một trình chuyển mã Python sang JavaScript cho phép viết các ứng dụng bằng Python thuần túy mà không cần JavaScript
  • Kotlin là một ngôn ngữ lập trình hiện đại, ngắn gọn và an toàn, có thể nhắm mục tiêu đến trình duyệt hoặc Node

Có nhiều. Tất nhiên, ngay cả khi chúng tôi sử dụng một trong những ngôn ngữ được phiên mã này, chúng tôi cũng nên biết JavaScript để thực sự hiểu những gì chúng tôi đang làm

Tôi có thể chạy JavaScript mà không cần HTML không?

Có, JavaScript có thể được sử dụng mà không cần html . Nút là một tùy chọn khác. JavaScript ban đầu là ngôn ngữ kịch bản web cho đến khi nút js được giới thiệu.

Điều gì là cần thiết để chạy mã JavaScript?

Để thực thi JavaScript trong trình duyệt, bạn có hai tùy chọn — hoặc đặt nó bên trong phần tử tập lệnh ở bất kỳ đâu bên trong tài liệu HTML hoặc đặt nó bên trong tệp JavaScript bên ngoài (với. js) và sau đó tham chiếu tệp đó bên trong tài liệu HTML bằng phần tử tập lệnh trống có thuộc tính src

Làm cách nào để kiểm tra js mà không cần HTML?

Mã JavaScript có thể được thực thi mà không cần sử dụng tài liệu HTML một cách khá dễ dàng. Nhấn Ctrl + Shift + J trong Internet Explorer hoặc Chrome và Ctrl + Shift + K trong Firefox sẽ dẫn bạn đến bảng điều khiển, trong đó bạn có thể dán mã JavaScript để thực thi.

Cần có thẻ HTML nào để chạy JavaScript?

Thẻ HTML