SlideShare a Scribd company logo
Build a Game with Javascript
July 2017
WIFI: Cross Camp.us Events
http://bit.ly/introjs-la
1
Instructor
Fernando Arocho
Self-taught developer
Lead Software Engineer at
Revuelo, Inc.
TAs
Wi-Fi: Cross Camp.us Events bit.ly/introjs-la
2
About you
What's your name?
What brought you here today?
What is your programming experience?
bit.ly/introjs-laWi-Fi: Cross Camp.us Events
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/introjs-laWi-Fi: Cross Camp.us Events
4
Suggestions for learning
Don't treat this as a drill, we're making something realwe're making something real
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/introjs-laWi-Fi: Cross Camp.us Events
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/introjs-laWi-Fi: Cross Camp.us Events
6
How the web works
Type a URL from a client (e.g. google.com)​
http://www.bit.ly/introjs-la
Browser sends an HTTP request asking for specific files
Browser receives those files and renders them as a website
Wi-Fi: Cross Camp.us Events
7
Client/Servers
Client (sends requests)
Frontend Developer
Manages what user sees
Server (sends response)
Backend Developer
Manages what app does
Wi-Fi: Cross Camp.us Events http://www.bit.ly/introjs-la
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
9
Application LogicApplication Logic
Initial requestInitial request
Following responseFollowing response
Wi-Fi: Cross Camp.us Events http://www.bit.ly/introjs-la
How this relates to today
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
10
Initial requestInitial request
Following responseFollowing response
We'll be writing Javascript, the code
that the browser uses to run the app
http://www.bit.ly/introjs-laWi-Fi: Cross Camp.us Events
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
Wi-Fi: Cross Camp.us Events http://www.bit.ly/introjs-la
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
http://www.bit.ly/introjs-laWi-Fi: Cross Camp.us Events
12
Defining a variable with Javascript
var numberOfSheep = 20
Initialize variable
Name of variable
Value of variable
Wi-Fi: Cross Camp.us Events http://www.bit.ly/introjs-la
13
Variable examples
Wi-Fi: Cross Camp.us Events http://www.bit.ly/introjs-la
14
Declaring a function with Javascript
function greet() {
return "Hello world!";
}
Initialize function Name of function
What the function does
http://www.bit.ly/introjs-laWi-Fi: Cross Camp.us Events
15
Function examples
http://www.bit.ly/introjs-laWi-Fi: Cross Camp.us Events
16
If/Else Statements
go to gas stationkeep driving
if false if true
need gas?
family roadtrip
Wi-Fi: Cross Camp.us Events http://www.bit.ly/introjs-la
17
If/Else Statements
function familyRoadtrip() {
if (needGas == true) {
getGas();
}
else {
keepDriving();
}
}
http://www.bit.ly/introjs-laWi-Fi: Cross Camp.us Events
18
Comparing Values
== (equal to)
5 == 5 --> true
5 == 6 --> false
!= (not equal to)
5 != 5 --> false
5 != 6 --> true
Wi-Fi: Cross Camp.us Events http://www.bit.ly/introjs-la
19
If/Else Statements and Comparing Values
http://www.bit.ly/introjs-laWi-Fi: Cross Camp.us Events
20
Parameters within functions
function adder(a, b) {
return a + b;
}
adder(1,2);
Parameters in declaration
Parameters used
within the function
Wi-Fi: Cross Camp.us Events http://www.bit.ly/introjs-la
21
Examples of parameters within functions
http://www.bit.ly/introjs-laWi-Fi: Cross Camp.us Events
22
Real developers use Google... a lot
Wi-Fi: Cross Camp.us Events http://www.bit.ly/introjs-la
23
Repl.it setup & first steps!
http://bit.ly/tf-intro-js-challenges
http://www.bit.ly/introjs-laWi-Fi: Cross Camp.us Events
24
Ways to keep learning
More Structure
Less Structure
More SupportLess Support
25
325+ mentors325+ mentors with an average of
10 years of experience10 years of experience in the
field
26
Support 'round the clock
Your Mentor
Q&A Sessions
Career Coach
In-person Workshops
Slack
Program Manager
YouYou
27
Our results
93%93%job-placement rate + job guarantee
Kaeside IwuagwuKaeside Iwuagwu
Link for the third party audit jobs report:
https://www.thinkful.com/bootcamp-jobs-https://www.thinkful.com/bootcamp-jobs-
statsstats
Frontend Developer
Sierra GreggSierra Gregg
Software Engineer
JP EarnestJP Earnest
Web Developer
28
Take a tour!
Talk to me (or email georgie@thinkful.com ) if you're interested
Get a tour of the program to see if
project-based, online learning is a
good fit for you.
Discuss the curriculum,
mentorship, and how to create
your own learning schedule.
29

More Related Content

PDF
Build a Game with JavaScript - Pasadena July
PDF
Intro to js august 31
PDF
first website la
PDF
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74
PDF
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-15
PDF
Intro To JavaScript
PDF
Build a game la september 7
PDF
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-57 (2)
Build a Game with JavaScript - Pasadena July
Intro to js august 31
first website la
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-15
Intro To JavaScript
Build a game la september 7
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-57 (2)

What's hot (20)

PDF
website la 11/28
PDF
Build Your Own Website with HTML/CSS 8.15
PDF
Build Your Own Website with HTML/CSS
PDF
Build a Game with JavaScript - Thinkful DC
PDF
Build a Game with JavaScript
PDF
Build a Game with Javascript
PDF
Labuildwebsiteseptember5
PDF
Build a Game with JavaScript
PDF
website phx
PDF
Build your own Website
PDF
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-30
PDF
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-57
PDF
Build a Game with JavaScript
PDF
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7(1)
PDF
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74
PDF
Build your own website - LA 2-13-18
PDF
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-28
PDF
Build a Game with JavaScript
PDF
Build A Game with JavaScript - LA - July 11
PDF
Build an App with JavaScript and jQuery (DTLA, 06/21)
website la 11/28
Build Your Own Website with HTML/CSS 8.15
Build Your Own Website with HTML/CSS
Build a Game with JavaScript - Thinkful DC
Build a Game with JavaScript
Build a Game with Javascript
Labuildwebsiteseptember5
Build a Game with JavaScript
website phx
Build your own Website
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-30
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-57
Build a Game with JavaScript
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7(1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74
Build your own website - LA 2-13-18
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-28
Build a Game with JavaScript
Build A Game with JavaScript - LA - July 11
Build an App with JavaScript and jQuery (DTLA, 06/21)
Ad

Similar to Intro to JavaScript - LA - July (20)

PDF
Intro to js september 19
PDF
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14
PDF
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55
PDF
Intro to JavaScript
PDF
Intro js-la-12-18
PDF
Intro js-la-jan-4
PDF
Intro js-nov-7
PDF
Introjscb112817
PDF
Itjsf129
PDF
tfIjspdx080717
PDF
Introjssd 11.8.17
PDF
Intro to Javascript
PDF
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52
PDF
Intro to JavaScript
PDF
Itjsf13
PDF
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74-451
PDF
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)
PDF
Itjs111
PDF
Ijsphx927
PDF
Intro To JavaScript
Intro to js september 19
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55
Intro to JavaScript
Intro js-la-12-18
Intro js-la-jan-4
Intro js-nov-7
Introjscb112817
Itjsf129
tfIjspdx080717
Introjssd 11.8.17
Intro to Javascript
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52
Intro to JavaScript
Itjsf13
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74-451
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)
Itjs111
Ijsphx927
Intro To JavaScript
Ad

More from Thinkful (20)

PDF
893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370
PDF
LA 1/31/18 Intro to JavaScript: Fundamentals
PDF
LA 1/31/18 Intro to JavaScript: Fundamentals
PDF
Twit botsd1.30.18
PDF
Build your-own-instagram-filters-with-javascript-202-335 (1)
PDF
Baggwjs124
PDF
Become a Data Scientist: A Thinkful Info Session
PDF
Vpet sd-1.25.18
PDF
LA 1/18/18 Become A Web Developer: A Thinkful Info Session
PDF
How to Choose a Programming Language
PDF
Batbwjs117
PDF
1/16/18 Intro to JS Workshop
PDF
LA 1/16/18 Intro to Javascript: Fundamentals
PDF
(LA 1/16/18) Intro to JavaScript: Fundamentals
PDF
Websitesd1.15.17.
PDF
Bavpwjs110
PDF
Byowwhc110
PDF
Getting started-jan-9-2018
PDF
Introjs1.9.18tf
PDF
Proglangauage1.10.18
893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370
LA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: Fundamentals
Twit botsd1.30.18
Build your-own-instagram-filters-with-javascript-202-335 (1)
Baggwjs124
Become a Data Scientist: A Thinkful Info Session
Vpet sd-1.25.18
LA 1/18/18 Become A Web Developer: A Thinkful Info Session
How to Choose a Programming Language
Batbwjs117
1/16/18 Intro to JS Workshop
LA 1/16/18 Intro to Javascript: Fundamentals
(LA 1/16/18) Intro to JavaScript: Fundamentals
Websitesd1.15.17.
Bavpwjs110
Byowwhc110
Getting started-jan-9-2018
Introjs1.9.18tf
Proglangauage1.10.18

Recently uploaded (20)

PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PDF
Empathic Computing: Creating Shared Understanding
PPTX
breach-and-attack-simulation-cybersecurity-india-chennai-defenderrabbit-2025....
PDF
Advanced IT Governance
PDF
Review of recent advances in non-invasive hemoglobin estimation
PDF
NewMind AI Weekly Chronicles - August'25 Week I
PDF
GDG Cloud Iasi [PUBLIC] Florian Blaga - Unveiling the Evolution of Cybersecur...
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
PDF
cuic standard and advanced reporting.pdf
PDF
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
PDF
Network Security Unit 5.pdf for BCA BBA.
PDF
solutions_manual_-_materials___processing_in_manufacturing__demargo_.pdf
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PDF
Spectral efficient network and resource selection model in 5G networks
PDF
Unlocking AI with Model Context Protocol (MCP)
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
Reach Out and Touch Someone: Haptics and Empathic Computing
Empathic Computing: Creating Shared Understanding
breach-and-attack-simulation-cybersecurity-india-chennai-defenderrabbit-2025....
Advanced IT Governance
Review of recent advances in non-invasive hemoglobin estimation
NewMind AI Weekly Chronicles - August'25 Week I
GDG Cloud Iasi [PUBLIC] Florian Blaga - Unveiling the Evolution of Cybersecur...
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
cuic standard and advanced reporting.pdf
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
Network Security Unit 5.pdf for BCA BBA.
solutions_manual_-_materials___processing_in_manufacturing__demargo_.pdf
Diabetes mellitus diagnosis method based random forest with bat algorithm
Spectral efficient network and resource selection model in 5G networks
Unlocking AI with Model Context Protocol (MCP)
Per capita expenditure prediction using model stacking based on satellite ima...

Intro to JavaScript - LA - July

  • 1. Build a Game with Javascript July 2017 WIFI: Cross Camp.us Events http://bit.ly/introjs-la 1
  • 2. Instructor Fernando Arocho Self-taught developer Lead Software Engineer at Revuelo, Inc. TAs Wi-Fi: Cross Camp.us Events bit.ly/introjs-la 2
  • 3. About you What's your name? What brought you here today? What is your programming experience? bit.ly/introjs-laWi-Fi: Cross Camp.us Events 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/introjs-laWi-Fi: Cross Camp.us Events 4
  • 5. Suggestions for learning Don't treat this as a drill, we're making something realwe're making something real 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/introjs-laWi-Fi: Cross Camp.us Events 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/introjs-laWi-Fi: Cross Camp.us Events 6
  • 7. How the web works Type a URL from a client (e.g. google.com)​ http://www.bit.ly/introjs-la Browser sends an HTTP request asking for specific files Browser receives those files and renders them as a website Wi-Fi: Cross Camp.us Events 7
  • 8. Client/Servers Client (sends requests) Frontend Developer Manages what user sees Server (sends response) Backend Developer Manages what app does Wi-Fi: Cross Camp.us Events http://www.bit.ly/introjs-la 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 9 Application LogicApplication Logic Initial requestInitial request Following responseFollowing response Wi-Fi: Cross Camp.us Events http://www.bit.ly/introjs-la
  • 10. How this relates to today 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 10 Initial requestInitial request Following responseFollowing response We'll be writing Javascript, the code that the browser uses to run the app http://www.bit.ly/introjs-laWi-Fi: Cross Camp.us Events
  • 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 Wi-Fi: Cross Camp.us Events http://www.bit.ly/introjs-la 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 http://www.bit.ly/introjs-laWi-Fi: Cross Camp.us Events 12
  • 13. Defining a variable with Javascript var numberOfSheep = 20 Initialize variable Name of variable Value of variable Wi-Fi: Cross Camp.us Events http://www.bit.ly/introjs-la 13
  • 14. Variable examples Wi-Fi: Cross Camp.us Events http://www.bit.ly/introjs-la 14
  • 15. Declaring a function with Javascript function greet() { return "Hello world!"; } Initialize function Name of function What the function does http://www.bit.ly/introjs-laWi-Fi: Cross Camp.us Events 15
  • 17. If/Else Statements go to gas stationkeep driving if false if true need gas? family roadtrip Wi-Fi: Cross Camp.us Events http://www.bit.ly/introjs-la 17
  • 18. If/Else Statements function familyRoadtrip() { if (needGas == true) { getGas(); } else { keepDriving(); } } http://www.bit.ly/introjs-laWi-Fi: Cross Camp.us Events 18
  • 19. Comparing Values == (equal to) 5 == 5 --> true 5 == 6 --> false != (not equal to) 5 != 5 --> false 5 != 6 --> true Wi-Fi: Cross Camp.us Events http://www.bit.ly/introjs-la 19
  • 20. If/Else Statements and Comparing Values http://www.bit.ly/introjs-laWi-Fi: Cross Camp.us Events 20
  • 21. Parameters within functions function adder(a, b) { return a + b; } adder(1,2); Parameters in declaration Parameters used within the function Wi-Fi: Cross Camp.us Events http://www.bit.ly/introjs-la 21
  • 22. Examples of parameters within functions http://www.bit.ly/introjs-laWi-Fi: Cross Camp.us Events 22
  • 23. Real developers use Google... a lot Wi-Fi: Cross Camp.us Events http://www.bit.ly/introjs-la 23
  • 24. Repl.it setup & first steps! http://bit.ly/tf-intro-js-challenges http://www.bit.ly/introjs-laWi-Fi: Cross Camp.us Events 24
  • 25. Ways to keep learning More Structure Less Structure More SupportLess Support 25
  • 26. 325+ mentors325+ mentors with an average of 10 years of experience10 years of experience in the field 26
  • 27. Support 'round the clock Your Mentor Q&A Sessions Career Coach In-person Workshops Slack Program Manager YouYou 27
  • 28. Our results 93%93%job-placement rate + job guarantee Kaeside IwuagwuKaeside Iwuagwu Link for the third party audit jobs report: https://www.thinkful.com/bootcamp-jobs-https://www.thinkful.com/bootcamp-jobs- statsstats Frontend Developer Sierra GreggSierra Gregg Software Engineer JP EarnestJP Earnest Web Developer 28
  • 29. Take a tour! Talk to me (or email [email protected] ) if you're interested Get a tour of the program to see if project-based, online learning is a good fit for you. Discuss the curriculum, mentorship, and how to create your own learning schedule. 29