using href="#" vs href="javascript:func()" ?

[kelvlam]

Hello,

I'm a new begininer with JavaScript. I'm trying to figure out which is
the best approach, and to understand the differences between them.

I have a <A> element that's suppose to either launch a popup window, or
it will link you to some dynamic created page.

I have declared a global JavaScript function

function showStatus(sMsg)
{
window.status = sMsg ;
return true ;
}


I know there are 3 ways to create this <A> tag

Option 1)
<a id="element1" href="#"
onClick="launchLink(this)"
onMouseOut="return showStatus('')"
onMouseOver="return showStatus('{$positions}')">

This option seem to be the simpliest. But if say I scrolled to the
middle of a page, click the link, the entire page will jump to top.
This kind of page-juggling is undesirable.


Option 2)
<a id="element1" href="javascript:launchLink(this)"
onMouseOut="return showStatus('')"
onMouseOver="return showStatus('{$positions}')">

This seem to work fine, but some like the "this" that I pass into the
javascript function, isn't the same as the "this" in option 1. I seem
to have a difficult problem manipulating the element inside the
JavaScript and DOM.


Option 3)
<a id="element1" href="javascript:void(0)"
onClick="launchLink(this)"
onMouseOut="return showStatus('')"
onMouseOver="return showStatus('{$positions}')">

This seem to yield the same result as option, but without the page
juggling. The "this" passed into the javascript seem to behave the
same as option 1 also. So far this is my pick.


Can some JavaScript expert and Guru shed some light to this newbie
please?

Much appreciated for any pointer or advice.

 

[Randy Webb]

kelvlam said the following on 7/17/2006 5:19 PM:

Hello,

I'm a new begininer with JavaScript. I'm trying to figure out which is
the best approach, and to understand the differences between them.

Did you try finding an FAQ for this group? This question is covered in it.

I have a <A> element that's suppose to either launch a popup window, or
it will link you to some dynamic created page.

I have declared a global JavaScript function

function showStatus(sMsg)
{
window.status = sMsg ;
return true ;
}

What makes you think that function does anything?

I know there are 3 ways to create this <A> tag

There is, at least, one more way.

Can some JavaScript expert and Guru shed some light to this newbie
please?

See Above.

 

[kelvlam]

Sorry I haven't read through the FAQ. I will do so now.

I also found a link that I read upon, and I found it quite helpful for
myself to understand this issue --
http://www.quirksmode.org/js/this.html

Thanks for the pointer.

 

[RobG]

Sorry I haven't read through the FAQ. I will do so now.

Please don't top post in com.lang.javascript.

I also found a link that I read upon, and I found it quite helpful for
myself to understand this issue --
http://www.quirksmode.org/js/this.html

As much as I like Peter-Paul's stuff, I think his explanation of 'this'
in that article could be better. Try these Mike Winters posts:

<URL:http://groups.google.com/group/comp...s+object+scope+chain&rnum=10#d0719ae5667a7ad8>
<URL:http://groups.google.com/group/comp...r"+object+scope+chain&rnum=1#28e16b48661bf7e2>

Or this search:
<URL:http://groups.google.co.uk/groups/s...+"this+operator"+|+"this+refers+|+references">

 

[kelvlam]

Please don't top post in com.lang.javascript.



As much as I like Peter-Paul's stuff, I think his explanation of 'this'
in that article could be better. Try these Mike Winters posts:

<URL:http://groups.google.com/group/comp...s+object+scope+chain&rnum=10#d0719ae5667a7ad8>
<URL:http://groups.google.com/group/comp...r"+object+scope+chain&rnum=1#28e16b48661bf7e2>

Or this search:
<URL:http://groups.google.co.uk/groups/s...+"this+operator"+|+"this+refers+|+references">

Still newbie with this usergroup. I won't top-post anymore

