Speisekarte
heimAndere

Was kann man mit Skripten machen? Was ist JavaScript? JavaScript-Beispiele

TL;DR Dieser Rezensionsartikel. Es ist wie eine „Zusammenfassung früherer Episoden“. Es wird für Anfänger oder diejenigen nützlich sein, die die Branche in letzter Zeit noch nicht kennengelernt haben. Für Einsteiger ist dies der erste Schritt in das „JavaScript-Universum“, für Fortgeschrittene können sie ihr Wissen auffrischen.
JavaScript hat ein sehr überraschendes Schicksal. Er hat den Weg von der am meisten missverstandenen zur erstaunlichsten Sprache bewältigt. Er hatte eine schwierige Kindheit:
Ursprünglich wollte der Autor eine funktionale Sprache schreiben. Aber Manager wollten ein „normales“ objektorientiertes System. Und um es einfacher zu machen, Entwickler für die neu erstellte Sprache zu finden, haben sie beschlossen, die Syntax an Java anzugleichen und sogar den Namen ähnlich zu gestalten.
Aber die Geschichte ist damit noch nicht zu Ende. Java, JavaScript ist Warenzeichen Sun (und jetzt Oracle). Microsoft konnte den JavaScript-Namen nicht verwenden (Netcape und Sun waren Freunde gegen Microsoft). Aus diesem Grund beschloss Microsoft, JavaScript zurückzuentwickeln und nannte es JScript. Wir haben Reverse Engineering durchgeführt und es so gut gemacht, dass wir sogar alle Fehler in der Implementierung beseitigt haben. Später beschlossen sie, einen Standard zu erstellen und nannten ihn ECMAScript.

Schlechte Teile

Aufgrund der Tatsache, dass die Sprache in fast zwei Wochen geschrieben wurde (das ist sehr wenig), wurden eine Reihe von Fehlern in sie eingeführt. Und später, als die Sprache herauskam und von Microsoft abgeschafft wurde, war es bereits zu spät, etwas zu ändern. Einige Ideen sind ein starkes Erbe von Java, von dem die Sprachsyntax übernommen wurde.

Eine Programmiersprache mit schwacher Typisierung, mit Implementierungsfehlern, mit einem starken Erbe, mit den Merkmalen einer funktionalen Sprache ruft nur ein Gefühl hervor – . Ständig aktualisierte Liste der „Perlen“.

Um bei der Arbeit mit JavaScript nicht verrückt zu werden, müssen Sie verstehen, wie schwaches Typing funktioniert, wie der Variablenbereich funktioniert (globale Variablen sind böse), wie dies, der Prototyp und die Konstruktoren funktionieren. jshint hilft auch dabei, die „schlechten Teile“ der Sprache zu vermeiden.

Diese ganze Geschichte wird ausführlicher erzählt in zweiter Vortrag Douglas Crockford. Es ist besser, hinzusehen alle 8 Folgen. Da gibt es Untertitel ;).

Die grundlegenden Dinge, die es zu verstehen gilt (aufgrund der funktionalen/asynchronen Natur der Sprache), sind: Was ist Kontrollfluss und wie hilft er bei der Arbeit mit einer asynchronen Sprache und wie funktioniert die Fehlerbehandlung (try/catch hilft nicht immer).

Diese Schlussfolgerung kann jeder schon selbst ziehen, aber ich sage es laut und schreibe es laut auf: Jetzt kann man eine Webanwendung von Anfang bis Ende wissend entwickeln nur JavaScript (HTML und CSS zählen nicht).

Ein Löffel Teer

  • NodeJS hat die Version 1 noch nicht erreicht, es gibt noch eine Reihe unbeantworteter Fragen. Das heißt, es ist klar, wie man einen Chat in NodeJS schreibt, aber was ist mit großen und komplexen Projekten?
  • Es gibt keine normalen Tutorials, da sich die Technologie aktiv weiterentwickelt und sie schnell veraltet sind.
  • Die Entwicklung von Modulen erfolgt spontan. Viele Module werden aufgegeben. Sie gehen zu Github und sehen, dass der letzte Commit vor etwa einem Jahr erfolgte.
  • Es gibt keine „erwachsenen“ Frameworks. Es gibt „junge“ vielversprechende Projekte. Es gibt jedoch keine Frameworks auf Rails-Ebene.

    Lyrischer Exkurs

Höchstwahrscheinlich handelt es sich dabei um „Teenagerakne“, die mit der Zeit verschwindet. Aber im Moment ist das immer noch relevant.

Außerdem

Frontend-Entwicklung

Schließlich ist die Frontend-Entwicklung aus der Steinzeit hervorgegangen, als alles von Hand gemacht wurde. Es gibt Tools dafür (ein Tool, das speziell für diese Zwecke in js geschrieben wurde) und einen Paketmanager (ich weiß, dass dies nicht der erste Manager ist, aber hoffen wir, dass jeder ihn verwenden wird). All dies wird im Projekt gebündelt. Wenn wir über Yeoman sprechen, müssen wir unbedingt Folgendes erwähnen: html5-boilerplate und

Aber was Meteor bieten kann, kann keine andere Technologie bieten: vollständige Wiederverwendung des Codes vom Server zum Client (oder umgekehrt) und außerdem ein kleines Wundermittel (Datenbindung, Client-Hot-Reload ...).
Sein einziger Vorteil ist auch sein Nachteil. Client- und Servercode sind nicht getrennt. Meteor eignet sich nicht sehr gut für Fälle, in denen der Client mit einer anderen Technologie erstellt wird. Zum Beispiel ein nativer Mobil- oder Desktop-Client.
Übrigens löst unser engster Konkurrent Meteor Derby dieses Problem. Da sie Express und viel weniger Magie verwenden, können sie eine REST-API daran anhängen.
Wenn ich darüber nachdenke, ist dies nicht der erste Versuch, vom klassischen Kunden-Nord-Ansatz abzuweichen. Davor gab es zum Beispiel GWT. Aber alle vorherigen Versuche waren weniger effektiv und es war kein JavaScript.

Handy, Mobiltelefon

JS hat nicht nur mobile Browser erreicht und Flash überlebt, es konkurriert auch um den Platz nativer Anwendungen. Möglich wurde dies dank

