SlideShare a Scribd company logo
1 of 30
Download to read offline
Intro to Javascript
October 2017
WIFI: MakeOffices 5GHz
Password: Internet!23
http://bit.ly/js-intro-dc
1
Instructor
TJ Stalcup
Lead Mentor @ Thinkful
WealthEngine, API Evangelist
Pokemon Enthusiast
TAs
bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz
Password: Internet!23 2
About you
What's your name?
What brought you here today?
What is your programming experience?
bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz
Password: Internet!23 3
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.
bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz
Password: Internet!23 4
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
bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz
Password: Internet!23 5
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)
bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz
Password: Internet!23 6
How the web works
Type a URL from a client (e.g. google.com)​
Browser sends an HTTP request asking for specific files
Browser receives those files and renders them as a website
bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz
Password: Internet!23 7
Client/Servers
Client (sends requests)
Frontend Developer
Manages what user sees
Server (sends response)
Backend Developer
Manages what app does
bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz
Password: Internet!23 8
Example: facebook.com
Client Server
Open browser
and navigate to
facebook.com
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
bit.ly/js-intro-dc
9
WiFi: MakeOffices 5Ghz
Password: Internet!23
Example: facebook.com
Client Server
Open browser
and navigate to
facebook.com
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
bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz
Password: Internet!23
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
bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz
Password: Internet!23 11
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
bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz
Password: Internet!23 12
Defining a variable with Javascript
var numberOfSheep = 20
Initialize variable
Name of variable
Value of variable
bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz
Password: Internet!23 13
Variable examples
bit.ly/js-intro-dc
JSBin.com
WiFi: MakeOffices 5Ghz
Password: Internet!23 14
Repl.it setup & first steps!
http://bit.ly/tf-intro-js-challenges
bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz
Password: Internet!23 15
Declaring a function with Javascript
function greet() {
return "Hello world!";
}
Initialize function Name of function
What the function does
bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz
Password: Internet!23 16
Function examples
bit.ly/js-intro-dc
JSBin.com
WiFi: MakeOffices 5Ghz
Password: Internet!23 17
If/Else Statements
go to gas stationkeep driving
if false if true
need gas?
family roadtrip
bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz
Password: Internet!23 18
If/Else Statements
function familyRoadtrip() {
if (needGas == true) {
getGas();
}
else {
keepDriving();
}
}
bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz
Password: Internet!23 19
Comparing Values
== (equal to)
5 == 5 --> true
5 == 6 --> false
!= (not equal to)
5 != 5 --> false
5 != 6 --> true
bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz
Password: Internet!23 20
If/Else Statements and Comparing Values
bit.ly/ js-intro-dc
JSBin.com
WiFi: MakeOffices 5Ghz
Password: Internet!23 21
Parameters within functions
function adder(a, b) {
return a + b;
}
adder(1,2);
Parameters in declaration
Parameters used
within the function
bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz
Password: Internet!23 22
Examples of parameters within functions
bit.ly/ js-intro-dc
JSBin.com
WiFi: MakeOffices 5Ghz
Password: Internet!23 23
Real developers use Google... a lot
bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz
Password: Internet!23 24
Ways to keep learning
25
For aspiring developers, bootcamps fill the gap
26
91%91%
job-placement rate + job guarantee
Link for the third party audit jobs report:
https://www.thinkful.com/bootcamp-jobs-statshttps://www.thinkful.com/bootcamp-jobs-stats
Thinkful's track record of getting students jobs
27
Our students receive unprecedented support
1-on-1 Learning Mentor
1-on-1 Career MentorProgram Manager
DC Community
You
28
1-on-1 mentorship enables flexible learning
Learn anywhere,
anytime, and at your
own schedule
You don't have to quit
your job to start career
transition
29
Thinkful Two-Week Trial
Talk to one of us and email benjy@thinkful.combenjy@thinkful.com to learn more
Two-week Free Course Trial
Start with HTML, CSS and JavaScript
Unlimited Q&A Sessions
Option to continue with full bootcamp
Financing & scholarships available
Offer valid for one week after eventOffer valid for one week after event
BenjyBenjy SchechnerSchechner
Education Advisor
30

