Journal d'un Terrien

Web log de Serge Boisse

On line depuis 1992 !

Si cette page vous a plu, Copiez son adresse et partagez-la !
http://sboisse.free.fr/programmation/languages/javascript/javascript.php

Savez-vous quels sont les articles les plus vendus sur Amazon.fr ?

Bricolage Hygiène santé Mode Beauté Maison Sport et loisirs Livres Gadgets

javascript

programmation > languages > javascript > javascript

Trucs et astuces javascript

Petite liste d'astuces
Pasted image 20230126180130.jpg

console.log('tr' + new Array(100).join('o') + 'p bien 😅'); ## essayez ça !

Voir aussi :

Dans cette page :

astuces javascript
structures
modules
La console javascript
Javascript et HTML
JS et obsidian

astuces javascript

références

cf Liste de tutos web sur javascript

range (comme en Python)

cf https://www.freecodecamp.org/news/javascript-range-create-an-array-of-numbers-with-the-from-method/

const arrayRange = (start, stop, step=1) =>
    Array.from(
    { length: (stop - start) / step + 1 },
    (value, index) => start + index * step
    );

console.log(arrayRange(1, 5)); // [1,2,3,4,5]

autres méthodes de tableaux

cf 9 Méthodes de tableaux à connaitre en Javascript (video Youtube)

indexOf
findIndex
some -> booléen
every -> booléen
find -> booléen
filter -> sous-tableau
map -> nouveau tableau à partir de certains éléments et d'autres.
sort -> tableau
reduce -> number

convertir un entier (ou un réel !) en chaîne binaire

exemple avec 2/7 :

0.01001001001001001001001001001001001001001001001001001

Vous pouvez utiliser la fonction Number.toString(2), mais elle présente quelques problèmes lors de la représentation de nombres négatifs. Par exemple, le résultat de (-1).toString(2) est "-1".

Pour résoudre ce problème, vous pouvez utiliser l'opérateur binaire de décalage à droite non signé (>>>) pour convertir votre nombre en un entier non signé.

Encore plus simple : (dec).toString(2). Les () servent à caster la chaîne en entier, ce qui est nécessaire pour que toString(2) marche.

dec = -123;
console.log((dec).toString(2))

cf créneaux et briques

un exemple avec CustomJS

cf test CustomJS(lien privé) (ATTENTION : plugin DESACTIVE)

Que signifie une fonction dont le nom est préfixé par "!" ?

!function () {}();

La réponse ICI (page web)

Et aussi :

!0 == true
!1 == false

l'opérateur "??"

Ca s'appelle le Nullish coalescing operator (page web)
l'expression A ?? B est un cas particulier de A || B
en effet A || B vaut B si A est une valeur "falsy" comme false, 0,'',undefined,null, NaN
Alors que A ?? B vaut B uniquement si A est null ou undefined. (sinon B n'est pas évalué)

structures

tree (arbre)

On en trouvera une implémentation remarquable ICI : # JavaScript Data Structures - Tree (page web)

Yield et les fonction génératrices

En fait il existe deux mots-clefs yield et yield*
cf https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/yield
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/yield*
Ceci permet de créer facilement une implémentation javascript de prolog. Il faut avouer que cela reste assez abstrus et abscons, mais le tuto ci-dessous est assez simple à suivre.
fonctions génératrices et yield

modules

maths.js

Ce module ne permet pas seulement d'évaluer des fonctions mathématiques, il contient aussi un parser
voir la doc https://mathjs.org/docs/index.html

modules et import JSON

L'erreur cannot use the import statement outside a module. Il s'agit d'une erreur standard lorsque l'on essaie d'utiliser l'instruction import dans un fichier JavaScript ordinaire.

Pour résoudre ce problème, nous pouvons ajouter la balise de script type="module" dans notre fichier HTML où nous avons référencé le fichier JavaScript, comme ceci :

<html lang="en">
    // ...
    <body>
        <script type="module" src="./index.js"></script>
    </body>
</html>

On obtient alors une autre erreur :
Pasted image 20221214135344.png

Pour corriger cette erreur, il faut ajouter le type de fichier JSON à l'instruction d'importation, et nous serons alors en mesure de lire notre fichier JSON en JavaScript :

import data from './data.json' assert { type: 'JSON' };
console.log(data);

Cela fonctionne parfaitement tant que nous exécutons nos fichiers sur un serveur local ou distant. Mais si nous l'exécutons localement, nous obtiendrons l'erreur CORS. 😡

Pasted image 20221214135619.png

Et là pas grand chose à faire sinon utiliser un serveur web local comme Wampserver

Sinon l'alternative est d'utiliser l'API fetch :

<!--./index.js-->

fetch('https://server.com/data.json')
    .then((response) => response.json())
    .then((json) => console.log(json));

La console javascript

(ctrl-shift-i) pour appeler le débogueur de Chrome. (dans Obsidian aussi)

on connait bien console.log(string ou objet) mais il y a aussi console.table(data [,colonnes]) . l'argument doit être un array ou un objet. il affiche data sous la forme d'un tableau. Chaque élément dans le tableau fourni (Array) sera affiché comme une ligne dans le tableau. (ou les propriétés énumérables s'il s'agit d'un objet).

cf Console.table (page web)

Enfin, pour tout savoir sur la console : Javascript: les méthodes de console (log, trace, table, …) (video Youtube)
En particulier c'est en regardant cette video que j'ai appris l'existence de console.group("nom du groupe") et console.groupEnd() ainsi que console.time("nom du timer") plus console.timeEnd("même nom") sans oublier console.trace() !
#debugging

Enfin, il est possible dans Chrome (et d'autres) d'appeler la console depuis le code js. Il suffit d'inclure l'instruction debugger;cela créera un breakpoint à cet endroit. On peut aussi utiliser setTimeout(function(){debugger;}, 3000); Et même debug(function) fera une pause si la fonction est appelée (Chrome seulement)
voir https://stackoverflow.com/questions/10050465/how-to-set-a-javascript-breakpoint-from-code-in-chrome et https://andrijac.github.io/blog/2014/01/31/javascript-breakpoint/

exemples de console.table et console.dir


// un tableau d'objets

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");

console.log("log");
console.table([john, jane, emily]);
console.log("dir");
console.dir([john, jane, emily]);

Javascript et HTML

récupérer le texte d'un élément : textContent vs innerHTML

textContent n'est pas tout à fait la même chose que innerHTML car avec textContent le texte n'est pas analysé en HTML. Donc meilleure performance et sécurité.

<a onclick = "alert(this.textContent)" >bonjour</a>

récupérer le texte html d'une page web

cf https://stackoverflow.com/questions/26219180/download-current-html-file

récupérer les gestionnaires d'évènements (event listeners) d'un élément crée dynamiquement

cf # Listing active event listeners on a Web page (page web)

et aussi le .on(..) de jquery qui st vraiment magique.

JS et obsidian

Lancer du JS dans Obsidian

Le code js est automatiquement colorisé par Obsidian :

function toto(arg1) {
	console.log("coucou "+arg1);
}
toto("serge")

On peut faire tourner du js dans obsidian avec les plugins

Templater ou
CustomJS (que j'ai désactivé) ou surtout
DataviewJS (qui permet de créer des elements HTML dans la note, relancé à chaque modif de la note)
obsidian-execute-code (qui propose un bouton "run" et redirige la console vers un élément après le bloc)
ou Obsidian-runjs
ou obsidian-js-engine qui permet de rendre du markdown (mais pas mathjax.. SI ! mais il faut escaper les backslashes)
ou Obsidian Code Emitter
ou Obsidian run

mes projets javascript

Sur disque :
javascript (Répertoire sur D)(lien privé)

mes Notes avec le tag ou type javascript ou js

Commentaires

Commentaires (0) :

Page :

Ajouter un commentaire (pas besoin de s'enregistrer)

En cliquant sur le bouton "Envoyer" vous acceptez les conditions suivantes : Ne pas poster de message injurieux, obscène ou contraire à la loi, ni de liens vers de tels sites. Respecter la "netiquette", ne pas usurper le pseudo d'une autre personne, respecter les posts faits par les autres. L'auteur du site se réserve le droit de supprimer un ou plusieurs posts à tout moment. Merci !
Ah oui : le bbcode et le html genre <br>, <a href=...>, <b>b etc. ne fonctionnent pas dans les commentaires. C'est voulu.

< Retour en haut de la page