I read through the FAQ, the top-ten web-design mistake
(http://www.useit.com/alertbox/20021223.html) and the best practice
list (http://www.javascripttoolbox.com/bestpractices/), I am crossing
my finger that I'm not re-asking the same question.

I know using pseudo-javascript protocol is bad, so I tried the
following

<a
title="{document(concat($languageDisplay,'.xml'))/Nexa/execution_detail}"
href="blank.html"
onclick="return openDetail(this)"
onmouseout="return showStatus('');"
onmouseover="return showStatus('get detail');">Detail</a>

When my mouse over and mouse out, I am able to show the appropriate
text in the browser status window. But I always want to replace the
status bar text when the user click on the hyperlink. Currently if I
click, it'll show "http://blah/blank.html" in the status bar.

Which particular even should I be capturing in order to achieve this
feature?

Thanks again

 

[RobG]

kelvlam wrote:

[...]

Still newbie with this usergroup. I won't top-post anymore
Cool.


I read through the FAQ, the top-ten web-design mistake
(http://www.useit.com/alertbox/20021223.html) and the best practice
list (http://www.javascripttoolbox.com/bestpractices/), I am crossing
my finger that I'm not re-asking the same question.

I know using pseudo-javascript protocol is bad, so I tried the
following

The JavaScript pseudo-protocol.

It refers to entering "javascript:" instead of say "http:" as the
protocol in the URL.

Going back to your original question, the usual deal is to put a real
URL in the href attribute, then use the onclick attribute to call your
script and return false to cancel the href navigation if the script
successfully completed.

<a
title="{document(concat($languageDisplay,'.xml'))/Nexa/execution_detail}"
href="blank.html"
onclick="return openDetail(this)"
onmouseout="return showStatus('');"
onmouseover="return showStatus('get detail');">Detail</a>

When my mouse over and mouse out, I am able to show the appropriate
text in the browser status window. But I always want to replace the
status bar text when the user click on the hyperlink. Currently if I
click, it'll show "http://blah/blank.html" in the status bar.

What is shown in status bar depends on the browser and how it's
configured. Whether the bar is displayed or not, and whether you can
modify what it displays, is user configurable in most browsers. Some
don't show it at all by default (e.g. Safari), others show what the
href resolves to, still others things like 'Will open blank.html in a
new window'.

Which particular even should I be capturing in order to achieve this
feature?

Don't try. Leave the status bar alone, most browsers can prevent you
from setting its value anyway and do so by default (I'm pretty sure
Firefox is one).

 

[kelvlam]

kelvlam wrote:

[...]

Still newbie with this usergroup. I won't top-post anymore
Cool.


I read through the FAQ, the top-ten web-design mistake
(http://www.useit.com/alertbox/20021223.html) and the best practice
list (http://www.javascripttoolbox.com/bestpractices/), I am crossing
my finger that I'm not re-asking the same question.

I know using pseudo-javascript protocol is bad, so I tried the
following

The JavaScript pseudo-protocol.

It refers to entering "javascript:" instead of say "http:" as the
protocol in the URL.

Going back to your original question, the usual deal is to put a real
URL in the href attribute, then use the onclick attribute to call your
script and return false to cancel the href navigation if the script
successfully completed.

<a
title="{document(concat($languageDisplay,'.xml'))/Nexa/execution_detail}"
href="blank.html"
onclick="return openDetail(this)"
onmouseout="return showStatus('');"
onmouseover="return showStatus('get detail');">Detail</a>

When my mouse over and mouse out, I am able to show the appropriate
text in the browser status window. But I always want to replace the
status bar text when the user click on the hyperlink. Currently if I
click, it'll show "http://blah/blank.html" in the status bar.

What is shown in status bar depends on the browser and how it's
configured. Whether the bar is displayed or not, and whether you can
modify what it displays, is user configurable in most browsers. Some
don't show it at all by default (e.g. Safari), others show what the
href resolves to, still others things like 'Will open blank.html in a
new window'.

Which particular even should I be capturing in order to achieve this
feature?

Don't try. Leave the status bar alone, most browsers can prevent you
from setting its value anyway and do so by default (I'm pretty sure
Firefox is one).

Rob,

Thanks for the response. After searching this usergroup in google for
"window.status", then I realize it's more-or-less now out of the
programmer control, because it's being overwrite by the browser.
Firefox and IE7 both have it default disable for the script to modify
the status bar.

I guess I will just put something meaningful like "redirect.html" in
the HREF, so when the user mouse-over the link, the status won't show
my long dynamic page request query string, but just
"http://blah/redirect.html" instead.

Much appreciate your help!

Kelvin