Introjs10.5.17SD

Intro to Javascript
October 2017
WIFI: Deskhub-main
Password: Create2017!
http://bit.ly/introjs-sd
1

Welcome to "Intro to Javascript". The Wi-Fi network is X and the password is Y The website for this class is Z.
Speaker notes

Instructor
Rachel Munoz
Software Developer
Bootcamp Graduate
TAs
bit.ly/introjs-sd
Wi-Fi: Deskhub-main
Pass: Create2017! 2

Let me start with a little about me. My name is X and my background is Y. We have some TA's that will be helping us today. I'm going to go around
and have them introduce themselves.
Speaker notes

About you
What's your name?
What brought you here today?
What is your programming experience?
bit.ly/introjs-sd
Wi-Fi: Deskhub-main
Pass: Create2017! 3

I'd love to learn a little more about you guys. So can we go around the room and can everyone give us your name, why you’re attending this event
tonight?
Speaker notes

About Thinkful
Thinkful helps people become developers or data scientists
through 1-on-1 mentorship and project-based learning
These workshops are built using this approach.These workshops are built using this approach.
bit.ly/introjs-sd
Wi-Fi: Deskhub-main
Pass: Create2017! 4

Thinkful is hosting the event tonight. Thinkful is a coding bootcamp built on a belief in one-on-one mentorship and project based learning. This
workshop today is designed using this approach. The bulk of the workshop will be you guys working one-on-one with our TA’s to build a real project.
Speaker notes

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/introjs-sd
Wi-Fi: Deskhub-main
Pass: Create2017! 5

A couple things before we get started. First, if you’re struggling on a concept or part of your application, don’t get discouraged. The struggle of
learning to work through problems, especially in coding, is what’s going to make you a better developer. Second, if you feel stuck and you’re not sure
what to do next, place ask for help. We’re here to make sure you get the most support possible to learn as much as you can about the material.
Speaker notes

Agenda
Learn key Javascript concepts (30 min)
Go over assignments (10 min)
Complete assignments with our support! (30 min)
Go over answer key (10 min)
Steps to continue learning (10 min)
bit.ly/introjs-sd
Wi-Fi: Deskhub-main
Pass: Create2017! 6

I’ll start by going over some important Javascript concepts that you’ll use to complete the code for tonight. Then I’ll brieﬂy go over the starter code
with you and work through the ﬁrst step with you. Then I’ll let you all work through the next steps to making the app, during which time myself and
the TA’s will be walking around to help you all out. At the end we’ll cover next steps for continuing your learning.
Speaker notes

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/introjs-sd
Wi-Fi: Deskhub-main
Pass: Create2017! 7

On a basic level, the web works through communication between a browser like google chrome and a server. The user enters a web address like
google.com into a browser and hits enter. Then the browser sends a request to the server that has the ﬁles for google.com on it. And the server
sends back those ﬁles to the browser to load.
Speaker notes

Client/Servers
Client (sends requests)
Frontend Developer
Manages what user sees
Server (sends response)
Backend Developer
Manages what app does
bit.ly/introjs-sd
Wi-Fi: Deskhub-main
Pass: Create2017! 8

A browser, also called the client, can be anything that connects to the internet. Your laptop, your phone, all those things are clients. They’re
responsible for sending requests and loading the pages from files sent back from the server. It manages what the app looks like. This is the
responsibility of a frontend developer. The server holds all those files. Its job is to shoot specific files to the client based on its requests. It manages
what the app actually does and is the responsibility of the backend developer
Speaker notes

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 ﬁles
Application LogicApplication Logic
Initial requestInitial request
Following responseFollowing response
bit.ly/introjs-sd
9
Wi-Fi: Deskhub-main
Pass: Create2017!

Let's break it down with an example. Let's say I log into facebook. When I try to go to that page, my computer is going to send a request to
facebook’s server. Facebook’s server is going to look at that request and think, “okay, what should I send back to ${your name}’s computer?” Its
going to look through my friend’s posts and determine using an algorithm what’s most important to put in my feed. Then it’ll send all that info,
including the ﬁles to display the info, to my computer. My computer will then read and interpret those ﬁles and display the information on my screen.
Speaker notes

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 ﬁles
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/introjs-sd
Wi-Fi: Deskhub-main
Pass: Create2017!

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/introjs-sd
Wi-Fi: Deskhub-main
Pass: Create2017! 11

Javascript was initially written by Brendan Eich in 1995 for Netscape. It was written in 10 days but has since been improved. A common
misconception is that it has something to do with Java, but they are very different languages. Most likely, Javascript was given its name to ride the
wave of popularity that Java had at the time. In the ten years after it was created, it grew in popularity and today it has a monopoly on front end web
development as the default language for web programming. It continues to evolve under the guidance of the ECMA International, with input from top
tech companies.
Speaker notes

Javascript today
Has large community of developers, libraries and
frameworks
Lots of job opportunities
Also the syntax is easier to understand for ﬁrst-time
developers
bit.ly/introjs-sd
Wi-Fi: Deskhub-main

Because of its immense popularity, javascript today has an enormous community of developers, libraries, and frameworks. Because of its
widespread use, it also has tons of job opportunities. The syntax is also easier to understand compared to other programming languages making it a
good place to start for ﬁrst-timers.
Speaker notes

Deﬁning a variable with Javascript
var numberOfSheep = 20
Initialize variable
Name of variable
Value of variable
bit.ly/introjs-sd
Wi-Fi: Deskhub-main

The first important concept in Javascript is the use of variables. A variable is a container used to store data values. In javascript, we define a variable
by first typing out ‘var’. This tells the computer that we’re about to make a variable. Then we type the variable’s name. This can be anything you
want, but it is helpful if the name of the variable corresponds to its value. Then we put an equal sign and type in the value of that variable. The
computer now recognizes that the variable numberOfSheep is equal to 20.
Speaker notes

Variable examples
bit.ly/introjs-sd
Wi-Fi: Deskhub-main

I’m going to show you a few examples of variables you can create.
var numberOfSheep = 20;
console.log(numberOfSheep);
var nameOfSheep = “Fred”;
console.log(nameOfSheep);
var cars = 5;
var trucks = 6;
var vehicles = x + y;
console.log(vehicles);
var foo = ‘foo’;
var bar = ‘bar’;
var something = x + y;
console.log(something);
Speaker notes

Declaring a function with Javascript
function greet() {
return "Hello world!";
}
Initialize function Name of function
What the function does
bit.ly/introjs-sd
Wi-Fi: Deskhub-main

A function is a piece of code that’s meant to perform a speciﬁc task. You create a function by ﬁrst typing out the word ‘function’. This tells the
computer that you’re about to write a function. Then we write out the name of the function followed by parentheses. You don’t need to know quite yet
what the parentheses do, just that they are required to be placed immediately after the function name. Then, inside curly brackets, we state what the
function is going to do. In this case the function will simply return the string or statement “Hello world!”. Return is a word used inside a function that
means ‘give back this value’.
Speaker notes

Function examples
bit.ly/tf-intro-js
Wi-Fi: Deskhub-main

I’m going to show you a few examples of functions you can create
function adder() {
console.log(2 + 3);
}
adder();
---erase console.log and put return---
function adder() {
return 2 + 3;
}
adder();
console.log(adder());
var subtractor = function() {
return 5 - 2;
}
console.log(subtractor());
var subtractorVariable = subtractor();
console.log(subtractorVariable);
Speaker notes

If/Else Statements
go to gas stationkeep driving
if false if true
need gas?
family roadtrip
bit.ly/introjs-sd
Wi-Fi: Deskhub-main

Functions can also contain some logic to them that allow them to make decisions based on different circumstances. This logic is contained inside
if/else statements. For example, let's say you’re on a roadtrip. You ask yourself, do I need gas. If it's true that you need gas, you should go to the gas
station. If it's false that you need gas, then you continue driving. This is a very simpliﬁed version of an if/else statement.
Speaker notes

If/Else Statements
function familyRoadtrip() {
if (needGas == true) {
getGas();
}
else {
keepDriving();
}
}
bit.ly/introjs-sd
Wi-Fi: Deskhub-main

If we were going to make that into a function, we could write it this way. The name of our function is familyRoadtrip. The ﬁrst line is our if statement.
We needGas is true, then we getGas. Else, we keep driving. This set of equal signs here is called a comparison operator. It's used to compare two
values to see if they’re equal.
Speaker notes

Comparing Values
== (equal to)
5 == 5 --> true
5 == 6 --> false
!= (not equal to)
5 != 5 --> false
5 != 6 --> true
bit.ly/introjs-sd
Wi-Fi: Deskhub-main

There are a few comparison operators you can use in Javascript. Another one is the ‘not equal to’ sign. Here you can see how, when we compare 5
and 6, the results true and false change depending on the operator.
Speaker notes

If/Else Statements and Comparing Values
bit.ly/introjs-sd
Wi-Fi: Deskhub-main

Here’s an example of an if/else statement.
function comparison() {
if (5 == 6) {
console.log("Math is broken");
}
else {
console.log("Math is working today");
}
}
comparison();
To show additional if statements, add this:
if (5 == 5) {
console.log("Math is definitely working today");
}
To show additional comparison operators, add this:
if (5 < 6) {
console.log("And five is still less than 6");
}
if (5 >= 5) {
console.log("And five is still 5");
}
Speaker notes

Parameters within functions
function adder(a, b) {
return a + b;
}
adder(1,2);
Parameters in declaration
Parameters used
within the function
bit.ly/introjs-sd
Wi-Fi: Deskhub-main

Finally, functions allow us to use values outside of them by passing them in as parameters. Here, you see that we’ve put parameters ‘a’ and ‘b’
inside the parentheses. They correspond to the ‘a’ and ‘b’ inside the function. If we were to call the function like so, the number one would
correspond to ‘a’, and the number 2 would correspond to ‘b’.
Speaker notes

