Cấu Trúc Điều Khiển trong Javacript

Cấu trúc điều khiển trong Javacript gồm các lệnh if, switch, vòng lặp for, while, do while… là các kiến thức cần phải biết trong Javascript.

Lệnh lựa chọn đơn trong javascript

Lệnh lựa chọn đơn trong javascript là lệnh if để thực thi đoạn code khi điềukiện là đúng (điều kiện sai thì bỏ qua đoạn code, không thực hiện).

if (điềukiện) { 
   //code thực hiện khi điềukiện đúng
}

Ví dụ sử dụng lệnh if trong javascript:

<script>
    var dtb = prompt("Nhập điểm trung bình");
    if (dtb>10){
        alert("Điểm trung bình làm gì mà lớn dữ vậy bồ?");
    }
</script>

Lệnh lựa chọn kép trong javascript

Lệnh lựa chọn kép trong javascript là cách để chỉ ra sự lựa chọn: thực thi một đoạn code trong khi điềukiện đúng và thực thi một đoạn code khác khi điềukiện là sai.

if (điềukiện) {
   //Thực hiện
}
else {
    //Thực hiện
}

Ví dụ sử dụng lệnh if trong javascript:

<script>
    var phucap=0;
    var p = prompt("Nhập phái (nam/nu) ");
    if (p=='nu'){
        phucap=200000;
    }
    else {
        phucap=100000;
    }
    alert("Phụ cấp là " + phucap);
</script>

Lệnh đa lựa chọn

Lệnh switch trong javascript giúp bạn diễn tả nhiều giá trị của điềukiện để thực thi các mã khác nhau. Cú pháp như sau:

switch ( biểuthức) {
  case giatri1:
     //Thực hiện
     break;
  case giatri2:
     //Thực hiện
     break;
     ...
  default:
    //Thực hiện
} 

Trong khối lệnh swirch, sử dụng lệnh break để thoát khỏi lệnh switch, nếu không thì trình duyệt sẽ thực hiện tiếp tục các lệnh trong phần case tiếp theo.

Ví dụ sử dụng lệnh switch trong javascript::

<script>
var diem = prompt("Hãy nhập điểm:")
switch ( diem ) {
case "A":
    alert("Tuyệt vời!");
    break;
case "B":
case "C":
    alert("Khá!");
    break;
case "D":
case "E":
case "F":
    alert("Bạn cần cố gắng hơn!");
    break;
default:
    alert("Giá trị bạn nhập vào không hợp lệ.");
}//switch
</script> 

Lệnh lặp while

Lệnh lặp while trong javascript dùng để thực hiện lặp đi lặp lại đoạn code khi điềukiện là còn đúng, lệnh while sẽ dừng khi điềukiện là sai. Điềukiện được kiểm tra trước khi đoạn code được thực hiện.

while (điềukiện ) {
    //Code thực hiện lặp lại khi điềukiện là đúng
}

Ví dụ lệnh lặp while trong javascript:

<script>
var n = 1;
while ( n <= 31) {
    document.write(n + " ");
    n++; //thay đổi giá trị của n để đến 1 lúc điều kiện sẽ sai
}
</script>

Chú ý: phải tính toán để điều kiện sẽ đến lúc sai, nếu không sẽ bị lỗi lặp vô hạn.

Ví dụ khác

<select id="ngay">
<script>
var n = 1;
while ( n <= 31) {
    document.write("<option>Ngày " + n + "</option>");
    n++; 
}
</script>
</select>

Lệnh lặp do … while

Lệnh lặp do while trong javascript dùng để diễn tả quá trình lặp đoạn code trong khi điềukiện là còn đúng, do while sẽ dừng khi điềukiện là sai.
Code thực thi trước rồi mới kiểm tra điềukiện, nếu điềukiện đúng sẽ vòng lên và lặp tiếp, nếu điềukiện là sai thì không lặp nữa.

do {
   //Code được thực hiện lặp lại
} while ( điềukiện )

Ví dụ lệnh lặp do while trong javascript:

<script>
var t = 1;
do {
    document.write(t+ "<br>");
    t++;
}
while (t <= 12);
</script>

Chú ý: phải tính toán để điều kiện sẽ đến lúc sai, nếu không sẽ bị lỗi lặp vô hạn.

Lệnh lặp for

Lệnh for trong javascript dùng để lặp một đoạn code với số lần lặp xác định. Đây là lệnh lặp dễ dùng và thường hay dùng. Cú pháp lệnh lặp for như sau:

for (khởitạo ; điềukiện ; bướctăng) {
    //thực hiện
}

Ví dụ lệnh lặp for trong javascript:

<script>
for (var i = 0; i < 5; i++) {
   alert(i);
}
</script>

Lệnh for có thể dùng để duyệt qua một mảng:

<div class="ductinh">
<script>
    document.write( "<h4>CÁC ĐỨC TÍNH CAO QUÝ CỦA CON NGƯỜI</h4>");
    var qt = new Array("Nhân", "Lễ", "Nghĩa","Trí","Tín");
    for (var i = 0; i < qt.length; i++) {
        document.write( "<p>" + qt[i] + "</p>");
    }
    document.write("<hr>");
</script>
</div>

Hàm

Trong javascript, bạn có thể tạo thêm các hàm mới ngoài các hàm có sẵn trong thư viện javascript. Việc khai báo hàm mới là cần thiết khi bạn cần tạo ra một chức năng nào đó , có tên cụ thể và dùng nhiều lần về sau.
Hàm sẽ chạy khi bạn gọi tên của nó. Cú pháp khai báo hàm mới là như sau:

Hàm không trả về giá trị  nào

function tenham (thamso1, thamso2, …, thamson) {
    //Thực hiện
}

Hàm trả về giá trị  

function tenham (thamso1, thamso2, …, thamson) {
    //Thực hiện
    return giátrị;
}

Ví dụ 1: định nghĩa hàm chào và gọi hàm

<script>
function chao (title, name) {
     h ="<h3> Xin chào " + title + " " + name + "</h3>";
     h = h + "<h4>Chúc an lành</h4>";
     document.write(h);
}
</script>
<div id="loichao">
<script>chao("Anh", "Tèo");</script>
</div>

Chú ý: lời gọi hàm có thể ở một thẻ script khác với  thẻ script định nghĩa hàm

Ví dụ 2: hàm có giá trị trả về

<script> 
function dtb(toan, ly, hoa) {
   var t = (toan + ly + hoa)/3;
   return t;
};
</script>
<script>
  var toan=9; ly=3; hoa=7;
  var dtb = dtb(toan, ly, hoa);
</script>

<div id="diem">
<script>document.write("Điểm trung bình = "  + dtb.toFixed(2) );</script>
</div>

Hàm prompt trong javascript

Hàm prompt là hàm có sẵn trong javascript. Bạn dùng hàm prompt để nhập giá trị từ người dùng. Hàm prompt trả về giá trị mà người dùng đã nhập, trả về False nếu người dùng nhắp nút Cancel. Gọi hàm prompt như sau:  prompt(thông_điệp ); Ví dụ:

<script>
    var tinh = prompt("Bạn ở tỉnh nào");
</script>
<div id="tinh">
    Nơi cư ngụ : <script>document.write(tinh);</script>
</div>

Hàm confirm trong javascript

Hàm confirm là hàm có sẵn trong javascript. Nó giúp bạn hiện ra 1 hộp thoại để hỏi user cái gì đó, trong hộp thoại có nút OK và nút Cancel. Nếu user nhắp OK (đồng ý) thì hàm confirm trả về giá trị true, còn nếu user nhắp nút Cancel thì hàm confirm trả về giá trị false . Ví dụ:

<script>
   var traloi = confirm("Bạn chắc là xóa chứ?");
   console.log(traloi);
</script>

Phạm vi biến trong javascript

Biến cục bộ

  • Biến được khai báo trong hàm
  • Chỉ được tham chiếu đến trong phạm vi khai báo

Biến toàn cục

  • Biến được khai báo ngoài hàm
  • Có thể tham chiếu đến từ bất cứ đâu

Ví dụ:

<script>
var x = "Kết quả tốt sẽ có";
function abc() { var y=" nếu chịu khó"; }
</script>

<script>
    alert("x= " + x);
    alert("y= " + y);
</script>

Sự kiện trong Javascript

