Hướng dẫn do you need a browser to run javascript? - bạn có cần trình duyệt để chạy javascript không?

Bản tóm tắt

Bây giờ là lúc để có được bàn tay của bạn bẩn. Bài viết này cung cấp một giới thiệu cơ bản về mã hóa với JavaScript.

Giới thiệu

Trong bài viết này của chương trình giảng dạy tiêu chuẩn web, chúng tôi sẽ đề cập đến những điều cơ bản của JavaScript-cách thức và nơi sử dụng nó, những vấn đề cần tránh và cơ bản chung để bắt đầu hành trình trở thành một nhà phát triển JavaScript hàng đầu.

JavaScript là gì và bạn thực hiện nó như thế nào?

JavaScript là ngôn ngữ dựa trên văn bản không cần bất kỳ chuyển đổi nào trước khi được thực thi. Các ngôn ngữ khác như Java và C ++ cần được biên dịch để thực thi nhưng JavaScript được thực thi ngay lập tức bởi một loại chương trình diễn giải mã được gọi là trình phân tích cú pháp (khá nhiều tất cả các trình duyệt web đều chứa trình phân tích cú pháp JavaScript).

Để thực thi JavaScript trong trình duyệt, bạn có hai tùy chọn - hoặc đặt nó vào bên trong phần tử

<script type="text/javascript">
  var x = 3;
  alert('hello there, I am JavaScript - x is ' + x);
script>

2 ở bất cứ đâ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 phần mở rộng .js) và sau đó tham chiếu tệp bên trong tài liệu HTML bằng cách sử dụng Trống phần tử

<script type="text/javascript">
  var x = 3;
  alert('hello there, I am JavaScript - x is ' + x);
script>

2 với thuộc tính

<script type="text/javascript">
  var x = 3;
  alert('hello there, I am JavaScript - x is ' + x);
script>

4. Chúng tôi sẽ xem xét cả hai phương pháp này trong phần này.

JavaScript không phải ở bên trong trình duyệt. Để chạy JavaScript trong môi trường console, vui lòng kiểm tra Mozilla Rhino; Để chạy JavaScript trong môi trường máy chủ, vui lòng kiểm tra Node.js.

Bao gồm JavaScript của bạn bên trong tài liệu HTML của bạn

Sự bao gồm cơ bản nhất của JavaScript bên trong trang HTML của bạn sẽ trông giống như thế này:

<script>
  var x = 3;
  alert('hello there, I am JavaScript - x is ' + x);
script>

Bạn có thể đặt cái này ở bất cứ đâu bên trong tài liệu của bạn và nó sẽ thực hiện, nhưng một số nơi chắc chắn tốt hơn những nơi khác - xem nơi đặt phần JavaScript để được hướng dẫn về điều này.

Vì có thể có một số loại tập lệnh khác nhau có sẵn để sử dụng trên các trang web trong tương lai, nên việc thêm tên của tập lệnh bạn đang sử dụng làm loại MIME:

<script type="text/javascript">
  var x = 3;
  alert('hello there, I am JavaScript - x is ' + x);
script>

Lưu ý: Bạn sẽ tìm thấy các ví dụ tập lệnh trên web có thuộc tính

<script type="text/javascript">
  var x = 3;
  alert('hello there, I am JavaScript - x is ' + x);
script>

5. Đây không phải là một phần của bất kỳ tiêu chuẩn nào và hoàn toàn vô dụng; Xóa điều này nơi bạn có thể. Đây là một sự trở lại cho những ngày xưa tồi tệ, khi VBScript cũng được sử dụng phổ biến trên các trang web. Tuy nhiên, việc sử dụng VBScript đã chết, vì nó chỉ hoạt động trong IE. You will find script examples on the web that have a

<script type="text/javascript">
  var x = 3;
  alert('hello there, I am JavaScript - x is ' + x);
script>

5 attribute. This is not part of any standard and is utterly useless; delete this where you can. This is a throwback to the bad old days, when VBScript was also in popular use on web pages. VBScript usage died however, as it only works in IE.

