A JavaScript endsWith function

The following JavaScript function checks whether a string ends with a specified string.

function endsWith(str, s){
 var reg = new RegExp (s + "$");
 return reg.test(str);
}

The first argument is a string to be checked, the second one is a suffix to find. It returns true if the string ends with a specified string, and returns false if it does not. We use a "$" anchor to match the end of the string. The function is case-sensitive. Example:

var str="teens";
alert(endsWith(str, "ns"));

If you want to make the function into a method that could be used by all variables of a string type, you could use an object's prototype property:

String.prototype.endsWith = function(s){
 var reg = new RegExp(s + "$");
 return reg.test(this);
}

Then, you would use the function as follows:

alert(str.endsWith("ns"));

A JavaScript startsWith function

The previous function used the "$" anchor to match the end of a string. To match the start of a string, JavaScript regular expressions use a "^" (caret) anchor. This information allows us to write a function that would match the beginning of a string:

function startsWith(str, s){
 var reg = new RegExp("^" + s);
 return reg.test(str);
}

A Script That Remembers Values Typed into a Text Box

HTTP cookies can be used both for server-side and client-side programming. There are many ways to use cookies in Javascript. In this short tutorial we will concentrate on the client-side. The task is to build a script that will remember values users type in a text box and display them next time the users access the page.
Let's say we have a form with an input box "project" and a submit button. We want to capture the values entered by the user and save them for later use. Cookies seem to be an ideal solution to this problem. No server-side programming or maintenance.
A working example is located here .
We'll need two functions to read and set cookies. They are pretty much standard and can be easily found on the web.
Let's start with a function that sets the cookie.

function setCookie (name, value, expires,
		path, domain, secure) {
     document.cookie =
      name + "="
      + escape(value)
      + ((expires) ? "; expires="
      + expires.toGMTString() : "")
      + ((path) ? "; path=" + path : "")
      + ((domain) ? "; domain=" + domain : "")
      + ((secure) ? "; secure" : "");
}

The parameters to the function are self-explanatory:

name is the cookie name we are going to use

value is the cookie's value

expires - a date that the cookie will expire.

The path sets the top level directory from which a cookie can be read.
Set the path of a cookie to the top-level directory of your Web pages, and the cookie is readable by all your Web pages.
To get a cookie value we'll use the following function:

 function getCookie(name) {
  // break cookie into array of bites
   var bites = document.cookie.split("; ");
    for (var i=0; i < bites.length; i++) {
     // break into name and value 
      nextbite = bites[i].split("=");
      // if name matches 
      if (nextbite[0] == name)
      // return value 
       return unescape(nextbite[1]);
    }
    return null;
 }
 

Let's write a function that would add values to the existing cookie. 2 arguments will be passed to the function: cookieName and formField.
First, let's get the value typed by the user:
Now, we'll set the expiry date to 30 days from today.:

Get the contents of the cookie using the getCookie function:
var contents= getCookie(cookieName);
Add the new value typed by the user to the existing cookie contents.
We chose to separate values by a period. You can use any other separators.
The last thing to do is to send the new cookie contents to our setCookie function:
Here is the full listing of the function:

function addString(cookieName, formField){
	var field = eval ("document.forms[0]."+ formField);
	var txtVal =field.value;
	var expires = new Date();
	expires.setDate(expires.getDate() + 30);
	var contents= getCookie(cookieName);
	if(contents != null && contents.indexOf(txtVal)<0)
		contents+="."+txtVal;
	else if(contents == null)
		contents = txtVal;

	setCookie(cookieName, contents, expires,"/");
}

We'll call this function from the onSubmit event of the form, like this:
<form onSubmit='addString ("example","txt1")'>
Now, the only thing to do is to write the contents of the cookie on the HTML page.
Here is the function that does it:

function writeCookieValues (val) {
	if(val!= null && val.length>0){
		var str = new String(val);
 //split the resulting array by a separator
 //used earlier in the addString function
	var aPr = str.split(".");
	for(var i=0; i < aPr.length; i++)
		document.write(aPr [i]+"<br>");
	}
}

