[bacon]

Wie lerne ich Javascript?

Javascript ist nicht schwer und man kann dolle Sachen damit machen. Das hier stellt keine Anleitung und/oder Sprachreferenz dar, die gibts zu Hauf im Netz. Ich hab nur mal ein paar Fragen beantwortet, die sich bestimmt jeder stellt, der mit dem Gedanken spielt, Javascript zu lernen, aber irgendwie gar nicht weiß, wie er damit beginnen soll.

Was ist Javascript?
Javascript ist eine clientseitige interpretierte Scriptsprache. Javascript wird in HTML-Dokumente eingebettet und erst im Browser des Clients ausgeführt (im Gegensatz zu bspw. PHP). Jeder moderne Webbrowser liefert einen Javascript-Interpreter, die jedoch teilweise unterschiedlichen Sprachumfang unterstützen. Die Verbindung von Javascript mit HTML und CSS nennt man "DHTML", dynamisches HTML. Javascript wird heuer oftmals dazu verwendet, die Usability auf Webseiten zu verbessern.

Was hat Javascript mit der Programmiersprache Java gemein?
Nichts: http://www.google.de/search?hl=de&q=unterschied+java++javascript&btnG=Suche

Ist Javascript eine objektorientierte Programmiersprache?
Jain. Javascript kennt Objekte, doch keine Klassen. Jedes Objekt leitet sich von einem Basisobjekttypen "Object" ab. Auch bspw. Funktionen. Javascript unterstützt Vererbungsmechanismen über die Eigenschaft "prototype". Javascript ist somit eine prototypbasierte objektorientierte Sprache. Klingt kompliziert, isses zuerst auch. Die gute Nachricht: Es gibt "normale" Funktionen und man kann Javascript auch komplett prozedural notieren. Javascript ist somit auch für Anfänger gut zu erlernen.

Ist Javascript kompliziert?
Nein. Einsteiger können und auf Grund der unkomplizierten Syntax und der leichten Einbettung in HTML schnell Ergebnisse erzielen, Fortgeschrittene können die objektorientierten Konzepte der Sprache erlernen und werden schnell erstaunt sein, wie mächtig Javascript eigentlich ist.

Wo finde ich nützliche Einsteigertipps und Anleitungen zu Javascript?
http://de.wikipedia.org/wiki/JavaScript
http://de.selfhtml.org/javascript/index.htm

Was brauche ich, um Javascript-Programme zu erstellen?
Einen handelsüblichen Texteditor. Es gibt aber auch Javascript-IDE mit erweiterten Funktionen, wie bspw. Aptana => http://www.aptana.com/

Was ist Ajax?
Ajax steht für (dt.) "Asynchrones Javascript und XML". Damit ist gemeint, dass über gewisse Funktionen im Hintergrund durch Javascript Anfragen an einen Server gesendet und auch Antworten empfangen werden können. Das ist keine Magie, stellt euch einfach einen Frame vor, der neu geladen wird. Auch hier wird "im Hintergrund" eine neue Seite vom Server angefordert. Mehr ist das nicht. Halt nur, dass man keinen Frame hat, sondern das ganze durch Javascript gesteuert wird. Das XML darin ist auch abschreckend, man schickt mitnichten ausschließlich xml hin- und her, man kann auch reine Textformate oder was auch immer hin- und herschicken.

Was hat Ajax mit Javascript zu tun?
Die Browsereigenen Ajax-Funktionen sind proprietäre Erweiterungen (d.h., sie gehören nicht zum Javascript-Standard), die über Javascript angesprochen und genutzt werden. Man kann diese Funktionen direkt nutzen, oder man verwendet ein sogenanntes "Javascript-Framework", das eine einheitliche Schnittstelle für diese Funktionen bereit stellt, damit der Programmierer nicht selbst zwischen den einzelnen Browserversionen unterscheiten muss.

Wie mach ich diesen super-duper Fade-Web2.0-Effekt?
Man schreibt Javascript-Code. Oder: Man verwendet ein "Javascript-Framework", das Effektbibliotheken für verschiedene Browser bereits optimiert bereit stellt.

Alter, was ist überhaupt ein "Javascript-Framework"?
Ein Javascript-Framework ist eine Sammlung von Funktionen, die selbst in Javascript notiert sind. Diese Funktionen "machen das Leben leichter", indem sie für ständig wiederholende Aufgaben bereits Lösungen bereitstellen und gleichzeitig darauf achten, dass auch alles in jedem einigermaßen modernen Browser ordnungsgemäß funktioniert.
Vorteile:
- Erweiterter Funktionsumfang als Aufsatz auf den generischen Javascript-Funktionsumfang
- Keine oder nur wenig Crossbrowser-Optimierung notwendig
- Mehr Zeit übrig für Entwicklung, weniger nötig für Debugging

Da Javascript prototypbasierte Vererbung unterstützt und daher jedes Objekt nativ in seinen Ausprägungen zur Laufzeit geändert werden kann (anders als bspw. in Java), "injizieren" diese Frameworks auch Methoden in existierende, vom Browser nativ bereitgestellte Objekte. Damit wird der Funktionsumfang der Sprache nochmal erweitert. Guter Artikel dazu für Interessierte: http://prototypejs.org/learn/extensions.
Javascript ist somit "AOP-ready"

