[Javascript Căn bản] Chuyển đổi kiểu dữ liệu trong JavaScript

Trong bài viết này mình sẽ chia sẻ với bạn chi tiết cách chuyển đổi các kiểu dữ liệu trong Javascript.

Trong bài viết trước mình đã chia sẻ về javascript là gì, trong bài này mình sẽ nói về kiểu dữ liệu trong javascript. Kiểu dữ liệu là một thành phần phổ biến trong lập trình, việc xử lý các kiểu dữ liệu sẽ trở nên dễ dàng hơn nếu chúng có thể được chuyển đổi về cùng kiểu. Trong Javascript, các kiểu dữ liệu cũng có thể được chuyển đổi thành cùng kiểu, tuy nhiên có một số quy tắc mà bạn phải tuân theo khi chuyển đổi. Trong bài viết này mình sẽ chia sẻ với bạn chi tiết cách chuyển đổi các kiểu dữ liệu trong Javascript.

Các loại dữ kiểu trong Javascript

  • Javascript có 5 kiểu dữ liệu là: string, number, boolean, object, function.
  • Javascript có 3 kiểu đối tượng là: object, date, array.
  • Javascript có 2 kiểu dữ liệu không chứa giá trị là: null và undefined.

Để kiểm tra kiểu dữ liệu của một giá trị bạn sử dụng toán tử typeof. ví dụ: typeof "Tuan"typeof 3.14

Chuyển đổi kiểu dữ liệu trong Javascript

Có nhiều kiểu chuyển đổi kiểu dữ liệu trong Javascript. Một trong những kiểu phổ biến sau:

Chuyển từ kiểu số sang kiểu chuỗi

Để chuyển các biến số, các số thành kiểu chuỗi, chúng ta có hai cách là String(số)số.toString(). Ví dụ như sau:

String(x)
 String(123)
 String(100 + 123)

x.toString()
 (123).toString()
 (100 + 123).toString()

Chuyển từ Boolean sang kiểu chuỗi

Kiểu booleans chỉ có hai giá trị true và false. và khi được chuyển thành chuỗi, nó cũng chỉ có hai chuỗi là “true” hoặc “false”. Để chuyển chúng ta cũng có hai cách là String(boolean)boolean.toString(). Ví dụ như sau:

String(false)
 String(true)

false.toString()
 true.toString()

Chuyển từ kiểu date() thành chuỗi

Khi muốn hiển thị hoặc dùng để nối với chuỗi, kiểu Date() thường được chuyển thành kiểu chuỗi. Ví dụ:

String(Date())
Date().toString()

Chuyển từ chuỗi thành số

Trong một số trường hợp, dữ liệu số đưa vào có thể là kiểu chuỗi. Và như bạn đã biết kiểu chuỗi không thể tham gia tính toán. Để có thể xử lý một chuỗi số như số bạn cần chuyển đổi nó về kiểu số. Ví dụ như sau:

 Number("3.14")   // Trả về 3.14
 Number(" ")       // Trả về 0
 Number("")        // Trả về 0
 Number("99 88")   // Trả về NaN

Chuyển từ Boolean thành số

Như bạn đã biết boolean thực ra có hai giá trị thật là 0 và 1. Vì thế nên khi chuyển sang kiểu số thì nó cũng sẽ trả về hai giá trị 0 khi boolean là false và 1 khi boolean là true. Cụ thể như dưới đây.

Number(false)     // Trả về 0
Number(true)      // Trả về 1

Chuyển từ kiểu date() sang kiểu số

Phương pháp này thường rất ít sử dụng, nhưng Javascript có hỗ trợ chuyển đổi một đối tượng kiểu ngày sang kiểu số. Cụ thể như sau:

d = new Date();
 Number(d)

d = new Date();
 d.getTime()

Chuyển đổi tự động

Một phương pháp thường xuyên được áp dụng đó là chuyển đổi tự động. Javascript sẽ tự động được chuyển về kiểu phù hợp khi kết hai loại dữ liệu được kết hợp với nhau. Một số ví dụ như sau sẽ mô tả rõ hơn về cách chuyển đổi tự động trong Javascript.

2 + null    // Trả về 2      null sẽ được tự động chuyển thành 0.
 "2" + null  // Trả về "2null"   null sẽ được tự động chuyển về kiểu chuỗi "null".
 "2" + 2     // Trả về 22      Số sẽ được chuyển đổi thành chuỗi, 2 thành "2".
 "2" - 2     // Trả về 0     Trường hơp này chuỗi sẽ được chuyển đổi thành số. "2" thành 2.
 "2" * "2"   // Trả về 4  Trường hợp này chuỗi cũng được chuyển đổi thành số.

Bài này là bài cuối cùng trong series học lập trình javascript căn bản.

[Javascript Căn bản] Vòng lặp trong JavaScript

Trong bài viết này mình sẽ chia sẻ chi tiết về vòng lặp for, while và cách sử dụng chúng trong Javascript

Trong lập trình để xử lý một công việc lặp đi lặp lại, người ta sử dụng một vòng lặp để làm điều đó. Có nhiều loại vòng lặp khác nhau giúp các lập trình viên sử dễ dàng lựa chọn để sử dụng cho phù hợp. Javascript cũng cung cấp hai vòng lặp phổ biến là forwhile. Trong bài viết này mình sẽ chia sẻ chi tiết về vòng lặp for, while và cách sử dụng chúng trong Javascript.

Vòng lặp for trong Javascript

Vòng lặp for sẽ thực hiện lặp đi lặp lại các đoạn code nằm trong vòng cho đến khi thỏa mãng điều kiện nó sẽ dừng. for được sử dụng phổ biến để lặp các giá trị trong một mảng. Cú pháp của vòng lặp for như sau:

for (Câu_lệnh_1; Câu_lệnh_2; Câu_lệnh_3) { 
    Khối lệnh
}
  • Câu_lệnh_1: Được thực hiện trước khi lặp khối lệnh.
  • Câu_lệnh_2: Xác định điều kiện để chạy khối lệnh.
  • Câu_lệnh_3: Được thực hiện sau khi lặp khối lệnh.

Ví dụ

for (i = 0; i < cars.length; i++) { 
    text += cars[i] + "<br>";
}
  • Trong ví dụ trên i là một biến được khởi tạo với chỉ số ban đầu là 0. Điều kiện so sánh là khi nào i này nhỏ hơn số giá trị có trong mảng cars thì vòng lặp vẫn được tiếp tục. biến i này sẽ tăng lên 1 lần sau mỗi vòng lặp.
  • cars[i] sẽ hiển thị giá trị tại vị trí thứ i trong mảng.

Trong vòng lặp for, các câu lệnh có thể không cần thiết.

  • Bạn có thể bỏ Câu_lệnh_1 như ví dụ sau:
for (; i < cars.length; i++) { 
    text += cars[i] + "<br>";
}

Tuy nhiên biến i phải được khai báo ngoài nếu không câu lệnh sẽ không thực thi được.

  • Bạn có thể bỏ Câu_lênh_2 như ví dụ sau:
for (i=0; ; i++) {
  text += cars[i] + "<br>";
  if(i== 5){
      break;
  }
}

Bạn lưu ý là vòng lặp trên mình có sử dụng một hàm if để kiểm tra và sử dụng break; để thoát ra khỏi vòng lặp. Nếu không sử dụng break; máy của bạn có thể bị đơ vì vòng lặp không có điểm dừng.

  • Bạn có thể bỏ Câu_lệnh_3 như ví dụ sau:
for (; i < len; ) {
   text += cars[i] + "<br>";
   i++;
}

Mặc dù không có Câu_lệnh_1Câu_lệnh_3, nhưng biến i (tức Câu_lệnh_1) đã được khai báo ở ngoài vòng lặp và Câu_lệnh_3 được chuyển xuống dưới khối lệnh.

