There are touch events in client side javaScript than can be used to bring interactivity to a javaScript project via touch screens rather than just using mouse and keyboard events only. There are several events of interest when it comes to touch events namely touch start, touch move, and touch end.

There is of course also using mouse events with touch events and keyboard events to help bring a more general way of interactivity to a project that will work on a wider range of client systems in a uniform kind of way. I have worked out a canvas example that makes use of touch events as well as mouse and keyboard events that acts as a kind of grand central input controller of sorts.

Still if you have a large volume of traffic coming to a project that is from clients that are using a mobile device it might be nice to add some custom functionality for those kinds of clients. For example making use of multi touch while making it so the project can still be used by systems that may not support touch events. So in this post I will be covering some basic examples of using touch events with javaScript.

Read More

The JavaScript style API is one way to go about changing CSS values with a little javaScript code rather than just plain old static hard coded CSS. This is not to be confused with a javaScript coding style, which is of course a whole other subject that might be though of as another kind of javaScript style.

There are other ways of changing CSS values with javaScript such as changing the className property value of one or more elements with respect to a collection of hard coded CSS classes to work with. In some respects this might prove to be a better option, client side javaScript is not meant to be a replacement for HTML and CSS, if you are using javaScript to do everything in your site I would say that you might want to rethink your approach.

The style API is not the best choice for doing anything that might involve complex animations, or a great deal of rapid fast change, for those kinds of effects there are canvas elements, SVG, and CSS3 animations to work with all of which might prove to be better options. There are many tools to a web developer and the style API is not always the best tool for the job, but it is there, and in some cases the use of it may be called for. So lets take a look at the style API in javaScript today, and while I am at it I might touch base on a whole other little aspects of client side javaScript in general.

Read More

In javaScript SVG or Scalable Vector Graphics graphics are an option for making vector graphics with javaScript, inline tags, or an external file format. The process of making SVG by way of hand coding it is to make use of a number of standard tags or nodes that have to do with defining what a graphic is. These nodes are not standard HTML elements, but they work in a very similar way to them, so it is an HTML like kind of way of making vector graphics that can be scaled up and down by just chaining some values in the root element. So it is easy to mutate such tags with javaScript code in a very similar fashion to that of mutating the Document Object Model of plain HTML nodes. Also just like with html elements there are ways of creating and injecting svg nodes as well as mutating the values of svg nodes using javaScript which is cool.

When it comes to making graphics with javaScript there are a number of options these days, including the 2d canvas drawing API which is often the preferred raster graphics option. However svg is a vector based graphics solution rather than the raster based graphics used in canvas. So Scalable Vector Graphics is still a viable option for creating on the fly graphics with javaScript.

Truly getting into SVG might require reading not just one but several posts on the subject, I am not sure if I really want to get into the depth of SVG myself. However it is certainly something that I should write at least one post on. So this will be just the usual basic getting started post, and if I get some time maybe I will expand the content on this post as needed.

Read More

Sometimes it is called for to do something that involves the use of an iFrame element, when it comes to developing a client side system with javaScript. An iframe is a way to have another html page inside an html page, when it comes to javaScript it is also a way to have another window object to work with.

Thats is that I can have a completely separate window object that will not collide with the what is going on in the parent window object. However doing so WILL NOT result in a separate event loop when it comes to running javaScript on the page as a whole. Both the javaScript code that runs in the parent window object, as well as any iframes will share a single event loop. So iframes are not an alternative to something such as web worker, and when it comes to rending in a page there is still one main thread for that.

The subject of iframes can become a little complicated there is much to write about with them when it comes to more advanced topics involving hidden iframes, and security concerns when with things like click jacking that ca be preformed with iframes. So in this post I will be sticking to just the basics for now as many of these other topics are matters for another post.

Read More

When it comes to writing modern javaScript code the let keyword is available for declaring block level, rather than function level scoped variables. When it comes to getting into variable scope that might be a topic for another post, but I will be touching base with that here as it is called for when it comes to any post that has to do with the let keyword compared to traditional option known as var.

When it comes to a node.js environment where I have control over the version of node.js is used, and can use a modern version that supports let there are not any concerns when it comes to the question of code breaking on older platforms. At least when it comes to me using my own code in may own environments where I know that will never be the case. That issue is of greater concern when it comes to front end development where there is less control over the environment in which the javaScript code runs when thinking about older browsers. Still as time goes by this will become less of an issue, and block level scope for me is a welcome addition to javaScript, so in this post I will be writing about some concerns when it comes to the use of let in a javaScript project.

So the time will come when there will be basically no point at all of using the var keyword anymore for the same reasons why it no longer makes sense to go out of ones way to make sure that their code will not break in Internet explorer 5. It is all about looking at the browser vendor and version data of a sites analytics, and when I do so it looks like most people are using modern evergreen browsers these days. So if it has not happened for you yet it is only a matter of time until it is just a question of using let, const, or both. If you do want to just use only one, like the good old days of var only, then the choice is clear, the choice is let, so lets get into why that is.

Read More