Die Ressource Creative Bloq veröffentlichte Material, in dem ihre Autoren die ihrer Meinung nach besten Beispiele mit den Lesern teilten mit JavaScript Webseiten zu erstellen. Die CPU hat die 30 interessantesten Ressourcen ausgewählt.

1. Mike Kus Portfolio

Das Portfolio des Webdesigners Mike Kus sei in einem „sauberen und zurückhaltenden Stil“ gestaltet, schreiben die Redakteure von Creative Bloq. Es kombiniert große Bilder mit einfachen Elementen der Benutzeroberfläche.

„Ich betrachte meine Arbeit als Marke. Es besteht keine Notwendigkeit, meiner Website unnötige Designelemente hinzuzufügen“, sagt Kus.

Das Portfolio von Kus ist auf allen Arten von Bildschirmen gleichermaßen einfach zu navigieren – er weist darauf hin, dass dieser Effekt am schwierigsten zu erreichen war. Jedes Projekt des Designers wird durch ein Bild oder Foto repräsentiert – so dass der Benutzer mehr über das Werk erfahren möchte.

2. Hallo Montag

Die Website der Kreativagentur Hello Monday habe erhebliche Änderungen erfahren, stellen die Autoren des Artikels fest. Die Entwickler des Unternehmens haben großartige Arbeit geleistet. Es ist ihnen gelungen, die Benutzeroberfläche benutzerfreundlich zu gestalten.

Alte Website der Hello Monday-Agentur

Jetzt präsentiert die Website Beispiele für bereits von der Agentur abgeschlossene Aufträge – jedes Projekt verfügt über eine eigene Seite, auf der seine Geschichte beschrieben wird, was dem Benutzer ein tieferes Verständnis dafür vermittelt, was Hello Monday tut.

Aktualisierte Hello Monday-Website

„Wir haben versucht, uns von der Standardvorstellung zu lösen, wie eine Website einer Kreativagentur aussehen sollte“, sagt Katie Hertel, Projektmanagerin für die Neugestaltung der Hello Monday-Webseite. Mitwirkende finden die Website sehr attraktiv und reaktionsschnell, unterstützt durch die Organisation der Projekte auf der Startseite, die automatisch mit neuen Agenturarbeiten aktualisiert wird, wenn Sie nach unten scrollen.

3.Multeor

Multeor ist ein Massively Multiplayer Online-Spiel, das in JavaScript geschrieben wurde und das HTML5-Canvas-Element verwendet. Es wurde von Arjen de Vries und Philidor Weise entworfen und von Arthur van Hoog entworfen. Die Hauptaufgabe des Benutzers im Spiel besteht darin, den Fall von Meteoriten zu kontrollieren und Punkte für die Zerstörung zu erhalten, die sie hinterlassen.

Das Spiel verwendet einen Node.js-Server, um die Kommunikation zwischen Desktop und zu verwalten mobile Geräte Mit Nutzung des Webs Steckdosen.

Weise betont, dass bei der Entwicklung von Multeor nicht auf bestehende Spielbibliotheken zurückgegriffen wurde:

Wir haben alles selbst geschrieben – es war sehr spannend und wir haben viel Neues gelernt. Die Tatsache, dass wir nicht auf bestimmte Baugruppen und Fertigteile angewiesen waren, verschaffte uns eine gewisse Handlungsfreiheit: Wir mussten uns nicht mit der Darstellung bestehender Grafiken, dem Umgang mit Kollisionen und der separaten Beschreibung des für Explosionen verantwortlichen Systems befassen.

4. Zeitleiste der Kriminalität

Crime Timelime ist ein Aggregator, der mithilfe öffentlicher APIs Kriminalitätsdaten aus dem Vereinigten Königreich sammelt. Nutzer können so erfahren, wie es in ihrer Region läuft.

„Wir haben die Seite so organisiert, dass sie eine Karte der Region und den Ort der Verbrechen zeigte – für den Monat, den der Benutzer im Panel unten ausgewählt hat“, sagt Projektentwickler Alex Miller.

Die Ressource verwendet die API Google Maps, jQuery und jQRangeSlider wurden verwendet, um ein Monatspanel zu erstellen. Wenn ein Benutzer mit der Karte interagiert, beispielsweise auf einen bestimmten Ort auf der Karte klickt, aktualisiert die Site das Bild mithilfe von JavaScript. Es wurden „Blasen“ erstellt, die die Anzahl der Straftaten anzeigen mit CSS und animiert mit jQuery.

Hier wird heute JavaScript zum Erstellen von Animationen verwendet. Der Schöpfer der Ressource, Designer Luke Twyman, erklärt seine Idee so: „Ich wollte etwas schaffen, das jedem ein Gefühl für die Zeitskala vermittelt. „Here is Today“ hilft uns zu verstehen, wie umfangreich die Geschichte des Universums ist.“

Twyman merkt an, dass er sich von Anfang an entschieden hat, die Standardmaßeinheiten – Pixel – aufzugeben und seine eigenen anhand der Bildschirmgrößen zu beschreiben. Dies wurde durchgeführt, um sicherzustellen, dass die Website auf allen Geräten gleich aussieht.

Dies ist das zweite vom Designer erstellte JavaScript-Projekt, in dem er Elemente verwendete, die er im vorherigen nicht verwendet hatte. Twyman stellt jedoch viele Ähnlichkeiten der Sprache mit anderen höheren Programmiersprachen fest; außerdem verfügt JavaScript seiner Meinung nach über eine recht detaillierte Dokumentation und es gibt eine große Anzahl von Beispielen im Internet (auch zu thematischen Formen).

6. Tweetmap

Tweetmap stellt Länder auf einer Karte im Verhältnis zur Anzahl der von ihnen gesendeten Tweets dar. Der Serviceentwickler Rob Hawkes listet mehrere bei seiner Erstellung verwendete Technologien auf: TopoJSON, D3.js, Node.js, PhantomJS und spezielle Algorithmen zum Erstellen benachbarter Kartogramme in Echtzeit.

Wir haben uns für Node.js entschieden, weil wir bereits Erfahrung damit hatten und weil es eine einfache, schnelle und flexible Plattform ist. Um die Karte (im TopoJSON-Format) zu animieren, verwenden wir D3, eine fantastische Datenvisualisierungsbibliothek. Insbesondere nutzen wir umfassend das Geomodul, das komplexe geografische Berechnungen und Transformationen ermöglicht.

