#Lesson Index Card
###1. Introduction To Javascript
###2. Learning Objective(s)
- what variables are
- what strings are
- when and where javascript resides
- What is javascript?
- what can javascript not do?
###3. Talking Points/Road Map
- Javascript console
- Ending lines with semicolons
- Creating functions
- Creating multiple variables
- switch statements
- Logging and Alerting and stuff
###FIRST THINGS FIRST
Go download google chrome, now. like right now, we'll wait.
Got it?
Cool, onto the fun stuff now
"JavaScript is the most popular programming language in the world."
- Someone on the internet who knows
And
Semicolons give me a warm fuzzy feeling
- Robert Wilkinson, 2014
It is a client side scripting language that has evolved to become something huge.
Can anyone tell me what client side means?
Great so this means that you all have a javascript console built into every browser and you dont even need the internet to play around with js. So lets do that now and I want you to follow along with me here. One thing to remember when you're writing Javascript is to end your lines with a semicolon ;
===
###Intro to Datatypes
lets first start by creating a string of our name
"Robert Wilkinson"
so this datatype is called a string
how can we check what type something is?
javascript makes this pretty simple, we use the typeof() function
for example typeof("Your Name here") returns string
so lets try it with a number, and we get number back.
These two datatypes are pretty obvious, but it gets harder from here on out, try this one on for size typeof(true) (no quotes).
What do you guys get back? Anyone have any idea what this means?
Another thing to note is the different operates we can use on numbers in js, heres a quick list
+-*/%
So these should be pretty familiar, can you guys tell me what each of these operators do?
The + operator also does string concatenation, for example
"hello" + "world";
or if you want to get fancy
"hello" + " " + "world!";
We'll get into more types later but lets get into creating variables
###Variables in JavaScript
The keyword we use to declare variables in javascript is var and we use it like so
var rob = "Robert Wilkinson";now we can call and use that variable over and over again and start to have a lot of fun, what if I want to declare more than one variable at once though? Say I wanted to declare an age variable here? Well, Javascripts got you covered yet again the syntax is pretty cool
var rob = "Robert Wilkinson",
age = 26;(notice the comma at the end)
"But Rob you say, every time I press enter it executes my command, I can never create a new line??" Google chrome has you covered, press SHIFT+ Enter and you should be able to create a new line.
##Playing with variables
so lets create some variables and play with this a little, all the regular operators work as expected:
var one = 1;
console.log(one);
var two = one + one;
console.log(two);
var eight = two * 4;
console.log(eight);
var four = eight / 2;
console.log(four);These are all basic, but what about that last operator %, any guesses on what its used for?
var one = 9 % 4;A couple extra things to note an operator followed by an equal sign changes the value of the variable itself.
var num = 2;
num += 1;
console.log(num);
num *= 3;
console.log(num);
num /= 2;
console.log(num);Javascript also gives us shortcut operators to increment and decrement a number
var num = 1;
num++;
console.log(num);
num--;
console.log(num);###Functions/methods in JS
So lets mess around with our newly minted variables, try entering this
rob.length;this is a method that every string in javascript has if you want, type rob. and you should see a huge list of methods that this variable has
Now try doing the same thing with age and you can see what methods the number type comes with
Another cool one that strings have is charAt()(and yes javascript is case sensitive)
So how could I find the first letter of my name? I'm sure most of you said somethinglike
rob.charAt(1);and well that is a good guess if we run that what do we get?
Hmm thats weird, we'll get into why this works the way it does a little later, but suffice it to say that Computers are smarter than humans and they start counting at 0
Knowing this, how can I get the first letter? How about the last letter?
(hint: you have to combine the two string methods we've learned)
###Helper methods
We're currently typing in a console but we won't always be, what if we want to log something to the console, we can use the function console.log()
so say I wanted to log my name and my age to the console, I could type
console.log(rob);
console.log(age);(remembering to use SHIFT + Enter) And my name and age would print in the console. Theres a couple more that are handy too confirm() and alert() try these out and see what happens.
Did you all notice that confirm returns a boolean ? We can use that in the next section here
###Control Structures
One of the most important part of any programming language is mastering it's control structures. What are control structures? Keywords that control the flow of a program, if it does certain things, and when it does them
== is for equals
>= is for greater than or equals
A little example
if(rob == "Robert Wilkinson") {
console.log("Robert Wilkinson iss here");
}
else if (rob == "Bob"){
console.log("Bob is Here");
}
else {
alert("Nobody home!");
}How could we refactor this?
Let's try to build something that asks a user if they are over 21, and does different things depending
Ok so this works put its pretty basic, lets try to make it a little more complicated.
###Building on this/Gotchas
I'm going to introduce a couple new concepts here, the first one here is a function called prompt(). If you run that in a console you should get a nice little pop up window, it takes a string parameter that will appear in the prompt window, for example
prompt("Enter your name");Usually you'll want to assign the return value to a variable and then do something with it so how could we do that? Lets setup something that lets people enter how much they weigh.
var weight = prompt("What is your weight");And lets see how much they would weight if they gain 5 lb. for the holidays
var post_holiday_weight = weight + 5;
If I log this variable what do I get?
Can anybody tell me what happened?
If I do a typeof() on the weight variable do I get?
So what do I do to convert it?
parseInt(string, radix);
###Case Statements Case statements are another control structure that are really handy, lets set up that same example above, but with a case statement instead of an if
switch(rob){
case "Robert Wilkinson":
console.log(rob + " is here");
break;
case "Bob":
console.log(rob + " is here");
break;
default:
alert("Nobody home!");
}A key point here is the break this is to insure that the statement doesn't "fall through" to the next case
###Problem lets create some javascript that asks people what year, what month, and what day they were born and then it checks to see if they are 21 right now.
Think of all possible scenarios
(Hint: new Date() returns the current datetime)
(Hint2: Remember how do Computers Start Counting?) Hint
Check the methods on the left side of the page and remember what we do to call methods
(.)