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