Learning Javascript

‘Learning Javascript’ on-line resources list

by IcieMeg July 2012

This is an informal list accumulated for helping me in learning Javascript. Am sharing my list because perhaps might help others wade through available resources. Please comment to let me know if you have any other resources or have any input. Thanks.

Most of the sites are free educational resources. I do not and cannot vouch for any of the accuracy within the resources. My reviews are just personal observation. I have a programming background and am recently self taught on HTML / CSS (and still learning).

I found when learning HTML and CSS that using several quick intro tutorials was useful to begin to learn concepts, syntax and terms. Repetitions of the same sort of basic information from slightly different angles was helpful.

As of July 10th, 2012 am working through these sites trying to organize the list and add in some reviews / descriptions. My list has grown rather large. The list makes a personally useful holding container of my prior mere accumulation of bookmarked links. This is a work-in-progress. Over time will modify presentation of information, which will be additional practice for CSS / HTML on WordPress. Currently must… scroll down… and down or use “Find” on keywords.

Several sites have annoying ads. Many of the sites are old, some several years. I do not currently know how much the age of material matters in using them as a resource, but be aware that this probably does matter.

My perspective learned while making up this list

The levels of understanding and usage of the language can be from simple to deep. There are various levels of tutorials that cover a wide range. There are plenty of tutorials that will help teach the basic syntax and have you doing some simple coding. You can start utilizing code scripts, even without knowing basics by cutting / pasting into your website quickly. Even if you have never been a programmer to modify or write simple scripts of your own, then can learn the basic syntax of the language relatively easily. Going deeper into usage can be complex, as Javascript is a full object-oriented language with its own flavor.

Some flaws have carried over through the years partly from historical reasons, which annoy David Crockford and get mentioned in his videos. He is a senior JavaScript Architect at Yahoo! and well known for his work in introducing JavaScript Object Notation (JSON).  Not understanding these flaws and other aspects of the language is very common. Deeper knowledge will only come over time and with practice, as well as taking advantage of the experience others share. There are folks trying to add depth to the Javascript programmers in the world and ready to help the world get more knowledgable.

So you can learn the language from simple to in-depth, but it is easy to learn bad practices because of poor educational material available. The language may seem simple to learn, particularly if you are already a programmer, but perhaps it really isn’t. If you want to be a Javascript front end development programmer earning the ‘big’ bucks, then keep this in mind as you learn.

I am now collecting a list of “Best Practices” links, which will be adding.

See Words of Warning Learning Javascript at bottom of list.

———————————————————————

Suggested prior learning

• HTML, CSS
• How information is passed between client and server, web design principles, introduction to computer programming, concept of objective oriented programming, concept of the DOM.

Suggested followup learning

• AJAX, XML, JSON, DOM, browser differences, investigate frameworks and Javascript libraries

———————————————————————

Tutorials / guides

• W3Schools JavaScript tutorial contains hundreds of “Try it yourself” examples. W3Schools.com is not affiliated with the W3C in any way.
http://www.w3schools.com/js/default.asp

Warning on W3Schools.com: http://w3fools.com/

Mini review: I had previously done their HTML and CSS tutorials. I found the site a quick intro when just starting out in learning. The tutorial is out of date and has some poor advice that don’t match best practices.

The style of tutorial covers some basic syntax, which you can then try out in an interactive window. The “Try It Yourself” will show code on the left that executes on the right side of a window. You can play with the code by changing it and test the outcome. There are short simple multiple choice quizzes of 20 questions to test knowledge. There are moving ads and banners on this site.

• W3C guide to Javascript: Covers the basics of JavaScript — how and where to use it, what problems to avoid and general basics to get you started on your journey towards becoming a top-notch JavaScript developer.
http://www.w3.org/wiki/Your_first_look_at_JavaScript#Introduction

Mini review: Up-to-date and likely accurate information that will also teach best practices.

• w3resource offers web development tutorials. We believe in Open Source. Love standards. And prioritize simplicity and readability while serving content.
http://www.w3resource.com/javascript/javascript.php

• This older tutorial was adapted from the Netscape Reference Source for CS2 at Brown University, Spring 1998 by Lisa Cozzens, Amanda Kudler, and Izel Sulam
http://www.cs.brown.edu/courses/bridge/1998/res/javascript/javascript-tutorial.html

Mini review: About 10 screenfuls of text going briefly over basic syntax of the language as of Netscape 3.0 era, as well as some basic programming concepts.

• This historical perspective tutorial should help you learn how to correctly detect capabilities, and wherever needed, it will show you how to work out when a browser cannot do what you need, so you can halt your script, or provide an alternative. When there are different ways to do the same thing, and some browsers only support one, while others support another, it will show you how to correctly work out which one to use. JavaScript tutorial is based on ‘4^th generation’ and ‘5^th generation’ browsers with backwards compatibility. Written by Mark “Tarquin” Wilton-Jones.
http://www.howtocreate.co.uk/tutorials/javascript/important

Mini review: Site started in 2001. Updates on tutorial listed from 2008 to 2011. Covers advice for working with very old browsers like Netscape 4 in the tutorial. This provides a historical perspective not found in many other tutorials, which is useful in understanding handling a backwards compatibility concept. There is an argument over whether in web design it is better to use “graceful degradation” vs “progressive enhancement”. This author has several of his tutorials covering this thought process for handling older browsers and still having a functional website. Easy to read conversational style of writing. Largely text with various sample code snippets. Also his site covers DOM, HTML, CSS, and basic web design tutorial that factors in making sure your website works for everyone, even those with accessibility issues due to old hardware, old browsers, or slow speed connections.

• tizag.com tutorial is for beginners, but assumes you are comfortable coding HTML. This tutorial will cover the basics of JavaScript, from where to place your JavaScript all the way to making your own JavaScript functions. Also, there will be some good programming practice tips throughout this tutorial.
http://www.tizag.com/javascriptT/

Mini review: Listed as between 2003 – 2008. Has quick overview of various syntax points, which you can speed through if familiar with general programming concepts. If not familiar with programming, then provides brief definitions of terms such as variable and function. Has a bit of interactivity with clicking a few buttons to watch how some simple code snippets display. They have several other tutorials for related web programming skills from HTML to Ajax to PHP. – There are some annoying moving ads on the side of the page.

• quackit.com: If you’re new to programming/scripting, JavaScript is a good place to start. Having said that, it’s still quite different to HTML so I recommend you take your time and cover off a little bit each day. Don’t worry if it takes you several days to complete – it’s better to fully understand everything than to brush over it and not fully comprehend it.
http://www.quackit.com/javascript/tutorial

Mini review: Written during IE6 era. Similar basic syntax information to tizag tutorial, except with lots of ads featured on the page cluttering up the information. This includes annoying blinking ads. Has basic syntax covered, but there are better options for such information. Teaches some non-optimal and even old bad practices. Nothing distinguishing other than an plethora of flashing banners and annoying ads. They are winning for most number of annoying ads vs information value.

• Webmonkey: Thau’s Basic Javascript five-part tutorial aims to get you writing useful JavaScripts immediately. And not just silly JavaScripts — this tutorial will teach you how to build the browser of your dreams. As we go through the examples in the course, you will build a fancier and fancier browser that you can tweak to your heart’s content. Tweaking is the Webmonkey way, after all.
Here’s a brief outline of what you will learn each day.
Day 1: Introductions, some examples, and your first JavaScript
Day 2: Variables, if-then branching, link events, and image swaps
Day 3: Windows, frames, and the Document Object Model
Day 4: Loops, arrays, and functions
Day 5: Forms, forms, and more forms
http://www.webmonkey.com/2010/02/JavaScript_Tutorial_-_Lesson_1/
• Thau’s Advanced JavaScript tutorial has five more lessons – Picks up here where left off, starting with the meaning of var and if-then-else statements, then moves along to show you how to make cookies (Mmmmm), fancy string handling and associative arrays along the way. Image mapping and preloading images, practical applications such as setting up an employee database and creating a virtual pet! JavaScripting tools, debugging techniques, and ways to make your code sprint like the wind.
http://www.webmonkey.com/2010/02/Advanced_JavaScript_Tutorial/

