Javascript có thể chạy trên bất kỳ trình duyệt nào không?

Question

Là ngôn ngữ kịch bản phía máy khách, JavaScript cần một số máy khách để diễn giải và thực thi nó. Trong trường hợp ứng dụng web, chúng tôi có thể sử dụng bất kỳ trình duyệt web nào được hỗ trợ làm nền tảng để thực thi JavaScript. Trong các phần bên dưới, hãy hiểu cách JavaScript chạy trong trình duyệt web và cách công cụ JavaScript diễn giải mã JavaScript. Hơn nữa, chúng ta cũng sẽ hiểu cách JavaScript có thể tích hợp trong các phần khác nhau của trang HTML

Nội dung chính Show

JavaScript chạy trong trình duyệt web như thế nào?
Làm cách nào để nhúng và chạy JavaScript trong trình duyệt web?
How to embed and execute JavaScript in the HTML tag?
How to embed and run JavaScript in HTML tag?
Làm cách nào để nhúng tệp JavaScript bên ngoài vào HTML?
Làm cách nào để chẩn đoán lỗi trong JavaScript?
Chìa khóa rút ra

JavaScript chạy trong trình duyệt web như thế nào?
Làm cách nào để nhúng và thực thi JavaScript trong trình duyệt web?
- Quy trình nhúng và thực thi JavaScript trong thẻ HTML <body>?
- Làm cách nào để nhúng và thực thi JavaScript trong HTML <head>?
- Làm cách nào để nhúng tệp JavaScript bên ngoài vào HTML?
Quy trình chẩn đoán lỗi trong JavaScript?

JavaScript chạy trong trình duyệt web như thế nào?

JavaScript là ngôn ngữ được giải thích trong đó mã được giải thích và thực thi trong thời gian chạy. Ngoài ra, chúng tôi biết rằng các trình duyệt web hiểu HTML và CSS và chuyển đổi các ngôn ngữ đó thành hiển thị trực quan trên màn hình. Phần trình duyệt web hiểu được HTML và CSS được gọi là công cụ kết xuất. Tuy nhiên, hầu hết các trình duyệt cũng có trình thông dịch JavaScript. Đó là một phần của trình duyệt hiểu JavaScript và chạy các chương trình JavaScript. Kiến trúc điển hình của trình duyệt trông như bên dưới

Như chúng ta có thể thấy, công cụ Kết xuất của trình duyệt tương tác với "Trình thông dịch của JavaScript" và gửi mã JavaScript tới công cụ JavaScript để xử lý
Công cụ JavaScript/Trình thông dịch JavaScript bao gồm cả Trình thông dịch và trình biên dịch Just in Time. Ngoài ra, việc thực thi tổng thể JavaScript là một quy trình gồm 5 bước, như thể hiện trong hình bên dưới.

Công cụ JavaScript tải mã nguồn
Trình thông dịch bắt đầu ứng dụng
Trình biên dịch nhận mã
Trình biên dịch bắt đầu tối ưu hóa và biên dịch
Trình biên dịch tăng dần tối ưu hóa mã

Bây giờ khi chúng ta nói về các công cụ JavaScript, mỗi trình duyệt đều có các công cụ được cài đặt sẵn. Dưới đây là một số công cụ JavaScript được phát triển và sử dụng bởi một số trình duyệt chính

Động cơ V8. Công cụ này được phát triển bởi Google, là một trong những Công cụ được sử dụng nhiều nhất trong chrome, crom và thậm chí cả trong NodeJS
Khỉ nhện. Mozilla đã phát triển công cụ này được sử dụng trong trình duyệt Firefox
JavaScriptCore. Công cụ này được phát triển bởi Apple được sử dụng trong trình duyệt Safari
luân xa. Microsoft đã phát triển công cụ này được sử dụng trong trình duyệt Edge và Internet Explorer
Động cơ Hermes. Facebook đã phát triển công cụ này được sử dụng trong các ứng dụng Android

Làm cách nào để nhúng và chạy JavaScript trong trình duyệt web?

