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(
'&uuml;',
'&auml;',
'&ouml;',
'&szlig;',
'&Uuml;',
'&Auml;',
'&Ouml;',
);



// - - -


// 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">
<!--

<?PHP print "var Parameter = '$Wert';" ?>

// oder auch

var Parameter ="<?PHP echo($Wert); ?>";

alert (Parameter);

---

// -->

</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 - Auslagerung -->

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

<!-- Die Dateiendung ".blb" ist dabei beliebig gewählt; es handelt wie bei CSS und JavaScript sich um eine reine Textdatei. -->

<!-- Datei- Pfade und Verweise darin so schreiben, als ob sie von der aufrufenden PHP-Datei kommen. -->

<!-- Ende der PHP - Auslagerung -->

<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

<!-- PHP - Datum -->


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 "&lt;.*?&gt;" 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 KOMMENTAR -->

<?PHP if (!($Einblenden)) echo "<!--"; ?>

Dieser Bereich wird ausgeblendet, wenn die Bedingung "Einblenden" nicht gegeben ist.
Allerdings nur ausgeblendet, d.h. PHP-Anweisungen arbeiten noch.

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

(Geht auch mit JavaScript)

<!-- Ende PHP KOMMENTAR / Notwendig wegen diesem End-Pfeil: -->





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> <!--
if (self==top && (navigator.appName.indexOf("Netscape")<0 || (self.outerHeight&&self.outerHeight>0))) {
document.close();
top.location="/top/dokument/index.htm";
}
// --> </script>


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

Netscape - Abfrage II

<script language="javascript" type="text/javascript">
<!--
if(!(document.layers))
{
alert('Alles klar');

document.write ('\<script language\=\"JavaScript\" type\=\"text\/javascript\" src\=\"http\:\/\/123.456.com\/blahblah.js\"\>\<\/script\>');

// weitere Funktionen, wenn NICHT Netscape 4.x!
}


else
{
alert('Netscape 4.x');

// weitere Funktionen, WENN Netscape 4.x
}
// -->
</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">
<!--
if(document.layers)
document.write('\<\!--');
// -->
</script>


<P>
Ich bin kein Netscape 4.x!

<P>

<script language="javascript" type="text/javascript">
<!--
document.write('Dieses auskommentierte JavaScript wird in Netscape 4.x nicht ausgeführt.');
// -->
</script>

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

<P>


<script language="javascript" type="text/javascript">
<!--
if(document.layers)
document.write('\<\!--');
// -->
</script>




Netscape Fenstergröße



Netscape- Fenstergröße- Abfrage


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

<script language="JavaScript">
<!--
function MM_reloadPage(init)
{
// reloads the window if Nav4 resized
if (init==true) with (navigator)
{if
((appName=="Netscape")&&(parseInt(appVersion)==4))
{
document.MM_pgW=innerWidth;
document.MM_pgH=innerHeight;
onresize=MM_reloadPage;
}
}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
location.reload();
}
MM_reloadPage(true);
// -->
</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">
<!--
Fenster = window.open("datei.htm","KleinesFenster","width=200,height=200");
function Fenstername() {
alert("Name des kleinen Fensters: " + Fenster.name);
neu = prompt("Vergeben Sie einen neuen Fensternamen","Name");
Fenster.name = neu;
alert("Der Name des Fensters lautet jetzt: " + Fenster.name);
}
//-->
</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">

<!-- Hide script from older browsers

var urlAddress = "
http://www.netmechanic.com";
var pageName = "Get HTML Code help from NetMechanic";
function addToFavorites()
{
if (window.external)
{
window.external.AddFavorite(urlAddress,pageName)
}
else
{
alert("Sorry! Your browser doesn't support this function.");
}
}
// -->
</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">
<!--
// {alert(window.location.protocol);}

{if
(window.location.protocol == "http:")
alert("bin online.");
}

{if
(window.location.protocol == "file:")
alert("bin offline.");
}
// -->
</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">
<!--

function Fensterweite () {
if (window.innerWidth) {
return window.innerWidth;
} else if (document.body && document.body.offsetWidth) {
return document.body.offsetWidth;
} else {
return 400; // Default Fensterbreite
}
}

function neuAufbau () {
if (Weite != Fensterweite())
location.href = location.href;
}

// -->
</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">
<!--

Inhalte = new Array("eins", "zwei", "drei", "vier", "fünf", "sechs", "sieben", "acht", "neun", "zehn");
var Anzahl = Inhalte.length;

// Entweder:
var MinSpaltenbreite = 250;

// Plus:

/* Überwachung von Netscape initialisieren */
if (!window.Weite && window.innerWidth) {
window.onresize = neuAufbau;
Weite = Fensterweite();
}

/* Überwachung von Internet Explorer initialisieren */
if (!window.Weite && document.body && document.body.offsetWidth) {
window.onresize = neuAufbau;
Weite = Fensterweite();
}

var Spaltenzahl = parseInt(Weite/MinSpaltenbreite);
// = Abhängig von Fensterbreite / Spaltenbreite

// Oder festgelegt:
// var Spaltenzahl =3;

document.write ('<TABLE BORDER WIDTH="100%">');
// Border und Width optional

for (y=0; y < Anzahl; y++)
{
document.write ('<TR>');

for (s=0; s < Spaltenzahl; s++)
{

document.write ('<TD>');
document.write ('Fensterbreite: ' + + Weite );

if (Inhalte[y])
{
document.write ( ' / ' + y + ': ' + Inhalte[y]);
}

document.write ('</TD>');
y++;


}
document.write ('</TR>');
y--;

}
document.write ('</TABLE>');

// -->
</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">
<!--
document.write(' Referrer: ');
document.write(document.referrer);
-->
</script>





Dateiname



(Namen der Datei)

Datei-Namen ausgeben:

<script language="JavaScript" type="text/javascript">
<!--
DateiURL = document.URL;
DateiURL = DateiURL.replace(/\\/g, "/"); // Für MSIE offline

DateiNamen = DateiURL.split("/");
DateiNamen = DateiNamen.pop();

DateiNamen = DateiNamen.split("#");
// evtl. noch "?" etc.
DateiNamen = DateiNamen.slice(0,1);

// Wichtig für Vergleiche in JS:

DateiNamen = String(DateiNamen);

document.write(' Datei: ');
document.write(DateiNamen);
-->
</script>




Fenstername



name (Namen des Fensters)


Fenster-Namen ausgeben:

<script language="JavaScript" type="text/javascript">
<!--
document.write(' Fenster: ');
document.write(document.name);
-->
</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">
<!--
document.write(' Sie befinden sich hier: ');
document.write(document.location);
-->
</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">
<!--
document.write(' Titel: ');
document.write(document.title);
-->
</script>

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

---

Seiten-Titel per Default in die Statuszeile:

<SCRIPT LANGUAGE="JavaScript">
<!--
window.defaultStatus=document.title;
// aber nur, wenn der Titel im Dokument VOR dem Script steht!
// end hide -->
</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">
<!--
document.write(' Gespeichert: ');
document.write("Letztes Update: " + document.lastModified);4 -->
</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">
<!--
if (top. frames. length == 0)
{
alert ("Diese Seite ist Teil eines Framesets. Sie finden unsere Startseite unter... ");
}
// -->
</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">
<!-- Hide script from older browsers
if (top!=self)

{top.location=self.location;}

// mit einer Verzögerung von 0,5 sek:
// {window.setTimeout("top.location=self.location", 500);}

// -->
</script>



Setzt sich selbst ins obere Fenster, sprengt ein Frameset.




No Frame 1b



Frame - Killer II



<script language="javascript"
type="text/javascript">
<!-- Hide script from older browsers
if (top==self)
{self.location.href = "frames.html";}
//-->
</script>

oder

<script language="JavaScript">
<!--
if (top == self) self.location.href = "frames.html";
// -->
</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">
<!-- Hide script from older browsers
if (top!=self)
{top.location = self.location;}
//-->
</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">
<!--
if (parent.frames.length>=1) {
window.top.location.href="
http://...meine.Seite";
}
//-->
</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">
<!--
if (top == self)
{
alert ("Diese Seite ist Teil eines Framesets");
top.location.href="http://...mein.Frameset";
}
// -->
</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">
<!--
if (top.frames.length > 0)
top.location.href=self.location.href;
// -->
</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">
<!-- if(top!=self)
{
if (window.opera) window.onload=opera_befreien;
else top.location=self.location;
}

function opera_befreien()
{
document.links['befreien'].click();
}
//--> </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">
<!--
function bild()
{
if (window.name!="ergebnisfenster")
{
if (this.document==top.document ||
top.location.host != this.location.host)
{
window.location.replace("frames.html");
}
}
}
// --->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">

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

Auch nicht schlecht!

---

Variante:

<SCRIPT LANGUAGE="JavaScript">
<!--
function b()
{
if (window.name!="ergebnisfenster")
{
Frameset = window.open("frames.html", "_parent");
Frameset.focus();
}
}
// --->
</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">

<!--
sprungziel= new Array(3)
sprungziel[0]="goethe.htm"
sprungziel[1]="schiller.htm"
sprungziel[2]="menu1.htm"

