Javascript Developer, London

Javascript

Learning native Javascript was the inevitable step having used the jQuery and jQuery Mobile frameworks in great depth. There are a number of Advanced Javascript examples in the Object Oriented Javascript section here.

Since using the jQuery framework, i now also have considerable experience with handcoded native Javascript.

Javascript itself has become an important tool to most front-end web developers in recent years having initially been misused for purposes that gave it a bad name in the web development world.

Javascript application frameworks have also started to appear in recent years and the most popular of those have included the likes of Angular, Backbone, Ember and Knockout. These each offer ways of developing applications far quicker and with a lightweight framework ideally suited to many devices.

Native Javascript is now more robust and also used by developers to add useful functionality and improve usability when before it could work the other way.

AJAX was a significant development in the history of Javascript and offered developers the opportunity to update content on the fly, without refreshing the browser. Object Oriented Javascript is also the preferred way, currently, to construct Javascript elements whilst JSON is a helpful way of transferring data.

You will find examples of my work using each of these topics further down the page. Additionally, as Javascript has become more readily used in different web applications, there has been a growing need for stable testing methods and they are also discussed in this section.

Advanced Javascript: Improving Performance

Performance has always been a significant consideration when choosing between technologies and features for your websites and whilst connection speeds have increased in recent years there are now small devices to cover too, such as mobile phones and tablets which may not have the same processor speed or graphical capabilities for desktop computers.

Selecting elements of the DOM is a common task with in most jQuery or Javascript functions and this is one area in which performance can be considerably improved by optimising the selection of elements. You will see some examples below of different ways of targeting elements with in your code, alongside explanations of how far each one can be processed by major browsers.

                                
                                $("#myid"); // jQuery selector through ID
                                $(".myclass"); // jQuery selector through Class
                                $("[alt='']"); // jQuery selector through attribute selector

Advanced Javascript: Caching Objects

Where there are properties or array items that you will use several times, such as with a standard loop, then it is always faster to assign them to variables first.

                            /* Slower Example */  
							for(var i = 0; i < obj.prop.arr.length; i++) {
                            	console.log(obj.prop.array[i]);
                            }
                            
                            /* Faster Example */  
                            var a = obj.prop.arr; /* Assign to variable */
                            var len = a.length;
                            for(vari = 0; i < len; i++) {
                            	console.log(a[i]); /* Loop through variable */
                            }

Advanced Javascript: Managing Scope

An effective management of your scope with in Javascript can really help to improve the performance of your application. Consider both the object and prototype chains when picking up objects and their own elements.

Advanced Javascript: Traversing the DOM

Generally speaking, selection of elements by ID will be the fastest way to select a specific element in a DOM. Sometimes this may not be possible, or an alternative may perhaps leave cleaner code, in which case a balance must be struck. It is always worth trying out a few and testing their relative speed in order to pick the best.

Using more specific selection criteria will also speed up your application, with id or tag name helping to then find a child element faster.

                                
							$("#i1 div.c1"); // Specific with ID and Tag = Faster
                            $("[alt='']"); // Selecting directly by attribute = Slower

Advanced Javascript: Modifying the DOM on the Fly

Javascript and the jQuery framework can be used in many different ways to amend DOM elements on the fly, but some are more advisable than others for a number of different reasons. For example, you may wish to alter the CSS properties of an element, and this can be done directly, leaving inline style changes with in that element, or by instead adding and removing a class which will have those same attributes appended to it.

Using classes rather than direct style changes provides a more manageable codeset and also keeps the Javascript easier to read and more stable. Toggling classes also means that those with skills in CSS but not jQuery or Javascript can also amend elements of the frontend without risking errors in the scripts, which would lead to all manner of bugs.

                                
                                // Native Javascript toggle class
                                // Native Javascript set css attribute directly
                                $(.element).toggleClass("bordercolor"); // jQuery toggle class
                                $(.element).css({border: "red"}); // jQuery set css attribute directly

You may also wish to add new elements into the DOM rather than just re-styling what is there already and this is also relatively straight forward using either Javascript or a Javascript framework. There are plenty of jQuery preset functions for adding in HTML in various ways, such as before, after or inside existing elements. In most cases it is best to have the HTML already generated with in the DOM and then show/hide the element as needed, rather than having strips of HTML being placed directly into the script itself.

Javascript Topics

Leave a Reply

Your email address will not be published. Required fields are marked *