JSBin ist ein HTML-Online-Editor, der Personen helfen soll, die Frontend-Entwicklung lernen möchten oder gerade lernen.

Example Tutorial hat ebenfalls einen HTML-Online-Editor gestartet, abrufbar unter:https://c.example.com/front-end/61

Im Folgenden sehen wir uns das Benutzerhandbuch für dieses Tool an:

Kurzanleitung

Nach dem Öffnen der Seite sehen Sie den folgenden Bildschirm. Die URL-Leiste isthttp://jsbin.com/genau das, und darunter befinden sich die HTML- und JavaScript-Editorbereiche, in die Sie Inhalte eingeben können:

Sobald Sie in einem beliebigen Editorbereich ein Zeichen eingeben, werden Sie sofort bemerken, dass sich die "URL-Leiste" ändert. Wie unten gezeigt, ist Bereich 1 IhreBin ID, Bereich 2 ist dieRevisionsnummer des Bins(Standardmäßig beginnt es bei 1), und Bereich 3 ist der aktuelleAnzeigemodus, wobei "edit" den "Edit"-Modus darstellt. Standardmäßig wird das von Ihnen eingegebene HTML / CSS / JavaScript sofort im Ausgabebereich ganz rechts angezeigt.

Hinweis: InJS BinJS Bin wird jede Frontend-Webseiten-Kombination (HTML + CSS + JavaScript) als Bin bezeichnet!

Natürlich können Sie, sobald SieBinfertig eingerichtet haben, direkt Ihre aktuelle JS Bin-URL teilen. Sehr praktisch!

Einführung in die Navigationsleiste

Wie unten gezeigt, ist dasJS BinHauptlayout nach dem Betreten sehr einfach; oben befindet sich nur eine Navigationsleiste. Als Nächstes erklären wir anhand der nummerierten Abbildung:

Navigationsleiste 1. JS Bin-Hauptmenü

Sie können jederzeit ein neuesBinerstellen, klicken Sie auf dieNewOption.

Wenn Sie sich als Mitglied registriert haben, sehen Sie dieOpenFunktion, da alleBinBins, die Sie bearbeitet haben, automatisch gespeichert werden und Sie zuvor geschriebene jederzeit erneut öffnen können.BinsWie unten gezeigt, können Sie, wenn Sie bestimmte Bins nicht mehr sehen möchten, sie auch archivieren; standardmäßig werden sie hier nicht angezeigt, und Sie können sie später trotzdem wieder abrufen.

Wie unten gezeigt, klicken Sie aufArchivansicht, um die zuvor archiviertenBins wiederherzustellen

Die FunktionBeschreibung hinzufügenim Hauptmenü dient nur dazu, Ihnen beim Hinzufügen eines Description-Meta-Tags zu Ihrem HTML zu helfen.

Die FunktionMeilenstein erstellenim Hauptmenü teilt JS Bin einfach mit: "Ich habe einen Bin-Meilenstein abgeschlossen; bitte fixiere die aktuelle Version für mich." Wenn Sie diese Funktion daher anklicken, wird die "Revisionsnummer" in der JS-Bin-URL automatisch+1

Die FunktionAls Vorlage speichernim Hauptmenü nimmt Ihr aktuellesBinBin und speichert es als Vorlage, sodass Sie später neueBin hinzufügen können.das standardmäßige HTML/CSS/JavaScript wird denBin-Inhalt haben, den Sie aktuell festgelegt haben.

Die FunktionKlonenim Hauptmenü unterscheidet sich nur geringfügig von der früheren: Sie ändert nicht die Revisionsnummer, sondern verwendet eine brandneueMeilenstein erstellen-Funktion hat nur einen kleinen Unterschied: Sie ändert keine Revisionsnummer, sondern eine ganz neueBinID, wie unten gezeigt:

Die FunktionHerunterladenim Hauptmenü nimmt denBinBin und lädt ihn herunter; sie führt HTML/CSS/JavaScript in eine einzelne HTML-Datei zusammen.

Navigationsleiste 2. Bibliothek hinzufügen (Bibliothek einfügen)

Mit dieser Schaltfläche können Sie bequem einige gängige externe Ressourcen in Ihr HTML einfügen, wie jQuery, jQuery UI, jQuery Mobile, Bootstrap, YUI, AngularJS, Kendo UI, Backbone, Modernizr usw. Es ist ein praktisches kleines Werkzeug.

Navigationsleiste 3. Verschiedene Editoren, Konsole und Live-Vorschau-Bereiche

HTML-Editor-Bereich

Dieses Editor-Panel bietet Syntaxhervorhebung. Leider verfügt es noch nicht über IntelliSense oder Auto-Vervollständigung, aber es unterstütztEmmet ( Zen Coding) Schreibmethode, die wirklich mächtig ist! Wer Zen Coding nicht kennt, kann sich ein Tutorial-Video ansehen, das ich früher aufgenommen habe [VS2012-Erweiterungen richtig nutzen – Mit ZenCoding schnell HTML-Syntax generieren (Web Essentials 2012)], das zeigt, wie Sie die spezielleZen Coding-Syntax verwenden, um schnell HTML-Inhalte zu schreiben!

Darüber hinaus können Sie auch zwischen verschiedenen Syntaxmodi wechseln und schließlich aufIn HTML umwandelnklicken, um automatisch in das HTML-Format zu konvertieren.

CSS-Editor-Panel

Dies ist dem HTML-Editor sehr ähnlich, und er unterstützt auch dieZen Coding-Syntax! Sie können auch die effizientere LESS- oder Stylus-Syntax verwenden, um CSS-Stile zu schreiben, und schließlich aufIn CSS umwandeln, um automatisch in das Standard-CSS-Format zu konvertieren.

Hinweis: Sie können JS Bin sogar direkt alsLESSoderStylusLernwerkzeug!

JavaScript-Editor-Panel

Dies ist ebenfalls den HTML/CSS-Editoren sehr ähnlich, unterstützt verschiedene Syntaxvarianten, die dabei helfen, JavaScript effizient zu schreiben, und unterstützt außerdem TypeScript!

Konsolen-Panel

Dieses Panel ist dasselbe wie das Konsolen-Panel in den Entwicklertools verschiedener Browser. Ich weiß nicht, warum sie auch eine Webversion gemacht haben; ich finde sie nicht besser als die in Browser integrierte, deshalb benutze ich sie meistens nicht.

Ausgabe-Panel

Der Hauptzweck dieses Panels ist es, das Ausführungsergebnis der endgültigen HTML/CSS/JavaScript-Kombination auszugeben. Standardmäßig ist die OptionJS automatisch ausführenaktiviert, was bedeutet, dass beim Tippen im JavaScript-Editor die Webseite im Ausgabe-Panel kontinuierlich aktualisiert wird. Manchmal kann diese Option den Browser zum Absturz bringen. Wenn der Browser instabil wird, wird empfohlen, dieses Element zu deaktivieren. Wenn Sie nach der Aktivierung das geänderte JS ausführen möchten, müssen SieMit JS ausführen-Schaltfläche drücken, um tatsächlich die neue Version des JavaScript-Programms auszuführen.

Der ganz rechteLive-Vorschau-Pfeil öffnet die Webseite in einem brandneuen Fenster. An diesem Punkt werden Sie bemerken, dass die URL etwas anders ist, das heißt, es fehlt der Teiledit, was auch bedeutet, dass Sie diese URL mit anderen teilen können, damit sie das Ausführungsergebnis der Seite sehen oder direkt vollständiger mit den auf der Seite eingerichteten interaktiven Funktionen interagieren können, ohne beeinträchtigt zu werden durch dieJS BinEditor-Panel. Wie im folgenden Vergleich gezeigt:

Navigationsleiste 4. Anmelden, Registrieren, Mitgliedskonto-Passwort aktualisieren (keine persönlichen Informationen)

Bei JS Bin können Sie sich erfolgreich registrieren, indem Sie nur Ihre E-Mail und Ihr Passwort eingeben, und es gibt keine Identitätsprüfung. Wenn Sie das falsche Konto oder Passwort eingeben, ist das egal; registrieren Sie einfach ein neues! Auf dem Bildschirm nach dem Login können Sie Ihre E-Mail und Ihr Passwort jederzeit aktualisieren. Sehr offen!

Navigationsleiste 5. Hilfedateien

