javascript

Javascript: Always define variable with ‘var’

So today, I found one more unseen behavior of Javascript (at least for me).

I wrote a very simple function in Javascript and forgot to add ‘var’ in front of variable definition. This function worked first time but for second time I got JS error saying the function does not exist. I was like what the hell, where did my function go? It just worked as expected for first time and suddenly browser is not able to find it.
It took me 20 minutes to find out the reason of my biggest mistake of tonight. Such a waste of precious 20 minutes at 3:00 AM :(
Lesson learned, always define variables in Javascript with ‘var’ keyword or else stay up till late night ;)

Less know JavaScript operator ‘Delete’

One of the lesser known operators in JavaScript is the ‘delete’ operator. I came to know about while reading John Resig’s blog.

What does it do?
The delete operator deletes an object, an object’s property, or an element at a specified index in an array.

More about it at Mozilla Reference Docs.

Small Example:

JavaScript Error: Expected Identifier in IE

If you are getting ‘Expected Identifier’ JavaScript error on IE this means you have some conflict with Mr. Gates :)

Okay to the point, this can happen due to two reasons (as per my knowledge, let me know if you know something else):

1. Some typing mistake in your code

var myVar = {
function1: function() { // some code },
variable1: ‘Some value’,
variable2: ‘Another value’,
};

Notice the extra comma after the last variable defined just before } braces, Firefox will ignore this but IE will not. Lets move to second reason.

2. You have used reserved keyword in your code mostly as variable name Just yesterday, I got this error on IE due to some old written JS code. First I tried to find the code mistake but after looking at the code with a sharp eye I found that some reserved words were used. Following is the code I corrected

obj.class = ‘up’; ///this works in Firefox
obj.className = ‘up’; ///this is the correct implementation

var onloadstat = 0; //works in FF but in IE its a reserved keyword same as ‘class’

At the end, if you get the ‘Expected Identifier’ JS error in IE first look for these mistakes. You will be able to fix the error quickly.

nonstandard property :: innerHTML (but is a de facto standard)

The innerHTML property is not part of the DOM. It isn’t part of any standard. It is a proprietary addition created by Microsoft.

Normally, I wouldn’t recommend using anything proprietary in JavaScript code (although the XMLHttpRequest object itself is a proprietary addition). However, the innerHTML property is exceptionally well supported, considering that it is nonstandard. It is, in effect, a de facto standard: it is supported in all the major browsers. The reason why innerHTML has been so widely adopted, without any endorsement from the W3C, is that it is very useful in certain situations.

DOM methods allow you to manipulate a document very precisely. You can create elements, attributes, and text, one node at a time. That is very powerful, but it is also quite time-consuming.

The innerHTML property uses brute force. If you read the innerHTML property of an element, you will receive a string of HTML. This is a read/write property, meaning that you can also assign a string of HTML to go inside an element.

Any HTML that was previously inside the element will be obliterated and replaced with the contents of the string.

Ajax Video Tutorials by Stefan Mischook

Again very good video tutorials to learn AJAX at Killerajax.com by Stefan Mischook. These video tutorials are again from the network of killersites.com the same as Actionscript Videos and PHP Videos and all the videos are not free. Few basic videos are free just to get the quality & measure the contents of paid videos. But even if they are paid its worth for it and will not pinch out your pockets. Just $19.99 to download all the videos. I think it is worth to spend money on Visual Learning then purchasing a book and fondling pages around not getting everything.

Video Highlights (from site):

  • Build a fully functional AJAX shopping cart.
  • Learn about Free AJAX tools to speed up your AJAX work.
  • Learn how to connect AJAX with PHP
  • Overt 3 hours of videos.

So if you are willing to learn some AJAX you must check out Killerajax.com

p.s: it is also a part of killersites.com network

Fixing PNG transperency for Internet Explorer (MSIE): A Little Hack

Recently I have started using PNG format images for my web application icons because of its lossless data compression and variety of transparency options. More on PNG can be found on Wikipedia. (http://en.wikipedia.org/wiki/png)

Problem I faced with PNG images:
Well it is good to use PNG but there is one problem for PNG images with Internet Explorer (thanks to Microsoft and Bill Gates). Internet Explorer (IE) does not render PNG’s transparency properly so background is shown for transparent PNG images. It was really bad hit for my development. But i believe ‘where there is will, there is a way’ or you can say ‘where there is a problem, there is a solution’.

Solution I found and Implemented:
While searching for solution on Internet, I found a simple and useful solution to the problem. I implemented it and it worked great as the author said so. Well it is a little javascript hack for only Internet Explorer which renders PNG images as SPAN and displays the image as it is meant. The hack uses Microsoft’s AlphaImageLoader filter to display the transparency of PNG images. The little javascript code only works with IE and does not bother other browsers.

Where to get it:
I have pasted the code at bottom of this post but i will recommend to go to official site for updated version of the code. The code is placed at the website http://homepage.ntlworld.com/bobosola/. I didn’t get the name of author, I feel sorry for I was not able to mention his/her name here. I didn’t find it on site, if someone gets it please let me know. But the author has thanked many people on his website.

Disadvantages:
The hack is based on javascript and works only for Internet Explorer 5.5 and 6 on Windows. If javascript is OFF the images are shown as with background. (but i don’t bother for that because my most web applications are based on Ajax so it is meant only for user with javascript ON). There are few more cons in hack which are explained on the site mentioned above.

The Code:
There are two ways of using the hack.

  1. Put following code to head section of your web page. (just copy/paste)


  2. Second is save the above code in file and name it pngfix.js and copy the following code to head section of your web page.

Help for implementation:
If you need any help for implementing the code just visit the website of the author where he has explained it in a simple and effective way with demos. And secondly you can post comment here for help and I will help if I am able to.

Keep Sharing !

The window.onload problem

I found this very useful and explaining article while searching for a javascript problem i was facing during development of an online application (Ajax, PHP & MySQL based).

The article is written by Peter Michaux on his blog and explains the problem & solution related to window.onload event, the common problem faced by most of the web developers. Here is the link:
http://peter.michaux.ca/article/553

I am not able to brief it here because it’s really big to be typed here.

enjoy

 Scroll to top