Use it like this:
<script language='JavaScript'> writeCookieValues (getCookie("example")); </script>

A JavaScript Function that Allows Only Numbers

This little function will force users to type numbers, commas and periods only.

 function noAlpha(obj){
 reg = /[^0-9.,]/g;
 obj.value =  obj.value.replace(reg,"");
 }

reg = /[^0-9.,]/g is a regular expression that basically says: look for any numbers from 0 to 9, periods and commas globally.
Usage:
<input type=text onKeyUp='noAlpha(this)' onKeyPress='noAlpha(this)'>

Try it here.


Here is a version of this function that does not use regular expressions and allows numbers only.

function forceNumbers(obj) {
 if ( obj.value.length == 0)
  return;

 if (!parseInt(obj.value,10) && obj.value != 0)   {
  alert("Please enter a valid Number");
  obj.value = '';
  obj.focus();
  obj.select();
 }
 else {
  obj.value = '' + parseInt(obj.value,10);
 }
}

Top Rated Ajax Books

All the books listed here have at least a 4 star rating and have been reviewed by at least 10 reviewers. Some reviews are included.

• 
  Ajax in Action
  by Dave Crane, Eric Pascarello, Darren James
  
  Best AJAX Book Available Today:
  Ajax in Action by Dave Crane is the best Ajax book on the market today. With over 600 pages of content, this incredibly well-written text explains why Ajax is so powerful and how this simple programming feature (it really isn't difficult to learn at all) has changed web development forever. No longer are users and developers limited to a page reload world, as the power of this technology now has the ability to make the web work like regular applications. It's a trend that has been desired for a loooong time and boy does it ever deliver!!!
  

  Chapter Overview:
  
  01. Ajax background
  02. Learning to use Ajax
  03. Order with Ajax
  04. Pages as applications
  05. Serve role
  06. User experience
  07. Security and Ajax
  08. Ajax performance
  09. Dynamic double combo example
  10. Type ahead example
  11. Enhanced Ajax web portal
  12. Live search using XSLT
  13. Stand-Alone apps with Ajax
  

  
  
• 
  Professional Ajax (Programmer to Programmer) (Paperback)
  
  by Nicholas C. Zakas, Jeremy McPeak, Joe Fawcett
  
  The book does a good job academically of showing how Ajax has evolved (itself a debatable topic) and how it is used in modern-day applications. The book doesn't marry the reader to any one particular web development framework, effectively citing examples in PHP, .NET, and JavaServer Pages. Practically, the authors exhibit a proper mix of (X)HTML, CSS, JavaScript, Dynamic HTML and XmlHttpRequests, showing how the technologies are blended for developing next-gen UIs.
  
• 
  AJAX and PHP: Building Responsive Web Applications (Paperback)
  by Cristian Darie, Bogdan Brinzarea, Filip Chereches-Tosa, Mihai Bucica
  
  AJAX and PHP by Example:This book teaches by example. The first few chapters introduce AJAX and what part PHP, Javascript and XML all play. Then the remainder of the book takes you through several example applications. The example apps are simple enough that you can easily follow. These applications include Form Validation, Chat, Suggest and Autocomplete, Charting with SVG (Scalable Vector Graphics), using grids, and Drag and Drop.
  
  
  
• 
  Ajax For Dummies (For Dummies (Computer/Tech)) (Paperback)
  by Steve Ph.D. Holzner
  
  Good coverage with some unique features: Ajax is obviously one of the hot web technologies these days, and now we have the Dummies title that covers it... Ajax for Dummies by Steve Holzner. While it might be easy to write this off as "just another Dummies book", I don't know that I'd be so hasty...
  

  Contents:
  Part 1 - Getting Started: Ajax 101; It's All About JavaScript
  Part 2 - Programming in Ajax: Getting to Know Ajax; Ajax in Depth
  Part 3 - Ajax Frameworks: Introducing Ajax Frameworks; More Powerful Ajax Frameworks; Server-Side Ajax Frameworks
  Part 4 - In-Depth Ajax Power: Handling XML in Ajax Applications; Working with Cascading Style Sheets in Ajax Applications; Working with Ajax and PHP
  Part 5 - The Part of Tens: Ten Ajax Design Issues You Should Know About; Ten Super-Useful Ajax Resources
  

Highlight HTML Table Rows with JavaScript

Highlight Table Rows on Mouseover

To highlight whole rows, use the following function:

function hiLiteRows(){
 var table = document.getElementById('myTable2');
 for (var i=0;i < table.rows.length;i++)
 {
  table.rows[i].onmouseover = function () {
   this.origColor=this.style.backgroundColor;
   this.style.backgroundColor='#BCD4EC';
  }
  table.rows[i].onmouseout = function () {this.style.backgroundColor=this.origColor;}
 }
}

We use a rows array to get access to table rows. The basic principle is as follows: the original background color is saved in a custom property of a row object to be restored on the mouseout event. The this keyword here refers to the row object.

Highlight TableRows on Click Event

To highlight table rows on the click event, we modify the previous function:

function hiLiteRowsClick(){
 var table = document.getElementById('myTable3');
 for (var i=0;i < table.rows.length;i++){
  table.rows[i].onclick= function () {
   if(!this.hilite){
    this.origColor=this.style.backgroundColor;
    this.style.backgroundColor='#BCD4EC';
    this.hilite = true;
   }
   else{
    this.style.backgroundColor=this.origColor;
    this.hilite = false;
   }
    }
 }
}

Instead of the mouseover event, we use the onclick event to call the anonymous function.
The function will change the background color when a row is clicked for the first time. When a row is clicked again, the original color is restored. To keep track of the click sequence the function uses a custom property called hilite.
This property is set to true on the first click and set to false on the second one.

A Simple Way to Highlight Table Cells with JavaScript

Here is a simple script to highlight table cells on the MouseOver event. The script restores the original color
on the MouseOut event.

One	One
Two	Two
Three	Three
Four	Four

function hiLiteCells(){
 var table = document.getElementById('myTable');
 var x = table.getElementsByTagName('td');
 for (var i=0;i<x.length;i++)
 {
  x[i].onmouseover = function (){
   this.origColor=this.style.backgroundColor;
   this.style.backgroundColor='#BCD4EC';
  }
  x[i].onmouseout = function () {
   this.style.backgroundColor=this.origColor;
  }
 }
}

Here is what's happening in the function. First, we get a reference to the table element.

var table = document.getElementById('myTable');

Then we get a reference to all the cells in the particular table.

var x = table.getElementsByTagName('td');

Then we attach anonymous functions to the mouseover and mouseout events on the cells. The mouseover function stores
the cell's original color in a variable local to the cell object represented by the this keyword.

var x = document.getElementsByTagName('tr');

Don't forget to substitute your own table id for the myTable table id.

Insert Backslash Before a Double Quote

Sometimes, you need to dynamically write html text from JavaScript. If the text contains a combination of single and double quotes, you may run into problems. Here is a simple function to avoid those problems.

function insertBackslashBeforeDoubleQuote(str){
 var reg = /"/g;
 var newstr = '\\"';
 return str.replace(reg,newstr);
}

As you see, the function uses a RegExp object on the first line to look for a double quote:

reg = /"/g;
 

The second line defines our replacement string - \"
The backslash in front of the quote has to be escaped with another backslash.

newstr = '\\"';

The last line searches the string and if a double quote is found it is replaced by our newstr pattern.

return str.replace(reg,newstr);

Here is a similar function that inserts a backslash before a single quote if it is contained in the string argument.

function insertBackslashBeforeSingleQuote(str){
 var reg = /'/g;
 var newstr = "\\'"
 return str.replace(reg,newstr);
}