Javascript basic

Javascript là một ngôn ngữ cực kì đa năng, với Javascript bạn có thể làm được backend với nodejs, làm được frontend với các framework Reactjs, Vuejs,... làm được mobile app với React Native, làm được các web game với sự mãnh mẽ về tính real-time của javascript, thậm chí là framework Tensorflow trong Deep Learning cũng hỗ trợ ngôn ngữ lập trình Javascript, trong bài viết này mình sẽ điểm qua 12 ý chính về Javascript vừa để ôn tập cũng như nếu có quên thì mọi người có thể ngó qua để xem lại nha.

Xem thêm : Các điểm nhấn trong cú pháp của ES6

"Hello World!" trong Javascript

In ra dòng hello world trong js :

console.log("Hello World!");

Biến và kiểu dữ liệu

• Javascript khai báo biến với từ khóa var

  var myNumber = 3; // number
  var myString = "string"; // string
  var myBoolean = false;	// boolean
  

  • Trong Javascript, number có thể là số thực hoặc số nguyên.

• Có 2 kiểu dữ liệu nâng cao trong Javascript là mảng (array) và đối tượng (Object)

  var myArray = [];
  var myObject = {};
  

• Có 2 giá trị đặc biệt là undefined và null

  var newVariable;
  console.log(newVarialbe); // undefined
  var emptyVariable = null;
  console.log(emptyVariable) // null
  

Mảng

• Mảng trong Javascript có chức năng như một list, stack hoặc queue

• Khai báo mảng bằng 2 cách :

  • Cách 1 : var myArray = [1,2,3]; (như được đề cập ở mục trước)
  • Cách 2 : var theSameArray = new Array(1,2,3);

• Truy cập tới các phần tử trong mảng sử dụng operator "[]"

• Các phần tử trong mảng có thể là bất cứ kiểu nào như string, number hoặc Object

  var myArray = ["string",10,{}];
  

Thao tác với mảng

• push và pop : dùng để trèn giá trị vào cuối cùng của mảng, giống với 2 chức năng của ngăn xếp

  var myStack = [];
  myStack.push(1);
  myStack.push(2);
  myStack.push(3);
  console.log(myStack); // 1,2,3
  
  console.log(myStack.pop()); // 3 : Xóa đi phần tử cuối trong mảng và trả về giá trị phần tử vừa lấy ra.
  console.log(myStack); // 1,2
  

• shift và unshift : giống với push và pop, tuy nhiên shift và unshift dùng để thêm và xóa phần tử ở đâu của mảng. Sử dụng push (thêm vào cuối mảng) và shift (xóa đi đầu mảng) như 2 thuộc tính của một hàng đợi (queue)

  var myQueue = [];
  myQueue.push(1);
  myStack.push(2);
  myStack.push(3);
  console.log(myQueue.shift()); // 1
  console.log(myQueue.shift()); // 2
  console.log(myQueue.shift()); // 3
  
  var myArray = [1,2,3];
  myArray.unshift(0);
  console.log(myArray); // 0,1,2,3
  

• splice: xóa phần tử trong mảng, phương thức splice(a,b) xóa trong mảng từ phần tử thứ a xóa đi b phần tử

  var myArray = [0,1,2,3,4,5];
  var Splice = myArray.splice(3,1);
  console.log(Splice) // 3
  console.log(myArray) // 0,1,2,4,5
  

Operators

• Toán tử cộng (+)

  • Cộng 2 số number : 1 + 2 = 3, ...
  • Cộng 2 chuỗi : "hello" + "world" = "helloworld"
  • Nếu cộng 2 giá trị có kiểu khác nhau ( number và string) thì js sẽ chuyển tất cả về string sau đó cộng như 2 chuỗi bình thường. ( do giá trị nguyên thủy của Javascript là string, vì vậy khi cộng 2 giá trị không cùng kiểu sẽ được chuyển về string trước khi cộng): 1 + "1" = "11"

• Toán tử toán học: trừ, nhân, chia lần lượt sử dụng các kí hiệu -, *, /

• Các toán tử nâng cao

  • Chia lấy phần dư : 5 % 3 = 1
  • Ngoài ra : number = number / 2 ~ number /= 2, tương tự với các toán tử khác +, -, *, /, %

• Javascript cung cấp thư viện Math có các hàm toán học như :

  • Math.abs() : lấy trị tuyệt đối
  • Math.exp : e^x
  • Math.pow(x,y) : x^y
  • Math.random() : lấy ngẫu nhiên,
  • ...

Câu lệnh điều kiện

• Câu lệnh if: giống với If trong các ngôn ngữ lập trình khác
• Câu lệnh Switch: giống vớiSwitch trong các ngôn ngữ lập trình khác

Câu lệnh lặp

• Lặp vớifor :

  var i;
  for (i = 0; i < 3; i = i + 1)
  {
      console.log(i);
  }
  

• Lặp trong một mảng:

  var myArray = ["A", "B", "C"];
  for (var i = 0; i < myArray.length; i++)
  {
      console.log("Index " + i + " is " + myArray[i]);
  }
  

• Lặp với while :

  var i = 99;
  while (i > 0)
  {
      console.log(i + " bottles of beer on the wall");
      i -= 1;
  }
  

Objects

• Giống với map trong các ngôn ngữ lập trình khác

  var obj = {}; // khai báo 1 object rỗng
  var person = {
      firstName : "trannguyen",
      lastName : "han"
  }
  
  person.age = 21;
  person["salary"] = 3500;
  

• Duyệt object với iteration :

  for (var attri in person)
  {
      if (person.hasOwnProperty(attri))
      {
          console.log(person[attri])
      }
  }
  

  Kết quả thu được :

  trannguyen
  han
  21
  3500
  

Functions

function greet(name)
{
    return "Hello " + name + "!";
}

console.log(greet("trannguyenhan"));      // prints out Hello trannguyenhan!

Pop-up Boxes

confirm("Hi!");

prompt("trannguyenhan hello!");

alert("Hello");

Callback

Một tính chất quan trọng của lập trình không đồng bộ :

var callback = function() {
    console.log("Done!");
}

setTimeout(callback, 5000);

// hoặc :

setTimeout(function() {
    console.log("Done!");
}, 5000);

Arrow Functions

Arrow function là một tính năng mới của ES6, giúp viết code ngắn gọn hơn:

hello = name => {
    console.log('hello ', name)
}

Tìm hiểu thêm về Arrow functions bạn có thể xem thêm tại: https://viblo.asia/p/su-khac-biet-giua-arrow-function-va-function-trong-javascript-07LKXpw2KV4

Tham khảo: https://learn-js.org/