SaigonTech Vault
Loại: knowledge-doc 2026-09-29 active #wiki-import

Tìm hiểu về JS

1. Khái niệm

  • JavaScript là ngôn ngữ lập trình được dùng để tạo trang web tương tác (dynamic web).
  • Thường được sử dụng ở phía client side, nhưng ngày nay, JS đã được sử dụng ở cả front-end và back-end.
  • Là một ngôn ngữ định kiểu yếu, tức người lập trình không được định nghĩa kiểu dữ liệu cho biến. Vì vấn đề này, bản cải tiến của JS (Typescript) được sinh ra để khắc phục các nhược điểm của JS.

Refer: https://www.w3schools.com/js/js_intro.asp

2. DOM là gì?

  • Dom (Document Object Model)

Các loại DOM

  • DOM document: lưu trữ toàn bộ các thành phần trong documents của website.
  • DOM element: truy xuất tới thẻ HTML nào đó thông qua các thuộc tính như tên class, id, name của thẻ HTML.
  • DOM HTML: thay đổi giá trị nội dung và giá trị thuộc tính của các thẻ HTML.
  • DOM CSS: thay đổi các định dạng CSS của thẻ HTML.
  • DOM Event: gán các sự kiện như onclick(), onload() vào các thẻ HTML.
  • DOM Listener: lắng nghe các sự kiện tác động lên thẻ HTML.
  • DOM Navigation dùng để quản lý, thao tác với các thẻ HTML, thể hiện mối quan hệ cha – con của các thẻ HTML
  • DOM Node, Nodelist: thao tác với HTML thông qua đối tượng (Object).

Refer

  • Vietnamese: https://topdev.vn/blog/dom-la-gi/
  • English: https://www.w3schools.com/js/js_htmldom.asp

(18/03/2024)

Demo

  1. Demo ngày 01/04/2024: Thay đổi src trong thẻ img

Download images: here

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p id="title-js">Styling Lists With Colors</p>

<button onclick="turnOn()">On</button>

<img id="bong-den" alt="" src="./imgs/904bbee645a57f34b012bc48dcbf8906.gif">

<button onclick="turnOff()">Off</button>

</body>

<script>
    const turnOnImg = './imgs/28efb56a4873eac4e6382069430c2c58.gif';
    const turnOffImg = './imgs/904bbee645a57f34b012bc48dcbf8906.gif';
    const bongDenEl = document.getElementById('bong-den');

    function turnOn() {
        bongDenEl.src = turnOnImg;
    }

    function turnOff() {
        bongDenEl.src = turnOffImg;
    }
</script>
</html>
  1. Demo ngày 10/04/2024:

Sử dụng thuộc tính Disabled

<html>
    <body>
        <form>
            <input id="name" type="text"/>
        </form>
        <button onclick="disableInputText()">
            Disable input text
        </button>
    </body>
</html>

    disableInputText() {
        const element = document.getElementById('name');
        element.disabled = true;
    }

Ẩn hiện element bằng JS

.hidden {
    display: none;
}

<div id="toggle-js">
    <p>
        hello world!
    </p>
</div>

<button onclick="toggleText">
    toggle button
</button>

    toggleText() {
        const toggleEl = document.getElementById('toggle-id');
        const isHidden = toggleEl.classList.contain('hidden');
        if(isHidden) {
            toggleEl.removeClass('hidden');
        } else {
            toggleEl.addClass('hidden');
        }
    }

Hiển thị nội dung element

<html>
    <body>
        <form>

        </form>

        <div id="total-amount"></div>
    </body>
</html>

    const totalPrice = 10
    const totalAmount = document.getElementById('total-amount');
    totalAmount.innerHTML = `<div><p>TIP AMOUNT<p><p>${totalPrice}</p><p>mỗi người</p></div>`;
  1. Sửa bài tập JS ngày 17/04/2024:
  2. Bài tập thuộc tính disable

  3. Bài tập hiện TK và MK

  4. Ngày 22/04/2024

Sửa bài tập - Tính tiền tip

  1. Ngày 06/05/2024

Tìm hiểu về createElement và appendChild: - createElement: - Công dụng: tạo ra một thẻ mới của html - Mục đích: tạo thẻ mới chỉ tồn tại trong thẻ script - appendChild: - Công dụng: hiển thị element tạo bởi createElement - Mục đích: hiển thị element ngoài DOM - Demo

HTML:
    <!DOCTYPE html>
<html>

<body>
    <button id="button">Tạo ngay</button>
</body>

JS:
    <script>
    const buttonId = document.getElementById("button");

    buttonId.addEventListener('click', () => {
        const newBtn = document.createElement('button')
        newBtn.innerText = "tao"
        document.body.appendChild(newBtn)
    })
</script>

(Ngày 11/03/2024)

3. Events

  • Events: ...

List

  • Click: nhấp chuột
  • Scroll: dùng chuột giữa kéo lên xuống để xem nội dung trang
  • Move mouse: di chuyển chuột qua lại ở bất cứ đâu trên màn hình
  • Mouve over: di chuyển chuột vào một element nào đó và con chuột biến mất tại element ấy
  • Hover: di chuyển chuột từ ngoài vào trong 1 khu vực nào đó, và ngược lại
  • Click left mouse: nhấp chuột trái
  • Click right mouse: nhấp chuột phải
  • Double click: nhấp chuột 2 lần liên tiếp
  • Click middle mouse: nhấn chuột giữa
  • Press: nhấn phím bằng keyboard
  • Enter: nhấn nút enter
  • Input: nhập nội dung vào form

