By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,837 Members | 1,813 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,837 IT Pros & Developers. It's quick & easy.

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

P: n/a
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

Jul 17 '06 #1
Share this Question
Share on Google+
6 Replies


P: n/a
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.

<URL: http://jibbering.com/faq/#FAQ4_24>
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 ;
}
What makes you think that function does anything?
>
I know there are 3 ways to create this <Atag
There is, at least, one more way.
<snip>
Can some JavaScript expert and Guru shed some light to this newbie
please? :-)
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/
Jul 17 '06 #2

P: n/a
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:
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.

<URL: http://jibbering.com/faq/#FAQ4_24>
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 ;
}

What makes you think that function does anything?

I know there are 3 ways to create this <Atag

There is, at least, one more way.
<snip>
Can some JavaScript expert and Guru shed some light to this newbie
please? :-)

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/
Jul 17 '06 #3

P: n/a

kelvlam wrote:
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.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

Jul 17 '06 #4

P: n/a

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

Jul 17 '06 #5

P: n/a
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

Jul 18 '06 #6

P: n/a

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

Jul 18 '06 #7

This discussion thread is closed

Replies have been disabled for this discussion.