Getting Started with JSFiddle (Learn JSFiddle)

Introduction to JSFiddle

JSFiddle provides the real-time free code ground for HTML, CSS, and JavaScript Code. JSFiddle also provides a wide range of other features, i.e. you can share your code with others, you can fork your Fiddle in a new Fiddle. You can also embed your code in another code. JSFiddle is a powerful cloud-based service.

codepen.io is also an alternate of JSFiddle.

Supported Frameworks

JSFiddle supports a wide range of JavaScript based frameworks and extensions which include jQuery, Mootools, Prototype, YUI, DOJO, Processing.js, ExtJS, Raphael, RightJS, Three.js, Zepto, Enyo, Shipyard, Knockout.js, The X Toolkit Edge, AngularJS, EmberJS, Underscore, Bonsai, KineticJS, FabricJS, qooxdoo, D3. CreatJS, WebApp Install, Thorax, Paper.js, React, svg, Minified, jTypes, Lo-Dash, Brick, ReactiveJS, Vue, JSBlocks, OpenUI5, MiThrilJS and Pixi with plain HTML and CSS.

Getting Started

When you open JSFiddle Official Website, it will display a screen with four portions namely HTML, CSS, JavaScript, and Result.

JSFiddle Home Screen Portions
JSFiddle Home Screen Portions

 

Understanding Editor

Use HTML portion to place the HTML code of your script excluding HTML tags and the doctype, as you can set it by the settings button beside HTML.

CSS Part contains the stylesheet properties for the HTML.

Place JavaScript Code in the JAVASCRIPT section.

The RESULT Section will display the output when you run the code.

JSFiddle Editor Distribution
JSFiddle Editor Distribution

 

Understanding Top Bar

The top bar of JSFiddle contains the main features to manage and execute the code.

JSFiddle Top Bar
JSFiddle Top Bar

Run button executes the code and displays the output in the RESULT Section.

Fork creates a new example keeping the current code as the base for new example.

Tidy button cleans up your JavaScript code area by introducing proper indentations.

Collaborate allows sharing the code by automatically creating a share link.

Set as base sets the current fiddle as the base version for the other fiddles.

JSFiddle Keeps on showing the Save button until the fiddle is not saved. When the fiddle is saved the Save button changes to Update button.

 

Left panel allows setting the name of the fiddle with other meta description, you can also add External Resources and AJAX requests. 

JSFiddle Example

Previously we have discussed AngularJS with its examples. So to understand JSFiddle, Consider the previous example of AngularJS expressions. with this example, you will also understand how to use JavaScript frameworks in JSFiddle.

Simple AngularJS Hello World Example

Complete AngularJS Hello World Code

If you run the code with default options, it will never execute until you set the JavaScript Framework from JAVASCRIPT settings drop down menu.

Set Framework to AngularJS in JSFiddle
Set Framework to AngularJS in JSFiddle

If the JavaScript code belongs to HTML body, you must set LOAD TYPE to No Wrap – in <body> from JavaScript Settings.

To learn more about JSFiddle, click here.

Hope that you like this tutorial. Stay tuned for more upcoming tutorials. Stay Blessed!

6 thoughts on “Getting Started with JSFiddle (Learn JSFiddle)

      1. Thank you for your rapid reply. My hope is to become an expert in HTML5 – front, JSF MVC – back and PL/SQL with managed bean database.

        What I have discovered is Eclipse can be run from a USB on any computer, but I wanted to have a local server (tomcat) but have not been successful at getting tomcat to run portable.

        I have seen XAMPP and other posts that say Tomcat can be installed on a USB and run with Eclipse as portable.

        Have you every tried or accomplished such?

        1. Browse Java Category of this website. It might help you in Getting Started with JSF. One of my friend is working on Java. I will ask him to guide you as soon as he get some time.

          1. REALLY !

            WOW!

            Thank YOU! Everything I can discover from those with experience — is greatly appreciated.

Leave a Reply

Your email address will not be published. Required fields are marked *