How to Detangle Your JavaScript


JavaScript is a beautiful language, and JavaScript code can be written to be as obvious as code in any other language. But in practice it often looks like a tangled mess, even to experienced developers. Techniques from a simple example in a blog post don't always scale, and using them in a larger project such as a Drupal module can lead to code that's hard to read, difficult to maintain, and confusing for newcomers. In this session you will discover exactly what it is that makes so much JavaScript code difficult to understand, and learn practical techniques for reworking that code into something you -- and others! -- can easily read and maintain.

This session is packed full of live examples, and promises to demonstrate things you probably don't even know about the language. Expect to find answers to questions about event handling, object prototypes, closures, and variable scope. We'll follow up afterwards with a question-and-answer session in BoF format for those who are interested.

Intended audience: 

If you can get JavaScript to work but don't really understand what you're doing and why, this session is for you. Experienced JavaScript developers who don't often use object prototypes will also gain valuable new techniques they can put to work right away.

Questions answered by this session
Question 1: 
How do event handlers work?
Question 2: 
What is a "prototype" and why would I use one?
Question 3: 
What is a closure?
Question 4: 
How do I debug Javascript code?
Question 5: 
How can I write JavaScript that others can understand and modify?
Your rating: None Average: 4.1 (52 votes)


Will you be leveraging a

Will you be leveraging a Javascript framework like jQuery during your presentation? I'm curious as to why it's not mentioned here, yet considered the de facto method of writing Javascript for Drupal. What about behaviors?

jQuery and Drupal.behaviors

Both jQuery and Drupal.behaviors will certainly appear in our demonstration code, but they're orthogonal to our topic. jQuery lets you do great things with cross-browser DOM manipulation, event binding, and animation, and Drupal.behaviors gives you a convenient place to put your code so it gets applied correctly to all new content. But that's all they're meant to do. They don't dictate your object structure, or automatically make your code easy to read and maintain, or help you understand why your variables drop out of scope if you don't write your event handler as a closure. That's where we want to focus.

Diamond Sponsors


Platinum sponsors


Gold Sponsors

Treehouse Agency
Drupal Connect
Chapter Three