This document provides an introduction to Javascript, covering key topics like how the web works, Javascript concepts like variables and functions, and an overview of the Thinkful web development program. It begins with introductions and discusses formatting for the night, then covers the basics of programming and Javascript, including a brief history of Javascript. Key Javascript concepts like variables, strings, numbers, booleans, and functions are explained. Challenges are provided to practice these concepts. The document concludes with information about the Thinkful program syllabus, mentors, job outcomes, and a special introductory offer.

1. Introduction to Javascript
March 2017
http://bit.ly/tf-intro-js

2. About me
• Connor Ericson
• Current Thinkful student

3. My lovely assistants
• Tommy McGuire
• Current Thinkful Student
• Peter Kim
• Program Manager

4. About us
Thinkful prepares students for web development & data
science jobs with 1-on-1 mentorship programs

5. Format for tonight
• Basics of how the web works
• Background about Javascript
• Review key Javascript concepts
• Practice with some challenges
• Next steps

6. What is programming?
Programming is writing instructions for a computer to
execute. Programming is problem-solving.

7. Programming is a process
1. Defining problems
2. Finding solutions to those problems
3. Implementing those solutions in a language your
computer can understand

8. Perception

9. Reality

10. 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

11. Clients / Servers
Client (sends requests)
Frontend Developer
Manages what user sees
Server (sends response)
Backend Developer
Manage what app does

12. 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

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. Javascript is extremely popular

15. 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

16. 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!

17. Concepts we’ll cover
• Variables
• Data types: strings, numbers, booleans
• Functions

18. 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

19. 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

20. Examples
• Declaring variable: var firstVariable;
• Assigning value: firstVariable = 6;
• Retrieve value: alert(firstVariable)
Example on JSBin: http://bit.ly/js-example-two

21. 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

22. What values can be assigned to a variable?
• String
• Number
• Boolean
• Also Null, Undefined, Arrays, and Objects

23. 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”;

24. 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

25. 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

26. 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;

27. Quick challenge
• Open JSBin
• Store two numbers in two different variables
• Add the two numbers
• Multiply the two numbers

28. Introducing booleans
Boolean is just a fancy word for “true” or “false”
var loggedIn = true;
if (loggedIn == true) {
alert(“loggedIn was set to true!”)
}

29. 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.

30. Example
Declaring a function
function doSomething() {
alert(“Done!”);
}
Calling a function
doSomething();

31. 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

32. 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

33. 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

34. 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);

35. An example
function addTwoNumbers(firstNumber, secondNumber) {
return firstNumber + secondNumber;
}
var result = addTwoNumbers(2, 3);
alert(result);

36. 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

37. 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

38. More about Thinkful
• Anyone who’s committed can learn to code
• 1-on-1 mentorship is the best way to learn
• Flexibility matters — learn anywhere, anytime
•We only make money when you get a job

39. Our Program
You’ll learn concepts, practice with drills, and build
capstone projects — all guided by a personal mentor

40. Web Development Syllabus
• Frontend Development (HTML, CSS, Javascript)
• Backend Development (Node.js)
• Frontend Frameworks (React.js)
• Electives (Python, Ruby, Swift, Angular, UX)
• Computer Science Fundamentals
• Technical interviews + Career prep

41. Our Mentors
Mentors have, on average, 10+ years of experience

42. Our Results
Job Titles after GraduationMonths until Employed

43. Special Introductory Offer
• Two-week program, includes six mentor sessions for $50
• Starts with HTML/CSS/Javascript
• Option to continue into full web development bootcamp
• Talk to me (or email me) if you’re interested

44. October 2015
Questions?
jas@thinkful.com
schedule a call through thinkful.com