Có bao nhiêu Scopes trong Javascript

Scope Levels

1 - Global Scope

2 - Module Scope

3 - Block Scope

4 - Function Scope

Global Scope

<script src="script.js"></script>

<script>

  // script.js

  const a = 1

  console.log(a)

  // Prints: 1

</script>

<script src="script-1.js"></script>

<script src="script-2.js"></script>

<script>

  // script-1.js

  const a = 1

  // script-2.js

  console.log(a)

  // Prints: 1

</script>

Module Scope

<script src="script-1.js" type="module"></script>

<script src="script-2.js" type="module"></script>

<script>

  // script-1.js

  const a = 1

  console.log(a)

  // Prints: 1

  // script-2.js

  console.log(a)

  // Throws Uncaught Reference Error: a is not defined

</script>

Block Scope

function test() {

  const funcVar = "Func"

  if (true) {

    const ifVar = "If"

    console.log(funcVar, ifVar)

    // Prints: "Func", "If"

  }

  console.log(funVar, ifVar)

  // Throws Uncaught Reference Error: ifVar is not defined

}

{

  const a = 10

}

console.log(a)

// Throws Uncaught Reference Error: a is not defined

Function Scope

function test() {

  var funcVar = "Func"

  if (true) {

    var ifVar = "If"

    console.log(funcVar, ifVar)

    // Prints: "Func", "If"

  }

  console.log(funVar, ifVar)

  // Prints: "Func", "If"

}

Read More

Non-blocking và Blocking

Non-blocking và blocking là hai khái niệm quan trọng trong lập trình hướng đồng bộ.

Non-blocking là một thuật ngữ được sử dụng để chỉ việc thực hiện một tác vụ mà không cần chờ đợi kết quả từ tác vụ đó. Trong một non-blocking hàm, chương trình sẽ tiếp tục thực hiện các tác vụ khác mà không bị gián đoạn, cho phép chương trình tiếp tục thực hiện các tác vụ khác mà không cần chờ đợi kết quả từ tác vụ đó. Khi tác vụ đã hoàn thành, chương trình sẽ thông báo cho chương trình gọi nó về.

Ví dụ, trong một hệ thống đặt hàng, khi khách hàng đặt hàng, hệ thống sẽ gửi yêu cầu đặt hàng đến cửa hàng để xác nhận. Trong trường hợp này, hệ thống sẽ chạy một non-blocking hàm để gửi yêu cầu đặt hàng đến cửa hàng và tiếp tục thực hiện các tác vụ khác mà không bị gián đoạn. Khi yêu cầu đặt hàng được xác nhận, hệ thống sẽ thông báo cho khách hàng về kết quả của yêu cầu đặt hàng.

Blocking là một thuật ngữ được sử dụng để chỉ việc thực hiện một tác vụ mà cần chờ đợi kết quả từ tác vụ đó. Trong một blocking hàm, chương trình sẽ chờ đợi kết quả từ tác vụ đó trước khi tiếp tục thực hiện các tác vụ khác. Khi tác vụ đã hoàn thành, chương trình sẽ tiếp tục thực hiện các tác vụ khác.

Ví dụ, trong một hệ thống đăng nhập, khi người dùng nhập tên đăng nhập và mật khẩu, hệ thống sẽ gửi yêu cầu đăng nhập đến cơ sở dữ liệu để xác nhận. Trong trường hợp này, hệ thống sẽ chạy một blocking hàm để gửi yêu cầu đăng nhập đến cơ sở dữ liệu và chờ đợi kết quả của yêu cầu đăng nhập trước khi tiếp tục thực hiện các tác vụ khác. Khi yêu cầu đăng nhập được xác nhận, hệ thống sẽ cho phép người dùng truy cập vào hệ thống.

Read More

clientY vs pageY

 Đưa ra một điểm trong trang clientY và pageY là khoảng cách tính bằng pixel từ điểm đến đầu chế độ xem và trang.

