Rochak Chauhan::Unpredictably Exciting » JavaScript http://rochakchauhan.com/blog Know your limits, but never stop trying to exceed them. Thu, 03 May 2012 11:48:53 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Rochak.js – Javascript class of common functions http://rochakchauhan.com/blog/2008/10/10/rochakjs-javascript-class-of-common-functions/ http://rochakchauhan.com/blog/2008/10/10/rochakjs-javascript-class-of-common-functions/#comments Fri, 10 Oct 2008 13:36:58 +0000 rochakchauhan http://rochakchauhan.com/blog/2007/10/08/rochakjs-javascript-class-of-common-functions/ Continue reading »]]> This class is a collection of basic and commonly used functions in JavaScript. I coded this class just to validate a form in one of my sites. But it turned out to be more than helpful. I hope it will be of some help for all the web developers.

If you want a new function added or face any difficulty, feel free to contact me.

  • Initialize:
    • Just include it at the very top of all the JavaScript file as: 
      <script src="rochak.js" type="text/javascript">
  • Usage:
    • For example to trim a string: 
      rochak.Function_Name(Parameter);    eg:
var str=rochak.trim(str);
  • Complete JavaScript Function List:
    1. lTrim(string):
      • Function to trim all the white spacing from the left side of any string.
    2. rTrim(string):
      • Function to trim all the white spacing from the right side of any string.
    3. trim(string):
      • Function to trim all the white spacing from left and right side of the string.
    4. isValidEmail(string):
      • Function to validate a typical email pattern.
    5. getType(variable_name):
      • Function to find the type of the variable. A Clone of PHP\’s “var_dump()” function.
    6. inArray(array, string):
      • Function to find if the string is in the array. Clone of PHP\’s “in_array()” function.
    7. inArrayI(array, string):
      • Function to find if the string is in the array. Clone of PHP\’s “in_array()” function. (its case insensitive)
    8. getMouseX(event):
      • Function to find the current X position of the mouse/cursor.
    9. getMouseY(event):
      • Function to find the current Y position of the mouse/cursor.
    10. getMouseXY(event):
      • Function to find the current X and Y positions of the mouse/cursor as an array.
    11. getBrowserName():
      • Function to return the name of the web browser.
    12. isBrowserIe():
      • Function to return “true” if the browser is “Microsoft Internet Explorer” else return “false“.
    13. isBrowserOpera():
      • Function to return “true” if the browser is “Opera” else return “false“.
    14. isBrowserNetscape():
      • Function to return “true” if the browser is “Firefox” or “Netscape” else return “false“.
    15. getTotalImages():
      • Function to return the number of images used in the current page.
    16. explode(delimiter, string):
      • Function to Split a string by a specified delimiter. A Clone of PHP\’s “explode” function.
    17. end(string / array):
      • Function to return the last character of a string or the last element of the array. A Clone of PHP\’s “end” function.

Change log (1.1)

  1. isBrowserFirefox():
    • Function to return “true” if the browser is “Firefox” else return “false“.
  2. isBrowserSafari():
    • Function to return “true” if the browser is “Safari” else return “false“.
  3. isBrowserChrome():
    • Function to return “true” if the browser is “Chrome” else return “false“.
  4. $$(idName):
    • Function to similar to “document.getElementById(‘idName’)”.

To download the latest code, right click here and click on “Save link as” or “Save target as”.

Or visit:   http://www.phpclasse.org

]]> http://rochakchauhan.com/blog/2008/10/10/rochakjs-javascript-class-of-common-functions/feed/ 397 Most common JavaScript mistakes and their solutions http://rochakchauhan.com/blog/2008/09/25/most-common-javascript-mistakes/ http://rochakchauhan.com/blog/2008/09/25/most-common-javascript-mistakes/#comments Thu, 25 Sep 2008 10:39:27 +0000 rochakchauhan http://rochakchauhan.com/blog/?p=410 Continue reading »]]> JavaScript has come a long way from being used just as Client Side Form Validator to becoming the backbone of Web 2.0 rich web applications. In the current scenario, every web developer have to learn JavaScript as there is hardly any Web 2.0 application which does not implement JavaScript.

