JSBin est un éditeur HTML en ligne conçu pour aider ceux qui sont sur le point d'apprendre le développement front-end ou qui l'apprennent actuellement.

Example Tutorial a également lancé un éditeur HTML en ligne, accessible à l'adresse :https://c.example.com/front-end/61

Ci-dessous, nous examinerons le guide d'utilisation de cet outil :

Guide de démarrage rapide

Après avoir ouvert la page, vous verrez l'écran suivant. La barre d'URL esthttp://jsbin.com/, c'est tout, et en dessous se trouvent les panneaux d'édition HTML et JavaScript où vous pouvez saisir du contenu :

image.axdpictureimage_2159

Dès que vous tapez un caractère dans un panneau d'édition, vous remarquerez immédiatement que la « barre d'URL » change. Comme indiqué ci-dessous, la zone 1 est votreBin ID, la zone 2 est lenuméro de révision du Bin(Il commence à 1 par défaut), et la zone 3 est lemode d'affichageactuel, où « edit » représente le mode « Edit ». Par défaut, le HTML / CSS / JavaScript que vous saisissez sera immédiatement reflété dans le panneau Output à l'extrême droite.

Remarque : dansJS BinJS Bin, chaque combinaison de page web front-end (HTML + CSS + JavaScript) est appelée un Bin !

image.axdpictureimage_2160

Bien sûr, tant que vous avez fini de configurer votreBin, vous pouvez directement partager l'URL de votre JS Bin actuel. Très pratique !

Présentation de la barre de navigation

Comme indiqué ci-dessous, voici l'interface principale deJS Binaprès l'entrée, très simple ; en haut, il y a juste une barre de navigation. Ensuite, nous expliquerons en suivant la figure numérotée :

image.axdpictureimage_thumb_181

image.axdpictureimage_thumb_182

image.axdpictureimage_2163

Barre de navigation 1. Menu principal de JS Bin

Vous pouvez créer un nouveauBinà tout moment, cliquez sur l'optionNew.

image.axdpictureimage_2164

Si vous vous êtes inscrit en tant que membre, vous verrez la fonctionnalitéOpen, car tous lesBinBins que vous avez édités sont automatiquement enregistrés, et vous pouvez rouvrir à tout moment ceux que vous avez écrits précédemment.BinsComme indiqué ci-dessous, si vous ne voulez plus voir certains Bins, vous pouvez aussi les définir comme archivés ; par défaut, ils ne seront pas visibles ici, et vous pourrez toujours les récupérer plus tard.

image.axdpictureimage_2165

Comme indiqué ci-dessous, cliquez surVue Archivepour restaurer lesBins précédemment archivés

image.axdpictureimage_2166

La fonctionAjouter une descriptiondu menu principal sert simplement à vous aider à ajouter une balise meta description à votre HTML.

image.axdpictureimage_2167

La fonctionCréer un jalondu menu principal dit simplement à JS Bin : "J'ai terminé un jalon Bin ; veuillez corriger la version actuelle pour moi." Par conséquent, après avoir cliqué sur cette fonction, le "numéro de révision" dans l'URL de JS Bin va automatiquement+1

image.axdpictureimage_2168

La fonctionEnregistrer comme modèledu menu principal consiste à prendre votreBinBin actuel et à l'enregistrer comme modèle, afin que lorsque vous en ajouterez de nouveaux plus tardBinle HTML/CSS/JavaScript par défaut aura leBincontenu que vous avez actuellement défini.

La fonctionClonerdu menu principal ne diffère que légèrement de la précédente : elle ne change pas le numéro de révision, mais utilise plutôt un tout nouveauCréer un jalonne présente qu'une petite différence : elle ne change pas un numéro de révision, mais plutôt un tout nouveauBinID, comme indiqué ci-dessous :

image.axdpictureimage_2169

La fonctionTéléchargerdu menu principal consiste à prendre leBinBin et à le télécharger ; elle fusionnera le HTML/CSS/JavaScript en un seul fichier HTML.

image.axdpictureimage_2170