Tất cả các tag trong trang web đều có nhiều sự kiện xảy ra,  tùy theo cách dùng của user như nhắp chuột, gõ phím…và trạng thái trang. Bạn cần biết về các sự kiện này để viết code khi các sự kiện xảy ra.

Các sự kiện trong javascript thường dùng

onClick: là sự kiện xảy ra khi user nhắp chuột vào một tag trong trang web.

onLoad và onUnload : là sự kiện xảy ra khi user vào hoặc thoát khỏi trang web.

onFocus, onBlur, onChange: là các sự kiện xả ra khi các form field nhận được focus, mất focus hay được thay đổi giá trị.

onMouseOver: là sự kiện xảy ra khi user di chuột lên một tag HTML.

Ví dụ cách dùng sự kiện

Click vào bất kỳ đâu trên trang web

<html><head></head>
<body onclick="alert('I love you')">
</body>
</html>

Có thể thêm nhiều dòng lệnh

<html><head></head>
<body onclick="alert('I'); alert('love');">
</body>
</html>

=>Trong trường hợp xử lý phức tạp cho sự kiện????

Xử lý phức tạp cho sự kiện

Sử dụng hàm để thực hiện các xử lý cho sự kiện

<script>
function abc() {
    alert("I");
    alert("love");
    alert("you");
    alert("so");
    alert("much");
}
</script>
<button type="button" onclick="abc();"> Mời nhắp vào </button>

Ví dụ 2:

  <h4> Hãy chọn đồ vật mà bạn thích:</h4>
  <button type="button" value=" Mũ " onclick="hienThiAnh('mu');">Mũ</button>
  <button type="button" value="Giầy" onclick="hienThiAnh('giay');">Giày</button>
  <hr>
  <div id="sp"></div>
  <script>
    function hienThiAnh(dovat) {
    if (dovat == "mu") {
        document.getElementById("sp").innerHTML= "<img src = 'mu.jpg' height='300'>";
    } else {
        document.getElementById("sp").innerHTML= "<img src = 'giay.jpg' height='300'>";
    }
    }
 </script>

Các hàm timer trong javascript

Trong javaScript, có một số hàm giúp bạn xử lý các sự kiện theo thời gian. Đó là các hàm sau:

Hàm Giải thích
setTimeout Thực hiện công việc sau một khoảng thời gian chỉ định (thời gian tính bằng miligiây)
clearTimeout Hủy bỏ setTimeout trước đó
setInterval Thực hiện lặp lại công việc sau một khoảng thời gian chỉ định (thời gian tính bằng miligiây)
clearInterval Hủy bỏ setInterval trước đó

Cú pháp:

var t=setTimeout("Lệnh_javascript",số_mili _giây );
var t=setInterval("Lệnh_javascript",số_mili _giây );
  • Lệnh_javascirpt: Là mã lệnh javascript sẽ thực thi hoặc lời gọi hàm
  • mili_giây: Sau thời gian này mã lệnh sẽ được thực hiện
  • setTimeout() trả về giá trị đại diện, giá trị này được lưu trong biến t. Nếu muốn hủy bỏ setTimeout, sử dụng hàm clearTimeout và truyền vào đối số t

Sử dụng hàm settimeout trong javascript

<script>
function onClickEvent() {
    var t = setTimeout("alert('Đời vui lắm em có biết không');", 5000);
}
</script>
<button onclick="onClickEvent();"> Click here! </button>

Sử dụng setInterval trong javascript

<script>
    var t;
    function chuc() {
        t = setInterval("alert('Chúc an lành');", 3000);
    }
    function bochuc(){
        clearInterval(t);
    }
</script>

<button onclick="chuc();"> Hiện lời chúc </button>
<hr>
<button onclick="bochuc();"> Không chúc nữa </button>

Sử dụng các cấu trúc điều khiển trong Javacript để thực hiện các tính toán, tạo dữ liệu và hiển thị dữ liệu trong trang theo ngữ cảnh. Bạn sẽ dùng chúng rất nhiều sau này. Bài tiếp theo sẽ nói về lập trình đối tượng trong Javascript và mô hình BOM, nhưng giờ thì nghỉ cái đã nhé, từ từ rồi học tiếp. 🙂