Script-Datenbank

Zurück zum Script-DB Eingang

http://project-icarus.de/erleuchtet/Script-DB/index.htm

- Falls einzelne Abschnitte in manchen Browsern nicht angezeigt werden, kann man versuchen, die Auswahl über die Suche einzuschränken -

Weiterführend

Woher? Gesammelt und teilweise verändert aus (teilweise veraltet):

SelfHTML Wiki
http://de.selfhtml.org/

SelfHTML Stefan Münz 8
http://www-hera-b.desy.de/subgroup/computing/IT/www/selfhtml/index.htm

dem Internet Magazin
http://www.internet-magazin.de/

u.v.a.m., z. B.

HTML-Workshop:

http://www.html-workshop.de

HTML- und Java-Scriptletts zum Kopieren. Sowie auf englisch, aber sehr empfehlenswert:

Bravenet:

http://www.bravenet.com/

Netmechanic:

http://www.netmechanic.com/

PHP-Tricks

Zurück zum Script-DB Eingang

http://project-icarus.de/erleuchtet/Script-DB/index.htm

PHP

PHP4 - PHP5

ACHTUNG: Die meisten hier aufgeführten Scripte gelten für PHP 4!

Einiges muß für PHP 5 ergänzt, geändert bzw. angepaßt werden.

So müssen aus Sicherheitsgründen mögliche Formulareingaben oder Wahlmöglichkeiten auf der Seite explizit deklariert werden, damit das Script die Rückgabewerte verarbeitet:

<?PHP

// Formular-Variablen deklarieren

// einfach:

$SuchTextEingabe = $_POST['SuchTextEingabe'];
$GanzWort = $_POST['GanzWort'];
$GrossKlein = $_POST['GrossKlein'];
...
$Sonstwas = $_POST['Sonstwas'];

usw.

// WENN es sie denn gibt:

if ((isset($_POST['Seite']) == TRUE))
{
$Seite=$_POST['Seite'];
}

// oder

if ($SonstigeBedingung == "erfuellt")
{
$Eingabe=$_POST['Eingabe'];
}

?>

- VOR dem esten Abruf auf der Seite, die das PHP-Script aufruft
(Ist es die selbe Seite, ganz an den Anfang)

Hier Beispielsweise für das Formular:

<BODY>
<P>
<FORM ACTION="sonstwo.php" METHOD="POST">
<P>
<INPUT TYPE="text" NAME="SuchTextEingabe">
<P>
<INPUT TYPE="checkbox" NAME="GanzWort" VALUE="on"> Ganzes Wort
<INPUT TYPE="checkbox" NAME="GrossKlein" VALUE="on"> Gross / Klein
<INPUT TYPE="checkbox" NAME="Sonstwas" VALUE="on"> Sonstwas
<P>
</FORM>

Die eigene Datei findet man jetzt mit

$_SERVER['PHP_SELF']

bzw.

<?php echo ($_SERVER['PHP_SELF']); ?>

Die eigene URL auswerfen:

