I recently got involved with the jQuery Project and the PromoteJS movement has inspired me to spend some time writing a free, comprehensive book on JavaScript fundamentals for beginners (I feel you need to understand what JS is about to make the most of libraries).
What I would like to target are topics that both total beginners and those that know jQuery, but not the underlying JavaScript would find both educational and useful to know.
What topics would you suggest this cover?.
Off the top of my head, Variables, Expressions, Statements, Functions, Objects, Closures, Scope wouldn't be bad additions, but I'm wondering if going beyond this to cover inheritance, development patterns/anti-patterns etc would be overkill.
Again, your thoughts and comments on this would really assist in these early planning phases. Thanks!
There's already a great, free Javascript book actually.. http://eloquentjavascript.net/contents.html
EDIT: There's also already a free great jQuery fundamentals book:
http://jqfundamentals.com/book/book.html
Related
I have completed codeacademy twice, freecodecamp twice and read a few online articles...I believe I now have a good understanding of the fundamentals of Javascript.
However, I feel lost in terms of where to go next. People say build projects, but where do I start? How do I plan? Even though I know the fundamentals of Javascript, I still feel there is a lot to learn. I feel like I will only truly start understanding Javascript once I start putting projects together but I cant think of any.
Also, codeacademy, freecodecamp and these other online course websites dont seem to really teach DOM manipulation. Is there any online coding sites, similar to the ones mentioned, which will allow me to practice DOM manipulation?
I would be hufely grateful if people who have developed their understanding in Javascript can give me some advice based on how they did it.
I am just sitting here staring at my laptop and going back and forth. I cant really seem to figure out what to do next, now that I have gained a basic understanding of the core concepts of Javascript. Please guys, help!
This is not a very good question, but I still would like to try and explain.
Questions you need to ask yourself
Frontend or backend js?
I assume frontend based on the "DOM manipulation" part, but there is also Node.js for the backend with it's own unique API to use and interact with the operating system.
Do I want to use libraries and/or frameworks
Depending on your needs and preferences you will come in touch with these things, they all have their own learning curve, on top of learning js. Libraries are mostly just function in order to help you. However frameworks like Vue and Angular require a way of writing your code that is like it's own language. (opinionated)
What version(s) of js and browsers do you want to support?
Javascript has evolved over time and the javascript engines in browsers as well. Older IE browsers will be harder to support without the help of a library like jQuery.
Now about the learning part and where you can practice.
There are probably thousands of great sites to practice, however I will give you my favorites.
The stackoverflow documentation on javascript (top navigation on this page)
I will get hate for this: W3Schools
To read the docs on Mozilla
interactive on both codeschool and codeacademy
JSFiddle for practicing in a closed environment
https://bento.io/topic/javascript
https://learnxinyminutes.com/docs/javascript/
http://www.allitebooks.com/ for specific ebooks
Have a look at what frameworks are popular nowadays and why. If they suit your needs. Learn them one or two at a time but not more, so you won't mix them all up in the end. Try to at least understand OOP in javascript even if you don't intend to use it later. Anyone feel free to expand this answer because it is hard to cover it all myself.
I know I'm coming at this the wrong way. You're supposed to learn Javascript first, then start looking at Coffeescript when you get tired of braces and variable declarations. Me however, I'm a somewhat experienced Ruby and Python programmer but with zero Javascript fluency who looks to get into web scripting (mainly through Rails).
I'm convinced that Coffeescript is the way to go for me, but I'm hard pressed to find a tutorial that does not assume significant Javascript familiarity. Most of the tutorials I have seen explain Coffeescript's peculiarities in detail only to gloss over such minor topics as how to actually write web applications.
So, do you know of any Coffeescript tutorials for people who don't know JS to begin with?
You probably don't want to hear this, but I'm going to say it anyway: you should still learn JavaScript first.
JavaScript is a little unique from other languages, in that it has a monopoly over browser scripting. There is currently no other language that can be used in a browser (unless it uses a plugin, or the interpreter is in JavaScript!). As such, for any project that needs to do any amount of client-side scripting, JavaScript knowledge is a must.
You're probably thinking "Hey, I know Python and Ruby, and I never had to learn C or assembly!", which is of course true. But, those language never had a monopoly over their domain. Python can be used for the same things as C, in many cases. The platform doesn't care what language you use, as long as it supports it.
And the browser platform only support JavaScript.
CoffeScript is an abstraction of JavaScript. Although CoffeeScript is compiled into JavaScript, when you're trying to figure out that obscure JavaScript error, or debug a generated function, or are wondering why there are two levels of unnamed function nesting, you're going to want to know what's really going on.
Now, I'm not saying that you have to become a JavaScript Ninja (although I'd recommend it), but what I am saying is that you should come to grips with the actual web language first.
Learn JavaScript, learn its concepts (it's a very fascinating language, in my opinion, once you get past some of the deficiencies), and then use CoffeeScript to abstract away the technicalities.
Since you did ask for a tutorial, though, here's some: First, the Mozilla guide to JavaScript is quite nice. If you want some more advanced topics, there's also an interactive tutorial made by John Resig. And finally, here's a bunch of CoffeeScript tutorials that you probably already know about.
I suggest the free online Smooth Coffeescript book (based on Eloquent Javascript).
No previous programming knowledge is required. CoffeeScript lets you
write web oriented applications simply and elegantly. It is closely
related to JavaScript but without its quirky corners.
Smooth CoffeeScript is a book about CoffeeScript and programming.
Start with programming fundamentals, learn about functional
programming with Underscore and problem solving, study object
orientation and modularity. It covers client/server web apps with
Canvas and WebSockets.
I had a background in Python, ActionScript and Java. I started directly learning CoffeeScript with no intention of learning JavaScript. I learned a bunch of JavaScript along the way but I think it's perfectly OK to set out to learn CoffeeScript directly.
I was first attracted to Smooth CoffeeScript because it claimed to be targeted at folks trying to learn CoffeeScript directly. However, the style of writing was not to my liking. YMMV.
Besides, with my Python background, I found that I didn't need much help with the syntax. I got all of the syntax help I needed directly from he CoffeeScript web page. I mostly needed help with the platform (cake, development environments, testing, etc.) which is covered quite well on the CoffeeScript web page, and what else I needed I got from a couple of other books. My favorite teaching book is The Little Book on CoffeeScript (read in an hour) and my favorite reference is Trevor Burnham's Pragmatic Bookshelf book on CoffeeScript which taught me jQuery from the CoffeeScript perspective.
Another thing that helped me ramp up quickly was to fork/upgrade a few of my own tools in CoffeeScript. I forked the CoffeeDoc repository on github to create my own version and I eventually re-wrote it to create CoffeeDocTest which is like Python's DocTest except for CoffeeScript. My upgrades to the Coda syntax mode for CoffeeScript were accepted back into the master branch via github's pull-request mechanism... after a code review and some cleanup. Looking at someone else's code really helps you learn the idioms. Getting a code review from someone in the know helps even more.
Your question doesn't make a lot of sense to me because CoffeeScript is JavaScript. To know one is to know the other. It may sound counter-intuitive for me to suggest that the best way to learn CoffeeScript is by cracking open a JavaScript book but the languages are one and the same.
I know they look different, but the differences end at the syntactical layer[1]. Add some semicolons, curly braces and parens to CoffeeScript and you're more or less there. So go and learn JavaScript, and you'll find you're learning CoffeeScript too.
You could also learn CoffeeScript and incidentally pick up JavaScript. This may be a little bit more difficult though, since until source mapping is implemented, debugging can only be done in JavaScript (and you'll be debugging a lot, I assure you ;-)).
[1]: Apart from maybe class definitions which are slightly more complicated.
What are the best resources on Design Patterns catering specifically to web development with JavaScript and JQuery?
I'm particularly interested in information on programming my own libraries, reusable components, widgets, etc. and the merits of various techniques (for instance in the case of components/widgets comparing those employed in jQuery UI vs. rolling your own).
I'm also curious about the intricacies of JavaScript as a programming language, and the finer points of object-based programming with JavaScript.
Big fan of Douglas Crockford and the Yahoo video series. Looking for additional examples.
One very instructional thing you might do is read over the jQuery source code. It's a treasure-trove of interesting and efficient coding techniques. You might then broaden your horizons by reading over the source for Prototype or some other library.
The nice thing about reading good code and trying to understand it is that it's really real; it is the good code, so you bypass a layer of rhetoric.
Similar to Pointy's answer, you should take a look at these two videos, which help you understand the source code of JQuery (it might be difficult for some to dive into the code from start to finish):
10 things I learned from the jquery source
11 more things I learned from the jquery source
Paul Irish, a member of the JQuery team, goes through some very interesting design patterns in the JQuery source in a humorous way. I think he picks some really interesting spots, which really gives you a lot of usable knowledge you can use elsewhere.
It's probably the resource that has given me the most knowledge about a particular field in the shortest time. It's just really valuable.
This guy has some really good stuff as far as the "intricacies of JavaScript as a programming language" part of your question is concerned:
http://devlicio.us/blogs/sergio_pereira/default.aspx
e.g.
http://devlicio.us/blogs/sergio_pereira/archive/2009/02/09/javascript-5-ways-to-call-a-function.aspx
The comp.lang.javascript group on Usenet is an excellent resource: pretty much everything related to browser scripting has been discussed there and is available in the archive, and some of the regulars, while not always the most polite, are incredibly knowledgeable.
It seems that many of the JavaScript questions are answered by the simple use of pushing a library, without taking into account the person asking the question. I think libraries are great myself, but sometimes I think that we're too quick to throw a library down someone's throat.
Imagine a person asks a question and it's apparent that they barely know JavaScript. They're just using code they found and piecing it together with other code, and really have no firm foundation to work on. To add a library on top of that flimsy foundation seems like a disaster waiting to happen.
With that in mind, what JavaScript / programming / web browser concepts do you think are necessary to understand before a library/framework is introduced to a person? Should a framework / library be part of the learning process?
I don't think someone has to grasp absolutely everything to use a library, I just think some people would be better served with a "Library X might help solve your problems, but before you do that, you might want to read up on the following concepts", rather than just a "use library x" answer.
What you should learn are some fundamental programming techniques:
closures
continuations
function objects / what a "first class" function is
JavaScript object oriented design
difference between "prototype" languages and traditional Object Oriented languages
Absolutely firm grounding in HTML and CSS: standards, tricks, and various browser compatibility issues
UI Design Principals
With that in mind, today its practically impossible to develop without a library. I recommend Dojo but others use jQuery, YUI, etc...
When choosing a library, you need to have a firm understanding of what problem you are trying to solve. Is it browser abstraction? dealing with communication? charting? animations? graphics? UI toolkits?
Each library has its "niche", so you need to really know what you're specific problem domain is and in turn choose a library accordingly.
I would suggest using the brick and mortar kind of library and find a good book on JavaScript.
I think that one reflex reaction to a "how do implement X" is "don't reinvent then wheel", and this is generally good advice. I think that if you have to ask how to do something reasonably complex, and it's already in a library then you're going to waste massive time trying to piece together something from a few answers on SO.
So barring the obvious: learn the syntax of the language, learn how to debug etc., by and large a library is the right answer. And that's not just to say "Use the library, disengage brain" it also means "Study the library, look at the issues it's solving - you didn't realise your problem was so complex? Well the folks who put hours and days into the library studied the problem in some detail and probably developed the library by using it extendsively. Study the implementation and learen how."
I think that studying good code is a very good way to learn.
Libraries bring similarities to browsers where so much is different from browser to browser. This is why, I'd suspect, people suggest their usage in various answers. Nothing is stoping anyone from reading a good js book if they want to actually understand what is going on, but we surely cannot shove books and tutorials down anyone's throat. You need to want to learn before that would be worth anything.
They should read this http://www.amazon.com/exec/obidos/ASIN/0596517742/wrrrldwideweb
And check out some of the links here http://www.crockford.com/
I am trying to understand the internals of how jquery framework is written and finding it hard to understand the code.
Does anyone have any suggestions regarding a good way to get started.
Thanks for all the useful input. Editing the topic since I had limited space for adding individual comments.
I have written a lot of basic javascript code.
I know basic DOM, have used event handlers, know CSS basics. I have read about many of the topics you have mentioned and I am familiar with it although not an expert and have not coded some of the advanced topics like closures. Here are the books I have used so far Head first javascript - good in the beginning as a starter.
Books my friends have recommended and I use regularly are Javascript - The Definitive Guide, Javascript - The good parts (I read this a while ago and it was hard for me at the time).
My friend just recommended Secrets of Javascript Ninja - John Resig. Seems like a good one.
I ordered the Javascript Design patterns book you recommend last week
I have read the https://developer.mozilla.org/en/JavaScript you pointed me to. I will checkout some of the other resources you pointed me to.
Let me think a little more regarding if I want to do a little more reading before I post specific questions I have on jquery.
Thanks
Susan
To comprehend the actual source would require some degree of Javascript knowledge - If you don't already know what's going on then you basically need to learn more Javascript.
Key things to learn:
Prototypal inheritance ( the
inheritance used in ECMAScript, the
core language on which Javascript is
based upon )
Lambdas ( inline functions )
Closures ( outer variables from outer scope accessible from inner functions )
Regular expressions ( used for matching the selector strings fed to jQuery )
DOM ( The DOM API which is used to interact with markup languages )
When learning, use Firebug so you can evaluate your expressions interactively and immediately see what's going on
An excellent free resource for learning that I would recommend:
http://eloquentjavascript.net/contents.html
If you're a beginner to DOM Scripting/Javascript:
http://www.amazon.com/DOM-Scripting-Design-JavaScript-Document/dp/1590595335/ref=sr_1_19?ie=UTF8&s=books&qid=1252905196&sr=1-19
If you're intermediate level:
http://www.amazon.com/gp/product/0596517742/ref=s9_simz_gw_s0_p14_i3?pf_rd_m=ATVPDKIKX0DER&pf_rd_s=center-2&pf_rd_r=0KCJ77GKHPREBFD3WAKG&pf_rd_t=101&pf_rd_p=470938631&pf_rd_i=507846
If you're past intermediate level and want to be an expert:
http://www.amazon.com/Professional-JavaScript-Developers-Wrox-Guides/dp/0764579088
http://www.amazon.com/Pro-JavaScript-Techniques-John-Resig/dp/1590597273/ref=sr_1_10?ie=UTF8&s=books&qid=1252905139&sr=1-10
http://www.amazon.com/JavaScript-Design-Patterns-Recipes-Problem-Solution/dp/159059908X/ref=sr_1_16?ie=UTF8&s=books&qid=1252905196&sr=1-16
Other technical references:
http://www.w3.org/DOM/
http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf
https://developer.mozilla.org/en/JavaScript
If you have specific questions about a certain code snippet just ask here. Another resource that I can recommend for more advanced questions would be the jQuery mailing list or irc://irc.freenode.net/jquery where jresig hangs out himself and comes by and answers questions. There are other guru ops who reside there like ajpiano/paulirish/nlogax.
If you're looking for insight about how jQuery is written, the uncompressed source code is pretty readable. There are a few books mentioned in SO74884 that are worth a read. Resig's book doesn't really cover jQuery at all, but is good about teaching object oriented javascript.
If you are having a problem understanding something in jQuery's code (why it was done/how it works), you should post a question with some code bits to Stack Overflow, asking for some help understanding it.
Why not learn from the man himself, John Resig, here : http://ejohn.org/apps/learn/
Based on that, I'd definitely get the book your friend suggested.
You can also find some more nice resources on his website, courtesy of googling site:ejohn.org/apps
I was also like you interested in how jQuery works internally, I've spent some time learning from jQuery code source and trying to understand the core architecture, then I've created a github repo how-jQuery-works to share my knowledge that I've acquired with other developers, hope you learn something from this repository.