Ở đây, trang là toàn bộ trang được hiển thị có thể có thanh cuộn, trong khi chế độ xem là phần hiển thị của trang.

┌─────────────────────────────┬─┐◀︎─── Web page      ▲
|                             | |                   |
|                             | |                   |
|                             | |                   |
|                             | |                   |
|                             | |                   |
|                             | |                   |
|                             | |                 pageY
|                             | |                   |
├=============================┼─┤       ▲           |           ▲
|                             | |       |           |           |
|                             | |       |           |           |
|       Scroll bar──────────▶︎ | |       |           |        clientY
|                             | |     Browser       |           |
|                             | |     window        |           |
|       ● Point               | |       |           ▼           ▼
|                             | |       |
|                             | |       |
├=============================┼─┤       ▼
|                             | |
|                             | |
|                             | |
└─────────────────────────────┴─┘

Read More

Box sizing - css

box-sizing: content-box; /* default */
box-sizing: border-box; /* với đường viền và lề */
box-sizing: inherit; /* lấy giá trị từ cha của nó */

Content-box
Các thuộc tính width và height được đo chỉ bao gồm content chứ không bao gồm padding, border hoặc margin.

padding, border và margin sẽ nằm ngoài hộp => width, height không tính padding, margin, border

// Content box
                    ◀︎──── 200px ────▶︎

┌───────────────────────────────────────────────────────┐
|                                                       |
|       ┌───────────────────────────────────────┐       |
|       |                                       |       |
|       |           ┌───────────────┐           |       |
| Border|  Padding  |    Content    |           |       |
|       |           |               |           |       |
|  5px  |    10px   |     200px     |   10px    |  5px  |
|◀︎─────▶︎|◀︎─────────▶︎|◀︎─────────────▶︎|◀︎─────────▶︎|◀︎─────▶︎|
|       |           |               |           |       |
|       |           └───────────────┘           |       |
|       |                                       |       |
|       └───────────────────────────────────────┘       |
|                                                       |
└───────────────────────────────────────────────────────┘

border-box
Các thuộc tính width và height bao gồm padding và border, nhưng không bao gồm margin.

padding và border sẽ ở bên trong hộp => width, height tính cả padding + border

// Border box
◀︎──────────────────────── 200px ────────────────────────▶︎

┌───────────────────────────────────────────────────────┐
|                                                       |
|       ┌───────────────────────────────────────┐       |
|       |                                       |       |
|       |           ┌───────────────┐           |       |
| Border|  Padding  |    Content    |           |       |
|       |           |               |           |       |
|  5px  |    10px   |     170px     |   10px    |  5px  |
|◀︎─────▶︎|◀︎─────────▶︎|◀︎─────────────▶︎|◀︎─────────▶︎|◀︎─────▶︎|
|       |           |               |           |       |
|       |           └───────────────┘           |       |
|       |                                       |       |
|       └───────────────────────────────────────┘       |
|                                                       |
└───────────────────────────────────────────────────────┘

Read More

Agile Scrum và Waterfal là gì?

Agile, Scrum, và Waterfall là ba phương pháp quản lý dự án khác nhau được sử dụng trong quá trình phát triển phần mềm.

Agile là một phương pháp quản lý dự án phù hợp với nhu cầu của thị trường thay vì sử dụng các quy trình và quy định nhất định. Agile tập trung vào việc cải thiện hiệu suất và sự phản hồi từ khách hàng, thay vì chỉ tập trung vào quy trình và quy định. Agile thường được sử dụng trong các dự án phần mềm, phần mềm dự án thiết kế, phần mềm dự án quản lý dự án, và các dự án khác.

