JavaScript là một ngôn ngữ gia thêm khả năng tương tác cho website của bạn (ví dụ: trò chơi, các phản hồi khi các nút được nhấn hoặc nhập dữ liệu trên form, kiểu động, hoạt họa). Bài viết này sẽ giúp bạn khởi động với ngôn ngữ thú vị này và cho bạn ý tưởng về những gì có thể xảy ra.

JavaScript thật sự là gì?

JavaScript (viết tắt là "js") là một ngôn ngữ lập trình mang đầy đủ tính năng của một ngôn ngữ lập trình động mà khi nó được áp dụng vào một tài liệu HTML, nó có thể đem lại khả năng tương tác động trên các trang web. Cha đẻ của ngôn ngữ này là Brendan Eich, đồng sáng lập dự án Mozilla, quỹ Mozilla, và tập đoàn Mozilla.

JavaScript thật sự rất linh hoạt. Bạn có thể bắt đầu với các bước nhỏ, với ? viện ảnh, bố cục có tính thay đổi và phản hồi đến các nút nhấn. Khi có nhiều kinh nghiệm hơn, bạn có thể tạo ra các trò chơi, hoạt họa 2 chiều hoặc 3 chiều, ứng dụng cơ sở dữ liệu toàn diện và nhiều thứ khác!

Bản thân Javascript là một ngôn ngữ linh động. Các nhà phát triển đã viết ra một số lượng lớn các công cụ thuộc top của core Javascript, mở ra một lượng lớn tính năng bổ sung với ít nỗ lực nhất. Nó bao gồm:

  • Giao diện lập trình ứng dụng trên trình duyệt (API) — Các API được xây dựng bên trong các trình duyệt web, cung cấp tính năng như tạo HTML động, cài đặt CSS, thu tập và điều khiển video trực tiếp từ webcam của người dùng hoặc sinh ra đồ dọa 3D và các mẫu audio.
  • Các API bên thứ ba cho phép nhà phát triển kết hợp tính năng trong website của họ từ người cung cấp nội dung khác chẳng hạn như Twitter hay Facebook.
  • Từ các framework và thư viện bên thứ ba bạn có thể áp dụng tới tài liệu HTML của bạn, cho phép bạn nhanh chóng xây dựng được các trang web và các ứng dụng.

Vì bài viết này chỉ giới thiệu về JavaScript, chúng tôi sẽ không làm bạn bối rối khi nói rõ hơn về sự khác nhau giữa mã nguồn JavaScript căn bản và những công cụ được liệt kê ở trên. Bạn có thể tìm hiểu chi tiết trong  Mục học JavaScript, và MDN.

Ở phần dưới chúng tôi sẽ giới thiệu cho bạn một số khía cạnh cơ bản về JavaScript và bạn cũng sẽ được làm việc với một vài API. Chúc bạn học tốt!

Ví dụ "Hello World"

Phần phía dưới có thể nghe thật thú vị. JavaScript là một trong những công nghệ web sống động nhất và nếu như bạn sử dụng thật tốt, các website của bạn sẽ mang tính sáng tạo và đầy sức mạnh.

Tuy nhiên, nắm bắt Javascript sẽ có một chút khó hơn so  với HTML và CSS. Bạn có thể phải bắt đầu từng bước nhỏ và giữ cho quá trình làm việc luôn nhất quán. Để bắt đầu, chúng tôi sẽ biểu diễn cách làm thế nào để thêm những đoạn JavaScript cơ bản tới trang web, tạo ví dụ "hello world" (ví dụ tiêu chuẩn trong lập trình cơ bản).

Chú ý: nếu bạn không theo dõi toàn bộ bài họchãy tải đoạn code mẫu và dùng nó như điểm khơi đầu.

  1. Đầu tiên, đi đến trang web thử nghiệm và tạo một thư mục mới tên là 'scripts' (mà không có dấu nháy). Sau đó, trong thư mục scripts mà bạn vừa tạo, hãy thêm một tệp mới với tên là main.js. Lưu nó vào thư mục scripts .
  2. Tiếp theo, trong tệp index.html thêm phần tử sau trên một dòng mới trước thẻ đóng </body>:
    <script src="scripts/main.js"></script>
  3. Điều này là cơ bản giống như việc thêm đường dẫn phần tử cho CSS — Nó áp dụng JavaScript tới page, vì vậy nó có thể có ảnh hưởng tới tài liệu HTML(cùng với CSS và bất kỳ điều gì khác trên trang).
  4. Thêm đoạn mã sau vào tệp main.js :
    var myHeading = document.querySelector('h1');
    myHeading.textContent = 'Hello world!';
  5. Cuối cùng, để chắc chắn tập tin HTML và JavaScript đã được lưu. Bạn sẽ phải thấy nội dung sau trên trình duyêt:

Lưu ý: Lý do chúng ta đặt thẻ <script> gần cuối tập tin HTML là để nội dung HTML được tải xuống trước và hiển thị trước, còn nếu tập tin JavaScript được tải trước, code trong JavaScript được thực thi trong khi HTML chưa được tải xuống. JavaScript sẽ chạy không đúng. Cho nên cách an toàn nhất là chúng ta đặt JavaScript ở cuối tập tin HTML.

Chuyện gì đã xảy ra?

Chúng ta thấy dòng tiêu đề bây giờ đã được đổi thành "Hello world!" bằng dòng lệnh JavaScript. Bạn đã làm được điều này bằng cách gọi hàm querySelector() để lấy tham chiếu đến tiêu đề và lưu nó vào biến myHeading. Việc này tương tự như cách chúng ta dùng CSS selectors. Khi cần làm thực hiện điều gì trên một phần tử, trước tiên chúng ta cần tham chiếu đến nó trước.

Sau đó, bạn gán giá trị của thuộc tính textContent của biến myHeading thành "Hello world!".

Lưu ý: Cả hai tính năng bạn dùng ở trên đều là một phần của Document Object Model (DOM) API, thứ cho phép bạn chọn và xử lý các phần trên tài liệu HTML

Khoá học cơ bản về ngôn ngữ

Để bạn hiểu rõ hơn về cách JavaScript làm việc, chúng ta sẽ tiếp tục đi qua một vài khái niệm cơ bản của ngôn ngữ. Các khái niệm này, có thể bạn cũng đã làm quen ở các ngôn ngữ khác, và nếu bạn đã là một lập trình viên, tôi tin chắc bạn đã sẵn sàng để lập trình bất cứ thứ gì với JavaScript.

Lưu ý: Để việc học hiệu quả hơn, bạn hãy thử viết các dòng code ví dụ vào JavaScript console để thấy sự hoạt động của code. Để hiểu rõ hơn về JavaScript console, hãy xem ở bài viết này Discover browser developer tools.

Biến

Biến là các thùng chứa các giá trị bên trong. Bạn có thể bắt đầu khai báo một biến với từ khoá var theo sau bởi tên biến.

var myVariable;

Chú ý: Dấu chấm phẩy ở phía cuối của dòng để minh hoạt rằng đó là điểm kết thúc của câu lệnh. Nó thực sự cần thiết khi bạn có nhiều câu lệnh trong cùng một dòng, nhưng một số người cho rằng nên đặt dấu chấm phẩy cho mỗi câu lệnh. Có một vài quy tắc khi nào dùng và khi nào không dùng dấu chấm phẩy — xem Your Guide to Semicolons in JavaScript để biết thêm chi tiết.

Ghi chú: Bạn có thể đặt bất cứ tên nào cho biến, nhưng có vài tên bị cấm (xem bài viết này để biết luật đặt tên.) Nếu vẫn chưa chắc, bạn có thể kiểm tra tên biến của mình để xem liệu nó đã hợp lệ hay chưa.

