Everything You Need to Code, You Learned in Kindergarten

Special thanks to our slide sponsor:

Join the conversation with #ONA17

Your Spirit Guides

Lindsey�COOK

Digital Skills Editor�The New York Times

@Lindzcook

Ashlyn�STILL

Graphics Editor�Reuters

@Ashlynstill

​

What is Programming?

Programming Concepts

• Algorithm: A set of instructions

Warm-Up

• Pair up with 1 partner
• Draw a triangle, a square and a circle on a sheet of paper
• Each can be shaded or unshaded
• The shapes vary in size
• Can be in any location (overlapping, inside each other, etc)
• DON’T let your partner see

Warm-Up

• Now instruct your partner on how to draw your shape
• They can’t look at what you drew
• You can’t look at what they are drawing

What worked? What didn’t?

Object 1:

Shape: Circle

Width: 2 inches

Shaded? Yes

Coordinates: (3, 3)

​

Object 2:

Shape: Square

Width: 4 inches

Shaded? No

Coordinates: (1, 2), (1, -2), (4,2), (4,-2)

​

Object 3:

Shape: Triangle

Width: 4 inches

Shaded? Yes

Coordinates: (-4,-1), (-3,5), (1.2, 0)

Programming Concepts

• Algorithm: A set of instructions
• Variable: Stores information, has a name.
• Example: Name = “Lindsey”

Object 1:

Shape = “Circle”

WidthInInches = 2

Shaded = TRUE

Coordinates = [3, 3]

​

Object 2:

Shape = “Square”

WidthInInches = 4

Shaded = FALSE

Coordinates: = [[1, 2], [1, -2], [4,2], [4,-2]]

​

Object 3:

Shape = “Triangle”

WidthInInches = 4

Shaded = TRUE

Coordinates = [[-4,-1], [-3,5], [1.2, 0]]

Programming Concepts

• Algorithm: A set of instructions
• Variable: Stores information, has a name, has a type.
• Name = “Lindsey” String (ie text)
• DaysofONA = 3 Numbers
• HavingFunYet = TRUE Boolean (True or False)
• PeopleHere = [“Lindsey”, “Ashlyn”] Array (collection, has length)

Object 1:

Shape = “Circle” String

WidthInInches = 2 Number

Shaded = TRUE Boolean

Coordinates = [3, 3] Array

​

Object 2:

Shape = “Square” String

WidthInInches = 4 Number

Shaded = FALSE Boolean

Coordinates: = [[1, 2], [1, -2], [4,2], [4,-2]]

​

Object 3:

Shape = “Triangle” String

WidthInInches = 4 Number

Shaded = TRUE Boolean

Coordinates = [[-4,-1], [-3,5], [1.2, 0]] Array

More Practice With Variables

Programming Concepts

• Algorithm: A set of instructions
• Variable: Stores information, has a name and type.
• String: Text value; Stored in quotes
• Number: Can be stored as whole number (integer) or decimal (float)
• Boolean: True or False values
• Array: A collection of elements. Can be different types or the same type. Has a length.

You are an ONA Object.

More Practice With Variables

ONA Objects Have Four Variables:

• Name (String)
• YearsAtJob (Number)
• FirstTimeAtONA (Boolean)
• NamesofColleaguesHere (Array)

More Practice With Variables

ONA Object

• Name = “Lindsey”
• YearsAtJob = 0
• FirstTimeAtONA = FALSE
• NamesofColleaguesHere = [“Charo”, “Eric”]

More Practice With Variables

ONA Object

• Name = “Ashlyn”
• YearsAtJob = 1
• FirstTimeAtONA = FALSE
• NamesofColleaguesHere = []

Together, we are an Array of these ONA Objects.

More Practice With Variables

ThisRoom = [ person1, person2, person3, person 4, person5, person6, person7]

More Practice With Variables

ThisRoom = [ person1, person2, person3,

person 4, person5, person6, person7]

​

Programs start counting at 0.

0

1

2

3

4

5

6

ONAObject[0].Name

Who’s number 1?

More Practice With Variables

ONAObject[2].Name

ONAObject[15].Name

​

More Practice With Variables

ONAObject[8].Name

ONAObject[3].Name

​

More Practice With Variables

ONAObject[28].Name

ONAObject[42].Name

​

More Practice With Variables

ONAObject[48].YearsatJob

ONAObject[35].YearsatJob

​

More Practice With Variables

ONAObject[12].YearsatJob

ONAObject[7].YearsatJob

​

More Practice With Variables

ONAObject[22].FirstTimeatONA

ONAObject[39].FirstTimeatONA

​

More Practice With Variables

ONAObject[44].FirstTimeatONA

ONAObject[49].FirstTimeatONA

​

More Practice With Variables

Arrays coming, put your thinking cap on!

More Practice With Variables

ONAObject[4].NamesofColleaguesHere

ONAObject[19].NamesofColleaguesHere

​

More Practice With Variables

