Erste Schritte
Hier werde ich etwas zu JavaScript schreiben, aber erst später.
Inhalt ändern
Um zu sehen was mit JavaScript alles möglich ist, sollen hier kleinere Beispiele gezeigt werden. Im ersten Beispiel soll ein Text verändert werden, wenn man auf einem Button klickt.
Ursprünglicher Text
<button type="button" onclick="document.getElementById('absatz').innerHTML='Ursprünglicher Text'">Ursprünglicher Text</button>
<button type="button" onclick="document.getElementById('absatz').innerHTML='Veränderter Inhalt'">Veränderter Inhalt</button>
Farbe ändern
Im zweiten Beispiel soll gezeigt werden, wie sich das Layout mit JS verändern lässt. Zu beginn ist die Schwarz, erst wenn einer der Buttons geklickt wird, ändert sich die Farbe. So ist es auch möglich Einfluss auf CSS-Vorgaben zu nehmen.
Farbe ändern
<button type="button" onclick="document.getElementById('farbe').style.color='red'">Farbe Rot</button>
<button type="button" onclick="document.getElementById('farbe').style.color='blue'">Farbe Blau</button>
Bilder ändern
Als nächstes soll ein Bild ausgetauscht werden. Das Prinzip ist das gleiche wie bei den zwei vorherigen Beispielen.
<button type="button" onclick="document.getElementById('bild').scr='bilder/bild1.png'">Erstes Bild</button>
<button type="button" onclick="document.getElementById('bild').scr='bilder/bild2.png'">Zweites Bild</button>
Datum anzeigen
Im letzten Beispiel soll JS das aktuelle Datum in der Zeitzone des Anwenders anzeigen. Dafür nutzt JS die Betriebssystemfunktionen mit der Funktion Date()
Hier erscheint gleich das Datum
<button type="button" onclick="document.getElementById('zeit').innerHTML=Date()">Datum anzeigen</button>
Hallo Welt
In jeder Programmiersprache ist das aller erste Programm welches vorgestellt wird das Hallo Welt Programm. Dabei soll einzig dieser Text angezeigt werden. JS kann dafür ein kleines Fenster, ein Popup öffnen. der passende Befehl ist alert. Das Fenster plöppt sofort auf, daher gibt es hier einen Link zum Hallo Welt Programm.
Zum Hallo Welt Programmalert ("Hallo Welt!");
</script>
Die große Stärker von JS ist die Interaktion mit dem Anwender. Dieser tut etwas und JS reagiert darauf. Die einfachste Möglichkeit ist der prompt Befehl, welcher auf die gleiche weise wie alert funktioniert. Der Befehl öffnet ein Popup und gibt dem Anwender nun ein Textfeld mit den Buttons OK und Abbrechen. Es sollte etwas mit dieser Eingabe passieren, normalerweise wird sie in eine Variable gespeichert. Man kann sie auch einfach wieder mit alert ausgeben.
Hier würde allerdings nur die Eingabe des Anwenders stehen. Ein wenig Kontext wäre nicht falsch. Um Texte, Variabeln oder Zahlen zu verbinden wird ein Plus + verwendet. Das sieht dann so aus:
JavaScript in externe Datei schreiben
Wie in CSS kann man JavaScript-Code in eine eigene Datei schreiben und im HTML-Dokument laden. Die Endung dieser Datei muss dann .js lauten. In dieser Datei muss der JS-Code nicht mit dem <script> Tag umschlossen werden. Auf der HTML-Seite bleibt dieser Tag, er bekommt allerdings ein Attribut verpasst src="ScriptName.js"
<script src="ScriptName.js">
</script>
</body>
"use strict"
JS ist sehr tolerant was Fehler oder unsauberes Coden angeht. Sie sollte zudem immer abwärtskompatiebel sein. Das hat aber auch einige Schwachstellen zur Folge. Mit dem "use strict" wird ein modernes JS geschrieben, welches jedoch nicht mehr abwärtskompatiebel ist. Dieser Befehl muss ganz am Anfang des JS-Codes geschrieben werden.
"use strict";
alert ("Hallo Welt!");
</script>