gistfile1.md

#Javascript Basics

###Schedule

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

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

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

<form>
<input type="radio" id="greenButton">
<input type="radio" id="blueButton">
<input type="radio" id="orangeButton">
</form>

To change background color:

document.bgColor = "pink";

Let's wrap it in a function, so we can decide when to switch it

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

And now let's add an event handler

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

Now let's do this for the other colors:

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 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

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

//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

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

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

var image = document.getElementById("hplogo");
alert(image.src);

##Score-Keeper Code-Along

• html and css code

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.

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

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;
}