Event list HTML & JS

  • Mouse
    • click: nhấp chuột
    • drag & drop: nhấn giữ chuột một file đến nơi cần thiết rồi thả chuột
    • scroll:dùng chuột giữa kéo lên xuống để xem nội dung trang
  • Key board
    • keypress: nhấn phím bằng keyboard
  • Form event
    • input: nhập nội dung vào form
    • change: thay đổi nội dung của form
    • focus: nhấn chuột vào khu vực cho phép điền thông tin, tạo hiệu ứng cho thấy có thể bắt đầu điền thông tin vào đây
    • blur: làm mờ element
    • submit:gửi nội dung đã điền lên hệ thống để xử lý

Refer document here

4. Libraries JS

JQuery

React

5. Frameworks of JS

Angular

VueJS

NestJS

6. Exercise

  1. Please complete with this URL (https://www.w3schools.com/quiztest/quiztest.asp?qtest=JS)

Lập trình cơ bản với JS

  • Với kinh nghiệm cá nhân học lập trình, không chỉ riêng JS, mà với tất cả các ngôn ngữ lập trình khác, việc học syntax của một ngôn ngữ khá đơn giản khi tìm hiểu từng phần sau.

1. Variable

Khai báo biến

var: Khi sử dụng biến dùng chung (global variable)
const (local variable): Không thể thay đổi giá trị biến
let (local variable): Có thể thay đổi giá trị biến

Data types

  • Number
    • Interger
    • Float
    • Numeric
  • String
  • Boolean: chỉ mang 2 giá trị True hoặc False. Thường được sử dụng trong câu điều kiện (if() function)
    • Các toán tử so sánh
      • ==
      • !=
      • ===
      • !==
      • >
      • <
      • >=
      • <=
    • Các toán tử liên kết 2 mệnh đề
      • !: NOT
      • &&: AND
      • ||: OR
  • Array
    • Mảng (Array) là một danh sách bên trong chứa các phần tử mà mỗi phần từ được phân biệt bằng dấu ,.
    • Các phần tử bên trong có thể mang các kiểu dữ liệu khác nhau như number, string, boolean, object hoặc array.
    • Syntax:
      • Init a emty array: [].
      • Init a array which has three items: ['item1', 'item2', 'item3'].
  • Object
    • Đối tượng (Object) là một thực thể bên trong chứa các thuộc tính của thực thể đó.
    • Các thuộc tính bên trong có thể mang các kiểu dữ liệu khác nhau như number, string, boolean, object hoặc array.
    • Syntax:
      • Init a empty object: {}.
      • Init a object which has 2 properties are name and age: {name: 'Bob', age: 20}.

2. Operator

Basic

  • +
  • -
  • *
  • **
  • /
  • %
  • ++
  • --

Assignment Operator

Operator Example Same As
= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
**= x **= y x = x ** y

MATH methods

Refer: here

3. Function base

Function

Cách gọi tường minh

vơr quynh = 5

function lamGiQuynhDi () {
    console.log(quynh) // result: 5
    ... Something
}

function danhQuynhDi (quynh) {
    console.log(quynh) // result: 4
    lamGiQuynhDi();
    ... Something
}

danhQuynhDi(4)

Arrow function

(...parameters) => {
    ... do something
}

Example:

Ta có 1 hàm:

dapChiQuynh(name, callback) {
    return 'Da dap chi Quynh'
}
// Call function
dapChiQuynh('Quynh', (nguoiDapChiQuynh) => {
    ... do something
})

Rule rename function

  • Function name: Verb+Noun({parameters}: optional)
  • Example:
    • Ex1: Khi ta muốn tạo một hàm có chức năng hiển thị nội dung HTML: displayHtml(content: String)
    • Ex2: Khi chúng ta muốn kiểm tra một đối tượng nào đó: checkDiscountCondition(discount: Object)
    • Ex3: Hoặc chúng ta muốn tạo một hàm mang nghĩa khẳng định: isNumber(number: Number), isValid(param: any)

Mini Exercise:

Tạo một hàm chức năng có tên "printSomeThing", hiển thị text "Hello world" với console.log() khi gọi hàm "printSomeThing"

function printSomeThing (Hello world){
   console.log(printSomeThing);
}

Condition Function

Syntax: 

if(condition) {

} else if (condition) {

} else {

}
  • Case function:

Syntax:

switch(variable) {
    case {value}: {

        break;
    }
    ...
    default: {

    }
}

Note: nếu như sử dụng return thì không cần break

Loop Function

Syntax:

for

for ... in

for ... of

while

Scope

  • Phạm vi (Scope) ám chỉ phạm vi sử dụng của một biến (variable) trong block, function và outside function.
  • Có 3 phạm vi:
    • Block scope
    • Local scope
    • Global scope
  • Tại sao cần chia phạm vi sử dụng của các biến?
  • Làm thế nào để sử dụng phạm vi (scope) một cách hợp lý?

Recursion Function

  • Hàm đệ quy
  • Tại sao phải dùng hàm đệ quy?
  • Khử hàm đệ quy là gì?
  • Summary

4. Array and Object

Array

Object

Exercises

5. JSON type

6. Class

7. Handle DOM

8. Events

9. Modules

10. Async

Promise

Async - Await

11. APIs

Use Fetch

Use Axios library

NodeJS environment

1. Install

  • package.json
  • npm
  • yarn

2. node_module dictionary

Animation and Effect in JS

matter-js library

Ref: document

GSAP library

Ref: document