I decided I wanted to learn JavaScript Programming language better. I had been programming in it now and then but I had never really developed any good skills in it.

If you have read about this blog page then you know that I also run Free Science Online blog which is all about free video lectures online. In my May's post I had found some really good programming video lectures, 13 of them being on JavaScript. Since I run this video lecture blog, I obviously have great interest in video lectures, so why not try to learn better JavaScript from these video lectures?

These lectures are given by Douglas Crockford who is a senior JavaScript Architect at Yahoo!. He is well known for his work in introducing JavaScript Object Notation (JSON).

My approach to watching video lectures

I have been watching various video lectures for almost 4 years now. Mostly mathematics, physics and theory of computer science. My approach to getting most of the lectures is the following. When I watch the video lectures I take notes just as if I were in class.
Even better, when I do not understand any part of the lecture I can always rewind it back and see that fragment again. I can also pause the lecture, think for a while and then continue. But that's physics and maths.
Here is a photo of notes I have taken while watching MIT's 803: Vibrations and Waves (yes! it's available completely for free at MIT's Open Course Ware)

I am serious about physics and maths video lectures, as you can see in the image, all the main results are boxed in red, the results are fully derived (even if the professor does not do it on blackboard). Btw, one lecture perfectly fits on both sides of an A4 sheet.

(Sorry about the bad quality of the photos, I shot them with my Nokia N73 cell phone camera)

This approach probably does not work with programming languages and computer tools. Because mathematics and physics is mostly done on paper, watching these video lectures and taking notes is actually doing them. The process of taking notes develops the skills because you work with the new concepts/operators/theorems/whatnot. Not so in programming languages. Unless you find an online degree for Java programmers, you can take a book on a new programming language, read it, and the next moment you can't even write the hello world program because you have only got familiar with the subject and have not developed the skills. I have experienced this myself.

Here is my approach how I am going to learn JavaScript from these lectures. I might adjust this approach at any moment if I find it not working, I will update this post appropriately then.

I will definitely watch all 11 video lectures. I will start with the first four basic lectures, watch them one by one, take notes as with physics video lectures and experiment as I go.

I will be taking notes lightly to have my mind really think the information I am getting over. But no red boxes around constructs as with physics. That's the experimentation part to learning. I am going to try the new constructs as soon as I see them so they stuck in my mind better.
Update: I dropped the idea of taking any notes on paper, because I am blogging the key points from lectures here.

Also to make this article interesting, I will annotate each lecture if something really interesting catches my eye. As I mentioned, I have programmed JS before so I am not sure how much I will learn from the first four basic lectures.

In my previous blog post I used Windows Script Host to create a program in VBScript. The other language the same scripting host runs is JScript which conforms to the same standard as JavaScript. So I should be safe doing JavaScript experimentation in JScript.

(00:45) World's most misunderstood programming language - has "Java" in its name and "Script". It has nothing to do with Java programming language and it's a real programming language not some tiny scripting language

(02:38) There are generally no books available to learn JS from - all are bad and full of nasty examples

(22:15) Object members can be accessed with dot notation Object.member or subscript notation Object["member"]

(22:59) The language is loosely typed but not "untyped"

(25:19) Reserved words are overused, they can't be used in dot notation as method names

(27:25) Operators == and != can do type coercion, so it's better to use === and !=== which do no coercion

(28:24) Operator && is also called the 'guard operator', Operator || is also called the 'default operator'

(30:16) The bitwise operators convert the operand to a 32-bit signed integer, perform the operation and then turn the result back into 64-bit floating point. Don't use bitwise operators in cases like multiplying by 4 using << 2. It will not.

After having watched the first lecture I decided that there was no point in taking notes on paper because I am blogging the key points here and trying various examples I can come up with with JScript, taking notes just wastes time.

(18:48) If you call document.write before onload it inserts data into the document, if you call it after, it replaces the document with the new stuff

(20:25) name= is used to identify values in form data and to identify a window or frame

(20:45) id= is used to uniquely identify an element so that you could get access to it

(20:59) Microsoft introduced document.all as a super-collection of all elements with name or id

(21:39) W3C instead said use document.getElementById(id) and document.getElementsByName(name)

(23:41) Document tree structure is different for IE than for other browsers because Microsoft decided to depart from W3C standard and not to include whitespaces as text nodes in the tree

(25:02) document.body gets you to body node of the tree, document.documentElement gets you to the html root tag of the tree

After watching this lecture I decided to add time where each point that caught my attention happened so that if anyone is interested in any of the points he/she could just fast forward to that place in the video. Eventually I will go through the videos up to this one once more and add timestamps.