Trình duyệt web thường mong đợi HTML, vì vậy bạn phải thông báo cụ thể cho trình duyệt biết khi nào có JavaScript bằng cách sử dụng thẻ <script>. Thẻ <script> là thẻ HTML thông thường. Thêm vào đó, nó hoạt động giống như một công tắc có tác dụng nói: “Này, trình duyệt web, đây là một số mã JavaScript; . Khi trình duyệt web gặp thẻ đóng </script>, nó biết rằng nó đã kết thúc chương trình JavaScript và có thể quay lại các nhiệm vụ bình thường của nó. Hãy cùng tìm hiểu trong các phần sau, cách mã JavaScript nhúng bên trong tệp HTML

How to embed and execute JavaScript in the HTML tag?

Thẻ Html <script> cho phép tích hợp mã JavaScript trực tiếp trong thẻ <body>. Mã JavaScript sẽ nằm dưới thẻ <script> và trình duyệt sẽ tự động thực thi tập lệnh sau khi tải trang

Đoạn mã dưới đây chứng minh “Xin chào thế giới. ” chương trình sử dụng JavaScript được viết trực tiếp bên trong thẻ <body>

<html>
<head>
    <title>My First Program</title>
</head>

<body>
<script language = "javascript" type = "text/javascript">
    document.write("Hello World!")
</script>
</body>
</html>

Mở bất kỳ trình soạn thảo văn bản nào như notepad++ và nhập đoạn mã trên. Lưu tệp với tên helloworld. html và mở nó trong bất kỳ trình duyệt nào (Chrome, Firefox hoặc IE). Nó sẽ hiển thị đầu ra như

Như đã thấy trong ví dụ trên, "tài liệu. write" là hàm dùng để ghi dữ liệu vào trang Html. Khi chúng tôi mở tệp Html trong trình duyệt, JavaScript có trong thẻ script sẽ thực thi. Chúng tôi sẽ thảo luận chi tiết hơn về các chức năng khác, như viết trong bài viết Thao tác DOM

How to embed and run JavaScript in HTML tag?

Thẻ html <script> có thể được sử dụng để xác định một chức năng bên dưới thẻ <head> của HTML. Mã JavaScript sẽ nằm dưới thẻ <script> trong một hàm có thể được gọi bên trong thẻ <body> của HTML

Đoạn mã dưới đây chứng minh “Xin chào thế giới. ” chương trình sử dụng JavaScript được viết dưới thẻ <head>

<html>
	<head>
	<title>My First Program</title>
	<script language = "javascript" type = "text/javascript">
                 function myFunction() {
 	            document.write("Hello World!");
 	         }
      	</script> 
	</head>

	<body>
		 <script>myFunction()</script>
        </body>
 </html>

Viết đoạn mã trên vào trình soạn thảo văn bản và lưu tệp với tên helloworld2. html. Sau đó mở nó trong bất kỳ trình duyệt nào

Trong ví dụ trên, chúng ta đã tạo một hàm trong tiêu đề và gọi hàm đó trong thẻ body. Tại thời điểm này, đừng lo lắng về hàm là gì và cách sử dụng nó vì chúng tôi sẽ đề cập đến nó trong bài viết về hàm

Làm cách nào để nhúng tệp JavaScript bên ngoài vào HTML?

Ngoài các cách tích hợp JavaScript trong HTML ở trên, chúng ta có thể lưu JavaScript dưới dạng tệp script riêng với. js và bao gồm phần mở rộng tương tự bên trong mã HTML bằng thuộc tính src của thẻ <script>. Bằng cách này, chúng tôi có thể sử dụng lại cùng một mã JavaScript trong nhiều tệp HTML

Đoạn mã dưới đây thể hiện câu lệnh “Xin chào thế giới. ” chương trình sử dụng JavaScript được viết dưới dạng tệp bên ngoài

function myFunction() {
 	document.write("Hello World!");
 }

Lưu mã JavaScript ở trên dưới dạng ext. tập tin js. Gọi JavaScript ở trên trong HTML bên dưới bằng cách sử dụng thuộc tính src của thẻ <script>

<html>
	<head>
		<title>test</title>
	</head>
	<body>
		<script src="ext.js"></script>
		<script type="text/javascript">myFunction()</script>
	</body>
