SlideShare a Scribd company logo
1 of 30
Download to read offline
Intro to Javascript
August 2017
WIFI: IgniteHQ
Password: ignitehq
http://bit.ly/tf-intro-js
1
Instructor
Connor Ericson
Thinkful Graduate
Freelance Developer
TAs
bit.ly/tf-intro-js
Wi-Fi: IgniteHQ
Pass: ignitehq 2
About you
What's your name?
What brought you here today?
What is your programming experience?
bit.ly/tf-intro-js
Wi-Fi: IgniteHQ
Pass: ignitehq 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/tf-intro-js
Wi-Fi: IgniteHQ
Pass: ignitehq 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-js
Wi-Fi: IgniteHQ
Pass: ignitehq 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-js
Wi-Fi: IgniteHQ
Pass: ignitehq 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-js
Wi-Fi: IgniteHQ
Pass: ignitehq 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-js
Wi-Fi: IgniteHQ
Pass: ignitehq 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: IgniteHQ
Pass: ignitehq
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-js
Wi-Fi: IgniteHQ
Pass: ignitehq
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-js
Wi-Fi: IgniteHQ
Pass: ignitehq 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/tf-intro-js
Wi-Fi: IgniteHQ
Pass: ignitehq 12
Defining a variable with Javascript
var numberOfSheep = 20
Initialize variable
Name of variable
Value of variable
bit.ly/tf-intro-js
Wi-Fi: IgniteHQ
Pass: ignitehq 13
Variable examples
bit.ly/tf-intro-js
Wi-Fi: IgniteHQ
Pass: ignitehq 14
Declaring a function with Javascript
function greet() {
return "Hello world!";
}
Initialize function Name of function
What the function does
bit.ly/tf-intro-js
Wi-Fi: IgniteHQ
Pass: ignitehq 15
Function examples
bit.ly/tf-intro-js
Wi-Fi: IgniteHQ
Pass: ignitehq 16
If/Else Statements
go to gas stationkeep driving
if false if true
need gas?
family roadtrip
bit.ly/tf-intro-js
Wi-Fi: IgniteHQ
Pass: ignitehq 17
If/Else Statements
function familyRoadtrip() {
if (needGas == true) {
getGas();
}
else {
keepDriving();
}
}
bit.ly/tf-intro-js
Wi-Fi: IgniteHQ
Pass: ignitehq 18
Comparing Values
== (equal to)
5 == 5 --> true
5 == 6 --> false
!= (not equal to)
5 != 5 --> false
5 != 6 --> true
bit.ly/tf-intro-js
Wi-Fi: IgniteHQ
Pass: ignitehq 19
If/Else Statements and Comparing Values
bit.ly/tf-intro-js
Wi-Fi: IgniteHQ
Pass: ignitehq 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-js
Wi-Fi: IgniteHQ
Pass: ignitehq 21
Examples of parameters within functions
bit.ly/tf-intro-js
Wi-Fi: IgniteHQ
Pass: ignitehq 22
Real developers use Google... a lot
bit.ly/tf-intro-js
Wi-Fi: IgniteHQ
Pass: ignitehq 23
Repl.it setup & first steps!
http://bit.ly/tf-intro-js-challenges
bit.ly/tf-intro-js
Wi-Fi: IgniteHQ
Pass: ignitehq 24
Ways to keep learning
25
For aspiring developers, bootcamps fill the gap
26
87%87%
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
Your Mentor
Q&A Sessions
Career CoachSlack
Program Manager
YouYou
Local Community
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 jasjit@thinkful.comjasjit@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 eventOffer valid for one week after event
Jasjit SinghJasjit Singh
GM, Atlanta
30

More Related Content

What's hot

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
 
Introduction to JavaScript, Washington, DC February 2018
Introduction to JavaScript, Washington, DC February 2018Introduction to JavaScript, Washington, DC February 2018
Introduction to JavaScript, Washington, DC February 2018Thinkful
 
Build a Virtual Pet with Javascript
Build a Virtual Pet with JavascriptBuild a Virtual Pet with Javascript
Build a Virtual Pet with JavascriptIvy Rueb
 
website la 11/28
website la 11/28website la 11/28
website la 11/28Thinkful
 
Build an App with JavaScript & jQuery
Build an App with JavaScript & jQuery Build an App with JavaScript & jQuery
Build an App with JavaScript & jQuery Aaron Lamphere
 
first website la
first website lafirst website la
first website laThinkful
 
The Grails introduction workshop
The Grails introduction workshopThe Grails introduction workshop
The Grails introduction workshopGR8Conf
 
Jan reher may 2013
Jan reher may 2013Jan reher may 2013
Jan reher may 2013GR8Conf
 
Cf objective2014 software-craftsmanship
Cf objective2014 software-craftsmanshipCf objective2014 software-craftsmanship
Cf objective2014 software-craftsmanshipColdFusionConference
 
Git hub videowhisper-php-webcam-video-conference_ video conference_ web bas...
Git hub   videowhisper-php-webcam-video-conference_ video conference_ web bas...Git hub   videowhisper-php-webcam-video-conference_ video conference_ web bas...
Git hub videowhisper-php-webcam-video-conference_ video conference_ web bas...bos trevel
 
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
 
Buildappjsjq10.30 SD
Buildappjsjq10.30 SDBuildappjsjq10.30 SD
Buildappjsjq10.30 SDThinkful
 
Buildappjsjq9:12 sd
Buildappjsjq9:12 sdBuildappjsjq9:12 sd
Buildappjsjq9:12 sdThinkful
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66-123-168
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66-123-168Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66-123-168
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66-123-168Thinkful
 

What's hot (20)

IJS821
IJS821IJS821
IJS821
 
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
 
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
 
Introduction to JavaScript, Washington, DC February 2018
Introduction to JavaScript, Washington, DC February 2018Introduction to JavaScript, Washington, DC February 2018
Introduction to JavaScript, Washington, DC February 2018
 
Build a Virtual Pet with Javascript
Build a Virtual Pet with JavascriptBuild a Virtual Pet with Javascript
Build a Virtual Pet with Javascript
 
website la 11/28
website la 11/28website la 11/28
website la 11/28
 
Build an App with JavaScript & jQuery
Build an App with JavaScript & jQuery Build an App with JavaScript & jQuery
Build an App with JavaScript & jQuery
 
first website la
first website lafirst website la
first website la
 
The Grails introduction workshop
The Grails introduction workshopThe Grails introduction workshop
The Grails introduction workshop
 
Jan reher may 2013
Jan reher may 2013Jan reher may 2013
Jan reher may 2013
 
Cf objective2014 software-craftsmanship
Cf objective2014 software-craftsmanshipCf objective2014 software-craftsmanship
Cf objective2014 software-craftsmanship
 
Git hub videowhisper-php-webcam-video-conference_ video conference_ web bas...
Git hub   videowhisper-php-webcam-video-conference_ video conference_ web bas...Git hub   videowhisper-php-webcam-video-conference_ video conference_ web bas...
Git hub videowhisper-php-webcam-video-conference_ video conference_ web bas...
 
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
 
Buildappjsjq10.30 SD
Buildappjsjq10.30 SDBuildappjsjq10.30 SD
Buildappjsjq10.30 SD
 
Buildappjsjq9:12 sd
Buildappjsjq9:12 sdBuildappjsjq9:12 sd
Buildappjsjq9:12 sd
 
DC jQuery App
DC jQuery AppDC jQuery App
DC jQuery App
 
Deck 6-130-441
Deck 6-130-441Deck 6-130-441
Deck 6-130-441
 
Deck 4-67
Deck 4-67Deck 4-67
Deck 4-67
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66-123-168
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66-123-168Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66-123-168
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66-123-168
 

Similar to Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74

Intro to js september 19
Intro to js september 19Intro to js september 19
Intro to js september 19Thinkful
 
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
 
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 to JavaScript - Thinkful DC
Intro to JavaScript - Thinkful DCIntro to JavaScript - Thinkful DC
Intro to JavaScript - Thinkful DCTJ Stalcup
 
Thinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScriptThinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScriptTJ Stalcup
 
Thinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScriptThinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScriptTJ Stalcup
 
Intro to Python
Intro to PythonIntro to Python
Intro to PythonTJ Stalcup
 
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
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash CourseTJ Stalcup
 
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
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash CourseTJ Stalcup
 
How to Choose a Programming Language
How to Choose a Programming LanguageHow to Choose a Programming Language
How to Choose a Programming LanguageThinkful
 
Intro to Python
Intro to PythonIntro to Python
Intro to PythonTJ Stalcup
 
Deck 6-80-140-196-213-271-321-364-413
Deck 6-80-140-196-213-271-321-364-413Deck 6-80-140-196-213-271-321-364-413
Deck 6-80-140-196-213-271-321-364-413Justin Ezor
 
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 build a website (html, css)
Thinkful build a website (html, css)Thinkful build a website (html, css)
Thinkful build a website (html, css)Thinkful
 

Similar to Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74 (20)

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
 
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
 
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 to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
 
Intro to JavaScript - Thinkful DC
Intro to JavaScript - Thinkful DCIntro to JavaScript - Thinkful DC
Intro to JavaScript - Thinkful DC
 
Thinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScriptThinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScript
 
Thinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScriptThinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScript
 
Intro to Python
Intro to PythonIntro to Python
Intro to Python
 
BYOWHC823
BYOWHC823BYOWHC823
BYOWHC823
 
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
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
 
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
 
How to Choose a Programming Language
How to Choose a Programming LanguageHow to Choose a Programming Language
How to Choose a Programming Language
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
 
Intro to Python
Intro to PythonIntro to Python
Intro to Python
 
Deck 6-80-140-196-213-271-321-364-413
Deck 6-80-140-196-213-271-321-364-413Deck 6-80-140-196-213-271-321-364-413
Deck 6-80-140-196-213-271-321-364-413
 
Thinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSSThinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSS
 
Thinkful build a website (html, css)
Thinkful build a website (html, css)Thinkful build a website (html, css)
Thinkful build a website (html, css)
 

More from Ivy Rueb

Getting Started in Tech
Getting Started in TechGetting Started in Tech
Getting Started in TechIvy Rueb
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-33-82-317
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-33-82-317Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-33-82-317
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-33-82-317Ivy Rueb
 
Instagram filters (10-5)
Instagram filters (10-5)Instagram filters (10-5)
Instagram filters (10-5)Ivy Rueb
 
Instagram filters (8 24)
Instagram filters (8 24)Instagram filters (8 24)
Instagram filters (8 24)Ivy Rueb
 
Instagram filters (8 24)
Instagram filters (8 24)Instagram filters (8 24)
Instagram filters (8 24)Ivy Rueb
 
Build Own Website
Build Own WebsiteBuild Own Website
Build Own WebsiteIvy Rueb
 
Build a Game with Javascript
Build a Game with Javascript Build a Game with Javascript
Build a Game with Javascript Ivy Rueb
 
Frontend Crash Coarse 09/28
Frontend Crash Coarse 09/28Frontend Crash Coarse 09/28
Frontend Crash Coarse 09/28Ivy Rueb
 
Build a Web App with Javascript and Jquery 09/19
Build a Web App with Javascript and Jquery 09/19Build a Web App with Javascript and Jquery 09/19
Build a Web App with Javascript and Jquery 09/19Ivy Rueb
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-81
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-81Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-81
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-81Ivy Rueb
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-72 (1)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-72 (1)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-72 (1)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-72 (1)Ivy Rueb
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-72
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-72Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-72
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-72Ivy Rueb
 
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
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-54
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-54Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-54
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-54Ivy Rueb
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-53
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-53Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-53
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-53Ivy Rueb
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-47 (2)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-47 (2)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-47 (2)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-47 (2)Ivy Rueb
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-47 (1)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-47 (1)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-47 (1)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-47 (1)Ivy Rueb
 

More from Ivy Rueb (20)

Getting Started in Tech
Getting Started in TechGetting Started in Tech
Getting Started in Tech
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-33-82-317
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-33-82-317Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-33-82-317
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-33-82-317
 
Instagram filters (10-5)
Instagram filters (10-5)Instagram filters (10-5)
Instagram filters (10-5)
 
Instagram filters (8 24)
Instagram filters (8 24)Instagram filters (8 24)
Instagram filters (8 24)
 
Instagram filters (8 24)
Instagram filters (8 24)Instagram filters (8 24)
Instagram filters (8 24)
 
Build Own Website
Build Own WebsiteBuild Own Website
Build Own Website
 
