SlideShare a Scribd company logo
1 of 30
Download to read offline
Intro to Javascript
December 2017
WIFI: CrossCamp.us Events
http://bit.ly/intro-js-la
1
Instructor
Andy Amaya
Thinkful student
Full-stack developer
TAs
bit.ly/intro-js-laWIFI: CrossCamp.us
Events
2
About you
What's your name?
What brought you here today?
What is your programming experience?
bit.ly/intro-js-laWIFI: CrossCamp.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.
bit.ly/intro-js-laWIFI: CrossCamp.us
Events
4
Suggestions for learning
Don't get discouraged, struggle leads to mastery
Don't be shy, take full advantage of our support
bit.ly/intro-js-laWIFI: CrossCamp.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/intro-js-laWIFI: CrossCamp.us
Events
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/intro-js-laWIFI: CrossCamp.us
Events
7
Client/Servers
Client (sends requests)
Frontend Developer
Manages what user sees
Server (sends response)
Backend Developer
Manages what app does
bit.ly/intro-js-laWIFI: CrossCamp.us
Events
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 Logic
Initial request
Following response
bit.ly/intro-js-laWIFI: CrossCamp.us
Events
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 Logic
Initial request
Following response
We'll be writing Javascript, the code
that the browser uses to run the app
bit.ly/intro-js-la
10
WIFI: CrossCamp.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
bit.ly/intro-js-laWIFI: CrossCamp.us
Events
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/intro-js-laWIFI: CrossCamp.us
Events
12
Defining a variable with Javascript
var numberOfSheep = 20
Initialize variable
Name of variable
Value of variable
bit.ly/intro-js-laWIFI: CrossCamp.us
Events
13
Variable examples
JSBin.com
bit.ly/intro-js-laWIFI: CrossCamp.us
Events
14
Repl.it setup & first steps!
http://bit.ly/tf-intro-js-challenges
bit.ly/intro-js-laWIFI: CrossCamp.us
Events
15
Declaring a function with Javascript
function greet() {
return "Hello world!";
}
Initialize function Name of function
What the function does
bit.ly/intro-js-laWIFI: CrossCamp.us
Events
16
Function examples
JSBin.com
bit.ly/intro-js-laWIFI: CrossCamp.us
Events
17
If/Else Statements
go to gas stationkeep driving
if false if true
need gas?
family roadtrip
bit.ly/intro-js-laWIFI: CrossCamp.us
Events
18
If/Else Statements
function familyRoadtrip() {
if (needGas == true) {
getGas();
}
else {
keepDriving();
}
}
bit.ly/intro-js-laWIFI: CrossCamp.us
Events
19
Comparing Values
== (equal to)
5 == 5 --> true
5 == 6 --> false
!= (not equal to)
5 != 5 --> false
5 != 6 --> true
bit.ly/intro-js-laWIFI: CrossCamp.us
Events
20
If/Else Statements and Comparing Values
JSBin.com
bit.ly/intro-js-laWIFI: CrossCamp.us
Events
21
Parameters within functions
function adder(a, b) {
return a + b;
}
adder(1,2);
Parameters in declaration
Parameters used
within the function
bit.ly/intro-js-laWIFI: CrossCamp.us
Events
22
Examples of parameters within functions
JSBin.com
bit.ly/intro-js-laWIFI: CrossCamp.us
Events
23
Real developers use Google... a lot
bit.ly/intro-js-labit.ly/intro-js-laWIFI: CrossCamp.us
Events
24
Ways to keep learning
25
For aspiring developers, bootcamps fill the gap
26
Thinkful graduates in LA...
80%as full-time developers/engineers
Ben Johnson
Link for the third party audit jobs report:
https://www.thinkful.com/bootcamp-jobs-stats
Software Engineer
Cody Berlin
Fullstack Developer
Mark Pinero
Frontend Developer
placed in tech careers
92%
27
Link for the third party audit jobs report:
https://www.thinkful.com/bootcamp-jobs-stats
...and around the country & world
28
Our students receive unprecedented support
Learning Mentor
Career MentorProgram Manager
Local Community
You
29
Thinkful Two-Week Trial
Talk to one of us and email benjy@thinkful.com to learn more
Two-week course with 6 mentor sessions
for $50 ($750 value)
Start with HTML, CSS and JavaScript
Option to continue with full bootcamp
Financing & scholarships available
Offer valid for one week after event
Benjy Schechner
Education Advisor
30

