ugrás a tartalomhoz

href-es javascript alkalmazásának helyessége

unregistered · 2010. Jan. 11. (H), 17.15
Hello!

Már rongyosra olvastam a JS linkelésével kapcsolatos cikkeket és fórumokat, de még mindig nem találtam arra választ, hogy ha egy admin oldalon (ahová robotok nem jutnak be, illetve engedélyezve van mindig a böngészőben a JS) mennyire szerencsés használni az alábbi kódrészletet?
<a href="JavaScript:valami('egy',ketto','harom')">
(Az én alkalmazásomban egy végtelenül egyszerű szerepet tölt be a függvény: egy confirm ablakot tár a szemünk elé)

Köszönöm előre is a fejtágítást ;)
‹ öröklődés object literallal Engedély megtagadva: HTMLDocument.getElementById ›
 ■
1

Általánosságban

gphilip · 2010. Jan. 11. (H), 17.51
Hali!

Nagy általánosságban kerülendő és erősen ellenjavallt az ilyenfajta Javascript beágyazás. A href nem erre van kitalálva, és az egész kód kezelhetőségét rontod, ha ilyenekt használsz.

Helyette javasolt inkább valamilyen JS framework használata, és ezzel a tiszta JS kódból hozzákötni a tiszta HTML kódhoz az eseményeket. Ha ezt a gyakorlatot követed, rá fogsz jönni, hogy nem csak szebb, sokkal kényelmesebb is ezt a módszert használnod.

Itt egy példa JQuery-vel (ezt le kell töltened):

<html>
	<head>
		<script type='text/javascript' src='jquery.js'></script>
		<script type='text/javascript' src='sajat_js_konyvtaram.js'></script>
	</head>
	<body>
		Hello. Ha erre a szövegre kattintasz akkor egy alert jelenik meg:<br/>
		<a href='#' id='alertme'>Lássuk!</a>
	</body>
</html>
És a sajat_js_konyvtaram.js:

function BindEvents()
{
	$("#alertme").bind("click", function(e){
		  window.alert("Erre a szövegre kattintittál: " + this.text);
		  return false;
	});
}

$(document).ready(BindEvents);
Ez azért is jó, mert nem csak egy elemen működik, hanem egész csoporton is. Mindenféle szelektort használhatsz az #alertme helyett, amit CS-ben hasnálnál (pl: a, a .katt, ul#menu li)
2

elegánsabb és rövidebb is

unregistered · 2010. Jan. 11. (H), 18.20
Általában hasonló képpen szoktam én is használni őket, csak onclick-el... A te megoldásodnál, ilyenkor hogy adok át értékeket?
Vagy akkor már inkább használjam az onclick-et?

Amúgy ha href="#" esetén confirm boxban cancel-t választasz, akkor felugrik az oldal tetejére... ezért is tetszett meg hirtelen a rusnya megoldás mert erre nyújtott volna orvosságot...
3

erdemes mindig a diszkret js

duplabe · 2010. Jan. 11. (H), 19.14
erdemes mindig a diszkret js megoldasokat elonyben reszesiteni, mert szebb es a funkciok egy resze megvalosithato ugy is, hogy a bongeszo nem tamogatja a js-t (vagy le van tiltva). De szerintem egy adminban, amit nem nagy kozonsegnek szan az ember, hanem mondjuk intranetes, ceges felhasznaloknak, akkor mondhatod azt, hogy itt js kell es kesz. de akkor se szep :)

A fenti peldaban az 
e.preventDefault();
hívással megakadályozhatod az ugralast.
4

átadás

unregistered · 2010. Jan. 11. (H), 20.02
...és az értékek átadását ilyenkor hogy oldom meg? Merthogy mindegyik ilyen linkhez van egy egyedi azonosító is...

Nem is olyan rég pedig itt a fórumon ajánlották az onclick="valami();return false" alkalmazását felugrás ellen... akkor ez is teljesen elavult történet?

Olvastam már párszor a diszkrét js-ről, még itt a weblaboron is volt róla cikk, de igencsak félre értelmeztem... mert ugyan külön választottam a js-t és html-t de ez ahogy látom nem csak erről szól, hanem magából az egész html-ből ki kell hagyni az onclick és társait, ha most egyáltalán jól értelmezem...

Csak azt nem tudom, hogy js nélkül hogy csinálsz egy confirm boxot?
7

