gistfile1.txt

#Javascript Basics


###Schedule
- Javascript Basics
- Variables
- Score Keeper Code-Along
- Conditionals
- Compare That Code-Along
- Temperature Converter Lab



###Javascript Basics
#####Using The Chrome Console

```js
console.log("Hello World");
alert("Hello!");
document.getElementById('hplogo').style.display = "none";
document.getElementsByTagName('body')[0].style.background = "red";
document.getElementById("hplogo").src="http://wolpepers.com/wp-content/uploads/2014/02/cute_kitty-1245.jpg";

```
-  Separation of concerns and why its better to change the class instead of css directly in JavaScript.


###Simple Code Along
Add some HTML
```html
<form>
<input type="radio" id="greenButton">
<input type="radio" id="blueButton">
<input type="radio" id="orangeButton">
</form>
```
To change background color:
```js
document.bgColor = "pink";
```
Let's wrap it in a function, so we can decide when to switch it
```js
function switchGreen() {
  document.bgColor = "green";
}
```
And now let's add an event handler
```js
document.getElementById('greenButton').onclick = switchGreen;
```
Event Handler
- All sorts of events - page loading, click, moving a mouse, typing a key, drag, etc.
- To make our sites interactive, we write code that responds to these events
- Useful tool [events](http://files.sawmac.com/js1e/chapter06/events.html)


Now let's do this for the other colors:
```js
document.bgColor = "pink";
document.getElementById('greenButton').onclick = switchGreen;
document.getElementById('blueButton').onclick = switchBlue;
document.getElementById('orangeButton').onclick = switchOrange;

function switchGreen() {
  document.bgColor = "green";
}

function switchBlue() {
  document.bgColor = "blue";
}

function switchOrange() {

  document.bgColor = "orange";
}
```

Separation of Concerns:
- See [Other Version](http://codepen.io/nevan/pen/pnLje) here
 - instead of using the style attribute, it's best to change class names
 - we want to keep our code modular, everything in as small of a piece as possible
 - CSS is where our styling goes, so all we do in JS is change the class
 - it's also faster to use classname instead of style


```js
function switchOrange(){
document.getElementById('box').className = "orange";
}
```


#Variables!
###Strings
- Strings "HELLO!"
  - "hel" + "lo"

  Double vs single quoted strings:
  ````
   'They "purchased" it'
   "It's a beautiful day"
   //Escaping quotes
   "They \"purchased\" it"
  ```
- Numbers
  - Whole numbers and decimals
  - (100 + 4) * 11
  - 10/3
- Booleans - only 2 values - true or false
  - 10 > 5
  - 100 < -29
Where Variables Come In

```js
//instead of
alert("Hi Bob");
//what if we wanted to use a different name each time?
//Or think of our thermostat example last class, we had to keep track of the desired temp and current temp
//Or rock paper scissors - we need to remember user and computer moves
var name = "Justin";
alert("Hi, " + name);
//Variables allow us to capture values
```
- First we must declare that we're making a variable with the 'var' keyword
- Then, we name the variable: var pinballScore = 50003;
 - variable names may not include spaces
 - they must start with a letter

```js
var firstName = "Peter";
var lastName = "Parker";
var age = 22;
var isSuperHero = true;
```
When a variable is assigned a value, that doesn't mean it can't change

```js
var pinballScore = 5000;
//I hit a bonus multiply-er thing in pinball!
pinballScore = pinballScore * 5
// and then I lost:
pinballScore = 0;
```
We can also use variables to hold DOM elements

``` js
var image = document.getElementById("hplogo");
alert(image.src);
```
##Score-Keeper Code-Along
- [html and css code](http://codepen.io/Colt/pen/qDIex)

```js
var total = 0;

document.getElementById('zero').onclick = zero;
document.getElementById('add5').onclick = add5;
document.getElementById('add10').onclick = add10;
document.getElementById('sub1').onclick = sub1;

function zero() {
  total = 0;
  document.getElementById('result').innerHTML = total;
}

function add5() {
  total = total + 5;
  document.getElementById('result').innerHTML = total;
}

function add10() {
  total = total + 10;
  document.getElementById('result').innerHTML = total;
}

function sub1() {
  total = total - 1;
  document.getElementById('result').innerHTML = total;
}
```

#Conditionals
Let's add some logic to our programs.  We want to make decisions like:
- Deciding who wins rock paper scissors
- Checking if form input is acceptable - valid email address, etc.

```js
var age = 21;

if(age < 18){
  alert("You only pay for child ticket");
}

else if(age > 18 && age < 21){
  alert("You are an adult but cannot drink");
}
else if(age === 21){
  alert("CONGRATS!");
}
else if(age > 21 && age <65){
  alert("You can drink ,but are not a senior")
}
else if(age >= 65){
  alert("WOO SENIOR OVER HERE");
}
```
##Compare That Code-along

[Link To Clean Version](http://codepen.io/Colt/pen/Kyvkw)

```js
document.getElementById('submit').onclick = compare;

function compare() {
  var a = document.getElementById('a').value;
  var b = document.getElementById('b').value;
  var comparison;
  if (a < b) {
    comparison = '<';
  } else if (a > b) {
    comparison = '>';
  } else if (a == b) {
    comparison = '=';
  }
  document.getElementById('comparison').innerHTML = comparison;
}

```