Here are some useful Javascript libraries. I hope to update this list with time.
Many websites and blogs including this one contains code meant to be displayed to readers. While there are several plugins for prettifying source code for display, the best one I’ve just come across is called Google-Code-Prettify. I will soon be adding it to this blog. Learn more at
When developing a website, you often find yourself doing a lot of the same coding. Here are two nice HTML, CSS, and Javascript framework to get your going quickly.
FOUNDATION
http://foundation.zurb.com/
BOOTSTRAP
http://twitter.github.com/bootstrap/index.html
In addition, don’t forget to check out these HTML5 boilerplates which can come in pretty handy.
Let’s say you have a form and you want to prevent the default action of submitting the form from occurring when the submit button “submit” event is triggered. After the default action is prevented, however, you want the default action to occur. You can do that as follows:
$("form").submit(function(e) {
e.preventDefault();
/* do something */
$('form').unbind('submit').submit();
});
Sometimes, people get confused over how to lay out their pages using CSS table-less code. Here are some common page layouts with their corresponding code.
When developing a web form, it’s always nice to provide users with the instant feedback of invalid form fields that you get with Javascript client-side form validation. However, some users may not have Javascript enabled and therefore you must have server-side form validation no matter what. This often results in two sets of form validation code for the same form. To simplify your code and maximize code reuse, you can use jQuery Tools Form and power your client-side form validation use your server-side validation rules. Following is an example:
Continue reading Javascript Client-Side Form Validation Using Server-Side Form Validation
A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. The special thing about a callback is that functions that appear after the “parent” can execute before the callback executes. Another important thing to know is how to properly pass the callback. This is where I have often forgotten the proper syntax.
For a callback with no arguments you pass it like this:
[cc lang=”javascript”]
$.get(‘myhtmlpage.html’, myCallBack);
[/cc]
Note that the second parameter here is simply the function name (but not as a string and without parentheses). Functions in Javascript are ‘First class citizens’ and so can be passed around like variable references and executed at a later time. Continue reading Javascript Callbacks and Functions
Most people are used to seeing their code run sequentially but with Javascript, some code runs asynchronously. This can produce some confusing results. There are 2 cases when code would run asynchronously:
In the first case, if you make an AJAX request, that initiates an http request which may take some time to complete. Here’s an example:
[cc lang=”javascript”]
var a = 0;
$.getJSON(‘somefile.json’, function(data) {
a = 2; // this block of code executes on success and is the same as the following “success” callback
}
.success(function(data) {
a = 2;
})
.error(function() {
a = 3;
})
.complete(function() {
a = 4;
});
console.log(a);
[/cc]
Continue reading Asynchronous Javascript / Order of Execution
Recently, I need to write a script that depended on JSON. While I tried to remove whitespace where not needed, I missed one space and apparently that broke my code. I found out about it using JSONLint which is a nice tool for testing your JSON code.