Click here to Skip to main content
13,861,621 members
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

9.6K views
3 bookmarked
Posted 14 Mar 2012
Licenced CPOL

Unobtrusive JavaScript with HTML 5

, 14 Mar 2012
Rate this:
Please Sign up or sign in to vote.
Unobtrusive JavaScript with HTML5

HTML 5 supports a new feature known as Custom Data Attributes. These attributes give us the ability to define custom attributes for ANY HTML tags. The only restriction is that the tag must start with “data-”. For instance, we can add a custom attribute to a link as follows:

<a href="#" data-search-by-type="<value>">My link with custom attribute</a>

This feature comes with a neat benefit that we no longer need ANY inline JavaScript inside our HTML content. For instance, say, we’ve got a commonly-used JavaScript function that performs a search by searchType:

function search(var searchType)
{
   ...
   ...
}

Prior to HTML 5, we would invoke the function using inline JavaScript inside our HTML tags:

<a href="javascript:search('byName')" 

class='search-link'>Search By Name</a>  
<a href="javascript:search('byType')" 

class='search-link'>Search By Type</a>

With the introduction of Custom Data Attributes, we can now completely do away with the in-line JavaScript and write the links as follows:

<a href="#" data-search-by='byName' 

class='search-link'>Search By Name</a>
<a href="#" data-search-by='byType' 

class='search-link'>Search By Type</a>

We would then add the following to our common.js file that contains the search() function:

$(document).ready(function() {
  $(".search-link").click(function () 
  { search(this.getAttribute("data-search-by")); })
})

The Custom Data Attributes in HTML 5 give us a benefit that is similar in nature to the benefits provided by the CSS model – namely, separations of concerns. CSS enables us to separate content from the presentation of that content, thus enabling our HTML pages to follow a well-defined structure.

Similarly, with Custom Data Attributes, we can now separate logic or functionality from HTML content. This provides us with the following benefits:

  1. We no longer need to pollute our HTML with in-line JavaScript.
  2. Keeping all our JavaScript functionality centralized makes it much easier to manage.
  3. The use of Custom Data Attributes increases code re-usability since they can effectively serve as parameters to our JavaScript functions.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Nizar Noorani
Software Developer (Senior) NCube, Inc.
United States United States
Nizar Noorani is an independent software consultant. He provides services in the areas of web applications and systems architecture, analysis, design and development. Although proficient in a variety of technologies, he specializes in the .NET technology. He can be reached at nizar.noorani@gmail.com.

You may also be interested in...

Comments and Discussions

 
Questionuse data-attribut directly Pin
Member 872836814-Mar-12 4:39
memberMember 872836814-Mar-12 4:39 
AnswerRe: use data-attribut directly Pin
Nizar Noorani14-Mar-12 4:52
memberNizar Noorani14-Mar-12 4:52 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04 | 2.8.190214.1 | Last Updated 14 Mar 2012
Article Copyright 2012 by Nizar Noorani
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid