JavaScript & jQuery: Hướng dẫn sử dụng còn thiếu, Tái bản lần thứ 3 [Sách] – cách bắt đầu một tệp javascript

Chương 1. Viết chương trình JavaScript đầu tiên của bạn Tự nó, HTML không có bất kỳ thông minh nào: Nó không thể làm toán, nó không thể tìm ra ai đó đã điền đúng vào biểu mẫu hay chưa,… – Tuyển chọn từ JavaScript & jQuery: Thiếu Sách hướng dẫn, Ấn bản thứ 3 [Sách]

Bạn đang xem: cách khởi động tệp javascript

< / span> Chương 1. Viết chương trình JavaScript đầu tiên của bạn

Tự bản chất, HTML không có chút thông minh nào: Nó không thể làm toán, nó không thể tìm ra liệu ai đó đã điền đúng vào biểu mẫu hay không và nó không thể đưa ra quyết định dựa trên cách khách truy cập web tương tác với nó. Về cơ bản, HTML cho phép mọi người đọc văn bản, xem ảnh, xem video và nhấp vào liên kết để chuyển đến các trang web khác với nhiều văn bản, hình ảnh và video hơn. Để thêm thông tin vào các trang web của bạn để chúng có thể trả lời khách truy cập trang web của bạn, bạn cần JavaScript.

JavaScript cho phép một trang web phản ứng một cách thông minh. Với nó, bạn có thể tạo các biểu mẫu web thông minh cho phép khách truy cập biết khi nào họ quên bao gồm thông tin cần thiết. Bạn có thể làm cho các phần tử xuất hiện, biến mất hoặc di chuyển xung quanh một trang web (xem Hình 1-1 ). Bạn thậm chí có thể cập nhật nội dung của một trang web với thông tin được truy xuất từ ​​máy chủ web — mà không cần phải tải một trang web mới. Nói tóm lại, JavaScript cho phép bạn làm cho các trang web của mình hấp dẫn, hiệu quả và hữu ích hơn.

Lưu ý

Trên thực tế, HTML5 bổ sung một số tính năng thông minh cho HTML — bao gồm cả xác thực biểu mẫu cơ bản. Nhưng bởi vì không phải tất cả các trình duyệt đều hỗ trợ những bổ sung tiện lợi này (và vì bạn có thể làm được nhiều điều hơn nữa với các biểu mẫu và JavaScript), bạn vẫn cần JavaScript để xây dựng các biểu mẫu tương tác và tốt nhất, thân thiện nhất với người dùng. Bạn có thể tìm hiểu thêm về HTML5 và biểu mẫu web trong Ben Biểu mẫu HTML5 của Henick (O’Reilly) và Gaurav Biểu mẫu HTML5 thành thạo của Gupta (Xuất bản gói). < span class = "indexterm" id = "idx-CHP-1-0004">