Wenn Sie alle Links hier lesen, werden Sie feststellen, dass Sie von JS Bins einfachem Aussehen getäuscht wurden; tatsächlich ist es sehr funktionsreich!

Navigationsleiste 6. Teilen

Wenn IhrBinBin fertig bearbeitet ist, können Sie es auf viele Arten teilen. Dieses Teilen-Funktionsmenü bietet einige Funktionen:

Revision #1 vor weiteren Änderungen sperren bedeutet, dass du die aktuelle #1-Version sperren möchtest (d. h. die in der URL-Leisten1Teil). Diese Funktion ist genau dieselbe wie im JS Bin-HauptmenüMeilenstein erstellenFunktion.

Nachdem du die von Live & Full Preview bereitgestellte URL eingegeben hast, erhältst du eine Webseite ohne Editor-Panels, was weniger ablenkt, wenn du mit bestimmten Funktionen experimentierst. Allerdings erscheint weiterhin eine schwebende Schaltfläche "Edit in JS Bin" in der oberen rechten Ecke der Seite, mit der du jederzeit den Editor-Bereich aufrufen kannst.

Code View ist der Bildschirm, in dem wir bearbeiten.

Embed bettet nicht nur einen Hyperlink ein, sondern lädt am Ende auch eine JavaScript-Datei, die den Hyperlink direkt in eine komplexe Seite umwandelt, wie unten gezeigt:

Nachdem diese Zeichenkette in eine Webseite eingefügt wurde, sieht das angezeigte Ergebnis wie unten aus:

Der letzte, Codecast, ist eine "Broadcast"-Funktion. Du kannst die URL mit anderen teilen und sie bitten, die Seite zu öffnen. Danach kannst du weiterhin beliebige Inhalte dieses Bins ändern, und der Browser der anderen Person zeigt denselben Inhalt wie du. Deshalb wird es "Broadcast"-Funktion genannt. Sie eignet sich sehr gut für Online-Unterricht oder Fernunterricht!

§ Teile ein paar Tipps zur Nutzung von JS Bin

1. Zeilennummernanzeige aktivieren

Dies ist ein nicht dokumentierter Trick. Doppelklicke einfach schnell mit der Maus auf den Titel des Editor-Bereichs, um die Zeilennummernanzeige zu aktivieren. Doppelklicke erneut, um sie auszuschalten. Sehr praktisch.

2. Die Methode zumBinAnpassen der ID

Dies ist ein weiterer nicht dokumentierter Trick. Die meisten Leute denken, JS Bin könne die URL nicht anpassen, aber tatsächlich kann es das. Die Methode ist wie folgt:

Mach dir vorerst keine Sorgen um die aktuelle URL. Tippe einfach die gewünschte angepasste direkt in die AdressleisteBin IDein, wie unten gezeigt:

Nach dem Drücken der Eingabetaste wird automatisch ein brandneues Bin erzeugt, und dieseBin IDgehört jetzt dir! (^_^)

3. Steuern der Standard-Bereiche des Bearbeitungsbildschirms vonBinthe default panes of the edit screen

Wenn du den Bearbeitungsbildschirm eines bestimmten Bins aufrufen möchtest, hängt es von den JS-Bin-Einstellungen jeder Person ab, welche 5 Standard-Bereiche geöffnet werden. Wenn du heute ein Bin mit jemandem teilen möchtest und möchtest, dass bei der anderen Person standardmäßig nur die HTML- und JavaScript-Bereiche geöffnet sind, kannst du einfach die URL leicht ändern. Zum Beispiel die folgende Bin-URL:

• http://jsbin.com/avegen/1/edit

Wir können die URL wie folgt ändern (füge am Ende der URL einen Query-String hinzu und trenne die Parameter durch Kommas) und diese URL dann an die andere Person senden. Die andere Person öffnet dann die HTML- und JavaScript-Bereiche wie von dir beabsichtigt:

• http://jsbin.com/avegen/1/edit ?html,javascript

Die Parameternamen für diese fünf Bereiche lauten wie folgt:

• htmlHTML-Editor
• cssCSS-Editor
• javascriptJavaScript-Editor
• consoleKonsole
• liveLive-Vorschaubereich

4. Hervorhebung übereinstimmender JavaScript-Klammern aktivieren

