Hướng dẫn how do i start javascript? - làm cách nào để bắt đầu javascript?

  • Trước
  • Tổng quan: Bắt đầu với web
  • Tiếp theo

JavaScript là ngôn ngữ lập trình thêm tính tương tác với trang web của bạn. Điều này xảy ra trong các trò chơi, trong hành vi của các câu trả lời khi nhấn các nút hoặc với mục nhập dữ liệu trên các biểu mẫu; với kiểu dáng năng động; Với hoạt hình, v.v ... Bài viết này giúp bạn bắt đầu với JavaScript và hiểu biết về những gì có thể.

JavaScript là gì?

JavaScript là một ngôn ngữ lập trình mạnh mẽ có thể thêm tính tương tác vào một 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 các trò chơi, đồ họa 2D và 3D hoạt hình, các ứng dụng dựa trên cơ sở dữ liệu toàn diện và nhiều hơn nữa!

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 một loạt các công cụ trên đầu 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ạo động HTML và thiết lập các kiểu CSS; Thu thập và thao tác với một luồng video từ webcam của người dùng hoặc tạo mẫu đồ họa 3D và mẫu âm thanh.
  • API của bên thứ ba cho phép các 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 các 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 nhẹ về JavaScript, để trình bày các chi tiết về cách ngôn ngữ JavaScript cốt lõi khác 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ư ở các phần khác của MDN.

Phần dưới đây giới thiệu một số khía cạnh của ngôn ngữ cốt lõi và cung cấp một cơ hội để chơi với một vài tính năng API của trình duyệt. Chúc vui vẻ!

Một "thế giới xin chào!" thí dụ

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 khía cạnh mới của sức mạnh và sự sáng tạo.