<A HREF="http:// echo ($_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF']); ?>">
<?php echo ($_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF']); ?></A>

----------------

Seit PHP 5.6 setzt PHP einen Standard-Zeichensatz (default charset), selbst wenn keiner konfiguriert ist. Dieser Zeichensatz ist vorbelegt mit UTF-8.

Wer Seiten mit früheren Versionen von PHP erstellt hat und deshalb nur noch Zeichensalat erhält, kann das wieder abschalten, indem in PHP als Erstes dieser Zeichensatz wieder entfernt wird:

// Keine Leerzeichen vor dem Script und keine Ausgabe im
// Script (z.B.: echo, print, ...) vor der Funktion.
header('Content-Type: text/html; charset=""');

[Aus: http://webbausteine.de/blog/tipps/schriftzeichen_richtig_darstellen.php]

--------

Wem auf Grund der Umstellung von PHP auf PHP 5.6 die Funktion "htmlentities" zur Umwandlung von Umlauten und Sonderzeichen in HTML versaut wurde und evtl. nicht an die nun notwendigen Grundeinstellung in der PHP.ini herankommt, muß evtl. die im Text ja nach Sprache vorkommenden Sonderzeichen einzeln austauschen lassen:

// = Suche einzeln nach:

$conf_SearchTEXT = array(
'ü',
'ä',
'ö',
'ß',
'Ü',
'Ä',
'Ö',
);

// = Ersetze einzeln durch:

$conf_ReplaceTEXT = array(
'ü',
'ä',
'ö',
'ß',
'Ü',
'Ä',
'Ö',
);

// - - -

// Alle austauschen:

$ZeilenString = (str_replace($conf_SearchTEXT, $conf_ReplaceTEXT, $ZeilenString));

- Und ggf. wieder zurück

----------------

PHP & HTML

In einer ganz normalen HTML-Seite lassen sich einzelne Werte als PHP einbauen,
! wenn die Seite als .PHP-Seite auf dem Server läuft:

<HTML>
<HEAD>

<TITLE>

Titel mit Datum: <?PHP echo date("d.m.Y"); ?>

</TITLE>

</HEAD>
<BODY>

<P>
Der anzuzeigende Wert XYZ ist:

<?PHP echo "$XYZ"; ?>

</BODY></HTML>

------

Genauso kann man in PHP einzelne HTML-Bereiche auslesen und ausgeben:

<?PHP

// Holt den Titel der Seite:

preg_match("|<title>(.*)</title>|Uis", $ZeilenString, $Titel);

// Holt die META - Beschreibung der Seite:

preg_match("|<META NAME=\"description\" CONTENT=\"(.*)\">|Uis", $ZeilenString, $Beschreibung);

?>

Anker finden

Findet den ersten 'A NAME' - Anker in einem HTML- Abschnitt (String)

[$String = HTML- Abschnitt]

$ErsterAnker = "";

$Ausdruck = "|(<(a.* name=)(.*)[^>]*>)|Uis";
preg_match($Ausdruck, $String, $AnkerVerweis);

$ErsterAnker = $AnkerVerweis[0];

if ($ErsterAnker != "")
{
$NameAnfang1 = 'Name='; // Dann:
$NameAnfang2 = '=';

$Anker1 = stristr(stristr($ErsterAnker, $NameAnfang1), $NameAnfang2);

$NameEnde = '>';
$Anker1 = stristr($Anker1, $NameEnde1, TRUE);

// Trennung ab Leerzeichen, wenn vorhanden
// ACHTUNG: Der Suchbegriff muß vorhanden sein, sonst wird der String verworfen.
if (stristr($Anker1, " ") != FALSE)
{$Anker1 = stristr($Anker1, " ", TRUE);}

$Anker = "#".(trim($Anker1, '\"='));
}

PHP in Java Script

In einer PHP-Datei lassen sich ohne Weiteres PHP-Zeilen in JavaScript einbauen:

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


</SCRIPT>

Auf diese Weise lassen sich recht einfach per Formular übertragene Parameter und ihre Werte auf PHP-Seiten auch in Java Script auslesen und übertragen.

PHP wird VOR JS ausgelesen!

ACHTUNG: PHP ist im Gegensatz zu JavaScript ganz außerordentlich "case sensitive", das heißt, es unterscheidet auch bei Variablen und Werten strikt zwischen Groß- und Kleinschreibung!

JavaScript nur in manchen Fällen.

PHP Abfrage & Refresh

Umleiten einer Seite, wenn eine PHP-Bedingung nicht erfüllt ist:

<?PHP

if (!isset ($Wert))
{
print "<META HTTP-EQUIV=\"REFRESH\" CONTENT=\"0; URL=yxz.htm\"> \n";
}

?>

PHP automatisch aktualisieren

PHP-Seiten automatisch aktualisieren:

Anders als bei JavaScript lassen sich Änderungen durch PHP nicht so leicht aktuell darstellen, da die Verarbeitung auf dem Server stattfindet. Um die Veränderung dem Benutzer auch anzuzeigen, muß die entsprechende Seite (erneut) vom Server geladen werden.

Möglichkeit 1: Zwischenseite benutzen

Mit einem einfachen Verweis wird eine "Zwischenseite" aufgerufen, auf der die PHP- Anweisung steht. Diese ruft dann nach einer bestimmten Zeit (hier 3 Sekunden) die darstellende Seite(erneut) auf.

zwischenseite.php:

<HTML>
<HEAD>
<META http-equiv="REFRESH" content="3; URL= darstellende_seite.php">
<TITLE>Zwischenseite mit PHP-Anweisung</TITLE>
</HEAD>
<BODY>

<?PHP
...Anweisung
?>

<P>
Einen Moment bitte...
<P>

</BODY></HTML>

Möglichkeit 2: Die PHP-Seite sich selber einmal neu laden lassen

Ist eine PHP- Anweisung auf der Seite selbst notiert, sollte die Seite erneut geladen werden, um die Veränderung korrekt darzustellen. Dieses kann zwar durch eine JavaScript- Anweisung im <Body>- Tag automatisiert werden; allerdings würde die Seite sich bei Aufruf dann endlos neu laden. Sie soll sich aber nur ein mal neu vom Server abrufen. Das läßt sich durch eine vorübergehende Namensänderung erreichen:

<HTML>
<HEAD>
<TITLE>Nur 1x sich selbst neu ladenende Seite</TITLE>

<SCRIPT language="javascript" type="text/javascript">

function NamenAendern()
{window.name = "NeuerName"; }

function EinmalLaden()
{if (window.name == "NeuerName")
{location.reload(); window.name = "AlterName"; }}

</SCRIPT>

</HEAD>
<BODY Onload="EinmalLaden();" >
<FORM... Onsubmit="NamenAendern();>

<?PHP
...Anweisung
?>

</FORM>
</BODY></HTML>

PHP-Code-Zeilenumbruch

Um PHP-generierten HTML-Code im Ergebnis lesbarer zu machen, lassen sich Zeilenumbrüche einbauen, entweder codiert oder (im Gegensatz zu JavaScript) auch real::

--------

echo "\n<BR>\n";
echo "\n<BR>\n";

Ergibt:

<BR>

<BR>

---------

echo "
< BR>
< BR>
";

Ergibt:

<BR>
<BR>

----------------------

ECHO " Etwas: <P>
$Das<P>
";

Ist dasselbe wie

ECHO " Etwas: <P>
$Das<P>\n
";

----------------------

Während im PHP-Code Zeilenumbrüche unschädlich sind, markieren sie in JavaScript das Ende einer Anweisung.

Schreibt man also JavaScript in PHP, immer ein /n ans Ende der Zeile setzen!

----------------------

ACHTUNG: Manchmal unterscheidet PHP zwischen einfachen und doppelten Anführungszeichen:

print "\n 1 Tralala \n";

// ist nicht gleich

print '\n 2 Tralala \n';

Ausgabe:

1 Tralala

\n 2 Tralala \n

PHP-Code auslagern

PHP - Code auslagern: [ include ]

PHP-Code auszulagern macht insofern Sinn, als

- Die Datei übersichtlich beliebt
- Das HTML-Gerüst nicht zu sehr leidet
- Die Datei (wenigstens Teilweise) auch lokal im eigenen Browser geprüft werden kann
- Verschiedene PHP-Dateien darauf zugreifen können

Allerdings sollten man dabei darauf achten, Code-Schleifen nicht zu unterbrechen, auch wenn das nicht immer vermieden werden kann.

I. Auslagern aus der PHP-Datei in eine der Script-Datei:

<P>



<?PHP include ("ordner/ausgelagert.blb"); ?>







<BR clear=all>

II. Weiter auslagern aus der Script-Datei:

include ("teil1.blb");

oder

if ($Irgendwas == "so")
{include ("teil2.blb");}

III. Vorgegebene Werte auslagern

Oft müssen etliche Werte einfach vorgegeben werden, die sich nur selten ändern. Diese lassen sich in eine eigene Datei auslagern:

<?PHP

// Minimalwert
$Minimalwert = 1;

// Maximalwert
$Maximalwert = 2;

// Pfad
$Pfad = "Pfad/Ordner";

// Adresse
$Adresse = "Meine Adresse";

// etc.
$etc = "irgendwas";

?>

Diese Datei mit

<?PHP include ("ordner/dateinamen.blb"); ?>

ganz am Anfang der PHP-Datei einlesen; die Werte stehen von nun an für die gesamte Verarbeitung zur Verfügung.

PHP-Datumsausgabe

PHP - Datumsausgabe



Entweder die PHP-Funktion mit einem Text verbinden
[Mit einem '.' - außerhalb der Anführungsstriche!]

<?PHP echo date("d.m.Y") . " ist das heutige Datum." ?>

Oder:

Diese Datei wurde erstellt am

<?PHP echo date("d.m.Y"); echo " um "; echo date("H:i:s"); ?>

[Mit Uhrzeit]

PHP-Werte übertragen

Werteübertragung zwischen Seiten in PHP:

Mit Hilfe eines (versteckten) Formulars lassen sich in PHP Werte von Seite zu Seite übertragen, solange die Kette nicht unterbrochen wird:

<FORM>

<?PHP

echo <input name=\"TextEingabe\" type=\"text\" size=\"30\" maxlength=\"30\" ";

if ($TextEingabe == "")
{
echo "value=\" \" >";

echo "<input type=\"hidden\" name=\"EingabeLeer\" value=\"ja\"> ";
}

else
{
echo "value=\"$TextEingabe\" >";

echo "<input type=\"hidden\" name=\"EingabeLeer\" value=\"nein\"> ";
}

?>

</FORM>

Einmal eingetragene Werte werden so automatisch eingetragen.

Value= "ja" bzw. "nein" wird hier in PHP zum Wert von "$EingabeLeer"

Der Wert von "$EingabeLeer" läßt sich nun im "Gedächtnis" behalten, wenn er unsichtbar übertragen wird:

<FORM>

<?PHP

echo "<input type=\"hidden\" name=\"EingabeLeer\" value=\"$EingabeLeer\">\n";

?>

</FORM>

- - -

Auf ähnliche Weise lassen sich auch Werte von einer .HTML-Seite auf eine .PHP-Seite übertragen:

Hier die Emailadresse eintragen:

<Form Action="formular1.php" method="get">

<input type="text" name="email">

<input type="hidden" name="wasnu" value="anmelden">

<input type="submit" value="anmelden">

</Form>

PHP-Werte addieren

Variable Werte sammeln (Add String) :

Veränderliche Werte innerhalb einer PHP-Schleife zu einem String addieren und diesen anschließend als Array auslesen:

// ADD to ARRAY as STRING: (Erste = 0, bleibt leer)

// Zu String:
$Wert = "$Wert,$NeuerWert";

Wichtig:
// Inner Trim String:

$Wert = eregi_replace("\t", "", $Wert);
$Wert = eregi_replace(" *, *", ",", $Wert);

(PHP arbeitet mit POSIX- Regulären Ausdrücken)

// Sucht für Stripped String nach doppeltem Komma (Array-Trennung):

$WertArray = explode(",,", $Wert);

// Entfernt das grundsätzlich erste (leere) Element eines solchen Arrays:

array_shift($WertArray);

------

Ähnlich:

Schleifendurchläufe hochzählen:

$Zahl = $Zahl+1 ;
$AktuelleNr = $Zahl ;

oder schlicht:

$Zahl++ ;
$AktuelleNr = $Zahl ;

------

Das Ganze geht auch bei Arrays:

Unter Umständen muß anfangs ein leeres Array generiert werden:

$Add_Array = array(""); // Leeres Array, wenn notwendig

$Add_Array = array_merge($Add_Array,$Array);

(vermischt die Werte)

$Add_Array = array_merge_recursive($Add_Array,$Array);

(vermischt die Werte nicht)

// Entfernt doppelte Einträge:

$Add_Array = array_unique($Add_Array);

// Entfernt doppelte Einträgen und setzt wieder durchgängige Schlüssel:

$Add_Array = array_merge_recursive(array_unique($Add_Array));

PHP-Werte hochzählen

Manchmal ist es nützlich, innerhalb einer Schleife die einzelnen Variablen hochzuzählen, um sie bei der Weiterverarbeitung zu unterscheiden

$Zahl = 2;

$WasAuchImmer = "Auto";

for ( $zl=1; $zl < $Zahl+1; $zl++ )
{

$Variable = "$WasAuchImmer$zl";
$Variable = $Variable;

echo "Dieses ist der" . $zl . ". Durchlauf: <br>";
echo "$zl : $Variable <br><br>";

// 1. Zu String:
$Addieren = "$Addieren,$Variable";
}

// 2. Zu Array:
$Alle = explode (',', $Addieren);

// Ausgabe String:
echo $Addieren;
echo "<br><br>";

// Ausgabe Array:
print_r ($Alle);

echo "<P>";

---

Ergibt:

Dieses ist der1. Durchlauf:
1 : Auto1
Dieses ist der2. Durchlauf:
2 : Auto2

,Auto1,Auto2

Array ( [0] => [1] => Auto1 [2] => Auto2 )

(Erstes Element => leer!)

Werte zu Variablen

Werte zu Variablen

Aus einem Wert eine laufende Variable machen:

$Menge = 2;

for($zahl=1; $zahl<$Menge+1; $zahl++)
{

$EtwasNr = "Etwas".$zahl;
$Das = $EtwasNr;
echo "<P> <B>Das ist jetzt</B>: ".$Das." <BR>";

}

FlipFlop Umschalter

Umschalter in PHP

Schaltet nach dem ersten Durchlauf um:

if ($Wert != $Vorgabe)
{
echo "Erster Durchgang";
$Vorgabe = $Wert;
}

Verzeichnisse auslesen

Verzeichnisse auslesen in PHP

// Listet die Dateien im Verzeichnis des gewählten Pfades auf - als Zeichenketten.

$Verzeichnis=opendir ($Pfad);
while ($file = readdir ($Verzeichnis))
{
print ($file. "<BR>");
}

// Liest die Dateien im Verzeichnis des gewählten Pfades aus - als Array
// (aphabetisch auf- bzw. absteigend sortiert)

$Verz= $DatenPfad; // OHNE opendir!

$files1 = scandir($Verz); // alphabetisch absteigend
$files2 = scandir($Verz, 1); // alphabetisch aufsteigend

// Auflisten:

print_r($files1);
print ("<BR>");
print_r($files2);

// Ergebnis:
Array ( [0] => . [1] => .. [2] => aaa.txt [3] => bbb.html [4] => ccc.txt )
Array ( [0] => ccc.txt [1] => bbb.html [2] => aaa.txt [3] => .. [4] => . )

// Im Ergebnis sollen nun bestimmte Zeichenketten unbedingt vorkommen
// Bestimmte andere Zeichenketten sollen aber ausgeschlossen sein (Peter ja, Paul und Mary nicht):

$Pmuster = "\.txt|\.htm"; // Positives Suchmuster:
// Diese Zeichenfolgen sollen im Ergebnis vorkommen
$Nmuster = "ccc|lari|fari"; // Negatives Suchmuster:
// Diese Zeichenfolgen sollen im Ergebnis NICHT vorkommen
// (gleichzeitig)
// - es sind beliebig viele Zeichenfolgen möglich

Diese Suchmuster können auch der Übersicht halber in externe Dateien ausgelagert werden:

$Pmuster = join("|", file("ordner/erlaubt.txt",FILE_IGNORE_NEW_LINES));
$Nmuster = join("|", file("ordner/verboten.txt",FILE_IGNORE_NEW_LINES));

erlaubt.txt: verboten.txt:
\.txt ccc
\.htm lari
fari

/// Ohne Leerzeichen oder Leerzeilen;
// FILE_IGNORE_NEW_LINES löscht den Zeilenumbruch (=Leerzeichen am Ende des String)

// Von
// http://www.hackerboard.de/web-design-und-webbasierte-sprachen/44498-regex-zeichenketten-finden-welche-foo-enthalten-aber-nicht-bar.html
// übernommen und abgeändert

$VSArray = preg_grep('/(?!.*'.$Nmuster.')^.*('.$Pmuster.')/', $files1);

print_r($VSArray);

// Ergebnis:
Array ( [2] => aaa.txt [3] => bbb.html )

Zur Änderung siehe weiter unten: Leerzeilen beseitigen

Datei Auslesen und verdichten

Häufig soll eine Datei, z.B. eine Zitatensammlung, ausgelesen und dargestellt werden. Schädlich dabei sind einzelne Leerzeilen, sowie solche mit Leerzeichen, Tabulatoren und anderen unsichtbaren Inhalten: sie würden eine unsichtbare Ausgabe erzeugen.

Die Dateien müssen also zeilenweise eingelesen, von leeren Einträgen befreit und vor der Ausgabe zusammengefasst werden.

$Datei ="zitate.txt";

$Zeilen1 = file ($Datei);

$Anzahl = count ($Zeilen1);

echo "$Anzahl Zeilen in $Datei. Zweite Zeile: <BR> $Zeilen1[1]";

echo "<P>";

// Anwendung 1:

$var = $Zeilen1;

$var = array_unique($Zeilen1);

// array_unique entfernt Dubletten aus einem array - wenn es denn Dubletten sind;
// Sie müssen genau gleich sein.

for($x=0;$x<count($var);$x++)
{
echo "<br> - $x: -$var[$x]- <br>";
}

// Anwendung 2:

foreach ($var as $value)
{
echo "Ausgabe: $value<br>\n";

// Add String 2:

if (trim($value)!= "")
{
$string = "$string#$value";
}

echo "<P>";
echo "ADDSTRING: $string";
echo "<P>";

}

// Zerlegt den verdichteten String wieder in ein Array:

$array1 = explode("#",$string);

// Entfernt das grundsätzlich erste (leere) Element eines solchen Arrays:

array_shift($array1);

for($x=0;$x<count($array1);$x++)
{
echo "ARRAY_NEU: -$x-$array1[$x]-<BR>";
}

echo "<P>";

foreach ($array1 as $value)
{
echo "Ausgabe2: $value<br>\n";
}

echo "<P>";

// Randomisiere 3:

srand((double)microtime() * 10000000);

$rand_var = array_rand($array1, 3); // At Random II

for($x=0;$x<count($rand_var);$x++)
{
echo "<br> Zeile $rand_var[$x]: " . $array1[$rand_var[$x]] . "<br>";
}

echo "<P>";

Auslesen und Leerzeilen beseitigen

Leerzeilen beseitigen

Zeichenkette vollständig trimmen: Innen alle doppelten Leerzeichen und außen alle Extrazeichen am Kettenanfang und - ende beseitigen:

$search = array(" ");
$replace = array(" ");

$Zeichenkette = trim(str_replace($search, $replace, $Zeichenkette));

------

Aus zwei Textdateien sollen zeilenweise Werte ausgelesen werden.

Dadurch sollen bestimmte Zeichenfolgen im Ergebnis unbedingt vorhanden sein ($Pmuster, OK.txt), andere Zeichenfolgen aber gleichzeitig ausgeschlossen werden ($Nmuster, NICHT.txt); und dabei dürfen weder Leerzeilen mit beliebig vielen Leerzeichen noch ein einfacher Zeilenumbruch in den Textdateien (oder auch aus Formulareingaben) mit verwertet werden.

// $Pmuster: Positives Suchmuster:
// Diese Zeichenfolgen SOLLEN im Ergebnis vorkommen: Aus OK.txt

// $Nmuster: Negatives Suchmuster:
// Diese Zeichenfolgen sollen im Ergebnis NICHT vorkommen: Aus NICHT.txt

$Leerzeile = array(""," "); // Definiert Zeilenumbruch / Leerzeile
$Pmuster = join("|", array_diff(array_map('trim', file("php_hilfe/OK.txt", FILE_IGNORE_NEW_LINES)), $Leerzeile));
$Nmuster = join("|", array_diff(array_map('trim', file("php_hilfe/NICHT.txt", FILE_IGNORE_NEW_LINES)), $Leerzeile));

// Das Folgende wurde von
// http://www.hackerboard.de/web-design-und-webbasierte-sprachen/44498-regex-zeichenketten-finden-welche-foo-enthalten-aber-nicht-bar.html
// übernommen und abgeändert

$Gefiltert[$a] = preg_grep('/(?!.*'.$Nmuster.')^.*'.$Pmuster.'/', $files[$a]);

ZU BEACHTEN:

$Nmuster und $Pmuster sind hier noch einfache, einzelne Zeichenketten (Strings)!

Sind mehrere Ausdrücke zu prüfen, sollte man eigentlich zu Array-Funktionen greifen. Diese haben jedoch die Besonderheit, daß die abzugleichenden Ausdrücke einander exakt entsprechen müssen.

Aber: Man kann $Nmuster und $Pmuster hier auch als "ODER" Zeichenketten schreiben, in welcher die einzelnen Prüf-Ausdrücke mit "|" getrennt nacheinander aufgeführt werden. Dazu muß man den regulären Ausdruck an einer Stelle abändern:

{$Gefiltert[$a] = preg_grep('/(?!.*'.$Nmuster.')^.*'.$Pmuster.'/', $files[$a]);}

wird zu

{$Gefiltert[$a] = preg_grep('/(?!.*'.$Nmuster.')^.*('.$Pmuster.')/', $files[$a]);}

oder

{$Gefiltert[$a] = preg_grep('/(?!.*'.$Nmuster.')^.*('.$Pmuster.')/i', $files[$a]);}
( i = beachtet die Groß- und Kleinschreibung nicht )

Nun wird jede Zeichenkette in $files[$a] gefunden, in dem zwar
eines von den mehreren Suchmustern in $Pmuster = "das|hier|wohl"
vorkommt, aber keines von $Nmuster = "aber|keines|von|diesen":

"hier lang" = ja // (+hier/--0)
"lass uns nach hause gehn" = nein (+0/--0)
"aber das hier ist wohl nichts" = nein (+das+hier+wohl/--aber)
"mehr davon" = nein (+0/--von)

Einzelne dieser Worte oder Werte können ggf. durch einen Ausdruck ersetzt werden, der selbst mehrere durch "|" getrennte Begriffe enthält.

Zur Anwendung siehe weiter oben: Verzeichnisse Auslesen

Array oder String - Text auslesen

Textdateien in PHP auslesen

- und darin enthaltene URLs:

"http://..."

zu anklickbaren Verweisen in HTML machen:

Man muß sich entscheiden: Array oder Zeichenfolge?

$Zeilen = file($Datei);

// Liest die Datei ($Datei) zeilenweise (!) in ein Array.

$JZeilen = join(" ",$Zeilen);

// Macht aus dem Array eine Zeichenfolge

// Achtung:
// Die (neue) Funktion 'file_get_contents()' arbeitet ähnlich wie 'file()', nur mit dem Unterschied,
// dass der Inhalt einer Datei komplett(!) als Zeichenfolge (String) ausgegeben wird

// Weiter:
// [wird der Parameter 'regs' angegeben, werden alle Treffer weiter in einem Array gespeichert]

for($x=0;$x<count($Zeilen);$x++)
{
if ($Suchstring != "" && eregi ($Suchstring, $Zeilen[$x], $regs))
{

// Das folgende trennt eventuelle im Text aufeinanderfolgende URLs:

$ZZeilen = eregi_replace ("http", "|http", $Zeilen[$x]);

// Das nächste wirft die URLs (meistens) als anklickbare Verweise aus.
// Vorher! Alle HTML-Tags in der Textdatei maskieren,
// damit diese in HTML als Text dargestellt werden und kein Unheil anrichten:

$ZZeilen = htmlentities($ZZeilen);

// Von http://www.php-faq.de/q-regexp-uri-klickbar.html / übernommen und abgeändert:
// [Es gibt im Netz noch umfassendere Suchmuster zu finden:
// http://mathiasbynens.be/demo/url-regex]

$suchmuster = '#(^|[^\"=]{1})(http://|ftp://|mailto:|news:)([^\s<>]+)([\s\n<>]|$)#sm';
$ersetzung = "\\1<a href=\"\\2\\3\"><u>\\2\\3</u></a>\\4";

$ZZeilen = preg_replace($suchmuster, $ersetzung, $ZZeilen);

echo $ZZeilen;

}
}

--------------

Will man nur die URLs in Verweise umwandeln, die im Text alleine stehen,
also vorne und hinten durch Leerzeichen oder Zeilenumbrüche abgegrenzt sind,
kann man diesen regulären Ausdruck nehmen:

$suchmuster = "#[ | // Leerzeichen oder Zeilenumbruch vor der URL
]((http|https|ftp)://[^\s$]+)#";

$ZZeilen = preg_replace($suchmuster, ' <A HREF="$1">$1</A> ', $ZZeilen);

Arrays oder Strings kombinieren

Arrays bzw. Strings kombinieren und wechseln:

<?PHP

$Wert1 = "eins";
$Wert2 = "zwei|drei|vier|fünf";
$Wert3 = "vier";

$Wertesammlung = array($Wert1,$Wert2,$Wert3);

$Kombination = implode('|', $Wertesammlung);

// Macht daraus:

// eins|zwei|drei|vier|fünf|vier

echo $Kombination;

// Man kann es auch als Array belassen bzw. ausgeben:

$Array_Kombination = explode("|", $Kombination);

print_r ($Array_Kombination);

// Oder, wenn jeder Wert nur einmal vorkommen soll:

$Array_Kombination = array_unique(explode("|", $Kombination));

// Der Witz liegt darin, für Haupt- und Unterstrings bzw. Haupt- und Unterarrays
// jeweils das selbe Trennzeichen zu benutzen;
// dann zerfällt der String anschließend in ein Array aus kombinierten Einzelwerten.

print_r ($Array_Kombination);

// Allerdings sind nach 'array_unique' die Schlüssel nicht mehr durchgängig vorhanden,
// denn sie werden ggf. mit entfernt.

// Aus:

Array ( [0] => x [1] => x [2] => y )

// wird so:

Array ( [0] => x [2] => y )

// Das führt zu interessanten Verarbeitungsfehlern.
// Lösung: Das Array neu durch nummerieren.

$Array_Kombination = array_merge_recursive($Array_Kombination);

// Ergibt:

Array ( [0] => x [1] => y )

?>

Arrays oder Strings addieren

In PHP Werte laufend rekursiv addieren:

$AddiertesArray = array(); // Für ein Array

for($a=0; $a<$AnzahlDerWerte; $a++)
{

// Addiert die einzelnen Werte zu einem

// Im Array:

$AddiertesArray[$a]=$NeuerWert[$a];

// Im String:

$AddierterWert = $AddierterWert.$NeuerWert[$a];

// Mit Trennzeichen X:

$AddierterWert = $AddierterWert. "X" .$NeuerWert[$a];

}

Bei jedem Durchlauf wird die neue Zeichenkette an die alte angehängt,
optional getrennt durch ein Trennzeichen.

[Im ersten Durchlauf ist der addierte Wert noch nicht vorhanden]

Array auf Wert setzen & prüfen

Leervorgaben

Häufig muß man in PHP (und JavaScript) Variablen oder einen Verarbeitungswert (wieder) auf null setzen bzw. diese definieren, damit das Script im ersten Durchgang keinen Fehler auswirft in der Art "existiert nicht" (im Gegensatz zu set/isset/unset, womit man sie löscht).

In PHP:

$EineVariable = 0;
$EineVariable = "";
...

$EinArray = array();
...

ganz an den Anfang des Skriptes setzen

-----------

Umgekehrt: Die Fehlerabfrage

Prüfen, ob ein Array nicht leer ist, d.h. prüfen, ob ein Array existiert und ob es einen Wert enthält (nicht einen bestimmten, sondern überhaupt irgend einen Wert)

if (is_array($Fragliches_Array) && ((bool)$Fragliches_Array[0]))

liefert FALSE

bei

$Fragliches_Array = "";

$Fragliches_Array = array();

$Fragliches_Array = array("");

- letzterer Fehler ist sonst kaum abzufangen, da PHP in dem Fall automatisch einen Schlüssel generiert

Text-Zeilentrenner

Zeilentrenner

Problem: Eine Textdatei soll zeilenweise eingelesen und zeilenweise getrennt ausgegeben werden

Kein Problem:

// Datei als Array einlesen:
$Zeilen = file($Datei);

print_r($Zeilen);

Soll aber die Datei als Ganzes gelesen und danach in Absätze unterteilt ausgegeben werden,
muß nach (mindestens) doppelten Zeilenumbrüchen gefahndet werden - und das ist nicht ganz so einfach.

So geht es:

// Datei als String einlesen:
$ZeilenString = file_get_contents($Datei);

Anschließend doppelte Zeilenumbrüche suchen;

// Entweder den doppelten Zeilenumbruch direkt in den Code eingeben:
// Den doppelten Zeilenumbruch so lassen!
$Zeilen = explode("

",$ZeilenString);
// Den doppelten Zeilenumbruch so lassen!
// Ohne Einzug!

// oder diese Variante wählen:
$Zeilen = explode("\r\n\r\n",$ZeilenString);

- Was immer auf dem Server geht.

- Wer außerdem die Zeilenumbrüche erhalten will, setzt später davor noch ein

nl2br(...

Ausgabe:

for($x=0;$x<count($Zeilen);$x++)

{

// Ohne Zeilenumbrüche:

echo $Zeilen[$x];

// Mit Zeilenumbrüchen:

echo nl2br($Zeilen[$x]);

}

Mehrere Worte ersetzen

Mehrere Ausdrücke in einem String ersetzen:

$str = 'gehabt haben worden sein.';

$search = array('worden','sein','gehabt','haben');
$replace = array('alles','gut','Morgen','wird');

$Ausgabe = (str_replace($search, $replace, $str));

Ergebnis: Morgen wird alles gut

['str_replace' beachtet dabei Groß- und Kleinschreibung, 'str_ireplace' nicht]

Alternativ (unterscheidet zwischen Groß- und Kleinschreibung):

$Tauschen = array(
"eins" => "zwei",
"sechs" => "sieben",
"zehn" => "dreiundzwanzig",
"und so" => "weiter"
);

$String = strtr($String, $Tauschen);

- So können mit 'strtr' auch unterschiedlich große Ausdrücke ersetz bzw. ausgetauscht werden.

-----

Bestimmte Worte hervorheben, ohne sie zu verändern:

$String = "Zwei mal zweiundzwanzig Zwei";

$Wort = "zwei";

$String = preg_replace('/('.$Wort.')/i', '<B>$1</B>', $String);

Ergibt:

<B>Zwei</B> mal <B>zwei</B>undzwanzig <B>Zwei</B>

- Die Groß- und Kleinschreibung bleibt wie im Original erhalten!

ACHTUNG:

- ('.$Wort.') muß hier in Klammern gesetzt werden, damit PHP es als Variable erkennt, und mit $1 genau den gefundenen Suchausdruck wieder darstellen kann - die zweite Variable (in Klammern) wäre dann $2, und so weiter - aber immer nur innerhalb EIN UND DERSELBEN Ersetzungsfunktion!

- Einzubinden ohne Punkt '.'
- Außer zwischen zwei anderen Variablen - dann ja, aber mit Anführungszeichen: $xy.'$1'.$z
- Den Suchausdruck bei Fehlern versuchsweise doppelt in Anführungszeichen setzen: '/('.$Wort.')/i'
- Bei weiterer Fehlfunktion doppelte Anführungszeichen versuchen: "/<('.$Wort.')/i"
- Mehrere Variable in regulären Suchausdrücken ohne Punkt verbinden: "/<('.$Wort$NochEinWort.')/i"

- Eine solche Such-&-Ersetze- Variable läßt sich durch (einklammern) überall in jedem regulären Ausdruck definieren

HTML- Code validieren

HTML-Code in PHP validieren

- gefunden auf:

http://stackoverflow.com/questions/3059398/how-to-close-unclosed-html-tags

Machmal ist es notwendig, HTML-Code in PHP zu verarbeiten, und nicht immer ist der resultierende HTML- Code korrekt.

Um wenigstens die gröbsten HTML-Fehler, wie nicht geschlossene HTML-Tags, zu beseitigen und einen gültigen HTML-Code zu erzeugen, kann man ab PHP 5 die interne Funktion "DOMDocument" benutzen:

// Parse HTML

$internal_errors = libxml_use_internal_errors(true);

$doc = new DOMDocument();
$doc->loadHTML("$MeinHtmlCode");
$MeinHtmlCode = $doc->saveHTML();

libxml_use_internal_errors($internal_errors);
libxml_clear_errors();

Der HTML-String wird damit völlig neu aufgebaut.

Die 'error'- Zeilen davor und danach unterdrücken die dabei entstehenden Fehlermeldungen.

HTML- Code zu Text

HTML-Text komplett zu reinem Text entformatieren:

$Bereinigt = strip_tags($HTMLDatei);

echo html_entity_decode($Bereinigt);

-> Allerdings auch ohne Absätze, jedenfalls in der HTML-Ausgabe.
-> Die originalen Zeilenumbrüche (\r\n) des Quellcode blieben jedoch erhalten;
-> Man kann diese Datei also als Text ausgeben lassen.

print "\n<PRE>\n";
echo html_entity_decode($Bereinigt);
print "\n</PRE>\n";

Wer will, kann andererseits vorher etwa mit

$search = array('<TD>','<LI>','etc.');
$replace = array(';',' - ','etc.');

$HTMLDatei = (str_ireplace($search, $replace, $HTMLDatei));

bestimmte HTML-Tags für die HTML-Ausgabe in eine ansprechende Text-Formatierung umwandeln lassen.

Dagegen die Ausgabe mit Absätzen in HTML:

$Bereinigt = strip_tags($HTMLDatei, '<p><br>');

// Beläßt diese Tags als Ausnahmen bestehen
// Diese und weitereTags können nach Bedarf eingefügt werden, z.B. auch <TD> oder <LI>

echo html_entity_decode($Bereinigt);

[Das Ganze geht natürlich nur, wenn der HTML-Code auch korrekt geschrieben wurde]

HTML-Tags ausschließen

Manchmal möchte man im sichtbaren Text einer HTML-Datei nach einem Begriff suchen,
aber nicht in den HTML-Tags.

Das ist einfacher als man glaubt:

// Holt den Inhalt einer Datei als Zeichenfolge:
$HTMLDatei = file_get_contents("HTML-Datei.htm");

// Entfernt die HTML-Tags
// Auch einfache Kommentare - jedoch nicht HTML-Tags plus Text in Kommentaren!

$Bereinigt = strip_tags($HTMLDatei);

if ($Suche != "" && eregi ($Suche, $Bereinigt, $regs))
{
usw...
}

---

Allerdings ist mit dieser Methode keine Ersetzung im HTML-Code möglich, da dieser durch STRIP_TAGS für die Suche ja beseitigt wurde.

Das ist etwas komplizierter: Suche und Ersetze Text, der nicht in HTML-Tags steht

(geholt von http://stackoverflow.com/ - - negative lookahead, negative Vorausschau)

[~i = ignoriere Großschreibung]

Methode 1:

// - Suche NICHT in Verweisen (A -Tags) - auch nicht im Veweistext zwischen den <A...> </A> - Tags:

$Suche_Das = '~$SuchWort(?![^<]*</a>)~i';

Methode 2:

// - Suche NICHT in Verweisen (A -Tags) - auch nicht im Veweistext zwischen den <A...> </A> - Tags:

$Suche_Das = '~<a.*?</a>(*SKIP)(*F)|$SuchWort~i';

// - Suche NICHT in irgend einem HTML-Tag:

$Suche_Das = '~<.*?>(*SKIP)(*F)|$SuchWort~i';

[*? = Suche so kurz wie möglich - d. h. jeden Tag einzeln nehmen,
und nicht den ersten bis zum letzten Tag im Text als einen einzigen sehen]

// Dann:

$Ergebnis = preg_replace($Suche_Das, $Ersetze_Durch, $HTMLDatei);

Echo $Ergebnis;

Anmerkung:

- Es macht manchmal eine Unterschied, ob man einen komplexen regulären Ausdruck in doppelte "~~" oder einfache '~~' Anführungszeichen setzt.

- Hat man vorher den String auf HTMLEntities gesetzt, muß auch der Ausdruck "<.*?>" in "<.*?>" umgewandelt werden.
- Aber nur dann.

----------------

Ähnlich:

$Suche_Nach = "~<A HREF((?:(?!</A>).)+)$DasHier~i";

Suche nach "<A HREF" gefolgt von etwas, was nicht "</A>" ist (= ersetzbar durch $1), gefolgt von $DasHier;

$Suche_Nach = "~<A HREF((?:(?!</A>).)*)$DasHier~i"; // Sternchen '*' statt Plus '+'

Suche nach "<A HREF" gefolgt von nichts oder etwas, was nicht "</A>" ist (= ersetzbar durch $1), gefolgt von $DasHier;

Seitenbereiche ausblenden

<?PHP if (!($Einblenden)) echo "

Arrays auflösen und Elemente zählen

Arrays auflösen und die Elemente verkoppeln:

if (Irgendwas)

{

// WICHTIG! Parameter-Zähler:
$pz = $pz+1;

if (count($Array) == 2 )

{
// Werte-Zuordnung Einzeln

list($Parameter,$Wert) = $Array;

$Parameter = trim($Parameter);
$Wert = trim($Wert);

echo "\n<BR>\n";

echo "Parameter $pz: $Parameter";
echo "\n<BR> \n";
echo "Wert $pz: $Wert";

echo "\n<P>\n";

$ParameterWert = "$$Parameter = \"$Wert\"";

eval ("\$ParameterWert = $ParameterWert;");

echo "\n<BR> \n";

echo "<U>Wertepaar $pz</U>: $Parameter: $ParameterWert ";

}

Ergibt:

Wertepaar 1: Etwas = soviel

Wertepaar 2: EtwasAnderes = soviel mehr

etc.

Java-Scripte

Zurück zum Script-DB Eingang

http://project-icarus.de/erleuchtet/Script-DB/index.htm

Browser

LocalStorage

Seit HTML5 werden Cookies durch den lokalen Datenspeicher "localStorage" abgelöst.

Diese läßt sich mit JavaScript auslesen und bearbeiten:

1) Feststellen, wieviele Einträge sich in für diese Website in der Datenbank befinden:

var count = window.localStorage.length;
alert(count);

2) Einzelne Einträge für diese Website anzeigen:

for(var y = 0; y < count; y++)
{
var Zuordnung = window.localStorage.key(y);
alert(Zuordnung);
var Inhalt = window.localStorage.getItem(Zuordnung);
alert(Inhalt);
}

4) Eintrag hinzufügen:

window.localStorage.setItem(Zuordnung, Inhalt);

5) Eintrag Löschen:

window.localStorage.removeItem(Zuordnung);
window.localStorage.removeItem(Inhalt);

Als Anwendungsbeispiel:

http://project-icarus.de/kalender/js-kalender_frame.html

Browser-Abfragen

Browserweichen

// ----------------------

// Check browser

// NS4 = Netscape 4x
// IE5 = MSIE ab 4
// OPR = Opera 5, 7
// MZL = Mozilla (nur)
// NEU = Netscape ab 6, Mozilla, MSIE ab 5, Konqueror 3 (Linux), Opera 7

// 'Layers' NUR in NS 4
// IE5 prüft auch AOL 4 / 6
// Opera 7 oft anders als Opera 5/6(~MSIE4)

// ----------------------

var NS4 =var IE5 = (document.all);
var OPR = (window.opera);
var MZL = ((document.getElementById) && (!document.all) && (document.documentElement));
var NEU = (document.getElementById)

// ----------------------

z.B.

if (document.getElementById)
{
alert('Alles klar');
}
else
{
alert('Ihr Browser unterstützt diese Funktion leider nicht');
}
}

____________________

ODER:

<script language=javascript>
<!--
netscape = (document.layers) ? 1:0
goodIE = (document.all) ? 1:0
MZL = ((document.getElementById) && (!document.all)) ? 1:0

____________________

Achtung: Inzwischen veraltet, insbesondere nachdem Microsoft Internet Explorer Version 11,
der 'document.all' nicht mehr erkennt.

Einfacher ist es, die fragliche Funktion selbst abzu fragen - beispielsweise, wie oben gezeigt,

if (document.getElementById)

-> wenn sie geht, geht sie.

Ansonsten hier (in JavaScript und PHP)

http://ppfeufer.de/browserweiche/

oder hier:

http://rafael.adm.br/css_browser_selector/

http://raw.githubusercontent.com/rafaelp/css_browser_selector/master/css_browser_selector.js

Netscape - Abfrage

Netscape - Abfrage und Frame-Ausstieg

<script>  </script>

------------------------------

Netscape - Abfrage II

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

</script>

---------------------------

Umgekehrt ein Skript einfach nur durch skriptgeschriebene Kommentare () auskommentieren zu lassen nutzt nichts, wenn der Aufruf die Form "Script SRC=XYZ" hat.

<P>

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

</script>

<P>
Ich bin kein Netscape 4.x!

<P>

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

</script>

<script language="JavaScript" type="text/javascript" src="">http://123.456.com/blahblah.js">


<P>

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

</script>

Netscape Fenstergröße

Netscape- Fenstergröße- Abfrage

Macromedia standard Script zur Netscape- Fenstergröße- Abfrage:

<script language="JavaScript">

</script>

Danach muß sich dann die Bildgröße richten, evtl. über document.write.

Achtung: Bei allen Bilder, die mit JavaScript in Seiten eingebunden werden,
müssen immer Angaben zu Height und Width vorhanden sein!

Ansonsten kann es zu Problemen mit dem Script kommen.

Fensternamen online festlegen und feststellen

Neuen Fensternamen online festlegen und feststellen

Stefan Münz 8

<html><head><title>Test</title>
<script type="text/javascript">

</script>
</head><body>
<a href="javascript:Fenstername()">Name des Fensters</a>
</body></html>

Vollbildzwang

Browser-Fenster Bildschirmfüllend darstellen

<script language ="JavaScript">

self.moveTo(0,0);self.resizeTo(screen.availWidth,screen.availHeight);

</script>

Außerdem:

var Bildschirmbreite = screen.width;

var Bildschirmhoehe = screen.height;

var Farbtiefe = screen.pixelDepth;

Internet Explorer Favoriten

Internet Explorer - Abfrage: Zu Favoriten hinzufügen

[NetMechanic Home]

JavaScript Tip: Tools Encourage Repeat Visitors

Keep visitors coming back to your Web site by adding a
bookmark link with this simple JavaScript. Visitors browsing with Internet Explorer can add your Web page to their Favorites section
with just one click.

This simple JavaScript code will work in Internet Explorer.

Place this section
inside the <HEAD> section of your page:

<Script Language = "Javascript" Type="Text/Javascript">


</script>

In this script, you're declaring two variables and using them in a function.

* The first variable, urlAddress, ist the address of your Web page.
* The second, pageName, is the descriptive text that you want visitors to see when they refer to their Favorites list.
* Netscape Navigator doesn't support the window.external property, so we check first to see if the visitor is using a browser that does. If their browser doesn't support the function, they see an alert box instead.
* The function, addToFavorites, tells the browser to save both variables so the visitor can add the information to their Favorites section.
* Remember to replace the variable names with your own page URL and description.
*
Use The Function In The BODY Section

Once you have your function set up, you can refer to it anywhere in the
<BODY> section of your document. The most obvious place to put it is a few
lines before the content of your document.

Reference the function inside a form to get a different look:

Bookmark this page! <INPUT TYPE="button" VALUE="Add Favorite" onClick="addToFavorites()">

Anzeige und Prüfung

Zeichen zählen

Ein bestimmtes Zeichen zählen

Manchmal will man wissen, nicht ob, sondern wie oft ein bestimmtes Zeichen in einem Text vorkommt.

Das folgende Skript zählt die Zahl der Teilstücke, in die eine Zeichenkette an Hand des gesuchten Zeichens zerlegt werden kann und stellt so fest, wie oft es in der Zeichenkette vorhanden ist. Hier: Das Anführungszeichen

var Zeichen = '\"';
var quotes = (((document.forms.Suche.SuchTextEingabe.value.split(Zeichen)).length)-1);
alert (quotes);

// Prüft, ob eine gerade Anzahl vorliegt:
if (!(quotes % 2 == 0))
{
alert ('Bitte die Wortkette mit " abschließen!');
return false;
}

else
{alert ('OK');}

Gerade oder ungerade

JavaScipt Abfrage, ob eine Zahl gerade oder ungerade ist

if(y % 2 == 0) // gerade, inkl. der Null
if(y % 2 != 0) // un- gerade

Die ersten zehn ungeraden Quadratzahlen ab Basis 0:

<script type="text/javascript">

var z = 5; // Zeilenzahl
var i = 0; // Basis Anfang
var x = 0; // Zähler Anfang

while (x < z)
{
y=(i*i);
if(y % 2 != 0) // un- gerade
{
document.write("<br>" + i + "*"+ i +" = " + y);
x = x + 1;
}
// i = i + 1;
i++;
}

</script>

Ergibt:

1*1 = 1
3*3 = 9
5*5 = 25
7*7 = 49
9*9 = 81

----

<script type="text/javascript">

document.write("0-10: Gerade oder Ungerade?<P>");

for (var i = 0; i < 11; i++)
if (i % 2 == 0) // == IF GERADE! incl. Resultat 0!
{
document.write(i);
document.write(" - ");
}

document.write("<P>");

for (var i = 0; i < 11; i++)
if (i % 2 != 0) // == IF UN-GERADE! wg. anfang 0
{
document.write(i);
document.write(" - ");
}

</script>

Ergibt:

0-10: Gerade oder Ungerade?
0 - 2 - 4 - 6 - 8 - 10 -
1 - 3 - 5 - 7 - 9 -

Zahl oder nicht Zahl

Schreibt man die Anweisung 1+1, dann ist das Ergebnis entweder 2 oder 11, je nachdem, ob JavaScript die 1 als Zahl (Number) oder Zeichen (String) interpretiert.

var Eins = "1";
// var Eins = "01";
// var Eins = 1;

Die Variable sicher als Nummer erkennen:

PlusEins= Number(Eins)+1;
// oder
PlusEins= parseInt(Eins)+1;

// Beseitigt als Rechenoperation übrigens auch eine führende Null

Und das Ergebnis wieder in einen String (eine Zeichenkette) konvertieren:

PlusEins= PlusEins.toString();

// Achtung: Jede Rechenoperation in JavaScript prüft, ob die Faktoren Zahlen sind, und kann deshalb zur Prüfung benutzt werden, bzw. um diese umzuwandeln.

--------

Prüft, ob die Eingabe eine Zahl ist oder nicht:

<html>
<head>
<title>check</title>
</head>
<script language="JavaScript">
function pruefen(){
Eingabe=document.test.zahl.value;
Angabe=Number(Eingabe);
if(isNaN(Angabe))
{
alert(Eingabe + " ist keine Zahl!"); ;
}
else { alert(Eingabe + " ist eine Zahl!");
}
}
</script>
<body>
<form action="" name="test" id="test">
<input type="text" name="zahl" value="123">
<input type=button value=Test Onclick="pruefen();">
</form>
</body>
</html>

Zeichen trimmen

Auch in JavaScript lassen sich Zeichenfolgen trimmen - d.h. Leerzeichen am Anfang und Ende beseitigen:

function trim(str)
{
return str.replace(/^\s+|\s+$/g,"");
}

var Getrimmt = trim(Zeichenfolge);

Quelle: Netz

Online oder Offline

Prüft, ob die Seite online oder offline geladen wurde:

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

</script>

</HEAD>

OnmouseOver Alert

OnmouseOver Alert - Fenster

<br>
<font face="Times">For additional information about the Council contact:
<b><br>
<a href="#" false;" onmouseover="alert('You do know this page is a joke? Sure you do!');" onclick=";return">United States Council on Problem Vacationing</a></b></font></p>

OnClick Alert

Verhindert falsches Herunterladen bzw. das Öffnen im Browser

<UL>

<LI><A HREF="TEXT2.txt" onMouseOver="window.status='Bitte mit rechter Maustaste aus dem Kontextmenue herunterladen'; return true" onMouseOut="window.status=''; return true" onClick="alert ('Zum Herunterladen bitte die rechte Maustaste verwenden'); return false">Text-File</A>

</UL>

Bildname und Text anzeigen

Wie lassen sich zu einem Bild automatisch Informationen anzeigen, zum Beispiel der Name des Bildes und / oder ein erläuternder Text? Hier zum Beispiel in einer Diaschau. Die Textausgaben lassen sich mit CSS dem Layout unsichtbar anpassen.

<HTML>
<HEAD>

<SCRIPT language="JavaScript">

var DiaschauSpeed = 5000

var Pic = new Array()

Pic[0] = 'image_1a.gif'
Pic[1] = 'image_2a.gif'
Pic[2] = 'image_3a.gif'
Pic[3] = 'image_1a.gif'

var Btxt = new Array()

Btxt[0] = 'Erstes Bild'
Btxt[1] = 'Zweites Bild'
Btxt[2] = 'Drittes Bild'
Btxt[3] = 'Schleife'

var t
var j = 0
var p = Pic.length
var preLoad = new Array()

// alert (p);
for (i = 0; i < p; i++)
{
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}

function runDiaschau()
{
if (j < 0) j=(p-1);
if (j > p-1) j=0;
document.images.Diaschau.src = preLoad[j].src;
j = j + 1;
t = setTimeout('runDiaschau()', DiaschauSpeed);
}

function TextAnzeigen ()
{
if (j < 1) j=p-1;
var txt = j + ": " + Btxt[j-1];

window.document.Anzeige.Text.value = txt;
window.setTimeout("TextAnzeigen()", 550);
}

function BildNrAnzeigen ()
{
if (j < 1) j=p-1;
var bld = "Bild " + j;

window.document.BildNr.Bild.value = bld;
window.setTimeout("BildNrAnzeigen()", 550);
}

function ReRunDiaschau()
{
DiaschauSpeed = 5000;
}

function runBck()
{
DiaschauSpeed = 30000;
j = j - 1;
document.images.Diaschau.src = preLoad[j-1].src;
t = setTimeout('ReRunDiaschau()', DiaschauSpeed);
}

function runFwd()
{
DiaschauSpeed = 30000
if (j > p-1) j=0;
j = j + 1;
document.images.Diaschau.src = preLoad[j-1].src;
t = setTimeout('ReRunDiaschau()', DiaschauSpeed);
}

//-->
</SCRIPT>

<TITLE>Diaschau</TITLE>

</HEAD>

<BODY bgcolor="#C0C0C0" onload="runDiaschau(); window.setTimeout('TextAnzeigen()', 550); window.setTimeout('BildNrAnzeigen()', 550);">

<P>

<HR>
<TABLE ALIGN=CENTER>
<TR>
<TD ALIGN=CENTER VALIGN=BOTTOM><IMG SRC="image_1.gif" NAME='Diaschau'></TD>
</TR>
</TABLE>
<P>
<HR>
<TABLE ALIGN=CENTER width="" border="1" cellspacing="4" cellpadding="4" bgcolor="#408080">
<TR>
<TD><form name="Anzeige" action=""> TEXT:
<input type="text" size="20" name="Text" value="Einsatz 00:00">
</form></TD>

<TD ALIGN=CENTER><A HREF="javascript:runBck();" onmouseover="window.status=' Eine zurück ';return true;" onmouseout="window.status=''"; return true;" ><IMG SRC="back.gif" ALT=" Eine zurück " Title=" Eine zurück "></A></TD>
<TD align="center">
</TD>
<TD ALIGN=CENTER><A HREF="javascript:runFwd();" onmouseover="window.status=' Eine vorwärts ';return true;" onmouseout="window.status=''"; ><IMG SRC="next.gif" ALT=" Eine vorwärts " Title=" Eine vorwärts "></A></TD>
<TD><form name="BildNr" action=""> BILD:
<input type="text" size="20" name="Bild" value="Einsatz 00:00">
</form></TD>

</TR>
</TABLE>
</CENTER>
</BODY></HTML>

Spalten in Javascript

Automatische Spalten in Javascript

- Es heißt zwar, noch gäbe es keine Möglichkeit, HTML- Inhalte automatisch in Spalten darzustellen.
- Unter bestimmten Umständen geht es aber doch:

<HTML>
<HEAD>

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

</script>

</HEAD>
<BODY >
<P>

Mit dem alten, viel geschmähten Tabellen- Layout lassen Serien- Inhalte,
die als Array vorliegen, mit Hilfe von JavaScript automatisch in Spalten darstellen -
entweder mit einer festen Spaltenzahl -

oder mit variabler Spaltenzahl in Abhängigleit von der jeweiligen Fensterbreite:

<P>

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

</SCRIPT>

<P>

Das Ergebnis läßt sich, da in JavaScript, nicht speichern. Es eignet sich gut für die Darstellung temporärer Ergebnisse.

<P>

Für ein dauerhaftes Ergebniss ließe sich wohl ein ähnliches Script in PHP schreiben.

<P>

</BODY>
</HTML>

Referrer

referrer (Herkunft)

Speichert die URL, von der aus die aktuelle Seite aufgerufen wurde (geht also in der "history" des Browser genau einen Eintrag zurück). Z.B. Sie kommen von:

Und auch hier der passende Code:

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

</script>

Dateiname

(Namen der Datei)

Datei-Namen ausgeben:

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

</script>

Fenstername

name (Namen des Fensters)

Fenster-Namen ausgeben:

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

</script>

Adresse

URL oder location (Adresse)

Speichert (immer nur) die vollständige (!!!) Adresse des aktuellen Dokuments.

Ähnlich: URL, Pathname, href

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

</script>

Titel

title (Titel der Datei)

Hier wird der Titel der HTML-Datei rein gespeichert. So haben Sie bspw. die Möglichkeit, diesen dynamisch zu ändern oder einfach nur auszugeben.

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

</script>

(aber nur, wenn der Titel im Dokument VOR dem Script steht!)

---

Seiten-Titel per Default in die Statuszeile:

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

</HEAD>

Alert

Alert - Fenster

<A HREF="1.htm" onClick="alert (' Hier geht's \n zur ersten Seite '); return true;">

* Wichtig: ' Text ' in ' '

* return false blockiert die Weiterleitung / beendet die Aktion (hier: Verweis wird nicht aufgerufen).

* \n = Zeilenumbruch

Auch: <SCRIPT LANGUAGE="Javascript">alert ('LALALA')</SCRIPT>

Zuletzt Aktualisiert

'zuletzt aktualisiert' Anzeige:

<body>
<script language="Javascript">
document.write( "Diese Seite wurde " + document.lastModified + " zuletzt aktualisiert.");
</script>
</body>

document.writeln() bewirkt einen Zeilenumbruch nach der Zeile:

document.writeln( "Diese Seite wurde " + document.lastModified + " zuletzt aktualisiert.");

Oder eine Leerzeile:
document.writeln();

lastModified (letzte Änderung)

----

Oder:

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

</script>

Die Ausgabe sieht ungefähr so aus: Letztes Update: ????????????????????

Allerdings gibt das nur das letzte Speicherdatum wieder; das sagt über die Aktualität des Inhalts nichts aus. Richtiger wäre also: Letzes Speicherdatum.

----

Oder:

<body>
<a href="javascript:alert(document.lastModified)"><b>Letzter Update</b></a> </body>

Frames Verlassen

In Mein Frame

Das folgende Java Script verhindert, daß Seiten aus einem Frameset im Netz vereinzelt dargestellt werden.

Es prüft, ob eine Seite im Netz vereinzelt dargestellt wird, und lädt sie ggf. im eigenen Frameset neu- genauer: in ein zweites Frameset, das die selben Dimensionen haben sollte wie das Original.

Diesen Code in den HEAD- Bereich jeder Seite einfügen, die immer im eigenen Frameset angezeigt werden soll:

<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">

meineseite = document.URL;
if (top.location == self.location && self.location.protocol == "http:")
{top.location.href="TestmitJava.htm?" + meineseite};

</script>

Der Quellcode für das zweite Frameset lautet dann:

<html>
<head>
<title>Frameset 2</title>

<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">

origURL = parent.document.URL
contentURL = origURL.substring(origURL.indexOf('?')+1, origURL.length)

document.write('<frameset cols="20%,80%"><frame src="links.html" name="links"><frame src="' + contentURL + '" name="rechts"><\/frameset>')

</script>

</head>

</html>

- Läßt sich im IE nur online prüfen.

- Verhindert natürlich auch dann, daß die Seite außerhalb des Rahmens geöffnet wird, wenn der Betrachter das will. Es sei denn, JavaScript ist abgeschaltet.

- Verhindert auch, daß die Seite aus fremden Framesets herausgeboxt werden kann (No Frame 1-5).

- Offline ist es jedoch möglich.

Von http://www.netmechanic.com/

Frameset-alert

Frameset - Alert

(falls das Frame irgendwo als Unterseite geladen wird )

<script language = "javaScript">

</script>

oder ein Link:

<A HREF="" Target="_top">Raus aus dem Frame!</A>

No Frame 1

Frame - Killer I

<HEAD>

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

</script>

Setzt sich selbst ins obere Fenster, sprengt ein Frameset.

No Frame 1b

Frame - Killer II

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

</script>

oder

<script language="JavaScript">

</script>

Dieses Script überprüft, ob die einzelne Seite außerhalb des Framesets geladen worden ist, . wenn ja, lädt der Browser das stattdessen das Frameset 'frames.html'

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

</script>

Dieses Script überprüft, ob die aktuelle Seite zuoberst in der Browser- Hierarchie ist. Wenn nicht, dann setzt sie die Seite auf die höchste Ebene und zeigt sie als die aktuelle Seite im Browser an.

Achtung! Immer hinter "if" ein Leerzeichen; sonst Fehler in Netscape

No Frame 1c

Frame - Killer III

<script language="JavaScript">

</script>

Wenn die Seite aufgerufen wird, wird überprüft, ob ein Frameset vorhanden ist. Wenn ja, wird die Seite darübergelegt.

Alternativ:

<script language="JavaScript">

</script>

------------

Alternativ:

(Auch für den Fall, daß die Frame-Seiten selbst woanders verlinkt oder beispielsweise in Suchmaschinen angezeigt werden)

Überprüft, ob die Seite in einem fremden Frame geladen ist, und fügt in diesem Fall eine Meldung im Dokument ein:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
if (parent != null && parent != self)
{
var host=parent.location.hostname;
if (host != "http://www.meinedomain.de")
{
document.write("<p align=center>")
document.write("Ursprünglich " + "<a href=\""+location.href+"\" target =\"_parent\">" + " Seitenname (www.meinedomain.de) </a></p>")
}
}
</Script>

Oder: Überprüft, ob die Seite in einem fremden Frame geladen wurde, und lädt die Seiten im eigenen Frameset:

<HTML>
<HEAD>

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

function init()
{
if (parent != null && parent != self)
{
var host = parent.location.hostname;
if (host != "http://www.meinedomain.de")
{
top.location.href = self.location.href;
}
}
}

</Script>
</HEAD>
<BODY onLoad="init(); self.focus();">

Letzteres verhindert, daß man erst in den Frame klicken muß, um ihn zu scrollen.

---------

No Frame 2

Frame - Vollbildzwang I

Verhindert die Darstellung eigener Seiten in einem Frame ( Erzwingt Vollbild )

<HEAD>
.
.
<SCRIPT LANGUAGE= "Java Script">

</SCRIPT>

</HEAD>

Achtung! Immer hinter "if" ein Leerzeichen; sonst Fehler in Netscape

No Frame 3

Frame - Vollbildzwang II - Opera

Verweis <click> mit Java aufrufen!

Aus: Stefan Münz 8;

wg. Opera, aber auch sonst interessant wg. Verweis aufrufen

<html> <head> <title>Seitenanzeige in Frames verhindern</title>
<script type="text/javascript">
 </script>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#AA5522" vlink="#772200" alink="#000000">
<a name="befreien" href="seitenanzeige_opera.htm" target="_top"></a>
<h1>Keine Chance für Schaufenster-Anbieter!</h1>
</body>
</html>

Erläuterung:

Bei Opera 5.12 haben Sie keinen Zugriff auf die oberste Fensterebene 'top', wenn sich diese nicht zur eigenen Domain gehört. Sie können jedoch über einen Umweg auch diesen Browser dazu veranlassen, das Frameset zu sprengen. Dazu müssen Sie dafür sorgen, dass ein Verweis mit der Eigenschaft target="_top" angeklickt wird:

Innerhalb der Seite befindet sich ein unsichtbarer Verweis (Verweis ohne Verweistext) namens befreien. Dieser Verweis besitzt als Zielfenster _top und als Verweisziel die Seite selbst. Wird nun beim Laden der Seite festgestellt, dass diese sich innerhalb eines fremden Framesets befindet, so verwenden alle Browser außer Opera das oben beschriebene Script. In Opera dagegen wird lediglich der Eventhandler onload initialisiert. Der Aufruf window.onload=opera_befreien hat die Aufgabe, nach dem Laden der Seite die Funktion opera_befreien() aufzurufen. Innerhalb der Funktion passiert nichts weiter, als dass der Verweis mit der Methode click() angeklickt wird. Diese undokumentierte Methode funktioniert mit allen Identifikationseinstellungen von Opera. Das Verweisziel lädt sich in die oberste Fensterebene und sprengt das Frameset.

No Frame 4

Frame - Vollbildzwang III

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">

<BODY OnLoad="bild()" ...>

Auch nicht schlecht!

---

Variante:

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">

<BODY OnLoad="bild()" ...>

Navigation und Fenster

Drop-down Menü 1

OnClick Drop-down Menü 1

(size="x" mach aus einem Dropdown-Feld ein Auswahlfeld!)

<script language="Javascript">


</script>

-----------

<P>

<FORM name="form" action="">
<select name="auswahl" size="3" onchange="auswert(form);" >
<option>Goethe</option>
<option>Schiller</option>
<option>Menü</option>
</select>
</FORM>

<P>

Drop-down Menü 2

OnClick Drop-down Menü 2

<select id="xyz-quickNav" name="xyz-quickNav" onchange="window.location.href=this.options[this.selectedIndex].value">
<option value="Diese Seite">Select a page..</option>
<option value="Home">http://www.xyz.com/">Home Page</option>
<option value="xyz">http://support.xyz.com/">xyz Support</option>
<option value="FREE">http://www.xyz.com/webtools/">FREE Web Tools</option>
<option value="Web">http://www.xyz.com/webhosting/">Web Hosting</option>
</select>

von http://www.bravenet.com/

WindowOpen

WindowOpen

Die allgemeine Syntax der Methode "window.open()" (öffnet ein extra - Fenster) ist:

fenster= window.open("url [der anzuzeigenden Seite]","ziel [=Name des Fensters im TARGET] ","merkmale[optional: -height,width- in pixel sowie -status, resizable- u.a.m ]")

var new_win=window.open(http://www.irgendwo.de,"Neues Fenster",'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=x,height=y',screenX=0,screenY=0');

// Statt 'screenX=0,screenY=0, besser
// left=0,top=0,

Neues Fenster in 30 Sek

Neues Fenster in 30 Sek

Internet Magazin 1-2000

<script language="Javascript">

function fenster_auf()
{
window.open('start.htm', 'screenX=0,screenY=0,toolbar=yes,scrollbars=yes,resizable=no,fullscreen=no,status=yes,width=200,height=40');

// Statt 'screenX=0,screenY=0, besser
// left=0,top=0,

// Zusatz: Verdeckt
// Focussiert Hauptfenster

self.focus();
}
</script>

<Body onLoad="timerOne=window.setTimeout('fenster_auf()',30000);" BGCOLOR="#000000" TEXT="#f000f0" LINK="#0000ff" VLINK="#ff00ff">

öffnet nach 30 Sekunden ein neues Browserfenster im Fenster

Öffnet erst nach Bestätigung

Öffnet nach Bestätigung

prompt() läßt Dialog-Text erscheinen: "OK" und "Abbrechen"
confirm() ergibt Dialog- Box OK / Abbrechen

<html>
<head>
<title>Oh Oh</title>

<script type="text/javascript">

</script>

</head>

<body>

Öffnet bei Bestätigung die neue Seite 'ferkel.htm'

Kürzer:

if (confirm('Soll das Frameset geladen werden ?'))
{top.location.href=yxz};

Fenster automatisch schließen

Popup- Fenster automatisch schließen:

Die Angabe:

<Body OnUnload="extramenu.window.close();" Onload="extra...

schließt das Zusatzfenster, wenn das Hauptfenster geschlossen wird.

Voraussetzung:
"extramenu" ist als Variable bekannt durch

function Fensterauf()
extramenu = window.open(url, ziel,...)

- - - -

Oder, wenn vorgesehen:

function menuweg()
if (window.extramenu)
{
window.extramenu.focus();
window.extramenu.close();
}

<Body OnUnload="menuweg();" Onload="extra...

*********

Die Angabe:

<Body OnBlur="self.close();"...

im Extrafenster schließt dieses, sobald es verlassen wird.

<Body onLoad="setTimeout('self.close();',30000);"

Schließt das Fenster nach 30 Sekunden.

<A HREF="javascript:window.close();" >Fenster zu!</A>

schließt ein Fenster manuell.

---------

function HauptfensterZu()
{
if (opener != null)
{
if(opener.closed == false)
{
opener.focus();
opener.close();
}
}
}

Schließt das Hauptfenster, wenn es noch offen ist

---------

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

</SCRIPT>

<body ... OnLoad="self.focus();" OnClick="FensterZu();">

Schließt das Zusatzfenster auf Anklick, wenn das Hauptfenster bereits geschlossen wurde (versuchsweise: OnFocus)

Hintergrund: Normalerweise müßte man nur den Namen des öffnenden Fensters abfragen; das wird aber von manchen Browsern abgesehen vom MSIE verweigert, teilweise auch offline mit einem "permission denied" - Fehler, der sich nicht vernünftig abfangen läßt. Daher kommt diese Abfrage an das Ende der Reihe.

Umgehung: "opener.length" gibt dagegen interessante Werte zurück; das öffnende Fenster beispielsweise den Wert "0" (also 1), bei anderen, oder späteren, je nach Konfiguration, beispielsweise Rahmen, den Wert 4.

---------

[dependent= yes|no gilt nur für Netscape4]

Achtung: Für Netscape4 gilt OPENER nur, wenn das Fenster auch mit OPEN geöffnet wurde; im IE auch mit HREF.

----------

Damit ein Zusatzfenster nicht alleine geladen wird, gilt folgendes:
(Fängt die Fehlermeldung "Ist null oder kein Objekt" ab)

// Self Close

if(! window.opener)
{
// alert ("No Opener")
stoperror();
// self.close();
}

// Fehlermeldung

function stoperror()
{alert("Allgemeiner Fehler. Bezugsseite nicht gefunden.\n\nEntweder ein Programmfehler, oder das Fenster\nwurde nicht von der Bezugsseite geladen.\n\nBitte in diesem Fall das Fenster schließen und von der Hauptseite aus neu laden.");
return true;
self.close();
}

// To test break below:
window.onerror=stoperror;

Achtung: stoperror immer VOR das abzufangende Script setzen!

---

Popup und Target

Popup + Target - Öffnet ein neues Fenster mit und ohne JavaScript

Internet Magazin 10/01

<a href="seite.htm" target="_blank"
onClick=window.open('seite.htm','fenster','width=600,height=450'); return
false">Link</a>

Popup ohne Target

<a href="javascript:void(0)" onclick="window.open('http://www.blah.com',blah.com','width=200,height=200')">
Öffne ein neues Fenster
</a>

Neues Fenster mit und ohne JavaScript

Öffnet ein neues Fenster mit und ohne JavaScript:

<a href="seite.htm" target="fenster" onClick=window.open('seite.htm','fenster','width=600,height=450'); return false">Link</a>

oder

<A HREF="hilfe.html" TARGET="Hilfe" onClick="window.open('hilfe.html','Hilfe', 'toolbar=no,location=no,scrolling=yes, directories=no,status=yes,menubar=no, scrollbars=yes,resizable=yes,width=480,height=480')"> Hilfe</A>

Wenn kein Frame gleichen Namens (hier "Hilfe") existiert, öffnet ein neues Fenster

Neue Seiten im eigenen Fenster öffnen

Neue Fenster im selben Target (Zielfenster) öffnen lassen:

<HEAD>

<script type="text/javascript">

</SCRIPT>

...

</HEAD>

Seiten im selben Fenster öffnen

Feststellen, ob eine Seite auf sich selbst verweist:

Da moderne Browser Verweise grundsätzlich im neuen Tab öffnen, ist es manchmal wichtig zu wissen, ob ein Verweis innerhalb einer Seite liegt (bzw. auf einen Anker auf der eigenen Seite verweist) oder auf eine andere Seite mit der selben Adresse, um dann mit Target = "_self" oder "_top" das öffnen des Verweises in der selben Registerkarte bzw. im selben Fenster zu erzwingen.

Achtung: Wird eine Seite online aufgerufen, beginnen für JavaScript ALLE Verweise mit http!

<SCRIPT type="text/javascript">

</SCRIPT>

Navigation im Extrafenster

Navigation im Extrafenster

Navigationsleiste als Fernbedienung im Extrafenster öffnen lassen mit einfachem Target plus Größenangabe. Siehe dazu http://www.swatch.com

<a href="seite.htm" target="_blank"
onClick=window.open('seite.htm','fenster','width=600,height=450'); return
false">Link</a>

Die Angabe:

<Body onBlur="self.focus();" ...

in der Navigationsseite verhindert, daß sie vom Hautfenster verdeckt wird.

Achtung!

Target="NAME" - öffnet alle Seiten im Fenster NAME - nach dem ersten Öffnen aber versteckt (kein Focus).

Target="_blank" - öffnet Fenster NICHT mehr versteckt

Weiterführend:

http://project-icarus.de/erleuchtet/hilfe/fensternavi2.txt

http://project-icarus.de/erleuchtet/fw/fw-index.htm#FN

Rückwärts zählende Uhr zur Weiterleitung

Rückwärts zählende Uhr zur Weiterleitung

<HTML>
<HEAD>

<META HTTP-EQUIV="Refresh" CONTENT="10; URL=">http://members.tripod.com/1.htm">
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD> <BODY BGCOLOR="#6699CC"> <CENTER>
<H1>Rückwärts zählende Uhr zur Weiterleitung</H1>
<FORM NAME="form1">
<P>
<FONT SIZE="3" FACE="Geneva, Arial" COLOR="#FF0000"> <B> You are being redirected in </B> <INPUT TYPE="text" NAME="clock" SIZE="2" VALUE="10"> <B> seconds. <BR>
If you don't want to wait click <A HREF="http://members.tripod.com/1.htm" onMouseOver="window.status='Click here to continue'; return true"> here</A> . </B> </FONT> <BR>
</FORM>
</BODY> </HTML>

Zufällige Hintergrundfarbe

Zufällige Hintergrundfarbe

<HEAD>

<script language="JavaScript">



</script>

</HEAD>

<BODY BGCOLOR=#ffffff>

<script language="JavaScript">



</script>
<P>
<I>(Reload to get another background color)</I>
<P>

Scrollen ohne vorherigen Klick in Frame

Scrollen ohne vorherigen Klick in Frame- Seiten

<body... onload="self.focus();">
verhindert, daß man erst in den Frame klicken muß, um ihn zu scrollen
(Macht die Seite zum Hauptfenster)

(Internet Magazin 6/01)

Vorwärts mit Formular

Vorwärts mit Formular

<FORM NAME="buttonbar">
<INPUT TYPE="button" VALUE="Back" onClick="history.back();break;">
<INPUT TYPE="button" VALUE="JS- Home" onClick="location='script.htm'">
<INPUT TYPE="button" VALUE="Next" onCLick="history.forward();break;">
</FORM>

Wichtig scheint das 'break'; (grundsätzlich bei 'location.href' oder 'history.back / forward')

Vor - Zurück

<form method="post">

<input type="button" value="Zurueck"
onclick="history.go(-1);return true;">

<input type="button" value="Vorwaerts"
onclick="history.go(1);return true;">

</form>

-------

JavaScript:history.go(0)

ruft die selbe Seite noch einmal auf (reload, aktualisieren)

Tabellenfeld-Verweis

Tabellenfeld - Javascript - Verweise

<P>
<CENTER>
<TABLE BORDER CELLPADDING="2" ALIGN="Center">
<TR>
<TD onClick="javascript:self.location.href='#Here';" >Javascript-Tabellenfeld-Link</TD>
<TD onClick="javascript:self.location.href='#Here';" ><BR>
 Click here tab<BR>
 </TD>
</TR>
</TABLE>
</CENTER>
<P>

--------

<BR>
<BR>
<A NAME="Here">Go Here</A> </B>
</BODY></HTML>

Internet Magazin 6/05 S. 31 ff

Verweise in JavaScript

Verweis ohne Ziel, nur zum Ausführen einer Javascript-Funktion:

------

<A HREF="javascript:history.back()">

(Eine Seite Zurück)

Hier OHNE 'Onclick'

Nur "javascript:" (bei Verweisen)

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:
<a>
<area>

---

Reine JavaScript - Verweise sind zwar aktiv, wandeln den Mauszeiger aber nicht in die Hand um (zeigen ihn nicht an) und läßt auch jeden anderen Hinweis auf einen Link vermissen (nicht unterstrichen):

"<B><A OnClick="javascript:self.location.href='weiter.htm' ;"><FONT COLOR=#0000ff>

WEITER

</FONT></A></B>"

*****

Ähnlicher Effekt mit CSS:
(verhindert nur den Unterstrich)

"<B><A STYLE="text-decoration:none;" HREF="#weiter"><FONT COLOR=#0000ff>

WEITER

</FONT></A></B>"

oder für die ganze Seite mit

<style type="text/css">

</style>
</HEAD>

Gegensinnige Schleifen

Vorwärts und Rückwärts zählen und aktivieren

Hin und wieder soll in einer Funktion ein Element immer nur das nächste Element aktivieren, was unter Umständen bei einer normalen for / y++ -Schleife aber dazu führen kann, daß die Schleife grundsätzlich von 0-y durchlaufen wird und erst beim letzten Element stehen bleibt.

Das Gleiche gilt , wenn man die Schleife rückwärts durchläuft und jedes Element das vorige aktivieren soll - dann bleibt die Schleife immer erst bei 0 stehen.

Die Lösung: Die Schleifen gegensinnig laufen lassen: Die Vorwärtsschleife rückwärts, die Rückwärtsschleife vorwärts:

// Bei document.Element.length=3 existieren die Elemente:
// Element[0], Element[1], Element[2]

function Vorwaerts()
{

var Menge = document.Element.length;
// alert("Zahl der Elemente: " + Menge); // Menge = 3

var MaxVw = (Menge-1); // 2
var MinVw = (0-1); // -1

for (var y = MaxVw; y > MinVw; y--) // y=2,1,0
{
next = (y+1); // next(2, 1, 0)=>3, 2, 1

if ( document.Element[y].aktiv ) // Prüft Element[2], [1], [0]
{

if ( document.Element[next] ) // Prüft Element[3], [2], [1]

{aktiviere das nächste Element (document.Element[next]);}

// Prüft von oben nach unten
// - bleibt bei y = 2 (wenn Element[2] aktiv) stehen ( Element[3] existiert nicht)
// - aktiviert bei y = 1 (wenn Element[1] aktiv) Element[2]
// und bleibt stehen, da als nächstes (bei y=0) Element[0] geprüft wird (=inaktiv)
// - aktiviert bei y = 0 (wenn Element[0] aktiv) Element[1]
// und bleibt stehen, da die Schleife beendet ist.

}
}
}

Andersherum funktioniert es umgekehrt - Max und Min beachten!

function Rueckwaerts()

{
var Menge = document.Element.length;
// alert("Zahl der Elemente: " + Menge);

var MaxRw = (Menge+0);
var MinRw = (0+0);

for (var y = MinRw; y < MaxRw; y++)
{
next = (y-1);

if ( document.Element[y].aktiv)
{

if ( document.Element[next])
{Aktiviere das vorherige Element (document.Element[next]);}

}
}
}

JavaScript Weiterleitung

Automatische Weiterleitung mit JavaScript

von Seiten

<SCRIPT LANGUAGE="Javascript">

</SCRIPT>

von Seiten

<SCRIPT LANGUAGE="Javascript">

</SCRIPT>

von bestimmten Verweisen

<SCRIPT LANGUAGE="Javascript">

</SCRIPT>

Ein (Frame-) Fenster Zurück

Ein Fenster Zurück

Öffnet das letzte FENSTER erneut:

<a href="javascript:history.back()"> < Zurueck </a><br>

oder:

<INPUT TYPE="button" VALUE=" < Zurueck "onClick="history.back()">

Mit (default)- URL kombinieren:

<A Href="x.htm" onClick="history.back()"> Zurück </A>

geht nicht (es öffnet im Zweifelsfall x.htm), Widerspruch; Besser if- Funktion bauen.

Evtl. : <a href="javascript:history.back()"> < Zurueck </a><NOscript>
<A Href="untitled1.html"> HIER </A></NOscript>

<a href="javascript:history.go(-2)"> < 2Zurueck </a><br>

--------

window.back()

Entspricht bei normalen Seiten einem Klick auf den "Zurück"-Button. Bei Frames wird jedoch - anders als bei history.back() - die letzte besuchte Seite aufgerufen, die NICHT zum Frame-Set gehörte.

<a href="javascript:window.back();">Zurück</a>

Frame - Steuerung durch Buttons

Nachträgliche Frame - Steuerung durch Buttons -
genial und nicht von mir- aber verändert.

http://project-icarus.de/erleuchtet/autostyle/_frameschalter/frameschalter.htm

FrameSet.html

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>

<FRAMESET ROWS="*,32" name="ButtonFrame" border="4">
<FRAMESET cols="30%, 70%" name="SeitenFrame" border="4">
<FRAME SRC="menu.htm" NAME="links" MARGINWIDTH="10" MARGINHEIGHT="14">
<FRAME SRC="index.htm" NAME="rechts" MARGINWIDTH="10" MARGINHEIGHT="14">
</FRAMESET>
<FRAME SRC="schalter.htm" NAME="unten" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="No" NORESIZE>
</FRAMESET>

<NOFRAMES>
<BODY bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<P>
Ihr Browser kann leider keine Frames darstellen.
</BODY></NOFRAMES></HTML>

SchalterSeite.html

<HTML>
<BODY BGCOLOR="#ff0000">
<FORM>
<CENTER>
<TABLE BORDER CELLPADDING="2" ALIGN="Center">
<TR ALIGN="Center">
<TD ALIGN="Center">
<INPUT TYPE=reset VALUE="Navigationsmenü Verbergen" OnClick="ResizeFrame2();"></TD>
<TD ALIGN="Center">
<INPUT TYPE=reset VALUE="Navigationsmenü Anzeigen" OnClick="ResizeFrame1();"></TD>
</TR>
</TABLE>
</CENTER>
</FORM>
<P ALIGN=Center>
<SCRIPT TYPE="text/javascript" LANGUAGE="javascript">
 </SCRIPT>
</BODY></HTML>

- - - - - - - - - -

- Man könnte versuchen die Zeile:

parent.frames.SeitenFrame.cols =

- jeweils zu ersetzen durch: (mit der ID des FRAMESET!!)

parent.document.getElementById("SeitenFrame").cols = "0,*";

- Wenn im Frameset (!) definiert wurde:

<FRAMESET cols="30%, 70%" border="4" id="SeitenFrame" name="SeitenFrame" ...

- - -

Im Netscape 4 geht es nicht; er kann Framesets nicht erkennen, nur Frames.

- Beispielsweise hier zu finden:

http://project-icarus.de/erleuchtet/Script-DB/Script-Datenbank.htm

oder hier:

http://project-icarus.de/erleuchtet/fw/fw-index.htm#CCTurbo

- - - - - - - - - -

Dann lassen sich die Größen von Frames durch schieres Anklicken verändern, wenn das FRAMSET die ID "FRAMSET" erhält:

<FRAMESET rows="30%,*" border="4" id="FRAMSET" name="FRAMSET" ...

In einem Frame definieren:

<SCRIPT TYPE="text/javascript" LANGUAGE="javascript">
 </SCRIPT>

</HEAD>
<BODY BGCOLOR="#ffffff" OnClick="ResizeFrame1();" >

Im anderen Frame entsprechend.

- - -

- Es geht auch in Stufen:

var Vorlage = 30;
var Mehr = 10;
var Abstand = Vorlage;

function ResizeFrame1()
{

if ((Abstand) && (Vorlage <= Abstand) && ((Abstand + Mehr) < 100))
{
Abstand = Abstand + Mehr;
}
else Abstand = Vorlage;

// alert(Abstand);

parent.document.getElementById("FS").rows = Abstand + "%,*";
}

Das Gegenskript muß dann Abstand = Vorlage - 1; liefern

- - -

- GGf. die Frames auf NORESIZE stellen, um Konflikte zu minimieren.

- ACHTUNG! U.U. lassen sich Verweise auf der Seite nicht mehr anklicken!

Man kann auch mehrere Frames verschieben lassen.

Sollte sich insbesondere der Intenet Explorer verweigern, die Reihenfolge probeweise ändern.
Insbesondere: Rows vor Cols.

function ResizeFrame()
{
if (document.getElementById)
{
parent.document.getElementById("TerminFrame").rows = "0,100%,*";
parent.document.getElementById("KalenderFrame").cols = "50%,50%";
}
}

Zweiten Frame durch ersten öffnen

Fremdes Frame-Fenster oder zwei Frames gleichzeitig steuern

if (top != self)
// document.write(' Titel: ');
// document.write(parent.page.document.title);
{
if ((parent.seite.document.title == "Inhalt") && (parent.menue.document.title != "Das Menue"))
// Browser Security: muß beide Titel erkennen
{
// alert('Titel gefunden, wechsle Seite.');
parent.menue.location.href="menue.htm";

// Hier hönnte noch eine weitere neue Seite geöffnet werden
// parent.inhalt.location.href="neues.htm";

}
}

Statt

parent.menue.location.href="menue.htm";

geht auch:

{
var DieSeite = "menue.htm";
this.location.replace(DieSeite);
}

und zwar von der zu wechselnden Frame-Seite aus.

- Mit "Replace", um die Seite zu ersetzen und für die Rückwärts- Bewegung im Browser aus der History zu eliminieren.

Ohne Javascript: Ein neues Frameset öffnen:

<NOFRAMES>
<A HREF="Neues_Frameset.htm" TARGET="_top">Alle Frames neu setzen</A>
</NOFRAMES>

- Jeder Verweis lädt einfach ein neues Frameset, genauso groß.

Body Onload umgehen I

Manchmal möchte man, daß eine Seite, NACHDEM sie geladen wurde, einen bestimmten Befehl ausführt, z.B.an einen bestimmten Ort springt.

Das geht einerseits mit dem <BODY OnLoad...> - Befehl, aber das führt manchmal zu Konflikten im Ablauf.

(OnLoad tritt erst nach dem vollständigen Laden der Seite in Kraft - vielmehr der Skripte)

Eine Lösung ist es, diesen Befehl an das Ende der Seite zu stellen:

<P>

<A NAME="Oben">TEXT</A>

<P>

TEXT

<P>

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

</script>

</BODY></HTML>

Achtung:
- window.location.hash scheint die History-Funktion des MSIE zu stören
- wichtig scheint auch das 'break'; (grundsätzlich bei 'location.href' oder 'history.back / forward')

Body Onload umgehen II

Normalerweise werden Skripte und Funktionen, das (erst) nach dem Laden (oder Entladen) der Seite ausgeführt werden sollen, direkt in das HTML der Seite eingebaut:

<BODY Onload="funktion1();funktion2();" onunload="funktion3();" ...>

Hat man darauf keinen Zugriff oder will man nicht nachträglich sämtliche Seiten ändern müssen, kann man auf einer womöglich schon bestehenden JavaScript-Seite eine ähnliche Funktion aufrufen lassen:

window.onload = funktion1();

Allerdings ist diese Methode unsicher, da erstens die ganze Seite komplett geladen sein muß, bevor die Funktion ausgeführt wird, inklusive der Bilder etc.; und zweitens einige Skript-Elemente nicht angesprochen werden können, da sie schon durchgerauscht sind.

Da hilft manchmal eine absichtliche Verzögerung, hier um 1 Sekunde:

window.onload = window.setTimeout("funktion1();", 1000);

Aber wie immer sollte man bei solchen Sachen möglichst nur redundante Skripte ausführen lassen wollen - also solche, auf die notfalls auch verzichtet werden kann.

Am Sprungziel Öffnen I

Am Sprungziel Öffnen I

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



Zieht Seiten, wenn sie außerhalb eines Rahmens geladen werden, bis zum Anker namens OBEN hoch.

ACHTUNG: braucht immer einen eigenen Auslöser! Nicht mit reload kombinieren!

Am Sprungziel Öffnen II

Am Sprungziel Öffnen II

Frametop

<P>
<SCRIPT language="javascript">
 </SCRIPT>

</BODY></HTML>

Zieht Seiten, wenn sie außerhalb eines Rahmens mit spezifiziertem Titel geladen werden, bis zum Anker namens FRAMETOP hoch, so vorhanden. Muß vor "</ body >" geschrieben werden.

ACHTUNG: braucht immer einen eigenen Auslöser! Nicht mit reload kombinieren!

Am Sprungziel Öffnen III

Am Sprungziel Öffnen III
stoperror immer zuerst

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

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

</script>

</HEAD>

<BODY BGCOLOR="#ffffff" Link=black onLoad="gehezu()">

Öffnet Seiten am Anker "Hallo"

ACHTUNG: braucht immer einen eigenen Auslöser! Nicht mit reload kombinieren!

Wichtig scheint auch das 'break'; (grundsätzlich bei 'location.href' oder 'history.back / forward')

Automatisch die Seite neu laden I

Zwangsweise die Seite neu Laden / no cache

1. <meta http-equiv="pragma" content="no-cache">

2. Mit dem META REFRESH - Tag, auf die eigene Seite gelegt, erzwingt man laufend automatische Updates des Inhaltes, z. B. von Webcam - Bildern.

3. Abstellen der Cache - Funktion ( Seite wird jedesmal neu geladen ): < Meta http-equiv="expires" content="0" > Zwingt den Browser, das Dokument jedesmal frisch vom Server zu laden.

Genauer:

Internet Magazin 10/02

Brower-Cache umgehen

Mit CONTENT="xx" kann man dem Browser mitteilen, nach wie vielen Sekunden er die Seite aus dem Web statt aus dem Cache laden soll."xx" müssen Sie dabei durch die jeweils gewünschte Sekundenzahl ersetzen. Wollen Sie also erreichen, dass die Seite nie aus dem Cache geladen wird, setzen Sie für "xx" "0" ein.

Die folgenden, weiterhin relevanten Methoden sprechen in erster Linie Proxy-Server an und müssen ebenfalls zwischen <HEAD> und </HEAD> platziert werden:

<META HTTP-EQUIV="pragma"
content="no-cache">
<META HTTP-EQUIV="cache-control"
content="private">
<META HTTP-EQUIV="Last-Modified"
CONTENT="ein Datum in der
Vergangenheit">

Eine umfangreiche Abhandlung zu diesem Thema finden Sie auch unter
www. mnot.net/cache_docs/.

Hilfreiche Erläuterungen gibt's außerdem in Stefan Münz' SelfHTML (http://de.selfhtml.org/html/kopfdaten/).

Automatisch die Seite neu laden II

Die Seite soll sich bei Aufruf genau ein Mal selber neu laden (aktualisieren):
Das geht über den Fensternamen und ein Formular

<HTML>
<HEAD>
<TITLE>Nur 1x sich selbst neu ladende Seite</TITLE>

<SCRIPT language="javascript" type="text/javascript">

function NamenAendern()
{window.name = "NeuerName"; }

function EinmalLaden()
{
if
(window.name == "NeuerName")
{
location.reload();
window.name = "AlterName";
}
}

</SCRIPT>

</HEAD>
<BODY Onload="EinmalLaden();" >
<FORM... Onsubmit="NamenAendern();>

<?PHP
...Anweisung
?>

</FORM>
</BODY></HTML>

---

location.reload=true;
statt
location.reload();

holt die Seite vom Server statt vielleicht aus dem Cache.

Automatisch die Seite neu laden III

Diese Seite lädt sich bei Aufruf automatisch genau ein Mal selber neu (aktualisiert sich selbst); und zwar auch dann, wenn durch Zurück-bewegen im Browser das Fenster einfach nur wieder erreicht wird. Auch hier wird das Argument im Fensternamen gespeichert und dieser anschließend wieder zurückgesetzt. Ausgenutzt wird die Tatsache, daß minus mal minus plus ergibt, plus mal minus aber minus (Flip-Flop). Ansonsten würde sich die Seite unendlich oft neu laden.

<HTML>
<HEAD>
<TITLE>Automatisch nur 1x sich selbst neu ladende Seite</TITLE>

<SCRIPT language="javascript" type="text/javascript">

function Selbstladen()
{

var Schalter;
if ((Schalter != 1) || (Schalter != (-1)))
{var Schalter = 1;}

if (window.name == "A1")
{var Schalter = 1;}

if (window.name == "A2")
{var Schalter = (-1);}

// alert ("Load " + Schalter);

if (window.name == "A2")
{
location.replace(self.location);
// self.location.reload;
alert ("reload");
}
else
{alert ("NO reload");}

var Schalter = eval(-(Schalter));
// alert ("Schalter: " + Schalter);

if (Schalter == 1)
{window.name = "A1";}

if (Schalter == (-1))
{window.name = "A2";}

alert ("Resultat Fenstername: " +name);

}

</SCRIPT>

</HEAD>
<BODY Onload="Selbstladen();" >

---

location.reload=true;
statt
location.reload();

holt die Seite vom Server statt vielleicht aus dem Cache.

Automatisch die letzte Seite wieder laden

Automatisch die letzte Seite wieder laden
- nach zwei Sekunden ( = 1000ms ) :

setTimeout ("history.back()",1000);

Vermischtes (JavaScript)

JavaScript-Aufruf

Ruft eine externe JavaScript- Datei auf:

<script language="JavaScript" type="text/javascript" src="xy.js"></script>

</HEAD>

----------------

Manchmal möchte man der Übersicht halber eine externe JavaScript-Datei an eine andere anhängen.

Aufruf von .js- Seiten aus .js- Seiten (Kette):

document.write("<Script src=\"..\/hier\/dateiname2.js\" type=\"text/javascript\"><\/Script>");

schreibt den Aufruf der Datei

"../hier/dateiname2.js"

in jedes Dokument und führt deren Anweisungen aus.

----------------

Ähnlich kann man direkt aus einer externen JavaScript-Datei darin enthaltene Funktionen aufrufen, ohne eine ONLOAD-Funktion in den BODY-Tag einbauen zu müssen:

Aufruf von js- Funtionen aus js- Seiten:

if (Bedingung)
{
window.onload = window.setTimeout('LinkIndex()', 1000);
}

// Oder alle:

window.onload = window.setTimeout('BildTitel()', 1500);

Die timeOut-Funktion soll sicherstellen, daß die Seiten auch wirklich vollständig geladen sind, ehe die externen JavaScript- Funktionen ausgelöst werden.

Java Script Probleme

Java Script

a) Bei allen Bilder, die in Seiten mit JavaScript eingebunden werden,
müssen immer Angaben zu Height und Width vorhanden sein!
Ansonsten kann es zu Problemen mit dem Script kommen.

b) Auch wenn es nicht mehr üblich ist: Java Script Immer
mit  auskommentieren!

<SCRIPT language="javascript">

</SCRIPT>

sonst evtl. Fehlermeldung.

c) Achtung! Immer hinter "if" ein Leerzeichen; sonst Fehler in Netscape

