SlideShare une entreprise Scribd logo
1  sur  23
Télécharger pour lire hors ligne
Intro to JavaScript: FUNdamentalsIntro to JavaScript: FUNdamentals
April 2018
bit.ly/js­fun­labit.ly/js­fun­la
Wi-Fi: Cross Camp.us Members
 
PW: innovate
 
Interactive Slides: bit.ly/la-slides-41918
1
Instructor
Justin Ezor
Thinkful LA Community
Manager & Web Developer
TA's
2
About you
What's your name? 
What brought you here today?
What is your programming experience?
3
About Thinkful
We train developers and data scientists through
1x1 mentorship and project-based learning.
 
Guaranteed.
4
Agenda
Learn key Javascript concepts 
Go over assignments 
Complete assignments with our support! 
Go over answer key 
5
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
6
Client/Servers
Client (sends requests)
Frontend Developer
Manages what user sees
Server (sends response)
Backend Developer
Manages what app does
7
Example: facebook.com
Client Server
Open browser
and navigate to
facebook.com
HTML, CSS, &
JavaScript render
newsfeed
Request
Response
Algorithm
determines
content of feed.
 
Sends back
HTML, CSS,
JavaScript files
Application Logic
Initial request
Following response
8
Example: facebook.com
Client Server
Open browser
and navigate to
facebook.com
HTML, CSS, &
JavaScript 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
9
Defining a variable with JavaScript
var numberOfSheep = 20var numberOfSheep = 20
Initialize variable
Name of variable
Value of variable
10
Variable examples
JSBin.com
11
Declaring a function with JavaScript
function greet() {function greet() {
   return "Hello world!";   return "Hello world!";
}}
Initialize function Name of function
What the function does
12
Function examples
JSBin.com
13
If/Else Statements
go to gas stationkeep driving
if false if true
need gas?
family roadtrip
14
If/Else Statements
function familyRoadtrip() {
    if (needGas == true) {
        getGas();
    }
    else {
        keepDriving();
    }
}
15
Comparing Values
==    (equal to)
 
         5 == 5  --> true
         5 == 6  --> false
 
!=     (not equal to)
 
         5 != 5  --> false
         5 != 6  --> true
 
16
If/Else Statements and Comparing Values
JSBin.com
17
Parameters within functions
function adder(a, b) {function adder(a, b) {
   return a + b;   return a + b;
}}
adder(1,2);adder(1,2);
Parameters in declaration
Parameters used
within the function
18
Examples of parameters within functions
JSBin.com
19
Real developers use Google... a lot
bit.ly/intro-js-la
20
Repl.it setup & first steps!
bit.ly/tf-intro-js-challenges
21
Ways to keep learning
22
Thinkful's free resource
HTML, CSS and JavaScript
Unlimited group mentor sessions
Personal Program Manager
Student Slack Community
bit.ly/web-free-labit.ly/web-free-la
Web Development Fundamentals Course
23

Contenu connexe

Similaire à Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78-171-219-304-310-388 (1)

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
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-454
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-454Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-454
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-454Justin Ezor
 
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
 
Introjs1.9.18tf
Introjs1.9.18tfIntrojs1.9.18tf
Introjs1.9.18tfThinkful
 
tfIjspdx080717
tfIjspdx080717tfIjspdx080717
tfIjspdx080717Thinkful
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-431 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-431 (1)Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-431 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-431 (1)Justin Ezor
 
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
 
bagjsphx828
bagjsphx828bagjsphx828
bagjsphx828Thinkful
 
bagjsphx828
bagjsphx828bagjsphx828
bagjsphx828Thinkful
 
Intro to JavaScript - LA - July
Intro to JavaScript - LA - JulyIntro to JavaScript - LA - July
Intro to JavaScript - LA - JulyThinkful
 
Introjscb112817
Introjscb112817Introjscb112817
Introjscb112817Thinkful
 
(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
 
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
 

Similaire à Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78-171-219-304-310-388 (1) (20)

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)
 
Itjs124
Itjs124Itjs124
Itjs124
 
Itjs111
Itjs111Itjs111
Itjs111
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-454
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-454Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-454
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-454
 
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
 
Introjs2.13.18sd
Introjs2.13.18sdIntrojs2.13.18sd
Introjs2.13.18sd
 
Introjs1.9.18tf
Introjs1.9.18tfIntrojs1.9.18tf
Introjs1.9.18tf
 