Ghi chú: JavaScript phân biệt hoa thường — myVariablemyvariable là hai biến khác nhau. Nếu có vấn đề trong mã nguồn, hãy kiểm tra chữ hoa-thường!

Sau khi khai báo biến, bạn có thể gán giá trị cho nó:

myVariable = 'Bob';

Bạn có thể thực hiện cả hai phép toán này trong cùng một dòng nếu muốn:

var myVariable = 'Bob';

Bạn có thể lấy ra giá trị chỉ bằng cách gọi tên biến:

myVariable;

Sau khi gán giá trị cho biến, bạn có thể thay đổi giá trị của nó:

var myVariable = 'Bob';
myVariable = 'Steve';

Hãy nhớ mỗi biến có kiểu dữ liệu khác nhau:

Biến Giải thích Ví dụ
String Một chuỗi các ký tự hay còn gọi là xâu. Để thông báo giá trị nào đó là xâu, bạn nên đặt nó trong dấu nháy. var myVariable = 'Bob'; hoặc var myVariable = "Bob";
Number Số. Không đặt số trong dấu nháy. var myVariable = 10;
Boolean Giá trị True/False. truefalse là các từ khoá đặc biệt trong JS, và không cần tới dấu nháy. var myVariable = true;
Array Cấu trúc cho phép bạn lưu trữ nhiều giá trị trong một tham chiếu đơn. var myVariable = [1,'Bob','Steve',10];
Trỏ vào mỗi phần tử của mảng theo cách sau:
myVariable[0], myVariable[1], vân vân.
Object Về cơ bản là bất cứ thứ gì. Mọi thứ trong JavaScript đều là object, và có thể lưu trữ trong biến. Hãy ghi nhớ điều này trong lúc học. var myVariable = document.querySelector('h1');
Tất cả các ví dụ phía trên cũng vậy.

Vậy tại sao ta lại cần tới biến? Chà, lập trình mà không có biến thì kém thú vị đi bao nhiêu. Nếu giá trị không thể thay đổi, thì bạn không thể làm mọi thứ một cách động được, như là cá nhân hoá lời mời chào hay thay đổi ảnh hiển thị trong bộ sưu tập.

Comments

Bạn có thể viết comment vào mã nguồn JavaScript, như có thể làm với CSS:

/*
Mọi thứ giữa khoảng này đều là comment.
*/

Nếu comment của bạn không bao gồm ký tự xuống dòng, thường chỉ cần dùng hai dấu sược như sau:

// Đây là một comment

Toán tử

Toán tử là ký hiệu toán học mà tạo ra kết quả dựa trên hai giá trị (hoặc biến). Trong bảng sau, bạn có thể thấy vài toánt ử đơn giản nhất, đi kèm với ví dụ bạn có thể thử trong JavaScript console.

Toán tử Giải thích Ký hiệu Ví dụ
cộng/nối Dùng để cộng hai số, hoặc dính hai xâu lại với nhau. + 6 + 9;
"Hello " + "world!";
trừ, nhân, chia Ba toán tử này làm y chang những gì bạn được học trong tiết toán ở trường. -, *, / 9 - 3;
8 * 2; // nhân trong JS là dấu sao
9 / 3;
toán tử gán Bạn từng thấy toán tử này rồi: nó gán giá trị cho một biến. = var myVariable = 'Bob';
toán tử identity (đồng nhất) Kiểm tra xem hai giá trị đã cho có bằng nhau không, và trả về kết quả true/false (Boolean). === var myVariable = 3;
myVariable === 4;
Phủ định, không bằng Trả về giá trị đối nghịch logic đối nghịch; nó biến true thành false, vân vân. Khi dùng cùng với toán tử Bằng, toán tử phủ định kiểm tra xem liệu hai giá trị có không bằng nhau hay không. !, !==

Đáng ra sẽ trả về true, nhưng phép so sánh trả về false bởi ta đã phủ định nó:

var myVariable = 3;
!(myVariable === 3);

