Klicktipps - JavaScript programmieren: Informationen, Tipps, Beispiele, Bücher, Links

JavaScript-Tipps

Die Klicktipps-Seiten wurden Anfang 2007 auf PHP umgestellt. Auch in den Seiten, die ich f�r Kunden programmiere, verwende ich, so weit es irgend m�glich ist, PHP statt JavaScript: JavaScript ist mir generell zu unzuverl�ssig, weil es auf den PCs der Seitenbetrachter l�uft, je nach Browser unterschiedlich funktioniert oder sogar ausgeschaltet sein kann.
Trotzdem gibt es gelegentlich Aufgaben, die gar nicht oder nur sehr schlecht mit HTML, CSS und PHP gel�st werden k�nnen. Dazu stelle ich hier ein paar Empfehlungen, Links und Tipps vor:

B�cher
Links
Programmiertipps und -ideen

B�cher

	Mit JavaScript. Einf�hrung - Programmierung - Referenz klappt der Einstieg in JavaScript.
		JavaScript: Das umfassende Handbuch und JavaScript - kurz und gut sind vermutlich die beiden besten B�cher zu diesem Thema.

Weitere Buchtipps f�r den Bau von Homepageseiten gebe ich auf der Seite "Tipps f�r Webmaster und Homepagebauer".

Programmiertipps und -ideen

Manchmal finde ich f�r Probleme L�sungen, die dann �fter benutzt werden. Daraus entstehen meist kleine praktische Funktionen. Einige dieser Funktionen und auch ein paar einzelne kleine Ideen (N�tzliches bis Witziges) stelle ich Ihnen hier vor. Die Beispiele entalten zur besseren �bersichtlichkeit oft mehr Blanks als n�tig.
Viel Spa� beim Benutzen! - und lassen Sie sich dadurch zu eigenen Experimenten und Ideen anregen:

Homepage aus Frame befreien

Es gibt immer noch Homepages, die versuchen, fremde Homepages innerhalb ihrer Seite mit Frames oder iFrames anzuzeigen. Dies kann man mit

// Seite aus Frame befreien if(top.parent.frames.length>0){top.parent.location.href=self.location.href;}

verhindern.
Man kann diesese Code-Zeile mit

in den head-Bereich der wichtigsten Seiten setzen,
oder im body-Tag unterbringen:

<body onload="if(top.parent.frames.length>0){top.parent.location.href=self.location.href;}" >

Zahlen runden

Hier zwei Ideen zum Runden von Zahlen:

