ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new class js -advanced

Browse Source
This commit is contained in:
Philippe Torrel
2026-06-29 11:35:03 +02:00
parent ee8a87bf2a
commit 31c13250b0
104 changed files with 2632 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
02_advanced/MATERIAL/advanced-js/lesson_07/examples/data/products.csv Normal file
View File

@@ -0,0 +1,9 @@
Code,Short Description,Tagline,Quantity,Price
MUG0007,coffee mug with LCD level indicator,never again reach for the empty mug,20,49.90
MUG0013,coffee mug with bluetooth-connected coffee grounds scanner for automatized fortune telling,put the smart into coffee reading,20,99.90
OFF3145,pen with pre-warmed ink (tested on the South Pole),the pen is mightier than the cold,50,29.90
COM1001,ambidextrous computer mouse,end the dictate of left and right,10,19.90
COM0404,Easter egg themed webcam for your monitor,put an Easter egg on hardware too,20,149.90
COM0001,Vulcan language vi cheatsheet,learn vi and Vulcan at the same time,3,9.90
COM1536,Klingon language emacs cheatsheet,learn emacs and Klingon at the same time,50,9.90
MOB0555,smartphone case with built-in screen,never miss a message,20,39.90
1 Code Short Description Tagline Quantity Price
2 MUG0007 coffee mug with LCD level indicator never again reach for the empty mug 20 49.90
3 MUG0013 coffee mug with bluetooth-connected coffee grounds scanner for automatized fortune telling put the smart into coffee reading 20 99.90
4 OFF3145 pen with pre-warmed ink (tested on the South Pole) the pen is mightier than the cold 50 29.90
5 COM1001 ambidextrous computer mouse end the dictate of left and right 10 19.90
6 COM0404 Easter egg themed webcam for your monitor put an Easter egg on hardware too 20 149.90
7 COM0001 Vulcan language vi cheatsheet learn vi and Vulcan at the same time 3 9.90
8 COM1536 Klingon language emacs cheatsheet learn emacs and Klingon at the same time 50 9.90
9 MOB0555 smartphone case with built-in screen never miss a message 20 39.90

61
02_advanced/MATERIAL/advanced-js/lesson_07/examples/data/products.html Normal file
View File

@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Products</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<ul class="list-group">
<li class="list-group-item">
<h2>coffee mug with LCD level indicator</h2>
<p>never again reach for the empty mug</p>
<p><strong>Price:</strong> EUR 49.90</p>
</li><li class="list-group-item">
<h2>coffee mug with bluetooth-connected coffee grounds scanner for automatized fortune telling</h2>
<p>put the smart into coffee reading</p>
<p><strong>Price:</strong> EUR 99.90</p>
</li><li class="list-group-item">
<h2>pen with pre-warmed ink (tested on the South Pole)</h2>
<p>the pen is mightier than the cold</p>
<p><strong>Price:</strong> EUR 29.90</p>
</li><li class="list-group-item">
<h2>ambidextrous computer mouse</h2>
<p>end the dictate of left and right</p>
<p><strong>Price:</strong> EUR 19.90</p>
</li><li class="list-group-item">
<h2>Easter egg themed webcam for your monitor</h2>
<p>put an Easter egg on hardware too</p>
<p><strong>Price:</strong> EUR 149.90</p>
</li><li class="list-group-item">
<h2>Vulcan language vi cheatsheet</h2>
<p>learn vi and Vulcan at the same time</p>
<p><strong>Price:</strong> EUR 9.90</p>
<p class="alert alert-warning">Last items in stock!</p>
</li><li class="list-group-item">
<h2>Klingon language emacs cheatsheet</h2>
<p>learn emacs and Klingon at the same time</p>
<p><strong>Price:</strong> EUR 9.90</p>
</li><li class="list-group-item">
<h2>smartphone case with built-in screen</h2>
<p>never miss a message</p>
<p><strong>Price:</strong> EUR 39.90</p>
</li>
</ul></div>
</main>
<script>
'use strict';
</script>
</body>
</html>

BIN
02_advanced/MATERIAL/advanced-js/lesson_07/examples/data/products.html.gz Normal file
View File

Binary file not shown.

10
02_advanced/MATERIAL/advanced-js/lesson_07/examples/products_async_busy.js Normal file
View File

@@ -0,0 +1,10 @@
const fs = require('fs');
fs.readFile('data/products.csv', 'UTF8', (error, data) => {
console.log(data); // 2 output
});
for (let i = 0; i < 2000000000; i++) {
// be busy for a few seconds
}
console.log('ready'); // 1 output

