JavaScript trong HTML

JavaScript là ngôn ngữ lập trình mạnh mẽ có thể thêm tính tương tác vào trang web. Nó được phát minh bởi Brendan Eich

JavaScript linh hoạt và thân thiện với người mới bắt đầu. Với nhiều kinh nghiệm hơn, bạn sẽ có thể tạo trò chơi, đồ họa 2D và 3D hoạt hình, ứng dụng dựa trên cơ sở dữ liệu toàn diện, v.v.

Bản thân JavaScript tương đối nhỏ gọn nhưng rất linh hoạt. Các nhà phát triển đã viết nhiều công cụ khác nhau trên ngôn ngữ JavaScript cốt lõi, mở khóa một lượng lớn chức năng với nỗ lực tối thiểu. Bao gồm các

• Giao diện lập trình ứng dụng trình duyệt [API] được tích hợp trong trình duyệt web, cung cấp chức năng như tự động tạo HTML và đặt kiểu CSS;
• API của bên thứ ba cho phép nhà phát triển kết hợp chức năng trong các trang web từ các nhà cung cấp nội dung khác, chẳng hạn như Twitter hoặc Facebook
• Các khung và thư viện của bên thứ ba mà bạn có thể áp dụng cho HTML để tăng tốc công việc xây dựng trang web và ứng dụng

Nó nằm ngoài phạm vi của bài viết này—như một phần giới thiệu sơ lược về JavaScript—để trình bày chi tiết về sự khác biệt giữa ngôn ngữ JavaScript cốt lõi với các công cụ được liệt kê ở trên. Bạn có thể tìm hiểu thêm trong khu vực học tập JavaScript của MDN, cũng như trong các phần khác của MDN

Phần bên dưới giới thiệu một số khía cạnh của ngôn ngữ cốt lõi và cũng mang đến cơ hội chơi với một số tính năng API của trình duyệt. Chúc vui vẻ

JavaScript là một trong những công nghệ web hiện đại phổ biến nhất. Khi các kỹ năng JavaScript của bạn phát triển, các trang web của bạn sẽ bước vào một chiều hướng mới của sức mạnh và sự sáng tạo

Tuy nhiên, làm quen với JavaScript khó hơn làm quen với HTML và CSS. Bạn có thể phải bắt đầu nhỏ và tiến bộ dần dần. Để bắt đầu, hãy xem cách thêm JavaScript vào trang của bạn để tạo Hello world. thí dụ. [Chào thế giới. là tiêu chuẩn cho các ví dụ lập trình giới thiệu. ]

Cảnh báo. Nếu bạn chưa theo dõi phần còn lại của khóa học của chúng tôi, hãy tải xuống mã ví dụ này và sử dụng nó làm điểm bắt đầu

1. Truy cập trang web thử nghiệm của bạn và tạo một thư mục mới có tên

   let myVariable;
   

   3. Trong thư mục tập lệnh, hãy tạo một tài liệu văn bản mới có tên là

   let myVariable;
   

   4 và lưu nó
2. Trong tệp

   let myVariable;
   

   5 của bạn, hãy nhập mã này vào một dòng mới, ngay trước thẻ đóng

   let myVariable;
   

   6

3. Điều này đang thực hiện công việc tương tự như phần tử

   let myVariable;
   

   7 cho CSS. Nó áp dụng JavaScript cho trang, vì vậy nó có thể ảnh hưởng đến HTML [cùng với CSS và bất kỳ thứ gì khác trên trang]
4. Thêm mã này vào tệp

   let myVariable;
   

   4

   const myHeading = document.querySelector["h1"];
   myHeading.textContent = "Hello world!";
   

5. Đảm bảo các tệp HTML và JavaScript được lưu. Sau đó tải

   let myVariable;
   

   5 trong trình duyệt của bạn. Bạn sẽ thấy một cái gì đó như thế này

Ghi chú. Lý do hướng dẫn [ở trên] đặt phần tử

myVariable = "Bob";

