is this top quality javascript

**Michael Winter** · Jul 23 '05, 03:19 PM

Re: is this top quality javascript

On Tue, 16 Nov 2004 12:51:49 +1300, WindAndWaves <access@ngaru.c om> wrote:
[color=blue]
> I have written a oneline Javascript and I want to make sure that it
> matches with best practice:[/color]

It depends on what is actually happening on that page. I'm assuming
something like an image gallery where a main image is replaced by another.
[color=blue]
> <DIV ID=isw><image></DIV>
>
> <A HREF="#"[/color]

I'd argue that the proper value for the href attribute is actually the
image you're trying to assign. That would allow a fallback should your
script fail.
[color=blue]
> OnClick="docume nt.getElementBy Id('isw').inner HTML = '<IMG[/color]

You'd probably be better off using the DynWrite[1] function in the FAQ. If
it succeeds, you can cancel the click event (which you neglect to do
here). If not, and you've taken note of the previous suggestion, the link
will go to the image itself.

onclick="return !DynWrite('isw' ,
'<img src="i/M/test.jpg" class=L>');"
[color=blue]
> SRC=i/M/test.jpg[/color]

You have to quote that attribute value. To do this, you'll have to use the
" entity reference (as above).
[color=blue]
> CLASS=L'>"[/color]

That single-quote is in the wrong place: class=L>'"
[color=blue]
> CLASS=Mi>click here to change image</A>[/color]

See <URL:http://www.w3.org/QA/Tips/noClickHere>.
[color=blue]
> If you click the image in the DIV with ID=isw should change to
> i/M/test.jpg[/color]

Does the IMG element already exist, or are you adding it at run-time? If
the IMG element is present from the outset, then all this can easily be
reduced to

document.images['imageNameOrId'].src = 'i/M/test.jpg';

where you identify the image, not its container.

Hope that helps,
Mike

[1] The basic DynWrite function is available in the main FAQ, but I'd
recommend the alternative version
(<URL:http://www.jibbering.c om/faq/faq_notes/alt_dynwrite.ht ml>) in this
case. You should use one of the last suggestions: the ones that end
"return !!el;"

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

**Ivo** · Jul 23 '05, 03:19 PM

Re: is this top quality javascript

"WindAndWav es" wrote[color=blue]
> I have written a oneline Javascript and I want to make sure that it[/color]
matches[color=blue]
> with best practice:
>
> <DIV ID=isw><image></DIV>
>
> <A HREF="#" OnClick="docume nt.getElementBy Id('isw').inner HTML = '<IMG
> SRC=i/M/test.jpg CLASS=L'>" CLASS=Mi>click here to change image</A>
>
> If you click the image in the DIV with ID=isw should change to[/color]
i/M/test.jpg

Well, eh no. More or less in order of importance:
- Check if the browser understands getElementById before using it.
- The innerHTML thing is understood by some browsers, but not by the
'standards' of the W3C. It 's fairly easy to use the DOM instead.
- You should 'return false' from the onclick event handler to avoid
following the href of the link.
- Provide alternative content to those who don't have javascript (by free
choice or otherwise), for example in said href.
- Put as little script as possible in the HTML itself. Instead, create a
function that you put in a separate script block, or even a separate file.
Now you wrestle with double and single quotes, it 's a mess and the quote
following the capital L is out of place, breaking your entire code.
- Put all attribute values in quotes, also when it 's not strictly required.
This avoids problems in those cases where it is required (more often than
you 'd think).
- Never use "click here" as link text, but something meaningful, like
"Change image".
- Alt attributes are necesary for each and every image.
- HTML is not case-sensitive, but uppercase and certainly mixed case (as in
'OnClick') are more difficult to read than a document with all lowercase
tags and attributes.
- Remember one man's best practise is another man's nightmare.

<script type="text/javascript">
function changeimage(){
if( document.getEle mentById && document.getEle mentById('isw') ){
var d=document.getE lementById('isw ');
if(document.cre ateElement){
var i=document.crea teElement('img' );
i.src='i/M/test.jpg';
i.className='L' ;
i.alt='';
while(d.firstCh ild!==null){
d.removeChild(d .firstChild);
}
d.appendChild(i );
return false;
}else if(d.innerHTML) {
d.innerHTML='<i mg src="i/M/test.jpg" class="L" alt="">';
return false;
}
return true;
}
}
</script>

<div id="isw"></div>
<a href="i/M/test.jpg" onclick="return changeimage();" class="Mi">chan ge
image</a>

Hope I haven't forgotten anything!
--
Ivo

**WindAndWaves** · Jul 23 '05, 03:19 PM

Re: is this top quality javascript

"Michael Winter" <M.Winter@bluey onder.co.invali d> wrote in message
news:opshi7o7kp x13kvk@atlantis ...[color=blue]
> On Tue, 16 Nov 2004 12:51:49 +1300, WindAndWaves <access@ngaru.c om> wrote:
>[/color]
....snip ... snip
[color=blue]
> onclick="return !DynWrite('isw' ,
> '<img src="i/M/test.jpg" class=L>');"
>[/color]

Thank you Michael, that definitely helps, why do you use &quot and not \" -
is that better?

**Michael Winter** · Jul 23 '05, 03:19 PM

Re: is this top quality javascript

On Tue, 16 Nov 2004 13:50:10 +1300, WindAndWaves <access@ngaru.c om> wrote:
[color=blue]
> "Michael Winter" <M.Winter@bluey onder.co.invali d> wrote in message
> news:opshi7o7kp x13kvk@atlantis ...[/color]

[snip]
[color=blue][color=green]
>> onclick="return !DynWrite('isw' ,
>> '<img src="i/M/test.jpg" class=L>');"[/color]
>
> Thank you Michael, that definitely helps, why do you use &quot and not
> \" - is that better?[/color]

In this case, no. In fact, it will result in broken markup.

When you have code in a SCRIPT element, either as content or as an
external file, the HTML parser will ignore it. It knows there's no HTML
content, so it just waits until it finds the closing tag. If the code
above was within a SCRIPT element, you would have to use a backslash
escape. The reason being that because the HTML parser ignores the script,
it won't transform " to '"'.

With intrinsic events - attributes in general, really - the HTML parser
*does* treat the value, so entity references are converted. However,
Javascript escape sequences aren't understood. If you had

"He said, \"Get over here!\""

the attribute value would end at the first \".

It's a matter of context. Does that help?

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

**RobG** · Jul 23 '05, 03:19 PM

Re: is this top quality javascript

WindAndWaves wrote:[color=blue]
> I have written a oneline Javascript and I want to make sure that it matches
> with best practice:
>
> <DIV ID=isw><image></DIV>
>
> <A HREF="#" OnClick="docume nt.getElementBy Id('isw').inner HTML = '<IMG
> SRC=i/M/test.jpg CLASS=L'>" CLASS=Mi>click here to change image</A>
>
> If you click the image in the DIV with ID=isw should change to i/M/test.jpg
>[/color]

Being one who likes brevity... I'd put the onclick on the image itself,
greatly simplifying things (but hopefully not trivialising them):

<div>
<a href="test2.jpg " onclick="return false;">
<img src="test1.jpg" alt="Change image" onclick="
this.src = 'test2.jpg';">
</a>
</div>
<p>Click the image to change it</p>

If you don't like the border around the image, remove it with CSS.

Anyhow, just thought I'd present a simple alternative...
Tested in Firefox and IE :-)

Cheers, Rob

**RobG** · Jul 23 '05, 03:19 PM

Re: is this top quality javascript

RobG wrote:
[...][color=blue]
> Anyhow, just thought I'd present a simple alternative...
> Tested in Firefox and IE :-)[/color]

A quick tidy up - I was in a bit of a rush, sorry. Don't put a return
before the closing </a> tag like I did. Blocking code that way looks
better but introduces a small, dotted box after the image in the
browser.

Also, add a blur() to the image onclick to get rid of the dotted border
that appears after you click it.

<div>
<a href="test2.jpg " onclick="this.b lur();return false;">
<img src="test1.jpg" alt="Change image" onclick="
this.src = 'test2.jpg';
return false;"></a>
</div>
<p>Click the image to change it</p>

Cheers! Rob.

**Evertjan.** · Jul 23 '05, 03:19 PM

Re: is this top quality javascript

RobG wrote on 16 nov 2004 in comp.lang.javas cript:
[color=blue]
> <div>
> <a href="test2.jpg " onclick="this.b lur();return false;">
> <img src="test1.jpg" alt="Change image" onclick="
> this.src = 'test2.jpg';
> return false;"></a>
> </div>
> <p>Click the image to change it</p>
>[/color]

Nice.

Why the second return false; ?

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress,
but let us keep the discussions in the newsgroup)

**WindAndWaves** · Jul 23 '05, 03:19 PM

Re: is this top quality javascript

"WindAndWav es" <access@ngaru.c om> wrote in message
news:tibmd.2594 $9A.97158@news. xtra.co.nz...[color=blue]
> I have written a oneline Javascript and I want to make sure that it[/color]
matches[color=blue]
> with best practice:
>[/color]
..... snip .... snip

Thank you all for your comments and suggestions.

I tried to go with Michael's script, but ran into some difficulties, so I
used Ivo's script in the end.

To see the results, please have a look at

https://www.corstorphinehouse.com/heritage.html

Thank you once more for your comments.

**RobG** · Jul 23 '05, 03:20 PM

Re: is this top quality javascript

Evertjan. wrote:
[...][color=blue]
>
> Why the second return false; ?
>[/color]

No reason at all, it isn't required. So much for brevity... :-(

Rob.

is this top quality javascript

is this top quality javascript

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment