Which one is the best and why?

Hi ,

  1. <a href=“javascript:muthuraja()” >Click Here</a>
  2. <a href=“javascript:;” onClick=“muthuraja()”>Click Here</a>
  3. <a href=“javascript:void(0);” onClick=“muthuraja()”>Click Here</a>

I dont know,Which one is the best and why? Explain the Reason.

MuthuRaja

They are all very, very terrible and awful.

They all cause cancer in the elderly, foam to froth from the mouths of babes and the sky to turn an angry shade of purple.

However, here is an example of what gives the poor man bread, makes doves fly over weddings and babies ring little bells in joy:


<a id="muthuraja" href="muthuraja.html">Muthuraja Community</a>

...
<script type="javascript">
var muth = document.getElementById('muthuraja');
muth.onclick = function() { 
  //do whatever muthuraja() was going to do;
  return false; //make the anchor NOT work normally IF the user has Javascript on... same as your javascript: void()
}
</script>

Why?

#1. Don’t pollute your HTML with Javascript. Javascript can access HTML elements in many ways. My example is just the easiest way.

#2. Give users without Javascript (there are still mobile phones and other devices who don’t have Javascript at all… people block scripts, work firewalls may block scripts, whatever) a regular link they can click. Unless the Javascript is just to do something fun and silly and stupid, make sure your HTML works!! If you only use the anchor because you need something for people to click on to make the Javascript work, and otherwise no anchor needed, then don’t put the anchor in the HTML. Make Javascript put it in there (createElement). Then it only exists for people with Javascript, and only people with Javascript need it anyway.

#3. By keeping Javascript out of the HTML, if you later need to have TWO functions when the anchor is clicked, or more, you can.

#4. “Click Here” doesn’t tell people WHY they should click. Put something meaningful in the anchor text!

Well… I don’t know about those methods causing cancer. But it’s possible I suppose…

Anyway, I’m not a fan of changing the functionality of a hyper link that, and I usually don’t. I usually just change an <li>'s color to blue and underline it and make it look like a link if I want to do something different with onclick. But if you HAVE to, and want to do it with inline js… I’d do it like.


<a href="" onclick="muthuraja(); return false;">Click Here</a> 

There are other ways of preventing it from redirecting the page inside of the function, but this way is probably the most simplistic…

Well… I don’t know about those methods causing cancer. But it’s possible I suppose…

Do not underestimate the power of Javascript! : )

Thx for your quick reply Stomme poes.

Can I register 1000 click events(I mean 1000 onClick) in single webpage? If any memory Problem or performance related problem will create?

The more events, the slower the browser, so far as I understand it.

When the file is first read by the browser, it assigns all the events… and each assignment takes up memory, yes. IE6 will maybe not remove them from memory when the user goes to another page or site either (it has a memory leak problem).

But if you want to have a group of anchors all have the same event (like, clicking) cause the same function to run (like, open a popup) then keeping your Javascript out of the HTML means less writing, because instead of adding the onClick=someFunc() to every single anchor, Javascript can grab all of them and loop through them and add the event in one block of code.

I have lot of doubt in javascript(Function , object, DOM, Events,… Related doubt). After Monday i will post my Question. Have a nice day and Happy Christmas Stomme poes.

MuthuRaja

I have lot of doubt in javascript(Function , object, DOM, Events,… Related doubt)

What are you learning from? (book, course, tutorial?)

hi Stomme poes
Sorry for the delay Stomme poes. I learning from online tutorial.

Muthuraja

Remove Child Element
Method 1:Using removeChild
function removeAll(n) {
while (n.firstChild) {
n.removeChild(n.firstChild);
}
}
removeAll(document.getElementById(‘wrap’));

Method 2: Using innerHTML
document.getElementById(‘wrap’).innerHTML=“”;

Which one is the Best?

Method two only works with HTML, not in XHTML environments.

I would use method 3, a slightly more expressive form of method 1


function removeChildren (el) {
    while (el.hasChildNodes()) {
        el.removeChild(el.firstChild);
    } 
}
removeChildren(document.getElementById('wrap'));

Thx Paul Wilkins.

Method two only works with HTML, not in XHTML environments.

Is this XHTML?

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>innerHTML Example</title>
</head>

<body>
<div id=“asdf”>Content1</div>
<script>
document.getElementById(‘asdf’).innerHTML=“Content2”;
</script>
</body>
</html>

Its working properly.

Surprisingly enough, the HTML code on the page bears no relation at all what-so-ever as to whether the page is HTML or XHTML.

For example, in Firefox go to www.google.com, right-click on the page and choose View Page Info.
You will see that the Type of the page is “text/html”

Now go to www.google.com/xhtml and do the same thing, and you will see that the Type of the page is “application/xhtml+xml”

That is what determines whether a page is HTML or XHTML. The type of the page determines how it is served to your web browser.

Trivia: Internet Explorer completely fails to understand any XHTML in any way what-so-ever

When web pages are written as some form of XHTML, as you have, and they are served as “text/html”, those pages will be interpreted by your web browser as if they were HTML code instead.

It’s quite rare to come across XHTML web pages on the web, due to compatibility issues with Internet Explorer. This is why virtually all XHTML code that is written, is done in such a way that it can be correctly interpreted as if it were HTML code instead. There’s even a bunch of HTML coimpatibility guidelines that you must make to your XHTML code before you can properly use it as HTML code.

So to sum up, just because you write XHTML code, doesn’t mean that the web browser will interpret it as XHTML code.

Thx Paul Wilkins. I will try to write some example.

MuthuRaja

how to write the small javascript framework
this is my application model (method 1)
method 1:
function fn1(){
----some code----
}
function fn2(){
----some code----
}
function fn3(){
----some code----
}
function fn4(){
----some code----
}
function fn5(){
----some code----
}


shall I proced model 2?
method 2:
var obj={
fn1:function(){
----some code----
},
fn2:function(){
----some code----
},
fn3:function(){
----some code----
},
fn4:function(){
----some code----
},
fn5:function(){
----some code----
}
}

which one the best? any alternative way is there?

MuthuRaja

The first one creates a large number of global functions, so the second one is better.

The global namespace like a public toilet. You cannot avoid going in there, but try to limit your contact with surfaces when you do.

Thx for your Quick Reply Paul.
The first one creates a large number of global functions, so the second one is better.
second one is only better.
Any Best solution?

Yep, use only one global for your project, in much the same way that jQuery and Yahoo do for their frameworks.


MYFRAMEWORK = {};
MYFRAMEWORK.obj = {
    fn1: function () {

    },
    fn2: function () {

    }
};

Of course, you’ll want to use a more appropriate global than MYFRAMEWORK, one that is unique to you, easy to recognise, and hard to forget.

Thx a lot Paul. I will write this model . if any doubt i will ask.

Thx a lot Paul. I will write this model . if any doubt i will ask.

If you have a copy of the book Simply Javascript, I know this is one book who teaches you to write Javascript in this way (with one global object and everyone else inside it, as Paul showed).

I don’t know which other books also teach this way, but this is being encouraged more and more as a Good Thing. So, any (modern) Javascript book or tutorial that writes this way is probably good for you to use as a resource.