Mình chỉ đưa ra ví dụ để bạn thấy vòng lặp for có khả năng tùy biến vị trí câu lệnh, không nhất thiết phải để trong lệnh for. Tuy nhiên mình không khuyến khích việc sử dụng 3 cách trên để lập trình thực tế. Bạn nên sử dụng cách chèn các câu lệnh đầy đủ để code trở nên rõ ràng hơn nhé.

Nếu là một đối tượng (object) thì vòng lặp for sẽ sử dụng nó như thế nào. Ví dụ sau sẽ cho bạn thấy rõ cách sử dụng for để lấy giá trị trong đối tượng.

var person = {fname:"Tuan", lname:"Doan", age:25}; 
var text = "";
var x;
for (x in person) {
    text += person[x];
}
  • person là một đối tượng. text được sử dụng để lưu giá trị đầu ra. x là biến được khai báo để sử dụng lưu các thuộc tính trong đối tượng.
  • x in person là câu lệnh lấy ra các thuộc tính có trong đối tượng. in chính là mấu chốt quan trọng.
  • person[x] sẽ trả về giá trị của thuộc tính x trong đối tượng person.

Vòng lặp While trong Javascript

Nếu như vòng lặp for lặp đi lặp lại các đoạn code nằm trong vòng cho đến khi thỏa mãng điều kiện nó sẽ dừng. thì while sẽ lặp trong khi điều kiện còn thỏa mãn. Cú pháp như sau:

while (điều_kiện) {
    Khối lệnh
}
  • điều_kiện: trong khi điều_kiện này còn đúng, vòng lặp sẽ còn tiếp tục.
  • khối lệnh: sẽ thực hiện công việc trong vòng lặp.

Ví dụ:

while (i < 10) {
    text += i + "</br>";
    i++;
}

Với câu lệnh trên, điều kiện sẽ được kiểm tra trước khi thực hiện khối lệnh, tức là có thể trong một số trường hợp khối lệnh có thể không được thực hiện lần nào.

Để thực hiện khối lệnh ít nhất một lần ta có một cú pháp riêng đối với vòng lặp while. Đó là do...while cú pháp như sau:

do {
    Khối lệnh
}
while (điều_kiện);

ví dụ

do {
    text += i + "</br>";
    i++;
}
while (i < 10);

Dễ hiểu với vòng lặp này là nó sẽ thực thi khối lệnh trước khi vào điều kiện trong while. Vòng lặp này thích hợp với công việc yêu cầu việc thực hiện công việc trước khi kiểm tra.

Trong bài sau mình sẽ giới thiệu đến bạn Chuyển đổi kiểu dữ liệu trong JavaScript

[Javascript Căn bản] Điều khiển và lựu chọn trong JavaScript

Trong bài viết này mình sẽ chia sẻ với bạn về cách sử dụng của if và switch trong Javascript.

Khi bạn sử dụng các biểu thức so sánh hoặc logic, giá trị boolean sẽ được trả về. Dựa vào giá trị boolean đó chúng ta có thể đưa ra hành động tiếp theo cho các đoạn mã. Để thực hiện được điều này Javascript đưa ra cho chúng ta một lệnh điều khiển đó là if (nếu) và lệnh lựa chọn switch. Trong bài viết này mình sẽ chia sẻ với bạn về cách sử dụng của if và switch trong Javascript.

Lệnh điều khiển If trong Javascript

Lệnh điều khiển If trong Javascript là một lệnh đặt biệt, hỗ trợ lập trình xử lý kết hợp với các biểu thức so sánh hoặc logic. Cú pháp:

if (Biểu thức) {
   Khối lệnh thực thi khi biểu thức trả về giá trị true
}

Ví dụ:

if (you > 18) {
    talk = "I love You";
}

Lệnh điều khiển mở rộng của if sẽ giúp việc lập trình trở nên linh hoặc và chặc chẽ hơn. Các lệnh điều khiển mở rộng có cú pháp phổ biến như sau:

if (Biểu thức) {
    Khối lệnh thực thi khi biểu thức trả về giá trị true
} else { 

    Khối lệnh thực thi khi biểu thức trả về giá trị false
}

Khối lệnh trên được sử dụng để trả về kết quả kể cả khi biểu thức trả về giá trị false. ví dụ:

if (you > 18) {
    talk = "I love You";
} else {
    talk = "We're friend";
}

if (Biểu thức 1) {
    Khối lệnh thực thi khi biểu thức 1 trả về giá trị is true
} else if (Biểu thức 2) {

    Khối lệnh thực thi khi biểu thức 2 trả về giá trị true
} else {
  Khối lệnh thực thi khi tất cả biểu thức trả về giá trị false
}

Khi cần xử lý nhiều điều kiện hơn bạn có thể sử dụng thêm else if để tiếp tục. Ví dụ:

if (you < 15) {
    talk = "Good bye";
} else if (you < 18) {
    talk = "We're friend";
} else {
    talk = "I love You";
}

Lệnh lựa chọn switch trong Javascript

Lệnh switch sẽ giúp lấy bạn so sánh điều kiện với yêu cầu trong lệnh switch để thực hiện chính xác công việc nào đó. Ví dụ như trong việc phân quyền. Mình có một biến trả về một mã quyền hạn. Mình sẽ sử dụng lệnh switch để xem mã này nằm ở quyền hạn nào, sau đó sẽ thực thi lệnh để cấp quyền. Đó ý nghĩa của hàm này. Cú pháp như sau:

switch(biểu_thức) {
    case điều_kiện:
        Khối_lệnh
        break;
    case điều_kiện:
        Khối_lệnh
        break;
    default:
        Khối_lệnh
}
  • biểu_thức: có thể là một biến, đối tượng, hoặc một biểu thức thông thường.
  • điều_kiện: là kết quả đầu ra để so sánh với đầu ra của biểu thức.
  • break: ngừng lệnh switch sau khi đã thực hiện xong khối lệnh.
  • default: khối lệnh mặc định nếu như giá trị biểu_thức không bằng với điều_kiện nào.

Ví dụ:

switch (new Date().getDay()) {
    case 0:
        day = "Thứ hai";
        break;
    case 1:
        day = "Thứ ba";
        break;
    case 2:
        day = "Thứ tư";
        break;
    case 3:
        day = "Thứ năm";
        break;
    case 4:
        day = "Thứ sáu";
        break;
    case 5:
        day = "Thứ bảy";
        break;
    case 6:
        day = "Chủ nhật";
}

Ví dụ trên sử dụng một đối tượng Date để lấy ra giá trị so sánh. Lệnh trên mình không sử dụng giá trị default là bởi vì giá trị của đối tượng Date có thuộc tính getDay() sẽ không có trường hợp nào khác ngoài các số từ 0-6.

Trong bài sau mình sẽ giới thiệu đến bạn Vòng lặp trong JavaScript

[Javascript Căn bản] Boolean và phép so sánh trong JavaScript

Trong bài viết này, mình sẽ chia sẻ với bạn về kiểu dữ liệu boolean và các phép so sánh trong Javascript.

Boolean là một kiểu dữ liệu đặt biệt, xuất hiện phổ biến trong lập trình. Giá trị của boolean chỉ bao gồm hai giá trị là True, False hoặc 0,1. Tuy nhiên chức năng của nó là khá quan trọng. Trong hầu hết các so sánh, giá trị của boolean chính là kết quả của so sánh. Trong bài viết này, mình sẽ chia sẻ với bạn về kiểu dữ liệu boolean và các phép so sánh trong Javascript.

Boolean trong Javascript

Boolean là một kiểu dữ liệu dạng bit, chỉ có thể lưu trữ hai giá trị True hoặc False. Với đặt tính của Boolean nó thường được sử dụng để làm kiểu dữ liệu cho thuộc tính chỉ lưu trữ hai giá trị ví dụ Đúng/Sai, Tắt/Mở,… Boolean có thể được sử dụng để trả về “câu trả lời” đúng hoặc sai của một biểu thức so sánh. Ví dụ: Boolean(19 > 18).

