After getting a "Hello, World!" WebAssembly
application working I thought it would be fun to try and implement a toy programming
language in the browser. However before I could even start thinking about parsers,
abstract syntax trees and the like I had to be able to pass strings between my
WebAssembly module and the surrounding JavaScript.
This post makes use of a number of interactive elements to help illustrate a few
concepts. Unfortunately these do not yet work on mobile devices - sorry mobile
users!
I have for quite some time now wanted to play around with web development some
more, particularly using web technologies to build user interfaces of some
kind. However there is just so much out there it’s been impossible for me to
really get anywhere past a “Hello, World!” tutorial before I find myself trying
out the next new shiny.
So I’ve decided to abandon everything and try a bottom up approach where I see
how far I can push the core web technologies - HTML, CSS and
JavaScript. Hopefully then by the time I start using one of the gazillion
libraries out there I will have a better understanding of why I
needed it in the first place.
In this post I will be looking at implementing clicking and dragging
functionality using only vanilla JavaScript. Clicking and dragging as a concept
can apply to many kinds of interactions so in this instance I’m specifically
referring to clicking on an SVG element moving it around on the page as
illustrated by the demo above.