JavaScript Fundamentals: Development for Absolute Beginners

By: Bob Tabor

Download the entire series source code here.

JavaScript Fundamentals

This course is divided in 21 parts:

  1. Series Introduction
  2. Writing your First JavaScript Application
  3. Dissecting the First JavaScript Application You Wrote
  4. Writing JavaScript in Visual Web Developer Express Edition
  5. JavaScript Variables, Types, Operators, and Expressions
  6. Conditional Logic in JavaScript
  7. JavaScript Functions
  8. JavaScript Arrays
  9. Looping Statements in JavaScript
  10. Understanding Function versus Global Scope
  11. Working with External JavaScript Files
  12. Organizing and Simplifying JavaScript with Object Literals
  13. Understanding the Document Object Model
  14. Getting Started with jQuery
  15. jQuery Selectors
  16. jQuery Events
  17. Installing and Utilizing jQuery Plugins
  18. Unobtrusive JavaScript
  19. Using jQuery to Retrieve JSON via AJAX
  20. Fundamentals of JavaScript Closures
  21. Series Wrap-Up

URL: http://channel9.msdn.com/Series/Javascript-Fundamentals-Development-for-Absolute-Beginners

Source: Channel 9

JSON Object with integer values as key attributes

Using JSON object selection to paint the output based on descending key values.

JSON Object:

var popularObj= {
“89”:”animation”,
“71”:”apple”,
“64”:”barbara beery”,
“48”:”video”,
“39”:”cheese sticks”,
“29”:”games”,
“28”:”bbq pork sticks”,
“27”:”asian chicken tenders”,
“25”:”bake”,
“24”:”banana”
};

Problem:
The requirement was to paint only the values in descending order as they are the popular searches within the website. Whether we use for in loop or jquery each construct which does the same thing if the variable is an object, our results were varying across browsers namely Google chrome. The reason being in chrome, the key values were seen as array index instead of object key properties. The key values here were treated as indexes (integer indexes) and were painted in reverse order.

In Firefox and IE, we will get

“animation apple barbara beery video cheese sticks games bbq pork sticks asian chicken tenders bake banana”

and in chrome

“banana bake asian chicken tenders bbq pork sticks games cheese sticks video barbara beery apple animation”

Solution:
Convert the object into array, reverse it for chrome browser and then the finally load the dom object.

Note: In case the key was a text then the order of rendering is same across the browsers.

jQuery .on() and .off () Methods

New Event API

The new .on() and .off() methods provides ways of attaching and removing event handlers to the currently selected set of elements in the jQuery object. $(el).on () gives the developers an unified way of binding events for any event types, direct and delegated events. It also allows you to bind more than one events at the same time by passing an object .

Syntax:
$(elements).on(events [, selector] [, data] , handler);
$(elements).off([ events ] [, selector] [, handler]);

