Coffeescript tutorials that don't assume Javascript knowledge - javascript

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.

Related

really struggling to find the next path to develop my javascript knowledge

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.

the right time to use coffeescript

So basically I have a number of concerns holding me back from coffeescript:
I'm not really an expert in js yet, even though I'm using it for around 3 years now I still feel like I'm missing something important about it. Since it's mostly a supportive technology for me I never find time to go in depths of js ( which, I admit, might be a wrong attitude ).
My js knowledge will get even worse if I'll start Using coffeescript
I'm not sure if I can actually trust coffescript, meaning the js code it compiles to
At times I don't understand the js code coffeescript compiles to and even worse - why it compiles like that.
I'd like to know your thoughts on the above points. The crucial one is:
How using coffeescript affected your knowledge of js? And how important you think it is to fully understand js before switching to coffeescript?
You should understand what problems Coffeescript is supposed to solve.
And for that, you should have a basic knowledge of javascripts' "bad parts".
I suggest reading Douglas Crawford about that (there's a book, but also a lot of resorces on internet. Just google "javascript bad parts").
Basically, the idea is that "Underneath all those awkward braces and semicolons, JavaScript has always had a gorgeous object model at its heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way." (taken from coffeescript's site).
There's a tool to assist programmers to avoid javascript pitfalls called jslint.
This tool analizes your code and gives warnings about common mistakes, such as global variables, semicolon insertions, namespace pollution, etc...
Coffeescript translates to javascript. But the javascript it generates is a cannocical subset, highly compliant with jslint.
What's more, it generates javascript code valid on all browsers.
So it is not just a nice syntactic sugar layer, it really helps generate solid code.
I'd like to address your concerns.
1) If you've been using JS for three years, you probably have a pretty solid understanding of JS. If you haven't gained a solid understanding yet, it may be time to supplement your knowledge with one of the good JS books.
2) Coffee-script probably wont make your knowledge of JS worse. The way you design Coffee-script applications is the same way that you would design a JS application (for the most part), so the design skills you gain will transfer over. Program design, in my opinion, is the most important aspect of programming.
3) Why don't you trust the JS? Why do you trust any of the other compilers/interpreters/other tools you use? I doubt Coffee-script is bug free, but many people use it for many purposes. This means that a large set of behavior has been tested, often in production, so your use case has probably already been tried and tested.
4) Of course the JS generated by Coffee-script will look foreign to you, since the rules for generating it don't have human readability as a priority. Reading it, however, will increase your knowledge of JS as you see how peculiarly written programs run. This brings us back to point 1.
I think that the crucial thing to remember here is that Coffeescript IS javascript. Every Coffeescript statement or magic operator has a distinct concrete representation in Javascript. For instance (x) -> x * x in Coffeescript will translate directly to function (x) { return x * x; }.
You can't really write Coffeescript without being aware of the Javascript it will generate. For one thing, the generated Javascript is what you will have to debug. If anything, I believe that writing Coffeescript could possibly improve your understanding of Javascript, because it forces you to make decisions that are unique to Javascript. For instance, when in Coffeescript, you decide to use => instead of -> in reality you are making a decision about whether or not you want to bind this - a very real Javascript problem.
When (or if) to start using Coffeescript? I think the answer to this is more or less up to you. Try it out, and if you feel that it is easier to get your tasks done using Coffeescript, then stick to it. If you find it difficult to write the code in a different language from the one that runs (and thus the one you have to debug), then go back to Javascript.
So here's what I think about the topic:
JS is not a supportive technology (support for what?). It is a language mostly used on front-end and there is a new trend of using it on back-end. Since browser do not support CoffeeScript natively than unless you use it as a back-end then I don't think there is a point in using CoffeeScript. Although learning new language is always a good idea.
Not at all. Actually using CoffeeScript is like using different language. Learning one cannot make you dumber in the other. Unless you stop learning the other one.
There is no evidence that CoffeeScript compiles to buggy or slow code. Actually I am using CoffeeScript for some time and I didn't observe any performance hit.
Actually you don't need to understand why it compiles like this. If you are using CoffeeScript on back-end then you don't even have to look at the code it compiles into (you only need the source code). As for using it to make browser scripts then yes - it may be a bit difficult to work with it (debug). That's why I always advice to write normal JavaScript for browsers and use CoffeeScript on back-end.
Now as for the last question: I don't think that CoffeeScript affected my JS knowledge at all. I treat them as separate languages. Also you don't need to know JS in order to switch to CoffeeScript (although you should) unless you want to use CoffeeScript on front-end.
Also mastering JavaScript is always a good idea, no matter what. :)

What to learn before using a JavaScript library / framework?

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/

Learning JavaScript for a total non-programmer

I code CSS/XHTML like it should be my mother language, and I do write valid, semantic code following guidelines of accessibility and such.
But I want to learn Unobtrusive JavaScripting, but with a total non-programmer brain I need some motivation / tips / etc., like what's the best way to learn it, and how long does it take/did it take you before you could feel the power of knowledge? :)
PS: I do have an understanding on how JavaScript works and changes the DOM etc.. I think it's more about learning the syntax by head instead of having to look it up.
See also:
Suggestions for someone starting javascript programming.
Just use it. Really, the more time you spend reading and writing the language, the more natural it becomes. Use Firebug or an equivalent console to test short ideas; take an existing web page and wire up events interactively from the command line, get used to the idea of writing behavioral code as a separate process from writing markup.
If you want a good book, i can recommend the excellent jQuery in Action - yes, it's targeted at jQuery users, but the concepts apply regardless of your choice in libraries.
Motivation, sorry can't help there.
Syntax is learned by rote. The rules are simple, and reasonably consistent, so in truth syntax isn't that hard.
What you conflate with syntax are likely the other aspects like what properties are available on what objects, what functions to call, what does your framework provide. That, again, is basically rote memorization.
Many frameworks add a little bit of syntax through clever use of the JavaScript syntax, and you'll need to learn those as well.
But when it all comes down to it, the only way to learn this stuff is to use it.
You can't read about it, you have to do it.
Find an issue that you want to work on, a feature for your site or whatever, and attack that.
If you find a tutorial or whatever on line that does what you want, TYPE IN THE CODE, don't cut and paste it. As you type it in, question every symbol or character, try to understand why you're typing what you are typing.
Make an effort to change things, even if it's just variable names, because then you get a better idea of what things are being used for, and how they're referenced. It also lets you focus on a small part of the larger program.
If you're changing the "window1" variable to "myWindow", then at least you can look at the code as "blah blah blah window1 blah blah window1" without having to understand all of it.
Start small, don't worry about "doing it right", etc. so much as just being successful. If the way it's done doesn't bother you, then you're good. If you look at it and go "That's not quite right" because you learned something later after you started, then go back and clean it up.
At this stage, function is greater than form. Much of the form simply comes from experience.
Depends on what you want to do. Are you a successful web designer who's considering getting into the development side? Forge ahead, but tread cautiously. JavaScript can be easy to start with, but it can get ugly very quickly. And it's very different from any server-side language (including Java). Some of your JavaScript skills will translate to other languages, (conditional and control-flow operators, for example). But some things are unique to JavaScript and will require some relearning if you move to another language.
Also, some things in JavaScript won't completely make sense unless you've done object-oriented development; even though JavaScript is "prototype-based" rather than strictly object-oriented, without the OO concepts to relate to, the prototyping system may be difficult to understand. The typing system also may not make much sense if you don't have a lot of experience with different typing systems (static vs. dynamic, explicit vs. implicit).
Use a good framework like jQuery or YUI, but be sure to understand what's going on behind the scenes. Shog9's suggestion to use FireBug is a good one, too. It will show you what's going on (without having to do a lot of alert() statements in your code).
Your HTML DOM and CSS experience will help some, but only in the sense of understanding what the JavaScript is trying to do. Having written HTML and CSS by hand won't help you learn to write JavaScript; HTML and CSS are document markup languages, not imperative programming languages.
So go for it, but don't expect it to be easy. You may make a lot of quick progress, only to find that you're not as far along as you think, and that things don't work the way the appear to. But with enough effort and research you'll probably get there.
I think learning Javascript is a great idea if you are all ready doing HTML and CSS. Javascript is a cool, but quirky language. Most people that use don't really know how to write good JS code. I highly recommend watching Douglas Crockford video, see http://video.yahoo.com/watch/111593
They will give the real scoop on Javascript.
I've recommended JavaScript: The Good Parts before (and can't recommend it highly enough), but if you're new to programming I suggest starting with Head First JavaScript.
(source: oreilly.com)
I think you've got an abundance of great answers and resources already, but I'd like to chime in, too, since I've seen a couple of jQuery recommendations:
I love jQuery, too, and use it nearly daily. That said, for a beginner, I would recommend that you be comfortable with javascript proper first before diving into jQuery. Being comfortable with the syntax, variables, scope, and at least some DOM concepts will greatly improve your understanding of how to do what you want with jQuery. If you try to speed too quickly past the fundamentals, you'll definitely get stuck on some common misunderstanding that jQuery won't be able to help you with.
http://codeavengers.com level 1 JavaScript is great for the complete beginner. I created the courses and have had lots of great feedback from beginners who have found my course a fun and effective way to learn JavaScript.