Scrum là một phương pháp quản lý dự án Scrum được phát triển bởi Eric Ray và Michael Scrum. Scrum là một phương pháp quản lý dự án Scrum thường được sử dụng trong các dự án phần mềm, phần mềm dự án thiết kế, phần mềm dự án quản lý dự án, và các dự án khác. Scrum tập trung vào việc cải thiện hiệu suất và sự phản hồi từ khách hàng bằng cách sử dụng các nghệ thuật Scrum như sprint, daily Scrum meeting, sprint review và sprint retrospective.

Waterfall là một phương pháp quản lý dự án Waterfall được phát triển bởi Michael Fowler. Waterfall là một phương pháp quản lý dự án Waterfall thường được sử dụng trong các dự án phần mềm, phần mềm dự án thiết kế, phần mềm dự án quản lý dự án, và các dự án khác. Waterfall tập trung vào việc thiết kế và phát triển một ứng dụng từ đầu đến cuối, với từng bước được xác định trước và các quy trình và quy định cụ thể được thiết kế và thực hiện.

Tóm lại, Agile, Scrum và Waterfall là ba phương pháp quản lý dự án khác nhau được sử dụng trong quá trình phát triển phần mềm. Agile tập trung vào việc cải thiện hiệu suất và sự phản hồi từ khách hàng, Scrum tập trung vào việc cải thiện hiệu suất và sự phản hồi từ khách hàng bằng cách sử dụng các nghệ thuật Scrum, và Waterfall tập trung vào việc thiết kế và phát triển một ứng dụng từ đầu đến cuối.

Read More

Scrum với Kanban là gì?

Scrum và Kanban là hai khái niệm quan trọng trong quản lý dự án. Scrum là một phương pháp thiết kế phần mềm, được sử dụng để quản lý dự án trong quá trình phát triển phần mềm. Scrum bao gồm các quy trình và nguyên tắc để giải quyết các vấn đề liên quan đến quản lý dự án, bao gồm sprint, sprint review, sprint retrospective và daily Scrum meeting.

Kanban là một phương pháp quản lý dự án, được sử dụng để giám sát và quản lý quá trình thực hiện các công việc trong một dự án. Kanban bao gồm các quy trình và nguyên tắc để giải quyết các vấn đề liên quan đến quản lý dự án, bao gồm sơ đồ xử lý, bảng quản lý công việc và các bước trong quá trình thực hiện công việc.

Scrum và Kanban đều có mục đích giúp quản lý dự án hiệu quả hơn. Scrum giúp quản lý dự án bằng cách sử dụng các quy trình và nguyên tắc để giải quyết các vấn đề liên quan đến quản lý dự án, giúp cho các thành viên trong dự án có thể hoàn thành công việc một cách nhanh chóng và chính xác. Kanban giúp giám sát và quản lý quá trình thực hiện các công việc trong một dự án, giúp cho các thành viên trong dự án có thể hiểu rõ hơn về quá trình thực hiện công việc và đảm bảo rằng công việc được thực hiện đúng cách và trong thời gian hợp lý.

Tóm lại, Scrum và Kanban là hai khái niệm quan trọng trong quản lý dự án, giúp cho việc quản lý dự án hiệu quả hơn và giúp các thành viên trong dự án có thể hoàn thành công việc một cách nhanh chóng và chính xác.

Read More

Ivy trong Angular là gì?

Rendering engine

Công cụ kết xuất (Rendering engine) là một phần mềm hoặc chương trình bên trong trình duyệt phân tích cú pháp và biến đổi mã HTML và CSS để trình duyệt có thể hiển thị.

Công cụ trình duyệt biến đổi CSS và JS và hiển thị kết quả ra màn hình

Tuy nhiên, các trình duyệt không thể hiển thị mã HTML và CSS đến từ Angular hoặc bất kỳ khung nào khác vì HTML và CSS không thuần túy (chúng có thể nằm trong các mẫu hoặc thành phần tùy chỉnh). Do đó, cần có thứ gì đó để chuyển đổi các thành phần này thành thứ mà trình duyệt có thể hiển thị. Đây là nơi công cụ kết xuất Angular xuất hiện.

