Chuỗi bài viết này hướng đến đối tượng chưa biết gì về JS. Mình sẽ hướng dẫn nhập môn với cách giải thích dễ hiểu và đơn giản nhất do đó sẽ có một số kiến thức không chuẩn xác 100% về mặt thực tế diễn ra ở low-level hoặc compiler, mong cả nhà thông cảm và ủng hộ series này của mình nhé!
JS Là gì?
Fun fact: JavaScript nghe thì có vẻ giống Java nhưng thật ra 2 ngôn ngữ này…..chả liên quan gì nhau
Javascript là một ngôn ngữ lập trình bậc cao có thể sử dụng ở cả server-side services (nodejs, express framework, nestjs, …) hoặc client-side application (reactjs, angular, vuejs,…).
Trong chuỗi bài này, để chạy code javascript chúng ta sẽ sử dụng nodejs.
Cài đặt môi trường
Các phần mềm cần cài đặt:
- Visual Studio Code (VSCode – Text Editor dùng để viết code): https://code.visualstudio.com/download
- NodeJS: https://nodejs.org/en/download/
Nhập môn JavaScript
Tìm hiểu chung
Khi bắt đầu học một ngôn ngữ mới, chúng ta cần tìm hiểu về bảng chữ cái và các quy tắc ngữ pháp cơ bản. Tương tự như thế, khi bắt đầu với một ngôn ngữ lập trình mới (ở đây là Javascript) thì chúng ta cần phải hiểu về các từ khóa và cú pháp/cấu trúc chương trình.
Trong javascript chúng ta sẽ gặp một số từ khóa cơ bản sau:
- var/let: từ khóa dùng để khai báo biến (giá trị thay đổi được)
- const: từ khóa dùng để khai báo hằng số (giá trị không thay đổi trong suốt quá trình chạy chương trình)
- if (…) {…} else {…}: Cấu trúc rẽ nhánh điều kiện nếu….thì….ngược lại thì….
- for (var i=….; i<…..; i++) {…..}: Cấu trúc vòng lặp từ….đến…. lặp lại các thao tác……..
- function …..(…..) {….}: Khai báo hàm có tên ….. nhận vào các tham số …… và thực hiện các thao tác ……
- return ……; trả về giá trị …. cho hàm
Lưu ý: các chỗ ….. là tên/giá trị khác nhau trong các trường hợp, mình đã sắp xếp theo đúng thứ tự để mọi người đọc và dễ hình dung
Trong phạm vi phần 1 này, chúng ta sẽ chỉ tìm hiểu về Biến và các toán tử trong JS.
Console.log
Trước khi nói về biến và toán tử, mình sẽ giới thiệu tới mọi người một công cụ để giúp chúng ta in kết quả ra màn hình dòng lệnh nhằm kiểm tra xem kết quả của chúng ta có đúng như mong đợi hay không: console.log.
Cách sử dụng console:
console.log("Hello world"); // In ra dòng chữ Hello world
console.log("Hello world\n"); // In ra dòng chữ Hello world và xuống dòng
console.log(1234321); // In ra số 1234321Biến
Bắt đầu với khái niệm cơ bản nhất trong lập trình: Biến.
Biến được định nghĩa là 1 vùng nhớ chứa dữ liệu có thể thay đổi được. Nói đơn giản, 1 biến chính là 1 nơi để chứa dữ liệu của bạn (dữ liệu này có thể là các con số, chuỗi kí tự, giá trị nhị phân đúng/sai, …)
Để khai báo 1 biến trong JS, ta sẽ sử dụng từ khóa var/let (Để đơn giản hóa thì tất cả bài trong series này sẽ sử dụng var):
var bien_1 = 10; // Biến 1 có kiểu số nguyên (âm)
var bien_2 = -10; // Biến 2 có kiểu số nguyên (âm)
var bien_3 = 5.513; // Biến 3 có kiểu số thực
var bien_4 = "abc"; // Biến 4 có kiểu chuỗi kí tự (abc)
var bien_5 = 'x'; // Biến 5 có kiểu kí tự (x)
var bien_6 = true; // Biến 6 có kiểu Đúng/Sai (true là đúng)
// Ta cũng có thể sử dụng console.log với biến để in ra giá trị hiện tại của biến
console.log(bien_1); // 10
console.log(bien_4); // abc
console.log(bien_6); // trueToán tử
Trong số học, ta có các phép toán cơ bản: cộng, trừ, nhân, chia, modulo (chia lấy dư). Ngôn ngữ JS cũng có các phép toán tương tự với các biến kiểu số nguyên/số thực:
var x = 10; // Khai báo biến x có giá trị = 10
var y = 20; // Khai báo biến y có giá trị = 20
var result = x + y; // Gán giá trị của biến result = x + y
console.log(result); // 30
// Gán giá trị của biến result = y - x.
// Lưu ý lúc này biến result đã được khai báo ở trên nên không cần từ khóa var trước nó nữa.
result = y - x;
console.log(result); // 10
result = x * y; // Gán giá trị result = x nhân y
console.log(result); // 200
result = y / x; // Gán giá trị result = x / y
console.log(result); // 2
result = y % 15; // Gán giá trị result = y mod 15 (y chia lấy dư cho 15)
console.log(result); // 5Bên cạnh đó, ta cũng có thể thực hiện các phép toán so sánh:
var a = 10;
var b = 15;
console.log(a == 10); // true
// Lưu ý so sánh bằng là 2 dấu bằng.
// Thật ra, có phép so sánh dùng 3 dấu bằng nhưng mình sẽ nói về vấn đề này ở bài sau.
console.log(a > 10); // false
console.log(a >= 10); // true
console.log(a < b); // true
console.log(a <= 10); // true
console.log(a <= 9); // falseĐối với kiểu chuỗi kí tự và kiểu đúng sai, chúng ta cũng có một số toán tử sau:
// Toán tử phủ định
var flag = true;
console.log(flag); // true
console.log(!flag); // false
flag = !flag;
console.log(flag); // false
console.log(!flag); // true
// Toán tử nối chuỗi (+)
var s1 = "Hello";
var s2 = " world";
console.log(s1); // Hello
console.log(s2); // world
console.log(s1 + s2); // Hello world
// Phép so sánh chuỗi
var x1 = "check";
var x2 = "check2";
console.log(x1 == "check"); // true
console.log(x2 == "check"); // falseCấu trúc rẽ nhánh đơn giản
Trước khi bắt đầu phần này, tôi cần lưu ý với các bạn là tất cả các phép so sánh số học và so sánh chuỗi đều trả về kiểu đúng/sai (kiểu true/false, kiểu boolean).
Cấu trúc rẽ nhánh điều kiện là một cấu trúc được sử dụng nhiều nhất trong lập trình. Giả sử tôi cần viết một chương trình với yêu cầu sau đây:
Viết một chương trình tư vấn thông minh. Sử dụng một biến có tên là weather sẽ kiểm soát việc tôi có được ra ngoài trời chơi hay không. Nếu weather có giá trị là sunny thì in ra chữ “Sunny day, you should hangout!”, ngược lại thì in ra chữ “Should go to bed”.
var weather = "sunny"; // Khởi tạo biến weather với giá trị là sunny
if (weather == "sunny") { // Nếu weather có giá trị là sunny thì thực hiện các thao tác sau
console.log("Sunny day, you should hangout!");
} else { // Nếu không thì thực hiện các thao tác sau
console.log("Should go to bed");
}
// Kết quả in ra: Sunny day, you should hangout!
weather = "raining"; // gán biến weather với giá trị là raining
if (weather == "sunny") { // Nếu weather có giá trị là sunny thì thực hiện các thao tác sau
console.log("Sunny day, you should hangout!");
} else { // Nếu không thì thực hiện các thao tác sau
console.log("Should go to bed");
}
// Kết quả in ra: Should go to bedVậy là đã xong. Nhưng bây giờ giả sử chương trình nhận được yêu cầu nâng cấp như sau thì sao:
Viết một chương trình tư vấn thông minh. Sử dụng một biến có tên là weather sẽ kiểm soát việc tôi có được ra ngoài trời chơi hay không. Nếu weather có giá trị là sunny thì in ra chữ “Sunny day, you should hangout!”, nếu weather là windy thì in ra chữ “I wanna fly!!!”, nếu weather là raining thì in ra chữ “Cannot go anywhere”, còn các trường hợp khác thì in ra chữ “Unknown”
Giải pháp ngây thơ
Đơn giản và hiệu quả nhất, ta sẽ dùng các câu if lồng vào nhau:
var weather = "raining";
if (weather == "sunny") {
// Nếu là sunny
console.log("Sunny day, you should hangout!");
} else {
// If lồng bên trong khối else của 1 cấu trúc if khác
// Nếu không phải sunny, tiếp tục kiểm tra 2 điều kiện còn lại (windy và raining)
if (weather == "windy") {
// Nếu là windy
console.log("I wanna fly!!!");
} else {
// Nếu không phải windy, tiếp tục kiểm tra 1 điều kiện còn lại (raining)
if (weather == "raining") {
// Nếu là raining
console.log("Cannot go anywhere");
} else {
// Các trường hợp còn lại
console.log("Unknown");
}
}
}
// Kết quả in ra: Cannot go anywhereGiải pháp “xịn xò”
Thực tế, chúng ta hoàn toàn có thể thay thế đoạn code sau:
if (...) {
....................
} else {
if (...) {
...................
} else {
...................
}
}Bằng đoạn code sau:
if (...) {
....................
} else if (...) {
...................
} else {
...................
}Như chúng ta có thể thấy, cấu trúc chương trình đã gọn đi và dễ nhìn hơn rất nhiều. Ta có thể viết lại chương trình “ngây thơ” ở trên như sau:
var weather = "raining";
if (weather == "sunny") {
// Nếu là sunny
console.log("Sunny day, you should hangout!");
} else if (weather == "windy") {
// Nếu là windy
console.log("I wanna fly!!!");
} else if (weather == "raining") {
// Nếu là raining
console.log("Cannot go anywhere");
} else {
// Các trường hợp còn lại
console.log("Unknown");
}
// Kết quả in ra: Cannot go anywhereKết luận
Như vậy, chúng ta đã kết thúc phần 1 của series bài Nhập môn JS – JS From Zero To Hero. Nếu có thắc mắc gì thì hãy comment ngay bên dưới bài viết này nhé.
Một số note liên quan đến bài này mình có publish lên link github sau: https://github.com/hoangduy0610/ncc-sg-qa-basic-js
