15 Important JavaScript Tools For HTML5 Generation

Are you fascinated by jQuery? Well, there are plenty of other Java Script libraries worth checking out offering new features.

JQuery is an awesome JavaScript as it is easy to use. But there are plenty of other JavaScript libraries worth checking out. Some work like jQuery, simplifying basic chores of manipulating the DOM, offering their own advantages. Some have new features for animation, data visualization, or other niches.

Here are 15 JavaScript libraries that are worth adding to your toolset.

• YUI (Yahoo User Inferface): It was the first big, cross-browser toolsets released as open source, and remains one of the biggest and most fertile. Yahoo started its 3rd version in 2009, and both versions 2 and 3 continue to get better. The collection of charts, widgets, and other tools has more variety than almost any other JavaScript library.

• Mashi: One of the stated goals of HTML5, is to replace the Flash plug-in, the gold standard for making sprites and letters dance across the screen. This change is slowly coming as the gaming and presentation industries start to duplicate some of the sophisticated tools available. Mashi is an impressive example of how the sprites can be set in motion offering more than several dozen standard easing functions for moving sprites along a timeline.

• MooTools: Like jQuery and YUI, MooTools offers nice, browser-independent shorthand for manipulating arrays, divs, spans. Its custom library construction tool lets you select the functions you want. Check some boxes and get an entirely optimized version of MooTools with the functions you need and none of the bloat you don't.

• pp3Dico: The list of game engines for the browser is long and growing as the JavaScript canvas object is better established and relatively consistent. The results don't look as nice as Flash but the gap will reduce. If you like board games, you'll like the three-dimensional, orthographic views of game boards from pp3Diso. It takes just a few lines of code to set them up.

• VideoForEverybody: This is like sticking a video tag into your HTML. The behavior of many supposedly standard-compliant browsers is different enough if you try to support them all. A number of good HTML5 libraries let you write standard HTML5 video tags that will be replaced with Flash or QuickTime if the browser isn't ready to handle your video. This tool offers one of the better libraries, filled with features that operate in the background to smooth delivery on older browsers like IE8.

• Raphaël: There are many terabytes of data just waiting for people to come along. The first generation of HTML5 libraries was more focused on building forms and generating tables. Now a number of libraries are zeroing in on building charts and drawing graphs on the 'canvas' object. You'll find plenty of great options for basic line graphs, bar graphs, and combinations. This is a small JavaScript library that should simplify your work with vector graphics on the Web.

• JSCharts: Among the libraries aimed at chart building JSCharts allows you to create charts in different templates like bar charts, pie charts, or simple line graphs.

• Flot: This produces graphical plots of arbitrary datasets on-the-fly client-side, and it includes interactive features like zooming and mouse tracking.

• Protovis: Some libraries go further for data visualization. The collection of demos for Protovis and D3, a name in shorthand for Data Driven Documents show how sophisticated constructions like Voronoi diagrams and network graphs can illustrate more than the up and down of some value.

• Simile Widgets: These offer a different collection of views for data visualization and are more focused on maps and timelines. Each of these data visualization projects illustrate how you can come up with good ways of turning data into pictures that can help you absorb large volumes of information quickly and efficiently.

• Tile5: Most use the big mapping libraries for standard jobs like showing street addresses. But if you want to change the rendering or fiddle with layers in ways the big libraries don't allow, this can pull the mapping tiles from such sources as GeoCommons, and lay them out. Thus, you can shove them around just like the maps from Google, Mapquest, or Yahoo. But you can do more. The animation operation can change any of the parameters of the display. This is usually used for panning across the map and landing in one spot.

• jQuery Mobile: As mobile browsers begin to dominate the Web, it is important to package the information in a form that's easier to browse on smartphones and tablets. However, it is not easy when the fingers are fat and the eyes can't focus on small fonts. jQuery Mobile, Jo, and Sencha Touch offer touch-friendly menus that dig down into data structures and present the information for the small screen.

