More Related Content
What's hot (20)
Similar to Intro to JavaScript - Thinkful LA, June 2017 (20)
More from Thinkful (20)
Recently uploaded (20)
Intro to JavaScript - Thinkful LA, June 2017
- 1. June 2017 Intro to JavaScript WIFI: Cross Campus Events bit.ly/intro-js-la
- 2. About us We train developers and data scientists through 1-on-1 mentorship and career prep
- 3. About me • Brendan Barr • Full-stack JavaScript developer • LA-based Thinkful mentor
- 4. About you • What are your programming goals? • I’d like to become a developer • I have an idea I’d like to build • I’d like to work better with developer • What is your programming experience? • First lines of code will be written tonight! • Been self-teaching for 1-3 months • Been at this for longer than 3 months
- 5. Format for tonight • Basics of how the web works • Background about Javascript • Review key Javascript concepts • Practice with some challenges • Next steps to continue learning
- 6. Before we get started… • Chrome Developer Tools provides an interactive JavaScript console, where you can run and debug code: • View -> Developer -> JavaScript console • Shortcut: option-command-J on a Mac; Ctrl + Shift + J on a PC • Type the following command and hit enter: alert(“Hello world!”); • Type: 2+2;
- 7. What is programming? Programming is writing instructions for a computer to execute. Programming is problem-solving.
- 8. How the web works Type a URL from a client (e.g. facebook.com) Browser communicates with DNS server to find IP address Browser sends an HTTP request asking for specific files Browser receives those files and renders them as a website
- 9. Clients / Servers Client (sends requests) Frontend Developer Manages what user sees Server (sends response) Backend Developer Manage what app does
- 10. Example: facebook.com HTML, CSS, & Javascript render interactive newsfeed Algorithm determines what’s in your feed Request Get data about your friends’s and their posts Open browser and navigate to facebook.com Application Logic Database Response Client Server
- 11. Brief history of Javascript • Written by Brendan Eich in 1995 for Netscape • Initial version written in 10 days • Completely unrelated to Java, named as a marketing stunt because Java was “hot” at the time • Continues to evolve under guidance of ECMA International, driven by browser makers
- 12. Javascript today JavaScript is the most commonly used programming language on earth. Even Back- End developers are more likely to use it than any other language.
- 13. This makes it a good place to start • Has large community of developers, libraries and frameworks • Lots of job opportunities • Also the syntax is easier to understand for first-time developers
- 14. Are we learning frontend or backend? 100% of client-side web development is in Javascript. You can also use Javascript to write server-side code thanks to Node.js. So technically both!
- 15. Concepts we’ll cover • Variables • Data types: strings, numbers, booleans • Functions
- 16. Note on where to write you code When working as a programmer, you’ll use a text editor or an “Integrated Development Environment” (IDE). Tonight we’re using JSBin so we can skip setup, see results immediately and easily share code
- 17. Javascript variables • A variable is a name that is attached to a value — it gives us a shorthand way to refer to the value elsewhere • Helps us remember things while we’re executing a program: “managing state” • Example on JSBin: http://bit.ly/js-example-one
- 18. Examples • Declaring variable: var firstVariable; • Assigning value: firstVariable = 6; • Retrieve value: alert(firstVariable) Example on JSBin: http://bit.ly/js-example-two
- 19. Best practices for naming variables • Names should be (extra) descriptive: “numberOfCats” is better than “x” • Use camelCasing where first word starts with lower case, subsequent words are upper case • Must start variable names with a letter
- 20. What values can be assigned to a variable? • String • Number • Boolean • Also Null, Undefined, Arrays, and Objects
- 21. Introducing strings We use strings a lot. Strings are created with opening and closing quotes (either single or double): var foo = ‘bar’; var bar = “foo”;
- 22. Combining (or “concatenating”) strings Javascript lets you combine two strings by using the + operator. Let’s try it in the console! var host = “Thinkful”; var className = “Intro to Javascript”; console.log(className + “ with “ + host); => Intro to Javascript with Thinkful
- 23. Quick challenge • Open JSBin in your browser • Store your first name in one variable • Store your last name in another variable • Combine the two and log your full name
- 24. Introducing numbers The number type in Javascript is used to represent all kinds of numbers, including integers and decimals. var integerNumber = 3; var floatingPointNumber = 3.00;
- 25. Quick challenge • Open JSBin • Store two numbers in two different variables • Add the two numbers • Multiply the two numbers
- 26. Introducing booleans Boolean is just a fancy word for “true” or “false” var loggedIn = true; if (loggedIn == true) { alert(“loggedIn was set to true!”) }
- 27. Basic functions A function lets you separate your code into bite-sized pieces which you can use over again. When you write a function to use later, you are “declaring” it. When you use (or run) that function you are “calling” it.
- 28. Example Declaring a function function doSomething () { alert(“Done!”) } Calling a function doSomething()
- 29. More about basic functions • Functions can save us time because we can use them over and over code. They are like building blocks. • Functions make your code more organized and easier to read • Javascript has many built-in functions — you’ve already used a couple! • In writing less trivial programs, you’ll write many, many functions
- 30. Challenge #1 • Go to JSBin.com, make sure auto-run with Javascript isn’t selected • Declare and call this function: • function myFirstFunction() { console.log(“Hello World!”); • } • myFirstFunction(); • Click “Run with JS” to see output in console
- 31. Challenge #2 • Open JSBin • Write a function that logs your name • Write a function that adds two numbers and logs the result • Call both functions
- 32. More advanced functions — parameters and return • We can “give” a function some values to use. We call the values we send into a function “parameters” • We can have a function give a single value back. We use a “return” statement to do that. • We define what parameters the function accepts when we declare the function. • We send the actual parameters when we call the function — we put those parameters in the parentheses. Example: addTwoNumbers(2, 3);
- 33. An example function addTwoNumbers(numberOne, numberTwo) { return numberOne + numberTwo; } var result = addTwoNumbers(2, 3); alert(result);
- 34. Challenge • Open JSBin • Write a function that takes your first name and your last name as two parameters • Return a string with your full name • Call that function
- 35. Learning to learn • Google is your friend! • Practice at the edge of your abilities • Ignore the hot new thing. Instead go deep with one technology
- 36. Ways to keep learningLevelofsupport Structure efficiency
- 37. 1-on-1 mentorship enables flexibility 325+ mentors with an average of 10 years of experience in the field
- 38. Support ‘round the clock
- 39. Our results Job Titles after GraduationMonths until Employed
- 40. Try us out! • Initial 2-week trial includes six mentor sessions for $50 • Learn HTML/CSS and JavaScript • Option to continue onto web development bootcamp • Talk to me (or email [email protected]) if you’re interested
- 41. October 2015 Questions? [email protected] schedule a call through thinkful.com