Welcome to my class on JavaScript


My name is Trevor,

and my TA is Michael, Mike and Janelle

about me


I'm an entrepreneur.

I love to solve problems.
 

My secret

I'm not really a programmer
I'm just a guy who has a lot of ideas, and wanted to see them come to life.

What are we doing today

Understanding JavaScript

Creating with JavaScript

How to Learn All the Things

Rule #1

Buzz words are bad! 

Take scrap paper. Crumple it into a ball. If I use a word you don’t know,  chuck it at me.

Rule #2

If you have a question, answer it! 

You can ask me, or you can ask the person next to you or you can look it up.

Rule #3

Help Each Other 

Coding is a community! That’s one of the best things about it! Everyone helps everyone, even if you are brand new you may see something a different way…

exercise


why are you here?

what do you want to get out of this?

buzz words

JavaScript

an object-oriented computer programming language commonly used to create interactive effects within web browsers.”

Front-end / Back-end Development

Client / Server


What is JavaScript?


It gives your website a brain!

JavaScript

It's a lot of 
"This is this, and if this does that, then do this other thing"

let's see some examples....

How we use JavaScript


Variables, Statements and Functions

Variables


Variables are like a vocabulary that we make up, and that we use to speak to our program.

hey computer, what's my name?
what's a name?

Statements


This is that.

The sky is blue.
We use statements to define variables and talk with our program.
My name is Trevor.

Functions

mini programs
wrap up statements and logic and variables 
reusable

Function Example


I want ice cream, but only ice cream that has chocolate in the name. Lets teach this to our program, so it can tell us if we want a certain ice cream.

What's the logic we would want here?

Open Chrome!!!!!

Inspector tool is awesome!
Super fast feedback loop!


Let's chat with Chrome


alert('Hi');

Lets try a variable


var name = "Trevor";
alert(name);
Hey computer, this is a variable, and it's equal to 'Trevor'.
Now alert that back to me.

Variables are Variable


name = "Trevor Geise";
alert(name);

Hey computer, now name equals 'Trevor Geise'.
Alert that back to me.

Kinds of Variables


Strings (in quotes - names, words...)
var name = "trevor"
Numbers (not in quotes - math-able)
var students = 20;
Truthy (not in quotes - easy to test)
var greatClass = true;

Console


Alerts get annoying, so we're going to use console log going forward.

Let's try
var name = "Trevor"
console.log(name);

Combining


Lets make that prettier

var name = "Trevor";
console.log("My name is " + name);

Dealing with Bugs


let's try this now

console.log(myName);
Reference error: myName is not defined

The program is saying "what's this 'myName' you speak of?

Typoes happen all the the time. We use the console to troubleshoot and figure out what's going on.

Project: Combine!


Create 5 variables and console.log a sentence with them.

e.g.
var firstName = "Trevor";
var lastName= "Geise";
var greeting = "Hello";
console.log(greeting + " " + firstName + " " + lastName);

Variables within variables


We can also make a variable equal other variables.

Lets do that with what we just did.
var firstName = "Trevor"; 
var lastName= "Geise"; 
var greeting = "Hello"; 
var whatsUp = greeting + " " + firstName + " " + lastName;
console.log(whatsUp);

Update that variable

What happened? It's the same!?
var greeting = "What up"; 
console.log(greeting);

Functions!!


Let's make whatsUp a function so it auto updates!


var firstName = "Trevor";
var lastName= "Geise"; 
var greeting = "Hello"; 
whatsUp = function(){ 
   console.log(greeting + " " + firstName + " " + lastName);
}
and lets update greeting again and run out function
var greeting = "What's up"; 
whatsUp();

You do it!


Make a function out of your string, 
so if we update a variable, your function will update.

Interactive Functions

Let's make a banana counter.
var bSituation = function () {
  var bStart = prompt(“how many bananas did you start with?”);
  var bEat = prompt(“how many bananas did you eat?”)
  var bLeft = bStart - bEat;
  console.log(“You have “+bLeft+” bananas left!”); 
}