• HTML5SQL: You would never want to store a lot of data, so local databases were invented. Taking advantage of them is getting easier as new libraries simplify the details of interacting with the API. HTML5SQL will feed relatively simple SQL statements to the database, allowing you to create tables, fill them with data, and then query them. You'll spend more time crafting your SQL than your JavaScript.

• TaffyDB: If you don't want to think in SQL while writing JavaScript,TaffyDB accomplishes much of the same tabular querying with JSON, and the queries and the updates can be chained together.

• Firebug: One of the biggest challenges for JavaScript programmers is to build larger applications as that means more of debugging. While you can get by with embedding alert statements in smaller pages, larger ones require more structure for the debugging information. Firebug, an extension for Firefox, offers an elaborate debugging platform, including conditional breakpoints and the ability to edit the state. The JavaScript can write directly to the console object with three levels of severity.


Shivam Kotwalia, CodeKill

20 Javascript Video Tutorials For Beginners

If a picture is worth a thousand words, videos are even better. Join the journey of learning Javascript with these video tutorials. 

We heard that Javascript has become one of your favourite programming languages. This interpreted computer programming language is being universally adopted by communities of all kinds: mobile apps, Web, Windows 8, and even server-side development. So if you are planning to begin the journey with Javascript, or already inching towards it, these video tutorials can be of great help. Have a dekko:

1. Introduction to JavaScript



http://www.youtube.com/watch?v=yQaAGmHNn9s&feature=player_embedded&list=PL46F0A159EC02DF82


2. Comments and Statements


http://www.youtube.com/watch?v=yUyJ1gcaraM&feature=player_embedded&list=PL46F0A159EC02DF82
3. Variables


http://www.youtube.com/watch?v=og4Zku5VVl0&list=PL46F0A159EC02DF82&feature=player_embedded
4. Different Types of Variables


http://www.youtube.com/watch?v=sY8qiSaAi9g&list=PL46F0A159EC02DF82&feature=player_embedded
5. Using Variables with Strings


http://www.youtube.com/watch?v=QLpghQ2MMfs&feature=player_embedded&list=PL46F0A159EC02DF82
6. Functions


http://www.youtube.com/watch?v=5nuqALOHN1M&feature=player_embedded&list=PL46F0A159EC02DF82
7. Using Parameters with Functions


http://www.youtube.com/watch?v=7i1f23AVsn4&feature=player_embedded&list=PL46F0A159EC02DF82
8. Functions with Multiple Parameters


http://www.youtube.com/watch?v=BgtdojEoWFI&list=PL46F0A159EC02DF82&feature=player_embedded
9. The return Statement


http://www.youtube.com/watch?list=PL46F0A159EC02DF82&v=AdQcd3sKGC8&feature=player_embedded
10. Calling a Function From Another Function


http://www.youtube.com/watch?v=95mIis5M-gU&list=PL46F0A159EC02DF82&feature=player_embedded#t=0
11. Global & Local Variables


http://www.youtube.com/watch?v=waF2Isf-phQ&list=PL46F0A159EC02DF82&feature=player_embedded
12. Math Operators


http://www.youtube.com/watch?v=ZH5qZB0UucQ&list=PL46F0A159EC02DF82&feature=player_embedded
13. Assignment Operators


http://www.youtube.com/watch?v=VfBr32W-hRA&list=PL46F0A159EC02DF82&feature=player_embedded
14. if Statement


http://www.youtube.com/watch?v=5gjr15aWp24&feature=player_embedded&list=PL46F0A159EC02DF82
15. if/else Statement


http://www.youtube.com/watch?feature=player_embedded&v=FKyrQYkihGw&list=PL46F0A159EC02DF82
16. Nesting and Fridays!


http://www.youtube.com/watch?v=ebjo8_u82mI&feature=player_embedded&list=PL46F0A159EC02DF82
17. Complex Conditions


