Javascript - Usefull Tips & Tricks

[Rexibit]

Wow, very nice guys. I am going to be referencing this as I read a beginner's JavaScript book that I got from Sitepoint a couple weeks ago.

[lanzeird]

i am currently studying javascript and thanks that i have viewed your threads... it helps me a lot and i have learned very much

[pprt]

I'm newbies and try to do website with html and java.

[paul_wilkins]

Java could be making hard work for yourself. Javascript is much more suited for websites.

[syedys]

can someone tell me where i can find good javascript libraries???

[paul_wilkins]

Near the top of the javascript forum is an article called JavaScript Library Summary

[your_friend]

thank you my friend

[nacker4it]

There are lot of tips and tricks available on internet about the internet.
google is best friend if someone search this keyword in google "javascripts tips and tricks"

[MainStWebGuy]

function checkName() {
	if (document.form.VisitorName.value=="") {
		alert("you must provide your name");
		return false;
	}
	if (document.form.VisitorName.value.length < 2) {
		alert("please enter your real name");
		return false;
	}
	return true;
}
function checkPhoneEmail() {
		
	if ((document.form.VisitorEmail.value=="" || document.form.VisitorEmail.value==null) && 
		 (document.form.VisitorPhone.value=="" || document.form.VisitorPhone.value==null)) {
		alert("You must fill in  Phone or Email");
		return false;
	}
	if ((document.form.VisitorEmail.value!="") && (document.form.VisitorEmail.value!=null)){
			if (!ValidateEmail()){
					return false;
			}
		}
	if ((document.form.VisitorPhone.value!="") && (document.form.VisitorPhone.value!=null)){
			if (!ValidatePhone()){
				return false;
			}
		}
	return true;
}





//		||---------Email Checker --------------||
//check to make sure email has a @ and a . and that they are in legit places
function echeck(str) {

		var at="@"
		var dot="."
		var lat=str.indexOf(at)
		var lstr=str.length
		var ldot=str.indexOf(dot)
		if (str.indexOf(at)==-1){
		   alert("Invalid E-mail Address")
		   return false
		}

		if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
		   alert("Invalid E-mail Address")
		   return false
		}

		if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
		    alert("Invalid E-mail Address")
		    return false
		}

		 if (str.indexOf(at,(lat+1))!=-1){
		    alert("Invalid E-mail Address")
		    return false
		 }

		 if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
		    alert("Invalid E-mail Address")
		    return false
		 }

		 if (str.indexOf(dot,(lat+2))==-1){
		    alert("Invalid E-mail Address")
		    return false
		 }
		
		 if (str.indexOf(" ")!=-1){
		    alert("Invalid E-mail Address")
		    return false
		 }

 		 return true					
	}

function ValidateEmail(){
	var emailID=document.form.VisitorEmail
	
	if ((emailID.value==null)||(emailID.value=="")){
		alert("Please Enter a Valid Email Address")
		emailID.focus()
		return false
	}
	if (echeck(emailID.value)==false){
		emailID.value=""
		emailID.focus()
		return false
	}
	return true
 }






//		||-----------Phone Checker -----------||
// Declaring required variables
var digits = "0123456789";
// non-digit characters which are allowed in phone numbers
var phoneNumberDelimiters = "()- ";
// characters which are allowed in international phone numbers
// (a leading + is OK)
var validWorldPhoneChars = phoneNumberDelimiters + "+";
// Minimum no of digits in an international phone no.
var minDigitsInIPhoneNumber = 10;

function isInteger(s)
{   var i;
    for (i = 0; i < s.length; i++)
    {   
        // Check that current character is number.
        var c = s.charAt(i);
        if (((c < "0") || (c > "9"))) return false;
    }
    // All characters are numbers.
    return true;
}
function trim(s)
{   var i;
    var returnString = "";
    // Search through string's characters one by one.
    // If character is not a whitespace, append to returnString.
    for (i = 0; i < s.length; i++)
    {   
        // Check that current character isn't whitespace.
        var c = s.charAt(i);
        if (c != " ") returnString += c;
    }
    return returnString;
}
function stripCharsInBag(s, bag)
{   var i;
    var returnString = "";
    // Search through string's characters one by one.
    // If character is not in bag, append to returnString.
    for (i = 0; i < s.length; i++)
    {   
        // Check that current character isn't whitespace.
        var c = s.charAt(i);
        if (bag.indexOf(c) == -1) returnString += c;
    }
    return returnString;
}

function checkInternationalPhone(strPhone){
var bracket=3
strPhone=trim(strPhone)
if(strPhone.indexOf("+")>1) return false
if(strPhone.indexOf("-")!=-1)bracket=bracket+1
if(strPhone.indexOf("(")!=-1 && strPhone.indexOf("(")>bracket)return false
var brchr=strPhone.indexOf("(")
if(strPhone.indexOf("(")!=-1 && strPhone.charAt(brchr+2)!=")")return false
if(strPhone.indexOf("(")==-1 && strPhone.indexOf(")")!=-1)return false
s=stripCharsInBag(strPhone,validWorldPhoneChars);
return (isInteger(s) && s.length >= minDigitsInIPhoneNumber);
}

