how to use javascript in TW5

758 views
Skip to first unread message

Dave

unread,
Mar 21, 2017, 5:51:31 PM3/21/17
to TiddlyWiki
Is there a tutorial somewhere that would teach me how to take this javascript code

<!DOCTYPE html>
<html>
<body>

<p>Click the button to convert the string to lowercase letters.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var str = "Hello World!";
    var res = str.toLowerCase();
    document.getElementById("demo").innerHTML = res;
}
</script>

</body>
</html>

and use it in a macro?


Sven Wetzel

unread,
Mar 21, 2017, 6:44:42 PM3/21/17
to tiddl...@googlegroups.com

Hello Dave,

I think you must create a widget, that creates a button with the click event listener on it.

Or if you want it as macro you can try this with my SPilot4TW (https://www.quaraman.de/tw/pilot.html):

\define myfunctionbutton(text:"hello world!")
<pilot>
LOOP:
PAUSE: Try it
CLS:
T: $text$
ENDLOOP:
</pilot>
\end


Later in the tiddler: <<myfunctionbutton "You are great!">>

This wait till the user presses the "Try it" button and then prints the text.

It is using another language as Javascript, but you can do this in a normal Tiddler without creating a plugin yourself.

Am 21.03.2017 um 22:51 schrieb Dave:
Is  a tutorial somewhere that would teach me how to take this javascript code
--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/39c1ac14-4076-4d70-80a8-e85fbb0c8efa%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Dave

unread,
Mar 22, 2017, 12:17:10 AM3/22/17
to TiddlyWiki
wait, you can make widgets?  I thought you could only make macros...  time to read some more.

Paul Netsaver

unread,
May 16, 2018, 4:14:33 PM5/16/18
to TiddlyWiki
Hi,
I've managed to create a JS macro and run it from inside tiddlers.
Anyway I'ld like to create an 'autoexecuting' JS macro, in order to apply it to all tiddlers (or maybe to specifically tagged tiddlers)
without making a call from each tiddler.
Think to a text replacing macro intercepting a list of user defined local entities, e.g. §+-, or a macro for creating footnotes in html, etc.
How to do it?

.... moreover... are JS macros processed from the browser, after the final tiddlywiki html conversion or are they a sort of  'tiddlywiki middleware'? I've to know if I can program JS macros as for usual html+js websites, thinking to common dom structure or text utf-8 coding. In the example above, §+- would be replaced with &plusmn;

Thanks and regards,
Netsaver, Rome, IT 

Jed Carty

unread,
May 16, 2018, 4:21:32 PM5/16/18
to TiddlyWiki
TiddlyWiki doesn't use the dom to hold the state. Everything is in tiddlers, if you are thinking of creating macros based on the dom state it is going to get a bit confusing.

By design the dom can be refreshed at any time, so all state information has to be held inside a tiddler or it is in danger of being lost without warning.
So what you are describing would be difficult to create the way you are talking about it.

TonyM

unread,
May 16, 2018, 8:07:52 PM5/16/18
to TiddlyWiki
Dave,

I went down this path recently. I realised that the items in the script component usually can be replaced with an existing TiddlyWiki equivalent. More often than not in examples given, say on w3schools.com you can learn how to interpret the java script and instead use TiddlyWiki macros, buttons, actions etc... Evans formula plugin is a great assert here.

I would be nice to document the equivalents and this would open up these examples for most TiddlyWiki users.

TiddlyWiki is effectively a higher level language than javascript itself and is intimately connected to the objects in TiddlyWiki. 

Finally I have come to understand that given TiddlyWikis architecture  simply copying example javascript into it needs a rework, and when there is also a way to do it already there should only be some use cases where it is worth reworking java-script.

Regards
Tony

Paul Netsaver

unread,
May 17, 2018, 6:12:43 PM5/17/18
to TiddlyWiki
OK for the DOM, by the way.... any possibilities to have a JS macro executed automatically for all tiddlers?
thanks a lot 
Netsaver Paul

Jed Carty

unread,
May 17, 2018, 6:16:55 PM5/17/18
to TiddlyWiki
If you want to edit the dom to change how each tiddler is displayed than it will be much easier to make a display template instead. If you want to edit the content of the tiddler than it depends on what you want to do but it should be possible.

PMario

unread,
May 17, 2018, 6:58:16 PM5/17/18
to TiddlyWiki
Hi,

On Wednesday, May 16, 2018 at 10:14:33 PM UTC+2, Paul Netsaver wrote:
.... moreover... are JS macros processed from the browser, after the final tiddlywiki html conversion or are they a sort of  'tiddlywiki middleware'?

Macros are more like "text substitusions" used by endusers. If you will ... it's like middleware.

As you found out, if you want to manipulate tiddler source content, you'll need javascript. ... but no js macros.
 
I've to know if I can program JS macros as for usual html+js websites, thinking to common dom structure or text utf-8 coding.

No.

Manipulating the DOM in TW does absolutely nothing. ... It's the other way around. As soon as you manipulate tiddler content, the DOM will be redrawn to match tiddler state.
 
In the example above, §+- would be replaced with &plusmn;

What you describe here is a parser-rule, similar to the dash-parser [1].


But I'm not 100% sure, what you want to achieve. ... If you need mathematical symobls, the katex-plugin may be a much simpler and much more powerful possibility.


have fun!
mario


Paul Netsaver

unread,
May 18, 2018, 3:52:09 PM5/18/18
to tiddl...@googlegroups.com
OK PMario, thanks for the information.
By the way, the 'plusminus' was just an example.
In another envornment (dokuwiki) I used markdown for automatic text to html processing.
Then I used javascript to extend functionalities. Reference to js modules in dokuwiki could be placed in the template, so to be accessible from all articles.
I could use dom to retrieve elements, attributes, classes, etc. and to perform other useful replacements.

For instance, I could replace §{#id .'myclass' ... inline html code ... }§ with <span class='myclass' id='id'> inline html code </span>. So the dictionary elements were not just math symbols, but replacement for html code. Moreover, I use mathjax because allows inline math ${...}$ while it seems not available in katex...
Or I could create automatically bidirectional footnotes, based on links with special classes.

I could do this because the js code was kept in the final rendered code and executed by the browser. 
Therefore I thought to use js macro in tiddlywiki, but how to reference the js code from all tiddlers without calling it explicitly from each one?
Maybe there's another way to do the same...

Thanks and regards 
Paul Netsaver,
Rome, IT
Reply all
Reply to author
Forward
Message has been deleted
0 new messages