Wie versprochen, hier sind einige konkretes Beispiel für unaufdringliche Javascript, vielseitiges und leistungsstarkes Werkzeug, wenn sie ordnungsgemäß verwendet. On Site / Blog Ryan Johnson können Sie zwei sehr gutes Beispiel dafür, unaufdringliche Javascript:
Ryan Johnson, in seinem Skript verwendet die Bibliothek Prototype , wie viele von den übrigen. Er hat auch einige Erweiterungen des relativ geschrieben Prototype , dann eingeführt - in einer anderen Form - in der neuesten Version der Bibliothek.
Verwenden Prototype zu veranschaulichen, der Betrieb von dezent JavaScript-Code ist in der Regel bequemer - wie wir später sehen werden, aber hier ist ein erstes Beispiel Rohöl, die keine externen Bibliotheken benötigt. Wir beginnen mit dem Hinweis, dass das Konzept hinter dem unaufdringlichen JavaScript, um von einem beliebigen HTML-Seite (Standard und nicht notwendigerweise von uns geschrieben - noch wichtiger Pluspunkt) beginnen soll, und verwenden JavaScript, um einige Änderungen vornehmen.
Schematimamente das Konzept ist es, eine Funktion, die die HTML-, durchquert dann analysiert der DOM und insbesondere die Punkte hinzufügen oder ändern Funktionalität durchzuführen. Normalerweise verwenden zwei Methoden, um Javascript-Code ausführen, um eine Seite zu laden: der erste ist, was du nicht umschließen Sie den Code in irgendeiner Funktion, und dann lassen Sie das Ausführen von Code-Browser sofort zu dem Punkt, wo der Anruf erscheint hochgeladen:
Das gleiche Ergebnis wird durch die Einbeziehung der Code erhalten:
1
| "http://miosito.com/miocodice.js" >< / script > < script src = "http://miosito.com/miocodice.js"> </ script > |
Allerdings, wenn es muss auf dem DOM einer Seite zu betreiben, dass sie eine voll beladen, dass alle Tag der Seite vorhanden und verfügbar zu verfolgen ist, übernimmt. So ist die beste Lösung wird derjenige sicher sein, dass die Seite vollständig ist. Dies ist durch die Gewinnung der onload-Ereignis des body-Tag, zum Beispiel, die freigegeben, wenn der Ladevorgang vollständig abgeschlossen ist wird möglich.
1
2
3
| miafunzione ; Fenster onload = myfunction.;
/ / Oder, was dasselbe
function ( ) { alert ( "Hello" ) ; } . Fenster onload = function () {alert ("Hallo");} |
Vermieden, natürlich, die kanonische Lösung, die eine Untertreibung zu nennen es aufdringlich wäre:
1
| "miafunzione()" > < Körper onload = "myfunction ()"> |
Eine andere Technik, gröber und ebenso aufdringlich (wie es erzwingen, dass der Endanwender, um den Code an einer bestimmten Stelle zu platzieren), ist es, unser Skript am Ende des Dokuments einzufügen vor dem schließenden Body-Tag, mittlerweile veraltet Technik und verwendet in seltenen Fällen (siehe Google Analytics!).
Noch besser ist es, die Methode zu verwenden:
1
2
3
4
5
6
7
| window. addEventListener ) { if (window. addEventListener) {
"load" , miafunzione , false ) ; Fenster. addEventListener ("Last", myfunction, false) ¾ i
( window. attachEvent ) { } Else if (window. attachEvent) {
"onload" , miafunzione ) ; Fenster. attachEvent ("onload", myfunction) ¾ i
{ Else {}
createSubMenus; Fenster. onload = createSubMenusÍ ¾
} |
Auch dieses Stück Code wird in einer Funktion eingeschlossen. Es wird ein Ereignis-Listener für das Load-Ereignis des Fensters hinzuzufügen, ruft unsere Funktion miafunzione() . . Moderne Browser wie Firefox zum Beispiel, wird die Funktion addEventListener() in DOM Level 2 definiert, während Internet Explorer seine proprietäre Funktion nutzen wird attachEvent() . Allerdings sind wir nicht auf Perfektion in dieser Weise in der Tat, so ersetzt sie alle - wenn überhaupt - onload Ereignisse durch andere Skripte, die nicht wirklich geschaffen "non-intrusive".
Um dieses Problem schnell zu lösen, dass wegen der unterschiedlichen Verhalten der Browser würde zumindest kompliziert sein, hier zu erklären, sollten Sie als libreirie verwenden Prototype bietet un'elengantissimo Methode, um das Problem zu überwinden:
1
| window , 'load' , function ( ) { alert ( "Hello" ) ; } ) ; . Ereignis beobachten (Fenster, 'load', function () {alert ("Hallo");}); |
Die Syntax ist sehr auffällig und spektakulär! Der Vorteil für diejenigen, die nicht verstanden hatte, ist, dass Sie schreiben:
1
2
| window , 'load' , function ( ) { alert ( "Hello 1" ) ; } ) ; . Ereignis beobachten (Fenster, 'load', function () {alert ("Hallo 1");});
window , 'load' , function ( ) { alert ( "Hello 2" ) ; } ) ; . Ereignis beobachten (Fenster, 'load', function () {alert ("Hallo 2");}); |
Beim Laden der Seite wird vor dem Alarm "Hallo 2" und dann die Warnung "Hallo 1" gezeigt werden. Grundsätzlich können in einem FILO (Vorname Nachname Input Output) einem Stapel laden, während gleichzeitig die Ausführung aller Ereignisse angespannt, um das Dokument genau das, was gewünscht wurde zu laden. Auf diese Weise kann eine Seite zu laden - praktisch - endlos unaufdringliche Javascript, um das Dokument, dass Lasthaken.
Aber was kann man mit dieser Technik zu tun? Viele interessante Sachen. Ein Beispiel, dass wir kommentieren (siehe auch Vorbild: die Verwendung der doppelten Dollarzeichen ($ $) ) kommt von Tobie Langel . Mit wenigen Zeilen Code und Download-Bibliotheken Prototype und Scriptaculous kann man einen schönen Effekt auf die klassische Anker unserer Seiten geben. Erstellen Sie zunächst eine HTML-Seite mit dem folgenden Code:
1
2
3
4
5
6
7
8
| = "#capitolo1" > Vai al capitolo 1 < / a >< / p > < p > < ein href = "# Kapitel 1"> Vai in Kapitel 1 </ ein > </ p > < / p > < p > </ p > < / p > < p > </ p > .... < / p > .... eine Menge 'von < p > </ p > .... Nur als Beispiel "capitolo1" > Capitolo 1 < / h1 > < h1 id = "Kapitel 1"> Kapitel 1 </ h1 > |
Fügen Sie die Seite:
1
2
3
4
5
6
7
8
9
10
11
12
| "prototype.js" type = "text/javascript" charset = "utf-8" >< / script > < script src = "prototype.js" type = "text / javascript" charset = "UTF-8"> </ script > "scriptaculous-js-1.7.0/src/effects.js" type = "text/javascript" charset = "utf-8" >< / script > < script src = "scriptaculous-js-1.7.0/src/effects.js" type = "text / javascript" charset = "UTF-8"> </ script > "text/javascript" language = "javascript1.2" > < script type = "text / javascript" language = "JavaScript1.2"> Event.observe (Fenster, 'load', function () { $ $ ('A [href ^ = #]: nicht ([href = #])') each (function (element) {. element.observe ('click', function (event) {neue Effect.ScrollTo (this.hash.substr (1)); Event.stop (event); bindAsEventListener (Element)) }) }) </ script > |
Dank "verwenden Event.observe() -Funktion und Zwei-Dollar ($ $) Sie leicht ändern, können das Verhalten des klassischen Anker. In diesem Fall ist eine neue Funktion wird auf die HTML-Seite geladen wird süchtig. Bei der Aufnahme das load-Ereignis wird alle Links im DOM (Tag <A>) mit href, die mit einer Raute (#, mit Ausnahme der einen Hash nur mit!) Beginnt zurückzuführen. Um dieser Elemente ist eine Funktion, die an das Click-Ereignis, ähnlich dem, was war mit der Last des Dokuments getan. An diesem Punkt ins Spiel kommt Scriptaculous , die einen Einfluss der Spirale in Richtung des Elements punatato aus unserer Verbindung produziert - modifiziert!
Mehr ...
JavaScript-Code kann in Echtzeit reagieren und zu manipulieren eine Vielzahl von Informationen: Zulassen, dass Benutzer mit einem Web-Seite in den letzten Jahren zu interagieren hat einen signifikanten Anstieg in der Verwendung von Client-seitiges Scripting produziert. Das Web2.0 ist der ultimative Ausdruck dieser Fähigkeit zur Interaktion, in dem der Endbenutzer - die benutzerfreundliche, sich aktiv an den Bau und die "Evolution der Website, mit dieser zu interagieren und sich selbst helfen. , Die der "Navigator" wird definitiv nicht passiv sieht - ist als User-Generated Content (User Generated Content oder UGC) bezeichnet!
Um diese Interaktion zu erreichen, so dass der Endverbraucher seinen Beitrag hinzuzufügen, entwickelten wir eine Reihe von Techniken, die das Aussehen und das Verhalten von Webseiten (statisch, bis jetzt, aber jetzt ähnlich wie bei den traditionellen Anwendungen verändert haben Desktop) in den letzten Jahren. Ändern Sie den Inhalt einer Seite, Dateien versenden, geben ihre Stimme zu einem Video oder einem Dokument, registrieren oder ihre persönlichen Daten ändern, sind nur einige der Anpassungen Operationen in vielen Dienstleistungen (2.0 beta) im Web
Mehr ...
Wählen Sie die Technologie, um bei der Entwicklung einer Web-Anwendung zu verwenden ist von entscheidender Bedeutung, sich nicht selbst in Schwierigkeiten zu finden bald nach. Die Art der Web-Anwendung, den funktionsspezifischen Besonderheiten sind der erste Punkt zu berücksichtigen, die Rahmenbedingungen und damit verbundenen Technologien zu wählen.
Ich habe oft die Wirksamkeit von JavaScript-Skript gegen verschiedene Technologien wie Adobe Flash oder Java diskutiert. Allerdings ist es wichtig, einen wichtigen Aspekt oft übersehen betonen: Zugriff auf das DOM Javascript, in diesem Fall, der Kandidat (wenn nicht die einzige) ein Favorit für diese Art von Operation..
Werkzeuge mit SNAP , zum Beispiel auf einem einfachen Mechanismus funktionieren: wenn der HTML-Seite geladen wird (und nach der Einführung der Beladung von JavaScript-Skripte) ist es, die Seite zu scannen und fügte einen neuen HTML-Code an besonderen Stellen. Im Falle von SNAP identifiziert alle Links zu externen Seiten (oder in der internen Konfiguration der letzten Ausgabe), der TAG <A> für indenderci. Diese sind so, dass der Maus, um einen Dialog anterpima von Links (siehe diese sehr Blog für ein Beispiel) zu öffnen modifiziert.
Nicht nur Snap sondern auch viele andere JavaScript-Skripten im Grunde das gleiche tun. In letzter Zeit ist diese Technik weit von der Bibliothek verwendete Prototyp , der eine Vielzahl von Methoden (wie die berühmte Doppel-Dollar oder $ $ $ - siehe liefert Vorbild: die Verwendung der doppelten Dollarzeichen ($ $) ) ist auf die Spur dass der Wandel - die Fliege - die Elemente einer HTML-Seite.
Navigation durch das HTML-DOM ist daher spezifische Aufgabe von Javascript. Historisch wurde unter anderem JavaScript eingeführt, um lesen und schreiben den Inhalt einer HTML-Seite.
Zum Beispiel, wenn wir einige Änderungen an einer HTML-Seite mit Adobe Flash machen wollte, aggorgeremmo wir - früher oder später - zu gezwungen, eine JavaScript-Funktion aufgerufen werden. Der neue ActionScript 3.0, bietet beispielsweise eine Klasse ( ExternalInterface ) für diesen Zweck geeignet. – o fscommad() per chiamare una funzione Javascript: Einmal (in früheren Versionen von ActionScript) verwendeten wir den Befehl getURL() - jetzt durch eine bessere ersetzt flash.net.navigateToURL() - oder fscommad() , um eine JavaScript-Funktion aufrufen:
1
| ) ; getURL ("javascript: myFunction ()"); |
Darüber hinaus:
Die ExternalInterface-Klasse ist die External-API eine Programmierschnittstelle die eine unmittelbare Kommunikation zwischen ActionScript und dem Flash Player-Container, zum Beispiel eine HTML-Seite mit JavaScript, oder eine Desktop-Anwendung mit dem Flash Player eingebettet.
Beachten Sie, dass "Desktop-Anwendung", dass so viel erinnert Apollo!
Heute, dank ExternalInterface , können Sie eine JavaScript-Funktion auf mindestens Reiniger (Diese Klasse ermöglicht die Verwaltung viel effektiver als aufrufen getURL() , wie zum Beispiel die Übergabe von Parametern):
1
2
3
4
5
6
| / * Ruft die externe Funktion "addNumbers"
zwei Parameter übergeben, und Zuweisen von dieser Funktion das Ergebnis
auf die Variable "Ergebnis" * / uint = 3 ; var param1: uint = 3; uint = 7 ; var param2: uint = 7; uint = ExternalInterface . call ( "addNumbers" , param1 , param2 ) ; var result: uint = ExternalInterface -Aufruf ("addNumbers", param1, param2);. |
1
2
3
4
5
6
| <script> <! -
/ / Addiert zwei Zahlen, und sendet das Ergebnis zurück in ActionScript
num1 , num2 ) { addNumbers Funktion (num1, num2) {
num1 + num2 ) ; return (num1 + num2);
}
/ / -> </ Script> |
Was können wir daraus schließen? Unter den verschiedenen Frameworks und Bibliotheken zur Verfügung der ersten Analyse des Projekts Sie erreichen wollen ist von größter Bedeutung. Fehler in dieser Phase können gravierende Auswirkungen auf die nachfolgenden Phasen eines Projekts Web2.0. JavaScript, dann, dass alle Trümpfe, wenn es braucht, um mit dem DOM zu interagieren.
Mehr ...
Mit der neuesten Version von Prototype, Andrew , und Christophe wurden beschleunigt und verbessert die "Doppel-Dollars ( $ $ Dienstprogramme ), mit dem Sie einen Eintrag, indem Sie den Drehknopf (fast alle CSS3-Selektoren von den Spezifikationen unterstützt) auswählen können.
Der Nutzen dieser Funktion geht über das beliebte $, was hilfreich sein kann, aber letztlich führt keine Operation bemerkenswert. Der Versorgungswirtschaft 'zwei Dollars ($ $), aber tatsächlich können Sie jede Art von Element auszuwählen, wenn Sie das große Werkzeuge, um Elemente im DOM zu filtern.
Hier sind einige Beispiele von der offiziellen Website entnommen:
1
2
3
4
5
| ) ; // -> Tutti i DIV del documento. $ $ ('Div') / / -> Alle des DIV-Dokument. Gleich wie document.getElementsByTagName ('div')!
) ; // -> Uguale a $('contents'), ma ritorna sempre un array. $ $ ('# Inhalt') / / -> Das gleiche wie $ ('Inhalt'), aber es gibt immer ein Array.
) ; // -> Tutti fli elementi LI con class 'faux' $ $ ('Li.faux') / / -> Alle FLI LI-Elemente mit der Klasse "faux"
) ; // -> Tutti i TAG A (links) al di sotto di un elemento con ID "contents" e con un attributo rel $ $ ('# Inhalt ein [REL]') / / -> Alle TAG A (Links), unten für ein Element mit der ID "Inhalt" und mit einer rel-Attribut
) ; // -> Tutti i TAG A (links) con un'attributo href con valore "#" (eyeew!) $ $ ('A [href = "#"]') / / -> Alle TAG A (Links) mit einem Attribut href-Wert mit "#" (eyeew!) |
Die Stärke liegt jedoch in der Möglichkeit des Ausschlusses einige Elemente zugunsten von anderen, zum Beispiel:
1
| ) ; // -> Tutti i TAG A (links), esclusi quelli che contengono un attributo rel impostato a "nofollow" $ $ ('A: nicht ([~ rel = nofollow])') / / -> Alle TAG A (Links), mit Ausnahme derjenigen, die ein rel-Attribut auf "nofollow" gesetzt enthalten |
Noch interessanter ist:
1
| ) $ $ ('A [href ^ = #]: nicht ([href = #])') |
Diese in der Praxis alle in TAG mit dem href-Attribut, das mit '#' beginnt jedoch nicht berücksichtigt werden diejenigen, die gleich '#' nur befinden. Mit anderen Worten ignoriert die Links, die auf eine gültige Nummer hingewiesen!
Diese einzigartige Funktion von ($ $) inspiriert hat Tobie Langel schaffen, um eine einfache Skript (Entwaffnung) können einen schönen Effekt, wenn Sie innerhalb einer einzigen HTML-Seite, die Sie bewegen, um Anker zu scrollen, mit der Technik - nur - href = "#".
Für eine Demo klicken Sie hier .
Mehr ...
Neueste Kommentare
kOoLiNuS : @ Giovambattista Fazioli: danke! mehr als bereit!
Giovambattista Fazioli : @ kOoLiNuS: Ruhig, können Sie wahrscheinlich davon aus, dass WPX Cleanfix wird frei sein, und ...
kOoLiNuS : @ kOoLiNuS: eine fehlende
und 
kOoLiNuS : @ Giovambattista Fazioli: ich abonniert, aber wenn ich mein Hobby war die Nutzung der Plattform ...
Giovambattista Fazioli : @ kOoLiNuS: Ja, das ist ein bekanntes Problem. Tritt auf, wenn die Tabellen in Frage stehen ...