Swetlana Senkevitch 27. Januar 2013

JavaScript und jQuery: Mit diesen Tutorials gelingt der Einstieg auf jeden Fall

Neben dem Chemiestudium interessiert sich Swetlana Senkevitch für sehr viele Dinge dieser...

Wenn man etwas Neues lernen will, ist es wichtig, von Anfang an gute Quellen zu verwenden. Schlechte Lernquellen vermitteln unqualitatives, häufig auch fehlerhaftes Wissen. So ist es überall – natürlich auch beim Erlernen von JavaScript. Ich habe daher im folgenden Beitrag einige zuverlässige Websites mit Anleitungscharakter zusammengestellt. Die Tutorials zu jQuery sind dabei nicht nur für Einsteiger interessant. Da kann sicherlich der ein oder andere Profi sein Wissen mindestens aufpolieren.


(Bildquelle: shutterhacks auf Flickr | CC-BY-SA)

JS The Right Way: ein Leitfaden für JavaScript-Anfänger

Um Missverständnisse rund um JavaScript zu vermeiden und zu verhindern, dass Anfängern fehlerhaftes Wissen vermittelt wird, kreierte William Oliveira unter JS the right way einen sehr nützlichen Leitfaden, der uneingeschränkt empfehlenswert ist.

Was ist „JS The Right Way“?

Hinter der Entstehung von „JS The Right Way“ steckt die Motivation, Anfängern in JavaScript qualitativ hochwertiges Wissen zu vermitteln. Die Webseite stellt einen Leitfaden dar, welcher Quellen mit nützlicher Lehrinformation aufzeigt. Er beginnt mit einer kleinen Einleitung, die das Ziel des Tutorial erklärt. Der Guide befindet sich noch in der Aufbauphase, wobei einige gute Sachen schon eingefügt sind. Jeder kann zum Aufbau beitragen, Vorschläge werden vor einer eventuellen Integration sorgfältig überprüft.

Bisheriger Umfang des Leitfadens

Nach der Einleitung und einigen Erläuterungen zum entstehenden Guide startet man mit dem Leitfaden. Darin finden Sie Quellen zum Thema JavaScript, die der Betreiber für seriös und gut befunden hat. Als erstes wird kurz erklärt, was JavaScript eigentlich ist und wie sich die Verwendung entwickelt hat. Längst ist JavaScript zu einem der Motoren des Web geworden, was Beispiele wie das serverseitige Framework node.js eindrücklich belegen.


node.js: Server-side JavaScript

Als weitere gute Quelle, welche zahlreiche Referenzen, Neuigkeiten rund um JavaScript sowie verschiedene Versionen davon enthält, wird das Mozilla Developer Network vorgestellt.


Referenzen und Neuigkeiten rund um JavaScript finden Sie auf Mozilla Developer Network

Weiter geht es mit Stil. Hier wird ein Styleguide mit einem interessanten Namen empfohlen: Idiomatic. Um den Code sauber zu bekommen, sollten Sie das Tool JSHint benutzen.


Ein Guide für JS-Anfänger: Idiomatic.js


Zahlreiche Patterns werden vorgestellt

Ein Beispiel hierfür kommt aus der Rubrik „Creational Design Patterns“ und stammt von Addy Osmani.


Factory Patterns: ein Ausschnitt aus dem Code

Wo gehobelt wird, da fallen Späne. Dennoch sollte man versuchen, durch gezielten Einsatz des Hobels so wenig Späne wie möglich zu erzeugen. Hierzu bieten sich Testing Tools an. Auch zu diesem Thema finden Sie einige gute Quellen. Zum Beispiel Mocha, ein Framework zum Testen von JavaScript.


Mocha: ein Code-Beispiel

Zur Weiterbildung sind Bücher sowie auch Kontakte zu wichtigen Leuten in diesem Bereich nützlich. Eine Liste kostenloser JS-eBooks wird vorgestellt. Ebenfalls in Listenform findet sich eine Übersicht interessanter JS-Profis, denen zu folgen sich nicht nur für Anfänger lohnt.


Kostenlose JS-Bücher