</html>

Ghi chú. Thuộc tính src sẽ chỉ định đường dẫn tuyệt đối của tệp JavaScript

Trong ví dụ trên, chúng tôi đã tạo javascript trong một tệp riêng biệt và sử dụng tệp đó trong Html với sự trợ giúp của thẻ src, nhập mã JavaScript trong tệp được cung cấp khi chạy

Làm cách nào để chẩn đoán lỗi trong JavaScript?

Khi trang web tải nhưng không hiển thị chính xác, điều này là do lỗi mã hóa trên trang web. Thông thường, JavaScript gây ra nó hoặc lỗi CSS. Nếu JavaScript trên trang web của bạn không hoạt động, bạn có thể chẩn đoán chúng bằng cách sử dụng "Bảng điều khiển lỗi" của trình duyệt. Mỗi trình duyệt đều có “Bảng điều khiển lỗi” tích hợp để chẩn đoán lỗi tập lệnh trên trang web của bạn

Để hiểu chi tiết về "Bảng điều khiển lỗi", hãy xem xét đoạn mã bên dưới. Theo đó, chúng tôi đã đưa ra lỗi rõ ràng bằng cách xóa dấu ngoặc kép khỏi chuỗi "Xin chào thế giới. " trong khi chuyển tương tự vào tài liệu. viết phương pháp

<html>
<head>
    <title>My First Program with Error</title>
</head>
 
<body>
<script language = "javascript" type = "text/javascript">
    document.write(Hello World!)
</script>
</body>
</html>

Lưu tệp với tên firstProgramWithError. html và mở nó trong trình duyệt. Nó sẽ hiển thị đầu ra như

Như chúng ta có thể thấy từ ảnh chụp màn hình ở trên, không có gì trên trang HTML. Do đó, điều này khiến người ta nghi ngờ rằng có điều gì đó không ổn, vì đầu ra không như mong đợi. Vì vậy, làm thế nào để kiểm tra lỗi là gì? . Hãy xem xét chúng tôi đang sử dụng "Chrome" xem chương trình của chúng tôi. Vì vậy, chúng tôi có thể mở "Bảng điều khiển lỗi" trong chrome bằng các bước sau để xem lỗi do chương trình của chúng tôi đưa ra

1. Đầu tiên, Nhấp chuột phải vào bất kỳ đâu trong chế độ xem của trình duyệt để mở menu ngữ cảnh như bên dưới

2. Thứ hai, nhấp vào mục "Kiểm tra" trong Menu ngữ cảnh. " Nó sẽ mở các công cụ chrome-dev. Chọn tab "bảng điều khiển" như được đánh dấu trong ảnh chụp màn hình bên dưới

3. Cuối cùng, nếu chúng ta mở lại chương trình firstProgramWithError ở trên. html trong chrome, nó hiển thị đầu ra như bên dưới.

4. Vì vậy, nó hiển thị lỗi trong tab "Bảng điều khiển" và đề cập đến lỗi nằm trong "dòng 8" của tệp

Do đó, người dùng có thể nhanh chóng chẩn đoán bất kỳ lỗi nào, nếu có, trong mã JavaScript. Tương tự, các trình duyệt khác cũng cung cấp cửa sổ "Bảng điều khiển lỗi". Đến lượt nó, chẩn đoán lỗi JavaScript bất cứ khi nào có lỗi phát sinh trong một mã JavaScript cụ thể

Chìa khóa rút ra

Nhà phát triển có thể sử dụng thẻ <script> của HTML để viết mã JavaScript bên trong tệp HTML
Ngoài ra, thẻ <script> có thể được tích hợp bên trong các phần khác nhau như <body>, <head> của tệp HTML
*Cuối cùng, cửa sổ "Bảng điều khiển lỗi" của trình duyệt có thể chẩn đoán bất kỳ lỗi JavaScript nào

Bây giờ chúng ta hãy chuyển sang bài viết tiếp theo, nơi chúng ta sẽ tìm hiểu về các khái niệm về kiểu dữ liệu và biến trong JavaScript

programming javascript