Đang tải... (xem toàn văn)
A Paragraph
Try it Bài Javascript Output b) JavaScript thẻ Trong ví dụ dưới, hàm JavaScript đặt thẻ Hàm kích hoạt nút bấm bấm My Web PageA Paragraph
Try it function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } c) Mã JavaScript để file riêng Mã JavaScript để file riêng biệt, thể dùng chung nhiều trang web khác File chứa mã JavaScript cần có tên mở rộng js Để sử dụng mã JavaScript từ file ngoài, khai báo tên file chứa mã thuộc tính src thẻ : Để sử dụng mã JavaScript từ file ngoài, khai báo tên file chứa mã thuộc tính src thẻ : Javascript Output JavaScript khơng có hàm chun phụ trách việc in liệu Hiển thị hộp cảnh báo (alert box), cách sử dụng lệnh window.alert() Hiển thị qua mã HTML cách sử dụng lệnh document.write() Hiển thị qua phần tử HTML, lệnh innerHTML Hiển thị cửa sổ console, lệnh console.log() 3.1 Sử dụng lệnh window.alert() Ví dụ: My First Web Page Bài Javascript OutputMy first paragraph.
window.alert(5 + 6); 3.2 Sử dụng lệnh document.write() Ví dụ: My First Web PageMy first paragraph.
document.write(5 + 6); Sử dụng document.write()đi sau mã HTML hóa hồn tồn mã HTML: Ví dụ: My First Web PageMy first paragraph.
Try it Chú ý: phương thức.write()chỉ sử dụng gỡ lỗi 3.3 Sử dụng lệnh innerHTML To access an HTML element, JavaScript can use the document.getElementById(id) method The id attribute defines the HTML element The innerHTML property defines the HTML content: Để truy cập phần tử HTML, JavaScript sử dụng phương thức getElementById(id) Thuộc tính id xác định phần tử HTML Thuộc tính innerHTML xác định nội dung HTML: Ví dụ: My First Web PageMy First Paragraph
Bài Cú pháp JavaScript document.getElementById("demo").innerHTML = + 6; Chú ý: Để thị liệu HTML, hầu hết trường hợp bạn gán giá trị cho thuộc tính innerHTML 3.4 Sử dụng lệnh console.log() Trong trình duyệt bạn, bạn sử dụng phương thức console.log() để hiển thị liệu Kích hoạt giao diện console trình duyệt phím F12, chọn "Console" menu Ví dụ: My First Web PageMy first paragraph.
console.log(5 + 6); Cú pháp JavaScript 4.1 Chương trình JavaScript Một chương trình máy tính danh sách "lệnh" để máy tính "thực hiện" JavaScript ngơn ngữ lập trình Các lệnh JavaScript phân cách dấu chấm phẩy Ví dụ: JavaScript StatementsStatements are separated by semicolons.
The variables x, y, and z are assigned the values 5, 6, and 11:
var x = 5; var y = 6; var z = x + y; document.getElementById("demo").innerHTML = z; Bài Cú pháp JavaScript Chú ý: Trong trang HTML, chương trình JavaScript dc thi hành trình duyệt 4.2 Lệnh, hằng, biến, phép toán, biểu thức trongJavaScript Lệnh: tạo thành từ giá trị, phép toán, biểu thức, từ khố, thích JavaScript định nghĩa hai loại giá trị: giá trị cố định giá trị biến đổi Giá trị cố định gọi Giá trị biến đổi gọi biến Hằng: Hằng số ghi có khơng có số thập phân: 10.50, 1003 Hằng chuỗi văn viết nháy kép nháy đơn: "John Doe", 'John Doe' Biến: Trong ngơn ngữ lập trình, biến dc sử dụng để lưu giá trị liệu JavaScript sử dụng từ khóa varđể định nghĩa biến Dấu = sử dụng để gán giá trị cho biến Ví dụ: var x; x = 6; Phép toán: Phép toán = để gán giá trị cho biến: var x = 5; var y = 6; Các phép toán số học: + - * / để tính tốn số học: (5 + 6) * 10 Biểu thức: Một biểu thức kết hợp giá trị, biến phép tốn, trả giá trị Ví dụ: * 10 trả 50 Biểu thức chứa giá trị biến: x * 10 Các giá trị thuộc kiểu khác số chuỗi Ví dụ, "John" + " " + "Doe", trả "John Doe" Từ khóa: Từ khóa JavaScript dùng xác định hành vi thi hành Từ khóa var cho trình duyệt biết cần tạo biến mớí var x = + 6; var y = x * 10; Chú thích JavaScript: Tất các lệnh JavaScript thi hành Các mã viết sau hai dấu sổ chéo // viết cặp /* */ văn thích Các thích bị trình duyệt bỏ qua không thi hành var x = 5; // var x = 6; // I will be executed I will NOT be executed Tên JavaScript: Trong JavaScript, tên sử dụng để đặt cho biến (và từ khóa, hàm, nhãn) Quy tắc đặt tên tương tự nhiều ngơn ngữ lập trình phổ diến khác Trong JavaScript, ký tự đầu phải chữ cái, dấu gạch nối dấu dollar ($) JavaScript ngôn ngữ phân biệt hao thưởng: hai biến khác nhau: lastName = "Doe"; lastname = "Peterson"; Bài Lệnh chương trình JavaScript Từ khóa var gồm chữ in thường Trong lịch sử lập trình, lập trình viên thường sử dụng cách sau để nối từ tên biến: Dấu trừ:first-name, last-name, master-card, inter-city Dấu gạch nối:first_name, last_name, master_card, inter_city Camel Case:FirstName, LastName, MasterCard, InterCity Với JavaScript, người ta thương sử dụng quy tắc "camel case"bắt đầu tên chữ in thường:firstName, lastName, masterCard, interCity Chú ý: Quy tắc dấu trừ không dùng JavaScript Nó bị hiểu phép - số học JavaScript sử dụng ký tự Unicode Nó hỗ trợ hầu hết ngôn ngữ giới Lệnh chương trình JavaScript Trong HTML, lệnh JavaScript thi hành trình duyệt 5.1 Lệnh JavaScript Lệnh sau yêu cầu trình duyệt viết chuỗi "Hello Dolly." Trong phần tử HTML có id = "demo": Ví dụ: document.getElementById("demo").innerHTML = "Hello Dolly."; 5.2 Chương trình JavaScript Hầu hết chương trình JavaScript chứa nhiều lệnh JavaScript Các lệnh thi hành, từ lệnh theo thứ tự chúng viết chương trình Ví dụ: x, y, z giá trị cho trước, cuối cungff z hiển thị;: var x = 5; var y = 6; var z = x + y; document.getElementById("demo").innerHTML = z; Chương trình JavaScript (và lệnh JavaScript) thường gọi mã JavaScript 5.3 Dấu chấm phảy; Dấu chấm phảy sử dụng để phân tách lệnh JavaScript Hãy thêm dấu chấm phảy vào cuối lệnh thi hành: a = 5; b = 6; c = a + b; Khi phân cách dấu chấm phảy, nhiều lệnh phép viết dòng: a = 5; b = 6; c = a + b; Chý ý: Trên trang web, bạn nhìn thấy ví dụ khơng dùng dấu chấm phảy Việc viết dấu chấm phảy cuối lệnh không bắt buộc, khuyến khích 5.4 JavaScript dấu cách JavaScript bỏ qua khoảng trống Bạn thêm khoảng trống vào mã để làm cho dễ đọc Ví dụ: var person = "Hege"; Bài 15 Mảng JavaScript d) Dịch chuyển phần tử Chuyển dịch tương đương với xóa, thực với phần tử Phương thức shift() loại bỏ phần tử đầu mảng, dịch phần tử phía sau lên phía trước vị trí Ví dụ: var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.shift();// Removes the first element "Banana" from fruits Phương thứcunshift() thêm phần tử vào đầu mảng, đẩy phần tử cũ phía sau vị trí Ví dụ: var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.unshift("Lemon");// Thêm "Lemon" vào vị trí đầu Phương thức shift() trả phần tử bị xóa Phương pháp unshift() trả độ dài mảng e) Thay đổi phần tử Các phần tử mảng truy cập cách sử dụng số mục chúng Ví dụ: var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits[0] = "Kiwi"; // thay đổi ptử đầu thành "Kiwi" Thuộc tính lengthcung cấp cách thêm phần tử vào cuối mảng Ví dụ: var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits[fruits.length] = "Kiwi"; // Thêm "Kiwi" vào cuối mảng f) Xóa phần tử Vì mảng JavaScript đối tượng, xóa phần tử cách sử dụng phép tốn delete Ví dụ: var fruits = ["Banana", "Orange", "Apple", "Mango"]; delete fruits[0]; // Xóa ptử đầuthành undefined Chú ý: Sử dụng phép toán deletetrên mảng để lại phần tử không kiểu mảng Nếu bạn muốn xóa hẳn sử dụng pop()hoặc shift() g) Chèn thêm dãy giá trị mảng vào mảng Phương thức splice()được sử dụng để thêm phần tử vào mảng Ví dụ: var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2, 0, "Lemon", "Kiwi"); Tham số (2) xác định vị trí nơi mà phần tử cần thêm vào Tham số thứ hai (0) xác định có phần tử cần loại bỏ Các tham số lại ("Lemon", "Kiwi") xác định phần tử thêm vào Sử dụng splice()có thể xóa bỏ phần tử mà không tạo "lỗ thủng" mảng Ví dụ: var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(0, 1); // Xóa ptử Tham số (0) xác định vị trí nơi mà phần tử thêm vào Tham số thứ hai (1) xác định có phần tử cần loại bỏ Phần lại tham số bỏ qua Khơng có phần tử thêm vào h) Sắp xếp mảng Phương thức sort()cho phép xếp mảng theo trật tự alphabetically Ví dụ: var fruits = ["Banana", "Orange", "Apple", "Mango"]; 44 Bài 15 Mảng JavaScript fruits.sort();//["Apple","Banana","Mango", "Orange"] i) Lật ngược mảng Phương thức reverse()lật ngược thứ tự phần tử mảng Có thể sử dụng để xếp mảng theo chiều ngược lại (giảm dần) Ví dụ: var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort(); // ["Apple","Banana","Mango", "Orange"] fruits.reverse();//["Orange", "Mango","Banana","Apple"] k) Sắp xếp số Theo mặc định, hàm sort()sắp xếp giá trị chuỗi.Tuy nhiên, số xếp chuỗi, "25" lớn "100", "2" lớn "1" Có thể khắc phục cách cung cấp hàm so sánh Ví dụ: var points = [40, 100, 1, 5, 25, 10]; points.sort(function(a, b){return a-b}); Và cách ta xếp giảm dần dãy số: var points = [40, 100, 1, 5, 25, 10]; points.sort(function(a, b){return b-a}); Hàm so sánh: Mục đích hàm so sánh để xác định thứ tự xếp thay Hàm so sánh phải trả lại giá trị âm, 0, giá trị dương, tùy thuộc vào đối số: function(a, b) {return a-b} Khi hàm sort()so sánh hai giá trị, gửi giá trị cho hàm so sánh, xếp giá trị theo giá trị hàm so sánh trả Ví dụ: Khi so sánh 40 100, phương thức sort()gọi hàm so sánh (40, 100) Hàm so sánh tính tốn 40-100, trả -60 (giá trị âm) Phương thức sort()sẽ xếp 40 giá trị đứng trước 100 Tìm giá trị cao (hoặc thấp nhất): Làm để tìm giá trị cao mảng?Ví dụ: var points = [40, 100, 1, 5, 25, 10]; points.sort(function(a, b){return b-a}); // points[0] chứa giá trị cao Và thấp nhất? Ví dụ: var points = [40, 100, 1, 5, 25, 10]; points.sort(function(a, b){return a-b}); // points[0] chứa giá trị thấp l) Nối mảng Phương thức concat()tạo mảng chứa hai mảng thành phần: var myGirls = ["Cecilie", "Lone"]; var myBoys = ["Emil", "Tobias","Linus"]; var myChildren = myGirls.concat(myBoys); // Nối myGirls myBoys Phương thức concat()cũng thực với số lượng mảng bất kỳ: var arr1 = ["Cecilie", "Lone"]; var arr2 = ["Emil", "Tobias","Linus"]; var arr3 = ["Robin", "Morgan"]; var myChildren = arr1.concat(arr2, arr3); 45 Bài 15 Mảng JavaScript // Nối arr1 với arr2 arr3 m) Phân chia mảng Phương thức slice(start, end) lấy phần mảng tạo thành mảng mới: var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; var citrus = fruits.slice(1, 3); Phương thức slice() chọn phần tử từ vị trí start kết thúc vị trí trước vị trí end(nửa đoạn) Nếu đối số cuối bị bỏ qua, slice() lấy phần lại mảng, tính từ vị trí start var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; var citrus = fruits.slice(1); 15.6 Duyệt phần tử mảng Các tốt nhât sử dụng vịng lặp for Ví dụ: var index; var fruits = ["Banana", "Orange", "Apple", "Mango"]; for (index = 0; index < fruits.length; index++) { text += fruits[index]; } 15.7 Mảng kết hợp Nhiều ngơn ngữ lập trình hỗ trợ mảng với số đặt tên Mảng với số có tên gọi mảng kết hợp (hoặc mảng băm) JavaScript không hỗ trợ mảng với số đặt tên Trong JavaScript, mảng luôn sử dụng số số Ví dụ: var person = []; person[0] = "John"; person[1] = "Doe"; person[2] = 46; var x = person.length; // var y = person[0]; // "John" Chú ý: bạn dùng số đặt tên, JavaScript định nghĩa lại mảng đối tượng chuẩn Sau đó, tất phương thức thuộc tính mảng trả kết sai var person = []; person["firstName"] = "John"; person["lastName"] = "Doe"; person["age"] = 46; var x = person.length; // var y = person[0]; // undefined 15.8 Sự khác mảng đối tượng Trong JavaScript, mảng sử dụng số số Trong JavaScript, đối tượng sử dụng số tên JavaScript không hỗ trợ mảng kết hợp Bạn nên sử dụng đối tượng bạn muốn đặt tên phần tử Bạn nên sử dụng mảng bạn muốn đặt tên phần tử số 46 Bài 15 Mảng JavaScript Tránh dùng new Array(), dùng [] thay var points = new Array(); // Bad var points = []; // Good Hai cách khác để tạo mảng có phần tử var points = new Array(40, 100, 1, 5, 25, 10) // Bad var points = [40, 100, 1, 5, 25, 10]; // Good từ khóa newđơi gây rắc rối cho bạn: var points = new Array(40, 100); tạo mảng với phần tử 40 100 Còn lệnh tạo mảng với 40 phần tử không kiểu var points = new Array(40); 15.9 Tổ chức mảng Một câu hỏi chung là: Làm để biết biến mảng? Vấn đề toán tử typeof trả "object": var fruits = ["Banana", "Orange", "Apple", "Mango"]; typeof fruits; // typeof returns object Để giải vấn đề bạn tạo hàm isArray()của riêng bạn: function isArray(myArray) { return myArray.constructor.toString().indexOf("Array") > -1; } Hàm trả giá trị true đối số mảng 15.10 Bài tập Dùngphương thức pop()để loại bỏ mục cuối từ mảngfruits var fruits = ["Banana", "Orange", "Apple"]; document.getElementById("demo").innerHTML = fruits; Dùng phương thức push()để thêm phần tử Kiwivào fruits var fruits = ["Banana", "Orange", "Apple"]; document.getElementById("demo").innerHTML = fruits; 47 Bài 16 Cấu trúc điều kiện Dùng phương thức splice()để loại bỏ "Orange" "Apple" fruits var fruits = ["Banana", "Orange", "Apple", "Kiwi"]; document.getElementById("demo").innerHTML = fruits; Dùng phương thức sort()để xếp mảng theo trật tự alphabetically var fruits = ["Banana", "Orange", "Apple", "Kiwi"]; document.getElementById("demo").innerHTML = fruits; Dùng phương thức concat()để nối girlsvà boys var girls = ["Cecilie", "Lone"]; var boys = ["Emil", "Tobias", "Linus"]; var children = // add code here document.getElementById("demo").innerHTML = children; 16 Cấu trúc điều kiện Như ngôn ngữ lập trình khác, JavaScript có câu lệnh điều kiện if if else: 16.1 Cấu trúc if Cú pháp: if (điều kiện) { Lệnh 48 Bài 16 Cấu trúc điều kiện } Ví dụ: if (hour < 18) { greeting = "Good day"; } 16.2 lệnh else Cú pháp: if (Điều kiện) { lệnh 1; } else { Lệnh 2; } Ví dụ: if (hour < 18) { greeting = "Good day"; } else { greeting = "Good evening"; } 16.3 Lệnh else if Cú pháp: if (điều kiện 1) { lệnh 1; } else if (điều kiện 2) { Lệnh 2; } else { Lệnh 3; } Ví dụ: if (time < 10) { greeting = "Good morning"; } else if (time < 20) { greeting = "Good day"; } else { greeting = "Good evening"; } 16.4 Lệnh switch Sử dụng lệnh switch để lựa chọn thực thi nhiều khối lệnh Cú pháp: switch(expression) { case n: code block 49 Bài 16 Cấu trúc điều kiện break; case n: code block break; default: default code block } Trong cấu trúc lệnh switch, thành phần biểu thức biểu thức giá trị Giá trị biểu thức so sánh với giá trị trường hợp nhánh case Nếu giá trị so khớp, khối lệnh kết hợp với trường hợp thi hành Ví dụ: Phương thức getDay() trả ngày tuần số nguyên đoạn (Sunday=0, Monday=1, Tuesday=2 ) Trong ví dụ ta đổi dạng số sang dạng tên ngày tuần: switch (new Date().getDay()) { case 0: day = "Sunday"; break; case 1: day = "Monday"; break; case 2: day = "Tuesday"; break; case 3: day = "Wednesday"; break; case 4: day = "Thursday"; break; case 5: day = "Friday"; break; case 6: day = "Saturday"; break; } Từ khóa break Khi thực lệnh chương trình, gặp từ khóa break, máy tính dừng xử lý lệnh khối lệnh thoát khỏi khối lệnh Chú ý: Khi so sánh giá trị biểu thức lệnh switch khớp với giá trị kết hợp với khối lệnh switch, lệnh khối lệnh thi hành gặp break 50 Bài 17 Cấu trúc lặp Từ khóa default Từ khóa default định khối mã lệnh thị hành khơng có trường hợp nhánh case switch so khớp với giá trị biểu thức switch: Ví dụ: Phương thức getDay() trả ngày tuần ứng với giá trị thuộc đoạn Nếu hôm Saturday (6) Sunday (0), default đưa thơng báo: switch (new Date().getDay()) { case 6: text = "Today is Saturday"; break; case 0: text = "Today is Sunday"; break; default: text = "Looking forward to the Weekend"; } Nhiều nhánh case switch sử dụng chung khối lệnh Đôi khi, bạn muốn nhiều trường hợp giá trị dùng chung khối lệnh switch Ví dụ: switch (new Date().getDay()) { case 1: case 2: case 3: default: text = "Looking forward to the Weekend"; break; case 4: case 5: text = "Soon it is Weekend"; break; case 0: case 6: text = "It is Weekend"; } Các trường hợp giá trị ngày tuần 1, 2, defaul dùng chung thơng báo Cịn giá trị 4, dùng chung thông báo khác 17 Cấu trúc lặp 17.1 Khái niệm vòng lặp Vòng lặp thường dùng trường hợp, bạn muốn thực mã nhiều lần, lần với giá trị khác Thường trường hợp làm việc với mảng: Thay viết: text += cars[0] + ""; text += cars[1] + ""; text += cars[2] + ""; 51 Bài 17 Cấu trúc lặp text += cars[3] + ""; text += cars[4] + ""; text += cars[5] + ""; Bạn viết: for (i = 0; i < cars.length; i++) { text += cars[i] + ""; } Các loại cấu trúc lặp JavaScript hỗ trợ cấu trúc lặp sau: Cấu trúc lặp for thực thi khối lệnh, số lần Cấu trúc lặp for/in duyệt qua thuộc tính đối tượng Cấu trúc lặp while thực thi khối lệnh chừng điều kiện lặp Cấu trúc lặp do/while thực thi khối lệnh điều kiện lặp 17.2 Cấu trúc For Cấu trúc lặp for thường công cụ mà bạn sử dụng bạn muốn tạo vòng lặp Cấu trúc for có cú pháp sau: for (Lệnh 1; Lệnh 2; Lệnh 3) { Khối lệnh cần thi hành } Lệnh thực trước khối lệnh bắt đầu Lệnh định nghĩa điều kiện để chạy khối lệnh Lệnh thực lần sau khối lệnh thực Ví dụ: for (i = 0; i < 5; i++) { text += "The number is " + i + ""; } Trong ví dụ trên, bạn hiểu: Lệnh gán giá trị biến i = trước vòng lặp bắt đầu Lệnh định nghĩa điều kiện lặp (i < 5) Lệnh làm tăng giá trị (i++) lần khối mã vòng lặp thực thi + Với lệnh 1: bạn sử dụng lệnh để khởi tạo biến đếm sử dụng vịng lặp (i = 0) Khơng bắt buộc phải vậy, JavaScript không quan tâm Lệnh tùy chọn Bạn khởi tạo nhiều giá trị lệnh (cách dấu phẩy) Ví dụ: for (i = 0, len = cars.length, text = ""; i < len; i++) { text += cars[i] + ""; } Bạn bỏ qua lệnh Ví dụ: var i = 2; var len = cars.length; var text = ""; for (; i < len; i++) { text += cars[i] + ""; 52 Bài 17 Cấu trúc lặp } + Lệnh 2: Thường sử dụng để đánh giá điều kiện biến ban đầu Không thiết vậy, JavaScript không quan tâm Lệnh tùy chọn Nếu lệnh trả true, vịng lặp thực lại lần nữa, trả false, vòng lặp kết thúc Chú ý: Nếu bạn bỏ qua lệnh 2, bạn phải có lệnh break vịng lặp Nếu khơng vịng lặp không kết thúc Điều làm sụp đổ trình duyệt bạn Bạn tìm hiểu break phần sau + Lệnh 3: Thường làm tăng giá trị biến ban đầu Cũng bắt buộc, JavaScript không quan tâm, lệnh tùy chọn Lệnh làm điều giống giảm (i ), tăng (i = i + 15), điều khác Lệnh bỏ qua (như bạn phải tự tăng giá trị bạn vịng lặp) Ví dụ: var i = 0; var len = cars.length; for (; i < len; ) { text += cars[i] + ""; i++; } 17.3 Cấu trúc For/In Cấu trúc lặp for/in duyệt qua thuộc tính đối tượng Ví dụ: var person = {fname:"John", lname:"Doe", age:25}; var text = ""; var x; for (x in person) { text += person[x]; } 17.4 Cấu trúc While Cấu trúc lặp while duyệt qua khối mã điều kiện lặp true Cú pháp: while (điều kiện) { khối mã thực thi } Ví dụ: mã vòng lặp chạy biến i < 10: while (i < 10) { text += "The number is " + i; i++; } Chú ý: Nếu bạn quên thay đổi giá trị biến biểu thức điều kiện lặp, bạn làm vịng lặp khơng dừng 53 Bài 17 Cấu trúc lặp 17.5 The Do/While Loop Cấu trúc lặp do/while biến thể cấu trúc lặp while Cấu trúc lặp thực khối mã lần, trước kiểm tra điều kiện lặp Nếu điều kiện lặp true, lặp lại vịng lặp lần nữa, ngược lại dừng vịng lặp Cú pháp: { code block to be executed } while (condition); Ví dụ: Vòng lặp do/while Vòng lặp thi hành tối thiểu lần, chí điều kiện lặp = false, khối mã thi hành trước điều kiện lặp kiểm tra: { text += "The number is " + i; i++; } while (i < 10); Chú ý: Nếu bạn quên thay đổi giá trị biến biểu thức điều kiện lặp, bạn làm vịng lặp khơng dừng So sánh cấu trúc For While Nếu bạn đọc vòng lặp for, bạn thấy vòng lặp while có nhiều điểm giống vịng lặp for, với lệnh lệnh bị bỏ qua Ví dụ sử dụng vòng lặp for để thu thập tên xe từ mảng cars: var cars = ["BMW", "Volvo", "Saab", "Ford"]; var i = 0; var text = ""; for (;cars[i];) { text += cars[i] + ""; i++; } Cũng với mục đích trên, dùng vịng lặp while, ta có mã sau: var cars = ["BMW", "Volvo", "Saab", "Ford"]; var i = 0; var text = ""; while (cars[i]) { text += cars[i] + ""; i++; } 17.6 Lệnh break, continue label Lệnh break dùng để nhảy khỏi vòng lặp Lệnh continue để bỏ qua bước lặp 54 Bài 17 Cấu trúc lặp 17.6.1 Lệnh break Bạn thấy lệnh break sử dụng phần trước Break sử dụng để "nhảy ra" khỏi lệnh switch() Câu lệnh break sử dụng để nhảy khỏi vòng lặp Câu lệnh break ngắt vòng lặp tiếp tục thực mã lệnh sau vịng lặp (nếu có): Ví dụ: for (i = 0; i < 10; i++) { if (i === 3) { break; } text += "The number is " + i + ""; } 17.6.2 The Continue Statement Lệnh continue bỏ qua bước lặp (trong vòng lặp), điều kiện xác định xảy ra, vòng lặp tiếp tục với bước lặp Ví dụ bỏ qua giá trị 3: for (i = 0; i < 10; i++) { if (i === 3) { continue; } text += "The number is " + i + ""; } 17.6.3 JavaScript Labels Lệnh label nhằm gán nhãn để qua phá vỡ cấu trúc lệnh lặp khối lệnh Cú pháp: break labelname; continue labelname; Lệnh continue (có khơng có nhãn) sử dụng để bỏ qua bước lặp Lệnh break, khơng có nhãn, sử dụng để nhảy khỏi vòng lặp switch Với nhãn, lệnh break sử dụng để nhảy khỏi khối mã Ví dụ: var cars = ["BMW", "Volvo", "Saab", "Ford"]; list: { text += cars[0] + ""; text += cars[1] + ""; text += cars[2] + ""; text += cars[3] + ""; break list; text += cars[4] + ""; text += cars[5] + ""; } Chú ý: Một khối lệnh nằm cặp ngoặc nhọn { } 17.7 Bài tập Trong vòng lặp for, thay num1 = num2 = 10, chạy thử đoạn mã 55 Bài 17 Cấu trúc lặp var i; for (i = num1; i < num2; i++) { document.getElementById("demo").innerHTML += i + ""; } Làm cho vòng lặp bắt đầu đếm từ đến 50, với bước nhảy 5: var i; for (i = 0; i < 10; i++) { document.getElementById("demo").innerHTML += i + ""; } Làm cho vòng lặp đếm lùi từ 10 var i; for (i = 0; i < 10; i++) { document.getElementById("demo").innerHTML += i + ""; } Bên vòng lặp for: gán biến đếm i = Chạy vòng lặp i nhỏ độ dài mảng food Mỗi bước lặp tăng i lên đơn vị var text = ""; 56 Bài 17 Cấu trúc lặp var food = ["Pizza", "Beans", "Tacos", "Fish", "Chicken"]; var i; for () { text += "I love " + food[i] + ""; } document.getElementById("demo").innerHTML = text; Trong tập này, bạn tạo vịng lặp từ đầu Chúng tơi tạo biến đếm i cho bạn, biến text để in kết Nhiệm vụ bạn vòng lặp for in số từ với ngắt dòng số Chú ý: Hãy nhớ tăng biến sử dụng để tránh vòng lặp vô hạn var text = ""; var i; // add for loop here document.getElementById("demo").innerHTML = text; Trong vòng lặp while, thay num1 = num2 = 10, chạy thử đoạn mã var i = num1; while (i < num2) { document.getElementById("demo").innerHTML += i + ""; i++; } Làm cho vòng lặp bắt đầu đếm từ đến 50, với bước nhảy 5: 57 Bài 18 var i = 0; while (i < 10) { document.getElementById("demo").innerHTML += i + ""; i++; } Làm cho vòng lặp đếm lùi từ 10 Sửa để dùng cấu trúc lặp do/while 10 Dùng break để dừng vòng lặp i = 11 Dùng continue để bỏ qua giá trị i chẵn 18 58 ... chuỗi Phép toán + * / % ++ Mô tả Cộng Trừ Nhân Chia Lấy dư Tự tăng Tự giảm 8.1.Các phép toán so sánh Phép toán == === != !== > < >=