Um Probleme bei der Darstellung von Karten im Browser des Clients zu vermeiden, generiert das System Karten auf dem Server mit D3, startet und rendert sie mit der PhantomJS-Engine und überträgt sie erst dann an den Benutzer – so werden „Lücken“ bei der Kartenanzeige vermieden.

7. Die Reise

„The Trip“ ist ein interaktiver Film, der mit JavaScript und HTML5 (kein Flash) erstellt wurde. Otto Nascarella, der Schöpfer des Projekts, glaubt, dass sich die Aufgabe, einen solchen Dienst zu entwickeln, als sehr schwierig erwies:

Die meisten Schwierigkeiten, auf die wir gestoßen sind, waren darauf zurückzuführen, dass HTML5 zum Zeitpunkt der Erstellung der Website nicht über die Möglichkeit einer browserübergreifenden Entwicklung verfügte. Wir haben dann beschlossen, dass wir unseren Kunden die Verwendung von Chrome empfehlen würden.

Der JavaScript-Code der Site verwendet jQuery für fast alle Aufgaben. Die Entwickler verwendeten außerdem TextBlur und TextDrop, um Text zu verwischen und zu animieren.

8. Si Digital

Diese in JavaScript geschriebene Seite ist das neue Portfolio und Blog der Design- und Marketingagentur Si Digital. Der Hauptentwickler des Projekts, Alex Kruk, erklärt die Animation auf der Hauptseite: „Die Flüssigkeit, die sich durch die Rohre bewegt, führt Benutzer durch unser Portfolio – sie aktiviert die Animation von Bildern in jeder Phase der Standorterkundung des Kunden.“

Für Leistung ähnlicher Effekt Crook verwendete die Methode jQuery.animate(). Zudem sei es notwendig gewesen, die richtige Geschwindigkeit für das Befüllen der Rohre mit Flüssigkeit zu wählen – schließlich liest jeder unterschiedlich schnell.

Ein interaktives Diagramm auf der Seite, das abgeschlossene Projekte und das Agenturteam beschreibt, implementiert mit jQuery. Die Zeitleiste wird laut Crook dynamisch generiert – basierend auf Informationen aus der Datenbank, mithilfe der Ajax-Technologie.

9. Jean Halfsteins Website

Jean Halfstein ist Webdesigner. In seinem Portfolio wurden die Autoren des Artikels am meisten angezogen Hauptseite- und Animation darauf. „Es hat mir wirklich viel Spaß gemacht, mit den verschiedenen Effekten herumzuexperimentieren. Ich liebe es wirklich, neue Technologien zu verwenden, deshalb habe ich beschlossen, die Hauptseite meiner Website zu einer Art Sandbox zu machen, in der ich Spaß mit Three.js und dem HTML5-Canvas-Element habe“, sagt Halfstein.

Die Idee des Designers bestand darin, ein Portfolio zu erstellen, das modernen Trends folgt – es sollte minimalistisch sein, aber gleichzeitig etwas Frisches in das Website-Design bringen. Deshalb entschied er sich, Animationssteuerungen mithilfe von Mausbewegungen und Ziehen anstelle von Navigationstastenanschlägen zu verwenden.

10. Nick Jones-Portfolio

Jones sagt, als er die Website entwickelte, hatte er mehr Erfahrung mit Flash als mit JavaScript, aber er wollte etwas Neues ausprobieren, um herauszufinden, was er tun konnte. „Mir wurde sofort klar, dass die JavaScript-Syntax fast mit der ActionScript-Syntax übereinstimmt, sodass ich schnell den Dreh raus hatte“, beschreibt Jones den Codierungsprozess.

Jones erinnert sich, dass Flash ihm keinen Zugang zum Arbeiten mit Mausbewegungen verschaffte – es war eine neue Erfahrung, die ihm wirklich Spaß machte. Der Entwickler wollte eine Reaktionsfähigkeit der Website erreichen, die er mit Klassenübergängen in CSS nicht erreichen konnte. Jones ist mit dem erzielten Ergebnis zufrieden:

Wenn Sie darüber nachdenken, von ActionScript auf JavaScript umzusteigen, zögern Sie nicht. Als ich meine Website erstellte, wollte ich sehen, ob JavaScript das leisten kann, was Flash kann. Und ich bin sehr beeindruckt.

11. KartenTD

MapsTD ist ein Online-Spiel, dessen Kern darin besteht, eine Festung zu verteidigen. Die Festung ist das eigene Zuhause des Benutzers, das er vor den Schurken verteidigen muss, die unermüdlich durch die Straßen der Gegend streifen.

Projektentwickler Duncan Barclay erklärt, wie es funktioniert: „Wir haben die Google Maps API, MooTools und JavaScript verwendet. Der schwierigste Teil besteht darin, die Route zu finden, der die Feinde des Benutzers folgen. Sobald der Spieler einen Startpunkt ausgewählt hat, sucht der Dienst nach Längen- und Breitengraden und berechnet diese mögliche Wege mit Google.“

Im Verlauf des Spiels erscheinen immer mehr Gegner auf dem Bildschirm. Barclay sagt, dass Entwickler mit dem Browser-Timing „kämpfen“ mussten – Tatsache ist, dass die meisten von ihnen im Laufe der Zeit die Häufigkeit der Suche nach Aktualisierungen auf der Seite reduzieren, und es musste sichergestellt werden, dass dies nicht passiert.

Ein weiteres Problem bestand darin, dass im Laufe des Spiels die Anzahl der Feinde zunahm und die Leistung abnahm. Aus diesem Grund beschlossen die Entwickler, die Fähigkeiten der Schurken zu erhöhen und nicht deren Anzahl.

12. Einblick in Kataloge

Die Glimpse-Ressource wurde gemeinsam entwickelt Windows-Befehl IE und das TheFind-Projekt und kombiniert das TheFind-Suchsystem und die Anwendung derselben Entwickler für Online-Shopping auf Facebook. Im Rahmen von Glimpse veröffentlichten Programmierer ihr eigenes Framework auf Basis von Turn.js.

Das Ziel des Teams bestand von Anfang an darin, Glimpse zu einer Webanwendung und nicht zu einer regulären Website zu machen. Die Entwickler nutzten das Model-View-Behavior-Paradigma, das das Datenmodell in drei separate Komponenten aufteilt: Benutzeroberfläche und Interaktion mit dem Kunden. Der Dienst wendet je nach Modell Rendering-Vorlagen von Thrift oder JSON auf der Clientseite an Rechenleistung Klient.