Ở đây chúng ta kiểm tra xem "liệu myVariable có KHÔNG bằng 3 hay không". Phép toán này trả về false bởi vì myVariable CÓ bằng 3.

var myVariable = 3;
myVariable !== 3;

Còn nhiều toán tử cần khám phá lắm, nhưng hiện giờ thì như này là đủ rồi. Xem Biểu thức và toán tử để thấy danh sách đầy đủ.

Ghi chú: Trộn kiểu dữ liệu có thể dẫn tới kết quả không mong muốn khi thực thi tính toán, nên hãy cẩn trọng khi tham chiếu tới biến để đạt được kết quả mong muốn. Chẳng hạn, nhập "35" + "25" vào console của bạn. Tại sao bạn không nhận được kết quả như mong đợi? Bởi vì dấu nháy đã biến số bạn nhập vào thành xâu, nên bạn vừa nối hai xâu lại với nhau thay vì tìm tổng của chúng. Thay vì thế, 35 + 25 bạn sẽ nhận được kết quả mong chờ.

Điều kiện

Điều kiện là cấu trúc mã nguồn cho phép bạn kiểm tra xem liệu một biểu thức có trả về true hay không, rồi chạy các đoạn mã nguồn kế tiếp dựa theo kết quả ấy. Dạng điều kiện thường thấy nhất là if ... else. Chẳng hạn:

var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');    
} else {
  alert('Awwww, but chocolate is my favorite...');    
}

Biểu thức bên trong if ( ... ) là bài kiểm tra — nó dùng toán tử đồng nhất (vừa mô tả phía trên) để so sánh biến iceCream với xâu chocolate để kiểm tra xem liệu hai giá trị có bằng nhau hay không. Nếu phép so sánh trả về true, khối mã đầu tiên sẽ chạy. Nếu phép so sánh không trả về là true, bỏ qua khối mã đầu và thực thi khối mã thứ hai, sau lệnh else.

Hàm

Hàm là một cách để đóng gói tính năng mà bạn muốn tái sử dụng. Khi cần thực thi thủ tục nào đó, bạn chỉ cần gọi hàm, với tên hàm là đủ, thay vì phải viết lại cả đoạn code loằng ngoằng. Bạn vừa thấy vài ví dụ về cách sử dụng hàm ở phía trên, chẳng hạn như:

  1. var myVariable = document.querySelector('h1');
  2. alert('hello!');

Những hàm này, document.querySelectoralert, đều được cài sẵn trong trình duyệt cho bạn sử dụng lúc nào muốn.

Nếu bạn thấy thứ gì đấy trông giống biến, nhưng có ngoặc tròn — () — đằng sau, chắc chắn đó là hàm đấy. Hàm thường có đối số — dữ liệu phục vụ cho hàm. Chúng thường nằm trong ngoặc tròn, ngăn cách với nhau bởi dấu phẩy nếu có nhiều hơn một đối số.

Chẳng hạn, hàm alert() tạo ra một hộp thoại pop-up trên trình duyệt của bạn, nhưng ta cần truyền vào đối số của nó một xâu ký tự để bảo hàm đó cái cần phải in ra trong hộp thoại pop-up.

Tin tốt là bạn có thể tự định nghĩa hàm cho riêng mình - trong ví dụ kế tiếp, ta sẽ viết một hàm đơn giản nhận hai giá trị kiểu số làm đối số và nhân chúng lại với nhau:

function multiply(num1,num2) {
  var result = num1 * num2;
  return result;
}

Thử chạy hàm trên trong console, và thử với vài đối số. Chẳng hạn:

multiply(4,7);
multiply(20,20);
multiply(0.5,3);

Ghi chú: Lệnh return bảo trình duyệt trả về biến result ra khỏi hàm để nó có thể được sử dụng. Điều này cực kì cần thiết bởi vì biến định nghĩa trong hàm chỉ khả dụng bên trong hàm đó. Đây gọi là phạm vi biến. (Đọc để hiểu thêm về phạm vi của biến.)

