Sunday, October 6, 2024

[Javascript] – Phần 4: JavaScript Statements

-

JavaScript Statements

Một chương trình JavaScript là một danh sách các hành động để thực thi bởi máy tính. Trong một ngôn ngữ lập trình, các hành động này thường được gọi là các câu lệnh (statements). Một chương trình JavaScript là một danh sách các câu lệnh lệnh.

Các câu lệnh (statements) có thể bao gồm khai báo biến, thực hiện phép tính, điều kiện, vòng lặp, và nhiều hành động khác, ví dụ như sau.

<html>
  <body>
    <p id="demo"></p>
        
    <script>
    let x, y, z;  // Statement 1
    x = 5;        // Statement 2
    y = 6;        // Statement 3
    z = x + y;    // Statement 4
    
    document.getElementById("demo").innerHTML =
    "The value of z is " + z + ".";  
    </script>
  </body>
</html>

Kết quả.

The value of z is 11.

JavaScript Statements

Các câu lệnh JavaScript bao gồm:

  • Values (Giá trị): Như số (5, 6), chuỗi ("Hello Dolly."), và logic (true, false).
  • Operators (Toán tử): Như +, -, *, / dùng để thực hiện phép tính.
  • Expressions (Biểu thức): Kết hợp giá trị và toán tử.
  • Keywords (Từ khóa): Như let, if, for, function để chỉ định hành động cụ thể.
  • Comments (Ghi chú): Được sử dụng để giải thích các dòng hay đoạn code hoặc ghi lại thông tin quan trọng.

Hiển thị văn bản trong JavaScript.

Dưới đây là một ví dụ về cách sử dụng câu lệnh JavaScript để thay đổi nội dung của một phần tử HTML:

<html>
  <body>
    <p id="demo"></p>
    <script>
    document.getElementById("demo").innerHTML = "Hello Dolly.";
    </script>
  </body>
</html>

Kết quả.

Hello Dolly.

Trong ví dụ này, chúng ta sử dụng câu lệnh để chọn phần tử HTML có id là “demo” và thay đổi nội dung bên trong nó thành “Hello Dolly.”

Dấu chấm phẩy trong JavaScript (;)

Dấu chấm phẩy (;) được sử dụng để phân tách các câu lệnh JavaScript. Mặc dù không bắt buộc, việc thêm dấu chấm phẩy ở cuối mỗi câu lệnh là một thói quen được khuyến nghị:

<html>
  <body>
    <p id="demo"></p>
    <script>
        let a, b, c;
        a = 5;
        b = 6;
        c = a + b;
        document.getElementById("demo").innerHTML = c;
    </script>
  </body>
</html>

Kết quả.

11

Khoảng trắng trong JavaScript.

JavaScript không quan tâm đến việc có bao nhiêu khoảng trắng trong code của bạn. Bạn có thể thêm khoảng trắng để làm cho code dễ đọc hơn:

let person = "Hege";
let person="Hege";

Một thói quen tốt là đặt khoảng trắng xung quanh các toán tử (=, +, -, *, /):

let x = y + z;

Xuống dòng trong JavaScript.

Để tăng khả đọc, lập trình viên thường tránh viết code dài hơn 80 ký tự trên một dòng. Nếu câu lệnh JavaScript không fit trên một dòng, bạn có thể chia nó ở phía sau một toán tử:

<html>
  <body>
    <p id="demo"></p>
    <script>
        document.getElementById("demo").innerHTML =
        "Hello Dolly!";
    </script>
  </body>
</html>

Kết quả.

Hello Dolly!

Nhóm code trong JavaScript.

Câu lệnh JavaScript có thể được nhóm lại trong các khối code (code blocks) bằng cách sử dụng dấu ngoặc nhọn {...}. Mục đích của các khối code là định nghĩa các câu lệnh được thực hiện cùng nhau:

<html>
  <body>
    <div class="dotted-border">
        <button type="button" onclick="myFunction()">Click Me!</button>
        <p id="demo1"></p>
        <p id="demo2"></p>
        <script>
        function myFunction() {
          document.getElementById("demo1").innerHTML = "Hello Dolly!";
          document.getElementById("demo2").innerHTML = "How are you?";
        }
        </script>
    </div>
  </body>
</html>

Kết quả khi click vào nút Click Me!

Hello Dolly!

How are you?

Chúng ta thường sử dụng khoảng 2 dấu cách để thụt lề trong các đoạn code.

Giới thiệu về các keywords trong JavaScript.

Các keywords là các biến đặc biệt mà JavaScript sử dụng để xác định các hành động cụ thể hoặc để đánh dấu các phần của code để thực hiện các tác vụ nhất định. Dưới đây là một số keywords quan trọng mà bạn sẽ thường xuyên gặp trong lập trình JavaScript và một số ví dụ về cách chúng được sử dụng:

var: Được sử dụng để khai báo biến.Biến được khai báo bằng var có phạm vi toàn cục hoặc phạm vi hàm (function scope).

var x = 10; // Khai báo biến x và gán giá trị 10 cho nó

let: Được sử dụng để khai báo biến với phạm vi block (block scope), phổ biến trong các khối code như trong câu lệnh if hoặc vòng lặp for.

if (condition) {
  let y = 20; // Khai báo biến y với phạm vi block
}

const: Được sử dụng để khai báo biến hằng số, giá trị của biến không thể thay đổi sau khi được gán.

const PI = 3.14159265359; // Khai báo hằng số PI

if: Được sử dụng để xác định một khối câu lệnh sẽ được thực thi dựa trên một điều kiện.

if (x > 5) {
  // Nếu x lớn hơn 5, thực hiện câu lệnh trong khối này
}

switch: Sử dụng để xác định một khối câu lệnh sẽ được thực thi dựa trên nhiều trường hợp (cases) khác nhau.

switch (day) {
  case "Monday":
    // Thực hiện câu lệnh cho trường hợp "Monday"
    break;
  case "Tuesday":
    // Thực hiện câu lệnh cho trường hợp "Tuesday"
    break;
  //...
  default:
    // Thực hiện câu lệnh mặc định nếu không có trường hợp nào khớp
}

for: Sử dụng để tạo một vòng lặp với điều kiện.

for (let i = 0; i < 5; i++) {
  // Thực hiện câu lệnh trong vòng lặp
}

function: Được sử dụng để khai báo một hàm JavaScript.

function greet(name) {
  // Thực hiện hàm để chào mừng người dùng
}

return: Sử dụng để kết thúc việc thực hiện hàm và trả về một giá trị.

function add(a, b) {
  return a + b; // Trả về tổng của a và b
}

try: Sử dụng để bắt đầu một khối code trong việc xử lý lỗi (error handling) sử dụng câu lệnh try...catch.

try {
  // Khối không bị lỗi
} catch (error) {
  // Khối xử lý nếu có lỗi
}

Những keywords này đóng vai trò quan trọng trong việc điều khiển luồng và thực hiện các tác vụ trong JavaScript. Chúng giúp bạn kiểm soát biến, thực hiện điều kiện, lặp lại các hành động và nhiều chức năng khác để xây dựng ứng dụng web mạnh mẽ.

Kết luận.

Bài viết này đã giới thiệu về các loại câu lệnh cơ bản trong JavaScript, bao gồm câu lệnh gán, điều kiện, vòng lặp, hàm, và các câu lệnh đặc biệt như breakcontinue. Các câu lệnh này là cơ bản trong việc điều khiển luồng thực thi trong các chương trình JS.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

4,956FansLike
256FollowersFollow
223SubscribersSubscribe
spot_img

Related Stories