GDI Seattle - Intro to JavaScript Class 1
-
Upload
heather-rock -
Category
Technology
-
view
828 -
download
0
description
Transcript of 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?
?