SlideShare a Scribd company logo
Intro to Javascript
October 2017
WIFI: IgniteHQ
Password: ignitehq
http://bit.ly/tf-intro-js
1
Instructor
John Brown
Thinkful Student
Web Coordinator
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
89%89%
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
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
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.combenjy@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
BenjyBenjy SchechnerSchechner
Education Advisor
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 - July
Thinkful
 
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
Thinkful
 
Build a Virtual Pet with Javascript
Build a Virtual Pet with JavascriptBuild a Virtual Pet with Javascript
Build a Virtual Pet with Javascript
Ivy Rueb
 
website la 11/28
website la 11/28website la 11/28
website la 11/28
Thinkful
 
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 la
Thinkful
 
DC jQuery App
DC jQuery AppDC jQuery App
DC jQuery App
TJ Stalcup
 
Cf objective2014 software-craftsmanship
Cf objective2014 software-craftsmanshipCf objective2014 software-craftsmanship
Cf objective2014 software-craftsmanshipColdFusionConference
 
Deck 4-67
Deck 4-67Deck 4-67
Deck 4-67
Ivy Rueb
 
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
Thinkful
 
Buildappjsjq10.30 SD
Buildappjsjq10.30 SDBuildappjsjq10.30 SD
Buildappjsjq10.30 SD
Thinkful
 
Deck 6-130-441
Deck 6-130-441Deck 6-130-441
Deck 6-130-441
Justin Ezor
 
Buildappjsjq9:12 sd
Buildappjsjq9:12 sdBuildappjsjq9:12 sd
Buildappjsjq9:12 sd
Thinkful
 
Bwhtmlpdx0809
Bwhtmlpdx0809Bwhtmlpdx0809
Bwhtmlpdx0809
Thinkful
 
Tripletail
TripletailTripletail
Tripletail
Phu Truong
 
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
 
HTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPCHTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPCMayflower GmbH
 

What's hot (17)

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
 
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
 
DC jQuery App
DC jQuery AppDC jQuery App
DC jQuery App
 
Cf objective2014 software-craftsmanship
Cf objective2014 software-craftsmanshipCf objective2014 software-craftsmanship
Cf objective2014 software-craftsmanship
 
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
 
Buildappjsjq10.30 SD
Buildappjsjq10.30 SDBuildappjsjq10.30 SD
Buildappjsjq10.30 SD
 
Deck 6-130-441
Deck 6-130-441Deck 6-130-441
Deck 6-130-441
 
Buildappjsjq9:12 sd
Buildappjsjq9:12 sdBuildappjsjq9:12 sd
Buildappjsjq9:12 sd
 
Bwhtmlpdx0809
Bwhtmlpdx0809Bwhtmlpdx0809
Bwhtmlpdx0809
 
Tripletail
TripletailTripletail
Tripletail
 
Build an App with JavaScript & jQuery
Build an App with JavaScript & jQuery Build an App with JavaScript & jQuery
Build an App with JavaScript & jQuery
 
HTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPCHTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPC
 

Similar to Intro To JavaScript

Intro To JavaScript
Intro To JavaScriptIntro To JavaScript
Intro To JavaScript
Ivy Rueb
 
Intro to js september 19
Intro to js september 19Intro to js september 19
Intro to js september 19
Thinkful
 
Intro to Javascript
Intro to JavascriptIntro to Javascript
Intro to Javascript
TJ Stalcup
 
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
Thinkful
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
Aaron Lamphere
 
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
Ivy Rueb
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
Aaron Lamphere
 
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
Ivy Rueb
 
Intro to JavaScript - Thinkful DC
Intro to JavaScript - Thinkful DCIntro to JavaScript - Thinkful DC
Intro to JavaScript - Thinkful DC
TJ Stalcup
 
Thinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScriptThinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScript
TJ Stalcup
 
Thinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScriptThinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScript
TJ Stalcup
 
Intro to Python
Intro to PythonIntro to Python
Intro to Python
TJ 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 & CSS
TJ Stalcup
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
TJ Stalcup
 
BYOWHC823
BYOWHC823BYOWHC823
BYOWHC823
Thinkful
 
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
Ivy Rueb
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
TJ Stalcup
 
How to Choose a Programming Language
How to Choose a Programming LanguageHow to Choose a Programming Language
How to Choose a Programming Language
Thinkful
 
Thinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSSThinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSS
TJ Stalcup
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
Aaron Lamphere
 

Similar to Intro To JavaScript (20)

Intro To JavaScript
Intro To JavaScriptIntro To JavaScript
Intro To JavaScript
 
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
 
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
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
 
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
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55
 
Intro to 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
 
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
 
BYOWHC823
BYOWHC823BYOWHC823
BYOWHC823
 
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
 
Thinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSSThinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSS
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
 

More from Ivy Rueb

Getting Started in Tech
Getting Started in TechGetting Started in Tech
Getting Started in Tech
Ivy 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-317
Ivy 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 Website
Ivy 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/28
Ivy 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/19
Ivy Rueb
 
Deck 6-80
Deck 6-80Deck 6-80
Deck 6-80
Ivy 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-81
Ivy 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-72
Ivy 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-57
Ivy Rueb
 
Deck 1-56
Deck 1-56Deck 1-56
Deck 1-56
Ivy 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-54
Ivy 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-53
Ivy 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

Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Product School
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Product School
 
"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi
Fwdays
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
Sri Ambati
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
Product School
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
Jemma Hussein Allen
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
Guy Korland
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Tobias Schneck
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
CatarinaPereira64715
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
Product School
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
Paul Groth
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
Thijs Feryn
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
Elena Simperl
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 

Recently uploaded (20)

Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
 
"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 

Intro To JavaScript

  • 1. Intro to Javascript October 2017 WIFI: IgniteHQ Password: ignitehq http://bit.ly/tf-intro-js 1
  • 2. Instructor John Brown Thinkful Student Web Coordinator 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. 89%89% 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. 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 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.combenjy@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 BenjyBenjy SchechnerSchechner Education Advisor 30