Einführung JAVA-Script

Jul 18, 2019

—

von

in IT Zeugs – aber nicht für it-zeugs.de

Dieses kleine JAVA-Script-Tutorial führt Sie in die Grundzüge von JAVA-Script ein.

Die Script-Sprache JAVA-Script wird lokal im Browser ausgeführt (im Gegensatz z.B. zu PHP, was auf deinem Web-Server ausgeführt wird und nur den Output an den Client-Browser liefert).

Einbindung von JAVA-Script in HTML-Code

Die Einbindung von JAVA-Script-Code erfolgt bei HTML4 durch:

<script language="javascript" type="text/javascript">
<!--
... hier steht der JAVA-Script-Code
-->
</script>

Unter HTML5 geht das ganze noch einfacher:

<script>
<!--
... hier kommt nun das eigentliche JavaScript
-->
</script>

JAVA-Script kann auch über eine externe Datei eingebunden werden:

<script src="javascript.js"></script>

Variablen in JAVA-Script

In JAVA-Script brauchen Datentypen nicht angegben werden.

Deklaration einer Variablen

Beispiel

var i;

Initalisierung einer Variablen

i=10;

Arrays

Beispiel

<!DOCTYPE html>  
  <html lang="de"> 
    <head> 
    <title>JAVA-Script</title> 
  <meta charset="utf-8" /> 
</head> 
<body> 
<h1>Test</h1> 
  <script> 
  var cars = new Array(); 
  cars[0]="Smart"; 
  cars[1]="Mercedes"; 
  cars[2]="Audi"; 
 
  document.write(cars[0]); 
  document.write("<br />"); 
  document.write(cars[1]); 
  document.write("<br />"); 
  document.write(cars[2]); 
  </script> 
</body> 
</html>

Schleifen

while

while (Bedingung)
	{
	JAVA-Script-Code;
	}

for

for (Zähler, Bedingung; Zähleanweisung)
	{
	JAVA-Script-Code;
	}

Funktionen in JAVA-Script

Definition

	function Funktionsname ( )
	{
	JAVA-Script-Code;	
	}

Aufruf

	Funktionsname ( );

Rückgabe in JAVA-Script-Funktionen

	function Funktionsname ( )
	{
	JAVA-Script-Code;	
	return (variable);
	}

	meine-variable = Funktionsname ( );

Events

Wie kann man in JAVA-Script auf Formulareingaben, Mausklicks und andere Ereigniss reagieren? Über Ereignisse, bzw. englisch „Events“.

Einige gängige Event-Handler sind z.B.:

onAbort – beim Abbrechen des Ladens eines img-Elements
onBlur – beim Verlassen eines Formular-Elementes
onChange – bei Ändern von Inhalt
onClick – beim Anklicken
onError – im Fehlerfall
onFocus – beim Positionieren auf
onLoad – beim Laden
onMouseOver – wenn die Maus auf dem Element ist
onMouseOut – wenn die Maus nicht mehr auf dem Element ist
onReset – beim Anwählen des Reset-Knopfes bei Formularen
onSubmit – beim Anwählen des Absenden-Knopfes bei Formularen
onUnload – beim Verlassen einer Datei

Beispiel für die Events onBlur, onChange

<!DOCTYPE html>  
<html lang="de"> 
<head> 
<title>JAVA-Script Events Beispiel</title> 
<meta charset="utf-8" /> 
</head> 
 
<body> 
 
<h1>JAVA-Script Events Beispiel</h1> 
<form method="POST"> 
<p> 
  <input type="text" name="T1" size="20" onblur="alert('Textfeld verlassen')&quot onchange="alert('Textfeld geändert')"> 
  <input type="submit" value="Absenden" name="B1"><input type="reset" value="Zurücksetzen" name="B2"> 
</p> 
</form> 
 
</body> 
</html>

Beispiel für die Events onClick, onMouseOver, onMouseOut

<!DOCTYPE html>  
<html lang="de"> 
<head> 
<title>JAVA-Script Events Beispiel</title> 
<meta charset="utf-8" /> 
</head> 
 
<body> 
 
<h1>JAVA-Script Events Beispiel</h1> 
  <p>Auf das Wort <span onClick="alert ('Sie haben mit der Maus auf das Wort hier geklickt!')"> -hier- </span> bitte mit der Maus klicken.</p> 
  <p>Auf das Wort <span onMouseOver="alert ('Sie sind mit der Maus auf das Wort hier gefahren!')"> -hier- </span> bitte mit der Maus fahren.</p> 
  <p>Auf das Wort <span onMouseOut="alert ('Sie haben mit der Maus das Wort hier verlassen!')"> -hier- </span> bitte mit der Maus fahren und wieder verlassen.</p> 
 
</body> 
</html>

Beispiel für die Events onFocus, onLoad, onError