Khi kiểm tra một biến bằng biểu thức Boolean, kết quả nhận được là True khi biến đó có chứa giá trị thật sự và nhận về False khi biến đó không chứa giá trị. Ví dụ:

var b1 = 100
Boolean(b1);
//Kết quả trả về sẽ là true.

var x = "";
Boolean(x);
Kết quả trả về sẽ là false. Ngoài ra các biến chưa có giá trị, giá trị bằng 0 hoặc null cũng sẽ trả về false.

Các phép so sánh trong Javascript

Các phép so sánh được gọi là toán tử. Biểu thức so sánh sẽ đưa ra một kết quả nhất định, có giá trị là Boolean. Các giá trị boolean này có thể được dùng trong các hàm như if, switch,.. Một số phép so sánh phổ biến tron Javascript như sau:

  • x == y: Trả về true khi hai giá trị x và y bằng nhau không phân biệt kiểu dữ liệu. false khi ngược lại.
  • x === y: Trả về true khi hai giá trị x và y bằng nhau cả về giá trị lẫn kiểu dữ liệu. false khi ngược lại.
  • x != y: Trả về true khi hai giá trị x và y không bằng nhau không phân biệt kiểu dữ liệu. false khi ngược lại.
  • x !== y: Trả về true khi hai giá trị x và y không bằng nhau về giá trị hoặc kiểu dữ liệu. false khi ngược lại.
  • x > y: Trả về true khi x lớn hơn y. false khi ngược lại.
  • x < y: Trả về true khi x nhỏ hơn y. false khi ngược lại.
  • x >= y: Trả về true khi x lớn hơn hoặc bằng y. false khi ngược lại.
  • x <= y: Trả về true khi x nhỏ hơn hoặc bằng y. false khi ngược lại.

Ví dụ: if (she < 18) film = "Em chưa 18 !";

Toán tử logic trong Javascript

Các toán tử logic được xem là những toán tử suy xét điều kiện. Ví dụ bạn muốn xét hai trường hợp, và chỉ cần đáp ứng được 1 trong hai thì khối lệnh sẽ thực hiện, bạn cần toán tử logic trong trường hợp này. Khi kết hợp toán tử này kết quả trả về cũng là một giá trị boolean. Javascript có một số toán tử logic sau.

  • &&: Toán tử này xác định nếu vế bên phải và vế bên trái cùng đúng hoặc cùng sai thì sẽ trả về true, ngược lại là false. Ví dụ: (6 > 1 && 3 > 1) trả về true.
  • ||: Toán tử này xác định nếu vế bên phải đúng hoặc vế bên trái đúng thì sẽ trả về true, ngược lại là false. Ví dụ: (6 > 1 || 3 > 6) trả về true.
  • !: Đây là toán tử phủ định. Tức là nếu biểu thức đúng sẽ trả về là false và nếu sai sẽ trả về là true. Ví dụ: !(5 == 5) trả về false.

Sử dụng hàm điều kiện trong Javascript

Các kết quả so sánh khi sử dụng phép so sánh hay toán tử logic đều trả về giá trị boolean. Giá trị này được sử dụng để đưa ra một lựa chọn cụ thể. Để thực hiện được điều này các lập trình viên sử dụng một hàm được gọi là hàm điều kiện. Hàm điều kiện trong Javascript có cú pháp: Biến = (Biểu thức điều kiện) ? Giá trị true:Giá trị false. Trong đó biến sẽ lưu giá trị trả về sau khi lựa chọn. biểu thức điều kiện là bao gồm việc sử dụng phép so sánh hay toán tử logic. Giá trị true là giá trị sẽ được trả về nếu biểu thức điều kiện trả về giá trị true, hoặc Giá trị false sẽ được trả về nếu biểu thức điều kiện trả về false. Ví dụ: var dieu_kien = (age < 18) ? "Chưa đủ":"Đủ rồi";.

Trong bài sau mình sẽ giới thiệu đến bạn Điều khiển và lựu chọn trong JavaScript

[Javascript Căn bản] Mảng trong JavaScript

Trong bài viết này mình sẽ chia sẻ về mảng và cách sử dụng mảng trong Javascript.

Khi bạn muốn lưu trữ nhiều giá trị trong một biến, bạn nghĩ đến việc sử dụng mảng. Mảng là một thành phần phổ biến được sử dụng nhiều nhất trong các ngôn ngữ lập trình. Mảng có thể được dùng như một kiểu để mô tả cấu trúc dữ liệu bảng nên thường xuyên được sử dụng để làm việc với cơ sở dữ liệu. Trong bài viết này mình sẽ chia sẻ về mảng và cách sử dụng mảng trong Javascript.

Mảng trong Javascript

Mảng là một biến đặt biệt, mảng có thể chứa nhiều giá trị. Ví dụ như bạn có một danh sách học sinh, và bạn có thể sử dụng biến chuỗi để lưu, nhưng nếu số lượng học sinh là vài trăm thì sao? bạn phải sử dụng giải pháp khác, đó là mảng.

Cú pháp của một biến mảng là: var tên_mảng = [item1, item2, ...];

Ví dụ về một biến mảng: var hocSinh = ["Tuấn", "Vũ", "Minh"];

Để truy cập đến giá trị nào đó của mảng bạn chỉ cần sử dụng cú pháp: tên_mảng[chỉ_số_giá_trị]; chỉ số giá trị được bắt đầu từ số 0.

Ví dụ để lấy giá trị “Tuấn” trong biến mảng hocSinh thì bạn gọi sau: hocSinh[0];, Nếu bạn muốn gọi toàn bộ các giá trị chỉ cần gọi hocSinh;

Mảng tương tự như đối tượng. Tuy nhiên mảng chỉ có thể truy cập đến giá trị trong mảng bằng các chỉ số (số thứ tự của giá trị trong mảng), trong khi đó đối tượng có thể truy vào giá trị bằng tên thuộc tính.

Một số thuộc tính của mảng

  • length: Trả về số phần tử trong mảng. Ví dụ:
var traiCay = ["Chuối", "Cam", "Táo", "Mango"];
 traiCay.length;
  • sort(): Sắp sếp các phần tử trọng mảng. Ví dụ:
var traiCay = ["Chuối", "Cam", "Táo", "Mango"];
 traiCay.sort();
  • push(): Thêm giá trị vào mảng. Ví dụ:
var traiCay = ["Chuối", "Cam", "Táo", "Mango"];
 traiCay.push("Chanh");

Ngoài ra bạn cũng có thể sử dụng cách sau để thêm phần tử.

traiCay = ["Chuối", "Cam", "Táo", "Mango"];
 traiCay[4] = "Chanh";

Tuy nhiên với cách trên bạn phải xác định được chỉ số tiếp theo của mảng. Nếu bạn để chỉ số lớn sẽ tạo ra một giá trị không được định nghĩa. Chèn vào chỉ số của một giá trị đã tồn tại sẽ thay thế giá trị đó.

