In javaScript Numbers are a central part of just about any project. Much of programing has to do with working with magnitudes that are well represented with numbers. For example say I am working out a simple example that has to do with a point in a 2d grid, numbers can be used to represent the x and y position of that point in the grid. Numbers are also used when it comes to representing things like an angle between two points in a grid, and the number of frames that are to pass when a point moves from one location to another, just to mention a few examples where Numbers will come into play. So doing just about anything interesting with javaScript will require at least some basic understanding of how numbers are handled in a javaScript programing environment.

Working with numbers in javaScript might be a little easier compared to other environments as there is only one Number data type, or at least that is the case traditionally. There is also a new BigInt constructor also, but that is a matter for another post.

In this post I will be going over some of the basics when it comes to just plain old javaScript numbers. There are a few thing to be aware of when working out expressions, and may other little things here and there that one might only become ware of over time. So I will be touching base on at least some of theme here for what it is worth.

Read More

When writing a function in javaScript, inside the body of that function there is an special local variable that can be used to access any and all arguments that have been passed to the function when it is called. This variable contains a value that I have come to known as the javaScript arguments object.

The javaScript arguments object is an array like object that is formated like and Array, but is not actually an instance of an Array. What I mean by that is that it is an object with numbered public key names, and a length property just like that of an array. However because it is not actually an array it does not have array prototype methods at the ready like Array.map, Array.filter, and so forth.

This object of arguments can be used to find out things like the number of arguments that was given to the function when it was called, along with the values of each argument as one might expect. Because it can be used as a way to know how many arguments where passed when the function was called the javaScript arguments object can be used to make functions that behave differently depending on the number of arguments given to the function when it is called. So if you ever come across a function that behaves differently depending on the number of arguments given to it when it is used, then the arguments object is one way to go about making such a function.

So then this post will be on a few quick examples that make use of the arguments object to help show why this object is useful in many situations when writing functions. In the process I might also manage to touch base on some related topics such as the Function.length property that might also come into play when doing something with this special object in javaScript functions.

Read More

In javaScript script tags come into play with web development when I want to do anything that involves the use of client side javaScript in a website. Script tags can be used to add in line javaScript by placing javaScript code between and opening and closing script tag. In addition script tags can also be used to link to external javaScript files by making use of an src attribute of the script tag element to point to the external javaScript file.

It is also possible to create javaScript script tags with javaScript also as a way to load additional external javaScript file assets with javaScript code. Just about any script loaded would have to do that as a way to inject additional code more often then not because other options such as eval bring about problems with speed and security. In this post I will be sharing all the little things there are to know about when working with script tags to get things working with client side javaScript.

Read More

In javaScript event listeners are methods that fire some javaScript code when a given event happens such as the user clicking an element, resizing a window, or leaving a page for another. There are all kinds of addition events that have to do with user input when working with input elements such as on focus, on blur, on change, and events that have to to with keyboard events, and pointer devices such as a mouse and touch screens. Each of these kinds of events are used with a callback function, and in this callback function one has access to an event object that has all kinds of useful data about the event.

Event listeners can be used to create an application that is event driven in place of, or in combination with, some kind of of main update loop that mutates state and renders that state to a view. In many projects events are used at least to some extent as a way to capture user input from mouse clicks, changes to text area or input elements, or any other means in client side javaScript. In this post I will be covering the use of addEventListener as a way to attach events to elements in client side javaScript.

There will be a few examples where when it comes to just using that event to attach handler functions, but I will not be getting into detail about every little event, as well as real full blown examples that make use of event handers and many other aspects of a full application. For that it might be better to look at some of my canvas examples, many of which use event handlers when it is some kind of project the works with user input or anything that requires the use of event attachment.

Read More

With client side javaScript projects the innerHtml property of an element reference can be used as a way to create and append additional HTML with just a string representation of the desired markup. This might often prove to be a more convenient way of adding HTML code to a page compared to creating nested nodes created with a method like document.createElement and then adding them to hard coded html by getting a element object reference and calling the append child method of the said element object reference.

The nice thing about innerHtml is that it is very easy to use, but there are some security concerns with the use of innerHTML that are of concern. Maybe the security drawbacks are not a big deal when it comes to simple JavaScript examples, but might present problems when working on a more complex project. Many of the concerns stem from html strings that might be subject to user input that might not always be property sanitized, resulting in the possibility of html injection.

The good thing is that using innerHTML is not the only option when it comes to creating and adding elements in javaScript, and it may be best to learn a thing or two about what those alternatives are when it comes to displaying data in a client side javaScript project of some kind. In this post I will be focusing mainly on examples that showcase the use of innerHTML to start off with, then some other topics that branch off from the use of that client side javaScript feature as the way to go about displaying data and results in a web page. There is also not just thinking in terms of using DOM elements as a way to display info as there are other options such as SVG as well as options that can be access threw the DOM such is the case with canvas elements.

Read More