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

JavaScript Based Animation Frameworks and Libraries

These JavaScript based animation frameworks and libraries will enable you to create attractive and appealing user experiences. Also, those give developers the ability to create stunning and eye-catching animation and transition effects in there web pages.

1. $fx (http://fx.inetcat.com)
2. jsAnim (http://jsanim.com)
3. scripty2 (http://scripty2.com)
4. GX (http://gx.riccardodegni.net)
5. Glimmer (http://visitmix.com/lab/glimmer)
6. Animator.js (http://www.berniecode.com/writing/animator.html)
7. Scriptio (http://www.scriptio.us/index.php)
8. Processing.js (http://processingjs.org)
9. Run (http://aka-fotos.de/run)
10. Burst Engine (http://hyper-metrix.com/#Burst)

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

Server-Side Scripting Languages: Asp and Asp.net

ASP (Active Server Pages) was for the first time was released in December 1996. Since then it has been through major changes and has grown and adapted to the new methods of developing web sites and applications for the internet over the period of time.

There are two major forms of ASP:-
1. Classic ASP
2. ASP.NET

In ASP.Net major weight is on n-tier architecture in the application development and there is separation of data presentation, business logic and data access layers. In traditional ASP these layers are mixed leading to the development of ineffective solutions with huge architecture that are difficult to sustain. The ASP.Net offers object oriented approach for the software development where as ASP does not support classes. Only VBScript and JavaScript were available for scripting in ASP where as, in ASP.Net there are no such boundaries.

The .net compliant languages can be used with ASP.Net like C# and VB.Net, where both of them are server-sided languages where as in ASP only VBScript and JavaScript are available as options to be used. Then the ASP pages are interpreted and the ASP.net Code is compiled .Traditional ASP can run only on Microsoft platforms but ASP.Net can be run on non – Microsoft platforms also. ASP runs under the inetinfo.exe IIS (Internet Information Server) process space and can lead to application crashes due to the start and stop process used by IIS. While ASP.net process is separate from inetinfo.exe and is not related to the IIS process isolation settings. The debugging process is easier in ASP.Net.

In traditional ASP the executable code cannot be separated from the HTML making the page difficult to read and maintain. The code block has to be positioned when ever the output is to be shown. This drawback of code is overcome in ASP.Net by the use of server controls. The HTML and Web Server Controls created on the server require a attribute to work. This attribute indicates that the page will be processed on the server. At the same time it implies that the enclosed controls can be accessed by server scripts. Validation Server Controls are a big plus in ASP.Net. It saves a lot of time and developers do not have to write their own functions as it is with ASP. Built-in validation increases the application reliability. Through this Double validation on client and server side can be performed.

The use of ASP.Net pages gives a performance and security edge. It supports the usage of any .Net language. There is no restriction over the use of JavaScript or VB Script on your Web pages. Finally it can be said that ASP.net has opened up a whole new programming model with the blend and combination of web forms, server-side controls, and data binding along with web services. ASP and ASP.Net has just scratched the surface of the Microsoft Active Server Page technology, which will continue to improve in the coming years with the latest additions on the technology front.

Guidelines for a clean HTML code

A good HTML is the base of a beautiful website. A good CSS can only exist with similarly good HTML markup. The advantages of clean, semantic HTML are many, yet lots of websites suffer from badly written markup.

Let’s take a look at some points to improve your written HTML code.

1. Use Strict DOCTYPE for HTML 4.01 or XHTML 1.0

2. Declare Character set just after the opening <head> tag.

3. Use properly encoded Special/funny characters like “&amp;” for “&” instead.

4. Proper indentation of markup for readability of code.

5. Keep your CSS and JavaScript external.

6. Nest your tags properly.

7. Remove unnecessary divs/tags.

8. Use better naming conventions for CSS classes and ids.

9. Leave typography to the CSS (Text uppercase and lowercase etc.)

10. Apply unique class or id to the page content lies in the “body” tag.

11. Use heading tags like <h1>, <h2> etc. for page headings.

12. Validate your code using W3C validator tool.

13. Logical ordering of the sections of your website in code.

14. Just do what you can to make it right.