Xử lý mảng trong Javascript

  • Để chuyển đổi một mảng thành chuỗi bạn sử dụng phương thức toString();. ví dụ traiCay.toString();.
  • Bạn có thể sử dụng phương thức join(); để hiển thị dấu nối. Ví dụ traiCay.join("-");
  • Để xóa một giá trị ở cuối mảng bạn có thể sử dụng phương thức pop();. Ví dụ traiCay.pop();nếu gán ví dụ này cho một biến nó sẽ trả về giá trị được xóa khỏi mảng.
  • Nếu như pop(); là xóa giá trị ở cuối mảng, thì phương thức shift(); sẽ xóa giá trị ở đầu mảng. Ví dụ traiCay.shift();
  • Để thêm một giá trị vào đầu mảng sử dụng phương thức unshift(); ví dụ traiCay.unshift("giá_trị_mới"); nếu gán ví dụ này cho một biến nó sẽ trả về giá trị là một số chỉ vị trí giá trị mới được thêm vào.
  • Để xóa một phần tử với chỉ số được định sẵn thì bạn sử dụng lệnh delete ví dụ: delete fruits[Chỉ_số];Tuy nhiên khi sử dụng phương pháp này để xóa thì vị trí giá trị xóa sẽ là trống chứ không được xóa đi hoàn toàn.
  • Để thêm nhiều phần tử vào mảng và xác định được vị trí thêm bạn sử dụng phương thức splice(); ví dụ: traiCay.splice(2, 0, "Chanh", "Kiwi");Ví dụ này sẽ thêm hai giá trị là “chanh” và “kiwi” vào vị trí số 2 và không xóa bất cứ một giá trị nào. Nếu bạn thay số 0 thành một số khác ví dụ 1 thì giá trị ở vị trí sau vị trí số 2 sẽ được xóa đi trước khi chèn hai giá trị trên vào. Bạn cũng có thể sử dụng phương thức này để xóa phần tử trong mảng. Ví dụ: traiCay.splice(2, 1); nó sẽ xóa đi 1 phần tử bắt đầu từ phần tử số 2. phương thức này nên sử dụng để thay thế cho lệnh delete.
  • Phương thức concat() sẽ được sử dụng để nối các mảng lại với nhau. Ví dụ
var Girls = ["Phương", "Uyên"];
var Boys = ["Tuấn", "Vũ","Minh"];
var None = ["Khánh", "Tiến"];
var myClass = Girls.concat(Boys,None);

Trong bài sau mình sẽ giới thiệu đến bạn Boolean và phép so sánh trong JavaScript

[Javascript Căn bản] Định dạng thời gian trong JavaScript

Trong bài viết này mình sẽ chia sẻ với bạn các thao tác với định dạng thời gian trong Javascript.

Thời gian (time) là một kiểu dữ liệu phổ biến trong hầu hết các ngôn ngữ lập trình hướng người dùng. Các ngôn ngữ lập trình nói chung và Javascript nói riêng đều hỗ trợ các hàm và phương thức đầy đủ về thời gian. Trong bài viết này mình sẽ chia sẻ với bạn các thao tác với định dạng thời gian trong Javascript.

Định dạng thời gian trong Javascript

Định dạng thời gian trong Javascript được hỗ trợ đầy đủ từ năm, tháng, ngày, giờ, phút, giây đến mili giây. Thời gian có thể được định dạng theo một chuỗi đầy đủ như: Thu Jul 27 2017 12:46:04 GMT+0700 (SE Asia Standard Time) hoặc là một dãy số như 1501134364859.

Hàm để thực hiện xử lý và truy vấn thời gian trong Javascript là Date(); Khi gọi hàm này trực tiếp nó sẽ trả về thời gian đầy đủ cụ thể.

Để xử lý thời gian bạn cần tạo ra đối tượng thời gian, ví dụ: var d = new Date();

Có 4 kiểu định dạng thời gian trong Javascript là:

  • Định dạng đầy đủ: ngày - tháng - năm - giờ - phút - giây - timezone
  • Định dạng chuẩn ISO: ngày - tháng - năm - giờ - phút - giây
  • Định dạng dài: ngày - tháng - năm ví dụ: 25 Mar 2017
  • Định dạng ngắn: ngày/tháng/năm ví dụ: 25/06/2017

Xử lý định dạng thời gian trong Javascript

Javascript cung cấp một loạt các phương thức để thực hiện lấy thời gian theo yêu cầu. Các phương thức chỉ làm việc với đối tượng thời gian. Có hai phương thức xử lý thời gian trong Javascript là GET (lấy) và SET (gán).

Các phương thức GET thời gian trong Javascript

  • getDate(): Trả về số ngày hiện tại trong tháng.
  • getDay(): Trả về thứ tự ngày trong tuần. Ví dụ thứ 5 sẽ là 4.
  • getFullYear(): Trả về số năm hiện tại.
  • getHours(): Trả về số giờ hiện tại.
  • getMilliseconds(): Trả về số mili giây hiện tại khi gọi.
  • getMinutes(): Trả về số phút hiện tại.
  • getMonth(): Trả về số tháng hiện tại trừ đi một. Ví dụ tháng 7 khi chạy hàm này sẽ trả về số 6. Lý do là hàm này bắt đầu tính từ số 0 đến số 11.
  • getSeconds(): Trả về giây hiện tại khi được gọi.
  • getTime(): Trả về số mili giây bắt đầu từ 1/1/1970 00:00:00.

Sử dụng các hàm trên như sau. Date.Phương_thức(); lưu ý Date là một đối tượng thời gian. ví dụ:

var d = new Date();
var dh;
dh = d.getHours();

Các phương thức GET thời gian trong Javascript

  • setDate(): Tạo ra một chuỗi thời gian cụ thể của một ngày. theo thời gian hiện tại, bắt đầu từ 1 đến 31. VD:
var d = new Date();
d.setDate(15);
//trả về một chuỗi thời gian cụ thể của ngày 15 trong tháng hiện tại. VD: Sat Jul 15 2017 18:18:29 GMT+0700 (SE Asia Standard Time)
  • setFullYear(): Tạo ra một chuỗi thời gian cụ thể của một ngày được set theo năm, tháng, ngày cụ thể. và thời gian hiện tại. VD:
var d = new Date();
d.setFullYear(2020, 7, 14);
//Trả về một chuỗi cụ thể là ngày Thứ Sáu ngày 14 tháng 8 năm 2020 với thời gian hiện tại.
  • setHours(): Tạo ra một chuỗi thời gian cụ thể của ngày hiện tại được set theo giờ cụ thể, bắt đầu từ 0 -23. Ví dụ:
var d = new Date();
d.setHours(10);
//trả về kết quả là một chuỗi thời gian trong ngày hiện tại ở lúc 10 giờ. bắt đầu từ 0 đến 23.
  • setMilliseconds(): Tạo ra một chuỗi thời gian cụ thể của ngày hiện tại được set theo Mili giây cụ thể, bắt đầu từ 0-999. Ví dụ:
var d = new Date();
d.setMilliseconds(133);
  • setMinutes(): Tạo ra một chuỗi thời gian cụ thể của ngày hiện tại được set theo phút cụ thể, bắt đầu từ 0-59. Ví dụ:
var d = new Date();
d.setMinutes(15);
  • setMonth():Tạo ra một chuỗi thời gian cụ thể của ngày hiện tại được set theo tháng cụ thể, bắt đầu từ 0-11. Ví dụ:
var d = new Date();
d.setMonth(7);
  • setSeconds():Tạo ra một chuỗi thời gian cụ thể của ngày hiện tại được set theo giây cụ thể, bắt đầu từ 0-59. Ví dụ:
var d = new Date();
d.setSeconds(22);

Để làm việc với ngày giờ quốc tế bạn chỉ cần thêm UTC và sau từ get. ví dụ: getUTCDate()Cách dùng và công dụng tương tự như trên.

Trong bài sau mình sẽ giới thiệu đến bạn Mảng trong JavaScript

[Javascript Căn bản] Xử lý số trong JavaScript

Trong bài viết này, mình sẽ chia sẻ chi tiết về cách xử lý số trong Javascript ở mức cơ bản nhất.

Số là một kiểu dữ liệu phổ biến. Điều đặc biệt trong Javascript là số không được phân ra nhiều loại, tất cả các kiểu số như số nguyên, số thập phân,… đều được gọi chung là kiểu số. Trong bài viết này, mình sẽ chia sẻ chi tiết về cách xử lý số trong Javascript ở mức cơ bản nhất.

Kiểu số trong Javascript

Chuỗi được đặt trong dấu nháy kép hoặc dấu nháy đơn thì số không được đặt trong bất kỳ dấu gì. Ví dụ

