Biến JavaScript trong HTML là gì?

Question

Các biến JavaScript thường do người dùng xác định trong khi mã hóa hoặc bạn có thể sử dụng dấu nhắc để tìm nạp dữ liệu và lưu trữ dữ liệu đó trong một biến để sử dụng tiếp

Nội dung chính Show

Cách sử dụng biến do người dùng xác định JavaScript trong HTML
Làm cách nào để truy cập biến JavaScript trong HTML?
Ví dụ về biến trong JavaScript là gì?
Biến trong HTML là gì?
Làm cách nào để sử dụng biến trong HTML?

Ở đây, chúng tôi sẽ trình bày cách hành động theo một biến do người dùng xác định và sử dụng nó trong HTML, và phần trình diễn sau sẽ giải thích cách lời nhắc có thể giúp chúng tôi về vấn đề này

Cách sử dụng biến do người dùng xác định JavaScript trong HTML

Chúng tôi đang sử dụng jsbin cho các ví dụ mã và ở đây bạn sẽ thấy phần tử p được xác định bởi id output. Ban đầu, biến myPet được đặt thành

var myPet = "Tobey";
var nameLength = myPet.length;

document.getElementById('output').innerHTML = 
  myPet + " is a " + nameLength + " letter name!";

0 và dòng đơn giản sau đó được thực thi trong trang web.

var myPet = "Tobey";
var nameLength = myPet.length;

document.getElementById('output').innerHTML = 
  myPet + " is a " + nameLength + " letter name!";

1 tìm thấy

var myPet = "Tobey";
var nameLength = myPet.length;

document.getElementById('output').innerHTML = 
  myPet + " is a " + nameLength + " letter name!";

2 ưa thích và sau đó, các biến được chuyển ở định dạng

var myPet = "Tobey";
var nameLength = myPet.length;

document.getElementById('output').innerHTML = 
  myPet + " is a " + nameLength + " letter name!";

3 để các biến JavaScript có thể được sử dụng trong

var myPet = "Tobey";
var nameLength = myPet.length;

document.getElementById('output').innerHTML = 
  myPet + " is a " + nameLength + " letter name!";

4

Đoạn mã




  
  Test

var myPet = "Tobey";
var nameLength = myPet.length;

document.getElementById('output').innerHTML = 
  myPet + " is a " + nameLength + " letter name!";

đầu ra

Để 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 gõ từ khóa

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?')}`;
}

5 theo sau là tên bạn muốn gọi biến của mình

let myName;
let myAge;

Ở đây chúng tôi đang tạo hai biến có tên là

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?')}`;
}

6 và

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?')}`;
}

7. Hãy thử gõ những dòng này vào bảng điều khiển của trình duyệt web của bạn. Sau đó, hãy thử tạo một (hoặc hai) biến với các lựa chọn tên của riêng bạn

Ghi chú. 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 (

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?')}`;
}

8) — mã của bạn có thể hoạt động chính xác đối với các dòng đơn lẻ, nhưng có thể sẽ không hoạt động khi bạn viết nhiều dòng mã cùng nhau. Cố gắng tập thói quen bao gồm nó

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 chỉ nhập tên của biến, e. g

myName;
myAge;

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

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?')}`;
}

9. Nếu chúng không tồn tại, bạn sẽ nhận được thông báo lỗi — hãy thử nhập

scoobyDoo;

Ghi chú. Đừ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 hoàn toàn không tồn tại — chúng là những thứ rất khác nhau. Trong hộp tương tự mà bạn đã thấy ở trên, không tồn tại 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ó

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

let myName;
let myAge;

0), theo sau là giá trị bạn muốn cung cấp cho nó. Ví dụ

myName = 'Chris';
myAge = 37;

Bây giờ hãy thử quay lại bảng điều khiển và nhập những dòng này. Bạn sẽ thấy giá trị mà bạn đã gán cho biến được trả về trong bảng điều khiển để xác nhận giá trị đó, trong từng 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 các giá trị này