Mini review: Entertaining writing style, but needs to improve formatting. Unfortunately the tutorial fails to take the following advice into use for their English text. The layout could use more bullet points to separate the tidbits of information crammed into the sentences. “Spaces and line breaks are ignored by the JavaScript interpreter, so the layout of the script serves only to make it more legible for people. This entire example could have been written in one really long line if you take out the comments. But that would be impossible to read.” Lots of information, but big block paragraphs crammed with syntax and programming concept points. In a world of short input Tweet mentality, then this probably is a negative for the tutorial. Thankfully the style of writing isn’t dry and moves you along.

At points in tutorial shows interactive examples, then brings you back into the continued lesson. If already familiar with programming concepts, then would not require taking 5 days to cover the material.
Ideally would combine an interactive lesson method of teaching, like a Code Academy, with a fun style like this guy’s lessons.

There are a few ads, including moving ads, but PLENTY of good info to ad ratio!

Originally written with enough time passed to provide some historical perspective about Javascript, but appears to be updated. Historical Javascript methodology was noted with italicized comments.

• academictutorials: Free tutorials in several languages.
http://www.academictutorials.com/javascript/`

Mini-review: Has English spelling errors, which makes me unsure how much to trust the coding.

• pageresource: Beginner and Advanced by John Pollock
http://www.pageresource.com/jscript/

Mini review: Assumes understanding of HTML, which most Javascript tutorials expect. Covers various code snippets without actually teaching the language or programming principles. Not an optimal tutorial for learning the language. Includes ‘words of wisdom’ without actual teaching proper usage with gems such as “Don’t forget those semicolons! They are used to separate JavaScript commands and declarations, and can also cause error city if they are left off. I did this a few times, and it makes for some pretty wild stuff when you try to load the page!” On the other hand, most of the tutorials seem to forget to explain something as simple as how to use a bracket, paren or semi-colon.

Layout has a large block ad right smack in middle of page with the text of the tutorial jammed to the side. Obviously old tutorial: “Since there are older browsers being used out there, they do not recognize the <SCRIPT> tag. ”  Attempts at interaction with buttons to click and requests to try running code yourself.

• java2s: Programming tutorials and source code examples: Copyright 2009
http://www.java2s.com/

Mini review: Another site with annoying ads taking up prime space that should be used for the tutorial. Very little explanation with blocks / snippets of code. Some reference information, but in a poor format. Perhaps this was notes to be used in a lecture several years ago?

• Essential Javascript — A Javascript Tutorial by Patrick Hunlock (Copyright 2007)
This reference will cover the basic language constructs. This is not a beginner’s guide to programming. This article focuses on bringing people who already know another programming language up to speed on Javascript methodology. Additionally, this is not an exhaustive language definition, it is a broad overview that will occasionally focus in on some more advanced concepts. It’s here to get you started. Additional resources with more detail at top of the link’s page, as well as PDF format.
http://www.hunlock.com/blogs/Essential_Javascript_–_A_Javascript_Tutorial

Mini review: Worth opening the PDF versions and scrolling through for the programmer advice and tips that comes along with the syntax. Negative is that written in 2007.

• JavaScript can allow you to create new things on your website that are both dynamic and interactive. In this tutorial I am assuming that you understand HTML. 1999 – 2001 David Gowans
http://www.freewebmasterhelp.com/tutorials/javascript

Mini review: Assumes more than just grasping HTML! Assumes a bunch more programming knowledge than he realizes, as well as skims through information with major assumptions of understanding. “In this tutorial I covered some of the most important parts of JavaScript and now you should be able to start writing some quite advanced scripts.” I don’t think so, not if this is the tutorial you use to learn.

• JR’s Education Page – Professor of Mathematics (retired)
JavaScript like many languages (eg C, Java, awk, perl) is based on a common syntax and structure developed by the Bell Labs in the 60’s. This makes it easy to cross over from one language to another based on program requirements, resources and politics. This tutorial on JavaScript syntax and structure (ie. programming in the small) assumes introductory programming experience in another language. by John W. M. Russell (appears to be kept up-to-date).
http://home.cogeco.ca/~ve3ll/jstutor0.htm

Mini review: This tutorial actually uses real programming jargon,  proper terminology and coding samples. I had never used any of the related languages and find this tutorial helps explain words that were assumed to be understood in a David Crockford lecture video. This alone is a good reason to go through this tutorial, as a would-be programmer of the language vs just a dabbler script user.

This is a winner tutorial for no other reason than they actually mention this detail, which so many others fail on. “Note: There is no semicolon after a curly bracket!” I spent time playing in Code Academy missing where and how to use semi-colons and curly brackets, which was not helping me learn. If I’d just gone through this tutorial first, then would have saved me aggravation.

This is a tutorial that doesn’t dumb things down, but also doesn’t assume. Can tell it is written by someone who really programs. Includes many gotcha’s and warnings for would be programmers. Thumbs up!

• JavaScript is a vast language and it is not possible to teach everything in these 35 tutorial sessions, however, we will cover most of the basics – statements commands and functions. This Javascript tutorial was written for someone who has no programming experience.
http://www.webdevelopersnotes.com/tutorials/javascript/

Mini review:  At the time of writing, JavaScript version 1.2 (old version). Tries hard and has good intentions. Uses bears for teaching about objects.

“Before I start describing objects in programming aspect, let’s look some pictures.

Here are two ferocious bears and a docile bamboo eating panda. They are animals that we find in a zoo (Its not pleasant to come across the grizzly in the wild)”.

Gives small homework assignments at end of every page with answers by a button press.

• The article contains a introduction to JavaScript and JSON by Lars Vogel
http://www.vogella.com/articles/JavaScript/article.html

Mini review: Tossing up some code and bit of description text does not a make valid tutorial, Lars.

• functionx: It provides lessons and examples on how to use this web language. The lessons assume that you are familiar with Microsoft Windows and HTML. Also, the lessons are written for non-client server scenarios.
http://www.functionx.com/javascript/index.htm

Mini review: Mixes teaching HTML with Javascript. This is another “means well” tutorial, but not the optimal one for learning. Explanations such as this “A function is an assignment that JavaScript can take care of for you. It is a technique used to isolate a group of instructional code so that other parts of the application can depend on it to provide them with a reliable result. ” fall short of the mark for a proper language tutorial.

• In my tutorial, instead of trying to squeeze JavaScript into the mold of Java or C++, I’d like to concentrate on its unique features. I’ll explain the syntax on the need-to-know basis, while illustrating major concepts. JavaScript has functional roots, and it builds object-orientedness on top of it. The OO part follows the ideas of a classless language, Self.
http://www.relisoft.com/web/javascript.html

Mini review: Author assumes knowledge from using other related languages. For example, “The syntax function(){…} roughly corresponds to lambdas or anonymous functions in functional languages.” or “You can declare and initialize an object in one statement. In Java or C++ you would have to separately define the shape (class), the initialization (constructor) and only then create the object.” or “In most OO languages we are used to being able to pass parameters to the base constructor of an object. In C++, for instance, you do it in the constructor of the derived class”.

I have not used either of these languages, so cross comparisons is not useful for me to learn. This tutorial is over my head, but may come back to revisit.

• Object-Oriented JavaScript: An Introduction to Core Concepts
by Alejandro Gervasio November 2005
JavaScript is a powerful object-oriented language whose capability has frequently been underestimated when compared with other OO languages. Covers the basics of creating custom user-defined objects and defining their methods and properties, as well as some advanced concepts such as Inheritance.
http://www.devarticles.com/c/a/JavaScript/ObjectOriented-JavaScript-An-Introduction-to-Core-Concepts/

Mini review: Not a beginner tutorial. Expects understanding of object oriented programming concepts, as well as Javascript and HTML.

• echoecho: You can use this tutorial either as a complete introduction or as an A-Z reference to JavaScript. If you’re completely new to JavaScript you should start with the section that covers JavaScript Basics. Otherwise, just jump directly to the relevant pages.
http://www.echoecho.com/javascript.htm

Mini review: Another tutorial that speaks for itself on why it is not the optimal learning site.

How do you explain that Javascript is a case-sensitive language. Like this? “Capital letters are different from lowercase letters. You should always remember that capital letters are different from lowercase letters. This means that when you write commands in javascript, you need to type capital letters in the correct places, and nowhere else.” Nuff said.

There are some flashing ads on page, but not too pesky. Tutorial isn’t all that bad, but there are better ones.

•  JavaScript Garden is a growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert JavaScript programmers may encounter on their endeavours into the depths of the language. JavaScript Garden does not aim to teach you JavaScript. Former knowledge of the language is strongly recommended in order to understand the topics covered in this guide.
http://bonsaiden.github.com/JavaScript-Garden/#object.prototype