Ivy rendering engine

Ivy là công cụ kết xuất biến mã Angular (mẫu HTML + TS) thành HTML và JavaScript thuần túy mà trình duyệt hiểu được. Khi quá trình chuyển đổi này hoàn tất, trình duyệt có thể hiểu và hiển thị HTML và JavaScript kết quả để hiển thị nội dung, như được minh họa trong hình trên.

Ivy là bản viết lại hoàn chỉnh của View Engine—công cụ mặc định để xây dựng các ứng dụng Angular từ Angular 4 cho đến khi nó ngừng hoạt động trong Angular 8. Đây là công cụ thứ ba kể từ khi tạo ra Angular vào năm 2016 và Angular đã xuất xưởng cùng với Ivy kể từ khi giới thiệu của Angular 9 cho đến ngày nay.

Tóm tắt về cách thức hoạt động của Ivy

Ivy Lợi ích khi sử dụng Ivy

Ivy đi kèm với nhiều cải tiến, bao gồm:

Biên dịch AOT: Ahead of Time (AOT) biên dịch một ứng dụng trước khi chuyển sang môi trường thời gian chạy như trình duyệt. AOT giảm tải cho trình duyệt vì nó biên dịch trước ứng dụng trước khi đến trình duyệt.

Kích thước gói nhỏ hơn: Kích thước gói là lượng mã mà trình duyệt sẽ phải tải xuống để tải ứng dụng của bạn. Ivy giảm kích thước gói thông qua AOT và tree-shaking.

Cải thiện tốc độ: Các ứng dụng góc cạnh tải nhanh hơn trước nhờ kích thước gói nhỏ hơn và khả năng rung cây của Ivy.

Ivy nhanh hơn nhiều so với người tiền nhiệm của nó bởi vì nó hiện được cung cấp với trình biên dịch trước thời hạn (AOT) theo mặc định. AOT cho phép trình duyệt tải ứng dụng nhanh chóng mà không cần tải xuống trình biên dịch và tự xây dựng ứng dụng.

Biên dịch Just-in-time (JIT) là cơ chế biên dịch mặc định trong các phiên bản trước của Angular , qua đó trình duyệt sẽ tải xuống trình biên dịch và xây dựng ứng dụng. Tuy nhiên, quá trình này không hiệu quả vì nó chậm và gây gánh nặng cho trình duyệt.

Lưu ý: Angular chỉ có một trình biên dịch. AOT và JIT chỉ đề cập đến cách thức và thời điểm bạn sử dụng trình biên dịch.

• Với AOT, trình biên dịch sẽ chạy khi xây dựng Build.
• Với JIT, trình biên dịch chạy trong thời gian chạy Runtime.

Công cụ Ivy là một phần quan trọng của Angular. Do đó, có một ý tưởng cơ bản về những gì nó làm là quan trọng.

Read More

Ng-Content Switch Case - Angular

Read More

Javascript Basic

Read More

Draw and Fill a polygon and triangle in HTML5

Draw Polygon <Vẽ hình đa giác>
2023
<!DOCTYPE HTML>
<html>
<head>
<title>An example to draw an polygon</title>
<script type="text/javascript">
    function drawPolygon() {
        var canvas = document.getElementById('canvasbox');
        if (canvas.getContext) {
            var objctx = canvas.getContext('2d');
 
            objctx.beginPath();
            objctx.moveTo(75, 50);
            objctx.lineTo(175, 50);
            objctx.lineTo(200, 75);
            objctx.lineTo(175, 100);
            objctx.lineTo(75, 100);
            objctx.lineTo(50, 75);
            objctx.closePath();
            objctx.fillStyle = "rgb(200,0,0)";
            objctx.fill();
 
 
        } else {
            alert('You need HTML5 compatible browser to see this demo.');
        }
    }
</script>
</head>
<body onload="drawPolygon();">
   <canvas id="canvasbox"></canvas>
</body>
</html>

