I. Lập trình javascript cơ bản

1. Cài đặt môi trường phát triển javascript

Để lập trình javascript cơ bản, nên sử dụng Node.js và Visual Studio Code

Sau khi cài đặt Node.js và VS Code, mở ứng dụng VS code, tạo mới file javascript và chạy chương trình bằng cách chọn từ menu Run → Run Without Debug → Node.js. Kết quả chạy chương trình được in ra ở tab DEBUG CONSOLE

2. Các cú pháp cơ bản

Khai báo biến

      var x = 1;
      let y = 2;
      let z = x + y;
      const st = "Xin chào";
    

Có thể dùng các từ khoá var, let hay const để khai báo biến

Các biến khai báo với var và let có thể thay đổi giá trị trong chương trình.

Các biến khai báo với const sẽ giữ giá trị không đổi trong toàn bộ chương trình (hằng số).

Sự khác biệt giữa var và let không nhiều, nhưng nên sử dụng let vì đây là cách khai báo mới có trong các bản javascript gần đây và tránh được một số hiệu ứng không tốt từ var ( có từ những bản đầu của javascript).

In dữ liệu ra console

      var x = 1;
      let y = 2;
      let z = x + y;
      console.log('x=', x, ', y=', y, ', z=', z);
    

Sử dụng lệnh console.log để in dữ liệu ra console

Các phép toán cơ bản

• Phép toán số học :
  • + : Cộng
  • - : Trừ
  • * : Nhân
  • / : Chia
  • % : Lấy số dư
• Phép toán thu gọn :
  • += : Lệnh a += b tương đương với a = a + b
  • -= : Lệnh a -= b tương đương với a = a - b
  • ...
• Phép toán tăng giảm :
• ++ : Lệnh a++ hoặc ++a tương đương với a = a + 1
• -- : Lệnh a-- hoặc --a tương đương với a = a - 1

Ví dụ:

      let x = 1;
      let y = 2;
      x += 2;
      y--;
      let z = x + y;
      let t = x - y;
      let u = x * y;
      let v = x / y;
      let w = x % y;
      console.log(z, t, u, v, w);
    

Khối lệnh

Khối lệnh là một tập hợp nhiều lệnh liên tiếp nhau được đặt trong cặp dấu ngoặc nhọn {}

Khối lệnh thường được dùng trong các cú pháp rẽ nhánh (if-else) và lặp (for, while).

Giữa các lệnh trong khối lệnh ngăn cách nhau bởi dấu chấm phảy, hoặc bởi kí tự xuống dòng

Ví dụ:

      {
        let x = 1;
        let y = 2;
      }
      {
        let name = 'world'
        console.log('Hello', name)
      }
    

Lệnh rẽ nhánh có điều kiện if-else

Các điều kiện logic dùng trong cú pháp if-else

Phép toán dấu hỏi (ternary)

Cú pháp:

Giải thích: Nếu điều kiện đúng thì biểu thức nhận giá trị 1, nếu không biểu thức nhận giá trị 2

Ví dụ:

      let x = 1;
      let y = 2;
      let z = x < y ? x : y;
      console.log('Số bé hơn trong 2 số:', z);
    

Vòng lặp for

Cú pháp:

Giải thích:

• <khoi_tao_bien_lap> : Khởi tạo biến lặp, thường là các biến đếm tăng, giảm để thể hiện bước lặp
• <dieu_kien_tiep_tuc> : Điều kiện kiểm tra để xem có tiếp tục thực hiện khối lệnh lặp hay không. Bắt đầu vòng lặp và sau mỗi bước lặp, điều kiện này được kiểm tra, nếu không thoả mãn, vòng lặp sẽ kết thúc.
• <cap_nhat_bien_lap> : Cập nhật biến lặp sau mỗi bước thực hiện. Thao tác cập nhật thường dùng nhất là tăng/giảm 1 cho biến lặp.
• <khoi_lenh_lap> : Khối lệnh được thực hiện ở mỗi bước lặp.