Tuy nhiên, việc thoải mái với JavaScript khó khăn hơn là thoải mái 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 kiểm tra cách thêm JavaScript vào trang của bạn để tạo một thế giới xin chào! thí dụ. [Xin 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 cùng vớ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. If you haven't been following along with the rest of our course, download this example code and use it as a starting point.

  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
    const myHeading = document.querySelector["h2"];
    myHeading.textContent = "Hello world!";
    
    7. Trong thư mục Script, tạo một tài liệu văn bản mới có tên là
    const myHeading = document.querySelector["h2"];
    myHeading.textContent = "Hello world!";
    
    8 và lưu nó.
  2. Trong tệp
    const myHeading = document.querySelector["h2"];
    myHeading.textContent = "Hello world!";
    
    9 của bạn, hãy nhập mã này trên một dòng mới, ngay trước khi đóng thẻ
    let myVariable = "Bob";
    myVariable = "Steve";
    
    0:

    
    

  3. Điều này đang thực hiện cùng một công việc với phần tử
    let myVariable = "Bob";
    myVariable = "Steve";
    
    1 cho CSS. Nó áp dụng JavaScript cho trang, vì vậy nó có thể có ảnh hưởng đến HTML [cùng với CSS và bất cứ điều gì khác trên trang].
  4. Thêm mã này vào tệp
    const myHeading = document.querySelector["h2"];
    myHeading.textContent = "Hello world!";
    
    8:

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

  5. Đảm bảo các tệp HTML và JavaScript được lưu. Sau đó tải
    const myHeading = document.querySelector["h2"];
    myHeading.textContent = "Hello world!";
    
    9 trong trình duyệt của bạn. Bạn sẽ thấy một cái gì đó như thế này:

Lưu ý: Lý do các hướng dẫn [ở trên] đặt phần tử

let myVariable = "Bob";
myVariable = "Steve";
4 gần cuối tệp HTML là trình duyệt đọc mã theo thứ tự nó xuất hiện trong tệp. The reason the instructions [above] place the
let myVariable = "Bob";
myVariable = "Steve";
4 element near the bottom of the HTML file is that the browser reads code in the order it appears in the file.

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

Chuyện gì đã xảy ra thế?

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 gọi là

let myVariable = "Bob";
myVariable = "Steve";
5 để lấy tham chiếu đến tiêu đề của bạn, sau đó lưu trữ nó trong một biến có tên là
let myVariable = "Bob";
myVariable = "Steve";
6. Điều này tương tự như những gì chúng tôi đã sử dụng bộ chọn CSS. Khi bạn muốn làm điều gì đó với một yếu tố, bạn cần chọn nó trước.

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

let myVariable = "Bob";
myVariable = "Steve";
8 của biến
let myVariable = "Bob";
myVariable = "Steve";
6 [đại diện cho nội dung của tiêu đề] cho Hello World !.

Lưu ý: Cả hai tính năng bạn đã sử dụng trong bài tập này là các phần của API mô hình đối tượng tài liệu [DOM], có khả năng thao tác các tài liệu. Both of the features you used in this exercise are parts of the Document Object Model [DOM] API, which has the capability to manipulate documents.

Khái niệm cơ bản về ngôn ngữ

Để cung cấp cho bạn sự hiểu biết tốt hơn về cách thức hoạt động của JavaScript, hãy giải thích một số tính năng cốt lõi của ngôn ngữ. Điều đáng chú ý là 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 làm chủ các nguyên tắc cơ bản này, bạn cũng có một khởi đầu về mã hóa 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ụ phát triển trình duyệt. In this article, try entering the example code lines into your JavaScript console to see what happens. For more details on JavaScript consoles, see Discover browser developer tools.

Biến

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

let myVariable = "Bob";
myVariable = "Steve";
9, theo sau là tên bạn đặt cho biến:

Một dấu chấm phẩy ở cuối một dòng cho biết nơi một câu lệnh kết thúc. 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 đó là một thực tiễn tốt để có các dấu chấm phẩy vào cuối mỗi tuyên bố. Có những quy tắc khác khi 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ứ điều gì, nhưng có một số hạn chế. [Xem phần này về các quy tắc đặt tên.] Nếu bạn không chắc chắn, bạn có thể kiểm tra tên biến của mình để xem nó có hợp lệ không.

JavaScript là trường hợp nhạy cảm. Điều này có nghĩa là

/*
Everything in between is a comment.
*/
0 không giống như
/*
Everything in between is a comment.
*/
1. Nếu bạn có vấn đề trong mã của mình, hãy kiểm tra trường hợp!

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

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

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

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

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

Lưu ý rằng các biến có thể giữ các giá trị có các loại dữ liệu khác nhau:

Vậy tại sao chúng ta cần các biến? Các biến là cần thiết để làm bất cứ điều gì thú vị trong lập trình. Nếu các giá trị không thể thay đổi, thì bạn không thể làm bất cứ điều gì năng động, như cá nhân hóa thông điệp chào hỏi hoặc thay đổi hình ảnh được hiển thị trong thư viện hình ảnh.

Nhận xét là những đ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à bình luận. Bạn có thể viết nhận xét trong JavaScript giống như bạn có thể trong CSS:

/*
Everything in between is a comment.
*/

Nếu bình luận của bạn không có sự phá vỡ dòng, đó là một tùy chọn để đặt nó đằng sau hai dấu gạch chéo như sau:

Người vận hành

/*
Everything in between is a comment.
*/
2 là một biểu tượng toán học tạo ra kết quả dựa trên hai giá trị [hoặc biến]. Trong bảng sau, bạn có thể thấy một số toán tử đơn giản nhất, cùng với một số ví dụ để thử trong bảng điều khiển JavaScript.

Có rất nhiều nhà khai thác để khám phá, nhưng điều này là đủ cho bây giờ. Xem biểu thức và toán tử để biết danh sách đầy đủ.

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

/*
Everything in between is a comment.
*/
3 vào bảng điều khiển của bạn. Tại sao bạn không nhận được kết quả mà bạn mong đợi? Bởi vì các dấu hiệu trích dẫn biến các số thành chuỗi, do đó bạn đã kết thúc các chuỗi thay vì thêm các số. Nếu bạn nhập
/*
Everything in between is a comment.
*/
4, bạn sẽ nhận được tổng số hai số.
Mixing data types can lead to some strange results when performing calculations. Be careful that you are referring to your variables correctly, and getting the results you expect. For example, enter
/*
Everything in between is a comment.
*/
3 into your console. Why don't you get the result you expected? Because the quote marks turn the numbers into strings, so you've ended up concatenating strings rather than adding numbers. If you enter
/*
Everything in between is a comment.
*/
4 you'll get the total of the two numbers.

Điều kiện

Các điều kiện là các 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 hình thức rất phổ biến của các điều kiện là tuyên bố

/*
Everything in between is a comment.
*/
5. Ví dụ:

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.
*/
6 là thử nghiệm. Điều này sử dụng toán tử bình đẳng nghiêm ngặt [như được mô tả ở trên] để so sánh biến
/*
Everything in between is a comment.
*/
7 với chuỗi
/*
Everything in between is a comment.
*/
8 để xem liệu hai có bằng không. Nếu so sánh này trả về
/*
Everything in between is a comment.
*/
9, khối mã đầu tiên chạy. Nếu so sánh là không đúng, khối thứ hai của mã sau khi câu lệnh
let iceCream = "chocolate";
if [iceCream === "chocolate"] {
  alert["Yay, I love chocolate ice cream!"];
} else {
  alert["Awwww, but chocolate is my favorite…"];
}
0 thay thế.

Chức năng

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

let myVariable = document.querySelector["h2"];

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

let iceCream = "chocolate";
if [iceCream === "chocolate"] {
  alert["Yay, I love chocolate ice cream!"];
} else {
  alert["Awwww, but chocolate is my favorite…"];
}
1 và
let iceCream = "chocolate";
if [iceCream === "chocolate"] {
  alert["Yay, I love chocolate ice cream!"];
} else {
  alert["Awwww, but chocolate is my favorite…"];
}
2, được tích hợp vào trình duyệt.

Nếu bạn thấy một cái gì đó trông giống như một tên biến, nhưng nó được theo sau bởi dấu ngoặc đơn, ____ ____43 có thể là một chức năng. Các chức năng thường có đối số: Các bit dữ liệu họ cần để thực hiện công việc của mình. Các đối số đi vào bên trong dấu ngoặc đơn, cách nhau bởi dấu phẩy nếu có nhiều hơn một đối số.

Ví dụ: chức năng

let iceCream = "chocolate";
if [iceCream === "chocolate"] {
  alert["Yay, I love chocolate ice cream!"];
} else {
  alert["Awwww, but chocolate is my favorite…"];
}
4 làm cho một hộp bật lên xuất hiện bên trong cửa sổ trình duyệt, nhưng chúng ta cần cung cấp cho nó một chuỗi như một đối số để cho chức năng biết thông báo nào sẽ hiển thị.

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

function multiply[num1, num2] {
  let result = num1 * num2;
  return result;
}

Hãy thử chạy điều này trong bảng điều khiển; Sau đó kiểm tra với một số đối số. Ví dụ:

multiply[4, 7];
multiply[20, 20];
multiply[0.5, 3];

Lưu ý: Câu lệnh

let iceCream = "chocolate";
if [iceCream === "chocolate"] {
  alert["Yay, I love chocolate ice cream!"];
} else {
  alert["Awwww, but chocolate is my favorite…"];
}
5 cho trình duyệt trả lại biến
let iceCream = "chocolate";
if [iceCream === "chocolate"] {
  alert["Yay, I love chocolate ice cream!"];
} else {
  alert["Awwww, but chocolate is my favorite…"];
}
6 ra khỏi hàm để nó có sẵn để sử dụng. Điều này là cần thiết bởi vì các biến được xác định bên trong các hàm chỉ có sẵn bên trong các chức năng đó. Điều này được gọi là phạm vi biến. [Đọc thêm về phạm vi biến.]
The
let iceCream = "chocolate";
if [iceCream === "chocolate"] {
  alert["Yay, I love chocolate ice cream!"];
} else {
  alert["Awwww, but chocolate is my favorite…"];
}
5 statement tells the browser to return the
let iceCream = "chocolate";
if [iceCream === "chocolate"] {
  alert["Yay, I love chocolate ice cream!"];
} else {
  alert["Awwww, but chocolate is my favorite…"];
}
6 variable out of the function so it is available to use. This is necessary because variables defined inside functions are only available inside those functions. This is called variable scoping. [Read more about variable scoping.]

Sự kiện

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

document.querySelector["html"].addEventListener["click", function [] {
  alert["Ouch! Stop poking me!"];
}];

Có một số cách để gắn một trình xử lý sự kiện vào một yếu tố. Ở đây chúng tôi chọ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…"];
}
7. Sau đó, chúng tôi gọi hàm
let iceCream = "chocolate";
if [iceCream === "chocolate"] {
  alert["Yay, I love chocolate ice cream!"];
} else {
  alert["Awwww, but chocolate is my favorite…"];
}
8 của nó, chuyển tên của sự kiện để nghe [
let iceCream = "chocolate";
if [iceCream === "chocolate"] {
  alert["Yay, I love chocolate ice cream!"];
} else {
  alert["Awwww, but chocolate is my favorite…"];
}
9] và một hàm để chạy khi sự kiện xảy ra.

