Blogs

Videobox 1.1

Tagged:  

If you are familiar with lightbox you know how useful a tool it is. While with lightbox you you can easily display images, with Videobox you can do the same thing only with videos.

Videobox was written using mootools and uses the swfobject to embed flash videos. Videobox works great for videos from YouTube, but also works with other services.

Click here to go to the official page on SourceForge. The page includes code directions and demos of the library.

Check out Videobox and let us know about any cool sites or applications that you build with Videobox.

Cool Free Christmas Games

Tagged:  

It is the weekend before Christmas (I hope Santa brings me a Ferrari or a Wii!) and it is time to have some Christmas fun and games. So now that you have played Elf Bowling for the 50th time (and that is definitely one of the best Christmas games every made) you may be looking for some new Christmas games.

I found a site that has quite a few great Christmas games (they are all in Flash or Shockwave). I particularly recommend the 3-D snowball fight game, quite a bit of fun (a little tip the ctrl button is used to throw snow balls).

Click here to go to the games!

So, have a very fun and Merry Christmas playing these great games and looking forward to the holiday festivities (I know for me it would be a great New Year if my Fresno State Bulldogs will beat Georgia Tech in their bowl game).

Create Your Own Blog @ Ajaxonomy

Tagged:  

That's right, members of Ajaxonomy.com can create their own personal blog! Registration is free - just sign up over on the right side of page (or log in with your OpenID). As a registered user you will be able to write and edit posts and have your own RSS feed. If that wasn't enough, your posts even have an opportunity to be promoted to the homepage and main rss feed of the site.

So, sign up today and get posting!

Object Oriented JavaScript - Should You Use It? - Part 3

Tagged:  

So we have come to the last of my articles on object oriented JavaScript. You can read the last post by click ing here. This post will be about how JavaScript is proposed to change when (or if as the case may be) ECMAScript 4 (the spec that JavaScript is based on) is supported by the major browsers.

One of the changes that I am most happy about is the new proposed class structure. Yes JavaScript in the near future will be an object oriented language that is more in-line with languages like Java and C#.

Below is how the new structure is proposed.

Classes: A class describes an object by presenting those properties (fields) of the object that are always present (the
fixed properties or fixtures), including variables, constants, and methods16:

class C {
	var val // a variable property
	var large = Infinity // a variable property
	const x = 3.14 // a constant property
	function f(n) { return n+val*2 } // a method property
}

You would create instances of the class using the new method, just as you currently would with the current JavaScript object.

So, the answer to the question of should you use object oriented JavaScript is a resounding, Yes, especially with the direction that it looks like the language is going. For a more information on ECMAScript 4 check out ecmascript.org. To go directly to an overview of ECMAScript 4 script click here.

As always if you have any questions you can leave them in the comments or private message me once you login to this site. Also, if you have anything that you would like to blog about on this site all registered users get their own blog on Ajaxonomy and the most interesting posts will be published to the home page.

Yahoo! Maps gives Flash the Boot!

Tagged:  

Straight from the Yahoo Developer Network, Jason Levitt informs us that Yahoo Maps is now using pure JavaScript instead of a hybrid of Flash and JavaScript. If that wasn't enough, he also informs us that a new version of the Maps AJAX API will be available next year! Read the full post below:

You'd hardly know it by going to maps.yahoo.com, but Yahoo! Maps are now pure JavaScript instead of a hybrid of Flash and JavaScript. Lead Maps Developer Mirek Grymuza and the Maps team have done an amazing job of seamlessly moving the Maps client over resulting in at least double the performance of the previous Flash-based version.

The good news for developers is that the new Yahoo! Maps client uses an enhanced version of our Maps AJAX API which will be available to developers in 2008. This substantial upgrade of the Maps API will provide access to all the overlay components available in the consumer client and will give developers significant overlay flexibility. It's going to be a great new year for Yahoo! Maps users and developers.

Read the original post at the Yahoo Developer Network here.

Object Oriented JavaScript - Should You Use It? - Part 2

