programming javascript

Cách viết code JavaScript

JavaScript [JS] là một ngôn ngữ lập trình thông dịch [được dịch lúc chạy], JavaScript ngày nay được ứng dụng rộng rãi trên nhiều môi trường khác nhau, nó tạo ra các ứng dụng chạy phía Server [xem như NodeJS], các ứng dụng di động [xem React] ... Javascript được sử dụng rất phổ biến để tích hợp vào các trang web, chạy ngay trong trình duyệt phía client giúp cho Website có được cách tương tác linh hoạt hơn với người dùng.

Trong phần cơ bản về JS này chỉ trình bày JavaScript nhúng vào các trang web [HTML] chạy trên môi trường trình duyệt, tuy nhiên kiến thức cũng đủ làm cơ sở để học nâng cao với các Javascript Engine khác nhau [như NodeJS - V8].

Đọc thêm: Mỗi trình duyệt có một JavaScript Engine, nó có chức năng phân tích mã JavaScript, tạo ra môi trường chạy mã JavaScript - như trong Google Chrome là Blink, FireFox là Gecko, Safari là Nitro, Microsoft Edge là Chakra ...

ECMAScript [ES] và Javascript: ES là các đặc tả kỹ thuật cho một ngôn ngữ kịch bản [Script] do tổ chức European Computer Manufacturers Association [ECMA] soạn thảo và ban hành thành tiêu chuẩn ISO [Hiện đang phiên bản ES6 - ECMA-262, nếu thích xem đầy đủ tải ở đây: Standard ECMA-262]. Từ đặc tả kỹ thuật này một số ngôn ngữ kịch bản triển khai như Javascript, JSscript, ActionScript. Như vậy Javascript có thể được coi là ES được mở rộng thêm [thêm các API tương tác với DOM].

Viết mã JavaScript đầu tiên

Cách 1 -Nhúng JS trong HTML Cách thứ nhất là mã JavaScript được viết nhúng trong văn bản HTML với thẻ