32
02_advanced/MATERIAL/advanced-js/lesson_07/examples/products_to_html.js Normal file
View File

@@ -0,0 +1,32 @@
const fs = require('fs');
const data = fs.readFileSync('data/products.csv', 'UTF8');
const STOCK_WARN_AMOUNT = 5;
const products = data.split('\n');
products.shift(); // remove header
const recordToHTML = (record) => {
const fields = record.split(',');
const html = `<li class="list-group-item">
<h2>${fields[1]}</h2>
<p>${fields[2]}</p>
<p><strong>Price:</strong> EUR ${fields[4]}</p>
${
Number(fields[3]) <= STOCK_WARN_AMOUNT
? '<p class="alert alert-warning">Last items in stock!</p>'
: ''
}
</li>`;
return html;
};
const entries = products.filter((row) => row !== '').map(recordToHTML);
console.log('<ul class="list-group">');
entries.forEach((entry) => console.log(entry));
console.log('</ul>');
console.log('ready');

39
02_advanced/MATERIAL/advanced-js/lesson_07/examples/products_to_html_async.js Normal file
View File

@@ -0,0 +1,39 @@
const fs = require('fs');
const STOCK_WARN_AMOUNT = 5;
// Function to convert a CSV record to HTML
const recordToHTML = (record) => {
const fields = record.split(',');
const html = `<li class="list-group-item">
<h2>${fields[1]}</h2>
<p>${fields[2]}</p>
<p><strong>Price:</strong> EUR ${fields[4]}</p>
${
Number(fields[3]) <= STOCK_WARN_AMOUNT
? '<p class="alert alert-warning">Last items in stock!</p>'
: ''
}
</li>`;
return html;
};
// Asynchronous version
fs.readFile('data/products.csv', 'UTF8', (err, data) => {
if (err) {
console.error(err);
return;
}
const products = data.split('\n');
products.shift(); // remove header
const entries = products.filter((row) => row !== '').map(recordToHTML);
console.log('<ul class="list-group">');
entries.forEach((entry) => console.log(entry));
console.log('</ul>');
console.log('ready');
});

5
02_advanced/MATERIAL/advanced-js/lesson_07/examples/read_products.js Normal file
View File

@@ -0,0 +1,5 @@
const fs = require('fs'); // commonjs
const data = fs.readFileSync('data/products.csv', 'utf-8');
console.log(data);

34
02_advanced/MATERIAL/advanced-js/lesson_07/solutions/mixedCSV/solution_1.js Normal file
View File

@@ -0,0 +1,34 @@
// some, but not all fields are quoted - solution 1
const mixedCSV =
'"very big, soft computer mouse","the cutest peripheral ever",10,39.90';
let fields = [];
let index = 0;
let state = 'outside';
mixedCSV.split('').forEach((char) => {
if (state === 'quoted') {
fields[index] += char; // => [",v,e,r,y..."]
if (char === '"') {
state = 'outside';
index += 1;
}
} else if (state === 'unquoted') {
if (char === ',') {
state = 'outside';
index += 1;
} else {
fields[index] += char;
}
} else if (state === 'outside') {
fields[index] = char; //=> [",...
if (char === '"') {
state = 'quoted';
} else if (char !== ',') {
state = 'unquoted';
}
}
});
console.log(fields);

28
02_advanced/MATERIAL/advanced-js/lesson_07/solutions/mixedCSV/solution_2.js Normal file
View File

@@ -0,0 +1,28 @@
// some, but not all fields are quoted - solution 2/2
const mixedCSV =
'"very big, soft computer mouse",' + '"the cutest peripheral ever",10,39.90';
let fields = [];
const mixedCSVToArray = (s) =>
findCommaPositions(',' + s + ',')
.map((position, i, positions) => s.slice(position, positions[i + 1] - 1))
.slice(0, -1);
const findCommaPositions = (s) =>
s
.split('')
.reduce(
(positions, char, position) =>
char === ',' && isEven(countQuotes(s.slice(0, position)))
? positions.concat(position)
: positions,
[]
);
const countQuotes = (s) => s.split('').filter((c) => c === '"').length;
const isEven = (num) => num % 2 === 0;
console.log(mixedCSVToArray(mixedCSV));

7
02_advanced/MATERIAL/advanced-js/lesson_07/solutions/quotedCSV/index.js Normal file
View File

@@ -0,0 +1,7 @@
// all fields are quoted
const quotedCSV =
'"very big, soft computer mouse","the cutest peripheral ever","10","39.90"';
const fields = quotedCSV.split('","');
console.log(fields);