This is the continuation of a post that I wrote yesterday (click here to read the original post). This post will go into much more depth and will be a bit more technical.

Now to begin to answer the question of should you use object oriented JavaScript (don't worry I will touch on the fact that we have all already used JavaScript objects). The first thing that we should understand is how it is used and what are the advantages or disadvantages. If you have been programming in a language like C++ or Java then you are use to a class style of object oriented. JavaScript does not use this structure, instead an object in JavaScript is based on functions and properties.

JavaScript object oriented programming can be noted in different styles.

The first type of notation is to use the new operator along with the Object() method.

person = new Object()
person.name = "John Doe"
person.height = "6Ft"

person.run = function() {
	this.state = "running"
	this.speed = "4ms^-1"
}

In the above code we define an object named person and then add it's own properties. Also the property person.run will execute the function.

The next notation will be familiar if you have ever used JSON. The below notation is referred to as literal notation. This notation simplifies things a bit and this is much better for sending over the web in an Ajax application where such things really matter.

var rectangle = { 
	upperLeft : { x : 2, y : 2 },
	lowerRight : { x : 4, y : 4},
	method1 : function(){alert("Method had been called" + this.upperLeft.x)}
};

The shortcoming with this method is that it does not lend as well to re-usability.

So far you are probably thinking that this is a waste of time and that why would I ever use this, outside of JSON. Well, now we will start to see the power of this coding style which is in re-usability.

The below example will create an object and will set the value of the name property.

function cat(name) {
	this.name = name;
	this.talk = function() {
		alert( this.name + " say meeow!" )
	}
} 

cat1 = new cat("felix")
cat1.talk() //alerts "felix says meeow!"

cat2 = new cat("ginger")

The above code shows how you can easily create multiple objects based on the same object. Which brings me to how you have already used object oriented JavaScript. For example the document.getElementById() method is an example of an object that you more than likely have used (don't worry Prototype library lovers, I'll touch on $() in just a moment).

One of the great things with objects is that using prototype (if you have been programming in ActionScript you will be familiar with the below) you can now extend the functionality of an existing object in a new object.

The below code is an example of how to use prototype to extend an object.

cat.prototype.changeName = function(name) {
	this.name = name;
}

firstCat = new cat("pursur")
firstCat.changeName("Bill")
firstCat.talk() //alerts "Bill says meeow!"

Using prototype you can extend existing JavaScript objects, such as the date (I believe that this is how the prototype library creates the $() method which is in essence the document.getElementById() method) object.

The below example shows how to extend array object with the shift and unshift methods that are not available in some browsers.

if(!Array.prototype.shift) { // if this method does not exist..

	Array.prototype.shift = function(){
		firstElement = this[0];
		this.reverse();
		this.length = Math.max(this.length-1,0);
		this.reverse();
		return firstElement;
	}
	
}

if(!Array.prototype.unshift) { // if this method does not exist..
	
	Array.prototype.unshift = function(){
		this.reverse();
		
			for(var i=arguments.length-1;i>=0;i--){
				this[this.length]=arguments[i]
			}
			
		this.reverse();
		return this.length
	}
}

If you have been programming in a language link C++ or Java you are probably very familiar with a class structure. Part of this is the idea of a class and a subclass. While most JavaScript object oriented code will not use the following, below is an example of how you can create classes and subclasses in JavaScript.

function superClass() {
  this.supertest = superTest; //attach method superTest
}

function subClass() {
  this.inheritFrom = superClass;
  this.inheritFrom();
  this.subtest = subTest; //attach method subTest
}

function superTest() {
  return "superTest";
}
  
function subTest() {
  return "subTest";
}


 var newClass = new subClass();

  alert(newClass.subtest()); // yields "subTest"
  alert(newClass.supertest()); // yields "superTest"

So, now that you have seen how you can extend and reuse JavaScript objects it still leaves us with the question of should you use it. If you need to create code that needs to be reused or extended then it should be a JavaScript object. If you are just writing code that does a few lines of code that doesn't need to be reused or extended then procedural (a.k.a. typical function style code) style code is fine to use. So, the answer to the question is yes in many cases although there are times when it may be overkill.

The next post will take a look at how JavaScript will soon be changing once (or some would say if) ECMAScript 4 starts getting major browser support.

So, as always if you have any questions leave a comment or you can private message me once you add me to your buddy list (I will add you as a buddy as soon as I see the request) that is available once you login. Also, if you would like to write anything on this blog you can do so once you login by clicking on create content and then blog entry. The most interesting posts will be promoted to the home page.

many of the above code samples where taken from this post on JavaScript Kit.

Object Oriented JavaScript - Should You use It? - Part 1

Tagged:  

This post was part one of a three part series. You can read post two by clicking here and post three by clicking here.

If you have programmed any in JavaScript you are definitely familiar with the procedural method of coding, but you may not have seen many examples of object oriented JavaScript code. Since many JavaScript coders come from a scripting background, most practice a procedural programming style. However, if you have a C++, Java, C#, or any other object oriented programming language (you can program in an object oriented manner in languages such as PHP, however it is often not practiced) you will be interested in seeing how JavaScript object oriented programming differs from these coding languages.

Below is a simple example of a procedural coding style (this particular example just changes the name value of an anchor tag).

function RenameAnchor(anchorname, anchorid){
	document.getElementById(anchorid).name = anchorname;
}

We have all used this coding style many times in our JavaScript. One problem with this is that it will often cause you to copy and paste portions of code into other sections to extend them in different functions. While there is nothing necessarily wrong with this style in some instances there is a better way of coding.

Below is a simple example of an object oriented coding style (once again this particular example just changes the name value of an anchor tag).

var AnchorRename=new Object();
AnchorRename.CreateObject=function(anchorname, anchorid){
	this.anchorid=anchorid; //This is the id of the anchor element
	this.anchorname=anchorname;
	this.RenameAnchor(anchorname, anchorholerid);
};
AnchorRename.CreateObject.prototype={
	RenameAnchor:function(anchorname, anchorid){
		document.getElementById(anchorid).name = anchorname;
	}
};

While the above may at first look like it is just more complicated there are actually practical reasons for using this coding style. The most notible is re-usability. With an object you would create a new object and attach it to a variable name. You would create the new object as in the below code example.

var NewObject = new AnchorRename.RenameAnchor(variable1, variable2);

Now that you have a variable that is attached to the object you can access the object and its properties by referring to the variable, so you can re-use it much easier. Another nice feature of having this in an object is that it can be prototyped in new objects and extend the functionality of the object. While all of this is a little more in depth then I have time for right now I would be happy to answer any questions left in the comments of this post (or you can add me to your buddy list and private message me).

If you come from a C++ or Java background you will probably notice that this differs quite a bit from the object oriented style that you are used to. You will be happy to know that it looks like the next version of JavaScript should be more in-line to what you are used to. I'll be posting more on the new version of JavaScript when we are about to see major implementations of it.

Well, I know I haven't gone into much detail yet, but in my next two posts I will go over how exactly to code in an object oriented style (including different methods to accomplish this) and the how coding might change once ECMAScript 4 is fully adopted by the browsers. For now you can find a good tutorial regarding object oriented programming in JavaScript by clicking here.

Ajaxonomy Adds OpenID Support

If you have been using our site recently you may have noticed that the site looks different. We have redesigned the site to be more integrated with our social features. Among the new features you will notice are a buddy list, private messaging, each user has a blog, user profiles, a new comment system and more.

One of the changes that I am most happy about is that we now support OpenID. If you already have an OpenID you can use it to login for all of the above mentioned features. Soon you will be able to use your OpenID to login to sites such as Digg, so you will probably want to get one if you don't already have one.

As always we look forward to getting your feedback about the new features. And don't forget to use your OpenID to login (although you can login without an OpenID)!

Syndicate content