/* Zahlen auf n Stellen runden */ function runden_n_Stellen(aaa,n){ return Math.round( aaa* Math.pow(10,n) / Math.pow(10,n) ); } /* Runden mit beliebigen Schritten */ function runden_mit(aaa,r){ // r gibt an, in welchen Schritten gerundet wird return Math.round(aaa/r) * r; }

Wurzeln ziehen, Radizieren

Quadratwurzeln kann man mit Math.sqrt() berechnen. Ab der dritten Wurzel ben�tigt man etwas mehr:

/* Radizieren Wurzelziehen (nur mit nat�rlichen Zahlen als Exponent) */ function wurzel(bb,ee){ if(ee<=0){return 0;} // ung�ltig if( ee!=Math.floor(ee) ){return 0;} // keine nat�rliche Zahl if(bb>=0){ return Math.pow(bb,1/ee);} else{ if( (ee%2)==0) {return 0;} // ung�ltig else{return -1*Math.pow(bb*-1,1/ee);} } }

Zufallszahlen

Gegen die �bliche Langeweile oder wenn irgendetwas nicht jedsmal geschehen bzw. angezeigt werden soll, ben�tige ich in fast jeder Programmiersprache, die ich bisher kenne, Zufallszahlen.
Solche Befehle gibt es auch in jeder Programmiersprache, aber immer anders, und ich kann sie mir einfach nicht merken.
Also baue ich mir immer erst mal eine Funktion zufall(), die mir ganze Zahlen in einem Bereich "von/bis" erzeugen kann:

/* Funktion: Zufallszahl im Raum von aa<=x<=bb erzeugen */ function zufall(aa, bb) { var zz; // Ergebnisvariable aa=Math.round(aa); bb=Math.round(bb); zz=aa; // mindestens aa als Ergebnis zur�ckgeben if(bb>aa){ zz = aa + Math.floor(Math.random() * (bb-aa+1) ); } return zz; // Ergebnis zur�ckgeben } // Anwendung: Z. B. Zufallszahlen von 5 bis 31 xx = zufall(5 , 31); // Zufallszahlen von 0,1 bis 1,5 xx = zufall(1 , 15)/10;

Zeilenumbruch abh�ngig von der Fensterbreite

Meist kann man den Zeilenumbruch dem Browser �berlassen oder mit CSS steuern. Wenn er aber wirklich mal in Abh�ngigkeit von der Fensterbreite gesteuert werden soll, hilft die folgende Funktion:

/* Funktion: Bei zu schmalem Fenster ein <br> einf�gen. */ function br_schreiben( xmin ) { var iWidth = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth); if(iWidth != 0 && iWidth < xmin ){ document.write("<br>"); } }

Elemente abh�ngig von der Fensterbreite ein- und ausblenden

Je nach Breite des Browserfensters sollen manchmal unterschiedlich viele Elemente, z. B. Bilder sichtbar sein. Manches l�sst sich mit dem CSS-Befehl overflow:hidden regeln. In anderen F�llen m�chte man aber wirklich ein Element gezielt ein- oder ausblenden. Dazu bekommt das Element eine ID und wird zun�chst auf display:none gesetzt. Mit einer getElementById kann das Element je nach Bedarf sichtbar gemacht werden.

/* Funktion: Ab einer bestimmten Mindestbreite des Browserfensters ein Element auf "sichtbar" setzen */ function element_sichtbar( xmin , element_id ){ var iWidth = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth); if ( iWidth != 0 && iWidth >= xmin ) { document.getElementById( element_id ).style.display = "block"; } }

Fensterbreite passend zur Bildschirmbreite einstellen

Bei �lteren Browsern, z. B. Internet Explorer bis Version 7 funktioniert die CSS-Eigenschaft "min-width:" nicht. Wie man dies statisch mit mit "width:" umgehen kann, ist in meiner Seite css-tipps.php erkl�rt.
Es w�re aber auch m�glich, das Bildschirmfenster mit JavaScript gr��er einzustellen. Wie das funktionieren k�nnte, ist hier gezeigt:

/* Funktion: Die Seite auf eine Mindestbreite setzen */ function seite_auf_mindestbreite( xmin ){ var vers = navigator.appVersion; var pos = vers.indexOf('MSIE'); var genauezahl; // Bildschrmbreite und -h�he ermitteln var scrx = screen.width != undefined ? screen.width : screen.availWidth; var scry = screen.height != undefined ? screen.height : screen.availheight; // linken Rand des Fensters ermitteln var winx0 = window.screenLeft != undefined ? window.screenLeft : window.screenX; // alle Browser au�er IE verlassen diese Funktion if (navigator.appName.indexOf("Explorer") < 0){ return; } // IE > 7 verl�sst diese Funktion if (pos > -1){ genauezahl = parseFloat( vers.substring(pos + 5) ); if (genauezahl > 7){ return; } } var iWidth = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth); var iHeight = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight); if (iWidth != 0 && iWidth < xmin && iHeight != 0) { // Erst nach links, danach breiter, weil manche IE-Versionen // nicht �ber den rechten Rand hinaus verbreitern wollen. // Window (wenn m�glich) so weit nach links r�cken, // dass es ganz im Bildschirm ist. // mit +40 zur Korrektur der Randbreite if ( winx0 + (xmin+40) >= scrx ) { window.moveTo( Math.max( 10 , scrx-(xmin+40)-5 ) , 10); } // Fenstergr��e �ndern window.resizeTo( xmin+40 , Math.min(iHeight+190,scry) ); } }

Diese Funktion wird aufgerufen mit:

Die Frage ist allerdings, ob Seitenbesucher es - falls sie es �berhaupt bemerken - gerne haben, dass man ihnen die Gr��e eines Bildschirmfensters verstellt.

Fensterbreite von JavaScript an PHP �bertragen

Da PHP nicht im Browser des Users, sondern beim Provider l�uft, kann man mit PHP die momentane Bildschirmgr��e oder gar Fenstergr��e des Users nicht ermitteln. Falls man diesen Wert dennoch dringend im PHP ben�tigt, muss man ihn �ber eine Variable in der URL (Homepage-Adresse) an PHP �bergeben. Die Links m�ssen dazu IDs mit Namen "navi1", "navi2" usw. haben.

/* Funktion: Bildschirmbreite ermitteln und an Links mit ID="naviNN" �bergeben */ function bildschirmbreite_in_links_ergaenzen( anzahl_links ) { /* Bildschirmbreite (oder Fensterbreite) abfragen und zu internen Links erg�nzen. Hinweis: Diese JavaScript-Funktion erst dann im HTML starten, wenn alle Links bereits in die Seite geschrieben sind! */ var breite = screen.width; /* alternativ k�nnte man auch die Breite des Browserfensters ermitteln: */ /* var breite = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth); */ var linkziel = ""; // Fensterbreite nicht zu ermitteln oder unrealistisch if( typeof( breite )=="undefined" ) { return; } if( breite <= 50 ) { return; } for( var ii = 1 ; ii <= anzahl_links ; ii++ ) { myID = 'navi'+ ii; if ( document.getElementById( myID ) ){ linkziel = document.getElementById( myID ).href; }else{ continue; } // Wenn kein Linkziel gefunden, Schleife am Anfang fortsetzen if( typeof( linkziel )=="undefined" || linkziel=="" ) { continue; } linkziel = linkziel.substr( linkziel.lastIndexOf("/")+1 ); linkziel = linkziel + "?sw=" + breite ; document.getElementById( myID ).href = linkziel; } }

Im PHP kann dieser Wert folgenderma�en gepr�ft und genutzt werden:

<?php $xwith = 0; if( isset($_GET['sw']) ){ //fehlerhafte Eingaben filtern if ($_GET['sw'] >= 100 or $_GET['sw'] <= 4000 ){$xwith = $_GET['sw'];} } // jetzt kann mit $xwith weitergearbeitet werden ?>

In der Adresszeile (URL) �bergebene Werte sollte man vor der Verwendung immer intensiv filtern und pr�fen!

Version des Internet Explorers ermitteln

Der Internet Explorer verh�lt sich (vorsichtig ausgedr�ckt) gelegentlich anders als andere Browser. Zur Korrektur muss man besonders f�r �ltere IE-Versionen spezielle CSS- oder HTML-Befehle benutzen. Voraussetzung dazu ist es, die Version des Internetexplorers zu ermitteln.

/* Version von IE-Browsern ermitteln */ function version_ie_browser( ){ var vers = navigator.appVersion; var pos = vers.indexOf('MSIE'); // nicht-IE-Browser verlassen diese Funktion if (navigator.appName.indexOf("Explorer")<0){return 0;} return parseFloat(vers.substring(pos + 5)); } //Beispiel zur Nutzung der Funktionen version_ie_browser() und zufall(): vs=version_ie_browser( ); if( Math.random() >= 0.8 && vs > 0 && vs <= 6 ){ document.writeln("<br><br>Hinweis:"); document.writeln("<br>Ihr Browser ist sehr alt (Internet-Explorer "+vs+")."); document.writeln("<br>Wollen Sie einen neueren Browser installieren?"); document.writeln("<br><a href='http:\/\/www.browserchoice.eu' "); document.writeln("target='_blank'>Browserauswahl<\/a>"); }

Wenn es allerdings 'nur' darum geht, f�r den Internetexplorer das CSS zu �ndern, kann man eine Browserweiche wie z. B. [if lt IE 7] im CSS einbauen.

JavaScript-Funktionen in HTML-Seiten einf�gen

Wie f�gt man seine JavaScript-Funktionen am einfachsten in alle oder mehrere HTML-Seiten ein?
Man schreibt die Funktionen in eine Datei, die man z. B. funktionen.js nennt.
In HTML-Seiten, in denen die Funktionen ben�tigt werden, werden sie mit

im Bereich zwischen <head> und </head> eingef�gt. Alle JavaScript-Funktionen k�nnen dann zentral verwaltet und einfach genutzt werden. In den einzelnen HTML-Seiten muss nur noch der f�r die jeweilige Seite ben�tigte JavaScript-Code stehen.

Falls Sie auch zu den Menschen geh�ren, die in einer PHP-Datei steuern, was alles im head-Bereich stehen soll (Metatags, CSS-Dateien und -Eigenschaften usw.), k�nnen Sie Ihre JavaScript-Datei mit PHP dort "zuschalten", wo sie wirklich ben�tigt wird:

<?php $filename = basename($_SERVER['PHP_SELF']); if( $filename=="index.php" OR $filename=="xxxxx.php" OR $filename=="yyy.php" ){ ?> <script src="funktionen.js" type="text/javascript"></script> <?php } ?>