Listen finden sich noch etliche, so etwa solche mit JavaScript PaaS Providern, JavaScript Package Managern und Frameworks. Es kann als sicher gelten, dass Sie etwas Nützliches für sich finden werden.

jQuery-Tutorials nicht nur für Anfänger

Vielleicht beschäftigen Sie sich schon eine Weile mit Webdesign und kennen sich in HTML5, CSS und anderen Sprachen gut aus. Vielleicht sind Sie ein Anfänger im Webdesign und beginnen erst, diese wunderbare Welt zu erforschen. Auf jeden Fall ist Ihnen der Begriff „jQuery“ schon viele male begegnet. Ob Sie ein Profi darin sind oder – wie ich – noch keine Ahnung davon haben, werden Ihnen die folgenden Tutorials der Website jQuery Fundamentals sicherlich behilflich sein.


(Bildquelle: methodshop auf Flickr | CC-BY-SA)

jQuery Fundamentals

Wir beginnen mit einem englischsprachigen Tutorial von Bocoup, einer Open Web Technology Firma. Der Name des Tutorial lautet erklärend: jQuery Fundamentals. Das Tutorial verspricht Ihnen, dass Sie nach dem Durcharbeiten in der Lage sind, jQuery Probleme selbstständig zu lösen. Dafür müssen Sie natürlich die Lektionen im Tutorial samt der Übungen gewissenhaft durchkauen.

JavaScript Basics

Sie beginnen mit Grundlagen von JavaScript, da jQuery eine Bibliothek von JavaScript ist. In dieser Rubrik werden Ihnen diese Grundlagen in ziemlich knapper und übersichtlicher Form mit Beispielen erklärt. Oben rechts finden Sie einen Editor. In jedem Beispiel gibt es oben ein Augenzeichen. Klicken Sie darauf, erscheint das Beispiel im obigen Editor und Sie können das Ergebnis des Code sehen.


Ein Code-Ausschnitt

Traversal and Manipulation Methods

In diesem Abschnitt werden Ihnen Funktionen vorgestellt, mit deren Hilfe Sie verschiedene Elemente in einer DOM-Struktur effektiv suchen und verändern können. Die Funktionen, welche dies gewährleisten nennt man traversale und manipulierende Funktionen.


Ein Code-Ausschnitt

Event Handler

Hier geht es mit Event Handlers weiter. Dabei handelt es sich um Mechanismen, die verschiedene Ereignisse, z.B. Mausklicks, erkennen. Nach der Erkennung ruft das Skript bestimmte Funktionen auf und führt diverse Aktionen als Antworten auf diese Ereignisse aus.


Event Handler: ein Code-Ausschnitt

Effects

In diesem Kapitel erfahren Sie einiges über Effekte, welche mit jQuery realisiert werden können.


Einführung in die Effekte: ein Code-Ausschnitt

Zudem finden Sie einige Workshop-Angebote rund um jQuery.

jQuery-Tutorial: Einführung und Grundlagen von Matthias Schütz

Ein weiteres jQuery-Tutorial für Anfänger kommt von Matthias Schütz. Das Tutorial ist deutschsprachig. Schütz gibt eine Einführung in die Welt von jQuery in Form eines Artikels. Weiter unten finden Sie zahlreiche hilfreiche Links zum Thema, sodass Ihr jQuery-Studium keinesfalls nur auf diesen Beitrag beschränkt ist.


Matthias Schütz gibt Ihnen eine kompakte jQuery-Einführung in deutscher Sprache

Links zu weiteren jQuery-Tutorials

Wer nun immer noch nicht genug hat, findet hier eine große Liste mit Tutorials und zahlreichen Tipps und Tricks zum Thema.


Eine grosse Sammlung von jQuery-Tutorials

(dpe)

Swetlana Senkevitch

Neben dem Chemiestudium interessiert sich Swetlana Senkevitch für sehr viele Dinge dieser Welt. Kunst, Malerei, Psychologie, Naturwissenschaften, Schachspiel, Sprachen und Photographie sind nur einige Beispiele ihrer Interessen und Hobbies. Sie hat eine Leidenschaft fürs Schreiben und Design gefunden und beschäftigt sich nun mit Webdesign.

Ein Kommentar

Tut uns leid, aber die Kommentare sind geschlossen...

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück