Thinkful Intro to JS 6/27 at In3 DC

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!