Let's get started.

I'm already familiar with HTML and CSS so I'm diving into Javascript. I'm using the Codecademy Javascript course as a starter, since it's a prerequisite for the Iron Yard course I'll be taking later this year. It's also free, which is great.

Codecademy starts off with a mixed bag of simple snippets. I'll just document them here.

Before I get started; it took me a while to figure out where or how to test my code. There are two simple options. Your browser probably has a javascript console built in. Simply google "how to access chrome javascript console"; or check out one of the js consoles on the scratchpad.

Getting Started (Lesson 1)

Get something's length

To get the length of something, just append ".length". This includes spaces.

Ex. something.length

I figure we'll learn how to use this later. For now it just spits out the count in the console. You can use this with a string, or any other data type.


Basic Math

Plus Minus Multiply Divide
+ - * /

Order of operations is also supported, in this order: Anything in brackets (parentheses) first, then * / + - in that order.


Comments

Create a comment simply by adding // at the start of the line.

Ex. // This is my comment


Confirm

Confirm does exactly that, it asks that you confirm something. So we have the command confirm with something in parentheses. In the example it's simply text, but it can be output from a function or some other Javascript magic.

Ex. confirm('This is what I want you to confirm. Click OK or Cancel.')


Prompt

Prompt is similar to Confirm except that it requires a more complex input. For example if we wanted to ask the user their name we'd type the prompt command followed by the question in brackets. This would provide a dialogue with a text field.

Ex. prompt('What is your name?')


Data Types

There are a number of datatypes. We're starting with two of them. Numbers, which are just that; numbers. And strings, which are different from other text, because strings are always between quotation marks, to prevent the browser from confusing them with commands.

Numbers are written with no quotations for example 42 as opposed to a string of the same number which is written "42".

Let's say we type confirm, that's a command which requires additional input (something between parentheses). But "confirm" is just a string, it won't do anything. It can be used as a lable for example. We could very well type confirm("confirm") or confirm('confirm').

I'm not sure what the difference between double and single quotation marks are, except that if you use a double quotation you can use singles inside it without adding \ before it (escaping it) to prevent it from being read. If that makes any sense. Maybe we'll figure that out later.

[Edit, months later: There's no real difference between double or single quotations marks. As a matter of style I prefer using single quotations inside of Javascript to make it easier to add html or css elements where I use double quotations.]

Did some googling. Here's a simple explanation from karim79 at stackoverflow.

You'll want to use single quotes where you want double quotes to appear inside the string (e.g. for html attributes) without having to escape them, or vice versa. Other than that, there is no difference.


Booleans

Another data type. A boolean is either true or false but can be presented in various ways. For example in Javascript (and I believe in all coding) 0 = true and 1 = false. So, a couple of boolean examples:

0 or 1
false or true
5 > 6 or 5 > 4 This is a boolean because it gives you an actual true or false answer ex: 5 is larger than 6 = false. There's a whole bunch of these, using operators. Here's a short list of operators; I'll keep editing if I find more.

Operators

  • Equal : ===
  • Not Equal : !==
    • You can also use ! in other places like !< means not less than.
  • Less than : <
  • Greater than : >
  • Less than or equal : <=
  • Greater than or equal : >=
  • Remainder or "modulo" : %
    • This fancy little percentage sign actually calculates what remains after one number is divided by another number. For example if you divide 23 by five you get 4 with 3 left over. 3 is the remainder. So in javascript 23 % 4 === 3. Nice.

Console.log

This works similar to confirm or prompt. You type the command console.log followed by something in parentheses. The something can be just about anything that ends in a value like math, a string, a number and more. console.log outputs your results to the console.

Ex. console.log("This is my string"); will output This is my string to the console and console.log(10 * 3); will output 30.

If you add a boolean comparison you'll get something pretty cool.

Ex. console.log("This is a long string".length > 5); will output true.

What's happening? We're taking the string This is a long string and calculating its length by adding .length. Then we compare that number to 5 to see if it's 'greater than'. In this case it is and the entire wobbly bit outputs 'true', because yes, string.length is larger than 5.


If statement

The if statement simply works by doing one thing if something else is true. For example "if 10 is bigger than 5 give me an apple". Here's this example in code (note that stuff is done with the content of () to make stuff happen between {} ):

if (10 > 5) {
    console.log("An Apple")
}

In this case the if is using the answer of (10 > 5) to determine whether to perform what's between {}. Or, in other words "if the results is true perfrom {} otherwise skip {}".


Else

Else provides an option other than "do nothing" to an if statement. Basically "if this is true, do this, else (otherwise) do that.

if (true) {"do this"} else {"do that")

Here's the proper formatting:

if (true) {
    console.log("do this")
    }
else {
    console.log("do that")
    }

Else if

This is a combination of if and else, obviously. It works something like this: If apples are green say yes, else if bananas are green say yip, else say nothing is green. In this case the code will say yes, because apples are green.


Substring

Substring is used to display a snippet from a string. It contains a start and end number and starts counting at 0. For example a substring would see the words "mouse" as "01234". We we wanted to display the "ous" we write it something like this:

Ex. "mouse".substring(1,4);

The substring cuts the snippet from before each number. So in the case of mouse it cuts it like this:

> 0|123|4
> m|ous|e

Variables

A variable is a saved value. It can be derived from any combination of coding, but a simple example is var something = "stuff";. Now when we use the variable in code we will get "stuff". For example:

// set the variable's value
var something = "stuff";

//use the variable in a command
console.log(something);

This will print "stuff" to the console.

Variable names are written in camel case like this var myOldStuff.

Change the variable's value

By typing var myStuff = "something" we declare a variable. When we want to change its value we don't have to declare it again, we only need to change the value so we can write myStuff = "something else" without the var.

Another simple example

We can use variables in multiple ways, but here's a simple example using something we learned earlier:

var myThings = "My battle axe.";
console.log(myThings.length); // outputs the length in characters of "My battle axe." which is 14.
console.log(myThings.substring(1,6)); // outputs "y bat".

Conclusion

For reference here's the little piece of code I wrote after completing this lesson.

// give the variable myColor the value "Beef"
var myColor = "Beef"

// check to see if myColor's length, which is 4, is larger than or equal to a little math. If so, print "I finished my first course!" to the console, otherwise state the obvious.
if (myColor.length >= (6+5*(5-6)+(3/4))) {
    console.log("I finished my first course!")
}
else {
    console.log("You suck!")
}

That's it for this lesson. I might collect the different pieces into smaller posts, so it's easier to find types of comparitors, math operation, data types etc. We'll see.