Home » Webdesign » Java-Script Tutorial
- Anzeige -
Software Asset Management beim Fachmann

Einführung JAVA-Script

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.:

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')" 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"); 
:


War der Artikel hilfreich? Bitte liken und sharen. Danke!

it-zeugs.de ist auch auf Facebook...

Schreibe einen Kommentar - aber kein SPAM - der wird zuverlässig gefiltert!

  • Erforderliche Felder sind markiert mit *.

If you have trouble reading the code, click on the code itself to generate a new random code.