http://www.youtube.com/watch?feature=player_embedded&v=aQf-zeuHijU&list=PL46F0A159EC02DF82
18. switch


http://www.youtube.com/watch?feature=player_embedded&v=NXMu5ljw9kc&list=PL46F0A159EC02DF82
19. for Loop


http://www.youtube.com/watch?v=Coxgr66EwRk&list=PL46F0A159EC02DF82&feature=player_embedded
20. while Loop


http://www.youtube.com/watch?v=QPFW_0blw9w&list=PL46F0A159EC02DF82&feature=player_embedded 

Enjoy JavaScripting ...!!!

Like Us on facebook
Shivam Kotwalia, CodeKill

21 Tips And Tricks For JavaScript Programmers

If you work on the popular JavaScript programming language, we bring you some useful tips and tricks. Read on... 

Have you been programming in JavaScript? It's an important language, but you may be missing out on some of the important tips and tricks here. Use them to make your webpages better and more advanced!

1. Convert a JavaScript Array into the Comma Seperated Value (CSV) format

The valueOf() method is used to convert a javascript array into the CSV format.

var arr = ['abc', 'bcd', 'cde', 'def'];

var str = arr.valueOf();

//print str: abc,bcd,cde,def

You can also use the pipe (|) instead of commas. For this you have to use the join() method.

var arr = ['abc', 'bcd', 'cde', 'def'];

var str = arr.join("|");

//print str: abc|bcd|cde|def

2. Converting CSV into Javascript array

For this you will use the split() method. The method can be used to split a string separated by any token into a Javascript array.

var str = "a, b, c, d";

var arr = str.split(",");

//print arr[0]: a

3. Remove elements of an array by their index

Use the splice() method for this. The splice method can add and remove elements from an array.

function removeByIndex(arr, index) {
arr.splice(index, 1);
}

test = new Array();
test[0] = 'Apple';
test[1] = 'Ball';
test[2] = 'Cat';
test[3] = 'Dog';

alert("Array before removing elements: "+test);

removeByIndex(test, 2);

alert("Array after removing elements: "+test);

4. Remove elements of an array by value

function removeByValue(arr, val) {
for(var i=0; i if(arr[i] == val) {
arr.splice(i, 1);
break;
}
}
}

var somearray = ["mon", "tue", "wed", "thur"]

removeByValue(somearray, "tue");

//somearray will now have "mon", "wed", "thur"

A method (removeByValue in example) has to be defined for removing elements by their value. New functions can be defined to classes at runtime in Javascript using prototypes.

In the code fragment given below, a removeByValue() method has been created inside the Array class.

Array.prototype.removeByValue = function(val) {
for(var i=0; i if(this[i] == val) {
this.splice(i, 1);
break;
}
}
}
//..

var somearray = ["mon", "tue", "wed", "thur"]

somearray.removeByValue("tue");

//somearray will now have "mon", "wed", "thur"

5. Call a JavaScript function as a string

The code fragment given below allows you to call a function simply by its name.

var strFun = "someFunction"; //Name of the function to be called
var strParam = "this is the parameter"; //Parameters to be passed in function

//Create the function
var fn = window[strFun];

//Call the function
fn(strParam);

6. Generating a random number between 1 to n

This code is useful in generating random numbers for games etc.

//random number from 1 to N
var random = Math.floor(Math.random() * N + 1);

//random number from 1 to 10
var random = Math.floor(Math.random() * 10 + 1);

//random number from 1 to 100
var random = Math.floor(Math.random() * 100 + 1);

7. Capturing a browser close button event or to exit the page in JavaScript

The browser’s close event is usually captured in order to tell the user about unsaved data that they may need to save.





8. Capture a back button

The usage is quite similar to above, except you capture the back button event rather than close.

window.onbeforeunload = function() {
return "You work will be lost.";
};

9. Check if the form is dirty