Build a Game with Javascript
Build a Game with Javascript Build a Game with Javascript
Build a Game with Javascript
 
Frontend Crash Coarse 09/28
Frontend Crash Coarse 09/28Frontend Crash Coarse 09/28
Frontend Crash Coarse 09/28
 
Build a Web App with Javascript and Jquery 09/19
Build a Web App with Javascript and Jquery 09/19Build a Web App with Javascript and Jquery 09/19
Build a Web App with Javascript and Jquery 09/19
 
Deck 6-80
Deck 6-80Deck 6-80
Deck 6-80
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-81
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-81Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-81
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-81
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-72 (1)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-72 (1)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-72 (1)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-72 (1)
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-72
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-72Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-72
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-72
 
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
 
Deck 1-56
Deck 1-56Deck 1-56
Deck 1-56
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-54
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-54Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-54
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-54
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-53
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-53Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-53
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-53
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-47 (2)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-47 (2)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-47 (2)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-47 (2)
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-47 (1)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-47 (1)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-47 (1)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-47 (1)
 

Recently uploaded

Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxOnBoard
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptxLBM Solutions
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAndikSusilo4
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhisoniya singh
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 

Recently uploaded (20)

Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptxVulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptx
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & Application
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 

Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74

  • 1. Intro to Javascript August 2017 WIFI: IgniteHQ Password: ignitehq http://bit.ly/tf-intro-js 1
  • 2. Instructor Connor Ericson Thinkful Graduate Freelance Developer TAs bit.ly/tf-intro-js Wi-Fi: IgniteHQ Pass: ignitehq 2
  • 3. About you What's your name? What brought you here today? What is your programming experience? bit.ly/tf-intro-js Wi-Fi: IgniteHQ Pass: ignitehq 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/tf-intro-js Wi-Fi: IgniteHQ Pass: ignitehq 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-js Wi-Fi: IgniteHQ Pass: ignitehq 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-js Wi-Fi: IgniteHQ Pass: ignitehq 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-js Wi-Fi: IgniteHQ Pass: ignitehq 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-js Wi-Fi: IgniteHQ Pass: ignitehq 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: IgniteHQ Pass: ignitehq
  • 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-js Wi-Fi: IgniteHQ Pass: ignitehq
  • 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-js Wi-Fi: IgniteHQ Pass: ignitehq 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/tf-intro-js Wi-Fi: IgniteHQ Pass: ignitehq 12
  • 13. Defining a variable with Javascript var numberOfSheep = 20 Initialize variable Name of variable Value of variable bit.ly/tf-intro-js Wi-Fi: IgniteHQ Pass: ignitehq 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-js Wi-Fi: IgniteHQ Pass: ignitehq 15
  • 17. If/Else Statements go to gas stationkeep driving if false if true need gas? family roadtrip bit.ly/tf-intro-js Wi-Fi: IgniteHQ Pass: ignitehq 17
  • 18. If/Else Statements function familyRoadtrip() { if (needGas == true) { getGas(); } else { keepDriving(); } } bit.ly/tf-intro-js Wi-Fi: IgniteHQ Pass: ignitehq 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-js Wi-Fi: IgniteHQ Pass: ignitehq 19
  • 20. If/Else Statements and Comparing Values bit.ly/tf-intro-js Wi-Fi: IgniteHQ Pass: ignitehq 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-js Wi-Fi: IgniteHQ Pass: ignitehq 21
  • 22. Examples of parameters within functions bit.ly/tf-intro-js Wi-Fi: IgniteHQ Pass: ignitehq 22
  • 23. Real developers use Google... a lot bit.ly/tf-intro-js Wi-Fi: IgniteHQ Pass: ignitehq 23
  • 24. Repl.it setup & first steps! http://bit.ly/tf-intro-js-challenges bit.ly/tf-intro-js Wi-Fi: IgniteHQ Pass: ignitehq 24
  • 25. Ways to keep learning 25
  • 26. For aspiring developers, bootcamps fill the gap 26
  • 27. 87%87% 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 Your Mentor Q&A Sessions Career CoachSlack Program Manager YouYou Local Community 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 jasjit@thinkful.comjasjit@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 eventOffer valid for one week after event Jasjit SinghJasjit Singh GM, Atlanta 30