var number = 10;
var number2= 110.2

Kiểu số trong Javascript hỗ trợ 64 bit với 15 chữ số chính xác.

Số có thể được lưu trữ như một chuỗi, và được tính toán như số bằng các phép toán, nhưng trừ toán tử “+”. Khi sử dụng toán tử “+” một chuỗi với một số, số sẽ được tự động chuyển về chuỗi và trở thành nối chuỗi thay vì thực hiện phép tính.

Trong một số trường hợp kết quả trả về có dạng NaN tức là không phải là số (not a number). Ví dụ khi thực hiện lệnh: var x = 100 / "Apple"; Tuy nhiên nếu chuỗi là một số thì phép tính có thể được thực hiện. Ví dụ: var x = 100 / "10"; Tuy nhiên phép cộng “+” sẽ không thực hiện được tính toán trong trường hợp này.

Nếu bạn muốn kiểm tra một biến có phải là số không có thể sử dụng hàm isNaN(Biến). Nếu kết quả trả về là true tức là biến đó không phải là số, ngược lại thì là số. Ngoài ra bạn có thể sử dụng hàm typeof(biến) để kiểm tra kiểu dữ liệu của biến đó.

Thuộc tính của số trong javascript

Javascript cũng cung cấp một số thuộc tính hỗ trợ lập trình trở nên dễ dàng hơn. Các thuộc tính này có thể thực hiện một công việc nào đó với số và trả về kết quả sau xử lý. Một số thuộc tính như sau:

  • toString ():  Chuyển số thành chuỗi, VD: var x = 123; x.toString();  
  • toExponential (): Trả về một số được biểu diễn dưới dạng số mũ: VD: var x = 9.656; x.toExponential(2);
  • toFixed (): Làm tròn số đến chỉ số cần làm tròn. VD: var x = 9.656; x.toFixed(0); hoặc x.toFixed(2);
  • toPrecision (): Trả về một số với độ chính xác được xác định VD: var x = 9.656; x.toPrecision(); hoặc x.toPrecision(2);
  • valueOf (): Trả về giá trị của biến hoặc phép tính. VD: var x = 123; x.valueOf(); 
  • parseInt (): Chuyển đổi một chuỗi thành số. VD: parseInt("10 năm"); và trả về NaN khi parseInt("years 10");
  • parseFloat (): tương tự parseInt().

Đối tượng toán học trong Javascript

Sử dụng đối tượng toán học (Math) trong Javascript để thực hiện các phép tính cố định, ví dụ như tính tổng, làm tròn, căn bật hai,… Một số đối tượng toán học trong Javascript như sau:

  • Math.round(): Làm tròn một số thập phân. VD: Math.round(4.7);
  • Math.pow(): Trả về kết quả số lần nhân bên phải của số bên trái. VD: Math.pow(8, 2); kết quả là 64.
  • Math.sqrt(): Trả về căn bật hai của một số: VD: Math.sqrt(64); kết quả là 8
  • Math.abs(): Trả về giá trị tuyệt đối của một số: VD: Math.abs(-4.7); kết quả là 4.7
  • Math.ceil(): Trả về giá trị được làm tròn lên của một số: VD: Math.ceil(4.4); kết quả là 5
  • Math.floor(): Trả về giá trị được làm tròn xuống  của một số: VD: Math.ceil(4.4); kết quả là 4
  • Math.sin(): Trả về sin của một giá trị. VD: Math.sin(90 * Math.PI / 180);
  • Math.cos(): Trả về cos của một giá trị. VD: Math.cos(0 * Math.PI / 180);
  • Math.min()Math.max(): Lấy ra giá trị nhỏ nhất hoặc lớn nhất trong dãy VD: Math.min(0, 150, 30, 20, -8, -200); hoặc Math.max(0, 150, 30, 20, -8, -200);
  • Math.random(): Trả về một số bất kỳ giữa số 0 và 1.

Trong bài sau mình sẽ giới thiệu đến bại Định dạng thời gian trong JavaScript

[Javascript Căn bản] Xử lý chuỗi trong JavaScript

Trong bài viết này mình sẽ chia sẻ về chuỗi và những xử lý cơ bản chuỗi trong Javascript.

Trong Javascript, bất kể một ký tự nào nằm trong dấu nháy kép “…” hoặc dấu nháy đơn ‘…’ thì đều được xem là chuỗi. Chuỗi được sử dụng để xử lý và thao tác với các đoạn văn bản. Trong bài viết này mình sẽ chia sẻ về chuỗi và những xử lý cơ bản chuỗi trong Javascript.

Chuỗi trong Javascript

Trong những bài trước bạn đã sử dụng các chuỗi, những đoạn văn bản được đặt trong dấu nháy kép “…” hoặc dấu nháy đơn ‘…’ được xem là một chuỗi. Ví dụ: var name ="Tuấn ĐC";

Chuỗi cho phép sử dụng hai loại dấu nháy là để có thể nhận dạng được các dấu này trong ký văn bản. Giả sử mình có một đoạn văn bản sau:phương pháp SEO "mũ đen" là không khuyến khích. Nếu mình đưa nó vào biến như sau: var text = "phương pháp SEO "mũ đen" là không khuyến khích"; thì điều gì sẽ xảy ra. đoạn khái báo này sẽ bị lỗi, vì lúc này từ "mũ đen" không được nhận trong chuỗi. Sử dụng dấu nháy đơn thay thế sẽ giúp bạn kiểm soát được điều này. Ví dụ: var text = 'phương pháp SEO "mũ đen" là không khuyến khích';

Tuy nhiên điều việc sử dụng 2 dấu nháy thay thế sẽ trở nên phức tạp nếu văn bản của bạn nhiều và chứa cả hai dấu nháy trên. Ví dụ: var text ="SEO "mũ đen" là phương pháp không khuyến khích, 'nó' sẽ làm lãng phí..."Trong văn bản này mình sử dụng cả dấu nháy kép và nháy đơn. Dấu bao bên ngoài là nháy kép nên chỉ có thể hiển thị chuỗi nháy đơn, làm sao để có thể hiển thị chuỗi có dấu nháy đơn trong dấu nháy đơn, giải pháp là sử dụng escape character (\).

Ví dụ câu trên sẽ được xử lý như sau: var text ="SEO \"mũ đen\" là phương pháp không khuyến khích, 'nó' sẽ làm lãng phí..." và ngược lại, nếu là dấu nháy đơn cũng thế thôi. Phương pháp này được dùng phổ biến hơn để xử lý với một đoạn văn bản dài mà không cần phải đổi dấu nháy phức tạp.

Trong nhiều trường hợp, đoạn text của bạn quá dài bạn có thể xuống dòng trong Javascript, hoặc dùng dấu “+” để nối với chuỗi xuống dòng, ví dụ:

var text ="SEO \"mũ đen\" là phương pháp không khuyến khích,"+
" 'nó' sẽ làm lãng phí..."

Một số thuộc tính của chuỗi trong Javascript

Khi sử lý chuỗi, bạn cần dựa vào nhiều thuộc tính của chuỗi để xác định trạng thái và thông số của chuỗi, Các thuộc tính được nằm phía sau biến chuỗi. Ví dụ cú pháp:

var txt = "MNBVCXZLKJHGFDSA";
var sln = txt.thuộc_tính;

Một số thuộc tính của chuỗi trong Javascript.

  • length: Trả về số ký tự trong chuỗi.
  • indexOf("text",number): Trả về số vị trí của chữ bắt đầu của text trong chuỗi. Number là số ký từ bắt đầu đếm
  • lastIndexOf ("text",number): Trả về số vị trí của chữ cái kết thúc của text trong chuỗi.