More Related Content

What's hot

Baawjsajq109
Baawjsajq109Baawjsajq109
Baawjsajq109Thinkful
 
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...Prasid Pathak
 
How to be Famous - Student Recruitment through live internet broadcast
How to be Famous - Student Recruitment through live internet broadcastHow to be Famous - Student Recruitment through live internet broadcast
How to be Famous - Student Recruitment through live internet broadcasttomcochrane
 
Hacking the Mid-End (Great Lakes Ruby Bash Edition)
Hacking the Mid-End (Great Lakes Ruby Bash Edition)Hacking the Mid-End (Great Lakes Ruby Bash Edition)
Hacking the Mid-End (Great Lakes Ruby Bash Edition)Michael Bleigh
 
Building a slackbot
Building a slackbotBuilding a slackbot
Building a slackbotDan Moore
 
Build an App with JavaScript and jQuery - LA - July 18 Pasadena
Build an App with JavaScript and jQuery - LA - July 18 PasadenaBuild an App with JavaScript and jQuery - LA - July 18 Pasadena
Build an App with JavaScript and jQuery - LA - July 18 PasadenaThinkful
 
2010 - Basta: ASP.NET Controls für Web Forms und MVC
2010 - Basta: ASP.NET Controls für Web Forms und MVC2010 - Basta: ASP.NET Controls für Web Forms und MVC
2010 - Basta: ASP.NET Controls für Web Forms und MVCDaniel Fisher
 
Build a Game with JavaScript
Build a Game with JavaScriptBuild a Game with JavaScript
Build a Game with JavaScriptThinkful
 
NodeConfLondon - Making ES6 happen with ChakraCore and Node
NodeConfLondon - Making ES6 happen with ChakraCore and NodeNodeConfLondon - Making ES6 happen with ChakraCore and Node
NodeConfLondon - Making ES6 happen with ChakraCore and NodeChristian Heilmann
 
Web development
Web developmentWeb development
Web developmentAKARWA
 
tfIjspdx080717
tfIjspdx080717tfIjspdx080717
tfIjspdx080717Thinkful
 
Jsjqwebapp.12.14.17
Jsjqwebapp.12.14.17Jsjqwebapp.12.14.17
Jsjqwebapp.12.14.17Thinkful
 
Progressing JavaScript and Apps the Web way…
 Progressing JavaScript and Apps the Web way…  Progressing JavaScript and Apps the Web way…
Progressing JavaScript and Apps the Web way… Christian Heilmann
 
JavaScript is a buffet - Scriptconf 2017 keynote
JavaScript is a buffet - Scriptconf 2017 keynoteJavaScript is a buffet - Scriptconf 2017 keynote
JavaScript is a buffet - Scriptconf 2017 keynoteChristian Heilmann
 
Build an App with JavaScript and jQuery - LA - July 27
Build an App with JavaScript and jQuery - LA - July 27Build an App with JavaScript and jQuery - LA - July 27
Build an App with JavaScript and jQuery - LA - July 27Thinkful
 
My first 3 months working with word press
My first 3 months working with word pressMy first 3 months working with word press
My first 3 months working with word pressNoe Lopez
 
Distributed: Reinventing the Workplace
Distributed: Reinventing the WorkplaceDistributed: Reinventing the Workplace
Distributed: Reinventing the WorkplaceYoav Farhi
 
WordCamp St Louis 2018 Contributing Without Coding
WordCamp St Louis 2018 Contributing Without CodingWordCamp St Louis 2018 Contributing Without Coding
WordCamp St Louis 2018 Contributing Without CodingMichele Butcher-Jones
 
Building Responsible Wordpress Sites
Building Responsible Wordpress SitesBuilding Responsible Wordpress Sites
Building Responsible Wordpress SitesBrian Goldstein
 

What's hot (20)

Baawjsajq109
Baawjsajq109Baawjsajq109
Baawjsajq109
 
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
 
How to be Famous - Student Recruitment through live internet broadcast
How to be Famous - Student Recruitment through live internet broadcastHow to be Famous - Student Recruitment through live internet broadcast
How to be Famous - Student Recruitment through live internet broadcast
 
Hacking the Mid-End (Great Lakes Ruby Bash Edition)
Hacking the Mid-End (Great Lakes Ruby Bash Edition)Hacking the Mid-End (Great Lakes Ruby Bash Edition)
Hacking the Mid-End (Great Lakes Ruby Bash Edition)
 
Building a slackbot
Building a slackbotBuilding a slackbot
Building a slackbot
 
Build an App with JavaScript and jQuery - LA - July 18 Pasadena
Build an App with JavaScript and jQuery - LA - July 18 PasadenaBuild an App with JavaScript and jQuery - LA - July 18 Pasadena
Build an App with JavaScript and jQuery - LA - July 18 Pasadena
 
2010 - Basta: ASP.NET Controls für Web Forms und MVC
2010 - Basta: ASP.NET Controls für Web Forms und MVC2010 - Basta: ASP.NET Controls für Web Forms und MVC
2010 - Basta: ASP.NET Controls für Web Forms und MVC
 
Build a Game with JavaScript
Build a Game with JavaScriptBuild a Game with JavaScript
Build a Game with JavaScript
 
NodeConfLondon - Making ES6 happen with ChakraCore and Node
NodeConfLondon - Making ES6 happen with ChakraCore and NodeNodeConfLondon - Making ES6 happen with ChakraCore and Node
NodeConfLondon - Making ES6 happen with ChakraCore and Node
 
Web development
Web developmentWeb development
Web development
 
tfIjspdx080717
tfIjspdx080717tfIjspdx080717
tfIjspdx080717
 
Jsjqwebapp.12.14.17
Jsjqwebapp.12.14.17Jsjqwebapp.12.14.17
Jsjqwebapp.12.14.17
 
Progressing JavaScript and Apps the Web way…
 Progressing JavaScript and Apps the Web way…  Progressing JavaScript and Apps the Web way…
Progressing JavaScript and Apps the Web way…
 
JavaScript is a buffet - Scriptconf 2017 keynote
JavaScript is a buffet - Scriptconf 2017 keynoteJavaScript is a buffet - Scriptconf 2017 keynote
JavaScript is a buffet - Scriptconf 2017 keynote
 
Build an App with JavaScript and jQuery - LA - July 27
Build an App with JavaScript and jQuery - LA - July 27Build an App with JavaScript and jQuery - LA - July 27
Build an App with JavaScript and jQuery - LA - July 27
 
My first 3 months working with word press
My first 3 months working with word pressMy first 3 months working with word press
My first 3 months working with word press
 
Distributed: Reinventing the Workplace
Distributed: Reinventing the WorkplaceDistributed: Reinventing the Workplace
Distributed: Reinventing the Workplace
 
WordCamp St Louis 2018 Contributing Without Coding
WordCamp St Louis 2018 Contributing Without CodingWordCamp St Louis 2018 Contributing Without Coding
WordCamp St Louis 2018 Contributing Without Coding
 
Hinting at a better web
Hinting at a better webHinting at a better web
Hinting at a better web
 
Building Responsible Wordpress Sites
Building Responsible Wordpress SitesBuilding Responsible Wordpress Sites
Building Responsible Wordpress Sites
 

Similar to Intro js-la-12-18

Intro to js august 31
Intro to js august 31Intro to js august 31
Intro to js august 31Thinkful
 
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
 
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-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 Website with HTML/CSS - July 17 - LA
Build Your Own Website with HTML/CSS - July 17 - LABuild Your Own Website with HTML/CSS - July 17 - LA
Build Your Own Website with HTML/CSS - July 17 - LAThinkful
 
Build an App with JavaScript and jQuery (DTLA, 06/21)
Build an App with JavaScript and jQuery (DTLA, 06/21)Build an App with JavaScript and jQuery (DTLA, 06/21)
Build an App with JavaScript and jQuery (DTLA, 06/21)Thinkful
 
Build Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSSBuild Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSSThinkful
 