tfIjspdx080717
tfIjspdx080717tfIjspdx080717
tfIjspdx080717
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-431 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-431 (1)Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-431 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-431 (1)
 
Ijsphx927
Ijsphx927Ijsphx927
Ijsphx927
 
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
 
Test
TestTest
Test
 
bagjsphx828
bagjsphx828bagjsphx828
bagjsphx828
 
bagjsphx828
bagjsphx828bagjsphx828
bagjsphx828
 
Intro to JavaScript - LA - July
Intro to JavaScript - LA - JulyIntro to JavaScript - LA - July
Intro to JavaScript - LA - July
 
Introjscb112817
Introjscb112817Introjscb112817
Introjscb112817
 
(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
 
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
 
Tf itjsbagg
Tf itjsbaggTf itjsbagg
Tf itjsbagg
 

Plus de Justin Ezor

Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-353-412-457
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-353-412-457Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-353-412-457
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-353-412-457Justin Ezor
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417-452
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417-452Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417-452
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417-452Justin Ezor
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450Justin Ezor
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-128-133-443 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-128-133-443 (1)Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-128-133-443 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-128-133-443 (1)Justin Ezor
 
Deck 4-361-414-444
Deck 4-361-414-444Deck 4-361-414-444
Deck 4-361-414-444Justin Ezor
 
Deck 6-80-140-196-213-271-321-364-438 (2)
Deck 6-80-140-196-213-271-321-364-438 (2)Deck 6-80-140-196-213-271-321-364-438 (2)
Deck 6-80-140-196-213-271-321-364-438 (2)Justin Ezor
 
Deck 6-80-140-196-213-271-321-364-438 (1)
Deck 6-80-140-196-213-271-321-364-438 (1)Deck 6-80-140-196-213-271-321-364-438 (1)
Deck 6-80-140-196-213-271-321-364-438 (1)Justin Ezor
 
Deck 4-361-414-420
Deck 4-361-414-420Deck 4-361-414-420
Deck 4-361-414-420Justin Ezor
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417Justin Ezor
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408 (1)Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408 (1)Justin Ezor
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408Justin Ezor
 
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
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409 (1)Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409 (1)Justin Ezor
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (2)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (2)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (2)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (2)Justin Ezor
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (1)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (1)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (1)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (1)Justin Ezor
 
Build your own website - LA 3-20-18
Build your own website - LA 3-20-18Build your own website - LA 3-20-18
Build your own website - LA 3-20-18Justin Ezor
 
html/CSS crash course correct free course link
html/CSS crash course correct free course linkhtml/CSS crash course correct free course link
html/CSS crash course correct free course linkJustin Ezor
 
html/CSS Crash course w/ interactive slides link
html/CSS Crash course w/ interactive slides linkhtml/CSS Crash course w/ interactive slides link
html/CSS Crash course w/ interactive slides linkJustin Ezor
 

Plus de Justin Ezor (20)

Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-353-412-457
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-353-412-457Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-353-412-457
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-353-412-457
 
Deck 6-456 (1)
Deck 6-456 (1)Deck 6-456 (1)
Deck 6-456 (1)
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417-452
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417-452Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417-452
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417-452
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-128-133-443 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-128-133-443 (1)Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-128-133-443 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-128-133-443 (1)
 
Deck 4-361-414-444
Deck 4-361-414-444Deck 4-361-414-444
Deck 4-361-414-444
 
Deck 6-130-441
Deck 6-130-441Deck 6-130-441
Deck 6-130-441
 
Deck 6-80-140-196-213-271-321-364-438 (2)
Deck 6-80-140-196-213-271-321-364-438 (2)Deck 6-80-140-196-213-271-321-364-438 (2)
Deck 6-80-140-196-213-271-321-364-438 (2)
 
Deck 6-80-140-196-213-271-321-364-438 (1)
Deck 6-80-140-196-213-271-321-364-438 (1)Deck 6-80-140-196-213-271-321-364-438 (1)
Deck 6-80-140-196-213-271-321-364-438 (1)
 
Deck 4-361-414-420
Deck 4-361-414-420Deck 4-361-414-420
Deck 4-361-414-420
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408 (1)Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408 (1)
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408
 
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
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409 (1)Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409 (1)
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (2)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (2)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (2)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (2)
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (1)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (1)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (1)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (1)
 
Build your own website - LA 3-20-18
Build your own website - LA 3-20-18Build your own website - LA 3-20-18
Build your own website - LA 3-20-18
 
html/CSS crash course correct free course link
html/CSS crash course correct free course linkhtml/CSS crash course correct free course link
html/CSS crash course correct free course link
 
html/CSS Crash course w/ interactive slides link
html/CSS Crash course w/ interactive slides linkhtml/CSS Crash course w/ interactive slides link
html/CSS Crash course w/ interactive slides link
 

Dernier

HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxHMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxmarlenawright1
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxheathfieldcps1
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and ModificationsMJDuyan
 
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...Pooja Bhuva
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Pooja Bhuva
 
Tatlong Kwento ni Lola basyang-1.pdf arts
Tatlong Kwento ni Lola basyang-1.pdf artsTatlong Kwento ni Lola basyang-1.pdf arts
Tatlong Kwento ni Lola basyang-1.pdf artsNbelano25
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxJisc
 
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxannathomasp01
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxDr. Sarita Anand
 
REMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxREMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxDr. Ravikiran H M Gowda
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxPooja Bhuva
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfSherif Taha
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsKarakKing
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxAreebaZafar22
 
Plant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptxPlant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptxUmeshTimilsina1
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibitjbellavia9
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...ZurliaSoop
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxRamakrishna Reddy Bijjam
 
How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17Celine George
 

Dernier (20)

HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxHMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
 
Tatlong Kwento ni Lola basyang-1.pdf arts
Tatlong Kwento ni Lola basyang-1.pdf artsTatlong Kwento ni Lola basyang-1.pdf arts
Tatlong Kwento ni Lola basyang-1.pdf arts
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
REMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxREMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptx
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdf
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
Plant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptxPlant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptx
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17
 

Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78-171-219-304-310-388 (1)

  • 1. Intro to JavaScript: FUNdamentalsIntro to JavaScript: FUNdamentals April 2018 bit.ly/js­fun­labit.ly/js­fun­la Wi-Fi: Cross Camp.us Members   PW: innovate   Interactive Slides: bit.ly/la-slides-41918 1
  • 2. Instructor Justin Ezor Thinkful LA Community Manager & Web Developer TA's 2
  • 3. About you What's your name?  What brought you here today? What is your programming experience? 3
  • 4. About Thinkful We train developers and data scientists through 1x1 mentorship and project-based learning.   Guaranteed. 4
  • 5. Agenda Learn key Javascript concepts  Go over assignments  Complete assignments with our support!  Go over answer key  5
  • 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 6
  • 7. Client/Servers Client (sends requests) Frontend Developer Manages what user sees Server (sends response) Backend Developer Manages what app does 7
  • 8. Example: facebook.com Client Server Open browser and navigate to facebook.com HTML, CSS, & JavaScript render newsfeed Request Response Algorithm determines content of feed.   Sends back HTML, CSS, JavaScript files Application Logic Initial request Following response 8
  • 9. Example: facebook.com Client Server Open browser and navigate to facebook.com HTML, CSS, & JavaScript 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 9
  • 10. Defining a variable with JavaScript var numberOfSheep = 20var numberOfSheep = 20 Initialize variable Name of variable Value of variable 10
  • 12. Declaring a function with JavaScript function greet() {function greet() {    return "Hello world!";   return "Hello world!"; }} Initialize function Name of function What the function does 12
  • 14. If/Else Statements go to gas stationkeep driving if false if true need gas? family roadtrip 14
  • 15. If/Else Statements function familyRoadtrip() {     if (needGas == true) {         getGas();     }     else {         keepDriving();     } } 15
  • 16. Comparing Values ==    (equal to)            5 == 5  --> true          5 == 6  --> false   !=     (not equal to)            5 != 5  --> false          5 != 6  --> true   16
  • 17. If/Else Statements and Comparing Values JSBin.com 17
  • 18. Parameters within functions function adder(a, b) {function adder(a, b) {    return a + b;   return a + b; }} adder(1,2);adder(1,2); Parameters in declaration Parameters used within the function 18
  • 19. Examples of parameters within functions JSBin.com 19
  • 20. Real developers use Google... a lot bit.ly/intro-js-la 20
  • 21. Repl.it setup & first steps! bit.ly/tf-intro-js-challenges 21
  • 22. Ways to keep learning 22
  • 23. Thinkful's free resource HTML, CSS and JavaScript Unlimited group mentor sessions Personal Program Manager Student Slack Community bit.ly/web-free-labit.ly/web-free-la Web Development Fundamentals Course 23