d) Ein Zeilenumbruch beendet in JavaScript eine Codezeile. Fehler!
- Umbrüche ggf. mit + überbrücken

e) Anführungszeichen begrenzen eine JavaScript-Anweisung.
Deshalb ' oder " innerhalb eines Textes mit \' oder \" maskieren
- oder die Akzent-Tasten benutzen: 'Freddys' statt 'Freddy's' schreiben.

ACHTUNG:

JEDER Fehler in einer JavaScript - Anweisung blockiert alle folgende!

--------------

Bei dem Aufbau einer Seite mit Java Script (oder PHP) werden die Funktionen grundsätzlich
in der Reihenfolge ihres Erscheinens abgearbeitet.

Eine JavaScript-Anweisung mit 'document.write ("...")' beim Verlassen einer Seite
(oder nach dem Laden einer Seite mit OnLoad) wird ebenso grundsätzlich in eine neue Seite geschrieben
- und nichts anderes.

Deshalb mit 'innerHTML' arbeiten, will man den Text auf einer Seite im Nachhinein dynamisch ändern:

Entweder vor den zu ändernden Text:

<SCRIPT language="javascript">

</SCRIPT>

<P>

Irgendwas

<P>

<P ID="Absatz">Text</P>

Danach die Funktion 'NeuMachen()' auslösen, und statt "Text"
steht da jetzt "Neuer Text".