Draw Triangle <Vẽ hình tam giác>

2023

<!DOCTYPE HTML>
<html>
<head>
<title>An example to draw an polygon</title>
<script type="text/javascript">
    function drawPolygon() {
        var canvas = document.getElementById('canvasbox');
        if (canvas.getContext) {
            var objctx = canvas.getContext('2d');
            objctx.beginPath();
            // polygon [x,y, x,y, x,y.....];
            objctx.moveTo(50, 50); //x,y
            objctx.lineTo(50, 125);
            objctx.lineTo(150, 125);
            objctx.closePath();
            objctx.stroke();
 
        } else {
            alert('You need HTML5 compatible browser to see this demo.');
        }
    }
</script>
</head>
<body onload="drawPolygon();">
   <canvas id="canvasbox"></canvas>
</body>
</html>

beginPath() Mỗi khi phương thức này được gọi, danh sách sẽ được đặt lại và chúng ta có thể bắt đầu vẽ các hình mới.

moveTo(x, y) điều này sẽ đặt vị trí khởi động của đường dẫn. Trong ví dụ trên, chúng ta đang vẽ đường đi từ (75,50) điểm.

lineTo(x, y) sẽ vẽ đường thẳng trong đó x và y sẽ là điểm cuối. Phương thức này có hai đối số – x và y, – là tọa độ của điểm cuối và điểm bắt đầu của đường phụ thuộc vào điểm cuối của đường dẫn được vẽ trước đó hoặc tọa độ di chuyển tới(x,y). Ví dụ objctx.lineTo(175, 50) sẽ vẽ đường thẳng từ điểm đầu (75,50) đến điểm cuối (175,50).

closePath() sẽ đóng hình bằng cách vẽ một đường thẳng từ điểm hiện tại đến điểm bắt đầu. Nếu hình đã được đóng hoặc chỉ có một điểm trong danh sách, chức năng này sẽ không làm gì.

fillStyle sẽ đặt thuộc tính nền nhưng sẽ không lấp đầy.

fill() sẽ tô hình dạng theo fillStyle. Nếu không có kiểu tô màu thì nó sẽ tô màu đen.

Ví dụ ta có toạ độ của qrcode sau khi quét camera -> Ta cần vẽ đa giác

2023

// Draw the barcodes area.
scanner.onFrameRead = results => {
  // Reset the width and height and empty the canvas
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  let ctx = canvas.getContext('2d');
  // Set color
  ctx.fillStyle = 'rgba(254,180,32,0.3)';
  for(var result of results){
    // Get localization 
    // polygon [x,y, x,y, x,y.....];
    let x1 = result.LocalizationResult.X1;
    let x2 = result.LocalizationResult.X2;
    let x3 = result.LocalizationResult.X3;
    let x4 = result.LocalizationResult.X4;
    let y1 = result.LocalizationResult.Y1;
    let y2 = result.LocalizationResult.Y2;
    let y3 = result.LocalizationResult.Y3;
    let y4 = result.LocalizationResult.Y4;
    // Draw
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.lineTo(x3, y3);
    ctx.lineTo(x4, y4);
    ctx.fill();
  }
};

DEMO nhanh 
2023
<!DOCTYPE html>
<html>
  <body>
  
    <canvas id="canvas" width="1116" height="837" style="border:3px solid #000;">
    Your browser does not support the HTML canvas tag.</canvas>
    
    <script>
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        
        // polygon [x,y, x,y, x,y.....];
        var poly = [0, 294.69374999999997, 0, 294, 256, 0, 256.33124999999995, 0] ;
        
        // copy array
        var shape = poly.slice(0);
        
        ctx.fillStyle = '#f00'
        ctx.beginPath();
        ctx.moveTo(shape.shift(), shape.shift());
        while(shape.length) {
          ctx.lineTo(shape.shift(), shape.shift());
        }
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
    </script>
  
  </body>
</html>

Read More