More Related Content

What's hot

Thinkful DC FrontEnd Crash Course - HTML & CSS
Thinkful DC FrontEnd Crash Course - HTML & CSSThinkful DC FrontEnd Crash Course - HTML & CSS
Thinkful DC FrontEnd Crash Course - HTML & CSSTJ Stalcup
 
Build a Game with Javascript
Build a Game with Javascript Build a Game with Javascript
Build a Game with Javascript Aaron Lamphere
 
Thinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSSThinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSSTJ Stalcup
 
Thinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSSThinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSSTJ Stalcup
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash CourseTJ Stalcup
 
Build a Game with JavaScript - Thinkful DC
Build a Game with JavaScript - Thinkful DCBuild a Game with JavaScript - Thinkful DC
Build a Game with JavaScript - Thinkful DCTJ Stalcup
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash CourseTJ Stalcup
 
Build a Game with Javascript
Build a Game with Javascript Build a Game with Javascript
Build a Game with Javascript Ivy Rueb
 
Build a Game with JavaScript - Pasadena July
Build a Game with JavaScript - Pasadena JulyBuild a Game with JavaScript - Pasadena July
Build a Game with JavaScript - Pasadena JulyThinkful
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66Ivy Rueb
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-37
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-37Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-37
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-37Thinkful
 
Build your own Website
Build your own WebsiteBuild your own Website
Build your own WebsiteAaron Lamphere
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-57 (2)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-57 (2)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-57 (2)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-57 (2)Ivy Rueb
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-57
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-57Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-57
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-57Ivy Rueb
 
Thinkful build a website (html, css)
Thinkful build a website (html, css)Thinkful build a website (html, css)
Thinkful build a website (html, css)Thinkful
 
Intro to Python
Intro to PythonIntro to Python
Intro to PythonTJ Stalcup
 

What's hot (20)

Thinkful DC FrontEnd Crash Course - HTML & CSS
Thinkful DC FrontEnd Crash Course - HTML & CSSThinkful DC FrontEnd Crash Course - HTML & CSS
Thinkful DC FrontEnd Crash Course - HTML & CSS
 
Build a Game with Javascript
Build a Game with Javascript Build a Game with Javascript
Build a Game with Javascript
 
Thinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSSThinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSS
 
Thinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSSThinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSS
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
 
Build a Game with JavaScript - Thinkful DC
Build a Game with JavaScript - Thinkful DCBuild a Game with JavaScript - Thinkful DC
Build a Game with JavaScript - Thinkful DC
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
 
Build a Game with Javascript
Build a Game with Javascript Build a Game with Javascript
Build a Game with Javascript
 
Build a Game with JavaScript - Pasadena July
Build a Game with JavaScript - Pasadena JulyBuild a Game with JavaScript - Pasadena July
Build a Game with JavaScript - Pasadena July
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-37
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-37Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-37
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-37
 
Build your own Website
Build your own WebsiteBuild your own Website
Build your own Website
 
BYOWHC823
BYOWHC823BYOWHC823
BYOWHC823
 
itjsbagg410
itjsbagg410itjsbagg410
itjsbagg410
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-57 (2)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-57 (2)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-57 (2)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-57 (2)
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-57
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-57Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-57
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-57
 
Thinkful build a website (html, css)
Thinkful build a website (html, css)Thinkful build a website (html, css)
Thinkful build a website (html, css)
 
Intro to Python
Intro to PythonIntro to Python
Intro to Python
 

Similar to Intro to Javascript

Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-28
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-28Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-28
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-28Thinkful
 
Intro to js september 19
Intro to js september 19Intro to js september 19
Intro to js september 19Thinkful
 
