I'm looking to improve the standard of my javascript as I'm moving beyond simple AJAX forms towards much richer interactions and it's quickly getting out of hand.
There's lots of resources about how to write proper javascript, many of the best are from Douglas Crockford, but very little about relevant design patterns and how to implement them.
Do you know of any resource, books or blogs, on how to produce and manage non-trivial javascript applications?
I plan to read Pro JavaScript Techniques by John Resig as well as his upcoming Secrets of the JavaScript Ninja.
Also, in my mind, "advanced" and "JavaScript" are often associated with Dean Edwards.
EDIT: it's not strictly devoted to JavaScript, though I'm also learning a lot from 24ways.org
EDIT2: from time to time, gems also pop up from Simon Willison's feed: today Dean's getElementsByTagName() implementation and John's jQuery.require().
As mentioned :
Pro JavaScript Techniques by John Resig is an excellent book.
If you're intention is to use Javascript for more than just everyday form validation etc then I personally think understanding OO principles is important.
With Javascript being such a flexible language I would reccommend reading up on discipline and approaches to coding Javascript, not just the syntaxy stuff.
This book Pro Javascript design patterns should help there.
You're halfway there already with Douglas Crockford, but there are plenty of others writing great articles on the web.
UPDATED:
I'm finding that over and above most languanges and tech there is a real buzz about Javascript right now and it's difficult to keep up with new stuff so I tend to check out relevant news sites like Ajaxian for posts with content linking to good authors for up to to date advances with libraries, frameworks and the like.
I recently visited the fullfrontal09 Javascript conference, all the speakers there gave excellent talks on Javascript so read anything they have written!
Read up on Closures and Scope, sugaring and currying! Robert Nyman's slides from FullFontal09 should get you started
If you can stomach the tone of some of the regulars, the comp.lang.javascript newsgroup is an excellent resource. I have learned a great deal there.
Regarding design patterns, there is a book called "Pro JavaScript Design Patterns" by Ross Harmes and Dustin Diaz, although having read it I wouldn't recommend several of the practices it suggests.
Make sure to also have a look at free web toolkits that are available, such as: Google Web Toolkit and Dojo or Jquery. These will help your application development efforts go much faster.
Also check out the Javascript tutorials at:
http://www.w3schools.com/ajax/ajax_intro.asp
Hope that helps. :)
Apart from books, i would say start hacking the existing JS libraries (like amazing JQuery). Its a better way to look around the power of javascript..
Lynda.com has an introduction to jQuery (and other Javascript classes). It provides a decent introduction as you go deeper and read the excellent books already recommended.
Here's the link:
http://www.lynda.com/home/DisplayCourse.aspx?lpk2=48370
This was only published recently (8th Dec.) but I've already found it extremely useful as a refresher of common JS practices.
http://stevej.name/js_executable_guide.html
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I'm struggling to find a way of writing good JavaScript code that would be efficient, widely accepted by other developers and not very ugly.
Until recently, what I used were just literal objects and bits of jQuery but after reading Douglas Crockford's "JavaScript: The Good Parts" I now fully realize that there's more to JavaScript than AJAX, DOM modifications and simple animation.
The problem is that JavaScript seems not much standarized. The amount of OOP/inheritance patterns available overwhelms me. I'm not used to every framework/library providing its own impementation of inheritance. I also don't want to make a wrong decision regarding such things because this would mean rewriting all the code in case of some problems.
So what I'm looking for are existing open source web applications that use JavaScript heavily, if possible on the client side, to see what patterns are used in real projects. I would like to see the code of web applications, not frameworks or libraries. I don't mind though if those web apps are based on some framework (and if it's Dojo or RequireJS it'll be even better because I'm using them ;)
What I always recommend to anyone who is interested in this kind of thing is: STICK TO WHAT YOUR TEAM DOES. If they use camelCase for methods, you use it. If they use snake_case for variables, you do it. If your team prefers spaces over tabs; use them.
Never go into a stablished team with standardized style changing things because it looks better unless it's causing heavy problems.
If you're not working on a team and you're interested on using a coding style; then use the style of the libraries you use the most.
If you use jQuery stick to jQuery Coding Style Guidelines
If you use Closure Library use JavaScript Google Coding Style
If you use MooTools Library use MooTools Coding Style Guideline
Organization wise, Closure is the best.. but to me somehow it feels like I'm reading JAVA instead of javascript. Go figure.
Yep. There are a few JavaScript gurus that have written alot about how to write JavaScript, about prototype based OOP with JavaScript, even about how indenting and naming variables should be done.
However, if you are looking for a large implementation of JavaScript to study as an example, I would look for HTML5 game implementations. It's practically guaranteed that you will find a large enough, well written example that is not minified.
If you are interested in JavaScript standards I would check out commonJS. They have a lot of good ideas about how JavaScript should be done.
BravoJS is a good module implementation for the browser.
As for examples jQuery's source code was mentioned in the comments. jQuery does a good job but it is I would also check out Narwhal JS for examples of how things should be done.
Here is a good free design patterns book that I found helpful Essential JavaScript And jQuery Design Patterns.
You wont find one solution to your problem and that is how JavaScript is designed. I would recommended experimenting. I find that Douglas Crockford has a lot of great ideas but that does not mean you have to follow him to the letter.
A good project is : http://impactjs.com/
A good reading is : http://addyosmani.com/blog/essentialjsdesignpatterns/
Great question. I couldn't find one example of a well written object oriented open source application. Tiny MCE was so-so, but I wouldn't consider it well written: http://www.tinymce.com/
However, I have written clean, well factored object oriented javascript at work. It's proprietary so I can't share it, but I can explain what worked for me to learn how to do that:
1) Read the mozilla javascript object oriented programming tutorial. Their explanation of javascript inheritance is exactly what google closure uses. Personally I think what Crockford calls pseudo classical is easiest to read and maintain since 4 of the 5 other programming languages I know use classes (java, c#, python, and php. perl's the oddball here with no classes either).
https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript
2) Read the book 'Object Oriented Javascript' by Stoyan Stefanov.
3) Take an existing procedural javascript code base and refactor it to objects. Use the tips in 'Clean Code' by Robert C. Martin as they apply to any programming language.
4) Structure your code so it has many different files similar to how you'd use classes in a language with classes.
5) Implement dependency injection without an IOC container by creating all your objects at a top level and feeding them down into the objects that depend on them.
There's a lot more, but hopefully this is a helpful start.
Here is what I feel is the correct way to implement inheritance in javascript. this is from the google closure library:
goog.inherits = function(childCtor, parentCtor) {
/** #constructor */
function tempCtor() {};
tempCtor.prototype = parentCtor.prototype;
childCtor.superClass_ = parentCtor.prototype;
childCtor.prototype = new tempCtor();
childCtor.prototype.constructor = childCtor;
};
Coincidentally, today on SlashDot there is a review of the 6th edition of Javascript: The Definitive Guide, which the reviewer there says "retains its crown as the ultimate reference resource for JavaScript programmers." It's 1,100 pages.
Yes, this isn't the sample app you were seeking, but the book does have a lot of examples and advice about best practices.
There are several ways to learn how to write good JS code.
You can read books. The best one about organization of JS code and about common patterns including inheritance is JavaScript Patterns by Stoyan Stefanov.
Another good way to learn is just look through the excellent code of other developers and using it. The best library I've seen from the point of code organization and using of patterns is Google Closure Library. It is used internally by Google in the RIA like Gmail Google Docs.
A kind person in irc suggested this eBook and I found it verry helpful.
Learning JavaScript Design Patterns
A book by Addy Osmani
http://addyosmani.com/resources/essentialjsdesignpatterns/book/
Which is better, learn the basics of JavaScript, and then jQuery
Or master JavaScript and then learn jQuery
Now I know the basics well But I did not write many exercises of javascript
thanks
sorry about My bad English
It depends on what you want to do with javascript.
If you want to go deeper into the javascript, want to experiment with it, then become a master in javascript. In that case I will suggest you to read this excellent book by Douglas Crockford. Becoming a master of something never hurts. But if you want to become a developer and want to only build websites with javascript, then learn the core basics and move on to learning jquery.
Again, whatever you do, you should have a clear understanding about the basics of javascript. You should, at least, read this excellent article and understand how objects in javascripts work, what are prototypes, what datatypes are there. There are also many other resources on javascript on MDN and Opera Developers Network. Google also has some excellent resources on javascript.
Always better to learn the language before learning a framework, as JQuery isn't the only JS framework.
If you know the language, you'll be able to understand whatever framework you want to use.
The references I have used in the past, ending up with the good understanding of them both are as follows:
Javascript: http://eloquentjavascript.net/
JQuery: http://jqfundamentals.com/ by Rebecca Murphey.
Hope these help you too.
I would strongly recommend you start with reading this book on Javascript > Javascript: The Good Parts
It's the best book out there to understand the fundamentals of Javascript and how it actually differs from the rest of the language. What are the good parts and what are the bad parts.
Once you are done with that, then you'll be better off learning jQuery and start doing examples.
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.
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.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
What's a good book, or a good way to learn HTML, XHTML, and CSS? I recently graduated from school and I only know Java, and C++.
I would like to learn some web development so I am looking for some good books and resources.
If you ask me, whatever introductory level book you can find at your public library on html or css or "web programming" is a great place to start as far as books go. Typically, those kinds of books are a little bit "stale" as far as you're likely to find something that's not the latest greatest version of HTML, but for the most part very few parts of the HTML spec get deprecated or removed from version to version, so anything you'd learn from slightly obsolete books will generally still exist, but
There's a ton of great stuff online too about every specific topic you could want, for the most part, you could get by without buying any books
Here's a link (http://jwinblad.com/webprogramming/webdesign.php) to some of my personal bookmarks on web-development that I like to keep handy like the specifications for CSS and HTML that enumerate every possible tag or CSS property and give you a brief description of what each one means and is used for.
Of course, actually trying out different tags and CSS experimentally is sometimes much more helpful in learning. If there's a website that does something cool, you can often times learn how to they do their cool feature by viewing the source-code of the page or its style sheet using the tools provided in your web-browser. Create a hello-world demo-page and then work from there on adding extra tags and a style sheet and so on. If there's something specific you want to do, you can search for tips on how to do that particular thing
If you already know Java and C++, it should not be difficult to learn HTML/XHTML and CSS. But if you're looking at learning this with the hopes of it being a career direction or paying job, you will probably want to delve into more than just HTML, nobody seems to be looking for people to write webpages that look like they came out of 1998 or 2001, you can get nicer looking stuff that that with almost no HTML knowledge using WYSIWYG tools...once you get the basics of HTML understood and know where to look up tags and CSS descriptors, you may want to branch out either into a client-side scripting language like Javascript or a server-side programming language or framework (PHP, Ruby on Rails, etc) or trendy web-technology like Flash. It kind of depends what your goals are in learning web-programming.
If you are interested in online resources, The SitePoint Reference seems good. It covers HTML, CSS, and JavaScript. The information seems clear, and there is the capability to add user notes as well.
If you prefer printed material, I started out with HTML for Dummies - despite the common opinion on For Dummies books, they are actually useful for picking up a new subject. I keep handy the HTML/XHTML Definitive Guide and the CSS Definitive Guide - both from O'Reilly. Those two are good for references.
For JavaScript, I recommend Simply JavaScript from SitePoint, and Dom Scripting from Friends of Ed.
Based on personal experience, coming from no programming experience at the time:
View source is a great tool. Read other people's code. [EDIT: To access view source, right click on the page in your browser and choose view source from the context menu. Alternatively, you can look in the browsers "Page" menu, although the menu name and placement varies by browser and OS.]
I used a tutorial site on geocities (may it rest in peace) but there are many other good sites. Use a search engine.
Books - Jeff Zeldman's book "Designing with web standards" was one of my first reads a number of years back. Books do tend to get outdated, but that one is a keeper. I think that there is a new edition in the works. Also, Visual Quickstart books are a personal favorite, but hey teach particular things and not the whole languages. There is a Visual QuickStart book with fairly recent code and a great reference for your desk. ( I forgot the title...)
good luck! Bing is your friend!
If you know programming languages like Java, then I'd recommend checking out the HTML4 spec on the W3C site.
It is as close as you'll come to the official docs.
I'd also recommend learning the differences between HTML and XHTML, why XHTML has no benefits to today's web (IE, content types, error handling too unforgiving) and also I'd look into HTML5, just to keep current.
Here is a quick overview of differences between HTML and XHTML that I found whilst surfing Jessica's website.
IMHO, the best way to learn it is by doing it, make a plan for a website, and have a go at making it happen (repeat as required), by the time you put html, css, javascript, and eventually a server side framework together, it can be a bit of a dark art, and there is much learning that can only happen when you are actually doing it (and feeling the pain of IE 6).
As mentioned by others, Sitepoint, Smashingmagazine, W3Schools (to name a few) are all handy references.
Would also suggest learning jquery as you learn javascript, some good starting tutorials here http://docs.jquery.com/Tutorials.
Also install firebug in firefox so you can start digging under the hood of sites you like.
With regard to books, from personal experience, I have a stack of outdated technology specific books that I have not touched for quite a few years. The ones that focus on why rather than how get much higher rotation.
If you have learnt java and c++, the mechanics of the technologies shouldn't be too hard to pick up, but many programmers tend to suck at things related to UI, so if you were to get a book, I would recommend "Don't Make Me Think" or other books related to usability and interface design.
HTH. Good Luck.
I'd recommend Professional CSS: Cascading Style Sheets for Web Design. There apparently is a second edition now, but my first edition has:
Chapter 2: Best Practices for XHTML and CSS
The book (first edition) is basically comprised of case studies of css and xhtml implementations at ESPN, PGA Championship, and the University of Florida, with many great tips and explanations of why things are done a certain way.
I'm working through Head First HTML with CSS & XHTML. I have found it to be quite useful in staring me off with these technologies.
If you're looking for reference information, W3 Schools is a great place to start. Smashing Magazine is great for pretty much everything to do with web development. I'd also recommend A List Apart, which often has great articles about some of the more difficult CSS concepts. And last, but certainly not least, I'd check out the articles on 24 ways; while they only have 24 updates every year (in December), they are written by some of the best people in the industry.
Ans since you're interested in web development, you'll probably end up wanting to learn some Javascript as well. ppk's site quirksmode.org is a great place for that.
Well, I hope this can be some help to you, and wish you best of luck. Also, of course, you can always ask any question that you have here at Stack Overflow.