Examples of parameters within functions
bit.ly/introjs-sd
Wi-Fi: Deskhub-main

Let's do some examples with parameters
function adder(a, b) {
console.log(a + b);
}
adder(1,2);
function concatenator(ﬁrst, second) {
console.log(ﬁrst + second);
}
concatenator(‘foo’, ‘bar’);
function checker(param1, param2) {
if (param1 == param2) {
console.log(param1 + " is equal to " + param2);
}
else {
console.log("They are not equal");
}
}
checker(4,4);
Speaker notes

Real developers use Google... a lot
bit.ly/introjs-sd
Wi-Fi: Deskhub-main

Google is an everyday part of being a developer. A key part of becoming a developer is getting comfortable using Google to learn and look up things.
The more you code, the more you will use Google, not the other way around. When you get stuck tonight, or whenever, make sure to Google it ﬁrst!
Speaker notes

Repl.it setup & ﬁrst steps!
http://bit.ly/tf-intro-js-challenges
bit.ly/introjs-sd
Wi-Fi: Deskhub-main

Go ahead and go to this link. This will take you to a site called repl.it. Repl is a site that allows us to write code and instantly see a result. Sign up for
repl and enter the classroom called Intro to Javascript.
Just to get you all familiar with the assignments, I’ll work through the first one with you. Click on Defining Variables and you should see a screen like
this.
First thing we should do is read the directions on the right side of the screen. They say:
“The function sayingHi needs two parameters to function. The variables at the top aren't yet defined so when we try to call sayingHi on line 8, the
function fails.
Define the variables so that when the function runs, it prints 'Hello World'. Define a as 'Hello' and b as 'World'. Don't forget your quotes!
Don't change the test code at the bottom of the file. That's there to help make sure you're code is responding correctly. The console will respond with
'SUCCESS: `sayingHi` is working' if you wrote the function correct, and will print 'FAILURE: `sayingHi` is not working' if your function is not correct.
“
Right now, when we press run at the top, it gives us some errors. So, the assignment needs us to define some variables. As good developers, if
there’s something we don’t know how to do, we google it. So, lets Google, how to define variables in javascript. Lets click on the first one. This is
w3schools, a really nice site for information on programming and javascript. Okay, so we can define this variable x by saying = and then the number
5. Well, that’s all well and good, but I need to put a word in there, not a number. Let's see if they have an example for defining a variable with a word.
I’ll just scroll down and see. Okay, so here’s a variable that has a word as a definition. The word is in quotes because its a string. Lets go back to our
code and try putting in “hello” and “world” in there with quotes. It works!
Go ahead and start working on the remaining challenges. Again, don’t hesitate to Google. Its’ your best friend. The first couple challenges are easier
than the last few so if you can’t get them all tonight, that’s okay.
Speaker notes

For aspiring developers, bootcamps ﬁll the gap
26

If you’re interested in becoming a developer, however, you’ll want to consider a bootcamp.
Bootcamps are short programs that provide the structure and support to help people become developers.
The reason bootcamps emerged, massive gap between growing demand for software developers and supply
Bootcamps were created to ﬁll that gap: 73% get jobs as developers with an average salary lift of $26K.
Speaker notes

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

Thinkful has one of the best track records of getting students jobs
91% placement rate, 35% are placed before graduating.
Stats are audited by third party.
One of few local bootcamps with a job guarantee.
Speaker notes

Our students receive unprecedented support
Learning Mentor
Career MentorProgram Manager
San Diego Community
You
28

We’ve been able to achieve these results because of the unprecedented support our students receive: Thinkful students work through the program
with their own personal mentor.
As you might have seen today, learning in a classroom was much harder than just individually with your TA. We saw the same problem and that's
why all our programs are built around 1:1 support
Mentors have 10+ years of experience, work at companies like Home Depot, Delta, etc
You also have Slack + QA sessions if you’re stuck at 2AM
Not only do you have a technical mentor you also have a career mentor, who taps into our network of mentors and employers to get you interviews
and help you prepare for them.
And then we have a local community: dinners and networking to meet other students, mentors, and resources for Thinkful here in San Diego
Speaker notes

Mentorship enables ﬂexible 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

This unique structure also makes Thinkful more accessible.
Unlike with other programs, mentorship enables total ﬂexibility
Learn on your own time and at your own pace
You don’t have to quit your job to start a transition.
Speaker notes

Take a Thinkful tour!
Talk to one of us to set something up !
Take a look through Thinkful's
student platform to see if
project-based, online learning
is a good ﬁt for you 👀
While we're at it, give us
feedback on tonight's
workshop.
30

Introjs10.5.17SD

More Related Content

What's hot (19)

Similar to Introjs10.5.17SD (20)

More from Thinkful (20)

Recently uploaded (20)

Introjs10.5.17SD