JavaScript Tutorial

JavaScript ist eine Script-Sprache, die von Netscape entwickelt wurde. JavaScript-Programme sind in den HTML-Code integriert und können diesen steuern. Hierzu ist ein JavaScript-fähiger Browser erforderlich, der die Anweisungen JavaScript-Programm unmittelbar ausführt (interpretiert). Man kann damit z.B. die Eingabewerte von Formularen prüfen oder verarbeiten, witere Fenster öffnen u.v.a. JavaScript ist objektbasiert, d.h. der Programmierer kann auf die Objekte des Browsers, deren Eigenschaften und Methoden zugreifen und sogar neue Objekte erzeugen (aber keine neuen Klassen definieren). JavaScript wird hauptsächlich clientseitig eingesetzt

Programmierung mit JavaScript

JavaScript-Elemente können im BODY-, im HEAD-Teil der HTML-Seite stehen, oder auch in den Markierungen von Formularelementen.


Anweisungen

JavaScript-Anweisungen werden zwischen <script>...</script> notiert

Es gibt auch die Möglichkeit, JavaScript in externen Dateien zu notieren:
Erstellen einer Datei mit auszuführbarem Code und speichern mit der Endung .js z.B. myprogramm.js
Laden der Datei: <script language="JavaScript1.2" src="myprogramm.js" type="text/javascript">


Vordefinierte JavaScript-Objecte

Zeichenkette und Objekt String

Zeichenkette in JavaScript: als String und als String-Objekt (Instanzen des Objektes String)

Elementarer String:

text = "Ich will JavaScript lernen!";

Der elementare String-Wert wird dann bei der Anwendung von String-Methoden automatisch in ein entsprechendes String-Objekt umgewandelt.


String als Objekt

Ein neues String-Objekt kann erzeugt werden, indem man den Konstruktor des Objekts String verwendet

text = new String("Ich will Javascript lernen!");

Wie bei den Arrays teilt man dem Interpreter mit, dass es sich bei der Variablen um ein Objekt handelt und nicht um einen einfachen Wert.


Methoden der String-Objekte

Die Methoden der String-Objekte ermlöglichen es:

Folgende Methoden stehen Ihnen unter anderem zur verfügung:

Eigenschaft

length

Länge einer Zeichenkette

<script type="text/javascript">
var text="Test";
document.write(text.length);
</script>

Methoden zum Einbetten in HTML-Auszeichnungen

big()

für großen Text

<script type="text/javascript">
var text="Test";
document.write(text.big());
</script>

bold()

für fetten Text

<script type="text/javascript">
var text="Test";
document.write(text.bold());
</script>

italics()

für kursiven Text

<script type="text/javascript">
var text="Test";
document.write(text.italics());
</script>

strike()

für durchgestrichenen Text

<script type="text/javascript">
var text="Test";
document.write(text.strike());
</script>

small()

für kleinen Text

<script type="text/javascript">
var text="Test";
document.write(text.small());
</script>

fontcolor()

zur Veränderung der Schriftfarbe

<script type="text/javascript">
var text="Test";
document.write(text.fontcolor("blue"));
</script>

fontsize()

zur Veränderung der Schriftgröße

<script type="text/javascript">
var text="Test";
document.write(text.fontsize("+2"));
</script>

Methoden zur Ermittlung bestimmter Zeichen

charAt()

Zeichen an bestimmter Position ermitteln (fängt bei Null an zu zählen)

<script type="text/javascript">
var text="Test";
document.write(text.charAt(2));
</script>

substr()

Teilzeichenkette ab bestimmter Position ermitteln

<script type="text/javascript">
var text="Test";
document.write(text.substr(1));
</script>

indexOf()

Liefert die Stelle, an der die angegebene Teilzeichenkette in dem String vorkommt

<script type="text/javascript">
var text="Test";
document.write(text.indexOf('S'));
</script>

toLowerCase()

Wandelt alle Buchstaben der Zeichenkette in Kleinbuchstaben um

<script type="text/javascript">
var text="Test";
document.write(text.toLowerCase());
</script>