Intro to JavaScript - LA - July
Intro to JavaScript - LA - JulyIntro to JavaScript - LA - July
Intro to JavaScript - LA - JulyThinkful
 
Intro To JavaScript
Intro To JavaScriptIntro To JavaScript
Intro To JavaScriptIvy Rueb
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14Thinkful
 
Intro To JavaScript
Intro To JavaScriptIntro To JavaScript
Intro To JavaScriptIvy Rueb
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52Ivy Rueb
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55Ivy Rueb
 
Intro to Python
Intro to PythonIntro to Python
Intro to PythonTJ Stalcup
 
Thinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScriptThinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScriptTJ Stalcup
 
Build your own Website
Build your own WebsiteBuild your own Website
Build your own WebsiteAaron Lamphere
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74Ivy Rueb
 
Build your Own Twitter bot 09/20
Build your Own Twitter bot 09/20Build your Own Twitter bot 09/20
Build your Own Twitter bot 09/20Ivy Rueb
 
Intro js-nov-7
Intro js-nov-7Intro js-nov-7
Intro js-nov-7Thinkful
 

Similar to Intro to Javascript (17)

Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-28
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-28Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-28
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-28
 
Intro to js september 19
Intro to js september 19Intro to js september 19
Intro to js september 19
 
Intro to JavaScript - LA - July
Intro to JavaScript - LA - JulyIntro to JavaScript - LA - July
Intro to JavaScript - LA - July
 
Intro To JavaScript
Intro To JavaScriptIntro To JavaScript
Intro To JavaScript
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14
 
Intro To JavaScript
Intro To JavaScriptIntro To JavaScript
Intro To JavaScript
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52
 
IJS821
IJS821IJS821
IJS821
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55
 
Intro to Python
Intro to PythonIntro to Python
Intro to Python
 
Thinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScriptThinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScript
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
 
Build your own Website
Build your own WebsiteBuild your own Website
Build your own Website
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74
 
Build your Own Twitter bot 09/20
Build your Own Twitter bot 09/20Build your Own Twitter bot 09/20
Build your Own Twitter bot 09/20
 
Intro js-nov-7
Intro js-nov-7Intro js-nov-7
Intro js-nov-7
 

More from TJ Stalcup

Intro to Python for Data Science
Intro to Python for Data ScienceIntro to Python for Data Science
Intro to Python for Data ScienceTJ Stalcup
 
Intro to Python for Data Science
Intro to Python for Data ScienceIntro to Python for Data Science
Intro to Python for Data ScienceTJ Stalcup
 
Build Your Own Website - Intro to HTML & CSS
Build Your Own Website - Intro to HTML & CSSBuild Your Own Website - Intro to HTML & CSS
Build Your Own Website - Intro to HTML & CSSTJ Stalcup
 
Predict the Oscars using Data Science
Predict the Oscars using Data SciencePredict the Oscars using Data Science
Predict the Oscars using Data ScienceTJ Stalcup
 
Data Science Your Vacation
Data Science Your VacationData Science Your Vacation
Data Science Your VacationTJ Stalcup
 
Data Science Your Vacation
Data Science Your VacationData Science Your Vacation
Data Science Your VacationTJ Stalcup
 
Build Your Own Instagram Filters
Build Your Own Instagram FiltersBuild Your Own Instagram Filters
Build Your Own Instagram FiltersTJ Stalcup
 
Choosing a Programming Language
Choosing a Programming LanguageChoosing a Programming Language
Choosing a Programming LanguageTJ Stalcup
 
Build a Virtual Pet with JavaScript
Build a Virtual Pet with JavaScriptBuild a Virtual Pet with JavaScript
Build a Virtual Pet with JavaScriptTJ Stalcup
 
Thinkful DC - Building a Virtual Pet with JavaScript
Thinkful DC - Building a Virtual Pet with JavaScriptThinkful DC - Building a Virtual Pet with JavaScript
Thinkful DC - Building a Virtual Pet with JavaScriptTJ Stalcup
 
