[ObjCLover]

Hallo. Gibt es irgendwo vll. eine Referenz / Artikel, der die JavaScript Fähigkeiten etwas auffrischt. Also z.b. so Dinge erklärt, dass man innerHTML nicht mehr nutzen soll, warum, und wie die modernen Alternativen funktionieren?

Dieser Beitrag wurde von ObjCLover bearbeitet: 26. Juli 2010 - 15:59

[Witi]

Der Artikel ist möglicherweise nicht ganz uninteressant: http://aktuell.de.selfhtml.org/weblog/dhtm...s-dom-scripting

Dazu noch ein, zwei Sätze aus meiner Erfahrung.

War es früher "in", alles über die DOM-API, mittels Objekten wie document oder window zu machen, ist es heute modern auf Bibliotheken wie JQuery, Mootools oder Prototype zu setzen. Die basieren zwar auch alle irgendwie auf der DOM-API, bieten aber nach außen weit aus mehr Möglichkeiten an.

Einige Beispiele:
In DOM kannst du mit Hilfe von document.getElementById auf ein Element mittels seiner ID zugreifen. In JQuery einfach mit $('#meineId'). Jetzt möchtest du allerdings auf alle A-Elemente mit dem Klassennamen 'extern' zugreifen. In DOM die Hölle, mittels JQuery wieder ein Aufruf: $('a.extern'). CSS-3 Selection-API lässt grüßen.

Du möchtest bei einem Klick auf einen Link, ein anderes Element finausfahren lassen. Viel Spaß mit DOM, sag bescheid, wenn du diese Woche noch fertig wirst.
In JQuery:

$('#link').click(function() {
  $('#element').fadeOut('slow', function() {
        // Animation complete.
  });
});

Wirf einen Blick auf die JQuery-API. Das ist modern!

Ich möchte hier nicht unbedingt Werbung für JQuery machen, denn diese Beispiele können andere Bibliotheken genau so. Mit JQuery arbeite ich halt auf häufigsten.

[ObjCLover]

Na, also ein DHTML - Opa bin ich auch wieder nicht.

Nein, es geht mir nur um so Dinge, wie

- Benutzte document.getElementById('...').addEventListener statt document.getElementById('...').onclick
- Benutzte appendChild, createElement, usw statt innerHTML

Sowas in die Richtung. jQuery müsste ich mal gucken... Ich hab mich da schon mal rein gearbeitet, aber ich denk, das ist etwas overkill. Das brauch ich eigentlich gar nicht.

[Witi]

Zitat

Opa bin ich auch wieder nicht.

Scheinbar schon, wenn du addEventListener benutzt. Die IE kann das nicht, der verwendet addEvent. Die on-* Handler, sind die richtigen und standardisierten: http://www.w3.org/TR/REC-html40/interact/s...s.html#h-18.2.3

Zitat

- Benutzte appendChild, createElement, usw statt innerHTML

Richtig, denn innerHTML kann auch nicht jeder Browser: http://de.selfhtml.o....htm#inner_html

Zitat

das ist etwas overkill. Das brauch ich eigentlich gar nicht.

Diesen oder ähnlichen Spruch haben schon viele kluge Leute gebracht.

JQuery als Beispiel ist gerade mal 24KB (!) groß. Natürlich wirst du viele Funktionen zu Beginn nicht benötigen, aber wenn du irgendwann mal AJAX, JSON oder irgendwelche Animationen einsetzen möchtest, sind diese Funktionalitäten bereits da.

Du kannst aber gerne noch eine Stufe weiter gehen, und mit HTML5-Features, wie Canvas herumexperimentieren. Das ist sogar noch moderner, weil HTML5 noch nicht standardisiert wurde. Hierfür gibt es auch interessante Bibliotheken, wie Raphaël

[ObjCLover]

 Zitat (Witi: 27.07.2010, 15:32)

Scheinbar schon, wenn du addEventListener benutzt. Die IE kann das nicht, der verwendet addEvent. Die on-* Handler, sind die richtigen und standardisierten: http://www.w3.org/TR/REC-html40/interact/s...s.html#h-18.2.3

Ach, wirklich? Dann ist Adam Roben (Safari und WebKit Entwickler) wohl auch ein JavaScript - Opa, denn in einem Vortrag auf der WWDC 2010 hat er ebenfalls addEventListener verwendet...

Und dieser Artikel auf MDC (Mozilla Developer Center) stimmt wohl auch nicht:

Zitat

Why use addEventListener?
addEventListener is the way to register an event listener as specified in W3C DOM. Its benefits are as follows:

It allows adding more than a single handler for an event. This is particularly useful for DHTML libraries or Mozilla extensions that need to work well even if other libraries/extensions are used.
It gives you finer-grained control of the phase when the listener gets activated (capturing vs. bubbling)
It works on any DOM element, not just HTML elements.

https://developer.mozilla.org/en/DOM/elemen...ddEventListener

 Zitat (Witi: 27.07.2010, 15:32)

Du kannst aber gerne noch eine Stufe weiter gehen, und mit HTML5-Features, wie Canvas herumexperimentieren. Das ist sogar noch moderner, weil HTML5 noch nicht standardisiert wurde. Hierfür gibt es auch interessante Bibliotheken, wie Raphaël

Danke, nein. Ich benötige keine Vektorgrafiken.

Dieser Beitrag wurde von ObjCLover bearbeitet: 27. Juli 2010 - 15:41

[Witi]

Einspruch stattgegeben. Du hast natürlich recht.

addEventListener verwenden sämtliche JS-Libs, die ich so überflogen haben. Und die überprüfen tatsächlich ob addEventListener bzw. attachEvent unterstützt wird (Wieder eine schöne Umsetzung des Standards seitens Microsoft...).

Hat natürlich den Vorteil, dass du flexibel bist und somit Events besser steuern und scripten kannst. Musst allerdings darauf achten, welchen Browser du vor dir hast:

var el = document.getElementById('id');
if (el.addEventListener) {
   el.addEventListener('click', function(){alert('foo')}, false);
} else if (el.attachEvent) {
   el.attachEvent('click', function(){alert('foo')});
}

Bei onclick nicht:

document.getElementById('id').onclick = function(){alert('foo')}

Aber Libs, wie JQuery machen das automatisch, da reicht für dich ein einzelner Aufruf:

$('id').click(function(){alert('foo')});
// bzw.
$('id').bind('click', function(){alert('foo')});

[ObjCLover]

Ja, ich denke, der Vorteil bei diesen Frameworks ist es, dass sie quasi einen Wrapper darstellen, und man sich keine Sorgen machen muss, auch wenn sich später mal die APIs in Browsern ändern. Dann muss nämlich nur das Framework angepasst werden, nicht mein eigener Code.

Naja, so weit, so gut:
Was ich ja eigentlich wollte, ist so ein Artikel, der alle dieser "benutze dies, statt das" - Themen behandelt, so dass ich mir nicht über Wochen / Monate hinweg alles nach dem Zufallsprinzip erlesen muss.
Ich bin mir sicher, so etwas gibt es, nur weiß ich nicht so recht, nach was ich googlen soll...

Dieser Beitrag wurde von ObjCLover bearbeitet: 28. Juli 2010 - 11:42

[Witi]

Ein aktueller Artikel ist mir nicht bekannt.

Aber meine Aussage auf dein "benutze dies, statt das" bleibt: Benutze JS-Bibliotheken, statt sich direkt mit den DOM-Methoden zu beschäftigen.

Ansonsten wäre ein weiterer Ansatz sich die einzelen Standards anzuschauen: http://de.wikipedia.org/wiki/Document_Obje...sierung_des_DOM
addEventListener als Beispiel kam erst mit Level2 dazu. Vielleicht findest du ja Artikel nach dem Motto "Was ist neu in DOM Level 3". Vielleicht auch nicht ganz uninteressant sind die einzelnen JS-Versionen, wobei das eher in Richtung Sprachfeatures geht. Z.B. https://developer.mo..._javascript_1.7, https://developer.mo..._javascript_1.8 oder https://developer.mo...avascript_1.8.1

[funkmasterflow]

Huhu,
ich glaube das was Du suchst existiert (noch) nicht.
Zumindest nicht in der kompletten Form, so wie Du es suchst.

Ich kann Dir hier nur ein paar Websites auflisten, von denen ich meine, dass Sie deiner Anforderung nahe kommen...

http://google-styleguide.googlecode.com/sv...scriptguide.xml
http://www.nettuts.com (konkret: http://net.tutsplus.....for-beginners/)
http://ichwill.net/
http://www.javascrip.../bestpractices/

Viel Erfolg damit