COP3530- Data Structures JSFiddle Dr. Ron Eaglin
Objectives What is JSFiddle? Why use JSFiddle? Writing HTML, JavaScript, Document Saving your Fiddle Versions Fiddle Options
What is JSFiddle? Online programming and sharing tool for JavaScript programming HTML Window CSS Window JavaScript Window Document Window
Why use JSFiddle? Accessible for all students (no installation or compiler) Easy to see and assist with code Well known and used tool for JavaScript programming All features necessary for full programming Easy to see and grade assignments
Using JSFiddle JavaScript options Recommend Load Type No Wrap in <body>
Using JSFiddle
Running Code Make changes to code Click Run Button See results of changes
Running Code
Save Code Save – Creates new number version Save – If logged in – can access Fiddle from Dashboard
Toolbar Creates new version Assigns version number Makes current version base version No version number https://jsfiddle.net/reaglin/2bLfwo7a/1/ https://jsfiddle.net/reaglin/2bLfwo7a/
Fork Code Creates new version of Fiddle with different ID Can start with Fiddle from other user Will create a version in your JSFiddle account Useful for working with starter code
JSFiddle Tools Tidy - Cleans up spacing and indentation Embed – Options for embedding code into a web page Collaborate – Adds communication tools Title – Easier if saving to dashboard (makes fiddle public) External Resources – Adds JavaScript library references (Jquery)
Method 1. Write Code 2. Test Code with Run Options 3. If code is good – Save/Update your code When you are at good version “Set As Base” Submit version that is base, if changes needed – make changes and set as base again
Objectives What is JSFiddle? Why use JSFiddle? Writing HTML, JavaScript, Document Saving your Fiddle Versions Fiddle Options