Build Your Own Website with HTML/CSS 8.15
Build Your Own Website with HTML/CSS 8.15Build Your Own Website with HTML/CSS 8.15
Build Your Own Website with HTML/CSS 8.15Thinkful
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)Jordan Zurowski
 
webapp 8/29
webapp 8/29webapp 8/29
webapp 8/29Thinkful
 
Introjs1.9.18tf
Introjs1.9.18tfIntrojs1.9.18tf
Introjs1.9.18tfThinkful
 
Build a webapp la september 6
Build a webapp la september 6Build a webapp la september 6
Build a webapp la september 6Thinkful
 
Build Your Own Website with HTML/CSS 8.15
Build Your Own Website with HTML/CSS 8.15Build Your Own Website with HTML/CSS 8.15
Build Your Own Website with HTML/CSS 8.15Thinkful
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74-451
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74-451Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74-451
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74-451Justin Ezor
 

Similar to Intro js-la-12-18 (20)

Intro to js august 31
Intro to js august 31Intro to js august 31
Intro to js august 31
 
Intro to js september 19
Intro to js september 19Intro to js september 19
Intro to js september 19
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
 
IJS821
IJS821IJS821
IJS821
 
Intro to JavaScript - LA - July
Intro to JavaScript - LA - JulyIntro to JavaScript - LA - July
Intro to JavaScript - LA - July
 
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-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
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
 
Build Your Own Website with HTML/CSS - July 17 - LA
Build Your Own Website with HTML/CSS - July 17 - LABuild Your Own Website with HTML/CSS - July 17 - LA
Build Your Own Website with HTML/CSS - July 17 - LA
 
Build an App with JavaScript and jQuery (DTLA, 06/21)
Build an App with JavaScript and jQuery (DTLA, 06/21)Build an App with JavaScript and jQuery (DTLA, 06/21)
Build an App with JavaScript and jQuery (DTLA, 06/21)
 
Introjs2.13.18sd
Introjs2.13.18sdIntrojs2.13.18sd
Introjs2.13.18sd
 
Build Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSSBuild Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSS
 
Build Your Own Website with HTML/CSS 8.15
Build Your Own Website with HTML/CSS 8.15Build Your Own Website with HTML/CSS 8.15
Build Your Own Website with HTML/CSS 8.15
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)
 
Intro js3.22.18
Intro js3.22.18Intro js3.22.18
Intro js3.22.18
 
webapp 8/29
webapp 8/29webapp 8/29
webapp 8/29
 
Introjs1.9.18tf
Introjs1.9.18tfIntrojs1.9.18tf
Introjs1.9.18tf
 
Build a webapp la september 6
Build a webapp la september 6Build a webapp la september 6
Build a webapp la september 6
 
Build Your Own Website with HTML/CSS 8.15
Build Your Own Website with HTML/CSS 8.15Build Your Own Website with HTML/CSS 8.15
Build Your Own Website with HTML/CSS 8.15
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74-451
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74-451Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74-451
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74-451
 

More from Thinkful

893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370
893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370
893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370Thinkful
 
LA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: FundamentalsLA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: FundamentalsThinkful
 
LA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: FundamentalsLA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: FundamentalsThinkful
 
Twit botsd1.30.18
Twit botsd1.30.18Twit botsd1.30.18
Twit botsd1.30.18Thinkful
 
Build your-own-instagram-filters-with-javascript-202-335 (1)
Build your-own-instagram-filters-with-javascript-202-335 (1)Build your-own-instagram-filters-with-javascript-202-335 (1)
Build your-own-instagram-filters-with-javascript-202-335 (1)Thinkful
 
Baggwjs124
Baggwjs124Baggwjs124
Baggwjs124Thinkful
 
Become a Data Scientist: A Thinkful Info Session
Become a Data Scientist: A Thinkful Info SessionBecome a Data Scientist: A Thinkful Info Session
Become a Data Scientist: A Thinkful Info SessionThinkful
 
Vpet sd-1.25.18
Vpet sd-1.25.18Vpet sd-1.25.18
Vpet sd-1.25.18Thinkful
 
