Bin-Blog » JavaScript http://www.bin-co.com/blog Learn about the latest in Web Development - as soon as I do. Tue, 13 Oct 2009 18:55:47 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 JSL – a New JavaScript Library http://www.bin-co.com/blog/2008/07/jsl-javascript-library/ http://www.bin-co.com/blog/2008/07/jsl-javascript-library/#comments Sun, 20 Jul 2008 18:17:56 +0000 Binny V A http://www.bin-co.com/blog/?p=119 Javascript Rhino Logo

Yesterday, I published a new JavaScript Library – JSL. It borrows many ideas from the famous jQuery library.

Download

Features

The Standard Stuff…

  • CSS DOM Selectors
  • Ajax Functions
  • Event Handling is abstracted
  • Ability to change style of an element.
  • Extendable by Plugins
  • Supports all Modern Browsers
  • And more…

And then some…

  • Function Chainability
  • Entire Library is 13 KB(un-gzipped)
  • Special handlers for Arrays, Numbers
  • Extra Plugins for Unit Testing and Debugging
  • Functional Programming Encouraged (map, reduce, filter, etc functions in JSL.array)

Missing Features

XPath Selectors
Does anyone use XPath to select elements in JavaScript? I use CSS selectors for this all the time.
innerHTML Alternatives
I like innerHTML – so I did not include the functions to create DOM elements.
Animations/UI Elements
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 – but right now, they are not supported.
JavaScript Monkey-patching
I don’t do any Prototype style addition to JavaScript standard objects. I hate that – and so should you.
Functions in the global namespace
Everything that I do is under the JSL namespace – except for two shortcut functions – jslib() and $(). So my library adds only three global variables to the namespace – JSL, jslib, and $.
The Kitchen Sink
JSL is a small library – if you want a library with everything, opt for Dojo or YUI.

Some Sample Code

Using Event Handler…

JSL.dom("a").click(function(e) { // Adds a click event handler to all links
	alert(this.href); //Shows the link URL
	JSL.event(e).stop(); //And stops the event from propagating any further
});

The $() Function…

$("div.content p.intro a").setStyle({
	"text-decoration":"underline",
	"color":"red"
});

And everything you expect to work with document.getElementById() works with $() as well…

$("element-id").innerHTML = "Hello World";
$("element-id").getElementsByTagName("a"); // Returns all the anchors under that element.

See More Sample Code

JSL Links

License

BSD, as always.

]]> http://www.bin-co.com/blog/2008/07/jsl-javascript-library/feed/ 0 Hello Script For JavaScript http://www.bin-co.com/blog/2008/05/hello-script-for-javascript/ http://www.bin-co.com/blog/2008/05/hello-script-for-javascript/#comments Thu, 22 May 2008 18:26:14 +0000 Binny V A http://www.bin-co.com/blog/?p=108 Javascript Rhino Logo

The next language to get the Hello Script treatment is JavaScript – my favorite language. Before we go any further, here is the definitions for Hello Script and JavaScript – just to make sure that we are on the same page…

Hello Script
‘Hello Script’ is a file that contains the most commonly used elements of a programming language so that it can be used as a cheat sheet when working with that language.
JavaScript
JavaScript is a client side scripting language that is used in browsers.

Code

Warning: Do not run this code – you will get a lot of alerts. If you have firebug extension, uncomment the first line – then you can run the code.


<html>
<head>
<title>Hello Script for JS</title>
<script type="text/javascript">
//alert=console.log;
alert("Hello World");

// Variables, concatination
var name = 'Binny';
var year = 2008;
alert("Hello, " + name + " - welcome to " + year );

//If,else conditions
if (year > 2008) {
	alert("Welcome to the future - yes, we have flying cars!");
}
else if(year < 2008) {
	alert("The past - please don't change anything. Don't step on any butterflies. And for the sake of all thats good and holy, stay away from your parents!");
}
else {
	alert("Anything wrong with your time machine? You have not gone anywhere, kiddo.");
}

// For loop
for(var i=0; i<3; i++) {
	alert(i + ") Hi there!");
}

//Numerical Array, While
var rules = [
	'Do no harm',
	'Obey',
	'Continue Living'
];
var i = 0;
while(i<rules.length) {
	alert("Rule " + (i+1) + " : " + rules[i]);
	i++;
}

// Associated array, foreach
var associated = {
	'hello'	:	'world',
	'foo'	:	'bar',
	'lorem'	:	'ipsum'
}
for(key in associated) {
	alert(key + " : " + associated[key]);
}

// Using Join and Split
csv_values = "hello,world,how,are,you".split(",");
alert(csv_values.join(":"));

// Function, argument, return, call
function hello(name) {
	return "Hello " + name;
}
hello_string = hello("Binny");
alert(hello_string);

// One for the OOP fanboys - Class, members, object and stuff.
function Movie(name) { //Constuctor
	this.name = name;
}
Movie.prototype.rateMovie = function() {
	this.rating = (this.name.length % 10) + 1; //IMDBs rating algorithm. True story!
}

Movie.prototype.printMovieDetails = function() {
	alert("Movie : " + this.name + "\nRating : " + this.rating);
}

//Create the object
ncfom = new Movie("New Country for Old Men"); //It's a sequel!
ncfom.printMovieDetails();

// Regular Expressions
string = "Hello World";
if(string.match(/^Hell/)) alert("Yup - its evil\n");
alert(string.replace(/l([^l])/g, "$1")); //Remove an 'l' from both words. Should alert('Helo Word'