Nếu JavaScript tải trước và được cho là ảnh hưởng đến HTML chưa được tải, thì có thể có sự cố. Đặt JavaScript gần cuối trang HTML là một cách để đáp ứng sự phụ thuộc này. Để tìm hiểu thêm về các phương pháp thay thế, xem

Văn bản tiêu đề đã thay đổi thành Hello world. sử dụng JavaScript. Bạn đã làm điều này bằng cách sử dụng một hàm có tên là

myVariable = "Bob";

myVariable = "Bob";

Sau đó, mã đặt giá trị của thuộc tính

myVariable = "Bob";

myVariable = "Bob";

Ghi chú. Cả hai tính năng bạn đã sử dụng trong bài tập này đều là một phần của API Mô hình đối tượng tài liệu [DOM], có khả năng thao tác tài liệu

Để giúp bạn hiểu rõ hơn về cách JavaScript hoạt động, hãy giải thích một số tính năng cốt lõi của ngôn ngữ này. Cần lưu ý rằng các tính năng này là phổ biến cho tất cả các ngôn ngữ lập trình. Nếu bạn nắm vững những nguyên tắc cơ bản này, bạn cũng sẽ bắt đầu viết mã bằng các ngôn ngữ khác

Cảnh báo. Trong bài viết này, hãy thử nhập các dòng mã ví dụ vào bảng điều khiển JavaScript của bạn để xem điều gì sẽ xảy ra. Để biết thêm chi tiết về bảng điều khiển JavaScript, hãy xem Khám phá các công cụ dành cho nhà phát triển trình duyệt

Biến là nơi chứa giá trị. Bạn bắt đầu bằng cách khai báo một biến với từ khóa

myVariable = "Bob";

let myVariable;

Dấu chấm phẩy ở cuối dòng cho biết vị trí kết thúc câu lệnh. Nó chỉ được yêu cầu khi bạn cần tách các câu lệnh trên một dòng. Tuy nhiên, một số người tin rằng nên có dấu chấm phẩy ở cuối mỗi câu lệnh. Có các quy tắc khác về thời điểm bạn nên và không nên sử dụng dấu chấm phẩy. Để biết thêm chi tiết, hãy xem Hướng dẫn của bạn về dấu chấm phẩy trong JavaScript

Bạn có thể đặt tên cho một biến gần như bất cứ thứ gì, nhưng có một số hạn chế. [Thấy. ] Nếu không chắc chắn, bạn có thể kiểm tra tên biến của mình xem có hợp lệ không

JavaScript phân biệt chữ hoa chữ thường. Điều này có nghĩa là

myVariable = "Bob";

myVariable = "Bob";

Sau khi khai báo một biến, bạn có thể đặt giá trị cho nó

myVariable = "Bob";

Ngoài ra, bạn có thể thực hiện cả hai thao tác này trên cùng một dòng

let myVariable = "Bob";

Bạn lấy giá trị bằng cách gọi tên biến

myVariable;

Sau khi gán giá trị cho biến, bạn có thể thay đổi giá trị đó sau trong mã

let myVariable = "Bob";
myVariable = "Steve";

Lưu ý rằng các biến có thể chứa các giá trị có kiểu dữ liệu khác nhau

myVariable = "Bob";

myVariable = "Bob";

let myVariable = "Bob";

let myVariable = "Bob";

let myVariable = "Bob";

let myVariable = "Bob";

let myVariable = "Bob";

let myVariable = "Bob";

let myVariable = "Bob";

let myVariable = "Bob";

Vậy tại sao chúng ta cần các biến? . Nếu các giá trị không thể thay đổi, thì bạn không thể thực hiện bất kỳ hành động nào, chẳng hạn như cá nhân hóa tin nhắn chúc mừng hoặc thay đổi hình ảnh hiển thị trong thư viện hình ảnh

Nhận xét là các đoạn văn bản có thể được thêm vào cùng với mã. Trình duyệt bỏ qua văn bản được đánh dấu là nhận xét. Bạn có thể viết nhận xét bằng JavaScript giống như bạn có thể viết bằng CSS

/*
Everything in between is a comment.
*/