LA 1/18/18 Become A Web Developer: A Thinkful Info Session
LA 1/18/18 Become A Web Developer: A Thinkful Info SessionLA 1/18/18 Become A Web Developer: A Thinkful Info Session
LA 1/18/18 Become A Web Developer: A Thinkful Info SessionThinkful
 
How to Choose a Programming Language
How to Choose a Programming LanguageHow to Choose a Programming Language
How to Choose a Programming LanguageThinkful
 
Batbwjs117
Batbwjs117Batbwjs117
Batbwjs117Thinkful
 
1/16/18 Intro to JS Workshop
1/16/18 Intro to JS Workshop1/16/18 Intro to JS Workshop
1/16/18 Intro to JS WorkshopThinkful
 
LA 1/16/18 Intro to Javascript: Fundamentals
LA 1/16/18 Intro to Javascript: FundamentalsLA 1/16/18 Intro to Javascript: Fundamentals
LA 1/16/18 Intro to Javascript: FundamentalsThinkful
 
(LA 1/16/18) Intro to JavaScript: Fundamentals
(LA 1/16/18) Intro to JavaScript: Fundamentals(LA 1/16/18) Intro to JavaScript: Fundamentals
(LA 1/16/18) Intro to JavaScript: FundamentalsThinkful
 
Websitesd1.15.17.
Websitesd1.15.17.Websitesd1.15.17.
Websitesd1.15.17.Thinkful
 
Bavpwjs110
Bavpwjs110Bavpwjs110
Bavpwjs110Thinkful
 
Byowwhc110
Byowwhc110Byowwhc110
Byowwhc110Thinkful
 
Getting started-jan-9-2018
Getting started-jan-9-2018Getting started-jan-9-2018
Getting started-jan-9-2018Thinkful
 
Proglangauage1.10.18
Proglangauage1.10.18Proglangauage1.10.18
Proglangauage1.10.18Thinkful
 

More from Thinkful (20)

893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370
893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370
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: FundamentalsLA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: Fundamentals
 
LA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: FundamentalsLA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: Fundamentals
 
Itjsf129
Itjsf129Itjsf129
Itjsf129
 
Twit botsd1.30.18
Twit botsd1.30.18Twit botsd1.30.18
Twit botsd1.30.18
 
Build your-own-instagram-filters-with-javascript-202-335 (1)
Build your-own-instagram-filters-with-javascript-202-335 (1)Build your-own-instagram-filters-with-javascript-202-335 (1)
Build your-own-instagram-filters-with-javascript-202-335 (1)
 
Baggwjs124
Baggwjs124Baggwjs124
Baggwjs124
 
Become a Data Scientist: A Thinkful Info Session
Become a Data Scientist: A Thinkful Info SessionBecome a Data Scientist: A Thinkful Info Session
Become a Data Scientist: A Thinkful Info Session
 
Vpet sd-1.25.18
Vpet sd-1.25.18Vpet sd-1.25.18
Vpet sd-1.25.18
 
LA 1/18/18 Become A Web Developer: A Thinkful Info Session
LA 1/18/18 Become A Web Developer: A Thinkful Info SessionLA 1/18/18 Become A Web Developer: A Thinkful Info Session
LA 1/18/18 Become A Web Developer: A Thinkful Info Session
 
How to Choose a Programming Language
How to Choose a Programming LanguageHow to Choose a Programming Language
How to Choose a Programming Language
 
Batbwjs117
Batbwjs117Batbwjs117
Batbwjs117
 
1/16/18 Intro to JS Workshop
1/16/18 Intro to JS Workshop1/16/18 Intro to JS Workshop
1/16/18 Intro to JS Workshop
 
LA 1/16/18 Intro to Javascript: Fundamentals
LA 1/16/18 Intro to Javascript: FundamentalsLA 1/16/18 Intro to Javascript: Fundamentals
LA 1/16/18 Intro to Javascript: Fundamentals
 
(LA 1/16/18) Intro to JavaScript: Fundamentals
(LA 1/16/18) Intro to JavaScript: Fundamentals(LA 1/16/18) Intro to JavaScript: Fundamentals
(LA 1/16/18) Intro to JavaScript: Fundamentals
 
Websitesd1.15.17.
Websitesd1.15.17.Websitesd1.15.17.
Websitesd1.15.17.
 
