Như các bạn biết khi học lập trình web nói chung và học về lập trình frontend nói riêng thì bắt buộc bạn phải học javascript, một website thiếu Javascript thì sẽ trở nên cọc cằn, chức năng không đẹp và không thân thiện với người dùng. vì vậy nếu bạn không học JS thì đó quả là một sai lầm và lạc hậu về công nghệ. Ở phần này chúng tôi giới thiệu với các bạn về Javascript cơ bản

I. JavaScript Cơ bản

A. Phần cơ bản

I.1. Javascript là gì? Tìm hiểu ngôn ngữ lập trình javascrip

Có thể nói trong những năm gần đây thì ngôn ngữ Javascript đã trở nên rất thông dụng. Có rất nhiều framework ra đời được viết bằng ngôn ngữ lập trình Javascript, từ frontend cho tới backend thì ở đâu cũng có mặt nó.Vì một số bạn không hiểu rõ về Javascript nên trong bài này mình sẽ tóm tắt khái niệm một cách tông quát nhất, qua đó sẽ giúp bạn hiểu công dụng thực sự của Javascript.

1.1. Javascript là gì?

Javascript là một ngôn ngữ lập trình kịch bản dựa vào đối tượng phát triển có sẵn hoặc tự định nghĩa. Javascript được sử dụng rộng rãi trong các ứng dụng Website. Javascript được hỗ trợ hầu như trên tất cả các trình duyệt như Firefox, Chrome, ... trên máy tính lẫn điện thoại.

Nhiệm vụ của Javascript là xử lý những đối tượng HTML trên trình duyệt. Nó có thể can thiệp với các hành động như thêm / xóa / sửa các thuộc tính CSS và các thẻ HTML một cách dễ dàng. Hay nói cách khác, Javascript là một ngôn ngữ lập trình trên trình duyệt ở phía client. Tuy nhiên, hiện nay với sự xuất hiện của NodeJS đã giúp cho Javascript có thể làm việc ở backend.

Bạn thử truy cập vào một số website trên internet thì sẽ thấy có những hiệu ứng slide, menu xổ xuống, các hình ảnh chạy qua chạy lại rất đẹp. tất cả các chức năng này đều được xử lý bằng Javascript đấy các bạn ạ.

Trong những năm gần đây, sự xuất hiện của các framework như NodeJS (chuyên code backend), ExpressJS (NodeJS framework), và nhiều thư viện frontend khác như Angular, jQuery, RactJS ra đời, giúp tạo ra một cơn sốt với từ khóa Javascript Fullstack.

js là gì?

JS là một từ viết tắt của JavaScript, vì vây khi một ai đó nhắc tới JS thì bạn phải hiểu rằng đó là Javascript nhé.

1. 2. Javascript Framework là gì?

Javascript Framework là một bộ thư viện được xây dựng dựa vào ngôn ngữ lập trình Javascript. Mỗi framework thường được tạo ra để phục vụ cho một lĩnh vực nào đó. Ví dụ với Angular và React thì chuyên xử lý frontend, NodeJS thì chuyên xử lý backend, jQuery là một thư viện rất mạnh khi xử lý DOM HTML và CSS. Sức mạnh của Javascript là không thể chối cãi, bằng chứng là hiện nay có rất nhiều libraries và framework được viết bằng Javascript ra đời như:

• Angular: Một thư viện dùng để xây dựng ứng dụng Single Page.
• NodeJS: Một thư viện được phát triển phía Server dùng để xây dựng ứng dụng realtime.
• Sencha Touch: Một Framework dùng để xây dựng ứng dụng Mobile.
• ExtJS: Một Framework dùng xây dựng ứng dụng quản lý (Web Applications).
• jQuery: Một thư viện rất mạnh về hiểu ứng.
• ReactJS: Một thư viện viết ứng dụng mobie.
• Và còn nhiều thư viện khác.

1.3. Ưu điểm và nhược điểm của Javascript

Ưu điểm của Javascript là gì?

• Javascript giúp thao tác với người dùng ở phía client và tách biệt giữa các client. Ví dụ 2 người đang truy cập vào 2 trình duyệt khác nhau thì cả hai đều có những phiên xử lý Javascript khác nhau, không ảnh hưởng lẫn nhau.
• Javascript có thể hoạt động trên nhiều nền tảng khác nhau, từ Windows, macOS cho đến các hệ điều hành trên mobile.
• Javascript là một ngôn ngữ dễ tiếp cận, bạn sẽ dễ dàng học nó mà không cần phải cài đặt quá nhiều phần mềm.

Nhược điểm của Javascript là gì?

Vì là một ngôn ngữ rất dễ dàng bị soi code nên dễ bị khai thác. Hacker có thể nhập một đoạn code bất kì vào khung console của trình duyệt, lúc này trình duyệt sẽ hiểu rằng đoạn code đó là chính thống, nên hacker có thể gửi nhửng request lên server một cách dễ dàng.

Có thể bạn đã thấy những tool về Facebook trên mạng, hoặc những đoạn code làm thay đổi chức năng và giao diện của Facebook, chúng được viết từ Javascript đấy các bạn ạ.

1.4. Cách viết chương trình javascript đầu tiên

Bước đầu tiên để học Javascript là bạn phải chuẩn bị một phần mềm để viết mã Javascript, mình thì thích dùng Netbeans nhưng nếu bạn là người mới thì nên sử dụng Notepad++ vì nó rất nhẹ và dễ cài đặt. Qua khái niệm javascript là gì? thì bạn thấy tất cả các trình duyệt đều hỗ trợ nên ta không cần phải download thư viện gì cả mà thông qua những đoạn mã script giúp trình duyệt nhận diện được đó là Javascript.

Cặp thẻ mở và thẻ đóng

Tất cả những đoạn mã Javascript đều phải đặt trong cặp thẻ mở <script> và thẻ đóng </script>, ví dụ:

Cặp thẻ script

Đặt thẻ script ở đâu?

Chúng ta có ba cách đặt thường được sử dụng sau đây:

Cách 1: Internal - viết trong file html hiện tại

Thông thường chúng ta sẽ viết những đoạn mã javascript trên phần head, tuy nhiên đó không phải là điều kiện bắt buộc, nghĩa là bạn có thể đặt ở đâu tùy thích miễn là những đoạn mã đó phải được bao lại bằng thẻ script.

Ví dụ đặt trong thẻ head

Ví dụ đặt trong thẻ body

Cách 2: External - viết ra một file js khác rồi import vào

Bạn có thể viết những đoạn mã javascript ở một file có phần mở rộng là .js, sau đó dùng thẻ script để import vào (giống CSS vậy). Ví dụ file JS của mình có tên là demo.js thì lúc này mình import vào như sau:

Code import JS

Lúc này bên trong file demo.js bạn không đặt thẻ scirpt nữa nhé vì nó là file có phần đuôi là .js rồi nên trình duyệt tự nhận diện đây là file chứa mã Javascript.

Cách 3: Inline - viết trực tiếp trong thẻ HTML

Inline nghĩa là bạn sẽ viết những đoạn mã Javascript trực tiếp trong thẻ HTML luôn. Như ví dụ dưới đây là mình đang viết dạng inline vì đoạn mã alert(1) được đặt trong sự kiện onclick của thẻ button.

Code bên trong sự kiện click

Viết chương trình Hello World!

Trước khi thực hành thì bạn phải chắc chắn là bạn đã cài đặt Notepad++ để viết mã Javascript nhé, hoặc bạn có thể sử dụng một phần mềm code bất kì.

Bước 1: Bây giờ chúng ta thực hành nhé, bạn hãy tạo một file index.html và lưu tại bất kì vị trí nào, desktop hay ổ D, ổ C gì đó thì tùy bạn, miễn là phần mở rộng là .html, sau đó mở file đó bằng Notepad++ rồi gõ nội dung sau vào:

Mã HTML

Chạy lên bằng Firefox hoặc Chrome bạn thấy xuất hiện một button. Bây giờ ta sẽ viết ứng dụng khi click vào button đó thì sẽ xuất hiện một thông báo "Hello World" nhé. Có lưu ý là button đó mình có đặt id=clickme nha.

Bước 2: Viết mã Javascript khi click vào button có id="clickme" thì thông báo lên màn hình.

Lưu ý là bạn phải đặt đoạn mã javascript bên dưới button như trong demo nhé, nếu bạn đặt ở trên là sẽ bị lỗi đấy, lý do tại sao thì trong các bài tiếp theo mình sẽ giải thích kỹ hơn.

Vậy là xong rồi đấybây giờ thì bạn biết javascript là gì? rồi phải không nào.

1.5. Các câu hỏi thường gặp khi học Javascript

Bây giờ mình sẽ tổng hợp một số câu hỏi thường gặp trong quá trình học Javascript nhé.

Thẻ script là gì?

Thẻ script dùng để khai báo cho trình duyệt biết nội dung bên trong sẽ là một đoạn mã Javascript.

Type = text/javascript là gì?

Khi bạn khai báo thẻ script thì sẽ có thuộc tính type="text/javascript". Đây là tham số dùng để khai báo media type cho dữ liệu nằm bên trong của thẻ script. Mặc định nếu bạn không khai báo thì nó sẽ hiểu là text/javascript.