Barre de navigation 2. Ajouter une bibliothèque (Insérer une bibliothèque)

Ce bouton permet d'insérer facilement certaines ressources externes courantes dans votre HTML, telles que jQuery, jQuery UI, jQuery Mobile, Bootstrap, YUI, AngularJS, Kendo UI, Backbone, Modernizr, etc. C'est un petit outil pratique.

image.axdpictureimage_2171

Barre de navigation 3. Divers panneaux Éditeurs, Console et Aperçu en direct

Panneau de l'éditeur HTML

Ce panneau d'éditeur dispose de la coloration syntaxique. Malheureusement, il n'a pas encore d'IntelliSense ni d'auto-complétion, mais il prend en chargeEmmet ( Zen Coding) méthode d'écriture, qui est vraiment puissante ! Ceux qui ne connaissent pas Zen Coding peuvent se référer à un tutoriel vidéo que j'ai enregistré plus tôt [Bien utiliser les extensions VS2012 - Utiliser ZenCoding pour générer rapidement de la syntaxe HTML (Web Essentials 2012)], qui montre comment utiliser la syntaxe spécialeZen Codingpour écrire rapidement du contenu HTML !

De plus, vous pouvez également basculer entre différents modes de syntaxe, puis cliquer surConvert to HTMLpour convertir automatiquement au format HTML.

image.axdpictureimage_2172

Panneau de l'éditeur CSS

Ceci est très similaire à l'éditeur HTML, et il prend également en charge la syntaxeZen Coding! Vous pouvez aussi utiliser la syntaxe plus efficace LESS ou Stylus pour écrire des styles CSS, puis cliquerConvert to CSSpour convertir automatiquement au format CSS standard.

Remarque : vous pouvez même utiliser JS Bin directement comme unLESSouStylusoutil d'apprentissage !

image.axdpictureimage_2173

Panneau de l'éditeur JavaScript

Ceci est également très similaire aux éditeurs HTML/CSS, prend en charge diverses syntaxes qui aident à écrire efficacement du JavaScript, et prend également en charge TypeScript !

image.axdpictureimage_2174

Panneau de la console

Ce panneau est identique au panneau Console dans les outils de développement de divers navigateurs. Je ne sais pas pourquoi ils en ont aussi fait une version web ; je pense qu'elle n'est pas meilleure que celle intégrée aux navigateurs, donc je ne l'utilise généralement pas.

image.axdpictureimage_2175

Panneau de sortie

L'objectif principal de ce panneau est d'afficher le résultat d'exécution de la combinaison finale HTML/CSS/JavaScript. Par défaut, l'optionAuto-run JSest cochée, ce qui signifie que lorsque vous tapez dans l'éditeur JavaScript, il actualise continuellement la page web dans le panneau de sortie. Parfois, cette option peut faire planter le navigateur. Si vous rencontrez une instabilité du navigateur, il est recommandé de décocher cette option. Après l'avoir cochée, si vous voulez exécuter le JS modifié, vous devez appuyer surRun with JSle bouton pour exécuter réellement la nouvelle version du programme JavaScript.

image.axdpictureimage_2176

La flèche tout à droiteLive previewouvre la page web dans une toute nouvelle fenêtre. À ce stade, vous remarquerez que l'URL est légèrement différente, c'est-à-dire queeditcette partie est manquante, ce qui signifie aussi que vous pouvez partager cette URL avec d'autres, leur permettre de voir le résultat d'exécution de la page, ou interagir plus complètement directement avec les fonctions interactives définies sur la page, sans être affecté par leJS Binpanneau de l'éditeur. Comme le montre la comparaison ci-dessous :

image.axdpictureimage_2177

image.axdpictureimage_2178

Barre de navigation 4. Connexion, inscription, mise à jour du mot de passe du compte membre (aucune information personnelle)

Avec JS Bin, vous pouvez vous inscrire avec succès en saisissant simplement votre Email et votre mot de passe, et il n'y a aucune vérification d'identité. Si vous saisissez un mauvais compte ou mot de passe, ce n'est pas grave ; inscrivez-vous simplement avec un nouveau ! Sur l'écran après connexion, vous pouvez mettre à jour votre Email et votre mot de passe à tout moment. Très ouvert !