Sự kiện

Tương tác thực trên website cần sự kiện. Đây là những cấu trúc mã nguồn lắng nghe những thứ xảy ra trong trình duyệt và chạy mã tương ứng. Ví dụ gần gũi nhất là sự kiện click, sẽ nổ ra trên trình duyệt khi bạn bấm vào gì đó bằng con chuột của mình. Để dễ hiểu, nhập đoạn code sau vào console của bạn, rồi click vào trang đang mở:

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

Có nhiều cách để gắn sự kiện cho một phần tử. Ở đây ta chọn phần tử HTML, cài đặt thuộc tính xử lý onclick cho nó thành hàm không tên, mang theo đoạn code mà ta muốn sự kiện click event chạy.

Hãy nhớ rằng

document.querySelector('html').onclick = function() {};

tương tự với

var myHTML = document.querySelector('html');
myHTML.onclick = function() {};

Chỉ ngắn hơn thôi.

Xây dựng trang Web mẫu

Giờ ta đã trải qua JavaScript cơ bản, hãy thêm vài tính năng ngầu bá cháy vào trang web mẫu của chúng ta nào.

Thêm bộ chuyển ảnh

Trong phần này, ta sẽ thêm thêm ảnh vào trang của mình bằng cách sử dụng vài tính năng của DOM API, dùng JavaScript để chuyển đổi giữa hai ảnh khi được click.

  1. Trước tiên, tìm một ảnh khác mà bạn muốn đặt trên trang của mình. Đảm bảo nó bằng hoặc gần với kích cỡ với ảnh ban đầu.
  2. Lưu hình ảnh này trong thư mục images.
  3. Thay tên cho ảnh thành 'firefox2.png' (không có nháy).
  4. Đi tới tệp main.js, và nhập vào đoạn JavaScript sau. (Nếu đống "hello world" vẫn còn đấy, xoá nó đi.)
    var myImage = document.querySelector('img');
    
    myImage.onclick = function() {
        var mySrc = myImage.getAttribute('src');
        if(mySrc === 'images/firefox-icon.png') {
          myImage.setAttribute ('src','images/firefox2.png');
        } else {
          myImage.setAttribute ('src','images/firefox-icon.png');
        }
    }
  5. Lưu tất cả các tệp tin và mở index.html trên trình duyệt. Giờ khi bạn click hình ảnh, nó sẽ lật qua lại giữa hai hình!

Bạn lưu tham chiếu tới hình ảnh của mình trong biến myImage. Kế đến, bạn tạo hàm không tên cho thuộc tính xử lý sự kiện onclick của biến này. Giờ thì bất cứ khi nào hình ảnh được click:

  1. Bạn lấy ra giá trị của thuộc tính src trên ảnh của mình.
  2. Bạn dùng điều kiện để kiểm tra xem giá trị của src có bằng giá đường dẫn tới hình ảnh ban đầu không:
    1. Nếu có, bạn thay đổi giá trị src thành đường dẫn của hình ảnh thứ hai, ép hình ảnh tải lại trong phần tử <image>.
    2. Nếu không (tức là nó đã bị thay đổi), giá trị src vòng lại đường dẫn ban đầu, trở về trạng thái ban đầu.

Thêm lời chào cá nhân hoá