Trong quá khứ, cần phải bình luận JavaScript với nhận xét HTML để ngăn các trình duyệt hiển thị mã là HTML. Vì điều này chỉ áp dụng cho các trình duyệt rất cũ, bạn không cần phải bận tâm với điều đó nữa. Tuy nhiên, nếu bạn đang sử dụng XHTML nghiêm ngặt làm doctype của mình, bạn cần gửi bất kỳ javascript nào trong khối cdata để làm cho nó xác thực (đừng lo lắng về lý do tại sao - nó không thực sự quan trọng ở giai đoạn học tập của bạn):

<script type="text/javascript">
/*  */
script>

Tuy nhiên, đối với các tài liệu XHTML nghiêm ngặt, việc không nhúng bất kỳ JavaScript nào mà thay vào đó giữ nó trong một tài liệu bên ngoài.

Liên kết với một tệp JavaScript bên ngoài

Để liên kết với JavaScript bên ngoài (trên cùng một máy chủ hoặc bất cứ nơi nào trên Internet) tất cả những gì bạn phải làm là thêm thuộc tính

<script type="text/javascript">
  var x = 3;
  alert('hello there, I am JavaScript - x is ' + x);
script>

4 vào phần tử tập lệnh của bạn:

<script type="text/javascript" src="myscript.js">script>

Khi đáp ứng phần tử này trong một trang, các trình duyệt sau đó sẽ tải tệp

<script type="text/javascript">
  var x = 3;
  alert('hello there, I am JavaScript - x is ' + x);
script>

7 và thực thi nó. Bất kỳ nội dung nào bên trong phần tử

<script type="text/javascript">
  var x = 3;
  alert('hello there, I am JavaScript - x is ' + x);
script>

2 sẽ bị bỏ qua khi bạn cung cấp thuộc tính

<script type="text/javascript">
  var x = 3;
  alert('hello there, I am JavaScript - x is ' + x);
script>

4. Ví dụ sau đây sẽ tải tệp

<script type="text/javascript">
  var x = 3;
  alert('hello there, I am JavaScript - x is ' + x);
script>

7 và thực thi mã trong đó, nhưng sẽ không thực thi cảnh báo bên trong phần tử

<script type="text/javascript">
  var x = 3;
  alert('hello there, I am JavaScript - x is ' + x);
script>

2.

<script type="text/javascript" src="myscript.js">
  alert('I am pointless as I will not be executed');
script>

Giữ mã của bạn trong một tệp JavaScript bên ngoài rất có ý nghĩa:

• Bạn có thể áp dụng cùng một chức năng JavaScript cho một số tài liệu HTML và vẫn giữ bảo trì dễ dàng: nếu có sự thay đổi mong muốn về chức năng tất cả những gì bạn cần làm là thay đổi một tệp duy nhất.
• JavaScript của bạn sẽ được lưu trữ bởi các trình duyệt. Bộ nhớ đệm có nghĩa là các trình duyệt sẽ lấy một bản sao của JavaScript của bạn và lưu trữ nó trên máy tính của khách truy cập lướt trên trang web của bạn. Lần tới khi người dùng này tải cùng một tập lệnh, nó sẽ không được lấy từ máy chủ của bạn mà từ máy tính của chính họ - do đó tải nhanh hơn nhiều.
• Bạn có thể dễ dàng tìm thấy tập lệnh của mình nếu bạn cần sửa đổi nó, tránh cần phải quét qua các tài liệu HTML dài để tìm nơi khắc phục sự cố.
• Khắc phục lỗi trở nên dễ dàng hơn vì công cụ gỡ lỗi hoặc bảng điều khiển lỗi sẽ cho bạn biết tệp nào chứa lỗi và báo cáo một cách đáng tin cậy số dòng.

Bạn có thể thêm nhiều tệp JavaScript như bạn muốn vào một tài liệu, nhưng có một số cân nhắc để thực hiện trước khi đi xuống tuyến đường đó.