function auswert(form)
{
location=sprungziel[form.auswahl.selectedIndex]
}

//-->
</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">
<!--
Check = prompt("Geben Sie Ihr Passwort fuer diese Seite ein",""); if(Check == "lalala") alert("Sie haben Zutritt");

mutig = confirm("Wollen Sie sich das wirklich antun?");
if (mutig = = true)
location.href="ferkel.htm"
//-->
</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">
<!--

function FensterZu()
{
self.reload;

if (top == self)
{

if (opener == "" || opener == null || opener.closed == true)
{
this.window.focus();
this.window.close();
}

if (opener)
{
if (opener.length > 0) // Mozilla
{
this.window.focus();
this.window.close();
}

if (opener.name != "Hauptfenster") // MSIE
{
this.window.focus();
this.window.close();
}
}

}
}


-->
</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">
<!--
function neufenster(url, ziel)
{
dasfocus = window.open(url, ziel, "width=400,height=250,top=50,left=50,resizable=yes,scrollbars=yes,menubar=yes,location=yes,toolbar=yes");
dasfocus.focus();
}
</script>

</HEAD>

Wird angesprochen durch:

<P>
<BR>
<B><A HREF="
http://www.xyz.de/" ONCLICK="neufenster('http://www. xyz.de/', 'NF')" TARGET="NF" onmouseover="window.status=' &Ouml;ffnet xyz in einem neuen Fenster ';return true;"
onmouseout="window.status=''"> xyz </A> <BR>
<BR>


Siehe auch:

http://project-icarus.de/erleuchtet/hilfe/freef_d1.htm#NT11

bzw.

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



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




ALTERNATIVE


- Externe Verweise OHNE angegebenes eigenes Target (Zielfenster) werden dennoch in einem eigenen, und zwar immer demselben, Fenster geöffnet, dessen Name sich aus einer laufenden Nummer oder aber aus der Domain ergibt.

- Externe Verweise MIT eigenem Ziel werden dagegen im angegebenen Target-Fenster geöffnet.


Funktioniert im MSIE nur online; außer im alten Netscape gibt es hoffentlich keine Probleme wegen einem Punkt (.) im Fensternamen.

VORTEIL: Es müssen keine Scriptanteile in den HTML-Verweis selber geschrieben werden - ein einfacher Verweis genügt.

Das Script unterscheidet dabei zwischen internen und externen Verweisen und deren Zielen; so kann je nach Verweis auch eine anderer Automatismus damit verbunden werden.


---



function EVerweis()
{

// Unterscheidung zwischen extern und intern

for (var i=0; i<document.getElementsByTagName("a").length; i++)
{
if ((document.links[i].protocol == "http:") && (document.links[i].hostname != "www.MEINEDOMAIN.de") && (document.links[i].hostname != "WEITERE DOMAIN"))
{

if (document.links[i].target == "")
{
// ALTERNATIV

// Je ein eigenes Fenster:
// document.links[i].target = "_blank";


// Gruppiert nach Verweisnummer
// Überschreibt alte Fenster mit selber Nummer

// document.links[i].target = i;


// Gruppiert nach Domain
// Überschreibt alte Fenster mit selben Namen
document.links[i].target = document.links[i].hostname;

}
}

}


// EXTRA:


// Aufrufende Seiten im Frameset laden
// Funktioniert allerdings nur Online


// Wenn das Frameset

if ((document.links[i].pathname == "Frames/frameset.htm"))
{

// nicht ausgerechnet von diesen Seiten aufgerufen wird

if ((window.location.href != "http://Meine Domain/Eingangsseite") && (window.location.href != "http://Meine Domain/Frames/Frames_Default_Seite"))

// dann setze die URL des aufrufenden Fensters als Suchbegriff:
{
document.links[i].title="Zum FrameSet";
document.links[i].search="?"+window.location.href;
}

}


}


---


Achtung:



1) Die Funktion EVerweis() muß z. B. mit


window.onload = window.setTimeout("EVerweis()", 500);


NACH dem Laden der Seite aufgerufen werden.


2) Um die durch das Laden eines Framesets automatisch darin enthaltene Seite: "Frames_Default_Seite" durch die aufrufende Seite zu ersetzen, muß auf dieser das Folge-Script in den HEAD-Bereich geschrieben werden:


<HEAD>

<SCRIPT>
<!--

if ((parent.location.search != "") && (self.location.search != "?"))
{
ladeseite = parent.location.search;
ladeseite = ladeseite.substr(1, ladeseite.length - 1);

if (ladeseite != "")
// TEST
// alert (ladeseite);
{
this.location.replace(ladeseite);
}

// TEST
// else
// {
// alert ('Kann die geforderte Seite nicht laden, lade Default');
// }

}

// -->
</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">
<!--

if ((document.links[i].protocol == "http:") && (document.links[i].hostname != "ausnahme.com"))

{

EigeneSeite = window.location.href.split("#")[0]; // Wirft den vollständigen Pfad der offenen HTML-Datei aus - Ohne Anker (!)

VerweisZiel = document.links[i].href; // Wirft die vollständige Link-Adresse aus
VerweisSeite = VerweisZiel.substring(VerweisZiel.lastIndexOf('/')+1); // Extrahiert den Dateinamen der verlinkten Datei - Mit Anker

SeitenVerweis = VerweisZiel.split("#")[0]; // Wirft den vollständigen Pfad der verlinkten Datei aus - Ohne Anker (!)
NurSeite = VerweisSeite.split("#")[0]; // Wirft nur den Dateinamen der verlinkten Datei aus

if (VerweisSeite.split("#")[1])
{NurAnker = VerweisSeite.split("#")[1];} // Wirft nur den Anker der verlinkten Datei aus
else
{NurAnker = "";}


alert ("VerweisZiel: " + VerweisZiel);

alert ("EigeneSeite: " + EigeneSeite);
alert ("SeitenVerweis: " + SeitenVerweis);


alert ("VerweisSeite: " + VerweisSeite );
alert ("NurSeite: " + NurSeite );
alert ("NurAnker: " + NurAnker );


// Für alle Verweise auf die selbe Seite:

if ((document.links[i].target == "") && (SeitenVerweis == EigeneSeite))
{
alert ("Ziel und offene Seite sind gleich!");
document.links[i].target = "_self";
}



// Für alle Verweise auf den selben Host (= innerhalb der Website):

alert (document.links[i].hostname);
alert (window.location.hostname);


if ((document.links[i].target == "") && (document.links[i].hostname == window.location.hostname))
{
alert ("Selber Host: Ins selbe Fenster!");
document.links[i].target = "_self";
}


}

// -->
</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">
<!--
var start=new Date();
start=Date.parse(start)/1000;
var counts=10;
window.setTimeout('CountDown()',100);
function CountDown(){
var now=new Date();
now=Date.parse(now)/1000;
var x=parseInt(counts-(now-start),10);
document.form1.clock.value = x;
if(x>0){
timerID=setTimeout("CountDown()", 100)
}else{
location.href="http://members.tripod.com/1.htm"
}
}
//-->
</SCRIPT>
</HEAD> <BODY BGCOLOR="#6699CC"> <CENTER>
<H1>R&uuml;ckw&auml;rts z&auml;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">

<!-- hide script contents from old browsers
function RandomNumber() {
today = new Date();
num= Math.abs(today.getTime())*191;
return 255-(num%80);
}
// end hiding contents from old browsers -->

</script>

</HEAD>

<BODY BGCOLOR=#ffffff>

<script language="JavaScript">

<!-- hide script contents from old browsers
document.bgColor = (RandomNumber()*256*256)+(RandomNumber()*256)+RandomNumber();
window.refresh;
// end hiding contents from old browsers -->

</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>
&nbsp;Click here&nbsp;tab<BR>
&nbsp;</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">
<!--
a { text-decoration: none}
-->
</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">
<!--
if (top == self) {
document.write('<meta HTTP-EQUIV=refresh content="0; url=index.html">');
top.location = "index.html";
document.write('<frameset></frameset><noframes>');
}
//-->
</SCRIPT>



von Seiten