Nếu nhận xét của bạn không có dấu ngắt dòng, bạn có thể đặt nó sau hai dấu gạch chéo như thế này

// This is a comment

Một

let myVariable = "Bob";

let myVariable = "Bob";

myVariable;

myVariable;

myVariable;

myVariable;

myVariable;

myVariable;

myVariable = "Bob";

let myVariable = "Bob";

let myVariable = "Bob";

myVariable;

let myVariable = "Bob";

let myVariable = "Bob";

let myVariable = "Bob";
myVariable = "Steve";

let myVariable = "Bob";
myVariable = "Steve";

Đối với "Không", biểu thức cơ bản là

let myVariable = "Bob";

let myVariable = "Bob";

let myVariable = "Bob";
myVariable = "Steve";

"Không bằng" về cơ bản cho cùng một kết quả với cú pháp khác nhau. Ở đây chúng tôi đang kiểm tra "là

myVariable = "Bob";

myVariable = "Bob";

/*
Everything in between is a comment.
*/

Còn rất nhiều nhà khai thác khác để khám phá, nhưng hiện tại như vậy là đủ. Xem Biểu thức và toán tử để biết danh sách đầy đủ

Ghi chú. Trộn các loại dữ liệu có thể dẫn đến một số kết quả lạ khi thực hiện phép tính. Hãy cẩn thận rằng bạn đang đề cập đến các biến của mình một cách chính xác và nhận được kết quả như mong đợi. Ví dụ: nhập

/*
Everything in between is a comment.
*/

/*
Everything in between is a comment.
*/

Điều kiện là cấu trúc mã được sử dụng để kiểm tra xem một biểu thức có trả về đúng hay không. Một dạng câu điều kiện rất phổ biến là câu lệnh

/*
Everything in between is a comment.
*/

let iceCream = "chocolate";
if [iceCream === "chocolate"] {
  alert["Yay, I love chocolate ice cream!"];
} else {
  alert["Awwww, but chocolate is my favorite…"];
}

Biểu thức bên trong

/*
Everything in between is a comment.
*/

/*
Everything in between is a comment.
*/

/*
Everything in between is a comment.
*/

let myVariable = "Bob";

/*
Everything in between is a comment.
*/

Chức năng là một cách đóng gói chức năng mà bạn muốn sử dụng lại. Có thể định nghĩa phần thân mã là một hàm thực thi khi bạn gọi tên hàm trong mã của mình. Đây là một giải pháp thay thế tốt để viết đi viết lại cùng một đoạn mã. Bạn đã thấy một số cách sử dụng hàm. Ví dụ

const myHeading = document.querySelector["h1"];
myHeading.textContent = "Hello world!";

const myHeading = document.querySelector["h1"];
myHeading.textContent = "Hello world!";

Các chức năng này,

// This is a comment

// This is a comment

Nếu bạn thấy thứ gì đó trông giống tên biến, nhưng theo sau nó là dấu ngoặc đơn—

// This is a comment

Ví dụ: hàm

// This is a comment

Bạn cũng có thể xác định các chức năng của riêng mình. Trong ví dụ tiếp theo, chúng ta tạo một hàm đơn giản lấy hai số làm đối số và nhân chúng

const myHeading = document.querySelector["h1"];
myHeading.textContent = "Hello world!";

Hãy thử chạy cái này trong bảng điều khiển; . Ví dụ

const myHeading = document.querySelector["h1"];
myHeading.textContent = "Hello world!";

Ghi chú. Câu lệnh

// This is a comment

// This is a comment

Tương tác thực sự trên một trang web yêu cầu xử lý sự kiện. Đây là những cấu trúc mã lắng nghe hoạt động trong trình duyệt và chạy mã để phản hồi. Ví dụ rõ ràng nhất là xử lý sự kiện nhấp chuột, được kích hoạt bởi trình duyệt khi bạn nhấp vào thứ gì đó bằng chuột. Để chứng minh điều này, hãy nhập thông tin sau vào bảng điều khiển của bạn, sau đó nhấp vào trang web hiện tại