Javascript có làm được backend không?

Theo lý thuyết thì Javascript là ngôn ngữ client nên không thể thao tác trên phía server. Tuy nhiên, khi server của bạn có cài đặt NodeJS thì ở server hoàn toàn có thể dùng ngôn ngữ Javascript để code, bởi NodeJS sử dụng Javascript.

Có nên học Javascript không?

Nếu bạn đi theo lĩnh vực lập trình web, app mobile thì nên học thêm Javascript đi nhé. Mình đảm bảo bạn sẽ luôn có việc làm và lương cũng không tồi. Đương nhiên không phải chỉ rành Javascript thôi, mà bạn phải học thêm những FW JS khác.

I.2.Các cách khai báo biến trong Javascript

Trong bài này ta sẽ tìm hiểu cách khai báo biến trong Javascript bằng 3 từ khóa (var - let - const), đồng thời học thêm cách dùng hàm document.write() để in giá trị biến ra ngoài trình duyệt .

Việc khai báo biến trong Javascript rất đơn giản, bạn không cần phải khai báo kiểu dữ liệu cho biến, mà nó sẽ tự nhận kiểu dữ liệu khi bạn gán giá trị lần đầu cho nó. Và phạm vi bài này mình sẽ có nói đến cách sử dụng từ khóa let trong ES6 để khai báo.

2.1. Các cách khai báo biến trong javascript

Chúng ta có ba cách khai báo biến. Thứ nhất là dùng từ khóa var, thứ hai là dùng từ khóa const, và cuối cùng là từ khóa let. Tùy vào từng trường hợp mà chọn cách khai báo cho phù hợp.

Lưu ý: Đối với các phiên bản trước ES6 thì chỉ có từ khóa var thôi nhé. Vì vậy, với những trình duyệt quá cũ thì không sử dụng được let và const.

Khai báo biến trong JS bằng từ khóa var

Để khai báo một biến ta sử dụng từ khóa var tenbien.

Khai báo biến trong JS bằng từ khóa let

Sử dụng từ khóa let tenbien.

Biến loại này chỉ có phạm vi trong khối khai báo mà thôi. Vì vậy nó sẽ tối ưu trong trường hợp bạn cần khai báo một biến chỉ sử dụng tạm thời trong một phạm vi nhất định. Phạm vi nay ta hay gọi là block scope.

Ví dụ: Biến không tồn tại do từ khóa let nằm ngoài phạm vi block sope mà biến đang nằm.

Như trong ví dụ này thì biến domain chỉ có phạm vi trong lệnh if mà thôi.

Tuy nhiên, nếu bạn thay bằng từ khóa var thì được nhé.

Khai báo biến trong JS bằng từ khóa const

Sử dụng từ khóa const tenbien.

Const là một hằng số, vì vậy khi khai báo biến const thì bạn phải gán giá trị cho nó luôn, sau này cũng không thể thay đổi giá trị cho biến.

Ví dụ: Mình cố tình đổi giá trị cho biến domain nên sẽ bị báo lỗi.

2.2. Cách đặt tên cho biến trong Javascript

Khi đặt tên cho biến thì bạn phải tuân thủ theo những quy tắc dưới đây:

• Tên biến phải là các chữ không dấu viết hoa hoặc viết thường, các chữ số từ 0-9 và dấu gạch dưới (_).
• Tên biến bắt đầu phải là chữ hoặc dấu gạch dưới (_), nếu bắt đầu bằng số là sai
• Tên biến có thể đặt dài hay ngắn tùy vào lập trình viên.

Ví dụ các cách khai báo biến

Ngoài cách khai báo từng biến đơn lẻ như trên thì bạn có thể gộp nó vào một dòng duy nhất như sau:

Ví dụ khai báo nhiều biến

2.3. Cách gán giá trị cho biến trong javascript

Để gán giá trị cho biến ta dùng dấu bằng (=) để gán vế phải vào vế trái.

Ví dụ. gán giá trị thehalfheart vào biến username thì ta viết là username = 'thehalfheart'.

Có hai cách gán thông dụng đó là vừa khai báo biến vừa gán giá trị và khai báo rồi mới gán giá trị:

Vừa khai báo vừa gán giá trị

Khai báo xong mới gán giá trị

2.4. Kiểu giá trị của biến trong Javascript

Trong Javascript rất hạn chế về kiểu dữ liệu nhưng bù lại cơ chế xử lý kiểu dữ liệu của nó rất linh hoạt, giúp lập trình viên có thể chuyển đổi một cách dễ dàng. Đó là vì mọi kiểu dữ liệu đều có thể quy về đối tượng và mỗi đối tượng ta có thể bổ sung các phương thức xử lý riêng. Giống như php, để xác định biến có kiểu dữ liệu là gì thì ta dựa vào giá trị mà nó đang có. Có nghĩa khi bạn gán một con số không có dấu chấm động thì nó sẽ là kiểu INT, nếu gán một chuỗi thì là kiểu String.

Gán kiểu giá trị cho biến

Trong Javascript sẽ có các kiểu dữ liệu thông dụng như kiểu chuỗi (String), số (Number), mảng (Array), đối tượng (Object). Chi tiết từng kiểu dữ liệu chúng ta sẽ được học trong các phần tiếp theo.

2.5. In giá trị của biến JS ra trình duyệt

 Để in giá trị của biến hoặc một chuỗi nào đó ra trình duyệt thì ta sử dụng hàm document.write(value).

2.6. Các phép toán thường dùng trên biến trong Javascript

Khi bạn học Javascript thì minh nghĩ là bạn đã từng học một ngôn ngữ khác rồi, nên trong bài này mình sẽ nói đơn giản lại.

Khi làm việc với biến thì chúng ta thường sử dụng các phép toán như:

• Gán giá trị.
• Cộng trừ nhân chia các số.
• Nối chuỗi.

Chúng ta sẽ tìm hiểu kỹ hơn ở các phần tiếp theo.

I.3.Hàm alert() - confirm() - prompt() trong javascript

Trong phần này chúng ta sẽ tìm hiểu ba hàm rất thông dụng trong javascript, đó là hàm alert(), confirm() và prompt(). Đây là ba hàm thường được sử dụng tạo hộp thoại thông báo và lấy thông tin từ người dùng. Tính năng hiển thị popup để lấy thông tin người dùng hoặc hiển thị popup thông báo rất là phổ biến. Tuy nhiên, thực tế thì các website lại rất ít khi sử dụng các hàm này bởi giao diện hiện thị của nó rất là củ chuối. Thay vào đó thì họ lập trình viên sẽ sử dụng một thư viện jQuery popup khác chuyên nghiệp hơn.

3.1. Hàm alert() trong javascript

 Hàm alert() có nhiệm vụ in một thông báo popup, nó có một tham số truyền vào và tham số này chính là nội dung ta muốn thông báo với người dùng.

Ví dụ: Viết chương trình khi click vào button thì xuất hiện một thông báo.

Phần này ta đã làm ở ví dụ bài tìm hiểu javascript là gì rồi nên mình sẽ viết lại hơi khác chút xíu, đó là mình sẽ dùng sự kiện onclick thay vì dùng hàm addEventListener như ở phần trước nhé.

Các bạn thấy, mình đã sử dụng hàm alert() trong sự kiện onclick, đây là cách code inline mà chúng ta đã học ở bài trước rồi nên mình không giải thích gì thêm.

3.2. Hàm confirm() trong javascript

Hàm confirm() cũng sẽ xuất hiện một thông báo popup nhưng nó có thêm hai sự lựa chọn là Yes và No, nếu người dùng chọn Yes thì nó trả về TRUE và ngược lại nếu chọn NO thì nó sẽ trả về FALSE. Nó cũng có một tham số truyền vào và tham số này chính là nội dung thông báo.

Ví dụ: Viết chương trình hiển thị thông báo xác nhận và dùng hàm alert() để hiển thị kết quả người dùng chọn.

Hàm Confirm

3.3. Hàm prompt() trong javascript

Hàm prompt() dùng để lấy thông tin từ người dùng, gồm có hai tham số truyền vào là nội dung thông báo và giá trị ban đầu. Nếu người dùng không nhập vào thì giá trị nó sẽ trả về là NULL

Ví dụ: Viết chương trìn lấy thông tin tên của người dùng

Ta sẽ khai báo biến lưu trữ kết quả và kết hợp sử dụng hàm alert() để thông báo kết quả người dùng nhập vào.

Hàm Prompt

I.4.Các toán tử trong Javascript

Trong bài này chúng ta sẽ tìm hiểu các toán tử trong Javascript thường dùng nhất như: Toán tử chia lấy dư, toán tử cộng trừ nhân chia, toán tử nối chuỗi.

4.1. Toán tử toán học trong javascript

Thông thường chúng ta sử dụng các toán tử toán học như cộng, trừ, nhận, chia.. để xử lý thay đổi giá trị các biến trong javascript.

Sau đây là bảng danh sách các toán tử trong Javascript loại toán học hay dùng.

var a = 20;
var b = 5;

// Kết quả biến c có giá trị 25
var c = a + b; 

var a = 20;
var b = 5;

// Kết quả biến c có giá trị 100
var c = a * b;

var a = 20;
var b = 5;

