Learning javascript

18 views
Skip to first unread message

Edward K. Ream

unread,
Feb 21, 2012, 10:13:32 AM2/21/12
to leo-editor
I've got to learn javascript in order to read the MooTools sources :-)

Some first steps.

The MooTools sources are minimized, but not obfuscated. Googling for
"reformat JavaScript" took me to:

http://jsbeautifier.org/

I imported the result into Leo. The importer needs more than a tad of
work, but I was impatient, so I reformatted by hand.

Semicolons confused me, so I googled "javascript semicolon".:

http://mislav.uniqpath.com/2010/05/semicolons/

So now some confusion has been eliminated.

From within the above article, I found a link to "the module pattern",

http://www.yuiblog.com/blog/2007/06/12/module-pattern/

Here is an important excerpt:

QQQ
2. Assign the return value of an anonymous function to your namespace
object:

YAHOO.myProject.myModule = function () {

return {
myPublicProperty: "I'm accessible as
YAHOO.myProject.myModule.myPublicProperty.",
myPublicMethod: function () {
YAHOO.log("I'm accessible as
YAHOO.myProject.myModule.myPublicMethod.");
}
};

}(); // the parens here cause the anonymous function to execute and
return

Note the very last line with the closing curly brace and then the
parentheses (). This notation causes the anonymous function to execute
immediately, returning the object containing myPublicProperty and
myPublicMethod. As soon as the anonymous function returns, that
returned object is addressable as YAHOO.myProject.myModule.
QQQ

Ah. Now I understand why the function can have no name, what similar
code is doing, and why it *might* be a good idea to end the last line
with a semicolon ;-)

I'm still amazed that anyone can write software with a language like
this, but now I have an inkling about how it might happen.

Edward

Ville M. Vainio

unread,
Feb 21, 2012, 10:23:09 AM2/21/12
to leo-e...@googlegroups.com
I know you have a reason to learn javascript in particular, but I
recommend looking at CoffeeScript as well. It's the better javascript
:).

> --
> You received this message because you are subscribed to the Google Groups "leo-editor" group.
> To post to this group, send email to leo-e...@googlegroups.com.
> To unsubscribe from this group, send email to leo-editor+...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/leo-editor?hl=en.
>

Zoom.Quiet

unread,
Feb 21, 2012, 10:33:00 AM2/21/12
to leo-e...@googlegroups.com
2012/2/21 Edward K. Ream <edre...@gmail.com>:

> I've got to learn javascript in order to read the MooTools sources :-)
>

- life with leanning, forever ;-)
- for javascript
- if for Ajax, jQuery is funny and feel good than mootools
- for web dev. node.js is power with coffeescript ;-)
and js is realy beautyful lang. with some ugly design:
- maybe this is the reason to make people creat sooooo many
crzy tools for js dev.
ps:
suggest some goo words abt js:
JavaScript: The World's Most Misunderstood Programming Language
http://javascript.crockford.com/javascript.html
Web 2.0 Development and Business Lessons: You Don't Know JavaScript
http://www.w2lessons.com/2011/04/you-dont-know-javascript.html

> --
> You received this message because you are subscribed to the Google Groups "leo-editor" group.
> To post to this group, send email to leo-e...@googlegroups.com.
> To unsubscribe from this group, send email to leo-editor+...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/leo-editor?hl=en.
>

--
人生苦短, Pythonic! 冗余不做,日子甭过!备份不做,十恶不赦!
俺: http://about.me/zoom.quiet
文字协议: http://creativecommons.org/licenses/by-sa/2.5/cn/

Terry Brown

unread,
Feb 21, 2012, 11:16:03 AM2/21/12
to leo-e...@googlegroups.com
On Tue, 21 Feb 2012 23:33:00 +0800
"Zoom.Quiet" <zoom....@gmail.com> wrote:

> 2012/2/21 Edward K. Ream <edre...@gmail.com>:
> > I've got to learn javascript in order to read the MooTools sources :-)
> >
>
> - life with leanning, forever ;-)
> - for javascript
> - if for Ajax, jQuery is funny and feel good than mootools
> - for web dev. node.js is power with coffeescript ;-)
> and js is realy beautyful lang. with some ugly design:
> - maybe this is the reason to make people creat sooooo many
> crzy tools for js dev.

I use jQuery a lot and find it very good, I looked at MooTools a long
time ago, I forget my opinion of it then. Did Kent mention a
"java-script - what we got right" presentation once, that acknowledged
lots of annoying design in java-script (hence Zoom.Quiet's point about
all the different layers available to make it bearable), but also
covered some of its strengths?

Surely the MooTools source in available in non-minimized form, if not I
would say it's not open source. The minimized form should be built
automatically from a properly formatted / commented / sensible variable
name version you should be able to get from the dev. site.

Cheers -Terry

Edward K. Ream

unread,
Feb 21, 2012, 11:36:49 AM2/21/12
to leo-editor
On Feb 21, 9:13 am, "Edward K. Ream" <edream...@gmail.com> wrote:

> 2. Assign the return value of an anonymous function to your namespace
> object:...

> Note the very last line with the closing curly brace and then the
> parentheses ().

Another *visual* pattern in the MooTools sources is that quite a bit
of the "code" is really dictionary syntax. This is easy to miss the
first time around. For example, the argument to the new Class ctor is
a dict, rather than "real" code. For example,

Fx.Tween = new Class({

Extends: Fx.CSS,

initialize: function(element, options){
this.element = this.subject = document.id(element);
this.parent(options);
},

set: function(property, now){
if (arguments.length == 1){
now = property;
property = this.property || this.options.property;
}
this.render(this.element, property, now,
this.options.unit);
return this;
},

start: function(property, from, to){
if (!this.check(property, from, to)) return this;
var args = Array.flatten(arguments);
this.property = this.options.property || args.shift();
var parsed = this.prepare(this.element, this.property,
args);
return this.parent(parsed.from, parsed.to);
}

});

It took me awhile to see this. Before that Aha, the commas were a tad
confusing ;-)

Edward

Edward K. Ream

unread,
Feb 21, 2012, 11:38:28 AM2/21/12
to leo-editor

On Feb 21, 10:16 am, Terry Brown <terry_n_br...@yahoo.com> wrote:

> Surely the MooTools source in available in non-minimized form

Yes. I foolishly grabbed some MooTools distro, rather than the
commented sources.

Now I'm studying the "real" sources.

EKR

Edward K. Ream

unread,
Feb 21, 2012, 11:48:56 AM2/21/12
to leo-editor


On Feb 21, 9:33 am, "Zoom.Quiet" <zoom.qu...@gmail.com> wrote:
> 2012/2/21 Edward K. Ream <edream...@gmail.com>:
>
> > I've got to learn javascript in order to read the MooTools sources :-)
>
> - life with learning, forever ;-)

Thanks to you and Terry for all these suggestions.

Before I lose the link, I found a good learning javascript on this
MooTools page:

http://mootools.net/blog/2007/06/05/help-i-dont-know-javascript/

This has links to a ton of good stuff, including probably the videos
you mention.

Now that I can *look* at real JavaScript code without freaking, is
time to start real learning.

BTW, I always like to start with the sources in order to get some feel
for the "weight" of code. In this case, MooTools seems like a fairly
thin wrapper, with what naively seems expected classes. My only
reason for being interested in MooTools is that Bret apparently uses
them.

Edward

Edward K. Ream

unread,
Feb 21, 2012, 11:50:50 AM2/21/12
to leo-editor
On Feb 21, 9:23 am, "Ville M. Vainio" <vivai...@gmail.com> wrote:
> I know you have a reason to learn javascript in particular, but I
> recommend looking at CoffeeScript as well. It's the better javascript

Thanks, I will. And what about Qt? Doesn't it have animation
capabilities?

EKR

Kent Tenney

unread,
Feb 21, 2012, 11:51:40 AM2/21/12
to leo-e...@googlegroups.com

Edward K. Ream

unread,
Feb 21, 2012, 11:54:55 AM2/21/12
to leo-editor


On Feb 21, 10:50 am, "Edward K. Ream" <edream...@gmail.com> wrote:
> On Feb 21, 9:23 am, "Ville M. Vainio" <vivai...@gmail.com> wrote:
>
> > I know you have a reason to learn javascript in particular, but I
> > recommend looking at CoffeeScript as well. It's the better javascript
>
> Thanks, I will.

A better JavaScript syntax. Totally cool. Many thanks for suggesting
it!

EKR

Edward K. Ream

unread,
Feb 21, 2012, 11:56:04 AM2/21/12
to leo-editor
On Feb 21, 10:51 am, Kent Tenney <kten...@gmail.com> wrote:
> MooTools vidhttp://www.youtube.com/watch&v=6nOVQDMOvvE
>
> Crockford: Javascript the good partshttp://www.youtube.com/watch?v=hQVTIJBZook

Now that Downton Abbey is finished for this year I know what kinds of
vids I'll be watching in the evenings.

Edward

Kent Tenney

unread,
Feb 21, 2012, 12:12:53 PM2/21/12
to leo-e...@googlegroups.com
On Tue, Feb 21, 2012 at 10:56 AM, Edward K. Ream <edre...@gmail.com> wrote:
> On Feb 21, 10:51 am, Kent Tenney <kten...@gmail.com> wrote:
>> MooTools vidhttp://www.youtube.com/watch&v=6nOVQDMOvvE

This is old, very web-centric

>>
>> Crockford: Javascript the good partshttp://www.youtube.com/watch?v=hQVTIJBZook

Timeless

>
> Now that Downton Abbey is finished for this year I know what kinds of
> vids I'll be watching in the evenings.
>
> Edward
>

Ville M. Vainio

unread,
Feb 21, 2012, 2:11:50 PM2/21/12
to leo-e...@googlegroups.com

I tend to think that js is a horrible language if you are coming from the structured, neat world of python.

CoffeeScript fixes this problem.

HansBKK

unread,
Feb 21, 2012, 9:13:15 PM2/21/12
to leo-e...@googlegroups.com
I don't know about from a "programming elegance" POV but from an enduser functionality one, check out Tiddlywiki as a good example of javascript functionality.

IMO the developer community got a bit sidetracked with many experiments in server-side storage etc, so the mainline "everything in one HTML file" still requires FF3.64 (in portable mode if you have newer FF installed) to allow for all the very useful plugins available.

Of greater interest to this crowd would probably be the new hotness v5, currently in early stages of a complete ground-up rewrite, I think using jquery and node.js? Designed to work with the new browser's more secure data handling and external data comms as well.

ne1uno

unread,
Feb 24, 2012, 12:45:50 AM2/24/12
to leo-editor

On Feb 21, 11:13 am, "Edward K. Ream" <edream...@gmail.com> wrote:
> I've got to learn javascript in order to read the MooTools sources :-)
>
> Some first steps.
>
> The MooTools sources are minimized, but not obfuscated.  Googling for
> "reformat JavaScript" took me to:
>
> http://jsbeautifier.org/
> [..]
>
> I'm still amazed that anyone can write software with a language like
> this, but now I have an inkling about how it might happen.
>
execution of javascript in a browser is another limiting factor.
speed, error reporting to just name two problems.
it would be easy to load most javascript into a QScript engine
previously loaded with mootools, prototype or other favorite
wrapper, coffee script or whatever then evaluate any node
or selected text as can now be done with python & execute script.
not sure how completely pyqt wraps QScript. I have been using
jsbn large integer javascript run inside QScript.

there are some things to notice, most javascript, especially
projects started over a few years ago, expect to be run in
a browser so they expect things like alert("") to work.
prime the engine with something like:
function alert(msg){
throw(Error(msg));
}
of course, an actual popup could be done as well.
sometimes they run code to determine which browser and
change their code on the fly these kinds of things would
have to be commented out or made to recognize QScript somehow.

QScript is mostly compatible but not 100%.
all problems that could be worked out if anyone cared.
QScript has/can be given access to all Qt slots & signals.
there are many more potential programmers of javascript looking
for a fun tool in Leo than there are python programmers.

http://altjs.org/ has a bunch of ports, forks and standalone engines
links.
also check out JSHint, a true fork of JSLint.
I can't recommend a test harness project, there are many, I run
tests outside using javascript to provide the answers.



Ville M. Vainio

unread,
Feb 24, 2012, 2:27:45 AM2/24/12
to leo-e...@googlegroups.com
Also, if you want to use javascript and deploying in native gui
environment, QML is a great playgroud.

E.g. PyQt can embed a declarative view, so the leo environment may
contain windows showing QML content (I have platted implementing an
advanced search dashboard (like Nav tab, but with full window and
showing results like google search) for Leo in this manner, but I
never had time for this).

Reply all
Reply to author
Forward
0 new messages