Learning jQuery

In this post, you will see 3 different website which provides web playground to write and test your jQuery code online. The advantage of using these online playground is that one can use it as an online editor for snippets build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog.

• jsFiddle

The first website is "jsFiddle", which provides an online environment where anyone can test his code against many Javascript frameworks like jQuery, MooTools, Dojo, Prototype and many more.. The one very important feature of this website is as and when new version of any library is released, it is available on jsFiddle.

As you can see from the above screenshot, the website is divided into 5 parts. On the very left, you need to select your framework and its version as well. Suppose, you want to test your code against jQuery then select jQuery and its related version. You are also allowed to test jQuery UI. If you also want to add any external javascript or css, then you can also add its URL under "Add Resoruce" Tab.

Other parts of the interface are HTML editor, CSS editor, Script editor and your output. As the name suggest, Put all your HTML code in HTML editor, CSS code in CSS editor and Javascript/jQuery code in Script editor. Output section is used to see the output.

Write your code and hit run button on the top. And you will see the output in output section. You can also save your code (Save button). Once you save the code, then copy the URL and use it for future reference. It also maintains version.

Features:

• Inbuilt mechanism to reference any of the javascript library
• Supports of latest and previous version of libraries
• Maintains different versions
• Support of Tidy up which arranges your messy code
• Support of jsLint, (Javascript code quality tool)
• Allows to share the page with social media websites.
• Support to mark the first version as base version.

I use this website to make demo for my post to share with my you guys. There are many features which you can explore. So what are waiting for? Start using jsFiddle.

• Google Code PlayGround

Next is Google Code PlayGround developed by Google to write and test not only jQuery but one can also write and test against the APIs provides by various Google services like Google Maps, YouTube, Google Earth and many more...

As you can see from the screenshot, website interface is divided into 3 parts.

1. First part to select libraries. There are various libraries available.
2. Second to write your HTML, CSS and Script.
3. Third is Output section.

• jsbin

jsBin is another cool website to fulfill your purpose. Before jsFiddle, I used this website a lot to create demos for my blog post. Like jsFiddle, this website also provides separate section for HTML, Script and Real Time Preview.

jsBin also provide 2 different views "Code" and "Render". When you click on Render view, you will see the output section in complete page which is sometimes very useful as the Real Time Preview section is small and it sometimes may not be useful to see the complete output.

One disadvantage with this website is, it does not provide an inbuilt mechanism to select any library. You need to reference it from any of the CDN. Read "Why to use Google hosted jQuery CDN".

I have create a sample demo using jsBin. Visit http://jsbin.com/aracuf/edit
Like jsFiddle, jsBin also maintains different version. See URL http://jsbin.com/aracuf/2/edit#source

Visit here to find out all the features of jsBin.

Personally, I prefer jsFiddle due to its wide range of features. So what are you waiting for. Just play with these sites and start using them regularly for your jQuery code.

Feel free to contact me for any help related to jQuery, I will gladly help you.