Was gibt es denn für Javascript-Frameworks?

Man unterscheidet zwischen Frameworks und Effektbibliotheken. Manchmal gibts auch beides zusammen in einem Paket, die Grenzen sind also fließend. Grob gesagt: Frameworks stellen Erweiterungen und Vereinfachungen zu Basisfunktionalitäten bereit (bspw. Ajax-Funktionen, cross-browser-optimierte "neue" Funktionen und Widgets), Effekt-Bibilotheken bieten dem Anwender leicht zu konfigurierende DHTML-Effekte (Bewegungen, Animationen etc.), ohne diese selbst mühsam programmieren zu müssen. Mit Effektbibliotheken lassen sich qualitativ hochwertige, grafische RIAs gänzlich ohne Mathematikkenntnisse programmieren (Grundschulwissen vorausgesetzt).

Effektbibliotheken setzen meist auf ein Javascript-Framework auf, sprich: Ohne das eine funzt das andere nicht.

Populäre Frameworks sind bspw. Prototype (www.prototypejs.org) oder Mootools (http://mootools.net) wie auch jquery (http://jquery.com/) und YUI (http://developer.yahoo.com/yui/).

Populäre Effektbibliotheken sind moofx (http://moofx.mad4milk.net/), scriptaculous (http://script.aculo.us), YUI (http://developer.yahoo.com/yui/)

Wie führe ich meine Javascript-Programme aus?
Datei auf Browser ziehen, Fehlermeldungen bewundern!

Wie finde ich heraus, wo die Fehler in meinen Scripten liegen?
Es gibt einige mächtige Debugging-Werkzeuge, die aber den Browsern meist nicht beiliegen. Hier einige Beispiele:

Internet Explorer:
- Microsoft Script Debugger (http://www.microsoft.com/downloads/details.aspx?FamilyID=2f465be0-94fd-4569-b3c4-dffdf19ccd99&DisplayLang=en)
- Javascript Debug-Bar: http://www.my-debugbar.com/wiki/CompanionJS/HomePage

Mozilla Firefox:
- FireBug (https://addons.mozilla.org/de/firefox/addon/1843),
- WebDeveloper (https://addons.mozilla.org/en-US/firefox/addon/60)
- Venkman (https://addons.mozilla.org/en-US/firefox/addon/216)

Im Allgemeinen empfehle ich sowieso, mitm Fox zu entwickeln, da auch Aptana auf den Firefox-Debugger zurückgreift. Was im Fox läuft, läuft i.d.R. auch auf Safari und Opera, am Ende muss man sich halt noch um den Internet-Explorer kümmern.

Wo gibs es Hilfe auf Fragen?
Hoffentlich endlich hier, wenn ein paar Leute endlich mal vernünftig scripten gelernt haben

Ist das alles?
Keine Ahnung, vielleicht hat der eine oder andere ja noch ein paar Tipps und Kniffe auf Lager...

Weiterführende Lektüre:

http://www.galileocomputing.de/openbook/javascript/

http://www.galileocomputing.de/openbook/javascript_ajax/

Sehr guter Artikel zur Strukturierung eigener Javascripte:
http://aktuell.de.selfhtml.org/artikel/javascript/organisation/

[bacon]

Konkrete Problemstellungen:

1.) What the Fuck? Irgendwie hab ich Code geschrieben, der ein HTML-Element [löscht/modifiziert/css-Klasse anhängt/...], aber ich bekomm immer n Fehler, dass das Objekt oder die Methode nicht vorhanden ist. Woran kann das liegen???
- Wenn dein Code keine syntaktischen Fehler etc. beinhaltet, liegts wahrscheinlich daran, dass du dein Javascript im Header aufrufst, ohne auf das vollständige Laden der Seite gewartet zu haben. Dann nämlich hatte der Browser noch keine Möglichkeit, den DOM-Tree (sprich die Sammlung aller HTML-Elemente der Seite als Javascript-Objektbaum) aufzubauen. Die Lösung dafür ist die Verwendung eines sog. Event-Handlers (siehe Javascript-Dokumentation):

[choise]

go sticky

[Smooth-Graphics]

Weiterführende Lektüre:

http://www.galileocomputing.de/openbook/javascript/

http://www.galileocomputing.de/openbook/javascript_ajax/

[labrar]

Wow



Hast dir richtig Mühe gemacht

Darum stehe ich so auf solche Foren.
Kein Buch der Welt, selbst wenns 10000 Euronrn kostet kann das ersetzten

Sehr geil. Weiter so

[cyanamide]

[bacon]

Oh, bitte, und danke. Ich machs vlt mal was schöner, aber son Thread sollte auch leben, daher wärs knorke wenn noch mehr Menschen was beisteuern könnten. War jetzt auch nicht so die Riesenarbeit

[l'Audiophile]

Habs hier auch mal aktualisiert:

http://www.mediengestalter.info/forum/57/mgi-tutorial-sammelthread-96271-1.html#1429970