Hàm chúng tôi vừa chuyển đến

let iceCream = "chocolate";
if [iceCream === "chocolate"] {
  alert["Yay, I love chocolate ice cream!"];
} else {
  alert["Awwww, but chocolate is my favorite…"];
}
8 ở đây được gọi là hàm ẩn danh, bởi vì nó không có tên. Có một cách khác để viết các chức năng ẩn danh, mà chúng ta gọi là hàm mũi tên. Hàm mũi tên sử dụng
let myVariable = document.querySelector["h2"];
1 thay vì
let myVariable = document.querySelector["h2"];
2:

document.querySelector["html"].addEventListener["click", [] => {
  alert["Ouch! Stop poking me!"];
}];

Supercharging trang web ví dụ của chúng tôi

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

Trước khi đi xa hơn, hãy xóa nội dung hiện tại của tệp

const myHeading = document.querySelector["h2"];
myHeading.textContent = "Hello world!";
8 của bạn - bit bạn đã thêm trước đó trong "Hello World!" Ví dụ - và lưu tệp trống. Nếu bạn không, mã hiện tại sẽ đụng độ với mã mới mà bạn sắp thêm.

Thêm bộ thay đổi hình ảnh

Trong phần này, bạn sẽ tìm hiểu cách sử dụng các tính năng của JavaScript và DOM API để thay thế 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 giới thiệu trên trang web ví dụ của bạn. Lý tưởng nhất, 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 trong thư mục
    let myVariable = document.querySelector["h2"];
    
    4 của bạn.
  3. Đổi tên hình ảnh firefox2.png.
  4. Thêm mã JavaScript sau vào tệp
    const myHeading = document.querySelector["h2"];
    myHeading.textContent = "Hello world!";
    
    8 của bạn.

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

  5. Lưu tất cả các tệp và tải
    const myHeading = document.querySelector["h2"];
    myHeading.textContent = "Hello world!";
    
    9 trong trình duyệt. Bây giờ khi bạn nhấp vào hình ảnh, nó sẽ thay đổi sang 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 myVariable = document.querySelector["h2"];
7 của bạn trong biến
let myVariable = document.querySelector["h2"];
8. Tiếp theo, bạn đã tạo thuộc tính Trình xử lý sự kiện
let myVariable = document.querySelector["h2"];
9 của biến này bằng với một hàm không có tên [hàm "ẩn danh"]. Vì vậy, mỗi lần nhấp vào phần tử này:

  1. Mã lấy lại giá trị của thuộc tính
    function multiply[num1, num2] {
      let result = num1 * num2;
      return result;
    }
    
    0 của hình ảnh.
  2. Mã sử ​​dụng có điều kiện để kiểm tra xem giá trị
    function multiply[num1, num2] {
      let result = num1 * num2;
      return result;
    }
    
    0 có bằng với đường dẫn của hình ảnh gốc không:
    1. Nếu có, mã thay đổi giá trị
      function multiply[num1, num2] {
        let result = num1 * num2;
        return result;
      }
      
      0 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 myVariable = document.querySelector["h2"];
      
      7.
    2. Nếu nó không [có nghĩa là nó phải đã thay đổi], giá trị
      function multiply[num1, num2] {
        let result = num1 * num2;
        return result;
      }
      
      0 hoán đổi trở lại đường dẫn hình ảnh gốc, sang trạng thái gốc.

Thêm một thông điệp chào mừng được cá nhân hóa

Tiếp theo, hãy thay đổi tiêu đề trang thành tin nhắn chào mừng được cá nhân hóa khi người dùng truy cập trang web lần đầu tiên. Thông điệp 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 thông báo 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
    const myHeading = document.querySelector["h2"];
    myHeading.textContent = "Hello world!";
    
    9, thêm dòng sau ngay trước phần tử
    let myVariable = "Bob";
    myVariable = "Steve";
    
    4:

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

  2. Trong
    const myHeading = document.querySelector["h2"];
    myHeading.textContent = "Hello world!";
    
    8, đặt mã sau ở dưới cùng của 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["h2"];
    myHeading.textContent = "Hello world!";
    
    2

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

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

    Hàm
    function multiply[num1, num2] {
      let result = num1 * num2;
      return result;
    }
    
    8 chứa hàm
    function multiply[num1, num2] {
      let result = num1 * num2;
      return result;
    }
    
    9, hiển thị hộp thoại, tương tự như
    let iceCream = "chocolate";
    if [iceCream === "chocolate"] {
      alert["Yay, I love chocolate ice cream!"];
    } else {
      alert["Awwww, but chocolate is my favorite…"];
    }
    
    4. Hàm
    function multiply[num1, num2] {
      let result = num1 * num2;
      return result;
    }
    
    9 này thực hiện nhiều hơn
    let iceCream = "chocolate";
    if [iceCream === "chocolate"] {
      alert["Yay, I love chocolate ice cream!"];
    } else {
      alert["Awwww, but chocolate is my favorite…"];
    }
    
    4, yêu cầu người dùng nhập dữ liệu và lưu trữ nó trong một biến sau khi người dùng nhấp 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, mã gọi trên API
    multiply[4, 7];
    multiply[20, 20];
    multiply[0.5, 3];
    
    3, cho phép chúng tôi lưu trữ dữ liệu trong trình duyệt và truy xuất nó sau. Chúng tôi sử dụng hàm
    multiply[4, 7];
    multiply[20, 20];
    multiply[0.5, 3];
    
    4 của LocalStorage để tạo và lưu trữ một mục dữ liệu có tên
    multiply[4, 7];
    multiply[20, 20];
    multiply[0.5, 3];
    
    5, đặt giá trị của nó thành biến
    multiply[4, 7];
    multiply[20, 20];
    multiply[0.5, 3];
    
    6 có chứa mục nhập của người dùng cho tên. Cuối cùng, chúng tôi đặt
    let myVariable = "Bob";
    myVariable = "Steve";
    
    8 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 tôi có thể gọi mã khởi tạo này, vì nó cấu trúc ứng dụng khi lần đầu tiên tải.

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

    Dòng đầu tiên này của khối này sử dụng toán tử phủ định [logic không, được biểu thị bằng
    multiply[4, 7];
    multiply[20, 20];
    multiply[0.5, 3];
    
    8] để kiểm tra xem dữ liệu
    multiply[4, 7];
    multiply[20, 20];
    multiply[0.5, 3];
    
    9 có tồn tại hay không. Nếu không, hàm
    function multiply[num1, num2] {
      let result = num1 * num2;
      return result;
    }
    
    8 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 sẽ truy xuất tên được lưu trữ bằng
    document.querySelector["html"].addEventListener["click", function [] {
      alert["Ouch! Stop poking me!"];
    }];
    
    1 và đặt
    let myVariable = "Bob";
    myVariable = "Steve";
    
    8 của tiêu đề thành chuỗi, cộng với tên của người dùng, như chúng tôi đã làm bên trong
    function multiply[num1, num2] {
      let result = num1 * num2;
      return result;
    }
    
    8.
  5. Đặt trình xử lý sự kiện
    let myVariable = document.querySelector["h2"];
    
    9 này [bên dưới] vào nút. Khi nhấp,
    function multiply[num1, num2] {
      let result = num1 * num2;
      return result;
    }
    
    8 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.

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

