gdi seattle - intro to javascript class 1

BEGINNING JAVASCRIPTCLASS 1Javascript ~ Girl Develop It ~

WELCOME!Girl Develop It is here to provide affordable andaccessible programs to learn software throughmentorship and hands-on instruction.Some "rules"

We are here for you!Every question is importantHelp each otherHave fun

WELCOME!Tell us about yourself.

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

TERMSWeb designThe process of planning, structuring and creating awebsite.Web developmentThe process of programming dynamic webapplications. (JavaScript goes here!)Front endThe outwardly visible elements of a website orapplication. (JavaScript goes here, too!)Back endThe inner workings and functionality of a website orapplication. (Recently, JavaScript has started toarrive here!)

CLIENTS AND SERVERSHow your computer accesses websites

JavaScript is "client side"Your browser understands it!

TOOLSBrowser

Browser Developer ToolsChrome, IE, and Safari Developer ToolsFirebug for FirefoxOpera Dragonfly

Text EditorsEclipse JSDT - Windows and MacAptana - Windows and MacSublime Text - Windows and MacNotepad++ - Windows

HISTORY OF JAVASCRIPTDeveloped by Brendan Eich of Netscape in 1995 (in10 days!)Originally called Mocha and then LiveScriptJava -- Actually, JavaScript has nothing to do with thelanguage Java. Java was just the cool kid in town atthe time.Script -- Instructions that a computer can run one lineat a time

HISTORY OF JAVASCRIPT1996 - Netscape 2 is released with JavaScriptsupport1997 - First standardized version of JavaScript2005 - AJAX is first coined. AJAX is used tocommunicate with servers using JavaScript.2006 - jQuery, a super-popular JavaScript library,debuts.2010 - Node.js debuts. This provided a way forJavaScript to perform back end functions (althoughnot the first).2012 - The spec for JavaScript is "nearly" finished.

WHAT DOES JAVASCRIPT DO?Primary use is controlling the browser, manipulatingWeb pages, and enhancing user interaction.

All sorts of awesomeness, including this slideshow!

Image Galleries and LightboxesGames and all sorts of Google DoodlesInteractions, like show/hide and accordiansRetrieving data from other websites (throughAPIs)

VALUES, TYPES, AND VARIABLESThe fundamental building blocks of programminglanguages are values, types, and variables.A variable stores a value. The value is defined by atype.

VALUESAny piece of information that a computer program canstore or manipulate.For example:

The sentence "Hello, world!"The number 3.14A set of numbers [3.14, 6.09, 9.0805]A set of strings ["Welcome", "to", "JavaScript"]

VARIABLESA storage location for a value used to performcomputations.

Declare a variable (give it a name)

Initialize variable (give it a value and a type)

Declare AND initialize at the same time!

Change value of variable

var bananas;

bananas = 5;

var bananas = 5;

bananas = 4; //I ate a banana.

COMMENTSYou can write comments that only you, not the browser,

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

TYPESThe definition of the kinds of data a computer programcan store or manipulate.JavaScript infers the type based on the data. This isknown as "loosely typed" in nerd speak.

TYPESPrimitives

Number - well, a number!String - a collection of characters.Boolean - a true or false value.Array - a collection of values.null - no valid value or purposely empty.undefined - no value has been initialized or set yet.

ObjectsAnything that isn't a primitive.

DATA TYPESstring -- a group of characters in quotes

number -- (well, a number)

boolean -- yes or no

var fruit = "banana";

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

var skyIsBlue = true;var grassIsPink = false;

DATA TYPESundefined -- no value yet

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

var myTigersName = null;

NAMING RULESBegin with a letter, _, or $

Contain letters, numbers, _ and $

Names are case sensitive

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

var hello;var Hello;var heLLO;

MATHEMATICAL EXPRESSIONSSymbol Meaning+ Addition- Subtraction* Multiplication/ Division% Modulus++ Increment-- Decrement

var bananas = 5;var oranges = 2;var fruit = bananas + oranges;

STRING EXPRESSIONSvar name = "Mitch";var dinosaur = "Stegosaurus";var sentence = "My dinosaur is a " + dinosaur + ". It's name is " + name + ".";

INCLUDING JAVASCRIPTInline - a script tag with code inside of it.

External - a script tag that points to another file.

<body> <script>

</script></body>

var dinosaur = "Liopleurodon"; ...

<body> <script src="external.js"></script></body>

LET'S DEVELOP ITCreate a new HTML file

Create a new JavaScript file (.js extension) and includeit on the page.

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

<head> <title>My Site!</title> <script src="calculator.js"></script></head>

LET'S DEVELOP ITLife time supply calculator

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

Store your age in a variableStore your maximum age in a variableStore an estimated amount per day in a variableCalculate how many you would eat/drink for the restof your life.Output the result into the page (see below) like so:"You will need NN to last you until your old age ofNN" document.write(answer);

LET'S ANSWER IT!var age = 26;var oldAge = 96;var perDay = 2;

var days = (oldAge - age) * 365;var total = perDay * days;document.write("You will need $" + total + " to last you until the ripe old age of " + oldAge);

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)

var name = "Mitch";document.write(name === "Mitch"); //true

LOGIC&& AND|| OR! NOT

var bananas = 5;var oranges = 2;document.write(bananas > 3 && oranges > 3); //falsedocument.write(bananas < 2 || oranges < 2); //falsedocument.write(bananas !== oranges); //true

THE IF STATEMENTJavaScript 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!");}

IF/ELSE STATEMENTYou can use else to perform an alternative action if the

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

IF/ELSE STATEMENTYou can 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 calculatorso that if the lifetime supply is greater than 40,000, yousay "Wow! That's a lot!" otherwise, say "You seempretty reasonable!"

LET'S ANSWER IT!var age = 26;var oldAge = 96;var perDay = 2;

var days = (oldAge - age) * 356;var total = perDay * days;if(total > 40000){ document.write("You will need " + total + " to last you until the ripe old age of " + oldAge + ". Wow! That's a lot!");}else{ document.write("You will need " + total + " to last you until the ripe old age of " + oldAge + ". You seem pretty reasonable");}

FUNCTIONSFunctions are re-usable collections of statements

Declare a function

Call the function

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

sayHi();

ARGUMENTSFunctions can take named values known as arguments.

function sayHi(name){ console.log('Hi' + name + '!');}

sayHi('Mitch, the dinosaur');sayHi('Harold, the hippo'); var mouseName = 'Pip, the mouse';sayHi(mouseName);

ARGUMENTSFunctions can take MULTIPLE named argumentsfunction addNumbers(num1, num2){ var result = num1 + num2; document.write(result);} addNumbers(5, 6); var number1 = 12;var number2 = 30;addNumbers(number1, number2);

RETURN VALUESFunctions can return a value to you (such as the result

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

var meaningOfLife = addNumbers(12, 30);document.write(meaningOfLife);

VARIABLE SCOPEJavaScript have "function scope". That means the

variables are only accessible in the function where theyare defined.

A variable with "local" scope:function addNumbers(num1, num2){ var result = num1 + num2; return result;} var meaningOfLife = addNumbers(12, 30);document.write(result);//This will show as undefined because the result variable only exists inside the addNumbers function.

LET'S DEVELOP IT!Wrap the lifetime supply calculator in a function called

calculate()Add a button to the html that calls the function when it is

clicked<button type="button" onclick="calculate()"> Calculate life time supply</button>

LET'S ANSWER IT!function calculate(){ var age = 26; var oldAge = 96; var perDay = 2; var days = (oldAge - age) * 356; var total = perDay * days; if(total > 40000) { document.write("You will need " + total + " to last you until the ripe old age of " + oldAge + ". Wow! That's a lot!"); } else { document.write("You will need " + total + " to last you until the ripe old age of " + oldAge + ". You seem pretty reasonable"); } }

QUESTIONS?

?