Intro to JavaScript - Thinkful LA

Intro to JavaScript
April 2017
http://bit.ly/intro-js-la

© 2017 Thinkful, Inc. All Rights Reserved. 2
About us
We train developers and data
scientists through 1-on-1
mentorship and career prep

© 2017 Thinkful. All Rights Reserved. 3
About me
Zac Carter
Thinkful mentor
Software developer for 10 years

About you
What brought you here?
Do you want to work better with developers?
Do you want to start working in tech?
Do you have an idea that you want to build?
Programming experience?
First lines of code will be written tonight?
Been self teaching for 1-3 months?
Been at this for 3+ months

Today’s Goals
Context: Understand JavaScript’s role in modern
software development
Practice core JavaScript concepts
Get comfortable getting stuck
Aha! (Google is a developer’s best friend)
Pick your roadmap to learn from here

Not Goals
Exhaustive course on all JavaScript fundamentals
Focus on concepts vs. syntax
HTML/CSS — check out tomorrow’s workshop. Same
place, same time

Before We Review Anything…
Chrome Developer Tools provides an interactive
JavaScript console, where you can run and debug
code:
View -> Developer -> JavaScript console
Shortcut: option-command-J on a Mac; Ctrl + Shift +
J on a PC
Type the following command and hit enter:
alert(“Hello world!”);
Type: 2+2;

Congrats!
You just typed your ﬁrst two lines of code!
💯

What is Programming?
Programming is writing instructions for a
computer to execute

Programming is problem-solving

Programming is a process:
1. Deﬁning problems
2. Finding solutions to those problems
3. Implementing those solutions in a language your
computer can understand

JavaScript: a brief history
Written by Brendan Eich in 1995 for use in 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

JavaScript: today
Has an exceptional community of developers, libraries
and frameworks.
A partial list: https://en.wikipedia.org/wiki/
List_of_JavaScript_libraries
Continues to evolve under guidance of Ecma
International, with input from top tech companies
Great place for beginners to start programming

Most commonly used language on GitHub
Details here: http://githut.info/
JavaScript: today

Why learn JavaScript
Most popular language means job opportunities
Good starting place to see if coding is for you
Coding as a medium of expression

How the web works
You type a URL: facebook.com (your computer is the
client)
The browser communicates with the DNS server to find
the IP address
The browser sends an HTTP request to the server asking
for specific files
The browser receives those files and renders them as a
website

Client / Server
Front-end developer Back-end developer
Client Server

What are we learning?
100% of client side code is written in JavaScript
You can also use JavaScript to write server-side
code (thanks to Node.js)
Backend web applications have been written in
many languages (incl. Java, Ruby, PHP,
Python…)

What we’ll cover
Variables
Data types
Functions
Strings + Functions: drills
Numbers + Functions: drills

JavaScript variables
A variable is a name that is attached to a value
Gives us a shorthand way to refer to values created
elsewhere in a program
Why do we use variables? To manage state in a
program
Example: https://jsbin.com/ciqade/1/edit

JavaScript variables
Declaring a variable
var firstVariable;
Assigning a value to it
firstVariable = 6;
Retrieving that value
alert(firstVariable);
Causes a popup to appear with the alert message “6"
Example (uncheck “Auto-run with JS”):
https://jsbin.com/xamipa/edit?js,output

Variable naming
Choose meaningful words
loggedInUsers is better than x
Use camelCasing
First word starts with lower case; subsequent words
start with upper case
Must start with a letter

JavaScript Data Types
String
Number
Boolean
Null (in appendix)
Undeﬁned (in appendix)
Object (in appendix)

Strings
Strings are created with opening and closing quotes
(either single or double, but both must be same kind):
var foo = 'bar';
var bar = "foo";

Strings are useful when…
You’re building an application that involves users
interacting with text… so, almost all the time.
When you post a Facebook Status, your status is
stored as a String
When you read tweets, those tweets are stored as
strings

Strings: Oh the things you can do!

Concatenating strings
JavaScript lets us use the + operator to concatenate —
which just means combine — two strings into one:
var innerText = 'The quick brown fox.…’;
var element = '<p>' + innerText + '</p>';
console.log(element)
// => '<p>The quick brown fox…</p>’

Strings drill
Using the JavaScript console
Store your ﬁrst name in one variable and then your
last name in a second variable
Concatenate the two to print your full name