/**
 * Specialized code
 */
window.onload = function() {
	var ele = document.getElementById("div-element");
	alert(ele);
	ele.innerHTML = "Hello World";
	ele.onclick = function() {
		alert("You Clicked?");
	}

	document.getElementById("text").value = "Goodbye World";
}
</script>
</head>
<body>

<div id="div-element"></div>

<input type="text" value="3" id="text" />

</body>
</html>
]]> http://www.bin-co.com/blog/2008/05/hello-script-for-javascript/feed/ 4 Alertle Launched http://www.bin-co.com/blog/2008/02/alertle-launched/ http://www.bin-co.com/blog/2008/02/alertle-launched/#comments Sun, 10 Feb 2008 18:22:43 +0000 Binny V A http://www.bin-co.com/blog/2008/02/alertle-launched/ Alertle Screenshot

I am one of the geeks behind Alertle. Its a web based RSS Reader. I am responsible for a good amount of the JavaScript areas of this app :-)

Features

Single Page Application
The entire application is contained in a single page – everything is done through Ajax. I will not advice that you make something like this(its a maintenance nightmare) but I can say one thing about it – its Cool. With a capital ‘C’.
Keyboard Shortcuts
I got the idea of creating a Keyboard Shortcut Library for JavaScript when I was working on this feature.
Autoplay
You can view articles as you are viewing a slideshow if you enable this.
Feedpacks
You can bunch a group of feeds together into a feedpack – and see all the posts from such a group together.
Sharing
You can share your feedpacks with other users

Perfect for High Volume Feeds

There is one major feature that sets Alertle appart from other RSS readers – it does not tell you if a post is read or not. Yeah, first you will think its a missing feature – but its not. I have used a lot of feed readers – once you subscribe to a couple of high volume feed – like say, BoingBoing or Slashdot or something, you can say goodbye to your sanity. It creates so many new items that the only way of staying away the mess is to click on the ‘Mark all as read’ button once every four seconds. You know what I mean – I am sure you have unsubscribed from many feeds for this reason.

With alertle, you can subscribe all these high volume feeds. And there is no pressure to view all the posts.

If you are an info junkie, I can guaranty that your will get lost for hours in Alertle.

Problems

IE is not Supported

We are still working on this – and due to deadline constraints, we decided to release Alertle without IE support. So if you are an IE user, I am sorry – but What in the World are you Doing? Ditch that terrible browser and get a real browser right now!

If we can get a few people to switch to firefox before we add support for IE, I will say that Alertle gone beyond and above the call of duty to make the web a better place! ;-)

Posts don’t have a Read Flag (pun unintended)

Um., yeah, I know – this is both an advantage and a disadvantage. This will prevent me from using Alertle for all my feeds. For my must-read feeds, I will still be using Google Reader. For the high volume stuff, I will use Alertle.

Getting to Know Alertle

So, what are you waiting for? Head over to Alertle and sign up for an account. Its FREE!

But if you are still unconvinced, here is a demo…

Links

]]> http://www.bin-co.com/blog/2008/02/alertle-launched/feed/ 14 Keyboard Shortcuts JavaScript Library http://www.bin-co.com/blog/2007/07/keyboard-shortcuts-javascript-library/ http://www.bin-co.com/blog/2007/07/keyboard-shortcuts-javascript-library/#comments Sat, 21 Jul 2007 18:29:26 +0000 Binny V A http://www.bin-co.com/blog/2007/07/keyboard-shortcuts-javascript-library/ I have created the second version of the JavaScript Shortcut Library. It is one of my more popular scripts. This script eases the work involved in making shortcuts in JavaScript.

Despite the many JavaScript libraries that are available today, I cannot find one that makes it easy to add keyboard shortcuts(or accelerators) to your javascript app. This is because keyboard shortcuts where only used in JavaScript games – no serious web application used keyboard shortcuts to navigate around its interface. But Google apps like Google Reader and Gmail changed that. So, I have created a function to make adding shortcuts to your application much easier.

Changelog

  • The single function method was abandoned for an object with two functions
  • Shortcut Remove function added
  • New option to disable shortcuts in textarea, input fields.

If you are using this script in any of your projects, please switch to the latest version.

Previous Version Documentation

]]> http://www.bin-co.com/blog/2007/07/keyboard-shortcuts-javascript-library/feed/ 0 Success/Error Design Pattern For Ajax http://www.bin-co.com/blog/2007/06/successerror-design-pattern-for-ajax/ http://www.bin-co.com/blog/2007/06/successerror-design-pattern-for-ajax/#comments Fri, 22 Jun 2007 14:41:13 +0000 Binny V A http://www.bin-co.com/blog/2007/06/successerror-design-pattern-for-ajax/ ‘Success/Error’ design pattern for Ajax requests is a JSON encoded string in a specific format – each response has a minimum of two elements in it – ie ‘success’ and ‘error’ – like this…

{
"success":"Task done successfully",
"error":false
}

OR

{
"success":false,
"error":"Database Connection Error!"
}

This method is used extensivly in Nexty. Almost all Ajax response in Nexty ares in this format.

Since this is in the JavaScript domain, I thougt it might be better to pubish the details in my OpenJS site. Read more about Success/Error Design Pattern For Ajax.

]]> http://www.bin-co.com/blog/2007/06/successerror-design-pattern-for-ajax/feed/ 0