Beginning Javascript

Class 1

Welcome!

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

Some "rules"

  • We are here for you!
  • Every question is important
  • Help each other
  • Have fun

Welcome!

Tell us about yourself.

  • Who are you?
  • What do you hope to get out of the class?
  • What is your favorite childhood toy?

Terms

  • Web design
    The process of planning, structuring and creating a website
  • Web development
    The process of programming dynamic web applications
  • Front end
    The outwardly visible elements of a website or application. (Javascript goes here!)
  • Back end
    The inner workings and functionality of a website or application.

Clients and servers

How your computer accesses websites

JavaScript is "client side"

Your browser understands it!

Tools

History of JavaScript

  • Developed by Brendan Eich of Netscape in 1995 (in 10 days!)
  • Originally called Mocha and then LiveScript
  • Java -- Actually JavaScript has nothing to do with the language Java. Java was just the cool kid in town at the time.
  • Script -- Instructions that a computer can run one line at a time
  • Standardized in 1997

History of JavaScript

  • "AJAX" -- a way to communicate to servers, coined in 2005
  • jQuery -- a super-popular JavaScript Library debuted 2006
  • Node.js -- a way for JavaScript to perform back end functions in 2010
  • 2012 -- spec for JavaScript "nearly" finished

What does JavaScript do?

Statements/Script

Each line in JavaScript is an instruction or a script
When the browser reads it, it "executes the script"
Try it out on repl.it

            console.log('Hello');

Variables

Variables hold content

Words, numbers, true/false, basically any kind of content

Declare a variable (Give it a name)


              var bananas;

Initialize variable (Give it a value)


              bananas = 5;

Variables

Declare and initialize at the same time!


              var bananas = 5;

Change value of variable


              bananas = 4;

(I ate a banana)

Data types

string -- a group of characters in quotes


              var fruit = "banana";

number -- (well, a number)


              var pi = 3.14;
              var year = 2013;
              var bananaTally = 200;

boolean -- yes or no


              var skyIsBlue = true;
              var grassIsPink = false;

Data types

undefined -- no value yet


              var favoriteDinosaur;

null -- a purposely empty value (not the same as 0)


              var myTigersName = null;
In nerd speak, JavaScript variables are "loosely typed." You don't know the kind of value a variable will have until you assign it.

Naming rules

Begin with a letter, _, or $

Contain letters, numbers, _ and $


              var hello;
              var _hello;
              var $hello;
              var hello2;

Names are case sensitive


              var hello;
              var Hello;
              var heLLO;

Expressions

Math-y expressions!


          var bananas = 5;
          var oranges = 2;
          var fruit = bananas + oranges;
SymbolMeaning
+Addition
-Subtraction
*Multiplication
/Division
%Modulus
++Increment
--Decrement

Expressions

Word-y expressions!


var name = "Mitch";
var dinosaur = "Stegosaurus";
var sentence = "My dinosaur is a " + dinosaur + ". Its name is " + name + ".";

Let's Develop It

Create a new html file


<html>
  <head>
    <title>My Site!</title>
  </head>
  <body>
    My site!
  </body>
</html>

Let's Develop It

Create a new javascript file (a file that ends in .js)

Link it to your html file


<html>
  <head>
    <title>My Site!</title>
    <script src="javascript.js"></script>
  </head>
  <body>
    My site!
  </body>
</html>

Let's Develop It

Lifetime supply calculator

Ever wonder how much a lifetime supply of your favorite snack or drink is?

  • Store your age in a variable
  • Store your maximum age in a variable
  • Store an estimated amount per day in a variable
  • Calculate how many you would eat/drink for the rest of your life.
  • Output the result in an alert(see below) like so: "You will need NN to last you until your old age of NN"

  alert(answer);

The if statement

Javascript can run through code based on conditions


          if (condition here){
            // statement to execute
          }


          var bananas = 1;
          if (bananas < 2){
            console.log("You should buy more bananas!")
          }
Note: you can write comments that only you, not the browser reads 

            // comment on one line
            /* comment on 
              multiple lines
              */

Comparisons

=== Equality
!== Inequality
> Greater than
>= Greater than or equal to
< Less than
<= Less than or equal to

Don't confuse = (assign a value)
with === (compare a value)

Logic

&& AND
|| OR
! NOT 

        var bananas = 5;
        var oranges = 2;
        if (bananas > 3 && oranges > 3){
          console.log('Eat fruit!');
        }
        if (bananas < 2 || oranges < 2){
          console.log('Buy fruit!');
        }
        if (!(bananas >= 0)){
          console.log('How do you have negative bananas?');
        }

If/Else Statement

You can use else to perform an alternative action if the "if" fails


          var bananas = 5;
          if (bananas > 3){
            console.log('Eat a banana!');
          } else {
            console.log('Buy a banana!');
          }

If/Else Statement

You can use else if to have multiple choices


var age = 20;
if (age >= 35) {
  console.log('You can vote AND hold any place in government!');
} else if (age >= 25) {
  console.log('You can vote AND run for the Senate!');
} else if (age >= 18) {
  console.log('You can vote!');
} else {
  console.log('You have no voice in government (yet)!');
}

Let's Develop It!

Add an if/else statement to our lifetime supply calculator so that if the lifetime supply is greater than 40,000, you say "Wow! That's a lot!" otherwise, say "You seem pretty reasonable!"

Functions

Functions are re-usable collections of statements

Declare a function 

            function sayHi(){
              console.log('Hi!');
            }
Call the function 

            sayHi();

Arguments

Functions can take named arguments


            function sayHi(name){
              console.log('Hi' + name + '!');
            }
            sayHi('Mitch, the dinosaur');
            sayHi('Harold, the hippo');
            
            var name = 'Pip, the mouse';
            sayHi(name);

Arguments

Functions can take MULTIPLE named arguments


            function addNumbers(num1, num2){
              var result = num1 + num2;
              console.log(result);
            }
          
            addNumbers(5, 6);
            
            var number1 = 12;
            var number2 = 15;
            addNumbers(number1, number2);

Return values

Functions can return a value


    function addNumbers(num1, num2){
      var result = num1 + num2;
      return result; //Anything after this line won't be read
    }
    var sum  = addNumbers(5, 6);

Variable Scope

JavaScript variables have "function scope." They are visible in the function where they are defined

A variable with "local" scope: 

  function addNumbers(num1, num2){
    var result = num1 + num2;
    return result; //Anything after this line won't be read
  }
  var sum  = addNumbers(5, 6);
  console.log(result); //will return undefined because result only exists inside the addNumbers function

Variable Scope

JavaScript variables have "function scope." They are visible in the function where they are defined

A variable with "global" scope: 

   var result;
    function addNumbers(num1, num2){
      result = num1 + num2;
      return result; //Anything after this line won't be read
    }
    var sum  = addNumbers(5, 6);
    console.log(result); //will return 11 because the variable was defined outside the function

Let's Develop It

Wrap the lifetime supply calculator in a function called calculate()

Add a link to the html that calls the function when it is clicked


 <a href = "#" onclick="calculate()">
 Calculate life time supply
 </a>

Questions?

?