Categories
Client Side Coding Books JavaScript Tips & Tutorials

Best JavaScript Books for Learning JavaScript Programming and Development

Thanks to the computer scientists who set the standards of JavaScript, in the arena of event programming and behavioral manipulations of windows and objects, it is the one programming script that is so powerful that you can virtually build any possible interactive applications with it.

That said, learning JavaScript to the mastery of it takes lots of time and practice. These are some JavaScript books I have selected from Amazon that may be a good guide to you when you are learning JavaScript front end programming.

Web Developers / Designers’ Books:

  1. Best HTML Books
  2. Best CSS Books
  3. Best JavaScript Books
  4. Best PHP Books
  5. Best MySQL Books
  6. Best Linux Books
  7. Best Apache Books (mod_rewrite Books)
  8. Best Web Hosting Books

JavaScript: The Good Parts

JavaScript: The Good Parts

JavaScript: The Definitive Guide

JavaScript The Definitive Guide

Professional JavaScript for Web Developers (Wrox Programmer to Programmer)

Professional JavaScript for Web Developers (Wrox Programmer to Programmer)

JavaScript: A Beginner’s Guide, Second Edition, Third Edition

JavaScript A Beginner's Guide, Second Edition

Murach’s JavaScript and DOM Scripting (Murach: Training & Reference)

Murach's JavaScript and DOM Scripting (Murach: Training & Reference)

JavaScript(TM) Step by Step

JavaScript(TM) Step by Step 

Pro JavaScript Techniques

Pro JavaScript Techniques

JavaScript & DHTML Cookbook (2nd edition)

JavaScript & DHTML Cookbook (2nd edition)

Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries

Object-Oriented JavaScript Create scalable, reusable high-quality JavaScript applications and libraries

Pro JavaScript Design Patterns (Recipes: a Problem-Solution Ap)

Pro JavaScript Design Patterns (Recipes a Problem-Solution Ap)

Beginning JavaScript

Beginning JavaScript

Categories
JavaScript Tips & Tutorials

JavaScript: Open or Redirect to Another Page / Site / Location

One of the most common uses of JavaScript is to redirect the user to or automatically open up another web page location. For example, when the user clicks a button, the JavaScript will redirect the user to the location selected in the drop down select menu. It’s just like the user has typed the web page location URL.

There are 2 ways to use JavaScript to navigate to another web page. The first is to rely on the window object:

<script type="text/javascript">
	window.location="http://www.bing.com"
</script>

The location method mimics the user behavior of typing a URL address in the address bar of the browser window. The browser then forwards to that web site, leaving the last web page in the previous entry of browsing history.

The second approach is to use the replace method of location object:

location.replace("http://www.microsoft.com");

This is trickier in that it’s not like what users would do. Instead of creating a new history entry, this method replaces the old history entry by the new one. Essentially, users cannot go back to the previous page with this approach, the previous web page is replaced by the new one: http://www.microsoft.com.

Categories
JavaScript Tips & Tutorials

JavaScript: Split and Divide Text String by A Delimiter

Spliting and dividing a string into several chunks is a rather basic need for text parsing. You can do it easily in PHP by the help of explode() function or preg_split(), in JavaScript, you can achieve this task by the split() string function.

The following example illustrates the usage of javascript split() function to slice a string into various parts in an array.

var str = "How are you";
var words = str.split(" "); //split using a single blank space as the delimiter
for (i = 0; i < words.length; i++) {
	alert(words[i]); //alerts "How", "are" and "you" sequentially
}

Note that split is a method of string objects in JavaScript, not standalone functions. Therefore, you can even use it this way:

var words = "How are you".split(" ");

Categories
JavaScript Tips & Tutorials jQuery Tips & FAQ

jQuery: Protecting or hiding variables / functions in a specific local scope

As everyone who’s well trained in software engineering would agree, that one of the principle of writing predictable code is to separate and hide something within only the scope that it’s needed. Controlled access to and from the outside world brings predictability and accountability of your code thus better debugging.

In jQuery, you need constantly extending the native features by writing extra plugins and adding new functions:

var newMethods = {
  check       : function() { ... },
  uncheck     : function() { ... },
  toggleCheck : function() { ... }
};
jQuery.each(newMethods, function(i) {
  jQuery.fn[i] = this;
});

Without proper fencing, the variable containing 3 functions newMethods is everything but protected from the global scope (outside world), increaseing the complexity of the code and difficulty in debugging. To solve this problem, you will want to embrace the code in an anonymous function.

(function() {
  var newMethods = {
    check       : function() { ... },
    uncheck     : function() { ... },
    toggleCheck : function() { ... }
  };
  jQuery.each(newMethods, function(i) {
    jQuery.fn[i] = this;
  });
})();
Categories
JavaScript Tips & Tutorials jQuery Tips & FAQ

jQuery: Get the text and value of the selected option of HTML select element

For instance, there’s a HTML select element identified by the ID #title, and after the user has selected one of the options, you want to get the text and value of the selected option.

<select id="title">
  <option value="1">Mr</option>
  <option value="2">Mrs</option>
  <option value="3">Miss</option>
</select>

Now that the user has selected the 2nd option: Mrs. To get the value (in this case, ‘2’):

$("select#title").val();

Which is also the common function to return the value of all other form controls.

To get the text of the selected option (in this case, ‘Mrs’):

$("#title option:selected").text();

Categories
JavaScript Tips & Tutorials jQuery Tips & FAQ

jQuery: Check / uncheck form checkbox and radio

Using both attr() and removeAttr() functions, it’s actually the same as enabling and disabling form controls with jQuery.

$("#option").attr("checked", "checked"); // make checkbox or radio checked
$("#option").removeAttr("checked"); // uncheck the checkbox or radio

Categories
JavaScript Tips & Tutorials jQuery Tips & FAQ

jQuery: How to check if an element has a particular class

To know whether a class exists on an element with jQuery, you need a simple test method: is().

For example, to test if an element #elm has the class ‘first’:

if ($(#elm).is('.first')) {
//#elm has the class
} else {
//#elm doesn't have the class
}

jQuery is() is the function that checks if any of the returned DOM objects from the selector satisfies the criteria set in the argument.

Categories
JavaScript Tips & Tutorials jQuery Tips & FAQ

jQuery: How to test or check whether an element exists

.length property in JavaScript returns the length or number of elements inside an array or the string length. While jQuery selector mechanism $(“elm”) returns an array of DOM objects (such as elements), you can also get the number of the length of the returned objects array by:

$("#some").length

To check the existence of the element, just check if the returned value of length is zero:

if ($("#some").length) { //#some element exists }
Categories
JavaScript Tips & Tutorials jQuery Tips & FAQ

jQuery: Selecting elements with uncommon / special characters in ID or class name

HTML generated by some CMS or frameworks include elements with rather uncommon characters in ID or class names. For example, some may have special characters such as ‘.’ or ‘[..]’ in the ID or Class. To work around this, a selector in jQuery should be written this way:

$("$some.id") // won't work for ID: some.id $("$some\\.id") // works for ID: some.id

With brackets in ID:

$("$some[id]") // won't work for ID: some[id] $("$some\\[id\\]") // works for ID: some[id]

You get the idea. Just add double backslashes \\ before any of the special characters.

Categories
JavaScript Tips & Tutorials jQuery Tips & FAQ

How to disable or enable a form element with jQuery?

You need 2 jQuery functions: attr and removeAttr.

To disable a form element such as a text input or a button (with a made-up id: #elm):

$("#elm").attr("disabled", "disabled");

To enable a disabled form element:

$("#elm").removeAttr("disabled");