Question about what type of JavaScript is being used?

[kratsg]

I'm what you would call a pretty intermediate programmer, with knowledge of how to achieve multiple things in javascript, html, css, php, etc.. I kinda wanna build up a bit more and learn more in javascript; and seeing code like below:

 

Array.implement({
  
  invoke: function(fn, args){
    var result = [];
    
    for (var i = 0, l = this.length; i < l; i++){
      if(this[i] && this[i][fn])
        result.push(args ? this[i][fn].pass(args, this[i])() : this[i][fn]());
    }
    return result;
  }
  
});

 

Does somewhat confuse me :-P Any ideas what codes like these are called? Class, Objects, what? Or perhaps tutorials you can link me to, to learn more?

 

Edit:Also, I've seen codes that also use the "$" dollar sign in them as some sort of object or class reference... yet I don't get how they make them work, etc..

[YourNameHere]

I cant say as I recognise that code but it appears to be a framework. There are many out there. I personally use jquery for most of my stuff but it depends of your project needs. For example, if it is a mostly image-based site you're working on, the Uize Framework may be the best suit. Jquery uses Xpath for selecting elements. I dont claim to fully understand this but it used the ":" quite a bit.

a jquery method call would look like this:

 

$('.className').css({ width: '33%' });

 

it can take a while to learn a framwork but trust me, you'll be clad you did.

 

www.jquery.com

www.jquery-ui.com

www.uize.com

www.scriptaculous.com

...

stumble for js framworks, there are many blogs on the subject.

[kratsg]

I cant say as I recognise that code but it appears to be a framework. There are many out there. I personally use jquery for most of my stuff but it depends of your project needs. For example, if it is a mostly image-based site you're working on, the Uize Framework may be the best suit. Jquery uses Xpath for selecting elements. I dont claim to fully understand this but it used the ":" quite a bit.

a jquery method call would look like this:

 

$('.className').css({ width: '33%' });

 

it can take a while to learn a framwork but trust me, you'll be clad you did.

 

www.jquery.com

www.jquery-ui.com

www.uize.com

www.scriptaculous.com

...

stumble for js framworks, there are many blogs on the subject.

 

I was looking through the MooTools.net framework (where I found this) and I seem to like the logic behind how they've done some of their stuff. They talk a bit about JavaScript Objects as Prototypes? <-- Could that be where most of the the frameworks seem to build up their code? Do you suggest MooTools as a framework? (it appeals to me both for its neat cross-browser effects as well as how they handle AJAX requests).

[emehrkay]

I prefer MooTools (check http://jqueryvsmootools.com/ for a comprehensive comparison). To me it comes down to the building and reuse of js objects

 

The code that you originally posted prototypes (adds) an invoke method to the Array object -- all arrays have a .invoke() method attached

[haku]

I've only played with mootools a very small little bit, but I've spent a lot of time working with jquery, and I prefer jquery more, though somone who has used mootools more than I would probably have a more qualified opinion.

[kratsg]

So, really, I don't exactly have a problem comprehending how to apply frameworks... that's not the question. What I'm trying to figure out is what kind of javascript are we talking about? Such as, maybe places you can link me to so that I can learn more about (obviously, there's a whole new set of terminology, "prototypes","methods"

 

Let me just go out on a limb and say that this is a way to add more functionality to what already exists? IE: the invoke method is like a function that when called, runs that anonymous function defined?

 

var somearray = new Array();
somearray.invoke();//<-- the invoke method runs the anonymous function defined

 

So really, I wonder why javascript is built this way? I mean, how did these people figure out that you can define new methods similar to the string's "length" function or etc...? This has to be mentioned somewhere perhaps?

[corbin]

A method is a function in the scope of a class.

 

 

In other words, all of these new terms your seeing are OOP related.

 

 

Prototyping is the process of adding a method into a class.  JS is the only language I've ever seen JS style prototyping in (I don't know if that made sense or not).

[YourNameHere]

I have personally never used mootools. That said, there is prolly nothing wrong with using it, I just prefer jquery as it is what I know. These are not new concepts just new was of "distributing" them. Most programmers that are well into a career have their own "framework" that is just a set of reusable code and functions that they have written in such a way that they can be applied to many different projects.

 

All frameworks that are worth the bytes they consume are cross-browser compatible. If not, then they are crap.

 

jQuery in my opinion has the largest user base. Mainly because it is one of the best documented and best supported. These of coarse are MY opinions and may not be true. but it is the easiest one I have learned and implemented and has a lot of cool effects and plugins.

 

Prototyping is just the act of adding a method to a class. It is how most if not all frameworks are built.

[RichardRotterdam]

So really, I wonder why javascript is built this way? I mean, how did these people figure out that you can define new methods similar to the string's "length" function or etc...? This has to be mentioned somewhere perhaps?

 

As Corbin said, JavaScript is a prototype bases programming language. This however is not something new. The creators of JavaScript took the programming paradigms they thought were best suitable for the language. You might want to look at the following article http://en.wikipedia.org/wiki/Prototype-based_programming

[kratsg]

So I'm looking over jQuery, and there really isn't any difference in the coding.. in fact, it seems MooTools provides extra functionality with the dollar sign function (using both "$" and "$$" as well as automatically attaching all available methods so you're not activating new effects, but calling them). MooTools also seems smother in their animations? Someone confirm this? (Check out the two sliding effects for example:

 

http://docs.jquery.com/Effects/slideToggle#speedcallback

http://demos.mootools.net/Fx.Slide

)

 

I dunno, I do like jQuery's AJAX codes better, but perhaps MooTools is just as effective if I work with it. >.<

[RichardRotterdam]

There is actually a lot of difference in coding between these two frameworks. The thing that is very similar in both mootools and jQuery is the way the DOM gets manipulated.

 

the $$() function in mootools pretty much equals the $() function in jQuery since you use a CSS selector.

The $() in mootools is similar to document.getElementById()

So the $() in mootools doesn't really provide extra functionality.

 

Readup on that mootools vs jQuery link posted earlier it's actually a pretty good article. I myself slightly prefer mootools over jQuery.

[kratsg]

I think the article has me favoring MooTools simply because I can understand how to write up functions in a similar manner, meh.

 

One final question and I'm on my way :-D

 