myName;
myAge;

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

let myDog = 'Rover';

Đây có lẽ là điều bạn sẽ làm hầu hết thời gian, vì nó nhanh hơn thực hiện hai thao tác trên hai dòng riêng biệt

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

let myName;
let myAge;

1

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}`;
}

0

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

let myName;
let myAge;

1 khó hiểu và dễ mắc lỗi. Vì vậy,

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?')}`;
}

5 đã được tạo trong các phiên bản JavaScript hiện đại, một từ khóa mới để tạo các biến hoạt động hơi khác với

let myName;
let myAge;

1, khắc phục sự cố của nó trong quá trình

Một vài sự khác biệt đơn giản được giải thích dưới đây. Bây giờ chúng ta sẽ không đi sâu vào tất cả sự khác biệt, nhưng bạn sẽ bắt đầu khám phá ra 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 ngay bây giờ, vui lòng xem 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 nhiều 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 ____15_______1 sau khi bạn khởi tạo nó và nó vẫn hoạt động. Ví dụ

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}`;
}

1

Ghi chú. Điều này sẽ không hoạt động khi nhập các dòng riêng lẻ vào bảng điều khiển JavaScript, chỉ khi chạy nhiều dòng JavaScript trong tài liệu web

Điều này hoạt động vì cẩu - đọc để biết thêm chi tiết về chủ đề này

Nâng không còn hoạt động với

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?')}`;
}

5. Nếu chúng ta thay đổi

let myName;
let myAge;

1 thành

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?')}`;
}

5 trong ví dụ trên, nó sẽ bị lỗi. Đây là một điều tốt — khai báo một biến sau khi bạn khởi tạo nó dẫn đến mã khó hiểu, khó hiểu hơn

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

let myName;
let myAge;

1, bạn có thể khai báo cùng một biến bao nhiêu lần tùy thích, nhưng với

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?')}`;
}

5 thì bạn không thể. Sau đây sẽ làm việ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}`;
}

2

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

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}`;
}

3

Bạn sẽ phải làm điều này thay vì

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}`;
}

4

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ì để khai báo lại 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

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?')}`;
}

5 trong mã của mình, thay vì

let myName;
let myAge;

1. Không còn bất kỳ lý do nào để sử dụng

let myName;
let myAge;

1, vì nó đã được hỗ trợ kể từ Internet Explorer 11

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

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?')}`;
}

5 và

myName;
myAge;

5

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}`;
}

5

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 đặt 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}`;
}

6

Bạn có thể gọi một biến gần như bất cứ thứ gì bạn thích, nhưng có những hạn chế. Nói chung, bạn chỉ nên sử dụng các ký tự Latinh (0-9, a-z, A-Z) và ký tự 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 ở đầu tên biến — dấu gạch dưới này được sử dụng trong một số cấu trúc JavaScript nhất định để chỉ những thứ cụ thể, vì vậy có thể gây nhầm lẫn
Không sử dụng số ở đầu biến. Điều này không được phép và gây ra lỗi
Một quy ước an toàn để tuân theo được gọi là , trong đó bạn ghép nhiều từ lại với nhau, sử dụng chữ thường cho toàn bộ từ đầu tiên và sau đó viết hoa các từ tiếp theo. Chúng tôi đã sử dụng tên này cho các tên biến của chúng tôi trong bài viết cho đến nay
Đặt tên biến trực quan để chúng mô tả dữ liệu mà chúng chứa. Đừng chỉ sử dụng các chữ cái/số đơn lẻ hoặc các cụm từ dài

Các biến phân biệt chữ hoa chữ thường — vì vậy,

myName;
myAge;

6 là một biến khác với

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?')}`;
}