• Xah’s JavaScript Tutorial: All code are tested with Internet Explorer, Firefox, Safari, Google Chrome browsers from 2008 to 2011. If a html/css/js feature is not supported across browsers, it’ll be specifically noted.
http://xahlee.info/js/js.html

• Learn JavaScript with this Step by Step JavaScript Course by William Bontrager
http://www.web-source.net/javascript_tutorial.htm

Mini review: Four part older tutorial referring to Netscape reference material. Provides an overview of language.

• About.com site’s “Learn to Program with JavaScript”
http://javascript.about.com/od/learnjavascript/Learn_to_Program_with_Javascript.htm

Mini review: No prior programming experience is required to start the tutorials. About.com has multiple tutorial sets that teach basic programming terminology, coding in what is called “classical” Javascript on old browsers, plus coding on what is called “modern” Javascript with the newer browsers. Includes tutorial on “how to write your scripts so that the are unobtrusive (so that there is no JavaScript whatever in the HTML and the page works even without the JavaScript) and so that it works properly in all modern browsers that support the appropriate functionality while degrading gracefully in older browsers that don’t.” Sounds like excellent topics.

• Dailyjs is a popular JavaScript-focused blog
http://dailyjs.com/”>
This is an introduction to JavaScript that covers some of the deeper aspects of the language based on the ECMAScript 5 standard.
http://dailyjs.com/js101.html

• Javascript scripts by Ross Shannon, a web designer from Ireland doing a PhD program in Computer Science.
http://www.yourhtmlsource.com/javascript/

Mini review: Another typical tutorial. Refers to latest Javascript as version 1.3. Last updated in 2010.

• Several tutorials for web developers
http://www.tutorialspoint.com/javascript/index.htm

• Learning JavaScript Basics by bs0d
10 pages of tutorial to introduce Javascript through a wide range of the basics of programming to writing your own programs.
http://www.allsyntax.com/tutorials/JavaScript/18/Learning-JavaScript-Basics/1.php

• This is an English translation of a tutorial written in Russian.
“There’s a much better version of this tutorial at learn.javascript.ru in Russian. Here it is partially translated and outdated, because I don’t really have the time to both continue with the Russian version and do the translation. Besides, my written English is far from perfect. Still I hope you can get something good out of it.”
http://javascript.info/

•  JavaScript Kit, a comprehensive resource for JavaScript tutorials, scripts, and more.
http://www.javascriptkit.com/javatutors/

• Completely separate Javascript from the other two layers of web development has become commonly named “unobtrusive Javascript”, as “accessible Javascript”
http://www.onlinetools.org/articles/unobtrusivejavascript/index.html

• Learning JavaScript Visually with Diagrams
“One of the secrets to being a super effective JavaScript developer is to truly understand the semantics of the language,” writes developer Tim Caswell. Caswell’s three lessons aren’t geared towards new programmers.
http://www.readwriteweb.com/hack/2010/11/learning-javascript-visually.php

• Understanding Design Patterns in JavaScript by Tilo Mitra on Jul 23rd 2012
http://net.tutsplus.com/tutorials/javascript-ajax/digging-into-design-patterns-in-javascript/

• Key Principles of Maintainable JavaScript by Jonathan Creamer Jun 20th 2012
http://net.tutsplus.com/tutorials/javascript-ajax/principles-of-maintainable-javascript/

• Javascript by Example: Modern JavaScript for Everyone by Stephen Chapman 2012
There are many people who are writing what they think is JavaScript but where what they are producing is more suited to the 20th Century than to the 21st. Most of the JavaScript examples here will work in IE5+, Opera7+ and all versions of Firefox, Safari and Chrome. Those commands introduced in ECMAScript 5 in 2011 are being added to the site where they are supported by the latest version of all popular browsers.
http://javascriptexample.net/

• Guide for Javascript from Mozilla Developer Network:  This guide explains everything you need to know about using JavaScript.
https://developer.mozilla.org/en/JavaScript/Guide
https://developer.mozilla.org/en/JavaScript

• Closures in Javascript are very powerful, and without them, you wouldn’t really be able to do very much in Javascript.
http://coffeescripter.com/2009/07/closures-in-javascript/

• Javascript Closures: A “closure” is an expression (typically a function) that can have free variables together with an environment that binds those variables (that “closes” the expression).
http://jibbering.com/faq/notes/closures/

• Closures are often considered an advanced feature in JavaScript, but understanding them is essential to mastering the language.
https://developer.mozilla.org/en/JavaScript/Guide/Closures

• Closures: Front to Back by Brian Scaturro Apr 26th 2012
http://net.tutsplus.com/tutorials/javascript-ajax/closures-front-to-back/

• Taking the time to understand closures and how they’re implemented can add a deeper dimension to your understanding of the JavaScript language.
http://lostechies.com/derekgreer/2012/02/17/javascript-closures-explained/

• Prototypes in JavaScript by Leigh Kaszick on May 9th 2012
http://net.tutsplus.com/tutorials/javascript-ajax/prototypes-in-javascript-what-you-need-to-know/

• Advanced JavaScript Techniques You Should Know
http://sixrevisions.com/javascript/6-advanced-javascript-techniques-you-should-know/

• Named function expressions demystified by Juriy “kangax” Zaytsev
There are some interesting nuances to the function construct in javascript and how function declarations are treated differently from function expressions. June 2010
http://kangax.github.com/nfe/#introduction

•  Event handling (introduction) Is this real life?
http://www.quirksmode.org/js/introevents.html

• How to Write Maintainable OO JavaScript Code by Ara Pehlivanian 2011
http://msdn.microsoft.com/en-us/magazine/gg602402.aspx

• yuiblog: Douglas Crockford is Yahoo!’s JavaScript architect and a member of the committee designing future versions of the world’s most popular programming language. Starting in 2010 and through 2011, Douglas delivered his acclaimed series of lectures on the history of JavaScript, its features, and its use.
http://yuiblog.com/crockford/

• Humorous story: Dangerous Punctuation
The story of how the seemingly trivial act of removing semi-colons from a JavaScript library caused the destruction of all life on Earth by Matthew Dean
http://figment.com/books/308826-Dangerous-Punctuation

Interactive training with user interaction

• P2PU, people working together to learn a particular topic by completing tasks, assessing individual and group work, and providing constructive feedback. Browse classes / groups, then sign up. Free.
https://p2pu.org/en/

• Programr has an online coding platform where you can code, compile & run your programs & projects in almost any technology right in the browser. You can learn from others’ projects, build your own from scratch, and share & embed your work anywhere on the web.
http://www.programr.com/

• Codecademy: Learn JavaScript the fun way…interactive learning to code (free). Teaches users how to program with an interactive and social web application. After finishing the lessons you should be able to create programs, games, and have a foundation for learning JavaScript frameworks.
http://www.codecademy.com/tracks/javascript

My mini review after doing 9 badges of lessons: The site gets you typing in some code quickly, but examples can skip required explanations and rely on forums to flesh out answers. If you do not finish a lesson, then cannot move forwards. Missing a semi-colon can leave you bogged down, for example, but without explanation of where they should be placed. You will type “console.log” a bunch.

The initial lesson of “1. What’s your name?
Hey! Let’s get to know each other. – What’s your name? Type it with quotes around it like this “Ryan” and then press enter.” had me completely turned off, but maybe that is due to my snarky old age. I almost didn’t even give the site a chance after seeing that as the first lesson, but had it recommended.

There are points and little image badges with encouraging perkiness after answering questions. I do not understand the value of the points, but assume they are like points in a game somehow. Perhaps this is some competitive aspect?

Personally think would be better to learn some basic syntax with more overall information, then use the lessons as mini-tests of your knowledge, coding and debugging abilities. A problem of frustration that had me move to other sites was because my browser (Chrome) would not allow the window to scroll down once had over about 15 lines of code. This made difficult to enter code past very simple examples. Maybe it’s just time to reboot. I’m on an old Microsoft XP box afterall.

I’m guessing that if someone has no prior programming background that the lessons would be difficult as a starting point. I learned that I need to be more careful in placing brackets and semi-colons.