But what about apples?

Let's make our function more versatile by passing in an 'argument'


var fruitSituation = function (fruit) {
    var bStart = prompt(“how many”+fruit+”s did you start with?”);
    var bEat = prompt(“how many ”+fruit+”s did you eat?”;
    var bLeft = bStart - bEat;
    console.log(“You have “+bLeft+” ”+fruit+”s left!”);
};
Now we can call the function and pass in a variable like 'apple' or 'pear', by saying fruitSituation('pear');

Update your function


Pass in two arguments

var BLAH = function(arg1, arg2) {
  //your function here.
}

Project


Make a tip calculator

Requirements:

  • Prompt the user to enter the bill
  • Prompt the user to enter percent tip they want to leave
  • console.log the total

bonus: make it pretty

Part II





Making stuff

We're going to use


Google Chrome
Text Editor
jQuery
if statments
for loops

jQuery


It's a JavaScript library that makes life easier.

jQuery


JavaScript is like getting a puppy.

You can train it to do anything you want, but it takes time.

jQuery


jQuery is like getting super well trained dog.

It already knows a ton of stuff, 
but it's also kind of stuck in it's ways.

Let's Start


Make three files

index.html
style.css
myscript.js

or download mine

Add jQuery


Google 'jQuery google'
Find the jQuery hosted library
 paste that sucker in between <head> and </head>


<head>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</head>
 

Also add some content


<body>
<h1>My Awesome Site</h1>
<h3>Click Here</h3>
</body>

Fun With Console


Open the console, and let's mess around with our title.

First, we tell the client what we want to manipulate (DOM element), then what to do.

$('h1').css('color':'red');
$('h1').css('size':'60px');

Giving the user control


Change HTML to list three colors.  Give each color a unique class or  id.

e.g. <li id="red">Red</li>

Now open your JS file



the code


$(“#red”).click( 
  function() {
    $(“h1”).css(“color”,”red”);
  }
);

$(“#blue”).click( 
  function() {
    $(“h1”).css(“color”,”blue”);
  }
);

$(“#green”).click( 
  function() {
    $(“h1”).css(“color”,”green”);
  }
);

if / then


let's make a toggle button

HTML
< div class="button off">off</div>
CSS
.button {
    padding: 10px
    border-radius: 5px;
    border: rgba(0,0,0,.5);
    cursor: pointer;
}

.on {background: lightblue;}

.off {background: white;}

if / then


We want to write some code that says
"when the button is clicked, check if it's 'on'.
If it's 'on', turn it 'off'.  
Otherwise, turn it 'on'.

How do we do this?
What does off and on mean?

jQuery click


$(“.button”).click( 
  function() {    //check if switch it on    //if on, turn it off    //otherwise, turn it on

  }
);

final script


var turnOff = function(){
    $(“.button”).removeClass(“on”);
    $(“.button”).addClass(“off”);
    $(“.button”).text(“off”);    
}; 
var turnOn = function(){
    $(“.button”).removeClass(“off”);
    $(“.button”).addClass(“on”);
    $(“.button”).text(“on”);    
};


$(“.button”).click( 
  function() {
    if ( $(“.button”).hasClass(“on”) ) {
      turnOff();
      console.log(“turned off”)
    } else {
      turnOn();
      console.log(“turned on”)
    }
  });

PART III


LEARN ALL THE THINGS

Resources

Codecademy.org 

Stackoverflow 

jQuery Docs |  http://api.jquery.com/

Google | Learn to search for whatever you want to do.

jQuery plugins | Try googling “Awesome jquery plugins” 

Me: @trevorgeise or trevor@boomventure.com

The future


Javascript is becoming more and more powerful. New technology is making it possible to create entire webapps in nothing but Javascript. 

That will be the next class. Creating a Webapp Super Fast in Javascript! 

If we have time, lets make something else... ideas?

Made with Slides.com