Câu lệnh if có thể được sử dụng trong HTML không?

Con người (và các loài động vật khác) luôn đưa ra các quyết định có ảnh hưởng đến cuộc sống của chúng, từ nhỏ ("tôi nên ăn một hay hai cái bánh quy?") cho đến lớn ("tôi nên ở lại quê hương và làm việc trong trang trại của cha tôi, hay

Câu lệnh có điều kiện cho phép chúng ta trình bày việc ra quyết định như vậy trong JavaScript, từ lựa chọn phải thực hiện (ví dụ: "một hoặc hai cái bánh quy"), đến kết quả của những lựa chọn đó (có lẽ kết quả của việc "ăn một cái bánh quy" có thể là . )

Cho đến nay, hãy xem loại câu lệnh điều kiện phổ biến nhất mà bạn sẽ sử dụng trong JavaScript — câu lệnh

if (condition) /* code to run if condition is true */
else /* run some other code instead */

Cú pháp

if (condition) /* code to run if condition is true */
else /* run some other code instead */

________số 8_______

Ở đây chúng tôi đã có

1. Từ khóa

   let shoppingDone = false;
   let childsAllowance;
   
   if (shoppingDone === true) {
     childsAllowance = 10;
   } else {
     childsAllowance = 5;
   }
   

   0 theo sau bởi một số dấu ngoặc đơn
2. Một điều kiện để kiểm tra, được đặt bên trong dấu ngoặc đơn (thường là "giá trị này có lớn hơn giá trị kia không?" hoặc "giá trị này có tồn tại không?"). Điều kiện sử dụng điều kiện mà chúng ta đã thảo luận trong mô-đun trước và trả về

   let shoppingDone = false;
   let childsAllowance;
   
   if (shoppingDone === true) {
     childsAllowance = 10;
   } else {
     childsAllowance = 5;
   }
   

   1 hoặc

   let shoppingDone = false;
   let childsAllowance;
   
   if (shoppingDone === true) {
     childsAllowance = 10;
   } else {
     childsAllowance = 5;
   }
   

   2
3. Một tập hợp các dấu ngoặc nhọn, bên trong chúng tôi có một số mã — đây có thể là bất kỳ mã nào chúng tôi thích và nó chỉ chạy nếu điều kiện trả về

   let shoppingDone = false;
   let childsAllowance;
   
   if (shoppingDone === true) {
     childsAllowance = 10;
   } else {
     childsAllowance = 5;
   }
   

   1
4. Từ khóa

   let shoppingDone = false;
   let childsAllowance;
   
   if (shoppingDone === true) {
     childsAllowance = 10;
   } else {
     childsAllowance = 5;
   }
   

   4
5. Một bộ dấu ngoặc nhọn khác, bên trong chúng ta có thêm một số mã — đây có thể là bất kỳ mã nào chúng ta thích và nó chỉ chạy nếu điều kiện không phải là

   let shoppingDone = false;
   let childsAllowance;
   
   if (shoppingDone === true) {
     childsAllowance = 10;
   } else {
     childsAllowance = 5;
   }
   

   1 — hay nói cách khác, điều kiện là

   let shoppingDone = false;
   let childsAllowance;
   
   if (shoppingDone === true) {
     childsAllowance = 10;
   } else {
     childsAllowance = 5;
   }
   

   2

Mã này khá dễ đọc với con người — nó nói rằng "nếu điều kiện trả về

let shoppingDone = false;
let childsAllowance;

if (shoppingDone === true) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

Bạn nên lưu ý rằng bạn không cần phải bao gồm

let shoppingDone = false;
let childsAllowance;

if (shoppingDone === true) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

if (condition) {
  /* code to run if condition is true */
}

/* run some other code */

Tuy nhiên, bạn cần phải cẩn thận ở đây — trong trường hợp này, khối mã thứ hai không được kiểm soát bởi câu lệnh điều kiện, vì vậy nó luôn chạy, bất kể điều kiện trả về

let shoppingDone = false;
let childsAllowance;

if (shoppingDone === true) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

let shoppingDone = false;
let childsAllowance;

if (shoppingDone === true) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

Như một điểm cuối cùng, trong khi không được khuyến nghị, đôi khi bạn có thể thấy các câu lệnh

if (condition) /* code to run if condition is true */
else /* run some other code instead */

if (condition) /* code to run if condition is true */
else /* run some other code instead */

Cú pháp này hoàn toàn hợp lệ, nhưng sẽ dễ hiểu mã hơn nhiều nếu bạn sử dụng dấu ngoặc nhọn để phân định các khối mã và sử dụng nhiều dòng và thụt đầu dòng

Để hiểu cú pháp này tốt hơn, hãy xem xét một ví dụ thực tế. Hãy tưởng tượng một đứa trẻ được cha hoặc mẹ nhờ giúp đỡ làm việc nhà. Cha mẹ có thể nói "Này con yêu. Nếu bạn giúp tôi bằng cách đi mua sắm, tôi sẽ cho bạn thêm một số tiền tiêu vặt để bạn có thể mua được món đồ chơi mà bạn muốn. " Trong JavaScript, chúng tôi có thể đại diện cho điều này như vậy

let shoppingDone = false;
let childsAllowance;

if (shoppingDone === true) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

Mã này như được hiển thị luôn dẫn đến biến

<label for="weather">Select the weather type today: label>
<select id="weather">
  <option value="">--Make a choice--option>
  <option value="sunny">Sunnyoption>
  <option value="rainy">Rainyoption>
  <option value="snowing">Snowingoption>
  <option value="overcast">Overcastoption>
select>

<p>p>

let shoppingDone = false;
let childsAllowance;

if (shoppingDone === true) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

<label for="weather">Select the weather type today: label>
<select id="weather">
  <option value="">--Make a choice--option>
  <option value="sunny">Sunnyoption>
  <option value="rainy">Rainyoption>
  <option value="snowing">Snowingoption>
  <option value="overcast">Overcastoption>
select>

<p>p>

let shoppingDone = false;
let childsAllowance;

if (shoppingDone === true) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

Ghi chú. Bạn có thể xem phiên bản đầy đủ hơn của ví dụ này trên GitHub (cũng có thể xem nó đang chạy trực tiếp. )

Ví dụ trước cung cấp cho chúng ta hai lựa chọn hoặc kết quả - nhưng nếu chúng ta muốn nhiều hơn hai thì sao?

Có một cách để xâu chuỗi các lựa chọn/kết quả bổ sung vào

if (condition) /* code to run if condition is true */
else /* run some other code instead */

<label for="weather">Select the weather type today: label>
<select id="weather">
  <option value="">--Make a choice--option>
  <option value="sunny">Sunnyoption>
  <option value="rainy">Rainyoption>
  <option value="snowing">Snowingoption>
  <option value="overcast">Overcastoption>
select>

<p>p>

<label for="weather">Select the weather type today: label>
<select id="weather">
  <option value="">--Make a choice--option>
  <option value="sunny">Sunnyoption>
  <option value="rainy">Rainyoption>
  <option value="snowing">Snowingoption>
  <option value="overcast">Overcastoption>
select>

<p>p>

<label for="weather">Select the weather type today: label>
<select id="weather">
  <option value="">--Make a choice--option>
  <option value="sunny">Sunnyoption>
  <option value="rainy">Rainyoption>
  <option value="snowing">Snowingoption>
  <option value="overcast">Overcastoption>
select>

<p>p>

<label for="weather">Select the weather type today: label>
<select id="weather">
  <option value="">--Make a choice--option>
  <option value="sunny">Sunnyoption>
  <option value="rainy">Rainyoption>
  <option value="snowing">Snowingoption>
  <option value="overcast">Overcastoption>
select>

<p>p>

const select = document.querySelector('select');
const para = document.querySelector('p');

select.addEventListener('change', setWeather);

function setWeather() {
  const choice = select.value;

  if (choice === 'sunny') {
    para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
  } else if (choice === 'rainy') {
    para.textContent = 'Rain is falling outside; take a rain coat and an umbrella, and don\'t stay out for too long.';
  } else if (choice === 'snowing') {
    para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
  } else if (choice === 'overcast') {
    para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
  } else {
    para.textContent = '';
  }
}

1. Ở đây chúng ta có một phần tử HTML

   const select = document.querySelector('select');
   const para = document.querySelector('p');
   
   select.addEventListener('change', setWeather);
   
   function setWeather() {
     const choice = select.value;
   
     if (choice === 'sunny') {
       para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
     } else if (choice === 'rainy') {
       para.textContent = 'Rain is falling outside; take a rain coat and an umbrella, and don\'t stay out for too long.';
     } else if (choice === 'snowing') {
       para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
     } else if (choice === 'overcast') {
       para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
     } else {
       para.textContent = '';
     }
   }
   

   0 cho phép chúng ta đưa ra các lựa chọn thời tiết khác nhau và một đoạn văn đơn giản
2. Trong JavaScript, chúng tôi đang lưu trữ một tham chiếu đến cả hai phần tử

   const select = document.querySelector('select');
   const para = document.querySelector('p');
   
   select.addEventListener('change', setWeather);
   
   function setWeather() {
     const choice = select.value;
   
     if (choice === 'sunny') {
       para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
     } else if (choice === 'rainy') {
       para.textContent = 'Rain is falling outside; take a rain coat and an umbrella, and don\'t stay out for too long.';
     } else if (choice === 'snowing') {
       para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
     } else if (choice === 'overcast') {
       para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
     } else {
       para.textContent = '';
     }
   }
   

   0 và

   const select = document.querySelector('select');
   const para = document.querySelector('p');
   
   select.addEventListener('change', setWeather);
   
   function setWeather() {
     const choice = select.value;
   
     if (choice === 'sunny') {
       para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
     } else if (choice === 'rainy') {
       para.textContent = 'Rain is falling outside; take a rain coat and an umbrella, and don\'t stay out for too long.';
     } else if (choice === 'snowing') {
       para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
     } else if (choice === 'overcast') {
       para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
     } else {
       para.textContent = '';
     }
   }
   

   2, đồng thời thêm một trình lắng nghe sự kiện vào phần tử

   const select = document.querySelector('select');
   const para = document.querySelector('p');
   
   select.addEventListener('change', setWeather);
   
   function setWeather() {
     const choice = select.value;
   
     if (choice === 'sunny') {
       para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
     } else if (choice === 'rainy') {
       para.textContent = 'Rain is falling outside; take a rain coat and an umbrella, and don\'t stay out for too long.';
     } else if (choice === 'snowing') {
       para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
     } else if (choice === 'overcast') {
       para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
     } else {
       para.textContent = '';
     }
   }
   

   0 để khi giá trị của nó thay đổi, hàm

   const select = document.querySelector('select');
   const para = document.querySelector('p');
   
   select.addEventListener('change', setWeather);
   
   function setWeather() {
     const choice = select.value;
   
     if (choice === 'sunny') {
       para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
     } else if (choice === 'rainy') {
       para.textContent = 'Rain is falling outside; take a rain coat and an umbrella, and don\'t stay out for too long.';
     } else if (choice === 'snowing') {
       para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
     } else if (choice === 'overcast') {
       para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
     } else {
       para.textContent = '';
     }
   }
   

   4 sẽ được chạy
3. Khi chức năng này được chạy, trước tiên chúng ta đặt một biến có tên là

   const select = document.querySelector('select');
   const para = document.querySelector('p');
   
   select.addEventListener('change', setWeather);
   
   function setWeather() {
     const choice = select.value;
   
     if (choice === 'sunny') {
       para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
     } else if (choice === 'rainy') {
       para.textContent = 'Rain is falling outside; take a rain coat and an umbrella, and don\'t stay out for too long.';
     } else if (choice === 'snowing') {
       para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
     } else if (choice === 'overcast') {
       para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
     } else {
       para.textContent = '';
     }
   }
   

   5 thành giá trị hiện tại được chọn trong phần tử

   const select = document.querySelector('select');
   const para = document.querySelector('p');
   
   select.addEventListener('change', setWeather);
   
   function setWeather() {
     const choice = select.value;
   
     if (choice === 'sunny') {
       para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
     } else if (choice === 'rainy') {
       para.textContent = 'Rain is falling outside; take a rain coat and an umbrella, and don\'t stay out for too long.';
     } else if (choice === 'snowing') {
       para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
     } else if (choice === 'overcast') {
       para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
     } else {
       para.textContent = '';
     }
   }
   

   0. Sau đó, chúng tôi sử dụng một câu lệnh có điều kiện để hiển thị văn bản khác nhau bên trong đoạn văn tùy thuộc vào giá trị của

   const select = document.querySelector('select');
   const para = document.querySelector('p');
   
   select.addEventListener('change', setWeather);
   
   function setWeather() {
     const choice = select.value;
   
     if (choice === 'sunny') {
       para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
     } else if (choice === 'rainy') {
       para.textContent = 'Rain is falling outside; take a rain coat and an umbrella, and don\'t stay out for too long.';
     } else if (choice === 'snowing') {
       para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
     } else if (choice === 'overcast') {
       para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
     } else {
       para.textContent = '';
     }
   }
   

   5 là gì. Lưu ý cách tất cả các điều kiện được kiểm tra trong khối

   const select = document.querySelector('select');
   const para = document.querySelector('p');
   
   select.addEventListener('change', setWeather);
   
   function setWeather() {
     const choice = select.value;
   
     if (choice === 'sunny') {
       para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
     } else if (choice === 'rainy') {
       para.textContent = 'Rain is falling outside; take a rain coat and an umbrella, and don\'t stay out for too long.';
     } else if (choice === 'snowing') {
       para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
     } else if (choice === 'overcast') {
       para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
     } else {
       para.textContent = '';
     }
   }
   

   8, ngoại trừ điều kiện đầu tiên, được kiểm tra trong khối

   <label for="weather">Select the weather type today: label>
   <select id="weather">
     <option value="">--Make a choice--option>
     <option value="sunny">Sunnyoption>
     <option value="rainy">Rainyoption>
     <option value="snowing">Snowingoption>
     <option value="overcast">Overcastoption>
   select>
   
   <p>p>
   

   8
4. Lựa chọn cuối cùng, bên trong khối

   <label for="weather">Select the weather type today: label>
   <select id="weather">
     <option value="">--Make a choice--option>
     <option value="sunny">Sunnyoption>
     <option value="rainy">Rainyoption>
     <option value="snowing">Snowingoption>
     <option value="overcast">Overcastoption>
   select>
   
   <p>p>
   

   9, về cơ bản là một lựa chọn "cuối cùng" — mã bên trong nó sẽ được chạy nếu không có điều kiện nào là

   let shoppingDone = false;
   let childsAllowance;
   
   if (shoppingDone === true) {
     childsAllowance = 10;
   } else {
     childsAllowance = 5;
   }
   

   1. Trong trường hợp này, nó phục vụ để làm trống văn bản ra khỏi đoạn nếu không có gì được chọn, ví dụ: nếu người dùng quyết định chọn lại tùy chọn giữ chỗ "--Hãy lựa chọn--" được hiển thị ở đầu

Ghi chú. Bạn cũng có thể tìm thấy ví dụ này trên GitHub (cũng có thể xem nó chạy trực tiếp trên đó. )

Các toán tử so sánh được sử dụng để kiểm tra các điều kiện bên trong câu điều kiện của chúng ta. Lần đầu tiên chúng tôi xem xét các toán tử so sánh trong bài viết của chúng tôi. lựa chọn của chúng tôi là

• let cheese = 'Cheddar';
  
  if (cheese) {
    console.log('Yay! Cheese available for making cheese on toast.');
  } else {
    console.log('No cheese on toast for you today.');
  }
  

  2 và

  let cheese = 'Cheddar';
  
  if (cheese) {
    console.log('Yay! Cheese available for making cheese on toast.');
  } else {
    console.log('No cheese on toast for you today.');
  }
  

  3 — kiểm tra xem một giá trị có giống hoặc không giống với giá trị khác không

• let cheese = 'Cheddar';
  
  if (cheese) {
    console.log('Yay! Cheese available for making cheese on toast.');
  } else {
    console.log('No cheese on toast for you today.');
  }
  

  4 và

  let cheese = 'Cheddar';
  
  if (cheese) {
    console.log('Yay! Cheese available for making cheese on toast.');
  } else {
    console.log('No cheese on toast for you today.');
  }
  

  5 — kiểm tra xem một giá trị có nhỏ hơn hoặc lớn hơn giá trị khác không

• let cheese = 'Cheddar';
  
  if (cheese) {
    console.log('Yay! Cheese available for making cheese on toast.');
  } else {
    console.log('No cheese on toast for you today.');
  }
  

  6 và

  let cheese = 'Cheddar';
  
  if (cheese) {
    console.log('Yay! Cheese available for making cheese on toast.');
  } else {
    console.log('No cheese on toast for you today.');
  }
  

  7 — kiểm tra xem một giá trị có nhỏ hơn hoặc bằng hoặc lớn hơn hoặc bằng giá trị khác không

Ghi chú. Xem lại tài liệu ở liên kết trước nếu bạn muốn làm mới ký ức của mình về những điều này

Chúng tôi muốn đặc biệt đề cập đến việc kiểm tra các giá trị boolean (

let shoppingDone = false;
let childsAllowance;

if (shoppingDone === true) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

let shoppingDone = false;
let childsAllowance;

if (shoppingDone === true) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

let shoppingDone = false;
let childsAllowance;

if (shoppingDone === true) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

let shoppingDone = false;
let childsAllowance;

// We don't need to explicitly specify 'shoppingDone === true'
if (shoppingDone) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

let shoppingDone = false;
let childsAllowance;

// We don't need to explicitly specify 'shoppingDone === true'
if (shoppingDone) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

let shoppingDone = false;
let childsAllowance;

// We don't need to explicitly specify 'shoppingDone === true'
if (shoppingDone) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

let shoppingDone = false;
let childsAllowance;

// We don't need to explicitly specify 'shoppingDone === true'
if (shoppingDone) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

let shoppingDone = false;
let childsAllowance;

// We don't need to explicitly specify 'shoppingDone === true'
if (shoppingDone) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

let shoppingDone = false;
let childsAllowance;

if (shoppingDone === true) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

let shoppingDone = false;
let childsAllowance;

if (shoppingDone === true) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

let cheese = 'Cheddar';

if (cheese) {
  console.log('Yay! Cheese available for making cheese on toast.');
} else {
  console.log('No cheese on toast for you today.');
}

Và, quay trở lại ví dụ trước của chúng ta về việc đứa trẻ làm việc nhà cho cha mẹ chúng, bạn có thể viết nó như thế này

let shoppingDone = false;
let childsAllowance;

// We don't need to explicitly specify 'shoppingDone === true'
if (shoppingDone) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

Hoàn toàn ổn khi đặt một câu lệnh

if (condition) /* code to run if condition is true */
else /* run some other code instead */

if (choice === 'sunny') {
  if (temperature < 86) {
    para.textContent = `It is ${temperature} degrees outside — nice and sunny. Let's go out to the beach, or the park, and get an ice cream.`;
  } else if (temperature >= 86) {
    para.textContent = `It is ${temperature} degrees outside — REALLY HOT! If you want to go outside, make sure to put some sunscreen on.`;
  }
}

Mặc dù tất cả mã đều hoạt động cùng nhau, nhưng mỗi câu lệnh

if (condition) /* code to run if condition is true */
else /* run some other code instead */

Nếu bạn muốn kiểm tra nhiều điều kiện mà không cần viết các câu lệnh

if (condition) /* code to run if condition is true */
else /* run some other code instead */

• if (choice === 'sunny') {
    if (temperature < 86) {
      para.textContent = `It is ${temperature} degrees outside — nice and sunny. Let's go out to the beach, or the park, and get an ice cream.`;
    } else if (temperature >= 86) {
      para.textContent = `It is ${temperature} degrees outside — REALLY HOT! If you want to go outside, make sure to put some sunscreen on.`;
    }
  }
  

  1 — VÀ;

• if (choice === 'sunny') {
    if (temperature < 86) {
      para.textContent = `It is ${temperature} degrees outside — nice and sunny. Let's go out to the beach, or the park, and get an ice cream.`;
    } else if (temperature >= 86) {
      para.textContent = `It is ${temperature} degrees outside — REALLY HOT! If you want to go outside, make sure to put some sunscreen on.`;
    }
  }
  

  4 — HOẶC;

Để cung cấp cho bạn một ví dụ AND, đoạn mã ví dụ trước có thể được viết lại thành đoạn này

if (choice === 'sunny' && temperature < 86) {
  para.textContent = `It is ${temperature} degrees outside — nice and sunny. Let's go out to the beach, or the park, and get an ice cream.`;
} else if (choice === 'sunny' && temperature >= 86) {
  para.textContent = `It is ${temperature} degrees outside — REALLY HOT! If you want to go outside, make sure to put some sunscreen on.`;
}

Vì vậy, ví dụ, khối mã đầu tiên sẽ chỉ được chạy nếu

if (choice === 'sunny') {
  if (temperature < 86) {
    para.textContent = `It is ${temperature} degrees outside — nice and sunny. Let's go out to the beach, or the park, and get an ice cream.`;
  } else if (temperature >= 86) {
    para.textContent = `It is ${temperature} degrees outside — REALLY HOT! If you want to go outside, make sure to put some sunscreen on.`;
  }
}

if (choice === 'sunny') {
  if (temperature < 86) {
    para.textContent = `It is ${temperature} degrees outside — nice and sunny. Let's go out to the beach, or the park, and get an ice cream.`;
  } else if (temperature >= 86) {
    para.textContent = `It is ${temperature} degrees outside — REALLY HOT! If you want to go outside, make sure to put some sunscreen on.`;
  }
}

let shoppingDone = false;
let childsAllowance;

if (shoppingDone === true) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

Hãy xem một ví dụ OR nhanh

if (condition) {
  /* code to run if condition is true */
}

/* run some other code */

Loại toán tử logic cuối cùng, NOT, được thể hiện bởi toán tử

if (choice === 'sunny' && temperature < 86) {
  para.textContent = `It is ${temperature} degrees outside — nice and sunny. Let's go out to the beach, or the park, and get an ice cream.`;
} else if (choice === 'sunny' && temperature >= 86) {
  para.textContent = `It is ${temperature} degrees outside — REALLY HOT! If you want to go outside, make sure to put some sunscreen on.`;
}

if (condition) {
  /* code to run if condition is true */
}

/* run some other code */

Trong đoạn mã này, nếu câu lệnh OR trả về

let shoppingDone = false;
let childsAllowance;

if (shoppingDone === true) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

let shoppingDone = false;
let childsAllowance;

if (shoppingDone === true) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

Bạn có thể kết hợp bao nhiêu câu lệnh logic với nhau tùy ý, trong bất kỳ cấu trúc nào. Ví dụ sau chỉ thực thi mã bên trong nếu cả hai câu lệnh OR đều trả về true, nghĩa là toàn bộ câu lệnh AND sẽ trả về true

if (condition) {
  /* code to run if condition is true */
}

/* run some other code */

Một lỗi phổ biến khi sử dụng toán tử logic OR trong các câu lệnh có điều kiện là cố gắng nêu biến có giá trị mà bạn đang kiểm tra một lần, sau đó đưa ra danh sách các giá trị mà biến đó có thể trả về true, được phân tách bằng toán tử

if (choice === 'sunny') {
  if (temperature < 86) {
    para.textContent = `It is ${temperature} degrees outside — nice and sunny. Let's go out to the beach, or the park, and get an ice cream.`;
  } else if (temperature >= 86) {
    para.textContent = `It is ${temperature} degrees outside — REALLY HOT! If you want to go outside, make sure to put some sunscreen on.`;
  }
}

if (condition) {
  /* code to run if condition is true */
}

/* run some other code */

Trong trường hợp này, điều kiện bên trong

if (choice === 'sunny' && temperature < 86) {
  para.textContent = `It is ${temperature} degrees outside — nice and sunny. Let's go out to the beach, or the park, and get an ice cream.`;
} else if (choice === 'sunny' && temperature >= 86) {
  para.textContent = `It is ${temperature} degrees outside — REALLY HOT! If you want to go outside, make sure to put some sunscreen on.`;
}

let shoppingDone = false;
let childsAllowance;

if (shoppingDone === true) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

if (condition) {
  /* code to run if condition is true */
}

/* run some other code */

if (condition) /* code to run if condition is true */
else /* run some other code instead */

Trong trường hợp như vậy, các câu lệnh

if (choice === 'sunny' && temperature < 86) {
  para.textContent = `It is ${temperature} degrees outside — nice and sunny. Let's go out to the beach, or the park, and get an ice cream.`;
} else if (choice === 'sunny' && temperature >= 86) {
  para.textContent = `It is ${temperature} degrees outside — REALLY HOT! If you want to go outside, make sure to put some sunscreen on.`;
}

if (condition) {
  /* code to run if condition is true */
}

/* run some other code */

Ở đây chúng tôi đã có

1. Từ khóa

   if (choice === 'sunny' && temperature < 86) {
     para.textContent = `It is ${temperature} degrees outside — nice and sunny. Let's go out to the beach, or the park, and get an ice cream.`;
   } else if (choice === 'sunny' && temperature >= 86) {
     para.textContent = `It is ${temperature} degrees outside — REALLY HOT! If you want to go outside, make sure to put some sunscreen on.`;
   }
   

   7, theo sau là một bộ dấu ngoặc đơn
2. Một biểu thức hoặc giá trị bên trong dấu ngoặc đơn
3. Từ khóa

   if (choice === 'sunny' && temperature < 86) {
     para.textContent = `It is ${temperature} degrees outside — nice and sunny. Let's go out to the beach, or the park, and get an ice cream.`;
   } else if (choice === 'sunny' && temperature >= 86) {
     para.textContent = `It is ${temperature} degrees outside — REALLY HOT! If you want to go outside, make sure to put some sunscreen on.`;
   }
   

   9, theo sau là lựa chọn mà biểu thức/giá trị có thể là, theo sau là dấu hai chấm
4. Một số mã để chạy nếu lựa chọn phù hợp với biểu thức
5. Câu lệnh

   if (condition) {
     /* code to run if condition is true */
   }
   
   /* run some other code */
   

   00, theo sau là dấu chấm phẩy. Nếu lựa chọn trước đó khớp với biểu thức/giá trị, trình duyệt sẽ dừng thực thi khối mã tại đây và chuyển sang bất kỳ mã nào xuất hiện bên dưới câu lệnh chuyển đổi
6. Nhiều trường hợp khác (đạn 3–5) tùy thích
7. Từ khóa

   if (condition) {
     /* code to run if condition is true */
   }
   
   /* run some other code */
   

   01, theo sau chính xác là mẫu mã giống như một trong các trường hợp (đạn 3–5), ngoại trừ việc

   if (condition) {
     /* code to run if condition is true */
   }
   
   /* run some other code */
   

   01 không có lựa chọn sau nó và bạn không cần câu lệnh

   if (condition) {
     /* code to run if condition is true */
   }
   
   /* run some other code */
   

   00 vì không có gì để chạy theo . Đây là tùy chọn mặc định sẽ chạy nếu không có lựa chọn nào phù hợp

Ghi chú. Bạn không cần phải bao gồm phần

if (condition) {
  /* code to run if condition is true */
}

/* run some other code */

Hãy xem một ví dụ thực tế — chúng ta sẽ viết lại ứng dụng dự báo thời tiết để sử dụng câu lệnh switch thay thế

<label for="weather">Select the weather type today: label>
<select id="weather">
  <option value="">--Make a choice--option>
  <option value="sunny">Sunnyoption>
  <option value="rainy">Rainyoption>
  <option value="snowing">Snowingoption>
  <option value="overcast">Overcastoption>
select>

<p>p>

if (condition) {
  /* code to run if condition is true */
}

/* run some other code */

Ghi chú. Bạn cũng có thể tìm thấy ví dụ này trên GitHub (cũng có thể xem nó chạy trực tiếp trên đó. )

Có một chút cú pháp cuối cùng mà chúng tôi muốn giới thiệu với bạn trước khi chúng tôi giúp bạn chơi với một số ví dụ. Toán tử bậc ba hoặc toán tử điều kiện là một đoạn cú pháp nhỏ kiểm tra một điều kiện và trả về một giá trị/biểu thức nếu nó là

let shoppingDone = false;
let childsAllowance;

if (shoppingDone === true) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

let shoppingDone = false;
let childsAllowance;

if (shoppingDone === true) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

if (condition) {
  /* code to run if condition is true */
}

/* run some other code */

Vì vậy, hãy xem xét một ví dụ đơn giản

if (condition) {
  /* code to run if condition is true */
}

/* run some other code */

Ở đây chúng tôi có một biến có tên là

if (condition) {
  /* code to run if condition is true */
}

/* run some other code */

let shoppingDone = false;
let childsAllowance;

if (shoppingDone === true) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

Toán tử bậc ba không chỉ dùng để thiết lập giá trị biến; . Ví dụ trực tiếp sau đây hiển thị một bộ chọn chủ đề đơn giản trong đó kiểu dáng cho trang web được áp dụng bằng toán tử bậc ba

if (condition) /* code to run if condition is true */
else /* run some other code instead */

if (condition) /* code to run if condition is true */
else /* run some other code instead */

Ở đây chúng ta có phần tử

const select = document.querySelector('select');
const para = document.querySelector('p');

select.addEventListener('change', setWeather);

function setWeather() {
  const choice = select.value;

  if (choice === 'sunny') {
    para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
  } else if (choice === 'rainy') {
    para.textContent = 'Rain is falling outside; take a rain coat and an umbrella, and don\'t stay out for too long.';
  } else if (choice === 'snowing') {
    para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
  } else if (choice === 'overcast') {
    para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
  } else {
    para.textContent = '';
  }
}

if (condition) {
  /* code to run if condition is true */
}

/* run some other code */

if (condition) {
  /* code to run if condition is true */
}

/* run some other code */

Cuối cùng, chúng ta cũng có một trình lắng nghe sự kiện onchange dùng để chạy một hàm chứa toán tử bậc ba. Nó bắt đầu với một điều kiện thử nghiệm —

if (condition) {
  /* code to run if condition is true */
}

/* run some other code */

let shoppingDone = false;
let childsAllowance;

if (shoppingDone === true) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

if (condition) {
  /* code to run if condition is true */
}

/* run some other code */

let shoppingDone = false;
let childsAllowance;

if (shoppingDone === true) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

if (condition) {
  /* code to run if condition is true */
}

/* run some other code */

Ghi chú. Bạn cũng có thể tìm thấy ví dụ này trên GitHub (cũng có thể xem nó chạy trực tiếp trên đó. )

Trong ví dụ này, bạn sẽ giúp chúng tôi hoàn thành một ứng dụng lịch đơn giản. Trong mã bạn đã có

• Phần tử

  const select = document.querySelector('select');
  const para = document.querySelector('p');
  
  select.addEventListener('change', setWeather);
  
  function setWeather() {
    const choice = select.value;
  
    if (choice === 'sunny') {
      para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
    } else if (choice === 'rainy') {
      para.textContent = 'Rain is falling outside; take a rain coat and an umbrella, and don\'t stay out for too long.';
    } else if (choice === 'snowing') {
      para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
    } else if (choice === 'overcast') {
      para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
    } else {
      para.textContent = '';
    }
  }
  

  0 để cho phép người dùng chọn giữa các tháng khác nhau
• Trình xử lý sự kiện

  if (condition) {
    /* code to run if condition is true */
  }
  
  /* run some other code */
  

  21 để phát hiện khi giá trị được chọn trong menu

  const select = document.querySelector('select');
  const para = document.querySelector('p');
  
  select.addEventListener('change', setWeather);
  
  function setWeather() {
    const choice = select.value;
  
    if (choice === 'sunny') {
      para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
    } else if (choice === 'rainy') {
      para.textContent = 'Rain is falling outside; take a rain coat and an umbrella, and don\'t stay out for too long.';
    } else if (choice === 'snowing') {
      para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
    } else if (choice === 'overcast') {
      para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
    } else {
      para.textContent = '';
    }
  }
  

  0 bị thay đổi
• Hàm có tên là

  if (condition) {
    /* code to run if condition is true */
  }
  
  /* run some other code */
  

  23 vẽ lịch và hiển thị tháng chính xác trong phần tử

  if (condition) {
    /* code to run if condition is true */
  }
  
  /* run some other code */
  

  13

Chúng tôi cần bạn viết một câu lệnh có điều kiện bên trong hàm xử lý

if (condition) {
  /* code to run if condition is true */
}

/* run some other code */

if (condition) {
  /* code to run if condition is true */
}

/* run some other code */

1. Nhìn vào tháng đã chọn (được lưu trữ trong biến

   const select = document.querySelector('select');
   const para = document.querySelector('p');
   
   select.addEventListener('change', setWeather);
   
   function setWeather() {
     const choice = select.value;
   
     if (choice === 'sunny') {
       para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
     } else if (choice === 'rainy') {
       para.textContent = 'Rain is falling outside; take a rain coat and an umbrella, and don\'t stay out for too long.';
     } else if (choice === 'snowing') {
       para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
     } else if (choice === 'overcast') {
       para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
     } else {
       para.textContent = '';
     }
   }
   

   5. Đây sẽ là giá trị phần tử

   const select = document.querySelector('select');
   const para = document.querySelector('p');
   
   select.addEventListener('change', setWeather);
   
   function setWeather() {
     const choice = select.value;
   
     if (choice === 'sunny') {
       para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
     } else if (choice === 'rainy') {
       para.textContent = 'Rain is falling outside; take a rain coat and an umbrella, and don\'t stay out for too long.';
     } else if (choice === 'snowing') {
       para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
     } else if (choice === 'overcast') {
       para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
     } else {
       para.textContent = '';
     }
   }
   

   0 sau khi giá trị thay đổi, vì vậy "Tháng Giêng" chẳng hạn. )
2. Đặt một biến có tên là

   if (condition) {
     /* code to run if condition is true */
   }
   
   /* run some other code */
   

   29 bằng với số ngày trong tháng đã chọn. Để làm điều này, bạn sẽ phải tra cứu số ngày trong mỗi tháng trong năm. Bạn có thể bỏ qua năm nhuận cho mục đích của ví dụ này

gợi ý

• Bạn nên sử dụng logic OR để nhóm nhiều tháng lại với nhau thành một điều kiện duy nhất;
• Nghĩ về số ngày phổ biến nhất và sử dụng số ngày đó làm giá trị mặc định

Nếu bạn mắc lỗi, bạn luôn có thể đặt lại ví dụ bằng nút "Đặt lại". Nếu bạn thực sự gặp khó khăn, hãy nhấn "Hiển thị giải pháp" để xem giải pháp

if (condition) /* code to run if condition is true */
else /* run some other code instead */

if (condition) /* code to run if condition is true */
else /* run some other code instead */

if (condition) /* code to run if condition is true */
else /* run some other code instead */

Trong ví dụ này, bạn sẽ lấy ví dụ về toán tử bậc ba mà chúng ta đã thấy trước đó và chuyển đổi toán tử bậc ba thành câu lệnh switch để cho phép chúng ta áp dụng nhiều lựa chọn hơn cho trang web đơn giản. Nhìn vào

const select = document.querySelector('select');
const para = document.querySelector('p');

select.addEventListener('change', setWeather);

function setWeather() {
  const choice = select.value;

  if (choice === 'sunny') {
    para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
  } else if (choice === 'rainy') {
    para.textContent = 'Rain is falling outside; take a rain coat and an umbrella, and don\'t stay out for too long.';
  } else if (choice === 'snowing') {
    para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
  } else if (choice === 'overcast') {
    para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
  } else {
    para.textContent = '';
  }
}

if (condition) {
  /* code to run if condition is true */
}

/* run some other code */

• Nó sẽ chấp nhận biến

  const select = document.querySelector('select');
  const para = document.querySelector('p');
  
  select.addEventListener('change', setWeather);
  
  function setWeather() {
    const choice = select.value;
  
    if (choice === 'sunny') {
      para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
    } else if (choice === 'rainy') {
      para.textContent = 'Rain is falling outside; take a rain coat and an umbrella, and don\'t stay out for too long.';
    } else if (choice === 'snowing') {
      para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
    } else if (choice === 'overcast') {
      para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
    } else {
      para.textContent = '';
    }
  }
  

  5 làm biểu thức đầu vào của nó
• Đối với mỗi trường hợp, lựa chọn phải bằng một trong các

  if (condition) {
    /* code to run if condition is true */
  }
  
  /* run some other code */
  

  33 có thể được chọn, đó là,

  if (condition) {
    /* code to run if condition is true */
  }
  
  /* run some other code */
  

  34,

  if (condition) {
    /* code to run if condition is true */
  }
  
  /* run some other code */
  

  35,

  if (condition) {
    /* code to run if condition is true */
  }
  
  /* run some other code */
  

  36,

  if (condition) {
    /* code to run if condition is true */
  }
  
  /* run some other code */
  

  37 hoặc

  if (condition) {
    /* code to run if condition is true */
  }
  
  /* run some other code */
  

  38
• Đối với mỗi trường hợp, hàm

  if (condition) {
    /* code to run if condition is true */
  }
  
  /* run some other code */
  

  14 sẽ được chạy và được truyền hai giá trị màu, giá trị đầu tiên cho màu nền và giá trị thứ hai cho màu văn bản. Hãy nhớ rằng các giá trị màu là các chuỗi, vì vậy chúng cần được đặt trong dấu ngoặc kép

Nếu bạn mắc lỗi, bạn luôn có thể đặt lại ví dụ bằng nút "Đặt lại". Nếu bạn thực sự gặp khó khăn, hãy nhấn "Hiển thị giải pháp" để xem giải pháp

if (condition) /* code to run if condition is true */
else /* run some other code instead */

if (condition) /* code to run if condition is true */
else /* run some other code instead */

if (condition) /* code to run if condition is true */
else /* run some other code instead */

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? . điều kiện

Và đó là tất cả những gì bạn thực sự cần biết về cấu trúc điều kiện trong JavaScript ngay bây giờ. Nếu có bất cứ điều gì bạn không hiểu, vui lòng đọc lại bài viết hoặc yêu cầu trợ giúp

Có thể sử dụng câu lệnh IF trong CSS không?

Nếu khác trong HTML là gì?

HTML có định dạng có điều kiện không?

Làm cách nào để sử dụng if other trong HTML bằng Python?