---

Oder, ohne Funktion:

<SPAN ID="variabler_text"> Platzhalter </SPAN>";

<P>

Irgendwas

<P>

Und nun unten auf der Seite

<SCRIPT language="javascript">

</SCRIPT>

Wenn die Seite geladen ist, steht nun statt "Platzhalter" da "Der neue Text"

- - -

NB:

"Wenn Sie innerhalb von Funktionen Variablen ohne das Schlüsselwort var deklarieren,
dann sind diese Variablen global."

Achtung: Namen von Variablen und Elementen sollten nur einmal auf der Seite definiert werden
- sonst ist das Verhalten von JavaScript schwer vorherzusehen.

Achtung: Es ist sehr wichtig, WO die Variablen definiert wurden, je nachdem, wie das Script aufgebaut ist.

Manch undurchschaubarer "undefiniert" - Fehler, der die Ausführung eines sonst korrekten Scriptes stoppt, liegt daran, daß die Deklaration einer Variablen darin nur an eine andere Stelle verlegt werden muß - beispielsweise wenn eine Anweisung in eine Funktion umgewandelt wurde und deshalb nun zu einem anderen Zeitpunkt geladen wird. Das gilt besonders für das Auswerten von Formularen.

--------------

Wenn Seiten mit Javascript erstellt werden, insbesondere mit document.write, dann scheinen sie manchmal endlos weiter zu laden, obwohl das Script längst ausgeführt wurde; insbesondere offline.

// Beendet die Verarbeitung - offline
if (window.location.protocol == "file:")
{
window.location.reload();
}

// Am Ende des Scriptes - beendet die Verarbeitung

Gemischte JS-Ausgabe stückeln

Manchmal ist es nützlich, die Ausgabe einer HTML-Zeile in Java Script zu stückeln, Z.B. wenn ein Wert an eine Bedingung geknüpft wird:

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

</SCRIPT>

---

Ist im Prinzip dasselbe wie:

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

</SCRIPT>

- aber mit einer Bedingung.

Besuchte Links in JS prüfen

Manchmal möchte man in JavaScript feststellen, ob ein Link (Verweis) bereits besucht wurde oder nicht. ACHTUNG: Dieses Feature wurde aus Datenschutz- und Sicherheitsgründen in neueren Browsern deaktiviert.

Dieses LIEß SICH über die unterschiedliche Link-Farbe feststellen.

Zuerst werden den Links in CSS(!) unterschiedliche Farben zugeordnet:

<style type="text/css">
a:link { color:blue; }
a:visited { color:purple; }
</style>

Dann wird die Link-Farbe in JS abgefragt:

for (var i = 0; i < LinkAnzahl; i++)
{

// Fehler abfangen:

LF=0;

if(window.getComputedStyle)
// (Mozilla)
{
LF= window.getComputedStyle(document.links[i],"" ).getPropertyValue("color");
}

else if(document.links[i].currentStyle)
// (MSIE)
{
LF=document.links[i].currentStyle.color;
}

// alert(LF);

if (LF == "purple" || LF.indexOf("128") > -1)
{

.. irgendwas

}

Ausblenden mit JS

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

</SCRIPT>

Dieser Bereich wird ausgeblendet, wenn der Parameter "Ausblenden" den Wert "ja" erhalten hat. Allerdings nur ausgeblendet, d.h. PHP-Anweisungen arbeiten noch.

Formular-Sendebuttons z. B. aber können so ausgeblendet werden.

Allerdings nicht, wenn sich dazwischen noch ein weiteres JavaScript befindet!



(Geht auch in PHP)

Variablen zählen

Manchmal möchte man wissen, wie viele Variablen einer bestimmten Art vorhanden sind.
Das geht allerdings nur innerhalb einer Funktion.

<P>

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

var Variable1 = "tralala";
var Variable2 = "dideldum";

for (var i=1; i<10; i++) // Die 10 ist nur eine Vorgabe; sie muß höher sein als die zu erwartende Zahl der Variablen

{
var Variablen = "Variable" + i;
var VariablenZ = self[Variablen];

if (!VariablenZ && (VariablenZ != undefined))
{alert("Ihr Browser kennt diese Funktion nicht");}

// else
// {alert("Die Variablen werden gezählt");}

if (VariablenZ != undefined)
{
document.writeln("\<BR\>");
document.writeln("Variable" + i + ": " + VariablenZ);
}

if (VariablenZ == undefined)
{
var zv = (i-1);
// alert(zv);
break;
}
}

document.writeln("\<BR\>\<BR\>");
document.writeln("Anzahl der Variablen: " + zv);

</SCRIPT>

Achtung: Es ist manchmal wichtig zu wissen, ob eine Schleife keine, nur eine, oder mehr als eine Variable enthält.

Javascript weigert sich, eine Schleife mit nur einem einzigen Element durchzuführen -

Fehler: Variable[i] = undefined.

PHP macht das ohne Weiteres.

JS-Umschalter

Schaltet den Wert "etwas" immer von "true" auf "false" und umgekehrt:

(Und ändert hier die Dimensionen einer Tabelle)

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
 </SCRIPT>

<TITLE>JS-Tabellen-Anpassung</TITLE>

</HEAD>

<BODY>

<P>
<A HREF="javascript:umschalten()">verändern</A>
<P>

<TABLE BORDER CELLPADDING="2" id="tabelle" WIDTH="100">
<TR>
<TD>blah blah blah blah </TD>
<TD>blah blah blah blah </TD>
</TR>
<TR>
<TD>blah blah blah blah </TD>
<TD>blah blah blah blah </TD>
</TR>
</TABLE>

<P>

</BODY></HTML>

Aus: Internet Magazin 11/06

Javascript-Abfrage

Abfrage, ob Javascript aktiviert ist:

Die einfachste Möglichkeit ist, im head - Bereich einer Datei ohne Javascript eine kleines Script einzufügen:

<script language="javascript">

</script>

Das Script wird vom Browser nur interpretiert, wenn der er Javascript beherrscht. Dann kann er auch dem Befehl, zur nächsten Seite zu wechseln folgen. Auf dieser Seite kann dann Javascript benutzt werden.

--------

Zum Selbsttest (Quelle unbekannt)

<p>Ihr WWW-Browser beherrscht folgende Scriptsprachen:<br>
<script language="JavaScript" type="text/javascript">

</script>
<script language="JScript" type="text/jscript">

</script>
<script language="VBScript" type="text/vbscript">

</script></p>

Fremd: Browserabfrage:

http://wiki.selfhtml.org/wiki/JavaScript/Navigator

Javascript: Differenzierte Abfrage, ob ein Objekt oder Wert existiert:

http://wiki.selfhtml.org/wiki/JavaScript/Objektabfragen

Kein JavaScript

JavaScript - Fehlermeldung

-----------------
</HEAD>
<BODY bgcolor=#FFFFFF>
<NOSCRIPT>
<CENTER>
<font face="geneva,verdana,arial" size=+1 color=red>
Sie haben in Ihrem Browser die JavaScript - Unterstützung ausgeschaltet.<BR>
Diese Seiten sind ohne JavaScript nicht vollständig funktionsfähig!
</FONT>
</CENTER>
<BR>
</NOSCRIPT>

Bitte aktivieren Sie JavaScript

Bitte aktivieren Sie JavaScript!

<HEAD>
<NOSCRIPT>
<META HTTP-EQUIV="REFRESH" CONTENT="0; URL=test-dateien/noscript.htm">
</NOSCRIPT>
</HEAD>

führt direkt auf eine NO - JS - Seite, dort:

Bitte aktivieren Sie JavaScript!
oder gehen Sie zu: ohne_javascript.htm

JavaScript schreibt JavaScript

Textergänzung mit JavaScript

Dokumente ergänzen mit JavaScript

(Und dabei die eigene Adresse anzeigen)

Mit JavaScript Elemente mit Text an HTML-Dokumente anheften oder an einer bestimmten Stelle in ein Dokument einfügen:

---

function DokumentErgaenzen()
{

// Verweis erstellen: Variable a b c d, Verweis-Element aber immer A!
var a = document.createElement("A");
var c = document.createElement("A");

// Verweis ergänzen:
a.textContent = "PHP-Sitesuche"; // Verweistext
a.setAttribute('HREF', "http://project-icarus.de/erleuchtet/sitesuche/suche.php");

// Immer die URL der aufrufenden Seite anzeigen:

// Extrahiert den eigenen Dateinamen aus dem Dateipfad

// Dateipfad (File oder URL)
var murl = window.location.href;
// alert(murl);

// Extrahiert:
mfile = murl.split('\\').pop().split('/').pop().toLowerCase();
// alert(mfile);

mfileurl = "http://project-icarus.de/erleuchtet/hilfe/" + mfile;
// alert(mfileurl);

c.textContent = mfileurl;
c.setAttribute('HREF', mfileurl);

// Verweis formatieren:
a.setAttribute('style', 'text-align: center; line-height: 3.5em; color: maroon; font-size: 1em; font-weight: bold; ');
a.setAttribute('class', 'suche');

c.setAttribute('style', 'text-align: center; line-height: 3.5em; color: maroon; font-size: 1em; font-weight: bold; ');
c.setAttribute('class', 'eigenlink');

// Textbausteine erstellen:
var ct = document.createTextNode("Diese Seite online: ");

var t = document.createTextNode("Neu: Die ");
var tt = document.createTextNode("durchsucht die gesamte Site nach Stichworten und fasst die Ergebnisse zusammen");

// Absatz bzw. Umbruch erstellen:

// ACHTUNG:
// Nicht alle Elemente können überall eingefügt werden
// Nicht alle Elemente können überall formatiert werden
// Jedes Element kann nur einmal eingefügt werden (letztes gilt)

var p1 = document.createElement("P");
var p2 = document.createElement("P");

var b1 = document.createElement("BR");
var b2 = document.createElement("BR");

// NB:
// Absatz formatieren:
// p.style.cssText = 'width:100%; height:150px; ';
// p.align="right";

// Absatz mit Inhalt füllen:
// p.appendChild(tt);

// Absatz ans Ende des Dokuments stellen:
// document.body.appendChild(p);

// ACHTUNG:
// Nicht alle Elemente können angesprochen werden
// Nicht alle Elemente können überall ergänzt werden
// Im Folgenden wird deshalb ein Element anhand seiner ID gesucht, dann dessen Folgeelement
// Und dann wiederum dessen Umgebung

// Test:
// var umgebung = document.getElementById("EineBestimmteID").nextSibling.parentNode.nodeName;
// alert(umgebung);

// Umgebung der Ergänzung formatieren:
document.getElementById("EineBestimmteID").nextSibling.parentNode.setAttribute('style',
'text-align: center; line-height: 1.5em; font-size: 1em; ');

// JS-Ergänzung Zusammenstoppeln:

document.getElementById("EineBestimmteID").nextSibling.parentNode.appendChild(p1); // Umbruch
document.getElementById("EineBestimmteID").nextSibling.parentNode.appendChild(ct); // Selbst Text
document.getElementById("EineBestimmteID").nextSibling.parentNode.appendChild(c); // Selbst

document.getElementById("EineBestimmteID").nextSibling.parentNode.appendChild(p2); // Umbruch
document.getElementById("EineBestimmteID").nextSibling.parentNode.appendChild(t); // Text
document.getElementById("EineBestimmteID").nextSibling.parentNode.appendChild(b2); // Umbruch -NG -1. Instanz
document.getElementById("EineBestimmteID").nextSibling.parentNode.appendChild(a); // Verweis
document.getElementById("EineBestimmteID").nextSibling.parentNode.appendChild(b2); // Umbruch
document.getElementById("EineBestimmteID").nextSibling.parentNode.appendChild(tt); // Text

}

window.onload = window.setTimeout("DokumentErgaenzen()", 3000);

Java Script Rückwirkend

Ablauf:

Bei dem Aufbau einer Seite mit Java Script (oder PHP) werden die Funktionen grundsätzlich in der Reihenfolge ihres Erscheinens abgearbeitet.

Über CSS können aber sogar Element verändert werden, die VOR dem Befehl liegen:

if ((document.forms.Suche2.Gefunden.value != null) && (document.forms.Suche2.Gefunden.value == "nichts"))
{
document.forms.Suche1.button.style.visibility = 'hidden';
}

Läßt den den Eingabeknopf im Formblatt 'Suche 1' verschwinden

Wenn es nicht allzu wichtig ist, ist das simple Verstecken oft leichter als das tatsächliche rückwirkend Verschwindenlassen von einzelnen DIV "Elements" by ID.

---

Achtung: Allerdings werden JavaScript - Anweisungen bei jedem Öffnen der Seite neu ausgelesen!

Fehlermeldung ausschalten

Fehlermeldung durch fehlerhafte JavaScripts ausschalten

Beispielsweise um zu verhindern, daß der Browser wegen JavaScript- Tracker und Zähler versucht Online zu gehen, oder generell um den Browser bei Aufruffehlern nicht zu blockieren.

Vor(!) das jeweilige Script im Dateikopf.

<HEAD>
<script>
function stoperror()
{return true}
window.onerror=stoperror
</script>

....

geht, aber nur beim MICROSOFT Internet Explorer! Netscape läßt sich nicht beeinflussen, man muß ihn manuell auf "Offline" schalten. Oder die Scripte auslagern.

Aus Stefan Münz 8
Diese Art der Fehlerkontrolle können Sie für Netscape 4.x und MS Internet Explorer ab Version 4.x verwenden. Netscape 6 ist leider nicht in der Lage, die Parameter vollständig zu interpretieren. Er speichert jeweils im ersten Parameter das auslösende Eventobjekt. Opera 5.12 interpretiert den an das Fensterobjekt gebundenen Eventhandler window.onError nicht.

Fehlermeldung selber erstellen

Fehlermeldung bei fehlerhaften JavaScripts erstellen

Manchmal bleibt ein JavaScript reaktionslos stehen, ohne jede Fehlermeldung, und der Fehler läßt sich nicht feststellen.
Tests auf null, undefined etc. fruchten nichts.

Dies tritt beispielsweise auf, wenn der Google Chrome Browser offline auf eine andere HTML-Seiten zugreifen soll, was online ohne Weiteres möglich ist, offline jedoch nicht.

In diesem Fall geht es um einen Zugriff auf das 'parent.document', der reaktionslos bleibt.

GENAU DIESER Zugriff wird wie folgt abgefangen, damit wiederum andere Browser keine falschen Fehlermeldungen ausgeben:

function KlapptNicht()
{
if (document.getElementById)
{
// Catch Chrome Offline Error:

try {parent.document;}

catch(err)
{
alert ("Zugriff nicht möglich");
}

parent.document.getElementById("IrgendWas").value = "IrgendWasAnderes";
}
}

Dieser Abfangmechanismus läßt sich noch weiter ausbauen

JavaScript-Suchformular

Finde Text - Suchfunktion

Offene HTML-Seiten direkt im Browser nach bestimmten Begriffen
durchsuchen:

1) Die in