Lưu ý là indexOf luôn bắt đầu bằng vị trí số 0.

  • str.search("text") Trả về số vị trí của chữ bắt đầu của text đầu tiên được tìm thấy trong chuỗi. Tương tự indexOf(). Tuy nhiên search không thể đặt được chỉ số bắt đầu (number) như indexOf().
  • slice(number1,number2): nó sẽ cắt và lấy chuỗi bắt đầu từ ký tự number1 đến number2. Các số này chấp nhận số âm như một phần của việc đảo ngược. ví dụ:
var str = "Táo, chuối, Kiwi";
var res = str.slice(5, 10);
Hoặc
var str = "Táo, chuối, Kiwi";
var res = str.slice(-12, -6);
  • substring(number1,number2): tương tự như slice, nhưng nó không chấp nhận các số âm
  • substr(number1,number2): tương tự như slice, và có chấp nhận số âm, tuy nhiên tham số thứ hai (number2) trong thuộc tính này không phải là vị trí cuối cùng của chuỗi muốn lấy mà là số ký tự muốn lấy bắt đầu từ ký tự có tham số number1. Ví dụ.
var str = "Táo, chuối, Kiwi";
var res = str.substr(5, 5);
  • replace("chuỗi cũ", "chuỗi mới"): Sử dụng replace để thay thế một chuỗi cũ thành chuỗi mới, ví dụ:
var str = "Tôi thích Microsoft!"; 
var txt = str.replace("Microsoft","Apple");

Tuy nhiên câu lệnh trên chỉ thay thế được giá trị đầu tiên khi được tìm thấy. Để thay thế toàn bộ bạn cần sử dụng /.../g làm như sau:

var str = "Tôi thích Apple!, nhưng Apple là quá mắc"; 
var txt = str.replace(/Apple/g,"Microsoft");

Thông thường thuộc tính replace này phân biệt chữ hoa, thường, nên câu cần tìm để thay thế phải chính xác. Để bỏ quy tắc đó bạn cần sử dụng /.../i làm như sau:

var str = "Tôi thích Apple!, nhưng Apple là quá mắc"; 
var txt = str.replace(/apple/i,"Microsoft");

Để thay đổi toàn bộ bạn cần thêm g sau i, từ /apple/i thành /apple/ig

  • toUpperCase() và toLowerCase()Upper là trả về chuỗi in hoa và Lower trả về chuỗi in thường.
  • charAt(number): trả về chữ tại vị trí number.
  • charCodeAt(number): trả về unicode của chữ tại vị trí number.
  • split(): Chuyển một chuỗi thành một mảng dựa vào các ký tự phân tách đặt biêt. Ví dụ
var txt = "a,b,c,d,e"; 
txt.split(",");

Đoạn trên sử dụng dấu phẩy để làm ký tự phân tách đặt biệt. Tuy nhiên khi làm thực tế bạn nên sử dụng các ký tự ít khi được dùng trong chuỗi như “|” để làm dấu phân tách.

Trong bài sau mình sẽ giới thiệu đến bạn Xử lý số trong JavaScript

[Javascript Căn bản] Sự kiện trong JavaScript

Trong bài viết này mình sẽ chia sẻ về sự kiện trong HTML và cách sử dụng sự kiện HTML để gọi thực thi trong Javascript.

Sự kiện (events) là một điểm ngắt đánh dấu bắt đầu một hành động nào đó. Trong lập trình, sự kiện là rất quan trọng để nhận biết khi nào đoạn mã được thực thi bởi sự kiện gì do người dùng hoặc trình duyệt thực hiện. Trong bài viết này mình sẽ chia sẻ về sự kiện trong HTML và cách sử dụng sự kiện HTML để gọi thực thi trong Javascript.

Sử dụng sự kiện trong HTML để gọi các mã lệnh Javascript

Thông thường sự kiện trên HTML bao gồm:

  • Trang web tải xong.
  • Input thay đổi giá trị.
  • Một nút được nhấn.

Cú pháp của sự kiện trong HTML là <element event='some JavaScript'> hoặc <element event="some JavaScript">.

  • element: là thẻ HTML chứa sự kiện.
  • event: là tên sự kiện sẽ xảy ra.
  • some JavaScript: là mã Javascript, nó có thể được đặt trong dấu nháy đơn ' hoặc dấu nháy kép ".

Ví dụ:

<button onclick="document.getElementById('demo').innerHTML = Date()">Hiển thị thời gian</button>
hoặc
<button onclick="this.innerHTML = Date()">Hiển thị thời gian</button>
  • this là thuộc tính sẽ đại diện cho chính element của nó. Ví dụ đoạn mã thứ 2 ở trên, khi bấm sẽ thay luôn từ “Hiển thị thời gian” mà không hiển thị sang một element khác.
  • Để gọi hàm bạn chỉ cần gọi tên hàm ví dụ onclick="function()"

Một số ví dụ

  • Sự kiện onclick của chuột.
<button onclick="myFunction()">Nhấn vào đây</button>
  • Sự kiện Onkeydown của bàn phím.
<input type="text" onkeydown="myFunction()">
  • Sự kiện onload của trang khi tải trang.
<body onload="myFunction()">
  • Sự kiện onchange khi thay đổi giá trị.
<select onchange="myFunction()">
  • Sự kiện ondrag khi sử dụng drag trên element.
<p draggable="true" ondrag="myFunction(event)">Kéo tui đi!</p>
  • Sự kiện oncopy khi copy nội dung trong element.
<input type="text" oncopy="myFunction()" value="Copy thử đoạn này !">
  • Sự kiện onafterprint sau khi in tài liệu từ web.
<body onafterprint="myFunction()">
  • Sự kiện onplay khi chạy media.
<video onplay="myFunction()">

Bạn có thể tìm hiểu thêm về HTML DOM Event tại https://www.w3schools.com/jsref/dom_obj_event.asp.

Trong bài sau mình sẽ giới thiệu đến các bạn Xử lý chuỗi trong JavaScript

[Javascript Căn bản] Đối tượng trong JavaScript

Trong bài viết này mình sẽ chia sẻ về đối tượng và cách sử dụng những đối tượng trong Javascript.

Đối tượng (object) là một biến trong ngôn ngữ lập trình, dùng để lưu trữ nhiều thuộc tính và giá trị khác nhau. Đối tượng được dùng để mô tả một thực thể trong thực tế, đôi lúc cũng được sử dụng để mô tả những thứ phi thực tế. Trong bài viết này mình sẽ chia sẻ về đối tượng và cách sử dụng những đối tượng trong Javascript.

Cú pháp đối tượng trong Javascript

Một chiếc xe hơi được xem là một đối tượng. Nó bao gồm nhiều thuộc tính khác nhau. Mỗi thuộc tính của nó có một giá trị nhất định. Ví dụ:

Mình có một chiếc xe, Loại: sedan, Hãng: Toyota, Đời: 2016, Màu: trắng. Chiếc xe của mình là một đối tượng, và các thuộc tính như loại, hãng, đời, màu là thuộc tính của chiếc xe, và sedan, Toyota, 2016, trắng là giá trị thuộc tính của chiếc xe này. Cú pháp đối tượng của Javascript là:

var ten_doi_tuong = {thuoc_tinh1:gia_tri1, thuoc_tinh2:gia_tri2,..};

Như vậy biến đối tượng của chiếc xe của mình sẽ là:

var mycar = {loai:"sedan",hang:"Toyota",doi:"2016",mau:"trắng"};
Đối tượng là một thực thể bao gồm các thuộc tính và giá trị của nó.

Cách sử dụng đối tượng trong Javascript

Khoảng cách các thuộc tính trong biến đối tượng là không quan trọng, thế nên bạn có thể viết trên 1 dòng hoặc xuống dòng nếu thích. Mình khuyến khích bạn nên sử dụng theo cách sau để nhìn code rõ ràng hơn.

var mycar = {
    loai:"sedan",
    hang:"Toyota",
    doi:"2016",
    mau:"trắng"
};

