Learning JavaScript&JQUERY&Twitter Bootstrap - Books? Resources? Tools?

Warren_Postma · October 21, 2013, 6:29pm

I am studying the code from the Data Abstract JavaScript demos. This is a pretty slick demo.

It appears to use: Twitter BootStrap, JQuery, and a few other Usual Suspects of Client Side development.

I am a delphi Geek with NO JavaScript experience. What books would actually get me up to speed building stuff like this demo? I think I need to get going on this, I’m about a decade behind the rest of the developers out there.

Some example concepts that have lost me:

DataAbstractjQGrid.js - This declares a class called RemObjects.DataAbstract.Views.JQGridView - I don’t know enough JavaScript to follow what it’s doing and why. I take it that there are no real classes in JavaScript only functions that
"Create a class-like result and return it". But that’s as far as I get in understanding this. I’m guessing that not knowing what the Prototype keyword does (RemObjects.DataAbstract.Views.JQGridView.prototype.onBeforeSubmitAdd) would be
a showstopper for understanding any OOP-ish javascript.

(Sample Code Found at C:\Users\Public\Documents\RemObjects Samples\Data Abstract for JavaScript)

Secondly, what tools were used to construct this demo? Do JavaScript Client Side developers build their stuff in a plain old text editor? What IDE or tools were used to construct the Data Abstract PCTrade sample web pages for the JS DataAbstract demos?

valeriy · October 23, 2013, 7:49am

Re books: well, tastes differ… I’ve got a feeling that John Resig is quite a guru in this area, so I got his books, read his site/blog, etc… Bootstrap and jQuery have a lot of samples to browse and pick code snippets. Also StackOverflow is a place to go.

Re prototype: in general, it’s a property of the function that could (and should) be called as a constructor. When javascript engine can’t find a property of the created object it continues searching in the constructor prototype object.

Simple ‘hello, world’ example;


function Foo() {
  this.hello = function () {
    console.log("hello, world");
  }
}
var a = new Foo();
a.hello();

and


function Bar() {
  //no hello method here
}
Bar.prototype.hello = function () {console.log("hello, world");}
var a = new Bar();
a.hello();

are kinda equivalent.
upd: first one will work correctly but litter memory with multiple instances of that hello function, that’s why only second one is totally correct.

Re IDE’s: Mostly simple text editor with syntax highlighting like programmers notepad is used. Speaking of specialized IDE, Webstorm is the best, I think, Eclipse with javascript tools is good too.