I learned Javascript some years ago, after a long time doing only c# and database related projects. Before deciding to learn it i had the feeling that creating reliable web interfaces was very complex and boring, however most of that thoughts came from not knowing the basic syntax, and more important, the patterns of usage of the language and how it played with other technologies like css, and html.

Then i discovered the YUI blog. Is a  blog  written by some of the Yahoo team members (And some guests), with great posts about front end engineering topics, optimization techniques, patterns and utilities. It focuses mainly on the YUI library, but there are lots of topics that will be useful even if you use JQuery or other library.

After some years of writing/reading Javascript code i have realized that there are some topics that are specially important if you want to do it right. I will leave the technical details out , and focus on the concepts, and things typical js developers must do/use/know:

Functions

By understanding how functions work in Javascript you will be able to leverage a lot of flexibility. Things like dynamic parameters, passing functions as parameters, variable scope,closures, anonymous functions are commonly used in Js world and is a good idea to be sure you understand those concepts.

How is javascript executed and when.

If you are starting with Javascript is common to ignore the way js scripts are loaded and executed and then spend time figuring out why you are having problems trying to get an element from the page.

You must make sure that all the elements you are trying to use from your script are already loaded by the time the script runs. The browser will execute javascript code as soon as it finds <script> tags. Keep that in mind if you want to access page elements that may not have been loaded yet.

Common browser events.

Learn the common browser events, like the “load” event of the window object that you can handle to run code when the HTML and images have finished loading.

( Javascript libraries enhance the events support, by creating an abstraction layer compatible with popular browsers so you won’t have too much trouble with different browsers).

Common patterns

I’ve found that patterns like Singleton are widely used by Javascript developers, and large programs will benefit by proper pattern use. I recommend the book  Pro JavaScript Design Patterns by Ross Harmes and Dustin Diaz. ( Before trying to understand patterns in Javascript make sure you feel comfortable with javascript syntax, keywords, and have some experience writing js code).

Understand JSON

After you have studied javascript syntax, arrays, object literals you will understand JSON without trouble, because JSON is just javascript syntax as a string that you can pass between server and client (With some restrictions of course).

Here, you want to use a JSON utility like json2.js (http://www.json.org/js.html) to parse and generate secure json strings. (All the frameworks also have json utilities).

CSS

Yes, is important to understand how CSS rules work. With some frameworks , CSS is the easiest way to obtain a reference to elements in your page. (JQuery supports CSS 3 selectors).

Knowing the CSS rules is also important because most javascript style attributes have similar names to the CSS attributes. (they are the same most of the time, with some exceptions)

Master the tools.

Write basic javascript programs and debug them with Firebug (firefox extension). Some things you should learn with firebug:

  1. set breakpoints and check variable values
  2. Learn to step-in, step-out when debugging.
  3. Get familiar with the Network tab to check if there was a problem loading a resource (js, css, image). This will be useful to validate AJAX requests parameters.

There are lots of tools to help you develop better javascript code. Some of them belong to the following categories:

  1. Minify and compress tools (for faster loading pages)
  2. Verification tools (like http://www.jslint.com/) detect errors and bad practices.
  3. Documentation tools to generate docs for you
  4. Debugging tools for different browsers
  5. IDE’s

Learn a Javascript Library (at the right time).

Please, understand how javascript works before learning a framework like JQuery. It can be tempting to just skip the “hard” parts of Javascript because frameworks make life easier, however that’s a bad idea, you will lost lots of time guessing why your code doesn’t work, or have conflicts with other on the page.

Having said that, i strongly recommend you to learn a Javascript framework like (JQuery, YUI, mootools, etc.) It will improve your productivity a lot. There are thousands of plugins that you can use, and event write your own. All the popular frameworks make it easy to create extensions.

If you are going to begin with Javascript, all these points will be important. There are tons of tutorials, documents, but hopefully this post will serve you as a guide.