Kế đến ta sẽ viết thêm vài dòng code, thay đổi tiêu đề trang thành lời chào cá nhân hoá khi người dùng lần đầu chuyển hướng tới trang. Lời chào này sẽ tồn tại mãi, kể cả khi người dùng ra khỏi trang và quay lại — ta sẽ lưu lại nó bằng cách sử dụng Web Storage API. Ta cũng sẽ thêm lựa chọn thay đổi người dùng, và vì thế, lời chào sẽ ở đó bất cứ khi nào cần tới.

  1. Trong index.html, thêm dòng sau ngay trước phần tử <script>:
    <button>Change user</button>
  2. Trong main.js, đặt đoạn code sau đây xuống cuối của tệp tin, chính xác như được viết — đoạn này tham chiếu tới nút bấm mới và tiêu đề, lưu trữ chúng trong các biến:
    var myButton = document.querySelector('button');
    var myHeading = document.querySelector('h1');
  3. Giờ hãy thêm hàm sau để cài đặt lời chào nào — chưa làm gì đâu, nhưng ta sẽ sửa lại nó ngay thôi:
    function setUserName() {
      var myName = prompt('Please enter your name.');
      localStorage.setItem('name', myName);
      myHeading.textContent = 'Mozilla is cool, ' + myName;
    }
    Hàm này chứa hàm prompt(), sẽ mở ra một hộp thoại, khá giống với alert(). Tuy nhiên, prompt() yêu cầu người dùng nhập dữ liệu vào, lưu trữ lại dữ liệu đó trong một biến sau khi người dùng nhấn nút OK. Trong trường hợp này, ta đang yêu cầu nhập tên mình vào. Kế đến, ta gọi API tên là localStorage, cho phép ta lưu trữ dữ liệu trong trình duyệt và lấy ra sau này. Ta dùng hàm setItem() của localStorage để khởi tạo và lưu trữ mục dữ liệu gọi là 'name', cài đặt giá trị của nó cho biến myName chứa dữ liệu mà người dùng nhập vào. Cuối cùng, ta đặt textContent cho tiêu đề thành một xâu, kèm theo tên mà người dùng vừa nhập vào.
  4. Tiếp theo, thêm khối if ... else — ta có thể gọi đây là mã khởi tạo, bởi nó bắt đầu khi trình duyệt vừa được tải xong:
    if(!localStorage.getItem('name')) {
      setUserName();
    } else {
      var storedName = localStorage.getItem('name');
      myHeading.textContent = 'Mozilla is cool, ' + storedName;
    }
    Khối code này dùng toán tử phủ định (logical NOT, biểu diễn bởi !) để kiểm tra xem dữ liệu name có tồn tại hay không. Nếu không, hàm setUserName() sẽ chạy để khởi tạo nó. Nếu đã tồn tại (tức là, người dùng đã điền thông tin vào trong lần trước), ta lấy giá trị được trữ bằng getItem() và đặt xâu ký tự vào textContent cho tiêu đề, kèm theo tên người dùng, như đã làm trong hàm setUserName().
  5. Cuối cùng, đặt bộ xử lý sự kiện onclick sau vào nút bấm. Khi được bấm, hàm setUserName() sẽ chạy. Điều này cho phép người dùng đặt tên mới, nếu họ muốn:
    myButton.onclick = function() {
      setUserName();
    }
    

Giờ khi lần đầu vào trang, nó sẽ hỏi tên của bạn, rồi gửi cho bạn một lời chào. Bạn có thể đổi tên bất cứ khi nào tuỳ thích bằng cách nhấn vào nút. Như đã giải thích phía trên, vì tên được lưu bên trong localStorage, nó vẫn sẽ tồn tại ở đó dù cho trang bị đóng lại, giữ lời chào cho lần tiếp theo bạn vào trang!

Kết luận

Nếu bạn làm theo các hướng dẫn trong bài viết này, thành quả của bạn sẽ trông như thế này (bạn có thể xem phiên bản của chúng tôi tại đây):

Nếu bạn bị bí ngòi, bạn có thể tham khảo bản đã hoàn thiện trên Github.

Ta vừa mới làm quen với bề nổi của JavaScript. Nếu bạn thích thú việc này, và tiến xa hơn nữa, hãy ghé qua chủ đề học JavaScript của chúng tôi.

Document Tags and Contributors

Những người đóng góp cho trang này: mdnwebdocs-bot, PurpleLover, cuongtran86, huytocdo, quytran, happymark01, kamui23, ldhnam, hungphamuy95
Cập nhật lần cuối bởi: mdnwebdocs-bot,