(04:32) The guy designing CSS chose a not so appealing names to a programmer for CSS style names. JavaScript guys converted those to camel case in JavaScript which is probably the least compatible with CSS style names

(08:31) Replacing a child is done with "java oriented, model based, nothing in common with reality sort of api" through old.parentNode.replaceChild(new, old) where you specify old twice

(09:03) It is important to remove any event handlers from the object before you delete it

(10:10) Microsoft and their Internet Explorer were the first to realize that it is convenient to provide access to HTML parser and provided innerHTML property which can be assigned a string containing HTML directly

(10:50) There is no standard describing innerHTML property

(12:12) The browser has an event-driven, single-threaded, asynchronous programming model

(11:20) Internet Explorer 1.0 identified itself as "Internet Explorer" but many sites refused to serve the contents complaining that it was not "Mozilla" so in version 1.5 IE identifies itself as "Mozilla"

(12:16) Browser detection cross compatibility is the least recommended way

(15:37) Platform library cross compatibility is the most recommended way

(15:35) Platform library cross compatibility is the most recommended way

(18:48) No browser completely implements the standards and much of the DOM is not in any standards. If there was a 100% standards compliant browser, it would not work!

(19:19) When programming DOM: 1) do what works; 2) do what's common; 3) do what's standard

Okay, I watched the whole Theory of DOM course and have gained good theoretical knowledge but basically no practical skills. To get better with the JavaScript and DOM will require me to do some interesting practical projects with both of these guys.

Now I am off to watch Advanced JavaScript lectures and then the remaining.

The advanced JavaScript lectures provided lots of idioms and patterns used in the language. I did not do much experimentation and have really grasped just the concepts and overall structure of these advanced concepts.

Now I am going to watch "Advancing JavaScript with Libraries" by John Resig, creator of the JQuery JavaScript library and author of Pro JavaScript Techniques, is a Mozilla technologist focused on the relationship between Mozilla and the world of JavaScript libraries.

(05:15) Users are expecting the DOM selectors to behave more like CSS, that is like when a new CSS selector is added, it propagates to all the elements affected. The users expect the same to happen when a chunk of HTML is added to the DOM, that the handlers get added to them without re-running any code

There were not that many points that got me interested because it was pretty obvious stuff. It was just interesting to see that the DOM is not perfect and there are many bugs which one or the other browser fails, why they fail and how to solve these DOM related problems. Also typical programming meta-problems were discussed such as JavaScript trying to get elements before browser has loaded the DOM, how the white spaces are treated and what methods to use for navigating the DOM. Later the lecture went on how to query the DOM tree using jQuery and mix of XPath and CSS 3. Then it is discussed how injecting HTML in an existing document is done, what's tricky about it and what problems can arise. Finally the lecture continues with FUEL and object relational mappings.

There are not that many interesting points anymore because most of the stuff has been covered in the previous lectures. Apart from that these lecture did not teach me much new because this stuff was pretty obvious. The only point to watch this lecture is to refresh all these obvious suggestions - agree on indentation and naming conventions in your team, comment difficult algorithms and large sections of code, don't write obvious comments, comment hacks, loose coupling, careful use of complex code and design patterns, etc.

Thanks a lot, i'm in the same situation. Using javascript all the time, but knowing nearly nothing about this language. Hope to change it, after this movie session;) Your notes are also very interesting.

Peteris,
Thank you very much for publishing these links, both here and on your video lectures blog. I too have worked my way through a few of the OCW courses and really enjoyed them. I find it's much easier to learn from a lecturer than from reading alone. I don't have anything to add; I just wanted to thank you for all doing all of the "legwork" in finding and sharing these links.

Nice article. Although I'm not a big fan of video lectures yet (to be honest, I think I haven't seen any video lecture yet; shame on me ;D), I think I'm going to watch these today and/or tomorrow. Seems like a good material.

Before watching those lectures, I decided to read all your conspects about them (tx for conspects, they're quite valuable). While reading, I found one thing that I can't agree with:

"(06:49) self, parent and top are aliases of window object"

OK, all those 4 objects have the same type, but they are *not* the same object, therefore they can't be called aliases. Not in documents with frames...

As far as I understand, these were invented for working with multi-frame documents (frameset/frame, iframe), where they mean what they're called. "self" is the same window where the script runs, "parent" is parent window of a window where the script runs, and "top" is a top window. You may think of document with frames as of window with multiple child windows. If you have a document with iframe, you will have a window within a window. If there is another iframe in that first iframe, you will have a window within a window, that is within another window. If you need to get to a parent window while working in child window, you have to use parent or top instead of window. That's the purpose of those variables.

Very good post... I like the 'show notes' that you taking with the video :)
As I attend some of these lectures in person it was nice to see your notes and compare them with the ones I've taken.
Keep up the good work.