In my opinion followings are the most common errors/mistakes made during JavaScript implementation.

  1. Calling JavaScript Code without any event:This is the first error any JavaScript developer is bound to make. Allow me to illustrate it with a real life example. Suppose, we need to alert the content inside a div with id “content”. The novice developer would write: 
    <html>
<head>
<title>Invalid JavaScript Code</title>
    <script type="text/javascript" language="javascript">
        var content=document.getElementById('content').innerHTML;
        alert(content);
    </script>
</head>
<body>
<div id="content">This is the sample content</div>
</body>
</html>

    Needless to say, the above code will throw an error. The technical explanation of the error is as follows. As JavaScript is an interpreted scripting language, it would try to read the content on the line 6. However, at that moment, the HTML had not been rendered and hence JavaScript will find no div. Its solution is very simple and elementary. All you have to do is to call this code on some event, like onload , onclick etc. Following is the correct way to do it:

    <html>
<head>
<title>Valid JavaScript Code</title>
    <script type="text/javascript" language="javascript">
        function init(){
            var content=document.getElementById('content').innerHTML;
            alert(content);
        }
    </script>
</head>
<body onload="init()">
<div id="content">This is the sample content</div>
</body>
</html>
  2. Reading string as array:Well, once I committed this mistake and spent over 2 days to find this issue from 102 lines of JavaScript. Suppose you need to read and display the 3rd character of a string. any C or PHP developer is bound to write the code like this: 
    <html>
<head>
<title>Invalid JavaScript Code</title>
    <script type="text/javascript" language="javascript">
        function readString(){
            var str="JavaScript";
            alert(str[2]);
        }
    </script>
</head>
<body>
<input type="button" onclick="readString();" />
</body>
</html>

    Quite interestingly, the above code if alert “v” in Firefox or Mozilla. On few Internet Explorers it will throw an error. The reason is that reading string as an array (str[2]) is not an cross browser compatible. The correct way code is as follows:

    <html>
<head>
<title>Valid JavaScript Code</title>
    <script type="text/javascript" language="javascript">
        function readString(){
            var str="JavaScript";
            alert(str.charAt(2));
        }
    </script>
</head>
<body>
<input type="button" onclick="readString();" />
</body>
</html>
  3. Validating for an blank field in JavaScript:This is one of the most common bug your quality analyst or client would let you know. When you are validating a blank field (say username). Most of the JavaScript developers would write the following code to validate it: 
    <html>
<head>
<title>Valid JavaScript Code</title>
    <script type="text/javascript" language="javascript">
        function validate(){
            var value=document.getElementById('uname').value;
            if(value.length<1) {
                 alert("ERROR: Username cannot be left blank");
                 return false;
             }
        }
    </script>
</head>
<body onload="init()">
Username: <input type="text" id="uname">
<input type="button" onclick="validate()" />
</body>
</html>

Although the above code may seems to work, but it fails as soon as you enter any invisible character like space, newline/enter or a tab. The check is that the length of the string entered should not be less than 1 (in this case). What the developer has failed to negotiate that three invisible characters like spaces would count 3 but would be invalid. The solution is simple. Trim (similar to one in PHP) the value before applying this check. Unfortunately, there is no inbuilt function to trim a string. However you can use it from my free library rochak.js as used in the following example.

<html>
<head>
<title>Valid JavaScript Code</title>
    <script type="text/javascript" language="javascript" src="http://rochakchauhan.com/rochak.js"></script>
    <script type="text/javascript" language="javascript">
        function validate(){
            var value=document.getElementById('uname').value;
            value=rochak.trim(value);
            if(value.length<1) {
                 alert("ERROR: Username cannot be left blank");
                 return false;
             }
        }
    </script>
</head>
<body onload="init()">
Username: <input type="text" id="uname">
<input type="button" onclick="validate()" />
</body>
</html>
]]> http://rochakchauhan.com/blog/2008/09/25/most-common-javascript-mistakes/feed/ 432