Over a million developers have joined DZone.

Hacking with JavaScript for Fun and Profit

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

JavaScript has become an incredibly versatile and well-used language over the past decade. It’s found its way beyond simple scripts into full-blown web-applications on both the client and server-side of the stack. JavaScript frameworks are as ubiquitous on the web as HTML, improving page load times with asynchronous calls, look and feel with moving layouts and animations, and providing the rich web experience that many of us now take for granted. Understanding and writing JavaScript will allow you to manipulate the DOM of any webpage and interact with web apps in ways that would previously have been impossible.

A large portion of my career to date has been what some call “paratrooper programming,” or being dropped into a new code-base, often lacking in substantive documentation, and being expected to work within the representative framework quickly. Working mostly in the web this has yielded a set of skills conducive to taking apart web apps from any angle. In my spare time I have been known to write JavaScript to build one-off functions intended to simplify or enhance a webpage, creating wrappers for existing services, as well as create JavaScript-based browser extensions that modify the DOM (Document Object Model) of a webpage or even the browser itself.

Have you ever been to LinkedIn and began perusing through the seemingly endless list of people suggestions? Why isn’t there a filter built into this so you can avoid recruiters, people from previous companies, and so on? This presents the perfect opportunity to build a console-driven script to filter these suggestions by keyword (http://jbegleiter.com/blog/35), allowing you to filter based on a bad keyword list and a superseding good keyword list (warning, trying to filter too much at once may freeze your browser temporarily as the script runs in the foreground).

Holidays are just around the corner and you’re browsing Amazon, finding a vendor that has thousands of ratings, most of which are good, but don’t you want to find a list of just the lowest ratings for an Amazon vendor? Time to decompose the way Amazon finds vendor ratings and then display the results to the user (http://jbegleiter.com/blog/23); luckily both Amazon and Amazon Canada allow for cross-domain JavaScript requests. Have you ever seen a really cool framework and wanted to change it to suit your needs? By now you should be able to guess, JavaScript is the answer (e.g., my blog implementation using reveal.js)!

You can also develop cross-browser extensions in JavaScript (e.g., using the Crossrider framework). I’ve developed multiple extensions that use different pieces of the framework: one (ASCIIfier) that transforms images into ASCII art via the right-click menu; another (Filterest) automatically filters Pinterest “pins” using an easily configurable keyword selector and updater; another (Discoverizer) analyzes user-submitted content from Stumbleupon. The first uses framework-specific implementation to store ASCII art and unpack it on a given website, where the latter two update the DOM and hijack existing JavaScript events and endpoints of the respective host sites.

The latter browser extensions become activated when on the webpage of the host, hook into the DOM of that page, and add HTML, CSS, and JavaScript elements in the form of buttons, drop-downs, and binding certain page and element events. Filterest binds page events used to load more items onto a Pinterest page with additional JavaScript, which determines the keywords for the “pin” and adds the necessary HTML to each one, allowing a user to filter on those keywords. The Discoverizer actually hooks into existing web services provided by Stumbleupon and executes them within the Stumbleupon domain, allowing users to enjoy an extension to Stumbleupon functionality without requiring cross-domain JavaScript or JSONP!

Discoverizer in action

In all of these cases I am really doing the same set of tasks. I load the page and inspect the DOM; understanding the way the DOM is setup will allow you to navigate it easily using pure JavaScript or jQuery. This helps me to visualize my goal and assign “entry” points into the DOM, or places that I will hook into or hijack. Once I’ve determined what it is I want to do and where it needs to go in the page I begin looking at the operations of existing scripts. This mostly entails looking at XHRs (XML HTTP Requests) when performing the action that I would like to hook into (in the case of Filterest) or hijack, manipulate, and/or reuse (in the case of Discoverizer); this can be done in any of the built-in developer tools of any browser. This requires some care, as you do not want to double-bind the event of an element. Lastly I develop a front-end, something simple that will present the functionality to the user; once again you must be careful to avoid overwriting existing style.

XHR in Firebug

The scripts, wrappers, and extensions above illustrate the many and varied uses of JavaScript when hacking web applications for fun and profit. These skills have helped me in my professional life, allowing me to dive into unfamiliar, undocumented web applications and tracing them through from client invocation to server-side actualization. By developing these skills you’ll become more comfortable dropping into unexplored frameworks and become familiar with the ways in which real and popular products are implemented.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}