Hiệu suất của JavaScript và trình duyệt

Cắt nhiều JavaScript thành các tệp khác nhau, mỗi tệp xử lý một nhiệm vụ tại một thời điểm, là một ý tưởng tuyệt vời để giữ cho chức năng của bạn dễ dàng duy trì và cho phép sửa lỗi nhanh chóng. Ví dụ: bạn có thể có một số khối tập lệnh như sau:

<script type="text/javascript" src="config.js">script>
<script type="text/javascript" src="base.js">script>
<script type="text/javascript" src="effects.js">script>
<script type="text/javascript" src="validation.js">script>
<script type="text/javascript" src="widgets.js">script>

Tuy nhiên, lợi ích phát triển của điều này bị giảm đi bởi hiệu quả này đối với hiệu suất của tài liệu của bạn. Điều này khác nhau một chút từ trình duyệt đến trình duyệt nhưng kịch bản trường hợp xấu nhất (thật đáng buồn vẫn là trình duyệt được sử dụng nhiều thứ hai) như sau:

• Mỗi khi trình duyệt gặp phải phần tử

  <script type="text/javascript">
    var x = 3;
    alert('hello there, I am JavaScript - x is ' + x);
  script>
  

  2, nó sẽ tạm dừng kết xuất (hiển thị) tài liệu.
• Sau đó, nó sẽ tải tệp JavaScript được xác định trong thuộc tính

  <script type="text/javascript">
    var x = 3;
    alert('hello there, I am JavaScript - x is ' + x);
  script>
  

  4 (nếu bạn sử dụng tập lệnh trên máy chủ khác, bạn cũng phải đợi cho đến khi trình duyệt tìm thấy máy chủ đó).
• Sau đó, nó sẽ thực thi tập lệnh trước khi nó tiếp tục truy cập vào truy cập tiếp theo.

Tất cả điều này có nghĩa là việc hiển thị trang web của bạn bị chậm lại cho đến khi tất cả các bước này xảy ra cho tất cả các tập lệnh bạn bao gồm. Điều này có thể trở nên khó chịu cho khách truy cập của bạn.

Một cách xung quanh này là sử dụng tập lệnh phụ trợ để tạo một tệp duy nhất từ ​​tất cả các tệp bạn sử dụng. Bằng cách đó, bạn có lợi ích của việc giữ bảo trì dễ dàng trong khi đồng thời cắt giảm sự chậm trễ cho màn hình trang web của bạn. Có một số tập lệnh như thế này trên web - một trong số chúng được viết bằng PHP và có sẵn từ Ed Eliot.

Độ trễ trong hiển thị cũng xác định nơi bạn muốn đưa JavaScript của mình vào tài liệu.

Đặt JavaScript ở đâu

Về mặt kỹ thuật, bạn có thể đặt JavaScript bất cứ nơi nào trong tài liệu của bạn. Quyết định bạn phải đưa ra là cân nhắc hiệu suất chống lại các nhà phát triển dễ dàng tìm thấy các tập lệnh của bạn và đảm bảo rằng các cải tiến JavaScript của bạn hoạt động ngay lập tức cho khách truy cập của bạn.

Thực tiễn tốt nhất cổ điển để đặt các tập lệnh là trong

<script type="text/javascript">
/*  */
script>

4 của tài liệu:

<html>
  <head>
    <meta charset="utf-8">
    <title>title>
    <script src="myscripts.js">script>
  head>
  <body>
    
  body>
html>

Điều này có lợi ích là một vị trí có thể dự đoán được của các tập lệnh - các nhà phát triển biết nơi để tìm thấy chúng. Nó cũng có lợi ích là đảm bảo rằng tất cả JavaScript đã được tải và thực thi trước khi tài liệu được hiển thị.

