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

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

Sau khi về các câu lệnh cơ bản của Javascript, chúng ta sẽ chuyển tiếp sang phần 2 để hoạc cách dùng hảm, mảng và đối tượng

Xem thêm bài viết

Tiếp tục học về những điều cơ bản trong javascript, bài học này chúng ta sẽ tìm hiểu về hàm (function), mảng (array) và đối tượng (Object)

Hàm - Function


Trong lập trình, hàm được hiểu như là một chương trình con, bạn có thể truyền một một tham số vào chương trình con và chương trình sẽ thực hiện đưa ra một kết quả cho bạn. điều thú vị của hàm là gì, giả sử bạn có 2 vòng lặp

// làm 3 đĩa rau luộc
for(i = 1; i <= 3; i++)
rửa rau
luộc rau
và cho ra đĩa
// làm 3 đĩa thịt luộc
for(i = 1; i <= 3; i++)
rửa thịt
luộc thịt
và cho ra đĩa

Bạn có thể thấy 2 vòng lặp khác nhau nhưng có 2 khối lệnh giống nhau, nếu như phải luộc nhiều thứ thì chắc bạn sẽ phải mỏi tay gõ đi gõ lại, mà trong lập trình có quy tắc don't repeat your self, tức là không lặp lại một khối lệnh nhiều lần. Với function thì bạn có thể đơn giản hóa mọi việc như sau:

function luộc (Nguyên liệu) {
Rửa Nguyên liệu;
Luộc Nguyên liệu;
return Cho Nguyên liệu ra đĩa;
}
// luộc 3 đĩa rau
for(i = 1; i<= 3; i++){
luộc(rau);
}
// luộc 3 đĩa thịt
for(i = 1; i<= 3; i++){
luộc(thịt);
}
// luộc 3 đĩa trứng
for(i = 1; i<= 3; i++){
luộc(trứng);
}

Như vậy, nhờ function mình đã đơn giản hóa được công việc luộc thức ăn mà không cần lặp đi lặp lại nhiều dòng code.

Bây giờ chúng ta sẽ làm quen với hàm trong javascript bằng cú pháp khai báo sau:

Khai báo hàm: Chúng ta có 2 cách khai báo hàm

Cách 1: Function Declaration

//Tạo hàm
function Tên_Hàm(đối_số_1, đối_số_2,..., đối_số_n) {
	//Khối lệnh 
	return Giá_trị_cần_trả_về;
}
//Gọi hàm
Tên_Hàm(đối_số_1, đối_số_2,..., đối_số_n);

Với cách này chúng ta có thể gọi hàm tại bất kỳ đâu trong chương trình. Do trình duyệt sẽ tự kểm tra và đưa hàm vào bộ nhớ tạm nên bạn hoàn toàn có thể gọi hàm ở bất kỳ đâu dù chưa bắt đầu viết hàm. Tuy nhiên nếu trang web để quá nhiều hàm như vậy có thể sẽ chiếm dụng nhiều bộ nhớ.

Cách 2: Function Expression

//Tạo hàm
var Tên_Hàm = function(đối_số_1, đối_số_2,..., đối_số_n) {
	//Khối lệnh 
	return Giá_trị_cần_trả_về;
}
//Gọi hàm
Tên_Hàm(đối_số_1, đối_số_2,..., đối_số_n);

Khai báo kiểu này thì hàm chỉ có thể gọi sau khi đã khai báo hàm. Và khi bắt đầu gặp hàm khai báo này mới được vào bộ nhớ tạm, trái ngược với kiểu Function Declaration sẽ không chiếm nhiều bộ nhớ.

Sau khi khai báo xong, mình sẽ hướng dẫn các bạn sử dụng hàm.

Nhắc lại chương trình có nghĩa là bạn đưa vào một yêu cầu (input), khối lệnh đằng sau dấu {} sẽ xử lý và in lên màn hình kết quả bạn muốn (output). Bạn xem với một hàm bên dưới:

a = 1;
b = 2;
function Sum( num1, num2) {
    return console.log(num1 + num2);
}
Sum(a, 3); // 4
Sum(a, b); // 3
Sum(b, 6); // 8

Tham số mà bạn muốn chuyển vào hàm có thể là một biến được gán giá trị nhất định hoặc chỉ cần là số mà bạn muốn nhập. Các bạn cũng lưu ý về việc khai báo biến nhé, hãy xem hàm bên dưới:

a = 1;
b = 2;
function Sum() {
    var a = 2;
    b = 5;
    return console.log(" Sum a = " + a + " Sum b = " + b);
}
Sum(); //  Sum a = 2 +  Sum b = 5
console.log(a); // 1
console.log(b); // 5

Bạn có thể thấy chương trình luôn thực hiện từ trên xuống dưới, từ trái qua phải. Đối với các ngôn ngữ thông thường thì khối lệnh trên chắc chắn hàm trên sẽ in ra a = 2 vì hàm Sum được gọi ra trước. Tuy nhiên trong Javascript, việc khai báo var đặt trong hàm sẽ khai báo một giá trị a mới, và nó chỉ thực hiện trong hàm Sum mà thôi, nó còn được gọi là local variable (Biến cục bộ), còn việc không dùng từ khóa var khiến giá trị biến b có thể thay đổi khi chương trình thực hiện từ trên xuống dưới.

Mảng - Array

Mảng trong JavaScript là một bảng liên kết chỉ mục đến giá trị. Trong JavaScript, tất cả các đối tượng đều có thể liên kết chỉ mục đến giá trị, nhưng mảng là một đối tượng đặc biệt có thêm nhiều tính năng xử lý chỉ mục và dữ liệu đặc biệt.

Cách khai báo mảng: 

var arrayName = [data, data1, dataN]; // Khai báo
arrayName[dataN]; // truy xuất phần tử mảng

 Bạn có thể hiểu về mảng như thế này, bạn có một cái bảng, bạn rất khéo tay dán 5 miếng giấy nhớ lên để lưu lại thông tin, bạn đã cho ai mượn tiền.:

Mảng

Đây là một mảng gồm 5 giá trị đếm từ 0 1 2 3 4 - var Vay = [0, 1, 2, 3, 4]. Bạn có 5 trăm nghìn và cho  5 người vay đều nhau. nên các giá trị trong mảng được sửa như sau

 

Ví_Tiền = 500;
var Tiền_Vay = [];
for (var i = 0; i < Ví_Tiền; i++) {
	Tiền_Vay[i] = 100;
	Ví_Tiền = Ví_Tiền - Tiền_Vay[i];
	if(Ví_Tiền == 0){
		break;
	}
}
for(var i = 0; i < Tiền_Vay.length; i++) {
	document.writeln(Tiền_Vay[i]);
}

Như vậy bạn có danh sách 5 người đã vay tiền của bạn. Bây giờ chúng  sẽ làm một danh sách đầy đủ thông tin hơn, như tên người vay chẳng hạn. Nhưng trước hết chúng ta sẽ học thêm lý thuyết nữa là Đối tượng - Object

Đối tượng - Object

Đối tượng là gì, giả dụ chiếc ô tô có thuộc tính sau: màu sắc: đỏ, chất liệu: kim loại, giá: 800. Như ví dụ vay tiền trên ta có đối tượng Người vay tiền, gồm thuộc tính số tiền vay và tình trạng trả nợ

Chúng ta có cách thức khởi tạo một đối tượng như sau:

var myObject = {
    key: value,
    key: value,
    key: value
};

Tương tự ta sẽ tạo một đối tượng vay tiền như sau:

var Người_vay_0 = {
    Số_tiền_vay: 100,
    Tình_trạng: 'Chưa trả'
};
var Người_vay_1 = {
    Số_tiền_vay: 100,
    Tình_trạng: 'Chưa trả'
};
var Người_vay_4 = {
    Số_tiền_vay: 100,
    Tình_trạng: 'Chưa trả'
};

Ngoài ra còn thêm cách tạo object nữa

var myObj = new Object();
myObj.key = value;

Tương tự:

var Người_vay = new Object();
Người_vay.name = "Người Vay 1";
Người_vay.Tiền_vay= 100;
Người_vay.Tình_Trạng = "Chưa trả";

Bây giờ để kết thúc bài học, chúng ta cùng làm bài tập về tạo danh sách những người vay tiền nhé:

Ví_tiền = 500; // Tổng số tiền bạn có để cho vay
var Danh_sach = []; // Khởi tạo mảng Danh Sách
// Tạo Danh sách người vay tiền
for (var i = 0; i < Ví_tiền; i++) {
    Danh_sach[i] = new Object(); // Khởi tạo đối tượng cho phần tử mảng
    Danh_sach[i].name = prompt("Nhập tên người vay: ");
    Danh_sach[i].Tiền_vay = prompt("Nhập số tiền vay: ");
    Ví_tiền = Ví_tiền - Danh_sach[i].Tiền_vay;
    if( Ví_tiền == 0) {
    break;}
}

// In danh sách những người vay tiền
document.writeln("Danh sách " + Danh_sach.length + " người vay " + '<br>')
for (var i = 0; i <= Danh_sach.length; i ++){
    document.writeln(" Tên người vay: " + Danh_sach[i].name + '<br>');
    document.writeln(" Số tiền vay: " + Danh_sach[i].Tiền_vay + '<br>');    
    document.writeln("====================================" + '<br>');
}

 




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