JavaScript Cơ Bản Phần 1

JavaScript Cơ Bản Phần 1

1. Giới thiệu về JavaScript

JavaScript ban đầu được tạo ra để trang web trông sinh động hơn. JavaScript có thể được viết ngay trong HTML và chạy tự động khi tải trang. Hiện tại JavaScript cũng được sử dụng trong nhiều môi trường khác (như Node.js).

Ngày nay, JavaScript có một vị trí độc nhất là ngôn ngữ trình duyệt được áp dụng rộng rãi nhất, được tích hợp hoàn toàn với HTML/CSS.

2. Hiển thị dữ liệu ra màn hình

Các cách hiển thị dữ liệu JavaScript ra màn hình

2.1 Sử dụng HTML element innerHTML

document.getElementById("demo").innerHTML = 5 + 6;

2.2 Sử dụng HTML output document.write()

document.write(5 + 6);

2.3 Sử dụng alert box alert()

alert(5 + 6);

2.4 Sử dụng browser console console.log()

console.log(5 + 6);

3. Biến trong JavaScript

3.1 Khai báo biến

Một biến (variable) sẽ được cấp phát một vùng nhớ trong bộ nhớ để lưu trữ dữ liệu. Để sử dụng các biến trong JavaScript, trước tiên chúng ta cần tạo nó, tức là khai báo một biến. Để khai báo các biến, chúng ta sử dụng một trong các từ khóa var, let hoặc const.

var x = 5;
let y = 'JavaScript';
const x = { 1, 2, 3 };

3.3 Khi nào sử dụng Var, Let hay Const

• 1. Luôn luôn khai báo biến
• 2. Luôn luôn sử dụng Const nếu giá trị không thay đổi
• 3. Luôn luôn sử dụng Const nếu là Mảng (Array) hay Đối tượng (Object)
• 4. Chỉ sử dụng Let nếu không thể dùng Const
• 5. Chỉ sử dụng Var nếu phải dùng trình duyệt web cũ

3.4 Quy ước đặt tên biến

Tên biến có thể chứa các chữ cái, chữ số, dấu gạch dưới _ và ký hiệu đô-la $.

Tên biến phải bắt đầu bằng một ký tự.

Tên biến cũng có thể bắt đầu bằng $ và _ .

Tên biến trường hợp viết in hoa và viết thường (Y và y là các biến khác nhau)

Các từ khóa (keywords) không thể được sử dụng làm tên biến.

3.5 Các kiểu dữ liệu thường gặp

// Numbers:
let length = 16;
let weight = 7.5;

// Strings:
let color = "Yellow";
let lastName = "Johnson";

// Booleans
let x = true;
let y = false;

// Object:
const person = {firstName:"John", lastName:"Doe"};

// Array object:
const cars = ["Saab", "Volvo", "BMW"];

// Date object:
const date = new Date("2022-03-25");

3.6 Lệnh, Khối lệnh, Từ khóa

var x = 5;
if (x > 10){
console.log('true');
}


var, if, console.log là các từ khóa

var x = 5; là một câu lệnh, câu lệnh này kết thúc bằng dấu ;

{...} là một khối lệnh

3.7 Phạm vi của biến (scope)

Có 3 loại: Phạm vi khối (block), Phạm vi hàm (function), Phạm vi toàn cục (Global).

Let và Const cung cấp phạm vi khối (block scope)

Các biến được khai báo trong {...} không thể sử dụng bên ngoài

{
let x = 2;
}


Phạm vi cục bộ (local scope) & Phạm vi hàm (function scope)

Các biến cục bộ chỉ được công nhận bên trong các hàm chứa chúng, các biến có cùng tên có thể được sử dụng trong các hàm khác nhau. Các biến cục bộ được tạo khi một hàm bắt đầu và xóa khi hàm được hoàn thành.

// code here can NOT use carName
function myFunction() {
let carName = "Volvo";
// code here CAN use carName
}
// code here can NOT use carName


Phạm vi toàn cục (Global scope)

Biến khi được khai báo với các từ kháo let, var và const bên ngoài hàm sẽ có phạm vi toàn cục. Có nghĩa là có thể truy cập từ bất cứ đâu.

var x = 2;// Global scope
let x = 2;// Global scope
const x = 2;// Global scope

4 Các loại toán tử (Operators)

4.1 Toán tử gán (Assignment Operator)

Toán tử gán dùng đến gán giá trị cho biến

Toán tử	Ví dụ	Tương đương
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y
**=	x **= y	x = x ** y

// Assign the value 5 to x
let x = 5;
// Assign the value 2 to y
let y = 2;
// Assign the value x + y to z:
let z = x + y;

4.2 Toán tử số học (Arithmetic Operators)

Toán tử	Mô tả
+	Addition
-	Subtraction
*	Multiplication
**	Exponentiation (ES2016)
/	Division
%	Modulus (Division Remainder)
++	Increment
--	Decrement

let x = 5;
let y = 2;
let a = x + y;
let b = x - y;
let c = x * y;
let d = x / y;
let e = x % y;
x++;
let f = x;
x--;
let g = x;
let h = x ** 2;

4.3 Toán tử so sánh (Comparison Operators)

Toán tử	Mô tả
==	equal to
===	equal value and equal type
!=	not equal
!==	not equal value or not equal type
>	greater than
<	less than
>=	greater than or equal to
<=	less than or equal to
?	ternary operator

4.3 Toán tử logic (Logical Operators)

Toán tử	Mô tả
&&	logical and
||	logical or
!	logical not