Những gì cần thiết để javascript chạy?

Giới thiệu về JavaScript

JavaScript là ngôn ngữ lập trình chủ yếu được sử dụng phía máy khách để làm cho các trang web tương tác. Bạn có thể tạo các trang web tuyệt vời mà không cần JavaScript, nhưng JavaScript mở ra một cấp độ khả năng hoàn toàn mới

Ghi chú. Trong bài viết này, chúng ta sẽ xem xét mã HTML mà bạn cần để JavaScript có hiệu lực. Nếu bạn muốn tự học JavaScript, bạn có thể bắt đầu với bài viết cơ bản về JavaScript của chúng tôi. Nếu bạn đã biết điều gì đó về JavaScript hoặc nếu bạn có nền tảng về các ngôn ngữ lập trình khác, chúng tôi khuyên bạn nên xem trực tiếp Hướng dẫn về JavaScript của chúng tôi

Cách kích hoạt JavaScript từ HTML

Trong trình duyệt, JavaScript không tự làm bất cứ điều gì. Bạn chạy JavaScript từ bên trong các trang web HTML của mình. Để gọi mã JavaScript từ bên trong HTML, bạn cần có phần tử

Liên kết một tập lệnh bên ngoài

Thông thường, bạn sẽ viết kịch bản theo cách riêng của họ. tập tin js. Nếu bạn muốn thực hiện một. js từ trang web của bạn, chỉ cần sử dụng

<script src="path/to/my/script.js">script>

Viết JavaScript trong HTML

Bạn cũng có thể thêm mã JavaScript giữa các thẻ

<script>
  window.addEventListener("load", () => {
    console.log("This function is executed once the page is fully loaded");
  });
script>

Điều đó thuận tiện khi bạn chỉ cần một chút JavaScript, nhưng nếu bạn giữ JavaScript trong các tệp riêng biệt, bạn sẽ thấy dễ dàng hơn

• tập trung vào công việc của bạn
• tự viết HTML
• viết các ứng dụng JavaScript có cấu trúc

Sử dụng tập lệnh dễ tiếp cận

Khả năng truy cập là một vấn đề chính trong bất kỳ sự phát triển phần mềm nào. JavaScript có thể làm cho trang web của bạn dễ truy cập hơn nếu bạn sử dụng nó một cách khôn ngoan hoặc nó có thể trở thành thảm họa nếu bạn sử dụng tập lệnh một cách cẩu thả. Để làm cho JavaScript hoạt động có lợi cho bạn, bạn nên biết về một số phương pháp hay nhất nhất định để thêm JavaScript

Bản thân HTML không có bất kỳ sự thông minh nào. Nó không thể làm toán, không thể biết liệu ai đó có điền đúng biểu mẫu hay không và 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 có nhiều văn bản, ảnh và video hơn. Để thêm trí thông minh vào các trang web của bạn để chúng có thể phản hồi khách truy cập trang web của bạn, bạn cần có JavaScript

JavaScript cho phép một trang web phản ứng 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 họ quên cung cấp thông tin cần thiết. Bạn có thể làm cho các thành phần 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 trang web với thông tin được lấy từ máy chủ web—mà không phải tải trang web mới. Tóm lại, JavaScript cho phép bạn làm cho trang web của mình hấp dẫn, hiệu quả và hữu ích hơn

Ghi chú

Trên thực tế, HTML5 có thêm một số tính năng thông minh vào HTML—bao gồm xác thực biểu mẫu cơ bản. Nhưng 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 hơn thế với các biểu mẫu và JavaScript), nên bạn vẫn cần JavaScript để tạo các biểu mẫu tương tác và thân thiện với người dùng nhất. Bạn có thể tìm hiểu thêm về HTML5 và biểu mẫu web trong Ben Henick's HTML5 Forms (O'Reilly) và Gaurav Gupta's Mastering HTML5 Forms (Packt Publishing)

