Computers are dumb
Computer’s are not magic. In fact, there’s a running joke that a computer is really just a rock with lightning inside that we tricked into thinking. A computer will do exactly what you tell it to do, even if you didn’t mean what you said. The computer’s strength is its ability to remember and then do work on given variables extremely fast. Thats about all it’s good at.
x + 4 = 6
As a human, its obvious that x is 2. Lets write a program that can solve this problem. Clear out the code in main.js. Ready?
1 2 3 4 // main.js var x = 6 - 4; document.write(x + " + 4 = 6");
var followed by a space, and then the name of the variable. So it’s easy to see on line 2, we have declared a variable named x.
Some Quick Notes On Variables (and general programming)
1 var x = 6 - 4;document.write(x + " + 4 = 6");
The problem is… this is really hard to read. The convention is to break up your code appropriately with new lines and indents as necessary.
- Camel Case - our variable here is just named x but what if it was firstNumber? this is called camel case. The first word of your variable is lowercase, then capitalize the following first letters.
- Descriptive but brief - Sure, its valid to name your variable theSquareRootOfFirstNumberAndTheResultOfPiDividedByProbability but if you have an entire program written like this, your code will become unwieldy, take forever to type, and god help the next engineer that comes along to read this greek epic.
- Picky about first characters - you cannot start a variable with a number, 1stNumber is not valid, you will get an error. Some special characters are valid, like the underscore: _firstNumber is a legit variable name. Dont get too fancy with these, stick with regular alphabet characters.
- No Spaces - you cannot have any spaces in a variable name.
- No Hyphens - you cannot have any hyphens in a variable name.
Remember that whole thing about computers being dumb? They think in binary, which means everything in a computer’s memory is a 0 or a 1. Turns out, if you put eight 0’s or 1’s next to each other, you get 256 possible combinations, right? (2^8 = 256 math!). 8 bits = 1 byte. A character is 1 byte, always. For example, the letter a is represented as 01100001, or 096 if you convert it to a number. So… this lesson is a lot of bytes. Not a lot for a computer, but a lot for a human.
1 var myString = "Thank you for reading my string! Wowee!";
If you don’t wrap that string in quotes, your program will crash, because it is actual nonsense to the computer. The computer needs to know what to do with different kinds of data - it ends up writing it all in binary but it does work on different data types differently (good luck multiplying a string by the number 100), so you have to be explicit about what you’re writing.
|String||a string is a list of characters ‘strung’ together. An example of a string would be a facebook comment, or the body of an email. “This is a string, always wrapped in quotes.”|
|Boolean||a boolean is a funny word, named after George Boole. A Boolean is true or false. It can only be true or false. It is not “true” or “false”. It is true or false.|
|Object||an object is a dictionary, or blueprint, made up of key-value pairs:
|undefined||undefined is the value of a variable that has no value. lol.|
Lets Use Them
Copy this into your main.js.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 // main.js // this is called a comment, the program skips everything after // on a single line // its just for humans to read. /* this is a multiline comment so you don't have to do the // on every line, you can instead just wrap a long comment like this. */ // myNumber and aDecimal are both numbers. var myNumber = 6 - 4; var aDecimal = 2.4; // fullName is a string. var fullName = "Casey Jones"; // needsCoffee and isHungry are booleans. var needsCoffee = true; var isHungry = false; // sum is undefined, could also be sum = undefined. var sum; // we are now setting sum equal to the sum of this equation. sum = aDecimal + myNumber; // lets print this out to the browser document.write("My name is " + fullName); document.write("<br />"); // this is just html to add a new line between these. document.write("The sum of myNumber and aDecimal is " + sum); document.write("<br />"); document.write("I need coffee: " + needsCoffee); document.write(" I am hungry: " + isHungry);
Lets talk about whats going on here
When you see something like this in js:
"my name is " + fullName this is called string concatenation. Again, you’re seeing that + operator (we talk about operators in the next lesson) but it doesn’t mean to do math in this useage. Js does its best to guess what you want to do with the + operator, based on the DATA TYPES its being used with in context. We concatenated fullName onto our string above, so it just makes it one string, inputting the value of fullName into the string for us. Useful stuff.
Now, you might be asking yourself… “Isn’t sum a number type?” and wooo boy you’re a sharp one. When you concatenate any data type onto a string, it becomes a string as well. This is called coercion, it’s useful but also dangerous. Other languages aren’t so forgiving.
I explained what comments were in the code, and then I used comments to explain the code. So you should understand comments by now, they’re ignored by the compiler and only meant for me and you to read.
Introduction To The Console
So far, we have been using document.write() to see the results of our code. As a developer, you have much better tools to read the output of your code. In the developer tools window (which you should always keep open when programming in the browser, so as to keep the cache disabled) you have a tab named “Console”. Lets start using the console. Change all of the document.write() to console.log(), and replace the “<br />” with “\n”.
1 2 3 4 5 6 7 // lets print this out to the browser console.log("My name is " + fullName); console.log("\n"); // this is a newline character, we could put this in the log above or below as well. console.log("The sum of myNumber and aDecimal is " + sum); console.log("\n"); console.log("I need coffee: " + needsCoffee); console.log(" I am hungry: " + isHungry);
Great job. I know this might be somewhat overwhelming. There is a trick to learning how to write code: you need to write your own. You don’t know much right now, but as lessons go on you’ll be armed with more and more knowledge, and even though we will eventually build an app together, you should be writing code on your own, independent of our project(s).
I want you to mess around with this code, try some things out, look at errors you might see in the console.
If you have any questions or comments, click the "Go To Discussion" button below!