• Code Avengers is a new fun interactive way of learning to code JavaScript.Sign up and use it for free and learn the basics to advanced JavaScript codes. Code Avengers uses a intuitive interface that teaches you JavaScript using real examples and allows you to run your code when finished. The S.C.R.I.P.T. Level 1 course teaches you the basics of JavaScript in 40 lessons, with 5 short tasks in each lesson. Another set of 40 lessons for Level 2 course is under construction. They recently have finished their HTML / CSS lessons.  (Blog describing Code Avengers) http://www.codeavengers.com/

Mini review: Gives points and badges for encouragement. It warns you that making mistakes will cost points.

Starts off very perkily friendly “1. Click Run to run the example code. Type your name in the prompt box that appears then click OK. –
var name = prompt(‘What is your name?’)
alert(‘Hello ‘ + name + ‘, you are doing great!’)”
as an early example of the code they want you to run. Seems no apparent reason other than to provide you with an encouraging message and typing in something. Reminds me a bit of the positive reinforcement training that I use for our horses with clicker training. Do a task, get a treat.

“Every 10th lesson is a review quiz. You’ll have to be quick with your mouse, because the answers move! If you’re not using a mouse, or find moving answer annoying, there is a stop button you can click.”

I did indeed find the moving answers to be annoying, so used the stop option.

My reaction to the reward “badges” was the opposite of their intention, but then they were not intended for my age group. I have since read that such “badges” are quite useful for motivating young students.

 

“ADULTS BEWARE! Code Avengers is designed to be FUN. If you don’t want to learn the FUN way… Leave now!”

In fact, I did leave. The site was not designed for an oldster like myself.  The pats on the back, “badges”, chasing answers around with a mouse, and recommendations to share with your Facebook friends or Twitter merely because you have passed a few lessons are all directed to their target audience. The site is for 15 year olds and over, but I’m WAY over.

“Code Avengers is an interactive online Javascript tutorial that aims to teach Computer Programming to High School students in the most fun and effective way possible. The site has been developed with a game like feel to help keep the attention of teenagers who struggle with finding time for homework but always make time for computer games. Code Avengers lessons include short code challenges, games and quizzes that teach and practice new concepts to ensure that the learner is retaining and understanding the material.

Code Avengers was created as a side project by New Zealand PhD student Michael Walmsley. His goal is to create effective learning resource with a gamified environment that makes learning fun and addictive–initially for web development but later for other subjects like math and finance.”

My initial reaction was that wasn’t going to be a place to learn and was also bit tedious. I decided that I had not given the site enough of a chance. I returned one night when was rather tired and continued the lessons. They definitely let me know that I need to be more careful at following instructions and being more precise, particularly when I’m tired. No doubt I’ve lost many “points”.

Since then I have returned a couple more times and have now completed past Lesson 20. This is half-way through the Level 1 lesson plan. I am the proud owner of a bunch more “badges”.

I’ve re-written my review. The site is geared for a much younger crowd with a different mindset than myself, but can be also useful for a tired  “Baby Boomer”.

• Udacity: Learn how to build your own simple web browser complete with the ability to parse and understand HTML and JavaScript. The course assumes previous programming experience. Knowing some HTML and Python would be useful. Course covers “regular expressions”. The initial programming course CS101 teaches Python, a different programming language.
by Westley Weimer, a Professor of Computer Science at the University of Virginia
http://www.udacity.com/overview/Course/cs262/CourseRev/apr2012
http://www.udacity.com/view#Course/cs262/CourseRev/apr2012/Unit/3001/Nugget/5001

Mini review: Courses are taught by experienced highly educated computer programmers. They use a combination of video lecture, homework exercises, and forums for teaching. The material is broken into small chunks of a short video followed by tiny quizzes. The quizzes are multiple choice questions that seem mostly to test that you are paying attention. This is closer to an actual university type course where you attend a lecture, then do assignments in a lab class separately.

They seem to be still working on the course material. The instructors obviously know their stuff given their real day jobs, but their teaching abilities vary. Think they have a very good concept that will help a lot of folks learn programming skills and in some depth. My plan is to use other resources to supplement the course where I need extra help. The teachers assume a lot of prior knowledge without even seeming to notice or perhaps expect you to find other resources to pad out the presented material. My guess is that they will improve over time to learn their weak spots on course material.

After completing the course, you can take a competency test and get a certificate for a small fee. The courses are available to take on your own, but you won’t get instructor feedback on assignments or be able to earn a certificate unless you take the course when actively offered.

After having worked through some of a couple of courses, then am a bit disappointed. In some ways found the material very tedious, but in other ways there was assumed knowledge and jumping forwards and not providing enough overview as to the purpose of the material being covered. Skipping through to the Introductions of various Units in CS262 was helpful to give a more broad overview, as could not understand why course was using Python and “regular expressions” when I thought the purpose was to teach the Javascript language. This course doesn’t start with Javascript until partway into Unit 3.

The course is definitely beyond what I need to be able to add features to my web page designs and is not optimal for an intro to Javascript. The instructors do things like write their own languages in their spare time for fun, which is in another league from where I want or need to be. If you do the full course, then you will have a higher level knowledge and understand how an interpreted language like Javascript truly functions to parse the web page syntax. The instruction presents CS jargon and thought processes that provide plenty of grist for further study to deepen my understanding, so I do plan to slowly work through the various courses.

Audio

• Javascript 4 U with James Robertson: A regular screencast series with short video tutorials on Javascript – an introduction to the language, and how to use it on web pages. Can view through iTunes.
http://www.jarober.com/blog/js4u.ssp
Listen on iTunes

• JSMag: News and interviews about the latest happenings in the JavaScript world. Hosted by Manuel Lemos of the PHPClasses.org site and Michael Kimsal of the JSMag magazine. It is recorded in MP3 format at least once a month in the beginning of each month.
http://www.jsclasses.org/blog/category/podcast/
Listen on iTunes

• The Javascript Show by Peter Cooper and Jason Seifer is a podcast featuring news and discussion about the latest topics in the Javascript communities. We cover the latest in frameworks, development techniques, quick scripts, and more.
http://javascriptshow.com/
Listen on iTunes

• Javascript Jabber by Charles Max Wood, Yehuda Katz, Peter Cooper, AJ ONeal, Jamison Dance do a podcast of a technical discussion of JavaScript related topics. Things like Node.js, Web Frameworks, JSON, CoffeeScript, Event and Object models and much more.
http://javascriptjabber.com/
Listen on iTunes

• JavaScript 101 – A Free 10 Hour Audio Course On JavaScript Fundamentals by Dr. Tony Pittarese, an assistant professor of Computer and Information Sciences at East Tennessee State University. Students will learn how to create, accessible modern web applications that integrate current Web standards. Course content will include: JavaScript, AJAX, and other Web 2.0 related techniques and technologies.
**For links to slides visit http://einstein.etsu.edu/~pittares/podcast
http://einstein.etsu.edu/~pittares/CSCI3110/
http://faculty.etsu.edu/pittares/
Listen on iTunes – Fall 2011 course

Mini review:
Slides or computer screen play along with the lecture. The audio is good. May not be able to hear student questions directly, but teacher will repeat if needed for explanation. It is like sitting in the lecture. What is lacking is being able to do the Lab portion, plus no tests.
– Lecture 1 & 2 (1 1/2 hours): Introduction to Client Side Scripting covers the history of the development of the language that is now the ‘de-factor standard for contemporary client side scripting’, as well as basic overview of the technologies that compose the language (ECMAScript, DOM, BOM and library extensions). Ajax will also be covered in the course. Can pause, rewind and fast forward the lectures.

Videos

• Google Code University
This site provides sample course content and tutorials for Computer Science (CS) students and educators on current computing technologies and paradigms. “Google: HTML, CSS, and Javascript from the Ground Up”
has 8 videos to get a basic understanding of how UIs are created on the web or brush up outdated UI development knowledge. Lesson files accompany the videos.
http://code.google.com/edu/submissions/html-css-javascript/

Mini review: Videos are between about 10 – 30 minutes long. Good coding practices are discussed, which is a valuable aspect of these videos. They throw a LOT of terminology and ideas for someone just starting out. My assumption is that can trust their knowledge being accurate, which usually I do not assume (depending on the source).

The videos can be used as an overview of hearing the concepts, but need additional instruction from other sources. They suggest reading the W3C manual, for example. Working through HTML and CSS videos, which I had some understanding prior to viewing, learned new things and helped make some concepts more clear for me. The videos had excellent tips and information I had not heard anywhere else. The Javascript videos jump very quickly into real life usage concepts, such as manipulation of the DOM. After learning Javascript syntax and programming concepts, then to really use the language for your websites these videos are an excellent starter point. The videos are definitely worth watching slowly using other references to flesh out the material.

• appendTo was founded based on the growing need for quality jQuery training and support. (2012)
http://learn.appendto.com/

Mini review: Haven’t watched the videos yet. Appears to be up to 6 hours of slick free educational videos broken into bite size chunks to teach Javascript and Jquery. They also have a consulting company that offers web development and training services. The site has a donate button for appreciation.

• thenewboston: Bucky Roberts has currently 259,320 subscribers of his Youtube channel “thenewboston”. Set of 40 videos covering basic Javascript.
Playlist of Javascript tutorial videos
http://thenewboston.org/

• Javascript by Programminghelp.org
Has 333 subscribers on Youtube channel. Set of 24 videos

• Adam Khoury has currently 35,378 subscribers to his Youtube channel “flashbuilding”. Set of 28 videos. Code is available on website.
Playlist of Javascript & Jquery tutorial videos
http://www.developphp.com/list_javascript_video.php

• Hashrocket videos: 11 videos on learning Javascript
http://vimeo.com/hashrocket/videos/search:javascript

• JavaScript Tutorial 1.1: The Very Basics (Series of 4 approximately 10 minute videos with typing in instruction vs voice over) – (created 2007)
http://www.youtube.com/watch?v=2t3ZysHg3Cc

• net.tutsplus: JavaScript from Null: Video Series by Jeffrey Way
For premium membership registration get Source Files and additional tutorials. (Videos created 2009 – 2010)
http://net.tutsplus.com/tutorials/javascript-ajax/javascript-from-null-video-series/

• Code Furnace: Tutorials (2011) Has currently 235 subscribers and 7 videos.
http://www.youtube.com/watch?v=cFKNoEOmgUo
http://www.codefurnace.net/

Mini review: Description says it is “Basic JavaScript instructor-led tutorial for an introduction to client side web programming.”

Typos on their web page doesn’t generate confidence nor does the entire web site presentation demonstrate a skill level worth emulating. The Javascript video tutorial is over an hour long that cuts off abruptly at the end. Seems to be a class and doesn’t cover very much in the time period. The sound isn’t very good. A lot of the video is watching the poor typing and long pauses waiting for questions from students in the class that you can’t hear. There is a bunch of mumbling. I did not watch the video, but just jumped through bits to get an overview. The instructor admits that he is self taught and suggests you should go seek out information from Google search to add information. I feel sorry for people who went to his class hoping to learn Javascript.

Cannot recommend this video.

• New Think Tank derekbanas has currently 14,028 subscribers subscribers on his Youtube channel. More info available on website.
Playlist for 8 videos from 2010.      Playlist for 9 videos from 2011.
http://www.newthinktank.com/web-design/learn-javascript/
http://www.newthinktank.com/2011/02/javascript-video-tutorial/
Javascript in 30 minutes : How to write JavaScript programs in just 30 minutes. JavaScript Datatypes, Embedding JavaScript, Linking to JavaScript, Conditional Statements, Looping, Arrays, Strings, Functions and much more.

Mini review: I take his teach you everything in 30 minute videos to be a good “before” and “after” test, but not necessarily for actually learning. If you can follow along with his jam packed instruction, then you know you have learned quite a lot.

• Davecoast has Youtube videos on channel ‘dsarons’ of himself learning Javascript by doing the exercises from the book “Modern JavaScript: Develop and Design” by Larry Ullman .
http://davecoast.com/dc_blog/
Playlist of videos (May 2012)

• Sengupta: Lecture -25 Javascript -Part :I (over 1 hour)
Lecture Series on Internet Technologies by Prof. I. Sengupta, Department of Computer Science Engineering, IIT Kharagpur. (2008)
http://www.youtube.com/watch?v=uUhOEj4z8Fo

• Introduction to JavaScript and Browser DOM (1 hour)
Google Tech Talk July 12, 2010 by Misko Hevery
If you are new to JavaScript and would like to understand how JavaScript works behind the scenes, than this talk is for you. We will look at the core philosophy behind JavaScript objects and how the primitives can be used to build up basic OO concepts such as Classes and what it means to instantiate an object. How functions are executed and the rules behind the “this” keyword and what it means to bind functions. How to think about the Asynchronous nature of non-blocking API and what it means for performance and testing.
http://www.youtube.com/watch?v=ljNi8nS5TtQ

• Best Practices in Javascript Library Design
Google Tech Talks August 17, 2007 by John Resig
This talk explores all the techniques used to build a robust, reusable, cross-platform JavaScript Library. We’ll look at how to write a solid JavaScript API, show you how to use functional programming to create contained, concise, code, and delve deep into common cross browser issues that you’ll have to solve in order to have a successful library.
http://www.youtube.com/watch?v=0LKDImgRfrg

• JavaScript: The Good Parts
Google Tech Talks Web Exponents
presented by Doug Crockford February 27, 2009
http://www.youtube.com/watch?v=hQVTIJBZook
http://googlecode.blogspot.com/2009/03/doug-crockford-javascript-good-parts.html

• Speed Up Your JavaScript
Google Tech Talk June 4, 2009 by Nicholas C. Zakas
As an interpreted language, JavaScript is filled with hidden performance issues that conspire to slow down your code and ruin the user experience. Learn exactly what is fast, what is slow, and what you can do to squeeze that last bit of performance out of your JavaScript code.
http://www.youtube.com/watch?v=mHtdZgou0qU

• The DOM is a Mess: jQuery creator John Resig stopped by Yahoo! in 2009 to visit the YUI team. While here, he gave a talk on the current state of JavaScript and DOM programming.
http://www.youtube.com/watch?v=dgI52y27O_I

• Google I/O 2011: JavaScript Programming in the Large with Closure Tools Google Tech Talks August 17, 2007
Most developers who have tinkered with JavaScript could not imagine writing 1,000 lines of code in such a language, let alone 100,000. Yet that is exactly what Google engineers have done using a suite of JavaScript tools named “Closure” to produce many of the most popular and sophisticated applications on the Web, such as Gmail and Google Maps.
http://www.youtube.com/watch?v=M3uWx-fhjUc

• Douglas Crockford: The JavaScript Programming Language
In this 2007 presentation at Yahoo!, which is meant to be the beginning of a three-course sequence (followed by “Theory of the DOM” and then “Advanced JavaScript”), Douglas Crockford explores not only the language as it is today but also how the language came to be the way it is.
http://www.youtube.com/watch?v=v2ifWcnQs6M

• Douglas Crockford: JavaScript: The Good Parts
From 2007, Douglas Crockford takes us on a journey through the lens of his own personal experience with JavaScript
http://www.youtube.com/watch?v=_DKkVvOt6dk

• Douglas Crockford: An Inconvenient API – The Theory of the DOM
Part 2: internal tech talk at Yahoo! in 2006
http://www.youtube.com/watch?v=Y2Y0U-2qJMs

• Douglas Crockford: Advanced JavaScript
Third of a three-part series) Douglas Crockford looks closely at code patterns from which JavaScript programmers can choose in authoring their applications. He compares familiar constructs like the Pseudoclassical Pattern with more unique patterns like the Parasitic Pattern that (he argues) run more “with the grain” of JavaScript.
http://www.youtube.com/watch?v=DwYPG6vreJg

• Douglas Crockford – JavaScript, The World’s Most Misunderstood Language – Yahoo! JavaScript architect Douglas Crockford talks about the history, strengths, and fault of what’s considered the world’s most widely used — and sometimes most disliked — language.
http://www.youtube.com/watch?v=gz7KL7ZirZc

• Crockford on JavaScript – Volume 1: The Early Years
Douglas Crockford puts the JavaScript programming language in its proper historical context, tracing the language’s structure and conventions (and some of its quirks) back to their roots in the early decades of computer science.
http://www.youtube.com/watch?v=JxAXlJEmNMg

• Crockford on JavaScript – Chapter 2: And Then There Was JavaScript
Yahoo!’s JavaScript architect Douglas Crockford surveys the features of the JavaScript programming language.
http://www.youtube.com/watch?v=RO1Wnu-xKoY

