Helpful links to get started with JavaScript

October 14, 2011 Leave a comment

Good C# Habits Can Encourage Bad JavaScript Habits: http://tv.devexpress.com/#JavaScriptHabits

Good place to start. Video focused on helping C# folks transition to JavaScript. If you prefer to read here is his blogpost.

Self-executing anonymous function: http://briancrescimanno.com/2009/09/24/how-self-executing-anonymous-functions-work/

A key component of the module pattern. A function with no name that executes as soon as it is defined.

Module pattern: http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

JavaScript doesn’t provide namespaces. The module pattern is a way to work around this using function scope.

Scope and Hoisting: http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting

JavaScript uses function scope and hoists declarations to the top of this scope.

jQuery deferred: http://msdn.microsoft.com/en-us/scriptjunkie/gg723713.aspx

jQuery recently rewrote its entire ajax story to use deferreds. If you need to do any asynchronous coding, this is a good way to avoid callback hell.

Falsey and Truthy: http://jsfiddle.net/thejoecode/xB2Gk/

A jsfiddle to show what values are considered true or false. Quite a few gotchas here (empty string, zero, null, undefined are all false).

Book of speed: http://www.bookofspeed.com/

How browsers load pages and the effect speed has on sales.

Categories: JavaScript

Controlling the flow

August 10, 2011 Leave a comment

Code that does the same thing every time is not very useful. It only needs to be ran once and then you can write down the results and never use it again. Most code makes some decisions based on input or state. In order to make a decision in code one must control the flow. In computer science the pieces of code that control the flow are called control structures.

if (x)

The if statement checks that its input (the code between the parentheses) is true. Only if it is true will the next line or block be ran. A block is any code between matching curly braces {}. It could be a single line or multiple lines of code.

if (true)

    <this is ran>

 

if (true) {

    <this is ran>

<this also is ran>

<anything within this block is ran>

}

 

The if can be paired with an else. The else gets ran only when the if is false.

 

if (true) {

    // will be ran

} else {

    // won’t be ran

}

 

if (false) {

    // will not be ran

} else {

    // will be ran

}

 

You can chain multiple if elses together by putting an if right after the else. The next if will only be checked if the first if evaluates false. This means that only one block will ever be ran in the chain.

if (true) {

    //will run

} else if(true) {

//won’t run even though it is true

} else {

//won’t run

}

 

if (false) {

//won’t run

} else if(true) {

//will run

} else {

//won’t run

}

 

if (false) {

//won’t run

} else if(false) {

//won’t run

} else {

//will run

}

 

You do not need to end with an else by itself. However think about why you are not including it. Without the catchall else at the end of the chain, it is possible that none of the if’s are true and everything is skipped. You might want this behavior, just make sure.

 

Best Practice Tip: Always include the curly braces, even for a single line if statement. If you add another line of code and forget to add the {} later, you will get unexpected results.

if (true)

    <do something>

 

later…

if (x)

     <do something>

     <do something else>    // This line will always be ran no matter what the value of x is

 

if (x) {

    <do something>

    <do something else> // now it works

}

Categories: JavaScript

Basic Syntax

July 17, 2011 Leave a comment

Basic code that is good to know.

How to write a comment

Comments are just notes to yourself and future readers of the code. There are two styles but I would stick with single line. Most editors allow you to select a block of code and insert/remove comments from each line.

// This is a single line comment
// This is another single line
/* Forward-slash star start of a multi-line comment
the downside to multi-line comments is that they cannot be nested
so if you wanted to comment out this comment and surrounding code
you would have to remove this comment first or use single line comments
the star forward-slash ends the comment */

When to use semicolon

At the end of every assignment or function call. The only time you don’t use a semicolon when defining a function or after a control structure. The caveat, defining a function and assigning it at the same time:

function foo () {}  // No semicolon for function definition
if (foo) {}  // No semicolon after {} of control structures
if (foo) {} else {}
while () {} 
var foo = function bar() {}; // Semicolon
var foo = function () {};  // Semicolon even for anonymous functions
var foo = {};  // Semicolon after assignment
var foo = "bar";  // Semicolon after assignment

Some additional reading: http://www.howtocreate.co.uk/tutorials/javascript/semicolons

How to declare multiple variables using comma

Only a single var is needed for all the variables in scope. Assignments can be done, and can even rely on previous assignments. Because of variable hoisting, I would recommend declaring everything at the top of the scope.

var foo,
    bar;
var foo = {}, // Assignment
    bar = foo; // Both foo and bar point to the same new object. The assignment foo = {} is completed before the bar = foo is.
var foo = {}, bar = foo; // And of course everything can be on the same line. Focus on readability not compactness.
Categories: JavaScript

Hello JavaScript

July 17, 2011 Leave a comment

Before we start, I highly recommend you try the code samples yourself as you read the tutorials.

Your browsers developer tools can be accessed using the following shortcuts. The console tab is where you can enter your code and see it ran.

IE: F12
Firefox: Ctrl + Shift + K
Firefox with Firebug: F12
Chrome: Ctrl + Shift + J
Safari: Ctrl + Alt + C

Now lets write some JavaScript!

Everything in JavaScript is an object. Think of an object as a container.

An object is created like so:

var myFirstObject = {};

Lets walk through each part.

I will go into var in more detail later. For now think of it as a way to tell JavaScript that a new object is about to be named.

myFirstObject could be almost any name we wanted. Try to pick names that describe the contents of the object. In this case we are creating our first object so I chose a name to show that.

The equal sign assigns what is on the right to the left. So myFirstObject now contains {}. This is called an assignment.

{} is a shortcut to create a new empty object.

The semicolon at the end of the line is to let JavaScript know that you are done with that line of code. In JavaScript, a statement can span multiple lines. Without the semicolon, JavaScript would have to guess what you intended. It is best not to forget the semicolon.

We now have a new object named myFirstObject. To add another object to it we can use the dot or period.

myFirstObject.mySecondObject = {};

The dot operator looks for an object with the specific name. In this case it looks for mySecondObject inside myFirstObject. But we never created one called mySecondObject for it to find! How can this work at all? During an assignment,  if the name given after the dot is not found, it is assumed that you want it to be created.

So we now have an object within another object. It could be represented like so:

myFirstObject = {
    mySecondObject: {}
}

This is actually valid JavaScript which I will cover in the future. For now I hope it can help you visualize the structure (if it helps, think of the “:” as “=” instead). When an object starts out it is empty and that is represented like {}. As you add items to it, its gets filled by them { item1, item2, etc.. }.

I want to cover one more way to interact with objects.

These are the same:

myFirstObject["mySecondObject"]
myFirstObject.mySecondObject

The braces [] let you specify the name you are looking up. The quotes are needed. More on why later.

I know the first lesson didn’t cover much, but I feel it is essential to understand the basics about objects before moving forward.

Categories: JavaScript Tags: , ,
Follow

Get every new post delivered to your Inbox.