const myHeading = document.querySelector["h1"];
myHeading.textContent = "Hello world!";

Có một số cách để đính kèm trình xử lý sự kiện vào một phần tử. Ở đây chúng tôi chọn phần tử

// This is a comment

// This is a comment

// This is a comment

Hàm chúng ta vừa chuyển đến

// This is a comment

let iceCream = "chocolate";
if [iceCream === "chocolate"] {
  alert["Yay, I love chocolate ice cream!"];
} else {
  alert["Awwww, but chocolate is my favorite…"];
}

let iceCream = "chocolate";
if [iceCream === "chocolate"] {
  alert["Yay, I love chocolate ice cream!"];
} else {
  alert["Awwww, but chocolate is my favorite…"];
}

const myHeading = document.querySelector["h1"];
myHeading.textContent = "Hello world!";

Sau khi hoàn thành bài đánh giá cơ bản về JavaScript này [ở trên], hãy thêm một số tính năng mới vào trang web mẫu của chúng ta

Trước khi tiếp tục, hãy xóa nội dung hiện tại của tệp

let myVariable;

Trong phần này, bạn sẽ học cách sử dụng các tính năng JavaScript và DOM API để luân phiên hiển thị một trong hai hình ảnh. Thay đổi này sẽ xảy ra khi người dùng nhấp vào hình ảnh được hiển thị

1. Chọn một hình ảnh bạn muốn làm nổi bật trên trang web mẫu của mình. Lý tưởng nhất là hình ảnh sẽ có cùng kích thước với hình ảnh bạn đã thêm trước đó hoặc càng gần càng tốt
2. Lưu hình ảnh này vào thư mục

   let iceCream = "chocolate";
   if [iceCream === "chocolate"] {
     alert["Yay, I love chocolate ice cream!"];
   } else {
     alert["Awwww, but chocolate is my favorite…"];
   }
   

   3 của bạn
3. Đổi tên hình ảnh firefox2. png
4. Thêm mã JavaScript sau vào tệp

   let myVariable;
   

   4 của bạn

   const myHeading = document.querySelector["h1"];
   myHeading.textContent = "Hello world!";
   

   6

5. Lưu tất cả các tệp và tải

   let myVariable;
   

   5 trong trình duyệt. Bây giờ khi bạn nhấp vào hình ảnh, nó sẽ thay đổi thành hình ảnh khác

Đây là những gì đã xảy ra. Bạn đã lưu trữ một tham chiếu đến phần tử

let iceCream = "chocolate";
if [iceCream === "chocolate"] {
  alert["Yay, I love chocolate ice cream!"];
} else {
  alert["Awwww, but chocolate is my favorite…"];
}

let iceCream = "chocolate";
if [iceCream === "chocolate"] {
  alert["Yay, I love chocolate ice cream!"];
} else {
  alert["Awwww, but chocolate is my favorite…"];
}

let iceCream = "chocolate";
if [iceCream === "chocolate"] {
  alert["Yay, I love chocolate ice cream!"];
} else {
  alert["Awwww, but chocolate is my favorite…"];
}

1. Mã lấy giá trị của thuộc tính

   let iceCream = "chocolate";
   if [iceCream === "chocolate"] {
     alert["Yay, I love chocolate ice cream!"];
   } else {
     alert["Awwww, but chocolate is my favorite…"];
   }
   

   9 của hình ảnh
