- Các loại chú thích và câu lệnh trong JavaScript
- Biến cơ bản trong JavaScript
- Các kiểu biến dữ liệu trong JavaScript
- Cách sử dụng biến và chuỗi trong JavaScript
- Thay đổi nội dung HTML và khả năng hiển thị của JavaScript
- Toán tử trong JavaScript
- Sử dụng hàm trong JavaScript
- Tạo ứng dụng Quiz bằng JavaScript
- Tạo ứng dụng bảng tính bằng JavaScript
- Tìm hiểu về mảng và vòng lặp trong JavaScript
- Sử dụng vòng lặp While trong JavaScript
- Câu lệnh điều kiện IF trong JavaScript
Chào mừng các bạn đến với khóa học JavaScript cơ bản đến nâng cao của Kênh 49. Ở bài học này chúng ta sẽ tìm hiểu về câu lệnh điều kiện If trong JavaScript.
Bây giờ chúng ta sẽ viết ra chương trình để xét xem một người nào đó có quyền bầu cử hay không. Đầu tiên ta sẽ khai báo một Script với ngôn ngữ JavaScript và lưu lại. Sau đó chúng ta thêm một phương thức prompt. Lệnh prompt sẽ tạo ra một câu hỏi cho người dùng nhập vào chương trình.
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Câu lệnh điều kiện - Kênh 49</title>
</head>
<body>
<script type="text/javascript">
prompt("Bạn bao nhiêu tuổi?");
</script>
</body>
</html>Chúng ta cần phải khai báo biến với giá trị bằng với giá trị người dùng nhập vào prompt này. Ta sẽ đặt biến đó là userAge
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Câu lệnh điều kiện - Kênh 49</title>
</head>
<body>
<script type="text/javascript">
var userAge = prompt("Bạn bao nhiêu tuổi?");
</script>
</body>
</html>Cùng lưu lại, và chúng ta sẽ thấy hộp thoại hiện lên hỏi bạn bao nhiêu tuổi. Để xem prompt dùng làm gì ta sẽ sử dụng lệnh document như sau “Bạn vừa báo mình” + userAge + “tuổi”. Trong lệnh vừa rồi mình kết hợp chuỗi và dùng dấu cộng để nối biến.
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Câu lệnh điều kiện - Kênh 49</title>
</head>
<body>
<script type="text/javascript">
var userAge = prompt("Bạn bao nhiêu tuổi?");
document.write("Bạn vừa nhập " + userAge + " tuổi.");
</script>
</body>
</html>Cùng lưu lại và chạy thử nhé nhập số 22. Ta sẽ thấy chương trình xuất hiện ra dòng “Bạn vừa nhập 22 tuổi.” như dự định
Quay lại với yêu cầu chính của chương trình, tạo ra chương trình xem ai có quyền được bầu cử hay không. Ta muốn chương trình chạy sao cho nếu người dùng 18t trở lên, chương trình sẽ trả lời là người có đủ tuổi để đi bầu cử. Ta sẽ dùng lệnh IF. Cấu trúc lệnh IF sẽ như thế này, ta sẽ làm test để kiểm tra, nếu test đó = true thì những gì được viết giữa ngoặc {} sẽ được chạy. Ở đây ta sẽ viết userAge > 18 thì sẽ báo” Bạn có thể đi bầu”. Ta cùng lưu lại và kiểm tra thử
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Câu lệnh điều kiện - Kênh 49</title>
</head>
<body>
<script type="text/javascript">
var userAge = prompt("Bạn bao nhiêu tuổi?");
//document.write("Bạn vừa nhập " + userAge + " tuổi.");
if(userAge > 18)
{
alert("Bạn có thể đi bầu");
}
</script>
</body>
</html>Thử nhập 22 ta sẽ thấy có thông báo “Bạn có thể đi bầu”, thử nhập 17 và bạn sẽ không thấy gì cả. Có một vấn đề mà bạn có thể nhận ra. Trong test ở đây với các giá trị userAge lớn hơn 18 tuổi thì test sẽ là true, và đoạn code trong {} sẽ được chạy. Nhưng nếu người dùng nhập 18 thì sao, 18 vẫn được đi bầu mà. Ta cần sửa lại điều kiện một chút
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Câu lệnh điều kiện - Kênh 49</title>
</head>
<body>
<script type="text/javascript">
var userAge = prompt("Bạn bao nhiêu tuổi?");
//document.write("Bạn vừa nhập " + userAge + " tuổi.");
if(userAge >= 18)
{
alert("Bạn có thể đi bầu");
}
</script>
</body>
</html>Ta đổi dấu > thay bằng >=. Bây giờ ta sẽ nhập thử 18, và sẽ xuất hiện thông báo ” Bạn có thể đi bầu”. Nếu mình muốn thêm các điều kiện khác. Ví dụ If cái này true thì chạy lệnh này ELSE (nếu không) thì chạy lệnh kia “Bạn không đi bầu được”
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Câu lệnh điều kiện - Kênh 49</title>
</head>
<body>
<script type="text/javascript">
var userAge = prompt("Bạn bao nhiêu tuổi?");
//document.write("Bạn vừa nhập " + userAge + " tuổi.");
if(userAge >= 18)
{
alert("Bạn có thể đi bầu");
}
else
{
alert("Bạn không đi bầu được");
}
</script>
</body>
</html>Cùng lưu lại và chạy thử, bạn sẽ thấy trong câu lệnh điều kiện này. Nếu true những lệnh trong {} được chạy, ngược lại ELSE nếu giá trị false thì chạy lệnh trong {} thứ hai.
Tuổi cũng không phải là điều kiện đủ để đi bầu, còn phải là công dân của nước họ nữa. Giờ ta sẽ khai báo thêm một var citizen = true;. Giờ ta sẽ sử dụng một phép so sánh khác If (citizen == true). Bạn nào đã quên toán tử thì mình sẽ nhắc lại. Dấu == sẽ tương đương với bằng khác với dấu = này để gán giá trị. Ta đã gán giá trị citizen bằng true rồi kiểu gì cũng sẽ “Bạn có thể đi bầu” thôi. Ta có thể rút ngắn như này If(citizen), bởi vì biến citizen đã mang giá trị true rồi. Nó là một biến dạng Boolean. Biến boolean chỉ mang hai giá trị true hoặc false, và cũng không cần đặt dấu nhấy khi đặt giá trị là true nhé. Ta cũng có thể phủ định điều kiện với dấu ! để đảo giá trị true thành false. Và chương trình cũng phải xét điều kiện có đủ trên 18 tuổi hay không, ở đâu chúng ta sẽ sử dụng dấu &&. Câu này sẽ thành nếu giá trị của biến citizen là true và giá trị của userAge lớn hơn hoặc bằng 18. Tức là nếu citizen bằng true nhưng tuổi là 17 sẽ không được đi bầu, nếu 18 tuổi trở lên thì được. Đây là một điều kiện kết hợp
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Câu lệnh điều kiện - Kênh 49</title>
</head>
<body>
<script type="text/javascript">
var userAge = prompt("Bạn bao nhiêu tuổi?");
var citizen = true;
//document.write("Bạn vừa nhập " + userAge + " tuổi.");
if(citizen && userAge >= 18)
{
alert("Bạn có thể đi bầu");
}
else
{
alert("Bạn không đi bầu được");
}
</script>
</body>
</html>Các điều kiện có thể kết hợp với nhau bằng && (và), || (hoặc). Với ||, chỉ cần một điều kiện trong này true, cả câu sẽ được tính true, với && thì tất cả phải true.
Giờ ta sẽ học về một loại quan hệ logic khác. Gọi là quan hệ bắc cầu. Như thế ta sẽ xét một số câu khẳng định và tùy theo một số điều kiện khác nhau mà chúng sẽ nhận các giá trị khác nhau. Ví dụ về biến userAge này, nếu userAge nhỏ hơn 18 ta sẽ cho hiện “Ít nhất bạn còn trong tuổi thanh xuân”. Else, nếu userAge <29 thì sẽ hiện “Ít nhất bạn chưa đến 30”. Như vậy ta vừa đặt một chuỗi các Else và If mà phần mềm mà phần mềm sẽ xét giá trị true và false. Nếu <39 thì sẽ hiện “Bạn đã đến tuổi lặp gia đình”.
Như thế ta vừa đặt ra các điều kiện khác nhau để được xét giá trị, cuối cùng ta sẽ dùng lệnh Else để hiện “Bạn già rồi”
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Câu lệnh điều kiện - Kênh 49</title>
</head>
<body>
<script type="text/javascript">
var userAge = prompt("Bạn bao nhiêu tuổi?");
var citizen = true;
//document.write("Bạn vừa nhập " + userAge + " tuổi.");
if(citizen && userAge >= 18)
{
alert("Bạn có thể đi bầu");
}
else
{
alert("Bạn không đi bầu được");
}
document.write("<br>");
if(userAge <18 )
{
document.write("Ít nhất bạn đang trong tuổi thanh xuân");
}
else if (userAge < 29)
{
document.write("Ít nhất bạn chưa tới 30");
}
else if (userAge <39)
{
document.write("Bạn đã đến tuổi lặp gia đình");
}
else
{
document.write("Bạn già rồi");
}
</script>
</body>
</html>Ta cùng lưu lại và chạy thử để xem kết quả nhé. Có một điều bạn sẽ tự hỏi. Nếu một người < 18 tuổi thì họ cũng sẽ nhỏ hơn 29, 39 và 49 và tại sau những dòng kia không hiện lên. Vấn đề là khi một điều kiện IF trong này true thì các điều kiện sau Else sẽ không được xét nữa.
Ta vừa học về câu lệnh điều kiện If, Else và dãy If Else, If Else và một số điều kiện so sánh, hẹn gặp lại các bạn ở bài tiếp theo