diff --git a/assets/js/base.js b/assets/js/base.js index 3fcf4cfa30098fc3cd11ef8f54b7dde6fae4a988..44fb72729c507fe7888195a2ce288f57343786ec 100644 --- a/assets/js/base.js +++ b/assets/js/base.js @@ -1,50 +1,101 @@ // Variable -var variable = '' -const constante = '' -let variableScoped = '' +var variable = ''; +const constante = ''; +let variableScoped = ''; // Types primaires -let string = '' -let number = 0 -let boolean = true +let string = ''; +let number = 0; +let boolean = true; -let array = ['JohnDoe', 'JaneDoe'] +let array = ['JohnDoe', 'JaneDoe']; let object = { - username: '' -} + username: '', +}; // N.B. les tableaux et les objets sont passés par référence const user = { - username: 'JohnDoe' -} -const user2 = user -user2.username = 'JaneDoe' + username: 'JohnDoe', +}; +const user2 = user; +user2.username = 'JaneDoe'; console.log(user.username); // Solution -const user3 = {...user} -const array2 = [...array] +const user3 = { ...user }; +const array2 = [...array]; // Fonctions console.log(add(1, 2)); -function add(nb1, nb2) { - return nb1 + nb2 +function add (nb1, nb2) { + return nb1 + nb2; } // Fonction anonymes // Fonction anonyme simple const add2 = function (nb1, nb2) { - return nb1 + nb2 -} + return nb1 + nb2; +}; // Fonction anonyme fléchée -const add3 = (nb1, nb2) => nb1 + nb2 +const add3 = (nb1, nb2) => nb1 + nb2; /* Fonction fléchées spécificités 1. Return implicite 2. Pas de this (pas très utile quand on débute) */ + +// Destructuring d'objet +const newUser = { + username: 'username', + firstName: 'John', + lastName: 'Doe', + address: { + path: 'Main St', + number: 123, + city: 'Springfield', + zipcode: '12345', + }, +}; +const newUser2 = { + username: 'username2', + firstName: 'Jane', + lastName: 'Doe', + address: null, +}; + +const {lastName, firstName, username} = newUser +console.log(lastName, firstName, username); + +const users = [ + { + id: 1, + username: 'naruto' + }, + { + id: 2, + username: 'sasuke' + }, + { + id: 3, + username: 'sakura' + }, +] + +const usersId = users.map(({ id }) => id) + +// Facultative chaining +const newUsers = [newUser, newUser2]; +const addressNumbers = newUsers.map((user) => user.address?.number ?? -1); +console.log(addressNumbers); + +document.querySelector('footer') + ?.addEventListener('click', () => { + console.log('ici'); + }); + +console.log('apres'); \ No newline at end of file diff --git a/assets/js/getRecipe.js b/assets/js/getRecipe.js index d18555c75a7901239fd6d7eca41660a92ce3b153..1512a8a67e5c86fbae0212e946c1dc1091f19b17 100644 --- a/assets/js/getRecipe.js +++ b/assets/js/getRecipe.js @@ -1,33 +1,33 @@ /** -fetch('http://localhost:8000/api/recipes/detail.php?id=1') - .then((response) => { - return response.json() - }) - .then((data) => { - console.log(data); - }) -**/ + fetch('http://localhost:8000/api/recipes/detail.php?id=1') + .then((response) => { + return response.json() + }) + .then((data) => { + console.log(data); + }) + **/ // async function loadData(){} const loadData = async () => { - const url = new URLSearchParams(window.location.search) - const response = await fetch(`http://localhost:8000/api/recipes/detail.php?id=${url.get('id')}`) - const data = await response.json() + const url = new URLSearchParams(window.location.search); + const response = await fetch(`http://localhost:8000/api/recipes/detail.php?id=${url.get('id')}`); + const data = await response.json(); - const main = document.querySelector('main') + const main = document.querySelector('main'); - const title = document.createElement('h1') - title.textContent = data.title - main.appendChild(title) + const title = document.createElement('h1'); + title.textContent = data.title; + main.appendChild(title); - const img = document.createElement('img') - img.src = `/assets/img/${data.thumbnail}` - main.insertAdjacentElement('beforeend', img) + const img = document.createElement('img'); + img.src = `/assets/img/${data.thumbnail}`; + main.insertAdjacentElement('beforeend', img); - const p = document.createElement('p') - p.innerText = data.description - main.appendChild(p) -} + const p = document.createElement('p'); + p.innerText = data.description; + main.appendChild(p); +}; -loadData() \ No newline at end of file +loadData(); \ No newline at end of file