You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. Javascript
  4. Javascript cơ bản (Phần 1)

Javascript cơ bản (Phần 1)

Trên trình duyệt, rất nhiều trang web sử dụng JavaScript để thiết kế trang web động và một số hiệu ứng hình ảnh thông qua DOM. JavaScript được dùng để thực hiện một số tác vụ không thể thực hiện được với chỉ HTML như kiểm tra thông tin nhập vào, tự động thay đổi hình ảnh,...

Xem thêm bài viết

Một trang web khi tải về máy mà trình duyệt mở lên cửa sổ gồm những đoạn văn bản và hình ảnh xếp xen kẽ với nhau, đó là do trình duyệt đã mở một file html chứa các thẻ văn bản (<p>) và thẻ hình ảnh (<img>) sau đó nhờ đặt thông số cho các thẻ ở trong file css nên nó được đặt xen kẽ với nhau. Và một điều rất hay ở trang web này đó là bạn sẽ thấy một ô tìm kiếm giúp bạn nhập vào từ khóa để tìm một tin bài trong trang web. Và để làm được điều đó trang web cần thêm file js để chứa mã nguồn lập trình tìm các tin bài có câu từ đúng với từ khóa bạn nhập. File js đó là file lưu ra của ngôn ngữ Javascript

Javascript là một trong 3 ngôn ngữ cơ bản khi bạn bắt đầu học lập trình web (Bao gồm ngôn ngữ HTML, CSS và Javascript). Và bạn chỉ cần soạn thảo mã này trên một text editor thông thường như notepad chẳng hạn, rồi lưu nó ra tập tin js. Mình nói thêm Javascript hay tập tin js nó là một file chương trình riêng và chúng ta sẽ dùng để lấy dữ liệu từ các thẻ html và xử thông qua mã nguồn đã viết rồi trả lại băng cách thêm một thẻ mới trên html vậy. Nôm na thì HTML là một cái màn hình, CSS là công nghệ xử lý hình ảnh để màn hình có màu đẹp hơn và Javascript chính là một máy tính vi xử lý nhận input từ màn hình và trả lại output cho màn hình đấy.

Bây giờ chúng ta sẽ bắt đầu học Javascript:

Các bạn tạo thư mục với tên bất kỳ và tạo 2 file main.html và main.js bằng notepad

File main.html bạn sẽ soạn như sau:

<!DOCTYPE html>
<html>
<head>
 <title>Huynhtong.com</title>
 <script src="main.js"></script>
 <!--Thứ tự ưu tiên bạn cần nhớ là luôn luôn load các file Css trước sau đó là các file js bạn dùng làm thư viện gọi hàm rồi đến file js xử lý công việc cho bạn -->
</head>
<body></body>
</html>

Để liên kết một file js đến file chủ html thì bạn chỉ cần đặt trong cú pháp thẻ <script src"Đường dẫn tới file"></script>

Bây giờ mở file main.html bằng chrome hay internet explorer lên, bạn sẽ thấy là một trang trắng không có gì cả. Giờ bạn hãy thêm code sau vào file main.js nhé

document.write("Hello Việt Nam") // in ra Hello Việt Nam

Bây giờ refresh lại trình duyệt sẽ thấy dòng chữ Hello Việt Nam.

Biến và kiểu dữ liệu

Khác với việc lập trình ứng dụng trên máy tính với C hay Java. Javascript tuy có cú pháp tương đồng với C nhưng bản thân trình duyệt sẽ tự hiểu được kiểu dữ liệu khi gán cho biến. bạn nhập ví dụ bên dưới và chạy thử xem

var a = 5;
var b = 2.5;
var c = "Hi";
document.write(a+b); // 7.5
document.write(a + c); //5Hi

Trình duyệt tự nhận biết kiểu dữ liệu, nếu là number thì cộng với nhau. Còn khác giữa string và number trình duyệt ghép biến kiểu number với biến kiểu string cạnh nhau thôi. Như trên kết quả sẽ ra 7.55Hi