http://project-icarus.de/erleuchtet/fw/alg/findetext.zip

beiliegende Datei 'finde2.js' in das Verzeichnis der zu
durchsuchenden Seiten kopieren

2) An gewünschter Stelle das Suchfeld in den zu durchsuchenden Seiten
einbinden mit:

<A HREF="javascript:LadeSeite();"> Suche mit JavaScript </A>
(wenn möglich)

3) Und direkt darunter das Feld öffnen mit

<SCRIPT language="JavaScript" type="text/javascript" src="finde2.js">
</SCRIPT>

Das Suchfeld funktioniert derzeit im AOL 4x und 6x, Netscape 4x und 7x, Mozilla und MS Internet Explorer. Es durchsucht die Hauptseite nach der eingegebenen Zeichenfolge

Bei frühen, ungepatchten Versionen des MS Internet Explorer 6 und 7 kann es bei großen Seiten zu Problemen kommen.

Fundort:

Das Script wurde übernommen und adaptiert von BRAVENET:

http://www.bravenet.com/reviews/coolscripts/index.php

Die neuesten Adaptionen befinden sich jeweils in

http://project-icarus.de/erleuchtet/hilfe/finde.js

und in den jeweiligen Menü - Seiten:

Rechte Maustaste auf [xy - Menü aufrufen] und "Ziel speichern unter..."

Bilder geladen

Sanduhr- Mauszeiger / prüfen, ob alle Bilder geladen sind

Sie können Ihren Besuchern durch unterschiedliche Darstellung des Mauszeigers zeigen, ob die Seite bereits vollständig geladen ist oder nicht. Das folgende Skript benennt dazu zunächst den Body per ID mit dem Namen "koerper". Über style = "cursor: wait" wird der Mauszeiger von CSS aus auf eine Sanduhr gesetzt. Im Skript wird in Abständen von 50- Tausendstelsekunden die Funktion "bildstatus()" aufgerufen.

In der globalen Variablen "anzahlbilder" ist die Anzahl aller eingesetzten Bilder gesichert. Die Funktion "bildstatus()" setzt die Kontrollvariable "allegeladen" auf den Wahrheitswert "true". Danach prüft die Funktion per Laufanweisung den Ladezustand jedes Bildes. Der Ladezustand gibt seinerseits einen Wahrheitswert zurück: "True", falls das Bild geladen wurde, "False", falls nicht. Dieser Wert wird einfach mit dem in "allegeladen" multipliziert. Beim Multiplizieren von Wahrheitswerten ist das Ergebnis nur dann "wahr" oder "1", wenn beide Faktoren wahr sind. Für die Laufanweisung bedeutet das: "allegeladen" bleibt nur dann wahr, wenn jedes Bild vom Browser als vollständig geladen deklariert wurde. In der if- Abfrage kontrolliert das Skript genau diesen Zustand.

<body id = "koeper" style = "cursor: wait" >

...

</body>

<script>

var a = setInterval ('bildstatus()',50);
var anzahlbilder = document. images. length;

function bildstatus()
{
allegeladen = true;

for (i = 0; i <anzahlbilder; i ++)
{
allegeladen = allegeladen * document. images [i] . complete;
}

if (allegeladen)
{
clear Interval (a);
document. getElementById ("koerper"). style. cursor = 'auto';
}
}

</script>

Aus: Internet Magazin 11/07

Bilderwechsel 0

Bildwechsel - Urscript

Hier der häufig und gerne verwendete Effekt mit dem Bild, welches wechselt, sobald die Maus darüber fährt.

Hier eine Variante, die auf allen Browsern funktionieren sollte.

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>





<CENTER><A HREF=" ... "
onMouseOver="wechsleBild('mitMaus','katzmaus')"
onMouseOut="wechsleBild('ohneMaus','katzmaus')">
<IMG SRC="movehere.gif" ALT="" WIDTH=152 HEIGHT=110
BORDER=0 NAME="katzmaus"></A></CENTER>

von http://www.editorial.de/tricky/

---------

Achtung: Um den Bilderwechsel sofort zu ermöglichen, die benötigten Bilder grundsätzich in 1-Pixel-Größe auf der Seite (und damit in den Browser-Cache) vorladen:

<p>

<img src="bild1.gif" width="1" height="1" >
<img src="bild2.gif" width="1" height="1" >
<img src="bild3.gif" width="1" height="1" >

usw.

</body>
</html>

Bilderwechsel I

Grafik (Bilder-) wechsel onmouse

- Mit vorgeladenen Bildern

Achtung: Netscape 4 erkennt OnMouse nur im Verweis (HREF-) Tag, nicht im Bild (IMG-) Tag.

Im Head-Bereich:

<Script Language=JavaScript>

</Script>

---

Danach

<A href...onmouseover="xy.src=bild2.src" onmouseout="xy.src=bild1.src"> < IMG NAME="xy" SRC="bild1.jpg" ...>

Oder

<A href...onmouseover="wechseln (0,bild1)" onmouseout="wechseln (0,bild2)"> < IMG NAME="xy" SRC="bild1.jpg" ...>

Bilderwechsel II

Bildwechsel Quick and dirty -

Ohne das Wort "JavaScript"; lädt auch animierte gifs!

<A HREF="suchen.htm" title="Suche"
onMouseDown="suche.src='such3b.gif';"
onMouseOut="suche.src='such3a.gif';" >

<IMG name="suche" SRC="such3a.gif"
title="Suche" ALT="Suche" Border="0" ></A>

Geprüft in Mozilla1.5, Netscape 4, MSIE 5-6

Achtung:

Für Netscape 4

"onMouse..."

immer in den Verweis-Tag, nicht in den Bild (IMG-) Tag legen.

Bilderwechsel III

Bilder ( wechseln )

Vorher: array!

Mit Bildern zu:

f.gif, a1.gif, a2.gif, ein1.gif, ein1a.gif, ein2.gif, ein2a.gif, aus1.gif, aus1a.gif, aus2.gif, aus2a.gif

<IMG name= "f" SRC="f.gif Alt= "Bild F" >

<IMG name= "a1" SRC="a1.gif Alt= "Bild A1" ></A>

<IMG name= "a2" SRC="a2.gif Alt= "Bild A2" ></A>

<A HREF = "Link1.htm"
onmouseover= "f.src= ein1.src; a1.src = ein1a.gif;"
onmouseout= "f.src= aus1.src; a1.src = aus1a.gif;">

<A HREF = "Link2.htm"
onmouseover= "f.src= ein2.src; a2.src = ein2a.gif;"
onmouseout= "f.src= aus2.src; a2.src = aus2a.gif;">

Bilderwechsel IV

Alternatives Bild statt "ALT"-Text -
zeigt bei fehlendem Bild ein Ersatzbild an:

<script language="JavaScript">
var altbild = new Image (länge, breite);
altbild.src = "http...BilderName.jpg";
</script>

<IMG SRC="xyz.jpg" onError = "this.src=altbild.src" >

(Internet Magazin 06 /06)

----

Bild erst auf Wunsch anzeigen:

<IMG SRC= "erstesbild.jpg" OnClick = "javascript:this.src= 'http://...zweitesbild.jpg'" ALT="Bild ansehen? Hier Klicken">

Für das erste Bild kann auch ein Anklick-Symbol gewählt werden - oder gar nichts.

<IMG OnClick = "javascript:this.src= 'http://...zweitesbild.jpg'" ALT="Bild ansehen? Hier Klicken">

Bilder - Alternativer Text als Titel

Titel statt Alt

Bilder immer mit Titel versehen

Normalerweise soll die ALT- Angabe im IMG- Tag einen Alternativen Text anzeigen, wenn aus irgendwelchen Gründen die Grafik nicht angezeigt wird.

Leider gehen die Browser höchst unterschiedlich damit um, und häufig werden gerade bei kleinen Bildern die ALT- Angaben nicht oder nicht vollständig lesbar angezeigt.

Abhilfe: Die ALT-Angabe als "Titel" anzeigen lassen, wenn die Maus über die Grafik fährt. Das geschieht dann immer; der Text wird also auch dann angezeigt, wenn das Bild geladen wurde.

Eigentlich wäre das ganz einfach:

for (var i = 0; i < document.images.length; i++)
{
document.images[i].title=document.images[i].alt;
}

Aber da es immer Umstände zu bedenken gibt, ist es am Ende komplizierter:

// Bilder immer mit Titel versehen
function BildTitel()
{

for (var i = 0; i < document.images.length; i++)
{

// Name der Grafik
BildNameKpl=document.images[i].src;
var BildName = BildNameKpl.split("/");
BildName.reverse();
BildName = BildName.shift(0);

// Wenn die Grafik noch keinen übergeordneten
// Titel aus einem HREF-Verweis hat

if (document.images[i].parentNode.title == "")
{

// Und wenn die Grafik überhaupt eine ALT-Angabe besitzt

if (document.images[i].alt != "")
{
document.images[i].title = document.images[i].alt;
}

else
{
document.images[i].title = BildName;
}

}

else
{
document.images[i].title = BildName + " / " + document.images[i].parentNode.title;
}

}
}

Mailto aufteilen

Mails per JavaScript aufteilen:

<script language="Javascript">

document.write( '\<A HREF\=\"mailto:' + 'name' + '@'+ '123\.com\"\>mail abschicken\<\/A\>' );

</script>

Drucken lassen

Ruft die Druckfunktion des Browsers auf:

"javascript:window.print();"

oder

<Body onLoad="print()" >

Bravenet: Soundklick

Von Bravenet Webmaster Tips and Tricks February 17, 2003:

Make a sound on mouseover. Some of our members have been requesting a script that would generate a sound on when a visitor mouses over a link or other object on the webpage. We found this one and thought we would pass it along.

http://www.bravenet.com/newsletters/tips.php

<HTML>
<HEAD>

<SCRIPT language="JavaScript">


</SCRIPT>

</HEAD>

<BODY>

<P>
Place this code where you want it to appear on the page:

<A HREF="#" onMouseOver="playSound(0)" onMouseOut="stopSound(0)"><B>Move
mouse over to play sound</B></A>

</BODY></HTML>

---------------------------------------------------

Kommentar:

- Geht in Netscape und MSIE, hängt bei letzterem das Sytem aber komplett auf, wenn der Soundplayer nicht richtig konfiguriert ist.

- Erlaubt mehrere verschiedene Sounds einzeln abzurufen, auch unterschiedliche Formate.

- Erlaubt im Gegensatz zum AudioBox Applett mehrere Script-Aktionen gleichzeitig und stoppt beim Verlassen des Link.

Siehe auch:

http://project-icarus.de/erleuchtet/hilfe/sounds1.htm

Kein umrandeter Internet Explorer Link

Internet Explorer gepunktete Link-Umrandung abstellen

Internet Magazin 6/2000

Der Internet Explorer umrandet angeklickte Objekte ( Links, Bilder ) mit gestrichelten Linien. Dies stört vor allem bei Frames. Abstellen läßt sich dies durch kleines JavaScript, das entweder in BODY - Tag des Dokuments oder in HREF - Tags eingefügt wird:

<BODY onclick="if (document.all) body.focus();">
<A HREF "http://www.yahoo.com/" onclick="if (document.all) body.focus();">

---

Sie können den gepünktelten Rahmen auch verhindern, indem Sie im Verweis notieren:
<a href="ziel.htm" onFocus="if(document.all) this.blur()">Text</a>

Beachten Sie jedoch, dass Sie dem Anwender damit die Möglichkeit nehmen, mit der Tabulatortaste auf diesen Verweis zu positionieren und diesen dann mit der Return-Taste auszuführen.

---------------------------------------

Lösung über ein Java Script:

<head>

...

<script language="JavaScriptl.2">



</script>

</head>

<body>

<p>

<a href="ziel.html" onclick="kill-linkrahmen(this);">Ein Link ohne punktierten Rahmen</a>

</p>

</body>

HTML-Schnipsel

Zurück zum Script-DB Eingang

http://project-icarus.de/erleuchtet/Script-DB/index.htm

Tabellen

Tabellen - Angaben

Cellspacing= x : Linienbreite zwischen den Zellen
bei Border = y Rahmendicke (unterschiedlich)
Cellpadding= z Abstand von der Linie

Heading <TH> Automatisch Fett
BorderColor= Rahmenfarbe (ab Vers. 2/3)

HSPACE=x und VSPACE=y (horizontale und vertikaler Abstand zum Text) funktioniert im Netscape auch bei Tabellen wie bei Bildern, nicht aber im Internet Explorer.

Tabellenzellen-Highlight

Tabellen - Farbwechsel

Message 1/3 From Stefan Muenz Mar 13, 98 07:41:15 am +0100

>>gibt es eine Möglichkeit, mit OnMouseOver/OnMouseOut die
Hintergrundfarbe eines TABELLENFELDES zu verändern?

Geht beim MS IE 4 mit Dynamic HTML:

<td id="Zelle"
onMouseover="document.all.Zelle.style.backgroundColor='#FFFFCC'"
onMouseout="document.all.Zelle.style.backgroundColor='#FFFFFF'">

--------------------------

Andere Methode:

Hintergrundfarben für Tabellenzeilen bei Berührung mit dem Mauszeiger verändern:

<TR onMouseOver = "this.bgColor='#FFFFCC'"
onMouseOut = "this.bgColor='#FFFFFF'" >

Achtung: "bgColor" so schreiben!

Keine Ränder in Netscape

Keine Ränder in Netscape - Tabellen

1. Im Quelltext keine Leerstelle oder Zeilenumbrüche zulassen

2. <TABLE CELLSPACING="0" Border="0" CELLPADDING="0" >

Vertikale Linien in Tabellen

Vertikale Linien in Tabellen

< td bgcolor = black width = 0 > < BR > < / TD > ( ! )
< td bgcolor = white > Text. . . < / TD > ( ! )
< td bgcolor = black width = 0 > < BR > < / TD > ( ! )

Besonderer Rand bei Tabellen

Besonderer Rand bei Tabellen

* Zwei Tabellen ineinander schachteln und in die äußere als Hintergrund ein animiertes GIF plazieren ergibt einen animierten Rand bei der inneren Tabelle.

* Eine Tabellenzelle in eine andere gebracht ergibt 3-D Rahmen; Farbe des Hintergrundes und der Borders sollten gleich sein!

* Border=1, Cellspacing=0 Tabellenlinie hauchdünn!

* Border=1- Tabelle in einer Tabelle mit Border= 3 ergibt einen schönen Bilderrahmen; für Bild, Rahmen und Hintergrund die gleiche Farbe nehmen.

CSS

Moz Styles

style="background: yellow;"

wird in vielen Editoren automatisch zu

style="background: yellow none repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"

oder etwas ähnlichem.

Richtig ist:

style="background-color: yellow;"

CSS Allgemein & Absätze

CSS Allgemein

Auf der Seite selber sollten CSS-Anweisungen wie JavaScript auskommentiert werden:

<style type="text/css">

</style>

-----------

- Um in MAC und Windows-Systemen in CSS die gleiche Schriftgröße zu erzeugen, die Textgröße nicht in Punkt (pt) angeben, sondern in Pixel (px)

- Schriften immer relativ skalieren: font-size: 0.9 em; letter-spacing: 0.1 em; (oder %)

Achtung: Dezimal-Bruchteile in CSS - Formatierungen nicht mit dem deutschen Dezimal-Komma, sondern mit dem amerikanischen Dezimal-Punkt schreiben (0.5 statt 0,5!)

-----------

ACHTUNG: Ein CSS-Style überschreibt alle "Standard" - Formatierungen:

1) Absätze

p {margin: 0px;}

setzt alle Absatz- Abstände auf NULL!

Achtung: BR läßt sich nicht formatieren, da inhaltslos!

2) - Normalerweise werden in HTML mehr als ein Absatz

<P>
<P>

dargestellt wie ein einzelner:
<P>

- aber mit dieser CSS-Anweisungen läßt sich dieses zumindest einigen Browsern verhindern:

<style type="text/css">

</style>

<P>

1 P, wie hier:
<P>

= 2 BR, wie hier:
<BR>
<BR>

Dagegen ergeben 2 P, wie hier:
<P>
<P>

Das Selbe wie 4 BR, wie hier:
<BR>
<BR>
<BR>
<BR>

-oder?

<P>
<P>
<P>
<P>
<P>
<P>
------------
<P>
Ende

http://project-icarus.de/erleuchtet/autostyle/_einzelne/ul-styles.htm

-----------

WICHTIG:

Häufig werden externe CSS-Dateien benutzt, um HTML-Dateien zu formatieren.
Manchmal werden diese über die Formel:
<style>

</style>
eingebunden, wobei die 'datei.css' folgende Form hat:
<style type="text/css" >

</style>

Etliche Mozilla- Browser verstehen diese Anweisung nicht.

Sicherer ist es, CSS-Dateien grundsätzliche über
<link rel="stylesheet" type="text/css" href="datei.css">
einzubinden.

Allerdings darf dann in der CSS-Datei KEIN
<style type="text/css" >
<!--
stehen, sondern nur:
body {font-family:... }

Allgemeine Font-Families:

serif (ähnlich Times)
sans-serif (ähnlich Helvetica)
cursive (ähnlich Zapf-Chancery)
fantasy (ähnlich Western)
monospace (ähnlich Courier)

Achtung: Alle CSS-Formatierungen im <BODY> -Tag gelten für alle anderen, sofern für diese nichts anders angegeben wird!

<BR> -Tags sind dagegen ohne Inhalt.

-----------

CSS-Pseudoklassen 'before' und 'after':

Mit den CSS-Pseudoklassen "before" und "after" kann man beliebigen CSS-Elementen einen bestimmten Inhalt vorsetzen oder nachstellen.

Die folgende Zeile bewirkt, dass jedem Absatz ein Bindestrich vorgestellt wird:

p:before {content : " - ";}

Die folgende Zeile stellt jedem Absatz, der mit der Klasse "euro" versehen wurde, den Begriff " Euro" nach:

p.euro:after {content : " Euro";}

Achtung: Der Internet Explorer bis zur Version 6 kennt diese Pseudoklassen nicht.

CSS und Javascript

Unterschiede CSS- JavaScript

In CSS:

<INPUT TYPE="text" VALUE="hallo" SIZE="12" MAXLENGTH="15" readonly
style="background-color:#E5E5E5; border:0;" NAME="TEST" >

---

Die selbe CSS-Anweisung muß in Java Script anders geschrieben werden als in reinem CSS, ohne Bindestrich und Doppelpunkt:

---

In Java Script:

<INPUT TYPE="text" VALUE="hallo" SIZE="12" MAXLENGTH="15" readonly NAME="TEST" >

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

</SCRIPT>

- - -

ACHTUNG!

Will man in diesem Bereich eine Variable setzen, in

document.links[2].style.background = 'url(unknown.gif)';

document.links[2].style.background = "url('"+variable+".gif')";

setzen, aber:

document.links[2].style.backgroundPosition = variable;

--

Statt "style.background" läßt sich auch "style.backgroundImage" setzen - klarer.

! Es scheint fast so zu sein, daß zumindest in CSS die Hintergrundbilder nicht mehr als eine Ebene von der Hauptdatei entfernt sein dürfen!

! Die gesetzten Styles z.B. für "background" lassen sich nicht einzeln ändern, sondern immer nur alle zusammen!

---

Mehr dazu: http://project-icarus.de/erleuchtet/hilfe/autoform.htm

NB: In JavaScript die Elemente einer bestimmten Klasse finden:

document.getElementsByClassName('Klasse')

- unbedingt die Großschreibung beachten!

Beim Drucken anders

- Unterdrückt die Navigationsleiste beim Drucken:

<div id="kopf"> ... </div>
<div id="menue"> ... </div>

@mediaprint {#kopf, #menue {display: none}; }

-----------

Druckseiten formatieren:

Dazu dient die CSS-Funktion &quo "@page"
Der Browser greift auf die hier definierten Werte nur dann zu, wenn die aktuelle Seite an den Drucker geschickt wird:

@page{margin : 4.0cm 4.0cm 3.5cm 4.5cm; /* Abstände definieren: oben unten links rechts */ }

@pagebesitzt zwei Pseudoklassen, mit deren Hilfe man die Formatierungen von linken und rechten Seiten unterschiedlich definieren kann:

@page:leftund @page:right

Verschiedenfarbige Listen

- Verschiedenfarbige Optionslisten:

<Select size=2 name="liste">
<Option style="color:red;">rot</Option>
<Option style="color:navy;">blau</Option>
</Select>

(Internet Magazin 08/06)

Ähnlich:

<Strong style="color:green"> </Strong>

Bereiche anders formatieren

- Bestimmte Standard-Tags in bestimmten Bereichen über eine eigene Klasse gesondert formatieren:

p. fliesstext span { font-style:italic;}

formatiert alle <SPAN> - Bereiche in jedem fliesstext- Absatz kursiv

(Internet Magazin 07/06)

-----------

- In einem bestimmten Bereich Absatzabstand anders zu definieren:

div.#xybereich p {margin: 5px;}

---

- Macht die erste Zeile fett:

div.#xybereich:first-line
{ font-weight:bold; }

-----------

- Setzt oberhalb einer Tabelle einen Abstand:

table { margin-top: 20px; }

- Setzt bei Paragraphen NUR innerhalb einer Tabelle einen bestimmten Abstand:

td p { margin: 5pt; }

Achtung: muß einzeln stehen, unterhalb der generellen TABLE-Anweisungen.

Checkboxen formatieren

Checkboxen formatieren

Man kann Formular - Auswahlboxen (Checkboxen) in neueren Browsern mit CSS formatieren - beispielsweise die Checkbox unsichtbar machen - und evtl. durch ein Hintergrundbild ersetzen; dieses ist automatisch aktiv.

Gleichzeitig kann man den Textbereich durch den LABEL - Tag mit aktiv machen und je nach Zustand über CSS anders gestalten.

Damit beides gleichzeitig möglich ist, müssen

1) die Label HINTER den Checkboxen stehen und