Tên người dùng của NULL?

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

document.querySelector["html"].addEventListener["click", function [] {
  alert["Ouch! Stop poking me!"];
}];
6. Null là một giá trị đặc biệt trong JavaScript đề cập đến việc không có giá trị.

Ngoài ra, hãy thử nhấp 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 Mozilla là tuyệt vời, vì những lý do khá rõ ràng.

Để tránh những vấn đề này, bạn có thể kiểm tra xem người dùng chưa nhập tên trống. Cập nhật chức năng

function multiply[num1, num2] {
  let result = num1 * num2;
  return result;
}
8 của bạn lên điều này:

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

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

multiply[4, 7];
multiply[20, 20];
multiply[0.5, 3];
6 không có giá trị, hãy chạy lại
function multiply[num1, num2] {
  let result = num1 * num2;
  return result;
}
8 ngay từ đầu. Nếu nó có một giá trị [nếu câu lệnh trên không đúng], thì hãy lưu trữ giá trị trong
multiply[4, 7];
multiply[20, 20];
multiply[0.5, 3];
3 và đặt nó làm văn bản của tiêu đề.

Sự kết luận

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ẽ kết thúc với một trang trông giống như hình ảnh bên dưới. Bạn cũng có thể xem phiên bản của chúng tôi.

Nếu bạn bị mắc kẹt, bạn có thể so sánh công việc của bạn với mã ví dụ đã hoàn thành của chúng tôi trên GitHub.

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

Xem thêm

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.

Tìm hiểu JavaScript

Đâ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! Tìm hiểu JavaScript trong một môi trường tương tác, với các bài học ngắn và các bài kiểm tra tương tác, được hướng dẫn bởi một đánh giá tự động. 40 bài học đầu tiên là miễn phí. Khóa học hoàn chỉnh có sẵn cho một khoản thanh toán một lần nhỏ.

  • Trước
  • Tổng quan: Bắt đầu với web
  • Tiếp theo

Trong mô -đun này

Làm cách nào để bắt đầu JavaScript trong trình duyệt của mình?

Kích hoạt JavaScript trong Google Chrome..
Mở Chrome trên máy tính của bạn ..
Nhấp chuột. Cài đặt ..
Nhấp vào Bảo mật và Quyền riêng tư ..
Nhấp vào Cài đặt trang ..
Nhấp vào JavaScript ..
Chọn Trang web có thể sử dụng JavaScript ..

Làm cách nào để bắt đầu một tập lệnh JavaScript trong HTML?

Thêm JavaScript vào tài liệu HTML, bạn có thể thêm mã JavaScript vào tài liệu HTML bằng cách sử dụng thẻ HTML chuyên dụng bao quanh mã JavaScript.Thẻ có thể được đặt trong phần HTML của bạn hoặc trong phần, tùy thuộc vào thời điểm bạn muốn JavaScript tải.employing the dedicated HTML tag that wraps around JavaScript code. The tag can be placed in the section of your HTML or in the section, depending on when you want the JavaScript to load.

Tôi có thể bắt đầu mã hóa JavaScript ở đâu?

9 Tài nguyên để bắt đầu mã hóa với JavaScript..
Google Chrome.Vụ nổ JavaScript hiện tại của JavaScript được kích hoạt bởi trình duyệt Chrome của Google.....
repress.it.....
@JavaScriptD Daily.....
Eric Elliott.....
Funfunfunction.....
Visual Studio Code.....
Coderdojo/freecodecamp/gặp gỡ.....
GitHub..

Tôi có thể trực tiếp bắt đầu học JavaScript không?

JavaScript thân thiện với người mới bắt đầu, điều tuyệt vời về nó là nó được cài đặt trên mọi trình duyệt web hiện đại, không cần thiết lập bất kỳ loại môi trường phát triển nào, điều đó có nghĩa là bạn có thể bắt đầu mã hóa với JavaScript ngay lập tức!you can start coding with JavaScript right away!

Bài Viết Liên Quan

Chủ Đề