The on blur event in javaScript is an event that fires when an element no longer has focus, in other words it is the opposite of the on focus event. However if you do not know what it means for an element to have focus, then maybe we should back up a bit and start with that before moving on with some code examples on this one.

A focus event fires when the user focuses on an element like a text input element by clicking on it or cycling to it with the tab key on a keyboard. When working out a user interface you might want some code to run when an element that can be focused on gains this focus, but you might also want some code to run when that element looses this focus, and that is where the on blur event comes into play.

So then a blur event fires when an element losses this focus, once it has been acquired in the first place. An on blur event will only fire for elements that can gain a focus, such as input elements. However it is possible to set other elements that can not be focus by default with the tab index property. In this post I will be going over some examples that make use of the on blur event with plain old vanilla client side javaScript, rather than a certain front end frame work.

Read More

When first starting out with front end javaScript code examples the javaScript alert method is something that often comes up on the open Internet as a way to log or display something. This might be okay for very basic code examples, but will quickly get annoying, and thus it makes sense to look into other ways to go about alerting the user to something.

There are many other options for what the javaScript alert method is typically use for that might prove to be more practical. There is the console.log method for course that will often prove to be a better choice for debugging, but even that might prove to fall short in some situations. I often find myself making use of dom manipulation methods, to create some kind of view for the current state of things. There is also making use of some kind of once method that will just fore the first time something happens that is another tool in the tool bug for debugging, and displaying the first instance of some kind of state that is causing problems.

In addition even when it comes to making a finished product the use of the javaScript alert method is not always the best way to go about alerting the user to something in a client side javaScript environment. There ar a number of other ways to do so such as changing the value of the title text of a page, and creating, injecting, and then removing a new element into the page and so forth.

In this post I will be giving a quick overview of the window.alert method in client side javaScript as well as a few other alternatives for logging things out, or displaying something other then the javaScript alter method. As the alert method is not always the best choice for debugging.

Read More

The javaScript onfocus event is an event that will fire when the user sets what is often called the focus on an element. This focus typically will happen when a user clicks on an element for example, but there are other things that can happen that would trigger such an event. For example it can also happen by using the tab button to cycle threw elements that can be focused in desktop environments such as input elements.

In addition to setting the focus of an element by clicking on an element, and using the tab key on a keyboard, there are also ways in which a focus event can fire by way of javaScript code. The typical way to do so would be by using an element reference object method such as the HTMLElement.focus method. So there are ways that a focus event can fire by way of user action, and there are also ways to which a focus event can be simulated by way of javaScript code.
There is also the question of what elements can be focused on and why. There is also how to go about making an element an element that can be focused on with the tab index property.

In addition there is also the on blur event that will happen when an element loses this focus after it has gained such a focus. The javaScript focus event along with blur, onkeydown, and on change are often used all together when working out some kind of user interface that makes use of one ore more input tags.

In this post I will be covering some quick examples when it comes to working with focus javaScript events, how to attach handers for such events, and how to simulate them, and also how to make elements that can not be focused by default focusable.

Read More

The onchange event is for attaching events to an input element that will fire when the value of an input element changes. A handler for this kind of event can be attached via the onchange property of an input element, or via addEventListener and using the change value for the type argument. This is one of many events that a client side javaScript developer should be aware of when making any kind of user interface that involves the use of html input tags to gather information or change settings for a client system.

So then there are many other events that come to mind also that are important to the process of user Interface design such as onblur and onfocus, just to name a few. In addition events like onkeyup can be used to track changes to the value of an input tag as they happen on a per key stroke basis. Still the onchange event might prove to be an important event un the process of making a user interface as it is the event that will fire when a value actually changes in the input tag, rather then it being in the process of changing.

So then in this post I will be going over some quick examples of the onchange event in client side javaScript, and I will also be touching base on a whole bunch of related topics. This post will start out with a real basic onchnage event example for beginners, but then progress into some more interesting examples at the bottom of this post.

Read More

The document.body property of the document object in client side javaScript is a reference to the body element in an html document. So the property is a way to go about getting a reference to the main body element without having to assign and id value or class to it which is silly sense there is always, or at least should be only one body element in an html document.

The body element is where all additional elements will be placed that have to do with the documents layout and structure, of course you should all ready know that if you are getting into javaScript now, if not maybe you should take a step back and review html a little more before continuing.

In this post I will be covering some topics when it comes to the document.body property that can be used to quickly reference this html element. The property is one of many ways to go about getting a reference to an element in client side javaScript, but I often use this property if it is the body element alone that I am interested in. So lets get a few quick examples out of the way with this one so we can continue on to something more interesting.

Read More