toUpperCase()

Wandelt alle Buchstaben der Zeichenkette in Großbuchstaben um

<script type="text/javascript">
var text="Test";
document.write(text.toUpperCase());
</script>

match()

Regulären Ausdruck* anwenden, sucht eine Zeichenfolge

<script type="text/javascript">
var text="Test";
document.write(text.match('Te'));
</script>

replace()

Regulären Ausdruck* anwenden und ersetzen
Um mit einem Aufruf von replace() alle Vorkommen zu ersetzen, muss man den regulären Ausdruck mit dem g-Parameter notieren

<script type="text/javascript">
var text="Testen durch Testen getestet";
var textneu=text.replace(/Te/g, "Ta");
document.write(textneu);;
</script>

search()

Suchen mit regulärem Ausdruck*

<script type="text/javascript">
var text="Testen getestet";
var ergebnis=text.search(/tes.+/)
if(ergebnis!=-1){
document.write("Gewunden an der Stelle "+ergebnis) }
else{
document.write("Nicht gefunden!") } ;
</script>

* Reguläre Ausdrücke dienen dazu, Suchmuster zu formulieren. Sie sind eine Art Schablone, und in einer Zeichenkette kann nach Übereinstimmungen mit ihnen gesucht werden, um diese beispielsweise durch eine andere Zeichenkette zu ersetzen.


Formulare

Name: (Nachname, Vorname)
Adresse:
PLZ:
Ort:
Geburtsdatum: (Tag.Monat.Jahr)

FirstName:

Email:

Kontaktformular !!!

Name:
E-Mailadresse:
Betreff:
Fragetypen:   Frage(n)
  Anregung(en)
  Kritik
Bemerkungen:
(Antwort abwarten)

Events DOM

HTML DOM erlaubt es JavaScript HTML-Events (HTML-Ereignisse) zu aktivieren

Wenn ein Benutzer auf ein Element klickt wird JavaScript ausgeführt

Es gibt:
onabort (bei Abbruch) / onblur (beim Verlassen)
onchange (bei erfolgter Änderung) / onclick (beim Anklicken) / ondblclick (bei doppeltem Anklicken)
onerror (im Fehlerfall)
onfocus (beim Aktivieren) / onkeydown (bei gedrückter Taste) / onkeypress (bei gedrückter gehaltener Taste) / onload (bei losgelassener Taste)
onmousedown (bei gedrückter Maustaste) / onmousemove (bei weiterbewegter Maus) / onmouseup (bei losgelassener Maustaste)
onmouseout (beim Verlassen des Elements mit der Maus) / onmouseover (beim Überfahren des Elements mit der Maus) /
onreset (beim Zurücksetzen des Formulars) / onselect (beim Selektieren von Text)
onsubmit (beim Absenden des Formulars) / onunload (beim Verlassen der Datei)
javascript: (bei Verweisen)

ONCLICK

Beispiele fü HTML-Ereignisse:

  • Wenn ein Benutzer mit der Maus anklickt
  • Wenn eine Web-Seite geladen wurde
  • Wenn ein Bild geladen wurde
  • Wenn der Mauszeiger über einem Element ist
  • Wenn ein Eingabefeld geändert wird
  • Wenn ein HTML-Formular gesendet wird
  • Wenn ein Benutzer eine Taste drückt

Inhalt wird geändert wenn Benutzer drauf klickt - Beispiel:

Drück mich!

Code:
<p onclick="this.innerHTML='Du machst auch alles was man dir sagt?!'">Drück mich!</p>

Funktion aus dem Event-Handler (Ereignisbehandler) wird aufgerufen

Drück mich!

Code:
<script>
function changeText(id){
id.innerHTML="Danke!"; }
</script>
<p class="facolor" onclick="changeText(this)">Drück mich!</p>


Zahlenratespiel

Wähle Zufallszahl zwischen 0 und

Die gesuchte Zahl ist:


Taschenrechner

X= Y=

Ergebnis:


Taschenrechner II




Fahrenheit/Celsius-Rechner

Celsius= Fahrenheit=

Ergebnis