JavaScript

Basics

javascript

  • Why use JavaScript?
  • What does it do for us?

Why use js?

Make your websites go from this:

to this:

http://www.legworkstudio.com/

variables

  • Variables are storage containers for various values; building blocks of code
  • In JavaScript, we create a variable with the keyword var, followed by the name of the variable, to indicate that we're making a variable. 
  • Examples:
    • var myName = "Bob";
    • var number = 1;
    • var booleanExample = false; 
  • Pretty straightforward, right? 

Data types

  • Let's look at the examples from the previous slide:
var myName = "Bob";
var number = 1;
var booleanExample = false;

Data, like the values stored in the variables myName, numbers, and booleanExample have types, known as data types.

 

Can someone name some data types? 

Data types

  • Number 
    • 4, 5, 6, 7.5
  • String
    • "Hello", "Bye", "This is a cat."
  • Boolean
    • true, false  
  • Array - requires more explanation, will go over later
  • Object - requires more explanation, will go over later

undefined

  • You may cast variables without assigning like this: 
    • var x;
  • However, when you don't assign a value to x, the value of x  will  be known as a special value called 'undefined'
  • So, if you were to type: console.log(x); the console would log 'undefined' as the value of x.

all variables must have values of a certain data type!

if you have an alphanumeric sequence, like 12312jck32, since it is not a number or a boolean, it is a string. and if something is a string, it must be in quotes. 

 

'', "" are both fine, however be consistent with your use of quotes; do not switch between single and double

What is wrong with the code snippet below?

var cat1 = Mr.Whiskers;

legal variable names

  • The names you pick for your variables have to follow certain rules, because that's just how programming works. 

DO NOT DO THE FOLLOWING:

  1.  Begin variable names with a number. (var 53cats = "there are fifty three cats";)
  2. Use special symbols or mathematical operators (+,-,$, @, #, &, |, . {}, (), [], ;, , :)
  3. Have spaces in variable names (var the cat = "bob";)

 

math is fun.

strings are fun.

  • JavaScript uses PEMDAS for math:
    • console.log(4+5);
    • console.log(4*5+2);
    • console.log(6/3*3+4);
  • Tricks with strings
    • console.log('abcd'+'efgh');
      • this will get you the output: abcdefgh

jsfiddle

  • A site to test code
  • Go to: 
    • https://jsfiddle.net/
  • Move your mouse over to the area that says "JavaScript"
  • Right click > Inspect > Console 
  • CTRL + S to save, CTRL + return to run 

Live code session

demo of data types and things you can do! 

conditional statements

  • Very intuitive 
  • Conditional statements are blocks of code that say, "if (some condition evaluates to true), then do some code" 
  • What does the code below do? 
var cat = "Mr. Whiskers";

if (cat == "Reynald") {
    console.log("died in a tragic car accident");
} else if (cat == "Sammy") {
    console.log("killed in a violent fight");
} else if (cat == "Mikey") {
    console.log("went up in flames in a gas station explosion");
} else {
    console.log("was gluttonous, and choked on a fish bone");
}

= VS  ==

  • = is assignment
    • we use = to assign values to variables 
    • ex. var x = 5;
  • == checks for the equality of two expressions
var x = 5;
var y = 4; 


console.log(x==y);

x = y;

console.log(x);

The expression x==y checks for whether or not x is the same as y

x = y sets the value of x to the value of y

What is wrong with the code snippet below?

var cat1 = "Mr. Whiskers";
var cat2 = "Sammy";

if (cat1 = cat2) {
    console.log(cat1 + " killed " + cat2);
}

boolean operators

  • == is an example of a Boolean operator. 
  • Other Boolean operators:
    • !== not equals
    • > greater than 
    • < less than 
    • >= greater than or equal to 
    • <= less than or equal to 
  • They're called Boolean operators because they're used to evaluate if expressions are true or false

logical operators

  • && - and 
  • || - or
  • ! - not; put in front of expressions to negate them
  • Combine with Boolean operators to create more complex expressions 
  • You can also nest conditional statements within each other

logical operators

var cat1 = "Sammy";
var cat2 = "Reynald"
var cat3 = "Dead";
var cat4 = "Dead";

var catAmount = 4;

if (catAmount >= 4 && cat4 == "Dead") {

    if (cat1 = "Sammy") {
        
        console.log("Well, that one's still alive!")
    }
    
    if (cat2 !== "Dead" && cat3 !== "Dead") {
        
        console.log("Wow, congrats on the live cats!");
    } else {

        console.log("Well, I guess some of your cats are dead.");
    }

} else {
    console.log("What???")
}

Live code session

demo of conditional statements!

Team function review

  • Break up into two teams 
  • The instructors will give you a coding challenge
  • Complete the challenge by writing your code and running it in JSFiddle 
  • EVERYONE ON YOUR TEAM MUST UNDERSTAND THE CODE 
  • Afterwards, we will write your code up on the screen and pick a random member of the team to explain your code
  • If that person is wrong, back to the drawing board, and you've basically given the other team your code
  • Winning team will get a prize!

 

 

Aliens are invading! There are blue, green, and red aliens. The total amount of aliens there are is 10,000. 

Create variables with this information, and set up a series of conditional statements such that:

First, check if there are 10,000 aliens. Then,

if there are more than 5,000 green aliens, console.log "Ugh, why are they so ugly?"

If there are more than a total of 8,000 green and red aliens combined, console.log

"No, why?????"

If there are not more than 3000 red and blue aliens combined, console.log

"Okay, this seems somewhat manageable. Wait no, we're still dead..."

You may assign the alien amounts yourself, but the total must add up to ten thousand!

Survey time

  • Go to this link:
  • https://www.surveymonkey.com/r/5MZ2CNJ
  • Answer the questions and submit! 

 

 

Made with Slides.com