Différences

Ci-dessous, les différences entre deux révisions de la page.

--- informatique:javascript [24/11/2024 12:38] – [Browser Detection and Cross Browser Support] cyrille
+++ informatique:javascript [11/06/2025 16:54] (Version actuelle) – ↷ Liens modifiés en raison d'un déplacement. 114.119.143.104
@@ Ligne 15: / Ligne 15: @@
       * [[http://dean.edwards.name/weblog/2009/03/callbacks-vs-events/|Callbacks vs Events]] well presents the difference
       * [[https://jsperf.com/event-vs-callback|performance test]]
-  * [[https://developers.google.com/web/fundamentals/primers/promises/?hl=en#promise-terminology|About Promise]] et sur la page [[https://cyrille.giquello.fr/informatique/javascript/jquery|jquery]] (promise, deferred)
 News, listes d'outils et librairies :
@@ Ligne 25: / Ligne 24: @@
  - JavaScript performance playground: jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.
+===== Syntaxe =====
+Il y a plein d'évolutions de la syntaxe ...
+  * https://dev.to/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa
+**Template Literals**:
+<code javascript>
+const name = "Alice";
+const greeting = `Hello, ${name}!
+Welcome to JavaScript tips!`;
+console.log(greeting);
+</code>
+**The Spread Operator**:
+<code javascript>
+const arr1 = [1, 2];
+const arr2 = [3, 4];
+const combined = [...arr1, ...arr2]; // [1, 2, 3, 4]
+const user = { name: "Alice", age: 25 };
+const updatedUser = { ...user, age: 26 }; // { name: "Alice", age: 26 }
+</code>
+**Short-Circuit Evaluation**:
+<code javascript>
+const isLoggedIn = true;
+const welcomeMessage = isLoggedIn && "Welcome back!";
+console.log(welcomeMessage); // Output: Welcome back!
+const username = null;
+const displayName = username || "Guest";
+console.log(displayName); // Output: Guest
+</code>
+or **Use ||= Operator for Default Assignment**
+<code javascript>
+let count;
+count ||= 10;
+console.log(count); // 10
+</code>
+**Destructuring**:
+<code javascript>
+// Before destructuring
+const user = { name: "Alice", age: 25 };
+const name = user.name;
+const age = user.age;
+// Using destructuring
+const { name, age } = user;
+console.log(name, age); // Output: Alice 25
+</code>
+**Optional Chaining for Safer Access**:
+<code javascript>
+const user = { profile: { email: "user@example.com" } };
+console.log(user?.profile?.email); // Output: user@example.com
+console.log(user?.settings?.theme); // Output: undefined (no error)
+</code>
+**Default Parameters**:
+<code javascript>
+function greet(name = "Guest") {
+  return `Hello, ${name}!`;
+}
+console.log(greet()); // Output: Hello, Guest!
+console.log(greet("Alice")); // Output: Hello, Alice!
+</code>
+**Array Methods: Map, Filter, and Reduce**:
+<code javascript>
+const numbers = [1, 2, 3, 4];
+// Transform each element with map
+const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8]
+// Filter elements based on a condition
+const evens = numbers.filter(num => num % 2 === 0); // [2, 4]
+// Aggregate values with reduce
+const sum = numbers.reduce((acc, num) => acc + num, 0); // 10
+</code>
+More tips:
+  * https://dev.to/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa
+  * https://dev.to/jagroop2001/20-javascript-tricks-every-developer-must-know-4pcj
 ===== Tools =====
@@ Ligne 45: / Ligne 143: @@
 http://getcontenttools.com/
+==== BlockNote ====
+https://www.blocknotejs.org/
+https://github.com/TypeCellOS/BlockNote
 ==== markItUp! ====
@@ Ligne 424: / Ligne 528: @@
 Voir aussi:
-  * [[/informatique/php/laravel#vuejs|Laravel & Vue.js]]
+  * UI Suite for Vue.js https://primevue.org compliant with [[/glossaire/WCAG|WCAG 2.0]], 80+ components
+  * [[informatique:php:laravel_1#vuejs|Laravel & Vue.js]]
   * collection de scripts et plugins : http://www.vuescript.com
   * [[https://vuetifyjs.com/|vuetify.js]] is a semantic component framework for Vue.js 2. It aims to provide clean, semantic and reusable components that make building your application a breeze. Vuetify.js uses Google's Material Design design pattern, taking cues from other popular frameworks such as Materialize.css, Material Design Lite, Semantic UI and Bootstrap 4.
@@ Ligne 796: / Ligne 901: @@
 ==== Promise ====
+Sur la page [[/informatique/javascript/jquery|jquery]] (promise, deferred)
   * [[https://dev.to/kishan45/callbacks-vs-promises-vs-asyncawait-detailed-comparison-42np|Callbacks vs. Promises vs. Async/Await: Detailed Comparison]]
   * [[https://dev.to/afifsohaili/dealing-with-promises-in-an-array-with-async-await-5d7g|Dealing with Promises In an Array with async/await]]
+  * [[https://developers.google.com/web/fundamentals/primers/promises/?hl=en#promise-terminology|About Promise]]
 ==== WebSockets ====
@@ Ligne 876: / Ligne 986: @@
     });
 </code>
+=== shallow copy deep copy ===
+Shallow Copy ne copie pas les valeurs références, alors qu'une Deep Coopy créée de nouveaux objets pour les valeurs (autres que scalaires).
+Shallow copy:
+<code javascript>
+// Using the Spread Operator (...):
+const shallowCopy = { ...originalObject };
+// Using Object.assign():
+const shallowCopy = Object.assign({}, originalObject);
+</code>
+Deep copy:
+<code javascript>
+const deepCopy = JSON.parse(JSON.stringify(original));
+</code>
+  * https://dev.to/hkp22/javascript-shallow-copy-vs-deep-copy-examples-and-best-practices-3k0a