SlideShare a Scribd company logo
Intro to Javascript
September 2017
WIFI: In3Guest
http://bit.ly/tf-intro-js
1
Instructor
Avi Zajac
Thinkful Full Time Student
Hacker
Rubik’s Cuber
Lockpicker
TAs
bit.ly/tf-intro-jsWi-Fi: In3Guest
2
About you
What's your name?
What brought you here today?
What is your programming experience?
bit.ly/tf-intro-jsWi-Fi: In3Guest
3
About Thinkful
Thinkful helps people become developers or data scientists
through 1-on-1 mentorship and project-based learning
bit.ly/tf-intro-jsWi-Fi: In3Guest
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/tf-intro-jsWi-Fi: In3Guest
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/tf-intro-jsWi-Fi: In3Guest
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/tf-intro-jsWi-Fi: In3Guest
7
Client/Servers
Client (sends requests)
Frontend Developer
Manages what user sees
Server (sends response)
Backend Developer
Manages what app does
bit.ly/tf-intro-jsWi-Fi: In3Guest
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/tf-intro-js
9
Wi-Fi: In3Guest
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/tf-intro-jsWi-Fi: In3Guest
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/tf-intro-jsWi-Fi: In3Guest
11
Javascript today is extremely popular
Lots of job opportunities
Large community of developers, libraries and frameworks
Syntax is easier to understand for first-time developers
bit.ly/tf-intro-jsWi-Fi: In3Guest
12
Defining a variable with Javascript
var numberOfSheep = 20
Initialize variable
Name of variable
Value of variable
bit.ly/tf-intro-jsWi-Fi: In3Guest
13
Variable examples
bit.ly/tf-intro-jsWi-Fi: In3Guest
14
Declaring a function with Javascript
function greet() {
return "Hello world!";
}
Initialize function Name of function
What the function does
bit.ly/tf-intro-jsWi-Fi: In3Guest
15
Function examples
bit.ly/tf-intro-jsWi-Fi: In3Guest
16
If/Else Statements
go to gas stationkeep driving
if false if true
need gas?
family roadtrip
bit.ly/tf-intro-jsWi-Fi: In3Guest
17
If/Else Statements
function familyRoadtrip() {
if (needGas == true) {
getGas();
}
else {
keepDriving();
}
}
bit.ly/tf-intro-jsWi-Fi: In3Guest
18
Comparing Values
== (equal to)
5 == 5 --> true
5 == 6 --> false
!= (not equal to)
5 != 5 --> false
5 != 6 --> true
bit.ly/tf-intro-jsWi-Fi: In3Guest
19
If/Else Statements and Comparing Values
bit.ly/tf-intro-jsWi-Fi: In3Guest
20
Parameters within functions
function adder(a, b) {
return a + b;
}
adder(1,2);
Parameters in declaration
Parameters used
within the function
bit.ly/tf-intro-jsWi-Fi: In3Guest
21
Examples of parameters within functions
bit.ly/tf-intro-jsWi-Fi: In3Guest
22
Real developers use Google... a lot
bit.ly/tf-intro-jsWi-Fi: In3Guest
23
Repl.it setup & first steps!
http://bit.ly/tf-intro-js-challenges
bit.ly/tf-intro-jsWi-Fi: In3Guest
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
Learning Mentor
Career MentorProgram Manager
Local Community
You
28
Mentorship enables flexible learning
Learn anywhere,
anytime, & at your own
pace
You don't have to quitYou don't have to quit
your job to startyour job to start
career transitioncareer 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
Unlimited QA sessions
Start with HTML, CSS and JavaScript
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

Similar to Intro to JavaScript (20)

PDF
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-28
Thinkful
 
PDF
Intro To JavaScript
Ivy Rueb
 
PDF
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74
Ivy Rueb
 
PDF
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55
Ivy Rueb
 
PDF
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14
Thinkful
 
PDF
Thinkful DC - Intro to JavaScript
TJ Stalcup
 
PDF
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52
Ivy Rueb
 
PDF
Intro js3.22.18
Jordan Zurowski
 
PDF
Itjsf13
Thinkful
 
PDF
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)
Jordan Zurowski
 
PDF
Intro To JavaScript
Ivy Rueb
 
PDF
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74
Ivy Rueb
 
PDF
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74-451
Justin Ezor
 
PDF
Intro js-nov-7
Thinkful
 
PDF
Itjsf13
Thinkful
 
PDF
Intro to JavaScript
Aaron Lamphere
 
PDF
Intro to JavaScript
Aaron Lamphere
 
PDF
Itjsf129
Thinkful
 
PDF
Itjs124
Thinkful
 
PDF
Intro js-la-12-18
Thinkful
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-28
Thinkful
 
Intro To JavaScript
Ivy Rueb
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74
Ivy Rueb
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55
Ivy Rueb
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14
Thinkful
 
Thinkful DC - Intro to JavaScript
TJ Stalcup
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52
Ivy Rueb
 
Intro js3.22.18
Jordan Zurowski
 
Itjsf13
Thinkful
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)
Jordan Zurowski
 
Intro To JavaScript
Ivy Rueb
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74
Ivy Rueb
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74-451
Justin Ezor
 
Intro js-nov-7
Thinkful
 
Itjsf13
Thinkful
 
Intro to JavaScript
Aaron Lamphere
 
Intro to JavaScript
Aaron Lamphere
 
Itjsf129
Thinkful
 
Itjs124
Thinkful
 
Intro js-la-12-18
Thinkful
 

More from Aaron Lamphere (19)

PDF
Become a Data Analyst
Aaron Lamphere
 
PDF
Web Development or Data Science
Aaron Lamphere
 
PDF
Getting Started in Tech
Aaron Lamphere
 
PPTX
Build an App with JavaScript & jQuery
Aaron Lamphere
 
PDF
Build your Own Website with HTML/CSS
Aaron Lamphere
 
PDF
Build a Game with Javascript
Aaron Lamphere
 
PDF
Frontend Crash Course
Aaron Lamphere
 
PDF
Build your own Website
Aaron Lamphere
 
PDF
Build your own Website
Aaron Lamphere
 
PDF
Frontend Crash Course
Aaron Lamphere
 
PDF
Build an App with JavaScript & jQuery
Aaron Lamphere
 
PDF
Frontend Crash Course
Aaron Lamphere
 
PDF
Frontend Crash Course
Aaron Lamphere
 
PDF
HTML/CSS Crash Course
Aaron Lamphere
 
PDF
Getting Started in Tech
Aaron Lamphere
 
PDF
Build an App with JavaScript & jQuery
Aaron Lamphere
 
PDF
Build an App with JavaScript & jQuery
Aaron Lamphere
 
PDF
Build an App with JavaScript & jQuery
Aaron Lamphere
 
PDF
Build an App with JavaScript & jQuery
Aaron Lamphere
 
Become a Data Analyst
Aaron Lamphere
 
Web Development or Data Science
Aaron Lamphere
 
Getting Started in Tech
Aaron Lamphere
 
Build an App with JavaScript & jQuery
Aaron Lamphere
 
Build your Own Website with HTML/CSS
Aaron Lamphere
 
Build a Game with Javascript
Aaron Lamphere
 
Frontend Crash Course
Aaron Lamphere
 
Build your own Website
Aaron Lamphere
 
Build your own Website
Aaron Lamphere
 
Frontend Crash Course
Aaron Lamphere
 
Build an App with JavaScript & jQuery
Aaron Lamphere
 
Frontend Crash Course
Aaron Lamphere
 
Frontend Crash Course
Aaron Lamphere
 
HTML/CSS Crash Course
Aaron Lamphere
 
Getting Started in Tech
Aaron Lamphere
 
Build an App with JavaScript & jQuery
Aaron Lamphere
 
Build an App with JavaScript & jQuery
Aaron Lamphere
 
Build an App with JavaScript & jQuery
Aaron Lamphere
 
Build an App with JavaScript & jQuery
Aaron Lamphere
 
Ad

Recently uploaded (20)

PPTX
Top iOS App Development Company in the USA for Innovative Apps
SynapseIndia
 
PDF
Log-Based Anomaly Detection: Enhancing System Reliability with Machine Learning
Mohammed BEKKOUCHE
 
PDF
Fl Studio 24.2.2 Build 4597 Crack for Windows Free Download 2025
faizk77g
 
PDF
Persuasive AI: risks and opportunities in the age of digital debate
Speck&Tech
 
PDF
Chris Elwell Woburn, MA - Passionate About IT Innovation
Chris Elwell Woburn, MA
 
PDF
CIFDAQ Token Spotlight for 9th July 2025
CIFDAQ
 
PPTX
Darren Mills The Migration Modernization Balancing Act: Navigating Risks and...
AWS Chicago
 
PPTX
MSP360 Backup Scheduling and Retention Best Practices.pptx
MSP360
 
PDF
Why Orbit Edge Tech is a Top Next JS Development Company in 2025
mahendraalaska08
 
PDF
Empowering Cloud Providers with Apache CloudStack and Stackbill
ShapeBlue
 
PPTX
WooCommerce Workshop: Bring Your Laptop
Laura Hartwig
 
PPT
Interview paper part 3, It is based on Interview Prep
SoumyadeepGhosh39
 
PDF
Women in Automation Presents: Reinventing Yourself — Bold Career Pivots That ...
DianaGray10
 
PDF
NewMind AI - Journal 100 Insights After The 100th Issue
NewMind AI
 
PPTX
Building a Production-Ready Barts Health Secure Data Environment Tooling, Acc...
Barts Health
 
PDF
Human-centred design in online workplace learning and relationship to engagem...
Tracy Tang
 
PDF
Meetup Kickoff & Welcome - Rohit Yadav, CSIUG Chairman
ShapeBlue
 
PDF
Impact of IEEE Computer Society in Advancing Emerging Technologies including ...
Hironori Washizaki
 
PDF
July Patch Tuesday
Ivanti
 
PDF
Blockchain Transactions Explained For Everyone
CIFDAQ
 
Top iOS App Development Company in the USA for Innovative Apps
SynapseIndia
 
Log-Based Anomaly Detection: Enhancing System Reliability with Machine Learning
Mohammed BEKKOUCHE
 
Fl Studio 24.2.2 Build 4597 Crack for Windows Free Download 2025
faizk77g
 
Persuasive AI: risks and opportunities in the age of digital debate
Speck&Tech
 
Chris Elwell Woburn, MA - Passionate About IT Innovation
Chris Elwell Woburn, MA
 
CIFDAQ Token Spotlight for 9th July 2025
CIFDAQ
 
Darren Mills The Migration Modernization Balancing Act: Navigating Risks and...
AWS Chicago
 
MSP360 Backup Scheduling and Retention Best Practices.pptx
MSP360
 
Why Orbit Edge Tech is a Top Next JS Development Company in 2025
mahendraalaska08
 
Empowering Cloud Providers with Apache CloudStack and Stackbill
ShapeBlue
 
WooCommerce Workshop: Bring Your Laptop
Laura Hartwig
 
Interview paper part 3, It is based on Interview Prep
SoumyadeepGhosh39
 
Women in Automation Presents: Reinventing Yourself — Bold Career Pivots That ...
DianaGray10
 
NewMind AI - Journal 100 Insights After The 100th Issue
NewMind AI
 
Building a Production-Ready Barts Health Secure Data Environment Tooling, Acc...
Barts Health
 
Human-centred design in online workplace learning and relationship to engagem...
Tracy Tang
 
Meetup Kickoff & Welcome - Rohit Yadav, CSIUG Chairman
ShapeBlue
 
Impact of IEEE Computer Society in Advancing Emerging Technologies including ...
Hironori Washizaki
 
July Patch Tuesday
Ivanti
 
Blockchain Transactions Explained For Everyone
CIFDAQ
 
Ad

Intro to JavaScript

  • 1. Intro to Javascript September 2017 WIFI: In3Guest http://bit.ly/tf-intro-js 1
  • 2. Instructor Avi Zajac Thinkful Full Time Student Hacker Rubik’s Cuber Lockpicker TAs bit.ly/tf-intro-jsWi-Fi: In3Guest 2
  • 3. About you What's your name? What brought you here today? What is your programming experience? bit.ly/tf-intro-jsWi-Fi: In3Guest 3
  • 4. About Thinkful Thinkful helps people become developers or data scientists through 1-on-1 mentorship and project-based learning bit.ly/tf-intro-jsWi-Fi: In3Guest 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/tf-intro-jsWi-Fi: In3Guest 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/tf-intro-jsWi-Fi: In3Guest 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/tf-intro-jsWi-Fi: In3Guest 7
  • 8. Client/Servers Client (sends requests) Frontend Developer Manages what user sees Server (sends response) Backend Developer Manages what app does bit.ly/tf-intro-jsWi-Fi: In3Guest 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/tf-intro-js 9 Wi-Fi: In3Guest
  • 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/tf-intro-jsWi-Fi: In3Guest
  • 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/tf-intro-jsWi-Fi: In3Guest 11
  • 12. Javascript today is extremely popular Lots of job opportunities Large community of developers, libraries and frameworks Syntax is easier to understand for first-time developers bit.ly/tf-intro-jsWi-Fi: In3Guest 12
  • 13. Defining a variable with Javascript var numberOfSheep = 20 Initialize variable Name of variable Value of variable bit.ly/tf-intro-jsWi-Fi: In3Guest 13
  • 15. Declaring a function with Javascript function greet() { return "Hello world!"; } Initialize function Name of function What the function does bit.ly/tf-intro-jsWi-Fi: In3Guest 15
  • 17. If/Else Statements go to gas stationkeep driving if false if true need gas? family roadtrip bit.ly/tf-intro-jsWi-Fi: In3Guest 17
  • 18. If/Else Statements function familyRoadtrip() { if (needGas == true) { getGas(); } else { keepDriving(); } } bit.ly/tf-intro-jsWi-Fi: In3Guest 18
  • 19. Comparing Values == (equal to) 5 == 5 --> true 5 == 6 --> false != (not equal to) 5 != 5 --> false 5 != 6 --> true bit.ly/tf-intro-jsWi-Fi: In3Guest 19
  • 20. If/Else Statements and Comparing Values bit.ly/tf-intro-jsWi-Fi: In3Guest 20
  • 21. Parameters within functions function adder(a, b) { return a + b; } adder(1,2); Parameters in declaration Parameters used within the function bit.ly/tf-intro-jsWi-Fi: In3Guest 21
  • 22. Examples of parameters within functions bit.ly/tf-intro-jsWi-Fi: In3Guest 22
  • 23. Real developers use Google... a lot bit.ly/tf-intro-jsWi-Fi: In3Guest 23
  • 24. Repl.it setup & first steps! http://bit.ly/tf-intro-js-challenges bit.ly/tf-intro-jsWi-Fi: In3Guest 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 Learning Mentor Career MentorProgram Manager Local Community You 28
  • 29. Mentorship enables flexible learning Learn anywhere, anytime, & at your own pace You don't have to quitYou don't have to quit your job to startyour job to start career transitioncareer transition 29
  • 30. Thinkful Two-Week Trial Talk to one of us and email [email protected]@thinkful.com to learn more Two-week Free course trial Unlimited QA sessions Start with HTML, CSS and JavaScript 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