Numbers
The number type in JavaScript is used to represent all
numbers:
Integer values (whole numbers like 1, 2, 3,
10000000…)
Floating point decimal numbers (1.234999). These
are stored differently than integers and occasionally
you’ll run into quirks doing math with decimals.

Using Numbers

Numbers drill
Using the JavaScript console
Store two numbers in two different variables named
firstNumber and secondNumber
Add the two numbers
Multiply them

Booleans
Booleans signify true or false
var loggedIn = true;
if (loggedIn = true) {
redirectToDashboard();
}

Functions
A function describes a repeatable process or behavior.
JavaScript has some built-in functions, and in writing a
complex program, you’ll write many, many functions
that handle sub-sets of the behavior you’re creating.
type in the console:
alert(‘Hello from JavaScript land’);

Functions
Go to JSBin.com
Declare and execute a function:
function myFunction() {
console.log("myFunction");
}
myFunction();
Write a function that logs your name
Write a function that adds two numbers

Functions: parameter and return
We sometimes pass a parameter and return a value:
function hello(name) {
return 'Hello ' + name + '!';
}
console.log(hello('TJ')); // => "Hello TJ!"
In JSbin, write a function that adds two numbers that
are passed to the function as parameters and returns
the sum.

Comparing strings
Use the === operator to compare two strings to see if
they're identical.
var foo = 'foo';
var foo1 = 'foo';
var bar = 'bar';
foo === foo1 true
foo === bar false

Strings methods
JavaScript provides a number of built-in methods that
you can use on strings:
var foo = 'foo bar foo bar';
foo.length 15
foo.charAt(0) "f"
foo.slice(4) "bar foo bar"
foo.slice(4, 7) "bar"
foo.split(" ") ["foo", "bar", "foo", "bar"]
foo.toUpperCase() "FOO BAR FOO BAR"
foo.replace('foo', ‘bar') 'bar bar foo bar'

Strings drill 1:
Fill in the function `wisePerson` that takes two arguments:
wiseType and whatToSay.
This function takes a block of text and presents it as a
quote from the wise person. wiseType is the person the
quote will be attributed to, and whatToSay is what the
wise person will be quoted as saying.
When called like this: wisePerson('goat', "Gibbida
abbida abbida") should return the string 'A wise
goat once said: "Gibbida abbida abbida".'
https://jsbin.com/riraqi/2/edit

Strings drill 1: Tips
Break the problem down into detailed steps
Write Pseudocode, or programming in English.
Describe what should happen in English line by line,
and then translate that into code.

Strings drill 2:
Create a function that takes a single argument:
whatToShout. The function should return an all caps
version of the string it's given, with three exclamation
points !!! at the end.
Given the text shouter('as you can hear i am
whispering'), the function should return "AS YOU
CAN HEAR I AM WHISPERING!!!".
https://jsbin.com/ﬁjetec/1/edit

Strings drill 2: Tips
Break the problem down into precise steps written in
Pseudocode
Don’t know how to turn an English description
(“Capitalize “). Try googling it – you’re probably not the
ﬁrst programmer who needed it.

Numbers drill
Create a function called computeArea that takes two
arguments: width and height. It returns the area of a
square whose width is width and height is height. So
computeArea(2, 2) would return 4, and
computeArea(3, 5) would return 15.
https://jsbin.com/cuhuded/2/edit

Topics we’re not covering
Application logic
Loops and Arrays
Working with objects
More practice writing useful functions / breaking down
large problems into small, manageable ones

More about Thinkful
You’ll learn concepts, practice with drills, and build capstone
projects for your own portfolio — all guided by a personal mentor

Mentors have, on average, 10+ years of experience
Our mentors

Job Titles after GraduationMonths until Employed
Our results

Try the program for two
weeks, includes six mentor
sessions - $50
Learn HTML/CSS/JavaScript
Option to continue onto web
development bootcamp
Come talk to me if you’re
interested (or email me at
noel@thinkful.com)
Try us out!

How did everyone ﬁnd out about tonight’s event?
Meetup, Eventbrite, Facebook, etc.
Would you have traveled to Santa Monica for tonight’s
workshop? 🚗 🚙 🚕
Quick poll

Thank you!
Email me with questions or suggestions:
noel@thinkful.com
April 2017

Intro to JavaScript - Thinkful LA

More Related Content

Similar to Intro to JavaScript - Thinkful LA (20)

More from Thinkful (20)

Recently uploaded (20)

Intro to JavaScript - Thinkful LA