Hạn chế là các tập lệnh của bạn trì hoãn việc hiển thị tài liệu và tập lệnh không có quyền truy cập vào HTML trong tài liệu. Do đó, bạn cần trì hoãn việc thực thi bất kỳ tập lệnh nào thay đổi HTML của tài liệu cho đến khi tài liệu đã tải xong. Điều này có thể được thực hiện với một trình xử lý onload hoặc một trong các giải pháp DOMReady hoặc ContentAvailable khác nhau trên web-không có giải pháp nào trong số đó là chống đạn và hầu hết đều dựa vào các bản hack dành riêng cho trình duyệt.

Các chuyên gia hiệu suất đã bắt đầu ủng hộ việc đặt JavaScript của bạn vào cuối

<script type="text/javascript">
/*  */
script>

5 thay thế:

<html>
  <head>
    <meta charset="utf-8">
    <title>title>
  head>
  <body>
    
    <script src="myscripts.js">script>
  body>
html>

Điều này mang lại lợi ích cho JavaScript của bạn bằng cách không trì hoãn việc hiển thị HTML và cũng có nghĩa là bất kỳ HTML nào bạn muốn thay đổi với JavaScript đã có sẵn.

Bạn có thể nhầm lẫn các nhà phát triển duy trì mã của bạn vì thực tế này chưa phổ biến. Nhược điểm khác - có nhiều vấn đề hơn - là HTML sẽ có sẵn trước khi JavaScript của bạn được tải. Mặc dù đây chính xác là những gì bạn muốn đạt được, nhưng điều đó cũng có nghĩa là khách truy cập sẽ bắt đầu tương tác với giao diện của bạn trước khi bạn có cơ hội thay đổi nó. Ví dụ, bạn muốn xác thực một biểu mẫu với JavaScript trước khi nó được gửi đến máy chủ - biểu mẫu có thể được gửi trước khi tập lệnh được tải. Nếu bạn viết kịch bản của mình như một sự nâng cao đơn thuần (thay vì dựa vào nó), đó không phải là vấn đề - chỉ là một sự khó chịu.

Tùy thuộc vào bạn để chọn những gì phù hợp với mục đích của trang web của bạn; Bạn thậm chí có thể chọn thực hiện một hỗn hợp của cả hai-đặt các tập lệnh có chức năng rất quan trọng trong

<script type="text/javascript">
/*  */
script>

4 và gọi chúng cùng với các tập lệnh tốt đẹp để có các tập lệnh ở cuối tài liệu.

<html>
  <head>
    <meta charset="utf-8">
    <title>title>
    <script src="myimportantscripts.js">script>
  head>
  <body>
    
    <script src="myscripts.js">script>
  body>
html>

Bất cứ điều gì bạn làm, hãy chắc chắn rằng thứ tự của các tập lệnh của bạn là đúng, vì các trình duyệt sẽ tải và phân tích chúng từng người khác. Điều này cũng đưa chúng ta đến một điều khác để xem xét khi sử dụng JavaScript.

Bảo mật javascript và thiếu nó

Chúng ta chưa đủ mệt mỏi sao. JavaScript là một ngôn ngữ tuyệt vời và có thể giúp bạn xây dựng các trang web và ứng dụng tương tác rất nhạy bén và đẹp mắt, nhưng nơi nó rơi xuống khủng khiếp là bảo mật. Nói tóm lại, không có mô hình bảo mật trong JavaScript và bạn không nên bảo vệ, mã hóa, bảo mật hoặc lưu trữ bất cứ điều gì quan trọng hoặc bí mật với nó.

Mỗi tập lệnh trên trang đều có cùng quyền - tất cả chúng có thể truy cập lẫn nhau, đọc các biến, chức năng truy cập và cũng ghi đè lên nhau. Nếu bạn có một hàm gọi là

<script type="text/javascript">
/*  */
script>

7 trong tập lệnh được bao gồm đầu tiên của bạn và một hàm khác trong tập lệnh được bao gồm cuối cùng của bạn, thì bản gốc sẽ bị ghi đè. Chúng tôi sẽ trở lại vấn đề này trong bài viết thực tiễn tốt nhất của khóa học này.