// Kết quả biến c có giá trị 4
var c = a / b; 

var a = 20;
var b = 5;

// Kết quả biến c có giá trị 0
// Lý do là a / b dư 0
var c = a % b; 

var a = 22;
var b = 5;

// Kết quả biến c có giá trị 2
// Lý do là a / b = 4 dư 2
var c = a % b; 

4.2. Toán tử gán trong javascript

Ở các mục trước chúng ta đã sử dụng toán tử gán rất nhiều đó là toán tử gán bằng (=), toán tử này thường hay sử dụng nhiều nhất trong các ngôn ngữ lập trình. Sau đây là danh sách các toán tử Javascript gán mà ta hay dùng trong javascript.

var x = 12;
var y = x; // y = 12

var x = 12;
var y = 10;

// lúc này x = 22
x += y; // tương đương x = x + y

var x = 12;
var y = 10;

// lúc này x = 2
x -= y; // tương đương x = x - y

var x = 12;
var y = 10;

// lúc này x = 120
x *= y; // tương đương x = x * y

var x = 12;
var y = 10;

// lúc này x = 1.2
x /= y; // tương đương x = x / y

var x = 12;
var y = 10;

// lúc này x = 2;
x %= y; // tương đương x = x % y

4.3. Toán tử quan hệ trong Javascript

Toán tử quan hệ dùng để thể hiện mối quan hệ giữa hai toán tử trong toán học, còn trong lập trình thì ta dùng toán tử quan hệ để nói đến mối quan hệ giữa hai biến hoặc hai giá trị nào đó. Kết quả của toán tử quan hệ sẽ trả về một trong hai giá trị TRUE hoặc FALSE.

Chúng ta có 6 toán tử quan hệ thường dùng trong lập trình sau:

Ví dụ:

var a  = 12;
var b = 20;
console.log(a == b); // False
console.log(a > b); // False
console.log(a >= b); // False
console.log(a < b); // True
console.log(a <= b); // False
console.log(a != b); // True

4.4. Toán tử luận lý trong Javascript

Toán tử luân lý dùng để kết hợp hay phủ định biểu thức có chứa các toán tử quan hệ, kết quả của sự kết hợp sẽ có giá trị là TRUE hoặc FALSE.

 Bảng sau đây mô tả các toán tử luận lý trong Javascript.

Ví dụ:

var a = false;
var b = true;
console.log(a && b); // TRUE
console.log(a || b); // TRUE
console.log(!a); // TRUE
console.log(!b); // FALSE

4.5. Độ ưu tiên các toán tử trong Javascript

Khi các bạn có tính giá trị của biểu thức thì phải tuân theo thứ tự ưu tiên của các toán tử trong biểu thức đó. Ví dụ biểu thức có các phép toán nhân chia cộng trừ thì ta phải áp dụng quy tắc tính phép nhân và chia trước, sau đó mới tính đến phép cộng và trừ.

Hình ảnh dưới đây sẽ cho ta biết độ ưu tiên của các toán tử.

4.6. Lưu ý với toán tử so sánh bằng Javascript

Chúng ta có hai toán tử so sánh bằng đó là toán tử == và ===, vậy sự khác nhau giữa hai toán tử này như thế nào? Khi nào thì sử dụng các toán tử đó? Chúng ta cùng tìm hiểu nhé. Khác với các ngôn ngữ cao cấp khác như C# thì khi khai báo biến bạn không cần phải khai báo kiểu dữ liệu cho biến mà nó sẽ dựa vào giá trị mà bạn truyền cho biến, vì vậy bạn có thể chuyển đổi giá trị cho biến với nhiều kiểu dữ liệu khác nhau.

Ví dụ:

var a = 12; // a đang ở kiểu number
a = '12'; // a bây giờ là kiểu string

Về nguyên tắc thì cả hai toán tử đều có chung một chức năng là so sánh giá trị của hai biến, tuy nhiên với toán tử == thì chỉ so sánh giá trị mà không so sánh kiểu dữ liệu, còn toán tử === thì có so sánh luôn kiểu dữ liệu.

Ví dụ:

var a = 12; // number
var b = '12'; // string

// TRUE vì cả hai đều có giá trị là 12
document.write(a == b); 

// FALSE vì mặc dù giá trị bằng nhau nhưng
// kiểu dữ liệu của a là number, của b là string
document.write(a === b); 

Đấy chính là sự khác nhau giữa hai toán tử == và ===.

I.5. Lệnh if else trong javascript (dùng để rẻ nhánh chương trình)

Trong phần này chúng ta sẽ tìm hiểu cách dùng lệnh if else trong Javascript, đây là lệnh dùng để rẻ nhánh chương trình thành nhiều luồng khác nhau.

Câu lệnh if trong Javascript dùng để kiểm tra một mệnh đề nào đó có đúng hay không, nếu đúng thì thực thi những câu lệnh bên trong và ngược lại nếu sai thì nó sẽ bỏ qua những câu lệnh đó. Bây giờ ta sẽ tìm hiểu chi tiết nó nhé.

5.1. Lệnh if trong javascript

Nội dung thực hiện của lệnh if sẽ được bao quanh bởi cặp ngoặc nhọn đóng mở {}. Cú pháp chuẩn của lệnh if như sau:

Cú pháp lênh if

Trong đó condition là mệnh đề điều kiện và luôn luôn phải có một trong hai giá trị là true/false hoặc giá trị tương đương như:

• NULL => False
• Rỗng => False
• Số khác 0 => TRUE
• Số 0 => FALSE

Ví dụ lệnh if

Kết quả sẽ có thông báo popup "a và b bằng nhau".

Trường hợp nếu các câu lệnh bên trong là câu lệnh đơn ( chỉ có một lệnh) thì ta có thể bỏ cặp dấu ngoặc nhọn. Như với ví dụ trên thì ta sẽ viết lại như sau:

5.2. Lệnh if else trong javascript

Lệnh else sẽ được thực thi nếu lệnh if không được thực hiện, tức là điều kiện ở condition sẽ có giá trị là FALSE. Như vậy khi dùng lệnh else thì bắt buộc phải có một lệnh if đứng trước nó.

Cú pháp lệnh if else như sau

Ví dụ

Trong ví dụ này thì chương trình sẽ chạy trong lệnh else vì điều kiện thực thi lệnh if không thỏa.

Bạn hãy để ý nhé, điều kiện chạy lệnh if là (a == b), mà a = 12 và b = 10 nên biểu thức (12 == 10) sẽ có giá trị là FALSE.

5.3. Kết hợp nhiều lệnh if else trong javascript

Ta có thể kết hợp nhiều câu lệnh if để xử lý bài toán, bằng cách thêm nhiều lệnh else if phía sau. Cú pháp của nó như sau:

Cú pháp nhiều lệnh if

Nếu khối lệnh if (condition1) thỏa và chạy thì chương trình sẽ không biên dịch những lệnh if else phía dưới. Hay nói cách khác, Javascript sẽ thoát khỏi toàn bộ khối lệnh if khi có một lệnh if nào đó được chạy.

Ví dụ

Kết quả sẽ chạy ở lệnh else cuối cùng tại vì các lệnh if bên trên không thỏa điều kiện. Bây giờ bạn thử đổi giá trị của a thành a = 10 thì câu lệnh thứ 2 else if sẽ được thực hiện.

Với bài tập này bạn cũng có thể sử dụng hai khối lệnh if như sau:

Tuy nhiên, về mặt tốc độ thì sẽ không tốt, vì Javascript sẽ biên dịch cho cả hai khối dù cho khối lệnh if ở khối 1 chạy.

5.4. Lệnh if else lồng nhau trong javascript

Cũng giống như các ngôn ngữ lập trình khác, ta có thể lồng các câu lệnh if lại với nhau, nghĩa là bên trong câu lệnh if sẽ chứa câu lệnh if khác.

Ví dụ

5.5. Hàm if trong HTML có không?

Đây là câu hỏi mà có một bạn đã inbox mình, và mình xin trả lời là không có hàm if trong HTML nha các bạn. Thay vào đó, nếu bạn muốn xử lý cách hiển thị HTML thì có thể sử dụng lệnh if else, hoặc sử dụng ngôn ngữ phía server như PHP, ASP, JSP.

I.6.Lệnh switch case trong Javascript

      Trong phần này chúng ta sẽ tìm h iểu lệnh switch case trong Javascript, đây cũng là một lệnh dùng để rẻ nhánh như lệnh if else.  Lẽ ra phần này mình viết ngay từ đầu nhưng do việc học Javascript có sử dụng nhiều đối tượng riêng của nó nên mình giới thiệu các đối tượng đó trước. Chúng ta đã được học câu kiểm tra điều kiện if else rồi, tuy nhiên vẫn còn một cách khác có chức năng tương tự đó là câu lệnh switch case.

6.1. Lệnh switch case trong Javascript

Lênh switch case có công dụng giống như lệnh if else đó là đều dùng để rẻ nhánh chương trình, ứng với mỗi nhánh sẽ có một điều kiện cụ thể và điều kiện đó phải sử dụng toán tử so sánh bằng, còn đối với lệnh if else thì bạn có thể truyền vào một mệnh đề bất kì và sử dụng nhiều toán tử khác nhau.

