Thinkful DC - Intro to JavaScript

Thinkful DC - Intro to JavaScript

• 1.
  Intro to Javascript February2018 Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/js-intro-dc 1
• 2.
  Instructor TJ Stalcup Lead Mentor@Thinkful (3yr) API Evangelist @WealthEngine (3y) JS Developer (22y) Pokemon Master TAs http://bit.ly/js-intro-dc WiFi: MakeOffices 5Ghz / Internet!23 2
• 3.
  About you What's yourname? What brought you here today? What is your programming experience? bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dcWiFi: IN3Guest 3 bit.ly/js-intro-dcWiFi: IN3Guest bit.ly/js-intro-dcWiFi: In3Guest http://bit.ly/js-intro-dc WiFi: MakeOffices 5Ghz / Internet!23
• 4.
  About Thinkful Thinkful helpspeople become developers and data scientists through 1-on-1 mentorship and project-based learning These workshops are built using this approach.These workshops are built using this approach. 4 http://bit.ly/js-intro-dc WiFi: MakeOffices 5Ghz / Internet!23
• 5.
  Take advantage ofour support Don't get discouraged, struggle leads to masterystruggle leads to mastery Don't be shy, take full advantage of our supporttake full advantage of our support http://bit.ly/js-intro-dc WiFi: MakeOffices 5Ghz / Internet!23 5
• 6.
  Agenda Learn key Javascriptconcepts (30 min) Go over assignments (10 min) Complete assignments with our support! (30 min) Go over answer key (10 min) Steps to continue learning (10 min) http://bit.ly/js-intro-dc WiFi: MakeOffices 5Ghz / Internet!23 6
• 7.
  How the webworks Type a URL from a client (e.g. google.com)​ Browser sends an HTTP request asking for specific files Browser receives those files and renders them as a website bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/js-intro-dc WiFi: MakeOffices 5Ghz / Internet!23 7
• 8.
  Client/Servers Client (sends requests) FrontendDeveloper Manages what user sees Server (sends response) Backend Developer Manages what app does bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dc 8 bit.ly/js-intro-dc WiFi: MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dcWiFi: IN3Guest bit.ly/js-intro-dcWiFi: IN3Guest bit.ly/js-intro-dcWiFi: In3Guest http://bit.ly/js-intro-dc WiFi: MakeOffices 5Ghz / Internet!23
• 9.
  Example: facebook.com Client Server Openbrowser and navigate to facebook.com HTML, CSS, & Javascript render newsfeed Request Response Algorithm determines content of feed. Sends back HTML, CSS, Javascript files Application LogicApplication Logic Initial requestInitial request Following responseFollowing response We'll be writing Javascript, the code that the browser uses to run the app 9 bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/js-intro-dc WiFi: MakeOffices 5Ghz / Internet!23
• 10.
  History of Javascript Writtenby Brendan Eich in 1995 for Netscape Initial version written in 10 days Completely unrelated to Java, but maybe named after it to draft off its popularity Over 10 years, became default programming language for browsers Continues to evolve under guidance of ECMA International, with input from top tech companies bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/js-intro-dc WiFi: MakeOffices 5Ghz / Internet!23 10
• 11.
  Javascript today Has largecommunity of developers, libraries and frameworks Lots of job opportunities Also the syntax is easier to understand for first-time developers bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dc bit.ly/js-intro-dc 11 WiFi: MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dcWiFi: IN3Guest bit.ly/js-intro-dcWiFi: IN3Guest bit.ly/js-intro-dcWiFi: In3Guest http://bit.ly/js-intro-dc WiFi: MakeOffices 5Ghz / Internet!23
• 12.
  Real developers useGoogle... a lot bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/js-intro-dc WiFi: MakeOffices 5Ghz / Internet!23 12
• 13.
  Defining a variablewith Javascript var numberOfSheep = 20 Initialize variable Name of variable Value of variable bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/js-intro-dc WiFi: MakeOffices 5Ghz / Internet!23 13
• 14.
  Variable examples bit.ly/js-intro-dc JSBin.com WiFi: MakeOffices5Ghz Password: Internet!23 bit.ly/js-intro-dc 14 bit.ly/js-intro-dc WiFi: MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dcWiFi: IN3Guest bit.ly/js-intro-dcWiFi: IN3Guest bit.ly/js-intro-dcWiFi: In3Guest http://bit.ly/js-intro-dc WiFi: MakeOffices 5Ghz / Internet!23
• 15.
  Declaring a functionwith Javascript function greet() { return "Hello world!"; } Initialize function Name of function What the function does bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dc 15 bit.ly/js-intro-dc WiFi: MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dc bit.ly/js-intro-dcWiFi: IN3Guest bit.ly/js-intro-dc http://bit.ly/js-intro-dc WiFi: MakeOffices 5Ghz / Internet!23
• 16.
  Parameters within functions functionadder(a, b) { return a + b; } adder(1,2); Parameters in declaration Parameters used within the function bit.ly/ js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dcWiFi: In3Guest 16bit.ly/js-intro-dcWiFi: MakeOffices 5Ghzbit.ly/js-intro-dc bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dcWiFi: IN3Guest bit.ly/js-intro-dcWiFi: IN3Guest bit.ly/js-intro-dcWiFi: In3Guest http://bit.ly/js-intro-dc WiFi: MakeOffices 5Ghz / Internet!23
• 17.
  Examples of parameterswithin functions bit.ly/ js-intro-dc JSBin.com WiFi: MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dc 17 bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dc bit.ly/js-intro-dcWiFi: IN3Guest bit.ly/js-intro-dc http://bit.ly/js-intro-dc WiFi: MakeOffices 5Ghz / Internet!23
• 18.
  Repl.it setup &first steps! http://bit.ly/tf-intro-js-challenges bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/js-intro-dc WiFi: MakeOffices 5Ghz / Internet!23 18
• 19.
  if/else Statements go togas stationkeep driving if false if true need gas? family roadtrip bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/js-intro-dc WiFi: MakeOffices 5Ghz / Internet!23 19
• 20.
  Comparing Values == (equalto) 5 == 5 --> true 5 == 6 --> false != (not equal to) 5 != 5 --> false 5 != 6 --> true bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dc 20 bit.ly/js-intro-dc WiFi: MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dcWiFi: IN3Guest bit.ly/js-intro-dcWiFi: IN3Guest bit.ly/js-intro-dcWiFi: In3Guest http://bit.ly/js-intro-dc WiFi: MakeOffices 5Ghz / Internet!23
• 21.
  if/else Statements function familyRoadtrip(){ if (needGas == true) { getGas(); } else { keepDriving(); } } bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dc 21 bit.ly/js-intro-dc WiFi: MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dcWiFi: IN3Guest bit.ly/js-intro-dcWiFi: IN3Guest bit.ly/js-intro-dcWiFi: In3Guest http://bit.ly/js-intro-dc WiFi: MakeOffices 5Ghz / Internet!23
• 22.
  if/else Statements bit.ly/ js-intro-dc JSBin.com WiFi:MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dcWiFi: In3Guest bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz 22 bit.ly/js-intro-dc bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dc bit.ly/js-intro-dcWiFi: IN3Guest bit.ly/js-intro-dc bit.ly/js-intro-dc
• 23.
  Exercise Solutions http://bit.ly/intro-js-solutions​ bit.ly/ js-intro-dcWiFi:MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dc 23