Die Turn.js-Bibliothek wurde auch bei der Entwicklung von Katalogen verwendet. Verwendung von CSS und JavaScript-Modelle, die auf der Website präsentiert werden, erhalten durch das Anwenden von Schatten auf das Bild Volumen.

13. Red Bull Music Academy Radio

RBMA Radio verwendet das Modernizr-Tool, das eine browserübergreifende Entwicklung mit HTML5 und CSS ermöglicht. Modernizr wird ständig aktualisiert, sodass Website-Ersteller den Code verbessern können, wenn neue Funktionen eingeführt werden.

Darüber hinaus wurde bei der Implementierung des Dienstes die Backbone.js-Bibliothek verwendet – sie dient zum Laden von Kacheln, um den Effekt einer endlosen Seite zu erzeugen.

14. Nouvelle Vague

Nouvelle Vague ist eine Website der französischen Designagentur Ultranoir. Mit dem Dienst können Sie Tweets mithilfe eines bestimmten Hashtags „verfolgen“. Die Umsetzung erfolgt mit JavaScript, WebGL und HTML5. HTML5 ist jedoch nur für den Teaser beim Öffnen einer Ressource verantwortlich.

Einer der Entwickler der Agentur sagte, dass die Erstellung der Website vier Monate gedauert habe und drei Personen daran gearbeitet hätten. „Wir waren wirklich daran interessiert, WebGL auszuprobieren“, erklärt er.

Das Hauptziel des Projekts bestand darin, die Atmosphäre des Videos mithilfe von 3D-Bildern nachzubilden. Das Team hat sich in die neuen Technologien HTML5, CSS3 und JavaScript vertieft und glaubt, dass diese Sprachen in Zukunft zum Standard für die Arbeit mit 3D werden können – aufgrund hochwertiger Darstellung, reichhaltiger Interaktion und Reaktionsfähigkeit.

15. Die Konvergenz

The Convergence ist ein Browserspiel mit Retro-Grafik, die an Super Mario Bros. erinnert. Es demonstriert die erstaunliche Leistungsfähigkeit von JavaScript und HTML5 und beweist, dass HTML5 seine Aufgabe genauso gut erfüllen kann wie Flash.

Die Entwickler versprechen, dem Spiel in Zukunft Audio und neue Level hinzuzufügen sowie die Mozilla Gamepad API zu unterstützen.

16. Kindle Cloud Reader

Diese Web-App macht „Einmal kaufen, auf allen Geräten lesen“ zur Realität. Es verwendet HTML5-Technologien, JavaScript-API, jQuery-Bibliotheken und jQuery UI und mehrere jQuery-Plugins, einschließlich jScrollPane zum Scrollen von Seiten und jQuery-Vorlagen. Darüber hinaus nutzte das Entwicklungsteam WebSQL zur Unterstützung des Offline-Modus.

17. Les Enfants Terrible

Die vom WeFail-Studio gestartete Website sieht nach Ansicht der Autoren der Notiz gruselig aus, ist aber dennoch sehr cool. Die Ressource ist in einem ziemlich scharfen Stil gestaltet. JavaScript wird verwendet, um die Interaktion zwischen Benutzer und System zu animieren. Um sicherzustellen, dass das Scrollen nur für einzelne Oberflächenelemente durchgeführt wurde, wurde der Befehl verwendet jQuery-Plugin Scrollen nach. Damit das Video nicht in Popup-Fenstern, sondern direkt auf der Website erscheint, wurde die Bibliothek Shadowbox.js verwendet.

Darüber hinaus verwendet der Les Enfants-Code das jQuery Cycle-Plugin – es ist für die Anzeige von Bildern und Beispielen der Arbeit der Agentur verantwortlich.

„Wir haben Les Enfants ins Leben gerufen, um die Leistungsfähigkeit von JavaScript zu verstehen. Es stellte sich heraus, dass Sie in Kombination mit CSS Transform erreichen können hervorragende Ergebnisse„sagt Entwickler Martin Hugh.

Vor nicht allzu langer Zeit, so Hugh, war es nur möglich, solche Dinge mit Flash zu erstellen, aber jetzt gibt es eine praktikable Alternative: JavaScript.

18. Pinterest

Pinterest ist ein Paradebeispiel für die Verwendung von JavaScript, um den Effekt einer unendlichen Seite zu erzeugen. Um die Site zu erstellen, benötigten wir jQuery-Tools, jQuery UI und das PageLess-Plugin.

Laut den Autoren der Notiz ist PageLess für Pinterest von entscheidender Bedeutung, da endloses Scrollen und Laden neuer Pins die Aufmerksamkeit des Benutzers viel effektiver fesselt als soziale Funktionen wie das Kommentieren von Beiträgen.

19. Love Bomb Builder

Love Bobm Builder hilft Benutzern, jemandem ihre Liebe oder Dankbarkeit auszudrücken. Dies ist eine übersichtliche und einfache Website, auf der Sie eine Bombennachricht erstellen und versenden können.

Die Ressource verwendet das Modernizr-Tool, um JavaScript- und HTML5-Code zeitnah zu aktualisieren.

20. Michelberger Alkohol

Wenn ein Benutzer auf einer Website landet, sieht er als Erstes den sogenannten „Preloader“ – es sieht vielleicht so aus, als ob er mit Flash erstellt wurde, aber das ist nicht der Fall. HTML5 und JavaScript sind dafür verantwortlich, das Glas beim Laden mit Bier zu füllen.

Die Ressource nutzt eine teilweise Scrollfunktion – nur für einzelne Oberflächenelemente und ermöglicht dem Benutzer die interaktive Interaktion mit Bildern.

Durch Klicken auf die Tiermasken wird der Client zu anderen Szenen weitergeleitet – alle Animationseffekte werden mit jQuery.animate() ausgeführt.

21. Trello

Trello ist eine kollaborative oder individuelle Planungs-App, mit der Benutzer Listen abgeschlossener und unvollendeter Aufgaben erstellen und Fortschritte in Echtzeit teilen können. Die Website wird mit Node.js, MongoDB und Backbone.js entwickelt.

Trello-Mitschöpfer Daniel le Cherminan erklärt, dass die Verwendung nur einer Sprache beim Schreiben einer Website neuen Teammitgliedern hilft, schneller in den Entwicklungsprozess einzusteigen.

Die Kommunikation zwischen Benutzern wird über Web Sockets implementiert – Le Cherminan stellt fest, dass dies ausreichend ist neue Technologie Daher gab es einige Schwierigkeiten beim Einrichten.

22. BrowserQuest

Dieses von Little Workshop entwickelte Spiel im Retro-Stil soll die Leistungsfähigkeit von HTML5, JavaScript und insbesondere Web Sockets demonstrieren. Es kann Interaktionen zwischen Tausenden von Benutzern gleichzeitig unterstützen.

„Die Entwicklung eines Multiplayer-Spiels ist eine großartige Möglichkeit zu zeigen, wie solche Technologien zusammenarbeiten können. BrowserQuest basiert auf Node.js-Servern, von denen jeder mehrere Instanzen der Spielwelt ausführen kann“, sagt Studioentwickler Guillaume Lecolnet.

23. JS1k

JS1k ist ein jährlicher Wettbewerb, dessen Aufgabe darin besteht, eine Seite in JavaScript zu einem bestimmten Thema (meistens animierte Bilder) zu erstellen. Sein Gewicht sollte 1 KB nicht überschreiten.

Das diesjährige Thema lautet „Hier sind Drachen“.

Die Gewinnerarbeit des Wettbewerbs 2012. Autor – Philip Buchanan, Thema – „Liebe“

Die Arbeit des Gewinners 2012 wog zunächst 8 KB – aber innerhalb eines Tages konnte Philip ihre Größe durch Optimierung des Baumgenerierungsalgorithmus auf die erforderliche 1 KB reduzieren:

Meine Taktik bestand darin, den Compiler „ehrlich zu täuschen“. Verwenden Sie beispielsweise die Konstruktion „a ? b: c“ statt „if (a) b else c“ spart 8 Bytes.

24. Zeitleiste

Der Dienst unterstützt Benutzer bei der Erstellung von Zeitleisten und ist sehr einfach zu verwenden. Sie können Tweets, Videos, Fotos und Audio in Ihre interaktive Timeline einfügen. Sie können Ihre Zeitleiste mit JSON oder beschreiben Google Dokumente- was für den Kunden bequemer ist.

25. Zeichne ein Strichmännchen

Die Hauptidee des Dienstes besteht darin, dem Benutzer die Möglichkeit zu geben, ein wenig Spaß zu haben, indem er an einer interaktiven Geschichte teilnimmt und einem gezeichneten kleinen Mann dabei hilft, verschiedene Hindernisse zu überwinden. Skizzen auf der Website werden mit der Maus erstellt.

Um das Spiel zu erstellen, haben wir jQuery und eine Bibliothek zum Arbeiten verwendet Vektorgrafiken Raphal.js. Durch die Umsetzung des Projekts mit Raphal konnten Entwickler Leistungsprobleme auf den meisten Geräten und in allen Browsern vermeiden.

Anmerkung: In der Vorlesung werden die Nachteile und Vorteile von JavaScript besprochen. Gemeinsame Sprachverwendungen. . Moderne Verwendungen von JavaScript.

Einführung

Nachdem Sie sich nun mit den grundlegenden Konzepten der Programmierung vertraut gemacht haben, müssen Sie einen Schritt zurücktreten und versuchen, sich einen Überblick darüber zu verschaffen, was Sie mit JavaScript tatsächlich tun können – warum sollten Sie sich die Zeit nehmen, so etwas zu lernen? komplexes Thema und die Verwendung auf Webseiten?

Wir befinden uns jetzt in einer Zeit, in der sich die Verwendung von JavaScript in den letzten Jahren vom Rande des Wissens zum Mainstream-Toolkit für die Webentwicklung entwickelt hat. Ohne Kenntnisse und Fähigkeiten im Umgang mit JavaScript ist es mittlerweile schwierig, einen Job als Webentwickler zu bekommen.

Machen wir weiter – diese Vorlesung hat folgenden Aufbau:

  • Wie ich mich in JavaScript verliebte
  • Nachteile von JavaScript
  • Was JavaScript kann
  • Häufige Verwendungen von JavaScript
    • Einführung in DOM-Scripting
  • Abschluss

Wie ich mich in JavaScript verliebte

Als ich zum ersten Mal mit JavaScript in Berührung kam, waren die Computer langsam, die Browser interpretierten es nicht gut und es schien mir einfach eine schlechte Idee zu sein. Ich komme aus der Welt der serverseitigen Entwicklung – unterstützen Sie alle Funktionen in Perl und Sie sind auf der sicheren Seite.

Andererseits war die Geschwindigkeit des Internets sehr langsam und die Kosten für die Verarbeitung und Speicherung von Dateien auf dem Server waren sehr hoch, und hier kam JavaScript ins Spiel. Die Sprache lief auf den Computern der Endbenutzer und alles, was in JavaScript möglich war, verursachte keine zusätzliche Verarbeitungslast auf dem Server. Dadurch wurden Websites für den Endbenutzer schneller und für den Eigentümer hinsichtlich des Serververkehrs kostengünstiger.

Heute sind Browser besser in der Lage, JavaScript zu verarbeiten, Computer sind schneller geworden und Bandbreite viel günstiger, so dass die meisten Mängel inzwischen weniger kritisch sind. Die Reduzierung der Hin- und Her-Kommunikation mit dem Server bei der Verwendung von JavaScript führt jedoch immer noch zu einer schnelleren Leistung von Webanwendungen und einem besseren Benutzererlebnis.

Nachteile von JavaScript

Trotz aller jüngsten Verbesserungen gibt es immer noch eine Falle: JavaScript ist unvorhersehbar. Nicht die Sprache selbst, sondern die Umgebung, in der sie implementiert wird. Es gibt keine Möglichkeit vorherzusagen, über welche Art von Computer ein Benutzer verfügt, der eine Webseite anfordert, es gibt keine Möglichkeit zu wissen, wie beschäftigt der Computer mit anderen Aufgaben ist, und es gibt keine Möglichkeit zu wissen, ob ein anderes JavaScript-Skript, das in einem anderen Browser-Tab geöffnet ist, die Ursache dafür ist zum Stillstand kommen. Solange Browser nicht generell anfangen, separate Rechenressourcen verschiedenen Registerkarten und Fenstern (sogenannte Threads) zuzuweisen, wird dies weiterhin ein Problem sein. Multithreading ist jedoch in gewissem Umfang in HTML5 über Web-Worker verfügbar und wird in gewissem Umfang von Browsern unterstützt.

Darüber hinaus ist JavaScript in Browsern häufig aus Sicherheitsgründen deaktiviert oder weil JavaScript häufig verwendet wird, um Benutzer unnötig zu belästigen, anstatt das Erlebnis zu verbessern. Beispielsweise gibt es immer noch viele Websites, die versuchen, gegen den Willen des Benutzers neue Fenster zu öffnen oder den Inhalt der Website mit Werbung zu überdecken, bis der Benutzer auf einen Link klickt, um ihn zu entfernen.

Was JavaScript kann

Gehen wir einen Schritt zurück und listen die Vorteile von JavaScript auf:

  • JavaScript ist sehr einfach zu implementieren. Sie müssen nur den Code eingeben HTML-Dokument und teilen Sie dem Browser mit, dass es sich um JavaScript handelt.
  • JavaScript läuft auf den Computern von Webbenutzern – auch wenn diese offline sind!
  • Mit JavaScript können Sie reaktionsfähige Schnittstellen erstellen, die das Benutzererlebnis verbessern und dynamische Funktionen bereitstellen, ohne darauf warten zu müssen, dass der Server antwortet und eine andere Seite rendert.
  • JavaScript kann Inhalte in ein Dokument laden, wenn der Benutzer dies benötigt, ohne die gesamte Seite neu laden zu müssen – was allgemein als Ajax bezeichnet wird.
  • JavaScript kann prüfen, was im Browser ausgeführt werden kann, und entsprechend reagieren – dies wird als unaufdringliche JavaScript-Prinzipien (siehe unaufdringliche JavaScript-Prinzipien) oder manchmal auch als sicheres Scripting bezeichnet.
  • JavaScript kann dabei helfen, Browserprobleme zu beheben oder Lücken in der Browserunterstützung zu schließen – beispielsweise durch die Behebung von CSS-Layoutproblemen in einigen Browsern.

Das ist schon viel für eine Sprache, die bis vor kurzem von Programmierern, Anhängern von „mehr Programmiersprachen“, lächerlich gemacht wurde hohes Level„Einer der Gründe für das Wiederaufleben von JavaScript ist, dass es heutzutage immer mehr gibt komplexe Anwendungen Web und hoch Interaktivität erfordert die Verwendung von Flash (oder anderen Plugins) oder Skripting. JavaScript ist vielleicht der beste Weg, da es Standard für das Web ist und nativ unterstützt wird verschiedene Browser(Mehr oder weniger – einige Dinge unterscheiden sich zwischen den Browsern, und diese Unterschiede werden in den folgenden Vorlesungen an entsprechender Stelle behandelt) und es ist mit anderen kompatibel offene Standards Netz.

Häufige Verwendungen von JavaScript

Der Umfang von JavaScript hat sich im Laufe der Jahre seiner Verwendung verändert. Zunächst beschränkte sich die Interaktion von JavaScript mit einer Website weitgehend auf die Interaktion mit Formularen, die dem Benutzer Folgendes zur Verfügung stellten Rückmeldung und verfolgen, wann sie bestimmte Dinge getan haben. Verwendete die Funktion „alert()“, um den Benutzer über etwas zu informieren (siehe Abbildung 2.1). bestätigen() um um Erlaubnis zu bitten, eine Aktion auszuführen, und prompt() oder ein Formularfeld, um Benutzereingaben zu empfangen.


Reis. 2.1.

Dies führte hauptsächlich zu Validierungsskripten, die den Benutzer daran hinderten, fehlerhafte Formulare an den Server zu senden, sowie zu einfachen Konvertern und Rechnern. Darüber hinaus war es auch möglich, völlig nutzlose Dinge zu erstellen, beispielsweise den Benutzer zur Eingabe seines Namens aufzufordern und ihn anschließend sofort anzuzeigen.

Darüber hinaus wurde die Funktion document.write() verwendet, um dem Dokument Inhalte hinzuzufügen. Wir haben auch mit Pop-ups und Frames gearbeitet und viel Nerven und Mühen aufgewendet, um sie dazu zu bringen, miteinander zu kommunizieren. Allein der Gedanke an die meisten dieser Technologien sollte jeden Entwickler dazu bringen, angewidert zu murmeln: „Lasst sie los“, also lasst uns nicht bei solchen Dingen verweilen – sie existieren beste Wege Benutze JavaScript!

Einführung in DOM-Scripting

