Intro to javascript (6:27)
- 1. Intro to JavaScript June 2017 bit.ly/tf-intro-js
- 2. About me • Tyler Brewer • Software Developer at Excella Consulting & Mentor at Thinkful • Thinkful Grad
- 3. About TAs • David Coulter • Program Manager, Thinkful DC • Formerly National Geographic, FEMA, other stuff • Brittany Walker • Current Thinkful Student • Super awesome
- 4. About you • What’s your name? • Why are you interested in learning JS?
- 5. About us We train developers and data scientists through 1-on-1 mentorship and career prep
- 6. Format for tonight • Basics of how the web works • Background about Javascript • Review key Javascript concepts • Practice with some challenges • Next steps
- 7. What is programming? Programming is writing instructions for a computer to execute. Programming is problem-solving.
- 8. Programming is a process 1. Defining problems 2. Finding solutions to those problems 3. Implementing those solutions in a language your computer can understand
- 9. Perception
- 10. Reality
- 11. How the web works Type a URL from a client (e.g. google.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
- 12. Clients / Servers Client (sends requests) Frontend Developer Manages what user sees Server (sends response) Backend Developer Manage what app does
- 13. Brief 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
- 14. 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
- 15. 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!
- 16. Concepts we’ll cover • Variables • Data types: strings, numbers, booleans • Functions
- 17. 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
- 18. 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
- 19. Examples • Declaring variable: var firstVariable; • Assigning value: firstVariable = 6; • Retrieve value: alert(firstVariable) Example on JSBin: http://bit.ly/js-example-two
- 20. 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
- 21. What values can be assigned to a variable? • String • Number • Boolean • Also Null, Undefined, Arrays, and Objects
- 22. 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”;
- 23. 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
- 24. 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
- 25. 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;
- 26. Quick challenge • Open JSBin • Store two numbers in two different variables • Add the two numbers and log to console • Multiply the two numbers and log to console
- 27. Introducing booleans Boolean is just a fancy word for “true” or “false” var loggedIn = true; if (loggedIn == true) { alert(“loggedIn was set to true!”) }
- 28. 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.
- 29. Example Declaring a function function doSomething() { alert(“Done!”); } Calling a function doSomething();
- 30. 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
- 31. 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
- 32. 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
- 33. 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);
- 34. An example function addTwoNumbers(firstNumber, secondNumber) { return firstNumber + secondNumber; } var result = addTwoNumbers(2, 3); alert(result);
- 35. 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
- 36. Ways to keep learningLevelofsupport Learning methods
- 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! • Learn HTML/CSS and JavaScript • Continue with Node, React, and more • We offer both Web Development and Data Science Bootcamps • Talk to some one from Thinkful if you’re interested!