GDI Seattle - Intro to JavaScript Class 1

993 views

Published on

Instructor: Dallas Tester

Published in: Technology
  • Be the first to comment

  • Be the first to like this

GDI Seattle - Intro to JavaScript Class 1

  1. 1. BEGINNING JAVASCRIPT CLASS 1Javascript ~ Girl Develop It ~
  2. 2. 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
  3. 3. WELCOME! Tell us about yourself. Who are you? What do you hope to get out of the class? What is your favorite dinosaur?
  4. 4. TERMS Web design The process of planning, structuring and creating a website. Web development The process of programming dynamic web applications. (JavaScript goes here!) Front end The outwardly visible elements of a website or application. (JavaScript goes here, too!) Back end The inner workings and functionality of a website or application. (Recently, JavaScript has started to arrive here!)
  5. 5. CLIENTS AND SERVERS How your computer accesses websites JavaScript is "client side" Your browser understands it!
  6. 6. TOOLS Browser Browser Developer Tools Chrome, IE, and Safari Developer Tools Firebug for Firefox Opera Dragonfly Text Editors Eclipse JSDT - Windows and Mac Aptana - Windows and Mac Sublime Text - Windows and Mac Notepad++ - Windows
  7. 7. 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
  8. 8. HISTORY OF JAVASCRIPT 1996 - Netscape 2 is released with JavaScript support 1997 - First standardized version of JavaScript 2005 - AJAX is first coined. AJAX is used to communicate with servers using JavaScript. 2006 - jQuery, a super-popular JavaScript library, debuts. 2010 - Node.js debuts. This provided a way for JavaScript to perform back end functions (although not the first). 2012 - The spec for JavaScript is "nearly" finished.
  9. 9. WHAT DOES JAVASCRIPT DO? Primary use is controlling the browser, manipulating Web pages, and enhancing user interaction. All sorts of awesomeness, including this slideshow! Image Galleries and Lightboxes Games and all sorts of Google Doodles Interactions, like show/hide and accordians Retrieving data from other websites (through APIs)
  10. 10. VALUES, TYPES, AND VARIABLES The fundamental building blocks of programming languages are values, types, and variables. A variable stores a value. The value is defined by a type.
  11. 11. VALUES Any piece of information that a computer program can store or manipulate. For example: The sentence "Hello, world!" The number 3.14 A set of numbers [3.14, 6.09, 9.0805] A set of strings ["Welcome", "to", "JavaScript"]
  12. 12. VARIABLES A storage location for a value used to perform computations. 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.
  13. 13. COMMENTS You can write comments that only you, not the browser, reads // comment on one line /* comment on multiple lines */
  14. 14. TYPES The definition of the kinds of data a computer program can store or manipulate. JavaScript infers the type based on the data. This is known as "loosely typed" in nerd speak.
  15. 15. TYPES Primitives 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. Objects Anything that isn't a primitive.
  16. 16. DATA TYPES string -- 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;
  17. 17. DATA TYPES undefined -- no value yet null -- a purposely empty value (not the same as 0) var favoriteDinosaur; var myTigersName = null;
  18. 18. NAMING RULES Begin 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;
  19. 19. MATHEMATICAL EXPRESSIONS Symbol Meaning + Addition - Subtraction * Multiplication / Division % Modulus ++ Increment -- Decrement var bananas = 5; var oranges = 2; var fruit = bananas + oranges;
  20. 20. STRING EXPRESSIONS var name = "Mitch"; var dinosaur = "Stegosaurus"; var sentence = "My dinosaur is a " + dinosaur + ". It's name is " + name + ".";
  21. 21. INCLUDING JAVASCRIPT Inline - 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>
  22. 22. LET'S DEVELOP IT Create a new HTML file Create a new JavaScript file (.js extension) and include it 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>
  23. 23. 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 into the page (see below) like so: "You will need NN to last you until your old age of NN" document.write(answer);
  24. 24. 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);
  25. 25. 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
  26. 26. LOGIC && AND || OR ! NOT var bananas = 5; var oranges = 2; document.write(bananas > 3 && oranges > 3); //false document.write(bananas < 2 || oranges < 2); //false document.write(bananas !== oranges); //true
  27. 27. 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!"); }
  28. 28. IF/ELSE STATEMENT You can 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!'); }
  29. 29. IF/ELSE STATEMENT You 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)!'); }
  30. 30. 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!"
  31. 31. 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 pr etty reasonable"); }
  32. 32. FUNCTIONS Functions are re-usable collections of statements Declare a function Call the function function sayHi(){ document.write('Hi!'); } sayHi();
  33. 33. ARGUMENTS Functions 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);
  34. 34. 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 = 30; addNumbers(number1, number2);
  35. 35. RETURN VALUES Functions 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);
  36. 36. VARIABLE SCOPE JavaScript have "function scope". That means the variables are only accessible in the function where they are 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.
  37. 37. 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>
  38. 38. 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 pr etty reasonable"); } }
  39. 39. QUESTIONS?
  40. 40. ?

×