Bavpwjs110
Bavpwjs110Bavpwjs110
Bavpwjs110
 
Byowwhc110
Byowwhc110Byowwhc110
Byowwhc110
 
Getting started-jan-9-2018
Getting started-jan-9-2018Getting started-jan-9-2018
Getting started-jan-9-2018
 
Proglangauage1.10.18
Proglangauage1.10.18Proglangauage1.10.18
Proglangauage1.10.18
 

Recently uploaded

EPANDING THE CONTENT OF AN OUTLINE using notes.pptx
EPANDING THE CONTENT OF AN OUTLINE using notes.pptxEPANDING THE CONTENT OF AN OUTLINE using notes.pptx
EPANDING THE CONTENT OF AN OUTLINE using notes.pptxRaymartEstabillo3
 
Solving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxSolving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxOH TEIK BIN
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptxVS Mahajan Coaching Centre
 
DATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersDATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersSabitha Banu
 
Framing an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdf
Framing an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdfFraming an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdf
Framing an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdfUjwalaBharambe
 
Biting mechanism of poisonous snakes.pdf
Biting mechanism of poisonous snakes.pdfBiting mechanism of poisonous snakes.pdf
Biting mechanism of poisonous snakes.pdfadityarao40181
 
Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatEarth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatYousafMalik24
 
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdfEnzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdfSumit Tiwari
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxGaneshChakor2
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdfssuser54595a
 
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptxECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptxiammrhaywood
 
History Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptxHistory Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptxsocialsciencegdgrohi
 
भारत-रोम व्यापार.pptx, Indo-Roman Trade,
भारत-रोम व्यापार.pptx, Indo-Roman Trade,भारत-रोम व्यापार.pptx, Indo-Roman Trade,
भारत-रोम व्यापार.pptx, Indo-Roman Trade,Virag Sontakke
 
Hierarchy of management that covers different levels of management
Hierarchy of management that covers different levels of managementHierarchy of management that covers different levels of management
Hierarchy of management that covers different levels of managementmkooblal
 
How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17Celine George
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxNirmalaLoungPoorunde1
 
Historical philosophical, theoretical, and legal foundations of special and i...
Historical philosophical, theoretical, and legal foundations of special and i...Historical philosophical, theoretical, and legal foundations of special and i...
Historical philosophical, theoretical, and legal foundations of special and i...jaredbarbolino94
 

Recently uploaded (20)

EPANDING THE CONTENT OF AN OUTLINE using notes.pptx
EPANDING THE CONTENT OF AN OUTLINE using notes.pptxEPANDING THE CONTENT OF AN OUTLINE using notes.pptx
EPANDING THE CONTENT OF AN OUTLINE using notes.pptx
 
Solving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxSolving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptx
 
ESSENTIAL of (CS/IT/IS) class 06 (database)
ESSENTIAL of (CS/IT/IS) class 06 (database)ESSENTIAL of (CS/IT/IS) class 06 (database)
ESSENTIAL of (CS/IT/IS) class 06 (database)
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
 
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
 
DATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersDATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginners
 
Framing an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdf
Framing an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdfFraming an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdf
Framing an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdf
 
Biting mechanism of poisonous snakes.pdf
Biting mechanism of poisonous snakes.pdfBiting mechanism of poisonous snakes.pdf
Biting mechanism of poisonous snakes.pdf
 
Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatEarth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice great
 
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdfEnzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptx
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
 
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptxECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
 
History Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptxHistory Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptx
 
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Bikash Puri  Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Bikash Puri  Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
 
भारत-रोम व्यापार.pptx, Indo-Roman Trade,
भारत-रोम व्यापार.pptx, Indo-Roman Trade,भारत-रोम व्यापार.pptx, Indo-Roman Trade,
भारत-रोम व्यापार.pptx, Indo-Roman Trade,
 
Hierarchy of management that covers different levels of management
Hierarchy of management that covers different levels of managementHierarchy of management that covers different levels of management
Hierarchy of management that covers different levels of management
 
How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptx
 
Historical philosophical, theoretical, and legal foundations of special and i...
Historical philosophical, theoretical, and legal foundations of special and i...Historical philosophical, theoretical, and legal foundations of special and i...
Historical philosophical, theoretical, and legal foundations of special and i...
 

Intro js-la-12-18

  • 1. Intro to Javascript December 2017 WIFI: CrossCamp.us Events http://bit.ly/intro-js-la 1
  • 2. Instructor Andy Amaya Thinkful student Full-stack developer TAs bit.ly/intro-js-laWIFI: CrossCamp.us Events 2
  • 3. About you What's your name? What brought you here today? What is your programming experience? bit.ly/intro-js-laWIFI: CrossCamp.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. bit.ly/intro-js-laWIFI: CrossCamp.us Events 4
  • 5. Suggestions for learning Don't get discouraged, struggle leads to mastery Don't be shy, take full advantage of our support bit.ly/intro-js-laWIFI: CrossCamp.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/intro-js-laWIFI: CrossCamp.us Events 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/intro-js-laWIFI: CrossCamp.us Events 7
  • 8. Client/Servers Client (sends requests) Frontend Developer Manages what user sees Server (sends response) Backend Developer Manages what app does bit.ly/intro-js-laWIFI: CrossCamp.us Events 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 Logic Initial request Following response bit.ly/intro-js-laWIFI: CrossCamp.us Events 9
  • 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 Logic Initial request Following response We'll be writing Javascript, the code that the browser uses to run the app bit.ly/intro-js-la 10 WIFI: CrossCamp.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 bit.ly/intro-js-laWIFI: CrossCamp.us Events 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/intro-js-laWIFI: CrossCamp.us Events 12
  • 13. Defining a variable with Javascript var numberOfSheep = 20 Initialize variable Name of variable Value of variable bit.ly/intro-js-laWIFI: CrossCamp.us Events 13
  • 15. Repl.it setup & first steps! http://bit.ly/tf-intro-js-challenges bit.ly/intro-js-laWIFI: CrossCamp.us Events 15
  • 16. Declaring a function with Javascript function greet() { return "Hello world!"; } Initialize function Name of function What the function does bit.ly/intro-js-laWIFI: CrossCamp.us Events 16
  • 18. If/Else Statements go to gas stationkeep driving if false if true need gas? family roadtrip bit.ly/intro-js-laWIFI: CrossCamp.us Events 18
  • 19. If/Else Statements function familyRoadtrip() { if (needGas == true) { getGas(); } else { keepDriving(); } } bit.ly/intro-js-laWIFI: CrossCamp.us Events 19
  • 20. Comparing Values == (equal to) 5 == 5 --> true 5 == 6 --> false != (not equal to) 5 != 5 --> false 5 != 6 --> true bit.ly/intro-js-laWIFI: CrossCamp.us Events 20
  • 21. If/Else Statements and Comparing Values JSBin.com bit.ly/intro-js-laWIFI: CrossCamp.us Events 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/intro-js-laWIFI: CrossCamp.us Events 22
  • 23. Examples of parameters within functions JSBin.com bit.ly/intro-js-laWIFI: CrossCamp.us Events 23
  • 24. Real developers use Google... a lot bit.ly/intro-js-labit.ly/intro-js-laWIFI: CrossCamp.us Events 24
  • 25. Ways to keep learning 25
  • 26. For aspiring developers, bootcamps fill the gap 26
  • 27. Thinkful graduates in LA... 80%as full-time developers/engineers Ben Johnson Link for the third party audit jobs report: https://www.thinkful.com/bootcamp-jobs-stats Software Engineer Cody Berlin Fullstack Developer Mark Pinero Frontend Developer placed in tech careers 92% 27
  • 28. Link for the third party audit jobs report: https://www.thinkful.com/bootcamp-jobs-stats ...and around the country & world 28
  • 29. Our students receive unprecedented support Learning Mentor Career MentorProgram Manager Local Community You 29
  • 30. Thinkful Two-Week Trial Talk to one of us and email benjy@thinkful.com to learn more Two-week course with 6 mentor sessions for $50 ($750 value) Start with HTML, CSS and JavaScript Option to continue with full bootcamp Financing & scholarships available Offer valid for one week after event Benjy Schechner Education Advisor 30