Cú pháp

Nếu như trong tất cả các case không có case nào phù hợp thì nó sẽ chạy lệnh ở default, ngược lại nếu có case nào phù hợp thì chương trình sẽ chạy trong case đó, đồng thời lệnh break sẽ giúp chương trình thoát khỏi lệnh switch, còn nếu bạn không thêm lệnh break thì chương trình sẽ tiếp tục kiểm tra và chạy tiếp ở case tiếp theo.

Quy trình chạy như sau:

• Nếu tham số variable có giá trị là value_1 thì những đoạn code nằm bên trong case 1 sẽ được thực hiện, ngược lại nó sẽ nhảy xuống case tiếp theo.
• Lúc này nếu variable có giá trị là value_2 thì những đoạn code trong case 2 sẽ được thực hiện, ngược lại nó kiểm tra tiếp xem còn case nào không.
• Nhận thấy không còn case nào nữa nên nó sẽ kiểm tra có lệnh default không? Vì có lệnh default nên nó sẽ chạy đoạn code trong lệnh default đó rồi thoát khỏi switch case.

Đề bài: Viết chương trình cho người dùng nhập vào một số, kiểm tra số đó là số chẵn hay số lẻ.

Với bài toán này thì mình kết hợp lệnh prompt() để lấy thông tin từ người dùng, đồng thời kết hợp lệnh switch case để hiển thị kết quả. Có một lưu ý bạn nên sử dụng hàm parseInt() để chuyển dữ liệu người dùng nhập sang number.

Chương trình sử dụng lệnh switch

Với ví dụ này thì bạn hoàn toàn có thể sử dụng lệnh if else để thực hiện.

Chương trình sử dụng lệnh if else

6.2. Ví dụ lệnh switch case trong Javascript

Đề bài: Viết chương trình cho người dùng nhập một màu, kiểm tra màu đó có phải màu đỏ (red) hay màu vàng (yellow) hay không? Nếu không phải thì thông báo cho người dùng biết nhập sai màu.  Chúng ta sẽ giải bài này bằng nhiều cách khác nhau và mỗi cách bạn sẽ học được một kinh nghiệm xử lý lệnh switch case.

Trường hợp không có default

Trường hợp này nếu bạn nhập một màu khác với màu đỏ (red) và vàng (yellow) thì sẽ không có thông báo gì.

Code

Trường hợp không có break

Trường hợp này nếu bạn nhập vào màu đỏ (red) thì chương trình sẽ in ra cả lệnh ở case màu vàng (yellow) phía dưới, lý do là trong case màu đỏ ta không sử dụng lệnh break để thoát khỏi lệnh switch nên nó sẽ chạy thẳng xuống case phía dưới luôn mà không cần kiểm tra điều kiện.

Giả sử bạn thêm một case nữa cho màu xanh (blue), lúc nếu bạn nhập vào màu đỏ (red) thì kết quả chỉ in thêm lệnh màu vàng (yellow) thôi. Từ đó suy ra rằng nếu không có break thì nó chỉ chạy luôn case đầu tiên phía dưới nó.

Code

Trường hợp gom nhóm case

Nếu bạn để ý kỹ hơn thì thì thấy rằng nếu người dùng nhập vào màu đỏ (red), vàng (yellow) và xanh (blue) thì đều có thông báo nhập đúng. Vậy tai sao mình không gom ba trường hợp đó thành một thôi.

Code

I.7.Function trong Javascript - cách tạo hàm và gọi hàm trong JS

7.1. Function trong Javascript là gì?

Function hay còn gọi là hàm, là tập hợp một đoạn code dùng để xử lý một nhiệm vụ nào đó. Code bên trong function không được biên dịch cho tới khi được gọi đến. Chính vì vậy khi sử dụng function sẽ giúp chương trình được linh hoạt hơn.

Ví dụ: Bạn đang xây dựng chức năng hiển thị danh sách sản phẩm cho trang chủ, trang chuyên mục, ... và nhiều trang khác. Lúc này nếu trang nào bạn cũng code từ A - Z thì sẽ mất khá nhiều thời gian, thay vào đó hãy viết nó vào một function và gọi đến nó ở những trang cần sử dụng.

7.2. Một ví dụ về lợi ích của function trong Javascript

Từ đầu tới giờ ta đang code từng đoạn code riêng lẻ và khi cần thì code lại, như vậy giả sử ta cần xử lý vấn đề đó trong 1000 trường hợp thì ta phải code lại 1000 lần nên rất tốn thời gian, chính vì vậy người ta nghĩ ngay đến hàm, hàm sẽ gom một số đoạn code vào một khối xử lý và khi cần thì gọi ra dùng.

Ví dụ viết chương trình kiểm tra số chẵn hay lẻ như sau:

Nếu mình cần kiểm tra cho 100 số thì sẽ viết lặp lại đoạn code trên 100 lần, điều này quả là tệ hại phải không các bạn? Nhưng đừng lo bởi khi sử dụng hàm trong Javascript thì ta sẽ gom chúng vào thư viện riêng và chỉ gọi tới khi cần.

7.3. Cách tạo function trong Javascript

Trước tiên hãy xem cú pháp tạo hàm trong Javascript như thế nào đã nhé.

Cú pháp:

Trong đó:

• function: là từ khóa của javascript nên bắt buộc phải như vậy
• name_of_function: là tên của hàm, thông thường chúng ta tạo những tên có ý nghĩa như find_max, find_min, ...
• var1, var2 var3, ... là các tham số truyền vào hàm. Ví dụ viết hàm kiểm tra số chẵn hay lẽ thì ta sẽ có một tham số đó là số cần kiểm tra. Đương nhiên bạn có thể tạo một hàm không có tham số.

Ví dụ: Viết hàm kiểm tra một số chẵn hay lẻ.

Code

7.4. Cách gọi hàm trong Javascript

Để gọi hàm thì ta chỉ cần gọi đến tên hàm, sau đó truyền vào các tham số cần thiết.

Ví dụ dưới đây gọi hàm check_number 5 lần và có truyền giá trị cho tham số của hàm.

Code

 Như vậy khi sử dụng nếu ta truyền số 1 vào thì lúc này biến number trong hàm sẽ có giá trị là 1, tương tự cho 2, 3,4,5.

Lưu ý với các bạn trong javascript không tồn tại khái niệm con trỏ và tham chiếu trong hàm

7.5. Hàm có return và hàm không có return

Hàm có return là hàm có sử dụng từ khóa return để đặt ở cuối hàm với mục đích trả kết quả về để sử dụng tiếp ở những đoạn code bên ngoài. Ví dụ ta cần viết một hàm tính tổng của hai số a và b thì hàm này phải trả về giá trị là tổng của hai số a, b. Xem ví dụ sau:

Hàm không có return là hàm không có sử dụng từ khóa return đặt trong hàm. Ví dụ viết chương trình in ra tổng của hai số a và b.

Code

Như vậy tùy vào mục đích mà ta dùng có return hay không có return. Nhưng thông thường ta sử dụng return ở những trường hợp cần lấy kết quả đó để xử lý tiếp, như ở ví dụ trên đó ta lấy kết quả để in thông báo.

7.6. Giá trị mặc định của tham số (default parameter)

Có một số trường hợp bạn muốn một tham số nào đó có thể được truyền hoặc không cần truyền vào đều được, lúc này chúng ta phải sử dụng nó như một tham số mặc định. Javascript không có cú pháp gán giá trị mặc định như PHP mà thay vào đó chúng ta sử dụng toán tử ||.

Ví dụ: Hàm hiển thị một thông báo.

Code

Toán tử || gồm hai vế, trong đó nếu vế TRÁI có giá trị rỗng (undefined, null, false, ...) kết quả sẽ trả về vế PHẢI, ngược lại nó sẽ trả về vế TRÁI.

7.7. Cách tạo hàm arrow function trong Javascript

Arrow function còn được gọi là hàm mũi tên, tức là ta sẽ tạo hàm bằng cách sử dụng ký tự =>. Cách tạo này xuất hiện kể từ phiên bản ES6.

Cú pháp

So sánh với cú pháp cơ bản mà chúng ta đã học ở đầu bài sẽ là:

Ví dụ: Viết hàm kiểm tả một số có chia hết cho 3 hay không bằng hai cách trên.

Cách 1: Sử dụng hàm thông thường.

Cách 2: Sử dụng arrow function

7.8. Một số ví dụ tạo hàm trong javascript

Ví dụ 1: Viết chương trình kiểm tra một năm có phải là năm nhuận hay không

Năm nhuận là năm chia hết cho 4, nếu chia hết cho 100 thì nó phải chia hết cho 400. Đây là định nghĩa năm nhuận.

Ví dụ 2: thực hiện lại ví dụ trên nhưng sử dụng return để trả kết quả vè, nếu true thì là năm nhuận, false thì không phải năm nhuận.

Code

Trong ví dụ này thay vì alert trực tiếp trong hàm thì ta trả về kết quả true/false, sau đó kiểm tra kết quả này nếu true thì là năm nhuận, nếu false thì không phải là năm nhuận.

7.9. Các hàm có sẵn trong Javascript là gì?

