Ein Passwort wird per E-Mail an Sie geschickt

Die Programmiersprache Javascript gehört zu den Skriptsprachen und findet vor allem in der Web-Entwicklung Einsatz.

Es kann und wird aber auch immer häufiger in anderen Themengebieten eingesetzt, wie zum Beispiel in der Serverentwicklung. In diesem Artikel konzentrieren wir uns dennoch eher auf das ursprüngliche Einsatzgebiet von Javascript: dem Webbrowser.

Javascript ist Client-seitig, das heißt es wird, anders als bei serverseitigen Anwendungen, auf dem Gerät des Benutzers ausgeführt. Javascript ermöglicht unter anderem eine sinnvolle Interaktion mit dem Benutzer. So können zum Beispiel Eingaben eines Formulars vor dem Abschicken an den Server überprüft werden, und so dem Nutzer eine schnellere Rückmeldung auf fehlerhafte Eingaben gegeben werden. Außerdem können mit Javascript Html-Elemente animiert und verändert werden. Javascript wird auch im Bereich der Spieleentwicklung im Web-Bereich sehr erfolgreich eingesetzt und ermöglicht so plattformübergreifende voll funktionsfähige Spiele. Trotz des breiten Anwendungsspektrums wird Javascript heutzutage noch unterschätzt, da es sich um eine Skript-Sprache handelt, welche in der Vergangenheit keinen guten Ruf besaß. Dieser Ruf ist sehr veraltet, da es sich heute um einer der relevantesten Programmiersprachen handelt, welche sehr gefragt ist und auch in der Zukunft von der Relevanz eine steigende Tendenz aufweist.

Javascript ist sowohl eine funktionale als auch eine objektorientierte Programmiersprache. Der Programmierer kann sozusagen selbst entscheiden, ob er auf funktionaler Ebene programmiert oder objektorientiere Sprachelemente verwendet. Diese „weiche“ Struktur der Sprache ermöglicht Neulingen einen schnellen Einstieg in Javascript, da sie problemlos ihre Projekte umsetzen können, ohne gleich komplexe objektorientiere Sprachelemente verwenden zu müssen.

Wenn man sich ein wenig in Javascript zurechtfinden, ist es anschließend einfacher die objektorientierten Prinzipien zu erlernen, da nun nicht mehr eine neue Sprache und das Prinzip der objektorientheit kombiniert erlernt werden muss, wie wenn man beispielsweise Java als erste Programmiersprache lernt.

Um Missverständnisse gleich aus dem Weg zu räumen: Javascript hat nichts mit Java zu tun und ist diesem auch nicht sonderlich ähnlich. Der Name Javascript wurde damals vor allem gewählt, um die Popularität von Java zu nutzen, damit die Sprache bekannter wurde.
Wenn du dich nicht nur für Javascript, sondern allgemein für die Web-Entwicklung interessierst, lies dir unseren Eintrag über die Webentwicklung durch.

Hinweis: Wenn du dir noch nicht unsere Grundlagen-Artikel über die Programmierung durchgelesen hast, empfehlen wir dir dies dringend zu tun. Dort erfährst du die Grundprinzipien der Programmierung, während du hier gezeigt bekommst, wie man diese in Javascript einsetzt. Für diesen Artikel benötigst du vor allem Wissen über Variablen und Funktionen.

Um mit der Programmiersprache Javascript arbeiten zu können benötigst du vorerst einen Editor

In einem Editor schreibst du deinen Code, verwaltest deine Projekte, untersuchst du deinen Code auf Fehler und führst Projekte aus.

Unserer Meinung nach sind folgende Editoren zu empfehlen:
  • Notepad++, mit diesem Editor arbeiten wir schon seit längerem und können ihn vor allem deshalb empfehlen, weil er sehr schnell ist und alles bietet, was man für die Webseitenentwicklung braucht. Er eignet sich eher für Einzelprojekte und ist kostenlos zu haben
  • VisualStudio, dieser Editor eignet sich besonders gut für Teamprojekte, ist aber auch für Soloprojekte zu empfehlen. Die Community Version ist kostenlos verfügbar
  • Phase 5, ist für Privatpersonen kostenlos
  • SynWrite, durch plug-ins sinnvoll erweiterbar, ist kostenlos

Wir arbeiten für Soloprojekte bevorzugt mit Notepad++, da der Editor sehr schnell und flexibel ist, und für Teamprojekte mit VisualStudio, da diese Umgebung die Interaktion mit Teammitgliedern besonders gut ermöglicht.

Im folgendem Abschnitt möchten wir dir die Grundlagen der Sprache aufzeigen:

