Der Closure Compiler stellt die Spitze einer Reihe von JavaScript Tools dar, die als Optimierer, Shrinker oder teils auch primitiver Kopierschutz durch das Netz geistern. Was genau es mit Closure auf sich hat und was es bei seiner Verwendung zu beachten gibt, beschreibt dieser kurze Überblick, der sich auf den Compiler beschränkt.

Als erstes Türchen für den diesjährigen Adventskalender haben wir euch eine Ankündigung zu machen. In einer Woche, also Mittwoch, den 7. Dezember findet auf tutorials.de wieder ein Live-Workshop statt, zu dem wir euch herzlich einladen wollen.

Das Thema und alles weitere erfahrt ihr nach dem Klick.

Hier noch ein weiteres Tutorial in der HTML 5 File API-Reihe.
Das erste Tutorial war: Checksummen mit JavaScript & HTML 5 File API.

Hallo zusammen,

heute mal ein Tutorial zu jQuery.


Das wohl beliebteste JavaScript-Framework bietet unzählige Möglichkeiten auf sehr einfache Weise coole und professionelle Websites zu erstellen. Download

Im folgenden werden Drop-Down-Menüs und eine sog. Social-Network-Bar erstellt.

Das folgende Script ermöglicht, einen Benutzer-Hinweis (oder auch eine alternative Werbebotschaft) im Browser anzuzeigen, wenn ein gängiger Werbeblocker wie Adblock Plus (Firefox Add-On) oder WebWasher aktiviert ist.

Funktionen des Anti-Adblock-Scripts (AAS):

• Der Original-Werbemittelcode bleibt unverändert
• Das Werbemittel wird nur ersetzt, sofern ein Werbeblocker aktiviert ist
• Eine alternative Botschaft kann mittels HTML-Code definiert werden.

—In letzter Zeit dringt Ajax immer weiter vor und die Fragen häufen sich im Forum nach ala "wie mach ich das". Deshalb möchte ich euch den Grundlegenden Ablauf einer Ajax-Anwendung hier verdeutlichen.

Dazu benutze ich Client seitig HTML5 und jQuery.
Server seitig setze ich auf PHP, hier ist es aber eigentlich egal was ihr nehmt. Ich habe schon ganze Systeme von PHP auf Python umgeschrieben und die Templates nur minimal verändert.
Grund dafür war unter anderem der Einsatz von Json zur Übertragung. Json ist ein kompaktes Dateiformat das zur Übertragung von Daten genutzt wird und in so gut wie jeder Programmier- oder Scriptsprache eingesetzt werden kann.


Graue Theorie

Die Frage die sich als erstes stellt: "Was ist Ajax, brauch ich das überhaupt?". Zum Verwendungszweck kann man sagen, dass es nicht unbedingt nötig ist. Allerdings sind Webseiten die Ajax benutzen in der Regel Benutzerfreundlicher und vor allem schneller.

Wenn man bei einer Webanwendung im klassischen Sinne, also ohne Ajax, eine Unterseite öffnet, wird ein Request an den Webserver gesendet. Dieser lieft einem dann die gesamte Website zurück, wobei jede Datei, z.B. ein Bild, extra angefordert wird. Jeder Content wird extra verarbeitet. Das öffnen eine Seite bedeutet also jede Menge Arbeit und Kommunikation für den Browser. Moderne Browser setzten auf aufwendige Caching Algorithmen um bereits bekannten Inhalt nicht noch einmal zu laden oder zu verwerten. Wenn eine Seite also einmal geladen wurde, dauert es in der Regel nicht mehr ganz so lange um weitere Unterseiten auf zu rufen, dennoch wird bei jedem Aufruf die gesamte Seite beim Server abgefragt.

An dieser Stelle setzt Ajax an.

Ich habe bis jetzt nur aus den Tutorials profitiert und möchte nun auch mal etwas dazu beitragen: Es geht um eine "Social Bookmark Bar" und so solls am ende aussehen: Demo

Zunächst brauchen wir natürlich die Icons bzw. Grafiken. Die habe ich hier her. (Downloadlink)

Dann benötigt man noch jQuery.

Bei den Icons habe ich die 48px auf 48px großen genommen. Die eigene Auswahl wird dann in einem Ordner namens Dateien gespeichert, genau so wie die jQuery.js Datei.

Nun noch eine ganz normale *.html-Datei.

Hallo,
angeregt durch einen Beitrag im (X)HTML-Forum möchte ich zeigen, dass man eigentlich nur noch für den Internet-Explorer Javascript/jQuery braucht, um ein "Accordion" auf einer Web-Seite zu realisieren.

In meinem Funktionsbeispiel habe ich einen HTML-Seitenaufbau gewählt, der aus einer H1-Überschrift und mehreren folgenden DIV-Blöcken ("sections") besteht. Jeder "section"-Block ist mit einem Klassenattribut "section" markiert und enthält als erstes Kindelement wiederum eine Überschrift (hier: H2) mit einem eingeschlossenem Hyperlink (A-Element). Danach folgt beliebiger Blockinhalt.

Beschreibung:
Dieser Code ist eine vollständige Website (HTML 4.1 Transitional und CSS level 2.1 valide) und dient dazu aus der Höhe und Breite eines rechtwinkligen Vierecks die Diagonale zu berechnen.

Ich werde nur die Codes posten und anhand der Kommentaren sollte dann klar sein was damit gemacht wird. Viel Spass.