2. Đoạn mã này sử dụng một điều kiện để kiểm tra xem giá trị

   let iceCream = "chocolate";
   if [iceCream === "chocolate"] {
     alert["Yay, I love chocolate ice cream!"];
   } else {
     alert["Awwww, but chocolate is my favorite…"];
   }
   

   9 có bằng với đường dẫn của hình ảnh gốc hay không
   1. Nếu đúng như vậy, mã sẽ thay đổi giá trị

      let iceCream = "chocolate";
      if [iceCream === "chocolate"] {
        alert["Yay, I love chocolate ice cream!"];
      } else {
        alert["Awwww, but chocolate is my favorite…"];
      }
      

      9 thành đường dẫn của hình ảnh thứ hai, buộc hình ảnh khác phải được tải bên trong phần tử

      let iceCream = "chocolate";
      if [iceCream === "chocolate"] {
        alert["Yay, I love chocolate ice cream!"];
      } else {
        alert["Awwww, but chocolate is my favorite…"];
      }
      

      6
   2. Nếu không [có nghĩa là nó phải đã thay đổi], giá trị

      let iceCream = "chocolate";
      if [iceCream === "chocolate"] {
        alert["Yay, I love chocolate ice cream!"];
      } else {
        alert["Awwww, but chocolate is my favorite…"];
      }
      

      9 hoán đổi trở lại đường dẫn hình ảnh ban đầu, về trạng thái ban đầu

Tiếp theo, hãy thay đổi tiêu đề trang thành thông báo chào mừng được cá nhân hóa khi người dùng truy cập trang lần đầu. Thông báo chào mừng này sẽ tồn tại. Nếu người dùng rời khỏi trang web và quay lại sau, chúng tôi sẽ lưu tin nhắn bằng API lưu trữ web. Chúng tôi cũng sẽ bao gồm một tùy chọn để thay đổi người dùng và do đó, thông báo chào mừng

1. Trong

   let myVariable;
   

   5, thêm dòng sau ngay trước phần tử

   myVariable = "Bob";
   

   0

   const myHeading = document.querySelector["h1"];
   myHeading.textContent = "Hello world!";
   

   7

2. Trong

   let myVariable;
   

   4, đặt mã sau vào cuối tệp, chính xác như được viết. Điều này có các tham chiếu đến nút mới và tiêu đề, lưu trữ từng biến bên trong

   const myHeading = document.querySelector["h1"];
   myHeading.textContent = "Hello world!";
   

   8

3. Thêm chức năng sau để đặt lời chào được cá nhân hóa. Điều này sẽ chưa làm bất cứ điều gì, nhưng điều này sẽ sớm thay đổi

   const myHeading = document.querySelector["h1"];
   myHeading.textContent = "Hello world!";
   

   9
   Hàm

   const myHeading = document.querySelector["h1"];
   myHeading.textContent = "Hello world!";
   

   07 chứa hàm

   const myHeading = document.querySelector["h1"];
   myHeading.textContent = "Hello world!";
   

   08, hàm này hiển thị một hộp thoại, tương tự như hàm

   // This is a comment
   

   3. Hàm

   const myHeading = document.querySelector["h1"];
   myHeading.textContent = "Hello world!";
   

   08 này thực hiện nhiều hơn

   // This is a comment
   

   3, yêu cầu người dùng nhập dữ liệu và lưu trữ dữ liệu đó trong một biến sau khi người dùng nhấp vào OK. Trong trường hợp này, chúng tôi đang yêu cầu người dùng nhập tên. Tiếp theo, đoạn mã gọi API

   const myHeading = document.querySelector["h1"];
   myHeading.textContent = "Hello world!";
   

   12, cho phép chúng tôi lưu trữ dữ liệu trong trình duyệt và truy xuất sau này. Chúng tôi sử dụng hàm

   const myHeading = document.querySelector["h1"];
   myHeading.textContent = "Hello world!";
   

   13 của localStorage để tạo và lưu trữ một mục dữ liệu có tên là

   const myHeading = document.querySelector["h1"];
   myHeading.textContent = "Hello world!";
   

   14, đặt giá trị của nó thành biến

   const myHeading = document.querySelector["h1"];
   myHeading.textContent = "Hello world!";
   

   15 chứa mục nhập của người dùng cho tên. Cuối cùng, chúng tôi đặt

   myVariable = "Bob";
   

   4 của tiêu đề thành một chuỗi, cộng với tên mới được lưu trữ của người dùng
