An excellent online editor: JsBin [use tutorial]

Official web site

http://jsbin.com/

Tool use

You can use the online environment provided by JS Bin, edit the Web directly online, to share, test and detect all kinds of "front-end technology," and even use it as a teaching or asking tool, as long as the front-end issues (HTML5, CSS3, JavaScript) are very suitable for first put here, And then through a unique JS Bin Web site to share out.

Get started with quick access

After you've just logged in, the preset will see the following screen, which is jsbin.com , and the HTML and JavaScript editor panes below let you enter the content:

As soon as you enter any of the characters in any editor pane , you will immediately notice that the "site" has changed, as shown in the following figure, where the number 1 is your bin ID, and the number 2 is in this bin. Version No. (The preset starts from 1), the 3 is the current display mode , and edit represents the "edit" mode. In the case of a preset, the html/css/javascript you enter will immediately be reflected to the right-most Output pane.

Note: in JS Bin , each front-end Web combination (HTML + CSS + JavaScript) is called a bin !

Of course, as long as you set this bin to complete, you can directly to the JS Bin Web site to share out, very convenient!

Introduction to the Navigation list

The following image is the main layout of JS Bin , very simple, the top is a navigation column, then the following will be solved according to the figure:

navigation column 1. JS Bin Main Select

You can re-create a Binat any moment and click on the New option.

If you have a registered member, you will see the Open function, because as long as you edit the Bin will be stored automatically, you can re-start the Bins. As shown below, if you do not want to see a specific Bins, you can also set a hold, and the preset will not be seen here, and it can be re-identified after the day.

As shown below, click Archive View to save the previously sealed Bins

The Add Description feature of the main menu just helps you add description This meta tag in HTML

The main selection of the Create milestone function, just to tell JS Bin said: " I have completed a Bin milestone, please help me to the current version of the fixed." "So, after clicking on this function, the" version number "on the JS Bin Web site will be self- +1

The Save As template function of the main menu is to save your current bin as a range, so that when you add a bin in the future, the Html/css/javascript will have your current set of Bin content.

The Clone function of the main menu, with just a little deserted of the Create milestone feature, is that he is not switching to a version number, but rather a brand new Bin ID, as shown below:

The Download function of the main menu is to download the Bin , and he will merge the Html/css/javascript into an HTML file.

navigation column 2. ADD Library Insert Function repository

This button makes it easy to insert some common external resources for your HTML, such as jquery, jquery UI, jquery Mobile, Bootstrap, YUI, AngularJS, Kendo UI, Backbone, MODERNIZR, ...... Wait, it's a handy gadget.

navigation column 3. All kinds of editors, consoles and instant preview panes (Panel)

HTML Editor Pane

This editor pane has a high level of language, and it is a pity that there is no Intellisense or auto-complete function, but there is support for Emmet (Zen Coding) to write a method, very good! Anyone who doesn't know Zen Coding can take a look at one of my previous videos, "Using the VS2012 Extensions Kit-use zencoding to quickly produce HTML (Web Essentials 2012)", which shows how to use a special Zen codi Ng language quickly writes HTML content!

In addition, you can also switch to different writing methods, and then choose Convert to HTML and convert to HTML automatically.

CSS Editor Pane

This is much like the HTML editor, and it supports Zen Coding language! You can also use the more efficient less or Stylus language method to write CSS style, the last thing to choose Convert to CSS can be automatically converted into standard CSS format.

Note: You can even take JS Bin as less or Stylus learning tool!

JavaScript Editor Pane

This is also very similar to the HTML/CSS editor, and it also supports a number of languages that help to write JavaScript efficiently and support TypeScript.

Console console Pane

This pane is the same as the Console pane in the developer tools for each browser, and I don't know why they have to get one more web version, and I don't think it works better than the browser, so most of them don't.

Output Input Pane

The main purpose of this pane is to output the final html/css/javascript combination of the results, in the case of theauto-run JS option is selected, on behalf of you in the JavaScript editor when typing, he will constantly re-organize out Put pane of the Web, sometimes this option will cause the browser to be dropped, if you have encountered the browser is not stable, the suggestion to uncheck this item. After the tick, if you want to execute the modified JS, you will have to press the Run with JS button to actually perform the new version of the JavaScript program.

The right side of the Live preview arrow is to open the Web to a new window, and you will find that the Web site is a little bit different, that is, the edit part is not seen, also means that you can share this web site to others, Let the party look at the results of the Web page, or directly with the Web settings of the interactive function of the more complete interaction, not affected by the JS Bin editing pane. Compare the following graphs:

navigation column 4. Login, register, update member account password (no personal information)

JS Bin as long as the input Email and Password can register a successful, do not have to verify the identity, if the wrong account, password is not related, re-register a new group is! Login to the screen, Email and Password anytime you want to update on the update, very open!

navigation column 5. Help files

Every link here you read, you will know that you are the JS Bin a simple appearance to deceive, and its contents are very rich!

