Javascript Objects and Javascript Arrays

I came across some interesting facts regarding Javascript Objects and Javascript Arrays which I will be discussing below.

Most of us are familiar with Javascript objects and arrays. Technically Javascript Arrays are also Javascript objects, even the typeof Javascript Array will also give its type as object and not array

typeof is a simple JS operator which returns typeof the element passed.

But there are some tiny , interesting and somewhat buggy aspects of Javascript arrays.

  • If in a Javascript Array, you set index 100 to have any value then the length of this array will be returned as 101. JS will fill the rest 100 keys (0 – 99) with null values
    Try this :

    var test_array = Array();
    test_array.length;    //returns 0 this time
    test_array[100] = 'I am hundred';
    test_array.length;    //returns 101 now
    
  • Javascript Arrays cannot ideally be treated as Associative Arrays. You can set and access associative keys but when you do so Javascript arrays work 100% as JS objects and the length of the array wont increase no matter ho many associative keys and respective values you keep on adding.
    var test_array = Array();
    test_array.length;    //returns 0 this time
    test_array['key1'] = 'I am key 1';
    test_array['key2'] = 'I am key 2';
    test_array.length;    //again 0
    
  • The fact above also concludes that JS objects dont have any length property, so we cannot determine whether an object is empty or not with the length property.

How to Create Simple Modal Dialogue using JQuery

Here is a simple jQuery based Cross-Browser modal dialogue.

Demo

Below you can find a simple script, which works with jQuery to show a decent cross browser modal dialogue, The dialogue can have any html that you want. The css here should be used to produce desired results.

JavaScript Source:

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}

//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}

//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6

$("#backgroundPopup").css({
"height": windowHeight
});

}

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){

//LOADING POPUP
//Click the button event!
$("#button").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup();
});

//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});

});

CSS:

a{
cursor: pointer;
text-decoration:none;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#button{
text-align:center;
margin:100px;
}

The Demo for this popup can be seen here

Analyzing your Javascripts performance

Gone are the days when your Javascript’s performance was no issue, developers used to show more love for their server than client’s browser, scripts used to delay the site loading times. There are many best practices for your JS code like having all your scripts at the bottom, etc. If you are looking for the best practices and approaches for you JS code then you should read Steve Souders, Douglas Crockford, Ben Cherry or google it.

But its not easy to remember all such best practices while you code…

what if you had a tool which would love to review your code and point out all the issues?

Yes this is very much possible, this fantastic tool called JSLint. They call it The Javascript code quality tool. and it is rightly so. You have to paste your JS code on the site and it’ll point out the issues, and guide you to improve the quality, hence improving the performance of you JS.