For this, forsIsDirt is used. The function returns a Boolean value (true of false) based on whether the user has made any virtual changes to the HTML form of a website,

/**
- Determines if a form is dirty by comparing the current value of each element
- with its default value.
=*
* @param {Form} form the form to be checked.
* @return {Boolean} true if the form is dirty, false
* otherwise.
*/
function formIsDirty(form) {
for (var i = 0; i < form.elements.length; i++) {
var element = form.elements[i];
var type = element.type;
if (type == "checkbox" || type == "radio") {
if (element.checked != element.defaultChecked) {
return true;
}
}
else if (type == "hidden" || type == "password" ||
type == "text" || type == "textarea") {
if (element.value != element.defaultValue) {
return true;
}
}
else if (type == "select-one" || type == "select-multiple") {
for (var j = 0; j < element.options.length; j++) {
if (element.options[j].selected !=
element.options[j].defaultSelected) {
return true;
}
}
}
}
return false;
}
window.onbeforeunload = function(e) {
e = e || window.event;
if (formIsDirty(document.forms["someForm"])) {
// For IE and Firefox
if (e) {
e.returnValue = "You have unsaved changes.";
}
// For Safari
return "You have unsaved changes.";
}
};

10. Disabling Back button

For this, you have to put the code in the page that you don’t want the user to go back to.



onpageshow="if (event.persisted) noBack();" onunload="">

11. To delete multiple values from the listbox

You have to create a function to remove multiple values.

function selectBoxRemove(sourceID) {

//get the listbox object from id.
var src = document.getElementById(sourceID);

//iterate through each option of the listbox
for(var count= src.options.length-1; count >= 0; count--) {

//if the option is selected, delete the option
if(src.options[count].selected == true) {

try {
src.remove(count, null);

} catch(error) {

src.remove(count);
}
}
}
}

12. Select or Deselect All from Listbox

The code fragment below allows you to do this.

function listboxSelectDeselect(listID, isSelect) {
var listbox = document.getElementById(listID);
for(var count=0; count < listbox.options.length; count++) {
listbox.options[count].selected = isSelect;
}
}

13. To move selected items up or down

To do this, make a function like below.

function listbox_move(listID, direction) {

var listbox = document.getElementById(listID);
var selIndex = listbox.selectedIndex;

if(-1 == selIndex) {
alert("Please select an option to move.");
return;
}

var increment = -1;
if(direction == 'up')
increment = -1;
else
increment = 1;

if((selIndex + increment) < 0 ||
(selIndex + increment) > (listbox.options.length-1)) {
return;
}

var selValue = listbox.options[selIndex].value;
var selText = listbox.options[selIndex].text;
listbox.options[selIndex].value = listbox.options[selIndex + increment].value
listbox.options[selIndex].text = listbox.options[selIndex + increment].text

listbox.options[selIndex + increment].value = selValue;
listbox.options[selIndex + increment].text = selText;

listbox.selectedIndex = selIndex + increment;
}
//..
//..

listbox_move('countryList', 'up'); //move up the selected option
listbox_move('countryList', 'down'); //move down the selected option

14. Move options to the left or right using Listbox

function listbox_moveacross(sourceID, destID) {
var src = document.getElementById(sourceID);
var dest = document.getElementById(destID);

for(var count=0; count < src.options.length; count++) {

if(src.options[count].selected == true) {
var option = src.options[count];

var newOption = document.createElement("option");
newOption.value = option.value;
newOption.text = option.text;
newOption.selected = true;
try {
dest.add(newOption, null); //Standard
src.remove(count, null);
}catch(error) {
dest.add(newOption); // IE only
src.remove(count);
}
count--;
}
}
}
//..
//..

listbox_moveacross('countryList', 'selectedCountryList');

15. To initialize an Array using the series of numbers

The code fragment given below will help with this.

var numbers = [];
for(var i=1; numbers.push(i++)<100;);
//numbers = [0,1,2,3 ... 100]