• Crockford on JavaScript – Act III: Function the Ultimate
Yahoo!’s JavaScript architect Douglas Crockford continues his lecture series on the JavaScript programming language with a discussion of functions in JavaScript. “Functions are the very best part of JavaScript,” Crockford says. “It’s where the power is, it’s where the beauty is.”
http://www.youtube.com/watch?v=ya4UHuXNygM

• Crockford on JavaScript – Episode IV: The Metamorphosis of Ajax
Yahoo!’s JavaScript architect Douglas Crockford continues his lecture series on the JavaScript programming language with an analysis of the Document Object Model (DOM) and an exploration of Ajax.
http://www.youtube.com/watch?v=Fv9qT9joc0M

• Crockford on JavaScript – Part 5: The End of All Things
Yahoo!’s JavaScript architect Douglas Crockford concludes his five-part lecture series on the JavaScript programming language with a review of issues related to security and performance in JavaScript.
http://www.youtube.com/watch?v=47Ceot8yqeI

• Crockford on JavaScript – Scene 6: Loopage
Software development is hampered by a specific set of design mistakes that were made in the first programming languages and repeated in everything that has been done since. And, somewhat miraculously, JavaScript is going to make it right, radically transforming the way we write applications. Again. In the Loop of History, it has all happened before, but it has never happened like this. This is why you should care about the emergence of server-side JavaScript and the excitement around projects like Node.js — not because they’re at the sharp end of a trend, but because they’re paving the road toward the next big revolution in software.
http://www.youtube.com/watch?v=QgwSUtYSUqA

• Crockford on JavaScript – Level 7: ECMAScript 5: The New Parts
In Level 7 of the Crockford on JavaScript series, Yahoo! JavaScript architect Douglas Crockford outlines the changes made to the language in the 5th edition of the ECMAScript standard.
http://www.youtube.com/watch?v=UTEqr0IlFKY

• Crockford on JavaScript – Section 8: Programming Style & Your Brain
In this keynote talk from YUIConf 2011, Yahoo! JavaScript architect Douglas Crockford drops some science to explain why code style is important in programming — particularly in JavaScript — and how tools like JSLint can help.
http://www.youtube.com/watch?v=taaEzHI9xyY

• HTML5 Dev Conf: JavaScript Programming Style and Your Brain with Douglas Crockford uploaded Oct 19, 2011
In this video from HTML5 Dev Conf, world renowned JavaScript expert, author, creator of JSLint, and discoverer of JSON, Douglas Crockford is going to talk about effective programming style for JavaScript.
JavaScript is one of the least perfect programming languages, and in this talk Douglas is going to show you some positive things you can do to reduce your error rate and enhance the beauty of your code.
http://www.youtube.com/watch?v=cIOIyfRoGcM

Same speech topic at NC State Department of Computer Science: http://www.youtube.com/watch?v=prAwkQt3ARg

• Discovering JavaScript Object Notation with Douglas Crockford
Computer’s multimedia editor Charles Severance captures a video interview with Douglas Crockford on the creation of JavaScript Object Notation (JSON). From Computer’s March 2012 issue.
http://www.youtube.com/watch?v=kc8BAR7SHJI

• Doug Crockford @ Montana State University, Bozeman Part 1
(May 2011) – History of Javascript, “good” vs “bad” parts. There is a lot of extraneous noise in the lecture.
http://www.youtube.com/watch?v=UYnDAjShDfs
• Doug Crockford @ Montana State University, Bozeman Part 2
http://www.youtube.com/watch?v=SjZr-L89w30

• JavaScript is a misunderstood language. Combining a functional style with prototypal inheritance JavaScript is arguably the most widely deployed language of either type. John Resig, creator of the jQuery JavaScript library explores interesting aspects of the language giving you a good understanding of how to best use it (2009 Association for Computing Machinery )
http://www.youtube.com/watch?v=GKfHdOrR3lw

• Velocity 2011: Douglas Crockford, “JavaScript & Metaperformance”
(June 2011) There are lies, damned lies, and benchmarks. Tuning language processor performance to benchmarks can have the unintended consequence of encouraging bad programming practices. This is the true story of developing a new benchmark with the intention of encouraging good practices.
http://www.youtube.com/watch?v=HrFpqmgv2DY

• YUI engineer Luke Smith provides a deeply technical overview of the various JavaScript class inheritance and composition patterns (ranging from pseudoclassical to prototypal to a mixture of both) supported by YUI. (Nov 2011)
http://www.youtube.com/watch?v=_zhQIfT7g58

• Nicholas Zakas: Scalable JavaScript Application Architecture
Yahoo! home page engineer Nicholas Zakas, author of Professional JavaScript for Web Developers, discusses frontend architecture for complex, modular web applications with significant JavaScript elements.
http://www.youtube.com/watch?v=vXjVFPosQHw

• Nicholas Zakas: Maintainable JavaScript
2007 talk, common-sense guidelines for writing maintainable JavaScript
http://www.youtube.com/watch?v=pebHk8S5c6o

• Google I/O 2011: Learning to Love JavaScript by Alex Russell
JavaScript remains one of the most popular and important programming languages in history. Web Developer and Chrome Engineer Alex Russell exposes the timeless strengths of the JavaScript language and why it is a vital part of the open web platform. Come hear what’s next for the JavaScript standard and how to get the most out of the new features coming soon in V8 and Chrome.
http://www.youtube.com/watch?v=seX7jYI96GE

• Five contributors to O’Reilly’s “High Performance JavaScript” (Nicholas Zakas, Stoyan Stefanov, Ross Harmes, Julien Lecomte, and Matt Sweeney) discuss advanced JavaScript and DOM scripting optimizations at the April 2010 BayJax meetup at Yahoo.
http://www.youtube.com/watch?v=_fUGWFGUrUw

• Fluent 2012: Brendan Eich, “JavaScript at 17”
May 30, 2012 by OreillyMedia
http://www.youtube.com/watch?v=Rj49rmc01Hs

• JavaScript: Getting Closure – Mark Dalgleish (July 2012)
An in-depth look at how JavaScript’s first-class func­tions and lex­ical scope allow us to write power­ful and express­ive code. Through the single topic of imme­di­ately invoked func­tion expres­sions, we’ll touch upon func­tion scope, clos­ures, JavaS­cript “classes”, Cof­feeScript and ECMAScript 5. A presentation recorded at Web Directions Code 2012.
http://www.youtube.com/watch?v=KRm-h6vcpxs

• Design Patterns for JavaScript Web Apps — JavaScript Conference 2012
This Session was presented in English at JavaScript Conference, Düsseldorf, Germany, 27/02/2012 by OPITZ CONSULTING Senior Solution Architect Stefan Scheidt.
http://www.youtube.com/watch?v=6EGZGHM0dCI

• Yahoo! Open Hack Europe – Doug Crockford – JSON Saga
Good sound version (can’t see slides)
http://www.youtube.com/watch?v=x92vbAN_j1k
Can see slides version (poor sound)
http://www.youtube.com/watch?v=NXiAKPTDXk8

• Fluent 2012: Paul Irish, “Javascript Development Workflow of 2013”
Published on May 31, 2012 by OreillyMedia
http://www.youtube.com/watch?v=f7AU2Ozu8eo

• 10 Things I Learned from the jQuery Source by Paul Irish. Walks through the jquery source. (June 2010)
http://www.youtube.com/watch?v=i_qE1iAmjFg

• 11 More Things I Learned from the jQuery Source by Paul Irish (Jan 2011)
http://www.youtube.com/watch?v=ARnp9Y8xgR4

• Using Functional Programming with JavaScript (May 2012)
https://gist.github.com/2783557
http://www.youtube.com/watch?v=pDCflzlmT9A

• Optimization guidelines for their JavaScript app and a good understanding on how to best use performance tools and JavaScript idioms to maximize the performance of their application by Daniel Clifford (May 2012). Google talk using V8.
http://www.youtube.com/watch?v=UJPdhx5zTaw

• JavaScript: Enter The Dragon – Dmitry Baranovskiy presentation recorded at Web Directions Code (July 2012). Explains how language is still misunderstood and not used properly. (Sound poor till 4 minutes, then improves). Motivational talk about becoming a better Javascript programmer. Starting at 15 minutes begins listing parts of the language need to understand.
http://www.youtube.com/watch?v=Trr95ij1358

Books:

