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

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 <Aelement 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 <Atag

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.

--
Kelvin

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

kelvlam said the following on 7/17/2006 5:19 PM:Did you try finding an FAQ for this group? This question is covered in it.

<URL: http://jibbering.com/faq/#FAQ4_24>
What makes you think that function does anything?
There is, at least, one more way.


<snip>
See Above.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

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

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.

--
Kelvin

Randy Webb wrote:

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

kelvlam wrote: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.lang.javascript/browse_frm/thread/ff83b4ef623fd826/d0719ae5667a7ad8?q=mike+winter+this+object+scope+c hain&rnum=10#d0719ae5667a7ad8>
<URL:http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/27beecb64c504859/28e16b48661bf7e2?lnk=st&q=mike+winter+%22this+oper ator%22+object+scope+chain&rnum=1#28e16b48661bf7e2 >

Or this search:
<URL:http://groups.google.co.uk/groups/search?q=group%3Acomp.lang.javascript+%22this+oper ator%22+%7C+%22this+refers+%7C+references%22>


--
Rob

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

RobG wrote: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
--
Kelvin

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

kelvlam wrote:

[...]Cool.

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.

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'.

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

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

RobG wrote: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