Da JS Bin dasCodeMirror-Paket als JavaScript-Editor verwendet (dieses ist wirklich leistungsstark), ist es möglich, den JavaScript-Editor anzupassen, wenn Sie möchten. Siehe einfachCodeMirror-API-Dokumentationund schon sind Sie fertig. Hier stelle ich eine schöne Optionseinstellung vor, nämlich die Aktivierung der Hervorhebung übereinstimmender Klammern in JavaScript.

Nehmen wir diesen Bin als Beispiel:http://jsbin.com/oyuyev/1/edit

Wir müssen den folgenden Befehl im Konsole-Tab der Entwicklertools des Browsers ausführen. Öffnen Sie die integrierten Entwicklertools des Browsers (IE8+, Chrome, Firefox, Safari haben alle solche Tools), wechseln Sie zum Konsole-Tab und geben Sie dann ein:

jsbin.settings.editor.matchBrackets = <span class="kwrd" style="color: #0000FF;">true</span> ;

Drücken Sie dann F5 (Webseite aktualisieren), bewegen Sie den Textcursor zur passenden geschweiften Klammer, und Sie sehen die Hervorhebung:

5. JS Bin-Entwicklungsumgebung zurücksetzen

In dieser Version von JS Bin können Sie, wenn Sie die FunktionAls Vorlage speichernim Hauptmenü ausführen, leider nicht zurück! Das bedeutet, Sie können die integrierte Standard-HTML-Vorlage der Website nicht wiederherstellen. Wenn Sie außerdem zu viele Einstellungen im Editor geändert haben und er nicht mehr normal verwendet werden kann, können Sie tatsächlich die JS Bin-Entwicklungsumgebung zurücksetzen. An diesem Punkt können Sie den folgenden Trick anwenden.

Hinweis: Dies ist ebenfalls ein undokumentierter Trick. Ich habe mehrere Stunden recherchiert, um diesen herauszufinden!

Öffnen Sie die integrierten Entwicklertools des Browsers (IE8+, Chrome, Firefox, Safari haben alle solche Tools), wechseln Sie zum Konsole-Tab und geben Sie danndelete jsbin.settingsein und drücken Sie die Eingabetaste, um es auszuführen. Nach erfolgreicher Ausführung werden alle Einstellungen zurückgesetzt.

delete jsbin.settings

Der Inhalt der html / css / javascript-Vorlagen muss jedoch ebenfalls gelöscht werden, da JS Bin diese Vorlagen im localStorage des Browsers speichert (dies ist ein Speichermechanismus in HTML5). An diesem Punkt müssen Sie außerdemlocalStorage.clear() eingebenum die verbleibenden Daten vollständig zu löschen.

localStorage.clear()

Der Bildschirm nach der Ausführung wird unten angezeigt. Drücken Sie nach der Ausführung F5 (Aktualisieren), um zu den ursprünglichen Standardwerten zurückzukehren!

6. Nur JavaScript-Inhalt ausgeben (damit ein anderes Bin ihn per AJAX laden kann)

Wir nehmenhttp://jsbin.com/ json-test /1/ editals Beispiel. Ich habe einreines JSON-JavaScript eingegeben. Sie können hier auch mehrereJSHint-Warnmeldungen sehen, aber wir müssen uns vorerst keine Sorgen darum machen.

{
  "author" : "Will" ,
  "bookname" : "ASP.NET MVC 4开发实战"
}

Hinweis: Zeichenfolgen in JSON müssen in doppelte Anführungszeichen eingeschlossen werden!

An diesem Punkt erstellen wir ein weiteres neues Bin und fügen die jQuery-BibliothekBinhinzu (Hinweis: Da der HTML-Inhalt geändert wurde, wird ihm sofort eine

ID zugewiesen, wodurch eine brandneue URL erzeugt wird)/editAn diesem Punkt ändern wir die URL, die wir gerade hatten, leicht, indem wir.jszu

• http://jsbin.com/ json-test /1 .js

um nur den JavaScript-Teil zu erhalten, wie folgt:

$.ajax({
  url: 'http://jsbin.com/json-test/1.js' ,
  dataType: 'json' ,
  success: function (data) {
    alert(data.author + ' - ' + data.bookname);
  }
});

Geben Sie dann den folgenden jQuery-Code ein, um die AJAX-Funktionalität von jQuery zu testen: