Introduction to JavaScript, Washington, DC February 2018
0 likes51 views
This document outlines an introductory workshop on JavaScript. It provides the wifi login credentials, introduces the instructor and TAs, and outlines an agenda including learning key JavaScript concepts, completing assignments with support, and reviewing solutions. The technical content covers variables, functions, parameters, if/else statements, comparing values, and string methods. Code examples are provided and exercises are assigned for hands-on practice of the concepts. Next steps for continuing to learn are also mentioned.
Introduction to JavaScript, Washington, DC February 2018
- 1. Intro to Javascript February 2018 Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/js-intro-dc 1
- 2. We're Thinkful: a school that offers online programs for Full Stack JavaScript and Data Science. We are able to due this through 1-on-1 mentorship http://bit.ly/js-intro-dc Wifi: MakeOffices 5Ghz Password: Internet!23 2
- 3. Instructor Pol • Thinkful Mentor • Montgomery College • Boston University TAs bit.ly/js-intro-dc 3
- 4. About you What's your name? 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 4 bit.ly/js-intro-dcWiFi: IN3Guest bit.ly/js-intro-dcWiFi: In3Guest bit.ly/js-intro-dc
- 5. About Thinkful Thinkful helps people 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. 5 bit.ly/js-intro-dc
- 6. Take advantage of our 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 bit.ly/js-intro-dc 6
- 7. Agenda Learn key Javascript concepts (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) bit.ly/js-intro-dc 7
- 8. How the web works 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 bit.ly/js-intro-dc 8
- 9. Client/Servers Client (sends requests) Frontend Developer 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 9 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 bit.ly/js-intro-dc
- 10. Example: facebook.com Client Server Open browser 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 10 bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dc
- 11. History of Javascript Written by 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 bit.ly/js-intro-dc 11
- 12. Javascript today Has large community 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 12 WiFi: MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dcWiFi: IN3Guest bit.ly/js-intro-dcWiFi: IN3Guest bit.ly/js-intro-dcWiFi: In3Guest bit.ly/js-intro-dc
- 13. Real developers use Google... a lot bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dc 13
- 14. Defining a variable with Javascript var numberOfSheep = 20 Initialize variable Name of variable Value of variable bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dc 14
- 15. Variable examples bit.ly/js-intro-dc JSBin.com WiFi: 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-dcWiFi: IN3Guest bit.ly/js-intro-dcWiFi: IN3Guest bit.ly/js-intro-dcWiFi: In3Guest bit.ly/js-intro-dc
- 16. Declaring a function with 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 16 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 bit.ly/js-intro-dc
- 17. Parameters within functions function adder(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 17bit.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 bit.ly/js-intro-dc
- 18. Examples of parameters within functions bit.ly/ js-intro-dc JSBin.com WiFi: MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dc 18 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
- 19. Repl.it setup & first steps! http://bit.ly/tf-intro-js-challenges bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dc 19
- 20. if/else Statements go to gas stationkeep driving if false if true need gas? family roadtrip bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dc 20
- 21. Comparing Values == (equal to) 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 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 bit.ly/js-intro-dc
- 22. 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 22 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 bit.ly/js-intro-dc
- 23. String Method: toUpperCase() var myName = prompt("Enter your name:"); // Convert to upper case myName = myName.toUpperCase(); if (myName === "MICHELLE") console.log("Your name is Michelle") bit.ly/ js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dc 23 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 bit.ly/js-intro-dc
- 24. if/else Statements and String Methods 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 24 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
- 26. Exercise Solutions http://bit.ly/intro-js-solutions bit.ly/ js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 bit.ly/js-intro-dc 26
- 27. Ways to keep learning 27
- 28. Thinkful's Free Resource Learn HTML, CSS, and JavaScript Unlimited Mentor Q&A Sessions Access to Online Workshops Personal Program Manager http://bit.ly/dc-trial 28