Hình 1-1. Tai tương tác (http. //www. khuếch đại. đồng. uk/interactive-ear/), 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 phần khác nhau của tai người. Thông tin mới xuất hiện khi phản ứng với 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

Đối với nhiều người, thuật ngữ “lập trình máy tính” gợi lên hình ảnh về những mọt sách siêu thông minh đang khom người trên bàn phím, gõ những thứ vô nghĩa gần như khó hiểu trong nhiều giờ liền. 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ư phép thuật phức tạp vượt xa 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 phát triển, JavaScript là ngôn ngữ đầu tiên tốt cho người mới học lập trình

Tuy nhiên, JavaScript phức tạp hơn HTML hoặc CSS và lập trình thường là một thế giới xa lạ đối với các nhà thiết kế web; . Xuyên 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í viế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 mình muốn làm gì trước khi bắt đầu thêm JavaScript vào trang web

Nhiều nhà thiết kế web ngay lập tức bị ấn tượng bởi các ký hiệu và từ lạ được sử dụng trong JavaScript. Một chương trình JavaScript trung bình có rải rác các ký hiệu ({ } [ ] ; , (). =) và toàn những từ không quen thuộc (

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 để đặt các từ và ký tự đó lại với nhau—cú pháp của ngôn ngữ. Bạn sẽ cần ghi nhớ các từ và quy tắc của ngôn ngữ JavaScript (hoặc ít nhất là giữ cuốn sách này ở nơi tiện dụng để tham khảo). Khi học nói một ngôn ngữ mới, bạn sẽ 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ừ trở nên khó hiểu. Tương tự như vậy, một lỗi đánh máy đơn giản hoặc thậm chí thiếu dấu chấm câu có thể khiến chương trình JavaScript không hoạt động hoặc gây ra lỗi trong trình duyệt web. Bạn sẽ mắc nhiều lỗi khi bắt đầu học lập trình—đó là bản chất của lập trình

Lúc đầu, có thể bạn sẽ cảm thấy khó chịu khi lập trình JavaScript—bạn sẽ dành nhiều thời gian để theo dõi các lỗi bạn mắc phải 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ì nghĩ 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 mà những người mới học lập trình thường gặp phải. (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 những đặc điểm riêng của JavaScript và những 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ỉ nói về JavaScript mà còn nói về jQuery, thư viện JavaScript phổ biến nhất thế giới. 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 tinh vi

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

Khi bạn thêm JavaScript vào một 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 gọi là tập lệnh) đơn giản hơn và ngắn hơn, nhưng chúng có nhiều thuộc tính giống như 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 loạt các bước được hoàn thành theo thứ tự đã đị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ố điều bạn cần làm để hoàn thành nhiệm vụ này

1. Hỏi tên khách

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 trang web, nhưng ví dụ này minh họa quy trình lập trình cơ bản. 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ự làm cho trình duyệt web hoạt động theo cách bạn muốn

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 trình duyệt web hiểu HTML và CSS được gọi là bố cục hoặc công cụ hiển thị. 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à một phần của trình duyệt hiểu JavaScript và có thể thực hiện 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 có JavaScript bằng cách sử dụng thẻ

Phần lớn thời gian, bạn sẽ thêm

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 HTML 4. 01 và XHTML 1. 0 cũng vậy—tập lệnh sẽ chạy giống như vậy; . Cuốn 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 phần mở đầu và phần kết thúc

Thuộc tính

1

1. 3

<script>
  window.addEventListener("load", () => {
    console.log("This function is executed once the page is fully loaded");
  });
script>

<script>
  window.addEventListener("load", () => {
    console.log("This function is executed once the page is fully loaded");
  });
script>

<script>
  window.addEventListener("load", () => {
    console.log("This function is executed once the page is fully loaded");
  });
script>

50

<script>
  window.addEventListener("load", () => {
    console.log("This function is executed once the page is fully loaded");
  });
script>

<script>
  window.addEventListener("load", () => {
    console.log("This function is executed once the page is fully loaded");
  });
script>

<script>
  window.addEventListener("load", () => {
    console.log("This function is executed once the page is fully loaded");
  });
script>

<script>
  window.addEventListener("load", () => {
    console.log("This function is executed once the page is fully loaded");
  });
script>

<script>
  window.addEventListener("load", () => {
    console.log("This function is executed once the page is fully loaded");
  });
script>

1. <script>
     window.addEventListener("load", () => {
       console.log("This function is executed once the page is fully loaded");
     });
   script>
   

   56

   <script>
     window.addEventListener("load", () => {
       console.log("This function is executed once the page is fully loaded");
     });
   script>
   

   57

   <script>
     window.addEventListener("load", () => {
       console.log("This function is executed once the page is fully loaded");
     });
   script>
   

   58

2. 5
   40

3. 41
   42

4. 43
   44

5. 45
   46

6. 47
   48

7. 49
   40

50

1

• 1
  1

• 40. Thật dễ dàng để quên dấu ngoặc kép mở đầu hoặc kết thúc. Cũng dễ dàng trộn lẫn các dấu ngoặc kép đó; .
  41. Trong cả hai trường hợp, có thể bạn sẽ thấy lỗi “Lỗi cú pháp chưa được bắt. Lỗi mã thông báo BẤT HỢP PHÁP”

• 42—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ụ: “Lỗi tham chiếu chưa bắt được. aler không được xác định,” nếu bạn viết sai chính tả lệnh

  <script>
    window.addEventListener("load", () => {
      console.log("This function is executed once the page is fully loaded");
    });
  script>
  

  51. Bạn cũng sẽ gặp sự cố khi viết sai chính tả các hàm jQuery (như hàm
  44 và
  45 trong 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 nhập nhầm “hide” thành “hid” trong bước 6 về Đính kèm tệp JavaScript bên ngoài, Chrome sẽ báo lỗi này cho bạn. “Lỗi loại chưa được phát hiện. Đối tượng [đối tượng Đối tượng] không có phương thức 'ẩn'”

  Điều gì là cần thiết cho JavaScript?

  Điều kiện tiên quyết. Trước khi bắt đầu mô-đun này, bạn không cần có bất kỳ kiến ​​thức JavaScript nào trước đó, nhưng bạn nên có một số hiểu biết về HTML và CSS . Bạn nên làm việc thông qua các mô-đun sau trước khi bắt đầu với JavaScript. Bắt đầu với Web (bao gồm phần giới thiệu JavaScript thực sự cơ bản).

  JavaScript có cần trình duyệt để chạy không?

  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 trên 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. The browser has an embedded engine sometimes called a “JavaScript virtual machine”. Different engines have different “codenames”.

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

  Khi làm việc với các tệp cho web, JavaScript cần được tải và chạy cùng với mã đánh dấu HTML . Điều này có thể được thực hiện nội tuyến trong tài liệu HTML hoặc trong một tệp riêng biệt mà trình duyệt sẽ tải xuống cùng với tài liệu HTML.

  JavaScript có thể chạy trên mọi trình duyệt không?

  Mọi trình duyệt đều cung cấp một công cụ JavaScript chạy mã JavaScript . Trình duyệt Netscape đã sử dụng công cụ JavaScript SpiderMonkey.