├── .gitignore
├── .prettierignore
├── README.md
├── algorithms
└── sorts
│ ├── bubble-sort.js
│ ├── heap-sort.js
│ ├── index.js
│ ├── insertion-sort.js
│ ├── merge-sort.js
│ ├── odd-even-sort.js
│ ├── quick-sort.js
│ ├── radix-sort.js
│ ├── selection-sort.js
│ └── stupid-sort.js
├── assets
├── icons
│ ├── favicon.png
│ └── logo.png
└── images
│ └── sort
│ ├── max-heap.jpg
│ ├── merge-sort-illustration.jpg
│ ├── radix-lsd.jpg
│ └── rebuild-max-heap.jpg
├── index.html
├── scripts
├── contants.js
├── helper.js
├── main.js
├── menu.js
└── sort-visualizer
│ ├── bubble-sort.js
│ ├── constant.js
│ ├── heap-sort.js
│ ├── index.js
│ ├── insertion-sort.js
│ ├── merge-sort.js
│ ├── odd-even-sort.js
│ ├── prepare-sort.js
│ ├── quick-sort.js
│ ├── radix-sort.js
│ ├── selection-sort.js
│ └── stupid-sort.js
├── sort-visualizer.html
├── styles
├── css
│ ├── atomic.css
│ ├── home.css
│ ├── menu.css
│ ├── reset.css
│ ├── sort-realtime.css
│ ├── sort-visualizer.css
│ └── utils.css
└── scss
│ ├── atomic.scss
│ ├── home.scss
│ ├── menu.scss
│ ├── mixin.scss
│ ├── sort-realtime.scss
│ ├── sort-visualizer.scss
│ └── utils.scss
└── vendors
├── jquery
└── jquery.min.js
└── prism
├── prism.min.css
└── prism.min.js
/.gitignore:
--------------------------------------------------------------------------------
1 | *.css.map
2 | node_modules/
3 | yarn.lock
4 | note.txt
5 | demo-modal.html
6 | mixin.css
7 | .env
8 | website/.gitignore
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | *.min.*
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | # STUDY ALGORITHMS THROUGH DYNO VISUALIZER
4 |
5 |
6 |
7 | ## Live Demo: https://tuannguyen2504.github.io/dyno-visualizer/
8 |
--------------------------------------------------------------------------------
/algorithms/sorts/bubble-sort.js:
--------------------------------------------------------------------------------
1 | /*
2 | Đầu vào:
3 | - arr: mảng cần sắp xếp.
4 | - n: số lượng phần tử của mảng.
5 | - i: chỉ số index vòng lặp ngoài (0 -> n-1).
6 | - j: chỉ số vòng lặp trong (0 -> n - 1 - i)
7 |
8 | Ý tưởng:
9 | - Sử dụng 2 vòng lặp lồng nhau.
10 | - Vòng lặp bên ngoài để duyệt qua mảng.
11 | - Vòng lặp bên trong để đẩy phần tử max (min) lên đầu mảng (bubble).
12 | + Nếu phần tử sau > phần tử trước thì swap 2 phần tử đó (sắp tăng dần) và ngược lại.
13 | - Để tối ưu thì ta chỉ nên cho vòng lặp trong chạy đến (n - 1 - i) mà không cần đến (n - 1).
14 |
15 | */
16 |
17 | /*
18 | Độ phức tạp (BigO):
19 | - Best Case (Mảng đã sắp xếp): O(n).
20 | - Average: O (n^2)
21 | - Worst Case (Mảng sắp xếp ngươc): O(n^2).
22 | - Không gian biến phụ: O(1).
23 | Note:
24 | - Không nên dùng cho mảng kích thước lớn.
25 | - Chỉ nên sử dụng khi mảng đã sắp xếp như bảng Highscore...
26 | */
27 |
28 | function basicBubbleSort(arr = []) {
29 | const n = arr.length;
30 |
31 | // outer loop
32 | for (let i = 0; i < n - 1; ++i) {
33 | // inner loop
34 | for (let j = 0; j < n - 1; ++j) {
35 | if (arr[j] > arr[j + 1]) {
36 | // swap (*)
37 | [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
38 | }
39 | }
40 | }
41 |
42 | return arr;
43 | }
44 |
45 | function enhancedBubbleSort(arr = []) {
46 | const n = arr.length;
47 |
48 | // outer loop
49 | for (let i = 0; i < n - 1; ++i) {
50 | let swapped = false;
51 |
52 | // inner loop (Mỗi lần loop trừ đi 1)
53 | for (let j = 0; j < n - 1 - i; ++j) {
54 | if (arr[j] > arr[j + 1]) {
55 | // swap (*)
56 | [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
57 | swapped = true;
58 | }
59 | }
60 |
61 | // Nếu inner loop không có cặp nào swap thì ngưng (đã xếp xong)
62 | if (!swapped) break;
63 | }
64 |
65 | return arr;
66 | }
67 |
68 | module.exports = {
69 | enhancedBubbleSort,
70 | basicBubbleSort,
71 | };
72 |
--------------------------------------------------------------------------------
/algorithms/sorts/heap-sort.js:
--------------------------------------------------------------------------------
1 | /*
2 | Đầu vào:
3 | - arr: mảng cần sắp xếp.
4 | - n: số lượng phần tử của mảng.
5 |
6 | Ý tưởng:
7 | - Sử dụng tính chất của cấu trúc dữ liệu heap (max heap, min heap).
8 | - Đầu tiên xây dựng một max-heap (min-heap).
9 | - Hoán vị phần tử root của heap với phần tử cuối.
10 | - Xoá phần tử cuối ra khỏi heap.
11 | - Xây dựng lại heap tại phần tử root.
12 | */
13 |
14 | /*
15 | Độ phức tạp (BigO):
16 | - Best Case (Mảng đã sắp xếp): O(n*log(n)).
17 | - Average: O(n*log(n)).
18 | - Worst Case (Mảng sắp xếp ngươc): O(n*log(n)).
19 | - Không gian biến phụ: O(1).
20 | Note:
21 | - Thuật toán khá ổn định trong mọi trường hớp.
22 | */
23 |
24 | // @fn: Xây dựng max heap từ 1 node
25 | function maxHeapify(arr = [], len, nodeIndex) {
26 | // Nếu là node lá thì dừng
27 | if (nodeIndex > Math.floor(len / 2 - 1)) return;
28 |
29 | const leftNode = 2 * nodeIndex + 1,
30 | rightNode = 2 * nodeIndex + 2;
31 | let maxIndex = nodeIndex;
32 |
33 | // Tìm node lớn nhất trong 3 node
34 | if (leftNode < len && arr[leftNode] > arr[maxIndex]) maxIndex = leftNode;
35 | if (rightNode < len && arr[rightNode] > arr[maxIndex]) maxIndex = rightNode;
36 |
37 | // Hoán vị node cha hiện tại với con lớn nhất
38 | if (maxIndex !== nodeIndex) {
39 | [arr[maxIndex], arr[nodeIndex]] = [arr[nodeIndex], arr[maxIndex]];
40 |
41 | // Tiếp tục đệ quy kiểm tra tại node lớn nhất này
42 | maxHeapify(arr, len, maxIndex);
43 | }
44 | }
45 |
46 | // @fn: Xây dụng max-heap
47 | function buildMaxHeap(arr = []) {
48 | const len = arr.length;
49 | // Parent node cuối cùng
50 | const lastParentNode = Math.floor(len / 2 - 1);
51 |
52 | // Từ node cha cuối trở lên đều là parent node
53 | for (let i = lastParentNode; i >= 0; --i) maxHeapify(arr, len, i);
54 | }
55 |
56 | // @fn: Heap sort
57 | function heapSort(arr = []) {
58 | // Xây dựng max heap
59 | buildMaxHeap(arr);
60 |
61 | const len = arr.length;
62 | for (let i = len - 1; i >= 0; --i) {
63 | // Hoán vị node root với node cuối cùng
64 | [arr[0], arr[i]] = [arr[i], arr[0]];
65 |
66 | // Xây lại max heap tại vị trí root
67 | maxHeapify(arr, i, 0);
68 | }
69 | }
70 |
71 | module.exports = heapSort;
72 |
--------------------------------------------------------------------------------
/algorithms/sorts/index.js:
--------------------------------------------------------------------------------
1 | const bubbleSort = require('./bubble-sort');
2 | const selectionSort = require('./selection-sort');
3 | const insertionSort = require('./insertion-sort');
4 | const quickSort = require('./quick-sort');
5 | const mergeSort = require('./merge-sort');
6 | const heapSort = require('./heap-sort');
7 | const stupidSort = require('./stupid-sort');
8 | const radixSort = require('./radix-sort');
9 | const oddEvenSort = require('./odd-even-sort');
10 |
11 | // @fn: random a number array
12 | // type = 0: random, 1: ascending, 2: decending
13 | const generateRandomData = (length = 10, type = 0, max = 1000) => {
14 | let arr = [];
15 | for (let i = 0; i < length; ++i) arr.push(Math.round(Math.random() * max));
16 | switch (type) {
17 | case 1:
18 | arr.sort((a, b) => a - b);
19 | // swap 2 last postion => generate ~sorted list
20 | if (length > 1)
21 | [arr[length - 1], arr[length - 2]] = [arr[length - 2], arr[length - 1]];
22 | break;
23 | case 2:
24 | arr.sort((a, b) => b - a);
25 | if (length > 1)
26 | [arr[length - 1], arr[length - 2]] = [arr[length - 2], arr[length - 1]];
27 | break;
28 | default:
29 | break;
30 | }
31 | return arr;
32 | };
33 |
34 | // @initial data
35 | const len = 100_000;
36 | const randomArr = generateRandomData(len, 0);
37 | const ascenArr = generateRandomData(len, 1);
38 | const descenArr = generateRandomData(len, 2);
39 |
40 | // @fn: time logger
41 | const timeLogger = (title = 'timer', sortFn) => {
42 | let arr = [...randomArr];
43 | console.time(`${title} --> RANDOM`);
44 | sortFn(arr);
45 | console.timeEnd(`${title} --> RANDOM`);
46 |
47 | arr = [...ascenArr];
48 | console.time(`${title} --> ASCENDING`);
49 | sortFn(arr);
50 | console.timeEnd(`${title} --> ASCENDING`);
51 |
52 | arr = [...descenArr];
53 | console.time(`${title} --> DESCENDING`);
54 | sortFn(arr);
55 | console.timeEnd(`${title} --> DESCENDING`);
56 |
57 | console.log('---------------------------------------');
58 | };
59 |
60 | // @testing
61 | function testing() {
62 | console.log('LENGTH: ', len);
63 | console.log('---------------------------------------');
64 |
65 | // 1) NODEJS SORT
66 | // timeLogger('NODEJS SORT', function (arr) {
67 | // arr.sort((a, b) => a - b);
68 | // });
69 |
70 | // // 2) BUUBLE SORT
71 | // timeLogger('BASIC BUBBLE SORT', bubbleSort.basicBubbleSort);
72 | timeLogger('ENHANCED BUBBLE SORT', bubbleSort.enhancedBubbleSort);
73 |
74 | // // 3) SELECTION SORT
75 | // timeLogger('SELECTION SORT', selectionSort);
76 |
77 | // // 4) INSERTION SORT
78 | // timeLogger('INSERTION SORT', insertionSort);
79 |
80 | // // 5) QUICK SORT
81 | // timeLogger('QUICK SORT', (arr) => quickSort(arr, 0, len - 1));
82 |
83 | // // 6) MERGE SORT
84 | // timeLogger('MERGE SORT', (arr) => mergeSort(arr, 0, arr.length - 1));
85 |
86 | // // 7) HEAP SORT
87 | // timeLogger('HEAP SORT', heapSort);
88 |
89 | // 8) STUPID SORT
90 | // timeLogger('STUPID SORT', stupidSort);
91 |
92 | // // 9) LSD RADIX SORT
93 | // timeLogger('LSD RADIX SORT', radixSort.radixSortLSD);
94 |
95 | // 10) ODD EVEN SORT
96 | timeLogger('ODD EVEN SORT', oddEvenSort);
97 | }
98 |
99 | testing();
100 |
--------------------------------------------------------------------------------
/algorithms/sorts/insertion-sort.js:
--------------------------------------------------------------------------------
1 | /*
2 | Đầu vào:
3 | - arr: mảng cần sắp xếp.
4 | - n: số lượng phần tử của mảng.
5 | - i: chỉ số index vòng lặp ngoài (1 -> n).
6 | - j: chỉ số vòng lặp trong (i - 1 -> 0)
7 |
8 | Ý tưởng:
9 | - Sử dụng 2 vòng lặp lồng nhau.
10 | - Vòng lặp bên ngoài để duyệt qua mảng.
11 | - Vòng lặp bên trong để chọn vị trí chèn thích hợp cho phần tử i (insertion).
12 | */
13 |
14 | /*
15 | Độ phức tạp (BigO):
16 | - Best Case (Mảng đã sắp xếp): O(n).
17 | - Average: O (n^2)
18 | - Worst Case (Mảng sắp xếp ngươc): O(n^2).
19 | - Không gian biến phụ: O(1).
20 | Note:
21 | - Không nên dùng cho mảng kích thước lớn.
22 | - Chỉ nên sử dụng khi mảng đã sắp xếp như bảng Highscore...
23 | */
24 |
25 | function insertionSort(arr = []) {
26 | let n = arr.length;
27 |
28 | let i = 1,
29 | j;
30 |
31 | while (i < n) {
32 | if (arr[i] >= arr[i - 1]) ++i;
33 | else {
34 | const current = arr[i];
35 | j = i - 1;
36 |
37 | // insert item into suitable position
38 | while (j >= 0 && arr[j] > current) {
39 | arr[j + 1] = arr[j];
40 | --j;
41 | }
42 |
43 | arr[j + 1] = current;
44 | ++i;
45 | }
46 | }
47 |
48 | return arr;
49 | }
50 |
51 | module.exports = insertionSort;
52 |
--------------------------------------------------------------------------------
/algorithms/sorts/merge-sort.js:
--------------------------------------------------------------------------------
1 | /*
2 | Đầu vào:
3 | - arr: mảng cần sắp xếp.
4 | - l: index phần tử bắt đầu duyệt.
5 | - r: index phần tử cuối cần duyệt.
6 |
7 | Ý tưởng:
8 | - Tách mảng ban đầu thành 2 mảng dựa trên phần tử middle: (n - 1)/2.
9 | - Cứ thế đệ quy, tách đến khi các mảng còn 1 phần tử.
10 | - Gộp các mảng trên lại, vừa gộp vừa sắp xếp.
11 | */
12 |
13 | /*
14 | Độ phức tạp (BigO):
15 | - Best Case: O( n*log(n) ).
16 | - Average: O( n*log(n) )
17 | - Worst Case: O( n*log(n) ).
18 | - Không gian biến phụ: O(n).
19 | Note:
20 | - Nên dùng cho mảng kích thước lớn.
21 | - Thuật toán khá ổn định trong mọi trường hợp.
22 | - Nhược: sử dụng không gian phụ khá nhiều.
23 | */
24 |
25 | // @fn: Hàm gộp 2 mảng lại với nhau
26 | function mergeArr(arr, l, middle, r) {
27 | // tạo 2 mảng trái, phải đã sắp xếp
28 | let leftArr = [...arr.slice(l, middle + 1)],
29 | rightArr = [...arr.slice(middle + 1, r + 1)];
30 |
31 | let mergeIndex = l,
32 | i = 0,
33 | j = 0,
34 | n1 = middle + 1 - l, // số phần tử mảng trái
35 | n2 = r - middle; // số phấn tử mảng phải
36 |
37 | // gộp 2 mảng lại
38 | while (i < n1 && j < n2)
39 | arr[mergeIndex++] = leftArr[i] < rightArr[j] ? leftArr[i++] : rightArr[j++];
40 |
41 | // gán hết phần tử mảng trái nếu còn
42 | while (i < n1) arr[mergeIndex++] = leftArr[i++];
43 |
44 | // gán hết phần tử mảng phải nếu còn
45 | while (j < n2) arr[mergeIndex++] = rightArr[j++];
46 | }
47 |
48 | // @fn: merge sort
49 | function mergeSort(arr = [], l, r) {
50 | // điều kiện dừng đệ quy
51 | if (l >= r) return;
52 |
53 | // tìm phần tử trung gian để tách mảng
54 | let middle = parseInt((l + r) / 2);
55 |
56 | mergeSort(arr, l, middle); // tách nửa mảng trái
57 | mergeSort(arr, middle + 1, r); // tách nửa mảng phải
58 | mergeArr(arr, l, middle, r); // gộp 2 mảng trái phải
59 | }
60 |
61 | module.exports = mergeSort;
62 |
--------------------------------------------------------------------------------
/algorithms/sorts/odd-even-sort.js:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | Ý tưởng:
4 | - Còn gọi là brick sort
5 | - Là phiên bản khác cải thiện của bubble sort, chia mảng làm 2 phase chẵn và lẻ, sau đó dùng bubble sort.
6 |
7 | */
8 |
9 | function oddEvenSort(arr = []) {
10 | const n = arr.length;
11 | let isSorted = false;
12 |
13 | while (!isSorted) {
14 | isSorted = true;
15 |
16 | // Sắp xếp mảng chẵn
17 | for (let i = 0; i <= n - 2; i += 2) {
18 | if (arr[i] > arr[i + 1]) {
19 | [arr[i], arr[i + 1]] = [arr[i + 1], arr[i]];
20 | isSorted = false;
21 | }
22 | }
23 |
24 | // Sắp xếp mảng lẻ
25 | for (let i = 1; i <= n - 2; i += 2) {
26 | if (arr[i] > arr[i + 1]) {
27 | [arr[i], arr[i + 1]] = [arr[i + 1], arr[i]];
28 | isSorted = false;
29 | }
30 | }
31 | }
32 | }
33 |
34 | module.exports = oddEvenSort;
35 |
--------------------------------------------------------------------------------
/algorithms/sorts/quick-sort.js:
--------------------------------------------------------------------------------
1 | /*
2 | Đầu vào:
3 | - arr: mảng cần sắp xếp.
4 | - low: index phần tử bắt đầu duyệt.
5 | - high: index phần tử cuối cần duyệt.
6 |
7 | Ý tưởng:
8 | - Lựa chọn một phần tử vách ngăn (pivot).
9 | - Xây dựng một hàm với nhiệm vụ chia mảng thành 2 mảng con sao cho:
10 | + Mảng bên trái bao gồm các phần tử nhỏ hơn pivot.
11 | + Mảng bên phải bao gồm các phần tử lớn hơn pivot.
12 | - Lặp lại 2 bước trên với nửa mảng bên trái và nửa mảng bên phải.
13 | - Kết thúc khi mảng chỉ còn 1 phần tử (không thể chia mảng ra nữa).
14 | */
15 |
16 | /*
17 | Độ phức tạp (BigO):
18 | - Best Case: O( n*log(n) ).
19 | - Average: O( n*log(n) )
20 | - Worst Case (mảng đã sắp xếp hay pivot phần tử lớn nhất (nhỏ nhất) của mảng): O(n^2).
21 | - Không gian biến phụ: O(log(n)).
22 | Note:
23 | - Nên dùng cho mảng kích thước lớn.
24 | - Không nên dùng khi mảng đã sắp xếp...
25 | */
26 |
27 | function partitionFunc(arr = [], low, high) {
28 | let pivot = arr[high];
29 | let l = low;
30 | let r = high - 1;
31 |
32 | while (true) {
33 | // Tìm phần tử bên trái bị sai vị trí
34 | while (l <= r && arr[l] < pivot) l++;
35 |
36 | // Tìm phần tử bên phải bị sai vị trí
37 | while (r >= l && arr[r] > pivot) r--;
38 |
39 | // Nếu đã hoàn tất duyệt thì dừng
40 | if (l >= r) break;
41 |
42 | // Ngược lại thì swap 2 phần tử bị sai, sau đó tăng trái và phải lên 1
43 | [arr[l], arr[r]] = [arr[r], arr[l]];
44 | l++;
45 | r--;
46 | }
47 |
48 | // Đưa phần tử pivot vào đúng vị trí
49 | [arr[l], arr[high]] = [arr[high], arr[l]];
50 |
51 | // Trả về vị trí pivot hiện tại
52 | return l;
53 | }
54 |
55 | function quickSort(arr, low, high) {
56 | if (low < high) {
57 | // Tìm phần tử pivot
58 | const pivot = partitionFunc(arr, low, high);
59 |
60 | // Đệ quy nửa mảng bên trái
61 | quickSort(arr, low, pivot - 1);
62 |
63 | // Đệ quy nửa mảng bên phải
64 | quickSort(arr, pivot + 1, high);
65 | }
66 | }
67 |
68 | module.exports = quickSort;
69 |
--------------------------------------------------------------------------------
/algorithms/sorts/radix-sort.js:
--------------------------------------------------------------------------------
1 | // Hàm lấy chữ số tại vị trí posDigit
2 | // posDigit = 0 là hàng đơn vị
3 | function getDigit(num = 0, posDigit = 0) {
4 | // ex: num = -1234, posDigit = 2, expected = 2
5 | let numInt = Math.abs(parseInt(num / 10 ** posDigit)); // numInt = | -1234 / 10^2 | = 12;
6 | let digit = numInt % 10; // digit = 2;
7 |
8 | // Nếu num < 0 và digit = 0 thì trả về -1, ngược lại trả về digit
9 | return num < 0 && digit === 0 ? -1 : digit;
10 | }
11 |
12 | // Tìm số chữ số lớn nhất của mảng
13 | // Chú ý số âm thì cộng thêm 1 chữ số
14 | function getMaxExp(arr = []) {
15 | let exp = 0;
16 |
17 | arr.forEach((num) => {
18 | const len = num.toString().length;
19 | if (len > exp) exp = len;
20 | });
21 |
22 | return exp;
23 | }
24 |
25 | // Hàm radix sort LSD ( Least Significant Digit )
26 | function radixSortLSD(arr = []) {
27 | // Tạo 11 cái xô chứa các digit từ -1 đến 9
28 | let buckets = Array.from({ length: 11 }, () => new Array());
29 |
30 | // Số chữ số nhiều nhất, cũng là số lần lặp duyệt mảng
31 | let exp = getMaxExp(arr) || 0;
32 |
33 | // LSD lấy từ chữ số cuối
34 | let i = 0;
35 | while (i < exp) {
36 | // Lặp qua mảng và cho vào các xô
37 | arr.forEach((num) => {
38 | const digitIndex = getDigit(num, i) + 1; // Do buckets có index từ 0 -> 10, getDigit() trả về -1 -> 10
39 | buckets[digitIndex].push(num);
40 | });
41 |
42 | // Lấy từ xô trả về mảng
43 | let j = 0;
44 | buckets.forEach((numArr, index) => {
45 | // Nếu là lần cuối và xô là xô chứa số âm thì lấy ngược lại các p.tử trong xô
46 | if (i === exp - 1 && index === 0) {
47 | const n = numArr.length;
48 | for (let k = n - 1; k >= 0; --k) arr[j++] = numArr[k];
49 | }
50 | // Ngược lại, thì lấy xuôi từ trong xô
51 | else numArr.forEach((num) => (arr[j++] = num));
52 |
53 | // Làm trống xô
54 | numArr.length = 0;
55 | });
56 |
57 | ++i;
58 | }
59 |
60 | return arr;
61 | }
62 |
63 | // Hàm radix sort MSD ( Most Significant Digit )
64 | function radixSortMSD(arr = []) {}
65 |
66 | module.exports = { radixSortLSD, radixSortMSD };
67 |
--------------------------------------------------------------------------------
/algorithms/sorts/selection-sort.js:
--------------------------------------------------------------------------------
1 | /*
2 | Đầu vào:
3 | - arr: mảng cần sắp xếp.
4 | - n: số lượng phần tử của mảng.
5 | - i: chỉ số index vòng lặp ngoài (0 -> n-1).
6 | - j: chỉ số vòng lặp trong (i+1 -> n)
7 |
8 | Ý tưởng:
9 | - Sử dụng 2 vòng lặp lồng nhau để chia mảng thành 2 mảng con (1 đã sắp xếp, 1 không).
10 | - Vòng lặp bên ngoài để duyệt qua mảng.
11 | - Vòng lặp bên trong duyệt qua mảng con chưa sắp xếp để tìm phần tử min (max).
12 | + Nếu min (max) trong mảng con đó nhỏ (lớn) hơn phần tử cuối mảng đã sắp xếp thì swap 2 phần từ đó.
13 |
14 | */
15 |
16 | /*
17 | Độ phức tạp (BigO):
18 | - Best Case (Mảng đã sắp xếp): O(n^2).
19 | - Average: O (n^2)
20 | - Worst Case (Mảng sắp xếp ngươc): O(n^2).
21 | - Không gian biến phụ: O(1).
22 | Note:
23 | - Không nên dùng cho mảng kích thước lớn.
24 | - Chỉ nên sử dụng khi mảng gần như đã sắp xếp như bảng Highscore
25 | list...
26 | */
27 |
28 | function selectionSort(arr = []) {
29 | let n = arr.length;
30 |
31 | for (let i = 0; i < n - 1; ++i) {
32 | let min = arr[i];
33 | let index = i;
34 |
35 | // find min
36 | for (let j = i + 1; j < n; ++j) {
37 | if (arr[j] < min) {
38 | min = arr[j];
39 | index = j;
40 | }
41 | }
42 |
43 | // swap if min != initial min
44 | if (index !== i) [arr[i], arr[index]] = [arr[index], arr[i]];
45 | }
46 | }
47 |
48 | module.exports = selectionSort;
49 |
--------------------------------------------------------------------------------
/algorithms/sorts/stupid-sort.js:
--------------------------------------------------------------------------------
1 | /*
2 | Đầu vào:
3 | - arr: mảng cần sắp xếp.
4 | - Stupid sort hay còn gọi là BogoSort, Permutation sort, slow sort
5 |
6 | Ý tưởng:
7 | - Xáo trộn mảng, kiểm tra mảng vừa xáo
8 | - Nếu đã xếp thì dừng, còn không thì lặp lại :">
9 | */
10 |
11 | /*
12 | Độ phức tạp (BigO): O(∞) nhân phẩm.
13 | Note:
14 | - Dùng để kiểm tra nhân phẩm người dùng.
15 | - Chán quá thì dùng cho vui chứ không có ý nghĩa gì.
16 |
17 | */
18 |
19 | // Hàm kiểm tra mảng đã sắp xếp chưa?
20 | function isSortedArr(arr = []) {
21 | for (let i = 0; i < arr.length - 1; ++i)
22 | if (arr[i] > arr[i + 1]) return false;
23 |
24 | return true;
25 | }
26 |
27 | // Hàm xáo trộn mảng
28 | function shuffleArray(arr = []) {
29 | return arr.sort(() => Math.random() - 0.5);
30 | }
31 |
32 | // stupid sort
33 | function stupidSort(arr = []) {
34 | while (!isSortedArr(arr)) shuffleArray(arr);
35 | }
36 |
37 | module.exports = stupidSort;
38 |
--------------------------------------------------------------------------------
/assets/icons/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dynonguyen/dyno-visualizer/6db674acbd80fc50194d17a4df0f5678d27f5c3e/assets/icons/favicon.png
--------------------------------------------------------------------------------
/assets/icons/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dynonguyen/dyno-visualizer/6db674acbd80fc50194d17a4df0f5678d27f5c3e/assets/icons/logo.png
--------------------------------------------------------------------------------
/assets/images/sort/max-heap.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dynonguyen/dyno-visualizer/6db674acbd80fc50194d17a4df0f5678d27f5c3e/assets/images/sort/max-heap.jpg
--------------------------------------------------------------------------------
/assets/images/sort/merge-sort-illustration.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dynonguyen/dyno-visualizer/6db674acbd80fc50194d17a4df0f5678d27f5c3e/assets/images/sort/merge-sort-illustration.jpg
--------------------------------------------------------------------------------
/assets/images/sort/radix-lsd.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dynonguyen/dyno-visualizer/6db674acbd80fc50194d17a4df0f5678d27f5c3e/assets/images/sort/radix-lsd.jpg
--------------------------------------------------------------------------------
/assets/images/sort/rebuild-max-heap.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dynonguyen/dyno-visualizer/6db674acbd80fc50194d17a4df0f5678d27f5c3e/assets/images/sort/rebuild-max-heap.jpg
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Algorithms With Dyno
9 |
28 |
29 |
37 |
38 |
39 |
61 |
65 |
66 |
67 |
68 |
69 | Học lập trình với Dyno
70 | ABOUT ME
72 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
116 |
${option.title} `;
13 | });
14 | return result;
15 | }
16 |
17 | // render physical array
18 | const generateRandomData = (length = 10, type = 0, max = 1000) => {
19 | let arr = [];
20 | for (let i = 0; i < length; ++i) arr.push(Math.round(Math.random() * max));
21 | switch (type) {
22 | case 1:
23 | arr.sort((a, b) => a - b);
24 | // swap 2 last postion => generate ~sorted list
25 | if (length > 2) {
26 | [arr[length - 1], arr[length - 2]] = [arr[length - 2], arr[length - 1]];
27 | [arr[length - 2], arr[length - 3]] = [arr[length - 3], arr[length - 2]];
28 | }
29 | break;
30 | case 2:
31 | arr.sort((a, b) => b - a);
32 | if (length > 2) {
33 | [arr[length - 1], arr[length - 2]] = [arr[length - 2], arr[length - 1]];
34 | [arr[length - 2], arr[length - 3]] = [arr[length - 3], arr[length - 2]];
35 | }
36 |
37 | break;
38 | default:
39 | break;
40 | }
41 | return arr;
42 | };
43 |
--------------------------------------------------------------------------------
/scripts/main.js:
--------------------------------------------------------------------------------
1 | ///
91 | 1) Độ phức tạp thuật toán (Algorithm Complexity BigO):
92 |
93 |
95 |
- Độ phức tạp thời gian (Time Complexity):
96 |
97 |
98 | Best case: O(n)
99 | O(n2 )
101 | O(n2 )
103 |
105 |
106 |
- Độ phức tạp bộ nhớ (Menory Complexity):
107 |
108 |
Worst case: O(1)
109 |
2) Ý tưởng thuật toán (Algorithm Idea):
111 |
113 |
- Đầu vào:
114 |
115 |
116 | - arr : mảng cần sắp xếp. n : số lượng phần tử của mảng. i : chỉ số index vòng lặp ngoài (0 -> n-1). j : chỉ số vòng lặp trong (0 -> n - 1)
121 |
- Ý tưởng:
122 |
123 |
124 | - Sử dụng 2 vòng lặp lồng nhau.
131 |
3) Triển khai (Implement Algorithm):
133 |
136 | 4) Ghi chú (Note):
137 |
138 | - Không nên dùng cho mảng kích thước lớn.
`,
142 | };
143 |
144 | // enhanced
145 | const ebsCode = Prism.highlight(
146 | `function enhancedBubbleSort(arr = []) {
147 | const n = arr.length;
148 |
149 | // Vòng lặp ngoài -> lặp qua mảng
150 | for (let i = 0; i < n - 1; ++i) {
151 | let swapped = false;
152 |
153 | // Vòng lặp trong -> nổi bọt phần tử
154 | // Mỗi lần lặp trừ đi 1 là phần tử đã nổi bọt trước đó
155 | for (let j = 0; j < n - 1 - i; ++j) {
156 | if (arr[j] > arr[j + 1]) {
157 | // Hoán vị
158 | [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
159 | swapped = true; // Đổi cờ swap
160 | }
161 | }
162 |
163 | // Nếu vòng lặp trong không có cặp nào swap thì dừng (đã xếp xong)
164 | if (!swapped) break;
165 | }
166 |
167 | return arr;
168 | }`,
169 | Prism.languages.javascript,
170 | 'javascript',
171 | );
172 | const enhancedBubbleSortDesc = {
173 | title: '💭 ENHANCED BUBBLE SORT 🎈',
174 | sortNotes: [
175 | {
176 | title: 'P.tử hiện tại',
177 | color: CURRENT_ITEM_COLOR,
178 | },
179 | {
180 | title: 'P.tử kế tiếp',
181 | color: SECOND_ITEM_COLOR,
182 | },
183 | {
184 | title: 'P.tử nổi bọt',
185 | color: DONE_ITEM_COLOR,
186 | },
187 | ],
188 | htmlContent: `
189 | 1) Độ phức tạp thuật toán (Algorithm Complexity BigO):
190 |
191 |
193 |
- Độ phức tạp thời gian (Time Complexity):
194 |
195 |
196 | Best case: O(n)
197 | O(n2 )
199 | O(n2 )
201 |
203 |
204 |
- Độ phức tạp bộ nhớ (Menory Complexity):
205 |
206 |
Worst case: O(1)
207 |
2) Ý tưởng thuật toán (Algorithm Idea):
209 |
211 |
- Đầu vào:
212 |
213 |
214 | - arr : mảng cần sắp xếp. n : số lượng phần tử của mảng. i : chỉ số index vòng lặp ngoài (0 -> n-1). j : chỉ số vòng lặp trong (0 -> n - 1 - i)
219 |
- Ý tưởng:
220 |
221 |
222 | - Sử dụng 2 vòng lặp lồng nhau.
231 |
3) Triển khai (Implement Algorithm):
233 |
236 | 4) Ghi chú (Note):
237 |
238 | - Không nên dùng cho mảng kích thước lớn.
`,
243 | };
244 |
--------------------------------------------------------------------------------
/scripts/sort-visualizer/constant.js:
--------------------------------------------------------------------------------
1 | const ITEM_COLOR = '#393A59';
2 | const CURRENT_ITEM_COLOR = '#BD93F9';
3 | const SECOND_ITEM_COLOR = '#48D06D';
4 | const DONE_ITEM_COLOR = '#FFB332';
5 |
--------------------------------------------------------------------------------
/scripts/sort-visualizer/heap-sort.js:
--------------------------------------------------------------------------------
1 | const PARENT_NODE_COLOR = '#F24A0E';
2 |
3 | let nHSCompare = 0,
4 | nHSArrAccess = 0,
5 | nHSSwap = 0;
6 |
7 | // @fn: Xây dựng max heap từ 1 node
8 | async function maxHeapify(arr = [], len, nodeIndex) {
9 | // Nếu là node lá thì dừng
10 | nHSCompare++;
11 | if (nodeIndex > Math.floor(len / 2 - 1))
12 | return { nSwap: nHSSwap, nCompare: nHSCompare, nArrAccess: nHSArrAccess };
13 |
14 | const leftNode = 2 * nodeIndex + 1,
15 | rightNode = 2 * nodeIndex + 2;
16 | let maxIndex = nodeIndex;
17 |
18 | // Tìm node lớn nhất trong 3 node
19 | if (leftNode < len && arr[leftNode] > arr[maxIndex]) {
20 | nHSArrAccess += 2;
21 | nHSCompare++;
22 | maxIndex = leftNode;
23 | }
24 | if (rightNode < len && arr[rightNode] > arr[maxIndex]) {
25 | nHSArrAccess += 2;
26 | nHSCompare++;
27 | maxIndex = rightNode;
28 | }
29 |
30 | // Hoán vị node cha hiện tại với con lớn nhất
31 | nHSCompare += 3;
32 | if (maxIndex !== nodeIndex) {
33 | await preSwap(nodeIndex, maxIndex);
34 | await swapEle(nodeIndex, maxIndex);
35 | [arr[maxIndex], arr[nodeIndex]] = [arr[nodeIndex], arr[maxIndex]];
36 | nHSSwap++;
37 | await endSwap(nodeIndex, maxIndex);
38 |
39 | // Tiếp tục đệ quy kiểm tra tại node lớn nhất này
40 | await maxHeapify(arr, len, maxIndex);
41 | }
42 | }
43 |
44 | // @fn: Xây dụng max-heap
45 | async function buildMaxHeap(arr = []) {
46 | const len = arr.length;
47 | // Parent node cuối cùng
48 | const lastParentNode = Math.floor(len / 2 - 1);
49 |
50 | // Từ node cha cuối trở lên đều là parent node
51 | for (let i = lastParentNode; i >= 0; --i) {
52 | if (!isSorting)
53 | return { nSwap: nHSSwap, nCompare: nHSCompare, nArrAccess: nHSArrAccess };
54 | nHSCompare++;
55 | await changeItemColor(i, PARENT_NODE_COLOR);
56 | await maxHeapify(arr, len, i);
57 | await changeItemColor(i, ITEM_COLOR);
58 | }
59 | }
60 |
61 | // @fn: Heap sort
62 | async function heapSort(arr = []) {
63 | // Xây dựng max heap
64 | await buildMaxHeap(arr);
65 |
66 | const len = arr.length;
67 | for (let i = len - 1; i >= 0; --i) {
68 | if (!isSorting)
69 | return { nSwap: nHSSwap, nCompare: nHSCompare, nArrAccess: nHSArrAccess };
70 |
71 | nHSCompare++;
72 | nHSSwap++;
73 | nHSArrAccess += 2;
74 | // Hoán vị node root với node cuối cùng
75 | await preSwap(0, i);
76 | [arr[0], arr[i]] = [arr[i], arr[0]];
77 | await swapEle(0, i);
78 | await endSwap(0, i);
79 |
80 | await changeItemColor(i, DONE_ITEM_COLOR);
81 | // Xây lại max heap tại vị trí root
82 | await maxHeapify(arr, i, 0);
83 | }
84 |
85 | return { nSwap: nHSSwap, nCompare: nHSCompare, nArrAccess: nHSArrAccess };
86 | }
87 |
88 | // description
89 | const maxHeapCode = Prism.highlight(
90 | `// Hàm xây dựng max heap từ 1 node
91 | function maxHeapify(arr = [], len, nodeIndex) {
92 | // Nếu là node lá thì dừng
93 | if (nodeIndex > Math.floor(len / 2 - 1)) return;
94 |
95 | const leftNode = 2 * nodeIndex + 1,
96 | rightNode = 2 * nodeIndex + 2;
97 | let maxIndex = nodeIndex;
98 |
99 | // Tìm node lớn nhất trong 3 node
100 | if (leftNode < len && arr[leftNode] > arr[maxIndex]) maxIndex = leftNode;
101 | if (rightNode < len && arr[rightNode] > arr[maxIndex]) maxIndex = rightNode;
102 |
103 | // Hoán vị node cha hiện tại với con lớn nhất
104 | if (maxIndex !== nodeIndex) {
105 | [arr[maxIndex], arr[nodeIndex]] = [arr[nodeIndex], arr[maxIndex]];
106 |
107 | // Tiếp tục đệ quy kiểm tra tại node lớn nhất này
108 | maxHeapify(arr, len, maxIndex);
109 | }
110 | }
111 |
112 | // Hàm xây dụng max-heap
113 | function buildMaxHeap(arr = []) {
114 | const len = arr.length;
115 | // Parent node cuối cùng
116 | const lastParentNode = Math.floor(len / 2 - 1);
117 |
118 | // Từ node cha cuối trở lên đều là parent node
119 | for (let i = lastParentNode; i >= 0; --i) maxHeapify(arr, len, i);
120 | }
121 | `,
122 | Prism.languages.javascript,
123 | 'javascript',
124 | );
125 |
126 | const hSCode = Prism.highlight(
127 | `function heapSort(arr = []) {
128 | // Xây dựng max heap
129 | buildMaxHeap(arr);
130 |
131 | const len = arr.length;
132 | for (let i = len - 1; i >= 0; --i) {
133 | // Hoán vị node root với node cuối cùng
134 | [arr[0], arr[i]] = [arr[i], arr[0]];
135 |
136 | // Xây lại max heap tại vị trí root
137 | maxHeapify(arr, i, 0);
138 | }
139 | }`,
140 | Prism.languages.javascript,
141 | 'javascript',
142 | );
143 |
144 | const heapSortDesc = {
145 | title: 'HEAP SORT ALGORITHM',
146 | sortNotes: [
147 | {
148 | title: 'Node Cha',
149 | color: '#F24A0E',
150 | },
151 | {
152 | title: 'P.tử hoán vị',
153 | color: CURRENT_ITEM_COLOR,
154 | },
155 | {
156 | title: 'P.tử hoán vị',
157 | color: SECOND_ITEM_COLOR,
158 | },
159 | {
160 | title: 'P.tử đã sắp xếp',
161 | color: DONE_ITEM_COLOR,
162 | },
163 | ],
164 | htmlContent: `
165 | 1) Độ phức tạp thuật toán (Algorithm Complexity BigO):
166 |
167 |
169 |
- Độ phức tạp thời gian (Time Complexity):
170 |
171 |
172 | Best case: O( n log(n) )
173 | O( n log(n) )
175 | O( n log(n) )
177 |
179 |
180 |
- Độ phức tạp bộ nhớ (Menory Complexity):
181 |
182 |
Worst case: O(1)
183 |
2) Ý tưởng thuật toán (Algorithm Idea):
185 |
187 |
- Đầu vào:
188 |
189 |
190 | - arr : mảng cần sắp xếp. n : số lượng phần tử của mảng.
193 |
- Ý tưởng:
194 |
195 |
196 | - Sử dụng tính chất của cấu trúc dữ liệu heap (max heap, min heap).
202 |
3) Triển khai (Implement Algorithm):
204 |
205 |
3.1 - Minh hoạ ý tưởng:
206 |
Mọi người xem chi tiết cấu trúc "Heap" là gì và cách xây dựng heap tại đây nhé
207 |
213 |
219 |
220 |
3.2 - Xây dựng max-heap:
221 |
${maxHeapCode}
222 |
223 |
3.3 - Hàm heap sort:
224 |
${hSCode}
225 |
226 |
4) Ghi chú (Note):
228 |
229 | - Nên dùng cho mảng kích thước lớn.
`,
232 | };
233 |
--------------------------------------------------------------------------------
/scripts/sort-visualizer/index.js:
--------------------------------------------------------------------------------
1 | /// ${item} `;
9 | });
10 | } else {
11 | arr.forEach((item, index) => {
12 | xml += `
25 | ${note.title}:
26 |
27 | `),
28 | );
29 | $('#sortNote').html(xml);
30 | };
31 |
32 | // generate array visualizer
33 | function generateVisualizer() {
34 | const type = typeAlg === 'random' ? 0 : typeAlg === 'sorted' ? 1 : 2;
35 |
36 | // max value of item in is max height graph
37 | const maxValue = $('#graph').height() - 100;
38 |
39 | // generate array
40 | initArr = generateRandomData(size, type, maxValue);
41 |
42 | // render array
43 | toggleSortAnalysis(false);
44 | $('#graph').empty();
45 | $('#graph').html(renderArray(initArr));
46 | }
47 |
48 | // get description algorithm (*)
49 | function getDescAlg(key = 'bubble') {
50 | switch (key) {
51 | case 'bubble':
52 | return basicBubbleSortDesc;
53 | case 'enBubble':
54 | return enhancedBubbleSortDesc;
55 | case 'oe':
56 | return oeSortDesc;
57 | case 'selection':
58 | return selectionSortDesc;
59 | case 'insertion':
60 | return insertionSortDesc;
61 | case 'quick':
62 | return quickSortDesc;
63 | case 'merge':
64 | return mergeSortDesc;
65 | case 'heap':
66 | return heapSortDesc;
67 | case 'stupid':
68 | return stupidSortDesc;
69 | case 'lsd':
70 | return radixSortLSDDesc;
71 | default:
72 | return basicBubbleSortDesc;
73 | }
74 | }
75 |
76 | // render sort analysis
77 | function renderSortAnalysis(
78 | status = 'Sorting ...',
79 | comparision = 'Processing ...',
80 | swap = 'Processing ...',
81 | arrAccess = 'Processing ...',
82 | ) {
83 | $('#sortStatus').text(status);
84 | $('#numOfComparision').text(comparision);
85 | $('#numOfSwap').text(swap);
86 | $('#numOfArrAccess').text(arrAccess);
87 | }
88 |
89 | // toggle sort analysis
90 | function toggleSortAnalysis(open = false) {
91 | if (open) $('#sortAnalysis').css('display', 'flex');
92 | else $('#sortAnalysis').css('display', 'none');
93 | }
94 |
95 | // animation end sort
96 | function changeOpacity(item) {
97 | return new Promise((resolve) => {
98 | setTimeout(() => {
99 | item.style.opacity = 0.4;
100 | resolve();
101 | }, 10);
102 | });
103 | }
104 |
105 | async function endSort() {
106 | const arr = $('#graph').children();
107 | let n = arr.length;
108 | for (let i = 0; i < n; ++i) {
109 | await changeOpacity(arr[i]);
110 | }
111 | $('#graph').children().css('opacity', 1);
112 | }
113 |
114 | // constant
115 | const MAX_SIZE = 2000,
116 | MAX_DELAY = 2000;
117 |
118 | // (*)
119 | const OPTION_ALGORITHMS = [
120 | {
121 | title: 'Basic Bubble Sort',
122 | value: 'bubble',
123 | },
124 | {
125 | title: 'Enhanced Bubble Sort',
126 | value: 'enBubble',
127 | },
128 | {
129 | title: 'Odd Even / Brick Sort',
130 | value: 'oe',
131 | },
132 | {
133 | title: 'Selection Sort',
134 | value: 'selection',
135 | },
136 | {
137 | title: 'Insertion Sort',
138 | value: 'insertion',
139 | },
140 | {
141 | title: 'Quick Sort',
142 | value: 'quick',
143 | },
144 | {
145 | title: 'Merge Sort',
146 | value: 'merge',
147 | },
148 | {
149 | title: 'Heap Sort',
150 | value: 'heap',
151 | },
152 | {
153 | title: 'Radix Sort (LSD)',
154 | value: 'lsd',
155 | },
156 | {
157 | title: 'Stupid Sort',
158 | value: 'stupid',
159 | },
160 | ];
161 |
162 | // initial
163 | let size = 1,
164 | delay = 0,
165 | typeAlg = 'random',
166 | algorithm = OPTION_ALGORITHMS[0].value,
167 | initArr = generateRandomData(size, 0, 300),
168 | isSorting = false,
169 | descAlg = getDescAlg(algorithm);
170 |
171 | // @render
172 | $(document).ready(() => {
173 | // web display
174 | $('#hideControlBtn').click(function () {
175 | const thisEle = $(this);
176 |
177 | if (thisEle.hasClass('more')) {
178 | thisEle.removeClass('more').addClass('less');
179 | thisEle
180 | .children('.fas')
181 | .removeClass('fa-chevron-circle-up')
182 | .addClass('fa-chevron-circle-down');
183 |
184 | $('.sort-input').hide(250);
185 | $('.sort-btn').hide(250);
186 | $('#hideControlBtn').css({
187 | top: 2,
188 | });
189 | $('#sortControl').css('border-bottom', 'none');
190 | } else {
191 | thisEle.removeClass('less').addClass('more');
192 | thisEle
193 | .children('.fas')
194 | .removeClass('fa-chevron-circle-down')
195 | .addClass('fa-chevron-circle-up');
196 | $('.sort-input').show(250);
197 | $('.sort-btn').show(250);
198 | $('#hideControlBtn').css({
199 | top: 18,
200 | });
201 | $('#sortControl').css(
202 | 'border-bottom',
203 | 'solid 1px var(--secondary-color)',
204 | );
205 | }
206 | });
207 |
208 | renderSortNotes(basicBubbleSortDesc.sortNotes);
209 |
210 | // show/close modal
211 | $('#descAlgBtn').click(() => {
212 | $('#descTitle').text(descAlg.title);
213 | $('#descContent').html(descAlg.htmlContent);
214 | $('#modalOverlay').show();
215 | $('#descAlgModal').fadeIn(350);
216 | });
217 |
218 | $('#closeModal').click(() => {
219 | $('#modalOverlay').hide();
220 | $('#descAlgModal').fadeOut(350);
221 | });
222 |
223 | // initial select
224 | $('#algorithm').append(renderOptionSelect(OPTION_ALGORITHMS));
225 | $('#type').append(renderOptionSelect(ARRAY_TYPES));
226 | $('#graph').html(renderArray(initArr));
227 |
228 | // check size input change
229 | $('#size').change(function () {
230 | isSorting = false;
231 |
232 | const val = parseInt($(this).val());
233 |
234 | if (val > MAX_SIZE) {
235 | $(this).val(MAX_SIZE);
236 | size = MAX_SIZE;
237 | } else if (val < 1 || isNaN(val)) {
238 | $(this).val(1);
239 | size = 1;
240 | } else size = val;
241 |
242 | generateVisualizer();
243 |
244 | // enable button sort
245 | $('#sortBtn').removeClass('disabled');
246 | });
247 |
248 | // check delay input change
249 | $('#delay').change(function () {
250 | const val = parseInt($(this).val());
251 | if (val > MAX_DELAY) {
252 | $(this).val(MAX_DELAY);
253 | delay = MAX_DELAY;
254 | } else if (val < 0 || isNaN(val)) {
255 | $(this).val(0);
256 | delay = 0;
257 | } else delay = val;
258 | });
259 |
260 | // check algorithm change
261 | $('#algorithm').change(function () {
262 | if (isSorting) {
263 | isSorting = false;
264 | $('#graph').html(renderArray(initArr));
265 | toggleSortAnalysis(false);
266 | // enable button sort
267 | $('#sortBtn').removeClass('disabled');
268 | }
269 | algorithm = $(this).val();
270 | descAlg = getDescAlg(algorithm);
271 | renderSortNotes(descAlg.sortNotes);
272 | });
273 |
274 | // check type algorithm change
275 | $('#type').change(function () {
276 | $('#sortBtn').removeClass('disabled');
277 | isSorting = false;
278 | typeAlg = $(this).val();
279 | generateVisualizer();
280 | });
281 |
282 | // generate array
283 | $('#generateBtn').click(() => {
284 | // Stop sorting if it's sorting
285 | isSorting = false;
286 |
287 | generateVisualizer();
288 |
289 | // enable button sort
290 | $('#sortBtn').removeClass('disabled');
291 | });
292 |
293 | // get last unsorted array
294 | $('#oldUnsortedBtn').click(function () {
295 | if (isSorting) {
296 | isSorting = false;
297 | toggleSortAnalysis(false);
298 | $('#graph').html(renderArray(initArr));
299 | // enable button sort
300 | $('#sortBtn').removeClass('disabled');
301 | }
302 | });
303 |
304 | // ! sorting (*)
305 | $('#sortBtn').click(async function () {
306 | $(this).addClass('disabled');
307 | renderSortAnalysis();
308 | toggleSortAnalysis(true);
309 | isSorting = true;
310 | let resultAnalys = null;
311 | switch (algorithm) {
312 | case 'bubble':
313 | resultAnalys = await basicBubbleSort([...initArr]);
314 | break;
315 | case 'enBubble':
316 | resultAnalys = await enhancedBubbleSort([...initArr]);
317 | break;
318 | case 'oe':
319 | resultAnalys = await oddEvenSort([...initArr]);
320 | break;
321 | case 'selection':
322 | resultAnalys = await selectionSort([...initArr]);
323 | break;
324 | case 'insertion':
325 | resultAnalys = await insertionSort([...initArr]);
326 | break;
327 | case 'quick':
328 | resultAnalys = await quickSort([...initArr], 0, initArr.length - 1);
329 | nQSCompare = 0;
330 | nQSArrAccess = 0;
331 | nQSSwap = 0;
332 | break;
333 | case 'merge':
334 | resultAnalys = await mergeSort([...initArr], 0, initArr.length - 1);
335 | nMSCompare = 0;
336 | nMSArrAccess = 0;
337 | nMSSwap = 0;
338 | break;
339 | case 'heap':
340 | resultAnalys = await heapSort([...initArr]);
341 | nHSCompare = 0;
342 | nHSArrAccess = 0;
343 | nHSSwap = 0;
344 | break;
345 | case 'stupid':
346 | resultAnalys = await stupidSort([...initArr]);
347 | nStCompare = 0;
348 | nStArrAccess = 0;
349 | nStSwap = 0;
350 | break;
351 | case 'lsd':
352 | resultAnalys = await radixSortLSD([...initArr]);
353 | break;
354 | default:
355 | break;
356 | }
357 |
358 | const { nSwap, nCompare, nArrAccess } = resultAnalys;
359 | endSort();
360 | renderSortAnalysis('Done', nCompare, nSwap, nArrAccess);
361 | });
362 | });
363 |
--------------------------------------------------------------------------------
/scripts/sort-visualizer/insertion-sort.js:
--------------------------------------------------------------------------------
1 | const INSERTED_ITEM = SECOND_ITEM_COLOR;
2 |
3 | async function insertionSort(arr = []) {
4 | let n = arr.length,
5 | nSwap = 0,
6 | nCompare = 0,
7 | nArrAccess = 0;
8 | let type = 0;
9 | if (n <= 20) type = 1;
10 |
11 | let i = 1,
12 | j;
13 |
14 | while (i < n) {
15 | if (!isSorting) return { nCompare, nArrAccess, nSwap };
16 | await changeItemColor(i, CURRENT_ITEM_COLOR);
17 | ++nCompare;
18 | nArrAccess += 2;
19 | if (arr[i] >= arr[i - 1]) ++i;
20 | else {
21 | const current = arr[i];
22 | j = i - 1;
23 | // insert item into suitable position
24 | while (j >= 0 && arr[j] > current) {
25 | ++nCompare;
26 | ++nSwap;
27 | nArrAccess += 2;
28 | await changeItemColor(j + 1, '#fff');
29 | await swapEle(j, j + 1);
30 | if (j + 1 === i) await changeItemColor(j + 1, CURRENT_ITEM_COLOR);
31 | arr[j + 1] = arr[j];
32 | --j;
33 | }
34 |
35 | arr[j + 1] = current;
36 | ++nArrAccess;
37 |
38 | await changeValue(j + 1, current, type);
39 | await changeItemColor(j + 1, ITEM_COLOR);
40 | ++i;
41 | }
42 | await changeItemColor(i - 1, ITEM_COLOR);
43 | }
44 |
45 | return { nCompare, nArrAccess, nSwap };
46 | }
47 |
48 | // description
49 | const insertionSortCode = Prism.highlight(
50 | `function insertionSort(arr = []) {
51 | let n = arr.length;
52 |
53 | let i = 1, j = 0;
54 |
55 | while (i < n) {
56 | if (arr[i] >= arr[i - 1]) ++i;
57 | else {
58 | const current = arr[i];
59 | j = i - 1;
60 |
61 | // Chèn phần tử vào vị trí thích hợp
62 | while (j >= 0 && arr[j] > current) {
63 | arr[j + 1] = arr[j];
64 | --j;
65 | }
66 |
67 | arr[j + 1] = current;
68 | ++i;
69 | }
70 | }
71 |
72 | return arr;
73 | }`,
74 | Prism.languages.javascript,
75 | 'javascript',
76 | );
77 | const insertionSortDesc = {
78 | title: 'INSERTION SORT ALGORITHM',
79 | sortNotes: [
80 | {
81 | title: 'P.tử hiện tại',
82 | color: CURRENT_ITEM_COLOR,
83 | },
84 | ],
85 | htmlContent: `
86 | 1) Độ phức tạp thuật toán (Algorithm Complexity BigO):
87 |
88 |
90 |
- Độ phức tạp thời gian (Time Complexity):
91 |
92 |
93 | Best case: O(n)
94 | O(n2 )
96 | O(n2 )
98 |
100 |
101 |
- Độ phức tạp bộ nhớ (Menory Complexity):
102 |
103 |
Worst case: O(1)
104 |
2) Ý tưởng thuật toán (Algorithm Idea):
106 |
108 |
- Đầu vào:
109 |
110 |
111 | - arr : mảng cần sắp xếp. n : số lượng phần tử của mảng. i : chỉ số index vòng lặp ngoài (1 -> n). j : chỉ số vòng lặp trong (i - 1 -> 0)
116 |
- Ý tưởng:
117 |
118 |
119 | - Sử dụng 2 vòng lặp lồng nhau để chia mảng thành 2 mảng con (1 đã
120 | sắp xếp, 1 không).
125 |
3) Triển khai (Implement Algorithm):
127 |
128 |
${insertionSortCode}
129 |
4) Ghi chú (Note):
131 |
132 | - Không nên dùng cho mảng kích thước lớn.
`,
136 | };
137 |
--------------------------------------------------------------------------------
/scripts/sort-visualizer/merge-sort.js:
--------------------------------------------------------------------------------
1 | const MIDDLE_ITEM_COLOR = CURRENT_ITEM_COLOR,
2 | MERGE_INDEX_COLOR = SECOND_ITEM_COLOR;
3 |
4 | let nMSCompare = 0,
5 | nMSArrAccess = 0,
6 | nMSSwap = 0;
7 |
8 | // @fn: Hàm gộp 2 mảng lại với nhau
9 | async function mergeArr(arr, l, middle, r) {
10 | let flag = arr.length <= 20;
11 | if (!isSorting)
12 | return { nSwap: nMSSwap, nCompare: nMSCompare, nArrAccess: nMSArrAccess };
13 |
14 | // tạo 2 mảng trái, phải đã sắp xếp
15 | let leftArr = [...arr.slice(l, middle + 1)],
16 | rightArr = [...arr.slice(middle + 1, r + 1)];
17 |
18 | let mergeIndex = l,
19 | i = 0,
20 | j = 0,
21 | n1 = middle + 1 - l, // số phần tử mảng trái
22 | n2 = r - middle; // số phấn tử mảng phải
23 |
24 | nMSArrAccess += n1 + n2;
25 |
26 | // gộp 2 mảng lại
27 | while (i < n1 && j < n2) {
28 | let newVal = leftArr[i] < rightArr[j] ? leftArr[i++] : rightArr[j++];
29 | nMSCompare += 3;
30 | await changeItemColor(mergeIndex, MERGE_INDEX_COLOR);
31 | await changeValue(mergeIndex, newVal, flag);
32 | await changeItemColor(mergeIndex, ITEM_COLOR);
33 | arr[mergeIndex++] = newVal;
34 | nMSArrAccess += 4;
35 | }
36 | nMSCompare += 2;
37 |
38 | // gán hết phần tử mảng trái nếu còn
39 | while (i < n1) {
40 | let t = leftArr[i++];
41 | await changeItemColor(mergeIndex, MERGE_INDEX_COLOR);
42 | await changeValue(mergeIndex, t, flag);
43 | await changeItemColor(mergeIndex, ITEM_COLOR);
44 | arr[mergeIndex++] = t;
45 | nMSArrAccess += 2;
46 | }
47 | nMSCompare++;
48 |
49 | // gán hết phần tử mảng phải nếu còn
50 | while (j < n2) {
51 | let t = rightArr[j++];
52 | await changeItemColor(mergeIndex, MERGE_INDEX_COLOR);
53 | await changeValue(mergeIndex, t, flag);
54 | await changeItemColor(mergeIndex, ITEM_COLOR);
55 | arr[mergeIndex++] = t;
56 | nMSArrAccess += 2;
57 | }
58 | nMSCompare++;
59 | }
60 |
61 | // @fn: merge sort
62 | async function mergeSort(arr = [], l, r) {
63 | // điều kiện dừng đệ quy
64 | if (l < r) {
65 | nMSCompare++;
66 |
67 | if (!isSorting)
68 | return { nSwap: nMSSwap, nCompare: nMSCompare, nArrAccess: nMSArrAccess };
69 |
70 | // tìm phần tử trung gian để tách mảng
71 | let middle = parseInt((l + r) / 2);
72 | await changeItemColor(middle, MIDDLE_ITEM_COLOR);
73 | await changeItemColor(middle, ITEM_COLOR);
74 |
75 | await mergeSort(arr, l, middle); // tách nửa mảng trái
76 | await mergeSort(arr, middle + 1, r); // tách nửa mảng phải
77 | await mergeArr(arr, l, middle, r); // gộp 2 mảng trái phải
78 |
79 | return { nSwap: nMSSwap, nCompare: nMSCompare, nArrAccess: nMSArrAccess };
80 | }
81 | }
82 |
83 | // description
84 | const mSCode = Prism.highlight(
85 | `// Hàm gộp 2 mảng lại với nhau
86 | function mergeArr(arr, l, middle, r) {
87 | // tạo 2 mảng trái, phải đã sắp xếp
88 | let leftArr = [...arr.slice(l, middle + 1)],
89 | rightArr = [...arr.slice(middle + 1, r + 1)];
90 |
91 | let mergeIndex = l,
92 | i = 0,
93 | j = 0,
94 | n1 = middle + 1 - l, // số phần tử mảng trái
95 | n2 = r - middle; // số phấn tử mảng phải
96 |
97 | // gộp 2 mảng lại
98 | while (i < n1 && j < n2)
99 | arr[mergeIndex++] = leftArr[i] < rightArr[j] ? leftArr[i++] : rightArr[j++];
100 |
101 | // gán hết phần tử mảng trái nếu còn
102 | while (i < n1) arr[mergeIndex++] = leftArr[i++];
103 |
104 | // gán hết phần tử mảng phải nếu còn
105 | while (j < n2) arr[mergeIndex++] = rightArr[j++];
106 | }
107 |
108 | // Merge sort
109 | function mergeSort(arr = [], l, r) {
110 | // điều kiện dừng đệ quy
111 | if (l >= r) return;
112 |
113 | // tìm phần tử trung gian để tách mảng
114 | let middle = parseInt((l + r) / 2);
115 |
116 | mergeSort(arr, l, middle); // tách nửa mảng trái
117 | mergeSort(arr, middle + 1, r); // tách nửa mảng phải
118 | mergeArr(arr, l, middle, r); // gộp 2 mảng trái phải
119 | }`,
120 | Prism.languages.javascript,
121 | 'javascript',
122 | );
123 | const mergeSortDesc = {
124 | title: 'MERGE SORT ALGORITHM',
125 | sortNotes: [
126 | {
127 | title: 'P.tử giữa',
128 | color: CURRENT_ITEM_COLOR,
129 | },
130 | {
131 | title: 'Vị trí gộp',
132 | color: SECOND_ITEM_COLOR,
133 | },
134 | ],
135 | htmlContent: `
136 | 1) Độ phức tạp thuật toán (Algorithm Complexity BigO):
137 |
138 |
140 |
- Độ phức tạp thời gian (Time Complexity):
141 |
142 |
143 | Best case: O( n log(n) )
144 | O( n log(n) )
146 | O( n log(n) )
148 |
150 |
151 |
- Độ phức tạp bộ nhớ (Menory Complexity):
152 |
153 |
Worst case: O(n)
154 |
2) Ý tưởng thuật toán (Algorithm Idea):
156 |
158 |
- Đầu vào:
159 |
160 |
161 | - arr : mảng cần sắp xếp. n : số lượng phần tử của mảng. l : index phần tử bắt đầu duyệt. r : index phần tử cuối cùng cần duyệt.
166 |
- Ý tưởng:
167 |
168 |
169 | - Tách mảng ban đầu thành 2 mảng dựa trên phần tử middle: (n - 1)/2.
173 |
3) Triển khai (Implement Algorithm):
175 |
176 |
3.1 - Minh hoạ ý tưởng:
177 |
183 |
Nguồn: https://www.programiz.com/
184 |
3.2 - Hàm merge sort:
185 |
${mSCode}
186 |
187 |
4) Ghi chú (Note):
189 |
190 | - Nên dùng cho mảng kích thước lớn. Nhược điểm:
`,
195 | };
196 |
--------------------------------------------------------------------------------
/scripts/sort-visualizer/odd-even-sort.js:
--------------------------------------------------------------------------------
1 | async function oddEvenSort(arr = []) {
2 | const n = arr.length;
3 | let nSwap = 0,
4 | nCompare = 0,
5 | nArrAccess = 0,
6 | isSorted = false;
7 |
8 | while (!isSorted) {
9 | isSorted = true;
10 | if (!isSorting) return { nSwap, nArrAccess, nCompare };
11 |
12 | // Sắp xếp mảng chẵn
13 | for (let i = 0; i <= n - 2; i += 2) {
14 | if (!isSorting) return { nSwap, nArrAccess, nCompare };
15 |
16 | nArrAccess += 2;
17 | nCompare++;
18 |
19 | if (arr[i] > arr[i + 1]) {
20 | await preSwap(i, i + 1);
21 | [arr[i], arr[i + 1]] = [arr[i + 1], arr[i]];
22 | isSorted = false;
23 | await swapEle(i, i + 1);
24 |
25 | nSwap++;
26 | nArrAccess += 2;
27 | await endSwap(i, i + 1);
28 | }
29 | }
30 |
31 | // Sắp xếp mảng lẻ
32 | for (let i = 1; i <= n - 2; i += 2) {
33 | if (!isSorting) return { nSwap, nArrAccess, nCompare };
34 |
35 | nArrAccess += 2;
36 | nCompare++;
37 | if (arr[i] > arr[i + 1]) {
38 | await preSwap(i, i + 1);
39 |
40 | [arr[i], arr[i + 1]] = [arr[i + 1], arr[i]];
41 | isSorted = false;
42 | await swapEle(i, i + 1);
43 |
44 | nSwap++;
45 | nArrAccess += 2;
46 | await endSwap(i, i + 1);
47 | }
48 | }
49 | }
50 |
51 | return { nSwap, nArrAccess, nCompare };
52 | }
53 |
54 | // description
55 | const oeSortCode = Prism.highlight(
56 | `function oddEvenSort(arr = []) {
57 | const n = arr.length;
58 | let isSorted = false;
59 |
60 | while (!isSorted) {
61 | isSorted = true;
62 |
63 | // Sắp xếp mảng chẵn
64 | for (let i = 0; i <= n - 2; i += 2) {
65 | if (arr[i] > arr[i + 1]) {
66 | [arr[i], arr[i + 1]] = [arr[i + 1], arr[i]];
67 | isSorted = false;
68 | }
69 | }
70 |
71 | // Sắp xếp mảng lẻ
72 | for (let i = 1; i <= n - 2; i += 2) {
73 | if (arr[i] > arr[i + 1]) {
74 | [arr[i], arr[i + 1]] = [arr[i + 1], arr[i]];
75 | isSorted = false;
76 | }
77 | }
78 | }
79 |
80 | return arr;
81 | }
82 | `,
83 | Prism.languages.javascript,
84 | 'javascript',
85 | );
86 |
87 | const oeSortDesc = {
88 | title: '0️⃣1️⃣ ODD EVEN SORT / BRICK SORT 🧱',
89 | sortNotes: [
90 | {
91 | title: 'P.tử hiện tại',
92 | color: CURRENT_ITEM_COLOR,
93 | },
94 | {
95 | title: 'P.tử kế tiếp',
96 | color: SECOND_ITEM_COLOR,
97 | },
98 | ],
99 | htmlContent: `
100 | 1) Độ phức tạp thuật toán (Algorithm Complexity BigO):
101 |
102 |
104 |
- Độ phức tạp thời gian (Time Complexity):
105 |
106 |
107 | Best case: O(n)
108 | O(n2 )
110 | O(n2 )
112 |
114 |
115 |
- Độ phức tạp bộ nhớ (Menory Complexity):
116 |
117 |
Worst case: O(1)
118 |
2) Ý tưởng thuật toán (Algorithm Idea):
120 |
122 |
- Ý tưởng:
123 |
124 |
125 | - Là phiên bản khác cải thiện của bubble sort, chia mảng làm 2 pha chẵn và lẻ, sau đó dùng bubble sort.
127 |
3) Triển khai (Implement Algorithm):
129 |
130 |
${oeSortCode}
131 |
4) Ghi chú (Note):
133 |
134 | - Còn gọi là Brick sort.
`,
139 | };
140 |
--------------------------------------------------------------------------------
/scripts/sort-visualizer/prepare-sort.js:
--------------------------------------------------------------------------------
1 | // change background color pre swap ele
2 | async function preSwap(left, right) {
3 | return new Promise((resolve, reject) => {
4 | setTimeout(() => {
5 | $('#graph').children()[left].style.backgroundColor = CURRENT_ITEM_COLOR;
6 | $('#graph').children()[right].style.backgroundColor = SECOND_ITEM_COLOR;
7 |
8 | resolve();
9 | }, delay);
10 | });
11 | }
12 |
13 | // swap 2 element i, j
14 | async function swapEle(i, j) {
15 | return new Promise((resolve, reject) => {
16 | setTimeout(() => {
17 | const node1 = $('#graph').children()[i],
18 | node2 = $('#graph').children()[j];
19 |
20 | const afterNode2 = node2.nextElementSibling;
21 | const parent = node2.parentNode;
22 |
23 | node1.replaceWith(node2);
24 | parent.insertBefore(node1, afterNode2);
25 |
26 | resolve();
27 | }, delay);
28 | });
29 | }
30 |
31 | // end swap
32 | async function endSwap(left, right) {
33 | return new Promise((resolve, reject) => {
34 | setTimeout(() => {
35 | $('#graph').children()[left].style.backgroundColor = ITEM_COLOR;
36 | $('#graph').children()[right].style.backgroundColor = ITEM_COLOR;
37 |
38 | resolve();
39 | }, delay);
40 | });
41 | }
42 |
43 | // change color item
44 | async function changeItemColor(index, color) {
45 | return new Promise((resolve, reject) => {
46 | setTimeout(() => {
47 | let item = $('#graph').children()[index];
48 | if (item) item.style.backgroundColor = color;
49 | resolve();
50 | }, delay);
51 | });
52 | }
53 |
54 | // change value item i -> value item j
55 | async function changeValue(i, value, type = 0) {
56 | return new Promise((resolve, reject) => {
57 | setTimeout(() => {
58 | let item = $('.arr-item')[i];
59 | item.style.height = `${value}px`;
60 | if (type) item.textContent = value;
61 | resolve();
62 | }, delay);
63 | });
64 | }
65 |
--------------------------------------------------------------------------------
/scripts/sort-visualizer/quick-sort.js:
--------------------------------------------------------------------------------
1 | const PIVOT_COLOR = DONE_ITEM_COLOR;
2 | let nQSCompare = 0,
3 | nQSArrAccess = 0,
4 | nQSSwap = 0;
5 |
6 | async function partitionFunc(arr = [], low, high) {
7 | await changeItemColor(high, PIVOT_COLOR);
8 | let pivot = arr[high];
9 | let l = low;
10 | let r = high - 1;
11 |
12 | while (true) {
13 | while (l <= r && arr[l] < pivot) {
14 | l++;
15 | ++nQSArrAccess;
16 | nQSCompare += 2;
17 | }
18 | while (r >= l && arr[r] > pivot) {
19 | r--;
20 | ++nQSArrAccess;
21 | nQSCompare += 2;
22 | }
23 | if (l >= r) break;
24 | await preSwap(l, r);
25 | [arr[l], arr[r]] = [arr[r], arr[l]];
26 | ++nQSCompare;
27 | nQSArrAccess += 2;
28 | nQSSwap++;
29 | await swapEle(l, r);
30 | await endSwap(l, r);
31 | l++;
32 | r--;
33 | }
34 |
35 | await preSwap(l, high);
36 | [arr[l], arr[high]] = [arr[high], arr[l]];
37 | await swapEle(l, high);
38 | await endSwap(l, high);
39 |
40 | await changeItemColor(l, PIVOT_COLOR);
41 | return l;
42 | }
43 |
44 | async function quickSort(arr, low, high) {
45 | if (low < high) {
46 | if (!isSorting) return { nQSSwap, nQSCompare, nQSArrAccess };
47 | const pivot = await partitionFunc(arr, low, high);
48 | await changeItemColor(pivot, ITEM_COLOR);
49 | await quickSort(arr, low, pivot - 1);
50 | await quickSort(arr, pivot + 1, high);
51 | }
52 | return { nSwap: nQSSwap, nCompare: nQSCompare, nArrAccess: nQSArrAccess };
53 | }
54 |
55 | // description
56 | const qSPivotCode = Prism.highlight(
57 | `function partitionFunc(arr = [], low, high) {
58 | let pivot = arr[high];
59 | let l = low;
60 | let r = high - 1;
61 |
62 | while (true) {
63 | // Tìm phần tử bên trái bị sai vị trí
64 | while (l <= r && arr[l] < pivot) l++;
65 |
66 | // Tìm phần tử bên phải bị sai vị trí
67 | while (r >= l && arr[r] > pivot) r--;
68 |
69 | // Nếu đã hoàn tất duyệt thì dừng
70 | if (l >= r) break;
71 |
72 | // Ngược lại thì swap 2 phần tử bị sai, sau đó tăng trái và phải lên 1
73 | [arr[l], arr[r]] = [arr[r], arr[l]];
74 | l++;
75 | r--;
76 | }
77 |
78 | // Đưa phần tử pivot vào đúng vị trí
79 | [arr[l], arr[high]] = [arr[high], arr[l]];
80 |
81 | // Trả về vị trí pivot hiện tại
82 | return l;
83 | }`,
84 | Prism.languages.javascript,
85 | 'javascript',
86 | );
87 | const qSCode = Prism.highlight(
88 | `function quickSort(arr, low, high) {
89 | if (low < high) {
90 | // Tìm phần tử pivot
91 | const pivot = partitionFunc(arr, low, high);
92 |
93 | // Đệ quy nửa mảng bên trái
94 | quickSort(arr, low, pivot - 1);
95 |
96 | // Đệ quy nửa mảng bên phải
97 | quickSort(arr, pivot + 1, high);
98 | }
99 | }`,
100 | Prism.languages.javascript,
101 | 'javascript',
102 | );
103 | const quickSortDesc = {
104 | title: '⚡ QUICK SORT ALGORITHM 🐢',
105 | sortNotes: [
106 | {
107 | title: 'P.tử trái',
108 | color: CURRENT_ITEM_COLOR,
109 | },
110 | {
111 | title: 'P.tử phải',
112 | color: SECOND_ITEM_COLOR,
113 | },
114 | {
115 | title: 'Pivot',
116 | color: DONE_ITEM_COLOR,
117 | },
118 | ],
119 | htmlContent: `
120 | 1) Độ phức tạp thuật toán (Algorithm Complexity BigO):
121 |
122 |
124 |
- Độ phức tạp thời gian (Time Complexity):
125 |
126 |
127 | Best case: O( n log(n) )
128 | O( n log(n) )
130 | O(n2 )
132 |
134 |
135 |
- Độ phức tạp bộ nhớ (Menory Complexity):
136 |
137 |
Worst case: O( log(n) )
138 |
2) Ý tưởng thuật toán (Algorithm Idea):
140 |
142 |
- Đầu vào:
143 |
144 |
145 | - arr : mảng cần sắp xếp. n : số lượng phần tử của mảng. low : index phần tử bắt đầu duyệt. high : index phần tử cuối cùng cần duyệt.
150 |
- Ý tưởng:
151 |
152 |
153 | - Lựa chọn một phần tử vách ngăn (pivot).
160 |
3) Triển khai (Implement Algorithm):
162 |
163 |
3.1 - Hàm tìm vách ngăn pivot (partition function):
164 |
${qSPivotCode}
165 |
3.2 - Hàm quick sort:
166 |
${qSCode}
167 |
4) Ghi chú (Note):
169 |
170 | - Nên dùng cho mảng kích thước lớn. Nhược điểm:
`,
177 | };
178 |
--------------------------------------------------------------------------------
/scripts/sort-visualizer/radix-sort.js:
--------------------------------------------------------------------------------
1 | // Hàm lấy chữ số tại vị trí posDigit
2 | // posDigit = 0 là hàng đơn vị
3 | function getDigit(num = 0, posDigit = 0) {
4 | // ex: num = -1234, posDigit = 2, expected = 2
5 | let numInt = Math.abs(parseInt(num / 10 ** posDigit)); // numInt = | -1234 / 10^2 | = 12;
6 | let digit = numInt % 10; // digit = 2;
7 |
8 | // Nếu num < 0 và digit = 0 thì trả về -1, ngược lại trả về digit
9 | return num < 0 && digit === 0 ? -1 : digit;
10 | }
11 |
12 | // Tìm số chữ số lớn nhất của mảng
13 | // Chú ý số âm thì cộng thêm 1 chữ số
14 | function getMaxExp(arr = []) {
15 | let exp = 0;
16 |
17 | arr.forEach((num) => {
18 | const len = num.toString().length;
19 | if (len > exp) exp = len;
20 | });
21 |
22 | return exp;
23 | }
24 |
25 | // Hàm radix sort LSD ( Least Significant Digit )
26 | async function radixSortLSD(arr = []) {
27 | let nSwap = 0,
28 | nCompare = 0,
29 | nArrAccess = 0;
30 |
31 | // Tạo 11 cái xô chứa các digit từ -1 đến 9
32 | let buckets = Array.from({ length: 11 }, () => new Array());
33 |
34 | // Số chữ số nhiều nhất, cũng là số lần lặp duyệt mảng
35 | let exp = getMaxExp(arr) || 0;
36 | nArrAccess += arr.length;
37 |
38 | // LSD lấy từ chữ số cuối
39 | let i = 0;
40 | while (i < exp) {
41 | if (!isSorting) return { nSwap, nCompare, nArrAccess };
42 |
43 | // Lặp qua mảng và cho vào các xô
44 | const arrLen = arr.length;
45 | for (let index = 0; index < arrLen; ++index) {
46 | if (!isSorting) return { nSwap, nCompare, nArrAccess };
47 |
48 | const num = arr[index];
49 | await changeItemColor(index, CURRENT_ITEM_COLOR);
50 | const digitIndex = getDigit(num, i) + 1;
51 | buckets[digitIndex].push(num);
52 | await changeItemColor(index, ITEM_COLOR);
53 |
54 | nArrAccess += 3;
55 | }
56 |
57 | // Lấy từ xô trả về mảng
58 | let j = 0;
59 | for (let index = 0; index < 11; ++index) {
60 | if (!isSorting) return { nSwap, nCompare, nArrAccess };
61 |
62 | let numArr = buckets[index];
63 | nArrAccess++;
64 |
65 | // Nếu là lần cuối và xô là xô chứa số âm thì lấy ngược lại các p.tử trong xô
66 | if (i === exp - 1 && index === 0) {
67 | const n = numArr.length;
68 | for (let k = n - 1; k >= 0; --k) {
69 | await changeItemColor(j, SECOND_ITEM_COLOR);
70 | await changeValue(j, numArr[k]);
71 | await changeItemColor(j, ITEM_COLOR);
72 | arr[j++] = numArr[k];
73 | nArrAccess += 2;
74 | }
75 | }
76 | // Ngược lại, thì lấy xuôi từ trong xô
77 | else {
78 | const l = numArr.length;
79 | for (let index = 0; index < l; ++index) {
80 | if (!isSorting) return { nSwap, nCompare, nArrAccess };
81 |
82 | const num = numArr[index];
83 | await changeValue(j, num);
84 | await changeItemColor(j, SECOND_ITEM_COLOR);
85 | await changeItemColor(j, ITEM_COLOR);
86 |
87 | arr[j++] = num;
88 | nArrAccess += 2;
89 | }
90 | }
91 | // Làm trống xô
92 | numArr.length = 0;
93 | }
94 |
95 | ++i;
96 | }
97 |
98 | return { nSwap, nCompare, nArrAccess };
99 | }
100 |
101 | // description
102 | const radixSortLSDCode = Prism.highlight(
103 | `// Hàm lấy chữ số tại vị trí posDigit
104 | // posDigit = 0 là hàng đơn vị
105 | function getDigit(num = 0, posDigit = 0) {
106 | // ex: num = -1234, posDigit = 2, expected = 2
107 | let numInt = Math.abs(parseInt(num / 10 ** posDigit)); // numInt = | -1234 / 10^2 | = 12;
108 | let digit = numInt % 10; // digit = 2;
109 |
110 | // Nếu num < 0 và digit = 0 thì trả về -1, ngược lại trả về digit
111 | return num < 0 && digit === 0 ? -1 : digit;
112 | }
113 |
114 | // Tìm số chữ số lớn nhất của mảng
115 | // Chú ý số âm thì cộng thêm 1 chữ số
116 | function getMaxExp(arr = []) {
117 | let exp = 0;
118 |
119 | arr.forEach((num) => {
120 | const len = num.toString().length;
121 | if (len > exp) exp = len;
122 | });
123 |
124 | return exp;
125 | }
126 |
127 | // Hàm radix sort LSD ( Least Significant Digit )
128 | function radixSortLSD(arr = []) {
129 | // Tạo 11 cái xô chứa các digit từ -1 đến 9
130 | let buckets = Array.from({ length: 11 }, () => new Array());
131 |
132 | // Số chữ số nhiều nhất, cũng là số lần lặp duyệt mảng
133 | let exp = getMaxExp(arr) || 0;
134 |
135 | // LSD lấy từ chữ số cuối
136 | let i = 0;
137 | while (i < exp) {
138 | // Lặp qua mảng và cho vào các xô
139 | arr.forEach((num) => {
140 | const digitIndex = getDigit(num, i) + 1; // Do buckets có index từ 0 -> 10, getDigit() trả về -1 -> 10
141 | buckets[digitIndex].push(num);
142 | });
143 |
144 | // Lấy từ xô trả về mảng
145 | let j = 0;
146 | buckets.forEach((numArr, index) => {
147 | // Nếu là lần cuối và xô là xô chứa số âm thì lấy ngược lại các p.tử trong xô
148 | if (i === exp - 1 && index === 0) {
149 | const n = numArr.length;
150 | for (let k = n - 1; k >= 0; --k) arr[j++] = numArr[k];
151 | }
152 | // Ngược lại, thì lấy xuôi từ trong xô
153 | else numArr.forEach((num) => (arr[j++] = num));
154 |
155 | // Làm trống xô
156 | numArr.length = 0;
157 | });
158 |
159 | ++i;
160 | }
161 |
162 | return arr;
163 | }
164 | `,
165 | Prism.languages.javascript,
166 | 'javascript',
167 | );
168 |
169 | const radixSortLSDDesc = {
170 | title: '1️⃣ RADIX SORT (LSD) ALGORITHM 💯',
171 | sortNotes: [
172 | {
173 | title: 'P.tử hiện tại',
174 | color: CURRENT_ITEM_COLOR,
175 | },
176 | {
177 | title: 'P.tử trong xô',
178 | color: SECOND_ITEM_COLOR,
179 | },
180 | ],
181 | htmlContent: `
182 | 1) Độ phức tạp thuật toán (Algorithm Complexity BigO):
183 |
184 |
186 |
- Độ phức tạp thời gian (Time Complexity):
187 |
188 |
189 |
190 |
191 | Giả sử ta có 1 mảng các số nguyên có số phần tử n, base (số lượng xô (bucket) chứa các phần tử)
192 | và digit là số chữ số của số lớn nhất trong mảng. Thì độ phức tạp sẽ là:
193 |
194 |
195 |
196 | Best case: O( digit * (n + base) )
197 | O( digit * (n + base) )
199 | O( digit * (n + base) )
201 |
203 |
- Độ phức tạp bộ nhớ (Menory Complexity):
204 |
205 |
Worst case: O( n + base )
206 |
2) Ý tưởng thuật toán (Algorithm Idea):
208 |
210 | Số lượng base (bucket) khác nhau thì cách tách phần tử cũng khác nhau.
213 |
215 |
- Đầu vào:
216 |
217 |
218 | - arr : mảng cần sắp xếp. n : số lượng phần tử của mảng. buckets : Mảng 2 chiều chứa các số theo cơ số của nó.
222 |
- Ý tưởng:
223 |
224 |
225 | - Sử dụng một mảng 2 chiều để chứa các số được phân loại theo từng chữ số của chúng.
232 |
3) Triển khai (Implement Algorithm):
234 |
235 |
3.1 - Mô tả ý tưởng:
236 |
242 |
245 |
246 |
3.2 - Hàm Radix LSD sort:
247 |
${radixSortLSDCode}
248 |
4) Ghi chú (Note):
250 |
251 | - Là một thuật toán sắp xếp phân tán, ổn định, không dùng phép so sánh.
`,
259 | };
260 |
--------------------------------------------------------------------------------
/scripts/sort-visualizer/selection-sort.js:
--------------------------------------------------------------------------------
1 | const MIN_ITEM_COLOR = SECOND_ITEM_COLOR;
2 | const SORTED_ITEM_COLOR = DONE_ITEM_COLOR;
3 |
4 | async function selectionSort(arr = []) {
5 | let n = arr.length,
6 | nSwap = 0,
7 | nCompare = 0,
8 | nArrAccess = 0;
9 |
10 | for (let i = 0; i < n - 1; ++i) {
11 | ++nArrAccess;
12 | let min = arr[i];
13 | let index = i;
14 | await changeItemColor(i, MIN_ITEM_COLOR);
15 |
16 | // find min
17 | for (let j = i + 1; j < n; ++j) {
18 | if (!isSorting) return { nCompare, nArrAccess, nSwap };
19 | ++nArrAccess;
20 | ++nCompare;
21 | await changeItemColor(j, CURRENT_ITEM_COLOR);
22 | if (arr[j] < min) {
23 | await changeItemColor(j, MIN_ITEM_COLOR);
24 | await changeItemColor(index, ITEM_COLOR);
25 | min = arr[j];
26 | index = j;
27 | } else {
28 | await changeItemColor(j, ITEM_COLOR);
29 | }
30 | }
31 |
32 | // swap if min != initial min
33 | if (index !== i) {
34 | nArrAccess += 2;
35 | ++nSwap;
36 | [arr[i], arr[index]] = [arr[index], arr[i]];
37 | await swapEle(i, index);
38 | }
39 |
40 | await changeItemColor(i, SORTED_ITEM_COLOR);
41 | }
42 |
43 | return { nCompare, nArrAccess, nSwap };
44 | }
45 |
46 | // description
47 | const selectionSortCode = Prism.highlight(
48 | `function selectionSort(arr = []) {
49 | const n = arr.length;
50 |
51 | for (let i = 0; i < n - 1; ++i) {
52 | let min = arr[i];
53 | let index = i;
54 |
55 | // tìm min
56 | for (let j = i + 1; j < n; ++j) {
57 | if (arr[j] < min) {
58 | min = arr[j];
59 | index = j;
60 | }
61 | }
62 |
63 | // Hoán vị nếu min tìm thấy # min ban đầu
64 | if (index !== i) [arr[i], arr[index]] = [arr[index], arr[i]];
65 | }
66 | }`,
67 | Prism.languages.javascript,
68 | 'javascript',
69 | );
70 |
71 | const selectionSortDesc = {
72 | title: '🔎 SELECTION SORT ALGORITHM ✔',
73 | sortNotes: [
74 | {
75 | title: 'P.tử hiện tại',
76 | color: CURRENT_ITEM_COLOR,
77 | },
78 | {
79 | title: 'P.tử nhỏ nhất',
80 | color: SECOND_ITEM_COLOR,
81 | },
82 | {
83 | title: 'P.tử đã chọn',
84 | color: DONE_ITEM_COLOR,
85 | },
86 | ],
87 | htmlContent: `
88 | 1) Độ phức tạp thuật toán (Algorithm Complexity BigO):
89 |
90 |
92 |
- Độ phức tạp thời gian (Time Complexity):
93 |
94 |
95 | Best case: O(n2 )
96 | O(n2 )
98 | O(n2 )
100 |
102 |
103 |
- Độ phức tạp bộ nhớ (Menory Complexity):
104 |
105 |
Worst case: O(1)
106 |
2) Ý tưởng thuật toán (Algorithm Idea):
108 |
110 |
- Đầu vào:
111 |
112 |
113 | - arr : mảng cần sắp xếp. n : số lượng phần tử của mảng. i : chỉ số index vòng lặp ngoài (0 -> n-1). j : chỉ số vòng lặp trong (i+1 -> n)
118 |
- Ý tưởng:
119 |
120 |
121 | - Sử dụng 2 vòng lặp lồng nhau để chia mảng thành 2 mảng con (1 đã
122 | sắp xếp, 1 không).
129 |
3) Triển khai (Implement Algorithm):
131 |
132 |
${selectionSortCode}
133 |
4) Ghi chú (Note):
135 |
136 | - Không nên dùng cho mảng kích thước lớn.
`,
140 | };
141 |
--------------------------------------------------------------------------------
/scripts/sort-visualizer/stupid-sort.js:
--------------------------------------------------------------------------------
1 | let nStCompare = 0,
2 | nStArrAccess = 0,
3 | nStSwap = 0;
4 |
5 | async function isSortedArr(arr = []) {
6 | let n = arr.length;
7 |
8 | for (let i = 0; i < n - 1; ++i) {
9 | if (!isSorting) return false;
10 | nStCompare += 2;
11 | nStArrAccess += 2;
12 |
13 | await changeItemColor(i, CURRENT_ITEM_COLOR);
14 | await changeItemColor(i, ITEM_COLOR);
15 |
16 | if (arr[i] > arr[i + 1]) {
17 | return false;
18 | }
19 | }
20 |
21 | return true;
22 | }
23 |
24 | function shuffleArray(arr = []) {
25 | return arr.sort(() => {
26 | nStArrAccess += 2;
27 | nStSwap += 2;
28 | return Math.random() - 0.5;
29 | });
30 | }
31 |
32 | async function reRenderArr(arr) {
33 | let xml = '';
34 |
35 | arr.forEach((item, index) => {
36 | xml += `
89 | 1) Độ phức tạp thuật toán (Algorithm Complexity BigO):
90 |
91 |
92 | - O(∞) hay O(nhân phẩm)
93 |
94 | 2) Ý tưởng thuật toán (Algorithm Idea):
95 |
96 |
97 | - Xáo trộn mảng, kiểm tra mảng vừa xáo.
100 |
3) Triển khai (Implement Algorithm):
102 |
103 |
3.2 - Hàm stupid sort:
104 |
${stSCode}
105 |
106 |
4) Ghi chú (Note):
108 |
109 | - Dùng để kiểm tra nhân phẩm người dùng. 🐭
`,
112 | };
113 |
--------------------------------------------------------------------------------
/sort-visualizer.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Dyno - Sorting Visualizer
9 |
10 |
11 |
31 |
32 |
33 |
34 |
42 |
43 |
44 |
66 |
72 |
73 |
74 |
75 |
76 |
98 |
99 |
100 |
101 | Mô tả
103 |
104 | Tạo mảng ngẫu nhiên
105 |
106 | Lấy lại mảng cũ
107 |
108 | Sắp xếp
109 |
110 |
111 |
112 |
114 |
115 |
116 |
117 |
118 |
119 |
120 | Trạng thái:
122 |
123 | So sánh:
124 |
125 | Hoán vị:
126 |
127 | Truy cập mảng:
128 |
129 |
130 |
133 |
137 |
138 |
139 |
140 |
142 |
143 |
144 |
145 |
147 |
148 |
149 |
150 |
151 |
152 |
175 |
l.reach&&(l.reach=N);var j=m.prev;O&&(j=I(t,j,O),y+=O.length),q(t,j,x);var C=new W(o,g?M.tokenize(S,g):S,d,S);if(m=I(t,j,C),L&&I(t,m,L),1l.reach&&(l.reach=_.reach)}}}}}}(e,a,n,a.head,0),function(e){var n=[],t=e.head.next;for(;t!==e.tail;)n.push(t.value),t=t.next;return n}(a)},hooks:{all:{},add:function(e,n){var t=M.hooks.all;t[e]=t[e]||[],t[e].push(n)},run:function(e,n){var t=M.hooks.all[e];if(t&&t.length)for(var r,a=0;r=t[a++];)r(n)}},Token:W};function W(e,n,t,r){this.type=e,this.content=n,this.alias=t,this.length=0|(r||"").length}function z(e,n,t,r){e.lastIndex=n;var a=e.exec(t);if(a&&r&&a[1]){var i=a[1].length;a.index+=i,a[0]=a[0].slice(i)}return a}function i(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function I(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function q(e,n,t){for(var r=n.next,a=0;a"+a.content+""},!u.document)return u.addEventListener&&(M.disableWorkerMessageHandler||u.addEventListener("message",function(e){var n=JSON.parse(e.data),t=n.language,r=n.code,a=n.immediateClose;u.postMessage(M.highlight(r,M.languages[t],t)),a&&u.close()},!1)),M;var t=M.util.currentScript();function r(){M.manual||M.highlightAll()}if(t&&(M.filename=t.src,t.hasAttribute("data-manual")&&(M.manual=!0)),!M.manual){var a=document.readyState;"loading"===a||"interactive"===a&&t&&t.defer?document.addEventListener("DOMContentLoaded",r):window.requestAnimationFrame?window.requestAnimationFrame(r):window.setTimeout(r,16)}return M}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
4 | Prism.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/,name:/[^\s<>'"]+/}},cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^$/i;var t={"included-cdata":{pattern://i,inside:s}};t["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var n={};n[a]={pattern:RegExp("(<__[^>]*>)(?:))*\\]\\]>|(?!)".replace(/__/g,function(){return a}),"i"),lookbehind:!0,greedy:!0,inside:t},Prism.languages.insertBefore("markup","cdata",n)}}),Object.defineProperty(Prism.languages.markup.tag,"addAttribute",{value:function(a,e){Prism.languages.markup.tag.inside["special-attr"].push({pattern:RegExp("(^|[\"'\\s])(?:"+a+")\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))","i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[e,"language-"+e],inside:Prism.languages[e]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml;
5 | !function(s){var e=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+e.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+e.source+"$"),alias:"url"}}},selector:RegExp("[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+e.source+")*(?=\\s*\\{)"),string:{pattern:e,greedy:!0},property:/(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,important:/!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),t.tag.addAttribute("style","css"))}(Prism);
6 | Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|interface|extends|implements|trait|instanceof|new)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/};
7 | Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:prototype|constructor))/,lookbehind:!0}],keyword:[{pattern:/((?:^|})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:/\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-flags":/[a-z]+$/,"regex-delimiter":/^\/|\/$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\${)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\${|}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)","javascript")),Prism.languages.js=Prism.languages.javascript;
8 |
--------------------------------------------------------------------------------
71 | 
213 | 
219 | 
183 | 
242 |