Thinkful - Intro to Data Science - Washington DC
Thinkful - Intro to Data Science - Washington DCThinkful - Intro to Data Science - Washington DC
Thinkful - Intro to Data Science - Washington DCTJ Stalcup
 
Build Your Own Website - Thinkful DC
Build Your Own Website - Thinkful DCBuild Your Own Website - Thinkful DC
Build Your Own Website - Thinkful DCTJ Stalcup
 
Build a Virtual Pet with JavaScript
Build a Virtual Pet with JavaScriptBuild a Virtual Pet with JavaScript
Build a Virtual Pet with JavaScriptTJ Stalcup
 
Thinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSThinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSTJ Stalcup
 
Intro to Data Science
Intro to Data ScienceIntro to Data Science
Intro to Data ScienceTJ Stalcup
 
Thinkful - Intro to JavaScript
Thinkful - Intro to JavaScriptThinkful - Intro to JavaScript
Thinkful - Intro to JavaScriptTJ Stalcup
 
Thinkful - HTML/CSS Crash Course (May 4 2017)
Thinkful - HTML/CSS Crash Course (May 4 2017)Thinkful - HTML/CSS Crash Course (May 4 2017)
Thinkful - HTML/CSS Crash Course (May 4 2017)TJ Stalcup
 

More from TJ Stalcup (18)

Intro to Python for Data Science
Intro to Python for Data ScienceIntro to Python for Data Science
Intro to Python for Data Science
 
Intro to Python for Data Science
Intro to Python for Data ScienceIntro to Python for Data Science
Intro to Python for Data Science
 
Build Your Own Website - Intro to HTML & CSS
Build Your Own Website - Intro to HTML & CSSBuild Your Own Website - Intro to HTML & CSS
Build Your Own Website - Intro to HTML & CSS
 
Predict the Oscars using Data Science
Predict the Oscars using Data SciencePredict the Oscars using Data Science
Predict the Oscars using Data Science
 
Data Science Your Vacation
Data Science Your VacationData Science Your Vacation
Data Science Your Vacation
 
Data Science Your Vacation
Data Science Your VacationData Science Your Vacation
Data Science Your Vacation
 
Build Your Own Instagram Filters
Build Your Own Instagram FiltersBuild Your Own Instagram Filters
Build Your Own Instagram Filters
 
Choosing a Programming Language
Choosing a Programming LanguageChoosing a Programming Language
Choosing a Programming Language
 
Build a Virtual Pet with JavaScript
Build a Virtual Pet with JavaScriptBuild a Virtual Pet with JavaScript
Build a Virtual Pet with JavaScript
 
DC jQuery App
DC jQuery AppDC jQuery App
DC jQuery App
 
Thinkful DC - Building a Virtual Pet with JavaScript
Thinkful DC - Building a Virtual Pet with JavaScriptThinkful DC - Building a Virtual Pet with JavaScript
Thinkful DC - Building a Virtual Pet with JavaScript
 
Thinkful - Intro to Data Science - Washington DC
Thinkful - Intro to Data Science - Washington DCThinkful - Intro to Data Science - Washington DC
Thinkful - Intro to Data Science - Washington DC
 
Build Your Own Website - Thinkful DC
Build Your Own Website - Thinkful DCBuild Your Own Website - Thinkful DC
Build Your Own Website - Thinkful DC
 
Build a Virtual Pet with JavaScript
Build a Virtual Pet with JavaScriptBuild a Virtual Pet with JavaScript
Build a Virtual Pet with JavaScript
 
Thinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSThinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSS
 
Intro to Data Science
Intro to Data ScienceIntro to Data Science
Intro to Data Science
 
Thinkful - Intro to JavaScript
Thinkful - Intro to JavaScriptThinkful - Intro to JavaScript
Thinkful - Intro to JavaScript
 
Thinkful - HTML/CSS Crash Course (May 4 2017)
Thinkful - HTML/CSS Crash Course (May 4 2017)Thinkful - HTML/CSS Crash Course (May 4 2017)
Thinkful - HTML/CSS Crash Course (May 4 2017)
 

Recently uploaded

AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 

Recently uploaded (20)

AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 

Intro to Javascript

  • 1. Intro to Javascript October 2017 WIFI: MakeOffices 5GHz Password: Internet!23 http://bit.ly/js-intro-dc 1
  • 2. Instructor TJ Stalcup Lead Mentor @ Thinkful WealthEngine, API Evangelist Pokemon Enthusiast TAs bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 2
  • 3. About you What's your name? What brought you here today? What is your programming experience? bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 3
  • 4. 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. bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 4
  • 5. 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 bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 5
  • 6. 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) bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 6
  • 7. How the web works Type a URL from a client (e.g. google.com)​ Browser sends an HTTP request asking for specific files Browser receives those files and renders them as a website bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 7
  • 8. Client/Servers Client (sends requests) Frontend Developer Manages what user sees Server (sends response) Backend Developer Manages what app does bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 8
  • 9. Example: facebook.com Client Server Open browser and navigate to facebook.com 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 bit.ly/js-intro-dc 9 WiFi: MakeOffices 5Ghz Password: Internet!23
  • 10. Example: facebook.com Client Server Open browser and navigate to facebook.com 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 bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23
  • 11. 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 bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 11
  • 12. 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 bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 12
  • 13. Defining a variable with Javascript var numberOfSheep = 20 Initialize variable Name of variable Value of variable bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 13
  • 15. Repl.it setup & first steps! http://bit.ly/tf-intro-js-challenges bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 15
  • 16. Declaring a function with Javascript function greet() { return "Hello world!"; } Initialize function Name of function What the function does bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 16
  • 18. If/Else Statements go to gas stationkeep driving if false if true need gas? family roadtrip bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 18
  • 19. If/Else Statements function familyRoadtrip() { if (needGas == true) { getGas(); } else { keepDriving(); } } bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 19
  • 20. Comparing Values == (equal to) 5 == 5 --> true 5 == 6 --> false != (not equal to) 5 != 5 --> false 5 != 6 --> true bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 20
  • 21. If/Else Statements and Comparing Values bit.ly/ js-intro-dc JSBin.com WiFi: MakeOffices 5Ghz Password: Internet!23 21
  • 22. Parameters within functions function adder(a, b) { return a + b; } adder(1,2); Parameters in declaration Parameters used within the function bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 22
  • 23. Examples of parameters within functions bit.ly/ js-intro-dc JSBin.com WiFi: MakeOffices 5Ghz Password: Internet!23 23
  • 24. Real developers use Google... a lot bit.ly/js-intro-dcWiFi: MakeOffices 5Ghz Password: Internet!23 24
  • 25. Ways to keep learning 25
  • 26. For aspiring developers, bootcamps fill the gap 26
  • 27. 91%91% job-placement rate + job guarantee Link for the third party audit jobs report: https://www.thinkful.com/bootcamp-jobs-statshttps://www.thinkful.com/bootcamp-jobs-stats Thinkful's track record of getting students jobs 27
  • 28. Our students receive unprecedented support 1-on-1 Learning Mentor 1-on-1 Career MentorProgram Manager DC Community You 28
  • 29. 1-on-1 mentorship enables flexible learning Learn anywhere, anytime, and at your own schedule You don't have to quit your job to start career transition 29
  • 30. Thinkful Two-Week Trial Talk to one of us and email benjy@thinkful.combenjy@thinkful.com to learn more Two-week Free Course Trial Start with HTML, CSS and JavaScript Unlimited Q&A Sessions Option to continue with full bootcamp Financing & scholarships available Offer valid for one week after eventOffer valid for one week after event BenjyBenjy SchechnerSchechner Education Advisor 30