[JS] gebruik van "javascript: "

[CaptBiele]

Ik dacht het wel ff op te zoeken, maar ik kan geen zoekopdracht vinden waarbij ik goede resultaten krijg. Daarom stel ik hier ff een simpele vraag:

wanneer is het gebruik van "javascript: " nou precies nodig??
(voorbeeld: <a href="javascript: test()"> klik </a>

Het lijkt me logisch dat het gebruikt wordt om aan te geven dat het een javascript functie is, maar ik kan het ook heel vaak weglaten.

Het is simpel opgelost door het overal neer te zetten, maar ik wil natuurlijk niets doen wat niet nodig is

[HunterPro]

In elke link waar anders een URL zou worden geinterpreteerd. Probeer maar eens een <a href="test()"> te doen; deze zal naar http://test() proberen te linken. Het is dus puur een interpretatiehulpje de browser.

[Pelle]

javascript: gebruik je in het href attribuut van de a-tag.
Je laat het weg in events als onClick en onLoad.

[crisp]

Puristisch gezien is het natuurlijk onzin om een link te gebruiken om javascript uit te voeren; je kan net zo goed:

code:

<span onClick="test()">klik</span>

doen.
Ik snap het wel, met een link krijg je automagisch een handje, en je kan er leuke hovertjes opzetten en zo, maar met een beetje css en (voor IE omdat een span:hover daarin niet ondersteund wordt) een beetje js heb je zo hetzelfde effect met een span of willekeurig ander element.
Javascript in de href zetten vind ik sowieso ranzig, ik gebruik liever de daarvoor bedoelde event-handlers:

code:

<a href="#" onClick="test();return false">klik</a>

(let op de return false, anders wordt de href alsnog uitgevoerd met hier als resultaat dat de pagina weer terug omhoog wordt gescrolled wat natuurlijk niet altijd even handig is)
Wat ik ook vaak gebruik is:

code:

<a href="javascript://" onClick="test()">klik</a>

Hier boeit het niet zo als de href wel wordt uitgevoerd (is een dummy javascript), hoewel ik wel eens heb gehoord dat dat soms een leeg extra window opleverd als je niet expliciet een target="_self" opgeeft.

[CaptBiele]

pelle> tnx voor je antwoord, kort maar krachtig.

crisp> ik was nog niet bekend met het werken van de event-handlers, ik ben het nu ff aan het uitpluizen... maar als ik jou zo hoor is het dus niet erg professioneel om javascript in de href te zetten? wat zijn eigenlijk de nadelen om het zo te gebruiken?

[Verwijderd]

CaptBiele schreef op 17 oktober 2002 @ 12:00:
pelle> tnx voor je antwoord, kort maar krachtig.

crisp> ik was nog niet bekend met het werken van de event-handlers, ik ben het nu ff aan het uitpluizen... maar als ik jou zo hoor is het dus niet erg professioneel om javascript in de href te zetten? wat zijn eigenlijk de nadelen om het zo te gebruiken?

/me *springt in de band voor crisp

Zoals crisp al zei, in eerste instantie vanwege mogelijke ongewenste bijeffecten, zoals dus het terugspringen naar de top van je document. Een return false opgeven is weer een extra statement wat je moet intikken en dat is heel erg fout, want wij tweakers zijn lui

To the point: als je bekend bent met HTML zul je de < br > tag wel kennen Een geweldige tag, want wil je even een nieuw lijntje? Dan gooi je er even een BR'etje tussen Meer witruimte nodig? Dan gooi je er toch nog zes tussen ? probleem opgelost Maar waar het om draait is dat je de tag nu op een oneigenlijke manier gebruikt. De BR tag is niet bedoeld om je witruimten te regelen, netzomin als de body bedoeld is om je javascript functies in te definiëren, netzomin als het uitvoeren van javascript statements dmv de < a > tag.

Als je dan graag je handje terugwilt, wat crisp ook al aanstipte, dan moet je dat even in een css blokje opgeven, bijvoorbeeld:

PHP:

span.javascriptlinkje { cursor: pointer; }

[Verwijderd]

CaptBiele schreef op 17 oktober 2002 @ 11:33:
wanneer is het gebruik van "javascript: " nou precies nodig??
(voorbeeld: <a href="javascript: test()"> klik </a>

Daar las ik van de week nog een leuk stukje over.

Never, ever, ever use the javascript: pseudo-protocol for anything, ever ever ever ever again. Please. Pretty please. The next time I click on a hyperlink, only to have it cause an error in my browser, I am going to hunt down the author and pound them into holy oblivion. I'm not joking -- I will kill someone. Maybe two... Perhaps an entire company-full.

...dus je bent gewaarschuwd

[Verwijderd]

crisp> ik was nog niet bekend met het werken van de event-handlers, ik ben het nu ff aan het uitpluizen... maar als ik jou zo hoor is het dus niet erg professioneel om javascript in de href te zetten? wat zijn eigenlijk de nadelen om het zo te gebruiken?

Het is geen goede best-practice om het zo maar te zeggen. De mogelijkheid is aanwezig maar meer vanwege het feit dat het een protocol is. Je kan bijvoorbeeld rechtstreeks in de browser: javascript:alert('hi') invoeren en je krijgt een messagebox. Het duidt alleen maar aan dat er een stuk javascript uitgevoerd wordt. Een van de nadelen om javascript te gebruiken in de href is dat dit zichtbaar is in de statusbar. Als ik over een link heen ga en javascript zie dan weet ik wat er uitgevoerd wordt. Niet al te netjes. En daarbij is het duidelijker als ik zie staan dat het daadwerkelijk een link naar een andere pagina is. Een extra tweak kan je krijgen door niet naar de link te gaan die er in aangeduidt staat maar een location.replace ofzo te gebruiken in de onclick en een return false mee te geven. Hoezo "hidden" linking?

De volgende code slaat eigenlijk nergens op:
<a href="javascript://" onClick="test()">klik</a>

Het enige wat er staat is het protocol javascript waarin een comment staat. En staat wat dat betreft gelijk aan javascript:void(); of wat dan ook. De code wordt zowiezo niet uitgevoerd. Beste methode is om onClick="test(); return false" te gebruiken om 2 reden:
- de href wordt niet uitgevoerd
- de interactie in de ietwat oudere browsers zoals animated gif's wordt niet onderbroken.

(m.a.w. 3 "nadelen")

[CaptBiele]

ok, dan moet ik het zo maar aanpakken. Ik wil mezelf wel een mooie programmeer stijl aanleren.
Maar de a-tag (met href) geeft zo`n duidelijke link, dus blauw en onderstreept.
Als ik die href niet gebruik, is het niet erg representatief meer... is het de bedoeling dat ik dit oplos met <u></u> etc? (of css)

[Verwijderd]

Met CSS!

Of een stylesheet bijvoorbeeld general.css, en implementeer door:
<link rel="stylesheet" type="text/css" href="css/general.css">
Met general.css de volgende inhoud (bijvoorbeeld):
A
{
font-family:"Verdana";
color:black;
text-decoration:underline;
font-size:11px;
}


of css-block:
<style type="text/css">
<!--
A
{
font-family:"Verdana";
color:black;
text-decoration:underline;
font-size:11px;
}
//-->
</style>

Of inline (niet ondersteund door NS4):
<a href="x.htm" style="font-family:'Verdana';font-size:11px;color:black;text-decoration:underline;">Click</a>

Aanbevolen:
Voor meerdere pagina's:
stylesheet pagina

Voor een enkele pagina (bijvoorbeeld layer-declaratie):
css block

CJ

[crisp]

Persoonlijk vind ik dit de mooiste oplossing:
css

HTML:

<style type="text/css">

span.link {
  font-family: verdana; /* nee, dit hoeft niet tussen quootjes */
  font-size: 13px;
  text-decoration: underline;
  color: red;
  cursor: pointer; /* voor browsers die CSS2 wel snappen */
  cursor: hand; /* voor IE */
}
span.link:hover {
  color: blue; /* CSS2, nog niet geimplementeerd in IE */
}

</style>

met:

HTML:

<span class="link" onClick="test()">klik</span>

btw; het gebruik van <!-- //--> is echt zwaar achterhaald; wie gebruikt er nog een versie 3 browser?

[CaptBiele]

Verwijderd schreef op 17 oktober 2002 @ 13:41:
<a href="x.htm" style="font-family:'Verdana';font-size:11px;color:black;text-decoration:underline;">Click</a>

Het ziet er allemaal goed uit, maar was het nou niet de bedoeling om de href niet meer te gebruiken?
(of gaat het hierbij alleen om de javascript functies?)

[Verwijderd]

het gaat alleen om de javascript functies. Als iets een link is dan zou ik altijd de link gebruiken ipv een span. Maar iedereen zijn haar eigen persoonlijke voorkeur.

[Clay]

Verwijderd schreef op 17 oktober 2002 @ 13:11:
[...]
Daar las ik van de week nog een leuk stukje over.

[red: "gebruik NOOIT javascript:"]
[...]

...dus je bent gewaarschuwd

da's heel leuk (en waar), voor popups maar als je met onclick op een href een form gaat submitten krijg je daar - altijd - problemen mee. Sommige os + browser combo's staan je gewoon niet toe om een form via een onclick te submitten dus wil je dat perse met een href ipv een input, moet dat bijna wel met een javascript: constructie

[CaptBiele]

crisp> tnx voor je code, maar nu moet ik dus ook nog in de functie test() definieren welke pagina geladen moet worden?
Is dat niet een beetje omslachtig?

[Verwijderd]

CaptBiele schreef op 17 oktober 2002 @ 14:30:
crisp> tnx voor je code, maar nu moet ik dus ook nog in de functie test() definieren welke pagina geladen moet worden?
Is dat niet een beetje omslachtig?

Ja, maar wat wil je nou? Wil je een JavaScript functie uitvoeren of wil je een nieuwe pagina inladen?
Voor het laatste gebruik je natuurlijk gewoon <a href="">...

[CaptBiele]

ja oeps... Blues, je hebt helemaal gelijk...

sorry, ik heb vannacht een paar uur geslapen, ben een beetje gaar. Mijn excuses