Aug. 23, 2017

More Related Content



  1. Intro to Javascript October 2017 WIFI: Deskhub-main Password: Create2017! 1
  2. Welcome to "Intro to Javascript". The Wi-Fi network is X and the password is Y The website for this class is Z. Speaker notes
  3. Instructor Rachel Munoz Software Developer Bootcamp Graduate TAs Wi-Fi: Deskhub-main Pass: Create2017! 2
  4. Let me start with a little about me. My name is X and my background is Y. We have some TA's that will be helping us today. I'm going to go around and have them introduce themselves. Speaker notes
  5. About you What's your name? What brought you here today? What is your programming experience? Wi-Fi: Deskhub-main Pass: Create2017! 3
  6. I'd love to learn a little more about you guys. So can we go around the room and can everyone give us your name, why you’re attending this event tonight? Speaker notes
  7. About Thinkful Thinkful helps people become developers or 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. Wi-Fi: Deskhub-main Pass: Create2017! 4
  8. Thinkful is hosting the event tonight. Thinkful is a coding bootcamp built on a belief in one-on-one mentorship and project based learning. This workshop today is designed using this approach. The bulk of the workshop will be you guys working one-on-one with our TA’s to build a real project. Speaker notes
  9. Suggestions for learning 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 Wi-Fi: Deskhub-main Pass: Create2017! 5
  10. A couple things before we get started. First, if you’re struggling on a concept or part of your application, don’t get discouraged. The struggle of learning to work through problems, especially in coding, is what’s going to make you a better developer. Second, if you feel stuck and you’re not sure what to do next, place ask for help. We’re here to make sure you get the most support possible to learn as much as you can about the material. Speaker notes
  11. 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) Wi-Fi: Deskhub-main Pass: Create2017! 6
  12. I’ll start by going over some important Javascript concepts that you’ll use to complete the code for tonight. Then I’ll briefly go over the starter code with you and work through the first step with you. Then I’ll let you all work through the next steps to making the app, during which time myself and the TA’s will be walking around to help you all out. At the end we’ll cover next steps for continuing your learning. Speaker notes
  13. How the web works Type a URL from a client (e.g.​ Browser sends an HTTP request asking for specific files Browser receives those files and renders them as a website Wi-Fi: Deskhub-main Pass: Create2017! 7
  14. On a basic level, the web works through communication between a browser like google chrome and a server. The user enters a web address like into a browser and hits enter. Then the browser sends a request to the server that has the files for on it. And the server sends back those files to the browser to load. Speaker notes
  15. Client/Servers Client (sends requests) Frontend Developer Manages what user sees Server (sends response) Backend Developer Manages what app does Wi-Fi: Deskhub-main Pass: Create2017! 8
  16. A browser, also called the client, can be anything that connects to the internet. Your laptop, your phone, all those things are clients. They’re responsible for sending requests and loading the pages from files sent back from the server. It manages what the app looks like. This is the responsibility of a frontend developer. The server holds all those files. Its job is to shoot specific files to the client based on its requests. It manages what the app actually does and is the responsibility of the backend developer Speaker notes
  17. Example: Client Server Open browser and navigate to HTML, CSS, & Javascrip render newsfeed Request Response Algorithm determines content of feed. Sends back HTML, CSS, Javascript files Application LogicApplication Logic Initial requestInitial request Following responseFollowing response 9 Wi-Fi: Deskhub-main Pass: Create2017!
  18. Let's break it down with an example. Let's say I log into facebook. When I try to go to that page, my computer is going to send a request to facebook’s server. Facebook’s server is going to look at that request and think, “okay, what should I send back to ${your name}’s computer?” Its going to look through my friend’s posts and determine using an algorithm what’s most important to put in my feed. Then it’ll send all that info, including the files to display the info, to my computer. My computer will then read and interpret those files and display the information on my screen. Speaker notes
  19. Example: Client Server Open browser and navigate to HTML, CSS, & Javascrip 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 Wi-Fi: Deskhub-main Pass: Create2017!
  20. 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 Wi-Fi: Deskhub-main Pass: Create2017! 11
  21. Javascript was initially written by Brendan Eich in 1995 for Netscape. It was written in 10 days but has since been improved. A common misconception is that it has something to do with Java, but they are very different languages. Most likely, Javascript was given its name to ride the wave of popularity that Java had at the time. In the ten years after it was created, it grew in popularity and today it has a monopoly on front end web development as the default language for web programming. It continues to evolve under the guidance of the ECMA International, with input from top tech companies. Speaker notes
  22. 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 Wi-Fi: Deskhub-main Pass: Create2017! 12
  23. Because of its immense popularity, javascript today has an enormous community of developers, libraries, and frameworks. Because of its widespread use, it also has tons of job opportunities. The syntax is also easier to understand compared to other programming languages making it a good place to start for first-timers. Speaker notes
  24. Defining a variable with Javascript var numberOfSheep = 20 Initialize variable Name of variable Value of variable Wi-Fi: Deskhub-main Pass: Create2017! 13
  25. The first important concept in Javascript is the use of variables. A variable is a container used to store data values. In javascript, we define a variable by first typing out ‘var’. This tells the computer that we’re about to make a variable. Then we type the variable’s name. This can be anything you want, but it is helpful if the name of the variable corresponds to its value. Then we put an equal sign and type in the value of that variable. The computer now recognizes that the variable numberOfSheep is equal to 20. Speaker notes
  26. Variable examples Wi-Fi: Deskhub-main Pass: Create2017! 14
  27. I’m going to show you a few examples of variables you can create. var numberOfSheep = 20; console.log(numberOfSheep); var nameOfSheep = “Fred”; console.log(nameOfSheep); var cars = 5; var trucks = 6; var vehicles = x + y; console.log(vehicles); var foo = ‘foo’; var bar = ‘bar’; var something = x + y; console.log(something); Speaker notes
  28. Declaring a function with Javascript function greet() { return "Hello world!"; } Initialize function Name of function What the function does Wi-Fi: Deskhub-main Pass: Create2017! 15
  29. A function is a piece of code that’s meant to perform a specific task. You create a function by first typing out the word ‘function’. This tells the computer that you’re about to write a function. Then we write out the name of the function followed by parentheses. You don’t need to know quite yet what the parentheses do, just that they are required to be placed immediately after the function name. Then, inside curly brackets, we state what the function is going to do. In this case the function will simply return the string or statement “Hello world!”. Return is a word used inside a function that means ‘give back this value’. Speaker notes
  30. Function examples Wi-Fi: Deskhub-main Pass: Create2017! 16
  31. I’m going to show you a few examples of functions you can create function adder() { console.log(2 + 3); } adder(); ---erase console.log and put return--- function adder() { return 2 + 3; } adder(); console.log(adder()); var subtractor = function() { return 5 - 2; } console.log(subtractor()); var subtractorVariable = subtractor(); console.log(subtractorVariable); Speaker notes
  32. If/Else Statements go to gas stationkeep driving if false if true need gas? family roadtrip Wi-Fi: Deskhub-main Pass: Create2017! 17
  33. Functions can also contain some logic to them that allow them to make decisions based on different circumstances. This logic is contained inside if/else statements. For example, let's say you’re on a roadtrip. You ask yourself, do I need gas. If it's true that you need gas, you should go to the gas station. If it's false that you need gas, then you continue driving. This is a very simplified version of an if/else statement. Speaker notes
  34. If/Else Statements function familyRoadtrip() { if (needGas == true) { getGas(); } else { keepDriving(); } } Wi-Fi: Deskhub-main Pass: Create2017! 18
  35. If we were going to make that into a function, we could write it this way. The name of our function is familyRoadtrip. The first line is our if statement. We needGas is true, then we getGas. Else, we keep driving. This set of equal signs here is called a comparison operator. It's used to compare two values to see if they’re equal. Speaker notes
  36. Comparing Values == (equal to) 5 == 5 --> true 5 == 6 --> false != (not equal to) 5 != 5 --> false 5 != 6 --> true Wi-Fi: Deskhub-main Pass: Create2017! 19
  37. There are a few comparison operators you can use in Javascript. Another one is the ‘not equal to’ sign. Here you can see how, when we compare 5 and 6, the results true and false change depending on the operator. Speaker notes
  38. If/Else Statements and Comparing Values Wi-Fi: Deskhub-main Pass: Create2017! 20
  39. Here’s an example of an if/else statement. function comparison() { if (5 == 6) { console.log("Math is broken"); } else { console.log("Math is working today"); } } comparison(); To show additional if statements, add this: if (5 == 5) { console.log("Math is definitely working today"); } To show additional comparison operators, add this: if (5 < 6) { console.log("And five is still less than 6"); } if (5 >= 5) { console.log("And five is still 5"); } Speaker notes
  40. Parameters within functions function adder(a, b) { return a + b; } adder(1,2); Parameters in declaration Parameters used within the function Wi-Fi: Deskhub-main Pass: Create2017! 21
  41. Finally, functions allow us to use values outside of them by passing them in as parameters. Here, you see that we’ve put parameters ‘a’ and ‘b’ inside the parentheses. They correspond to the ‘a’ and ‘b’ inside the function. If we were to call the function like so, the number one would correspond to ‘a’, and the number 2 would correspond to ‘b’. Speaker notes
  42. Examples of parameters within functions Wi-Fi: Deskhub-main Pass: Create2017! 22
  43. Let's do some examples with parameters function adder(a, b) { console.log(a + b); } adder(1,2); function concatenator(first, second) { console.log(first + second); } concatenator(‘foo’, ‘bar’); function checker(param1, param2) { if (param1 == param2) { console.log(param1 + " is equal to " + param2); } else { console.log("They are not equal"); } } checker(4,4); Speaker notes
  44. Real developers use Google... a lot Wi-Fi: Deskhub-main Pass: Create2017! 23
  45. Google is an everyday part of being a developer. A key part of becoming a developer is getting comfortable using Google to learn and look up things. The more you code, the more you will use Google, not the other way around. When you get stuck tonight, or whenever, make sure to Google it first! Speaker notes
  46. setup & first steps! Wi-Fi: Deskhub-main Pass: Create2017! 24
  47. Go ahead and go to this link. This will take you to a site called Repl is a site that allows us to write code and instantly see a result. Sign up for repl and enter the classroom called Intro to Javascript. Just to get you all familiar with the assignments, I’ll work through the first one with you. Click on Defining Variables and you should see a screen like this. First thing we should do is read the directions on the right side of the screen. They say: “The function sayingHi needs two parameters to function. The variables at the top aren't yet defined so when we try to call sayingHi on line 8, the function fails. Define the variables so that when the function runs, it prints 'Hello World'. Define a as 'Hello' and b as 'World'. Don't forget your quotes! Don't change the test code at the bottom of the file. That's there to help make sure you're code is responding correctly. The console will respond with 'SUCCESS: `sayingHi` is working' if you wrote the function correct, and will print 'FAILURE: `sayingHi` is not working' if your function is not correct. “ Right now, when we press run at the top, it gives us some errors. So, the assignment needs us to define some variables. As good developers, if there’s something we don’t know how to do, we google it. So, lets Google, how to define variables in javascript. Lets click on the first one. This is w3schools, a really nice site for information on programming and javascript. Okay, so we can define this variable x by saying = and then the number 5. Well, that’s all well and good, but I need to put a word in there, not a number. Let's see if they have an example for defining a variable with a word. I’ll just scroll down and see. Okay, so here’s a variable that has a word as a definition. The word is in quotes because its a string. Lets go back to our code and try putting in “hello” and “world” in there with quotes. It works! Go ahead and start working on the remaining challenges. Again, don’t hesitate to Google. Its’ your best friend. The first couple challenges are easier than the last few so if you can’t get them all tonight, that’s okay. Speaker notes
  48. Ways to keep learning 25
  49. For aspiring developers, bootcamps fill the gap 26
  50. If you’re interested in becoming a developer, however, you’ll want to consider a bootcamp. Bootcamps are short programs that provide the structure and support to help people become developers. The reason bootcamps emerged, massive gap between growing demand for software developers and supply Bootcamps were created to fill that gap: 73% get jobs as developers with an average salary lift of $26K. Speaker notes
  51. 89%89% job-placement rate + job guarantee Link for the third party audit jobs report: Thinkful's track record of getting students jobs 27
  52. Thinkful has one of the best track records of getting students jobs 91% placement rate, 35% are placed before graduating. Stats are audited by third party. One of few local bootcamps with a job guarantee. Speaker notes
  53. Our students receive unprecedented support Learning Mentor Career MentorProgram Manager San Diego Community You 28
  54. We’ve been able to achieve these results because of the unprecedented support our students receive: Thinkful students work through the program with their own personal mentor. As you might have seen today, learning in a classroom was much harder than just individually with your TA. We saw the same problem and that's why all our programs are built around 1:1 support Mentors have 10+ years of experience, work at companies like Home Depot, Delta, etc You also have Slack + QA sessions if you’re stuck at 2AM Not only do you have a technical mentor you also have a career mentor, who taps into our network of mentors and employers to get you interviews and help you prepare for them. And then we have a local community: dinners and networking to meet other students, mentors, and resources for Thinkful here in San Diego Speaker notes
  55. Mentorship enables flexible learning Learn anywhere, anytime, & at your own pace You don't have to quitYou don't have to quit your job to startyour job to start career transitioncareer transition 29
  56. This unique structure also makes Thinkful more accessible. Unlike with other programs, mentorship enables total flexibility Learn on your own time and at your own pace You don’t have to quit your job to start a transition. Speaker notes
  57. Take a Thinkful tour! Talk to one of us to set something up ! Take a look through Thinkful's student platform to see if project-based, online learning is a good fit for you 👀 While we're at it, give us feedback on tonight's workshop. 30