<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; line-break: after-white-space;" class="">Thank you Karsten! I will try this out.<div class=""><br class=""></div><div class="">Indeed, what I'm trying to make is kind of an interactive game/fun site, so the speed of keypresses should be OK (it will eat only the first). And I will avoid having the server process each keypress. </div><div class=""><br class=""></div><div class=""><div>I plan to use Seaside for session management, rendering, app flow, and persistence, because I already have experience using Seaside for this and hope it will be a rapid development. </div><div><br class=""></div><div>It's wise advice to avoid transferring much over the network, which is why I might decide to wait on sharing the whole 'game board' to the server (via ajax) until the user hits 'save' or 'share' or similar, rather than each time a 'square' on the board changes.</div><div><br class=""></div><div>Thanks again!</div><div>Tim</div><div><br class=""></div><div><br class=""><blockquote type="cite" class=""><div class="">On Jan 22, 2023, at 9:41 PM, Karsten Kusche <<a href="mailto:karsten@heeg.de" class="">karsten@heeg.de</a>> wrote:</div><br class="Apple-interchange-newline"><div class=""><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class="">Hi Tim,</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><br class=""></div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class="">i don’t know what you’re trying to achieve but there some things you may need to consider:</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><span class="Apple-tab-span" style="white-space: pre;"></span>- key-events happen fast! If an experienced user is typing, there’re a ton of events happening in zero time</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><span class="Apple-tab-span" style="white-space: pre;"></span>- internet is slow, if you process every single event by making a request to a server, your webpage will be dead-slow</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><span class="Apple-tab-span" style="white-space: pre;"></span>- using localhost is fast, so during development this issue may actually not appear like a problem</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><span class="Apple-tab-span" style="white-space: pre;"></span>- writing javascript in Smalltalk makes things unnecessarily complicated</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><br class=""></div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class="">What you could try to do:</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><span class="Apple-tab-span" style="white-space: pre;"></span>- in your file-library add a javascript file that contains your javascript code</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><span class="Apple-tab-span" style="white-space: pre;"></span>- this code is easier to write because you can just write normal javascript that you can find on the internet in every helpful corner</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><span class="Apple-tab-span" style="white-space: pre;"></span>- you can call this javascript code easily via smalltalk by using Seaside’s Javascript-Syntax like you already did</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><span class="Apple-tab-span" style="white-space: pre;"></span>- the difference is that you keep the amount of code that you’re writing in Seaside’s Javascript-Syntax to a minimum.</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><span class="Apple-tab-span" style="white-space: pre;"></span></div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class="">Here’s a simple example of how you could write your javascript file:</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><br class=""></div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class="">jQuery(function($){</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><span class="Apple-tab-span" style="white-space: pre;"></span>// create a dummy callback</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><span class="Apple-tab-span" style="white-space: pre;"></span>var myCallback = function(arg){</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><span class="Apple-tab-span" style="white-space: pre;"></span>console.log("callback is triggered, but no callback was registered");</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><span class="Apple-tab-span" style="white-space: pre;"></span>};</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><br class=""></div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><span class="Apple-tab-span" style="white-space: pre;"></span>// register a global function where a new callback can be regitered</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><span class="Apple-tab-span" style="white-space: pre;"></span>window.mySpecialRegisterFunction = function(callback){</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><span class="Apple-tab-span" style="white-space: pre;"></span>myCallback = callback;</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><span class="Apple-tab-span" style="white-space: pre;"></span>}<span class="Apple-tab-span" style="white-space: pre;">
</span></div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><br class=""></div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><span class="Apple-tab-span" style="white-space: pre;"></span>$(document).on("keydown",function(event){</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><span class="Apple-tab-span" style="white-space: pre;"></span>console.log("keydown just happened at:",event.target);</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><br class=""></div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><span class="Apple-tab-span" style="white-space: pre;"></span>// here it doesn’t matter what myCallback actually does. It defaults to the function at the top, but it could already be overridden with a function provided by Seaside</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><span class="Apple-tab-span" style="white-space: pre;"></span>myCallback("yay");</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><span class="Apple-tab-span" style="white-space: pre;"></span>});</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class="">});</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><br class=""></div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class="">What this code does is the following:</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class="">It registers a on-ready-function via jQuery, by calling the jQuery function with a function as argument. Inside this function it’s safe to use $ as a reference to the jQuery function because $ is used as name of the parameter and jQuery passes itself as argument. That’s basically done for two reasons: $ is easier to use than „jQuery“ but other libraries may also use $. This call makes it explicit what’s what.</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class="">The on-ready-function is called when everything’s „ready“, so your DOM is complete and you’re safe to refer to elements in your DOM. If you don’t use an on-ready-function, your code is executed right away, and the DOM is only complete until the point in <head> where your script is referred.</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><br class=""></div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class="">By declaring a global register-function you declared an API that you can call from Smalltalk: </div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><span class="Apple-tab-span" style="white-space: pre;"></span>html document addLoadScript: ( (html javascript alias: #window) call: #mySpecialRegisterFunction with: (html jQuery ajax script:[:script | ]) asFunction)</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><br class=""></div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class="">This part at the end, where i created an ajax object and converted it into a function, that’s what’s being passed to mySpecialRegisterFunction() and there you can do whatever you need to register a callback, maybe retrieve parameters or what not.</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><br class=""></div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class="">Kind Regards</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class="">Karsten</div><div style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><br class=""></div><div class="gmail_signature" style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;"><div class="">— </div><div class=""><br class=""><span style="white-space: pre-wrap; font-family: -apple-system; font-size: 14px;" class="">Georg Heeg eK</span></div><div class=""><div class="gmail_signature amz_quote_hidden" style="font-family: -apple-system; font-size: 14px;"><pre style="white-space: pre-wrap; word-wrap: break-word;" class="">Wallstraße 22
06366 Köthen
Tel.: 03496/214328
FAX: 03496/214712
Amtsgericht Dortmund HRA 12812</pre><div class=""><br class=""></div></div></div></div><br style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><p class="airmail_on" style="caret-color: rgb(0, 0, 0); font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;">Am 22. Januar 2023 um 21:11:45, Tim Johnson (<a href="mailto:digit@sonic.net" class="">digit@sonic.net</a>) schrieb:</p><blockquote type="cite" class="clean_bq" style="font-family: Helvetica, Arial; font-size: 13px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none;"><span class=""><div class=""><div class=""></div><div class="">Hi again,<br class=""><br class="">OK, I can print the keycode using:<br class=""><br class="">html document addLoadScript: ( (html jQuery this) onKeyDown: (<br class="">html javascript logger log: (html jQuery event access:<span class="Apple-converted-space"> </span><br class="">'which') ) ).<br class=""><br class="">Hooray!<br class=""><br class="">On Sun, 22 Jan 2023, Tim Johnson wrote:<br class=""><br class="">> Hi Seasiders,<br class="">><br class="">> I'm beginning to use Seaside's JavaScript integrations a bit. I've avoided<span class="Apple-converted-space"> </span><br class="">> JavaScript all these years, but I think it's necessary for my current<span class="Apple-converted-space"> </span><br class="">> project. The project will use the computer/phone keyboard for interaction.<br class="">><br class="">> I've had my first success by attaching an event listener to keydown as<span class="Apple-converted-space"> </span><br class="">> follows:<br class="">><br class="">> renderContentOn: html<br class="">><br class="">> html document addLoadScript: ( (html jQuery this) onKeyDown: ( html<span class="Apple-converted-space"> </span><br class="">> javascript logger log: 'keydown' ) ) .<br class="">><br class="">><br class="">><br class="">> I understand this is about as basic as it gets, but I'm still overjoyed at<span class="Apple-converted-space"> </span><br class="">> this success. Interacting with the keyboard in a web app is something I've<span class="Apple-converted-space"> </span><br class="">> wanted to do for years.<br class="">><br class="">> The next steps for me would be to:<br class="">><br class="">> 1) print what the keycode is, in the console log above, instead of just<span class="Apple-converted-space"> </span><br class="">> 'keydown'. How could I get event details in a snippet like the above? Is<span class="Apple-converted-space"> </span><br class="">> this possible without AJAX or writing raw JavaScript?<br class="">><br class="">> 2) My app will need to know which element on the page is being 'hovered' over<span class="Apple-converted-space"> </span><br class="">> or has focus when the keypress event arrives. I can imagine a few possible<span class="Apple-converted-space"> </span><br class="">> ways of doing this...<br class="">><br class="">> 2a) I may need to add <input> tags on my page, so when one gets<span class="Apple-converted-space"> </span><br class="">> tapped/activated by someone using the app on a phone, the keyboard will pop<span class="Apple-converted-space"> </span><br class="">> up. The <input> tag/element could then be what is listening for<span class="Apple-converted-space"> </span><br class="">> keydown/keyup/keypress events, instead of the base document. (But I don't<span class="Apple-converted-space"> </span><br class="">> want actual text input boxes.)<br class="">><br class="">> 2b) using jQuery to search the DOM for the element that current has hover<span class="Apple-converted-space"> </span><br class="">> and/or focus<br class="">><br class="">><br class="">> I'll need to move on to AJAX and passengers next. Unfortunately the<span class="Apple-converted-space"> </span><br class="">> documentation[1] on these subjects seems to remain unwritten. Searching the<span class="Apple-converted-space"> </span><br class="">> mailing list might be the best way to learn...? I also appreciate the<span class="Apple-converted-space"> </span><br class="">> "jQuery Functional Test Suite" in the image, but am sometimes wishing for<span class="Apple-converted-space"> </span><br class="">> something more... (I am open to the idea of writing down my adventures as<span class="Apple-converted-space"> </span><br class="">> potential help to others, as a potential #webruary project...)<br class="">><br class="">> [1] older homes of book:<span class="Apple-converted-space"> </span><a href="https://book.seaside.st/book/web-20/jquery/ajax" class="">https://book.seaside.st/book/web-20/jquery/ajax</a><br class="">><span class="Apple-converted-space"> </span><a href="https://rmod-files.lille.inria.fr/FreeBooks/SeasideBook/2014-07-16-seaside.pdf" class="">https://rmod-files.lille.inria.fr/FreeBooks/SeasideBook/2014-07-16-seaside.pdf</a><br class="">><br class="">> newer home of book:<br class="">><br class="">><span class="Apple-converted-space"> </span><a href="https://github.com/SquareBracketAssociates/DynamicWebDevelopmentWithSeaside/releases/tag/continuous" class="">https://github.com/SquareBracketAssociates/DynamicWebDevelopmentWithSeaside/releases/tag/continuous</a><br class="">><br class="">><br class="">><br class="">> Appreciate any help or insight from folks on the list.<br class="">><br class="">> Thanks,<br class="">> Tim<br class="">><br class="">> _______________________________________________<br class="">> seaside mailing list<br class="">><span class="Apple-converted-space"> </span><a href="mailto:seaside@lists.squeakfoundation.org" class="">seaside@lists.squeakfoundation.org</a><br class="">><span class="Apple-converted-space"> </span><a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" class="">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a><br class="">><br class="">><br class="">_______________________________________________<br class="">seaside mailing list<br class=""><a href="mailto:seaside@lists.squeakfoundation.org" class="">seaside@lists.squeakfoundation.org</a><br class=""><a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" class="">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a></div></div></span></blockquote></div></blockquote></div><br class=""></div></body></html>