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?
  • If you had a super power, what would it be?

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

  • Browser
    Chrome
    Firefox
  • Development Toolkit
    Chrome - Inspector
    Firefox - Firebug
  • Text Editor
    TextWrangler - Mac
    Notepad ++ - Windows
    Sublime Text - Mac or Windows

History of JavaScript

  • Developed by Brendan Eich of Netscape in 1995
  • Standardized in 1997
  • 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

What does JavaScript do?

Ready!?

Let's start learning JavaScript!

Statements/Script

Each line in JavaScript is an instruction or a script
When the browser reads it, it "executes the script"
Let's try it out!

            document.write('Hello friends!');
          
** Each statement is separated by a semicolon ;

Comments

  • Comments are notes you can write inside of your code
  • Browsers ignore all of your comments.


            // We wrote this code on the last slide!
            document.write('Hello friends!');

            /*
            here is a long note i want to remember
            because it is
            very important
            */
          

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";
              var vegetable = 'lettuce';
            

number -- (well, a number)


              var pi = 3.14;
              var year = 2012;
            

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;
            
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!


          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 + ". It's name is " + name + ".";
            

Let's Develop It

Create a new html file


<html>
  <head>
    <title>My Site!</title>
  </head>
  <body>
    My site!
  </body>
</html>
Windows: Notepad++
Mac: Text Wrangler

Let's Develop It


<html>
  <head>
    <title>My Site!</title>
    <script>
    // so far we have been writing code in here
    // but there is a better way!

    alert( "hello girl develop it!");
    
    </script>
  
  </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="myjavascriptfile.js"></script>
  </head>
  <body>
    My site!
  </body>
</html>

Let's Develop It

Life time 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 to say:
    "You will need 4000 Twinkies to last you until age 99"
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){
            document.write("You should buy more bananas!")
          }

Comparisons

You can use these with the if-statement

They're called comparison operators

== 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

You can use "logical operators" within your if-statements

&& is the AND operator


        var bananas = 5;
        var oranges = 2;

        if (bananas > 3 && oranges > 3){
          document.write('Eat all the fruit!');
        }
            

Logic

|| is the OR operator


        var bananas = 5;
        var oranges = 2;

        if (bananas < 3 || oranges < 3){
          document.write('Buy more fruit!');
        }
            

Logic

! is the NOT operator


        var bananas = 5;
        var oranges = 2;

        if (!(bananas >= 0))
        {
          document.write('How do you have negative bananas?');
        }
            

If/Else Statement

Use else to perform another action if the "if" fails


          var bananas = 5;

          if (bananas > 3)
          {
            document.write('Eat some bananas!');
          } 
          else 
          {
            document.write('Buy some bananas!!');
          }
          

If/Else Statement

Use else to perform an alternative action if the "if" fails


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

If/Else Statement

Use else if to have multiple choices

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

Let's Develop It!

Add an if/else statement to our lifetime supply calculator

If the lifetime supply is greater than 40,000,

an alert says "Wow! That's a lot!"

otherwise, the alert says "You seem pretty reasonable!"

Functions

Functions are re-usable collections of statements

Semi colon not used after closing curly brace

Declare a function

            function sayHi(){
              document.write('Hi!');
            }
          
Call the function

            sayHi();
          

Arguments

You can feed information into a function

These values are called arguments or parameters


            function sayHi(name){
              document.write('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;
              document.write(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);
    //document.write( sum );
          

Variable Scope

If you define a variable INSIDE of a function,
it is called a "local" variable

Local variables are only visible in the function where they are defined


  function addNumbers(num1, num2){
    var result = num1 + num2;
    return result;
  }
            

  var sum  = addNumbers(5, 6);
  document.write(result); 
  // ^-- we're gonna have a problem here!
  // var result only exists inside the addNumbers function
          

Variable Scope

If you define a variable OUTSIDE a function,
it is called a "global" variable

Global variables are visible everywhere in your JS file.


   var result;
    function addNumbers(num1, num2){
      result = num1 + num2;
      return result;
    }
          

    var sum  = addNumbers(5, 6);
    document.write(result); 
    // returns 11 since 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?

?