function ValidatePhone(){
	var Phone=document.form.VisitorPhone
	
	if ((Phone.value==null)||(Phone.value=="")){
		alert("Please Enter your Phone Number ex: 555-555-5555")
		Phone.focus()
		return false
	}
	if (checkInternationalPhone(Phone.value)==false){
		alert("Please Enter a Valid Phone Number ex: 555-555-5555")
		Phone.value=""
		Phone.focus()
		return false
	}
	return true
 }


function CheckAll(){
	if (checkName() &&	checkPhoneEmail()) {
		return true;
		}
		else
		{
			return false;
		}
	
}

HTML :

<form name="form" action="<?php echo $_SERVER['PHP_SELF'];?>" method="POST" onSubmit="return CheckAll();">

be sure to name the "name" property of input fields accordingly:
Name input should be "VisitorName"
Email input should be "VisitorEmail"
Phone input should be "VisitorPhone"

hope it helps!
J

[shaneburgess]

Jquery Ajax Made Easy

Feel free to add comments and corrections, I will update the post with the good ones.

[sureshvisu6]

How do you comment out code? Using /*...*/? Using your IDE to put // before each line? There is a third method:
view source
print?
1.if (0 == 1) {
2. ... code ...
3.}

Pros:

* Nests
* You need only change a single character to “flip” the comment: Replace the 0 with 1.
* You won’t get warnings because of suddenly unused imports or local variables.
* The Java compiler will remove this block of code in the optimization step, so no runtime penality.

Cons:

* Can only be used inside of methods.

If you need a fast way to repeatedly comment in/out a piece of code elsewhere, use this syntax:
view source
print?
1.//* Fast flip comment starts here
2. ... code ...
3./* and ends here */

Inside of a /*...*/ comment, the sequence “/*” has no special meaning. To comment out the block of code, remove the first “/” in “//*”:
view source
print?
1./* Fast flip comment starts here
2. ... code ...
3./* and ends here */

[evilunix]

Rather than always doing document.getElementById you can save a lot of space by creating a shortcut function like so:

function $(id) {
   if(document.getElementById) return document.getElementById(id);
   return null;
}

[vsa1234]

Fair enough. I just wanted to make sure those reading this understood possible complications - particularly because using window.onload = functionName; is one of if not THE primary cause of javascript conflicts.

In the end, the ability to aggregate events is the most desirable choice - but the tech isn't quite there yet to make it a "best" solution.

may i know the difference between following two script code segments :

1) <script type="text/javascript">
(markMenuSelection('cd','cds'))();
</script>
this above code is posted at the end of my jsp page .. and markMenuSelection('cd','cds') is a function defined in a script file included in my jsp.

2) <script type="text/javascript">
window.onload=markMenuSelection('cd','cds');
</script>
this above code is as well posted at the end of my jsp page .. and markMenuSelection('cd','cds') is a function defined in a script file included in my jsp.

[paul_wilkins]

may i know the difference between following two script code segments :

1) <script type="text/javascript">
(markMenuSelection('cd','cds'))();
</script>
this above code is posted at the end of my jsp page .. and markMenuSelection('cd','cds') is a function defined in a script file included in my jsp.

Placing a script just before the </body> tag runs the script as soon as the DOM is ready. This is commonly before the page even appears on the web browser, and is long before images and other parts of the page finish loading.

2) <script type="text/javascript">
window.onload=markMenuSelection('cd','cds');
</script>
this above code is as well posted at the end of my jsp page .. and markMenuSelection('cd','cds') is a function defined in a script file included in my jsp.

The onload event waits until the page has fully completed loading, which includes waiting for every single image and piece of the page content.

[vsa1234]

Placing a script just before the </body> tag runs the script as soon as the DOM is ready. This is commonly before the page even appears on the web browser, and is long before images and other parts of the page finish loading.



The onload event waits until the page has fully completed loading, which includes waiting for every single image and piece of the page content.

thanks pmw57

but i need the difference between the way i have declared/calling my "markMenuSelection" function. caus i didn't find any difference when i ran the code..it acted the same way with both methods.. any help would help me a greatly understand the function working in javascript

thanks again

[paul_wilkins]

thanks pmw57

but i need the difference between the way i have declared/calling my "markMenuSelection" function. caus i didn't find any difference when i ran the code..it acted the same way with both methods.. any help would help me a greatly understand the function working in javascript

thanks again

The difference is that placing the script just before the </body> causes the script to be capable of accessing page elements much faster than if you use the onload technique.

[vsa1234]

The difference is that placing the script just before the </body> causes the script to be capable of accessing page elements much faster than if you use the onload technique.

thanks pmw57,

so should I assume that apart from the difference in the way they are loaded there is no difference the way they are are called or something like that caus i got a bit confuse with the syntax "(markMenuSelection('cd','cds')();" could you put more light on this particular way or syntx of accessing functions.

thanks a lot

[vsa1234]

thanks pmw57,

so should I assume that apart from the difference in the way they are loaded there is no difference the way they are are called or something like that caus i got a bit confuse with the syntax "(markMenuSelection('cd','cds')();" could you put more light on this particular way or syntx of accessing functions.