<SCRIPT LANGUAGE="Javascript">
<!--
if ((top!=self) && !((top.location.hostname == "isnich.de") || (top.location.hostname == "
www.auchnich.com")))
{top.location=self.location;}
//-->
</SCRIPT>




von bestimmten Verweisen

<SCRIPT LANGUAGE="Javascript">
<!--
a = document.links.length;
for ( i=0; i<a; i++ )
{
if (document.links[i].href == "http://www.hierher.de")
{
document.links[i].href = "http://www.dahin.org/";
}
}
//-->
</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&uuml; Verbergen" OnClick="ResizeFrame2();"></TD>
<TD ALIGN="Center">
<INPUT TYPE=reset VALUE="Navigationsmen&uuml; Anzeigen" OnClick="ResizeFrame1();"></TD>
</TR>
</TABLE>
</CENTER>
</FORM>
<P ALIGN=Center>
<SCRIPT TYPE="text/javascript" LANGUAGE="javascript">
<!--

function ResizeFrame1()
{
parent.frames.SeitenFrame.cols = "27%,*";
}


function ResizeFrame2()
{
parent.frames.SeitenFrame.cols = "0,*";
}


//--> </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">
<!--

function ResizeFrame1()
{
parent.document.getElementById("FRAMSET").rows = "80,*";
}

//--> </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">
<!--
function get()
{ window.location.hash='Oben';break;
}

get();
// oder
window.location.hash='Oben';break;
// -->
</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">

<!-- Hide script from older browsers
if (top == self)
{window.location.hash='OBEN';break;}
// -->



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">
<!--

if((self.location.hash == "") && (top.document.title == "TITEL"
))
{ self.location.hash = "FRAMETOP";break; }

//--> </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">
<!--
function stoperror()
{return true}
window.onerror=stoperror
-->
</SCRIPT>

<script language="javascript"
type="text/javascript">
<!--
function gehezu()
{window.location.hash='Hallo';break;}
// -->
</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">
<!--

Var neu = "Neuer Text";
function NeuMachen()
{document.all.Absatz.innerHTML = neu;}

// -->
</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">
<!--

Var NeuerText="Der neue Text";
document.getElementById("variabler_text").innerHTML = NeuerText;

// -->
</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">
<!--

var Passwort;

document.write('\<INPUT TYPE\=\"text\" NAME\=\"PW\" VALUE\=\"');

if (Passwort != null)
{document.write(Passwort);}

document.write('\" MAXLENGTH\=\"40\"\>');

// -->
</SCRIPT>


---

Ist im Prinzip dasselbe wie:


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

var Passwort;

document.write('\<INPUT TYPE\=\"text\" NAME\=\"PW\" VALUE\=\"' + Passwort + '\" MAXLENGTH\=\"40\"\>');

// -->
</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">
<!--
// JS KOMMENTAR
if (Ausblenden == "ja")
{document.writeln("\<!--");}
// -->
</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!


<!-- Ende JS KOMMENTAR / Notwendig wegen diesem End-Pfeil: -->


(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">
<!--
var etwas = true;

function umschalten()
{
etwas = !etwas;

if (etwas)
{
document.getElementById("tabelle").style.width="100px";
document.getElementById("tabelle").style.height="100px";
document.getElementById("tabelle").style.fontSize="10px";
}

if (!etwas)
{
document.getElementById("tabelle").style.width="200px";
document.getElementById("tabelle").style.height="200px";
document.getElementById("tabelle").style.fontSize="20px";
}

}

// --> </SCRIPT>

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

</HEAD>

<BODY>

<P>
<A HREF="javascript:umschalten()">ver&auml;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">
<!--
location.href="Seite mit Script.html"
//-->
</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">
<!--
document.write("<br>JavaScript");
//-->
</script>
<script language="JScript" type="text/jscript">
<!--
document.write("<br>JScript");
//-->
</script>
<script language="VBScript" type="text/vbscript">
<!--
document.write "<br>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&uuml;tzung ausgeschaltet.<BR>
Diese Seiten sind ohne JavaScript nicht vollst&auml;ndig funktionsf&auml;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



<script language="javascript" type="text/javascript">
<!--
if(was auch immer)
{
document.write ('\<script language\=\"JavaScript\" type\=\"text\/javascript\" src\=\"http\:\/\/123.456.com\/blahblah.js\"\>\<\/script\>');
}
else
{
alert('Eben nicht.');
}
// -->
</script>



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">
<!--

/* Dies ist die Definition der Bildnamen und deren URL sowie gleichzeitig ein Preload,
d.h. die Bilder werden von Vornherein geladen,
damit der MouseOver-Effekt auch flüssig von statten geht... */

if (document.images != null)
{
ohneMaus = new Image(152,110);
ohneMaus.src = "movehere.gif";
mitMaus = new Image(152,110);
mitMaus.src = "gotcha.gif";
}

/* Dies ist die eigentliche Funktion, die zum Wechseln der Bilder aufgerufen wird. */

function wechsleBild(bild,ziel)
{
if (document.images != null)
{
document.images[ziel].src = eval(bild +".src")
return true;
}
}

//-->
</SCRIPT>

<!-- ... -->

<!--Hier jetzt das Bild, welches zur Demonstration dient. Der Ort des Bildes, welches sich verändern soll, wird durch den Bildnamen
NAME="..." definiert. -->

<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>
<!--

bild1 = new Image();
bild1.src= "bild1.gif";

bild2 = new Image();
bild2.src= "bild2.gif";
...

// [für jedes Bild]


// Ggf. zusätzlich:

function wechseln(i, pic)
{
window.document.images[i].src=pic.src;
}


// -->
</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">

<!--
var aySound = new Array();

// Below: source for sound files to be preloaded
aySound[0] = "ding.wav";

// DO NOT edit below this line
document.write('<BGSOUND ID="auIEContainer">')

IE = (navigator.appVersion.indexOf("MSIE")!=-1 && document.all)? 1:0;
NS = (navigator.appName=="Netscape" && navigator.plugins["LiveAudio"])? 1:0;
ver4 = IE||NS? 1:0;
onload=auPreload;

function auPreload()
{ if (!ver4) return;
if (NS) auEmb = new Layer(0,window);
else
{ Str = "<DIV ID='auEmb' STYLE='position:absolute;'></DIV>";
document.body.insertAdjacentHTML("BeforeEnd",Str); }
var Str = '';
for (i=0;i<aySound.length;i++) Str += "<EMBED SRC='"+aySound[i]+"' AUTOSTART='FALSE' HIDDEN='TRUE'>"

if (IE) auEmb.innerHTML = Str;
else
{ auEmb.document.open(); auEmb.document.write(Str);
auEmb.document.close(); }
auCon = IE? document.all.auIEContainer:auEmb;
auCon.control= auCtrl; }

function auCtrl(whSound,play)
{ if (IE) this.src = play? aySound[whSound]:'';
else eval("this.document.embeds[whSound]." + (play? "play()":"stop()")) }

function playSound(whSound)
{ if (window.auCon) auCon.control(whSound,true);
} function stopSound(whSound)
{ if (window.auCon) auCon.control(whSound,false);
}

//-->
</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">

<!--

function kill-linkrahmen(x)
{
if (document.all)
{
x.blur();
}
}

//-->

</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



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">
<!--

/* ... Hier werden die Formate definiert ... */

element{style}

-->
</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">
<!--
p
{
font-size: 15px;
line-height:22px;
padding: 4px;

font-weight: bold;
}
-->
</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>
<!--
@importurl(datei.css);-->
</style>
eingebunden, wobei die 'datei.css' folgende Form hat:
<style type="text/css" >
<!--
body {font- family:... }
-->
</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">
<!--
...

document.forms.xyz.TEST.style.backgroundColor='#E5E5E5';

document.forms.xyz.TEST.style.border='0';

document.links[2].style.background = 'url(unknown.gif)';

document.links[2].style.backgroundRepeat = 'no-repeat';

document.links[2].style.backgroundPosition = 'right';
...

// -->
</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">

<!--

// Entweder

function HG_Orange ()
{

for (var i = 0; i < document.getElementsByTagName("p").length; i++)
{

if ( document.getElementsByClassName("Klasse1")[i].checked==true)
{document.getElementsByClassName("Klasse1")[i-1].style.backgroundColor = "#FF9933";}

else
{
// Stellt alle anderen zurück:
// document.getElementsByClassName("Klasse1")[i].style.backgroundColor = "lightgrey";
}

}
}

// Oder

function HG_Rot ()
{

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

k=''+(i+1);
// Diese Konstruktion dient dazu, aus einer Zahl einen Wert zu machen
// document.getElementById("i") wäre sonst der Buchstabe i

// alert (k);

if (document.Testform.Auswahl[i].checked==true)
{document.getElementById(k).style.backgroundColor = "red";}

else
{
if (document.Testform.Auswahl[i].checked==false)
{document.getElementById(k).style.backgroundColor = "Klasse1";}

}
}
}


// Noch besser*:


function HG_Gelb()
{

for (var y = 0; y < document.getElementsByName("Auswahl").length; y++)
{
var p = document.getElementsByName("Absatz1")[y].id;


if (document.getElementsByName("Auswahl")[y].checked==true)
{
document.getElementById(p).className = "Gelb";
}

else
{
document.getElementById(p).className = "Klasse1";
}

}
}

// Der Trick ist u. a., daß die P - IDs reine Zahlen sind und somit hochgezählt werden können
// Einzeln ausprobieren!

// Statt einer neuen Hintergrundfarbe könnte man für <P> auch eine neue Klasse angeben
// Den Umbruch- TAG <BR> mit einer Klasse zu versehen ist sinnlos, da er ohne Inhalt ist.


//-->

</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>
<!-- Internet Explorer -->
<bgsound src="datei.mid" loop=infinite>
</head>

<body>
<!-- Netscape -->
<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>
<!-- END OF 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: &#13;&#10; / 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. &#10; 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">
<!--

function Fensterweite()
{
if (window.innerWidth) return window.innerWidth;
else return 0;
}

function Fensterhoehe()
{
if (window.innerHeight) return window.innerHeight;
else return 0;
}

function neuAufbau()
{
if (Weite != Fensterweite() || Hoehe != Fensterhoehe())
window.history.go(0);
}

/*Überwachung von Netscape 4 initialisieren*/

if(document.layers)
if(!window.Weite && window.innerWidth)
if(!window.Hoehe && window.innerHeight)
{
window.onresize = neuAufbau;
Weite = Fensterweite();
tabWeite = Fensterweite() - 30; // austarieren: Pixelangabe
// tabWeite = Fensterweite() - (Fensterweite()/100*7); // nicht gut: Prozentangabe
Hoehe = Fensterhoehe();
}

//-->
</script>

</head>

<body >

<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="Willkommen" Border=0 align=center // wird in Netscape 4 nicht dargestellt --->

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

if(document.layers)
// ruft Netscape 4 ab
{
document.write('\<IMG SRC\=\"welcome\.gif\" width\=\"'+tabWeite + 'ALT\=\"Welcome\" Border\=0 align\=center \>');
}

else
// für alle anderen
{
document.write('\<IMG SRC\=\"welcome\.gif\" width\=\"'+ '100%'+ 'ALT\=\"Welcome\" Border\=0 align\=center \>');
}

// -->
</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! &nbsp; NEUE HEIMAT SIEHE UNTEN...&nbsp; </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 &nbsp; dazwischen anbringen.

<P>&nbsp;
<P>&nbsp;


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">
<!--
var Jetzt = new Date();
var Tag = Jetzt.getDate();
var Monat = Jetzt.getMonth() + 1;
if (Monat > 9)
{
var Datum = (Monat);
}
else
{
var Datum = ("0"+Monat);
}
var Jahr = Jetzt.getYear();
var Stunden = Jetzt.getHours();
var Minuten = Jetzt.getMinutes();
var NachVoll = ((Minuten < 10) ? ":0" : ":");
if (Jahr<2000) Jahr=Jahr+1900;

document.write("<HR><BR><BR><h3>Guten Tag!<\/h3><b>Heute ist der "
+ Tag + "." + Datum + "." + Jahr + ". Es ist jetzt "
+ Stunden + NachVoll + Minuten + " Uhr<\/b>");

document.write("<P>Heutige Termine:");

document.write("<P> <A HREF=\"http:\/\/
www.lalala.de\/termine\/"
+ Datum + "" + Tag + ".htm\">HIER AUFRUFEN<\/A>\?");

//-->
</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



Mitwachsende Formularfelder


1. Einzeilige Felder:


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

function expand (nr)
{
a = document.forms[0].elements[nr]. value;
b = a.length; document.forms[0].elements[nr).size = b+1;
}

// -->
</SCRIPT>



Wenn das Feld z.B. das 3. Formular-Element auf der Seite ist:

<input type="text" name="wert" size=10 value="" onChange=javascript:
expand(2)">


(Aus: Internet Magazin 01/07)


---


2. Mehrzeilige Felder:


Diese erfordern etwas mehr Aufwand.

(Textarea ohne Scrollbalken II)



<TEXTAREA NAME="Eingabe" WRAP="soft" ROWS="10" COLS="55" onKeydown="anpassen()" onClick="anpassen()" > </TEXTAREA>

<INPUT TYPE="checkbox" NAME="Anpassen" VALUE="an" CHECKED> Textfeld Anpassen


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

function anpassen()
{

var ZAnz = document.forms[0].Eingabe.value.length;
var ZInhalt = document.forms[0].Eingabe.value;
var ZBreite = document.forms[0].Eingabe.cols;

var Ausgleich = 0.1; // Ausgleich für Rundungsfehler
var Abstand = 10; // Zusätzliche Leerzeilen
var Zmind = 200; // Trigger
var Zeilen = 0; // Dummy

if (document.forms.Angebot.Anpassen.checked == true )
{

window.status = "Berechne Textfeld... Es hilft, ein paar Absätze einzubauen - `Textfeld Anpassen deaktivieren";


// Wie viele Umbrüche?


var EinAbsatz = ZInhalt.search(/\n/g);


// Umbruch am Ende?

var Lzeichen = ZInhalt.substring(ZAnz-1);


if (Lzeichen != "\n") // Kein Absatz am Ende
{


if (ZAnz > Zmind)
{
alert("- Meldung von Textfeld Anpassen - \n\nBitte Absätze in den Text einbauen, \n\ninsbesondere am Ende hinzufügen");
document.forms[0].Eingabe.value = ZInhalt + "\n\n";
ZInhalt = ZInhalt + "\n\n";
}
}

var Abs = ZInhalt.match(/\n/g);


if (Abs)
{
var Umbr = (Abs.length);
}

else
{
var Umbr = 0;
document.forms[0].Eingabe.value = ZInhalt + "\n";
}


// Wie viele Zeilen?

var ZZln = ZInhalt.match(/.+\n/g);

if (ZZln)
{

for (var i = 0; i < ZZln.length; ++i)
{
var WZln1 = (ZZln[i].length / (ZBreite));
var WZln = (parseInt(WZln1 + (WZln1 * Ausgleich)));

if (WUmbr)
{var WUmbr = (WUmbr + WZln);}

else
{var WUmbr = WZln;}

}

}

else
{var WUmbr = 0;}


var Zeilen = (WUmbr + Umbr);



// Anpassen:

document.forms[0].Eingabe.rows = (Zeilen + Abstand);
document.forms[0].Eingabe.style.overflow='auto';
}


else // Nicht anpassen
{
document.forms[0].Eingabe.rows = Abstand;
}


window.status = " ";
}

// -->
</SCRIPT>



Das Script arbeitet nicht ganz präzise.

Sollte auf Grund der Eigenart der Eingabe der Scrollbalken doch wieder erscheinen, den Ausgleich und den Abstand gerigfügig erhöhen.




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 = ' ' ;">&nbsp;<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">
<!--

function machen()
{
Irgendwas;
}


function los()
{
Prf = confirm(" WIRKLICH ?! ");

if (Prf == false)
{document.forms.DDD.reset();}

else
{
document.forms.DDD.submit();
// bzw.
machen();
}

}

// -->

</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">
<!--

function Abschicken()
{
if (document.Formular.Nachfrage.checked)
{
// Sperrt das Formular sofort nach dem ersten Absenden

document.Formular.Nachfrage.checked = false;

// usw...

}
}

// -->
</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">

<!--
function pruef()
{
if (!document.Form1.userName.value)
{
alert("Hier fehlt noch was!");
return false; // verhindert das Abschicken des Formulars
// Wenn OnSubmit="return pruef();"
}
// else return true;
}
//-->

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

<!--
function pruef()
{
if (document.userName.value == "")
{
alert("Hier fehlt noch was!");
document.userName.focus();
return false;
}
else return true;
}
//-->




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>

<!--
Modifiziert aus Internet Magazin 10/04
-->

<SCRIPT language="JavaScript" type="text/javascript" src="form_wortlist.txt"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">

<!--

// Falls nicht mit einer externen Wortliste gearbeitet werden soll:
// var wortliste = ' Baum Strauch Blume Haus ';


function checkwort()

{
var test1 = document.Formular1.userName.value;

alert ("Prüfe Eingabe");
alert ("Eingabe = " + test1);

if (!document.Formular1.userName.value)
{
alert("Bitte Wort eintragen!");
// beendet Vorgang
return false;
}

// Vorgabe:

rueckgabe = false;


// if (rueckgabe == false)
// { alert ("Erstmal Falsch") }

// if (rueckgabe == true)
// { alert ("Erstmal Richtig") }


var test2 = " " + test1 + " ";

alert ("Eingabe Test1 = " + test2);

// Unabhängigkeit von der Großschreibung:
var test2 = " " + test1.toUpperCase() + " ";

alert ("Eingabe Test2 = " + test2);

ListeX = " "+wortliste.trim()+" ";

// Unabhängigkeit von der Großschreibung:
ListeX = ListeX.toUpperCase();


alert ("Die Wortliste lautet: -" + ListeX + "-");

stelle = ListeX.indexOf(test2);

if (stelle > -1)
if (stelle != '')
{ rueckgabe = true }


if (rueckgabe == false)
{
alert ("Die Eingabe ist Falsch")
document.Formular1.userName.value = "";
}

if (rueckgabe == true)
{
alert ("Die Eingabe ist Richtig")

// Wichtig! Form Action hierher!
doc document.Formular1.action="mailto:hier@da.de";
alert ("Formular wird abgeschickt")
}

return rueckgabe;

// alert ("Getestet");
}

// end hide -->
</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&uuml;ck</A>
<H1>
Formular-Eingabe Wortpr&uuml;fung
</H1>

<P>
<U>Testet auf Worte in 'form_wortlist.txt'</U>:
<P>

<!-- JavaScript schreibt hier die Wortliste hin -->

<SCRIPT language="Javascript">
<!--
document.write (wortliste)
//-->
</SCRIPT>

<P>
-&nbsp;um bei erlaubter Eingabe das Formular abzuschicken
<P>

<!-- Form OnSubmit="return checkwort();" -->

<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">
<!--
function chkFormular()
{
if (document.forms.Suche.Sucheingabe.value.length < 3)
{
alert("Bitte mindestens drei Buchstaben eingeben");
document.forms.Suche.Sucheingabe.focus();
return false;
}
}
//-->
</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>

&nbsp;&nbsp;

<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">
<!--
document.write ("<a href=\"javascript:document.forms[1].reset()\"><img src=\"frage.gif\" border=\"0\"></A>");
//-->
</script>
<noscript><input type="reset" value="löschen"></noscript>
</FORM>


- - -



<FORM METHOD=POST NAME="suche" ACTION="...">
<CENTER>

<SCRIPT LANGUAGE="JavaScript">
<!--

document.write('<A HREF="javascript:document.form.submit();"><IMG');
document.write(' SRC="submit.gif" ALT="Submit"');
document.write(' WIDTH=62 HEIGHT=28 BORDER=0></A>');

//-->
</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">
<!--
function changeBox(cbox)
{
box = eval(cbox);
box.checked = !box.checked;
}
// -->
</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">
<!--
function go(link)
{
window.location.href = link;
}
// End -->
</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">
<!--

// Bezieht sich hier auf alle A-Tags

function Indexzuordnen()
{
ElementAnzahl = document.getElementsByTagName("a").length;
alert ('Die Zahl der Verweise ist: ' + ElementAnzahl);
for (var i = 0; i < ElementAnzahl; i++)
{document.getElementsByTagName("a")[i].IN = i;}
}

function Anzeigen(IN)
{
alert("Meine Indexnummer ist: " + IN);
var MeinIndex = document.getElementsByTagName("a")[IN];
if (MeinIndex.title)
{window.status = 'TITEL ' + MeinIndex.IN + ' ist: ' + MeinIndex.title;}
else
{window.status = '';}
// Weitere Anweisungen;
}

// -->
</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">
<!--
document.write(document.links.length);
//--> </SCRIPT>

<P>
<U>Welche Verweise gibt es auf der Seite</U>?
<P>

<SCRIPT LANGUAGE="Javascript">
<!--
a = document.links.length;
for ( i=0; i<a; i++ )
{
document.write(document.links[i]);

document.write(" &nbsp; ");

document.write("<A HREF=\"");
document.write(document.links[i]);
document.write("\">");
document.write("Link" + (i+1));
document.write("</A>");

document.write("<BR>");
}
//--> </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">
<!--

function AVerweis()
{

// Verweise durchsuchen

for (var i=0; i<document.getElementsByTagName("a").length; i++)
{

// Bedingungen finden

// NEU: Zur Prüfung wechselweise auskommentieren

if ((document.links[i].protocol == "http:") && (document.links[i].hostname != "
www.MEINEDOMAIN.de") && (document.links[i].hostname != "WEITERE DOMAIN"))
// if ((document.links[i].protocol != "http:"))


// Klasse zuweisen

{
document.links[i].className ='abc';
//Weitere Eigenschaften
}


else
{
document.links[i].className ='defg';
//Weitere Eigenschaften
}


}
}
// -->
</SCRIPT>


<style type="text/css">
<!--
/* Das gewünschte Format (Style) der Verweise muß noch hier auf der Seite oder extern in CSS festgelegt werden:
*/


.abc
{
CSS- Formate
}

/* Untergruppen */

a.abc {color:red}
a:visited.abc {Css-Formate;}
a:focus.abc {Css-Formate;}
a:hover.abc {Css-Formate;}
a:active.abc {Css-Formate;}



.defg
{
CSS- Formate
}

/* Untergruppen */

a.defg {color:green}
a:visited.defg {Css-Formate;}
a:focus.defg {Css-Formate;}
a:hover.defg {Css-Formate;}
a:active.defg {Css-Formate;}



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;}

/* ... Hier werden die Formate definiert ... */
-->
</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">
<!--
window.onload = window.setTimeout("AVerweis()", 500);
//--> </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">
<!--
// Gilt für alle A - Tags, egal wie geschrieben

function linkformat()
{
for (var i = 0; i < document.getElementsByTagName("a").length; i++)
{
if (document.links[i].title == "Bloedsinn")
{
document.links[i].style.setAttribute("color", "green", false);
}
}
}

// -->
</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">
<!--

//Browser-Abfrage


if (netscape)
{
document.write("<link rel\=\"stylesheet\" type\=\"text\/css\" href\=\"ns.css\">")
}

else
if (MSIE)
{
document.write("<link rel\=\"stylesheet\" type\=\"text\/css\" href\=\"ms.css\">")
}

// -->
</script>



----------




JavaScript-Werte speichern



<html>

<head>

<title>Test</title>
</head>

<body>

<form action="SELBST.htm" method="POST" name="Kunde">
<p>&nbsp;</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">
<!--

function DieseAnzeigeAendern()
{
Anrede = document.forms.Kunde.Anrede.value;
Vorname = document.forms.Kunde.Vorname.value;
Nachname = document.forms.Kunde.Nachname.value;

alert ("Ihre Daten werden gespeichert");
alert (Anrede);
alert (Vorname);
alert (Nachname);


}

-->
</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">
<!--

function WertAendern()
{
...
opener.NeuerWert = "1"; // !!
alert ("Der Wert ist jetzt " + opener.NeuerWert);
}

-->
</SCRIPT>


...

</HEAD>
<BODY onload="WertAendern();">
...

</BODY>
</HTML>

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

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


In der öffnenden Seite (opener):

<HTML>
<HEAD>

...


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

function IrgendwasAendern()
{
if (window.NeuerWert == "1") // !!
{
alert ("Das neue Fenster ist offen");
...
}
}

-->
</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">
<!--

WICHTIG! Kein method="POST" !

-->
<p>
<input type="text" size="20" name="q" ></p>
<p>
<input type="submit" value="Nehmen"><br>
</form>

<!--

WICHTIG! Das folgende Script muß UNTERHALB der Links im BODY-Bereich eingefügt werden! Onload funktioniert nicht, da der Browser dann in eine neues Fenster schreibt.

-->


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


if (window.location.search)
{
alert(window.location.search);
var Kette = window.location.search;
var Abschnitt = Kette.split("?"); // beliebige Stelle
var Teile = Abschnitt[1];
alert(Teile);
if (Abschnitt[1])
{
for (var i = 0; i < document.links.length; ++i)
{
if ((Teile) && (document.links[i].search == ""))
{
document.links[i].search = "?" + Teile;

// Test:

document.write("<br> Die Google URL lautet jetzt: <p>" + document.links[i]);
}
}

}
}

// -->
</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">
<!--

var parameter0 = location.hash;
var parameterwerte = parameter0.split("#");
var parameterwerte1 = parameterwerte[1].split("-");

// document.writeln(parameterwerte0);
document.writeln(parameterwerte1);

-->
</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">
<!-- Hide script from older browsers
// alert (location.hash);

if (location.hash == "#Ja")
{
document.writeln ("Hallo");
}
// -->
</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>
<!--
var MailAddresse = &quo "jemand@irgendwo.de";// Dieser Wert wird ausgelesen, dann im Formular als Wert festgelegt und
// - Falls in PHP so nicht vorhanden -

function abschicken()
{
var Suchformular = document.forms["Mailen"];

alert (Suchformular.elements["MailAddresse"].value);

if (Suchformular.elements["MailAddresse"].value != MailAddresse)
{
Suchformular.elements["MailAddresse"].value = MailAddresse;
Suchformular.submit();
alert (MailAddresse + " abgeschickt");
}
}

// Nach dem Laden der Seite abgeschickt:
window.onload = abschicken;

// -->
</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>

<!-- Liest die Werte aus -->
<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">
<!--
var jetzt = new Date();
var WochenTag = jetzt.getDay();
var Tag = new Array("So", "Mo", "Di", "Mi", "Do", "Fr", "Sa");
// document.write(Tag[WochenTag] + " - ");
// -->
</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">
<!--
document.writeln("Vorname: " + VorName + "\<BR\>");
document.writeln("Name: " + Name + "\<BR\>");
document.writeln("PLZ: " + PLZ + "\<BR\>");
document.writeln("Stadt: " + Stadt + "\<BR\>");
document.writeln("Strasse: " + Strasse + "\<BR\>");
document.writeln("Nr: " + Nr + "\<BR\>");

SDT = eval(Tag[WochenTag]);
document.writeln("Hallo! Der Spruch des Tages lautet: \<I\>" + SDT + "\<\/I\>.");
// -->
</SCRIPT>

<P>
<B>Über Array:</B><BR>(aus Werte5.txt)
<P>

<SCRIPT language="JavaScript" type="text/javascript">
<!--
// WICHTIG:
document.writeln("Flexibel:\<BR\>");
document.writeln("\<BR\>"+Adressen[0]+" "+Adressen[1]+", "+Adressen[2]+", "+Adressen[3]+" "+Adressen[4]+".");
document.writeln("\<BR\>\<BR\>");

document.writeln("Einfach:\<BR\>");
for (var i = 0; i < Adressen.length; ++i)
{
document.writeln("\<BR\>" + Adressen[i] + " ");
}

alert(Meldung);
// -->
</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



Absolute (epochale) Zeit:

JavaScript rechnet die absolute Zeit in Millisekunden seit Neujahr 1970 (GMT), gerechnet als Jahr, Monat, Tag, Stunde, Minute, Sekunde.

Zur Übung:


<HTML>
<HEAD>
<TITLE> - 2000 - </TITLE>
</HEAD>
<BODY>
<P>
Absolute (epochale) Zeit:
<P>
JavaScript rechnet die absolute Zeit in Millisekunden seit Neujahr 1970 (GMT), gerechnet als Jahr, Monat, Tag, Stunde, Minute, Sekunde.
<P>
(Achtung: Der Januar ist der Monat 0, Dezember 11)
<P>
Für den 1.1.2000 0:00 wären das:
<P>
<FONT COLOR=RED>
<SCRIPT language="JavaScript" type="text/javascript">
<!--
var ZeitenWende = new Date(2000,0,0,0,0,0);
VergZeitInMS = ZeitenWende.getTime();
document.writeln(VergZeitInMS);
// -->
</SCRIPT>
</FONT>
Millisekunden.
<P>
Man kann diese ebenso präzise wieder zurückrechnen. Ausgegeben wird Jahr, Monat, Tag, Stunde, Minute, Sekunde - plus örtliche Differenz zu GMT:
<P>
<FONT COLOR=RED>
<SCRIPT language="JavaScript" type="text/javascript">
<!--
var ZeitPunkt = new Date();
ZeitPunkt.setTime(VergZeitInMS);
document.writeln(ZeitPunkt);
document.writeln(ZeitPunkt.getTimezoneOffset());
// -->
</SCRIPT>
</FONT>
Minuten. Und da liegt schon die erste Tücke. Aber egal, man soll ja damit ZeitDIFFERENZEN rechnen können. Gerechnet werden die Wochentage mit 0 für Sonntag bis 6 für Samstag:
<FONT COLOR=RED>
<SCRIPT language="JavaScript" type="text/javascript">
<!--
document.writeln(ZeitPunkt.getDay());
document.writeln(ZeitPunkt.getMonth());
document.writeln(ZeitPunkt.getDate());
document.writeln(ZeitPunkt.getFullYear());
document.writeln(ZeitPunkt.getMinutes());
document.writeln(ZeitPunkt.getSeconds());
// -->
</SCRIPT>
</FONT>
<P>
- Eben nicht. Die lokale Zeit wird korrekt ausgegeben, wenn man die Differenz ausgleicht; in diesem Fall aber keine 60 Minuten (wie behauptet), sondern 24 Stunden (wie festgestellt):
<P>
<FONT COLOR=RED>
<SCRIPT language="JavaScript" type="text/javascript">
<!--
var ZeitenWende = new Date(2000,0,0,24,0,0);
VergZeitInMS = ZeitenWende.getTime();
ZeitPunkt.setTime(VergZeitInMS);
document.writeln(ZeitPunkt);
document.writeln(ZeitPunkt.getDay());
document.writeln(ZeitPunkt.getMonth());
document.writeln(ZeitPunkt.getDate());
document.writeln(ZeitPunkt.getFullYear());
document.writeln(ZeitPunkt.getMinutes());
document.writeln(ZeitPunkt.getSeconds());
// -->
</SCRIPT>
</FONT>
<P>
<P>
Das Ganze in UTC (auf GMT bezogen) d.h. abzüglich der einen Stunde Differenz, wären:
<P>
<FONT COLOR=RED>
<SCRIPT language="JavaScript" type="text/javascript">
<!--
var Abzug = ZeitPunkt.getTimezoneOffset();
var ZeitenWendeUTC = (Date.UTC(2000,0,0,0,Abzug,0));
// enstpricht (2000,0,0,-1,0,0) - wenn man's weiß!
document.writeln(ZeitenWendeUTC);
// -->
</SCRIPT>
</FONT>
Millisekunden.
<P>
Man kann auch diese ebenso präzise wieder zurückrechnen (die angebliche Differenz zu GMT ignorieren):
<P>
<FONT COLOR=RED>
<SCRIPT language="JavaScript" type="text/javascript">
<!--
var ZeitPunkt = new Date();
ZeitPunkt.setTime(ZeitenWendeUTC);
document.writeln(ZeitPunkt);
document.writeln(ZeitPunkt.getDay());
document.writeln(ZeitPunkt.getMonth());
document.writeln(ZeitPunkt.getDate());
document.writeln(ZeitPunkt.getFullYear());
document.writeln(ZeitPunkt.getMinutes());
document.writeln(ZeitPunkt.getSeconds());
// -->
</SCRIPT>
</FONT>
<P>
</BODY></HTML>



In / mit DOS:

http://project-icarus.de/erleuchtet/hilfe/km-hist.txt




Datum auswerten mit JavaScript 2


Datum auswerten, Tag, Jahr und Monat bestimmen, x Tage kalendarisch zurückrechnen,
Tage, Monate und Jahre addieren und subtrahieren:

<P>

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

var Wochentag = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag");
var Monate = [ 'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember' ];

var HEUTE = new Date();

document.write("<P>");
document.write("<P>--------------");

document.write("<P>Zahl der Tage im 2. Monat im Jahre 2005 = ");
document.write(new Date(2005,2,0).getDate()); // (=28)

document.write("<P>--------------");
document.write("<P>");

document.write("<P> HEUTE ist: &nbsp; " + HEUTE );

var HeutigerTag = HEUTE.getDay();

document.write("<P>--------------");

var TageInDMonat = new Date(HEUTE.getFullYear(),HEUTE.getMonth()+1,0).getDate();

var DHeutigesDatum = HEUTE.getDate();
document.write("<P> Datum Heute: " + DHeutigesDatum);

var DFrueheresDatum = HEUTE.getDate()-1;
document.write("<P> Datum Gestern: " + DFrueheresDatum);

document.write("<P>");
document.write("<P> Dieser Monat = " + Monate[HEUTE.getMonth()+1]);
document.write("<P> Dieses Jahr = " + HEUTE.getFullYear());
document.write("<P> Wochentag = " + HeutigerTag);
document.write("<P> Wochentag = " + Wochentag[HeutigerTag]);
document.write("<P> Zahl der Tage in diesemMonat = " + TageInDMonat);

document.write("<P>");

// Bei komplexen Ausdrücken immmer mit EVAL,
// da sonst die Jahreszahl als Text interpretiert und die 1 hinten dran gesetzt wird.

var NaechstesJahr = eval(HEUTE.getFullYear()+1);
document.write("<P>Nächstes Jahr: ");
document.write(NaechstesJahr);
document.write("<P>");

document.write("<P>------------");
document.write("<P>");

//

document.write("<P>");

var FrueheresDatum = new Date(new Date().setDate(HEUTE.getDate()-35));

document.write("<P>");

// Datum vor 35 Tagen:

document.write("<P>HEUTE vor 35 Tagen: ");

document.write("<P>");
document.write(FrueheresDatum);

document.write("<P>");
var PFrueheresDatum = new Date(new Date().setDate(HEUTE.getDate()-35)).getDate();

document.write("<P>HEUTE vor 35 Tagen als Tag: &nbsp; ");
document.write(PFrueheresDatum);

document.write("<P>");
var MFrueheresDatum = new Date(new Date().setDate(HEUTE.getDate()-35)).getMonth()+1;

document.write("<P>HEUTE vor 35 Tagen als Monat: ");
document.write(MFrueheresDatum);

document.write("<P>");
var YFrueheresDatum = new Date(new Date().setDate(HEUTE.getDate()-35)).getFullYear();

document.write("<P>HEUTE vor 35 Tagen als Jahr: ");
document.write(YFrueheresDatum);
document.write("<P>");


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


// Parse date -
// Prüfen, ob eine Datumsangabe gültig ist (ob es als reales Datum existiert)
// (auch Schaltjahr)

// Datum:

var Monat="02"; // Februar
var Tag="30";
var Jahr="2000";

// Schreibe das Datum JS- lesbar:

var PruefDatum = Monat+"/"+Tag+"/"+Jahr;

// convert it into a date instance
// Parse Pruefdatum:
var DT = new Date(Date.parse(PruefDatum));

// Bis hier wird noch jeder Unsinn als Datum ausgeworfen,
// da JavaScript einfach nur die Zahlen addiert:

alert(DT);


// check the components of the date
// since Date instance automatically rolls over each component

// Teile das PruefDatum wieder in seine Komponenten auf:
var arrDateParts = PruefDatum.split("/");

// Vergleicht Parse_PruefDatum mit Split_PruefDatum!

if ((DT.getMonth() == arrDateParts[0]-1 &&
DT.getDate() == arrDateParts[1] &&
DT.getFullYear() == arrDateParts[2]))

{alert("OK");}

else{alert("UNGÜLTIGES DATUM");}



//-->
</script>



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 berechnendes HTML-Formular


- Oft wird ein HTML - Formular benötigt, das - wie MS Excel oder andere Kalkulationstabellen, Libre Office Calc u. dgl. - neue Eingaben sofort verarbeitet und das Ergebnis berechnet und auswirft.

- Hier soll versucht werden, das Ganze in den vier Grundrechnungsarten in reinem JavaScript hinzubekommen.

- Das Java Script dazu ist relativ einfach, beinhaltet aber ein paar Tricks: Eine manuelle Feld-Eingabe in JavaScript simulieren, feststellen, welches gerade das aktuelle Feld ist, usw.

- Es muß für die Rechnung das englische Zahlenformat jeweils in das deutsche umgewandelt werden -und für die anschließende Darstellung wieder zurück

- Dazu das Folgende kopieren und als HTML-Datei speichern:



<HTML>

<HEAD>

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

// Einstellungen (selbsterklärend)

var AnfangsFeld = 0;
var Kommastellen = 2;


// Das Folgende ausschalten, wenn sich Vorgaben in den Feldern auf der Seite befinden:
var Anfangsanzeige = "0000";



// Default
// Ergebnisfelder nullen:

function nullen()
{
var l = document.getElementsByTagName("INPUT").length;

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

if (document.getElementsByTagName("INPUT")[i].readOnly != true)
{
document.getElementsByTagName("INPUT")[i].focus();

// Das Folgende ausschalten, wenn sich Vorgaben in den Feldern auf der Seite befinden:
document.getElementsByTagName("INPUT")[i].value = Anfangsanzeige ;
}

}

// Wichtig
// Simuliert eine Eingabe im Anfangsfeld, um die erste Berechnungskaskade auszulösen
// onchange kleingeschrieben!
document.getElementsByTagName("INPUT")[AnfangsFeld].onchange();
}



// Zahlen umwandeln
// Bei englischem Zahlenformat - 10,000.00 - überflüssig

// Vorgaben

var regex_dot = /\./g;
var regex_comma = /\,/g;


// Mache englisches Zahlenformat
function MEWERT(val)
{
val = parseFloat(val.value.replace(regex_dot,'').replace(regex_comma,'.'));
return val;
}

// Und wieder rückgängig machen

// Mache deutsches Zahlenformat
function MDwert(x)
{
x = x.toLocaleString();
x = x.replace((regex_comma,'_').replace(regex_dot,',')).replace('_','.');
return x;
}


function berechne(ausdruck)
{
ausdruck = MDwert(parseFloat(eval(ausdruck).toFixed(Kommastellen)));

// Versuch Fehlermeldung Abfangen 1
// if (isNaN(eval(ausdruck)) && (isNaN(eval(ausdruck)) != false)) // FF
// {ausdruck = "Fehler" ;}

// Teilung durch Ganzzahl prüft ob Zahl
// if (isNaN((ausdruck/10000)) == true) // MSIE
// {ausdruck.style.color = "red";}

return ausdruck;
}



// Aktualisiere alle Felder nacheinander
// y= this.name
// Der Feldname muß eindeutig sein - sonst mit ID arbeiten


function Aktualisiere(y,z)
{
var l = document.getElementsByTagName("INPUT").length;

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

// Suche das aktuelle Element
if (document.getElementsByTagName("INPUT")[i].name == y)
{
// Gehe z Felder weiter mit dem Focus
document.getElementsByTagName("INPUT")[i+z].focus();
}


// Nach jeder Berechnung springt der Fokus wieder in das erste Feld
// Setze Focus wieder auf das Anfangsfeld
document.getElementsByTagName("INPUT")[AnfangsFeld].focus();
document.getElementsByTagName("INPUT")[AnfangsFeld].select();
}


// Versuch Fehlermeldung Abfangen 2
// Trotz Eindeutigkeit: getElementsByName(y)[0] = erstes Element mit diesem Namen

// Teilung durch Ganzzahl prüft ob Zahl (für MSIE)
if ((isNaN(document.getElementsByName(y)[0].value/10000) == true) || (isNaN(document.getElementsByName(y)[0].value) == true))
{
// document.getElementsByName(y)[0].value = "Fehler" ;
document.getElementsByName(y)[0].style.color = "red";
}

}


// -->
</SCRIPT>


</HEAD>

<BODY onload="nullen();">
<P>

- Die Funktion nullen() setzt nur alle Felder zu Beginn aus einen vorbestimmten Wert, wenn diese keinen Anfangswert (value) vorgegeben haben.
<P>

- Die Funktion Aktualisiere(y,z) hat zwei Aufgaben:
<P>

* Einmal um festzustellen und zu bestimmen, welches gerade das aktuelle Element ist, das die Funktion auslöst; dazu holt sie sich mit (y) = (this.name,...) den Namen des auslösenden EINGABE-Feldes und löst die nächste Aktion durch Verlegen des Fokus von dort auf das vorgesehene nächste Berechnungs- oder ERGEBNIS- Feld auf, wo wiederum der Fokus mit (onFocus...) die Neuberechnung des Feldes auslöst, dann den Sprung zum nächsten Ergebnisfeld, und immer so weiter - bis zum letzten.

[Siehe dazu auch hier: Indexnummern auslesen und zuordnen]

<P>
* Zum Anderen ist nicht immer das allernächste Feld in der Reihe auch eine Ergebnisfeld - und so holt sie sich mit (z) die Anzahl der Felder, die der Fokus zum nächsten nächsten Berechnungs- oder ERGEBNIS- Feld springen muss. Ein reines Eingabefeld anzuspringen ist nicht sinnvoll; diese sollen also übersprungen werden.
<P>

- Die Funktion berechne(ausdruck) berechnet den Rechenausdruck, der zu dem Feld geschrieben wurde, und gibt das Ergebnis (mit MDwert in deutscher Notation) zurück.
<P>

- Die Versuche Fehlermeldung Abzufangen 1 und 2 sind rein optischer Natur und eigentlich überflüssig; sie sollen die von Browser zu Browser unterschiedlichen Fehlermeldungen abfangen, wenn der Benutzer falsche Eingaben macht. Man könnte dieses Problem auch lassen oder durch Beschränkung der Eingabe auf Zahlen und Kommata lösen.
<P>

Ein andermal. Wichtig ist hier nur die Konstruktion 'document.getElementsByName(y)[0]', die bei der Suche nach dem Element mit dem eigenen Namen genau das erste Element mit diesem Namen findet - hier also das einzige - denn beim Name könnten es ja mehrere sein.
<P>

Die daraus folgende etwas erratische Farbgebung von Fehlern, Tausender- und Dezimalzahlen ist der unterschiedlichen Fehlerbehandlung der Browser in deutscher Sprache geschuldigt, welche auch dazu zwingt, die Tausender- Trennzeichen (Punkte) und Dezimal- Trennzeichen (Kommas) für die Berechnung im englischsprachigen Java Script umzutauschen.
<P>

<FORM method="post" target="_self" name="tmp">
<P>

Bestätigen der Eingabe durch Weiterspringen mit der [Umschalt] - Taste, oder durch Klicken in das nächste Eingabefeld.
<P>

Die Seite neu laden mit [F5] oder [Strg]+[F5] - je nach Browser.
<P>


Erste Eingabe:
<P>

[-EINGABE-Felder haben Tabindex, Onfocus und Onchange zur Aktualisierung]
<P>

[-Die Eingabereihenfolge wird durch Tabindex erzwungen - und zwar unabhängig von der Verarbeitungsreihenfolge]
<P>

<INPUT name="A1" tabindex="1" class="write" onfocus="this.select();" onchange="Aktualisiere(this.name,2);" type="text">
<P>

Zweite Eingabe:
<P>

<!-- Aktualisiere(y,z) - y findet den Element-Namen - dieser muß eindeutig sein - z = Sprungzahl zum nächsten ERGEBNIS-Feld -->

<INPUT name="B2" tabindex="2" class="write" onfocus="this.select();" onchange="Aktualisiere(this.name,1);" type="text">
<P>


Erstes Ergebnis: C = A x B
<P>

<!-- ERGEBNIS-Felder sind readonly und haben Onfocus zur Berechnung sowie zur Aktualisierung -->
<P>

<INPUT name="C3" readonly="true" class="readonly" onfocus="this.value=berechne((MEWERT(tmp.A1))*(MEWERT(tmp.B2)));Aktualisiere(this.name,1);" type="text">
<P>


Zweites Ergebnis: D = C x 2
<P>

<!-- Die Einbeziehung der Werte aus den Feldern folgt im Deutschen immer dem Schema (MEWERT(tmp.FELDNAME) -->

<!-- Sollen Werte aus vorherigen Feldern nur übernommen werden, muß das Schema lauten: berechne((MEWERT(tmp.FELDNAME))*1) -->

<INPUT name="D4" readonly="true" class="readonly" onfocus="this.value=berechne((MEWERT(tmp.C3))*2);Aktualisiere(this.name,2);" type="text">
<P>


Dritte Eingabe:
<P>

<INPUT name="D5" tabindex="3" class="write" onfocus="this.select();" onchange="Aktualisiere(this.name,1);" type="text">
<P>


Drittes Ergebnis: F = (D - E) * 100
<P>

<!-- Bei komplexen Ausdrücken die Klammer-Regeln beachten! -->

<INPUT name="D6" readonly="true" class="readonly" onfocus="this.value=berechne(((MEWERT(tmp.D4))-(MEWERT(tmp.D5)))*100);Aktualisiere(this.name,1);" type="text">
<P>

<!-- Dieses letzte (versteckte) Eingabefeld dient u. a. dazu, die Ausführung des Scriptes zu unterbrechen -->

<INPUT name="Ende" type="hidden">
<P>

</FORM>
<P>


Das Ganze ausgeführt hier:
<P>


http://project-icarus.de/erleuchtet/rechner/xlrechner.htm

<P>

</BODY> </HTML>




Automatisch Download starten



<meta http-equiv="Refresh" content="1; url=
">http://www.meindomain.com/xy.zip">

Ihr Browser sollte das Herunterladen automatisch beginnen. Wenn er es nicht tut, klicken Sie

<a href="hier">http://www.meindomain.com/xy.zip">hier

um die Datei herunterzuladen.

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">
<!--


if (window.location.protocol == "http:")
{

// Von: http://www.web-toolbox.net/webtoolbox/diverses/ordnerinhalte.htm

var myloc = window.location.href;
var locarray = myloc.split("/");
delete locarray[(locarray.length-1)];
var arraytext = locarray.join("/");


var Pfad = arraytext;
var UnterPfad = "unterverzeichnis/favicon.ico";
var FaviconPfad = Pfad + UnterPfad ;

document.write ('<LINK rel\=\"shortcut icon\" href\=\"' + FaviconPfad + '\"\>');

// alert (FaviconPfad);

}


// -->
</SCRIPT>

</HEAD>





Editieren

Frameset_No Frames



Die Frameset - Seite

Zwischen die <NOFRAMES> </NOFRAMES> - Tags eines Framesets paßt eine ganze HTML-Seite!

Man sollte da für die Suchmaschinen Verweise einbauen; ggf. paßt eine ganze Startseite für framelose Browser hinein; diese startet dann als Alternative automatisch.

Es genügt also eigentlich, in die allgemeine Start- Seite 'index.htm' den <BODY> - Bereich in einen <NOFRAMES> einzubinden und den <FRAMESET> - Bereich oben drüber zu kleben.




Extra Script & Seiten-Ident



Grundsätzlich sollte man Java Script möglichst auslagern.

Änderungen und Ergänzungen lassen sich so leichter durchführen.

Und wenn eine Seite ohne Java Script - Datei offline betrachtet werden kann, dann gibt es auch weniger Ärger.

---

Will man nun auf einzelnen Seiten unterschiedliche Vorgänge ablaufen lassen, kann man das über den Seitennamen (für bestimmte Bereiche) oder einen eigens kreierten Ident-Namen steuern.

Dazu auf jeder Seite in PHP oder JavaScript dieser Seite einen eigenen Ident-Namen vergeben, z.B.:

IdentNamen = "Kontaktformular";

Dann lassen sich mit

if (IdentNamen == "Kontaktformular")

feste Scripte je nach Seite variieren.



---


Diese Auslagerungs-Dateien: "XYZ.JS"
- wie auch "XYZ.CSS" - kann man mit "A_" oder "0-" (Null) beginnen lassen, um sie am Anfang eines Verzeichnisses zu sammeln.




Fenstername



Um beim Editieren von Frames den Namen einer Seite / eines Rahmens zu erkennen:

<P>
<script type="text/javascript">
<!--
document.write("Fenster Window-Name: " + window.name);
//-->
</script>
<P>





Suchmaschinen u. a.

Meta -Tags




META - Tags


'META http-equiv' nur bei 'charset' und anderen HTML- Funktionen!


<META HTTP-EQUIV="CONTENT-Type" CONTENT="text/html; charset=iso-8859-1" >


Sonst: 'META NAME'!

Datum / Sprache:

<META NAME=date CONTENT=1999 - 06 - 21 T 09:25:37 + 00:00> ( = Abweichung zu Greenwich )

<META NAME="language" CONTENT="de"> Sprache


META DESCRIPTION (Inhaltsbeschreibung) immer angeben, denn das wird in den Suchmaschinen dem Anwender als Beschreibung angezeigt - wenn.

<META NAME="description" CONTENT="Die Seite über MICH">


---------


Weitere mögliche META -Tags, die aber nicht unbedingt von Suchmaschinen oder anderen Robots ausgewertet werden - womöglich aber von eigenen.

<META NAME="Keywords" CONTENT="Webdesign, Web Design, Service, kostenlos, günstig">


<META NAME="Audience" CONTENT="Alle">

<META NAME="Author" CONTENT="Ali Bengali">

<META NAME="Copyright" CONTENT="Ali Bengali 1999">

<META NAME="Language" CONTENT="Deutsch">

<META NAME="page-topic" CONTENT="HTML-Formular">

<META NAME="Revisit" CONTENT="After 1 days">

<META NAME="Title" CONTENT="Webdesign auf professionelle Weise">





Kommentare für interne Suche


Man kann in HTML Kommentare für interne Suche verwenden:

(aus der ZEIT )

<html>
<!-- ARTIKEL:JA -->
<!-- plazierung:R3 -->
<!-- rahmen:- -->
<!-- teasertitel:No future im Paradies -->
<!-- linktitel:Neuseeland hat die höchste Selbstmordrate unter Jugendlichen -->
<!-- teaser:Neuseeland macht uns angeblich vor, wie man den Sozialstaat reformiert. Und hat heute die höchste Selbstmordrate unter Jugendlichen der westlichen Welt. -->
<!-- titel:No future im Paradies -->
<!-- distribution:aktuell -->
<!-- autoren: -->
<!-- ausgabe:30 -->
<!-- jahr:1998 -->
<!-- erscheinungsdatum:19980716000000 -->
<!-- ressort: -->
<!-- rubrik:FreiZEIT -->
<!-- bild_1: -->
<!-- email: -->
<!-- serie: -->
<!-- channel:freizeit -->

<Body>

usw.

Diese Stichworte werden einerseits in HTML nicht angezeigt, andererseits können sie mit Suchroutinen, internen Suchmaschinen oder Textbloggern ausgewertet werden:

http://project-icarus.de/erleuchtet/hilfe/tl-demo.htm



Für die Suchmaschinen



Für die Suchmaschinen:


* Web-Seiten nicht mit Frames oder JavaScripts beginnen lassen, das verwirrt die Web- Roboter /Spider.


* Viele Suchmaschinen sortieren Ergebnisse alphabetisch. Titel danach ausrichten.


* Suchmaschinen beis Seiten mit Frames suchen zuerst in den Framesets und finden dort nichts. Deshalb gehört in den NOFRAMES - Bereich eine Beschreibung oder Zusammenfassung der Seite.

Titel und Keywords in Frameset nicht vergessen!


* Versteckte Verweise:

Brückenseiten werden benötigt, um die Präsenz in den Suchmaschinen zu erhöhen. Dabei wird gern übertrieben. Doch Brückenseiten sind schnell erkannt. Denn typischerweise gibt es nirgendwo einen Link, der auf eine solche Seite verweist. Abhilfe schafft ein unsichtbarer Verweis.

<a href="/eingang/seite34.htm"></a>

Dieser Link wird nicht angezeigt, doch Suchmaschinen folgen ihm.

Von:
http://www.ideenreich.com/tricks10.shtml

Ansonten: Suchmaschinen suchen nach Links mit sinnvollem Inhalt!







Robots I




Robots


Es ist durchaus möglich, Seiten für Suchmaschinen zu SPERREN!

Meta Name="Robots" Contents="NOINDEX"


----


<META NAME="Robots" CONTENT="INDEX, FOLLOW">

<meta name="ROBOTS" CONTENT="all">

läßt dagegen alle Suchmaschinen-Roboter alle Seiten durchsuchen





Robots II



Robots.txt

Suchmaschinen arbeiten in der Regel mit Robotern, die Web - Seiten durchforsten und die gefundenen Informationen auswerten. Dies können Sie sich bei Bedarf zunutze machen, um genau das Gegenteil zu erreichen, nämlich um Roboter auch auszusperren. Dazu erstellen Sie eine einfache Textdatei mit dem Namen robots. txt.

In diese Datei schreiben Sie die Informationen, die dem Roboter gewissermaßen als interne Hausordnung dienen. "User-agent" bezeichnet dabei den Roboter selbst, "Allow" steht für die erlaubten Verzeichnisse, "Disallow" entsprechend für die verbotenen.

Eine entsprechende Datei könnte also wie folgt aussehen:

User-agent "altavista"
Disallow "/privat"

Um alle Roboter anzusprechen, verwenden Sie " * ", um alle Verzeichnisse zu erlauben oder zu verbieten, verwenden Sie ebenfalls " * ". Wenn Sie beispielsweise alle Roboter komplett ausladen möchten, sieht dies wie folgt aus:

User-agent "* "
Disallow "*"

Beachten Sie dabei, daß jede Anweisung in einer separaten Zeile stehen muß.
Die Datei robots. txt

überspielen Sie anschließend in das Wurzelverzeichnis Ihres Servers.





Cookies




Cookies

Cookies in Netscape löschen: Cookies.txt löschen




Cookies und local Storage

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

Die Einträge sind auch hier den einzelnen Webseiten zugeordnet.


Verwaltet und gelöscht werden auch diese Dateien über die Cookies- Funktion,

z.B.: im Mozilla Firefox:

Extras / Einstellungen / Cookies

Achtung: Nicht alle Einträge werden auch als Cookies angezeigt, aber mit "Alle Cookies löschen" werden dennoch sämtliche Einträge in der ganzen Datenbank gelöscht!