16. Rounding off numbers to ‘x’ decimal places

var num = 2.443242342;
alert(num.toFixed(2)); // 2.44

The toFixed(x) method used here provides x length after the decimal point. On the other hand, toPrecision(x) provides x total length.

num = 500.2349;
result = num.toPrecision(4); // result will equal 500.2

17. To check if a string contains a substring

Use the code below.

if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(obj, start) {
for (var i = (start || 0), j = this.length; i < j; i++) {
if (this[i] === obj) { return i; }
}
return -1;
}
}

if (!String.prototype.contains) {
String.prototype.contains = function (arg) {
return !!~this.indexOf(arg);
};
}

18. Removing duplicates

Use the removeDuplicates method for this.

function removeDuplicates(arr) {
var temp = {};
for (var i = 0; i < arr.length; i++)
temp[arr[i]] = true;

var r = [];
for (var k in temp)
r.push(k);
return r;
}

//Usage
var fruits = ['apple', 'orange', 'peach', 'apple', 'strawberry', 'orange'];
var uniquefruits = removeDuplicates(fruits);
//print uniquefruits ['apple', 'orange', 'peach', 'strawberry'];

19. Trimming a string

This can be used to remove spaces from both sides of a string.

if (!String.prototype.trim) {
String.prototype.trim=function() {
return this.replace(/^\s+|\s+$/g, '');
};
}

//usage
var str = " some string ";
str.trim();
//print str = "some string"

20. Redirect a webpage

window.location.href = "http://viralpatel.net";

21. Encoding a URL

The envodeURIcomponent function should be used for this.

var myOtherUrl =
"http://example.com/index.html?url=" + encodeURIComponent(myUrl);


Like Us on Facebook
Shivam Kotwalia, CodeKill

20 Free Ebooks On Ruby, Javascript, Perl And Python

Wanted to learn four of the big ones from amongst the programming languages? CodeKill Group bring these ebooks which can help you get started! 