7

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 cho JavaScript làm tên biến của mình — theo cách này, chúng tôi muốn nói đến các từ tạo nên cú pháp thực sự của JavaScript. Vì vậy, bạn không thể sử dụng các từ như
```
let myName;
let myAge;
```
1,
```
myName;
myAge;
```
9,
```
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?')}`;
}
```
5 và
```
scoobyDoo;
```
1 làm tên biến. Các trình duyệt nhận ra chúng dưới dạng các mục mã khác nhau và do đó bạn sẽ gặp lỗi

Ghi chú. Bạn có thể tìm thấy một danh sách khá đầy đủ các từ khóa dành riêng để tránh tại

Ví dụ về tên hay

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}`;
}

7

Ví dụ về 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}`;
}

8

Hãy thử tạo thêm một số biến ngay bây giờ, lưu ý đến hướng dẫn ở trê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 sau, 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 cái khác

Bạn có thể lưu số trong biến, số nguyên như 30 (còn gọi là số nguyên) hoặc số thập phân như 2. 456 (còn được gọi là số float hoặc số dấu phẩy động). Bạn không cần 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 cung cấp cho một biến một giá trị số, bạn không bao gồm dấu ngoặc kép

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}`;
}

9

Chuỗi là các đoạn văn bản. Khi bạn cung cấp cho một biến một giá trị chuỗi, bạn cần đặt nó trong dấu nháy đơn hoặc kép;

<button id="button_B">Press mebutton>
<h3 id="heading_B">h3>

0

Boolean là giá trị true/false — chúng có thể có hai giá trị,

scoobyDoo;

2 hoặc

scoobyDoo;

3. Chúng thường được sử dụng để kiểm tra một điều kiện, sau đó mã được chạy khi thích hợp. Vì vậy, ví dụ, một trường hợp đơn giản sẽ là

<button id="button_B">Press mebutton>
<h3 id="heading_B">h3>

1

Trong khi trên thực tế, nó sẽ được sử dụng nhiều hơn như thế này

<button id="button_B">Press mebutton>
<h3 id="heading_B">h3>

2

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

scoobyDoo;

4) để kiểm tra xem 6 có nhỏ hơn 3 không. Như bạn có thể mong đợi, nó trả về

scoobyDoo;

3, vì 6 không nhỏ hơn 3. Bạn sẽ học được nhiều hơn về các toán tử như vậy sau này trong khóa học

Mảng là một đối tượng duy nhất chứa nhiều giá trị được đặt trong 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

<button id="button_B">Press mebutton>
<h3 id="heading_B">h3>

3

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ử những dòng này

<button id="button_B">Press mebutton>
<h3 id="heading_B">h3>

4

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

Bạn sẽ học được nhiều hơn về mảng trong một bài viết trong tương lai

Trong lập trình, một đối tượng là một cấu trúc 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, cân nặng, ngôn ngữ họ nói, cách thức

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

<button id="button_B">Press mebutton>
<h3 id="heading_B">h3>

5

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

<button id="button_B">Press mebutton>
<h3 id="heading_B">h3>

6

Bây giờ chúng ta 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 đối tượng đó trong một mô-đun trong tương lai

JavaScript là một "ngôn ngữ được nhập độ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 mà một biến sẽ chứa (số, chuỗi, mảng, v.v. )

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

<button id="button_B">Press mebutton>
<h3 id="heading_B">h3>

7

Ngay cả khi giá trị trong dấu ngoặc kép chỉ là chữ số, nó vẫn là một chuỗi — không phải số — vì vậy hãy cẩn thận

<button id="button_B">Press mebutton>
<h3 id="heading_B">h3>

8

Hãy thử nhập từng dòng ở trên vào bảng điều khiển của bạn 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 là

scoobyDoo;

6 — toán tử này trả về kiểu dữ liệu của biến bạn nhập sau nó. Lần đầu tiên nó được gọi, nó sẽ trả về

scoobyDoo;

7, vì tại thời điểm đó, biến

scoobyDoo;

8 chứa một chuỗi,

scoobyDoo;

9. Hãy xem và xem những gì nó trả về lần thứ hai bạn gọi nó