Hàm có sẵn trong Javascript là những hàm được tích hợp sẵn trong trình biên dịch của Javascript. Bạn có thể gọi đến những hàm này ở bất cứ đâu trong chương trình.

I.8. Biến toàn cục và biến cục bộ trong Javascript

Trong phần này chúng ta sẽ tìm hiểu hai khái niệm biến toàn cục và biến cục bộ trong JS, qua đó sẽ giúp bạn hiểu được phạm vi hoạt động của một biến trong Javascript.

Biến toàn cục và biến cục bộ là những khái niệm mà bất kì một ngôn ngữ lập trình nào đều có và Javascript cũng không ngoại lệ. Nếu trong ứng dụng sử dụng trùng tên biến quá nhiều từ trong hàm cho đến ngoài hàm thì đôi khi dẫn đến những kết quả không mong muốn, và lỗi chính là lỗi kiểm soát được biến toàn cục và cục bộ.

8.1. Biến cục bộ trong Javascript

Một biến được gọi là cục bộ khi bạn khai báo biến nằm bên trong một hàm cụ thể nào đó, lúc này biến đó sẽ không sử dụng được ở bên ngoài hàm.

Ví dụ: Trong ví dụ này thì đoạn code alert(comment) phía dưới function add_comment() sẽ thông báo lỗi vì nó chưa được định nghĩa. Nhưng đoạn code alert(comment) nằm trong thân hàm add_comment thì lại đúng nhé.

8.2. Biến toàn cục trong Javascript

Biến toàn cục là biến mà bạn khai báo bên ngoài và không nằm bên trong một hàm cụ thể nào cả.

Quay lại ví dụ trong phần 1, thay vì khai báo biến bên trong hàm ta sẽ khai báo biến bên ngoài hàm thì chương trình không bị lỗi.

8.3. Một số ví dụ biến toàn cục và biến cục bộ

Có rất nhiều lưu ý khi sử dụng biến toàn cục và biến cục bộ nên trong phần này chúng ta sẽ tìm hiểu thông qua các ví dụ nhé.

Nếu trong hàm có sử dụng từ khóa var và để tạo một biến và tên của biến đó đã tồn tại ở bên ngoài (toàn cục) thì lúc này bên trong hàm sẽ hiểu là đang sử dụng biến cục bộ nên không ảnh hưởng gì biến bên ngoài cả

Nếu bạn không sử dụng từ khóa var để khai báo biến trong hàm thì JS sẽ sử dụng biến toàn cục nên mọi thay đổi giá trị của biến comment đó sẽ được lưu lại.

Ví dụ

I.9.Kiểm tra lỗi Javascript bằng Firebug (Inspect Element)

Trong phần viết này mình sẽ hướng dẫn sử dụng công cụ Firebug trên các trình duyệt để kiểm tra lỗi trong Javascript. Đây là công cụ rất hữu ích khi các bạn lập trình web bằng JS, bởi nó giúp ta biết được chương trình đang bị lỗi ở đâu? Lỗi ở dòng nào? Và nội dung lỗi là gì?

Mặc định các trình duyệt hiện nay đều đã có tính năng này nên không cần phải cài đặt. Muốn bật firebug thì bạn chỉ cần click chuột phải, sau đó chọn Inspect Element. Ngoài ra các bạn cũng có thể nhấn tổ hợp phú Ctrl + Shift + I. Và trước khi bắt đầu thì hãy tìm hiểu một chút về khung Inspect Element này đã nhé.

9.1. Firebug là gì?

Firebug là một addon dành cho các trình duyệt web Firefox và Chrome, giúp lập trình viên có thể xem tất cả các thông tin về website như:

• Xem được cấu trúc HTML và CSS.
• Xem được lỗi Javascript nếu có.
• Sửa các phần tử HTML và CSS.
• Xem các request URL gửi lên server.
• Xem các tham số và header của các request.

Nói chung công cụ này là rất cần thiết đối với những bạn lập trình web.

Công cụ Firebug trên Chrome sẽ có tên gọi khác là Firebug lite.

9.2. Inspect Element là gì?

Inspect Element là một tính năng có công dụng giống như Firebug, chỉ có điều nó được tích hợp sẵn vào các trình duyệt chứ không cần phải cài đặt trên internet.

Để mở cửa sổ Inspect Element thì bạn có thể nhấn F12, hoặc tổ hợp phím Ctrl + Shift + I, hoặc click chuột phải vào một vị trí trên trang web và chọn Inspect Element.

Trong đó các tab:

• Elements Là nơi hiển thị danh sách các thẻ HTML và CSS cho thẻ đó.
• Console là nơi hiển thị các lỗi javascript, show kết quả khi bạn chạy lệnh console.log.
• Sources là hiển thị domain các tài nguyên mà trang web hiện tại đang sử dụng.
• Network là nơi hiển thị danh sách các URL mà trang web đang sử dụng.
• Các tab còn lại dành cho những bạn có kién thức chuyên sâu hoặc đang viết JS Framework

Làm việc với Javascript mà không sử dụng Firebug / Inspect Element giống như bạn sử dụng cuốc để cày ruộng vậ đó, nên thay vì sử dụng cuốc thì bạn hãy sử dụng công cụ khác như máy cày đất hoặc trâu cày.

Nói cho vui thôi, nhưng thực sự Firebug là một công cụ rất hữu ích, nó giúp kiểm soát được các lỗi trong Javascript rất dễ dàng. Bạn có thể xem nó như là một tool debug cho JS, HTML và CSS.

Như ví dụ dưới đây là lỗi biến count chưa được định nghĩa.

I.10.Hàm console.log trong Javascript (dùng để xem giá trị của biến)

Trong phần này chúng ta sẽ tìm hiểu hàm console.log trong Javascript, đây là hàm dùng để in giá trị của một biến ra ngoài ô Console của Inspect Element.

Bạn có thể truyền mọi biến vào hàm console, và nó sẽ hiển thị kết quả trong ô console. Bạn có thể áp dụng cho tất cả các loại dữ liệu như number, integer, array, object.

Trong phần này chúng ta sẽ kết hợp Firebug và hàm console.log() luôn nhé.

10.1. Console.log trong Javascript là gì?

Console.log là một hàm của Javascript, được sử dụng để debug / kiểm tra / xem giá trị của một biến trong Javascript. Công dụng của console.log là show ra giá trị của một biến, dù biến đó thuộc kiểu dữ lliệu gì đi nữa thì vẫn được hiển thị ở ô console trong hộp thoại Inspect Element.

10.2. Cú pháp console.log() trong javascript

Lệnh console.log() có cú pháp là console.log(value), trong đó value là một biến hoặc một giá trị mà bạn muốn in ra.

Ví dụ 1: console.log() một biến bình thường

Kết quả:

Ví dụ 2: console.log() một mảng

Kết quả:

Ví dụ 3: console.log() một giá trị

Kết quả:

Ví dụ 4: console.log() một object

Kết quả:

Như vậy hàm console.log() sẽ in ra tất cả các giá trị của một biến nên bạn dễ dàng debug phải không nào. Mình thì rất hay sử dụng console.log để xem kết quả mà ajax trả về có đúng với dữ liệu mong muốn hay không.

I.11.Hàm setTimeout() và setInterval() trong Javascript

Trong phần này chúng ta tìm hiểu hai hàm setTimeout() và setInterval() trong Javascript, đây là hai hàm dùng để hẹn giờ trong JS.

Hai hàm này có chung một đặc điểm là thiết lập và thực hiện một nhiệm vụ nào đó trong một khoảng thời gian nào đó, số lần thực hiện có thể được lặp đi lặp lại hoặc không. Tuy vậy giữa hai hàm cũng có sự khác nhau về số lần lặp và chi tiết thế nào thì các bạn xem các phần dưới đây.

11.1. Hàm setTimeout() trong Javascript

Hàm setTimeout() dùng để thiết lập một khoảng thời gian nào đó sẽ thực hiện một nhiệm vụ nào đó và nó chỉ thực hiện đúng một lần.

Cú pháp: setTimeout(function, time)

Trong đó:

• function: là nội dung cần thực hiện, đây là một hàm
• time: là khoảng thời gian bao nhiêu (tính bằng mili giây) thì function đó sẽ thực hiện

Ví dụ: Sau 3 giây thì xuất hiện câu chào lên màn hình

Trong ví dụ này mình đã truyền tham số thứ nhất là một function và tham số thứ hai là số giây mà function sẽ được thực hiện. Ngoài ra bạn có thể viết lại như sau cho dễ nhìn:

Hàm clearTimeout() trong Javascript

Giả sử bạn xây dựng chức năng sau 3 giây thì sẽ xuất hiện thông báo, tuy nhiên sau 2 giây chương trình muốn hủy bỏ thì phải làm thế nào? Lúc này bạn phải sử dụng hàm clearTimeout().

Tham số truyền vào hàm clearTimeout() là đối tượng setTimeout() nên lúc này ban phải đặt hàm setTimeout() vào một biến cụ thể.

11.2. Hàm setInterval() trong Javascript

Hàm setInterval() có cú pháp và chức năng giống như hàm setTimeout(), tuy nhiên với hàm setInterval() thì số lần thực hiện lã mãi mãi.

Ví dụ: Cứ sau 3 giây thì xuất hiện câu chào một lần