Together Ruby, JavaScript, Perl and Python make for four of the most popular programming languages being used nowadays. Learning this languages is a priority for every programmer, even if they are hackers. So, with that in mind, here CodeKill present you, 20 of the best free ebooks on these languages. Ruby 1. The Bastards Book of Ruby: The Bastards Book of Ruby is an introduction to programming and its practical uses for journalists, researchers, scientists, analysts, and anyone else whose job is to seek out, make sense from, and show the hard-to-find data. 2. Clever Algorithms: Implementing an Artificial Intelligence algorithm is difficult. Algorithm descriptions may be incomplete, inconsistent, and distributed across a number of papers, chapters and even websites. This can result in varied interpretations of algorithms, undue attrition of algorithms, and ultimately bad science. This book is an effort to address these issues by providing a handbook of algorithmic recipes drawn from the fields of Metaheuristics, Biologically Inspired Computation and Computational Intelligence, described in a complete, consistent, and centralized manner. These standardized descriptions were carefully designed to be accessible, usable, and understandable. Most of the algorithms described were originally inspired by biological and natural systems, such as the adaptive capabilities of genetic evolution and the acquired immune system, and the foraging behaviors of birds, bees, ants and bacteria. An encyclopedic algorithm reference, this book is intended for research scientists, engineers, students, and interested amateurs. Each algorithm description provides a working code example in the Ruby Programming Language. 3. Data Structures and Algorithms with Object-Oriented Design Patterns in Ruby: This book is about the fundamentals of data structures and algorithms--the basic elements from which large and complex software artifacts are built. To develop a solid understanding of a data structure requires three things: First, you must learn how the information is arranged in the memory of the computer. Second, you must become familiar with the algorithms for manipulating the information contained in the data structure. And third, you must understand the performance characteristics of the data structure so that when called upon to select a suitable data structure for a particular application, you are able to make an appropriate decision. This book also illustrates object-oriented design and it promotes the use of common, object-oriented design patterns. The algorithms and data structures in the book are presented in the Ruby programming language. Virtually all the data structures are presented in the context of a single class hierarchy. This commitment to a single design allows the programs presented in the later chapters to build upon the programs presented in the earlier chapters. 4. Learn Ruby the Hard Way: Learn Ruby The Hard Way is a translation of the original "Learn Python The Hard Way" to teaching Ruby, with the translation done by Rob Sobers. "Learn Python The Hard Way" has taught hundreds of thousands worldwide how to code in Python, and this book uses the same proven method for Ruby. When you are done with this book you will have the skill to move on to other books about Ruby and be ready to understand them. 5. Learn to Program: This is the second edition of the original Learn to Program by Chris Pine. It has been updated with more current examples and has been writtent to suit the most recent version of the Ruby language. 6. Mr. Neighborly’s Humble Little Ruby Book: Mr. Neighborly's Humble Little Ruby Book covers the Ruby language from the very basics of using puts to put naughty phrases on the screen all the way to serving up your favorite web page from WEBrick or connecting to your favorite web service. Written in a conversational narrative rather than like a dry reference book, Mr. Neighborly's Humble Little Ruby Book is an easy to read, easy to follow guide to all things Ruby. 7. Programming Ruby: This book is a tutorial and reference for the Ruby programming language. Use Ruby, and you'll write better code, be more productive, and enjoy programming more. 8. Ruby Best Practices: Practice Ruby is a website that started in 2010. It contains various articles on the Ruby Programming language, which have come from the community itself. Javascript 1. Eloquent Javascript: Eloquent JavaScript is a book providing an introduction to the JavaScript programming language and programming in general. 2. Essential JavaScript Design Patterns For Beginners: This book consists of an amalgamation of modern and classic design patterns. 3. The Node Beginner Book: The aim of this document is to get you started with developing applications with Node.js, teaching you everything you need to know about "advanced" JavaScript along the way. It goes way beyond your typical "Hello World" tutorial. Perl: 1. Beginning Perl: This book is for those new to programming who want to learn with Perl. You will find it easier if you already have some basic programming experience, but the material covered can be mastered by anyone with just a text editor, some common sense and a computer. If you want to learn how to program with Perl and then find out how far you can go with it, this is the book for you. An excellent companion on any programming course. 2. Higher-Order Perl: The book was published on 8 March 2005. Copies are available in bookstores in the U.S. and Europe, and from online booksellers. A second printing became available in August 2005 only. 3. Impatient Perl: When you just have to learn Perl and time is of the essence, this book is your best friend. 4. Modern Perl: Modern Perl is suitable for programmers of every level. It's more than a Perl tutorial—only Modern Perl focuses on Perl 5.12 and 5.14, to demonstrate the latest and most effective time-saving features. Only Modern Perl explains how and why the language works, to let you unlock the full power of Perl. Python: 1. A Byte of Python: 'A Byte of Python' is a free book on programming using the Python language. It serves as a tutorial or guide to the Python language for a beginner audience. If all you know about computers is how to save text files, then this is the book for you. 2. How to Think Like a Computer Scientist – Learning with Python: How to Think... is a Free Book available under the GNU Free Documentation License. Readers are free to copy and distribute the text; they are also free to modify it, which allows them to adapt the book to different needs, and to help develop new material. 3. Invent Your Own Computer Games with Python: “Invent Your Own Computer Games with Python” is a free book (as in, open source) and a free eBook (as in, no cost to download) that teaches you how to program in the Python programming language. Each chapter gives you the complete source code for a new game, and then teaches the programming concepts from the example. 4. Learn Python The Hard Way: This book tells you how the hard way is actually the easy and the right way to learn Python. 5. Non-Programmer’s Tutorial for Python 3: This wikibook covers various aspects of Python that you may have been looking for. Shivam Kotwalia, CodeKill