Plan de cours JS/TW5

Bonsoir @delta
Il faut un champ module-type: macro

(function(){
exports.name = "HelloWorld";
exports.params = [{name: "word"}];
exports.run = function(word) {
	return "Hello World! "+word;
};
})();

à utiliser comme ça :
<<HelloWorld delta>>

Enjoy!

Je ne pensais pas à ça.

Mais si on crée un “helloworld” en javascript par exemple :

<script>alert("HelloWorld");</script>

qui fonctionne très bien quand on copie-colle dans un fichier txt (ensuite renommé en html), comment on peut l’intégrer tel quel dans un TW ?

Si on arrive à faire cette manipulation on peut intégrer n’importe quel script dans TW ce qui ouvrirais de nombreuse possibilité.

Exemple avec ce fameux code :

`

.<script>
eval(z='p="<"+"pre>"/* ,.oq#+     ,._, */;for(y in n="zw24l6k\
4e3t4jnt4qj24xh2 x/* =<,m#F^    A W###q. */42kty24wrt413n243n\
9h243pdxt41csb yz/* #K       q##H######Am */43iyb6k43pk7243nm\
r24".split(4)){/* dP      cpq#q##########b, */for(a in t=pars\
eInt(n[y],36)+/*         p##@###YG=[#######y */(e=x=r=[]))for\
(r=!r,i=0;t[a/*         d#qg `*PWo##q#######D */]>i;i+=.05)wi\
th(Math)x-= /*        aem1k.com Q###KWR#### W[ */.05,0<cos(o=\
new Date/1e3/*      .Q#########Md#.###OP  A@ , */-x/PI)&&(e[~\
~(32*sin(o)*/* ,    (W#####Xx######.P^     T % */sin(.5+y/7))\
+60] =-~ r);/* #y    `^TqW####P###BP           */for(x=0;122>\
x;)p+="   *#"/* b.        OQ####x#K           */[e[x++]+e[x++\
]]||(S=("eval"/* l         `X#####D  ,       */+"(z=\'"+z.spl\
it(B = "\\\\")./*           G####B" #       */join(B+B).split\
(Q="\'").join(B+Q/*          VQBP`        */)+Q+")//m1k")[x/2\
+61*y-1]).fontcolor/*         TP         */(/\\w/.test(S)&&"#\
03B");document.body.innerHTML=p+=B+"\\n"}setTimeout(z)')//
</script>