Trong ví dụ này cứ sau ba giây thì sẽ xuất hiện câu chào và số lần thực hiện sẽ là vĩnh viễn, không tin bạn cứ chạy trang web lên và để vậy.

hàm clearInterval() trong Javascript

Tương tự như hàm clearTimeout(), hàm clearInterval() sẽ xóa đi nhiệm vụ mà ta đã thiết lập trong hàm setInterval(), và ta cũng phải đặt setInterval() trong một biến thì mới clear được.

Ví dụ: Sử dụng hàm setInterval() để xuất câu chào lên màn hình và số lần xuất hiện chỉ 1 lần duy nhất

Trong ví dụ này nội dung thực hiện là xuất hiện câu chào và ngay lập tức xóa nhiệm vụ của interval luôn nên nó chỉ thực hiện 1 lần.

 Như vậy sự khác nhau giữa hàm setTimeout() và setInterval() là đối với hàm setTimeout() thì số lần thực hiện là 1 lần và đối với setInterval() thì số lần thực hiện sẽ là mãi mãi cho tới khi bạn sử dụng hàm clearInterval() để can thiệp vào. Việc sử dụng hàm nào thì phụ thuộc vào nhu cầu của bạn và hãy lưu ý điểm khác nhau này để làm cho đúng.

B. Vòng lặp

I.12. Cách dùng vòng lặp for trong Javascript

Nói đến vòng lặp thì hầu như ngôn ngữ lập trình nào cũng có và Javascript cũng không ngoại lệ. Nó là một trong những cấu trúc lệnh khá quan trọng, giúp giải quyết được nhiều bài toán trong thực tế, rút gọn được những đoạn code rườm rà và bị lặp nhiều lần.

1. Vòng lặp for trong Javascript là gì?

Vòng lặp for trong javascript là vòng lặp được dùng để lặp một mảng hoặc một danh sách nằm trong khoảng (min -> max). Đây là vòng lặp có thứ tự và phải biết trước tổng số lần lặp nên thường dùng trong những bài toán liệt kê và xử lý các phần tử trong danh sách mảng.

Vì ta đang học JS căn bản nên trong bài này mình chỉ làm những bài tập đơn giản liên quan đến mảng trong javascript thôi nhé. Trước tiền ta tìm hiểu cấu trúc của nó rồi đi vào vấn đề chính sau:

Trong đó:

• var i = 0; là khai báo biến điều khiển vòng lặp i
• (i = 0) là điểm bắt đầu lặp (lặp từ 0)
• (i < 100) là điều kiện dừng vòng lặp, nghĩa là lặp nếu i < 100. Bạn có thể dùng một điều kiện bất kì thông qua các toán tử miễn là nó trả về true hoặc false như (i <= 100, i == 100)
• (i++) là tăng bước nhảy, bạn có thể dùng công thức khác như i+=2, i-=2, i--, ...

Như ví dụ trên thì ta sẽ có 100 vòng lặp từ 0 -> 99

2. Cách sử dụng vòng lặp for trong javascript

Chúng ta sẽ học cách dùng vòng lặp for trong JS bằng cách làm những bài tập đơn giản nhé.

Ví dụ 1: Lặp với bước nhảy tăng 1 đơn vị.

Ví dụ 2: Lặp với bước nhay giảm 1 đơn vị.

Ví dụ 3: Lặp với bước nhay tăng N đơn vị.

Ví dụ 4: Lặp với bước nhảy giảm N đơn vị.

Ví dụ 5: Khai báo biến lặp (i) ngay trong vòng lặp

Ngoài cách khai báo biến (i) ở ngoài vòng lặp thì ta có thể khai báo trong vòng lặp như ví dụ sau đây:

3. Vòng lặp for vô hạn trong javascript

Mặc dù vòng lặp for được đánh giá là ít khi bị lặp vô hạn vì nó là vòng lặp biết trước tổng số lần lặp. Tuy nhiên, có một số trường hợp lập trình viên đã xử lý bài toán không hợp lý dẫn đến điều kiện thực hiện vòng lặp luôn đúng và dẫn đến lặp vô hạn.

Dưới đây là một ví dụ lặp vô hạn:

Ta thấy bước nhảy là i--, tức là sau mỗi vòng lặp sẽ giảm i xuống 1 đơn vị, trong khi điều kiện dừng là i >= 10, rõ ràng điều kiện này sẽ không bao giờ đúng nên vòng lặp dẫn đến lặp vô hạn.

4. Vòng lặp for lồng nhau trong javascript

Khái niệm vòng lặp lồng nhau cũng giống như lệnh if else trong Javascript lồng nhau, nghĩa là vòng lặp này sẽ nằm trong một vòng lặp khác.

Cấu trúc của nó như sau:

Có một điều lưu ý là hai biến điều khiển vòng lặp phải khác nhau nhé, nếu không chương trình của bạn sẽ hoạt động không đúng. Như trong ví dụ trên thì mình dùng i cho vòng lặp ở ngoài và j cho vòng lặp con phía trong.

Ví dụ: Viết chương trình in ra một ma trận 10x10

Chúng ta thường sử dụng vòng lặp for để giải các bài toán như:

• Kiểm tra số nguyên tố trong JS
• Lặp và xử lý các phần tử trong mảng (sẽ được học trong bài mảng)
• Lặp trong một khoảng từ [a - b]
• Và nhiều dạng toán cơ bản khác.

I.13. Vòng lặp while - do while trong javascript

Vòng lặp while và do while dùng để lặp với trường hợp tá không biết chính xác số lần lặp là bao nhiêu và trường hợp điều kiện dừng vòng lặp quá phức tạp, điều này hoàn toàn khác với vòng lặp for. Khi sử dụng vòng lặp while rất dễ bị lặp vô hạn nếu bạn không xử lý logic.

1. Vòng lặp while trong javascript

Trước tiên hãy xem một chút về cấu trúc của vòng lặp này như sau:

Trong đó condition là điều kiện dừng vòng lặp, nếu condition đúng thì vòng lặp sẽ được thực thi cho tới khi condition có giá trị sai. Chính vì vậy nếu condition luôn luôn đúng thì vòng lặp sẽ dẫn tới lặp vô hạn.

Ví dụ: Dùng vòng lặp while lặp từ 1 tới 10

Trong ví dụ này biến i có giá trị khởi đầu là i = 1, điều kiện dừng vòng lặp là i <= 10. Như vậy sau mỗi bước lặp nếu ta không tăng i lên thì vòng lặp sẽ dẫn tới lặp vô hạn.

Ví dụ: Dùng vòng lặp while lặp từ 10 trở về 1.

Trường hợp này thì lại khác sau mỗi vòng lặp thì ta phải giảm i xuống 1 đơn vị vì điều kiện lặp là i >= 1.

Ví dụ: Lặp với điều kiện phức tạp.

       Ta sẽ làm một ví dụ đơn giản đó là sử dụng hàm prompt trong javascript để lấy thông tin từ người dùng, nếu người dùng nhập vào số trong khoảng 1 -> 10 thì dừng, ngược lại thì yêu cầu họ nhập lại.

Như vậy trường hợp này ta không hề biết là lặp bao nhiêu lần cả phải không nào .

2. Vòng lặp do while trong javascript

Khác một chút so vói vòng lặp while là vòng lặp do while sẽ thực hiện đoạn code bên trong lệnh do mới kiểm tra điều kiện.

Ví dụ khi bạn chơi trò chơi bốc thăm, lần đầu tiên bạn sẽ bốc nếu cây thăm may mắn thì bốc tiếp và ai được nhiều cây thăm may mắn thì thắng, như vậy có nghĩa là bạn sẽ được bốc 1 lần rồi mới kiểm tra điều kiện cho lần bốc kế tiếp. Từ đó suy ra trong vòng lặp do while sẽ luôn luôn thực thi lặp ít nhất 1 lần.

Cấu trúc vòng lặp do while:

Trong đó condition là điều kiện để dừng vòng lặp.

Ví dụ: Chứng minh rằng vòng lặp do while luôn luôn lặp ít nhất là 1 lần

Hồi nãy mình nói có vẻ bạn không tin nên mình sẽ làm một ví dụ luôn. Như bạn biết nếu điều kiện condition là false thì sẽ không lặp thì bây giờ ta cho nó false luôn để xem có lặp không nhé.

Chạy lên bạn sẽ thấy nó có lặp 1 lần. Bây giờ ta thay bằng vòng lặp while xem có lặp không nhé.

Không có thông bào nào xuất hiện, chứng tỏ nội dung bên trong vòng lặp while không được chạy.

Ví dụ: Sử dụng vòng lặp do while để viết lại chương trình yêu cầu nhập các số từ 1 -> 10 ở ví dụ trong phần vòng lặp while.

3. Vòng lặp while - do while lồng nhau

Cũng giống như trong vòng lặp for, ta có thể lồng nhiều vòng lặp while hoặc do while lại với nhau để viết chương trình.

Ví dụ: Dùng vòng lặp while xây dựng ma trận 10x10

Tương tự cho vòng lặp do while, các bạn tự làm lấy nhé.

Điểm lưu ý nhất của bài này là so sánh sự khác biệt giữa vòng lặp while và do while trong javascript, cách sử dụng và khi nào thì sử dụng. Đối với vòng lặp do while thì luôn luôn lặp ít nhất 1 lần, tại vì nó thực hiện code bên trong lệnh do rồi mới kiểm tra điều kiện..

I.14. Lệnh break - continue trong Javascript

Trong vòng lặp, đôi khi bạn muốn dùng vòng lặp hoặc nhảy vòng lặp đến lần lặp tiếp theo một cách đột ngột thì phải làm sao? Rất đơn giản, sử dụng hai lệnh break JS và continule JS sẽ giải quyết được ngay.

1. Lệnh break trong Javascript

Lệnh break có tác dụng dừng vòng lặp cho dù điều kiện của vòng lặp vẫn đang đúng, hay nói cách khác là nó thoát khỏi vòng lặp một cách đột xuất và không quan tâm đến điều kiện lặp.

Lệnh break có thể sử dụng với mọi vòng lặp như vòng lặp for, while và do while, each, ...

Cú pháp break trong js:

Ráp break vào các vòng lặp:

Ví dụ 1: Vòng lặp for lặp từ 1 tới 10 và bị dừng tại vòng lặp thứ 5

Ví dụ 2: Vòng lặp while bị nhảy ra khỏi vòng lặp khi biến i chia hết cho 9

2. Lệnh continue trong Javascript

Khác hoàn toàn với lệnh break, lệnh continue trong javascript có tác dụng bỏ qua một bước lặp nào đó, nghĩa là lúc gặp lệnh continue thì tất cả những đoạn code nằm bên dưới sẽ không được thực hiện mà nó sẽ nhảy qua vòng lặp mới luôn.

Cú pháp continue trong js:

Ráp continue vào các vòng lặp:

Ví dụ 1: Vòng lặp for bỏ qua đoạn code in ra giá trị 5

Ví dụ 2: Vòng lặp while bỏ qua bước lặp nếu i chia hết cho 9

C. Các kiểu dữ liệu (Data Types)

I.15. Xử lý chuỗi (string) trong Javascript

Chuỗi là một loại kiểu dữ liệu quan trọng và thông dụng trong thực tế. Khi bạn cần lưu trữ thông tin vào trong cơ sở dữ liệu thì hơn 90% sẽ được lưu dưới dạng chuỗi. Chính vì vậy bạn cần phải tìm hiểu thật kỹ về các thao tác cũng như những hàm xử lý chuỗi đang có sẵn trong js.

1. Chuỗi string trong Javascript là gì?

Chuỗi là một đoạn text có thể có một hoặc nhiều ký tự và thông thường chúng ta sẽ lưu trữ nó vào một biến, biến này ta sẽ gọi là biến có kiểu dữ liệu là String (chuỗi). Tất cả các chuỗi đều phải được bao quanh bằng cặp dấu nháy đơn ' hoặc nháy kép ".

Ví dụ: Khai báo biến và gán chuỗi string JS

Trường hợp trong chuỗi cũng có xuất hiện dấu nháy đơn hoặc nháy đôi thì bắt buộc bạn phải thêm ký tự \ đằng trước dấu nháy đó, nếu không sẽ bị lỗi về cũ pháp.

Ví dụ: Trong chuỗi string có dấu nháy

Ngoài ra còn nhiều ký hiệu kết hợp với dấu \ nữa như trong bảng dưới đây:

2. Cách nối chuỗi string trong Javascript

Để nối chuỗi string trong JS thì chúng ta sử dụng dấu + để gép hai chuỗi hoặc biến kiểu String Object lại với nhau.

Ví dụ: Ghép hai string lại rồi gán vào biến message.

Hoặc:

3. Xử lý string trên nhiều dòng trong Javascript

Khi bạn muốn Enter xuống hàng một chuỗi trong Javascript thì bắt buộc phải sử dụng dấu + để nối chuỗi, nếu không sẽ bị lỗi cú pháp.

Ví dụ: Dùng dấu + để nối chuỗi

Nếu bạn muốn viết gọn hơn thì sử dụng dấu \ để báo cho trình duyệt biết là có xuống hàng.

Ví dụ: Dùng ký tự \ để khai báo chuỗi trên nhiều dòng.

Hoặc bạn cũng có thể sử dụng dấu `nội dung chuỗi` để khai báo.

Ví dụ: Dùng cặp dấu ``.

4. Ép chuỗi string trong javascript

Nếu bạn muốn ép một giá trị nào đó sang kiểu chuỗi thì có thể sử dụng cú pháp string.toString().

Từ khóa typeof vars sẽ trả về kiểu dữ liệu của biến vars.

Ngoài cách trên bạn có thể sử dụng đối tượng String để tạo hoặc ép chuỗi, và vì là đối tượng nên nó phải có từ khóa new đặt đằng trước.

Ví dụ: Sử dụng String object hoặc String function.

Lúc này dù bạn truyền vào là kiểu gì đi nữa thì kết quả nó vẫn trả về kiểu string. Tuy nhiên người ta khuyến khích bạn không nên sử dụng cách này bởi vì chương trình sẽ chạy chậm hơn.

5. Một số hàm xử lý string trong Javascript

Sau đây mình xin tổng hợp một số hàm / phương thức / thuộc tính dùng để xử lý chuỗi string trong JS.

Đếm số ký tự trong chuỗi

Để đếm tổng số ký tự trong chuỗi string thì ta sử dụng thuộc tính length.

Tìm kiếm chuỗi trong chuỗi

Nếu muốn tìm kiếm một chuỗi bên trong một chuỗi khác thì dùng hàm indexOf.

• Nếu tìm thấy thì nó sẽ trả về vị trí xuất hiện đầu tiên của chuỗi con.
• Nếu không tìm thấy thì tra về -1.

Nếu muốn tìm vị trí xuất hiện cuối cùng của chuỗi con thì dùng hàm lastIndexOf.

Ngoài ra bạn cũng có thể sử dụng hàm search, nó có công dụng giống như hàm indexOf.

I.16. Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..)

Phần trước chúng ta đã tìm hiểu về chuỗi trong javascript và mình cũng có giới thiệu một vài hàm cơ bản. Tuy nhiên, thực tế thì bạn còn phải học cách sử dụng rất nhiều hàm khác nữa như: Hàm cắt chuỗi trong JS, hàm tách chuỗi và nối chuỗi, hàm tìm và thay thế ký tự trong chuỗi.

1. Các hàm xử lý chuỗi trong Javascript

Mình không thể liệt kê hết các hàm được mà chỉ đưa ra những hàm hay sử dụng nhất để bài viết được ngắn gọn hơn.

Tìm kiếm chuỗi string trong JS

Chúng ta có ba hàm thường dùng để tìm kiếm chuỗi con trong Javascript như sau:

• indexOf()
• lastIndexOf()
• search()

Hàm indexOf()

Để tìm kiếm chuỗi con thì ta sử dụng hàm String.indexOf(str), trong đó str là chuỗi con và String là chuỗi cha. Hàm này sẽ trả kết quả về kết quả là vị trí xuât hiện đầu tiên của chuỗi (bắt đầu là vị trí 0), nếu không tìm thấy chuỗi con thì nó sẽ trả về -1.

Hàm lastIndexOf()

Trường hợp nếu chuỗi con xuất hiện nhiều lần trong chuỗi cha thì kết quả cũng trả về vị trí xuất hiện của chuỗi con đầu tiên. Vậy làm thế nào để lấy vị trí của chuỗi con cuối cùng trong chuỗi cha? Ta sẽ sử dụng hàm String.lastIndexOf(str), hàm này sẽ trả về vị trí xuất hiện của chuỗi con cuối cùng và trả về -1 nếu không tìm thấy.

Hàm search()

Ngoài hai hàm trên bạn có thể sử dụng hàm string.search(str) để tìm kiếm, tác dụng của nó cũng giống như hàm string.indexOf(str).

Cắt chuỗi string trong JS

Nếu ban muốn cắt một chuỗi con từ chuỗi cha thì bạn có thể sử dụng ba hàm sau:

• slice(start, end)
• substring(start, end)
• substr(start, length)

Note: tất cả các vị trí của chuỗi đều bắt đầu từ 0, vì vậy khi tính toán vị trí coi chừng bị nhầm lẫn nhé.

Hàm slice()

Hàm slide có hai tham số truyền vào:

• start: vị trí bắt đầu
• end: vị trí kết thúc

Nếu tham số truyền vào là số âm thì nó sẽ tính ngược lại, nghĩa là nó sẽ đếm từ cuối lên.

Nếu bạn chỉ truyền một tham số đầu tiên thì nó sẽ tự hiểu vị trí end là vị trí cuối cùng.

Hàm substring()

Hàm substring() có cách sử dụng giống với hàm slice(), tuy nhiên tham số truyền vào hàm substring() phải luôn luôn lớn hơn 0.

Hàm substr()

Hàm substr() có hai tham số là start và length, trong đó start là vị trí bắt đầu và length là số ký tự muốn lấy bắt đầu từ vị trí start. Nếu bạn truyền tham số start là số âm thì nó sẽ tính từ cuối trở lên, còn tham số length phải luôn luôn là số dương.

Tìm kiếm và lặp chuỗi trong JS

