Welcome to Intro to JavaScript
My name is Trevor,
and my TA's are Michael and Stephanie
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?
Part II
"Sail out to sea and do new things"
- Admiral Grace Hopper
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.
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?
Tpyoes 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";
var whatsUp = function(){
console.log(greeting + " " + firstName + " " + lastName);
} and lets update greeting again and run our 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 logic 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 III
LEARN ALL THE THINGS
Resources
Codecademy.org
Stackoverflow
Google | Learn to search for whatever you want to do.
Me: @trevorgeise or trevorgeise@gmail.com
The future
Javascript is becoming more and more powerful. New technology is making it possible to create entire apps in nothing but Javascript.
Feedback Please!
If we have time, lets make something else... ideas?
techgirlz - intro to js
By trevorgeise