ONAObject[34].NamesofColleaguesHere[1]

ONAObject[21].NamesofColleaguesHere[1]

More Practice With Variables

ONAObject[26].NamesofColleaguesHere[0]

ONAObject[1].NamesofColleaguesHere[0]

More Practice With Variables

Red Light, Green Light

Programming Concepts

• Algorithm: A set of instructions
• Variable: Stores information, has a name. Can be type string, number, boolean or array
• Conditional: Performs a different action based on if a boolean value evaluates to true or false

Conditional

Performs a different action based on if a boolean value evaluates to true or false

If someCondition is True:

Do something

If someCondition is False:

Do something else (or do nothing)

​

Conditionals: Red Light, Green Light

For all items in ONAObject:

Paces = 0

#create a new variable named Paces and set it to #zero. This is a comment! Meaning you can see it but #the computer knows it isn’t code

Conditionals: Red Light, Green Light

For all items in ONAObject:

If(FirstTimeatONA)

Paces = Paces + 2

Translation: Set Paces equal to whatever Paces is now, plus 2.

Conditionals: Red Light, Green Light

For all items in ONAObject:

If(Name is “Eric”)

Paces = Paces - 1

Conditionals: Red Light, Green Light

For all items in ONAObject:

If(Name is “Ashlyn”)

Paces = Paces - 1

Else

Paces = Paces + 3

Conditionals: Red Light, Green Light

For all items in ONAObject:

If(YearsAtJob > 3)

Paces = Paces + 3

Conditionals: Red Light, Green Light

For all items in ONAObject:

If(YearsAtJob is 1)

Paces = Paces * 1

Conditionals: Red Light, Green Light

For all items in ONAObject:

If(NamesofColleaguesHere.length > 3)

Paces = Paces - Name.length

Else

Paces = Paces + Name.length

Conditionals: Red Light, Green Light

For all items in ONAObject:

If(Name.length > 5)

Paces = Paces + 5

​

Conditionals: Red Light, Green Light

For all items in ONAObject:

If(Name.length > 5)

Paces = Paces + 5

Else if (Name.length is 6)

Paces = Paces + 6

​

Conditionals: Red Light, Green Light

For all items in ONAObject:

If(Name.length > 7)

Paces = Paces + 7

Else if (Name.length is 8)

Paces = Paces + 8

Else if (Name.length < 5)

Paces = Paces + 4

Conditionals: Red Light, Green Light

For all items in ONAObject:

If(Name.length > 7)

Paces = Paces + 7

Else if (Name.length is 8)

Paces = Paces + 8

​

​

Else if (Name.length < 5)

Paces = Paces + 4

Else

Paces = Paces - 4

Programming Concepts

• Algorithm: A set of instructions
• Variable: Stores information, has a name. Can be type string, number, boolean or array
• Conditional: Performs a different action based on if a boolean value evaluates to true or false

Conditionals: Red Light, Green Light

For all items in ONAObject:

If(YearsAtJob is 1)

Paces = Paces * 1

Programming Concepts

• Algorithm: A set of instructions
• Variable: Stores information, has a name. Can be type string, number, boolean or array
• Conditional: Performs a different action based on if a boolean value evaluates to true or false
• Loop: Repeat a block of code while a condition is true or a certain number of times

Loops: Red Light, Green Light

For all items in ONAObject:

If(YearsAtJob is 1)

Paces = Paces + 1

If (ONAObject[0].YearsAtJob is 1)

ONAObject[0].Paces = ONAObject[0].Paces + 1

If (ONAObject[1].YearsAtJob is 1)

ONAObject[1].Paces = ONAObject[1].Paces + 1

If (ONAObject[2].YearsAtJob is 1)

ONAObject[2].Paces = ONAObject[2].Paces + 1

Programming Concepts

• Algorithm: A set of instructions
• Variable: Stores information, has a name. Can be type string, number, boolean or array
• Conditional: Performs a different action based on if a boolean value evaluates to true or false
• Loop: Repeat a block of code while a condition is true or a certain number of times

Let’s Write a News Story

Let’s Write a News Story

Let’s Write a News Story

Let’s Write a News Story

Programming Concepts

• Algorithm: A set of instructions
• Variable: Stores information, has a name. Can be type string, number, boolean or array
• Conditional: Performs a different action based on if a boolean value evaluates to true or false
• Loop: Repeat a block of code while a condition is true or a certain number of times
• Function: A collection of computer statements that achieve a specific purpose in an overall program. Can be called many times when writing code. Takes in variables.

Let’s Write a News Story

WriteNewsStory(variables here!){

#Code here

​

}

What Variables Do You Need?

Let’s Write a News Story

WriteNewsStory(variables here!){

#Code here

​

}

Let’s Write a News Story

First Paragraph: Macy’s Inc. (M) on Wednesday reported fiscal third-quarter net income of $118 million.

Let’s Write a News Story

First Paragraph: Macy’s Inc. (M) on Wednesday reported fiscal third-quarter net income of $118 million.

Let’s Write a News Story

First Paragraph: Macy’s Inc. (M) on Wednesday reported fiscal third-quarter net income of $118 million.

Variables needed: Company (string), abbreviation (string), day (string), quarter (number/string), netIncome (Number)

Let’s Write a News Story

WriteNewsStory(variables here!){

#Code here

​

}

Let’s Write a News Story

WriteNewsStory(Company, abbreviation, day, quarter, netIncome){

NewsStory = Company + “ “ + abbreviation + “ on ” + day + “ reported fiscal ” + quarter + “- quarter net income of $” + netIncome + “ million .”

}

Macy’s Inc. (M) on Wednesday reported fiscal third-quarter net income of $118 million.

Let’s Write a News Story

WriteNewsStory(Company, abbreviation, day, quarter, netIncome){

NewsStory = Company + “ “ + abbreviation + “ on ” + day + “ reported fiscal ” + quarter + “- quarter net income of $” + netIncome + “ million .”

}

Apple Inc. (AAPL) on Thursday reported fiscal second-quarter net income of $871 million.

Let’s Write a News Story

WriteNewsStory(Company, abbreviation, day, quarter, netIncome){

NewsStory = Company + “ “ + abbreviation + “ on ” + day + “ reported fiscal ” + quarter + “- quarter net income of $” + netIncome + “ million .”

}

Home Depot Inc. (HD) on Friday reported fiscal fourth-quarter net income of $30 million.

Programming Concepts

• Algorithm: A set of instructions
• Variable: Stores information, has a name. Can be type string, number, boolean or array
• Conditional: Performs a different action based on if a boolean value evaluates to true or false
• Loop: Repeat a block of code while a condition is true or a certain number of times
• Function: A collection of computer statements that achieve a specific purpose in an overall program. Can be called many times when writing code. Takes in variables.
• Pseudocode: An outline of your computer program. A high level and human-readable look of an algorithm that doesn’t follow any one language

Let’s Write a News Story

function WriteNewsStory(Company, abbreviation, day, quarter, netIncome){

//function in Javascript

var NewsStory = Company + “ “ + abbreviation + “ on ” + day + “ reported fiscal ” + quarter + “- quarter net income of $” + netIncome + “ million .”;

}

Let’s Write a News Story

def WriteNewsStory(Company, abbreviation, day, quarter, netIncome):

# function in Python

NewsStory = Company + “ “ + abbreviation + “ on ” + day + “ reported fiscal ” + quarter + “- quarter net income of $” + netIncome + “ million .”

​

Programming Concepts

• Algorithm: A set of instructions
• Variable: Stores information, has a name. Can be type string, number, boolean or array
• Conditional: Performs a different action based on if a boolean value evaluates to true or false
• Loop: Repeat a block of code while a condition is true or a certain number of times
• Function: A collection of computer statements that achieve a specific purpose in an overall program. Can be called many times when writing code. Takes in variables.
• Pseudocode: An outline of your computer program. A high level and human-readable look of an algorithm that doesn’t follow any one language
• Syntax: The expected grammar of specific programming languages

Let’s Write a News Story

Let’s Write a News Story

WriteNewsStory(variables here!){

#Code here

​

}

Fizz Buzz Test

Fizz Buzz Test

• Print Out Numbers 1-100
• For multiples of 3, print Fizz instead of the number
• For multiples of 5 print Buzz instead of the number
• For numbers that are multiples of both 5 and 3, print FizzBuzz

Fizz Buzz Test: Hints

For number 1-100 (loop)

//write conditionals here!

• Assume you can “print” with print
• Think about the order of your conditionals. Remember the first one that is “true” wins!
• Want to go all the way to code? Another hint: % is an extra math operator that means there is no remainder if you divide (aka is divisible by)
• 15 % 5 = 0
• 15 % 3 = 0
• 15 % 2 = 1

​

Fizz Buzz Test

For number 1-100 (loop)

If number divisible by 3 AND divisible by 5

Print FizzBuzz

Else if number divisible by 3

Print Buzz

Else if number divisible by 5

Print Fizz

Else

Print number

for myNumber in xrange(1,101):

if myNumber % 5 == 0 and myNumber % 3 == 0:

print “FizzBuzz”

elif myNumber % 3 == 0:

print “Buzz”

elif myNumber % 5 == 0:

print “Fizz”

else:

print myNumber

Where Do I Go From Here?

Where Do I Go From Here?

• Our Guide to Choosing A Programming Language
• Download These Slides: http://bit.ly/ONA17CODING
• Techie Sessions at ONA:
• How Bots Are Deepening Relationships With Readers, Thurs., 2
• Creating the Next Generation of Product Thinkers, Thurs. 3:30
• Steal My Tool [Midway]
• Workflow Automation Tools for Newsrooms of Any Size, Sat. 11:30

We Support

• Code Academy
• Start with a Project
• Join the News Nerdery Slack channel
• Make friends with a coder in your organization