How does one create the "$" function in JavaScript? How did they make it work like it does (in my case, I'm asking for the method that makes it similar to document.getElementById() ).

 

Is it just as simple as going:

function $(identifier){
return document.getElementById(identifier);
}

[RichardRotterdam]

One final question and I'm on my way :-D

 

How does one create the "$" function in JavaScript? How did they make it work like it does (in my case, I'm asking for the method that makes it similar to document.getElementById() ).

 

Is it just as simple as going:

function $(identifier){
return document.getElementById(identifier);
}

If you look at the source for those really annoying div overly popups you'll often see a function nearly identical to what you have written. It does indeed work. However if you look at the uncompressed mootools or jQuery source you'll see a lot more magic going on for the selector method.

[kratsg]

One final question and I'm on my way :-D

 

How does one create the "$" function in JavaScript? How did they make it work like it does (in my case, I'm asking for the method that makes it similar to document.getElementById() ).

 

Is it just as simple as going:

function $(identifier){
return document.getElementById(identifier);
}

If you look at the source for those really annoying div overly popups you'll often see a function nearly identical to what you have written. It does indeed work. However if you look at the uncompressed mootools or jQuery source you'll see a lot more magic going on for the selector method.

 

So their magic has to be part of making it cross-browser+implementing other classes to it for improved functionality? It sounds pretty l33t.

[haku]

The guys who write those frameworks ARE elite. Impressive stuff.

[kratsg]

The guys who write those frameworks ARE elite. Impressive stuff.

 

Does that mean you're not at their level? Or perhaps it's a giant community-effort (similar to Ubuntu and such?)

[haku]

I just read that jquery vs. moo tools article - good stuff. It makes me want to actually spend some more time learning moo tools, though it also validated the time I have spent learning jqeury, as it does exactly what I pretty much exclusively do with javascript - manipulates the dom.

[kratsg]

I just read that jquery vs. moo tools article - good stuff. It makes me want to actually spend some more time learning moo tools, though it also validated the time I have spent learning jqeury, as it does exactly what I pretty much exclusively do with javascript - manipulates the dom.

 

I know... I'm starting to realize that all that time spent having to get it to work in IE and FF etc.. with simply getting stupid references in the DOM to work.. could've been like... 1/30th the time with MooTools/jQuery.

 

I feel like I'm not keeping up with the times xD Although this doesn't necessarily make me want a framework for PHP, for some reason, I feel like PHP isn't hard to use without a framework (since it's not like theres any crossbrowser issues or dom-referencing going on.. or even event handlers [bubbling, etc.. holy hell]).

[haku]

It's really good to learn javascript and all it's cross-browser quirkiness before moving onto something like jquery, so that you know what kind of things are possible and are happening behind the scenes. So don't feel like the time you used was a loss - rather it will only make you a stronger programmer when you start to learn to use a library.

 

As for a php framework - they are also really nice to use. I'm a Drupal guy myself, which is a CMF (content management framework), meaning it's half framework, half CMS. It comes with a ton of built in APIs and abstract layers that make programming so much faster. I played with cake php a little as well, and it's pretty cool. Frameworks definitely are nice, and make programming quicker.

[kratsg]

I'm more of the guy who likes to build things from scratch in PHP. Most often, a lot of code that I repeat are really easy codes... I work on a website where we develop new features, and a lot of it requires building from scratch and not copying anything, really o.O

 

For the most part, a lot of the javascript we've done is repetitive, which is why I was looking into mootools in the first place :-P

 

Does it look bad that I choose not to work with a framework at all for PHP? Perhaps another client hires me and wants so-and-so framework, in which case, I have no doubt I could learn it :-o

[haku]

When you are learning something, it's rare to be able to effectively use it for the first few times. So learning something when a client requests it isn't very good, because you are likely to give them an inferior product. Better to learn it and become proficient in it in your own time so you already have the skillset.

 

I generally turn down projects that involve skillsets that I don't feel comfortable with, though I may spend some time studying the skillset after turning down the project so that I don't have to turn down the next project that comes along.

[kratsg]

I'm actually working through some MooTools stuff now... I've already hit probably a huge feature that they have not added yet to the current release, which is handling effects by chaining/delaying.

 

Apparently, something such as fx.start().delay().chain().delay() won't necessarily work if you plan to execute effects to multiple elements, but there is a longer way D:

 

I'm liking it so far.

[emehrkay]

Chaining in mootools is easy when dealing with the Fx namespace.

 

Most of the Fx classes fire with a start method, so say you're using Fx.morph you'd do

 

instance.start({
    'height': 300px
}).chain(function(){
    //some other action
});

 

But mootools is pretty extendible  as you can add custom events. A lot of objects have an onComplete event, so when you initialize the object, you define it

 

var x = new Fx.morph(element, {
    onComplete: function(){
        alert('done')
    },
    onStart: function(){
        alert('starting')
    }
});

 

In regards to pure OO MooTools is vastly superior to jQuery. Like the article says -- MooTools does everything jQuery does, but jQuery cannot do everything MooTool does.

 

There are a lot of things that I do not like about jQuery. Why are methods like css() both getters and setters? The common way to code jQuery is to keep running selector after selector instead of creating a reference and using that.

 

My advice is to learn MooTools, jQuery is simple after that

[kratsg]

Chaining in mootools is easy when dealing with the Fx namespace.

 

Most of the Fx classes fire with a start method, so say you're using Fx.morph you'd do

 

instance.start({
    'height': 300px
}).chain(function(){
    //some other action
});

 

But mootools is pretty extendible  as you can add custom events. A lot of objects have an onComplete event, so when you initialize the object, you define it

 

var x = new Fx.morph(element, {
    onComplete: function(){
        alert('done')
    },
    onStart: function(){
        alert('starting')
    }
});

 

In regards to pure OO MooTools is vastly superior to jQuery. Like the article says -- MooTools does everything jQuery does, but jQuery cannot do everything MooTool does.

 

There are a lot of things that I do not like about jQuery. Why are methods like css() both getters and setters? The common way to code jQuery is to keep running selector after selector instead of creating a reference and using that.

 

My advice is to learn MooTools, jQuery is simple after that

 

I figured that out after a bit of searching around... I was actually trying to use chaining using the Fx shortcuts

$('some_id').tween('style',value).chain(function(){//.....

 

Which didn't work... even though the Fx.tween extends Fx. Meh, it's an issue a lot of people seem to have, and yeah.

 

A question about the whole 'domReady' event, can this be placed between the body tags and run just like as if you placed it between the head tags? My only curiosity is that with normal javascript inserted in the body, you don't get to necessarily reference all elements below that script. But I would assume domReady waits until the WHOLE DOM loads, then parses the script?

[haku]

There are a lot of things that I do not like about jQuery. Why are methods like css() both getters and setters?

 

I'm the opposite - I like that.