Skip to content
Snippets Groups Projects
Commit b44e4f24 authored by Martin Mille's avatar Martin Mille
Browse files

partie a et b

parent aead731d
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
.babelrc
+ 2
− 1
View file @ b44e4f24
{ {
"presets": ["@babel/env"] "presets": ["@babel/env"],
"plugins": ["@babel/plugin-proposal-class-properties"]
} }
\ No newline at end of file
.prettierrc 0 → 100644
+ 7
− 0
View file @ b44e4f24
{
"singleQuote": true,
"trailingComma": "es5",
"endOfLine": "lf",
"useTabs": true,
"arrowParens": "avoid"
}
.vscode/settings.json 0 → 100644
+ 6
− 0
View file @ b44e4f24
{
"[javascript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
package-lock.json
+ 6
− 0
View file @ b44e4f24
...@@ -2433,6 +2433,12 @@ ...@@ -2433,6 +2433,12 @@
"dev": true, "dev": true,
"optional": true "optional": true
}, },
"prettier": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz",
"integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==",
"dev": true
},
"process-nextick-args": { "process-nextick-args": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
......
package.json
+ 6
− 2
View file @ b44e4f24
...@@ -4,14 +4,18 @@ ...@@ -4,14 +4,18 @@
"description": "", "description": "",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d build",
"watch" : "babel src -d build --verbose --watch --source-maps"
}, },
"author": "Thomas Fritsch <thomas.fritsch@univ-lille.fr> (https://gitlab.univ-lille.fr/thomas.fritsch)", "author": "Thomas Fritsch <thomas.fritsch@univ-lille.fr> (https://gitlab.univ-lille.fr/thomas.fritsch)",
"homepage": "https://gitlab.univ-lille.fr/js", "homepage": "https://gitlab.univ-lille.fr/js",
"license": "ISC", "license": "ISC",
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.12.10", "@babel/cli": "^7.12.10",
"@babel/core": "^7.12.10", "@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11" "@babel/preset-env": "^7.12.11",
"prettier": "^2.2.1"
} }
} }
src/main.js
+ 46
− 106
View file @ b44e4f24
// D. Manipulation des chaînes class Component {
tagName;
children;
attribute;
constructor(tagName, attribute, children) {
this.tagName = tagName;
this.attribute = attribute;
this.children = children;
}
// const name = 'Regina'; render() {
// const url = `images/${name.toLowerCase()}.jpg`; if (this.attribute != null) {
// const html = ` return `<${this.tagName} ${this.renderAttribute()} /> `;
// <article class="pizzaThumbnail"> }
// <a href="${url}"> if (this.children != null || this.children != undefined) {
// <img src="${url}" /> return `<${this.tagName}> ${this.children} </${this.tagName}>`;
// <section>${name}</section> } else {
// </a> return '<' + this.tagName + '/>';
// </article> }
// `; }
// document.querySelector('.pageContent').innerHTML = html;
// // E.1. Manipulation des tableaux renderAttribute() {
// let data = [ 'Regina', 'Napolitaine', 'Spicy' ]; return `${this.attribute.name}="${this.attribute.value}"`;
// html = ''; }
// // E.1. boucle for : }
// for (let i = 0; i < data.length; i++) {
// const nom = data[i],
// url = `images/${nom.toLowerCase()}.jpg`;
// html += `<article class="pizzaThumbnail">
// <a href="${url}">
// <img src="${url}" />
// <section>${nom}</section>
// </a>
// </article>`;
// }
// document.querySelector('.pageContent').innerHTML = html;
// E.1. Array.forEach : class Img extends Component {
// html = ''; constructor(valeur) {
// data.forEach( nom => { super('img', { name: 'src', value: valeur }, null);
// const url = `images/${nom.toLowerCase()}.jpg`; }
// html += `<a href="${url}"> }
// <img src="${url}" />
// <h4>${nom}</h4>
// </a>`;
// })
// document.querySelector('.pageContent').innerHTML = html;
// // E.1. Array.map + Array.join : const title = new Component('h1', null, 'La carte');
// html = data.map( nom => `<a href="images/${nom.toLowerCase()}.jpg"> document.querySelector('.pageTitle').innerHTML = title.render();
// <img src="images/${nom.toLowerCase()}.jpg" />
// <h4>${nom}</h4>
// </a>`).join('');
// document.querySelector('.pageContent').innerHTML = html;
// // E.1. Array.reduce : /*const img = new Component('img', {
// html = data.reduce( (str, nom) => str+`<a href="images/${nom.toLowerCase()}.jpg"> name: 'src',
// <img src="images/${nom.toLowerCase()}.jpg" /> value:
// <h4>${nom}</h4> 'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300',
// </a>`,''); }); */
// document.querySelector('.pageContent').innerHTML = html; const img = new Img(
'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
);
document.querySelector('.pageContent').innerHTML = img.render();
// E.2. Les objets littéraux
const data = [ const data = [
{ {
name: 'Regina', name: 'Regina',
base: 'tomate', base: 'tomate',
price_small: 6.5, price_small: 6.5,
price_large: 9.95, price_large: 9.95,
image: 'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300' image:
'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300',
}, },
{ {
name: 'Napolitaine', name: 'Napolitaine',
base: 'tomate', base: 'tomate',
price_small: 6.5, price_small: 6.5,
price_large: 8.95, price_large: 8.95,
image: 'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300' image:
'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300',
}, },
{ {
name: 'Spicy', name: 'Spicy',
base: 'crème', base: 'crème',
price_small: 5.5, price_small: 5.5,
price_large: 8, price_large: 8,
image: 'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300', image:
} 'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300',
},
]; ];
function render(pizzas) {
const html = pizzas.reduce( (str, {image, name, price_small, price_large}) => str +
`<article class="pizzaThumbnail">
<a href="${image}">
<img src="${image}" />
<section>
<h4>${name}</h4>
<ul>
<li>Prix petit format : ${price_small.toFixed(2)} €</li>
<li>Prix grand format : ${price_large.toFixed(2)} €</li>
</ul>
</section>
</a>
</article>`, '');
document.querySelector('.pageContent').innerHTML = html;
}
// G.1. Tri de tableaux
function sortByName(a, b) {
if ( a.name < b.name ) {
return -1;
} else if ( a.name > b.name ) {
return 1;
}
return 0;
}
// tri par price_small croissant PUIS par price_large croissant
function sortByPrice(a, b) {
if ( a.price_small !== b.price_small ) {
return a.price_small - b.price_small;
}
return a.price_large - b.price_large;
}
// // Attention : data.sort() modifie le tableau original
render( data );
// render( data.sort(sortByName) );
// render( data.sort(sortByPrice) );
// // G.2. Système de filtre
// render( data.filter( pizza => pizza.base == 'tomate' ))
// render( data.filter( pizza => pizza.price_small < 6 ))
// // deux possibilités pour les pizzas avec deux fois la lettre "i"
// render( data.filter( pizza => pizza.name.split('i').length == 3 ))
// render( data.filter( pizza => pizza.name.match(/i/g).length == 2 ))
// // G.3. Destructuring
// render( data.filter( ({base}) => base == 'tomate' ))
// render( data.filter( ({price_small}) => price_small < 6 ))
// render( data.filter( ({name}) => name.match(/i/g).length === 2 ));
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment