beginner.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
  1. <!DOCTYPE html>
  2. <!-- saved from url=(0031)http://www.taffydb.com/beginner -->
  3. <html lang="en" class="gr__taffydb_com"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <title>TaffyDB - Beginner's Guide</title>
  5. <meta name="description" content="">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="description" content="">
  8. <meta name="author" content="">
  9. <script id="twitter-wjs" src="./index_files/widgets.js.download"></script><script type="text/javascript" async="" src="./index_files/ga.js.download"></script><script type="text/javascript" src="./index_files/XRegExp.js.download"></script> <!-- XRegExp is bundled with the final shCore.js during build -->
  10. <script type="text/javascript" src="./index_files/shCore.js.download"></script>
  11. <script type="text/javascript" src="./index_files/shBrushJScript.js.download"></script>
  12. <link type="text/css" rel="stylesheet" href="./index_files/shCore.css">
  13. <link type="text/css" rel="Stylesheet" href="./index_files/shThemeDefault.css">
  14. <script type="text/javascript">SyntaxHighlighter.all();</script>
  15. <!-- Le styles -->
  16. <link href="./index_files/bootstrap.css" rel="stylesheet">
  17. <style type="text/css">
  18. body {
  19. padding-top: 60px;
  20. padding-bottom: 40px;
  21. }
  22. .sidebar-nav {
  23. padding: 9px 0;
  24. }
  25. .toolbar {
  26. opacity:0;
  27. }
  28. .method {
  29. }
  30. .method td {
  31. border-bottom:thin solid silver;
  32. border-top:thin solid silver;
  33. vertical-align:text-top;
  34. }
  35. .method td:first-child {
  36. color:gray;
  37. background-color:#F2EDEF;
  38. font-size:160%;
  39. text-align:center;
  40. vertical-align:middle;
  41. }
  42. b {
  43. background-color:#F2EDEF;
  44. }
  45. </style>
  46. <link href="./index_files/bootstrap-responsive.css" rel="stylesheet">
  47. <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
  48. <!--[if lt IE 9]>
  49. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  50. <![endif]-->
  51. <!-- Le fav and touch icons -->
  52. <link rel="shortcut icon" href="http://www.taffydb.com/ico/favicon.ico">
  53. <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://www.taffydb.com/ico/apple-touch-icon-144-precomposed.png">
  54. <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.taffydb.com/ico/apple-touch-icon-114-precomposed.png">
  55. <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.taffydb.com/ico/apple-touch-icon-72-precomposed.png">
  56. <link rel="apple-touch-icon-precomposed" href="http://www.taffydb.com/ico/apple-touch-icon-57-precomposed.png">
  57. <script type="text/javascript">
  58. var _gaq = _gaq || [];
  59. _gaq.push(['_setAccount', 'UA-130587-11']);
  60. _gaq.push(['_trackPageview']);
  61. (function() {
  62. var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  63. ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  64. var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  65. })();
  66. </script>
  67. <script type="text/javascript" charset="utf-8" async="" src="./index_files/timeline.619317855a58aa2366562a395f9e40ef.js.download"></script></head>
  68. <body data-gr-c-s-loaded="true">
  69. <div class="navbar navbar-fixed-top">
  70. <div class="navbar-inner">
  71. <div class="container-fluid">
  72. <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
  73. <span class="icon-bar"></span>
  74. <span class="icon-bar"></span>
  75. <span class="icon-bar"></span>
  76. </a>
  77. <a class="brand" href="/">TaffyDB</a>
  78. <div class="pull-right">
  79. <a class="btn" href="https://github.com/typicaljoe/taffydb">
  80. taffy.js
  81. </a>
  82. </div>
  83. <div class="nav-collapse">
  84. <ul class="nav">
  85. <li><a href="/">Home</a></li>
  86. <li><a href="https://github.com/typicaljoe/taffydb/archive/master.zip">Download</a></li>
  87. <li class="active"><a href="/beginner.html">Beginner's Guide</a></li>
  88. <li><a href="/writing_queries.html">Writing Queries</a></li>
  89. <li><a href="/working_with_data.html">Working With Data</a></li>
  90. <li><a href="extentions.html">Extensions</a></li>
  91. </ul>
  92. </div><!--/.nav-collapse -->
  93. </div>
  94. </div>
  95. </div>
  96. <div class="container-fluid">
  97. <div class="row-fluid">
  98. <div class="span3">
  99. <div class="well sidebar-nav">
  100. <ul class="nav nav-list">
  101. <li class="nav-header">On Github</li>
  102. <li><a href="https://github.com/typicaljoe/taffydb">GitHub Home</a></li>
  103. <li><a href="https://github.com/typicaljoe/taffydb/archive/master.zip">Download</a></li>
  104. <li><a href="https://github.com/typicaljoe/taffydb/blob/master/taffy.js">Source Code</a></li>
  105. <form id="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
  106. <input type="hidden" name="cmd" value="_s-xclick">
  107. <input type="hidden" name="hosted_button_id" value="ENS2E6Z99PDZN">
  108. </form>
  109. <li class="nav-header">Community and Support</li>
  110. <li><a href="https://github.com/typicaljoe/taffydb/issues?state=open">Open Issues</a></li>
  111. <li><a href="#" onclick="document.getElementById('paypal').submit()">Donate</a>
  112. </li>
  113. <li class="nav-header">Created by</li>
  114. <iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 520px; height: 600px; padding: 0px; border: none; max-width: 100%; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px;" data-widget-id="249607754170368000" title="Twitter Timeline" src="./index_files/saved_resource.html"></iframe>
  115. <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  116. </ul>
  117. </div><!--/.well -->
  118. </div><!--/span-->
  119. <div class="span9">
  120. <div class="hero-unit">
  121. <h1>Beginner's Guide</h1>
  122. <p>TaffyDB is very easy to get started with. This brief turtoial will introduce you to a few of the core concepts and should be enough to get started even if you aren't already a web developer.</p>
  123. <h3>Step 1: Creating a quick sandbox</h3>
  124. <p>It is recmmended that you download and use your own copy of TaffyDB, but for the purposes of playing around you can use the latest version right off of GitHub. If you have never created a web page before you can simply create a text document, include the code below, and save it to your desktop as test.html.</p>
  125. <pre>&lt;html&gt;
  126. &lt;head&gt;
  127. &lt;script src="https://github.com/typicaljoe/taffydb/raw/master/taffy.js"&gt;&lt;/script&gt;
  128. &lt;/head&gt;
  129. &lt;body&gt;
  130. &lt;/body&gt;
  131. &lt;/html&gt;</pre>
  132. <p>The script tag imports TaffyDB right onto the page.</p>
  133. <h3>Step 2: Your First DB</h3>
  134. <p>Let's create a DB to store some city information. You'll need another script tag and you'll be writing JavaScript.</p>
  135. <pre>&lt;html&gt;
  136. &lt;head&gt;
  137. &lt;script src="https://github.com/typicaljoe/taffydb/raw/master/taffy.js"&gt;&lt;/script&gt;
  138. &lt;script&gt;
  139. var cities = TAFFY();
  140. &lt;/script&gt;
  141. &lt;/head&gt;
  142. &lt;body&gt;
  143. &lt;/body&gt;
  144. &lt;/html&gt;</pre>
  145. <h3>Step 3: Adding records</h3>
  146. <p>You can add records on creation and via the .insert() method. Below we are doing both.</p>
  147. <pre>&lt;html&gt;
  148. &lt;head&gt;
  149. &lt;script src="https://github.com/typicaljoe/taffydb/raw/master/taffy.js"&gt;&lt;/script&gt;
  150. &lt;script&gt;
  151. var cities = TAFFY([{name:"New York",state:"WA"},{name:"Las Vegas",state:"NV"},{name:"Boston",state:"MA"}]);
  152. cities.insert({name:"Portland",state:"OR"});
  153. &lt;/script&gt;
  154. &lt;/head&gt;
  155. &lt;body&gt;
  156. &lt;/body&gt;
  157. &lt;/html&gt;</pre>
  158. <h3>Step 4: Your first query</h3>
  159. <p>Our city db is itself a function that accepts a filter object (an object that will be matched to records). Let's query for Boston. We will alert the .count() method to see our results.</p>
  160. <pre>&lt;html&gt;
  161. &lt;head&gt;
  162. &lt;script src="https://github.com/typicaljoe/taffydb/raw/master/taffy.js"&gt;&lt;/script&gt;
  163. &lt;script&gt;
  164. var cities = TAFFY([{name:"New York",state:"WA"},{name:"Las Vegas",state:"NV"},{name:"Boston",state:"MA"}]);
  165. cities.insert({name:"Portland",state:"OR"});
  166. alert(cities({name:"Boston"}).count());
  167. &lt;/script&gt;
  168. &lt;/head&gt;
  169. &lt;body&gt;
  170. &lt;/body&gt;
  171. &lt;/html&gt;</pre>
  172. <h3>Step 5: Chaining methods</h3>
  173. <p>You can chain together. Below we will get the first two records from the DB and use the .each() method to alert their names.</p>
  174. <pre>&lt;html&gt;
  175. &lt;head&gt;
  176. &lt;script src="https://github.com/typicaljoe/taffydb/raw/master/taffy.js"&gt;&lt;/script&gt;
  177. &lt;script&gt;
  178. var cities = TAFFY([{name:"New York",state:"WA"},{name:"Las Vegas",state:"NV"},{name:"Boston",state:"MA"}]);
  179. cities.insert({name:"Portland",state:"OR"});
  180. cities().limit(2).each(function (r) {alert(r.name)});
  181. &lt;/script&gt;
  182. &lt;/head&gt;
  183. &lt;body&gt;
  184. &lt;/body&gt;
  185. &lt;/html&gt;</pre>
  186. <h3>Step 6: Updating data</h3>
  187. <p>You may have noticed that New York is in the wrong state. Let's fix that and alert the new state. </p>
  188. <pre>&lt;html&gt;
  189. &lt;head&gt;
  190. &lt;script src="https://github.com/typicaljoe/taffydb/raw/master/taffy.js"&gt;&lt;/script&gt;
  191. &lt;script&gt;
  192. var cities = TAFFY([{name:"New York",state:"WA"},{name:"Las Vegas",state:"NV"},{name:"Boston",state:"MA"}]);
  193. cities.insert({name:"Portland",state:"OR"});
  194. cities({name:"New York"}).update({state:"NY"});
  195. alert(cities({name:"New York"}).first().state);
  196. &lt;/script&gt;
  197. &lt;/head&gt;
  198. &lt;body&gt;
  199. &lt;/body&gt;
  200. &lt;/html&gt;</pre>
  201. <h3>Step 7: Sorting</h3>
  202. <p>Sorting is a big part of TaffyDB using the .order() method.</p>
  203. <pre>&lt;html&gt;
  204. &lt;head&gt;
  205. &lt;script src="https://github.com/typicaljoe/taffydb/raw/master/taffy.js"&gt;&lt;/script&gt;
  206. &lt;script&gt;
  207. var cities = TAFFY([{name:"New York",state:"WA"},{name:"Las Vegas",state:"NV"},{name:"Boston",state:"MA"}]);
  208. cities.insert({name:"Portland",state:"OR"});
  209. alert(cities().order("name").first().name);
  210. &lt;/script&gt;
  211. &lt;/head&gt;
  212. &lt;body&gt;
  213. &lt;/body&gt;
  214. &lt;/html&gt;</pre>
  215. <h3>What's next</h3>
  216. <p>There are a lot of other methods you can use against your data. Some highlights include .remove() to delete records, .get() to get an array of records, and .supplant to merge records with a string template. Continue to browse the docs for more ways to use TaffyDB.</p>
  217. </div>
  218. <footer>
  219. </footer>
  220. </div><!--/span-->
  221. </div><!--/row-->
  222. <hr>
  223. <footer>
  224. <div align="center"><img src="./index_files/taffydbboxV3.jpg"></div>
  225. </footer>
  226. </div><!--/.fluid-container-->
  227. <!-- Le javascript
  228. ================================================== -->
  229. <!-- Placed at the end of the document so the pages load faster -->
  230. <script src="./index_files/jquery.js.download"></script>
  231. <script src="./index_files/bootstrap-transition.js.download"></script>
  232. <script src="./index_files/bootstrap-alert.js.download"></script>
  233. <script src="./index_files/bootstrap-modal.js.download"></script>
  234. <script src="./index_files/bootstrap-dropdown.js.download"></script>
  235. <script src="./index_files/bootstrap-scrollspy.js.download"></script>
  236. <script src="./index_files/bootstrap-tab.js.download"></script>
  237. <script src="./index_files/bootstrap-tooltip.js.download"></script>
  238. <script src="./index_files/bootstrap-popover.js.download"></script>
  239. <script src="./index_files/bootstrap-button.js.download"></script>
  240. <script src="./index_files/bootstrap-collapse.js.download"></script>
  241. <script src="./index_files/bootstrap-carousel.js.download"></script>
  242. <script src="./index_files/bootstrap-typeahead.js.download"></script>
  243. <iframe id="rufous-sandbox" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" style="position: absolute; visibility: hidden; display: none; width: 0px; height: 0px; padding: 0px; border: none;" title="Twitter analytics iframe" src="./index_files/saved_resource(1).html"></iframe></body></html>