navigation column 6. Share Share

When your Bin Editor is complete, you can share it in a number of ways, with features in this Share feature list:

Lock revision #1 from further changes for you to lock the current #1 this version (that is, the 1 part of the Web site), this feature with the JS Bin main Menu Create mile Stone functions like a deal.

The web address provided by Live & Full Preview is a Web page that does not contain the Editor pane, and it is not disturbed to experiment with certain features. In the top right corner of the Web, you will also find a floating Edit in JS Bin button, which can be entered in the Edit pane at any time.

Code View is the screen we edit.

Embed not only embeds a hyperlink, but eventually loads a JavaScript file, and he turns the hyperlink directly into a complex page, as shown in the following illustration: "

After putting this string in the Web, the following illustration shows:

The last codecast is a "broadcast" function, you can share the site to other people, please open the Web page, then you can continue to modify any content of this Bin, the browser will see the same content with you, so it is called as "" "." " Broadcast "function, very suitable for online teaching or distance learning use!

§ Share a few tips for using JS Bin

1. The activation line is displayed

This is a no-file secret, directly in the Editor pane of the title with the mouse quickly two (Double Click), you can activate the line is displayed, at the next two will be closed, very convenient.

2. How to customize Bin ID

This is another no file of secret technology, most people think that JS Bin does not have to customize the site, in fact, can be Oh, the method is as follows:

Don't worry about what the current website is, directly enter the Bin IDyou want to customize in the Web address, as shown below:

After you press Enter, a new bin is generated, and this bin ID belongs to you! (^_^)

3. Control the Presets pane of the Bin editing screen

When you want to enter a bin editing screen, depending on the JS bin of different people, the preset will open the 5 large panes are not quite the same. If you want to share a bin to the opposite party today, and you want to have the HTML and JavaScript panes open only, you can modify the site a little bit, such as the following Bin Web address:

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

We can modify the Web address like this (by adding Query String to the end of the web and separating it with a number), and then sending the site to the opposite side, and then opening the HTML and JavaScript panes as you mean:

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

The five large panes represent the following names:

• HTML HTML Editor
• CSS CSS Editor
• JavaScript JavaScript Editor
• Console Main console
• Live Instant preview pane

4. Activate the parentheses of JavaScript to highlight

Because JS Bin uses the Codemirror kit as a JavaScript editor (this set of super-strong), so if you want to customized the JavaScript editor is possible, just refer to the Codemirror API file. Here I introduce an optional setting, which is the parentheses highlighting feature that is used to activate JavaScript.

Let's take this Bin for example: Http://jsbin.com/oyuyev/1/edit

We have to perform the following instructions on the console (console) page of the browser developer tool, please open the browser's developer tools (ie8+, Chrome, Firefox, Safari all have these tools), and switch to console or main Console page, then enter:

True

After you press F5 (rearrange the web), and move the keyboard cursor to the same large area, you will see a highlight:

5. Reset JS Bin to the environment

At present, this version of JS Bin if you perform the main selection of the Save as template function, unfortunately you will not go back! It means you can't go back to the Web site to create a preset HTML board. And if you've tweaked too many settings for the editor, and you can actually reset the JS Bin to the environment, you can use the following tips when you're ready to use it.

Note: This is a secret technique without files, which I have studied for several hours before good grasp.

Open the browser's developer tools (ie8+, Chrome, Firefox, Safari) and switch to the console or console page, and then enter the delete Jsbin.sett (. Ings and press Enter to perform a successful setup to re-set all settings.

Delete Jsbin.settings

But there is also HTML / CSS / javascript templates to erase, because JS Bin stored these templates in the localstorage of the browser (This is a storage system for HTML5), and it is also necessary to enter Localstorage.clear () in order to clean up the remaining information thoroughly.

Localstorage.clear ()

Perform the completed screen as follows, after the completion of the press F5 (re-organize) can return to the original preset value!

6. Only output JavaScript content (so that another Bin through the AJAX loading)

We take http://jsbin.com/json-test/1/edit As an example, I input a pure JSON JavaScript, you can also see from this side of several Jshint's warning message, but we don't have to talk to him first.

{

  "Would",

  "ASP. NET MVC 4 launched the war"

}

Note : Strings in JSON must be enclosed in a "double- quote "!

This time we build another new Bin and add the JQuery function library
(Note: This is because the HTML content is changed so that it is immediately assigned a Bin ID, which creates a new web address)

At this point, we changed the site slightly, and changed the /edit to . js to get the parts of JavaScript, as follows:

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

Then enter the following jquery program and try out the AJAX features of jquery:

$.ajax ({

  ' Http://jsbin.com/json-test/1.js ',

  ' JSON ',

  function (data) {

    '-' + data.bookname);

  }

});

If you can see the picture with me, it means that what we get through $.ajax is a JSON object!

An excellent online editor: JsBin [use tutorial]