April 26, 2006

Got some Hash? Javascript associative arrays

First, the quick and dirty - creating an associative array in one fell swoop:

webstersCorrect = {
        ”color” : "colour",
        “normalcy” : "normality",
        "aloominum" : "aluminium",
        "George W Bush" : "cocaine addict"
};

or even multi-dimensionally

Queen = {
    ”roger” : [”drums”,”blonde″],
    “john” : [”bass”,”brown″],
    “brian” : [”guitar, uke”,”black″],
    “fred” : [”vox”,”black″]
}

Accessing elements of these is easy:

webstersCorrect["color"] = "Colour"

Queen["fred"] = ["vox","black"]

or even

Queen["brian"][0] = "guitar"

Programatically this is simplicty itself also:

var Result = "";
for ( Bit in webstersCorrect ) {
    Result += Bit + " = " + webstersCorrect + "\n";
}
document.write( Result ); // yeuch!

would result in a list like this:

color = Colour
normalcy = normality
aloominum = aluminium
George W Bush = cocaine addict

you can also use nested loops

for ( Bit in Queen ) {
    for ( Thing in Queen[Bit] ) {
       Result += Queen[Bit][Thing];
       ... and whatever else...
    }
}

Not very inspired but you get the idea...

They are great for ASP creating a HASH from the result of your SQL statement so that you can open your Recordset, fill your hash and then close the recordset. I have a load of modules built to help me do all these things so coding in ASP is nice a quick for me now, not to mention clean codewise as all the functions are in separate files off the page.

Of course ASP>NET does all that for you but we all know how much of a bloated pig that is...

Posted by dottie at 11:14 PM | Comments (0)

January 4, 2006

Date function in Javascript

I have needed to manipulate some dates in a project I am working on. The way I usually did this was to handle incrementing the day, month and year separately. This involved lots of checking leap years and that kind of thing, as it was necessary to check the number of days in each month, watch for year rollovers etc.

There is a MUCH easier way of doing this. I hope. I have done some testing and it all seems to hang together OK so far.

The secret is to convert to milliseconds and then back to a date.

Some code:

function AddDaysToDate( theDate, Days ) { var theDate = new Date( theDate ); var theDate = new Date( theDate.getTime() + (Days * 24 * 60 * 60 * 1000) ); return theDate.getDate() + "-" + (theDate.getMonth() + 1) + "-" + theDate.getFullYear(); }

you will notice that it only uses days. This is to keep it all simple and besides my application only needs days added.

Adding months to the mix

If you wanted to add months then things get a little bit more complex.

We will need to set up an array (may as well make it global) that stores the number of days in every month and then create a function that will update the number of days in February depending on whether the year is a leap year or not.

This is what I came up with:

var MonthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); function CheckLeapYear( theYear ) { if ( theYear % 4 == 0 ) { if ( theYear % 100 == 0 && theYear % 400 == 0 ) MonthDays[1] = 29; if ( theYear % 100 != 0 ) MonthDays[1] = 29; } else { MonthDays[1] = 28; } } function AddDaysAndMonthsToDate( theDate, Days, Months ) { var theDate = new Date( theDate ); var theDate = new Date( theDate.getTime() + (Days * 24 * 60 * 60 * 1000) ); // save the current day var current = theDate.getDate(); // an now set this months day to the first - simplies everything! theDate.setDate( 1 ); // now loop through the months and add each months number of days in milliseconds for ( i = Months ; i > 0 ; i-- ) { CheckLeapYear( theDate.getFullYear() ); // tweaks the number of days in February if necessary var theDate = new Date( theDate.getTime() + (MonthDays[theDate.getMonth()] * 24 * 60 * 60 * 1000) ); } theDate.setDate( current ); return theDate.getDate() + "-" + (theDate.getMonth() + 1) + "-" + theDate.getFullYear(); }

Now we have a function that updates a date by adding the required number of days or months.

It is then trivial to have it add the number of years also:

function AddToDate( theDate, Days, Months, Years ) { var theDate = new Date( theDate ); var theDate = new Date( theDate.getTime() + (Days * 24 * 60 * 60 * 1000) ); // save the current day var current = theDate.getDate(); // an now set this months day to the first - simplies everything! theDate.setDate( 1 ); // now loop through the months and add each months number of days in milliseconds for ( i = Months ; i > 0 ; i-- ) { CheckLeapYear( theDate.getFullYear() ); // tweaks the number of days in February if necessary var theDate = new Date( theDate.getTime() + (MonthDays[theDate.getMonth()] * 24 * 60 * 60 * 1000) ); } theDate.setDate( current ); //now add the years theDate.setYear( theDate.getFullYear() + Years ); return theDate.getDate() + "-" + (theDate.getMonth() + 1) + "-" + theDate.getFullYear(); }

Please let me know about any errors or issue you find.

The scripts should work fine in most browsers but as far as I know the getFullYear() function is a fairly new introduction and may not be supported by old IE browsers on a Mac for instance, but then I did write the functions to be used in ASP so I don't really care! :)

Dont forget to be good little girls and boys now and make all the Javascript external!!

Posted by dottie at 7:03 PM | Comments (0)

July 20, 2004

Labels and the DOM

If you have a label and input as below:

<label for="Stuff">
<input type="text" id="Stuff" name="Stuff" value="xyz" />
<input type="hidden" name="OtherStuff" id="OtherStuff" value="lmno" />
</label>

Then the second input field 'OtherStuff' is not in the DOM - at least in Mozilla. I havent tested IE as I couldnt be bothered.

The solution is to make sure only the input field with the corresponding ID is in the label, so:

<label for="Stuff">
<input type="text" id="Stuff" name="Stuff" value="xyz" />
</label>
<input type="hidden" name="OtherStuff" id="OtherStuff" value="lmno" />

Then it is in the DOM again and you can read and write to it from Javascript - courtesy of Hard-way University :)

Posted by dottie at 2:18 PM

July 16, 2004

FInding the value of a FileUpload form element using Javascript - easy? no. Well... yes!

Struggled with this one for a while tonight. If you want to read the value of a form input element for uploading files, so:

var Temp = document.FormName.FileUploadName.value

then this is wrong

<input name="FileUploadName" type="file">

you have to include value="" even though it is empty. So this is correct:

<input name="FileUploadName" type="file" value="">

Pedantic feckers....

Posted by dottie at 2:38 AM