Easier JavaScript with

jQuery
VS2010



Robert MacLean
www.SADev.co.za | @rmaclean

mvp BBandD

WELCOME!!!! This is the notes slide where I will write about things I am going to talk on. Weldone for finding the not so secret notes ;)
What is jQuery?
Why do we need it?

JavaScript can get complicated

var tables = document.getElementsByTagName('table');
for (var t = 0; t < tables.length; t++) {
  var rows = tables[t].getElementsByTagName('tr');
  for (var i = 1; i < rows.length; i += 2) {
    if (!/(^|s)odd(s|$)/.test(rows[i].className)) {
      rows[i].className += ' odd';
    }
  }
}
Why do we need it?

jQuery can make it easy

jQuery('table tr:nth-child(odd)').addClass('odd');
Why do we need it?

Separation of concerns

<a href="#" onclick="alert('hello');"><font color="#ff0000"><strong>Click Me</strong></font></a>

Separation of concerns is a web dev principal. We have been using it for years with seperating the concern of content (i.e. HTML) and display (i.e. CSS). It's logical that we do the same with JavaScript, we seperate it from the html. What does that mean? Seperate JavaScript files? Not at all - think the onclick event handler on almost anything in HTML, that is tightly linking the javascript to the element - even if it calls a javascript method in a seperatye file. Separation means that something externally attaches the javascript to the element at runtime, like CSS does for design.

Why do we need it?
Separation of concerns - Good 
.clicker
{
    color: #FF0000;
    font-weight: bold;
}
Why do we need it?
Separation of concerns - Good 
.clicker
{
    color: #FF0000;
    font-weight: bold;
}

$(document).ready(function(){
    $(".clicker").click(function(){
        alert('hello');
    });     
});
Why do we need it?
Separation of concerns - Good 
.clicker
{
    color: #FF0000;
    font-weight: bold;
}

$(document).ready(function(){
    $(".clicker").click(function(){
        alert('hello');
    });     
});
                            
<span class=”clicker”>Click Me</span>
Why do we need it?

Wow Factor

Why do we need it?

Wow Factor

Why Visual Studio 2010?
*YAWN* Can we see some demos now?
The goal:

Use VS2010 + jQuery to show off my
Points

Remember it's not the size of the points that matter, it's how you use them.

*YAWN* Can we see some demos now?
refresh
Thanks!