Ví dụ:

      // In ra các số chính phương từ 1 đến 100
      for(let i = 1; i <= 10; i++) {
        console.log(i, '*', i, '=', i*i);
      }

      // In ra bảng cửu chương
      for(let i = 2; i <= 10; i++) {
        for(let j = 2; j <= 10; j++){
          console.log(i, '*', j, '=', i*j);
        }
        console.log('');
      }
    

Vòng lặp while

Cú pháp:

Giải thích:

• <dieu_kien_tiep_tuc> : Điều kiện kiểm tra để xem có tiếp tục thực hiện khối lệnh lặp hay không. Bắt đầu vòng lặp và sau mỗi bước lặp, điều kiện này được kiểm tra, nếu không thoả mãn, vòng lặp sẽ kết thúc.
• <khoi_lenh_lap> : Khối lệnh được thực hiện ở mỗi bước lặp.

Ví dụ:

      // In ra các số chính phương từ 1 đến 100
      let i = 1;
      while(i <= 10) {
        console.log(i, '*', i, '=', i*i);
        i++;
      }

      // Tìm số tự nhiên nhỏ nhất chia 2 dư 1, chia 3 dư 2, chia 4 dư 3
      let n = 1;
      while(n%2 != 1 || n%3 != 2 || n%4 != 3) n++;
      console.log(n);
    

Kiểu dữ liệu String

Kiểu string dùng để lưu trữ các dữ liệu dạng văn bản. Trong javascript dữ liệu string được đặt trong cặp nháy đơn ('') hoặc nháy kép ("")

Một số thao tác thông dụng trên dữ liệu string:

Kiểu dữ liệu List

Kiểu List dùng để lưu trữ một dãy các phần tử (có thể cùng hoặc khác kiểu dữ liệu). Trong javascript dữ liệu List được đặt trong cặp ngoặc vuông [].

Một số thao tác thông dụng trên dữ liệu List:

Kiểu dữ liệu Object

Kiểu Object dùng để lưu trữ một đối tượng với các trường dữ liệu con. Trong javascript dữ liệu Object được đặt trong cặp ngoặc nhọn {}.

Một số thao tác thông dụng trên dữ liệu Object:

Hàm (Function)

Hàm (function) dùng để khai báo các chức năng được sử dụng lặp lại nhiều lần, hoặc để chia nhỏ chương trình thành các khối nhỏ để dễ phát triển/bảo trì.

Cú pháp khai báo hàm:

Giải thích:

• <ten_ham> : Tên hàm
• <danh_sach_bien> : Danh sách các biến đầu vào của hàm, giữa các biến ngăn cách nhau bởi dấu phảy
• <ket_qua> : Kết quả trả về sau khi xử lý.

Ví dụ:

      // Hàm lấy số lớn nhất trong 2 số
      function max(a, b){
        if(a > b) {
          return a;
        }else {
          return b;
        }
      }
      // Gọi hàm trong chương trình chính
      console.log(max(2, 3));

      // Hàm tính tổng một dãy số
      function sum(arr) {
        let s = 0;
        for(let i = 0; i < arr.length; i++) s += arr[i];
        return s;
      }

      // Gọi hàm trong chương trình chính
      console.log(sum([1, 2, 3, 4, 5]));
    

Hàm mũi tên (Lambda/ Arrow function)

Lambda/Arrow Function là cách khai báo một hàm dưới dạng một biến dữ liệu.

Cú pháp khai báo:

hoặc dùng toán tử mũi tên (arrow):

Ứng dụng của Lambda/Arrow Function: dùng để truyền tham số dạng hàm cho một hàm khác (hàm của hàm)

Một số thao tác hay sử dụng với Lambda/Arrow Function:

II. Sử dụng javascript để điều khiển DOM

Debug javascript trên trình duyệt

Để Debug Javascript trên trình duyệt có thể sử dụng hàm alert để đưa ra thông báo (nên hạn chế dùng) hoặc dùng hàm console.log (in ra tab console của trình duyệt).

Ví dụ:

      
        <script>
          console.log('Xin chào !!!!');        
          alert('Xin chào');                
        </script>
      
Chạy thử chương trình
    

Để xem log trên trình duyệt, click chuột phải vào màn hình trang web, chọn inspect, menu phát triển sẽ mở ra. Chuyển sang tab console để xem nội dung log do javascript in ra:

1. Truy xuất các phần tử HTML qua id

Trong HTML, mỗi phần tử được định danh duy nhất qua id:

Để truy xuất đến một phần tử HTML, javascript sử dụng hàm document.getElementById:

Hàm document.getElementById trả về một thẻ (handle) dùng để điều khiển phần tử HTML. Một số thao tác có thể thực hiện thông qua thẻ điều khiển này:

• Đọc/ghi nội dung của phần tử
• Đọc/ghi thuộc tính của phần tử
• Hiện/ẩn/xoá phần tử

2. Đọc/ghi nội dung các phần tử HTML

Việc đọc/ghi nội dung các phần tử HTML được thực hiện thông qua thuộc tính innerHTML của thẻ điều khiển trả về từ hàm document.getElementById trong phần trên.

Ví dụ:

      
        <body>
          <div id='div1'>Thẻ 1</div>
          <div id='div2'></div>
        </body>

        <script>
          let div1 = document.getElementById('div1');
          alert('Nội dung thẻ 1:' + div1.innerHTML);
          let div2 = document.getElementById('div2');
          div2.innerHTML = 'Thẻ 2';
        </script>
      
Chạy thử chương trình
    

Việc đọc nội dung thẻ được thực hiện qua việc đọc thuộc tính innerHTML:

Việc ghi nội dung vào thẻ được thực hiện thông qua việc đặt gía trị cho thuộc tính innerHTML:

3. Đọc/ghi giá trị các phần tử nhập dữ liệu

Các phần tử nhập dữ liệu (input, textarea, select), chứa giá trị do người dùng nhập vào. Để đọc/ghi các giá trị này, sử dụng thuộc tính value của thẻ điều khiển trả về từ hàm document.getElementById.

Ví dụ:

      
        <body>
          <p>Họ tên: <input id="name"/></p>
          <p>Giới tính:
            <select id="gender">
              <option value="">----</option>
              <option value="male">Nam</option>
              <option value="female">Nữ</option>
            </select>
          </p>
          <button onclick='readData()'>OK</button>
        </body>

        <script>
          function readData() {
            let nameElem = document.getElementById('name');
            let name = nameElem.value;
        
            let genderElem = document.getElementById('gender');
            let gender = genderElem.value;
            
            alert(`Họ tên: ${name}, giới tính: ${gender}`);
        
            //clear data
            nameElem.value = '';
            genderElem.value = '';
          }
        </script>
      
Chạy thử chương trình
    

Riêng với các thẻ input thuộc loại checkbox thì sử dụng thuộc tính checked của thẻ điều khiển để đọc/ghi giá trị:

      
        <body>
          <p>Đồng ý với điều khoản sử dụng: <input type="checkbox" id="agree"/></p>
          <button onclick='readData()'>OK</button>
        </body>

        <script>
          function readData() {
            let agreeElem = document.getElementById('agree');
            let agree = agreeElem.checked;
            alert(agree?'Đã đồng ý': 'Chưa đồng ý');
          }
        </script>
      
Chạy thử chương trình
    

4. Xử lý sự kiện

Các sự kiện sẽ phat sinh khi người dùng thao tác với các phần tử HTML.

Mỗi sự kiện được xử lý bởi một hàm tương ứng của phần tử HTML. Hàm xử lý sự kiện có tên được bắt đầu với ký hiệu on kèm theo tên sự kiện phía sau.

Hai sự kiện thường sử dụng nhất là onclick (khi người dùng click chuột vào phần tử HTML) và onchange (khi người dùng thay đổi giá trị của các trường nhập liệu).