image.axdpictureimage_2179

Barre de navigation 5. Fichiers d'aide

Si vous lisez tous les liens ici, vous réaliserez que vous avez été trompé par l'apparence simple de JS Bin ; en fait, il est très riche en fonctionnalités !

image.axdpictureimage_2180

Barre de navigation 6. Partager

Lorsque votreBinBin a fini d'être modifié, vous pouvez le partager de nombreuses façons. Ce menu de la fonction Share propose quelques fonctionnalités :

Verrouiller la révision #1 contre d'autres modifications signifie que vous souhaitez verrouiller la version #1 actuelle (c'est-à-dire celle dans la barre d'adresse1partie). Cette fonction est exactement la même que celle du menu principal de JS BinCréer un jalonfonction.

image.axdpictureimage_2181

Après avoir saisi l'URL fournie par Live & Full Preview, vous obtenez une page web sans panneaux d'éditeur, ce qui est moins distrayant lorsque vous testez certaines fonctionnalités. Cependant, un bouton flottant « Modifier dans JS Bin » apparaît toujours dans le coin supérieur droit de la page, ce qui vous permet d'entrer dans le panneau d'éditeur à tout moment.

image.axdpictureimage_2182

La vue Code est l'écran où nous éditons.

Embed n'intègre pas seulement un lien hypertexte, mais charge également un fichier JavaScript à la fin, ce qui convertit directement le lien hypertexte en une page complexe, comme illustré ci-dessous :

image.axdpictureimage_2183

Après avoir placé cette chaîne dans une page web, le résultat affiché est le suivant :

image.axdpictureimage_2184

Le dernier, Codecast, est une fonctionnalité de « diffusion ». Vous pouvez partager l'URL avec d'autres personnes et leur demander d'ouvrir la page. Ensuite, vous pouvez continuer à modifier n'importe quel contenu de ce Bin, et le navigateur de l'autre personne affichera le même contenu que celui que vous voyez. C'est pourquoi on l'appelle une fonctionnalité de « diffusion ». Elle est très adaptée à l'enseignement en ligne ou à l'apprentissage à distance !

§ Partagez quelques astuces pour utiliser JS Bin

1. Activer l'affichage des numéros de ligne

C'est une astuce non documentée. Double-cliquez simplement rapidement sur le titre du panneau d'éditeur avec la souris pour activer l'affichage des numéros de ligne. Double-cliquez à nouveau pour le désactiver. Très pratique.

image.axdpictureimage_2185

image.axdpictureimage_2186

2. La méthode deBinpour personnaliser l'ID

C'est une autre astuce non documentée. La plupart des gens pensent que JS Bin ne peut pas personnaliser l'URL, mais c'est en fait possible. La méthode est la suivante :

Ne vous préoccupez pas de l'URL actuelle pour l'instant. Tapez simplement celui personnalisé que vous souhaitez directement dans la barre d'adresseBin ID, comme illustré ci-dessous :

image.axdpictureimage_2187

Après avoir appuyé sur Entrée, un tout nouveau Bin est automatiquement généré, et ceBin IDvous appartient désormais ! (^_^)

image.axdpictureimage_2188

3. ContrôlerBinles panneaux par défaut de l'écran d'édition

Lorsque vous voulez accéder à l'écran d'édition d'un certain Bin, selon les paramètres JS Bin de chaque personne, les 5 panneaux par défaut qui s'ouvrent seront différents. Si vous voulez partager un Bin avec quelqu'un aujourd'hui, et que vous voulez que l'autre personne n'ait que les panneaux HTML et JavaScript ouverts par défaut, vous pouvez simplement modifier légèrement l'URL. Par exemple, l'URL du Bin suivante :

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

Nous pouvons modifier l'URL comme suit (ajouter une chaîne de requête à la fin de l'URL et les séparer par des virgules), puis envoyer cette URL à l'autre personne. L'autre personne ouvrira les panneaux HTML et JavaScript comme vous le souhaitiez :

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

