Intro to javascript (4:4)

Introduction to Javascript

March 2017

http://bit.ly/tf-intro-js

About me

• Jasjit Singh

• Self-taught developer

• Worked in finance & tech

• Co-Founder Hotspot

• Thinkful General Manager

About us

Thinkful prepares students for web development & data science jobs with 1-on-1 mentorship programs

About you — why are you here?

• Do you want to work better with developers?

• Do you want to start working in tech?

• Do you have an idea you want to build?

About you — programming experience?

• I’ll write my first lines of code tonight

• I’ve been coding for under three months

• I’ve been coding for three months or longer

Format for tonight

• Background about Javascript

• Basics of how a website works

• Review key Javascript concepts

• Practice with some challenges

• Next steps

What is programming?

Programming is writing instructions for a computer to execute. Programming is problem-solving.

Perception

Reality

Brief 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

Javascript is extremely popular

This makes it a good place to start

• Has large community of developers, libraries and frameworks

• Lots of job opportunities

• Also the syntax is easier to understand for first-time developers

How the web works

Type a URL from a client (e.g. google.com)

Browser communicates with DNS server to find IP address

Browser sends an HTTP request asking for specific files

Browser receives those files and renders them as a website

Clients / Servers

Client (sends requests) Frontend Developer Manages what user sees

Server (sends response) Backend Developer

Manage what app does

Example: facebook.com

HTML, CSS, & Javascript render

interactive newsfeed

Algorithm determines what’s in your feed

Request

Get data about your friends’s and their posts

Open browser and navigate to facebook.com

Business Logic

Database Servers

Response

Client Server

Are we learning frontend or backend?

100% of client-side web development is in Javascript. You can also use Javascript to write server-side code thanks to Node.js. So technically both!

Concepts we’ll cover

• Variables

• Data types: strings, numbers, booleans

• Functions

Where do we write our code?

When working as a programmer, you’ll use a text editor or an “Integrated Development Environment” (IDE).

Tonight we’re using JSBin so we can skip setup, see results immediately and easily share code

We’ll also use dev tools console. More on that later.

Javascript variables

• A variable is a name that is attached to a value — it gives us a shorthand way to refer to the value elsewhere

• Helps us remember things while we’re executing a program: “managing state”

• Example on JSBin: http://bit.ly/js-example-one

Examples

• Declaring variable: var firstVariable;

• Assigning value: firstVariable = 6;

• Retrieve value: alert(firstVariable)

Example on JSBin: http://bit.ly/js-example-two

Best practices for naming variables

• Names should be (extra) descriptive: “numberOfCats” is better than “x”

• Use camelCasing where first word starts with lower case, subsequent words are upper case

• Must start variable names with a letter

What values can be assigned to a variable?

• String

• Number

• Boolean

• Also Null, Undefined, Arrays, and Objects

Lets also try the Javascript console

Use “dev tools” (CMD + Option + J) to run and debug Javascript code in your browser

Introducing strings

We use strings a lot. Strings are created with opening and closing quotes (either single or double):

var foo = ‘bar’;var bar = “foo”;

Combining (or “concatenating”) strings

Javascript lets you combine two strings by using the + operator. Let’s try it in the console!

var host = “Thinkful”;var className = “Intro to Javascript”;console.log(className + “ with “ + host);=> Intro to Javascript with Thinkful

Quick challenge

• Open JSBin in your browser

• Store your first name in one variable

• Store your last name in another variable

• Combine the two and log your full name

Introducing numbers

The number type in Javascript is used to represent all kinds of numbers, including integers and decimals.

var integerNumber = 3;var floatingPointNumber = 3.00;

Quick challenge

• Open JSBin

• Store two numbers in two different variables

• Add the two numbers

• Multiply the two numbers

Introducing booleans

Boolean is just a fancy word for “true” or “false”

var loggedIn = true;if (loggedIn == true) {alert(“loggedIn was set to true!”)

}

Basic functions

A function lets you separate your code into bite-sized pieces which you can use over again.

When you write a function to use later, you are “declaring” it. When you use (or run) that function you are “calling” it.

Example

Declaring a function function doSomething () {alert(“Done!”)

}

Calling a function doSomething()

More about basic functions

• Functions can save us time because we can use them over and over code. They are like building blocks.

• Functions make your code more organized and easier to read

• Javascript has many built-in functions — you’ve already used a couple!

• In writing less trivial programs, you’ll write many, many functions

Challenge #1

• Go to JSBin.com, make sure auto-run with Javascript isn’t selected

• Declare and call this function: function myFirstFunction() {

console.log(“Hello World!”);}

myFirstFunction();

• Click “Run with JS” to see output in console

Challenge #2

• Open JSBin

• Write a function that logs your name

• Write a function that adds two numbers and logs the result

• Call both functions

More advanced functions — parameters and return

• We can “give” a function some values to use. We call the values we send into a function “parameters”

• We can have a function give a single value back. We use a “return” statement to do that.

• We define what parameters the function accepts when we declare the function.

• We send the actual parameters when we call the function — we put those parameters in the parentheses. Example: addTwoNumbers(2, 3);

An example

function addTwoNumbers(numberOne, numberTwo) {

return numberOne + numberTwo;

}

var result = addTwoNumbers(2, 3);

alert(result);

Challenge

• Open JSBin

• Write a function that takes your first name and your last name as two parameters

• Return a string with your full name

• Call that function

Learning to learn

• Google is your friend!

• Practice at the edge of your abilities

• Ignore the hot new thing. Instead go deep with one technology

More about Thinkful

• Anyone who’s committed can learn to code

• 1-on-1 mentorship is the best way to learn

• Flexibility matters — learn anywhere, anytime

•We only make money when you get a job

Our Program

You’ll learn concepts, practice with drills, and build capstone projects — all guided by a personal mentor

Our Mentors

Mentors have, on average, 10+ years of experience

Our Results

Job Titles after GraduationMonths until Employed

Special Introductory Offer

• Two-week program, includes six mentor sessions for $50

• Starts with HTML/CSS/Javascript

• Option to continue into full web development bootcamp

• Talk to me (or email me) if you’re interested

October 2015

Questions? jas@thinkful.com

schedule a call through thinkful.com