Tất cả những điều này sẽ không phải là vấn đề nhiều nếu bạn không bao giờ sử dụng kịch bản của người khác. Tuy nhiên, khi thấy rằng hầu hết các quảng cáo và theo dõi thống kê trực tuyến được thực hiện với JavaScript, đây sẽ không phải là trường hợp-bạn sẽ sử dụng các tập lệnh của bên thứ ba mọi lúc.

Kịch bản cũng có thể đọc cookie; Sử dụng

<script type="text/javascript">
/*  */
script>

8 của một hàm, bạn có thể ghi đè bất kỳ chức năng JavaScript gốc nào. Cuối cùng, JavaScript có thể dễ dàng tắt để bạn có thể quên bảo vệ JavaScript là một biện pháp bảo mật tốt.

JavaScript luôn có sẵn để đọc và phân tích bởi các nhà phát triển khác. Tất nhiên bạn có thể đóng gói (loại bỏ tất cả khoảng trắng không cần thiết) và obfuscate (sử dụng tên biến và tên chức năng ngẫu nhiên) các tập lệnh của bạn, nhưng ngay cả những tập lệnh đó cũng có thể được thiết kế ngược; Trong trường hợp này, người duy nhất bạn dừng lại sử dụng mã của mình dễ dàng là chính bạn. Sự sẵn có của mã nguồn và khả năng đọc và phân tích nó có khả năng là yếu tố chính cho sự thành công của JavaScript - trong nhiều năm chúng tôi đã học được bằng cách nhìn trộm các giải pháp của người khác. Ngày nay, điều này là may mắn vì có những cuốn sách và hướng dẫn tốt có sẵn.

Trong khi việc đóng gói và obfuscation là vô dụng như các biện pháp bảo mật, chúng thường được thực hiện trên các tập lệnh trung bình và lớn trước khi mã được đưa vào trực tiếp trên web như một phần của quá trình xuất bản. Điều này giúp cắt giảm số lượng băng thông cần thiết để phục vụ trang web cho người dùng. Tiết kiệm một vài byte ở đây và có vẻ không có ý nghĩa trên blog của bạn về mèo con, nhưng nó có thể thêm vào tiết kiệm lớn khi bạn đang xử lý một trang web với các số liệu sử dụng như của Google.com.

Kỹ thuật để tránh

Vấn đề lớn nhất với việc học JavaScript là có một lượng lớn thông tin lỗi thời và có thể nguy hiểm ngoài kia. Điều này đặc biệt bực bội vì rất nhiều thông tin này được trình bày rất tốt và mang đến cho rất nhiều người mới bắt đầu cảm giác giành chiến thắng nhanh chóng khi biết JavaScript bằng cách sao chép và dán một số mã làm sẵn.

Vì môi trường JavaScript đang được áp dụng là không rõ (người dùng có thể có bất kỳ thiết lập nào) và chúng tôi không biết quyết định nào dẫn đến mã chúng tôi tìm thấy trên web được tạo theo một cách cụ thể, chúng tôi không nên chỉ ngón tay vào các giải pháp. Tuy nhiên, những ý tưởng sau đây là quá khứ và bạn chỉ nên sử dụng chúng như là phương sách cuối cùng nếu bạn cần chúng hỗ trợ các trình duyệt thực sự cũ, xấu:

• <script type="text/javascript">
  /*  */
  script>
  

  9 - Bạn có thể viết nội dung vào tài liệu bằng

  <script type="text/javascript">
  /*  */
  script>
  

  9 nhưng có một số vấn đề với điều này: bạn trộn HTML và tập lệnh và bạn cần thêm nút tập lệnh chính xác nơi bạn muốn nội dung xuất hiện, làm chậm trang của bạn. Đó là một cách rất thú vị để dễ dàng hiển thị (ví dụ như trong một hướng dẫn hoặc khi kiểm tra/gỡ lỗi mã của bạn) kết quả của một số mã là gì, nhưng đó là một ví dụ tồi để hiển thị mọi người, vì bạn không bao giờ phải sử dụng nó trong mã trực tiếp.