thanks a lot

sorry the syntax was like below:

"(markMenuSelection('cd','cds'))();"

[paul_wilkins]

At the end of the document it could just be:

markMenuSelection('cd','cds');

as is normal with all functions.

What you have there is an anonymous closure

(function () {
    ...
}());

Others use this syntax, but it is less correct than the above:

(function () {
    ...
})();

The purpose of an anonymous closure is twofold. First, other code outside of the closure is not normally able to access the code inside, and second, the functions inside the anonymous closure don't pollute the global namespace.

How do they normally pollute the global namespace? Take a normal function for example:

function doSomething() {
 
}
alert(window.doSomething); // function () {}

The function has been added to the global namespace (the window object), and is always accessible from there.

Now with the anonymous closure wrapped around it.

(function () {
    function doSomething() {
 
    }
    alert(window.doSomething); // undefined
}());

The global namespace (the window object) is protected from being polluted by the code within the anonymous closure.

That is the point and the benefit of using that technique.

[paul_wilkins]

sorry the syntax was like below:

"(markMenuSelection('cd','cds'))();"

The syntax as you have it there will not provide any benefit for you. You may as well just use:

markMenuSelection('cd','cds');

[vsa1234]

The syntax as you have it there will not provide any benefit for you. You may as well just use:

markMenuSelection('cd','cds');

thanks a lot for that..

[Robinsondeo]

These code are really very helpful thanks for sharing...

[markbrown4]

An example of how to use the closest thing to a class with private and public members in Javascript:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="FooManChoo"></div>
<script type="text/javascript">
$ = function(id) { return document.getElementById(id);};
 
var Foo = function(id, options)  {
 
	// private variables
	var elm = $(id),
	favouriteBeer = 'Pale Ale';
 
	elm.Foo = this; // reference to object so you can access public properties
 
	// public variables
	this.beer = false;
 
	// private function
	function bar() { alert('Private Bar stocks ' + favouriteBeer); }
 
	// public function
	this.bar = function() {
		bar();
		this.beer ? alert('Public bar has Beer :) !') : alert('Public bar has no Beer :(');
	}
};
 
new Foo('FooManChoo');
with ($('FooManChoo').Foo) {
	bar();
	beer = true;
	bar();
}
</script>
</body>
</html>

[markbrown4]

I thought I'd put up a sort of a base for a modern javascript library that JimmyP showed me, it's helped me to understand quite a few new techniques so I hope it helps someone else:

var $ = (function() {
 
	// utility functions
	var push = [].push,
	emptyFunction = function() {},
	extend = function(destination, source) {
	  	for (var property in source || {}) destination[property] = source[property];
		return destination;
	},
 
	// constructor
	$ = function(elm) {
		return new ElementList(elm);
	},
 
	// wrapper object
	ElementList = function(elm) {
		elm = elm.nodeName ? [elm] : elm;
		push.apply(this, elm);
		return this;
	};
 
	// wrapper functions
	ElementList.prototype = {
		each: function(fn) {
			for (var i = 0, l = this.length; i < l; i++) {
				fn.call(this[i],this[i]);
			}
			return this;
		}
 
		// example function
		setStyle: function(styles) {
			return this.each(function() {
				extend(this.style, styles);
			});
		}
 
	};
 
	// Native object extensions
	String.prototype.format = function() {
		var pattern = /\{\d+\}/g, args = arguments;
		return this.replace(pattern, function(capture){ return args[capture.match(/\d+/)]; });
	}
 
	return $;
 
})();

$ seems to be the standard name for the 'swiss army knife' type function that is the entry point to a library.

Most libraries limit the scope of their code with a self-executing function:

var $ = (function() {
  // vars in here won't pollute the global namespace
})();

The extend function is also very popular - It copies all the properties/functions from one object to another.

function extend(destination, source) {
        source || {};
        for (var property in source) {
                destination[property] = source[property];
        }
        return destination;
}

jQuery has made popular the use of a wrapper object around a collection of HTML Elements. The wrapper object in my example is called ElementList which we create in the constructor.

  return new ElementList(elm);

We can make our wrapper element act like an array by borrowing methods from the Array prototype object.
The apply and call keywords are used to run a function with a different 'this' value, in our case we are using apply to add a collection of HTML Elements to our wrapper object.
Another trick in here is that we are accepting multiple types of objects in our constructor.
If the passed in object has a nodeName property we know it's a single HTML element so we turn it into an array to ensure that the object is always an array of HTMLElements.

var push = Array.prototype.push;
 
// wrapper object
ElementList = function(elm) {
	elm = elm.nodeName ? [elm] : elm;
	push.apply(this, elm);
	return this;
};

The prototype object has already been covered in this thread but it's used for two purposes above:
housing our wrapper objects functions
Extending the native prototypes

I've added a format method to strings which behaves like the .NET String.Format method.

'{0} is {1}'.format('Javascript', 'Cool!'); // 'Javascript is Cool!'

[markbrown4]

Oh, and chaining of functions is achieved by returning the ElementList wrapper in all of it's functions. e.g.

$('p').addClass('foo').animate('bar');

All the best,