Toán tử

Toán tử số học:

+ (Cộng), - (Trừ), * (Nhân), / (Chia), % (Chia lấy phần dư)

var a;
a = 1+2; //3
a = 1-2; //-1
a = 1*2; //2
a = 1/2; //0.5
a = 1%2; //1

 Toán tử tăng/ giảm:

++, --

var a = 2;
var b;

b = a++; //b = 2 và a = 3 vì a++ == a = a+1 nên b = a = a+1, tính từ trái qua phải là b = a == 2 và a tiếp tục bằng a + 1 == 3;
b = ++a; //b = 3 và a = 3 vì b = (a = a + 1), ưu tiên trong ngoặc trước nên a == 3 và b =a == 3
b = a--; //b = 2 và a = 1
b = --a; //b = 1 và a = 1

 toán tử ++ hay -- được đặt đằng sau biến được hiểu là những phép tính trước biến sẽ được xử lý trước rồi biến này mới đc tăng hoặc giảm 1 đơn vị.

và toán tử ++ hay -- đặt đằng trước biến được hiểu là biến này tăng hoặc giảm đơn vị rồi mới xử lý cùng các phép tính khác

Toán tử quan hệ

dùng để so sánh có hai loại khác nhau:

== (So sánh bằng nhau khác loại vd như 1 == "1" //true)

=== (so sánh bằng nhau cùng loại vd như 1 === "1" //false)

!= (So sánh khác nhau cùng loại  vd như 1 != 1 //false)

!== (So sánh khác nhau khác loại  vd như 1 !== "1" //true)

> (Lớn), >=(Lớn hơn hoặc bằng)

< (Nhỏ), <=(Nhỏ hơn hoặc bằng)

Toán tử luận lý

&& (và)

|| (Hoặc)

! (Phủ định)

 

Toán tử đặc biệt

hay còn gọi là toán tử tam phân: Điều_kiện ? Biểu_thức_đúng: Biểu_thức_sai; //nếu Điều_kiện == true thì trả kết quả là Biểu_thức_đúng và ngược lại.

Câu lệnh điều khiển

Câu lệnh if .. else (Nếu .. thì :3)

cú pháp:

//Cú pháp đơn giản
if (biểu_thức_1) {
    khối lệnh được thực hiện nếu biểu thức 1 đúng;
} 
else {
    khối lệnh được thực hiện nếu cả hai biểu thức trên đều không đúng;
}

// nhiều if lồng nhau
if (biểu_thức_1) {
    khối lệnh được thực hiện nếu biểu thức 1 đúng;
}
else if (biểu_thức_2) {
    khối lệnh được thực hiện nếu biểu thức 2 đúng;
}
else {
    khối lệnh được thực hiện nếu cả hai biểu thức trên đều không đúng;
}

 Kết quả trong cặp ngoặc đơn () cạnh if là true thì thực hiện khối lệnh trong cặp ngoặc nhọn {} gần nhất và tự thoát ra khỏi khối lệnh if. nhưng nếu kết quả trong cặp ngoặc đơn () cạnh if trả về false thì bỏ qua khối lệnh trong cặp ngoặc nhọn {} gần nhất mà chuyển sang khối lệnh trong cặp ngoặc nhọn gần else hoặc else if. Trong trường hợp câu lệnh điều kiện không có else mà kết quả trả về false thì cũng tự thoát khỏi if và thực hiện lệnh tiếp theo trong mã nguồn.

if(1 != 1) {
 document.write(true);
}
else {
 document.write(false);
}
a = 1+2;
//kết quả in ra 
// false
// 3

if(1 != 1) {
 document.write(true);
}
a = 1+2;
//kết quả in ra 
// 3

Câu lệnh switch .. case

cú pháp:

switch (biểu_thức_điều_kiện) {
    case kết_quả_1:
        khối lệnh cần thực hiện nếu biểu_thức_điều_kiện bằng kết_quả_1;
        break;
    case kết_quả_2:
        khối lệnh cần thực hiện nếu biểu_thức_điều_kiện bằng kết_quả_2;
        break;
    default:
        khối lệnh cần thực hiện nếu biểu_thức_điều_kiện cho ra một kết quả khác;
        break;
}

câu lệnh này sẽ so sánh biểu_thức_điều_kiện bằng với kết quả nào thì thực hiện khối lệnh sau kết quả đấy, sau khi thực hiện xong khối lệnh bạn cho thêm lệnh break để chương trình thoát ra khỏi câu lệnh switch...case nếu không chương trình sẽ tự động thực hiện các khối lệnh đằng sau kết_quả đúng đến khi hết lệnh thì thôi

switch (a) {
 case 1:
 case 2:
 case 3:
 case 4:
  document.write("Số nhỏ hơn 5");
  break;
 case 5:
 case 6:
  document.write("Số lớn hơn hoặc bằng 5");
 default:
  document.write("Not a Number"); 
  break;
}
// nhập a = 1, kết quả === case 1 nhưng chưa gặp lệnh break, lệnh sẽ chạy tiếp đến dòng document.write("Số nhỏ hơn 5"); và in "Số nhỏ hơn 5" rồi gặp lệnh break và kết thúc switch

// nhập a = 6, kết quả === case 6 in "Số lớn hơn hoặc bằng 5" nhưng không gặp tiếp break chạy sang cả lệnh của default và in thêm "Not a Number" rồi mới gặp break;

Câu lệnh vòng lặp

câu lệnh for

cú pháp

for (biểu_thức_khởi_tạo; biểu_thức_điều_kiện; biểu_thức_thay_đổi_giá_trị) {
    Khối lệnh cần lặp;
}

Giả sử đặt biểu_thức_khởi_tạo là i = 1, biểu_thức_điều_kiện là i < 5. biểu_thức_thay_đổi_giá_trị là i++

Như vậy là i == 1, vẫn đúng điều kiện i < 5, i sẽ công thêm 1 bằng 2. Khối lệnh đc thực hiện lần đầu tiên và cứ thế i =4, khối lệnh hoạt động lần cuối vì sau khi kiểm tra điều kiện i được tăng lên thành 5 , khối lệnh được thực hiện xong rồi và i < 5 == false câu lệnh for kết thúc. i gắn bằng 1 và điều kiện i < 5 nên khối lệnh được thực hiện lặp lại 4 lần.

câu lệnh while

cú pháp

while (biểu_thức_điều_kiện) {
    khối lệnh cần thực hiện nếu biểu_thức_điều_kiện trả về true;
}

biểu_thức_điều_kiện kiểm tra xem giá trị có trả về bằng true mới tiếp tục lặp lại khối lệnh.

i = 1;
while (i < 5) {
 document.write(i);
 i++;
}
//1
//2
//3
//4

câu lệnh do .. while

cú pháp

do {
        khối lệnh;
}
while (biểu_thức_điều_kiện);

Ở câu lệnh này, khối lệnh sẽ thực hiện trước rồi mới kiểm tra xem biểu_thức_điều_kiện có trả về true hay không.

i = 1;
do {
 i++;
 document.write(i);
}
while(i<5)
//2
//3
//4
//5 sau khi i == 4 (true) tiếp tục tăng i và in ra, sau đó thấy i ko đạt điều kiện nữa thì thoát vòng lặp

 

Tạm thời đến đây thôi, bạn hãy tự làm một số bài tập nho nhỏ như viết cú pháp giải phương trình bậc nhất 1 ẩn và 2 ẩn xem nhé . Mình đã hướng dẫn xong những cú pháp cơ bản trong Javascript (Phần 1). Hẹn gặp lại các bạn trong phần 2

 




Đặt câu hỏi cho bài viết này ?