• <script type="text/javascript" src="myscript.js">script>
  

  1 - Như tên của nó ngụ ý, phần tử

  <script type="text/javascript" src="myscript.js">script>
  

  2 ngược lại với phần tử

  <script type="text/javascript">
    var x = 3;
    alert('hello there, I am JavaScript - x is ' + x);
  script>
  

  2. Nội dung bên trong nó sẽ được hiển thị cho người dùng đã vô hiệu hóa JavaScript. Lý do chính để sử dụng

  <script type="text/javascript" src="myscript.js">script>
  

  2 là để cung cấp nội dung thay thế cho người dùng không có sẵn JavaScript trong trình duyệt của họ. Người dùng không có JavaScript don lồng làm điều đó để làm cho cuộc sống của bạn khó khăn hơn - họ có thể làm điều đó vì chính sách bảo mật hoặc vì trình duyệt họ đang sử dụng không hỗ trợ JavaScript. Nhưng những gì bạn có thể cung cấp bên trong

  <script type="text/javascript" src="myscript.js">script>
  

  2 bị hạn chế và bạn không nên sử dụng nó. Thay vào đó, cung cấp một ghi chú, bảo người dùng bật JavaScript trong trình duyệt của họ - đối với một số người dùng điều này là không thể.

• <script type="text/javascript" src="myscript.js">script>
  

  6 - Đây là một cách rất phổ biến để gọi chức năng JavaScript, hầu hết thời gian khi một nút không phải là một tùy chọn (bạn không thể tạo kiểu cho các nút trong các trình duyệt cũ hơn). Vấn đề là đây không phải là một liên kết hợp lệ vì

  <script type="text/javascript" src="myscript.js">script>
  

  7 không phải là giao thức Internet (như

  <script type="text/javascript" src="myscript.js">script>
  

  8 hoặc

  <script type="text/javascript" src="myscript.js">script>
  

  9). Nếu JavaScript bị tắt, liên kết vẫn xuất hiện và cho người dùng sai hy vọng rằng điều gì đó sẽ xảy ra.

• <script type="text/javascript" src="myscript.js">
    alert('I am pointless as I will not be executed');
  script>
  

  0 và

  <script type="text/javascript" src="myscript.js">
    alert('I am pointless as I will not be executed');
  script>
  

  1 - Cả hai giải pháp này đều tương đương với DOM trong các trình duyệt cũ (NetScape 4.x và Internet Explorer 4) và trừ khi bạn cần hỗ trợ chúng (xin lỗi nếu bạn phải) đây là mã không cần thiết.

Xem thêm

Câu hỏi tập thể dục

• Liên kết sau đây làm gì và những vấn đề đó có thể gây ra?

<a href="javascript: open('tac.pdf')">Read our Terms and Conditionsa>

• Cung cấp các tham số cho tập lệnh là một cách mạnh mẽ để làm cho chúng có thể tái sử dụng. Điều rất quan trọng là giữ tùy chọn để cung cấp các tham số nhỏ gọn và dễ sử dụng. Các nhược điểm của giải pháp sau (cung cấp các tham số nhỏ gọn và dễ sử dụng) là gì?

<script type="text/javascript">
  var x = 3;
  alert('hello there, I am JavaScript - x is ' + x);
script>

0

• Vấn đề với cái gọi là các biến số toàn cầu là gì, và làm thế nào chúng có thể tránh được?
• Trường hợp nào trong tài liệu bạn sẽ đặt một kịch bản lớn rất tốt để có nhưng không quan trọng đối với chức năng của trang web? Tại sao?
• Vấn đề là thực hiện các tập lệnh như thế này là gì:

<script type="text/javascript">
  var x = 3;
  alert('hello there, I am JavaScript - x is ' + x);
script>

1

Những gì được yêu cầu để chạy JavaScript?

JavaScript chạy trong trình duyệt hoặc máy chủ?

Tất cả các trình duyệt có chạy JavaScript không?

Tôi có cần cài đặt bất cứ thứ gì để chạy JavaScript không?