Cấu trúc điều khiển trong javascript 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 if trong javascript
Lệnh if trong javascript dùng để 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) {mã lệnh chạy khi điềukiện đúng}
Ví dụ sử dụng lệnh if trong javascript:
<script>
let 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 if else trong javascript
Lệnh if else trong javascript là cách để thực thi một đoạn code 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) {
mã lệnh chạy khi điều kiện đúng
} else {
mã lệnh chạy khi điều kiện sai
}
Ví dụ sử dụng lệnh if else trong javascript:
<script>
let p = prompt("Nhập phái (nam/nu) ");
if (p == 'nu' ) {
phucap = 200000;
} else {
phucap = 100000;
}
alert("Phụ cấp là " + phucap);
</script>
Toán tử bậc 3 trong javascript
Cách dùng toán tử bậc 3 là cách dùng gọn tương tự như lệnh if. Cú pháp như sau (operand1)? operand2:operand3 trong đó oerand1 là nơi diễn tả điều kiện thì operand2 được xử lý, ngược lại thì operand3 sẽ được xử lý.
<script>
let nn = ( lang == 'vi' )? 'Tiếng Việt':'English';
</script>
Lệnh switch
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ã lệnh khác nhau. Cú pháp như sau:
switch ( biểuthức) {
case giatri1:
mã lệnh chạy khi biểuthức = giatri1
break;
case giatri2:
mã lệnh chạy khi biểuthức = giatri2
break;
default:
mã lệnh chạy mặc định
}
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>
let 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>
let 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>
let 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 {
mã lệnh thực hiện lặp lại
} while ( điềukiện )
Ví dụ lệnh lặp do while trong javascript:
<script>
let 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 trong javascript
Một trong những cấu trúc điều khiển trong javascript thường hay dùng là lệnh lặp for. Lệnh này dùng để lặp một đoạn code với số lần lặp xác định. 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 (let t = 0 ; t <= 12 ; t++) {
document.write('Tháng ' + t + '<br>');
}
</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>");
let qt = ["Nhân", "Lễ", "Nghĩa","Trí","Tín" ];
for (let i = 0; i < qt.length; i++) {
document.write( "<p>" + qt[i] + "</p>");
}
document.write("<hr>");
</script>
</div>
Tạo hàm mới trong Javascript
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:
function tênhàm([param1, param2, param3…]) {
// mã thực thi khi hàm được gọi
...
[return giátrị]
}
(Lệnh return trong hàm dùng để thoát hàm và trả về 1 giá trị nào đó. Lệnh này có thể bỏ qua nếu không cần dùng)
Gọi hàm đã định nghĩa:
tênhàm([param1, param2…]);
Ví dụ: định nghĩa hàm tính tuổi và gọi hàm :
<html><head>
<script>
function tinhtuoi(namsinh) {
let td = new Date();
let namnay = td.getFullYear();
return namnay - namsinh;
}
</script>
</head>
<body>
<script>
let namsinh = 1972;
let t = tinhtuoi(namsinh);
alert("Tuổi : " + t);
</script>
</body></html>
Định nghĩa hàm chao và gọi hàm
<script>
function chao (title, name) {
let 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ụ 3: hàm có giá trị trả về
<script>
function dtb(toan, ly, hoa) {
let t = (toan + ly + hoa)/3;
return t;
};
</script>
<script>
let toan = 9 , ly = 3, hoa = 7;
let 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>
let 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>
let 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>
let x = "Kết quả tốt sẽ có";
function abc() { let 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:
let t = setTimeout("Lệnh_javascript", số_mili_giây );
let 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
Hàm setTimeout trong javascript
<script>
function onClickEvent() {
let t = setTimeout("alert('Đời vui lắm em có biết không');", 5000);
}
</script>
<button onclick="onClickEvent();"> Click here! </button>
Hàm setInterval trong javascript
<script>
let 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>
Các cấu trúc điều khiển trong Javascript dùng để 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.
Các em đọc thêm (nếu muốn) các link sau
- https://www.w3schools.com/jsref/jsref_if.asp
- https://www.w3schools.com/jsref/jsref_switch.asp
- https://www.w3schools.com/jsref/jsref_dowhile.asp
- https://www.w3schools.com/jsref/jsref_for.asp