Để truy vấn các thuộc tính trong đối tượng bạn chỉ cần thực hiện cú pháp tên_đối_tượng.tên_thuộc_tính hoặc tên_đối_tượng["tên_thuộc_tính"] ví dụ mycar.loai; hoặc mycar["loai"]; kết quả trả về là giá trị của thuộc tính loai.

Một giá trị trong thuộc tính có thể là một hàm. Ví dụ:

var mycar = {
    loai:"sedan",
    hang:"Toyota",
    doi:"2016",
    mau:"trắng",
    value: function(){return "$10000";}
};

Để gọi giá trị của thuộc tính value, bạn gọi như sau: mycar.value();

Khi bạn tạo biến chuỗi, số hoặc boolean, nếu bạn thêm new trước loại biến, biến của bạn sẽ trở thành một đối tượng. Ví dụ var x = new String(); Thông thường nếu bạn không xử lý phức tạp bạn không nên tạo ra các đối tượng này, nó sẽ làm chậm đi việc xử lý mã.

Trong bài sau mình sẽ giới thiệu đến bạn Sự kiện trong JavaScript

[Javascript Căn bản] Hàm trong JavaScript

Trong bài viết này mình sẽ chia sẻ chi tiết về hàm và cách sử dụng hàm trong Javascript.

Trong ngôn ngữ lập trình, hàm là một trong những thành phần không thể thiếu và thường xuyên được sử dụng. Hàm được hiểu là một nhóm lệnh được gom lại để thực hiện một công việc cụ thể nào đó khi được gọi đến. Trong bài viết này mình sẽ chia sẻ chi tiết về Hàm và cách sử dụng hàm trong Javascript.

Cú pháp của hàm trong Javascript

  • Một hàm được định nghĩa bằng từ khóa function, sau đó là tên hàm, tiếp theo là dấu ngoặc đơn (). Tên hàm có thể chứa chữ cái hoặc số, dấu gạch dưới,.. (tương tự quy tắt đặt tên biến). Bên trong dấu ngoặc đơn () có thể khởi tạo các tham số để nhận giá trị đầu vào. Cuối cùng là các khối lệnh sẽ được đặt bên trong dấu ngoặc nhọn {}. Cú pháp cụ thể như sau:
function tên_hàm(Tham_số_1, Tham_số_2, Tham_số_3,...) {
    Khối mã lệnh Javascript
}
  • Các tham số được xem là các biến cực bộ. Có thể là giá trị truyền sẵn hoặc là giá trị được truyền khi gọi hàm.

Trả về giá trị là một chức năng của hàm, khi thực hiện trả về giá trị hàm sẽ ngừng hoạt động. Để trả về giá trị trong hàm sử dụng khóa return. Ví dụ đoạn mã sau:

function fn_return(a, b) {
    return a * b;
}

Khi gọi hàm trên, giá trị a*b sẽ được trả về. Để gọi hàm bạn chỉ cần cú pháp: tên_hàm (giá_trị_tham_số);. Ví dụ, để gọi hàm trên chỉ cần gọi fn_return(4,3);. Lời gọi hàm này có thể gán cho một biến để lưu giá trị như var f = fn_return(4,3); giá trị của biến f sẽ bằng giá trị trả về của hàm fn_return(4,3).

Các cách sử dụng hàm trong Javascript

Hàm được viết trong tệp *.js hoặc cặp thẻ <script></script>, Các hàm có thể được gọi lẫn nhau mà không gây ra xung đột. Ví dụ như:

function fn_return(a, b) { 
       return a * b; 
}

function fn_return2() {  
       return 12 * fn_return(4, 3); 
}

Var resuft = fn_return2();
Hàm thường có đầu vào (input) và đầu ra (output), đầu ra của hàm này có thể được sử dụng để làm đầu vào của hàm khác.
  • Khi bạn gọi hàm mà không có dấu ngoặc đơn () thì giá trị trả về sẽ là định nghĩa của hàm (cấu trúc của hàm sẽ được trả về thay vì kết quả hàm xử lý).

Trong bài sau mình sẽ giới thiệu đến bạn Đối tượng trong JavaScript

[Javascript Căn bản] Cú pháp của JavaScript

Trong bài viết này mình sẽ chia sẻ chi tiết về cú pháp của JavaScript và ví dụ về khối lệnh trong Javascript.

JavaScript là một ngôn ngữ lập trình nên các đoạn mã của nó thường được tổ chức theo những quy tắc rõ ràng và thống nhất. Trong bài viết này mình sẽ chia sẻ chi tiết về cú pháp của JavaScript và ví dụ về khối lệnh trong Javascript.

Cấu tạo của JavaScript

Javascript được cấu tạo từ các dòng mã kết thúc bởi dấu “;“. Các dòng mã sẽ kết hợp với nhau theo một mối liên quan nhất định để tạo thành một khối lệnh xử lý một vấn đề nào đó.

Như các ngôn ngữ khác, Javascript cũng cần xử lý dữ liệu. Tuy nhiên các kiểu dữ liệu của Javascript là không nhiều và không được phân loại chi tiết như các ngôn ngữ lập trình khác. Javascript chỉ có 3 loại kiểu dữ liệu sau:

  • Chuỗi : Khi một đoạn text được đặt trong dấu nháy đơn: ' ... 'hoặc dấu nháy kép " ... "thì đó được xem là một chuỗi.
  • Số : Không phân chi tiết như các ngôn ngữ khác, Javascript đưa các số nguyên, thập phân,.. vào một kiểu số duy nhất. Các số không được đặt trong dấu nháy như chuỗi. Ví dụ như: 48151623.42.
  • Boolean : Đây là kiểu dữ liệu chứa 2 giá trị true, hoặc false.
3 kiểu dữ liệu chính trong JS là chuỗi, số và boolean. Ngoài ra còn có kiểu trống (null), chưa định nghĩa (undefined) và đối tượng (Object) sẽ được nói đến trong các phần sau.

Để lưu trữ một giá trị và sử dụng nó vào các khối lệnh để xử lý bạn cần một biến lưu. Biến trong Javascript có cấu trúc như sau: var tên_biến = giá_trị_biến. Giá trị của biến là kiểu dữ liệu gì thì biến đó có kiểu dữ liệu đó. Ví dụ var name = 'Tuấn'; Javascript là một ngôn ngữ chặc chẽ, nó phân biệt chữ HOA và chữ THƯỜNG nên bạn phải chú ý khi đặt tên biến và gọi biến. Đặt tên biến bạn không được phép sử dụng dấu nối như “tên-biến” mà chỉ được phép đặt liền như “TênBiến” hoặc “tên_biến“. Tuy nhiên bạn không được sử dụng tên biến có dấu nhé.

Biến là một vùng nhớ được tạo ra để lưu trữ giá trị tạm thời. Biến có kiểu dữ liệu phụ thuộc vào kiểu dữ liệu của giá trị mà biến lưu trữ.

Các toán tử số học trong Javascript bao gồm: Cộng (+), trừ (-), nhân (*), chia (/), chia lấy dư (%), tăng lên 1 đơn vị (++), giảm đi một đơn vị (--)… ví dụ (2 + 3) * 4.

Javascript có đầy đủ các toán tử hỗ trợ tính toán và kết hợp

Các toán tử gán trong Javascript bao gồm: = (giá trị bên trái bằng bên phải), +=  (giá trị bên trái bằng chính nó cộng với giá trị bên phải vd: x+=y sẽ bằng x=x+y), -= (giá trị bên trái bằng chính nó trừ đi giá trị bên phải vd: x-=y sẽ bằng x=x-y), *= (Giá trị bên trái bằng chính nó nhân cho giá trị bên phải vd x*=y sẽ bằng x=x*y), /= (giá trị bên trái bằng chính nó chia cho giá trị bên phải vd: x/=y sẽ bằng x=x/y), %= (giá trị bên trái bằng chính nó chia lấy dư cho giá trị bên phải vd x%=y sẽ bằng x=x%y).

Comment trong Javascript sử dụng dấu // trước comment hoặc trong cặp /*...*/ ví dụ như /*..Nội dung comment..*/

Ví dụ về một chương trình JavaScript

Dưới đây là một khối lệnh Javascript.

var lastname, lastName;
lastName = "Tuan";
lastname = "Doan";
document.getElementById("demo").innerHTML = lastName +" "+ lastname;
  • Mình sẽ khai báo hai biến là lastname và lastName, nên nhớ chúng hoàn toàn là hai biến khác nhau.
  • Biến lastName mình gán giá trị là “Tuan” và giá trị cho biến lastname là “Doan“.
  • document.getElementById() là hàm lấy đối tượng HTML mình đã nói trong bài viết [Javascript Căn bản] Javascript là gì? Sử dụng Javascript trong website như thế nào?.
  • lastName +" "+ lastname là một đoạn nối hai biến. Khi thao tác với chuỗi, dấu + sẽ là dấu nối chuỗi. Trong trường hợp muốn nối thêm chuỗi vào biến có thể sử dụng toán tử gán +=.ví dụ var Name = "tuan"; Name+= " Doan"; kết quả biến var Name = "tuan Doan".

Trong bài sau mình sẽ giới thiệu đến các bạn Hàm trong JavaScript

[Javascript Căn bản] Javascript là gì? Sử dụng Javascript trong website như thế nào?

Bài viết này sẽ bắt đầu series học Javascript căn bản, và đầu tiên chúng ta nên làm quen với Javascript và cách sử dụng nó trong website.

Trong thiết kế web, 3 thành phần quan trọng không thể thiếu để cấu thành một trang web hoàn chỉnh đó là HTML, CSS và Javascript. Đóng vai trò như là một cái “hồn” của website ở phía máy khách, Javascript đang được sử dụng ứng dụng rộng rãi để lập trình lên những hành động đáp ứng tương tác với người dùng web. Bài viết này sẽ bắt đầu series học Javascript căn bản, và đầu tiên chúng ta nên làm quen với Javascript và cách sử dụng nó trong website.

Javascript là gì?

HTML hay CSS không được gọi là ngôn ngữ lập trình, nhưng Javascript chính là một ngôn ngữ lập trình. Javascript có đầy đủ thành phần để cấu thành nên một ngôn ngữ lập trình như biến, hàm, đầu vào, đầu ra,…. Javascript đa số được thực thi tại máy khách nên nó còn thường được loại là mã kịch bản phía máy khách.

Vì chỉ hoạt động trên website và đối tượng tác động trực tiếp là các mã đánh dấu HTML, có sử dụng các thuộc tính CSS, nên trước khi học Javascript bạn học và nắm rõ về HTML và CSS trước đã.

Javascript không phải là ngôn ngữ java nên bạn đừng nhầm lẫn giữa hai loại ngôn ngữ này, chúng hoàn toàn khác nhau về khái niệm lẫn thiết kế của ngôn ngữ.

Javascript làm được gì mã HTML?

Javascript có thể làm được nhiều việc tùy vào khả năng lập trình của bạn. Nhưng một số tính năng sau đây là một số tính năng phổ biến mà nó tác động lên HTML như:

JavaScript có thể thay đổi nội dung HTML

Bạn có một thẻ HTML như thế này <p id="demo">Đây là tôi</p> và bạn muốn thay đổi từ “Đây là tôi” thành “Tôi đang học Javascript” khi bấm vào một nút. bạn có đoạn mã như sau:

document.getElementById("demo").innerHTML = "Tôi đang học Javascript";
  • Hàm document.getElementById("demo") sẽ trả về đối tượng HTML đang có ID là ‘demo’.
  • innerHTML là phương thức chèn nội dung vào trong đối tượng đó.

JavaScript có thể thay đổi thuộc tính HTML

Một số thẻ HTML có chứa thuộc tính, ví dụ như thẻ <img> có thuộc tính là “src” để nhận dạng hình ảnh. Bạn có thể sử dụng Javascript để thay đổi giá trị cho thuộc tính này. Ví dụ như câu sau:

document.getElementById('thumb').src='product2.png';
  • Hàm document.getElementById('thumb') trả về đối tượng HTML có ID là ‘thumb‘.
  • src là thuộc tính cần thay đổi giá trị

JavaScript có thể thay đổi kiểu HTML (CSS)

Trong bài viết [CSS Căn bản] CSS là gì? cách sử dụng CSS trong website mình có nói đến việc chèn CSS theo kiểu inline rất ít khi được sử dụng, nhưng khi bạn muốn thay đổi kiểu CSS cho một thẻ HTML nhất định bằng Javascript nó sẽ sử dụng kiểu chèn CSS này. Vì sao? trong bài [CSS Căn bản] Xét độ ưu tiên của các CSS trùng nhau mình đã nói độ ưu tiên của CSS Inline là cao nhất, hơn nữa, việc chèn Inline sẽ giúp Javascript có cơ sở để gọi dựa vào ID của thẻ HTML. Đoạn mã dưới đây sẽ làm thay đổi kiểu CSS của thẻ HTML có ID là ‘demo‘.

document.getElementById('demo').style.fontSize='35px';
  • Hàm document.getElementById('demo') lấy ra đối tượng HTML có ID là ‘demo‘.
  • style là phương thức tác động đến HTML.
  • fontSize là một thuộc tính CSS sẽ được thay đổi.
  • 35px là giá trị thay đổi của thuộc tính CSS.

JavaScript có thể ẩn/hiển phần tử HTML

Thật ra thì phương thức này cũng là làm thay đổi kiểu CSS của HTML mà thôi, nó sẽ sử dụng thuộc tính css là display để điều khiển hiển thị hoặc ẩn đi phần tử HTML. Mã mẫu như sau:

Ẩn phần tử: document.getElementById('demo').style.display = 'none';
Hiện phần tử: document.getElementById('demo').style.display = 'blook';

Cơ bản chúng ta đã biết Javascript có thể làm được những gì, nhưng sử dụng làm sao để các mã này hoạt động và tác động được đến đối tượng HTML? hãy xem phần tiếp theo.

Cách sử dụng JavaScript

Tương tự như CSS, JavaScript có thể được để ở 3 nơi khác nhau là linked, embed, và inline. Tuy nhiên nó không có mức độ ưu tiên mà chỉ có sự xung đột khi bị trùng. Kiểu chèn inline không được khuyến khích sử dụng, nó thường được sử dụng cho những nút button với những đoạn Javascript thô, do đó bạn chỉ nên sử dụng phương pháp Linked hoặc embeb.

Phương pháp nhúng JavaScript embed

Tất cả đoạn mã Javascript sẽ được triển khai trong tệp HTML và nằm trong cặp thẻ <script>...</script>. Ví dụ như đoạn sau:

<script>
function myFunction() {
   document.getElementById('demo').style.fontSize='35px';
}
</script>

Bạn có thể sử dụng thuộc tính onclick của nút button để gọi hàm javascript. ví dụ như sau:

<button type="button" onclick="myFunction()">Nút thử</button>

Phương pháp gọi tệp JavaScript linked

Tất cả mã Javascript được để trong tệp có đuôi mở rộng là *.js. và được gọi vào tệp HTML bằng đoạn sau:

<script src="tên_file.js"></script>

Phương pháp này được sử dụng phổ biến do các mã Javascript được viết ở một tệp riêng tách biệt với mã HTML. Với đoạn gọi trên bạn có thể đặt ở thẻ <head> hoặc thẻ <body> mà không làm ảnh hưởng gì.

Về cấu trúc của tệp *.js thì bạn có thể viết thẳng mã Javascript mà không sử dụng thẻ </script> như phương pháp embed. Và cách sử dụng cũng tương tự.

Trong bài viết sau mình sẽ chia sẻ về Cú pháp của JavaScript