Re: JavaScript keypress events
Tim Johnson <[email protected]> Mon, 23 Jan 2023 22:12:14 -0800
| Newsgroups | gmane.comp.lang.smalltalk.squeak.seaside |
|---|---|
| Message-ID | <[email protected]> |
--===============3314586771546843755== Content-Type: multipart/alternative; boundary="Apple-Mail=_1AC77206-6740-4971-9412-8D70E50C7934" --Apple-Mail=_1AC77206-6740-4971-9412-8D70E50C7934 Content-Transfer-Encoding: quoted-printable Content-Type: text/plain; charset=utf-8 Thank you Karsten! I will try this out. 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. =20 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. =20 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. Thanks again! Tim > On Jan 22, 2023, at 9:41 PM, Karsten Kusche <[email protected]> wrote: >=20 > Hi Tim, >=20 > i don=E2=80=99t know what you=E2=80=99re trying to achieve but there = some things you may need to consider: > - key-events happen fast! If an experienced user is typing, there=E2=80=99= re a ton of events happening in zero time > - internet is slow, if you process every single event by making a = request to a server, your webpage will be dead-slow > - using localhost is fast, so during development this issue may = actually not appear like a problem > - writing javascript in Smalltalk makes things unnecessarily = complicated >=20 > What you could try to do: > - in your file-library add a javascript file that contains your = javascript code > - this code is easier to write because you can just write normal = javascript that you can find on the internet in every helpful corner > - you can call this javascript code easily via smalltalk by using = Seaside=E2=80=99s Javascript-Syntax like you already did > - the difference is that you keep the amount of code that you=E2=80=99re= writing in Seaside=E2=80=99s Javascript-Syntax to a minimum. > Here=E2=80=99s a simple example of how you could write your javascript = file: >=20 > jQuery(function($){ > // create a dummy callback > var myCallback =3D function(arg){ > console.log("callback is triggered, but no callback was registered"); > }; >=20 > // register a global function where a new callback can be regitered > window.mySpecialRegisterFunction =3D function(callback){ > myCallback =3D callback; > } >=20 > $(document).on("keydown",function(event){ > console.log("keydown just happened at:",event.target); >=20 > // here it doesn=E2=80=99t 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 > myCallback("yay"); > }); > }); >=20 > What this code does is the following: > It registers a on-ready-function via jQuery, by calling the jQuery = function with a function as argument. Inside this function it=E2=80=99s = 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=E2=80=99s= basically done for two reasons: $ is easier to use than =E2=80=9EjQuery=E2= =80=9C but other libraries may also use $. This call makes it explicit = what=E2=80=99s what. > The on-ready-function is called when everything=E2=80=99s =E2=80=9Eready= =E2=80=9C, so your DOM is complete and you=E2=80=99re safe to refer to = elements in your DOM. If you don=E2=80=99t 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. >=20 > By declaring a global register-function you declared an API that you = can call from Smalltalk:=20 > html document addLoadScript: ( (html javascript alias: #window) call: = #mySpecialRegisterFunction with: (html jQuery ajax script:[:script | ]) = asFunction) >=20 > This part at the end, where i created an ajax object and converted it = into a function, that=E2=80=99s what=E2=80=99s being passed to = mySpecialRegisterFunction() and there you can do whatever you need to = register a callback, maybe retrieve parameters or what not. >=20 > Kind Regards > Karsten >=20 > =E2=80=94=20 >=20 > Georg Heeg eK > Wallstra=C3=9Fe 22 > 06366 K=C3=B6then >=20 > Tel.: 03496/214328 > FAX: 03496/214712 > Amtsgericht Dortmund HRA 12812 >=20 >=20 > Am 22. Januar 2023 um 21:11:45, Tim Johnson ([email protected] = <mailto:[email protected]>) schrieb: >=20 >> Hi again, >>=20 >> OK, I can print the keycode using: >>=20 >> html document addLoadScript: ( (html jQuery this) onKeyDown: ( >> html javascript logger log: (html jQuery event access:=20 >> 'which') ) ). >>=20 >> Hooray! >>=20 >> On Sun, 22 Jan 2023, Tim Johnson wrote: >>=20 >> > Hi Seasiders, >> > >> > I'm beginning to use Seaside's JavaScript integrations a bit. I've = avoided=20 >> > JavaScript all these years, but I think it's necessary for my = current=20 >> > project. The project will use the computer/phone keyboard for = interaction. >> > >> > I've had my first success by attaching an event listener to keydown = as=20 >> > follows: >> > >> > renderContentOn: html >> > >> > html document addLoadScript: ( (html jQuery this) onKeyDown: ( html=20= >> > javascript logger log: 'keydown' ) ) . >> > >> > >> > >> > I understand this is about as basic as it gets, but I'm still = overjoyed at=20 >> > this success. Interacting with the keyboard in a web app is = something I've=20 >> > wanted to do for years. >> > >> > The next steps for me would be to: >> > >> > 1) print what the keycode is, in the console log above, instead of = just=20 >> > 'keydown'. How could I get event details in a snippet like the = above? Is=20 >> > this possible without AJAX or writing raw JavaScript? >> > >> > 2) My app will need to know which element on the page is being = 'hovered' over=20 >> > or has focus when the keypress event arrives. I can imagine a few = possible=20 >> > ways of doing this... >> > >> > 2a) I may need to add <input> tags on my page, so when one gets=20 >> > tapped/activated by someone using the app on a phone, the keyboard = will pop=20 >> > up. The <input> tag/element could then be what is listening for=20 >> > keydown/keyup/keypress events, instead of the base document. (But I = don't=20 >> > want actual text input boxes.) >> > >> > 2b) using jQuery to search the DOM for the element that current has = hover=20 >> > and/or focus >> > >> > >> > I'll need to move on to AJAX and passengers next. Unfortunately the=20= >> > documentation[1] on these subjects seems to remain unwritten. = Searching the=20 >> > mailing list might be the best way to learn...? I also appreciate = the=20 >> > "jQuery Functional Test Suite" in the image, but am sometimes = wishing for=20 >> > something more... (I am open to the idea of writing down my = adventures as=20 >> > potential help to others, as a potential #webruary project...) >> > >> > [1] older homes of book: = https://book.seaside.st/book/web-20/jquery/ajax = <https://book.seaside.st/book/web-20/jquery/ajax> >> > = https://rmod-files.lille.inria.fr/FreeBooks/SeasideBook/2014-07-16-seaside= .pdf = <https://rmod-files.lille.inria.fr/FreeBooks/SeasideBook/2014-07-16-seasid= e.pdf> >> > >> > newer home of book: >> > >> > = https://github.com/SquareBracketAssociates/DynamicWebDevelopmentWithSeasid= e/releases/tag/continuous = <https://github.com/SquareBracketAssociates/DynamicWebDevelopmentWithSeasi= de/releases/tag/continuous> >> > >> > >> > >> > Appreciate any help or insight from folks on the list. >> > >> > Thanks, >> > Tim >> > >> > _______________________________________________ >> > seaside mailing list >> > [email protected] = <mailto:[email protected]> >> > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside = <http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside> >> > >> > >> _______________________________________________ >> seaside mailing list >> [email protected] = <mailto:[email protected]> >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside = <http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside> --Apple-Mail=_1AC77206-6740-4971-9412-8D70E50C7934 Content-Transfer-Encoding: quoted-printable Content-Type: text/html; charset=utf-8 <html><head><meta http-equiv=3D"Content-Type" content=3D"text/html; = charset=3Dutf-8"></head><body style=3D"word-wrap: break-word; = -webkit-nbsp-mode: space; line-break: after-white-space;" class=3D"">Thank= you Karsten! I will try this out.<div class=3D""><br = class=3D""></div><div class=3D"">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=3D""><br = class=3D""></div><div class=3D""><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=3D""></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=3D""></div><div>Thanks = again!</div><div>Tim</div><div><br class=3D""></div><div><br = class=3D""><blockquote type=3D"cite" class=3D""><div class=3D"">On Jan = 22, 2023, at 9:41 PM, Karsten Kusche <<a = href=3D"mailto:[email protected]" class=3D"">[email protected]</a>> = wrote:</div><br class=3D"Apple-interchange-newline"><div class=3D""><div = style=3D"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=3D"">Hi Tim,</div><div style=3D"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=3D""><br class=3D""></div><div = style=3D"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=3D"">i don=E2=80=99t know what you=E2=80=99re trying to = achieve but there some things you may need to consider:</div><div = style=3D"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=3D""><span class=3D"Apple-tab-span" style=3D"white-space: = pre;"></span>- key-events happen fast! If an experienced user is typing, = there=E2=80=99re a ton of events happening in zero time</div><div = style=3D"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=3D""><span class=3D"Apple-tab-span" style=3D"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=3D"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=3D""><span class=3D"Apple-tab-span" style=3D"white-space: = pre;"></span>- using localhost is fast, so during development this issue = may actually not appear like a problem</div><div style=3D"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=3D""><span = class=3D"Apple-tab-span" style=3D"white-space: pre;"></span>- writing = javascript in Smalltalk makes things unnecessarily complicated</div><div = style=3D"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=3D""><br class=3D""></div><div style=3D"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=3D"">What you could try to do:</div><div = style=3D"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=3D""><span class=3D"Apple-tab-span" style=3D"white-space: = pre;"></span>- in your file-library add a javascript file that contains = your javascript code</div><div style=3D"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=3D""><span class=3D"Apple-tab-span" = style=3D"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=3D"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=3D""><span class=3D"Apple-tab-span" = style=3D"white-space: pre;"></span>- you can call this javascript code = easily via smalltalk by using Seaside=E2=80=99s Javascript-Syntax like = you already did</div><div style=3D"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=3D""><span class=3D"Apple-tab-span" = style=3D"white-space: pre;"></span>- the difference is that you keep the = amount of code that you=E2=80=99re writing in Seaside=E2=80=99s = Javascript-Syntax to a minimum.</div><div style=3D"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=3D""><span class=3D"Apple-tab-span" = style=3D"white-space: pre;"></span></div><div style=3D"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=3D"">Here=E2=80=99s a simple example of how you could write your = javascript file:</div><div style=3D"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=3D""><br class=3D""></div><div = style=3D"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=3D"">jQuery(function($){</div><div style=3D"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=3D""><span = class=3D"Apple-tab-span" style=3D"white-space: pre;"></span>// create a = dummy callback</div><div style=3D"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=3D""><span class=3D"Apple-tab-span" = style=3D"white-space: pre;"></span>var myCallback =3D = function(arg){</div><div style=3D"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=3D""><span class=3D"Apple-tab-span" = style=3D"white-space: pre;"></span>console.log("callback is triggered, = but no callback was registered");</div><div style=3D"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=3D""><span class=3D"Apple-tab-span" = style=3D"white-space: pre;"></span>};</div><div style=3D"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=3D""><br = class=3D""></div><div style=3D"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=3D""><span class=3D"Apple-tab-span" = style=3D"white-space: pre;"></span>// register a global function where a = new callback can be regitered</div><div style=3D"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=3D""><span class=3D"Apple-tab-span" = style=3D"white-space: pre;"></span>window.mySpecialRegisterFunction =3D = function(callback){</div><div style=3D"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=3D""><span class=3D"Apple-tab-span" = style=3D"white-space: pre;"></span>myCallback =3D callback;</div><div = style=3D"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=3D""><span class=3D"Apple-tab-span" style=3D"white-space: = pre;"></span>}<span class=3D"Apple-tab-span" style=3D"white-space: = pre;"> </span></div><div style=3D"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=3D""><br class=3D""></div><div = style=3D"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=3D""><span class=3D"Apple-tab-span" style=3D"white-space: = pre;"></span>$(document).on("keydown",function(event){</div><div = style=3D"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=3D""><span class=3D"Apple-tab-span" style=3D"white-space: = pre;"></span>console.log("keydown just happened = at:",event.target);</div><div style=3D"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=3D""><br class=3D""></div><div = style=3D"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=3D""><span class=3D"Apple-tab-span" style=3D"white-space: = pre;"></span>// here it doesn=E2=80=99t 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=3D"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=3D""><span class=3D"Apple-tab-span" style=3D"white-space: = pre;"></span>myCallback("yay");</div><div style=3D"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=3D""><span class=3D"Apple-tab-span" = style=3D"white-space: pre;"></span>});</div><div style=3D"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=3D"">});</div><div style=3D"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=3D""><br class=3D""></div><div = style=3D"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=3D"">What this code does is the following:</div><div = style=3D"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=3D"">It registers a on-ready-function via jQuery, by = calling the jQuery function with a function as argument. Inside this = function it=E2=80=99s 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=E2=80=99s basically done for two reasons: $ is = easier to use than =E2=80=9EjQuery=E2=80=9C but other libraries may also = use $. This call makes it explicit what=E2=80=99s what.</div><div = style=3D"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=3D"">The on-ready-function is called when everything=E2=80=99= s =E2=80=9Eready=E2=80=9C, so your DOM is complete and you=E2=80=99re = safe to refer to elements in your DOM. If you don=E2=80=99t 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=3D"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=3D""><br class=3D""></div><div = style=3D"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=3D"">By declaring a global register-function you declared = an API that you can call from Smalltalk: </div><div = style=3D"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=3D""><span class=3D"Apple-tab-span" style=3D"white-space: = pre;"></span>html document addLoadScript: ( (html javascript alias: = #window) call: #mySpecialRegisterFunction with: (html jQuery ajax = script:[:script | ]) asFunction)</div><div style=3D"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=3D""><br class=3D""></div><div = style=3D"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=3D"">This part at the end, where i created an ajax object = and converted it into a function, that=E2=80=99s what=E2=80=99s 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=3D"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=3D""><br class=3D""></div><div = style=3D"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=3D"">Kind Regards</div><div style=3D"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=3D"">Karsten</div><div style=3D"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=3D""><br = class=3D""></div><div class=3D"gmail_signature" style=3D"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=3D"">=E2=80=94 </div><div class=3D""><br class=3D""><span = style=3D"white-space: pre-wrap; font-family: -apple-system; font-size: = 14px;" class=3D"">Georg Heeg eK</span></div><div class=3D""><div = class=3D"gmail_signature amz_quote_hidden" style=3D"font-family: = -apple-system; font-size: 14px;"><pre style=3D"white-space: pre-wrap; = word-wrap: break-word;" class=3D"">Wallstra=C3=9Fe 22 06366 K=C3=B6then Tel.: 03496/214328 FAX: 03496/214712 Amtsgericht Dortmund HRA 12812</pre><div class=3D""><br = class=3D""></div></div></div></div><br style=3D"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=3D""><p class=3D"airmail_on" = style=3D"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=3D"mailto:[email protected]" class=3D"">[email protected]</a>) = schrieb:</p><blockquote type=3D"cite" class=3D"clean_bq" = style=3D"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=3D""><div class=3D""><div = class=3D""></div><div class=3D"">Hi again,<br class=3D""><br = class=3D"">OK, I can print the keycode using:<br class=3D""><br = class=3D"">html document addLoadScript: ( (html jQuery this) onKeyDown: = (<br class=3D"">html javascript logger log: (html jQuery event = access:<span class=3D"Apple-converted-space"> </span><br = class=3D"">'which') ) ).<br class=3D""><br class=3D"">Hooray!<br = class=3D""><br class=3D"">On Sun, 22 Jan 2023, Tim Johnson wrote:<br = class=3D""><br class=3D"">> Hi Seasiders,<br class=3D"">><br = class=3D"">> I'm beginning to use Seaside's JavaScript integrations a = bit. I've avoided<span class=3D"Apple-converted-space"> </span><br = class=3D"">> JavaScript all these years, but I think it's necessary = for my current<span class=3D"Apple-converted-space"> </span><br = class=3D"">> project. The project will use the computer/phone = keyboard for interaction.<br class=3D"">><br class=3D"">> I've had = my first success by attaching an event listener to keydown as<span = class=3D"Apple-converted-space"> </span><br class=3D"">> = follows:<br class=3D"">><br class=3D"">> renderContentOn: html<br = class=3D"">><br class=3D"">> html document addLoadScript: ( (html = jQuery this) onKeyDown: ( html<span = class=3D"Apple-converted-space"> </span><br class=3D"">> = javascript logger log: 'keydown' ) ) .<br class=3D"">><br = class=3D"">><br class=3D"">><br class=3D"">> I understand this = is about as basic as it gets, but I'm still overjoyed at<span = class=3D"Apple-converted-space"> </span><br class=3D"">> this = success. Interacting with the keyboard in a web app is something = I've<span class=3D"Apple-converted-space"> </span><br class=3D"">>= wanted to do for years.<br class=3D"">><br class=3D"">> The next = steps for me would be to:<br class=3D"">><br class=3D"">> 1) print = what the keycode is, in the console log above, instead of just<span = class=3D"Apple-converted-space"> </span><br class=3D"">> = 'keydown'. How could I get event details in a snippet like the above? = Is<span class=3D"Apple-converted-space"> </span><br class=3D"">> = this possible without AJAX or writing raw JavaScript?<br = class=3D"">><br class=3D"">> 2) My app will need to know which = element on the page is being 'hovered' over<span = class=3D"Apple-converted-space"> </span><br class=3D"">> or has = focus when the keypress event arrives. I can imagine a few possible<span = class=3D"Apple-converted-space"> </span><br class=3D"">> ways of = doing this...<br class=3D"">><br class=3D"">> 2a) I may need to = add <input> tags on my page, so when one gets<span = class=3D"Apple-converted-space"> </span><br class=3D"">> = tapped/activated by someone using the app on a phone, the keyboard will = pop<span class=3D"Apple-converted-space"> </span><br class=3D"">> = up. The <input> tag/element could then be what is listening = for<span class=3D"Apple-converted-space"> </span><br class=3D"">> = keydown/keyup/keypress events, instead of the base document. (But I = don't<span class=3D"Apple-converted-space"> </span><br = class=3D"">> want actual text input boxes.)<br class=3D"">><br = class=3D"">> 2b) using jQuery to search the DOM for the element that = current has hover<span class=3D"Apple-converted-space"> </span><br = class=3D"">> and/or focus<br class=3D"">><br class=3D"">><br = class=3D"">> I'll need to move on to AJAX and passengers next. = Unfortunately the<span class=3D"Apple-converted-space"> </span><br = class=3D"">> documentation[1] on these subjects seems to remain = unwritten. Searching the<span = class=3D"Apple-converted-space"> </span><br class=3D"">> mailing = list might be the best way to learn...? I also appreciate the<span = class=3D"Apple-converted-space"> </span><br class=3D"">> "jQuery = Functional Test Suite" in the image, but am sometimes wishing for<span = class=3D"Apple-converted-space"> </span><br class=3D"">> = something more... (I am open to the idea of writing down my adventures = as<span class=3D"Apple-converted-space"> </span><br class=3D"">> = potential help to others, as a potential #webruary project...)<br = class=3D"">><br class=3D"">> [1] older homes of book:<span = class=3D"Apple-converted-space"> </span><a = href=3D"https://book.seaside.st/book/web-20/jquery/ajax" = class=3D"">https://book.seaside.st/book/web-20/jquery/ajax</a><br = class=3D"">><span class=3D"Apple-converted-space"> </span><a = href=3D"https://rmod-files.lille.inria.fr/FreeBooks/SeasideBook/2014-07-16= -seaside.pdf" = class=3D"">https://rmod-files.lille.inria.fr/FreeBooks/SeasideBook/2014-07= -16-seaside.pdf</a><br class=3D"">><br class=3D"">> newer home of = book:<br class=3D"">><br class=3D"">><span = class=3D"Apple-converted-space"> </span><a = href=3D"https://github.com/SquareBracketAssociates/DynamicWebDevelopmentWi= thSeaside/releases/tag/continuous" = class=3D"">https://github.com/SquareBracketAssociates/DynamicWebDevelopmen= tWithSeaside/releases/tag/continuous</a><br class=3D"">><br = class=3D"">><br class=3D"">><br class=3D"">> Appreciate any = help or insight from folks on the list.<br class=3D"">><br = class=3D"">> Thanks,<br class=3D"">> Tim<br class=3D"">><br = class=3D"">> _______________________________________________<br = class=3D"">> seaside mailing list<br class=3D"">><span = class=3D"Apple-converted-space"> </span><a = href=3D"mailto:[email protected]" = class=3D"">[email protected]</a><br class=3D"">><span = class=3D"Apple-converted-space"> </span><a = href=3D"http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside= " = class=3D"">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seas= ide</a><br class=3D"">><br class=3D"">><br = class=3D"">_______________________________________________<br = class=3D"">seaside mailing list<br class=3D""><a = href=3D"mailto:[email protected]" = class=3D"">[email protected]</a><br class=3D""><a = href=3D"http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside= " = class=3D"">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seas= ide</a></div></div></span></blockquote></div></blockquote></div><br = class=3D""></div></body></html>= --Apple-Mail=_1AC77206-6740-4971-9412-8D70E50C7934-- --===============3314586771546843755== Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: base64 Content-Disposition: inline X19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX18Kc2Vhc2lkZSBt YWlsaW5nIGxpc3QKc2Vhc2lkZUBsaXN0cy5zcXVlYWtmb3VuZGF0aW9uLm9yZwpodHRwOi8vbGlz dHMuc3F1ZWFrZm91bmRhdGlvbi5vcmcvY2dpLWJpbi9tYWlsbWFuL2xpc3RpbmZvL3NlYXNpZGUK --===============3314586771546843755==--