Chapter 7. Unobtrusive JavaScript

In this chapter you will learn:

• Writing "Hello World" unobtrusively
• Creating a glowing "submit" button with the event listener
• Making a button stand out when you hover over it
• Resizing an element with unobtrusive jQuery
• Masking a password with unobtrusive JavaScript
• Using an event listener to animate an image shadow

Introduction

The concept of unobtrusive JavaScript fits right into responsive design. By keeping your interaction layer at an arm's length from your presentation layer, you can build a great degree of flexibility into your web app. Because mobile devices have very different input methods, you may need to call a function through a different event. You may want to create a desktop version of a page with JavaScript and use jQuery Mobile instead for your mobile version; with the same template files, by using unobtrusive JavaScript, this is not a difficult task.

Writing "Hello World" unobtrusively

An important...