Should I learn/become proficient in Javascript?

I am a .NET webdev using ASP.NET, C# etc... I "learned" javascript in college 5+ years ago and can do basic jobs with it. But I wonder if it is useful to become proficient in it.
Why should I learn Javascript?
Is it more advantageous then learning JQuery or a different library?
Yes, definitely learn Javascript before you learn one of the libraries about. It's the whole walk-before-you-can-run thing.
Make sure you add these sites to your bookmarks:
Mozilla's developer site: This contains the reference to the Javascript API in Mozilla. This will help you make sure you're writing code that Firefox understands.
IE's site in Microsoft Developer Network: The same, for IE.
W3's reference of DOM for HTML: In most web applications today, the Javascript code manipulates the DOM, which is an internal keeping track of the objects displayed on screen (but you already knew that, right ?) This is the reference to the DOM API. It is language neutral, which means it does not target Javascript, but these methods exist in Javascript too.
Douglas Crockford' site: Doug Crockford is THE MAN when it comes down to Javascript. The articles in his page are a must read. Because Javascript has closures and first-class functions, he believes it is closer to Lisp and Scheme than to other languages. And he teaches you how to greatly improve your code with these language features.
Yahoo Developer network: You may also want to check this. I'm not a regular visitor to this site, though, so I can't really say much about it.
Yes, absolutely you should learn JavaScript if you are doing web development. I highly recommend JavaScript: The Good Parts, by Doug Crockford. And, JQuery is a great framework to use (this site uses it) -- it kind of depends on what you are trying to do -- YUI and ExtJS are also very nice.
The answer is simple.
Hands down yes. There's a reason that Google have made such a big fuss about the V8 JS engine for Chrome, why Mozilla are working on TraceMonkey for Firefox and why Webkit have been working on Squirrelfish for a while (now Squirrelfish extreme). It's because JS is becoming more popular by the day.
Javascript is one of those languages that spending a few hours learning will probably teach you 99% of what you will ever really use. I would imagine you are at the point in your learning of javascript that you know more than enough now and just learn one or more of the frameworks now.
I would recommend brushing up on your non-frameworked javascript first. Refreshing/learning basic concepts of dom manipulation and what not. Like learning how to build a linked list, stack or queue in C++ before learning how to use the STL (standard template libraries).
In addition to brushing up on straight javascript, it might be good to get into a framework that doesn't abstract and change the way things work so much, for instance Prototype. You code with it very much the same way you code with straight javascript. Read through the Prototype code, learn how to make classes, and do some fancy stuff. From experience, I can say reading through the Prototype.js helped me learn alot.
After messing around a bit, then I'd say go for jQuery. If jQuery didn't, literally, change the way you write code I'd say go for it first, but learning how to build classes and js inheritance and what not can be a very important lesson for someone who wants to become fluent in JS.
Learning javascript is recommended for any web application developer. Why?
You will better understand the possibilities, limitations and dangers related to developing a web application
It is a boost for your career, if you are working on a web application that has a user interface.
However, learning javascript is usually a trade-off between a programming language and another. You should consider whether javascript is relevant for your career or project.
Unless you want to really get into javascript, I think you'd be better off learning enough JS to leverage one of the tried and tested javascript libraries out there.
One thing nice about JavaScript is that it is quite different from mainstream languages such as C#, VB.NET or Java. Learning it, especially if you have occasions to use it, will give you another insight on programming, and that's always good. I think it's worth learning it.
If you are doing web development then at some point you are going to get exposed to Javascript or ECMAScript at some point in your career for any one of a number of reasons. At a minimum you should know enough Javascript to be able to be able to validate user input; however, the web is moving in the direction of using more an more Ajax so you should also know enough Javascript to properly leverage one of the major libraries out there such as jQuery.
As some of the other users have noted, you can learn most of what you need of Javascript on a day to day basis in a single day or a couple of afternoons. If you want to get more advanced with Javascript then you are going to have to invest much more time in learning the language but odds are that unless you seek out this type of work that you are not going to encounter something that a preexisting library doesn't already exist for.
If all you want is to do some simple UI-effects and the like, I suggest you just pick a library and go for it!
Using libraries eliminates all the flawed implementations of JavaScript and provides you with an API which is the same across all browsers. And if you're working together with others it is also a great way of implementing code-standards and best practices.
Learning a second programming language is always good.
By the sound of it, JavaScript is a language that you use, to it will be of practical use too. As a web dev, it has been recommended to me in a review that i learn at least basic JavaScript.
A library such as jQuery is essential for web development thse days, so you could learn that too.
I don't think a lot of deliberate learning makes sense (but of course you need some basic knowledge), but I also think after some years of web development you'll become pretty proficient in the language anyway :)
If you are a webdev then yes, you should be proficient with Javascript. Javascript is a major part of making web apps as interactive as desktop apps.
With that being said, learn to use one of the cross-browser compatible libraries like JQuery, Prototype, etc. We do not need to have any more single browser crud created using Javascript, just because any real man/woman rolls their own.
A few things to learn in Javascript:
1. Basic syntax
2. The various flavours of function declaration.
3. Passing functions around and how to use passed in functions.
I recommend Jeremy Keith's books: DOM Scripting and Bulletproof Ajax. After you become more fluent in JS I would recommend a JS library(I use jQuery, but that is not important).
JS is important to learn. You cannot use a framework without the proper understanding of how it works. That is doing things backwards.
i thing you should have a good knoloedge base of language specification and DOM (Document Object Model). it means,you shoud know how find/create "page object" an edit properties. Also you should have an idea of "object oriented" javascript tecniques, which the starting point of a lot of framework. you don't need learn specific framework if you don't use it. simple keep in mind generic base concept!
I'll go with the opposite answer most are putting out there. Learning javascript as a developer these days is almost pointless. The language is similar enough to java/C# that it's syntax and semantics shouldn't be lost on you.
What you should learn is jQuery.
As you use jQuery you'll pick up the most common things you'll ever need from javascript anyway.
If you're involved with the Web in anyway then the answer is "Yes, always". Maybe an embedded or system's programmer could get by without JavaScript, but not a webdev.
Most of the libraries are designed to alleviate some of the pain of interacting with a multitude of browsers. They will not abstract away core JavaScript functionality.
Yes, you should learn JavaScript. Sooner or later you will need to use it!

Categories

Resources