{"id":119,"date":"2008-07-20T23:47:56","date_gmt":"2008-07-20T18:17:56","guid":{"rendered":"http:\/\/www.bin-co.com\/blog\/?p=119"},"modified":"2008-07-20T23:47:56","modified_gmt":"2008-07-20T18:17:56","slug":"jsl-javascript-library","status":"publish","type":"post","link":"https:\/\/www.bin-co.com\/blog\/2008\/07\/jsl-javascript-library\/","title":{"rendered":"JSL &#8211; a New JavaScript Library"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.bin-co.com\/blog\/wp-content\/uploads\/2008\/05\/javascript_logo.jpg\" alt=\"Javascript Rhino Logo\" title=\"Javascript Logo\" width=\"230\" height=\"194\" class=\"wp-image-109 intro\" align=\"right\" \/><\/p>\n<p class=\"intro\">Yesterday, I published a new <a href=\"http:\/\/www.openjs.com\/scripts\/jslibrary\/\">JavaScript Library &#8211; JSL<\/a>. It borrows many ideas from the famous  <a href=\"http:\/\/jquery.com\/\">jQuery<\/a> library. <\/p>\n<h2>Download<\/h2>\n<ul>\n<li><a href=\"http:\/\/www.openjs.com\/scripts\/jslibrary\/releases\/jsl.js\">Packed Version<\/a> &#8211; 13 KB<\/li>\n<li><a href=\"http:\/\/www.openjs.com\/scripts\/jslibrary\/releases\/jsl-src.js\">Source<\/a> &#8211; 38 KB<\/li>\n<\/ul>\n<h2>Features<\/h2>\n<p>The Standard Stuff&#8230;<\/p>\n<ul>\n<li>CSS DOM Selectors<\/li>\n<li>Ajax Functions<\/li>\n<li>Event Handling is abstracted<\/li>\n<li>Ability to change style of an element.<\/li>\n<li>Extendable by Plugins<\/li>\n<li>Supports all Modern Browsers<\/li>\n<li>And more&#8230;<\/li>\n<\/ul>\n<p>And then some&#8230;<\/p>\n<ul>\n<li>Function Chainability<\/li>\n<li>Entire Library is 13 KB(un-gzipped)<\/li>\n<li>Special handlers for <a href=\"http:\/\/projects.binnyva.com\/wiki\/JSL.array\">Arrays<\/a>, <a href=\"http:\/\/projects.binnyva.com\/wiki\/JSL.number\">Numbers<\/a><\/li>\n<li>Extra Plugins for Unit Testing and Debugging<\/li>\n<li>Functional Programming Encouraged (map, reduce, filter, etc functions in <a href=\"http:\/\/projects.binnyva.com\/wiki\/JSL.array\">JSL.array<\/a>)<\/li>\n<\/ul>\n<h2>Missing Features<\/h2>\n<dl>\n<dt>XPath Selectors<\/dt>\n<dd>Does anyone use XPath to select elements in JavaScript? I use CSS selectors for this all the time.<\/dd>\n<dt>innerHTML Alternatives<\/dt>\n<dd>I like innerHTML &#8211; so I did not include the <a href=\"http:\/\/www.openjs.com\/scripts\/createdom\/\">functions to create DOM elements<\/a>.<\/dd>\n<dt>Animations\/UI Elements<\/dt>\n<dd>You will not see any animation functions in this library. Also, no Drag and Drop, sliders, JS dialog boxes and the like. Of course, I may write a plugin for these elements &#8211; but right now, they are not supported.<\/dd>\n<dt>JavaScript Monkey-patching<\/dt>\n<dd>I don&#8217;t do any <a href=\"http:\/\/www.prototypejs.org\/\">Prototype<\/a> style addition to JavaScript standard objects. I hate that &#8211; and so should you.<\/dd>\n<dt>Functions in the global namespace<\/dt>\n<dd>Everything that I do is under the JSL namespace &#8211; except for two shortcut functions &#8211; <code>jslib()<\/code> and <code>$()<\/code>. So my library adds only three global variables to the namespace &#8211; JSL, jslib, and $.<\/dd>\n<dt>The <a href=\"http:\/\/en.wikipedia.org\/wiki\/Kitchen_sink_syndrome\">Kitchen Sink<\/a><\/dt>\n<dd>JSL is a small library &#8211; if you want a library with everything, opt for <a href=\"http:\/\/dojotoolkit.org\/\">Dojo<\/a> or <a href=\"http:\/\/developer.yahoo.com\/yui\/\">YUI<\/a>.<\/dd>\n<\/dl>\n<h2>Some Sample Code<\/h2>\n<h4>Using Event Handler&#8230;<\/h4>\n<pre><code class=\"javascript\">JSL.dom(\"a\").click(function(e) { \/\/ Adds a click event handler to all links\n\talert(this.href); \/\/Shows the link URL\n\tJSL.event(e).stop(); \/\/And stops the event from propagating any further\n});<\/code><\/pre>\n<h4>The $() Function&#8230;<\/h4>\n<pre><code class=\"javascript\">$(\"div.content p.intro a\").setStyle({\n\t\"text-decoration\":\"underline\",\n\t\"color\":\"red\"\n});<\/code><\/pre>\n<p>And everything you expect to work with document.getElementById() works with $() as well&#8230;<\/p>\n<pre><code class=\"javascript\">$(\"element-id\").innerHTML = \"Hello World\";\n$(\"element-id\").getElementsByTagName(\"a\"); \/\/ Returns all the anchors under that element.<\/code><\/pre>\n<p>See More <a href=\"http:\/\/www.openjs.com\/scripts\/jslibrary\/preview.php\">Sample Code<\/a><\/p>\n<h2>JSL Links<\/h2>\n<ul>\n<li><a href=\"http:\/\/projects.binnyva.com\/wiki\/JSL\">Documentation<\/a><\/li>\n<li><a href=\"http:\/\/www.openjs.com\/scripts\/jslibrary\/demos\/\">Demos of JSL in Action<\/a><\/li>\n<li><a href=\"http:\/\/projects.binnyva.com\/forum\/viewforum.php?f=2\">Support Forum<\/a><\/li>\n<li><a href=\"http:\/\/www.openjs.com\/scripts\/jslibrary\/code\/trunk\/\">Code Repository<\/a><\/li>\n<\/ul>\n<h2>License<\/h2>\n<p><a href=\"http:\/\/www.openjs.com\/license.php\">BSD, as always<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"mh-excerpt\"><p>Yesterday, I published a new JavaScript Library &#8211; JSL. It borrows many ideas from the famous jQuery library. Download Packed Version &#8211; 13 KB Source <a class=\"mh-excerpt-more\" href=\"https:\/\/www.bin-co.com\/blog\/2008\/07\/jsl-javascript-library\/\" title=\"JSL &#8211; a New JavaScript Library\">[&#8230;]<\/a><\/p>\n<\/div>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,9,15,30],"tags":[77,119,155,157,165,245],"class_list":["post-119","post","type-post","status-publish","format-standard","hentry","category-browsers","category-css","category-javascript","category-web-development","tag-client","tag-framework","tag-javascript","tag-jsl","tag-library","tag-script"],"_links":{"self":[{"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/posts\/119","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/comments?post=119"}],"version-history":[{"count":0,"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/posts\/119\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/media?parent=119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/categories?post=119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/tags?post=119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}