Wann haben Browser mit der Unterstützung und Implementierung begonnen? Objektmodell dokumentieren- DOM (http://www.w3.org/DOM/), das eine viel erweiterte Interaktion mit Webseiten ermöglicht, begann JavaScript interessanter zu werden.

DOM Ist Objektdarstellung dokumentieren. Der vorherige Absatz wäre beispielsweise in der DOM-Sprache ein Elementknoten, dessen Knotenname p wäre. Es enthält drei untergeordnete Knoten – einen Textknoten, der „Als Browser mit der Unterstützung und Implementierung begonnen haben“ und seinen Wert „nodeValue“ enthält, einen Elementknoten mit „nodeName“ gleich „a“ und einen weiteren Textknoten mit „nodeValue“ gleich „, der eine viel erweiterte Interaktion mit dem Web ermöglicht Seiten ,JavaScript ist interessanter geworden.“ Der untergeordnete Knoten a verfügt außerdem über einen Attributknoten namens href mit dem Wert „http://www.w3.org/DOM/“ und einen untergeordneten Knoten, bei dem es sich um einen Textknoten mit dem Knotenwert „nodeValue“ handelt. Dokumentobjektmodell-DOM".

Dieser Absatz kann auch visuell anhand des in Abbildung 2.2 dargestellten Baumdiagramms dargestellt werden.

In menschlicher Sprache können wir sagen, dass das DOM die Typen, Werte und Hierarchie des gesamten Dokuments erklärt dieser Moment Sie müssen nichts anderes wissen. Das DOM wird im Abschnitt „Navigieren im DOM“, Allgemeine Einführung in das DOM, dieses Kurses ausführlicher besprochen.

Mit DOM können Sie:

  • Greifen Sie auf jedes Element in einem Dokument zu und ändern Sie es Aussehen, Inhalt und Attribute.
  • Erstellen Sie neue Elemente und Inhalte und fügen Sie diese bei Bedarf in das Dokument ein.

Das bedeutet, dass es keine Fenster, Rahmen, Formen oder das Gefürchtete mehr gibt Warnmeldungen und Sie können dem Benutzer die Antwort in einem Dokument in gut formatierter Form übermitteln, wie in Abbildung 2.3 dargestellt.

Zusammen mit der Ereignisverwaltung wird dies zu einem leistungsstarken Arsenal für die Erstellung interaktiver und ansprechender Schnittstellen.

Event-Handling bedeutet, dass der Code auf Ereignisse reagiert, die im Browser passieren. Dabei kann es sich um Ereignisse handeln, die automatisch eintreten – etwa das Ende des Ladevorgangs einer Seite – aber in den meisten Fällen bezieht sich die Reaktion darauf, was der Benutzer im Browser tut.

Benutzer können die Größe des Fensters ändern, auf der Seite scrollen, bestimmte Tasten drücken oder mit der Maus auf Links, Schaltflächen und Elemente klicken. Mit der Ereignisbehandlung können Sie auf das Eintreten dieser Ereignisse warten und die Webseite anweisen, auf diese Aktionen in der gewünschten Weise zu reagieren. Während in der Vergangenheit das Klicken auf einen beliebigen Link den Website-Besucher zu einem anderen Dokument führte, ist es jetzt möglich, diese Aktionen zu ersetzen und etwas anderes zu tun, z. B. ein Panel ein- und auszublenden oder Informationen aus einem Link zu extrahieren und diese zum Herstellen einer Verbindung zu verwenden Web. Dienst.

Ereignisse werden weiter unten in diesem Kurs im Abschnitt „Ereignisse mit JavaScript verarbeiten“ und „Ereignisse in JavaScript verarbeiten“ ausführlich behandelt.

Andere moderne Verwendungen von JavaScript

Das ist im Grunde das, was die Leute heute mit JavaScript machen. Verbessert die alten, bewährten Webschnittstellen – Klicken auf Links, Eingeben von Informationen und Senden von Formularen usw. - um schneller auf Endbenutzeranfragen zu reagieren. Zum Beispiel:

  • Das Registrierungsformular kann während der Eingabe überprüfen, ob der Benutzername verfügbar ist, und vermeidet so den frustrierenden Frust, die Seite neu laden zu müssen.
  • Das Suchfeld bietet möglicherweise während der Eingabe Vorschläge, die auf bereits eingegebenen Daten basieren (wenn Sie beispielsweise „bi“ eingeben, werden möglicherweise Vorschläge für Wörter angezeigt, die diese Zeichenfolge enthalten, z. B. „bird“, „big“ und „bicycle“). . Dieses Nutzungsmodell wird Autovervollständigung genannt.
  • Informationen, die sich ständig ändern, können in regelmäßigen Abständen heruntergeladen werden, ohne dass eine Benutzerinteraktion erforderlich ist, beispielsweise die Ergebnisse eines Sportspiels oder Börsenkurse.
  • Informationen, die nützlich wären und für einige Benutzer möglicherweise überflüssig sind, können heruntergeladen werden, wenn der Benutzer sich dazu entschließt, darauf zuzugreifen. Beispielsweise kann ein Navigationsmenü auf einer Website sechs Links enthalten, stellt jedoch auf Anfrage Links zu tieferen Seiten bereit, wenn der Benutzer den Menüpunkt aktiviert.
  • JavaScript kann Layoutprobleme beheben. Mithilfe von JavaScript können Sie die Position und Fläche jedes Elements auf der Seite sowie die Abmessungen des Browserfensters ermitteln. Mithilfe dieser Informationen können Sie überlappende Elemente und ähnliche Probleme verhindern. Angenommen, Sie haben ein Menü mit mehreren Ebenen. Wenn Sie vor der Anzeige prüfen, ob Platz für Untermenüs vorhanden ist, können Sie Bildlaufleisten oder überlappende Menüelemente vermeiden.
  • JavaScript kann die von HTML bereitgestellten Schnittstellen verbessern. Während es praktisch ist, über ein Texteingabefeld zu verfügen, ist es noch besser, über ein Eingabefeld zu verfügen, in dem Sie aus einer Liste vordefinierter Werte auswählen oder eigene Werte eingeben können. Mithilfe von JavaScript können Sie ein reguläres Eingabefeld entsprechend erweitern.
  • JavaScript kann verwendet werden, um Elemente auf einer Seite zu animieren – beispielsweise um Informationen ein- und auszublenden oder bestimmte Abschnitte einer Seite hervorzuheben – und so eine noch benutzerfreundlichere und reichhaltigere Benutzeroberfläche zu erstellen. Weitere Informationen Solche Möglichkeiten werden später in diesem Kurs im Abschnitt „Animation in JavaScript“, JavaScript-Animation, beschrieben.

Verwenden Sie JavaScript mit Bedacht und Verantwortung

Es gibt nicht viel, was man mit JavaScript nicht machen kann – insbesondere in Kombination mit anderen Technologien wie Canvas oder SVG. Wann jedoch tolle Möglichkeiten bringt große Verantwortung mit sich und Sie sollten bei der Verwendung von JavaScript immer Folgendes beachten.

  • JavaScript ist möglicherweise nicht verfügbar. Dies lässt sich leicht überprüfen und stellt daher kein Problem dar. Allerdings müssen Dinge, die von JavaScript abhängen, unter Berücksichtigung von JavaScript erstellt werden, und es muss darauf geachtet werden, dass die Site nicht aufhört zu funktionieren (d. h. die Kernfunktionalität wird nicht verfügbar), wenn JavaScript nicht verfügbar ist.
  • Wenn die Verwendung von JavaScript dem Benutzer nicht dabei hilft, sein Ziel schneller und effizienter zu erreichen, wird es wahrscheinlich nicht richtig verwendet.
  • Die Verwendung von JavaScript verstößt häufig gegen die Konventionen, an die sich Menschen im Laufe der Jahre bei der Nutzung des Webs gewöhnt haben (z. B. das Klicken auf einen Link, um zu einer anderen Seite zu gelangen, und das kleine Warenkorbsymbol, das „Warenkorb“ bedeutet). Auch wenn diese Nutzungsmuster veraltet und ineffektiv sein mögen, zwingt ihre Änderung den Benutzer dennoch dazu, seine Gewohnheiten zu ändern – und das löst bei den Menschen ein Unbehagen aus. Wir haben gerne die Kontrolle, und wenn wir erst einmal etwas herausgefunden haben, kann es manchmal schwierig sein, mit Veränderungen umzugehen. JavaScript-Lösungen sollten sich von Natur aus besser anfühlen als die vorherige Erfahrung, aber nicht so unterschiedlich, dass der Benutzer es nicht aufgrund seiner vorherigen Erfahrung wahrnehmen kann. Wenn Sie einen Website-Besucher dazu bringen können, zu sagen: „Aha – das heißt, ich muss nicht warten“ oder „Großartig – jetzt muss ich diesen besonders lästigen Schritt nicht mehr machen“ – dann haben Sie eine großartige Verwendung für JavaScript gefunden .
    • CSS. Mit Hilfe geeigneter Browser-Add-ons (z. B. Google Gears oder Yahoo Browser Plus) können Sie sogar JavaScript verwenden, um Online-Systeme verfügbar zu machen Offline-Modus und automatisch synchronisieren, wenn Ihr Computer eine Verbindung zum Netzwerk herstellt.

    Auch JavaScript ist nicht auf Browser beschränkt. Die Geschwindigkeit und der geringe Speicherbedarf von JavaScript im Vergleich zu anderen Programmiersprachen ermöglichen eine immer neue Nutzung, von der Automatisierung sich wiederholender Aufgaben in Programmen wie Illustrator bis hin zur Verwendung als serverseitige Sprache mit einem eigenständigen Parser. Die Zukunft ist weit offen; Egal, was Sie als Webentwickler in naher Zukunft tun werden, ich bin mir ziemlich sicher, dass Sie früher oder später mit JavaScript arbeiten müssen.

    Über den Autor

    Chris Hileman ist seit zehn Jahren als Webentwickler tätig, seit er den Radiojournalismus aufgegeben hat. Es funktioniert für Yahoo! in Großbritannien als Trainer und leitender Entwickler, wo er die Qualität des Front-End-Codes für Europa und Asien überwacht.

    Chris unterhält einen Blog auf der Website „Wait Until I Come“ (http://wait-till-i.com/) und ist in vielen Ländern verfügbar in sozialen Netzwerken unter dem Spitznamen „codepo8“.

    Foto mit freundlicher Genehmigung: Bluesmoon (

Client-Anwendungen

Mit JavaScript kann eine vollständige Clientanwendung entwickelt werden. Obwohl JavaScript keine so umfassende Sprache wie Java ist, verfügt sie über erhebliche Fähigkeiten bei der Arbeit mit HTML-Tags und den zugehörigen Objekten. Eine der bekanntesten JavaScript-Anwendungen, ColorCenter von hJdaho Design (http://v.e-du.ru/?http://www.hidaho.com/c3), ist in Abb. 1.12 dargestellt. Diese Anwendung Wird verwendet, um die Farben der im Browser sichtbaren Elemente auszuwählen Vorschau in einem separaten Rahmen. Das Erstellen einer ähnlichen Anwendung mit Java ist aufgrund der Notwendigkeit, mit HTML zu interagieren, wesentlich komplexer. Es liegt auf der Hand, dass JavaScript in manchen Fällen eine nahezu ideale Grundlage für die Anwendungsentwicklung darstellt.

Datenvalidierung

JavaScript bietet Webentwicklern die Möglichkeit, Benutzereingaben zu validieren, ohne den Server kontaktieren zu müssen. Innen JavaScript-Code Sie können feststellen, ob die vom Benutzer eingegebenen Werte korrekt sind oder ob sie beispielsweise dem erforderlichen Format entsprechen. Es ist viel effizienter, die Datenvalidierung in JavaScript durchzuführen, als unvollständige Daten an den Server zu übergeben. Dieser Ansatz ist nicht nur für den Benutzer, der die Daten eingibt, effektiv, sondern auch für den Server. Gleichzeitig besteht die Gewissheit, dass die zur Verarbeitung an den Server übermittelten Daten vollständig korrekt sind.

Interaktive Formulare erstellen

JavaScript wird auch verwendet, um die Dinge aufzupeppen HTML-Formulare. Eine der Aufgaben der Revitalisierung besteht darin, die Zuverlässigkeit der Daten zu überprüfen. Das andere betrifft die Umsetzung Zusatzfunktionen, die in HTML nicht verfügbar sind, z. B. Unterstützung für Informationen in der Statusleiste, Öffnen eines zweiten Browserfensters zum Anzeigen von beispielsweise Referenzinformationen usw.

Client-Nachschlagetabellen

Neben der Datenvalidierung besteht eine Möglichkeit, den Bedarf an Serverzugriffen zu reduzieren, darin, JavaScript zum Generieren und Verwalten clientseitiger Nachschlagetabellen zu verwenden. Es ist zu beachten, dass in diesem Fall die Daten in das HTML-Dokument selbst eingebettet werden müssen, sodass die Verwendung von Nachschlagetabellen auf kleine Tabellen beschränkt werden sollte. Informationsdatenbanken schreibgeschützte Daten.

Staatliche Unterstützung

In einer Webumgebung, die das Zustandskonzept nicht unterstützt, wird JavaScript verwendet, um den Zustand in der Kommunikation zwischen Server und Client aufrechtzuerhalten. Der Hauptweg

Die zustandsbehaftete Unterstützung ist mit der Verwendung von Cookies (vom Browser auf der Clientseite gespeicherte Informationen) verbunden. JavaScript übernimmt sowohl die Suche als auch die Cookie-Speicherung auf der Clientseite.

Arbeiten mit Java-Applets, ActiveX-Steuerelementen und Plug-Ins

Mit der Weiterentwicklung von JavaScript steigt die Möglichkeit, mit clientseitigen Erweiterungen zu arbeiten, einschließlich Java-Applets, ActiveX-Steuerelementen und Netscape-Plug-Ins. Es ist einfach, auf die Eigenschaften von Java- und ActiveX-Objekten zuzugreifen und deren Methoden aufzurufen. Ebenso ist es nicht schwer festzustellen, ob ein bestimmtes Plug-in installiert ist. Mit dieser Fähigkeit wird JavaScript zum Klebstoff, der HTML, Applets und Client-Erweiterungen zusammenhält.

Quelle „JavaScript in Beispielen“