document.write["Hello World!
"];

document.write["Hello World!
"];

1 ở cửa sổ trình duyệt.

Hàm

document.write["Hello World!
"];

2 để viết một chuỗi ra văn bản HTML.

Hàm

document.write["Hello World!
"];

2 có thể sử dụng để xuất văn bản text thuần túy, mã HTML hoặc cả hai. Ví dụ định dạng văn bản viết ra bằng thẻ HTML

document.write["Hello World!
"];

Lưu ý: Thẻ

Trong ví dụ trên thẻ

document.write["Hello World!
"];

6 sau đó file đó được nhúng vào HTML bằng thẻ

document.write["Hello World!
"];

8 hoặc

document.write["Hello World!
"];

9, bạn đặt ở vị trí nào mà mã JavaScript được chạy.

0 bạn muốn tích hợp vào trang mà không cần thiết phải tải

1 đó về.

Chú thích trong JavaScript

Chú thích trong JavaScript [các chữ, mã không không được thi hành - bạn viết vào để ghi chú gợi nhớ khi đọc lại code]. Bạn có thể viết một dòng chú thích sau ký hiệu

2 hoặc nhiều dòng chú thích nằm giữa

Chạy JS trong Console

Trong các trình duyệt để hỗ trợ nhà phát triển kiểm tra thử code Javascript, xem log ... chúng đều cung cấp một cửa sổ, nơi đó có một

4 để bạn gõ [hoặc dán - paste] mã script mà mã đó sẽ chạy luôn. Bạn có thể mở cửa sổ Console bằng cách:

Trong Chrome, Firefox gõ phím:
5
Trong IE nhấn
6 để xuất hiện công cụ Develope, sau đó nhấn
7

Ví dụ, mở

8 trình duyệt của bạn ra, gõ thử như hình vẽ và xem JS nó hoạt động ra sao [ở hình vẽ có thực hiện gán biến a = 15, b = 25, sau đó thực hiện phép nhân, cuối cùng là popup một thông báo.

Log Javascript

Trong quá trình các đoạn code hoạt động, nếu bạn lưu lại các dấu vết ở bất kỳ thời điểm nào bạn hãy dùng cú pháp:

Từ lúc ra đời đến nay, javascript đã thay đổi rất nhiều, tính đến nay. Chúng ta có hàng chục các viết cho 1 điều kiện trong javascript, rất nhiều các để giải quyết 1 vấn đề, có thể rất dài dòng hoặc phức tạp. Đến nay, các cách giải quyết dang được các nhà sáng lập JavaScript đơn giản hoá nó bằng các cách thức đơn giản hơn qua từng phiên bản.

Trong bài viết này, chúng ta sẽ đào bới một số kỹ thuật giúp ta thuận lợi hơn trong quá trình code, ngoài ra cũng tăng khả năng teamwork cho bạn và partner.

Sử dụng phương thức includes

Một câu điều kiện dài dòng thế này, có thể dài hơn sức tưởng tượng của bạn

 
if [value === 'a' || value === 'b' || value === 'c'] { ... }

Chúng ta có thể thay thế chúng, bằng phương thức includes của Array.prototype.method

 
if[["a", "b", "c"].includes[value]] {}

Sạch sẽ hơn và giúp bạn tránh quá nhiều điều kiện

 
if[["a", "b", "c"].includes[value]] {}

Chuyển đổi Boolean bằng Double !

Có thể sử dụng 2 lần dấu

 
if[["a", "b", "c"].includes[value]] {}

1 để chuyển đổi một biến bất kỳ sang dạng

 
if[["a", "b", "c"].includes[value]] {}

2 để xử lý điều kiện của bạn

 
const isLoading = null;
const inMyMind = ""


  
console.log[!!isLoading] // false
console.log[!!inMyMind] // true

Optional Chaining

Trong javascript, bạn thường sẽ cần truy xuất các

 
if[["a", "b", "c"].includes[value]] {}

3 trong

 
if[["a", "b", "c"].includes[value]] {}

4. Một số trường hợp chúng ta sẽ truy xuất các

 
if[["a", "b", "c"].includes[value]] {}

3 không hề tồn tại, như thế javascript sẽ báo lỗi. Chúng ta có thể khắc phục nó bằng cách sử dụng

 
if[["a", "b", "c"].includes[value]] {}

 
if[["a", "b", "c"].includes[value]] {}

6 sẽ truy xuất và trả về giá trị trước đó nếu phía sau

 
if[["a", "b", "c"].includes[value]] {}

8 không tồn tại.

 
const obj = {
	name: "a",
	age: 20,
}

console.log["data", obj.name, obj.age]; // Hiển thị dữ liệu
console.log["Not optional chaining", obj.haha];
console.log["Optional Chaining", obj?.nooooo];

Không sử dụng else khi dùng if

Thông thường, chúng ta sẽ hay viết điều kiện nếu a thì b thế này

 
if [...] {
  return a
} else {
  return a
}

Chúng ta có thể thay thế bằng cách này, chuyển các điều kiện không tồn tại vào

 

  
if[["a", "b", "c"].includes[value]] {}

0 và trả về điều kiện thoả như bên dưới

 
if[!isOpen] {
	return;
}

return "OK";

Thay thế .forEach bằng .map, .filter, .reduce, .. etc

Mình cảm thấy rất khó chịu khi sử dụng

 
const isLoading = null;
const inMyMind = ""

console.log[!!isLoading] // false
console.log[!!inMyMind] // true

0 để lọc dữ liệu một mảng hoặc thay đổi cấu trúc của phần tử trong mảng bằng

 
const isLoading = null;
const inMyMind = ""

console.log[!!isLoading] // false
console.log[!!inMyMind] // true

0, thường sẽ phải tạo một mảng khác để chứa những dữ liệu được thay đổi. Thay vì vậy, mình sử dụng các

 
const isLoading = null;
const inMyMind = ""

console.log[!!isLoading] // false
console.log[!!inMyMind] // true

2 đã được cung cấp hỗ trợ code tốt hơn và dễ đọc hơn rất nhiều.

.forEach vs .filter

Thử nghiệm: Lọc mảng chỉ lấy các số khác 0

 
const numbers = [1,2,23,4,5,0,1,0,2]
// .forEach
 let filtered = [];

numbers.forEach[numb => {
	if[numb !== 0] {
		filtered.push[numb];
	}
}]

  

console.log[filtered];

// .filter
let usingFilter = numbers.filter[numb => numb !== 0];

Cùng một kết quả nhưng

 
const isLoading = null;
const inMyMind = ""

console.log[!!isLoading] // false
console.log[!!inMyMind] // true

3 nhỉnh hơn về thời gian viết code và dễ hiểu hơn.

Map

Tương tự, mình muốn nhân các số trong mảng với 2 với

 
const isLoading = null;
const inMyMind = ""

console.log[!!isLoading] // false
console.log[!!inMyMind] // true

4 chỉ cần

 
let results = [1,2,3,4].map[el => el * 2];

console.log[results];

Reduce

Hay là thử tính tổng một mảng nhé.

 
let results = [1,2,3,4,5].reduce[[total, numb] => total + numb, 0];

console.log[results];

Nhìn thôi chúng ta cũng đủ thấy sự khác biệt nếu sử dụng

 
const isLoading = null;
const inMyMind = ""

console.log[!!isLoading] // false
console.log[!!inMyMind] // true

0 và các thương thức tương tự này.

Tham khảo thêm về các phương thức của mảng trong javascript: Tại mozilla

Kết luận

Hãy thử nghiệm và áp dụng vào dự án của bạn thử nhé. Sẽ tốt hơn nhiều lần so với cách viết code phức tạp mà chúng ta nghĩ ra đó.

Viết mã JavaScript đầu tiên

document.write["Hello World!"];0

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

Chú thích trong JavaScript

Chạy JS trong Console

Log Javascript

Sử dụng phương thức includes

Chuyển đổi Boolean bằng Double !

Optional Chaining

Không sử dụng else khi dùng if

Thay thế .forEach bằng .map, .filter, .reduce, .. etc

.forEach vs .filter

Map

Reduce

Kết luận

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề

document.write["
Hello World!
"];
0