<!DOCTYPE html>  
<html lang="de"> 
<head> 
<title>JAVA-Script Events Beispiel</title> 
<meta charset="utf-8" /> 
</head> 
 
<body onload="alert('Seite wurde geladen!')"> 
 
<h1>JAVA-Script Events Beispiel</h1> 
<form method="POST"> 
<p> 
  <input type="text" name="T1" size="20" onfocus="alert('Textfeld hat Focus erhalten')"> 
  <input type="submit" value="Absenden" name="B1"><input type="reset" value="Zurücksetzen" name="B2"> 
</p> 
</form> 
 
 
<img src="image.gif" onerror="alert('image.gif nicht gefunden')">  
 
</body> 
</html>

Beispiel für die Events onReset, onSubmit

<!DOCTYPE html>  
<html lang="de"> 
<head> 
<title>JAVA-Script Events Beispiel</title> 
<meta charset="utf-8" /> 
</head> 
 
<body> 
 
<h1>JAVA-Script Events Beispiel</h1> 
<form method="POST" onreset="alert('Formular wurde zurückgesetzt')" onSubmit="alert('Formular wurde abgeschickt')"> 
<p> 
<input type="text" name="T1" size="20"> 
  <input type="submit" value="Absenden" name="B1"> 
  <input type="reset" value="Zurücksetzen" name="B2"> 
</p> 
</form> 
 
</body> 
</html>

Objekte

Objekte gibt es auch in JAVA-Script, trotzdem ist JAVA-Script keine objektorientierte Sprache im strengen Sinn. Über vordefinierte Objekte lassen sich Elemente der aktuellen Webseite ansprechen, Fenster öffnen, etc.

Die Objekt-Eigenschaften lassen sich in jedem Fall auslesen, nicht immer jedoch neu setzen.

Beispiel: Auslesen des Titels

<!DOCTYPE html>  
<html lang="de"> 
<head> 
<title>Objekttest</title> 
<meta charset="utf-8" /> 
<script> 
<!-- 
  function TitelAusgabe() 
  { 
    var Titel = window.document.title; 
    alert ("Diese Webseite hat den Titel: " + Titel); 
  } 
--> 
</script> 
</head> 
 <body onload="TitelAusgabe()"> 
</body> 
</html>

Das JAVA-Script window-Objekt

Das Window-Objekt ist das oberste Objekt in der Objekthierarchie von JavaScript.