// An example of binding a click event in before version 1.7 and version 1.7 is illustrated below:
$(“a#vikas”).click(Handler); // Click event before jQuery 1.7
$(“a#vikas”).bind(“click”, Handler); // Binding click event before jQuery 1.7
$(“a#vikas”).on(“click”, Handler); // Click event in jQuery 1.7

// Similar example for .delegate() and .undelegate() methods is shown below:
$(‘.container’).delegate(‘a.vikas, ‘click’, Handler);
$(‘.container’).undelegate(‘a.vikas, ‘click’, Handler);

//Above code can be replaced by the following code in the version 1.7
$(‘.container’).on(‘click’, ‘a.vikas, Handler);
$(‘.container’).off(‘click’, ‘a.vikas, Handler);

Reference:
http://api.jquery.com/on
http://api.jquery.com/off

Useful jQuery Plugins

Quick and powerful, jQuery can help designers and developers create awesome interactive websites that are appealing and accessible to the widest range of browsers. For your audience, the visit to your site will be both exciting and entertaining. Navigation, galleries and slideshows, are hot points for a site to shine.

Here are 35 useful fresh jQuery plugins focusing on navigation, gallery and slideshows, calendars, tab browsing and further resources to reduce time and effort while increasing your audience.

Direct Link: 35 Fresh and Useful jQuery Plugins

jQuery Cheat Sheet

Remembering the hundreds of jQuery methods and handlers can melt your brain. Use this cheat sheet as a reference.

jQuery Cheat Sheet
jQuery Cheat Sheet

Source: Colorcharge.com

5 Easy Steps to Create a Fixed Header

This jQuery plugin just clones current header and place on top of the table. Follow below 5 steps to create a fixed header row of a normal HTML table or ASP.Net GridView/Datagrid.

Step 1: Include the jQuery library JavaScript file on header section of web page.

Download file (jquery-1.2.6.js)

Step 2: Include the jQuery Fixed Header JavaScript file on header section of web page.

Download file (jquery.fixedheader.js)

Step 3: Add this CSS code in stylesheet or header section of web page.

<style type="text/css">
.dataTable { font-family:Verdana, Arial, Helvetica, sans-serif; border-collapse: collapse; border:1px solid #999999; width: 750px; font-size:12px;}
.dataTable td, .dataTable th {border: 1px solid #999999; padding: 3px 5px; margin:0px;}
.dataTable thead th { background-color:#cccccc; color:#444444; font-weight:bold; text-align:left;}
.dataTable thead a {text-decoration:none; color:#444444; }
.dataTable thead a:hover { text-decoration: underline;}

/* Firefox has missing border bug! https://bugzilla.mozilla.org/show_bug.cgi?id=410621 */
/* Firefox 2 */
html</**/body .dataTable, x:-moz-any-link {margin:1px;}
/* Firefox 3 */
html</**/body .dataTable, x:-moz-any-link, x:default {margin:1px}
</style>

Step 4: Add this JavaScript code in header section of web page.

<script type="text/javascript">
$(document).ready(function(){
$("#data").fixedHeader({
width: 500,height: 300
});
})
</script>

Step 5: Create an HTML table on the page, including THEAD and TBODY sections. This plug-in uses the THEAD to create the fixed rows, and TBODY is our data.

<table id="data" class="dataTable">

<thead>
<tr>
<th> ….. <\th>
<th> ….. <\th>
</tr>
</thead>

<tbody>
<tr>
<td> ….. <\td>
<td> ….. <\td>
</tr>
</tbody>

</table>

Note: For ASP.Net GridView/Datagrid you have to keep the header part in THEAD and put your Gridview/Datagrid in the TBODY section of table but without Grid header.

Our table or GridView with fixed header is now ready to view.

jQuery Plugin for Fixed Header
jQuery Plugin for Fixed Header

Features
1. Allow horizontal scroll
2. Auto hide box when scroll in IE6
3. Allow to adjust header cell width with your own implementation

Requires
jQuery 1.2.6

Compatibility
IE6/7, Firefox 3.0/3.1, Opera 9.5, Chrome 0.2, Safari 3.1.2

jQuery: Easy JavaScript for Front-end Programmers

I’m a big jQuery fan because it just makes things a lot easier and a lot simpler for a mostly front-end programmer like myself. It’s the first Javascript framework I’ve looked at, but I don’t see myself going back.

What Is jQuery?
jQuery is yet another JavaScript library to join the previously crowded space that includes Prototype, Scriptaculous, Rico, Moo.Fx and more than a dozen others. To use it, simply attach the .js file in the head of your page: magically, you have access to lots of pre-built functions and gizmos.

Why jQuery?
The true beauty of jQuery is what it can present you within the first 10 minutes of your using it. The key feature of jQuery is its simplicity. Few lines of jQuery code can replace a dozen lines of normal JavaScript, yet it remains very elemental and flexible. Let me illustrate this point with an example. Two years ago, we used the following script to fix the web page horizontal rule:

function ourRules() {
if (!document.getElementsByTagName) return;
var hr = document.getElementsByTagName(“hr”);
for (var i=0; i
var newhr = hr[i];
var wrapdiv = document.createElement(‘div’);
wrapdiv.className = ‘line’;
newhr.parentNode.replaceChild(wrapdiv, newhr);
wrapdiv.appendChild(newhr);
}
}

window.onload = ourRules;

Result of the code, the browser waits for the page to finish loading before rifling through the DOM to find each occurrence of hr. Each time it finds one, it creates a new div, gives it the class name “line”, inserts it where the hr was, and pops the old hr inside the new div, to achieve the markup required to apply this particular effect. The end result of this script was that we were able to get the desired result without having to change hundreds of pages.

But, we’d achieve the same result using jQuery.

$(document).ready(function(){
$(“hr”).wrap(“<div class=’fline’> </div>”);
});

To break it down:

$(document).ready(function(){

});

The first and third lines are jQuery’s load event, and they replace the old window.onload from above. Any activity that we wish to complete during the page load can be dropped inside these curly braces. This is a great upgrade on the old onload method, because rather than waiting until everything has finished loading, jQuery’s function watches everything that comes in, and starts working as soon as it has all the parts it needs. It’s really very neat.

Surprisingly, the second line is even simpler:

$(“hr”).wrap(“<div class=’fline’></div>”);

The “dollar object” $(“hr”) is all we need to tell jQuery to grab every horizontal rule on this page, and wrap is what we will be doing to those hr elements.

jQuery’s built-in wrap function takes in whatever HTML we give it (in this case “<div class=’fline’> </div>”) and wraps it around each hr in our page – no loops or tests required.

We’ve used a div here, but we could just as easily been modifying or wrapping a b, span, or a element.

And although we’ve used a very simple selection rule here (all hrs), we could have easily been much more specific with what we targeted. Using familiar old CSS syntax, we could have used any of the following:

$(“hr.separate”) – Get the hr elements with the class name “separate “.
$(“li:only-child”) – Get list items that are by themselves.
$(“ul > li”) – Get only list items with unordered parent lists.

While I’ve found wrap to be of the most instantly helpful jQuery functions, it’s just one of many, including hide, show, fadeOut(“slow”) and slideUp(“fast”), just to name a few. You can perhaps guess what each one of these functions does. The jQuery starter’s tutorial on the jQuery site is quite a gentle beginner’s guide, and takes you through some of the most regular functions. But perhaps jQuery’s single neatest feature is its ability to “chain” functions together. Like, if I wanted to add a second div to our hr elements for some foolish reason, I could simply add another call to the wrap function to the end of my code, like this:

$(“hr”).wrap(“<div class=’fline’></div>”).wrap(“<div class=’sline’></div>”);

Example of jQuery
Example of jQuery

It’s so easy, it’s wild. Wild like a fox!

While designing a web page, you want to add a small icon to the bottom corner of each thumbnail. This required each img element to be wrapped in a container div, and another div showing the icon to be positioned in the container div. Again, the jQuery code is just one line.

$(“#thumbnails li img”)
.wrap(“<div class=’mywrap’></div>”)
.before(“<div class=’mythumb’></div>”);

In simple English, this code just asks jQuery to locate all the images in li elements that are inside #thumbnails, Wrap these images in a div called “wrap”, Squeeze another div (the one with the icon graphic) in my “wrap” div just before my image.

Now that we have the structure, CSS does the rest. If JavaScript is turned off, the thumbnails link directly to the raw image files, and there’s no need for the icons. Now that’s what I call graceful degradation. Like most other JavaScript libraries, jQuery is competent of some very high-end actions, but the main attraction for me was its ability to solve the little problems quickly and with a minimum of fuss.

I hope you’ll find it helpful too.

Download Files

jQuery Minified (54.5 kb)
jQuery Packed (30.3 kb)
jQuery Regular (98.2 kb)

Click here to view jquery tutorials