From ec0a27ec6aef1a6142f34acb7bc179570430f089 Mon Sep 17 00:00:00 2001 From: Andrew Suffield Date: Sun, 27 Dec 2015 05:32:25 +0000 Subject: [PATCH] Rework js tutorial #1 This is a substantial rework of the text, and a few things have moved between tutorials #1 and #2. Major changes: - if statements, booleans, and operators other than + have moved to #2 - objects have moved to #1 - more detailed explanations, slower pacing early on - much deeper focus on functions The things which were moved around are in aid of a larger refactor: after this change, students should be able to manage js tutorials #3 through #6 using only the material learned in #1. This lets them jump into building working websites faster. Things which were removed from tutorial #1 have been added to #2 for now just to have them somewhere, but a near-term goal should be to break #2 into smaller chunks and introduce them as part of other exercises, where students can be building things instead of reading about them. --- js/lesson1/assets/images/console-hello.png | Bin 0 -> 9228 bytes js/lesson1/assets/images/console.png | Bin 0 -> 12754 bytes js/lesson1/tutorial.md | 613 ++++++++++++--------- js/lesson2/tutorial.md | 243 +++++--- 4 files changed, 514 insertions(+), 342 deletions(-) create mode 100644 js/lesson1/assets/images/console-hello.png create mode 100644 js/lesson1/assets/images/console.png diff --git a/js/lesson1/assets/images/console-hello.png b/js/lesson1/assets/images/console-hello.png new file mode 100644 index 0000000000000000000000000000000000000000..506553abc15ab31f680f949109c542335eb0fbff GIT binary patch literal 9228 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 N$RHIZ^TnV0{~IXN#pVD2 literal 0 HcmV?d00001 diff --git a/js/lesson1/assets/images/console.png b/js/lesson1/assets/images/console.png new file mode 100644 index 0000000000000000000000000000000000000000..8f716959dad058153d968d00155c74907cc6a33a GIT binary patch literal 12754 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 -nodejs +## Writing your first line of JavaScript +The console is a place where you can type a single line of JavaScript, +and it will immediately run. Try it out now, by typing the following +line into the console, then pressing enter: +```js +console.log('Hello!'); +``` -### Today let's focus on understanding the basics +You should see something that looks something like this: -## But before we start... + -### Required files +Your screen might not look exactly the same as this, but it should +have the same three lines of text at the bottom. If you don't see +this, get your coach to help you. -Download the files required to begin working through the tutorial from [here](https://gist.github.com/despo/0b674ec9d5ae9cb09704/download) +A few important things have happened here, which we're going to go +over in more detail in the next section. For the moment, you should +see where it's printed `Hello!` on your console. That's what +console.log does: it takes the thing you give it, and prints it on the +console. -## Let's try out some JavaScript! +You should also see two other lines: one with the code that you typed +in, and one that says `undefined`. There should be two little arrows +to the left of them. The arrows tell you that this line is about +something that was typed into the console directly. For now, just +remember what they look like. -We'll start by just outputting some content on our browser's inspector console. -To keep track of what we do, you should write the code in the `script.js` +Let's move on to writing code in a file. Type the same `console.log` +line into `script.js`. Reload the page in your browser so that it +reads the change you made. -First open up your HTML page and the **inspector**. +This time, you should just see the line that says `Hello!`, and not +the lines that said `console.log('Hello!');` or `undefined` with +arrows next to them. That's because you didn't type the JavaScript +into the console this time. -> We will be doing a lot of refreshing to see our changes! **JavaScript** loads when the page opens, so it's essential to refresh! +###What you've learned so far -Let's write out something in the console, to make sure that our file is in place and working! +* How to type JavaScript into the console +* How to type JavaScript into a file +* How to print things to the console with console.log +* How to recognise the things you see on the console -```js -console.log("Hello! This is my first line of JavaScript!"); -``` +We've been going really slowly so far, because it's essential that you +be able to do all these things for the rest of the tutorial. If you +aren't sure about any of them, stop and ask your coach about it +now. Otherwise, we're going to start doing more interesting things. -There are a few things going on here. For now, all you need to know is that `console.log` is a *function* that allows you to print something to the console. The stuff between the brackets is what gets printed. +##Values and expressions -##Variables and Expressions +Try typing a single `1` on the console. You should see that it +repeats the number back to you, with an arrow next to it. -### What are Variables? +Try typing `1 + 2` on the console. This time you should see it add the +numbers together and give you the result. -Variables are objects that hold content. They are declared using `var` and we can assign values to them. +The `1 + 2` that you typed is an **expression**. What the console +printed with the arrow next to it is the **value** of that +expression. As you've just seen, the value of `1` is just `1`, and the +value of two numbers with a `+` sign between them is those two numbers +added together. -### What are expressions? +We want to do things with words as well as numbers. A value containing +letters is a **string**, and you write it in quotes. Try typing +`'Hello'` on the console. Like before, you'll see it repeated back to +you: the value of a string is just that string. -Expressions are a set of variables, operations and expressions that get evaluated together. +Try `'Hello' + 'there'`. You should see it combine the two strings +into one. The value of two strings with a `+` sign between them is +those two strings concatenated. You'll also see that it's missing a +space - can you fix that? +Try typing `Hello` without any quotes around it. See how you just get +an error about `Hello` not being defined? Words that aren't surrounded +by quotes are not strings. There's a couple of things that they could +be, which we'll discuss later, but the important thing to remember for +now is that you can put anything you like into a string, but an +unquoted word has to be defined before it means something. -#### Let's try and understand variables by building some simple expressions +There are many more kinds of expressions and values, but we'll come +back to that later. -There are different types of variables that we can declare: +Remember: -Try them out one by one! +* A **value** can be a single number or a single string +* An **expression** can combine several numbers or strings together +* Every **expression** can be reduced to a single **value** -- **strings** - group of characters, it must always be in quotes +##Variables -```js -var name = "codebar"; +Try typing this on the console: -console.log(name + " is amazing!"); // this is an expression +```js +var a = 17; ``` -> Can you see the output in your console? Try changing the value of `name` - -The `+` operator adds things together. For strings, this means *concatenating* them. If anything other than a string is added to a string, JavaScript will try to turn it into a string first. +You'll see that it returns the value as `undefined`. undefined just +means that the thing you typed doesn't really have a value. However, +this did something else: it created a **variable** named `a`. -- **numbers** +Now try typing `a` on the console. You should see that you get back +17. Variables are a way of giving names to **values** so that you can +use them later. -Let's output the value of pi: +Try typing these: ```js -var pi = 3.14; - -console.log("The value of pi: " + pi); +var b = 12; +var c = a + b; ``` -In the above case, a number is being added to a string. JavaScript turns the number into a string, and then puts the two strings together. +Now look at the values of b and c. See how it's storing the values of +these expressions? -Now let's output the current year, and auto-calculate the value of the next year using **addition** +A line starting with `var` is a **variable definition**. You should +use this whenever you are creating a new variable. -```js -var year = 2015; -var nextYear = year + 1; +You can also change the value of a variable. That's why it's a +"variable": because its value can vary. Try this: -console.log("We are in " + year + ", but " + nextYear + " is just around the corner!"); +```js +b = 2; ``` -That's great! We can combine strings together and add up numbers. +Notice that you don't have `var` this time. If you just have a +variable name, an equals sign, and an expression, then this is a +**variable assignment**, which changes the value of a variable that +you defined earlier. -> Sometimes you may forget to use `;` after a statement. Usually this is ok, but sometimes strange things can happen. Try not to forget to use `;`. +You've just changed the value of `b`. Remember that you defined `c` to +be `a + b`? Look at `c` again and see if it has changed. -- **booleans** - true/false +You should see that `c` has stayed the same. Now try assigning it again: ```js -var codebarIsAwesome = true; -var weatherIsAmazing = false; - -console.log("Is codebar AWESOME? " + codebarIsAwesome); -console.log("Is the weather in London amazing? " + weatherIsAmazing); +c = a + b; ``` -- **undefined** -If no value is set for a variable, then it will automatically be set to undefined. +See that it's changed this time? This is because the **expression** +`a + b` is converted into its **value** immediately when it is used. -```js -var iDontHaveAValue; +###Keywords, identifiers, and strings -console.log("What kind of variable am I? " + iDontHaveAValue); -``` -> The general convention in JavaScript is to use `lowerCamelCase` while naming variables. +The word `var` is a **keyword**: a word that means something special +to the language. `var` means "create a new variable". -### Operations -There are a number of operations you can apply, just like when using math. +Earlier in this tutorial, we had you try typing `Hello` on the console +without quotes, and you got an error about it not being defined. You +can put anything you like into a string, but things that aren't in a +string need to be defined to mean something before you can use +them. The `var` keyword defines a new word to be a variable. In this +section you created the variables `a`, `b`, and `c`, so you could use +those. -Let's section the output by outputting a title +Unlike with strings, you can't use any word you like to be a variable +name. The kind of words that can be variable names are called +**identifiers**. Identifiers can contain letters, `$` signs, or +underscores `_`. They can also have numbers in them, but may not start +with a number. The rest of the punctuation on your keyboard cannot be +used in identifiers. -```js -console.log("Operations"); -``` - -#### addition `+` +The other important rule is that you can't write an identifier that is +the same as a keyword, so you cannot create a variable called +`var`. If you try writing this then you will get a fairly obscure +error message: ```js -var x = 6; -var y = 3; -var addition = x + y; - -console.log("Addition: x + y = " + addition); +var var = 1; ``` -#### subtraction `-` +##Functions -```js -var subtraction = x - y; - -console.log("Subtraction: x - y = " + subtraction); -``` - -#### Multiplication `*` +Start by typing this on the console: ```js -var multiplication = x * y; - -console.log("Multiplication: x * y = " + multiplication); +function hello() { console.log('Hello!'); } ``` -#### Division `/` +It won't do anything just yet. This thing is a **function +definition**. You can recognise it because it starts with the word +`function`. It creates a new function named `hello`. -```js -var division = x / y; +Now try typing this: -console.log("Division: x / y = " + division); +```js +hello(); ``` -### The if statement -In JavaScript we can write conditions to control what we output +This thing is a **function call**. You can recognise it because +it's a name with `()` immediately afterwards. Try calling `hello` again. -For example, if we were required to fill in our credit card details on a website's form, we could use an `if` statement to check that the card number is the correct length before submitting the form. +Let's move some of this into `script.js`. We wrote the function +definition all on one line because that's all the space you have in +the console, but the normal way to write one is like this: -Let's try out writing an `if` statement. - -``` -if (codebarIsAwesome) { - console.log("codebar is AWESOME!"); +```js +function hello() { + console.log('Hello!'); } ``` -Isn't that cool! :) +Put that into `script.js` and reload the page. Now just try calling +the `hello` function on the console, without doing anything else. You +should see that it still works, using the definition that you put into +`script.js`. -We can also write a condition that checks for the opposite, so, not true +Let's make a larger function. Put this one into `script.js`: ```js -if (!codebarIsAwesome) { - console.log("codebar is not so awesome :(!"); +function conversation() { + hello(); + console.log('How are you?'); + console.log('Goodbye'); } ``` -> This should not output anything. Try setting `codebarIsAwesome` to false before running this expression. +Try calling the `conversation()` function on the console. See how it +did all three things in order? Functions are lists of things to +do. When you call the function, it does all the things in its +definition. -> Did you use `var`? Since we have already declared our variable, you shouldn't need to do that. +Let's get a few words for these things before we move on: +* `hello` and `conversation` are the **name** of the functions +* The lines inside the braces `{}` are the **body** of the function +* Remember from earlier that a function name followed by parentheses, + like `hello()`, is a **call** -The `if` statement will try to turn anything in the round brackets into a `true` or a `false`. It is very common to let it do this, so when you see some JavaScript in the wild, be prepared! The following things become `false` when used in an `if` statement: +Function names are **identifiers**, the same as variables. That means +they have exactly the same rules about what names you may give to your +functions. The word `function` itself is a **keyword**. - - `false` - - `0` - - `"" // (an empty string)` - - `null` - - `undefined` - - `NaN` +###What you've learned so far -Don't worry about what all of these are yet. It'll become more clear as you go on. +* What **strings**, **expressions**, **values**, **variables**, and + **functions** are +* What sort of names you can use for your variables and functions +* How to read and write number and string expressions +* How to use the `+` operator on numbers and strings +* How to store values in variables +* How to **define** and **call** functions -Conditions work with a number of evaluated statements. Some of the comparisons we can use are: +##Function parameters -#### Strict equality `===` +Change your `hello` function definition to look like this: ```js -var apples = "apples"; -var oranges = "oranges"; - -if (apples === oranges) { - console.log("Apples and Oranges are the same thing!"); +function hello(person) { + console.log('Hello ' + person + '!'); } ``` -There is also a relaxed equality called simply 'equality' that looks like `==`. JavaScript developers try to avoid it, because it behaves strangely. Ask your instructor for more information, but also remember to avoid `==`. +Now try calling it using `hello('Archibald')`. -This should not output anything, **apples** and **oranges** are not the same thing! +That probably isn't your name. Try calling the function again using +your own name. -#### Strict inequality `!==` +What you've done here is to add a **parameter** to the function. When +you call the function, you put a string between the parentheses. In +the definition, you put the word `person` between the +parentheses. While the function runs, `person` is defined to be a new +**variable** with the **value** of whatever you used in the call. -```js -if (apples !== oranges) { - console.log("Apples are not Oranges!"); -} -``` +Now add a `person` parameter to the `conversation` function as well, +and try it out. + +> Some people use the word **argument** instead of + **parameter**. While there are subtle differences in their meaning + in computer science, the two words are interchangeable in practice. + +##Function return values -As with `===`, there's a version of strict inequality called simply 'inequality'. It also behaves strangely and should be avoided. +Make a new function named `greeting`. Give it a `person` parameter +like the others. -#### Greater than `>` +In the body of this new function, write this line: ```js -var coaches = 20; -var students = 24; -var pizzas = 25; + return 'Hello ' + person + '!'; +``` -var people = coaches + students; +Try calling this function from the console. Look carefully at the +output: you should see that unlike all the functions you've called so +far, this one has a value. -if (people > pizzas) { - console.log("We have more people than pizzas!"); -} +`return` is another **keyword**: it means "return the value of this +expression from this function". The value of a **function call** is +the value that was given to `return`. If the function got to the end +without ever seeing `return` then the value of the call will just be +`undefined`. -if (students > pizzas) { - console.log("But we have more students than pizzas! Let's not give the coaches any food."); -} -``` +Now change your `hello` function to use this new `greeting` function, +instead of having the message in it. Check that `conversation` still +works afterwards. + +##Multiple function parameters -#### Less than `<` +Functions can have as many parameters as you want. You separate them +with commas. Try changing the first line of the definition of +`conversation` to be: ```js -if (coaches < students) { - console.log("We have less coaches than students."); -} +function conversation(person, topic) { ``` -### if-else statements +Now add another line to the function that prints `"Do you like " + +topic + "?"` on the console. -An **if-else** statement enables us to run alternative actions when our condition is not true +Similarly, you call the function like this: ```js -if (people > pizzas) { - console.log("We have more people than pizzas. That's not very good :/"); -} else { - console.log("We have waaay too much pizza. That can never be bad! :)"); -} +conversation('Archibald', 'owls'); ``` -> Try changing the numbers. What happen when you set students to `2`. Do you see the else part of the statement being evaluated? +Try it out for yourself. -## Functions +###What you've learned so far -Functions are a major part of every programming language. They enable us to create meaningful snippets of code that we can rerun without having to define the same things again. +* How to pass **parameters** to functions, and how to **return** + values from functions -Let's write a small function that prompts someone accessing our page with a message. +##Statements -Let's do this in steps. First create a function: +We've been putting semicolons `;` in various places. A semicolon marks +the end of a **statement**. So far we have been writing one line for +each statement, but this is not required. With a few exceptions, you +can add extra spaces and newlines anywhere you like. The following +statements all mean exactly the same thing: ```js -function hello() { - console.log("Hello!"); -} +console.log('How are you?'); ``` -If you refresh the browser, you will notice that nothing is printed. This is because we must *call* our function in order for it to be evaluated and give us a result. - ```js -hello(); +console.log( + 'How are you?'); ``` -Now let's extend out function to take in **arguments**. We want it to say hello to different people. - ```js -function hello(name) { - console.log("Hello " + name + "!"); -} +console.log( + 'How are you?' +); ``` -Arguments are a list of variables that will be given when the function is called. Think of them as placeholders. +Use spaces and newlines to make your program easy to read. When you're +just starting out, it won't be immediately clear to you what makes +things easier to read, so just try to follow the patterns that we use +in the tutorials. As you read and write more programs this will start +to make sense to you. -If you now run `hello();` you will notice that it says "Hello undefined". +###Semicolons -> Why is that? Do you know? Have a look at **undefined variables** if you don't remember +Semicolons are needed after any statement that does not end in a +`}`. While it is sometimes possible to leave out semicolons and have +the program still work, this is likely to break in surprising ways, so +you should try to put them in the right places. -Ok, so let's call the function with our name. +One important exception to these rules is the `return` statement. You +may not add a newline immediately after the word `return`, because if +you write this: ```js -hello("codebar"); +return + a + b; ``` -> Call the function with your name and your coach's name. Do you see the output? - -Let's write an improved version of this that shows a small dialog with the message. - -> We'll only give you a part of the function, try to make this work. +Then it is interpreted as meaning this: ```js -function popupHello(name) { - alert("Hello " + name); -} +return; +a + b; ``` -Now that you fixed the problem, call the function from you browser's console! - -> Don't add the call to the function in your `script.js`(It will get annoying to see it every time you refresh!) - -### Multiple arguments - -So far we've tried out functions with zero arguments and one argument. But we can use more! Let's try writing a function with multiple arguments. +If you want to break up a return into multiple lines, you can write it +like this and it will work: ```js -function whatIAmDoingToday(coach, place) { - console.log("Today, I am at " + place + " and I am learning a bit of JavaScript with the help of " + coach); -} +return ( + a + b); ``` +We apologise for this quirk of the language. -### Returning values - -Besides printing, which is nice when learning as it makes it easier to see the result, we can also `return` values. +##Objects -Create a function that adds two numbers together +Another type of **value** is an **object**. A way to create an object +is like this: ```js -function addNumbers(x, y) { - x + y; -} +var person = { + first_name: "Archibald", + likes: "owls", +}; ``` -> Try to run this. Not what you expected is it? -To fix this, we must explicitly use `return` when we want the function to give us back the result +The **object** referred to by the variable named `person` will now +have two **properties**, named `first_name` and `likes`. You can +access them by writing `person.first_name` or `person.likes`. + +The `.` means "access an object's property". The value of +`person.first_name` is whatever value is stored in the `first_name` +property of the `person` object. -Change the function to +A **property** is a lot like a **variable**. You can change the value +stored in it by using `=`: ```js -return x + y; +person.first_name = "Aberforth"; ``` -> Anything after the return will be ignored. What happens when you add some content before the end of your function but after defining `return`? +###References -You can fill an argument of a function with a call from another function. It's common to see this, but better to assign the value to a variable first. What do you expect to get when running `addNumbers(addNumbers(1,2), 4);`? Try it out. - -### Scope - -When we declare a variable within a function, they are not visible outside it. +Objects are **values**. We tend to say "the `person` object", but what +we really mean is "the object referred to by the `person` +variable". This is important because you can, and often will, have +several variables that refer to the same object. Try this: ```js -function subtractNumbers(x,y) { - var result = x - y; -} +var person_a = { + first_name: "Archibald", + likes: "owls", +}; +var person_b = person_a; -subtractNumbers(10,3); -console.log(result); -``` +console.log("Before"); +console.log(person_a.first_name); +console.log(person_b.first_name); -But, when we declare them outside the function, they are +person_a.first_name = "Aberforth"; -```js -var result; - -function subtractNumbers(x,y) { - result = x - y; -} - -subtractNumbers(10,3); -console.log(result); +console.log("After"); +console.log(person_a.first_name); +console.log(person_b.first_name); ``` -In the second example, `result` does not belong to `subtractNumbers`, but it can see and change it. In the first example, `result` is only defined inside the `subtractNumbers` function. The error that the first example above makes will tell you more information. +Look carefully at the output. Would you expect person_a.first_name to +be the same as person_b.first_name? -There is another possibility: +Writing `person_b = person_a` copies the **reference** to the object, +so that you have both variables referring to one object. You can then +change the object through `person_a`, and see the changes that you +made to the object through `person_b`. -```js -var result; +###Methods -function subtractNumbers(x,y) { - var result = x - y; -} +It is also possible to store a function in a property. When we do +this, we use the word **method** instead of **property**. You call a +method by combining the way you write properties with the way you +write function calls: -subtractNumbers(10,3); -console.log(result); +```js +console.log('Hello!'); ``` -Notice that the variable `result` has a `var` both outside and inside the function. This means that they are actually *two different variables*. This is called *shadowing*. It can be confusing, so try not to do this. +You may recall this line from the start of the tutorial. You now know +enough to understand that `console` is an object, and `log` is a +method on the console object. + +There are many more things that can be said about objects, and we will +return to them in a later tutorial. -## Bonus -Now you know enough to write your own little **JavaScript** program! +##Summary -With help from your coach try and write a program to do the following -- Store your name in a variable +You now know what all of these words mean: -- Store information about yourself in a variable +* strings +* expressions +* values +* variables +* functions (definitions and calls) +* parameters +* statements +* objects +* properties +* methods -- Store how many codebar sessions you have attended +You also know how to do all these things: -- Make the program output - ``` - Hi! My name is _name_. - A couple of things about me _about you_. - I have attended _number of sessions_ codebar sessions so far! - ``` +* Use the javascript console +* Store values in variables +* Add numbers and combine strings with `+` +* Define and call functions +* Access object properties +* Call object methods +* Understand what everything in `console.log('Hello!');` means -- if the number of sessions attended is 0 - ``` - This is the first time I'm attending codebar! - ``` -- If the number of sessions attended is more than 0 - ``` - This is not my first time here. I <3 codebar! - ``` +If you're uncertain about any of these, ask your coach! You'll be +needing to know all of them for our next tutorial. --- This ends our **Introduction to JavaScript** tutorial. Is there something you don't understand? Try and go through the provided resources with your coach. If you have any feedback, or can think of ways to improve this tutorial [send us an email](mailto:feedback@codebar.io) and let us know. diff --git a/js/lesson2/tutorial.md b/js/lesson2/tutorial.md index 79dfc29c..7f357441 100644 --- a/js/lesson2/tutorial.md +++ b/js/lesson2/tutorial.md @@ -13,6 +13,164 @@ Download the files required to begin working through the tutorial from [here](ht You should use **lesson2.html** and **script.js** to write the exercises in for the first part of the tutorial, and **london.html** and **london-script.js** for doing the DOM exercises. +## Values + +In the first tutorial, we talked about **values**. The types of values +that we met before were **strings**: + +```js +var name = "codebar"; + +console.log(name + " is amazing!"); // this is an expression +``` + +**numbers**: + +```js +var pi = 3.14; + +console.log("The value of pi: " + pi); +``` + +and **objects**: + +```js +var person = {first_name: "Archibald"}; + +console.log("Hello " + person.first_name + "!"); +``` + +We're going to introduce one more important type: **booleans**. A +boolean is either `true` or `false`: it has to be one of those two +values. + +```js +var codebarIsAwesome = true; +var weatherIsAmazing = false; + +console.log("Is codebar AWESOME? " + codebarIsAwesome); +console.log("Is the weather in London amazing? " + weatherIsAmazing); +``` + +## Expressions + +In the first tutorial, we saw expressions using the `+` operator. The +other basic math operators are `-`, `*`, and `/`: + +```js +var x = 6; +var y = 3; +var addition = x + y; + +console.log("Addition: x + y = " + addition); + +var subtraction = x - y; + +console.log("Subtraction: x - y = " + subtraction); + +var multiplication = x * y; + +console.log("Multiplication: x * y = " + multiplication); + +var division = x / y; + +console.log("Division: x / y = " + division); +``` + +Another really important kind of operator are the comparisons. The +`===` operator has a **boolean** value: it is `true` if the two things +are exactly the same, and `false` if they are not. + +```js +var apples = "apples"; +var oranges = "oranges"; + +var equal = apples === oranges; +console.log("Apples and oranges are the exactly same: " + equal); +``` + +The opposite of `===` is `!==`: it is `false` if the two things are +exactly the same, and `true` if they are different. + +```js +var apples = "apples"; +var oranges = "oranges"; + +var notEqual = apples !== oranges; +console.log("Apples and oranges are different: " + notEqual); +``` + +> There is another pair of operators called `==` and `!=` which we +> aren't going to look at in this tutorial. These do something +> similar, but are a bit more complicated and tend to be surprising +> instead of useful. You can just use `===` and `!==` and they will +> always do what you expect. + +The `>` and `<` operators are "greater than" and "less than". You can +use them to tell which of two numbers is bigger. Similarly, `>=` and +`<=` are "greater than or equal" and "less than or equal". + +```js +var coaches = 20; +var students = 24; +var pizzas = 25; + +var greater = students > coaches; +console.log("More students than coaches: " + greater); + +var less = students < pizzas; +console.log("Fewer students than pizzas:" + less); +``` + +You can also use several operators together: + +```js +var enoughPizzas = coaches + students < pizzas; +console.log("We have enough pizzas for everybody: " + enoughPizzas); +``` + +## if statements + +When you have a boolean, you can use it to decide whether a block of +statements should be executed. + +```js +var codebarIsAwesome = true; + +if (codebarIsAwesome) { + console.log("codebar is AWESOME!"); +} +``` + +This is more interesting when you use the comparison operators: + +```js +var coaches = 20; +var students = 24; +var pizzas = 25; + +var people = coaches + students; + +if (people > pizzas) { + console.log("We have more people than pizzas!"); +} + +if (students > pizzas) { + console.log("But we have more students than pizzas! Let's not give the coaches any food."); +} +``` + +You can also have a block of statements that happen when the condition +is false, using an `else`: + +```js +if (people > pizzas) { + console.log("We have more people than pizzas. That's not very good :/"); +} else { + console.log("We have waaay too much pizza. That can never be bad! :)"); +} +``` + ## Loops A loop is used to execute a set of statements repeatedly until a condition is met. @@ -47,7 +205,7 @@ while (i <= 10) { console.log("Total: " + total); ``` -> `<=` stands for **smaller or equal**. We can also express `<= 10` using `< 11` +> We can also express `<= 10` using `< 11` You can read this as: @@ -117,7 +275,7 @@ To get the first item `animals[0]`, the second `animals[1]` etc. The `length` property returns the size of the Array ```js -animals.lengt +animals.length ``` The length property is extremely useful when you want to do something with every element in an array. For example, to log each entry of the `animals` array, you can use `animals.length` with a `for` loop: @@ -238,87 +396,6 @@ for (var i = 0; i < fruitAndVeg.length; i = i + 1) { } ``` -## Objects - -### So what are objects? -Objects are very important in JavaScript. In fact, you've already used a special kind of object (arrays). Objects are containers for anything you like, including objects and functions. JavaScript makes creating objects very easy. - -They are special kinds of data, with **properties** and **methods** - -```js -var message = "It's cold today"; -console.log(message.length); // using length property -console.log(message.toUpperCase()); // using toUpperCase() method -``` - -### Creating our own objects - -Here is the basic template for creating an object with some properties - -```js -var object = { - propertyName: propertyValue, - propertyName: propertyValue, - methodName: function(){ - //method definition - }, - ... -}; -``` - -Let's apply that to store some information about London. - -```js -var london = { - name: "London", - population: 8308369, - tallestBuilding: { - name: "Shard", - height: "310m" - }, - numberOfUniversities: 43, - averageRent: 1106, - dailyTubePassengerJourney: 3500000, - olympics: [ 1908, 1948, 2012], - updatePopulation: function(newPopulation) { - this.population = newPopulation; - } -}; -``` - -To access the properties, we can either use the **bracket notation** like in Arrays, or the **dot notation** - -```js -console.log("Population of London: " + london.population); -``` - -As you can see, we can also define **nested objects**, like _tallestBuilding_. We can access their properties in a similar way. - -```js -console.log("The tallest building in London is the " + london.tallestBuilding.name + " with a height of " + london.tallestBuilding.height); -``` - -And we can also use arrays within them! - -```js -var i; - -console.log("The olympics took place in London in:\n"); - -for (i = 0; i < london.olympics.length; i = i + 1) { - console.log(london.olympics[i]); -} -``` -Also you can see that we can have methods in them. We have a method `updatePopulation` using which you can update the `population` property of `london`. - -```js -console.log("Population before update: " + london.population); -london.updatePopulation(8400000); -console.log("Population after update: " + london.population); -``` -We have used the keyword `this` inside the `updatePopulation` method. It is used to access the properties and methods of objects from inside the object itself. - - ## The DOM ###What is the DOM?