Javascript Befehle A-E

Stichwörter A-E

alert()

alert ist eine Methode des Objektes window.
alert öffnet ein Mitteilungsfenster mit einem Warnzeichen.

<html>

<head>
<title>Javascript</title>

<script type="text/javascript">
<!--

window.alert("Willkommen auf meiner Homepage!");

//-->
</script>

</head>
<body>
.
.
</body>

Array

Eine Variable kann immer nur einen Wert speichern.
Wenn du eine Liste von Variablen anlegen willst, die zum gleichen Thema gehören und auf die du später einfach zugreifen willst, bietet sich ein Datenfeld (ein Array) für diesen Zweck an. Ein Array ist eine Liste von Daten gleichen Typs, eine mehrdimensionale Variable.

Ein Beispiel:

Ein Array muss mit

Wochentag=new Array();

deklariert werden.
In den Klammern kann auch die Anzahl der Elemente notiert werden.

Wochentag=new Array(6);

Wochentag[0]="Montag";
Wochentag[1]="Dienstag";
Wochentag[2]="Mittwoch";
Wochentag[3]="Donnerstag";
Wochentag[4]="Freitag";
Wochentag[5]="Samstag";
Wochentag[6]="Sonntag";

<form name="Wochentage" action="">

<input type="button" value="Element 0" onclick="TagZeigen(0)">
<input type="button" value="Element 1" onclick="TagZeigen(1)">
<input type="button" value="Element 2" onclick="TagZeigen(2)">
<input type="button" value="Element 3" onclick="TagZeigen(3)">
<input type="button" value="Element 4" onclick="TagZeigen(4)">
<input type="button" value="Element 5" onclick="TagZeigen(5)">
<input type="button" value="Element 6" onclick="TagZeigen(6)">

<textarea name="Anzeige" rows="1" cols="14" readonly="readonly"></textarea>

</form>

Ein Click auf die Buttons führt die Funktion TagZeigen() aus. Als Parameter wird in der Klammer die Nummer des Arrayelements übergeben:

0 = Montag
1 = Dienstag
2 = Mittwoch
3 = Donnerstag
4 = Freitag
5 = Samstag
6 = Sonntag

Ein weiteres Beispiel:

In dem Beispiel gibt es drei Datenfelder:

die Bilder:

var Bild=new Array();
Bild[0]="muenchen.jpg";
Bild[1]="st_michel.jpg"
Bild[2]="capoliveri.jpg";
Bild[3]="budapest.jpg"
Bild[4]="braunwald.jpg"

var Stadt=new Array();
Stadt[0]="München";
Stadt[1]="Mont St. Michel";
Stadt[2]="Capoliveri";
Stadt[3]="Budapest";
Stadt[4]="Braunwald";

var Land=new Array();
Land[0]="Deutschland";
Land[1]="Frankreich";
Land[2]="Italien";
Land[3]="Ungarn";
Land[4]="Schweiz";

Diese Arrays machen den Zugriff auf die Daten einer Stadt leichter.

Der HTML-Quelltext besteht aus:

den Buttons:

<form name="Stadt" action="">
<input type="button" value="München" onclick="StadtZeigen(0)">;
<input type="button" value="Mont St. Michel" onclick="StadtZeigen(1)">
<input type="button" value="Capoliveri" onclick="StadtZeigen(2)">
<input type="button" value="Budapest" onclick="StadtZeigen(3)">
<input type="button" value="Braunwald" onclick="StadtZeigen(4)">

dem Startbild:

<img src="../bilder/staedte/muenchen.jpg< width="210" height="130"  border="0" name="Bild">

den Textfeldern für die Anzeige der Daten:

<b> Stadt:</b>
<textarea name="Stadt" rows="1" cols="12" readonly="readonly"<>/textarea><br />
<b>Land:</b>

<textarea name="Land< rows="1" cols="12" readonly="readonly"></textarea>

</form>

Ein Click auf die Buttons führt die Funktion StadtZeigen() aus.

function StadtZeigen(Auswahl)
{
   document.Stadt.Bild.src = Bild[Auswahl];
   document.Stadt.Stadt.value=Stadt[Auswahl];
   document.Stadt.Land.value=Land[Auswahl];
}

Eingebaute Arrays

Javascript kennt auch eingebaute Arrays:

images[ ]
Alle Bilder einer Seite werden entsprechend der Reihenfolge ihres Auftretens nummeriert:

<img src="kirchen/delft.jpg" />
<img src="bayeux.jpg" />
<img src="altenberger_dom.jpg" />
<img src="maria_laach.jpg" />
<img src="dresden.jpg" />>

In Javascript tragen diese Bilder die Nummern:

images[0]
images[1]
images[2]
images[3]
images[4]
images[5]

Die Buttons zeigen die Namen der Städte. Ein Klick auf einen Button und übergibt die Nummer des Bildes:

<input type="button" onclick="CheckAuswahl(0)" value="Delft" />
<input type="button" onclick="CheckAuswahl(1)" value="Bayeux" />
<input type="button" onclick="CheckAuswahl(2)" value="Altenberg" />
...

Eine Funktion setzt den Status des Bildes auf hidden:

style="visibility: visible/hidden"

function CheckAuswahl(BildNummer)
{
   document.images[BildNummer].style.visibility='hidden';
}

Ein weiteres Beispiel:

links[ ]

Der Quelltext

function LinkAlle(Farbe)
{
   for (i=0;i<document.links.length;i++)
   {
     document.links[i].style.color=Farbe;
     document.links[i].style.backgroundColor="yellow";
   }
}

<input type="button" value="alle blau" onclick="LinkAlle('blue')" />
<input type="button" value="alle grün" onclick="LinkAlle('green')" />

forms[ ]

Der Quelltext

Die Formen:

<form name="Bilder" action="">
...
</form>

<form name="Buttons" action="">
...
</form>

In Javascript werden die Formen als

forms[0]
forms[1]

bezeichnet.
Mit diesen Namen kann die style-Eigenschaft visible gesetzt werden.

document.forms[0].style.visibility='hidden'
document.forms[1].style.visibility='visible'

Der Quelltext des Buttons:

<input type="button" value="Bilder ausblenden" onClick="document.forms[0].style.visibility='hidden'" />

elements[ ]
Innerhalb einer Form werden die einzelnen Elemente in der Reihenfolge ihres Auftreten durchnummeriert.

Der Quelltext

<form name="Demo" action="">

<button name="Button1">Button 1</button>
<button name="Button2">Button 2</button>

<select name="Listenfeld"  size="3">

   <option>Beatles</option>
   <option>Rolling Stones</option>
   <option>Deep Purple</option>

</select>

<textarea name="Textfeld" rows="5"  cols="20" readonly="readonly">
</textarea>

</form>

Die Elemente der Form "Demo" sind beginnend mit 0 durchnummeriert:

Element	Zugriff in Javascript über Arrays	Zugriff in Javascript über Namen (name)
1. Button	document.forms[0].elements[0]	document.Demo.Button1
2. Button	document.forms[0].elements[1]	document.Demo.Button2
Listenfeld	document.forms[0].elements[2]	document.Demo.Listenfeld
Textfeld	document.forms[0].elements[3]	document.Demo.Textfeld

frames[ ]

Der Quelltext

<script type="text/javascript">
function FramesTauschen(Frame_1,Frame_2)
{
      parent.frames[Frame_1].location.href = "b_vokabel.htm";
      parent.frames[Frame_2].location.href = "b_diashow_beschreibung.htm";
}
</script>

<img alt="" src="../bilder/frames2.jpg" width="200"  border ="1" onClick="FramesTauschen(2,1)" />
<img alt="" src="../bilder/frames1.jpg" width="200"  border ="1" onClick="FramesTauschen(1,2)" />

ASCII-Code

Der ASCII-Code ist eine Zeichen-Definition fr den Datenaustausch zwischen verschiedener Hardware und unterschiedlichen Betriebssystemen.
ASCII bedeutet American Standard Code for Information Interchange.
Großbuchstaben finden sich zwischen 65 und 90, Kleinbuchstaben zwischen 97 und 122.

Die Methode fromCharCode() wandelt ASCII-Nummern in Zeichen um.

backgroundColor

In Kombination mit style verändert backgroundColor die Hintergrundfarbe der Seite oder einzelner Elemente.

document.body.style.backgroundColor = "red"; 
document.getElementById("Element").style.backgroundColor = "lightblue";

charAt()

charAt()gibt das Zeichen an einer bestimmten Position in einer Zeichenkette zurück

var Satz="Drei Chinesen mit dem Kontrabass";
var Buchstabe=Satz.charAt(0);

Die Variable Buchstabe hat den Wert D.

Achtung Die Zählung beginnt mit 0!

clearInterval()

clearInterval() erwartet als Parameter die mit setInterval() gesetzte Kennung.

<input type="button" value="Start!" onClick="Zeit=setInterval('naechstesBild()',3000)" />
<input type="button" value="Stopp!" onClick="clearInterval(Zeit)" />

createElement()

<head>
<style> 
.gelbesTextfeld 
{
    border: 1px solid black;
    background-color: #F0E68C;
    width: 300px;
    height: 40px;
    overflow: auto;
}

.BildRahmen
{
    border:outset;
    border-width:6px;
    border-color:#9999FF; 
    border-style:outset;
    padding:5px;
}
</style>

<script language="JavaScript" type="text/javascript">

function TextfeldAnlegen()
{
    var Textfeld = document.createElement('textarea');
    Textfeld.setAttribute("class", "gelbesTextfeld");
    Textfeld.setAttribute("id", "neuesTextfeld");
    
    document.getElementById('rahmen').appendChild(Textfeld); 
    document.getElementById('anlegen').style.visibility="hidden";
}

function TextSchreiben()
{
    document.getElementById("neuesTextfeld").value=document.getElementById("schreiben").value;
    document.getElementById("neuesTextfeld").setAttribute("readonly", "readonly");
}
</script>

</head>

<body>
<form name="textschreiben">

<textarea id="schreiben" style="width: 300px;height: 40px;"></textarea>
<input id="anlegen" type="button"  value="anlegen" onclick="TextfeldAnlegen()" />
<input type="button" value="kopieren" onclick="TextSchreiben()" />

</form>
<div id="rahmen"></div>
</body>

Date()

Mit dem Objekt Date kannst du Datum und Uhrzeit lesen und anzeigen lassen.
Bevor du Date verwenden kannst, musst du eine neue Instanz erzeugen:

Datum = new Date();

Als Methoden stehen zur Verfügung:

Datum.getDate(): liefert den Tag als Zahlenwert
Datum.getDay(): gibt den Wochentag als Zahlenwert zurück:
0=Sonntag bis 6=Samstag
Datum.getMonth(): zeigt den Monat als Zahlenwert:
0=Januar bis 11=Dezember
Datum.getFullYear(): ergibt eine vierstellige Jahreszahl

Der Quelltext

function DatumAnzeigen()
{

Für die Namen der Tage brauchst du ein Array, da ja nur Zahlen zurückgegeben werden:
Jede zurückgegebene Zahl der Methode getDate() zeigt auf eine Element des Arrays (0=Sonntag bis 6=Samstag)
Auch die Monate werden durch ein Array repräsentiert (0=Januar bis 11=Dezember)

   var NamenTage = new Array("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag");
   var NamenMonate = new Array("Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember");
   var Datum = new Date();
   document.write(NamenTage[Datum.getDay()] +", "+Datum.getDate() + ". " + NamenMonate[Datum.getMonth()]+"  "+Datum.getFullYear());
}

Ein weiteres Beispiel:

disabled

Wenn die Funktion disabled für einen Button ausgeführt wird, kann er nicht mehr angeklickt werden.

Der Quelltext

<input type="button" value="Element 0" onclick="this.disabled='true'">

document

Mit dem Objekt document kannst du in der angezeigten HTML-Seite Änderungen vornehmen.

Als Methoden stehen zur Verfügung:

Escape-Sequenzen in Strings

Die Ausgabe von Strings kann mit Steuerzeichen (Escape-Sequenzen) formatiert werden.
Einige Sonderzeichen müssen mit \ "maskiert" werden, damit sie angezeigt werden können.

Sequenz Sonderzeichen

\' ' einfaches Anführungszeichen

\" " doppeltes Anführungszeichen

\/ / Querstrich

\t Tabulator

\r Wagenrücklauf
(Sprung in die nächste Zeile)

Sequenz	Sonderzeichen
\'	' einfaches Anführungszeichen
\"	" doppeltes Anführungszeichen
\/	/ Querstrich
\t	Tabulator
\r	Wagenrücklauf (Sprung in die nächste Zeile)

<html>

<head>
<title>Javascript</title>

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--

alert("Javascript ist nicht Java...\r...und auch nicht so schwer!");

//-->
</SCRIPT>

</head>
<body>
.
.
</body>

Wenn du document.write verwendest, musst du den HTML-Zeilenumbruch <br /> benutzen!

document.write("Das ist ein Text<br /> mit Zeilenumbruch!");