Cũng như các biến, bạn có thể khai báo các hằng. Chúng giống như các biến, ngoại trừ việc

bạn phải khởi tạo chúng khi bạn khai báo chúng
bạn không thể gán cho chúng một giá trị mới sau khi bạn đã khởi tạo chúng

Ví dụ: sử dụng

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?')}`;
}

5 bạn có thể khai báo một biến mà không cần khởi tạo nó

<button id="button_B">Press mebutton>
<h3 id="heading_B">h3>

9

Nếu bạn cố gắng thực hiện việc này bằng cách sử dụng

myName;
myAge;

5, bạn sẽ thấy lỗi

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?')}`;
}

0

Tương tự, với

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?')}`;
}

5, bạn có thể khởi tạo một biến, sau đó gán giá trị mới cho nó (điều này còn được gọi là gán lại biến)

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?')}`;
}

1

Nếu bạn cố gắng thực hiện việc này bằng cách sử dụng

myName;
myAge;

5, bạn sẽ thấy lỗi

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?')}`;
}

2

Lưu ý rằng mặc dù một hằng số trong JavaScript phải luôn đặt tên cùng một giá trị, nhưng bạn có thể thay đổi nội dung của giá trị mà nó đặt tên. Đây không phải là sự phân 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

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?')}`;
}

3

Bạn có thể cập nhật, thêm hoặc bớt các thuộc tính của một đối tượng được khai báo bằng cách sử dụng

myName;
myAge;

5, bởi vì mặc dù nội dung của đối tượng đã thay đổi nhưng hằng số vẫn trỏ đến cùng một đối tượng

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?')}`;
}

4

Nếu bạn không thể làm được nhiều việc với

myName;
myAge;

5 như bạn có thể làm với

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?')}`;
}

5, tại sao bạn lại thích sử dụng nó hơn là

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?')}`;
}

5? . Nếu bạn sử dụng

myName;
myAge;

5 để đặt tên cho một giá trị, nó sẽ cho bất kỳ ai đang xem mã của bạn biết rằng tên này sẽ không bao giờ được gán cho một giá trị khác. Bất cứ khi nào họ nhìn thấy cái tên này, họ sẽ biết nó ám chỉ điều gì

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

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?')}`;
}

5 và thời điểm sử dụng

myName;
myAge;

5

Sử dụng

myName;
myAge;

5 khi bạn có thể và sử dụng

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?')}`;
}

5 khi bạn phải

Đ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 nó và không cần gán lại nó sau này, hãy biến nó thành một hằng số

Bạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . biến

Đến bây giờ, bạn đã biết một lượng vừa phải về các biến JavaScript và cách tạo chúng. Trong bài viết tiếp theo, chúng ta sẽ tập trung vào các con số một cách chi tiết hơn, xem xét cách làm toán cơ bản trong JavaScript

Làm cách nào để truy cập biến JavaScript trong HTML?

Trong JavaScript, các biến có thể được truy cập từ một tệp khác bằng cách sử dụng các thẻ . Thẻ script chủ yếu được sử dụng khi chúng ta muốn truy cập biến của tệp JavaScript trong tệp HTML.

Ví dụ về biến trong JavaScript là gì?

Trong JavaScript, chúng ta sử dụng từ khóa var hoặc let để khai báo biến. Ví dụ: var x;

Biến trong HTML là gì?

: The Variable element. The HTML element đại diện cho tên của một biến trong biểu thức toán học hoặc ngữ cảnh lập trình .

Làm cách nào để sử dụng biến trong HTML?

Sử dụng thẻ . Thẻ HTML

programming javascript

Biến JavaScript trong HTML là gì?

Cách sử dụng biến do người dùng xác định JavaScript trong HTML

Làm cách nào để truy cập biến JavaScript trong HTML?

Ví dụ về biến trong JavaScript là gì?

Biến trong HTML là gì?

Làm cách nào để sử dụng biến trong HTML?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội