Doejo Dev Sessions: The value and functionality of JavaScript

Doejo Dev Sessions is an ongoing series exploring the development side of Doejo.

After exploring Ruby on Rails and the development of Android apps the copywriting team at Doejo is ready to tackle JavaScript.  JavaScript is a scripting language used on most websites to add functionality, customize page appearance and communicate with the server.

In spite of its muddled reputation to outsiders, JavaScript is one of the world’s most popular programing languages. Used mainly to manipulate the elements on the page, JavaScript is incorporated into almost every website we design in-house.

JavaScript works together with HTML and CSS (Cascading Style Sheets) to provide users with helpful feedback, validate forms and create simple animations. It also helps to improve visual displays, increase user interactivity.

A major asset of JavaScript is that it lets users access new data on the page without refreshing it because the page does not need to constantly reload the speed and overall user experience of the site improves.

Most developers use JavaScript libraries such as jQuery and Prototype. These libraries simplify the JavaScript language to make it faster, more concise and easier to work with. Javascript libraries are often used in conjunction with plugins. These plugins allow JavaScript sites to host photo galleries, dialogue boxes and a plethora of other elements that boost user experience. This allows developers to quickly create powerful web pages without wasting time writing unnecessary code.

Other ways to add content and cut down on writing code for JavaScript is to include Application Programing Interfaces or APIs. Examples of JavaScript APIs include Google Maps, Facebook, and Twitter. JavaScript works with APIs to pull, push and manipulate data from these popular web services.

These APIs let developers embed outside content transferring it directly to the page. Content that is frequently transferred includes photos from Flickr, comments from Twitter and video content from sites that are served by another host. In the case of Doejo’s Map of the Dead the Google Places API was used with the Google Maps API to plot location-based data of pre-sets like hospitals and campgrounds. 

For those that are unfamiliar with the scripting language, the capabilities of JavaScript are easier to understand and identify once you are aware of your everyday interactions with them. Below we talk you through some projects we’ve developed and explain their JavaScript components: 

Vista College Search:
This college navigation resource site that helps high school students through the admissions process employs JavaScript APIs and the jQuery UI library. The Google Places API interacts with Google Maps and the site’s college database, communicating location-based data directly to the site. Users can view this interaction by scrolling over the regions on the left side of the page, causing the sections of the map to turn green without clicking on anything. Other intuitive JavaScript functions include autocomplete and a box that appears after choosing a major, giving users the ability to customize their results.

BookYap:
This recommendation-driven book resource takes full advantage of JavaScript’s capabilities. After entering a book they love, users can see quick descriptions of their recommended books by simply hovering their mouse over one of the books cover photos. They can then filter their results by book length, current hype and publication date using the sliders on the left side of the screen. JavaScript has also been incorporated to assist those looking for something more specific: clicking on a simple ‘Browse’ button leads to a dropdown menu with over 25 book genres.

TextHog:
One of the first message-based expense reporting mobile platforms, the desktop component of TextHog makes ample use of JavaScript. In the FAQ section of the site users can jump directly from their question to the answer by clicking on their chosen question from an organized list on the top of the page.  Other JavaScript on the site includes the drop-down menus in the sign up form, an expense calendar that lets you easily toggle through recent months while imputing expenses and the monthly budgets section where you