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 first 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. Defining 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

http://www.nytimes.com/projects/2012/snow-fall/


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

http://facebook.com


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

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

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)

Undefined (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 first 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

http://jsbin.com


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 truefoo === 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 15foo.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

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/fijetec/1/edit

https://jsbin.com/fijetec/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 first 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

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 [email protected])

Try us out!

mailto:[email protected]


How did everyone find 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:

[email protected]

April 2017

mailto:[email protected]

intro to javascript - thinkful la

Education