Tổng hợp kiến thức JavaScript cơ bản cho người mới bắt đầu


  • Angel

    1. 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ữ động, được tích hợp và nhúng trong HTML giúp website sống động hơn. Cụ thể hơn, JavaScript có thể tính toán, thao tác, và phê duyệt dữ liệu cũng như cập nhật thay đổi cả HTML và CSS của trang web.

    Ngoài việc ứng dụng trong lập trình các website thì JavaScript còn có thể sử dụng để xây dựng ứng dụng cho website máy chủ và ứng dụng di động, app và thậm chí cả game nữa nhé 😉

    Các bạn mới bắt đầu có thể luyện tập JavaScript ở các trang như w3schools, codecademy, JSFiddle, JS Bin

    2. Các kiến thức cơ bản của JavaScript

    2.1. Alert, console.log, comment

    - Hàm alert()
    Hàm alert() trong javascript có nhiệm vụ hiển thị ra màn hình một hộp thoại kèm theo nội dung do chúng ta setup.

    Cú pháp:
    094aa19e-e869-4009-af21-d92c910f65d8-image.png

    Ví dụ: Thông báo ra màn hình chữ: 'hello'
    b1337e0c-db06-4d96-814c-ff65bd6c826e-image.png

    Màn hình sẽ hiển thị ra như sau:
    e969fe1f-3251-4512-8736-fce479555347-image.png

    - Hàm console.log()
    Trong JavaScript, hàm console.log() thường được sử dụng để debug, nó có nhiệm vụ show ra giá trị của tất cả các loại dữ liệu như number, integer, array, object, chính vì vậy khi muốn biết trong một biến đó có giá trị gì thì ta sẽ sử dụng hàm console.log().

    Cú pháp:
    1d0c1fed-b4f1-4795-9a99-21ea679c41ec-image.png

    Ví dụ:
    e9bbb81b-708a-439b-bbf1-2e062ae1ef15-image.png

    - Comment
    Có 2 kiểu comment trong JavaScript* như sau:
    a28d6604-191b-46cc-9711-0b98e238ea60-image.png

    2.2. Variable

    Biến cũng như một thùng chứa dùng để lưu trữ một giá trị dữ liệu

    7 kiểu biến cơ bản sau đây:

    • String:
      0d99b4a7-4a24-481b-80cf-4a1c8111168a-image.png

    • Number:
      d6e93d1f-edad-4048-a9f8-5b5f18198844-image.png

    • Boolean:
      Đối tượng Boolean trong JavaScript là một đối tượng đại diện cho giá trị trong hai trạng thái: true hoặc false
      1cff956d-0966-455a-8a63-aa334f54c879-image.png

    • Undefined:
      Undefined có nghĩa là không xác định. Khi bạn khai báo một biến mà không gán giá trị cho nó, giá trị của biến đó sẽ là undefined
      a8967b1e-d0c6-43a0-97e5-cd101437322f-image.png

    • Null:
      Null có nghĩa là giá trị rỗng hoặc giá trị không tồn tại, nó có thể sử dụng để gán cho một biến như là một đại diện không có giá trị.
      81e8236b-0141-46c0-a34d-059d139c2792-image.png

    • Function:
      831f2f26-5e85-43c6-b62f-3aa558ebe929-image.png

    • Object:
      Về mặt định nghĩa, một đối tượng (một object) là một danh sách các item, mỗi item là một cặp name-value, trong đó value có thể là: các kiểu dữ liệu cơ bản, function, hay cũng có thể là một object khác (kiểu dữ liệu phức hợp).
      a605eb4d-4160-4cb9-90ee-7e72fdb89876-image.png

      Array cũng là một object

      488e7acb-dd45-41a7-8389-fe3cd57b01a2-image.png

    2.3. Function

    • Function (hàm, chức năng), gọi chung là subprogram (chương trình con) có thể được gọi ở bên ngoài hoặc bên trong chính nó.

      59ec8653-4e13-4cf3-b3aa-55eec4eb5b33-image.png

      Ví dụ:
      b66b5f64-0673-4ef9-a018-f0c200d4e774-image.png

    • Function không có tham số và không trả về bất cứ giá trị gì.
      d2c72fc7-4a0d-4dd7-87b0-eda188d2acd3-image.png

    • Function vô danh (Anonymous functions)

      Anonymous functions hay còn gọi là hàm ẩn danh, là một hàm được sinh ra đúng vào thời điểm chạy của chương trình. Thông thường khi bạn khai báo một hàm thì trình biên dịch sẽ lưu lại trong bộ nhớ nên bạn có thể gọi ở trên hay dưới vị trí khai báo hàm đều được, nhưng với anonymous functions thì nó sẽ được sinh ra khi trình biên dịch xử lý tới vị trí của nó.
      f8382693-2d46-4cc8-8cb2-cc34de819db4-image.png

    • Function có một tham số và trả về một giá trị cụ thể

      249624f2-c404-4658-a2f5-9f3440a85106-image.png

    • Function self-invoking
      Đây là function có thể gọi chính nó

      ea2f701e-d817-4235-9507-540d1530ccb4-image.png

    2.4. For, if, while

    - if
    Cú pháp:
    24caa0e1-6d63-4bdb-9216-4d6223bffc68-image.png

    Ví dụ: so sánh nếu 9 > 7 thì sẽ in ra True còn không thì sẽ in ra False
    1db807c1-057a-4d21-9ec6-f092c00ca694-image.png

    - for
    Vòng lặp for trong javascript thường dùng để lặp một mảng hoặc một khoảng (min max) nào đó nhằm mục đích xử lý giải quyết vấn đề cho bài toán
    Ví dụ:
    a5941f35-268a-46b6-aa16-7f3e1de521a6-image.png
    Kết quả:
    3311906b-4338-47e8-8166-c6868c6f733f-image.png

    - while
    Vòng lặp whiledo while dùng để lặp với trường hợp tác không biết chính xác số lần lặp là bao nhiêu và trường hợp điều kiện dừng vòng lặp phức tạp, điều này hoàn toàn khác với vòng lặp for. Khi sử dụng vòng lặp while rất dễ bị lặp vô hạn nếu ban không xử lý đúng logic, vì thế hãy cẩn thận khi sử dụng nhé.

    Cú pháp:
    ca9b9023-23dd-4070-858e-ccdde59711c6-image.png

    Ví dụ: Dùng vòng lặp while lặp từ 1 tới 10
    1357b097-4cc3-4ca3-af7e-7f357cf91f8b-image.png

    2.5. Switch case

    Lênh switch case có công dụng giống như lệnh if else đó là đều dùng để rẻ nhánh chương trình, ứng với mỗi nhánh sẽ có một điều kiện cụ thể và điều kiện đó phải sử dụng toán tử so sánh bằng, còn đối với lệnh if else thì bạn có thể truyền vào một mệnh đề bất kì và sử dụng nhiều toán tử khác nhau.

    Cú pháp:
    49362a26-0d19-4b61-8b61-276d1db51315-image.png

    2.6. Array

    Đối tượng Array trong javascript là một đối tượng toàn cục được dùng để xây dựng nên các mảng, là những đối tượng cấp cao và giống một dạng danh sách

    - Tạo một Mảng
    f4bd50a1-402f-42be-96f7-3ac48bf8c3ea-image.png

    - Truy cập đến một phần tử của Mảng
    5301f23f-e2cb-4452-8e5e-a3ef7203c513-image.png

    - Thêm phần tử vào cuối Mảng
    f780ce8d-60e9-4edb-ad11-31989a84a396-image.png

    - Xóa phần tử ở vị trí cuối của Mảng
    96245ad0-a34b-41eb-b458-0353f2750616-image.png

    2.6. Object

    - Khai báo một Object
    9c9b3146-cba5-4d8d-87a0-b99053681be6-image.png

    - Gọi thuộc tính của một Object
    564f6043-a0e2-4074-88df-85a89ad84c5e-image.png

    3. Một số hàm cơ bản của JavaScript

    3.1. Math

    Đối tượng Math cung cấp cho bạn các thuộc tính và phương thức cho các hằng số và hàm toán học. Không giống các đối tượng Global khác, Math không là một constructor. Tất cả thuộc tính và phương thức của Math là tĩnh (Static) và có thể được gọi bởi sử dụng Math như là một đối tượng mà không phải tạo nó.

    Ví dụ: tham chiếu hằng số pi
    5e35384f-27f7-4c74-97af-5352ca41cc8f-image.png

    Các thuộc tính của Math:
    1266287e-e828-4653-8760-ca701f840774-image.png

    Các phương thức của Math:
    cdc9d2f6-a735-4ec9-a5e8-70661680e498-image.png

    3.2. Array.slice()

    Phương thức slice() trả về một bản sao tham chiếu (shalow copy) một phần của một mảng dưới dạng một mảng mới nhận các giá trị có chỉ số từ begin đến end (không bao gồm end). Mảng ban đầu không thay đổi

    34542309-2916-4720-983e-f8672fe654b4-image.png

    3.3. Array.filter()

    Phương thức filter() dùng để tạo ra một mảng mới với tất cả các phần tử thỏa mãn điều kiện của một hàm test

    f4661ee1-a7e0-4934-9fcd-2a0979c0890a-image.png

    Và trong JavaScript còn rất rất nhiều các hàm hay ho nữa đấy nhé 😉

    4. Tổng kết

    Bài viết cũng đã dài rồi, vậy chúng ta đã biết thêm kha khá kiến thức về javascript rồi đấy nhé 😉
    Nếu có phản hồi gì, hãy đóng góp cho chúng mình ở phía bên dưới để chúng mình bổ sung để hoàn thiện hơn nha.
    Còn bây giờ thì, xin chào và hẹn gặp lại ở các bài viết tiếp theo.🖐


Log in to reply