Les noms des paramètres correspondant à ces cinq panneaux sont les suivants :

  • htmlÉditeur HTML
  • cssÉditeur CSS
  • javascriptÉditeur JavaScript
  • consoleConsole
  • livePanneau d'aperçu en direct

4. Activer la mise en évidence des accolades correspondantes en JavaScript

Étant donné que JS Bin utilise le paquetCodeMirrorcomme éditeur JavaScript (celui-ci est vraiment puissant), si vous voulez personnaliser l'éditeur JavaScript, c'est possible. Il suffit de consulterla documentation de l'API de CodeMirroret c'est terminé. Ici, je vais vous présenter un réglage d'option intéressant, qui consiste à activer la mise en évidence des accolades correspondantes en JavaScript.

Prenons ce Bin comme exemple :http://jsbin.com/oyuyev/1/edit

image.axdpictureimage_2189

Nous devons exécuter la commande suivante dans l'onglet Console des outils de développement du navigateur. Ouvrez les outils de développement intégrés du navigateur (IE8+, Chrome, Firefox, Safari disposent tous de tels outils), passez à l'onglet Console, puis saisissez :

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

image.axdpictureimage_2190

Appuyez ensuite sur F5 (rafraîchissez la page web), déplacez le curseur du clavier sur l'accolade correspondante, et vous verrez la mise en évidence :

image.axdpictureimage_2191

5. Réinitialiser l'environnement de développement JS Bin

Dans cette version de JS Bin, si vous exécutez la fonctionSave as templatedu menu principal, malheureusement vous ne pouvez pas revenir en arrière ! Cela signifie que vous ne pouvez pas restaurer le modèle HTML par défaut intégré au site. De plus, si vous avez ajusté trop de paramètres dans l'éditeur et qu'il ne peut plus être utilisé normalement, vous pouvez en fait réinitialiser l'environnement de développement JS Bin. À ce stade, vous pouvez utiliser l'astuce suivante.

Remarque : c'est aussi une astuce non documentée. J'ai passé plusieurs heures à faire des recherches pour trouver celle-ci !

Ouvrez les outils de développement intégrés du navigateur (IE8+, Chrome, Firefox, Safari disposent tous de tels outils), passez à l'onglet Console, puis saisissezdelete jsbin.settingset appuyez sur Entrée pour exécuter. Une fois exécuté avec succès, tous les paramètres seront réinitialisés.

delete jsbin.settings

Cependant, le contenu des modèles html / css / javascript doit aussi être effacé, car JS Bin stocke ces modèles dans le localStorage du navigateur (il s'agit d'un mécanisme de stockage en HTML5). À ce stade, vous devez aussi saisirlocalStorage.clear()pour effacer complètement les données restantes.

localStorage.clear()

L'écran après exécution est affiché ci-dessous. Après exécution, appuyez sur F5 (rafraîchir) pour revenir aux valeurs par défaut d'origine !

image.axdpictureimage_2192

6. Ne sortir que le contenu JavaScript (afin qu'un autre Bin puisse le charger via AJAX)

Nous prenonshttp://jsbin.com/ json-test /1/ editcomme exemple. J'ai saisi unJavaScript JSON pur. Vous pouvez également voir plusieursJSHintmessages d'avertissement ici, mais nous n'avons pas besoin de nous en préoccuper pour le moment.

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

Remarque : les chaînes dans JSON doivent être encadrées par des guillemets doubles !

image.axdpictureimage_2193

À ce stade, nous créons un autre nouveau Bin et ajoutons la bibliothèque jQueryBin(Remarque : comme le contenu HTML a été modifié, il recevra immédiatement un

image.axdpictureimage_2194

ID, générant une toute nouvelle URL)/editÀ ce stade, nous modifions légèrement l'URL que nous venions d'avoir, en changeant.jsen

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

pour obtenir uniquement la partie JavaScript, comme suit :

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

Ensuite, saisissez le code jQuery suivant pour tester la fonctionnalité AJAX de jQuery :

image.axdpictureimage_2195