'gutes' JavaScript lernen - Tipps?

klixx · 27.03.2010

Hallo zusammen,
ich möchte endlich JavaScript lernen, und das möglichst 'vernünftig'. Ich habe mir mal ein paar Grundlagen angelesen, aber das sind veraltete Dinge (Inline-events - oder wie sagt man da?). Natürlich möchte ich (später) auch Frameworks einsetzen können, aber zunächst doch auch in die 'normale' Sprache einsteigen...
Irgendwie habe ich bisher zu JavaScript nie einen richtigen Zugang finden können, PHP zu lernen ist mir viel leichter gefallen (bin aber auch da noch lange kein Profi).
Habt Ihr Tipps? Bücher, gute Artikel / Tutorials? Habe mir zwar auch mal 1 oder 2 Bücher angeschafft, aber da auch schnell die Lust verloren... Kennt jemand vielleicht das Buch aus der 'von Kopf bis Fuß'-Reihe? Ist das empfehlenswert? Habe ein anderes aus der Reihe, was mir manche Hürde hat nehmen können...
Schönen Dank!

sokie · 27.03.2010

AW: 'gutes' JavaScript lernen - Tipps?

inline events findet man ja eigentlich nur noch in Seiten, die mit irgendwelchen Programmen wie zB. photoshop angelegt werden, und sind nun wirklich nicht mehr Stand der Technik, und bringen eben ihre eigene Problematik mit sich. Naja, das ist ja auch für Leute gedacht, die lieber gar nicht erst mit irgendwelchem Code in Berührung kommen...
Ich habe meinen ersten 'ernsthafteren' Einstieg in die Materie mit einer DVD (Video2Brain) "ajax" - mit sicherheit keines der absoluten highlights aus der Produktion, aber durchaus interessant für den Einstieg in den Bereich.
Kostenlos stellt Gallileo ein openbook: Galileo Computing :: JavaScript und AJAX zur Verfügung sicher auch eine interessante Quelle (deutsche ausführliche informationen sind ja oft etwas begrenz zu finden.
Bei dem Klassiker selfhtml.org findet sich auch einiges zum Thema SELFHTML: JavaScript/DOM

klixx · 28.03.2010

AW: 'gutes' JavaScript lernen - Tipps?

Hallo, das Galileo-Buch kenne ich, aber auch das geht erstmal den Weg der Inline-Events und setzt nicht von vornherein auf Trennung von HTML und JavaScript...
Ist wohl wirklich schwer etwas Vernünftges zu finden im deutschsprachigen Bereich!?!
Also ich meine ohne 'onclick', rein über die Klasse/ID... 'unobstrusive javascript'(?) Oder geht sowas nur mit Frameworks?

Teaser01 · 02.04.2010

AW: 'gutes' JavaScript lernen - Tipps?

Hallo,

das gleiche Problem habe ich auch.
Bin gerade dabei, auf Mediengestalter mit Schwerpunkt Multimedia umzuschulen und würde neben (X)HTML und CSS eben auch gern gutes JavaScript und PHP lernen.

Referenzen gibt es ja genug, aber ich suche vor allem Anleitungen, wie man überhaupt so eine Programmierung aufbaut, warum in "dieser" Reihenfolge und nicht anders, also so 'ne Art Praxistutorials mit Step by Step Anleitung wie das ja hier bei Adobe PS, IL, ID usw. geschieht.

Irgendwie müssen die "Freaks" das ja auch gelernt haben, oder?

Wer kann mir/uns also gute Tipps geben?

Lieben Gruß

Biber

Duddle · 02.04.2010

AW: 'gutes' JavaScript lernen - Tipps?

Teaser01 schrieb:
warum in "dieser" Reihenfolge und nicht anders, also so 'ne Art Praxistutorials mit Step by Step Anleitung wie das ja hier bei Adobe PS, IL, ID usw. geschieht.

Irgendwie müssen die "Freaks" das ja auch gelernt haben, oder?

Freaks, soso...

Der Programmfluss folgt ganz natürlich aus den Anforderungen. Bei einem Haus fängst du ja auch mit dem Fundament an, nicht mit der vierten Etage.
Letztlich musst du die Konzepte verstehen, dann kannst du fast alles von Grund auf programmieren. Dazu zähle ich Variablen, Schleifen, Fallunterscheidungen, Funktionen, vielleicht noch Rekursion. Diese Konzepte kannst du dann problemlos in (fast) jeder Programmiersprache nutzen. Programmier-Tutorials braucht man im Regelfall nicht, obwohl es für einzelne Probleme auch diese gibt.

Ich glaube, dass "learning-by-doing" am Anfang am meisten hilft, also indem du (nachdem du die grundlegende Syntax der Sprache kennst) Mini-Probleme konstruierst und die dann löst. Wenn du sie vorher auf Papier durchdenkst (Flussdiagramm oder so), siehst du auch, dass die Programmiersprache nicht wirklich wichtig ist. Du könntest dir auch Programme anschauen, die Jugendlichen das Programmieren beibringen wollen, z.B. (benutzt Ruby).

Vielleicht tröstet es dich aber, dass es Studien gibt, welche zeigen, dass das Erlernen von Programmierkonzepten nicht jedem gleich leicht fällt.

Duddle

sokie · 02.04.2010

AW: 'gutes' JavaScript lernen - Tipps?

klixx schrieb:
Also ich meine ohne 'onclick', rein über die Klasse/ID... 'unobstrusive javascript'(?) Oder geht sowas nur mit Frameworks?

inline-Events kannst du damit umgehen, dass du dir eine Funktion anlegst, die zB bei window.onload deine Events registriert.
onload deshalb, weil Elemente im Body noch nicht existieren, wenn der script-teil im header abgearbeitet wird. deshalb wartetman erst das Laden der Seite ab, bevor man beginnt elemente zu selektieren.

Code:

<script type="text/javascript">
  window.onload=function(){
    var links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++){
      links[i].onclick = function(){
        alert("es wurde auf einen Link geklickt");
      }
    }
  }
</script>

hätte zB zur Folge, dass nachdem die Seite geladen alle Links (a-elemente) mit einer Funktionalität auszustatten, ohne das onclick event in den code schreiben zu müssen.
um nun den unterschiedlichen links unterschiedliche Funktionalitäten zuzuweisen würden sich dann noch Prüfungen und Fallunterscheidungen (if-else, switch) anschliessen.

Code:

<script type="text/javascript">
  window.onload=function(){
    var links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++){
      links[i].onclick = function(){
        if (this.className == "spezial"){
          alert("es wurde auf einen speziellen Link geklickt");
        }
      }
    }
  }
</script>

Die Alert() Funktionalität wird hier nur für a-Elemente der Klasse "spezial" ausgeführt.

die zwei für mich wichtigesten "Komfort-Features" von Frameworks sind die:
- unterschiedliche Browser mit unterschiedlichen Javascript-Interpretationen werden berücksichtigt
- die Mechanismen sind wesentlich einfacher, und müssen nicht notiert werden. für das Beispiel oben (anhand von jQuery):

Code:

$(document).ready(function(){
  $("a.spezial").click(function(){
    alert("es wurde auf einen speziellen Link geklickt");
  });
});

klixx · 05.04.2010

AW: 'gutes' JavaScript lernen - Tipps?

Danke Dir!
Das hast Du sehr verständlich, vor allem in beiden Varianten dargestellt. Habe diese onload-function schon bei 'fertigen' Galerien, die auf jQuery basieren, gesehen/verwendet, aber die Entsprechung im 'normalen' JavaScript war mir noch nicht richtig klar!
Super