Hướng dẫn can you store a html element as a variable? - bạn có thể lưu trữ một phần tử html dưới dạng một biến không?

Trong suốt bài viết này, bạn sẽ được yêu cầu nhập các dòng mã để kiểm tra sự hiểu biết của bạn về nội dung. Nếu bạn đang sử dụng trình duyệt máy tính để bàn, nơi tốt nhất để nhập mã mẫu của bạn là bảng điều khiển JavaScript của trình duyệt (xem các công cụ phát triển trình duyệt là gì để biết thêm thông tin về cách truy cập công cụ này).

Một biến là gì?

Một biến là một thùng chứa cho một giá trị, giống như một số chúng ta có thể sử dụng trong một tổng hoặc một chuỗi mà chúng ta có thể sử dụng như một phần của câu.

Ví dụ biến

Hãy xem một ví dụ đơn giản:

<button id="button_A">Press me</button>
<h3 id="heading_A"></h3>

const buttonA = document.querySelector('#button_A');
const headingA = document.querySelector('#heading_A');

buttonA.onclick = () => {
  const name = prompt('What is your name?');
  alert(`Hello ${name}, nice to see you!`);
  headingA.textContent = `Welcome ${name}`;
}

Trong ví dụ này nhấn nút chạy một số mã. Dòng đầu tiên bật một hộp lên trên màn hình yêu cầu người đọc nhập tên của họ và sau đó lưu trữ giá trị trong một biến. Dòng thứ hai hiển thị một thông báo chào mừng bao gồm tên của họ, được lấy từ giá trị biến và dòng thứ ba hiển thị tên đó trên trang.

Không có biến

Để hiểu tại sao điều này rất hữu ích, hãy nghĩ về cách chúng tôi viết ví dụ này mà không cần sử dụng một biến. Nó sẽ trông giống như thế này:

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

const buttonB = document.querySelector('#button_B');
const headingB = document.querySelector('#heading_B');

buttonB.onclick = () => {
    alert(`Hello ${prompt('What is your name?')}, nice to see you!`);
    headingB.textContent = `Welcome ${prompt('What is your name?')}`;
}

Bạn có thể không hiểu đầy đủ cú pháp chúng tôi đang sử dụng (chưa!), Nhưng bạn sẽ có thể có được ý tưởng. Nếu chúng tôi không có sẵn các biến, chúng tôi sẽ phải hỏi người đọc về tên của họ mỗi khi chúng tôi cần sử dụng nó!

Các biến chỉ có ý nghĩa, và khi bạn tìm hiểu thêm về JavaScript, chúng sẽ bắt đầu trở thành bản chất thứ hai.

Một điều đặc biệt về các biến là chúng có thể chứa bất cứ thứ gì - không chỉ là chuỗi và số. Các biến cũng có thể chứa dữ liệu phức tạp và thậm chí toàn bộ các chức năng để làm những điều tuyệt vời. Bạn sẽ tìm hiểu thêm về điều này khi bạn đi cùng.

Lưu ý: Chúng tôi nói các biến chứa các giá trị. Đây là một sự khác biệt quan trọng để thực hiện. Các biến không phải là các giá trị; Chúng là container cho các giá trị. Bạn có thể nghĩ về chúng giống như những hộp các tông nhỏ mà bạn có thể lưu trữ mọi thứ. We say variables contain values. This is an important distinction to make. Variables aren't the values themselves; they are containers for values. You can think of them being like little cardboard boxes that you can store things in.

Tuyên bố một biến

Để sử dụng một biến, trước tiên bạn phải tạo nó - chính xác hơn, chúng tôi gọi đây là khai báo biến. Để làm điều này, chúng tôi nhập từ khóa

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

Ở đây chúng tôi đang tạo hai biến được gọi là

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

Lưu ý: Trong JavaScript, tất cả các hướng dẫn mã phải kết thúc bằng dấu chấm phẩy (

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

Bạn có thể kiểm tra xem các giá trị này hiện có tồn tại trong môi trường thực thi hay không bằng cách nhập tên của biến, ví dụ:

Họ hiện không có giá trị; Chúng là những container trống. Khi bạn nhập tên biến, bạn sẽ nhận được giá trị

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

Lưu ý: Đừng nhầm lẫn một biến tồn tại nhưng không có giá trị xác định với một biến không tồn tại - chúng là những thứ rất khác nhau. Trong tương tự hộp bạn đã thấy ở trên, không có nghĩa là không có hộp (biến) cho một giá trị đi vào. Không có giá trị được xác định có nghĩa là có một hộp, nhưng nó không có giá trị bên trong nó. Don't confuse a variable that exists but has no defined value with a variable that doesn't exist at all — they are very different things. In the box analogy you saw above, not existing would mean there's no box (variable) for a value to go in. No value defined would mean that there is a box, but it has no value inside it.

Khởi tạo một biến

Khi bạn đã khai báo một biến, bạn có thể khởi tạo nó bằng một giá trị. Bạn làm điều này bằng cách nhập tên biến, theo sau là một dấu bằng (

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

myName = 'Chris';
myAge = 37;

Hãy thử quay lại bảng điều khiển ngay bây giờ và gõ vào các dòng này. Bạn sẽ thấy giá trị bạn đã gán cho biến được trả về trong bảng điều khiển để xác nhận nó, trong mỗi trường hợp. Một lần nữa, bạn có thể trả về các giá trị biến của mình bằng cách nhập tên của chúng vào bảng điều khiển - hãy thử lại những điều này:

Bạn có thể khai báo và khởi tạo một biến cùng một lúc, như thế này:

Đây có lẽ là những gì bạn sẽ làm hầu hết thời gian, vì nó nhanh hơn so với thực hiện hai hành động trên hai dòng riêng biệt.

Một lưu ý về var

Có lẽ bạn cũng sẽ thấy một cách khác để khai báo các biến, sử dụng từ khóa

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

Quay lại khi JavaScript được tạo lần đầu tiên, đây là cách duy nhất để khai báo các biến. Thiết kế của

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

Một vài khác biệt đơn giản được giải thích dưới đây. Chúng tôi sẽ không đi sâu vào tất cả các khác biệt bây giờ, nhưng bạn sẽ bắt đầu khám phá chúng khi bạn tìm hiểu thêm về JavaScript (nếu bạn thực sự muốn đọc về chúng bây giờ, vui lòng kiểm tra trang tham khảo LET của chúng tôi).

Để bắt đầu, nếu bạn viết một chương trình JavaScript đa dòng khai báo và khởi tạo một biến, bạn thực sự có thể khai báo một biến với

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

myName = 'Chris';

function logName() {
  console.log(myName);
}

logName();

var myName;

Lưu ý: Điều này sẽ không hoạt động khi gõ các dòng riêng lẻ vào bảng điều khiển JavaScript, ngay khi chạy nhiều dòng JavaScript vào tài liệu web. This won't work when typing individual lines into a JavaScript console, just when running multiple lines of JavaScript in a web document.

Điều này hoạt động vì nâng cao - đọc var nâng để biết thêm chi tiết về chủ đề này.hoisting — read var hoisting for more detail on the subject.

Tăng cường không còn hoạt động với

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

Thứ hai, khi bạn sử dụng

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

var myName = 'Chris';
var myName = 'Bob';

Nhưng những điều sau đây sẽ gây ra lỗi trên dòng thứ hai:

let myName = 'Chris';
let myName = 'Bob';

Thay vào đó bạn phải làm điều này:

let myName = 'Chris';
myName = 'Bob';

Một lần nữa, đây là một quyết định ngôn ngữ hợp lý. Không có lý do gì để tái cấu trúc các biến - nó chỉ khiến mọi thứ trở nên khó hiểu hơn.

Vì những lý do này và hơn thế nữa, chúng tôi khuyên bạn nên sử dụng

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

Lưu ý: Nếu bạn đang thử mã này trong bảng điều khiển của trình duyệt, thích sao chép và dán từng khối mã ở đây nói chung. Có một tính năng trong bảng điều khiển của Chrome trong đó việc khai báo lại biến với

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

myName = 'Chris';
myAge = 37;

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

myName = 'Chris';
myAge = 37;

> let myName = 'Chris';
  let myName = 'Bob';
// As one input: SyntaxError: Identifier 'myName' has already been declared

> let myName = 'Chris';
> let myName = 'Bob';
// As two inputs: both succeed

Cập nhật một biến

Khi một biến đã được khởi tạo với một giá trị, bạn có thể thay đổi (hoặc cập nhật) giá trị đó bằng cách cho nó một giá trị khác. Hãy thử nhập các dòng sau vào bảng điều khiển của bạn:

const buttonA = document.querySelector('#button_A');
const headingA = document.querySelector('#heading_A');

buttonA.onclick = () => {
  const name = prompt('What is your name?');
  alert(`Hello ${name}, nice to see you!`);
  headingA.textContent = `Welcome ${name}`;
}

Một bên về các quy tắc đặt tên biến

Bạn có thể gọi một biến khá nhiều bất cứ thứ gì bạn thích, nhưng có những hạn chế. Nói chung, bạn nên chỉ sử dụng các ký tự Latin (0-9, A-Z, A-Z) và ký tự dấu gạch dưới.

• Bạn không nên sử dụng các ký tự khác vì chúng có thể gây ra lỗi hoặc khó hiểu đối với khán giả quốc tế.
• Không sử dụng dấu gạch dưới khi bắt đầu các tên biến - điều này được sử dụng trong một số cấu trúc JavaScript nhất định có nghĩa là những thứ cụ thể, do đó có thể gây nhầm lẫn.
• Không sử dụng số khi bắt đầu các biến. Điều này không được phép và gây ra lỗi.
• Một quy ước an toàn để gắn bó là cái gọi là "trường hợp lạc đà thấp hơn", trong đó bạn gắn kết nhiều từ, sử dụng chữ thường cho toàn bộ từ đầu tiên và sau đó tận dụng các từ tiếp theo. Chúng tôi đã sử dụng điều này cho các tên biến của chúng tôi trong bài viết cho đến nay.
• Tạo tên biến trực quan, vì vậy họ mô tả dữ liệu mà chúng chứa. Đừng chỉ sử dụng các chữ cái/số đơn, hoặc các cụm từ dài lớn.
• Các biến nhạy cảm trường hợp - vì vậy

  myName = 'Chris';
  myAge = 37;
  

  3 là một biến khác nhau so với

  <button id="button_B">Press me</button>
  <h3 id="heading_B"></h3>
  

  4.
• Một điểm cuối cùng: Bạn cũng cần tránh sử dụng các từ dành riêng của JavaScript làm tên biến của bạn - bởi điều này, chúng tôi có nghĩa là các từ tạo nên cú pháp thực tế của JavaScript! Vì vậy, bạn không thể sử dụng các từ như

  <button id="button_B">Press me</button>
  <h3 id="heading_B"></h3>
  

  8,

  myName = 'Chris';
  myAge = 37;
  

  6,

  <button id="button_B">Press me</button>
  <h3 id="heading_B"></h3>
  

  2 và

  myName = 'Chris';
  myAge = 37;
  

  8 làm tên biến. Các trình duyệt nhận ra chúng là các mục mã khác nhau và vì vậy bạn sẽ gặp lỗi.

Ví dụ tên tốt:

const buttonA = document.querySelector('#button_A');
const headingA = document.querySelector('#heading_A');

buttonA.onclick = () => {
  const name = prompt('What is your name?');
  alert(`Hello ${name}, nice to see you!`);
  headingA.textContent = `Welcome ${name}`;
}

Ví dụ tên xấu:

const buttonA = document.querySelector('#button_A');
const headingA = document.querySelector('#heading_A');

buttonA.onclick = () => {
  const name = prompt('What is your name?');
  alert(`Hello ${name}, nice to see you!`);
  headingA.textContent = `Welcome ${name}`;
}

Hãy thử tạo thêm một vài biến bây giờ, với hướng dẫn trên trong tâm trí.

Loại biến

Có một vài loại dữ liệu khác nhau mà chúng ta có thể lưu trữ trong các biến. Trong phần này, chúng tôi sẽ mô tả những điều này một cách ngắn gọn, sau đó trong các bài viết trong tương lai, bạn sẽ tìm hiểu về chúng chi tiết hơn.

Cho đến nay chúng tôi đã xem xét hai cái đầu tiên, nhưng có những người khác.

Số

Bạn có thể lưu trữ số trong các biến, toàn bộ số như 30 (còn được gọi là số nguyên) hoặc số thập phân như 2.456 (còn được gọi là floats hoặc số điểm nổi). Bạn không cần phải khai báo các loại biến trong JavaScript, không giống như một số ngôn ngữ lập trình khác. Khi bạn cho một biến một giá trị số, bạn không bao gồm các trích dẫn:

Dây

Chuỗi là những đoạn văn bản. Khi bạn đưa ra một biến một giá trị chuỗi, bạn cần bọc nó trong các dấu ngoặc kép đơn hoặc kép; Mặt khác, JavaScript cố gắng giải thích nó như một tên biến khác.

const buttonA = document.querySelector('#button_A');
const headingA = document.querySelector('#heading_A');

buttonA.onclick = () => {
  const name = prompt('What is your name?');
  alert(`Hello ${name}, nice to see you!`);
  headingA.textContent = `Welcome ${name}`;
}

Booleans

Booleans là các giá trị đúng/sai - chúng có thể có hai giá trị,

myName = 'Chris';
myAge = 37;

myName = 'Chris';

function logName() {
  console.log(myName);
}

logName();

var myName;

Trong khi đó trong thực tế, nó sẽ được sử dụng như thế này:

Điều này đang sử dụng toán tử "ít hơn" (

myName = 'Chris';

function logName() {
  console.log(myName);
}

logName();

var myName;

myName = 'Chris';

function logName() {
  console.log(myName);
}

logName();

var myName;

Mảng

Một mảng là một đối tượng duy nhất chứa nhiều giá trị được đặt trong các dấu ngoặc vuông và được phân tách bằng dấu phẩy. Hãy thử nhập các dòng sau vào bảng điều khiển của bạn:

const buttonA = document.querySelector('#button_A');
const headingA = document.querySelector('#heading_A');

buttonA.onclick = () => {
  const name = prompt('What is your name?');
  alert(`Hello ${name}, nice to see you!`);
  headingA.textContent = `Welcome ${name}`;
}

Khi các mảng này được xác định, bạn có thể truy cập từng giá trị theo vị trí của chúng trong mảng. Hãy thử các dòng sau:

const buttonA = document.querySelector('#button_A');
const headingA = document.querySelector('#heading_A');

buttonA.onclick = () => {
  const name = prompt('What is your name?');
  alert(`Hello ${name}, nice to see you!`);
  headingA.textContent = `Welcome ${name}`;
}

Các dấu ngoặc vuông chỉ định một giá trị chỉ mục tương ứng với vị trí của giá trị bạn muốn được trả về. Bạn có thể nhận thấy rằng các mảng trong JavaScript là không chỉ số: phần tử đầu tiên là tại Index 0.

Bạn sẽ tìm hiểu thêm về các mảng trong một bài viết trong tương lai.

Các đối tượng

Trong lập trình, một đối tượng là một cấu trúc của mã mô hình hóa một đối tượng thực tế. Bạn có thể có một đối tượng đơn giản đại diện cho một hộp và chứa thông tin về chiều rộng, chiều dài và chiều cao của nó hoặc bạn có thể có một đối tượng đại diện cho một người và chứa dữ liệu về tên, chiều cao, trọng lượng của chúng để nói xin chào với họ, và nhiều hơn nữa.

Hãy thử nhập dòng sau vào bảng điều khiển của bạn:

const buttonA = document.querySelector('#button_A');
const headingA = document.querySelector('#heading_A');

buttonA.onclick = () => {
  const name = prompt('What is your name?');
  alert(`Hello ${name}, nice to see you!`);
  headingA.textContent = `Welcome ${name}`;
}

Để truy xuất thông tin được lưu trữ trong đối tượng, bạn có thể sử dụng cú pháp sau:

Chúng tôi sẽ không xem xét các đối tượng nữa - bạn có thể tìm hiểu thêm về những người trong một mô -đun trong tương lai.

Gõ động

JavaScript là "ngôn ngữ được gõ động", có nghĩa là, không giống như một số ngôn ngữ khác, bạn không cần chỉ định loại dữ liệu nào sẽ chứa (số, chuỗi, mảng, v.v.).

Ví dụ: nếu bạn khai báo một biến và cung cấp cho nó một giá trị được đặt trong các trích dẫn, trình duyệt coi biến là một chuỗi:

Ngay cả khi giá trị kèm theo trong trích dẫn chỉ là các chữ số, nó vẫn là một chuỗi - không phải là một số - vì vậy hãy cẩn thận:

const buttonA = document.querySelector('#button_A');
const headingA = document.querySelector('#heading_A');

buttonA.onclick = () => {
  const name = prompt('What is your name?');
  alert(`Hello ${name}, nice to see you!`);
  headingA.textContent = `Welcome ${name}`;
}

Hãy thử nhập bốn dòng trên vào bảng điều khiển của bạn từng cái một và xem kết quả là gì. Bạn sẽ nhận thấy rằng chúng tôi đang sử dụng một toán tử đặc biệt có tên

myName = 'Chris';

function logName() {
  console.log(myName);
}

logName();

var myName;

myName = 'Chris';

function logName() {
  console.log(myName);
}

logName();

var myName;

myName = 'Chris';

function logName() {
  console.log(myName);
}

logName();

var myName;

myName = 'Chris';

function logName() {
  console.log(myName);
}

logName();

var myName;

Hằng số trong JavaScript

Cũng như các biến, bạn có thể khai báo hằng số. Đây giống như các biến, ngoại trừ điều đó:

• bạn phải khởi tạo chúng khi bạn tuyên bố chúng
• Bạn không thể gán cho họ một giá trị mới sau khi bạn khởi tạo chúng.

Ví dụ: sử dụng

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

Nếu bạn cố gắng làm điều này bằng cách sử dụng

myName = 'Chris';
myAge = 37;

Tương tự, với

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

const buttonA = document.querySelector('#button_A');
const headingA = document.querySelector('#heading_A');

buttonA.onclick = () => {
  const name = prompt('What is your name?');
  alert(`Hello ${name}, nice to see you!`);
  headingA.textContent = `Welcome ${name}`;
}

Nếu bạn cố gắng làm điều này bằng cách sử dụng

myName = 'Chris';
myAge = 37;

const buttonA = document.querySelector('#button_A');
const headingA = document.querySelector('#heading_A');

buttonA.onclick = () => {
  const name = prompt('What is your name?');
  alert(`Hello ${name}, nice to see you!`);
  headingA.textContent = `Welcome ${name}`;
}

Tương tự, với

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

Lưu ý rằng mặc dù hằng số trong JavaScript phải luôn đặt tên cho cùng một giá trị, bạn có thể thay đổi nội dung của giá trị mà nó đặt tên. Đây không phải là một sự khác biệt hữu ích cho các loại đơn giản như số hoặc booleans, nhưng hãy xem xét một đối tượng:

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

Bạn có thể cập nhật, thêm hoặc xóa các thuộc tính của một đối tượng được khai báo bằng myName = 'Chris'; myAge = 37; 2, vì mặc dù nội dung của đối tượng đã thay đổi, hằng số vẫn chỉ vào cùng một đối tượng:

Khi nào nên sử dụng const và khi nào nên sử dụng

Nếu bạn không thể làm nhiều với

myName = 'Chris';
myAge = 37;

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

myName = 'Chris';
myAge = 37;

myName = 'Chris';
myAge = 37;

Trong khóa học này, chúng tôi áp dụng nguyên tắc sau đây về thời điểm sử dụng

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

myName = 'Chris';
myAge = 37;

Sử dụng

myName = 'Chris';
myAge = 37;

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

Điều này có nghĩa là nếu bạn có thể khởi tạo một biến khi bạn khai báo và không cần phải gán lại sau này, hãy làm cho nó trở thành một hằng số.

Kiểm tra kỹ năng của bạn!

Bạn đã đạt đến cuối bài viết này, nhưng bạn có thể nhớ thông tin quan trọng nhất không? Bạn có thể tìm thấy một số bài kiểm tra tiếp theo để xác minh rằng bạn đã giữ lại thông tin này trước khi bạn tiếp tục - xem Kiểm tra kỹ năng của bạn: Biến.

Bản tóm tắt

• Đến bây giờ bạn nên biết một số tiền hợp lý về các biến JavaScript và cách tạo chúng. Trong bài viết tiếp theo, chúng tôi sẽ tập trung vào các con số chi tiết hơn, xem xét cách làm toán cơ bản trong javascript.
• Trước
• Tiếp theo

Trong mô -đun này