Computer Programming

April 10, 2015

By Thomas Ongeri

Slides at: http://bit.ly/tmlearn

Why learn about computer programming?

• Do you use a computer?
• Learn how to create your own apps, software, or websites.
• Make your life easier. Automate tasks.
• Be inspired, take the initiative, and change the world!

How do computers and computer programs work?

• CPU - reads in instructions that are in the form of 0's and 1's. For example, 01100011 01101000 01101001 01110000 01101111 01110100 01101100 01100101 is how a computer translates "chipotle"
• Program (executable) - A file that is a list of instructions.
• Code - Human-readable text that gets translated by a compiler/interpreter to 0's and 1's.

Computer Science Crash Course

There are many different Programming Languages.

Today we will be learning Javascript

But first, let's start from the basics...

Functions and Variables

Don't worry, it's not hard math! All you need to know are functions and variables.

eg. 2+1

or x+1

or.... f(x)=x+1

Functions

Let: f(x) = x + 1

What is f(1)?

f(2)?

Functions (cont.)

In computer programming, functions and variables can be named anything*

Let: thomasTheTicket(ticket) = tickets * 2

thomasTheTicket(100) = ?

thomasTheTicket(100) = 200

Functions (cont.)

Functions can also have more than one (or 0) argument(s).

Let: bobby(x, y, z) = x + y + z

bobby(1, 2, 3) = ?

bobby(1, 2, 3) = 6

Variables

Let: x = 1

Let: bob = 2

2 * x + bob = ?

= 4

Both x and bob are variable names. Variable names can be (almost) anything.

Variables and Functions

Let: myfunction123(a, b) = a + b

Let: hello = 100

myfunction123(hello, 1) = ?

myfunction123(hello, 1) = ?

myfunction123(100, 1) = ?

= 101

Variable assignment

Let: abc = 1

Let: def = 2

If we say z = abc + def

z = ?

z = abc + def

z = 1 + 2

z = 3. Easy!

Variable reassignment

Let: x = 5

Now, let's say:

x = x + 1

What does this mean?

Let: x = 5

x = x + 1

Now substitute the variables on the right side (like before)

x = 5 + 1

x = 6

We changed the value of x!

So now x = 6

What if we do it again?

x = x + 1

x = x + 1

x = 6 + 1

x = 7

So, x = x + 1 means that we are increasing the value of the variable x by one. The right side is the old value and the left side is the new value.

Can you think of why we would need to change the value of a variable?

Some Variable Types

• Numbers -var myNumber = 1
• Booleans - var myBoolean = true (usually denoted true and false)
• Strings - var myString = "Everyday I dream about Chipotle & Cellucor". A string of letters/symbols/numbers. Denoted by the quotation marks "" *Tip: "123" is NOT the same as 123

Logic and Conditionals

In computer programming, we often want events to happen only when certain conditions are met. This is what we call logic and conditionals.

These are often in the form of:

if some condition, then do something

Examples

• If you receive a message, then show a notification. you receive a message is either true or false
• If your game character has enough experience, then your level will increase ( like level = level + 1 :) ) your game character has enough experience is either true or false
• I'm sure you can think of more

True or False?

Conditionals are where we use the boolean variable type. Booleans can be either true or false.

age = 10

x = age > 100

x = ?

is age > 100 true or false?

x = false

Where's the Javascript??

Let's see this in Javascript!

In Javascript, we create functions like this:

function f(x){
    return x + 1;
}

This is the equivalent of saying: f(x) = x + 1

Notice the return. This will give us the output value.

function f(x){
    // We will return the value 1 greater than the given argument
    return x + 1;
}

If you want the computer to ignore a line you typed, prepend it with a //. This is called a single line comment.

Curly braces ({}) show the beginning/end of a function, and semicolons (;) show the end of a statement.

The If Statement

In Javascript, the if statement looks like this:

if (condition){
    // Do something here
}

Simple, right?

Play

x = 10;
y = "no";
if (x > 5){
    y = "yes";
}

x > 5 is a boolean expression. That means that it can be either true or false. What is it in this case?

y = ?

y = "yes"

Now let's try what we have learned!

Let's Play

// Ideas:

• Play with variables:a. characterX, characterY, characterYVelocity, ouchText
• Finish increaseScore function
• Create jump function a. make the character jump

That's all Folks!

Some resources/links

• Code and slides from this talk
• Codecademy
• Udacity
• Treehouse
• Code School
• Code Avengers