Để tìm kiếm và lặp một chuỗi con nào đó thì bạn sử dụng hàm replace(str_find, str_replace), trong đó str_find là chuỗi cần tìm và str_replace là chuỗi sẽ được thay thế chuỗi str_find.

Chuyển thành chữ hoa và chữ thường trong JS

Để chuyển chuỗi thành chữ hoa ta dùng hàm toUpperCase() và chuyển thành chữ thường ta dùng hàm toLowerCase().

Nối thêm chuỗi

Để nối thêm chuỗi thông thường ta dùng toán tử +, ngoài ra bạn có thể dùng hàm concat() để thực hiện nối chuỗi.

Tìm ký tự hoặc mã ASCII của một ký tự

Để xem ký tự của một vị trí nào đó thì dùng hàm charAt(), còn xem mã ASCII thì dùng hàm charCodeAt(). Cả hai hàm này đều có tham số truyền vào là vị trí muốn xem.

Chuyển đổi chuỗi sang mảng JS

Để chuyển một chuỗi sang mảng thì ta sử dụng hàm split() với tham số truyền vào là ký tự ngăn cách giữa các phần tử.

Vẫn còn nhiều hàm khác nữa, và nếu bạn quan tâm thì hãy tham khảo thêm các tài liệu khác về Javascript functions nhé.

2. Cách lặp qua từng ký tự chuỗi string trong JS

Trong đối tương JS có một thuộc tính lưu trữ tổng số ký tự trong chuỗi, đó là length.

Trong JS, chuỗi được xem là một cấu trúc mảng, vì vậy ta có thể sử dụng vòng lặp để lặp qua từng phần tử của chuỗi rất dễ dàng.

Kết quả:

I.17. Khai báo và duyệt mảng trong javascript.

Việc xử lý mảng trong javascript rất quan trọng, bởi khi làm việc với DOM thì kết quả trả về từ các truy vấn là một mảng các đối tượng HTML. Chính vì điều này nên hôm nay mình viết một bài xử lý mảng trong javascript luôn để trình bày cho các bạn dễ nắm bắt hơn. Trước hết chúng ta tìm hiểu khái niệm mảng là gì đã nhé.

1. Mảng trong Javascript là gì?

Mảng là một loại dữ liệu dạng tập hợp nhiều phần tử, trong đó mỗi phần tử sẽ được đánh dấu vị trí bằng chỉ mục. Nếu mảng có 10 phần tử thì số thứ tự các phần tử sẽ là từ [0 -> 9].

Chúng ta thường sử dụng mảng để lưu trữ dữ liệu dạng danh sách. Ví dụ để lưu trữ danh sách tên sinh viên trong một lớp nào đó thì có thể sử dụng mảng, mỗi phần tử sẽ là tên của một thành viên trong lớp.

Vì là một loại dữ liệu tập hợp có thứ tự nên ta có thể duyệt qua từng phần tử của mảng với các loại vòng lặp mà ta đã học ở các bài trước.

2. Khai báo mảng trong javascript

Chúng ta có hai cách khai báo mảng, thứ nhất là sử dụng từ khóa new Array() và thứ hai là sử dụng cặp dấu ngoặc vuông [].

Khai báo với từ khóa new Array()

Cú pháp: Có thể tạo mảng rỗng hoặc gán giá trị ngay lúc khởi tạo.

Với cách hai thì ta khởi tạo mảng và gán giá trị cho các phần tử luôn ngay lúc khởi tạo.

Khai báo với cặp dấu ngoặc vuông []

Cú pháp: Ta cũng có hai cách như trên.

Tương tự, cách 2 sẽ tạo mảng và gán giá trị cho các phần tử ngay lúc tạo.

3. Truy xuất các phần tử trong mảng

Để truy xuất đến một phần tử trong mảng thì chúng ta phải biết được vị trí cần lấy. Ví dụ mảng có 10 phần tử, và bạn muốn lấy phần tử thứ 5 thì chỉ mục của nó sẽ là (5-1 = 4), tại vì mảng bắt đầu từ 0.

Cú pháp truy xuất phần tử như sau:

Ví dụ: Lấy các phần tử thứ 1, 2, 3 trong mảng t.

Như vậy phần tử đầu tiên sẽ có số chỉ mục là 0, phần tử thứ hai là 1, ... phần tử thứ n là n-1.

4. In mảng ra trình duyệt và console

Để debug xem các giá trị trong mảng thì ta sử dụng hàm join() và console.log(). Hai hàm sẽ in toàn bộ giá trị của các phần tử ra màn hình.

Hàm array.join()

Để hiển thị các phần tử ra ngoài trình duyệt chúng ta sẽ sử dụng hàm array.join(). Ví dụ:

         Như vậy, hàm join được tích hợp sẵn vào đối tượng Array trong javascript, và nó có một tham số truyền vào. Nếu ta không truyền gì vào thì mặc định nó lấy dấu phẩy để ngăn giữa các giá trị khi in lên trình duyệt.

Hàm console.log()

Ngoài ra, chúng ta có thêm một hàm rất hay dùng để debug đó là console.log(). Các bạn hãy cài đặt Firebug trên firefox hoặc dùng chế độ "kiểm tra phần tử" có sẵn trên trình duyệt (chrome cũng tương tự), sau đó chuyển vào mục console như hình dưới đây:

Nếu bạn code bị lỗi cú pháp hoặc một lỗi bất kì liên quan đến javascript thì nó sẽ hiển thị ở ô này, nên bạn phải dùng nó để kiểm tra nếu thấy mã javascript không hoạt động nhé. Như trong hình trên thì dòng chữ đỏ là lỗi, chữ vàng là cảnh báo.

Ví dụ: In mảng t trong console.

Chạy lên thì giao diện trong console sẽ như sau:

5. Sử dụng vòng lặp để duyệt mảng trong javascript

Phần này là quan trọng nhất đấy nhé, chúng ta sẽ học cách sử dụng các vòng lặp đã học để duyệt mảng JS. Nhưng trước tiên chúng ta tìm hiểu cách đếm tổng số phần tử trong mảng như sau:

Để đếm tổng số phần tử của một mảng chúng ta sẽ dùng thuộc tính length của nó.

Mảng có 3 phần tử thì tức là chỉ mục bắt đầu từ 0 -> 2, vì vậy thì sẽ duyệt các số từ 0 - 2 cho vòng lặp.

Duyệt mảng với vòng lặp for

Để lặp mảng với vòng lặp for thì chúng ta phải dùng thuộc tính length như trên để đếm tổng số phần tử. Sau đó, ở mỗi vòng lặp chúng ta sử dụng cú pháp truy xuất đến phần tử của mảng để xử lý.

Duyệt mảng với vòng lặp while

Tương tự, để duyệt mảng với vòng lặp while chúng ta sẽ khai báo một biến index để lưu vị trí đang lặp.

Riêng đối với vòng lặp do while thì không khuyến khích sử dụng để lặp mảng, lý do nó vòng lặp do while luôn luôn lặp ít nhất một lần nên trong trường hợp mảng cần lặp rỗng thì sẽ bị báo lỗi ngay.

Như vậy là bạn đã được học cách khai báo mảng cũng như duyệt mảng trong Javascript. Qua bài này bạn phải nắm vững cấu trúc của mảng, hiểu được số chỉ mục của mảng bắt đầu từ 0 và kết thúc là n-1.

I.18. Các hàm xử lý mảng trong javascript hữu ích

Mảng cũng là một object (đối tượng) nên các hàm mà ta hay gọi chính là các method (phương thức) của đối tượng mảng, vì vậy bạn đừng nhầm lẫn giữa hai khái niệm nhé. Trong Javascript có rất nhiều hàm xử lý mảng nên trong bài này mình chỉ tổng hợp lại những hàm hữu ích nhất. Nếu bạn muốn xem đầy đủ thì đọc ở bài javascript array function nhé.

1. Các hàm xử lý mảng trong javascript

Lưu ý là những hàm này được gắn liền với đối tượng Array, vì vậy ta chỉ áp dụng được trên mảng thôi nhé.

Hàm array.valueOf()

Hàm này có tác dụng tương tự như hàm array.join() mà ta đã học ở bài trước, có nghĩa là nó sẽ nối các phần tử với nhau vào một chuỗi cách nhau bởi dấu phẩy.

Hàm array.push()

Hàm này sẽ thêm một phần tử vào cuối mảng.

Hàm array.pop()

Ngược với hàm array.push(), hàm này có tác dụng xóa đi phần tử cuối cùng trong mảng.

Hàm array.shift()

Hàm xóa phần tử đầu tiên của mảng, sau đó dồn các phần tử phía sau xuống một bậc.

Hàm array.unshift()

Thêm một phần tử vào vị trí đầu tiên của mảng, đồng thời đẩy các phẩn từ phía sau lên một bậc.

Hàm array.splice()

Hàm splice() có ba tham số truyền vào như sau: splice(position_add, num_element_remove, value1, value2, ...).

Trong đó:

• position_add là vị trí sẽ thêm (vị trí đầu tiên là 0)
• num_element_remove là số phần tử sẽ xóa (bắt đầu từ position_add)
• value1, value2, .. là danh sách các phần tử sẽ được thêm vào sau khi tại vị trí position_add và sau khi xóa số lượng num_element_remove phần tử.