Um dir einen Einstieg in die Sprache Javascript zu geben, möchten wir dir anhand eines einfachen Beispielprogramms die Grundlagen der Sprache Javascript aufzeigen, damit du weißt, wie mit der Sprache gearbeitet wird. Dadurch wirst du schnell merken, ob dir die Sprache vom Aufbau gefällt und ob du diese Sprache weiter lernen möchtest. Anschließend erklären wir dir die gezeigten Befehle und deren Funktionen.

In diesem Beispiel arbeiten wir mit dem Editor Notepad++.

Um in der Web-Entwicklung mit Javascript arbeiten zu können, muss entweder ein Skript direkt in einer Html-Seite geschrieben werden, oder von dort aufgerufen werden.

Nachdem wir Notepad++ gestartet haben, sehen wir einf leere Datei:

Notepad++ Nach dem Start

Um Funktionen wie zum Beispiel Tag-Vervollständigung zu erhalten, müssen wir die Datei durch Ctrl-S oder durch Datei -> Speichern mit einem Namen und der Dateiendung .html speichern:

Notepad++ Datei Speichern

Anschließend definieren wir, wie bei jeder HTML-Datei das Grundgerüst:

 <html>
    <head>
        <meta charset = "utf-8"/>
    </head>

    <body>

        <script>

        </script>
    </body>
</html>

Um ein Sript in der HTML-Seite benutzen zu können, gibt es mehrere Möglichkeiten, welche wir in dem nächsten Artikel ausführlich behandeln werden. Jetzt reicht es aber zu wissen, dass der Javascript Code zwischen dem Script-Tag „<script>   </script>“geschrieben wird.

Unser erstes Skript soll auf einen Button-Click reagieren und eine Alert Box mit einem vordefinierten Text anzeigen.

Dazu müssen wir erst außerhalb des Skripts im HTML Code einen Button definieren und ihm eine Id über das Id-Attribut zuweisen. Jetzt können wir über die Methode „getElementById()“ des document-Objekts durch die vergebene Id den Button abfragen. Diesen speichern wir in einer Variable um ihn später verwenden zu können.

Anschließend können wir in dem Skript einen Event-Handler für den Button eintragen, wir bestimmen also was passiert, wenn dieser Button gedrückt wird.

 <html>
    <head>
        <meta charset = "utf-8"/>
    </head>
    
    <body>
        <button id ="myButton" type = "button">Klick mich!</button>
        
        <script>
            var myButton = document.getElementById("myButton");
            myButton.addEventListener('click', myButtonClicked);
            
            function myButtonClicked(){
                
            }
        </script>
    </body>
</html>

Als erstes erstellen wir einen Button und geben ihm eine Id. Anschließend greifen wir über die Id des Buttons vom Skript auf den Button zu und speichern diesen in der Variable myButtonVar. Nun fügen wir ihm einen Event-Listener hinzu.

In den Klammern nach ‚addEventListener‘ legen wir als erstes fest, bei welcher Aktion der Event-Listener reagieren soll („myButtonVar.addEventListener(‚click‚, myButtonClicked);“. In unserem Fall soll der Event-Listener auf das Click-Ereignis reagieren.

Nach dem Komma legen wir fest, welche Funktion bei dem vorgegebenen Ereignis aufgerufen werden soll.

Eine Funktion ist ein Codeblock von Anweisungen, welcher beim Aufrufen der Funktion ausgeführt wird. So lassen sich Skripte effektiver schreiben, da wiederkehrende Anweisungen in eine Funktion geschrieben werden können, welche bei Bedarf durch den Aufruf der Funktion ausgeführt werden.
In unserem Fall ist unsere Funktion noch leer, um eine Alertbox anzeigen zu lassen trägst du nun folgenden Code in deine Funktion ein:

 <html>
    <head>
        <meta charset = "utf-8"/>
    </head>
    
    <body>
        <button id ="myButton" type = "button">Klick mich!</button>
        
        <script>
            var myButton = document.getElementById("myButton");
            myButton.addEventListener('click', myButtonClicked);
            
            function myButtonClicked(){
                alert("Der Button wurde geklickt!");
            }
        </script>
    </body>
</html>

Nun kannst du deine Seite in deinem Browser ausführen, indem du in der Toolbox von Notepadd++ auf Ausführen drückst und anschließend deinen bevorzugten Browser auswählst.

Wenn du dich nicht vertippt hast, sollte deine Seite nun folgendermaßen aussehen:

Seite vor dem Klick

Seite nach dem Klick

Das war auch schon dein erstes Programm mit der Sprache Javascript!

Wir hoffen, dass wir dir einen Einstieg in die Sprache Javascript geben konnten und dir die Entscheidung erleichtert haben, diese Sprache zu lernen.

Falls du noch Anregungen oder Fragen zu Javascript hast, schreib doch einfach ein Kommentar. Wir werden versuchen, so schnell wie möglich darauf einzugehen!