`

Qui fonctionne en le mettant aussi dans un fichier txt (impressionnant !)

1 « J'aime »

Tu auras une explication ici :
https://tobibeer.github.io/tw/enable-js/#script

Dans la console F12 tu copies :

$tw.config.htmlUnsafeElements = [];

Ensuite tu crées un tiddler avec ton script :

<script>confirm("Caution: Do not use lightly!");</script>

Je connaissais déjà la macro <<script>> et le HelloWorld fonctionne très bien.

De plus il n’y a pas besoin du F12.
Ce qui est très bien comme ca on peut tester nos javascript sur le smartphone.

Je suis près à vous accompagner dans l’appentissage du javascript dans un TW.

Pour info le 2e script ne marche pas. Ca doit être à cause de la complexité de celui-ci.

2 « J'aime »

Je suis super content que tu veuilles t’investir à nos côtés. U R Welcome!
Pour le fonctionnement du script, c’est un problème de rendu sur le DOM. Il faut savoir que TW5 utilise comme REACT les techniques de “fake dom” ou virtual dom, qui recréé un DOM simplifié pour contrôler l’affichage des tiddlers.

Ici : https://anybox.fr/blog/appli-web-histoire-du-dom-react-redux

Et sinon, pour ceux qui aiment l’ascii, par ici :
http://aem1k.com/world/
http://aem1k.com

Hello @delta

Et bien ça c’est une vrai bonne nouvelle :star_struck:

Bienvenue sur cette section du forum.

Trois Mousquetaires ! (il manque le quatrième) ou la @delta Force va frapper fort !!

Bref ! Je suis également super content.

Au sujet des fortes restrictions imposées par la conception même de TiddlyWiki concernant l’usage du JavaScript en ligne, j’ai eu un peu la même réaction que toi : Zut ! je ne pourrais pas m’amuser à récupérer du code JS externe pour mon apprentissage. Mais l’être humain est ainsi fait: il suffit qu’on lui impose un interdit pour qu’il veuille le transgresser. Mais si l’on dit à un enfant “Tu ne dois pas te gaver de bonbons en cachette” mais qu’on lui laisse accéder à la bonbonnière s’il en a vraiment l’envie, alors il cessera de penser aux bonbons et n’en abusera pas.

Et puis il faut bien constater que Jean-Bernard et les

sont capables de faire des miracles avec notre Tiddlywiki. Et comme le dit @jeremy (Ruston) : Il suffit d’apprendre TiddlyWiki :sweat_smile:

1 « J'aime »

Tu as raison Eric de poser les bases de l’éducation des enfants :smile: car il faut aussi se prémunir de dire à l’enfant qu’il aille se laver les mains systématiquement avant de passer à table : « Va te laver les mains ! » car ça pourrait l’enfermer dans une étroitesse d’esprit en l’obligeant à ne penser plus qu’à ça.

Ainsi, on pourrait jauger des difficultés des concepts proposés dans notre documentation par un niveau (facile, normal, difficile) ou bien (débutant, expert) et/ou un temps (express, long)

Tps : :large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle: Difficulté : :red_circle::red_circle::red_circle: :white_circle::white_circle: Niveau : :black_circle::black_circle::black_circle::white_circle::white_circle:

◉◉◉◎◎

1 « J'aime »

INTRODUCTION

  1. Wikitext
  2. Javascript
  3. Nos conseils

Les bases

  1. Hello World!
  2. Eval

Organisation

  1. Comment fonctionnent les shadowtiddlers
  2. Module core
  3. $:/plugins/ Publisher / Plugin

Les modules

  1. module-type: library
  2. module-type: macro
  3. module-type: filter
  4. module-type: widget
  5. d’autres modules comme global, startup

Les internes $tw, $tw.utils, $tw.config, $tw.wiki

  1. wiki.getTiddler
  2. getVariable
  3. parseText

L’interface

  1. Dom et Fakedom
  2. storyview
  3. CSS
  4. module-type : animation

Actions sur l’édition

Création de filtres

Les “Parsers”

Utilitaires

Le packaging des plugins

En savoir plus sur divers sujets

  1. prototype
  2. refresh
  3. autres

CONCLUSION

Bonjour Jean-Bernard

Tu fais bien de tirer le premier car je ne sais pas trop par quel bout prendre notre plan de cours. Je reste actuellement un peu en retrait sans être très offensif…
Mais bon ! Après tout ce n’est que le début. Voyons par quels chemins tu entends nous faire passer pour accéder à la maîtrise JS/TW5.

1 « J'aime »

Bonjour Jean Bernard

Que signifie le chapitre “Les commandes”. Que contiendra t’il ?

Peux tu donner plus de précisions ?

merci :face_with_monocle:

Bonjour Éric,

Je suis allé sur


pour remarquer quelques constructions de scripts intéressantes en exports.command (en fait, on pourrait très bien choisir d’exposer le répertoire « editor »

Dans notre introduction, il faudrait raconter comment sont structurés les javascripts dans le core, présenter l’exemple de @delta, « HelloWorld » et ouvrir sur des exemples plus copieux.

Comment vois-tu la chose ?

Bonjour Jean-Bernard

Je ne vois pas trop (la chose). Ceci m’ l’air bien compliqué pour un débutant…

Si je comprends bien, les propriétés exports.* (name, params, run) passent leurs contenus à la fonction.

Dans l’exemple HelloWorld,

<<HelloWorld Eric>>

devrait logiquement retourner “Hello World Eric”. Chez moi cela ne retourne rien du tout:

Avec un Tiddler type application/javascript + un champ module-type: macro et le code que tu as indiqué

(function(){
exports.name = "HelloWorld";
exports.params = [{name: "word"}];
exports.run = function(word) {
	return "Hello World! "+word;
};
})();

Par ailleurs, J’ai consulté les fichiers du répertoire TiddlyWiki5/core/modules/ commands /

mais je suis bien incapable d’expliquer à quoi servent ces tiddlers. Par exemple

version.js : Use the version number from the package.json file

Ne devrait pourtant pas être compliqué à comprendre! Mais en lisant le code je ne comprend pas de quoi ça parle.

Je comprend mieux la Macro $:/core/modules/macros/version.js

Donc quelle est l’utilité première des modules commands et quelle est la raison de débuter par ceci.

Bonjour Eric,

Tout d’abord, tu as bien raison, il n’y a aucune logique à commencer par “command” qui sont des instructions de ligne de commandes : c’est l’ordre alphabétique d’un plan construit sur un premier jet peu adapté :wink:

D’autre part, il faut recharger le TW pour prendre en compte les scripts (d’un côté le tiddler avec le texte javascript, et de l’autre un tiddler avec le texte d’appel de la fonction)
Il faut noter de suite qu’on peut appeler cette fonction de deux façons :
<< HelloWorld Eric>>
et

<$macrocall $name="HelloWorld" word="Eric"/>

word correspond au name décrit dans params.

◉ Sources : https://tiddlywiki.com/static/MacroCallWidget.html

Sur le même principe, on peut écrire :

<$macrocall $name="now" format="0hh:0mm, DDth MMM YYYY"/>

Il existe donc 12 macros prédéfinies à découvrir ici :
◉ Sources : https://github.com/Jermolene/TiddlyWiki5/blob/master/core/modules/macros

  • changecount.js
  • contrastcolour.js
  • csvtiddlers.js
  • displayshortcuts.js
  • dumpvariables.js
  • jsontiddler.js
  • jsontiddlers.js
  • makedatauri.js
  • now.js
  • qualify.js
  • resolvepath.js
  • version.js

Il y a 51 widgets :

  • action-createtiddler.js
  • action-deletefield.js
  • action-deletetiddler.js
  • action-listops.js
  • action-navigate.js
  • action-sendmessage.js
  • action-setfield.js
  • browse.js
  • button.js
  • checkbox.js
  • codeblock.js
  • count.js
  • diff-text.js
  • draggable.js
  • droppable.js
  • dropzone.js
  • edit-binary.js
  • edit-bitmap.js
  • edit-shortcut.js
  • edit-text.js
  • edit.js
  • element.js
  • encrypt.js
  • entity.js
  • fieldmangler.js
  • fields.js
  • image.js
  • importvariables.js
  • keyboard.js
  • link.js
  • linkcatcher.js
  • list.js
  • macrocall.js
  • navigator.js
  • password.js
  • qualify.js
  • radio.js
  • range.js
  • raw.js
  • reveal.js
  • scrollable.js
  • select.js
  • setvariable.js
  • text.js
  • tiddler.js
  • transclude.js
  • vars.js
  • view.js
  • widget.js
  • wikify.js

eval.js

Sur ces bases, écrivons une nouvelle macro eval.js

:

(function(){
exports.name = "eval";
exports.params = [{name: "fun"}];
exports.run = function(fun) {
	return eval(fun);
};
})();

Nous pouvons l’utiliser ainsi :

<<eval "2+2">>
<<eval "new Date()">>
<<eval "alert('ok');">>
<<eval "var sum = new Function('a', 'b', 'return a + b');sum(10, 32)">>
<<eval "Math.E">>
<<eval "Math.pow(2,3)">>
// Jeter un dé :
<<eval "Math.floor(Math.random() * 7);">>

<<eval "
  const n = 6710859;
  function isPrime(n) { return !(Array(n+1).join(1).match(/^1?$|^(11+?)\1+$/)); }
  isPrime(13);
">>

◉ Sources :


Ce code javascript est incroyable :

<<eval "
const reject = (pred, array) => array.filter((...args) => !pred(...args));
reject(word => word.length > 4, ['Mandarine', 'Pomme', 'Cerise', 'Poire', 'Kiwi', 'Banane']); // Kiwi
">>

Voir celui-ci :

<<eval "
const sample = arr => arr[Math.floor(Math.random() * arr.length)];
sample([1,2,3,4,5,6,7,8,9,10]);
">>

et

<<eval "
const similarity = (arr, values) => arr.filter(v => values.includes(v));
similarity(['pierre','feuille', 'ciseau'], ['feuille','chifoumi', 'pierre']);
">>

Un petit dernier :

<<eval "
const take = (arr, m=1, n=m+1) => arr.slice(m-1, n);
take(['A', 'B', 'C', 'D', 'E', 'F', 'G'], 3, 6); //CDEF
">>

◉ Sources incroyables à voir impérativement : https://30secondsofcode.org/

Pour créer automatiquement 1 nouveau tiddly toutes les minutes :

<<eval "
var x = setInterval(function() {$tw.wiki.addTiddler(new $tw.Tiddler({
  title: 'Tiddly'+Math.floor(Math.random() * 70000),
  gen: 'demo'
}));}, 600000);      
">>

Je vous conseille de faire cet exercice dans un tiddlywiki de brouillon… :wink:
◉ Sources : https://github.com/Jermolene/TiddlyWiki5/issues/2025
◉ Sources : https://www.w3schools.com/jsref/met_win_settimeout.asp

image

◉ Sources : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/eval

Afficher de 1 à N

\define compte(borne)
<<eval "
const times = (n, fn, context = undefined) => {
  let i = 1;
  while (fn.call(context, i) !== false && ++i < n+1) {}
};
var output = '';
times($borne$, i => (output += i + ' '));
output;
">>
\end
<<compte 5>>

Ici on combine à la fois les macros de tiddlywiki (avec le pragma \define ) et le code javascript. Cela ouvre évidemment énormément de possibilités.

A propos de la syntaxe ‹ fonction = (params) => code; ›

On note que l’affectation par décomposition est doublée d’une fonction fléchée à voir dans les sources ci-dessous (c’est vraiment technique)

◉ Sources : https://github.com/30-seconds/30-seconds-of-code
◉ Affectation par décomposition : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition
◉ Fonction fléchée : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées

Tu s raison et en plus on n’arrête pas de le dire :crazy_face:

Notre exemple "HelloWorld me paraît être un bon candidat pour débuter, et il y a beaucoup de choses à dire sur ce petit bout de code:

  • Ce n’est pas une macro mis un module => différences
  • C’est une fonction => fonctions
  • Qui produit un résultat => exports
  • … et plus encore, je prépare un topo à dessus
1 « J'aime »

Attention, une seule paire de guillemets puisque la fonction n’a qu’un seul paramètre (Ça j’ai bien compris ? :smiley:)

<$macrocall $name=“now” format=“0hh:0mm, DDth MMM YYYY”/>

1 « J'aime »

Oui, une seule paire… c’est corrigé :wink:

Autre exemple de script :

(function(){
exports.name = "ToggleVisible";
exports.params = [{name: "classe"},{name: "valeur"}];
exports.run = function(classe,valeur) {
  el = document.getElementsByClassName(classe);
  for(var i=0;i<el.length;i++){
    if(valeur=="1"){
      el[i].style.visibility = "";
    }else{
      el[i].style.visibility = "hidden";
    }
  }
};
})();

qui s’utilise ainsi :

<div class="un">UN</div>
<div class="deux">DEUX</div>
<div class="trois">TROIS</div>
<<ToggleVisible "un" "1">>
<<ToggleVisible "deux" "0">>
<<ToggleVisible "trois" "1">>

et qui permet de basculer la visibilité d’un élément par sa classe. On peut noter au passage la façon d’utiliser plusieurs paramètres.

1 « J'aime »

Pour masquer les codes secrets :

\define masque(code,disp)
<<eval "
const mask = (cc, num = $disp$, mask = '⛔') => `${cc}`.slice(-num).padStart(`${cc}`.length, mask);
mask($code$);
">>
\end

<<masque "6815983777281892" 2>>