2) mit der Checkbox über die Id Verbunden sein.

<HTML>

<STYLE type="text/css">

#Teil_1
{visibility: hidden;}

.Klasse_2
{visibility: hidden;}

.ROT
{
padding: 3px 0px 3px 24px;
margin: -24px;
background-image: url(O.gif);
background-position: left;
background-repeat: no-repeat;
}

.Klasse_2:hover + .ROT {background-color: red;}
.Klasse_2:active + .ROT {background-color: red;}
.Klasse_2:checked + .ROT
{
background-color: red;
background-image: url(X.gif);
}

.Klasse_1:hover + .GRN {background-color: green;}
.Klasse_1:active + .GRN {background-color: green;}
.Klasse_1:checked + .GRN {background-color: green;}

.Klasse_3:hover + .GLB {background-color: yellow;}
.Klasse_3:active + .GLB {background-color: yellow;}
.Klasse_3:checked + .GLB {background-color: yellow;}

</STYLE>

<BODY>

<FORM NAME="Suche" >

<INPUT class="Klasse_1" Type="checkbox" ID="Teil_1" NAME="Eins" ><LABEL for="Teil_1" class="GRN"> Ohne Checkbox - über ID </LABEL><BR>

<INPUT class="Klasse_2" Type="checkbox" ID="Teil_2" NAME="Zwei" ><LABEL for="Teil_2" class="ROT"> Ohne Checkbox - über Klasse </LABEL><BR>

<INPUT class="Klasse_3" Type="checkbox" ID="Teil_3" NAME="Drei" ><LABEL for="Teil_3" class="GLB"> Mit Checkbox </LABEL><BR>

</FORM>

</BODY>
</HTML>

Auswahl-Buttons formatieren

Auswahl-Buttons formatieren

<INPUT TYPE="Radio" class="Klasse1" >

In CSS:

INPUT.Klasse1

/* setzt den Auswahlknopf von der Schrift ab */
{margin: 10px;}

/* Versteckt den Auswahlknopf generell */
{visibility: hidden;}

---

Für die Markierung der Beschreibung allein als Block genügt ein <SPAN > ... </SPAN>

1) Will man jedoch den Auswahl-Button und die Beschreibung GEMEINSAM als
Block farbig hinterlegen und markieren, muß man ein

<P mit einer Klasse (und ggf. ID) >
vor diesen setzen - und ein leeres
<P>
dahinter (und diesen Absatz ggf. mit CSS entsprechend verrücken).

2) Will man den so geschaffenen Hintergrund selbst aktiv (anklickbar) machen,
kann man diesen zusätzlich (!) mit den entsprechenden LABEL-Tags umgeben.

So kann man sogar VOR den Radio-Button einen Text setzen - allerdings wird
dessen Hintergrundfarbe nicht geändert. Das geschieht mit Hilfe von JavaScript.

- Hier auf die Schreibweise achten, auch auf die Groß- und Kleinschreibung -

Es heißt:

getElementsByClassName

aber
getElementById

- Unbedingt vor jeden so aktivierten Hintergrund ein </P> setzen, falls
davor bereits ein P steht (das Setzen der </P>, und wohin, ist entscheidend).

- Auf diese Weise wird der Hintergrund mitsamt dem Radio-Button und dem
zugehörigen Text aktiv und reagiert auf Mausbewegungen und - klicks.

Folgenden Quelltext als HTML-Dokument speichern und ausprobieren:

<HTML>
<HEAD>

<STYLE type=text/css>

P.Klasse1
{
background-color:lightgreen;
padding: 0px 4px 0px 4px;
}

P.Gelb
{
background-color:yellow;
padding: 0px 4px 0px 4px;
}

.Klasse1:hover
{background-color: Yellow;}

</STYLE>

<SCRIPT type="text/javascript">



</SCRIPT>

</HEAD>
<BODY OnLoad="HG_Orange();HG_Rot();HG_Gelb();" >

<FORM NAME="Testform" ACTION="etwas" METHOD="post">

<TABLE BORDER="4" CELLSPACING="0" CELLPADDING="20" WIDTH="200">
<TR>

<TD WIDTH="100">

<P>Doppeltes Label:

wichtig:</P>

<LABEL for="Auswahl1"><P ID="1" name="Absatz1" class="Klasse1">Vor </LABEL>
<INPUT ID="Auswahl1" TYPE="Radio" VALUE="fff" name="Auswahl" name="Absatz1" class="Klasse1" OnClick="HG_Orange();">
<LABEL for="Auswahl1">SPAN ist nicht notwendig </P></LABEL>

<P>wichtig:</P>

<LABEL for="Auswahl2"><P ID="2" name="Absatz1" class="Klasse1" ></LABEL>
<INPUT ID="Auswahl2" TYPE="Radio" VALUE="fff" name="Auswahl" name="Absatz1" class="Klasse1" OnClick="HG_Gelb();">
<LABEL for="Auswahl2">SPAN ist nicht notwendig </P></LABEL>

<P>wichtig:</P>

<LABEL for="Auswahl3"><P ID="3" name="Absatz1" class="Klasse1" ></LABEL>
<SPAN STYLE="background-color:grey; ">
<INPUT ID="Auswahl3" TYPE="Radio" VALUE="fff" name="Auswahl" class="Klasse1" OnClick="HG_Rot();">
<LABEL for="Auswahl3"><BR>
SPAN ist nicht notwendig, bindet aber das Verhalten </P></SPAN></LABEL>

<P>wichtig:</P>

<INPUT TYPE="Radio" VALUE="fff" name="Auswahl" > Leer machen: Hier aktivieren + Seite neu laden (F5)

</TD>
</TR>
</TABLE>
</FORM>

<U>Achtung</U>: Nicht die Elemente im Formular hochzählen lassen,
<P>
(document.Testform.Auswahl.length;)
<P>
Sondern im gesamten Dokument:
<P>
(document.getElementsByName("Auswahl").length)
<P>
Sonst gibt es insbesondere bei nur einem Element unerklärliche Zählfehler!
</BODY></HTML>

Hintergrundbild nicht kacheln

- Verhindert, daß das Hintergrundbild nach rechts gekachelt (wiederholt) wird:

body {background-image: url("yx.gif"); background-repeat: repeat-y; }

Bilder, Sounds, Texte einbinden

Einbindung von Textdateien

Einbindung von äußeren Text- oder HTML- Dateien in HTML-Dateien

http://project-icarus.de/erleuchtet/autostyle/_frametext/iframetext.htm

Geht u.a.

I. mit Iframes:

In allen gängigen Browsern bis auf NetScape 4 / MS Internet Explorer 3:

MSIE ab 4,
NS ab 6,
Mozilla,
Konqueror 3,
Opera 7,

<TABLE>
<TR>
<TD WIDTH=488 ALIGN=LEFT VALIGN=TOP>
<BR>
-- Erläuterungstext --
<BR>
<iframe src="frametext.txt" width="488" height="200" noresize scrolling=auto
hspace=0 vspace=0 frameborder=0 marginheight=0 marginwidth=0 align="left"
>
<BR>
<Div align=centeR>
Ihr Browser unterstützt leider keine I-Frames. <a href="frametext.txt" target="_blank">Klicken Sie hier</a>, um den Text in einem neuen Fenster zu öffnen.
</Div>
</iframe>
<BR>
</TD>
</TR>
</TABLE>

Oder

II. mit object data

<object data="frametext.txt" type="text/plain" width="600" height="400" >
</object>

Bei Einbindung von Textdateien keine Hintergrundfarbe angeben.

--------------

http://project-icarus.de/erleuchtet/autostyle/_frametext/iframetext.htm

Dynamische Texte in Iframes

Reine Texte können als Text-Dateien auf HTML-Seiten in so genannten IFRAMES dargestellt und dort leicht ausgetauscht und aktualisiert werden. Online ist dieses teilweise sogar dynamisch mit JavaScript möglich - in Abhängigkeit vom Browser und deren Standardisierung.

Gespeichert werden die Inhalte der Iframes jedoch nur bei Speicherung als 'vollständige Webseite', und zwar in den dazugehörigen Dateien; auch im Falle von dynamisch mit Javascript generiertem Inhalt funktioniert das meistens.

So kann man heute schon über dem Umweg über Iframes den Inhalt von Javascript - generierten Seiten vom Nutzer auf die Festplatte speichern lassen.

--------------

Hintergrundmusik

Hintergrundmusik

für den Internet Explorer
und Netscape browser

<EMBED SRC="music.mid" AUTOSTART="TRUE"
LOOP="TRUE" WIDTH="145" HEIGHT="60"
ALIGN="CENTER">

<NOEMBED>

<BGSOUND
SRC="music.mid" PLAYCOUNT="10">

</NOEMBED>

</EMBED>

Einbindung von MIDI und WAV

Einbindung von MIDI und WAV - Dateien

In die Homepage zum automatischen abdudeln für Internet Explorer und Netscape :

<head>

<bgsound src="datei.mid" loop=infinite>
</head>

<body>

<embed src="datei.mid" autostart=true loop=true hidden=true height=0 width=0>
</body>

Alle zusammen:

<SCRIPT LANGUAGE="JavaScript">
var MSIE=navigator.userAgent.indexOf("MSIE");
var NETS=navigator.userAgent.indexOf("Netscape");
var OPER=navigator.userAgent.indexOf("Opera");
if((MSIE>-1) || (OPER>-1)) {
document.write("<BGSOUND SRC=sound.mid LOOP=INFINITE>");
} else {
document.write("<EMBED SRC=sound.mid AUTOSTART=TRUE ");
document.write("HIDDEN=true VOLUME=100 LOOP=TRUE>");
}
</SCRIPT>


(Aus: NoteTab Library!)

Bilder

Bilder

* Gifs: Max. 256 Farben

Interlaced 89a:
Bild zuerst grobkörning - > wird feiner

Gut bei großen Bildern, die Bilder sind schneller grob geladen; Nachteil: die Bilddateien sind 10% größer.

* WPG oder WMF erzeugen Vektorgrafiken:

* Vektor - jpgs: Hohe Auflösung, keine Stufen, leicht zu skalieren

--------

* Bilder vor der rechten Maustaste schützen: Als Hintergrund in eine Tabelle einbinden, ein Blind- Gif in gleicher Größe darüberlegen.

* Auch eine leere SRC-Angabe erzeugt ein Blind- Gif:

<IMG alt="" src="" width=5 height=10 > </IMG>

--------

Schrägen:

Bilder im Malprogramm schräg ziehen und rechtwinklig ausschneiden

Hintergründe:

Bei Uni - farbigen Gifs für Hintergründe ist es fast egal, ob sie aus 20 oder 2000 Pixeln bestehen, also: mindestens 1300 Pixel lang, besser noch 2000 x 2000

Bilder - Attribute

Bilder - Attribute

* Wenn man kein WIDTH angibt, dann wird der ALT - Kommentar in Netscape voll ausgeschrieben, in Microsoft Internet Explorer nicht - wenn das Bild fehlt.

* Dafür zeigt der Netscape den ALT - Text bei verlinkten Bildern nicht an, der MSIE wohl

* Man kann im Internet Explorer auch im Quelltext einen Umbruch im ALT - TAG erzeugen, der Internet Explorer übernimmt diesen. Netscape nicht.

* Alternativ zum direkten Zeilenumbruch: 
 / Angeblich ohne Leerzeichen dahinter und einem davor wg. Netscape (Tip: Internet Magazin 03 /02). Zeigt im Netscape 4 keine Wirkung; auch nicht in einer Body- Vorgabe bei e-mails. 
 gilt auch als Zeilenumbruch in 'TITLE'-Attributen.

* <img src="xxx.gif" height="0" width="0">

ergibt ein Bild nicht von 0, sondern 1x1 Pixel.

Bilder Übergang

Bilder II

Ersatz von schwarzweiß - Bildern mit bunten (schwarzweiß - Bild linienweise mit Farbe füllen lasssen, statt animiertem Gif ) :

< IMG lowsrc="sw-bild.jpg" src="farbbild.jpg" alt=text>

Bilder vor der rechten Maustaste schützen: Als Hintergrund in eine Tabelle einbinden, ein Blind- Gif in gleicher Größe darüberlegen.

Layout

Farben

Standard- Farben sind z.B.:

"black" "maroon" "green" "olive" "navy" "purple" "teal" "gray" "silver" "red" "lime" "yellow" "blue" "fuchsia" "aqua" "white"

- es gibt noch mehr.

---

Die Standard- Linkfarbe ist TEXT="#000000" LINK="#0000ff" VLINK="#800080" ALINK="#ff0000" >

Pre-formatiert

Mit

"PRE"

formatierte Texte bilden das Schriftbild 1:1 ab. Gut für Listen, Tabellen etc.

Farbe und Größe, Schriftart und Schnitt lassen sich vorher einstellen, werden aber in verschiedenen Browsern unterschiedlich dargestellt.

Die voreingestellte Schriftart ist "Courier"

------

<p>
<font face="Courier New,Courier" color=red size=+1>
<pre>
<b>

_ _

SCHRIFT BILD

ODER
._ _.
/ / \ \
I O I
\ .^. /

MUSTER

<b>
</pre>
</font>
</p>

-----

ACHTUNG! Tabulatoren und Leerzeichen werden grundsätzlich unterschiedlich dargestellt!

Bild auf Höhe zentrieren

Zentriert Bild und Text auf der Seite unabhängig von der Fenstergröße, in der Höhe und in der Breite.

Die Tabelle paßt sich automatisch an Fensterhöhe und -breite an und das Bild füllt die Tabellenbreite voll aus (dieTabelle zentriert auch auf HÖHE, das reine Bild nicht).

Tabelle auf 100% Höhe und Breite mit Bild auf 100% Breite:

1) MSIE: keine Probleme.

<TABLE align=center width="100%" height="100%" Border=4 >
<TR align=center >
<TD align=center >
<A HREF="123.html">

<IMG SRC="welcome.gif" width="100%"
ALT="Welcome" Border=0 align=center>
</IMG>

</A>

</TD>
</TR>
</TABLE>

2) Mozilla:

Regel1: Keine <P> zwischen Body und Tabelle - auf keinen Fall oben.

Sonst wie MSIE

3) Netcape 4:

Kann Bilder mit Prozentangaben in Tabellen mit Prozentangaben nicht darstellen. Deshalb muß, wenn, auf Javascript zurückgegriffen werden:
(Ansonsten wird nur der Alternative Text ALT angezeigt)

<html>
<head>
<TITLE>NTC 4 - resize</TITLE>

<script type="text/javascript">

</script>

</head>

<body >

<TABLE align=center width="100%" height="100%" Border=4 >
<TR align=center >
<TD align=center >

<A HREF="123.html">



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

</script>

<noscript>
<IMG SRC="welcome.gif" width="250"
ALT="Willkommen" Border=0 align=center >
</noscript>

</IMG></A>

</TD>
</TR>
</TABLE>

</Body>
</HTML>

Senkrechte Linien

Waagerechte Linien werden mit <HR> erzeugt. Für senkrechte Linien zur Textbegrenzung existiert kein solcher Befehl. Man kann dazu ein GIF- Bild einbauen, beispielsweise "senkr. gif" und neben den Text stellen:

<IMG SRC="senkr.gif" width=2height=n align="left" >

(n = Länge der Linie). Eingegebener Text fließt nun neben der Abbildung.

Seiten-Layout

Seiten-Layout

Layout - Kriterien:

1. Auf jeder Seite:

2. Links: Menü
Rechts: Inhalt
Unten: Weiterführende Seiten

Navigationsleisten oben und Links anbringen!

3. Reihenfolge der Kriterien: Schnell, einfach, exakt, einfallsreich

4. Seiten links oben heller machen als rechts unten.

5. Wichtige Sachen / Logos oben links

6. Evtl. Pfad auf jede Seite: Website > Rubrik > Unterrubrik > Seite + Quick out / to

7. Zum Druck: Auf Größe = DIN A4 achten (Tabellen 600 Pixel breit fest)

oder Grundsätzlich bei Tabellen und CSS NUR Prozentwerte angeben!

Aus http://www.editorial.de/tricky/:

Ein nicht zu vergessendes Feature ist die HEIGHT- Deklaration im <TABLE>-Tag.

Hiermit läßt sich die Höhe einer Gesamttabelle definieren. Will man z.B. ein Element in der Mitte einer Seite unterbringen, definiert man HEIGHT="95%", und bei entsprechender Deklaration von ALIGN und VALIGN der Zelle ist das Objekt beinahe in der Mitte jeder Seite, egal, wie groß das Browser- Fenster ist. Man sollte (auch bei WIDTH) eine Deklaration auf "100%" vermeiden, da der Internet Explorer dann ab und zu unnötigerweise den Scrollbalken an der Seite einblendet.

Mehr Kontrolle über Tabellen relativer Breite Tabellen, deren Breite auf einen zur Seite relativen Wert definiert wurde, z.B. eine Tabelle, die sich auch bei wenig Inhalt über die gesamte Seitenbreite erstrecken soll, weil sie beispielsweise zur Seitegestaltung verwendet wird, sind in ihrer Interpretation nicht immer unbedingt eindeutig. Da haben Spalten häufig recht ungewöhnliche Breiten, so daß einer gleichmäßigen Aufteilung des Inhaltes keine Rede sein kann. Und sehr häufig ist es auch so, daß in diversen Spalten der Inhalt in seiner Breite schon fest steht, weil sie z.B. eine Grafik enthalten oder der Zeilenumbruch innerhalb der Zelle ausgeschaltet wurde (NOWRAP).

Mit folgendem Trick läßt sich die Ausweitung der ebengenannten Zellen auf das Minimum reduzieren, so daß zum einen das Verhalten der Tabelle vorhersehbar ist, und auch der Platz in den anderen Zellen maximiert wird. Hierzu läßt man einfach bei der Definition der nicht feststehenden Spalten die in der Breite vorbestimmten Spalten außen vor und gibt diesen Spalten eine Gesamtbreite von 100%:

<TABLE WIDTH="100%"><TR>
<TD>
<IMG SRC="..." WIDTH="Pixel"...>
</TD>
<TD WIDTH="100%">...</TD>
<TD NOWRAP> Text </TD>
</TR></TABLE>

-----------

Weitere Vorschläge:

1. In Umfangreicheren Seiten mit Microsoft Word 97 / 2000 Inhaltsverzeichnisse erstellen lassen (erstellt automatisch Verweise zu den Überschriften ) .

2. Bunte Seiten - Titel mit Word Art Erstellen: über die Zwischenablage in Microsoft Paint als BMP abspeichern und anschließend in ein GIF oder JPG umwandeln.

-----------

Ein paar wichtige Regeln:

* Möglichst präziser Titel - erleichtert auch spätere Änderungen

* Einheitliches Design - kleines Logo, eine Seite als Vorlage verwenden

* Bei Frames wird immer der Titel des Framset angezeigt!

* Klare Navigation - Hierachieebenen müssen erkennbar sein

* Bei Links muß klar sein, wohin die Reise geht - nicht: Klicken Sie hier!

* Lesbarkeit des Textes - kurze Zeilen, in nicht zu kleinem Font, kein Hintergrundbild

* Sparsam mit Grafiken umgehen - lange Ladezeiten nerven

* Achten Sie auf eine sinnvolle Größe der Dateien - zu kleine sind lästig beim Ausdrucken, zu große lästig beim Scrollen.

* Name, Adresse und Datum sollten in Klartext erscheinen

* Der Monitor strahlt anders als Papier, daher einen Pastell-Hintergrund nehmen.

* Auf der ersten Seite / auf jeder Seite sollte erscheinen:

- WER Autor
- WAS Thema
- WANN Datum
- WO Firma etc.

* Navigation auf den Seiten:
Ziel: Mit maximal drei Klicks zu dem jeweiligen Objekt

* Auflösung :
Genügt für das Web: 640 X 480 Pixel
1 Pixel ( 0,01mm )

640 Pixel ist auch die Standardbreite für Tabellen u. a. (paßt auf 14er Bildschirm)

-----------

Generell sollte jede Seite auch ohne CSS lesbar sein, wenn sie z.B. einzeln gespeichert offline gelesen wird.

Deshalb:

1) Grundformatierung in HTML vornehmen!

2) Schliff und Firlefanz in CSS darüber legen.

Dazu den CSS-Bereich auslagern mit <link rel="stylesheet" type="text/css" href="format.css" > und zur Prüfung die Seite in ein Verzeichnis ohne diese Datei kopieren.

-----------

Scrollbalken links

Scrollbalken links setzen

Ohne CSS

<BODY dir="rtl" ...>

oder

<DIV dir="rtl">

rtl=right to left, rechtsbündig;
Scrollbalken links

Auch möglich in <P> und <TEXTAREA>; macht diese Bereiche jedoch komplett rechtsbündig.

Abhilfe: Eine Hierarchie-Ebene darunter den Inhalt wieder auf dir="ltr" setzen:

<P dir="ltr">

Dieser Inhalt ist wieder linksbündig, behält aber den Scrollbalken links

</P>
</DIV>

Anm.: Merkwürdigerweise scheint eine Änderung der Ausrichtig auf [Ansicht aktualisieren] im Browser nicht zu reagieren

Der Scrollbalken zeigt sich jedoch nur, wenn das Fenster (oder der Block oder Absatz) in der Höhe (y) oder Breite (x) begrenzt und zu klein ist, um den Inhalt darzustellen; ansonsten rutscht der rechtsbündige Bereich nur rechts neben den nachfolgenenden linksbündigen.

Um das zu verhindern, muß über ein CSS-Style-Attribut der Scrollbalken erzwungen werden:

<DIV dir="rtl" style="height:120px; overflow-y: scroll;" >

rtl=right to left, rechtsbündig;
Scrollbalken links

<P dir="ltr">

Dieser Inhalt ist wieder linksbündig, behält aber den Scrollbalken links

</P>
</DIV>

Und so kann man gleich vollständig mit CSS arbeiten:

<STYLE type=text/css>

DIV
{

/* Scrollbalken immer sichtbar */
overflow: scroll;

/* oder: nur vertikaler Scrollbalken immer sichtbar */
overflow-y: scroll;

/* oder: horizontalen Scrollbalken verstecken */
overflow-x: hidden;

/* Höhe des Scrollbereich: height oder max-height */
max-height: 150px;

/* Weiter Alternativen: Inhalt abschneiden / nicht abschneiden / selbständig abschneiden */
overflow: hidden;
overflow: visible;
overflow: auto;

/*
Position Scrollbar (nicht alle Browser)
rtl = linksseitig
ltr = rechtsseitig (normal)
*/
direction: rtl;
}

/*
Wichtig- hebt bei linksseitigen Scroll die Rechstbündigkeit im Text selbst wieder auf:
Der Universalselektor * gilt für ALLE Elemente
*/

*{direction: ltr; }

</STYLE>

Blink und Marquee

Blink (Netscape 4) & Marquee (MSIE)

<BLINK><MARQUEE WIDTH="50%" SCROLLDELAY="0" >BIN UMGEZOGEN!   NEUE HEIMAT SIEHE UNTEN...  </MARQUEE></BLINK>

Ergibt alternativ Blinken (bei Netscape) oder Laufschrift (Marquee) bei MSIE

Hintergrund fixieren

Hintergrund fixieren

< BODY BGPROPERTIES="fixed" > Z.B. bei großen Hintergrund- Bildern

Nur in Microsoft Internet Explorer

In Netscape:
(über CSS)

<body background="bild.gif" style=background-attachment:fixed">
(imag 04/02 S. 74)

Keine Seitenränder

Dokument - Ränder auf 0 setzen

Keine Seitenränder

<Body marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 >

(Ein Satz für Netscape, der andere für den MSIE)

über CSS:

<STYLE TYPE="text/css">
body { margin-left:0px; margin-top:0px; margin-right:0px; margin-bottom:0px; }
</STYLE>

Nahtlose Frames

Nahtlose Frames

Internet Magazin 10 / 99 S. 52 ff:

Speziell Netscape:

Nahtlose Frames: Border = 0 und Framespacing = 0

Frames: < Frameset border=0 framespacing=0 > Beide, wg. Netscape / Internet Explorer

+ <Frame src=xxx frameborder=0 > !! für Internet Explorer (alt)? Anders geht's nicht.

<Body marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 >

Sowie NORESIZE

Schriften

Schriften

Wenn Sie kein FONT FACE benutzen, erscheint Ihr Text in der üblichen Standardschrift Times. Wollen Sie beispielsweise einen Teil Ihres Textes in einer nüchternen Helvetica - Art sehen, sieht der HTML - Befehl so aus:

< FONT FACE = "Arial, Geneva, Helvetica, Swiss" > Das Wetter < / FONT >

Da jeder Computer unterschiedliche Schriften zur Verfügung hat, sollten Sie nur solche
Namen verwenden, die sehr gebräuchlich sind, eben wie Times oder Arial. Sie können nämlich nur bestimmen, welche Art, nicht, welche Schrifttype der Browser zur Anzeige Ihrer Homepage nutzen soll. Auf Nummer Sicher gehen Sie, wenn Sie mehrere gleichartige Schriften angeben, wie in unserem Beispiel mit Arial und Co. ; diese Kombination hat den Vorteil, daß sich diese Schriften so ähneln, daß sich Ihr Layout kaum verändert, egal, welche dieser Schriften der Browser verwendet.

FONT SIZE: 1-7

< BODY >
< BASEFONT SIZE=3 > an den Anfang;

Schriften wie Verdana oder Georgia benutzen, diese sehen auf dem Schirm bessere aus und werden von Microsoft als Web -Fonts auf CDs kostenlos vertrieben.

Link Font

Font- und Link- Farbe

Sehr witzig: VLINK= Selbe Farbe wie Hintergrund: Verschwindet ! "Missing Links"

PS : Wenn man den FONT COLOR Tag innerhalb des A HREF - Tags anbringt, kann man die Linkfarbe individuell gestalten.

Das wird von WYSIWYG- Editoren normalerweise nicht gemacht.

<A HREF="wir.html"><FONT COLOR="red">klicken</FONT></A>

Allerdings ändert der Verweis seine Farbe dann nicht mehr nach dem aktivieren.

(Vormals nur in Netscape)

<FONT COLOR=""> ergibt die vom Anwender eingestellte Standard - Schriftfarbe

--------

LINK, ALINK und VLINK ist auch für die Farbe der Umrandung von aktiven Grafiken zuständig, wenn dort nicht Border="0" gesetzt wurde.

Mehrere Absätze

Mehrere Absätze - Ohne CSS

1. Im allgemeinen werden mehr als zwei <P> - Absätze hintereinander nicht angezeigt. Um sicherzugehen, ein Leerzeichen   dazwischen anbringen.

<P> 
<P> 

2. Ein Bereich von mehreren Absätzen kann man mit dem Befehl <div> zusammengefaßt werden. So kann man z.B. mit einer Befehlsfolge wie

<div align=center>
<p>
erster zentrierter Absatz
<p>
zweiter zentrierter Absatz
</div>

eine Folge von mehreren zentrierten Absätze erreichen.

Seitenfarbwechsel

Seitenfarbwechsel

<BODY BGCOLOR="#ffffff" onBlur="document.bgColor='#FFFFFF'" onFocus="document.bgColor='#98C5A0'" >

Vergessen Sie nicht den Farbwert für die Hintergrundfarbe beim Laden des Dokuments anzugeben. Die Hintergrundfarbe hat mit diesem Script vorerst nichts zu tun.
Durch den eventHandler
* onFocus bewirken Sie die Farbänderung.
* onBlur ändert die Farbe zum zweitenmal.

Listentypen

Listentypen

<UL Type=square / circle / disc / >

<OL Type= a / A / I ... >

Farbige Listen

Internet Magazin 10/04: Farbige Listen

<H1>UL-STYLE:</H1>

<style>
ul {color : red}
p {color : black}
</style>

<P>
paragraph
<UL>
<LI> <P>Item 1</P>
<LI> <FONT COLOR="GREEN">Item Green</FONT>
</UL>

http://project-icarus.de/erleuchtet/autostyle/_einzelne/ul-styles.htm

Listen mit eigenen Bullets

Listen mit eigenen Bullets

<DL>
<DD><IMG SRC=Bullet.gif>Item1</DD>
<DD><IMG SRC=Bullet.gif>Item2</DD>
</DL>

Kein DT!

---

Noch einfacher mit CSS:

Li {list-style-image: url(bullet.gif);}

Navigation

Datumsabfrage im Verweis

Falls Termindaten ö. ä. in HTML - Dateien mit Datumsanteilen im Namen abgelegt wurden, können diese automatisch aufgerufen werden:

<script type="text/javascript">

</script>

Links ohne Unterstreichung

Links ohne Unterstreichung

CSS

Besuchte Links ohne Unterstreichung beim drüberfahren verändern, mit Unterstreichung und farbig

A:visited {color:grey;text-decoration:none;}
A:hover {color:red;text-decoration:underline;}

in DER Reihenfolge.

a:link
a:visited
a:focus
a:hover
a:active

Frames_URL

Frames-URL

In einem Frameset mit den Maßen ( 1, * / alles andere "NO" ) lassen sich neue Seiten auf fremden Servern darstellen, wobei im Browser die ( ursprüngliche ) Frameset - bookmark und nicht die neue URL erscheint!

News: Frames mit Scrollbalken versehen ( ! ) und als Text abspeichern: News.txt. Diese Datei im Frame laden.

Minimum Frameset

Minimum Frameset

<HTML>
<HEAD>
<META NAME="KeyWords" CONTENT="..." >
<META NAME="robots" CONTENT="index, follow" >
<TITLE>Infos - Frameset Deutsch</TITLE>
<base target="page">
</HEAD>

<FRAMESET COLS="18%,82%" border=0 framespacing=0>
<FRAME SRC="menu.htm" NAME="menu" MARGINWIDTH=10 MARGINHEIGHT=10 frameborder=0>
<FRAME SRC="page.htm" NAME="page" MARGINWIDTH=10 MARGINHEIGHT=10 frameborder=0>
</FRAMESET>

<NOFRAMES>
<BODY>
<P>
Das Verzeichnis im Framelosen Bereich:

<P>
</BODY>
</NOFRAMES>
</HTML>

Vordefinierte Fensternamen

Targets ( Verweis - Ziele )

Allegemeine Festlegung in Frames:

< HEAD >
< Base Target = "Frame-Name" >
...
< / HEAD >

Bereits belegte Target-Namen:

_self: > Aktuelles Fenster ( Default )
_blank: > Neues, leeres Fenster
_parent: > Aktuelles Frameset
_top: > Browserfenster

Target="_blank" bewirkt, daß ein neues Fenster geöffnet wird und das alte erhalten bleibt.

Target="_new" wird manchmal bei Framesets genommen und bewirkt in etwa das gleiche - "_top" = Ganzbild; "_parent" = die ursprüngliche Anzeige.

Target="_parent" öffnet den Verweis im übergeordneten Fenster. Falls es kein übergeordnetes Fenster gibt, im gleichen Fenster. Beendet ein Frameset, indem es die ursprüngliche Anzeige vor Aufruf des Framesets zeigt. (?)

Target="_top" öffnet den Verweis im Ganzbild. Falls es kein übergeordnetes Fenster gibt, im gleichen Fenster.

Ansonsten kann jeder beliebige Namen vergeben werden.

Formulare

Zurück zum Script-DB Eingang

http://project-icarus.de/erleuchtet/Script-DB/index.htm

Ausfüllen

Textarea ohne Scrollbalken

Textarea ohne Scrollbalken I

Ein Textfeld ohne Scrollbalken ausführen zu lassen ist möglich über css:

textarea
{
overflow:auto;
/*overflow:hidden;*/

background-color : white;
border: Medium;

/* NUR IE: */

scrollbar-3d-light-color:#C0C0C0;
scrollbar-arrow-color:#FFFFFF;
scrollbar-base-color:#374962;
scrollbar-dark-shadow-color:#808080;
scrollbar-face-color:#FF0000;
scrollbar-highlight-color:#FF2311;
scrollbar-shadow-color:#FFFF80;

}

<TEXTAREA NAME="Eingabe" ROWS="10" COLS="55" wrap="off" >
</TEXTAREA>

Ist jetzt der Seitenhintergrund auch weiß, dann verschwindet der Textarea - Eingabebereich als solcher, bis seine Dimensionen überschritten werden; in dem Fall erscheinen die Scrollbalken (wieder). Allerdings auf der Innenseite, so daß der Text jedesmal neu umgebrochen wird. Deshalb wrap=off. (Ansonsten sollte man standardmäßig wrap="soft" angeben, um den Text auch im alten Netscape 4.x umbrechen zu lassen)

overflow:hidden statt overflow:auto bewirkt, daß die Scrollbalken nie angezeigt werden.

Mitwachsende Formularfelder

Tabulatorsprünge erzwingen

In Formularen Tabulatorsprünge durch TABINDEX erzwingen

<Input type = "Radio" Name = "xysn" Value = "1" TABINDEX = "2" >
<BR>

<Input type = "Radio" Name = "blahblah" Value = "2" TABINDEX = "1" >

Ruft die beiden Eingaben in umgekehrter Reihenfolge auf

Funktioniert in modernen Browsern auch bei normalen Verweisen: <A HREF TABINDEX = ...

Formularfeld vormarkieren

Ein bestimmtes Formularfeld vormarkieren:

<body Onload="document.forms.Suche.SuchTextEingabe.select();document.forms.Suche.SuchTextEingabe.focus();">

In DER Reihenfolge! Erst select, dann focus.

OnClick="value=' ';"

Leert das Verzeichnis wieder.

- - - -

Felder markieren

Mit CSS:

'input:focus' reagiert auf das Anklicken von Formular-Elementen (Felder und Submit-Button)

input:focus { background-color : #000000;}

Css bei focus geht allerdings nur bei gecko-basierten Browsern.

Der MS Explorer benötigt Javascript:

<input type=text
onFocus="this.style.backgroundColor='#000000'"
onBlur="this.style.backgroundColor='#FFFFFF'"
>

Oder:

onChange="this.style.backgroundColor='#FFFFFF'"

Vorausgefülltes Formularfeld

Schreibt Text in ein bereits vorausgefülltes Formularfeld, ohne es vorher löschen zu müssen

Internet Magazin 10/01

<form method="POST"
action="http://www.blahblah.de" name="suchformular">
<input size ="8" type="text" name="suche" value="suchbegriff?"
onFocus="javascript:if (document.suchformular.suche.value == 'suchbegriff?')
document.suchformular.suche.value = ' ' ;"> <input border="0"
src="../images/go.gif" type="image" width="28" height="18" >
</form>

oder:

Internet Magazin 07/01

<Input type="text" value="vorgabe" OnFocus="if(this.value=='Geben Sie hier etwas ein!') this.value=' '" OnBlur="="if(this.value==' ')this.value='vorgabe'">

oder:

Internet Magazin 09/02

<Input type="Internet-Magazin" value="Internet-Magazin" OnFocus="if(this.value==' Internet-Magazin ') this.value=' '" OnBlur="if(this.value==' ') this.value=' ' Internet-Magazin ">

Oder: Internet Magazin Online

Anleitung:

1. Script im <HEAD> Teil der Seite einfügen.

2. Folgendes onFocus Element in das gewünschte Forumularobjekt einfügen: onFocus="TextWeg(this)" Dieses bei jedem Formularobjekt wiederholen, bei dem der default Wert gelöscht werden soll.

Script:

<head>

<script>
function TextWeg(das_Feld){
if (das_Feld.defaultValue==das_Feld.value)
das_Feld.value = ""
}
</script>
</head>

<body bgcolor="#FFFFFF">
<form>
<input type="text" value="Der default Wert" onFocus="TextWeg(this)">
</form>

</body>
</html>

Ersetzt Eingabe durch Sternchen

Ersetzt in Formularen die Eingabe durch Sternchen *

<Input name="irgendwas" size="20" type="password" >

normal ist:

<Input name="irgendwas" size="20" type="text" >

Prüfen

Absenden sperren

Absenden vorläufig sperren:

<HEAD>

<Script>

Function prf()
{

if (document.forms.DDD.wasimmer.checked)
{document.forms.DDD.absenden.disabled=false;}

else
{document.forms.DDD.absenden.disabled=true;}

}

</Script>

</HEAD>

<BODY BGCOLOR="#ffffff" onload="document.forms.DDD.reset();">

<Form Name="DDD" Action=dahin>

<Input type="checkbox" value="OK" name="wasimmer" Onclick="javascript:prf();"> Alles OK

<Input type="submit" name="absenden" value="los" disabled>

</Form>

(Internet Magazin 07/06)

- - - -

Auch so läßt sich auch das Absenden eines Formulars mit einer Sicherheitsabfrage abfangen:

<HEAD>

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


</SCRIPT>

</HEAD>

<BODY BGCOLOR="#ffffff" onload="document.forms.DDD.reset();">

<Form Name="DDD" Action=dahin>

<INPUT TYPE=button VALUE="Ja!" > Machen

<BR>

<INPUT TYPE=button VALUE="LOS" Onclick="javascript:los();">
</FORM>

- - - -

<BODY onload="document.forms.DDD.reset();" ... dient dazu, die Checkbox auf jeden Fall beim Laden der Seite zu deaktivieren

------------

Variante 2: Verhindert, daß ein Formular versehentlich zweimal abgesendet wird.

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

</SCRIPT>

<FORM NAME="Formular" ACTION=dahin>

...Input irgendwas

<INPUT TYPE= Button NAME="Verwerten" VALUE="Los," OnClick="Abschicken();">
<BR>

- Bitte nur einmal abschicken; Werte erscheinen sonst mehrfach -
<INPUT type="checkbox" VALUE="0K" NAME="Nachfrage" >[OK]

</FORM>

Formulare Prüfen 1

Formulare Prüfen

<html>
<head>
<title>Formularprüfung</title>

<script language="Javascript">



</script>

</script>
</head>
<body>

<H1> Formulare </H1>
<Form Name="Form1" OnSubmit="return pruef();"
acti action="mailto:hier@da.de"method="post" enctype="text/plain">

Namen:
<Input Name="userName" Type=text></input>
<Input Name="Los" Type=Submit value="Abschicken"></input>
</Form>

</head>
<body>

-------

AUCH:

<Input Name="userName" Type=text Size=80 Value="Hier bitte Namen eingeben" OnChange="javascript:if(this.value=='' ) {alert(' Bitte Namen eingeben ' )}">

(Prüft auf leeres Feld)

-------

AUCH:

Formulare Prüfen 2

http://project-icarus.de/erleuchtet/autostyle/_wortliste/form_wortliste.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>



<SCRIPT language="JavaScript" type="text/javascript" src="form_wortlist.txt"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">


</SCRIPT>

<TITLE>Formular-Eingabe mit JavaScript-Wortprüfung</TITLE>

</HEAD>

<BODY BACKGROUND="" BGCOLOR="#ffffff" TEXT="#000000" LINK="#0000ff" VLINK="#0000ff"
ALINK="#ff0000">

<P>
<A HREF="../" target="_top">zurück</A>
<H1>
Formular-Eingabe Wortprüfung
</H1>

<P>
<U>Testet auf Worte in 'form_wortlist.txt'</U>:
<P>



<SCRIPT language="Javascript">

</SCRIPT>

<P>
- um bei erlaubter Eingabe das Formular abzuschicken
<P>



<FORM Name="Formular1" OnSubmit="return checkwort();" method="post" enctype="text/plain">

Namen:

<INPUT Name="userName" Type=text>
<INPUT Name="Los" Type=Submit value="Abschicken">

</FORM>

<P>
</BODY></HTML>

Achtung:

Da die 'erlaubten Worte' in JavaScript entweder im Quelltext der Seite einzusehen sind, oder die Textdatei mit ihnen beim vollständigen Speichern der Webseite auf der Festplatte landet, ist die Methode als echte (Pass-) Wortprüfung ungeeignet, und dient nur als Vorfilter und Hinweis an den Benutzer.

Ein Formular- Button (egal welcher Art) hat darüber hinaus die Eigenschaft, das Formular auch dann abzuschicken, wenn JavaScript nicht eingeschaltet ist oder einen Fehler aufweist - was schnell passieren kann.

Um das zu verhindern, kann man entweder den Formular- Button durch einen JavaScript- Verweis ersetzen:

<Input Name="Los" value="Abschicken" onclick="javascript:checkwort();" NOtype = "button">

- was dann wieder Schwierigkeit mit sich bringt, die ENTER- Taste zum Abschicken des Formulars zu benutzen -

oder aber (wie hier) die Action- Anweisung aus dem Formular selbst zu entfernen und in die JavaScript- Funktion einzubauen:

docu document.Formular1.action="mailto:hier@da.de";

In dem Fall kann das Formular nur dann abgeschickt werden, wenn JavaScript korrekt arbeitet und die Sperre somit aktiv ist.

Formulare Prüfen 3

Verlangt eine Sucheingabe von mindestens 3 Buchstaben

<HTML>
<HEAD>

<script type="text/javascript">

</script>

</HEAD>

<BODY>

<form name="Suche" action="suche.php" method="post" onSubmit="return chkFormular()">

<input name="Sucheingabe" type="text" size="50" maxlength="50" value="a">

<input type="submit" value="Suchen">

</form>

</BODY>
</HTML>

Formulare Prüfen 4

// Prüft, welches Element eines Formulars gerade aktiviert ist:
// - und löst mit 'submit' eine Aktion aus -

function pruefen()
{
var Formular = document.forms["Formular-Name"];
var InputAnzahl = Formular.getElementsByTagName("input").length;

alert (InputAnzahl);

for (y=0; y < InputAnzahl; y++)
{

if (Formular.elements.Element-Name[y].checked == true)
{
alert ((y+1) + " IST CHECKED");
Formular.submit();
}

else
{
alert ((y+1) + " nicht checked");
}
}

}

// Lädt das Skript 1 Sekunde, nachdem die Seite (vollständig) geladen wurde:

window.onload = window.setTimeout('pruefen()', 1000);

Ohne Sonderzeichen

Die Eingabe in einem Formularfeld nachträglich auf Buchstaben und Ziffern reduzieren:

OhneSonderzeichen = Eingabe.replace(/\W/gi,"");

Aus: Internet-Magazin 02/06

E-Mail-Adresse Prüfen

Prüfen auf Gültigkeit der E-Mail-Eingabe:

Internet Magazin Online

Beschreibung: Dieses Script überprüft den Inhalt einer Textbox, ob eine gültige E-Mail Adresse eingegeben wurde.
Folgende Kriterien werden überprüft:

- Mindestens ein Zeichen vor dem &quo "@"

- &quo "@"nach vorangestellten Zeichen

- Midestens ein Zeichen nach dem &quo "@",welches von einem Punkt (.) gefolgt wird.

- Diesem Punkt folgt entweder eine zwei oder drei Zeichen lange Zeichenkette.

----

var kette = document.forms.Eingabe.EMail.value;
var filter = /^.+@.+..{2,3}$/;
if (filter.test(kette) == false)

{
alert("Bitte eine gültige E-Mail-Adresse eingeben!");
document.forms.Eingabe.EMail.focus();
return false;
}

Eingabetext zählen

Zählen, wie viele Zeichen in ein Formularfeld eingegeben wurden:

<FORM NAME=TEST>

<TEXTAREA NAME="Eingabefeld" ROWS="10" COLS="55"
onKeydown="zaehlen()" onClick="zaehlen()" > </TEXTAREA>

<P>

<INPUT TYPE="text" NAME="ZZ" VALUE=" " SIZE="12" MAXLENGTH="15" readonly>

  

<SCRIPT type="text/javascript" language="JavaScript">
<!--

function zaehlen()
{
var ZZL = document.TEST.Eingabefeld.value.length;
document.TEST.ZZ.value = (ZZL + " Zeichen") ;
}

// Damit das Feld nicht als solches auffällt, kann man es mit CSS im Java Script in der Hintergrundfarbe tarnen - das geht im IE besser als über CSS-Class und SPAN:

document.TEST.ZZ.style.backgroundColor='blue';
document.TEST.ZZ.style.border='0';

</SCRIPT>

</FORM>

"readonly" bewirkt, daß das (Ausgabe-) Textfeld nicht beschrieben werden kann.

Buttons

Button Stylen

<form action=123.htm>

<input type="submit" name="btnG" value="Abschicken" style="width: 140" width="140"
>

<input type="image" name="btnG" src="submit.gif" alt="abschicken" Align="bottom" border="0" width="75" height="19"
>

</form>

----

width="140" für Netscape 4

Weitere:

style=
background-color: white;
border-bottom-color: red;
border-right-color: red;
color: red; (=Schrift)

Internet Magazin 08/04

Text und Button

Text - und Button - Links mit Erklärung

"ALT" -Tag für Links:

<A HREF="" TITLE="Zur Hauptseite" > (Nur ab Microsoft Internet Explorer 5 - evtl. auch Netscape 6 )

Wird vom Internet Explorer für Sehbehinderte vorgelesen!

Geht im Internet Explorer auch in Formular - Tags:

<form method="GET" action="http://www.google.com/search" target= "MainFrame">
...

<input type="submit" name="btnG" value="Google Suche" onclick="return check()" title="Seiteninterne Suche">
</form>

- - - -

Als type=" " läßt sich im Prinzip alles eintragen; läßt man es weg, ensteht ein aktives Textfeld

Verweis als Button

Ergibt den Text-Verweis "Abschicken" als Absende-Button für ein Formular:

<a href="javascript:document.forms.Name.submit();">Abschicken</a>

von http://www.drweb.de/

----

oder auch:

<FORM ACTION=http://... METHOD=GET>

<INPUT TYPE="SUBMIT" VALUE="Dahin">

</FORM>

JavaScript-Button

<FORM>

<input type="button" onClick="javascript:self.location.href='weiter.htm';" value="Weiter!">

</FORM>

Man kann auch beide kombinieren, um für alle Fälle gerüstet zu sein:

<FORM ACTION="weiter.htm" METHOD="GET">

<INPUT TYPE="SUBMIT" VALUE="Weiter!" onClick="javascript:self.location.href='weiter.htm';" >

</FORM>

Allerdings wird dann der FORM ACTION - Befehl nicht ausgeführt; man muß in "weiter.htm" für diesen Fall eine Fehlermeldung einbauen.

NB: 'parent.location' statt 'self.location'
bewirkt, daß alle Frames übersprungen werden und die angesproche Seite im übergeordneten Fenster geöffnet wird.

- - - -

Als type=" " läßt sich im Prinzip alles eintragen; läßt man es weg, ensteht ein aktives Textfeld.

Theoretisch ließe sich auch die Beschriftung (value="") über Javascript (document.write) steuern.

Button mit Link

Button mit (JavaScript-) Link:

<FORM>
<INPUT TYPE="button" VALUE="Button-Beschriftung" ONCLICK="window.location.href='.../irgendwo.xy.de/1.htm'">
</FORM>

bzw.:

<FORM>
<INPUT TYPE="button" VALUE="Button-Beschriftung" ONCLICK="EineFunction();" >
</FORM>

Statt TYPE="button" geht auch TYPE="submit", dann wird automatisch das Formular mit verarbeitet.

-----------

oder:

<FORM>

<A HREF="yxz.htm"> <INPUT TYPE="button" value="Beschriftung"> </A>

</FORM>

-----------

Auch möglich, aber langsamer, da die komplette Seite neu geladen wird:

<FORM ACTION="#Start" method="post">

<input type="submit" value="Zum Start">

</FORM>

Button mit Bild

Button mit Bild

Internet Magazin 8/02

<FORM>
<INPUT TYPE="image" src="button.gif">
</FORM>

Leider funktioniert das nur bei den Sende- Buttons, nicht aber für den Reset- Button. Mit Java Script geht es doch, und Besucher ohne Java Script sehen den gewöhnlichen Grauen Button:

<FORM>
<script type="text/javascript">

</script>
<noscript><input type="reset" value="löschen"></noscript>
</FORM>

- - -

<FORM METHOD=POST NAME="suche" ACTION="...">
<CENTER>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

<NOSCRIPT>
<INPUT TYPE=SUBMIT VALUE="Start">
</NOSCRIPT>

</CENTER></FORM>

von http://www.editorial.de/tricky/

-------

Geht immer:

<button type="submit" Name="Los" value="" style="cursor:pointer" ><IMG SRC="xy.gif"> lalala </button>

(Internet Magazin 07/06)

(Der cursor-style sorgt dafür, daß überhaupt ein Zeiger erscheint)

Tabellen-Buttons

Tabellen-Buttons

Da die Aufschrift von Schaltflächen immer variiert, kann man eine Grafik als Hintergrundbild in eine Tabellenzelle einbauen und die Beschriftung des Buttons als gestalteten Text in den Zelleninhalt hineinschreiben.

Da sich dabei die Verlinkung über HTML nur auf den Beschriftungstext bezieht, sollte man die Verlinkung nicht auf die Schrift legen, sondern die Zelle; Mit einem OnClick- Event:

(Der cursor-style sorgt dafür, daß überhaupt ein Zeiger erscheint)

<P>
Table - Buttons
<P>
Achtung: Ergibt je nach Browser unterschiedliche Border-Farben! Alternativ: Als CSS-Style formatieren
<P>
<TABLE BORDER=4 Bordercolor="DarkGreen" CELLSPACING="0" CELLPADDING="0">
<TR >
<TD>

<TABLE BORDER=4 Bordercolor="Yellow" CELLSPACING=4 CELLPADDING=4 >
<TR>
<TD onclick="javaScript: window. location. href = 'Adresse 1';" style="background-color: rgb(255, 204, 51); cursor:pointer"
width="10" background="XXX.GIF">Beschriftung_1</TD>
</TR>
</TABLE>

<TABLE BORDER=4 Bordercolor="Yellow" CELLSPACING=4 CELLPADDING=4 >
<TR>
<TD onclick="javaScript: window. location. href = 'Adresse 2';" style="cursor:pointer"
onMouseOver = "this.bgColor='#CCCFCC'" onMouseOut = "this.bgColor='#FFFFFF'"
width="10" background="XXX.GIF">Beschriftung_2</TD>
</TR>
</TABLE>

<TABLE BORDER=4 Bordercolor="Yellow" CELLSPACING=4 CELLPADDING=4 >
<TR>
<TD onclick="javaScript: window. location. href = 'Adresse 3';" style="cursor:pointer"
onMouseOver = "this.bgColor='#DFCFCC'" onMouseOut = "this.bgColor='#FFFFFF'"
width="10" background="XXX.GIF">Beschriftung_3</TD>
</TR>
</TABLE>

</TD>
</TR>
</TABLE>

Technisches

checked und selected

Früher genügte es, in HTML- Formular- Auswahllisten

<SELECT size="1" Name="Auswahl" width="100">

einer der Optionen mit "SELECTED" zu belegen, um diese als augewählt zu aktivieren.

Das war eindeutig.

Im Zuge des alles komplizierter machens soll es nun heißen:

<option value="Wert" selected="selected">etwas </option>

- wie übrigens auch checked="checked" in Checkboxen.

Allerdings ist es nun glücklicherweise oder leider so, daß die Browser immer noch das alte "selected" bzw. "checked" interpretieren. Was dazu führt, daß es einerseits völlig gleichgültig ist, was als Wert angegeben wird -

<option value="Wert" selected="mumpitz">

funktioniert genauso wie

<option value="Wert" selected="">

als Auswahlkriterium -

wie andererseits auch dazu, daß eine Definition des Wertes für "selected" bzw. "checked" in JavaScript oder PHP zu keinem Ergebnis führt.

Wenn, dann muß die ganze Variable selbst (checked="x" bzw. selected="y") - mit oder ohne Wert - beispielsweise in PHP vollständig ausgeschrieben werden, um die Auswahl in der Auswahlliste auch für den Benutzer sichtbar zu machen und festzulegen.

Einzig mit selected == true, als Alternative zu selectedIndex (=Auswahl Nr) in JavaScript-Abfragen kann etwas erreicht werden.

Formularteile als Verweise

A: Das Script für den Dateikopf:

<SCRIPT LANGUAGE="JavaScript">

</script>

Checkbox mit Erweiterung

<form name=form>
<input type=checkbox name=check>
<a href="" onClick="changeBox('document.form.check');return false">Klicken Sie hier!</a>
</form>

B: Das Script für den Dateikopf:

<SCRIPT LANGUAGE="JavaScript">

</script>

<form name="form">
<input type="radio" name="link"
onClick="go('../faq.shtml/');"> FAQ
</form>

von: http://www.drweb.de/

Unterschiedliche Aktionen

Man kann von einem Formular aus mit mehreren Submit-Buttons verschiedene festgelegte Werte abschicken, ohne daß eine Auswahl getroffen werden muß:

<FORM ACTION="lala.php" METHOD="POST">

Initialisierung des Wertes - 1X!

<INPUT TYPE="hidden" NAME="Wert" VALUE="null">

...

<INPUT TYPE=submit Value="Eins" Onclick="javascript:document.forms[0].Wert.value='1'; ">

<INPUT TYPE=submit Value="Zwei" Onclick="javascript:document.forms[0].Wert.value='2'; ">

usw.

Formular in einem anderen Frame

Wenn man ein Formular in einem anderen Frame abschicken will, sollte man auf das Fenster in seiner Reihenfolge 0,1,2... zurückgreifen; der Name ist unsicher. Evtl. müßte der Pfad verkürzt werden, damit alle Browser diesen intrepretieren:

DieSeite = parent.frames.name;

DieSeite.document.FormularName.submit();

Ansonsten:

parent.frames[0].document.FormularName.submit();

Verschiedenes

Zurück zum Script-DB Eingang

http://project-icarus.de/erleuchtet/Script-DB/index.htm

Automatismen

Onclick in Javascript

Onclick-Funktion in Javascript auslösen:

Ziel ist es, beim Klicken auf einen Verweis Aktionen mit eben diesem Verweis auszulösen, ohne die Onclick-Funktion in das HTML das Verweises hinein schreiben zu müssen.

Dazu muß JavaScript erst einmal wissen, um welchen Verweis es sich handelt. Dazu werden die Verweise auf der Seite gezählt, durchnumeriert und ihre Adressen und Zielfenster in zwei Arrays gespeichert.

Wird nun auf den HTML-Verweis geklickt, liest folgendes JavaScript die Nummer des Verweises aus, holt sich die zugehörige Adresse und Zielfenster aus den jeweiligen Arrays und öffnet die Seite.

var url;
var ziel;
var Orte = new Array();
var Ziele = new Array();

for (var i = 0; i < document.links.length; ++i)
{

var DocVerweis = document.links[i];

// Verweisnummer pnum selbst erteilt:
DocVerweis.pnum=i;

url = String(DocVerweis);
ziel = DocVerweis.target;

Orte[i] = url;
Ziele[i] = ziel;

// TEST:
// alert (Orte.length);
// alert (Orte[i]);
// alert (Ziele.length);
// alert (Ziele[i]);

function clicka()
{
var Verweisnummer = this.pnum;

// TEST:
// alert(this.pnum);
// alert("Verweisnummer: "+Verweisnummer);

// alert (Orte[Verweisnummer]);
// alert (Ziele[Verweisnummer]);

NeuesFenster = window.open(Orte[Verweisnummer], Ziele[Verweisnummer], "width = 400,height = 300,top = 50,left = 50,resizable = yes,scrollbars = yes,menubar = yes,location = yes,toolbar = yes,status = yes");

FensterFocus = NeuesFenster.focus();
}

DocVerweis.onclick = clicka;

}

Zu finden in:

http://project-icarus.de/erleuchtet/hilfe/autoform.htm

JS Indexnummern zuordnen

Indexnummern auslesen und zuordnen

JavaScript zählt automatisch alle HTML-Elemente durch und vergibt ihnen Indexnummern ab 0. Dadurch lassen sich einzelne Elemente mit ihrer Indexnummer ansprechen - nur welche ist das?

Folgendes Script liest die Indexnummern beliebiger HTML-Elemente einer Seite dynamisch aus und ordnet ihnen diese zu, so daß darauf zugegriffen werden kann, auch wenn der Aufbau der Seite nachträglich verändert wird. Jedes dieser Elemente kann später mit dieser Nummer identifiziert werden.

Zählt und gibt die Verweise aus:

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

</HEAD>

<BODY OnLoad="Indexzuordnen();">

<H1>JS Indexnummern zuordnen</H1>

<P>

<A HREF="hilfe.htm" Title="Zur Hilfe"
onMouseOver="Anzeigen(this.IN); return true;" onFocus="Anzeigen(this.IN);
return false;">Hilfe</A>
<P>

<A href="impressum.htm" Title="Zum Impressum"
onMouseOver="Anzeigen(this.IN); return true;" onFocus="Anzeigen(this.IN);
return false;">Impressum</A>
<P>

<B>Verweise Zusammenfassen</B>

<P>

Zählt und gibt die Verweise aus:
<P>

----------

<P>
<BR>

<U>Wie viele Verweise gibt es auf der Seite</U>?

<SCRIPT LANGUAGE="Javascript">
 </SCRIPT>

<P>
<U>Welche Verweise gibt es auf der Seite</U>?
<P>

<SCRIPT LANGUAGE="Javascript">
 </SCRIPT>

<P>

Internet Magazin 6/05 S. 31 ff
<P>

</BODY></HTML>

Neben dem Titel können in allen derartig ansprechbaren HTML-Elementen (d.h. auch DIV-Bereiche!) auch Id, Name oder andere Attribute abgefragt und jeweils mit allgemeingültigen Anweisungen verknüpft werden.

Allerdings müssen die verschiedenen HTML-Elemente getrennt von einander behandelt werden, um ein Überschneiden der ID-Nummern zu vermeiden.

---

Siehe: http://project-icarus.de/erleuchtet/hilfe/autoform.htm

Verweise automatisch formatieren I

Verweise je nach Eigenschaften mit JavaScript und CSS formatieren:
(auch mit anderen HTML-Elementen möglich)

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

<style type="text/css">

</style>

</HEAD>

<BODY onload="window.setTimeout("AVerweis()", 500);">

<H1>Verweise automatisch formatieren</H1>

<P>
<A HREF="hilfe.htm" Title="Zur Hilfe"
onMouseOver="Anzeigen(this.IN); return true;" onFocus="Anzeigen(this.IN);
return false;">Hilfe</A>
<P>
<A href="impressum.htm" Title="Zum Impressum"
onMouseOver="Anzeigen(this.IN); return true;" onFocus="Anzeigen(this.IN);
return false;">Impressum</A>
<P>

---

<P>

Achtung:

<P>

Die Funktion "AVerweis()" muß z.B. mit

<SCRIPT LANGUAGE="Javascript">
 </SCRIPT>

<P>

NACH dem Laden der Seite aufgerufen werden.

<P>

</BODY></HTML>

Verweise automatisch formatieren II

JavaScript zählt automatisch alle HTML-Elemente durch und vergibt ihnen Indexnummern ab 0, so daß auf sie zugegriffen werden kann, auch wenn der Aufbau der Seite nachträglich verändert wird.

Verweisen (Links) beispielsweise können so über CSS je nach Art mit folgender Funktion automatisch ein bestimmtes Format zugewiesen werden, wenn diese, wie hier, beispielsweise im Titel des Verweises zum Ausdruck gebracht wurde.

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

</HEAD>
<BODY ONLOAD="linkformat();" text="black" link="blue" >

<P>
<A HREF="lala.htm" Title="Bloedsinn">Lala</A>

<P>

</BODY></HTML>

Will man die CSS-Formatierung in eine zentrale Datei auslagern, kann eine eigene 'Klasse' vergeben werden:

if (document.links[i].title == "Bloedsinn")
{
document.links[i].className ='gruen';
}

Diese 'Klasse' wird dann beispielsweise in einer externen .CSS-Datei für alle HTML-Dateien formatiert:

/*
Grüne Verweise
*/

a.gruen {color: green}

/*
Weitere Verweis-Formatklassen, in DER Reihenfolge:
:visited
:focus
:hover
:active
*/

a.gruen {color:green;}
a:visited.gruen {color:red;}
a:focus.gruen {color:green;}
a:hover.gruen {color:green;}
a:active.gruen {color:green;}

---

Ausführlicher:

Siehe: http://project-icarus.de/erleuchtet/hilfe/autoform.htm

JS-Array automatisch nummerieren

Statt

a[1] = "yxz" ;
a[2] = "yxz" ;
a[3] = "yxz" ;
a[4] = "yxz" ;
a[5] = "yxz" ;

Das Array einfach selber hochzählen lassen:

i=0

a[i++] = "yxz" ;
a[i++] = "yxz" ;
a[i++] = "yxz" ;
a[i++] = "yxz" ;
a[i++] = "yxz" ;

(Aus: Internet Magazin)

Siehe auch:

"Verweise Zusammenfassen"

Verschiedene CSS Styles laden

Styles dienen u. a. dem Formatieren von Seiten, aber auch dem Positionieren von Elementen.

Sie können im HEAD angegeben oder extern abgelegt und aufgerufen werden.

<HTML>

<HEAD>

<link rel="stylesheet" type="text/css" href="abc.css">

----------

Unterschiedliche Stylesheets für verschiedene Browser angeben:

<SCRIPT LANGUAGE="JavaScript">

</script>

----------

JavaScript-Werte speichern

<html>

<head>

<title>Test</title>
</head>

<body>

<form action="SELBST.htm" method="POST" name="Kunde">
<p> </p>
<p><input type="text" size="20" name="Anrede"> </p>
<p><input type="text" size="20" name="Vorname"> </p>
<p><input type="text" size="20" name="Nachname"> <script
language="JavaScript" type="text/javascript">

</script> </p>
<p><input type="submit" name="KundenBL" value="Nehmen"
onclick="return DieseAnzeigeAendern();"> </p>
</form>

<p>Achtung: die Felder müssen tatsächlich existieren! </p>
</body>
</html>

Werte übertragung mit Opener

Sind Seiten aufeinander bezogen, öffnet beispielsweise eine Seite als "Opener" eine neue mit "window.open(...)", so kann ein Wert in der neu geöffneten(!!) Seite verändert, in die öffnende Seite -den "Opener"- zurückübertragen und dort genutzt werden.

In der neu geöffneten Seite:

<HTML>
<HEAD>

...

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

</SCRIPT>

...

</HEAD>
<BODY onload="WertAendern();">
...

</BODY>
</HTML>

-------------------

-------------------

In der öffnenden Seite (opener):

<HTML>
<HEAD>

...

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

</SCRIPT>

</HEAD>
<BODY>
...

</BODY>
</HTML>

Der neue oder geänderte Wert steht hier sofort zur Verfügung und kann auch von dieser Seite verändert werden.

Werte übertragung mit Search

<HTML>
<HEAD>
<TITLE>Test</TITLE>
</HEAD>
<BODY>
<P>
Einfach nur <A href="Google
">http://www.google.de/search">Google

<P>
<A TARGET="_top" HREF="Test.html?q=Eins+Zwei=Drei">TEST</A><P>

<form name="GSuche" action="TEST.html" method="GET">

<p>
<input type="text" size="20" name="q" ></p>
<p>
<input type="submit" value="Nehmen"><br>
</form>



<SCRIPT type="text/javascript">

</SCRIPT>

</BODY>
</HTML>

Da Formular-Werte mit GET in der URL (location) mit ?x=y&w=z übertragen werden und sich der Abschnitt mit split("&") und split("=") weiter zerlegen läßt, kann man so fast beliebige Wertepaare und damit Werte mit Java Script zwischen HTML-Seiten übertragen.

- - - - - -

Eine Anwendung kann man hier studieren (Hervorhebung der Ergebnisse einer Suchanfrage):

http://project-icarus.de/erleuchtet/hilfe/freef_d1.htm#2

- - - - - -

Ergänzung

Achtung: Die Datenübertragung mit JavaScript birgt einige Tücken.

1] Im alten MS Internet Explorer 6.0 setzt