Ví dụ xử lý sự kiện onclick:

      
        <body>
          <button onclick="btnClk()">OK</button>
        </body>

        <script>
          function btnClk() {
            alert("OK");
          }
        </script>
      
Chạy thử chương trình
    

Ví dụ xử lý sự kiện onchange:

      
        <body>
          <select onchange="selChange(this)">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
          </select>
        </body>
        
        <script>
          function selChange(el) {
            var options = el.options;
            var index = el.selectedIndex;
            alert(options[index].value);
          }
        </script>
      
Chạy thử chương trình
    

5. Trao đổi dữ liệu với server

Javascript dùng hàm fetch để lấy dữ liệu từ server xuống client (qua phương thức GET http), và đẩy dữ liệu từ client lên server (qua phương thức POST của http)

Lấy dữ liệu từ server xuống client:

Để lấy dữ liệu từ server về client, sử dụng hàm fetch theo một trong 2 cách:

• Sử dụng callback : Do hàm fetch là hàm không đồng bộ (sau khi thực hiện gọi hàm, kết quả chưa trả về ngay mà sau một thời gian mới có kết quả), nên phải dùng callback của javascript để xử lý kết quả. Bản chất của callback là một function có tham số đầu vào là kết quả trả về từ server.
    fetch(url)

      .then(resp => resp.json())

      .then(result => {

        //TODO: Process result

      })
  
  

  Ví dụ:

          
            <script>
              //Ví dụ dùng hàm fetch lấy dữ liệu từ server
              const url = "https://api.openweathermap.org/data/2.5/weather?id=1581129&units=metric&appid=d6477696b63c2e661af64eead58c11d9";
  
              fetch(url)
                .then((resp) => resp.json())
                .then((result) => {
                  let temp = result.main.temp;
                  alert(`Current temperature : ${temp} °C`);
                });
  
              </script>
          
  Chạy thử chương trình
        

• Sử dụng cơ chế gọi hàm không đồng bộ qua await. Từ khoá await của javascript giúp chuyển một hàm không đồng bộ thành hàm đồng bộ, và giúp việc gọi hàm không đồng bộ tương tự cách gọi các hàm thông thường. Muốn sử dụng await thì hàm không đồng bộ phải được khai báo với từ khoá async ở đầu.
    async function getDataFromServer() {

      let resp = await fetch(url);

      let result = await resp.json();

      //TODO: Process result

    }
  
  

  Ví dụ:

          
            <script>
              const url = "https://api.openweathermap.org/data/2.5/weather?id=1581129&units=metric&appid=d6477696b63c2e661af64eead58c11d9";
              
              async function getTemperature() {
                let resp = await fetch(url);
                let result = await resp.json();
                let temp = result.main.temp;
                alert(`Current temperature : ${temp} °C`);
              }
            
              getTemperature();
  
            </script>
          
  Chạy thử chương trình
        

Đẩy dữ liệu từ client lên server:

Để đẩy dữ liệu lên server, cũng sử dụng hàm fetch, nhưng truyền vào thêm các tham số:

• method : "POST"
• body : Dữ liệu gửi về server, thường dùng 1 trong 2 dạng là FormData hoặc Json String
• Content-Type: Nếu dùng dữ liệu dạng Json String thì phải chọn Content-Type là application/json

Ví dụ:

    
      <script>
        // Đẩy dữ liệu lên server theo dạng FormData

        function sendMessage(message){
          const url = "http://<SERVER_URL>/send-messsage";
          let data = new FormData();
          data.append("message", message);

          fetch(url, {method: "POST", body: data})
            .then(resp => resp.json())
            .then(result => console.log(result));
        }

      </script>
    
  

    
      <script>
        // Đẩy dữ liệu lên server theo dạng JSON

        function sendMessage(message){
          const url = "http://<SERVER_URL>/send-messsage";
          let data = {message: message};
          data = JSON.stringify(data);

          let headers = {
            'Content-Type': 'application/json'
          };

          fetch(url, {method: "POST", body: data, headers: headers})
            .then(resp => resp.json())
            .then(result => console.log(result));
        }

      </script>