JavaScript Tip: Console.log

In JavaScript development, a very useful method for finding out the details about a JavaScript item (variable, object, property, etc) you have, is the console.log() method. This allows you to place things in the console rather than somewhere on your page (like using an alert() method).

Browser Support

  •   Chrome, Safari, Opera: native console.log()
  •   Firefox: native console.log() with Firebug
  •   IE9: native console.log(), but it needs Develop Tools to be turned on first.
  •   IE8: Do not bother, use Firebug Lite instead.

JavaScript Tip: Event Registration

JavaScript normally runs code sequentially, which means in the order that the browser reads it from your file, but we can write JavaScript code that will run only when something happens in the browser. That’s because browsers can trigger events, when things happen to elements on your page.

When the page loads in a browser, when the user moves the mouse over a link, when a video has finished loading, or when a form is submitted are events. So if you want to take care of a task when something happens you have to capture that event, and that’s done through a process called event registration.

This means telling the browser that you want to do something when an event takes place, and there’s several ways of doing that. Some are more compatible with older browsers than others.

The first (but legacy) way of doing this is by using tag attributes, and this works pretty simply.

Continue reading

JavaScript Tip: null

You can use null to explicitly indicate that an object property does not contain a value. Typically, if a property is set up to contain a value, but the value is not available for some reason, the value null should be used to indicate that the reference property has an empty value.

For a variable that has a value of null, the typeof operator returns ‘object’. If you need to verify a null value, the ideal solution would be to see if the value you are after is equal to null. Below, we use the === operator to specifically verify that we are dealing with a null value.

When verifying a null value, always use === because == does not distinguish between null and undefined.

JavaScript Tip: Nested Arrays

Sometimes, you’ll need to store an array within an array. Sometimes, you’ll require even more nesting.

Note: although it’s possible to nest a number of arrays, I’d advise against it, as working with many array indices can be confusing to work with.

Let’s start with two simple arrays, which we’ll call them x and y. We’ll fill x with some values:

Continue reading

JavaScript Tip: Reading from an Object

Reading a value from an object can also be accomplished using bracket or dot notation:

Unlike arrays, it’s not possible to read the contents of an object using a numeric index. The only type of index that can be used is a named one:

JavaScript Tip: this and Objects

When a function is created, a keyword called this is created (behind the scenes), which links to the object in which the function operates. Said another way, this is available to the scope of its function, yet is a reference to the object of which that function is a property/method. So every function, while executing has a reference to its current execution context.

Continue reading

JavaScript Tip: Iterating over an Object

Iterating over an object isn’t as simple as looping over an array. With an array, you simply increment an index value and use that to step through the array. With objects, there is no index value.

Objects are collections of key/value pairs, so you need to step through them differently:

Continue reading