• “Beginning JavaScript with DOM scripting and Ajax” by Christian Heilmann published by Apress. JavaScript from the ground up without a lot of “Hello World” theoretical examples. Hands-on solutions for problems and tasks you will have to fulfill in your career as a JavaScript developer.
http://beginningjavascript.com/
Sample Chapter 3 – From DHTML to DOM Scripting
Sample Chapter 11 – Using Third-Party JavaScript
Code samples for book (zip format)

• This article is actually an excerpt from SitePoint’s book, The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks.
http://www.sitepoint.com/javascript-from-scratch/

• wiki book is a guide to JavaScript. The book assumes you have a background in programming and a good knowledge and some experience in the development of webpages.
http://en.wikibooks.org/wiki/Javascript

• Javascript Ninja:  Contains code and discussion from the upcoming book “Secrets of the JavaScript Ninja” by John Resig. This book is intended to take an intermediate JavaScript developer and give him the knowledge he needs to create a cross-browser JavaScript library, from the ground, up.
http://ejohn.org/apps/learn/

Mini review: Completely over my head. Has code snippets and double clicking in code allows you to edit to experiment.

• Learning JavaScript Design Patterns by Addy Osmani Copyright 2012
released under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 unported license. It will be released via O’Reilly during Summer 2012 and will remain available for both free online and as a physical copy or eBook purchase for readers wishing to support the project.
http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/

Mini review: A basic understanding of JavaScript fundamentals is assumed. Design patterns are reusable solutions to commonly occurring problems in software design. This book is targeted at professional developers from beginner to intermediate level wishing to improve their knowledge of design patterns and how they can be applied to the JavaScript programming language.

• JavaScript Made Easy is an e-book written by  Dr. Liew Voon Kiong, who holds a bachelor degree in Mathematics, a master degree in Management and a doctoral degree in Business Administration. The book provides a complete JavaScript tutorial for beginners. He has been involved in JavaScript programming for more than 10 years. Copyright 2011. There is a 23 page preview available.
http://javascript-tutor.net/
http://javascript-tutor.net/java_tutor/book/javascriptme_preview.pdf

• Eloquent JavaScript: A Modern Introduction to Programming
by Marijn Haverbeke (2007-2012)
A book providing an introduction to the JavaScript programming language and programming in general. A digital form includes interactive examples and a mechanism for playing with all the example code.
http://eloquentjavascript.net/

• JavaScript: The Definitive Guide: Activate Your Web Pages
(Definitive Guides) by David Flanagan (May 10, 2011)
recommended by David Crockford:

•  “JavaScript: The Good Parts” [Paperback] by Douglas Crockford
– Excerpt: In this chapter, I present the problematic features of JavaScript that are not easily avoided. You must be aware of these things and be prepared to cope.
http://oreilly.com/javascript/excerpts/javascript-good-parts/awful-parts.html
– Excerpt: In this appendix, I present some of the problematic features of JavaScript that are easily avoided. By simply avoiding these features, you make JavaScript a better language, and yourself a better programmer.
http://oreilly.com/javascript/excerpts/javascript-good-parts/bad-parts.html

– “JavaScript Patterns” by Stoyan Stefanov

– “Maintainable JavaScript” by Nicholas C. Zakas (May 31, 2012)

• QuirksMode.org is the prime source for browser compatibility information on the Internet. It is maintained by Peter-Paul Koch
http://www.quirksmode.org/js/contents.html

• Sample chapter: Unobtrusive JavaScript Written by Christian Heilmann Version 1.0, July 2005-07-05
http://www.onlinetools.org/articles/unobtrusivejavascript/UnobtrusiveJavascriptSample.pdf

• Previews of several books available on “Google Books” site
http://tinyurl.com/98499uc

Courses to purchase

• Masterclass: Amy Hoy, Thomas Fuchs teach on-line courses (Intermediate / Advanced Javascript) This course is 100% framework agnostic! (This is not free.)
http://javascriptmasterclass.com/

• webucator: Extensive tutorial from basic to advanced
The solutions to problems presented are not shown in the free online version of this manual.
http://www.learn-javascript-tutorial.com/

• Lynda.com: Online Training Library with a subscription plan
http://www.lynda.com/
JavaScript Essential Training (2011) with Simon Allardice
Practical and Effective JavaScript with Joe Marini

Mini review: Monthly and annual subscription plans to view all the library of video content. $25.00 minimum monthly fee. $37.50 to view exercise files with videos.

• Pagetutor: This free online version contains the first couple lessons that cover some basic topics. More lessons if become a member. by Joe Barta
http://www.pagetutor.com/javascript/index.html

Mini review: The top of page says “Learn from the comfort and privacy of your own home. No salesmen will visit.”

DING DONG!
– Excuse me Ma’am. Would you like to buy some nice Javascript?
– No, sorry… someone else has better Javascript and for free.

• Udemy enables anyone to take and build courses online.
Javascript for Beginners by Mark Lassoff Course $49.00
http://www.udemy.com/beginning-javascript/

• Treehouse has courses on hundreds of topics including how to build a website, how to build a web app, how to build a mobile app, and how to start a business.
http://teamtreehouse.com/
Sample videos at: http://www.youtube.com/user/gotreehouse

Mini review: $25 minimum a month fee to access their training modules. They have “badges” that you unlock for achievement. What is it with people wanting badges?

List of resource sites from others

• Mozilla Developer Network: The links on this page lead to a variety of JavaScript tutorials and JavaScript training materials. Whether you are just starting out, wanting to learn JS basics, or are an old hand, wanting to sharpen your skills, you can find helpful resources here for JS best practices.
https://developer.mozilla.org/en-US/learn/javascript

• reybango: The Big List of JavaScript, CSS, and HTML Development Tools, Libraries, Projects, and Books by reybango
http://blog.reybango.com/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/

• reybango: What to Read to Get Up to Speed in JavaScript by reybango
http://blog.reybango.com/2010/12/15/what-to-read-to-get-up-to-speed-in-javascript/

• Michiel Overeem‘s blog entry: I decided to summarize some JavaScript sources that I use, have used and want to share with others. This is by no means complete, but it might serve as a good starting point.
http://blog.movereem.nl/JavaScript-sources/

• noupe: A blog entry reviewing some Javascript learning sites by Joel Reyes for “Smashing Magazine”
http://www.noupe.com/javascript/javascript-for-designers.html

• Chris Shiflett, a web craftsman from Brooklyn, NY made a list.
http://shiflett.org/blog/2012/apr/javascript-study-guide

• Douglas Crockford List of resources on Javascript
Javascript developer – Yahoo
http://javascript.crockford.com/

• Smashing magazine: Learning JavaScript: Essentials And Guidelines
This is a selection of most popular and useful articles on learning JavaScript and jQuery published over all the years here, on Smashing Magazine.
http://www.smashingmagazine.com/learning-javascript-essentials-guidelines-tutorials/

• Peteris Krumins reviews various Javascript lecture videos
http://www.catonmat.net/blog/learning-javascript-programming-language-through-video-lectures/

• Essential reading if you are interested in the topics of Advanced Javascript or BIG Javascript applications. April 2011
http://blog.favrik.com/2011/04/15/must-read-links-for-advanced-javascript/

• A compilation of a couple of series that I have written over the years. Some of them are still a work in progress. by Ryan A.S.
http://mycodefixes.blogspot.in/p/series.html#nakedjavascript

• Resource list developed by Michael Lindeman and Douglas Mills
http://www.chipchapin.com/WebTools/JavaScript/javascript-uiuc-resources.html

Learning by code snippets & scripts

• Javascript Koans on GitHub: The goal of the Javascript koans is to teach you Javascript programming through testing. When you first run the koans, you’ll be presented with a runtime error and a stack trace indicating where the error occurred. Your goal is to make the error go away. As you fix each error, you should learn something about the Javascript language and functional programming in general.  These koans will be very simple, so don’t overthink them! As you progress through more koans, more and more Javascript syntax will be introduced which will allow you to solve more complicated problems and use more advanced techniques.
https://github.com/mrdavidlaing/javascript-koans

• JavaScript Koans is an interactive learning environment that uses failing tests to introduce students to aspects of JavaScript in a logical sequence.
https://github.com/liammclennan/JavaScript-Koans

Mini review: Wikipedia says that “GitHub is a web-based hosting service for software development projects that use the Git revision control system. GitHub offers both paid plans for private repositories, and free accounts for open source projects.”