<!DOCTYPE html>  
  <html lang="de"> 
  <head> 
  <title>Windows-Spielereien</title> 
  <meta charset="utf-8" /> 
	</head> 
	<body> 
  <h1>Windows-Spielereien</h1> 
  <p>Bitte Pop-Up Blocker deaktivieren.</p> 
  <script> 
    alert ("Jetzt mache ich ein neues kleines Fenster auf und 
	schreibe was rein!");  
    myWindow = window.open("", "", "width=400, height=200"); 
    myWindow.document.write ("<h1>Hallo</h1>"); 
    myWindow.document.write ("<p>Ich bin das kleine mit 
	JAVA-Script erzeugte Fenster...</p>"); 
    myWindow.focus;  
  </script> 
	</body> 
	</html>

Window-Objekt Eigenschaften

closed: Gibt zurück, ob das Fenster geschlossen ist oder nicht
defaultStatus: Gibt oder setzt den default-Wert des Status-Textes
document: Gibt das Dokument-Objekt des jeweiligen Fensters zurück
frameElement: Gibt das iframe-Element zurück, in dass das aktuelle Element eingefügt wird.
frames: Gibt alle iframe-Elemente des aktuellen Fensters zurück.
history: History-Objekt des aktuellen Fensters.
innerHeight: Innere Höhe eines Inhalt-Bereichs des Fensters.
innerWidth: Innere Breite eines Inhalt-Bereichs des Fensters.</
length: Anzahl der iframe-Elemente des aktuellen Fensters.
location: Gibt das Location-Objekt (die Adresse) des Fensters zurück.
name: Setzt oder liefert den Namen des aktuellen Fensters .
navigator: Gibt das Navigator-Objekt des aktuellen Fensters zurück.
opener: Gibt eine Referenz zurück auf das Fenster, was das aktuelle fenster geöffnet hat.
outerHeight: Gibt die äussere Höhe des Fensters zurück, inklusive Scroll- und Toolbars.
outerWidth: Gibt die äussere Breite des Fensters zurück, inklusive Scroll- und Toolbars.
pageXOffset: Gibt die Anzahl der Pixel zurück, die das Dokument horizontal von der oberen linken Ecke des Festers gescrollt wurde.
pageYOffset: Gibt die Anzahl der Pixel zurück, die das Dokument vertikal von der oberen linken Ecke des Festers gescrollt wurde.
parent: Gibt das Eltern-Fenster des aktuellen Fensters zurück.
screen: Gibt das Screen-Objekt des aktuellen Fensters zurück.
screenLeft: Gibt die horizontale Koordinate des Fenster relativ zum Screen-Objekt zurück.
screenTop: Gibt die vertikale Koordinate des Fenster relativ zum Screen-Objekt zurück.
screenX: Gibt die horizontale Koordinate des Fenster relativ zum Screen-Objekt zurück.
screenY: Gibt die vertikale Koordinate des Fenster relativ zum Screen-Objekt zurück.
scrollX: Gibt die Anzahl der Pixel zurück, die das Dokument horizontal von der oberen linken Ecke des Festers gescrollt wurde.
scrollY: Gibt die Anzahl der Pixel zurück, die das Dokument vertikal von der oberen linken Ecke des Festers gescrollt wurde.
self: Das aktuelle Fenster.
status: Setzt oder gibt den Text in Text in der Statuszeile des aktuellen Fensters zurück.
top: Gibt das oberste Browser-Fenster zurück.

window-Objekt Methoden

alert(): Gibt eine Dialogbox mit Nachricht und OK-Schalfläche aus.
atob(): Dekodiert einen base-64 kodierten String.
blur(): Nimmt den Fokus auf das jeweilige Objekt weg.
btoa(): Kodiert einen String in base-64.
clearInterval(): Setzt einen mit setInterval() gesetzten Timer zurück.
clearTimeout(): Setzt einen mit setTimeout() gesetzten Timer zurück.
close(): Schliesst das aktuelle Fenster.
confirm(): Gibt eine Dialogbox mit einer Nachricht und OK- und Abbrechen-Schaltfläche aus.
createPopup(): Erzeugt ein Popup-Fenster.
focus(): Setzt den Focus auf das jeweilige Fenster.
moveBy(): Bewegt ein Fenster relativ zur aktuellen Position.
moveTo(): Bewegt ein Fenster zu der spezifizierten Position.
open(): Öffnet ein neues Browser-Fenster.
print(): Druckt den Inhalt des jeweiligen Fensters.
prompt(): Gibt eine Dialogbox aus mit einer Eingabemaske für den Benutzer.
resizeBy(): Verändert die Grösse des Fensters um die angegebene Anzahl an Pixel.
resizeTo(): Verändert die Grösse des Fensters um die angegebene Breite und Höhe./dd>
scroll(): Veraltet. Ist durch die scrollTo() Methode ersetzt worden.
scrollBy(): Scrollt das Dokument um die angegebene Anzahl Pixel.
scrollTo(): Scrollt das Dokument zu den angegebenen Koordinaten.
setInterval(): Ruft eine Funktion oder einen Ausdruck im angegebenen Intervall in Milisekunden auf.
setTimeout(): Ruft eine Funktion oder einen Ausdruck nach der angegebenen Anzahl an Miliskeunden auf.
stop(): Beendet das Laden eines Fensters.

Beispiele

setTimeout

function Ticker() { 
document.forms[0].lauf.value = Tickertext; 
Tickertext = Tickertext.substring(1, Tickertext.length) + 
Tickertext.substring(0, 1); 
setTimeout ("Ticker()",500); 
}

Zum Unterschied von SetInterval und SetTimout siehe Understanding timers: setTimeout and setInterval.

prompt

var meldungen = new Array(); 
meldungen[0] = prompt("bitte erste Meldung eingeben"); 
:

Achtung!

Dieser Artikel wurde automatisiert vom alten CMS übernommen. Dort war er zuletzt am 30.11.2015 geändert worden. Bei der Konvertierung können sich Fehler eingeschlichen haben, wie zum Beispiel falsche Zeilenumbrüche, fehlende Bilder oder fehlende Zeichen. Wenn du einen solchen Fehler entdeckst, dann schreibe doch bitte einen Kommentar, damit ich das beheben kann.

Vielen Dank für deine Mühe.

Kommentare

Schreibe einen Kommentar Antworten abbrechen

Über den Autor

Schwarzwälder, der in der Schweiz lebt. Informatiker. Outdoor-Fan. Reisender. Ambitionierter Hobbyfotograf. Meist unterwegs mit Zelt oder Minicamper.

skoobe, meine Lieblings E-Book-Leihbibliothek.
Jetzt Gutschein sichern!

Beliebte Kategorien

Nützliche Links

Links, die ich nützlich fand und teilen wollte.

Die Website durchsuchen

Fotografie

IT-Links

* Affiliate-Link. Wenn du auf diesen Link klickst und darüber einkaufst, bekomme ich von deinem Einkauf eine kleine Provision. Für dich verändert sich der Preis nicht. Vielen Dank dafür, du unterstützt damit die Arbeit an dieser Website.