Hướng dẫn 3 3 in javascript - 3 3 trong javascript

  • Cú pháp toán tử ba ngôi
  • Điều kiện nối tiếp (Conditional chains)
  • Video bài giảng
  • Luyện tập
    • Bài 1
      • Hướng dẫn
    • Bài 2
      • Hướng dẫn
  • Bài 2

Kết luận If – elseSwitch – case. Hôm nay mình sẽ giới thiệu cho các bạn một cách nữa, đó là toán tử ba ngôi (Ternary Operator) trong JavaScript.


Hướng dẫn 3 3 in javascript - 3 3 trong javascript

variable_name = (condition) ? value1 : value2

Ở các bài viết trước, chúng ta đã cùng với nhau tìm hiểu hai câu lệnh điều kiện căn bản trong JavaScript là If – else và Switch – case. Hôm nay mình sẽ giới thiệu cho các bạn một cách nữa, đó là toán tử ba ngôi (Ternary Operator) trong JavaScript.true) thì toán tử sẽ trả về value 1 còn nếu là sai (hay là false) thì nó sẽ trả về giá trị của value 2

Nếu condition nó là đúng (hay là true) thì toán tử sẽ trả về value 1 còn nếu là sai (hay là false) thì nó sẽ trả về giá trị của value 2

var exp = 3; var salary; if (exp > 3) { salary = 1000; } else { salary = 500; } console.log(salary) // 500

Code language: JavaScript (javascript)

Nếu như trước đây khi phải sử dụng với if – else ta sẽ có như thế này:

var exp = 1; var salary = exp > 3 ? 1000 : 500; console.log(salary) // 500 // Nếu exp có giá trị là null hoặc undefined thì sẽ gán giá trị // cho biến salary là "null or undefined"

Code language: JavaScript (javascript)

Thì bây giờ chỉ còn:Phân biệt Null, Undefined và NaN.


Điều kiện nối tiếp (Conditional chains)

Nếu các bạn chưa hiểu rõ null và undefined là gì, hãy xem bài viết này: Phân biệt Null, Undefined và NaN.

Hướng dẫn 3 3 in javascript - 3 3 trong javascript

Toán tử điều kiện tuân theo suy dẫn phải, tức là nó có thể được gọi “nối tiếp” theo cách sau đây, tương tự như với If – else If – else If – else nối tiếp nhau:

var exp = 2; var salary; if ( exp < 1 ) { salary = 1000; } else if ( exp < 2 ) { salary = 1500; } else if ( exp < 3 ) { salary = 2000; } else { salary = 3000; } console.log(salary) // 2000

Code language: JavaScript (javascript)

Nếu như trước đây ta sẽ có:

var exp = 2; var salary = exp < 1 ? 1000 : exp < 2 ? 1500 : exp < 3 ? 2000 : 3000 console.log(salary) // 2000

Code language: JavaScript (javascript)

Video bài giảng


Luyện tập

Hướng dẫn 3 3 in javascript - 3 3 trong javascript

Bài 1

Hướng dẫnTính tổng a và b, nếu tổng nhỏ hơn 4, hiển thị chuỗi Below, ngược lại hiển thị Over. Lưu ý sử dụng toán tử 3 ngôi.

Bài 2

if ((a + b) < 4) {     result = 'Below'; } else {    result = 'Over'; }

Code language: JavaScript (javascript)

Hướng dẫn

Bài 2 Tạo file add.html

Kết luận Thêm thẻ

<html> <body>     <script>     //code vào đây     script> body> html>

Code language: HTML, XML (xml)

Ở các bài viết trước, chúng ta đã cùng với nhau tìm hiểu hai câu lệnh điều kiện căn bản trong JavaScript là If – else và Switch – case. Hôm nay mình sẽ giới thiệu cho các bạn một cách nữa, đó là toán tử ba ngôi (Ternary Operator) trong JavaScript.Khai báo biến a, b nhập vào giá trị cho a, b từ hộp thoại

let a = prompt("a: "); let b = prompt("b: ");

Code language: JavaScript (javascript)

Nếu condition nó là đúng (hay là true) thì toán tử sẽ trả về value 1 còn nếu là sai (hay là false) thì nó sẽ trả về giá trị của value 2 Khai báo biến result lưu kết quả

result = (a + b < 4) ? 'Below' : 'Over';

Code language: JavaScript (javascript)

Nếu như trước đây khi phải sử dụng với if – else ta sẽ có như thế này:Thực thi chương trình. Quan sát kết quả.


Bài 2

Kết luận

  • Ở các bài viết trước, chúng ta đã cùng với nhau tìm hiểu hai câu lệnh điều kiện căn bản trong JavaScript là If – else và Switch – case. Hôm nay mình sẽ giới thiệu cho các bạn một cách nữa, đó là toán tử ba ngôi (Ternary Operator) trong JavaScript.
  • Nếu condition nó là đúng (hay là true) thì toán tử sẽ trả về value 1 còn nếu là sai (hay là false) thì nó sẽ trả về giá trị của value 2
  • Nếu như trước đây khi phải sử dụng với if – else ta sẽ có như thế này:
  • Thì bây giờ chỉ còn:

Nếu các bạn chưa hiểu rõ null và undefined là gì, hãy xem bài viết này: Phân biệt Null, Undefined và NaN.

Bài 2

let message; if (login == 'Employee') {     message = 'Hello'; } else if (login == 'Director') {     message = 'Greetings'; } else if (login == '') {     message = 'No login'; } else {     message = ''; }

Code language: JavaScript (javascript)

Hướng dẫn

Bài 2 Tạo file employee.html

Kết luận Thêm thẻ