I am not on GitHub. Learning by testing and debugging is an interesting concept, but sounds miserable. I’ll make enough of my own errors in learning without adding more. Sounds like a good way to test knowledge vs way to learn.

• The JavaScript Source is a collection of scripts collected and offered free. Also has a forum for posting scripts and questions.
http://www.javascriptsource.com/tutorials/

• newbie: The purpose of this tutorial is to provide an introduction to the JavaScript programming language. The form of this tutorial is basically lots of little examples of script with explanations of their use. It assumes no knowledge of programming, however it requires a good knowledge of HTML. by Jeremy Wray
http://www.newbie.org/JavaScript/index.htm

Mini review: Good use of colors in the text to help make code more clear. What drove me crazy is the use of “it’s” when should be “its” and other such mistakes. That undermines my confidence. This is another good hearted attempt at a tutorial.

• JavaScript Tutorial Examples collected from on-line tutorials
starting in 2000 by Chip Chapin. Code seems to be mostly from 2002.
http://www.chipchapin.com/WebTools/JavaScript/

• Avoiding The Quirks: Lessons From A JavaScript Code Review by Addyosmani
http://addyosmani.com/blog/lessons-from-a-javascript-code-review/

• Learning JavaScript by Example
http://www.fincher.org/tips/Languages/javascript.shtml

Mini review: Just one scrollable page of code snippets with an example and then “This produces” followed by an image box with text. Examples are like a paper book in function, but trying to appear more like an executed graphic. Just strange. The description at the top sums it up: “This page is a very quick overview for the Attention Deficit programmer. No extra fluff.”

Reference (not tutorial)

• github Open source documentation reference
http://dochub.io/#javascript/

Mini review: On github. Seems to be an open source documentation reference. Has CSS, HTML, JavaScript, DOM, jQuery, PHP, and Python. Explains aspects of the code listing them in alphabetical order. Gives a description, syntax, when and what version implemented in standards, usage with examples, and source of information.

• JavaScript Reference, DOM Core (Also has a forum for Javascript)
http://reference.sitepoint.com/javascript

• Annotated ECMAScript 5.1: This is an annotated, hyperlinked, HTML version of Edition 5.1 of the ECMAScript Specification
http://es5.github.com/

• Microsoft JavaScript Language Reference
This documentation describes the Microsoft implementation of JavaScript, which is compliant with the ECMAScript Language Specification 5th Edition. Includes version support.
http://msdn.microsoft.com/en-us/library/yek4tbz0.aspx

• Mozilla Developer Network Documentation reference
https://developer.mozilla.org/en/JavaScript/Reference

• Google JavaScript Style Guide
http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml#Semicolons

Other

• Code Review: This is a free, community driven Q&A for peer programmer code reviews.
http://codereview.stackexchange.com/

• Browserscope is an open-source community-driven project for profiling web browsers. The goals are to foster innovation by tracking browser functionality and to be a resource for web developers. Written in GoogleAppEngine.
http://www.browserscope.org/

• A test-driven JS assessment: Set of tests that can be used to assess the skills of a candidate for a JavaScript position, or to improve one’s own skills.
https://github.com/rmurphey/js-assessment

• Directories of Javascript tools shaping the new web
http://javascriptlibraries.com/
http://en.wikipedia.org/wiki/List_of_JavaScript_libraries

• Stack Overflow is a programming Q & A site that’s free. Free to ask questions, free to answer questions, free to read
http://stackoverflow.com/

• Questions answered on O’Reilly technical book publishing site
http://answers.oreilly.com/

• Forums:
– Pre-2010 archives only
http://tech.groups.yahoo.com/group/ydn-javascript/
– comp.lang.javascript FAQ
Version 32.2, Updated 2010-10-08, by Garrett Smith
http://jibbering.com/faq/
https://groups.google.com/forum/#!forum/comp.lang.javascript
– Yui forum
http://yuilibrary.com/forum/

• JSHint is a fork of JSLint:  community-driven tool to detect errors and potential problems in JavaScript code
http://www.jshint.com/

• jslint – The JavaScript Code Quality Tool:  tool written & maintained by Douglas Crockford
http://www.jslint.com/

• JSMin: The JavaScript Minifier
http://www.crockford.com/javascript/jsmin.html

• JSCheck is a specification-driven testing tool.
http://www.jscheck.org/

• JSDev is a simple JavaScript preprocessor. It implements a tiny macro language that is written in the form of tagged comments. These comments are normally ignored, and will be removed by JSMin. But JSDev will activate these comments, replacing them with executable forms that can be used to do debugging, testing, logging, or tracing.
https://github.com/douglascrockford/JSDev/blob/master/jsdev.c

• Firebug: The most popular and powerful web development tool
http://getfirebug.com/

• JsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript.
http://doc.jsfiddle.net/

• jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.
http://jsperf.com/

• JavaScript™ Developer Center: This is your source for information for using JavaScript with Yahoo! Web Services APIs.
http://developer.yahoo.com/javascript/

• Blog “Adventures in Javascript Development” by Rebecca Murphy
http://rmurphey.com/

• Server-side Javascript (node.js)
http://nodejs.org/
http://dailyjs.com/2010/11/01/node-tutorial/
http://www.nodebeginner.org/
http://howtonode.org/

MVC
• Javascript MVC Frameworks Reviewed
http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/

• Journey Through The JavaScript MVC Jungle by Addy Osmani
In a typical application you will find these three fundamental parts:
Data (Model), an interface to view and modify the data (View), and operations that can be performed on the data (Controller)
http://coding.smashingmagazine.com/2012/07/27/journey-through-the-javascript-mvc-jungle/

• Helping you select an MV* framework
http://todomvc.com/

Other

• ADsafe makes it safe to put guest code (such as third party scripted advertising or widgets) on a web page.
http://www.adsafe.org/

• The golden rule of CoffeeScript is: “It’s just JavaScript”. The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime. You can use any existing JavaScript library seamlessly from CoffeeScript (and vice-versa). The compiled output is readable and pretty-printed, passes through JavaScript Lint without warnings, will work in every JavaScript runtime, and tends to run as fast or faster than the equivalent handwritten JavaScript.
http://coffeescript.org/

Words of warning to learn Javascript

• JavaScript: The World’s Most Misunderstood Programming Language by David Crockford
http://javascript.crockford.com/javascript.html

• So, you think you know JavaScript?
http://dmitry.baranovskiy.com/post/so-you-think-you-know-javascript

•  Douglas Crockford: JavaScript Doesn’t Suck
Interview from 2008 discussing pros / cons of the language
http://www.sitepoint.com/interview-doug-crockford/

• Success for #promotejs is measured by developers everywhere writing better JavaScript code. They did the w3fools.com.
http://promotejs.com/

Mini review: These are programmers trying to change the search results for when someone queries for “Javascript” tutorials, so that good information comes to the top of the search list. Reminds me of a video of David Crockford, a godfather of Javascript, who said there are plenty of Javascript books and most aren’t very good. How do you know what is a good book or tutorial or what has useful concepts on programming and specific coding practices? What fits different personalities and abilities? Maybe a non-optimal tutorial for an experienced programmer could be useful to get someone else just starting? I don’t know… Seems my accumulated collection of bookmarks and trying to wade through what is valuable and what isn’t for myself fits in line with their concept. Basically they suggest using Mozilla Developer network references.

• A re-introduction to JavaScript (JS Tutorial)
by Simon Willison (March 2006)
https://developer.mozilla.org/en/A_re-introduction_to_JavaScript

• JavaScript as a First Language by John Resig
http://ejohn.org/blog/javascript-as-a-first-language/

• Create Advanced Web Applications With Object-Oriented Techniques
by Ray Djajadinata
Article to discuss in depth how the JavaScript language really supports object-oriented programming and how you can use this support to do object-oriented development effectively.
http://msdn.microsoft.com/en-us/magazine/cc163419.aspx

Mini review: The article starts off with this introduction. “Recently I interviewed a software developer with five years experience in developing Web applications. She’d been doing JavaScript for four and a half years, she rated her JavaScript skill as very good, and—as I found out soon after—she actually knew very little about JavaScript. I didn’t really blame her for that, though. JavaScript is funny that way.”

“The biggest problem with learning JavaScript is that there is a massive amount of outdated and possibly dangerous information out there. This is especially frustrating as a lot of this information is very well presented and gives a lot of beginners a “quick win” feeling of knowing JavaScript by copying and pasting some ready-made code.” – W3C