4. Thêm khối điều kiện sau. Chúng ta có thể gọi đây là mã khởi tạo, vì nó cấu trúc ứng dụng khi tải lần đầu

   let myVariable;
   

   0
   Dòng đầu tiên của khối này sử dụng toán tử phủ định [logic NOT, được đại diện bởi

   let myVariable = "Bob";
   myVariable = "Steve";
   

   3] để kiểm tra xem dữ liệu

   const myHeading = document.querySelector["h1"];
   myHeading.textContent = "Hello world!";
   

   18 có tồn tại hay không. Nếu không, hàm

   const myHeading = document.querySelector["h1"];
   myHeading.textContent = "Hello world!";
   

   07 sẽ chạy để tạo nó. Nếu nó tồn tại [nghĩa là người dùng đã đặt tên người dùng trong lần truy cập trước], chúng tôi truy xuất tên được lưu trữ bằng cách sử dụng

   const myHeading = document.querySelector["h1"];
   myHeading.textContent = "Hello world!";
   

   20 và đặt

   myVariable = "Bob";
   

   4 của tiêu đề thành một chuỗi, cộng với tên của người dùng, như chúng tôi đã làm bên trong

   const myHeading = document.querySelector["h1"];
   myHeading.textContent = "Hello world!";
   

   07
5. Đặt trình xử lý sự kiện

   let iceCream = "chocolate";
   if [iceCream === "chocolate"] {
     alert["Yay, I love chocolate ice cream!"];
   } else {
     alert["Awwww, but chocolate is my favorite…"];
   }
   

   8 này [bên dưới] vào nút. Khi nhấp vào,

   const myHeading = document.querySelector["h1"];
   myHeading.textContent = "Hello world!";
   

   07 sẽ chạy. Điều này cho phép người dùng nhập một tên khác bằng cách nhấn nút

   let myVariable;
   

   1

Khi bạn chạy ví dụ và nhận được hộp thoại nhắc bạn nhập tên người dùng của mình, hãy thử nhấn nút Hủy. Bạn nên kết thúc với một tiêu đề có nội dung Mozilla thật tuyệt, không có giá trị. Điều này xảy ra bởi vì—khi bạn hủy lời nhắc—giá trị được đặt là

const myHeading = document.querySelector["h1"];
myHeading.textContent = "Hello world!";

Ngoài ra, hãy thử nhấp vào OK mà không cần nhập tên. Bạn nên kết thúc với một tiêu đề có nội dung Mozilla thật tuyệt, vì những lý do khá rõ ràng

Để tránh những sự cố này, bạn có thể kiểm tra xem người dùng có nhập tên trống không. Cập nhật hàm

const myHeading = document.querySelector["h1"];
myHeading.textContent = "Hello world!";

let myVariable;

Trong ngôn ngữ của con người, điều này có nghĩa là. Nếu

const myHeading = document.querySelector["h1"];
myHeading.textContent = "Hello world!";

const myHeading = document.querySelector["h1"];
myHeading.textContent = "Hello world!";

const myHeading = document.querySelector["h1"];
myHeading.textContent = "Hello world!";

Nếu bạn đã làm theo tất cả các hướng dẫn trong bài viết này, bạn sẽ nhận được một trang trông giống như hình bên dưới. Bạn cũng có thể xem phiên bản của chúng tôi

Nếu gặp khó khăn, bạn có thể so sánh công việc của mình với mã ví dụ đã hoàn thành của chúng tôi trên GitHub

Chúng tôi vừa vạch ra bề mặt của JavaScript. Nếu bạn thích chơi và muốn tiến xa hơn, hãy tận dụng các tài nguyên được liệt kê bên dưới

Kịch bản phía máy khách động với JavaScript

Đi sâu vào JavaScript chi tiết hơn nhiều

Đây là một nguồn tài nguyên tuyệt vời cho các nhà phát triển web đầy tham vọng. Học JavaScript trong môi trường tương tác, với các bài học ngắn và bài kiểm tra tương tác, được hướng dẫn bởi đánh giá tự động. 40 buổi học đầu tiên miễn phí. Khóa học hoàn chỉnh có sẵn cho một khoản thanh toán nhỏ một lần

JavaScript được sử dụng như thế nào trong HTML?

Làm cách nào để đưa JavaScript vào HTML?

JavaScript có được viết bằng HTML không?