Béke!

Ustak · 2010. Jan. 12. (K), 00.25
Szia!

...és az értékek átadását ilyenkor hogy oldom meg? Merthogy mindegyik ilyen linkhez van egy egyedi azonosító is...


Az adott linknek egyedi id-t adsz -például- és úgy éred el a diszkrét js-ből.

Nem is olyan rég pedig itt a fórumon ajánlották az onclick="valami();return false" alkalmazását felugrás ellen... akkor ez is teljesen elavult történet?


Nem, legjobb tudomásom szerint a diszkrét js függvényed is visszatérhet return false -al a végén, vagy ha jobban tetszik, akkor marad az e.preventDefault(). :-)
(<zárójel>: én nem tartom nagy profinak magamat - inkább jóképű vagyok :-) - de kb 5! éve használtam onclick -es js -t utoljára, úgyhogy hidd el, ez nem új dolog .-) </zárójel>)

Olvastam már párszor a diszkrét js-ről, még itt a weblaboron is volt róla cikk, de igencsak félre értelmeztem... mert ugyan külön választottam a js-t és html-t de ez ahogy látom nem csak erről szól, hanem magából az egész html-ből ki kell hagyni az onclick és társait, ha most egyáltalán jól értelmezem...


Jól értelmezted! Js csak a javascript kódot tartalmazó fájlra mutató <script> tag kellene hogy legyen... Jquery -t merhetem ajánlani?

Csak azt nem tudom, hogy js nélkül hogy csinálsz egy confirm boxot?


Mondjuk megcsinálod az oldalt csak (x)html és szerver oldali nyelvel (php?) A confirm boxod meg lehet egy form, ami megcsinálja ugyanazt a szerver oldalon, amit egyébként a kliensen szeretnél. És ha van javascript, akkor ez az egész nem így fog működni, hanem az adott link click -jét a diszkrét js ből felülírva megkapod a confirmboxot!
Üdv:
Gábor
8

Melyik bolygó? Eltévedtem! :D

unregistered · 2010. Jan. 12. (K), 14.43
Mondjuk megcsinálod az oldalt csak (x)html és szerver oldali nyelvel (php?) A confirm boxod meg lehet egy form, ami megcsinálja ugyanazt a szerver oldalon, amit egyébként a kliensen szeretnél. És ha van javascript, akkor ez az egész nem így fog működni, hanem az adott link click -jét a diszkrét js ből felülírva megkapod a confirmboxot!


Na ezt most "kicsit" nem értem. Szóval JS nékül csinálok egy formot ahova átdob a link ha rákattintok? Vagy felugrik a form pl egy div-ben, de ahoz már AJAX kellene nem? Vagy csak simán újratölti az oldalt és akkor egy átadott változóval pl ha checkform=1 akkor megjeleníti a checkformot?
9

Telefonál haza! :-)

Ustak · 2010. Jan. 13. (Sze), 00.33
Tehát úgy gondoltam, hogy megcsinálod az alkalmazást úgy, mintha nem lenne javascript, azaz minden számítást, stb-t a szerver oldalon hívsz meg. Mondjuk van egy link, ami a confirm boxodat jelenítené meg, de javascript nélkül, ha arra kattint a felhasználó akkor elviszi őt az oldal a http://enoldalam/confirmboxamitcsinalnaform.php -ra, ahol kap egy confirm box szerű formot igen - nem linkel, vagy amivel akarod, és ennek fényében működik az alkalmazás teljesen javascript nélkül.
Ez után rákötöd a javascriptet, és így a fent említett link már nem visz sehova, hanem hozza a javascript confirm boxodat (amit megcsinálsz a saját szád íze szerint, vagy használsz meglévőt)
Ez persze dupla munka, és 99.99% az esélye hogy az első rész sosem fog lefutni, mert a javascript engedélyezve van nagyrészt. Ha mégsem, akkor viszont ugyanúgy tudják használni a webalkalmazást és máris készítettél egy webalkalmazást, mely a graceful degradation elveit követi, és mindenkinek egy könnycsepp kicsordul a szeméből a meghatottságtól:-)
Üdv:
Gábor.
15

P.ZS.

unregistered · 2010. Jan. 14. (Cs), 14.39
Ez szebb mint a titanic vége! ;)
Köszönöm a felhomályosítást!
5

;

Ajnasz · 2010. Jan. 11. (H), 20.34
A button elem helyesebb szemantikailag.
6

igaz, csak...

unregistered · 2010. Jan. 11. (H), 20.44
azzal nekem mindig meggyűlik a bajom ha egyedi hátteret szeretnék használni... minden böngészőben máshogy néz ki... vagy tudsz ajánlani valami jó megoldást rá?
10

Paraméter átadás

vbence · 2010. Jan. 13. (Sze), 14.45
Az egyetlen szintaktikailag helyes módszer a diszkrét JS + paraméerádás (és nem az egyetlen paraméter speciális esetére gondolok), ha a REL attribútumon belül használsz valami saját szabványt, pl URL kódolva nevesített paraméterek:
<a href="#" class="dialog" rel="questione=Tenyleg+szeretned&modal=true&action=delete&id=334">Gomb</a>
Ez most diszkrét JS, viszont itt nyilván egy webalkalmazásról beszélünk, ahol a JS nélküli működés nem szempont.

A másik hogy bármennyire is W3C szabványos a kódunk szintaktikailag és szemantikailag, nem változtat azon, hogy webalkalmazásról van szó, nem egy dokumentumról. Itt a HTML szerepe az, hogy leírja az UI vázát, nem pedig információ prezentálása. - Vagyis egy alkalmazás esetén nem igazán helytálló a "prezentáció elválasztása az információtól", mert egy egész más fogalomkörbe létünk át.
11

HTML5

gphilip · 2010. Jan. 13. (Sze), 15.25
A HTML5-ös szabványban a "data-" katkterlánccal kezdődő attribútumok is validnak tekinthetőek. Ekkor viszont a doctype-ot is ennek megfelelően kell kiválasztani.

Amúgy egy admin felületen majdnem tökmindegy. Miután elhelyezted az datokat (pl <strong data-tooltipszoveg="Hehe">),ezzel a jquery metódussal kérdezhetd le a tartalmát:

http://docs.jquery.com/Attributes/attr

Mellesleg a legtöbbször (pl linkek esetében) a szemantikus attribútumban tárolják az infót, és Így megtartják a szemantikát és keresőbarátabbá teszik az oldalt (linkek esetén). Pl:

<a href='ajaxcall.php' class='ajaxlink'>Ajax</a>
13

Valóban

vbence · 2010. Jan. 14. (Cs), 10.10
Ha már az URL kódolásig eljutottam nem tudom miért nem ugrott be, hogy a HREF attribútumban is szerepelhetnek a paraméterek.
12

Érdekes gondolat

yaanno · 2010. Jan. 13. (Sze), 19.48
Picit off, elnézést a szál gazdájától.

webalkalmazásról van szó, nem egy dokumentumról. Itt a HTML szerepe az, hogy leírja az UI vázát, nem pedig információ prezentálása

Lehet, hogy nem értem pontosan mit értesz "webalkalmazás" alatt, de mi mást írna le a html struktúrád, mint valamilyen információt? Ha egy listát listaként prezentálsz, egy adtattáblát táblaként, szemantikus a dokumentumod.
14

Úgy értettem...

vbence · 2010. Jan. 14. (Cs), 10.23
hogy ilyen esetben csak és kizárólag a böngészőre, mint megjelentő ágensre kell számítanunk, az adott információ ami az alkalmazásunk pillanatnyi állapotát leírja nem hordoz értéket.

Persze lehet, hogy éppen adatokat jelenít meg az alkalmazásnk, de jelenleg nem tudok szabványról, ami a webalkalmazások elérhetőségét tűzte volna ki célul, akár robotok, akár gyengénlátók részére.

Vagyis jó cél az, hogy egy webalkamazás elérhető legyen a megszokott vizuális megjelenítő + javascript tartományon kívül is, de jelenleg ennek nincs realitása. Persze vannak technikák, amiket mimiálisan strukturált információ esetén alkalmazhatunk (a weboldalak 90%-a), de egy alkalmazás megfelelő leírására esélyünk sincs a jelenlegi eszkötárral.
16

irgum burgum!

unregistered · 2010. Jan. 14. (Cs), 14.48
jó lenne nem szétoffolni jóóó???

Dehogy baj! Engem is érdekelnek ezek az eszmefuttatások... ;)
...amúgy is már föntebb megkaptam a magamét, információ tekintetében és különben is jó néha ilyen oldalról is megnézni a dolgokat.