Friday 20 November 2009

JavaScript friend or foe?

SO all had been going well, the html was near enough done, the hyper links all worked and my template looked as it should look. My pages were complete, my form was set up all and I was pretty dam pleased with myself, I even had fun with the html making an image change on mouseover on my about section via this code.
 <img  src="images/family.jpg"
         onmouseover="this.src='images/kissy.jpg'"
         onmouseout="this.src='images/family.jpg'"/> 


Stage 3 Javascript: 

First off i did what was necessary and that was to validate my form. We had done validation in practicals so i refereed to the lecture slides in order to gain vital information. However on first attempts my code refused to work, very frustrating. JavaScript seemed to be laughing in my face. My form was being sent to sam-i-am, but it just wouldn't validate, why not? At the time I cocouldn't work it out so I took a much needed break.

On returning to look very closely at my code, i first realised that i was missing simple IF statements, a stupid error i know. Upon even further inspection i noticed that the dreaded caps lock key had been neglected the whole time, was this a moment of clarity? YES IT WAS!! my script now worked perfectly, pop ups graced my screen when fields were left blank or an invalid email address was submitted.

Now i could move on. I wanted to make it clear to the user that they would be navigating away from my website upon clicking the blog and facebook links on my sidebar. Again i would have to use JavaScript.
The main part of the code that enabled me to do this was this here..
  <script type="javascript">
function leaveConfirm2() {
if (confirm("Proceeding will direct you to my Facebook page,do you wish to continue?")) {
window.location.href = "http://www.facebook.com/benquinney/";
}
return false;
}
</script>

<script type="javascript">
function leaveConfirm() {
if (confirm("Proceeding will direct you to my Blog,do you wish to continue?")) {
window.location.href = "http://benqdat.blogspot.com/";
}
return false;
}
</script>  



At first this code would not work but I soon found out why. I required a second piece of code here..

<a href="http://benqdat.blogspot.com/"onclick="return leaveConfirm();"

Success! The user was now prompted when clicking both sidebar links, but a minor error still remained.

At first i had the same slice of code for both my blog link and facebook, this was easily fixed by using.

<a href="http://benqdat.blogspot.com/"onclick="return leaveConfirm2();"

This gave the second onclick its own unique id.

So there we have it my JavaScript was nicely polished and inserted into my html files. My website was now live and I felt a sense of accomplishment. Lets see if the validator agrees..... 

No comments:

Post a Comment