Hình 1-1. Tai tương tác ( http://www.amplifon.co.uk/interactive-ear/ ), một hướng dẫn tương tác về thính giác của con người, cho phép khách truy cập tìm hiểu và khám phá các bộ phận khác nhau của tai người. Thông tin mới xuất hiện theo các chuyển động và nhấp chuột của chuột. Với JavaScript, bạn có thể tạo các hiệu ứng tương tác của riêng mình.

Giới thiệu Lập trình

Đối với nhiều người, thuật ngữ “lập trình máy tính” gợi lên hình dung về những con mọt sách siêu thông minh cúi mình trên bàn phím, gõ những thứ vô nghĩa gần như không thể hiểu được trong nhiều giờ liên tục. Và, thành thật mà nói, một số chương trình là như vậy. Lập trình có vẻ giống như một phép thuật phức tạp vượt xa những người bình thường. Nhưng nhiều khái niệm lập trình không khó để nắm bắt và khi các ngôn ngữ lập trình ngày càng phát triển, JavaScript là ngôn ngữ đầu tiên tốt cho những người mới lập trình.

Tuy nhiên, JavaScript phức tạp hơn HTML hoặc CSS và việc lập trình thường là ngoại lai thế giới cho các nhà thiết kế web; vì vậy một mục tiêu của cuốn sách này là giúp bạn suy nghĩ giống như một lập trình viên hơn. Trong suốt cuốn sách này, bạn sẽ học các khái niệm lập trình cơ bản áp dụng cho dù bạn đang viết JavaScript, ActionScript hay thậm chí là viết một chương trình máy tính để bàn bằng C ++. Quan trọng hơn, bạn sẽ học cách tiếp cận một nhiệm vụ lập trình để bạn biết chính xác những gì bạn muốn làm trước khi bắt đầu thêm JavaScript vào một trang web.

Nhiều nhà thiết kế web ngay lập tức bị thu hút bởi điều kỳ lạ các ký hiệu và từ được sử dụng trong JavaScript. Một chương trình JavaScript trung bình có đầy ký hiệu ({} [];, ()! =) Và đầy những từ lạ ( var , null < / code>, else if ). Theo nhiều cách, học một ngôn ngữ lập trình cũng giống như học một ngôn ngữ khác. Bạn cần học từ mới, dấu câu mới và hiểu cách ghép chúng lại với nhau để có thể giao tiếp thành công.

Mỗi ngôn ngữ lập trình đều có bộ từ khóa và ký tự riêng cũng như bộ quy tắc riêng để ghép các từ và ký tự đó lại với nhau — cú pháp của ngôn ngữ. Bạn sẽ cần phải ghi nhớ các từ và quy tắc của ngôn ngữ JavaScript (hoặc ít nhất hãy giữ cuốn sách này làm tài liệu tham khảo). Khi học nói một ngôn ngữ mới, bạn nhanh chóng nhận ra rằng việc đặt trọng âm vào âm tiết sai có thể khiến một từ khó hiểu. Tương tự như vậy, một lỗi chính tả đơn giản hoặc thậm chí thiếu dấu chấm câu có thể ngăn chương trình JavaScript hoạt động hoặc gây ra lỗi trong trình duyệt web. Bạn sẽ mắc rất nhiều sai lầm khi bắt đầu học lập trình — đó chỉ là bản chất của lập trình.

Lúc đầu, có thể bạn sẽ thấy việc lập trình JavaScript khá khó chịu — bạn sẽ mất rất nhiều thời gian theo dõi các lỗi bạn đã thực hiện khi nhập tập lệnh. Ngoài ra, ban đầu bạn có thể thấy một số khái niệm liên quan đến lập trình hơi khó theo dõi. Nhưng đừng lo lắng: Nếu trước đây bạn đã cố gắng học JavaScript và bỏ cuộc vì cho rằng nó quá khó, thì cuốn sách này sẽ giúp bạn vượt qua những rào cản thường gặp đối với những người mới học lập trình. (Và nếu bạn có kinh nghiệm lập trình, cuốn sách này sẽ dạy cho bạn các đặc điểm riêng của JavaScript và các khái niệm độc đáo liên quan đến lập trình cho trình duyệt web.)

Ngoài ra, cuốn sách này không chỉ về JavaScript — cũng là về jQuery, thế giới thư viện JavaScript phổ biến nhất. jQuery làm cho việc lập trình JavaScript phức tạp trở nên dễ dàng hơn… dễ dàng hơn nhiều. Vì vậy, với một chút kiến ​​thức về JavaScript và sự trợ giúp của jQuery, bạn sẽ nhanh chóng tạo ra các trang web tương tác phức tạp.

CÂU HỎI THƯỜNG GẶP: Ngôn ngữ biên dịch so với Ngôn ngữ viết kịch bản

JavaScript được gọi là ngôn ngữ kịch bản. Tôi cũng đã nghe thuật ngữ này được sử dụng cho các ngôn ngữ khác như PHP và ColdFusion. Ngôn ngữ lập trình script là gì?

Hầu hết các chương trình chạy trên máy tính của bạn đều được viết bằng các ngôn ngữ được biên dịch . Biên dịch là quá trình tạo một tệp sẽ chạy trên máy tính bằng cách dịch mã mà lập trình viên viết thành các hướng dẫn mà máy tính có thể hiểu được. Sau khi một chương trình được biên dịch, bạn có thể chạy nó trên máy tính của mình và bởi vì một chương trình đã biên dịch đã được chuyển đổi trực tiếp thành các lệnh mà máy tính hiểu được, nó sẽ chạy nhanh hơn chương trình được viết bằng ngôn ngữ kịch bản. Thật không may, việc biên dịch một chương trình là một quá trình tốn nhiều thời gian: Bạn phải viết chương trình, biên dịch nó và sau đó kiểm tra nó. Nếu chương trình không hoạt động, bạn phải thực hiện lại toàn bộ quá trình.

Mặt khác, một ngôn ngữ script , chỉ được biên dịch khi một trình thông dịch (một chương trình khác có thể chuyển đổi tập lệnh thành một thứ mà máy tính có thể hiểu được) đọc nó. Trong trường hợp JavaScript, trình thông dịch được tích hợp trong trình duyệt web. Vì vậy, khi trình duyệt web của bạn đọc một trang web có chương trình JavaScript trong đó, trình duyệt web sẽ dịch JavaScript thành một thứ mà máy tính hiểu được. Kết quả là, một ngôn ngữ kịch bản hoạt động chậm hơn một ngôn ngữ biên dịch, bởi vì mỗi khi nó chạy, chương trình phải được dịch cho máy tính. Ngôn ngữ viết kịch bản rất phù hợp cho các nhà phát triển web: Các tập lệnh thường nhỏ hơn và ít phức tạp hơn nhiều so với các chương trình dành cho máy tính để bàn, vì vậy tốc độ không cao ' t quan trọng. Ngoài ra, vì chúng không yêu cầu biên dịch nên việc tạo và thử nghiệm các chương trình sử dụng ngôn ngữ kịch bản là một quá trình nhanh hơn nhiều. < / p>

Chương trình máy tính là gì?

Khi bạn thêm Gửi JavaScript tới trang web, bạn đang viết một chương trình máy tính. Đúng là, hầu hết các chương trình JavaScript đơn giản hơn nhiều so với các chương trình bạn sử dụng để đọc email, chỉnh sửa ảnh và xây dựng trang web. Nhưng mặc dù các chương trình JavaScript (còn được gọi là tập lệnh) đơn giản hơn và ngắn hơn, chúng có nhiều đặc tính giống nhau của các chương trình phức tạp hơn.

Tóm lại, bất kỳ chương trình máy tính nào cũng là một chuỗi các bước được hoàn thành trong một đơn đặt hàng được chỉ định. Giả sử bạn muốn hiển thị thông báo chào mừng bằng tên của khách truy cập trang web: “Chào mừng, Bob!” Có một số việc bạn cần làm để hoàn thành nhiệm vụ này:

  1. Hỏi tên của khách truy cập .

  2. Nhận phản hồi của khách truy cập .

  3. In (nghĩa là hiển thị) thông báo trên trang web .

Mặc dù bạn có thể không bao giờ muốn in thông báo chào mừng trên một trang web, nhưng ví dụ này minh họa quy trình cơ bản của lập trình: Xác định những gì bạn muốn làm, sau đó chia nhiệm vụ đó thành các bước riêng lẻ. Mỗi khi bạn muốn tạo một chương trình JavaScript, bạn phải trải qua quá trình xác định các bước cần thiết để đạt được mục tiêu của mình. Khi bạn biết các bước, bạn sẽ dịch ý tưởng của mình thành mã lập trình — các từ và ký tự giúp trình duyệt web hoạt động theo cách bạn muốn.

Cách Thêm JavaScript vào Trang

Các trình duyệt web được xây dựng để 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 của trình duyệt web hiểu HTML và CSS được gọi là bố cục hoặc công cụ kết xuất. Nhưng hầu hết các trình duyệt cũng có một thứ gọi là trình thông dịch JavaScript. Đó là phần của trình duyệt hiểu JavaScript và có thể thực thi các bước của chương trình JavaScript. 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 JavaScript xuất hiện bằng cách sử dụng thẻ & lt; script & gt; .

& lt; script & gt; là HTML thông thường. Nó hoạt động giống như một công tắc có hiệu lực nói “Này, trình duyệt web, đây là một số mã JavaScript; bạn không biết phải làm gì với nó, vì vậy hãy giao nó cho trình thông dịch JavaScript. ” Khi trình duyệt web gặp thẻ đóng & lt; / script & gt; , trình duyệt biết rằng nó đã đến cuối chương trình JavaScript và có thể quay lại các nhiệm vụ bình thường của nó.

< p> Trong phần lớn thời gian, bạn sẽ thêm thẻ & lt; script & gt; vào phần & lt; head & gt; của trang web , như thế này:

 & lt;! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http : //www.w3.org/TR/
html4 / nghiêm ngặt.dtd "& gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Web của tôi  ​​ Trang & lt; / title & gt;
  & lt; script type = "text / javascript" & gt;    
  & lt; / script & gt;  
& lt; / head & gt; 

Thuộc tính & lt; script & gt; type của thẻ cho biết định dạng và kiểu của tập lệnh theo sau. Trong trường hợp này, type = “text / javascript” có nghĩa là tập lệnh là văn bản thông thường (giống như HTML) và nó được viết bằng JavaScript.

Nếu bạn đang sử dụng HTML5, cuộc sống thậm chí còn đơn giản hơn. Bạn có thể bỏ qua hoàn toàn thuộc tính type:

 & lt;! Doctype html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; meta charset = "UTF-8" & gt;
& lt; title & gt; Trang Web của tôi & lt; / title & gt;
  & lt; script & gt;  
  & lt; / script & gt;  
& lt; / head & gt; 

Trên thực tế, các trình duyệt web cho phép bạn loại bỏ thuộc tính type trong các tệp HTML 4.01 và XHTML 1.0 — tập lệnh sẽ chạy giống nhau; tuy nhiên, trang của bạn sẽ không xác thực chính xác nếu không có thuộc tính type (xem hộp trên Validating Web Pages để biết thêm về xác thực). Sách này sử dụng HTML5 cho loại tài liệu, nhưng mã JavaScript sẽ giống nhau và hoạt động giống nhau cho HTML 4.01 và XHTML 1.

Sau đó, bạn thêm mã JavaScript của mình vào giữa mở và đóng & lt; script & gt; :

 & lt;! doctype html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; meta charset = "UTF-8" & gt;
& lt; title & gt; Trang Web của tôi & lt; / title & gt;
& lt; script & gt;
    alert ('hello world!');  
& lt; / script & gt;
& lt; / head & gt; 

Bạn sẽ tìm hiểu JavaScript này làm gì trong giây lát. Bây giờ, hãy chuyển sự chú ý của bạn đến các thẻ mở và đóng & lt; script & gt; . Để thêm tập lệnh vào trang của bạn, hãy bắt đầu bằng cách chèn các thẻ này. Trong nhiều trường hợp, bạn sẽ đặt các thẻ & lt; script & gt; trong thẻ & lt; head & gt; của trang để giữ Mã JavaScript được sắp xếp gọn gàng trong một vùng của trang web.

Tuy nhiên, việc đặt & lt; script & gt;thẻ ở bất kỳ đâu bên trong HTML của trang. Trên thực tế, như bạn sẽ thấy ở phần sau của chương này, có một lệnh JavaScript cho phép bạn viết thông tin trực tiếp vào một trang web. Sử dụng lệnh đó, bạn đặt & lt; script & gt; ở vị trí trên trang (một nơi nào đó bên trong nội dung) nơi bạn muốn tập lệnh viết thông điệp của nó. Trên thực tế, thường đặt các thẻ & lt; script & gt; ngay bên dưới thẻ đóng & lt; / body & gt; — cách tiếp cận này khiến đảm bảo trang được tải và khách truy cập nhìn thấy nó trước khi chạy bất kỳ JavaScript nào.

LÊN TỐC ĐỘ: Phía Máy khách so với Máy chủ Bên cạnh

JavaScript ban đầu được tạo như một ngôn ngữ phía máy khách. JavaScript phía máy khách được máy chủ web phân phối tới các trình duyệt web. Những người truy cập trang web của bạn tải xuống trang web của bạn và JavaScript của nó, sau đó trình duyệt web của họ — máy khách — xử lý JavaScript và biến điều kỳ diệu xảy ra.

Một loại ngôn ngữ lập trình web thay thế được gọi là ngôn ngữ phía máy chủ, bạn sẽ tìm thấy trong các trang được xây dựng xung quanh PHP, .NET, ASP, ColdFusion, Ruby on Rails và các công nghệ máy chủ web khác. Các ngôn ngữ lập trình phía máy chủ, như tên cho thấy, chạy trên máy chủ web. Họ có thể thể hiện rất nhiều trí thông minh bằng cách truy cập cơ sở dữ liệu , xử lý thẻ tín dụng và gửi email trên toàn cầu. Vấn đề với các ngôn ngữ phía máy chủ là chúng yêu cầu trình duyệt web gửi yêu cầu đến máy chủ web, buộc khách truy cập phải đợi cho đến khi có trang mới với thông tin mới.

Mặt khác, các ngôn ngữ phía máy khách tay, có thể phản ứng ngay lập tức và thay đổi những gì khách truy cập nhìn thấy trong trình duyệt web của mình mà không cần tải xuống trang mới. Nội dung có thể xuất hiện hoặc biến mất, di chuyển xung quanh màn hình hoặc tự động cập nhật dựa trên cách khách truy cập tương tác với trang. Khả năng đáp ứng này cho phép bạn tạo các trang web giống các chương trình dành cho máy tính để bàn hơn là các trang web tĩnh. Nhưng JavaScript không phải là công nghệ phía máy khách duy nhất trong thị trấn. Bạn cũng có thể sử dụng các trình cắm để thêm thông minh lập trình vào trang web. Các ứng dụng Java là một ví dụ. Đây là những chương trình nhỏ, được viết bằng ngôn ngữ lập trình Java, chạy trong trình duyệt web. Chúng cũng có xu hướng khởi động chậm và được biết là có thể làm trình duyệt gặp sự cố.

Flash là một trình cắm khác công nghệ dựa trên -in cung cấp hoạt ảnh, video, âm thanh tinh vi và nhiều tiềm năng tương tác. Trên thực tế, đôi khi khó có thể biết được một trang web tương tác là sử dụng JavaScript hay Flash. Ví dụ, Google Maps cũng có thể được tạo bằng Flash (trên thực tế, Yahoo! Maps đã từng là một ứng dụng Flash, cho đến khi Yahoo! Tạo lại nó bằng JavaScript). Một cách nhanh chóng để phân biệt sự khác biệt: Nhấp chuột phải vào phần của trang mà bạn nghĩ có thể là Flash (trong trường hợp này là bản đồ); nếu đúng như vậy, bạn sẽ thấy menu bật lên bao gồm “Giới thiệu về Flash Player”.

< p> Ajax, mà bạn sẽ tìm hiểu trong Phần 4 của cuốn sách này, kết hợp phía máy khách và phía máy chủ lại với nhau. Ajax là một phương pháp sử dụng JavaScript của để nói chuyện với máy chủ, truy xuất thông tin từ máy chủ và cập nhật trang web mà không cần để tải một trang web mới. Google Maps sử dụng kỹ thuật này để cho phép bạn di chuyển xung quanh bản đồ mà không buộc bạn phải tải một trang web mới.

Ngày nay, JavaScript được sử dụng nhiều bên ngoài trình duyệt web. Node.js là phiên bản JavaScript phía máy chủ có thể kết nối với cơ sở dữ liệu, truy cập hệ thống tệp của máy chủ web và thực hiện nhiều thao tác khác tác vụ trên máy chủ web. Cuốn sách này không thảo luận về khía cạnh đó của lập trình JavaScript, nhưng để có video giới thiệu tuyệt vời về Node.js, hãy xem www.youtube.com/watch?v=hKQr2DGJjUQ/ .

Ngoài ra, một số cơ sở dữ liệu tương đối mới thậm chí còn sử dụng JavaScript làm ngôn ngữ để tạo, truy xuất và cập nhật các bản ghi cơ sở dữ liệu. MongoDB và CouchDB là hai ví dụ phổ biến. Bạn có thể nghe thấy thuật ngữ JavaScript full-stack, có nghĩa là sử dụng JavaScript làm ngôn ngữ cho trình duyệt phía máy khách, máy chủ web và điều khiển cơ sở dữ liệu. Một ngôn ngữ để thống trị tất cả!

Tệp JavaScript bên ngoài

Sử dụng & lt; script & gt;Thẻ như đã thảo luận trong phần trước cho phép bạn thêm JavaScript vào một trang web. Nhưng nhiều khi bạn sẽ tạo các tập lệnh mà bạn muốn chia sẻ với tất cả các trang trên trang web của mình. Ví dụ: bạn có thể thêm một bảng các tùy chọn điều hướng bổ sung trượt lên trang theo chuyển động chuột của khách truy cập (xem Hình 1-2 ). Bạn sẽ muốn có cùng một bảng điều khiển slide-in lạ mắt đó trên mọi trang của trang web của mình, nhưng sao chép và dán cùng một mã JavaScript vào mỗi trang là một ý tưởng thực sự tồi vì một số lý do.

Đầu tiên, việc sao chép và dán cùng một đoạn mã lặp đi lặp lại rất nhiều, đặc biệt nếu bạn có một trang web có hàng trăm trang. Thứ hai, nếu bạn quyết định thay đổi hoặc nâng cao mã JavaScript, bạn sẽ cần tìm mọi trang bằng cách sử dụng JavaScript đó và cập nhật mật mã. Cuối cùng, vì tất cả mã của chương trình JavaScript sẽ được đặt trong mọi trang web, mỗi trang sẽ lớn hơn nhiều và tải xuống chậm hơn.

Một cách tiếp cận tốt hơn là sử dụng tệp JavaScript bên ngoài. Nếu bạn đã sử dụng các tệp CSS bên ngoài cho các trang web của mình, thì kỹ thuật này sẽ cảm thấy quen thuộc. Tệp JavaScript bên ngoài là tệp văn bản chứa mã JavaScript và kết thúc bằng phần mở rộng tệp .js — navigation.js, chẳng hạn. Tệp được liên kết với một trang web bằng thẻ & lt; script & gt; . Ví dụ: để thêm tệp JavaScript này vào trang chủ của bạn, bạn có thể viết như sau:

 & lt;! doctype html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; meta charset = "UTF-8" & gt;
& lt; title & gt; Trang Web của tôi & lt; / title & gt;
& lt; script   src = "navigation.js"   & gt; & lt; / script & gt;
& lt; / head & gt; 

Thuộc tính src của thẻ & lt; script & gt; hoạt động giống như Thuộc tính src của thẻ & lt; img & gt; hoặc & lt; a & gt; href của thẻ code>. Nói cách khác, nó trỏ đến một tệp trong trang web của bạn hoặc trên một trang web khác (xem hộp trên Loại URL ).

Lưu ý

Khi thêm thuộc tính src để liên kết đến tệp JavaScript bên ngoài, không thêm bất kỳ mã JavaScript nào giữa mở và đóng & lt; script & gt; các thẻ . Nếu bạn muốn liên kết đến tệp JavaScript bên ngoài và thêm mã JavaScript tùy chỉnh vào trang, hãy sử dụng bộ thẻ thứ hai gồm & lt; script & gt; . Ví dụ:

 & lt; script src = "navigation.js" & gt; & lt; / script & gt;
& lt; script & gt;
  alert ('Xin chào thế giới!');
& lt; / script & gt; 

Bạn có thể (và thường sẽ) đính kèm nhiều tệp JavaScript bên ngoài vào một trang web. Ví dụ: bạn có thể đã tạo một tệp JavaScript bên ngoài điều khiển bảng điều hướng thả xuống và một tệp khác cho phép bạn thêm trình chiếu tiện lợi vào một trang ảnh. Trên trang thư viện ảnh của mình, bạn muốn có cả hai chương trình JavaScript, vì vậy bạn sẽ đính kèm cả hai tệp.

Ngoài ra, bạn có thể đính kèm tệp JavaScript và thêm chương trình JavaScript vào cùng một trang trang như sau:

 & lt;! doctype html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; meta charset = "UTF-8" & gt;
& lt; title & gt; Trang Web của tôi & lt; / title & gt;
  & lt; script src = "navigation.js" & gt; & lt; / script & gt;  
  & lt; script src = "slideshow.js" & gt; & lt; / script & gt;  
  & lt; script & gt;  
    alert ('hello world!');  
  & lt; / script & gt;  
& lt; / head & gt; 

Hình 1-2. Trang web của Nike.com sử dụng JavaScript rộng rãi để tạo ra một giới thiệu hấp dẫn cho các sản phẩm của họ. Trang chủ (trên cùng) bao gồm một hàng các nút điều hướng ở trên cùng — Nam, Nữ, Trẻ em, v.v. — khi di chuột qua, sẽ hiển thị một bảng các tùy chọn điều hướng bổ sung. Ví dụ: di chuột qua nút Thể thao (được khoanh tròn ở hình dưới cùng) sẽ hiển thị một bảng liệt kê các môn thể thao khác nhau mà Nike sản xuất sản phẩm.

Chỉ cần nhớ rằng bạn phải sử dụng một bộ mở và đóng & lt; script & gt; cho mỗi tệp JavaScript bên ngoài. Bạn sẽ tạo một tệp JavaScript bên ngoài trong hướng dẫn bắt đầu trên Đính kèm tệp JavaScript bên ngoài .

Bạn có thể giữ các tệp JavaScript bên ngoài ở bất kỳ đâu bên trong thư mục gốc của trang web của bạn (hoặc bất kỳ thư mục con nào bên trong thư mục gốc). Nhiều nhà phát triển web tạo một thư mục đặc biệt cho các tệp JavaScript bên ngoài trong thư mục gốc của trang web: tên phổ biến là js (nghĩa là JavaScript) hoặc libs (nghĩa là thư viện).

LÊN TỐC ĐỘ: Loại URL

Khi đính kèm tệp JavaScript bên ngoài vào trang trên web, bạn cần chỉ định URL cho thuộc tính src của thẻ & lt; script & gt; . URL hoặc Bộ định vị tài nguyên thống nhất là một đường dẫn đến một tệp — như một trang web khác, một hình ảnh hoặc một tệp JavaScript — nằm trên Web. Có ba loại đường dẫn: đường dẫn tuyệt đối, đường dẫn gốc tương đối và đường dẫn tài liệu-tương đối. Cả ba đều cho biết nơi trình duyệt web có thể tìm thấy một tệp cụ thể.

Đường dẫn tuyệt đối giống như một địa chỉ bưu điện – nó chứa tất cả thông tin cần thiết để trình duyệt web ở bất kỳ đâu trên thế giới tìm thấy tệp. Một đường dẫn tuyệt đối bao gồm http: //, tên máy chủ, thư mục và tên của tệp. Ví dụ: http://www.uptospeedguides.com/scripts/site.js.

Một đường dẫn gốc tương đối cho biết vị trí đặt tệp liên quan đến thư mục cấp cao nhất của trang web – thư mục gốc của trang web . Đường dẫn gốc tương đối không bao gồm http: // hoặc tên miền. Nó bắt đầu bằng dấu / (dấu gạch chéo) cho biết thư mục gốc của trang web – thư mục chứa trang chủ. Ví dụ: /scripts/site.js cho biết rằng tệp site.js nằm bên trong một thư mục có tên scripts, chính nó cũng nằm trong đó trong thư mục cấp cao nhất của trang web. Một cách dễ dàng để tạo một đường dẫn gốc tương đối là sử dụng một đường dẫn tuyệt đối và loại bỏ http: // và tên máy chủ. Ví dụ: http://www.uptospeedguides.com/index.html được viết dưới dạng URL tương đối gốc là /index.html.

Một đường dẫn liên quan đến tài liệu chỉ định đường dẫn từ trang web đến Tệp JavaScript. Nếu bạn có nhiều cấp thư mục trên trang web của mình, bạn sẽ cần sử dụng các đường dẫn khác nhau để trỏ đến cùng một tệp JavaScript. Ví dụ: giả sử bạn có một tệp JavaScript có tên site.js nằm trong một thư mục có tên là script trong thư mục chính của trang web của bạn. Đường dẫn liên quan đến tài liệu đến tệp đó sẽ giống một chiều đối với trang chủ – scripts / site.js – nhưng đối với một trang nằm bên trong một thư mục có tên about, đường dẫn đến cùng một tệp sẽ khác; ../scripts/site.js–the ../ có nghĩa là leo lên khỏi thư mục about, trong khi /scripts/site.js có nghĩa là chuyển đến thư mục scripts và lấy tệp site.js.

Dưới đây là một số mẹo sử dụng loại URL nào:

  • Nếu bạn đang trỏ đến một tệp không nằm trên cùng một máy chủ với trang web, bạn phải sử dụng một đường dẫn tuyệt đối. Đây là kiểu duy nhất có thể trỏ đến một trang web khác.

  • Đường dẫn gốc tương đối phù hợp với các tệp JavaScript được lưu trữ trên trang web của riêng bạn. Bởi vì chúng luôn bắt đầu ở thư mục gốc, URL cho tệp JavaScript sẽ giống nhau cho mọi trang trên trang web của bạn, ngay cả khi các trang web nằm trong các thư mục và thư mục con trên trang web của bạn. Tuy nhiên, đường dẫn gốc tương đối không hoạt động trừ khi bạn đang xem các trang web của mình thông qua máy chủ web — máy chủ web của bạn trên Internet hoặc máy chủ web mà bạn đã thiết lập trên máy tính của mình cho mục đích thử nghiệm. Nói cách khác, nếu bạn chỉ đang mở một trang web từ máy tính bằng cách sử dụng lệnh Tệp → Mở của trình duyệt, thì trình duyệt web sẽ không thể định vị, tải hoặc chạy các tệp JavaScript được đính kèm bằng đường dẫn gốc-tương đối.

  • Đường dẫn liên quan đến tài liệu là tốt nhất khi bạn thiết kế trên máy tính của riêng mình mà không cần sự hỗ trợ của máy chủ web. Bạn có thể tạo tệp JavaScript bên ngoài, đính kèm tệp đó vào trang web, sau đó kiểm tra JavaScript trong trình duyệt web chỉ bằng cách mở trang web khỏi ổ cứng của bạn. Các đường dẫn liên quan đến tài liệu hoạt động tốt khi được di chuyển đến trang web thực tế, đang sinh sống của bạn trên Internet, nhưng bạn sẽ phải ghi lại các URL vào tệp JavaScript nếu bạn di chuyển trang web đến một vị trí khác trên máy chủ. Cuốn sách này sử dụng các đường dẫn liên quan đến tài liệu, cho phép bạn theo dõi và kiểm tra các hướng dẫn trên máy tính của riêng bạn mà không cần máy chủ web.

Lưu ý

Đôi khi, thứ tự mà bạn đính kèm bên ngoài Tệp JavaScript quan trọng. Như bạn sẽ thấy ở phần sau của cuốn sách này, đôi khi các tập lệnh bạn viết phụ thuộc vào mã đến từ một tệp bên ngoài. Điều đó thường xảy ra khi sử dụng thư viện JavaScript (mã JavaScript đơn giản hóa các tác vụ lập trình phức tạp). Bạn sẽ thấy một ví dụ về thư viện JavaScript đang hoạt động trong hướng dẫn về Đính kèm tệp JavaScript bên ngoài .

Chương trình JavaScript đầu tiên của bạn

Cách tốt nhất để học lập trình JavaScript là thực sự lập trình. Xuyên suốt cuốn sách này, bạn sẽ tìm thấy các hướng dẫn thực hành đưa bạn từng bước trong quá trình tạo các chương trình JavaScript. Để bắt đầu, bạn sẽ cần trình soạn thảo văn bản (xem Phần mềm lập trình JavaScript để biết các đề xuất), trình duyệt web và các tệp bài tập nằm tại https://github.com/sawmac/js3e (xem Lưu ý sau để biết hướng dẫn đầy đủ).

Lưu ý

Các hướng dẫn trong chương này yêu cầu các tệp mẫu từ trang web của cuốn sách này, www.missingmanuals.com/cds/jsjq3emm < / span>. (Các tệp hướng dẫn được lưu trữ dưới dạng một tệp Zip duy nhất.)

Trong Windows, tải xuống tệp Zip và nhấp đúp vào tệp đó để mở tệp lưu trữ. Bấm vào tùy chọn Trích xuất Tất cả Tệp, sau đó làm theo hướng dẫn của Trình hướng dẫn Trích xuất để giải nén các tệp và đặt chúng vào máy tính của bạn. Nếu bạn gặp sự cố khi mở tệp Zip, tiện ích 7-Zip miễn phí có thể trợ giúp: www.7-zip.org .

Trên máy Mac, chỉ cần bấm đúp vào tệp để giải nén. Sau khi tải xuống và giải nén các tệp, bạn sẽ có một thư mục có tên là MM_JAVASCRIPT3E trên máy tính của mình, chứa tất cả các tệp hướng dẫn cho cuốn sách này.

Để bạn có thể hiểu rõ và giới thiệu nhẹ nhàng về JavaScript , chương trình đầu tiên của bạn sẽ rất đơn giản:

  1. Trong trình soạn thảo văn bản yêu thích của bạn, hãy mở tệp hello.html .

    Tệp này nằm trong thư mục chap01 trong thư mục MM_JAVASCRIPT3E mà bạn đã tải xuống như được mô tả trong ghi chú ở trên. Đây là một trang HTML rất đơn giản, với một biểu định kiểu xếp tầng bên ngoài để thêm một chút hứng thú về mặt hình ảnh.

  2. Nhấp vào dòng trống ngay trước đóng & lt; / head & gt; thẻ và loại :

     & lt; script & gt; 

    Mã này thực sự là HTML, không phải JavaScript. Nó thông báo cho trình duyệt web rằng nội dung theo sau thẻ này là JavaScript.

  3. Nhấn phím Return để tạo một dòng trống mới và nhập < / strong>:

     alert ('  hello world '); 

    Bạn vừa nhập dòng mã JavaScript đầu tiên của mình. Hàm JavaScript alert () là một lệnh bật mở hộp Cảnh báo và hiển thị thông báo xuất hiện bên trong dấu ngoặc đơn — trong trường hợp này, xin chào các bạn. Đừng lo lắng về tất cả các dấu câu (dấu ngoặc đơn, dấu ngoặc kép và dấu chấm phẩy). Bạn sẽ tìm hiểu những gì họ làm trong chương tiếp theo.

  4. Nhấn phím Quay lại một lần nữa và nhập & lt; / script & gt; . Mã bây giờ sẽ trông như thế này :

     & lt; link href = "../_ css / site.css "rel =" bảng định kiểu "& gt;
      & lt; script & gt;  
        alert ('hello world');    
      & lt; / script & gt;  
    & lt; / head & gt; 

    Trong ví dụ này, nội dung bạn vừa nhập được hiển thị bằng chữ in đậm. Hai thẻ HTML đã có trong tệp; đảm bảo rằng bạn nhập mã chính xác ở vị trí được hiển thị.

  5. Khởi chạy trình duyệt web và mở tệp hello.html để xem trước .

    Một Hộp cảnh báo JavaScript xuất hiện (xem Hình 1-3 ). Lưu ý rằng trang trống khi cảnh báo xuất hiện. (Nếu bạn không nhìn thấy hộp Cảnh báo, có thể bạn đã gõ nhầm mã được liệt kê trong các bước trước. Kiểm tra kỹ cách nhập của bạn và đọc Mẹo sau.)

    Mẹo

    Khi mới bắt đầu lập trình, bạn sẽ bị sốc về tần suất các chương trình JavaScript của bạn dường như không hoạt động… chút nào. Đối với các lập trình viên mới, nguyên nhân phổ biến nhất của các chương trình không hoạt động là do lỗi đánh máy đơn giản. Luôn kiểm tra kỹ để đảm bảo bạn viết đúng các lệnh (như alert trong tập lệnh đầu tiên) một cách chính xác. Ngoài ra, hãy lưu ý rằng các dấu câu thường đi thành từng cặp (ví dụ: dấu ngoặc mở và đóng ngoặc đơn và dấu ngoặc kép từ tập lệnh đầu tiên của bạn). Đảm bảo bạn bao gồm cả dấu câu mở và dấu câu đóng khi chúng được yêu cầu.

  6. Nhấp vào nút OK của hộp Cảnh báo để đóng nó lại

    >.

    Khi hộp Cảnh báo biến mất, trang web sẽ xuất hiện trong cửa sổ trình duyệt.

    Mặc dù chương trình đầu tiên này không quá phức tạp (hoặc thậm chí thú vị đến thế), nhưng chứng minh một khái niệm quan trọng: Một trình duyệt web sẽ chạy một chương trình JavaScript ngay khi nó đọc mã JavaScript. Trong ví dụ này, lệnh alert () xuất hiện trước khi trình duyệt web hiển thị trang web, vì mã JavaScript xuất hiện trước HTML trong & lt; body & gt; nhãn. Khái niệm này có hiệu lực khi bạn bắt đầu viết các chương trình thao tác với HTML của trang web — như bạn sẽ học trong Chương 3 .

Hình 1-3. Hộp Cảnh báo JavaScript là một cách nhanh chóng để thu hút sự chú ý của ai đó. Đây là một trong những lệnh JavaScript đơn giản nhất để học và sử dụng.

Lưu ý

Một số phiên bản của Internet Explorer (IE) không thích chạy các chương trình JavaScript trong các trang web mà bạn mở trực tiếp từ ổ cứng của mình, vì sợ điều đó mã có thể làm điều gì đó có hại. Vì vậy, khi bạn cố gắng xem trước các tệp hướng dẫn cho cuốn sách này trong Internet Explorer, bạn có thể thấy thông báo cho biết IE đã chặn tập lệnh. Nhấp vào “Cho phép nội dung bị chặn”. < / span>

Hành vi khó chịu này chỉ áp dụng cho các trang web bạn xem trước từ máy tính của mình, không áp dụng cho các tệp bạn đưa lên máy chủ web. Để tránh nhấn đi nhấn lại nút “Cho phép nội dung bị chặn”, hãy xem trước các trang trong một trình duyệt web khác, chẳng hạn như Chrome hoặc Firefox.

Viết văn bản trên trang web

Tập lệnh trong phần trước bật lên một hộp thoại trong giữa màn hình của bạn. Điều gì xảy ra nếu bạn muốn in một tin nhắn trực tiếp lên một trang web bằng JavaScript? Có nhiều cách để làm như vậy và bạn sẽ học một số kỹ thuật phức tạp ở phần sau của cuốn sách này. Tuy nhiên, bạn có thể đạt được mục tiêu đơn giản này bằng lệnh JavaScript tích hợp và đó là những gì bạn sẽ làm trong tập lệnh thứ hai của mình:

  1. Trong trình soạn thảo văn bản của bạn, hãy mở tệp hello2.html .

    Trong khi & lt Các thẻ; script & gt; thường xuất hiện trong & lt; head & gt; của trang web, bạn có thể đặt chúng và các chương trình JavaScript trực tiếp vào phần nội dung của trang.

  2. Ngay bên dưới & lt; h1 & gt; Ghi vào cửa sổ tài liệu & lt; / h1 & gt; , nhập mã sau :

     & lt; script & gt;
    document.write ('& lt; p & gt;  Xin chào thế giới! & lt; / p & gt; ');
    & lt; / script & gt; 

    Giống như hàm alert () , document.write () là một Lệnh JavaScript viết ra theo nghĩa đen bất cứ thứ gì bạn đặt giữa các dấu ngoặc đơn mở và đóng. Trong trường hợp này, HTML & lt; p & gt; Hello world! & Lt; / p & gt; được thêm vào trang: một thẻ đoạn và hai từ.

  3. Lưu trang và mở trong trình duyệt web .

    Trang mở ra và có dòng chữ “Hello world!” xuất hiện bên dưới dòng tiêu đề (xem Hình 1-4 < /span>).

          • class = "title"> Lưu ý

            Tệp hướng dẫn bạn đã tải xuống cũng bao gồm phiên bản hoàn chỉnh của mỗi hướng dẫn. Nếu bạn dường như không thể làm cho JavaScript của mình hoạt động, hãy so sánh công việc của bạn với tệp bắt đầu bằng complete_ trong cùng thư mục với tệp hướng dẫn. Ví dụ: tệp complete_hello2.html chứa phiên bản đang hoạt động của tập lệnh mà bạn đã thêm vào tệp hello2.html.

            Hai tập lệnh bạn vừa tạo có thể khiến bạn cảm thấy hơi thiếu hiểu biết về JavaScript… hoặc cuốn sách này. Đừng lo lắng — đây chỉ là bước khởi đầu. Điều quan trọng là bắt đầu với sự hiểu biết đầy đủ về những điều cơ bản. Bạn sẽ thực hiện một số việc rất hữu ích và phức tạp bằng JavaScript chỉ trong một vài chương. Trên thực tế, trong phần còn lại của chương này, bạn sẽ được nếm thử một số tính năng nâng cao mà bạn có thể thêm vào các trang web của mình sau khi bạn đã làm theo cách của mình qua hai phần đầu tiên của cuốn sách này.

            Đính kèm tệp JavaScript bên ngoài

            Như đã thảo luận về Tệp JavaScript bên ngoài , bạn thường đặt JavaScript mã trong một tệp riêng biệt nếu bạn muốn sử dụng các tập lệnh giống nhau trên nhiều trang web. Sau đó, bạn hướng dẫn các trang web của mình tải tệp đó và sử dụng JavaScript bên trong tệp đó. Các tệp JavaScript bên ngoài cũng rất hữu ích khi bạn đang sử dụng mã JavaScript của người khác. Đặc biệt, có những bộ sưu tập mã JavaScript được gọi là thư viện, cung cấp khả năng lập trình JavaScript hữu ích. Thông thường, những thư viện này giúp bạn dễ dàng thực hiện một việc mà bình thường khá khó khăn. Bạn sẽ tìm hiểu thêm về các thư viện JavaScript trên Giới thiệu về Thư viện JavaScript và đặc biệt, thư viện JavaScript mà cuốn sách này (và phần lớn trên Web) sử dụng — jQuery. < / p>

            Hình 1-4. Ồ. Tập lệnh này có thể không phải là thứ để “document.write” về nhà — ha, ha, sự hài hước của JavaScript — nhưng nó chứng tỏ rằng bạn có thể sử dụng JavaScript để thêm nội dung vào trang web, một thủ thuật hữu ích khi bạn muốn hiển thị thông báo (như “Chào mừng bạn quay lại trang web, Dave”) sau khi một trang web được tải xuống.

            Nhưng hiện tại, bạn sẽ nhận được trải nghiệm đính kèm tệp JavaScript bên ngoài vào một trang và viết một chương trình ngắn thực hiện một điều gì đó thú vị :

            1. Trong trình soạn thảo văn bản của bạn, hãy mở tệp fadeIn.html .

              Trang này chỉ chứa một số HTML đơn giản — một vài thẻ & lt; div & gt; , một dòng tiêu đề và một vài đoạn văn. Bạn sẽ thêm hiệu ứng hình ảnh đơn giản vào trang, điều này khiến tất cả nội dung từ từ mờ dần khi xem.

            2. Nhấp vào dòng trống giữa & lt; liên kết & gt; và đóng & lt; / head & gt; thẻ ở gần đầu trang và nhập :

               & lt; script src = ".. /_js/jquery.min.js"></script>

              Mã này liên kết một tệp có tên jquery.min.js, được chứa trong một thư mục có tên _js, với trang web này. Khi một trình duyệt web tải trang web này, nó cũng tải xuống tệp JavaScript jquery.min.js và chạy mã bên trong nó.

              Tiếp theo, bạn sẽ thêm chương trình JavaScript của riêng mình vào trang này.

              Lưu ý

              Phần tối thiểu có nghĩa là tệp được thu nhỏ — một quy trình loại bỏ khoảng trắng không cần thiết và cô đặc mã để làm cho tệp nhỏ hơn để tải xuống nhanh hơn.

            3. Nhấn Quay lại để tạo một dòng trống mới, sau đó nhập :

               & lt; script & gt ; 

              Các thẻ HTML thường đi theo cặp — một thẻ mở và thẻ đóng. Để đảm bảo bạn không quên đóng thẻ, bạn có thể đóng thẻ ngay sau khi nhập thẻ mở và sau đó điền thông tin vào giữa các thẻ.

            4. Nhấn Quay lại hai lần để tạo hai dòng trống, sau đó nhập :

               & lt; / script & gt; 

              Điều này kết thúc khối mã JavaScript. Bây giờ, bạn sẽ thêm một số lập trình.

            5. Nhấp vào dòng trống giữa các thẻ tập lệnh mở và đóng và nhập :

               $ (document) .ready (function () {

              Chắc bạn đang thắc mắc cái quái gì vậy . Bạn sẽ tìm hiểu tất cả các chi tiết của mã này trên Thêm jQuery vào một Trang , nhưng tóm lại, dòng này tận dụng chương trình bên trong tệp jquery.min.js để đảm bảo rằng trình duyệt thực thi dòng mã tiếp theo vào đúng thời điểm .

            6. Nhấn quay lại để tạo một dòng mới, sau đó nhập :

               $ ('header'). hide (). slideDown (3000); 

              Dòng này làm được điều kỳ diệu: Nó làm cho “JavaScript & amp; jQuery Tiêu đề Hướng dẫn sử dụng bị thiếu ” đầu tiên biến mất và sau đó từ từ trượt xuống trang trong khoảng thời gian 3 giây (hoặc 3.000 mili giây). sao làm được vậy? Chà, đó là một phần của sự kỳ diệu của jQuery, giúp cho các hiệu ứng phức tạp có thể thực hiện được chỉ với một dòng mã.

            7. Nhấn Quay lại lần cuối , rồi nhập :

              }); 

              Mã này đóng mã JavaScript , giống như thẻ đóng & lt; / script & gt; cho biết phần cuối của một chương trình JavaScript. Đừng quá lo lắng về tất cả những dấu câu kỳ lạ đó — bạn sẽ tìm hiểu cách chúng hoạt động chi tiết ở phần sau của cuốn sách. Điều chính bạn cần đảm bảo là nhập mã chính xác như được liệt kê ở đây. Một lỗi đánh máy và chương trình có thể không hoạt động.

              Đoạn mã cuối cùng bạn thêm vào trang sẽ giống như văn bản được in đậm như sau:

               & lt; link href = "../_ css / site.css" rel = "stylesheet" & gt;
                & lt; script src = "../_ js / jquery.min.js" & gt; & lt; / script & gt;  
                & lt; script & gt;  
                $ (document) .ready (function () { 
                  $ ('header'). hide (). slideDown (3000);  
               });  
                & lt; / script & gt;  
              & lt; / head & gt; 

              Mẹo

              Để làm cho chương trình của bạn dễ đọc hơn, đó là một ý tưởng để thụt lề mã mã. Nhiều khi bạn thụt lề thẻ HTML để hiển thị thẻ nào được lồng vào bên trong các thẻ khác, bạn có thể thụt lề các dòng mã nằm bên trong một khối mã khác. Ví dụ: dòng mã bạn đã thêm ở bước 6 được lồng vào bên trong mã cho bước 5 và 7, vì vậy việc nhấn Tab hoặc nhấn phím cách vài lần trước khi nhập mã cho bước 6 có thể giúp mã của bạn dễ hiểu hơn (như trong mã cuối cùng được liệt kê ở cuối bước 7).

            8. Lưu tệp HTML và mở nó trong trình duyệt web .

              Bạn sẽ thấy tiêu đề — Trượt xuống — cùng với một đoạn văn và chân trang ở cuối cửa sổ trình duyệt, theo sau là các hộp chứa “JavaScript & amp; jQuery: Hướng dẫn sử dụng còn thiếu ”từ từ trượt xuống vị trí. Thay đổi số 3000 thành các giá trị khác nhau (như 250 và 10000) để xem điều đó thay đổi cách hoạt động của trang như thế nào.

            Lưu ý

            Nếu bạn cố gắng xem trước trang này trong Internet Explorer và dường như không có tác dụng gì, bạn sẽ cần nhấp vào hộp "Bật nội dung bị chặn" xuất hiện ở dưới cùng của trang (xem Ghi chú trên Ghi chú ).

            Như bạn có thể thấy, không cần nhiều JavaScript để thực hiện một số điều thú vị cho các trang web của bạn. Nhờ jQuery, bạn sẽ có thể tạo các trang web tương tác, phức tạp ngay cả khi bạn không phải là một thuật sĩ lập trình. Tuy nhiên, bạn sẽ thấy những kiến ​​thức cơ bản về JavaScript và lập trình sẽ rất hữu ích. Các chương Chương 2 Chương 3 sẽ bao gồm các khái niệm cơ bản về JavaScript để giúp bạn hiểu rõ hơn về các khái niệm và cú pháp cơ bản tạo nên ngôn ngữ này.

            Theo dõi lỗi

            Khoảnh khắc khó chịu nhất trong lập trình JavaScript là khi bạn cố gắng xem trang hỗ trợ JavaScript của mình trong trình duyệt web… và không có gì xảy ra. Đó là một trong những trải nghiệm phổ biến nhất đối với các lập trình viên. Ngay cả những lập trình viên có kinh nghiệm cũng thường không hiểu đúng trong lần đầu tiên viết chương trình, vì vậy việc tìm ra lỗi sai chỉ là một phần của trò chơi.

            Hầu hết các trình duyệt web được thiết lập để im lặng bỏ qua các lỗi JavaScript, vì vậy, bạn thường sẽ không thấy thông báo “Này, chương trình này không hoạt động!” hộp thoại. (Nói chung, đó là một điều tốt, vì bạn không muốn một lỗi JavaScript làm gián đoạn trải nghiệm xem các trang web của mình.)

            Vậy làm cách nào để bạn tìm ra lỗi? Có nhiều cách để theo dõi lỗi trong một chương trình JavaScript. Bạn sẽ học một số kỹ thuật gỡ lỗi nâng cao trong Chương 17 , nhưng phương pháp cơ bản nhất là tham khảo trình duyệt web. Hầu hết các trình duyệt web theo dõi các lỗi JavaScript và ghi lại chúng trong một cửa sổ riêng biệt được gọi là bảng điều khiển lỗi. Khi bạn tải một trang web có lỗi, bạn có thể xem bảng điều khiển để nhận thông tin hữu ích về lỗi, chẳng hạn như dòng nào của trang web mà nó xảy ra và mô tả về lỗi.

            Thông thường, bạn có thể tìm thấy câu trả lời cho vấn đề trong bảng điều khiển lỗi, sửa JavaScript và sau đó trang sẽ hoạt động. Bảng điều khiển giúp bạn loại bỏ những lỗi chính tả cơ bản mà bạn mắc phải khi mới bắt đầu lập trình, chẳng hạn như quên dấu chấm câu đóng hoặc nhập sai tên của lệnh JavaScript. Bạn có thể sử dụng bảng điều khiển lỗi trong trình duyệt yêu thích của mình, nhưng vì tập lệnh đôi khi hoạt động trên một trình duyệt chứ không phải trình duyệt khác, phần này hiển thị cho bạn cách bật bảng điều khiển JavaScript trong tất cả các trình duyệt chính để bạn có thể theo dõi các vấn đề trong mỗi trình duyệt.

            Bảng điều khiển JavaScript của Chrome < / h2>

            Trình duyệt Chrome của Google được nhiều nhà phát triển web yêu thích. Tính năng DevTools của nó cung cấp cho bạn nhiều cách để khắc phục sự cố HTML, CSS và JavaScript. Ngoài ra, bảng điều khiển JavaScript của nó là một nơi tuyệt vời để bắt đầu < / span> theo dõi các lỗi trong mã của bạn. Nó không chỉ mô tả các lỗi mà nó tìm thấy, nó còn xác định dòng trong mã của bạn nơi từng lỗi xảy ra.

            Để mở bảng điều khiển JavaScript, hãy nhấp vào nút menu Tùy chỉnh (được khoanh tròn trong Hình 1-5 ) và chọn Công cụ → Bảng điều khiển JavaScript. Hoặc sử dụng phím tắt Ctrl + Shift + J (Windows) hoặc ⌘-Option-J (Mac).

            Hình 1-5. Nhấp vào menu Tùy chỉnh (khoanh tròn) để truy cập bảng điều khiển JavaScript cũng như các công cụ hữu ích khác. Chọn tùy chọn Công cụ dành cho nhà phát triển là một cách khác để truy cập bảng điều khiển, vì bảng điều khiển JavaScript là một phần của bộ công cụ Chrome lớn hơn được gọi là Công cụ dành cho nhà phát triển (viết tắt là DevTools). Bạn sẽ tìm hiểu thêm về các công cụ đó trong Chương 17.

            Sau khi mở bảng điều khiển, bạn có thể kiểm tra bất kỳ lỗi nào xuất hiện trên trang hiện tại. Ví dụ, trong Hình 1-6 , bảng điều khiển xác định lỗi là “Lỗi cú pháp chưa được thông báo: Mã thông báo không mong muốn ILLEGAL.” Được, có thể không rõ ràng ngay điều đó có nghĩa là gì, nhưng khi gặp (và sửa) nhiều lỗi hơn, bạn sẽ quen với những mô tả ngắn gọn này. Về cơ bản, một lỗi cú pháp chỉ ra một số loại lỗi đánh máy — một lỗi với cú pháp hoặc ngôn ngữ của chương trình. Phần "Mã thông báo không mong muốn BẤT HỢP PHÁP" chỉ có nghĩa là trình duyệt đã gặp phải một ký tự không hợp pháp hoặc (và đây là phần khó) rằng có một ký tự bị thiếu. Trong trường hợp này, nhìn kỹ mã, bạn có thể thấy có một dấu ngoặc kép mở trước "chậm" nhưng không có dấu ngoặc kép cuối cùng.

            Bảng điều khiển cũng xác định tên của tệp có lỗi (complete_slide .html, trong trường hợp này) và số dòng xảy ra lỗi (dòng 10). Nhấp vào tên tệp và Chrome mở tệp phía trên bảng điều khiển và đánh dấu ngắn gọn dòng (xem Hình 1-5 ).

            Mẹo

            Vì Bảng điều khiển lỗi hiển thị số dòng nơi xảy ra lỗi, bạn có thể muốn sử dụng trình chỉnh sửa văn bản có thể hiển thị số dòng. Bằng cách đó, bạn có thể dễ dàng chuyển từ bảng điều khiển lỗi sang trình soạn thảo văn bản của mình và xác định dòng mã bạn cần sửa.

            Hình 1-6. Bảng điều khiển JavaScript của Chrome xác định lỗi trong chương trình của bạn. Nhấp vào tên tệp được liệt kê ở bên phải của lỗi và Chrome đánh dấu ngắn gọn trang có lỗi (được khoanh tròn).

            Rất tiếc, có một danh sách dài những thứ có thể xảy ra sai trong tập lệnh, từ lỗi chính tả đơn giản đến các lỗi phức tạp trong logic. Khi bạn chỉ mới bắt đầu lập trình JavaScript, nhiều lỗi của bạn sẽ là kiểu đánh máy đơn giản. Ví dụ: bạn có thể quên dấu chấm phẩy, dấu ngoặc kép hoặc dấu ngoặc đơn hoặc viết sai chính tả một lệnh JavaScript. Bạn đặc biệt dễ mắc lỗi chính tả khi làm theo các ví dụ từ một cuốn sách (như cuốn sách này). Dưới đây là một số lỗi phổ biến bạn có thể mắc phải và thông báo lỗi (không quá rõ ràng) mà bạn có thể gặp phải:

            • Thiếu dấu câu . Như đã đề cập trước đó, lập trình JavaScript thường liên quan đến rất nhiều cặp ký hiệu như mở và đóng dấu ngoặc đơn và dấu ngoặc. Ví dụ: nếu bạn nhập alert ('hellO'; —để bỏ dấu ngoặc đóng — bạn có thể nhận được: thông báo“ Mã thông báo không mong đợi; ”, nghĩa là Chrome đang mong đợi điều gì đó khác với ký tự mà nó đang hiển thị. Trong trường hợp này, Chrome gặp phải dấu chấm phẩy thay vì dấu ngoặc đơn.

              < / li>

            • Thiếu dấu ngoặc kép . Một chuỗi là một chuỗi các ký tự được bao bởi dấu ngoặc kép (bạn sẽ học về những điều này chi tiết hơn trên Loại dữ liệu ). Ví dụ: 'xin chào' là một chuỗi trong mã alert ('hellO'); . Rất dễ quên dấu trích dẫn mở hoặc đóng. Cũng dễ dàng trộn lẫn các dấu trích dẫn đó; ví dụ: , bằng cách ghép nối một trích dẫn đơn với một trích dẫn kép như sau: alert ('xin chào ”); . Trong cả hai trường hợp, bạn sẽ có thể thấy “Lỗi cú pháp chưa được thông báo: Mã thông báo không mong đợi BẤT HỢP PHÁP” lỗi.

            • Lệnh viết sai chính tả . Nếu bạn viết sai chính tả một lệnh JavaScript— aler ('hellO'); —bạn sẽ gặp lỗi nói rằng lệnh sai chính tả không được xác định: ví dụ: “Uncaught ReferenceError: aler không được xác định, ”nếu bạn viết sai chính tả lệnh alert . Bạn cũng sẽ gặp phải sự cố khi viết sai chính tả các hàm jQuery (như các hàm . Hide () . SlideDown () trong các hàm hướng dẫn trước). Trong trường hợp này, bạn sẽ gặp một lỗi khác. Ví dụ: nếu bạn gõ nhầm "hide" thành "hidden" ở bước 6 trên Đính kèm tệp JavaScript bên ngoài , Chrome sẽ thông báo cho bạn lỗi sau: “Uncaught TypeError: Object [object Object] không có phương thức 'hidden'” .

            • Lỗi cú pháp . Đôi khi, Chrome không biết bạn đang cố gắng làm gì và đưa ra thông báo lỗi chung này. Một lỗi cú pháp đại diện cho một số sai lầm trong mã của bạn. Nó có thể không phải là lỗi đánh máy, nhưng bạn có thể đã tập hợp một hoặc nhiều câu lệnh JavaScript theo cách không được phép. Trong trường hợp này, bạn cần xem xét kỹ dòng lỗi được tìm thấy và cố gắng tìm ra lỗi mà bạn đã mắc phải. Rất tiếc, các loại lỗi này thường yêu cầu kinh nghiệm và hiểu biết về ngôn ngữ JavaScript để sửa.

            Như bạn có thể thấy từ danh sách trước, nhiều lỗi bạn sẽ mắc phải chỉ đơn giản là quên nhập một trong các cặp dấu câu — như dấu ngoặc kép hoặc dấu ngoặc đơn. May mắn thay, những điều này rất dễ sửa và khi bạn có thêm kinh nghiệm lập trình, cuối cùng bạn sẽ ngừng làm chúng gần như hoàn toàn (không có lập trình viên nào là hoàn hảo).

            Bảng điều khiển Internet Explorer

            Internet Explorer cung cấp một bộ công cụ dành cho nhà phát triển tinh vi để không chỉ xem các lỗi JavaScript mà còn phân tích CSS, HTML và truyền thông tin qua mạng. Khi mở, cửa sổ công cụ dành cho nhà phát triển xuất hiện ở nửa dưới của cửa sổ trình duyệt. Nhấn phím F12 để mở các công cụ dành cho nhà phát triển và nhấn lại để đóng chúng. Bạn sẽ tìm thấy các lỗi JavaScript được liệt kê trong tab Bảng điều khiển (được khoanh tròn trong Hình 1-7 ).

            Lưu ý

            Nếu lần đầu tiên bạn mở một trang web và sau đó mở bảng điều khiển Internet Explorer, bạn sẽ không thấy bất kỳ lỗi nào (ngay cả khi có một số lỗi). Bạn cần tải lại trang để xem có lỗi nào không. Khi bảng điều khiển mở, bạn sẽ thấy lỗi trên các trang bạn truy cập khi chúng tải.

            Bảng điều khiển của IE hiển thị các thông báo lỗi tương tự cho những người được mô tả trước đó cho Chrome. Tuy nhiên, đôi khi chúng rất khác nhau. Ví dụ: "Hằng số chuỗi chưa kết thúc" của IE là Lỗi“ Mã thông báo không mong muốn BẤT HỢP PHÁP ”trong Chrome. Giống như Chrome, Internet Explorer xác định dòng mã trong tệp HTML nơi xảy ra lỗi, bạn có thể nhấp vào dòng này để xem mã thực nơi lỗi xảy ra.

            < p class = "title"> Hình 1-7. Các công cụ dành cho nhà phát triển Internet Explorer cung cấp quyền truy cập vào các lỗi JavaScript xảy ra trên một trang cũng như toàn bộ thông tin khác.

            Bảng điều khiển Web JavaScript của Firefox

            Trình duyệt Firefox của Mozilla cũng cung cấp cho bạn một bảng điều khiển để xem các lỗi JavaScript. Để mở bảng điều khiển JavaScript, trên Windows, hãy nhấp vào tab Firefox ở trên cùng bên trái của cửa sổ trình duyệt và chọn Nhà phát triển web → Bảng điều khiển web. Trên máy Mac, chọn Công cụ → Nhà phát triển web → Bảng điều khiển web. Hoặc sử dụng phím tắt Ctrl + Shift + I (Windows) hoặc ⌘-Option-K (Mac).

            Khi bảng điều khiển mở ra, bạn sẽ thấy bất kỳ lỗi JavaScript nào trên trang. Thật không may, Bảng điều khiển Web của Firefox giống như một vòi cứu hỏa dữ liệu hơn là một trình báo lỗi JavaScript đơn giản ( Hình 1-8 ). Đó là vì nó cung cấp thông tin về tất cả những thứ: tệp đã tải xuống, lỗi CSS và HTML, v.v.

            Lưu ý < / h3>

            Trình cắm Firebug ( http://getfirebug.com ) mở rộng đáng kể trên Bảng điều khiển lỗi của Firefox. Trên thực tế, nó cung cấp mô hình cho các công cụ dành cho nhà phát triển trong Internet Explorer, Chrome và Safari (sẽ thảo luận tiếp theo).

            Hình 1-8. Nếu bạn không muốn xem tất cả các thông báo trong Bảng điều khiển Web của Firefox, chỉ cần nhấp vào nút cho loại thông báo bạn muốn ẩn. Ví dụ: nhấp vào nút CSS để ẩn thông báo lỗi CSS, nút Bảo mật để ẩn cảnh báo bảo mật, v.v. Bạn sẽ biết liệu nút có bị tắt hay không vì nó trông có màu xám nhạt hơn, giống như các nút CSS và Bảo mật ở đây. Một nút được bật khi nó tối hơn và có vẻ như nó đã được nhấn “vào”, giống như các nút Net, JS (viết tắt của JavaScript) và Ghi nhật ký ở đây.

            Bảng điều khiển lỗi Safari

            Bảng điều khiển lỗi của Safari có sẵn từ trình đơn Develop: Develop → Show Error Console (hoặc nếu bạn đang sử dụng máy Mac, hãy sử dụng Option-⌘ -C phím tắt). Tuy nhiên, menu Develop thường không được bật khi Safari được cài đặt, vì vậy, có một số bước để truy cập bảng điều khiển JavaScript. < / span>

            Để bật menu Phát triển, trước tiên bạn cần truy cập cửa sổ Tùy chọn. Chọn Safari → Tùy chọn. Khi cửa sổ Preferences mở ra, hãy nhấp vào nút Advanced. Bật hộp “Hiển thị menu Phát triển trong thanh menu” và đóng cửa sổ Tùy chọn.

            Khi bạn khởi động lại Safari, menu Phát triển sẽ xuất hiện giữa menu Dấu trang và Cửa sổ trong thanh menu ở đầu màn hình. Chọn Develop → Show Error Console để mở bảng điều khiển (xem Hình 1-9 ).

            Hình 1-9. Bảng điều khiển Lỗi Safari hiển thị tên của lỗi JavaScript, tên tệp (và vị trí) và dòng Safari gặp lỗi. Mỗi tab hoặc cửa sổ trình duyệt có bảng điều khiển lỗi riêng, vì vậy nếu bạn đã mở bảng điều khiển cho một tab, bạn cần chọn Phát triển → Hiển thị lại bảng điều khiển lỗi nếu bạn muốn thấy lỗi cho tab hoặc cửa sổ khác. Ngoài ra, nếu bạn tải lại một trang, Safari sẽ không xóa bất kỳ lỗi nào trước đó trên trang đó, vì vậy, bạn có thể kết thúc với một danh sách dài các lỗi cũ đã được sửa khi bạn làm việc trên một trang và tải lại trang đó. Câu trả lời: nhấp vào biểu tượng Thùng rác (được khoanh tròn) để xóa danh sách các lỗi cũ, sau đó tải lại trang.

            Lưu ý

            Nếu bạn đang sử dụng Windows, bạn có thể có phiên bản cũ của trình duyệt Safari. Apple đã ngừng cập nhật Safari cho Windows, vì vậy thông tin Safari hiển thị ở đây có thể không áp dụng cho bạn.


Xem thêm những thông tin liên quan đến chủ đề cách bắt đầu một tệp javascript

How to Include a JavaScript Code in your HTML File

  • Tác giả: Zenva
  • Ngày đăng: 2013-10-13
  • Đánh giá: 4 ⭐ ( 2751 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Access the FULL COURSE here: https://academy.zenva.com/product/full-stack-web-development-mini-degree/?zva_src=youtube-description-javascriptcodeinhtmlfile

    This video shows how you can include JavaScript code and files in a HTML file. One way to do it is by using the script tags. Another way is to include an external file with your JavaScript code.

    This video-based JavaScript tutorial series covers all the basics of JavaScript starting from total scratch. Topics such as variables, functions, objects and arrays are covered in-depth considering you may have absolutely no coding experience.

    As part of the course, we build a prototype of a dating app using JavaScript.

    JavaScript is the entry point for building interactive websites, HTML5 mobile apps and games, and server-side applications so it's very much worth learning.

Bắt Đầu với Javascript (P1)

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 9344 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Phần này sẽ giới thiệu về JavaScript và thảo luận về một số khái niệm cơ bản.

Hướng dẫn NodeJS cho người mới bắt đầu

  • Tác giả: openplanning.net
  • Đánh giá: 4 ⭐ ( 5632 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hướng dẫn dành cho người mới bắt đầu JavaScript

  • Tác giả: nordiccoder.com
  • Đánh giá: 4 ⭐ ( 4375 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Javascript cho người mới bắt đầu – phần 1

  • Tác giả: caodang.fpt.edu.vn
  • Đánh giá: 5 ⭐ ( 6949 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cao đẳng FPT Polytechnic tuyển sinh theo hình thức xét tuyển hồ sơ. Tiêu chí đào tạo: Thực học – Thực nghiệp.

Javascript Function

  • Tác giả: codetot.net
  • Đánh giá: 4 ⭐ ( 8614 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, ta sẽ cùng tìm hiểu cách thức 1 Javascript function hoạt động như thế nào dành cho người bắt đầu.

Hướng dẫn chi tiết cách khởi tạo chương trình đầu tiên với Javascript

  • Tác giả: gitiho.com
  • Đánh giá: 3 ⭐ ( 4577 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách khởi tạo ứng dụng đầu tiên (Hello Word) với Javascript chi tiết, dễ hiểu, dễ thao tác nhất. Các bạn đang mới bắt đầu học Javascript hãy cùng tìm hiểu ngay nhé.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  React Native là gì? 20+ Tài liệu học React Native từ cơ bản đến nâng cao - học mysql cơ bản

By ads_php