"document.links[i].search=window.location.href"

kein Fragezeichen vor den search-Begriff und beantwortet die Abfrage

"alert(document.links[i].search)"

mit "[]", obwohl der Begriff (ohne trennendes Fragezeichen) bereits angeheftet wurde.

Abhilfe schafft, falls noch notwendig,

"document.links[i].search="?"+window.location.href"

- Das dann eigentlich doppelte Fragezeichen scheint in andern Browsern nicht zu stören.

2] In Google Chrome ist der Zugriff auf die URL, der die "search"- Komponente trägt, in einigen Fällen untersagt, so als

"parent.location.search"

in einem Frameset.

Das läßt sich auch nicht so ohne weiteres umgehen - und gilt auch für die Übertragung mit hash.

3] Das Löschen eines "search"- Parameters ist im MS Internet Explorer mit

{...location.search="";}

ohne weiteres möglich.

In Mozilla- Browsern bleibt jedoch das Eingangs-Fragezeichen "?" hinter der Seitenadresse unsichtbar (!) bestehen, so daß weitere Abfragen immer noch von einem bestehenden "search"- Objekt ausgehen.

Diese Fälle mit

{ if ((self oder parent.location.search != "") && (self oder parent.location.search != "?")) }

ausschließen.

Das entspricht übigens

{ if !((self oder parent.location.search == "") || (self oder parent.location.search == "?")) }

(einfache bzw. doppelte Negation bei und /oder!)

Werte übertragung mit Hash

Über

var parameter=location.hash

Seite 1.html:

<HTML>
<HEAD>
<TITLE> - Titel - </TITLE>
</HEAD>
<BODY>

Seite 1:

<P>

<A HREF="2.html#Mein Haus- mein Auto- mein Pferd" >Werte übertragen</A>

</BODY></HTML>

Seite 2.html:

<HTML>
<HEAD>
<TITLE> - Titel - </TITLE>
</HEAD>
<BODY>

Seite 2:

<P>

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

</SCRIPT>

</BODY></HTML>

(Nach Internet Magazin 10/06)

Werte auf der Seite speichern

<HTML>
<HEAD>
<TITLE>Werte mit Hash auf der selben Seite speichern
</TITLE>
</HEAD>
<BODY>

<P>
Diese Seite als "seite_1.htm" speichern

<P>
<A NAME="Ja">Ja</A>,

<A HREF="seite_1.htm#Ja" Onclick="location.replace('seite_1.htm#Ja');location.reload();">ich
will das sehen</A>!

<A HREF="seite_1.htm#Nein" Onclick="location.replace('seite_1.htm#Nein');location.reload();">Nein, doch nicht</A>!

<P>

<SCRIPT language="javascript" type="text/javascript">

</SCRIPT>

<P>
Ablauf:

- Klickt man auf den Verweis, wird ein vorher bestimmter Seitenanker aufgerufen und in der URL gespeichert
(dieser braucht nicht unbedingt auf der Seite zu existieren)

- Gleichzeitig wird die Seite mit dem neuem Anker als die aktuelle Seite gespeichert und neu geladen.

- Nun wird das "Hallo" angezeigt, weil der Anker in der Adresse vorhanden ist.

</BODY></HTML>

Werte in JS und PHP übertragen

Variablenübertragung zwischen JavaScript und PHP

Manchmal werden die selben Variablen sowohl im JavaScript wie im PHP-Bereich benötigt. Das Problem besteht darin, daß JavaScript auf dem Rechner des Klienten, PHP aber auf dem Server läuft und der Klient den Server nicht auslesen kann. Man kann jedoch eine serverseitig erstellte Variable clientseitig in Javascript auslesen.

Umgekehrt geht es auch, wenn man die Variablen für JavaScript und PHP im unterschiedlichen Syntax in einer gemeinsamen Text-Datei speichert.

Man läßt dabei in jeweils drei Schritten eine PHP-Variablen-Datei durch JavaScript auslesen oder umgekehrt:

----

A) Übertragung von PHP an JavaScript

- Vorteil: Kurz; Die Variablen bleiben dem Benutzer verborgen.
- Nachteil: Nur PHP-Seiten können darauf zugreifen.

(1) Speichern der Variablenwerte in PHP:
Eine hier 'PHP-WERTE.TXT' genannte Text-Datei auf dem Server enthält Werte in der Form:

<?PHP $MailAddresse = &quo "jemand@irgendwo.de";?>

(2) Ausgelesen wird die PHP-Werte-Datei auf jeder PHP-Seite durch:

<?PHP include("PHP-WERTE.TXT"); ?>

(3) Darunter(!) geschieht die Übergabe der Werte von PHP an JavaScript:

<Script type="text/javascript">
<?PHP print "var MailAddresse ='$MailAddresse' \n"; ?>
</SCRIPT>

----

B) Übertragung von JavaScript an PHP

- In dieser Variante können auch .HTML-Seiten über JavaScript auf die Variablen zugreifen;
- Allerdings können diese jetzt von Benutzer eingesehen werden, da die Werte-Datei vom Browser gespeichert wird.

(1) Speichern der Variablenwerte in JavaScript:
Eine hier 'JS-WERTE.TXT' genannte Text-Datei auf dem Server enthält die
Werte diesmal in der Form:

var MailAddresse = &quo "jemand@irgendwo.de";
(2) Ausgelesen wird die JavaScript-Werte-Datei auf jeder beliebigen Seite
durch:

<SCRIPT language="JavaScript" type="text/javascript"
src="JS-WERTE.TXT"></SCRIPT>

(3) Auslesen der JavaScript-Werte-Datei durch PHP:
Dazu muß die Datei 'JS-WERTE.TXT' in PHP zeilenweise eingelesen und jede
Zeile mit "var" aufgeteilt werden in den jeweiligen Parameter und dessen
Wert:

<?PHP
$PHPWerteDatei = "JS-WERTE.TXT";
$Zeile = file($PHPWerteDatei);
$ZeilenZahl = count($Zeile);

for($vz=0; $vz < $ZeilenZahl; $vz++)
{
$EinzelZeile[$vz] = trim($Zeile[$vz]);

// SEHR WICHTIGE BEDINGUNG!
$VarPrf = strpos($EinzelZeile[$vz],"var ");
$SemiPrf = strrchr($EinzelZeile[$vz],";");

if ($VarPrf == "0" && $SemiPrf == ";" )
{
// PARAMETER-ZEILE SÄUBERN:
$Varray = array ("var " => "", "\"" => " ", ";" => "");

$EinzelZeile[$vz] = strtr ($EinzelZeile[$vz], $Varray);
$ArrayGueltigeZeile = explode("=",$EinzelZeile[$vz]);

if (count($ArrayGueltigeZeile) == 2 )
{
list($Parameter,$Wert) = $ArrayGueltigeZeile;
$Parameter = trim($Parameter);
$Wert = trim($Wert);
$ParameterWert = "$$Parameter = \"$Wert\"";
eval ("\$ParameterWert = $ParameterWert;");
}}

unset ($VarPrf);
unset ($SemiPrf);
}
?>

Aus "var MailAddresse" wird so "$MailAddresse".

Damit sind die JavaScript-Werte auch in einer nachfolgenden PHP-Anweisung verwertbar.

----

C) Übertragung von JavaScript an PHP über Formular

- In dieser Variante werden (ggf. ermittelte) JavaScript-Werte über ein (verstecktes) Formular einer .PHP-Datei zur Verfügung gestellt;
- Allerdings erst nach einem Neuladen der Seite.

<HTML>
<HEAD>

(1) In JavaScript wird festgehalten:

<SCRIPT language=JavaScript type=text/javascript>

</SCRIPT>

(2) Es folgt für die Übertragung der Formular-Werte in PHP

<?PHP
$MailAddresse=$_POST['MailAddresse'];
?>

</HEAD>
<BODY >
<P>

(3) Und das Formular mit der versteckten Eingabe:

<FORM NAME="Mailen" ACTION="<?php echo($_SERVER['PHP_SELF']); ?>" METHOD="POST" >
<INPUT TYPE="hidden" NAME="MailAddresse" Value="<?PHP echo "$MailAddresse"; ?>">
</FORM>

<?PHP
echo "MailAddresse: ";
echo $MailAddresse;
?>
</P>

</BODY>
</HTML>

- Beim Laden der Seite wird der (geänderte) JavaScript-Wert ausgelesen, ins Formular übertragen, verglichen, und als PHP-Wert an die eigene Seite geschickt

Aus "var MailAddresse" wird so "$MailAddresse".

Damit sind die JavaScript-Werte auch in einer nachfolgenden PHP-Anweisung verwertbar.

----

Eine Kombination von diesen Varianten ist möglich; die Variablen lassen sich auch während der Session vom Klienten neu schreiben.

Textdatei auslesen mit JavaScript

Text - Dateien mit JavaScript auslesen ist einfacher als oft angenommen wird.

Man muß dazu die Textdateien als Quelle (SRC) angeben und einige Regeln einhalten.

Es können mehrere Dateien ausgelesen werden, und ihre Endung muß nicht .TXT lauten.

Achtung: Als Variable am Anfang der Zeile darf keine reine Zahl stehen.

--------

Die Quellen:

werte4.txt:

VorName = "Paul";
Name = "Hufschmied";
PLZ = "444444";
Stadt = "Aka-aka";
Strasse = "Nüderweg";
Nr = "3";

werte5.txt:

Adressen = new Array("Paul","Hufschmied","Aka-aka","Nüderweg","3");
Meldung = "Achtung neue Adresse";

So = "Heute ist Sonntag";
Mo = "Heute ist Montag";
Di = "Heute ist Dienstag";
Mi = "Heute ist Mittwoch";
Do = "Heute ist Donnerstag";
Fr = "Heute ist Freitag";
Sa = "Heute ist Samstag";

--------

Die auslesende Seite:

<HTML>
<HEAD>
<TITLE> - Texte auslesen mit JS - </TITLE>


<SCRIPT language="JavaScript" type="text/javascript" src="werte4.txt"></SCRIPT>
<SCRIPT language="JavaScript" type="text/javascript" src="werte5.txt"></SCRIPT>

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

</SCRIPT>
</HEAD>

<BODY>
<P>
<B>Werte einlesen</B> - neu Adresse:<BR>(aus Werte4.txt)
<P>
<NOSCRIPT>!! Wenn Sie Javascript ausgeschaltet haben,
sehen Sie hier gar nichts !!</NOSCRIPT>
<P>
<SCRIPT language="JavaScript" type="text/javascript">

</SCRIPT>

<P>
<B>Über Array:</B><BR>(aus Werte5.txt)
<P>

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

</SCRIPT>
<P>
- Diese Seiten werden dynamisch generiert und lassen sich nur
Ausdrucken, nicht speichern.
<P>
- Ihr Vorteil ist, daß sich Änderungen in den Werten einfach
und für viele Seiten gleichzeitig durchführen lassen.
<P>
- Ihr Nachteil, daß bei Fehlern in den Werten JavaScript einfach
kommentarlos gar nichts anzeigt.
<P>

<P>
<B>Die Werte:</B>
<P>
<object data="Werte4.txt" type="text/plain" width="300" height="100" >
</object>
<P>
<object data="Werte5.txt" type="text/plain" width="600" height="200" >
</object>
<P>
</BODY></HTML>

S. Auch:

http://project-icarus.de/erleuchtet/hilfe/mozilla1.htm#KM2

Datum auswerten mit JavaScript 1

Datum auswerten mit JavaScript 2

Verzeichnis anzeigen lassen

<a href="../">Home</a>

Macht was ganz interessantes:

Im Netscape: Öffnet das Verzeichnis und zeichnet die Verzeichnisstruktur auf- listet alle Dateien auf; linkfähig.

MSIE: Dialogbox zur Verzeichnisstruktur wird geöffnet.

S. home.htm oder dir.htm

Auch: <A HREF="">siehe da!</A>

Öffnet das Verzeichnis*

* Aber nur, wenn keine weiteren JavaScript- Befehle enthalten sind. Auf diese Weise kann man auch einen "leeren" Verweis gezielt dazu benutzen, einen JavaScript- Befehl auszulösen:

<a href="" onClick="WasAuchImmer;return false">Klicken Sie hier!</a> // Achtung - kann eine Fehlermeldung auslösen

Möglich ist auch

<a href="#" onClick="WasAuchImmer;return false">Klicken Sie hier!</a>

---

Leere Verweise:

<A HREF="" >Hier klicken!</A>
kann eine Fehlermeldung auslösen

Sicherer:

<A HREF="#" onClick="...">
Hier klicken!</A>

oder:

<A onClick="...">
Hier klicken!</A>

Index-Kaskade

Index-Kaskade

Achtung! In jedes Verzeichnis, auch in jedes Unterverzeichnis(!), gehört eine [ggf. auch leere] Datei namens "index.html" oder "index.htm"; sonst kann das Verzeichnis eingesehen werden.

Mit dem Inhalt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>

<META HTTP-EQUIV="REFRESH" CONTENT="1; URL=../index.html">
</HEAD>
<BODY>
<P align=center><BR><BR><BR><BR><BR><BR><BR><BR><BR>Kein Zugang</P></BODY></HTML>

wird der Zugreifende immer ein Verzeichnis weiter nach oben geschoben.

Mit <META HTTP-EQUIV="REFRESH" CONTENT="1; URL=../oberverzeichnis/unterverzeichnis">

wieder zurück in das Unterverzeichnis, das dem Benutzer offen stehen soll.

---

Allerdings muß die .htaccess richtig eingestellt sein (wenn vorhanden). Mit dieser lassen sich auch (IP-)Adressen sperren:

deny from .b-misc.de
deny from .b-123.45.678.22.

Automatisches Rechnen

Automatisch Download starten

Mails vorformulieren

Mails vorformulieren

<A HREF HREF="mailto:wem@wo.de?subject=Ruecklauf&cc=wemnoch@wonoch.com&body=Hallo!">

Die Zeichenfolge %0A%0A erzeugt einen Zeilenumbruch ( nicht im Netscape 4x ).

Favicon-Pfad

Favicon

Wenn man ein 16x16 oder 32x32 - Pixel - Icon unter dem dem festen Dateinamen (kleingeschrieben) 'favicon.ico' in jedem Verzeichnis ablegt, wird dieses im Microsoft Internet Explorer 5, Mozilla und anderen Browsern in den Lesezeichen dargestellt ( S. http://www.favicon.de )

So weit die Theorie.

Die Praxis:

* Das Favicon muß für jede Datei spezifisch angegeben werden, dann geht's.

* Dann kann aber für jede Seite (jedes Thema) ein eigenes angegeben werden, mit unterschiedlichen Namen, aber der Endung '.ICO'.

Die Ansprache lautet dann:
(Favicon-Pfad erzwingen)

<HTML>
<HEAD>

<link rel="shortcut icon" href="http:// ...xyz.ico">

---------

Den Favicon-Pfad in JavaScript schreiben lassen

[Das Folgende gilt für jede beliebige eigene URL, bei immer gleichem Unter-Verzeichnis;
Auf diese Weise kann man in JavaScript den Pfad zum aktuellen Ordner feststellen lassen]

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

</HEAD>