I am also going through the same process as you in learning Javascript. I've had David Flanagan's book for a couple of years, but never had the time to read it until now. I'm glad to learn that it's the "least bad" book. I do find most javascript tutorials to be very superficial.

I have the following learning plan.

1. Read through the book
2. Create a mindmap for each chapter
3. Use a shell editor for testing simple scripts, or just use the javascript: protocol in the url
4. Create a set of scripts to test each part of the language in isolation. Use this as a reference for future programming
4.5 Re-inforce understanding by watching video lectures
5. Go to a script site, and pull down some of the highest rated scripts. Study each one in detail so I can pickup good design habits.
6. Visit forums to chat to people about concepts I'm unsure of.
7. Modify existing scripts
8. Create my own scripts from scratch, including bookmarklets
9. Create a few simple video lectures
10. Move onto AJAX

Great stuff. You are one motivated guy! We are actually working on a startup that will hopefully help other people learn w/out having to try so hard. One of our main goals is to help further unlock OCW, so that it can be used in a meaningful way to really share with one another. As your tagline suggests, good learners learn, great reuse : ). We are going to be launching our closed beta soon. If you are interested in teaching online, or just finding other coders that share your interest, then drop me an email and I'll be sure you get a login.

Hi.. First Congratulations for your site.. a great resource. Second.. don't become too nerd.. have a life, friends and gf.. is good too :-) :-)

See if you can help me. I am still didn't find the best way to learn a programming...I have a lot of "half" knowledge about some languages.. but nothing deep. The "problem" is that if you wanna learn JS.. and start google... you will receive so many information that make you confuse.. and don't know where start.

Daniel, my advice is to work on projects. Whatever you can think of. For example, make a JavaScript library which creates various HTML form elements automatically.
The more programming you do, the better you will become! Start with simple projects, then move to more complicated ones.

Both Javascript (plus JSON, AJAX and other js enbaled nonsense) and Flash (Actionscript) are two of the most annoying languages on the Web. Because for many they necessitate the use of bloated browsers.

HTMLUnit is a great way to learn take control from the bloated browser and it's "plugged in" js engine and put control back on the command line, the "home turf" of any self-respecting UNIX geek.

I am happy I found your blog on technorati. Thanks for the sensible critique. Me and my wife were just preparing to do some research about this. I am happy to see such trusted information being shared for free out there.
Regards,
Alika from Eugene city

Your BLOG is the best one I have ever seen ! I just stumbled across your blog while googling for "analysis of algorithms". Thank god I found your blog ! Please keep writing like this. Awesome learning resources.

Thanks for finding these videos.
My Internet bandwidth is limited to 200MB per day. Except for a 5 hour period between 11:00pm and 4:am, So I wrote this bash script to grab the videos in a Cron job while I sleep.
The script uses the www.splandoo.com web service to get a url to download.
Improvements to this script are welcomed.

I haven't been a big fan of video. Often it seems like it takes 30 mins of video viewing to learn something that could have taken 10 mins in text or a good example. Some videos remind me of Ben Stein in Ferris Bueller Day Off :-) But there are many good videos too. Have you seen khanacademy.org or learner.org? I was surprised your notes were on paper (I did spot your update). I try to take notes in Kate and use asciidoc which has its own ASCIIMathML. asciidoc seems to interfere the least with learning the actual topic, and later I can convert it to html. Sometimes I handwrite notes and I later scan them. I only buy IT books today if I can review them first, they aren't regurgitated references, IT history, or fluff required by the publisher, and they must use best practices to teach good habits. It's a bonus if the book concentrates on building a working example. I now mainly go to the source/developer and/or pick 1 or 2 good web sites. I loved reading about your process, and hope to read more in the future.

All the JavaScript Video links you've provided open the same wrong page which doesn't seem to have those lectures. Do you have the correct links...can you fix those links to make them point to the right places to view the lectures? Thanks.

Thanks for this article and for you whole blog, there is awesome stuff in there ! :)

As pointed out by @LoveFortune, links to the videos are broken (they all redirect to the main page) and that's pretty sad... :( I think most of their content is cover in the "Crockford Public Lecture Series" at http://yuiblog.com/crockford/ but it would be nice if we can watch all the videos you're writing about :)