Lecture 0

 Welcome
 What is computer science?
 Binary
 Representing data
 Algorithms
 Pseudocode
 Scratch
Welcome
 When David was a first year, he was too intimidated to take any computer science
courses. By the time he was a sophomore, he found the courage to take the equivalent of
CS50, but only pass/fail.
 In fact, two-thirds of CS50 students have never taken a CS course before.
 And importantly, too:
what ultimately matters in this course is not so much where you end up relative to your
classmates but where you end up relative to yourself when you began
What is computer science?
 Computer science is fundamentally problem-solving.
 We can think of problem-solving as the process of taking some input (details about
our problem) and generate some output (the solution to our problem). The “black box” in
the middle is computer science.

 We need a way to represent inputs, such that we can store and work with information
in a standard way.
Binary
 A computer, at the lowest level, stores data in binary, a numeral system in which
there are just two digits, 0 and 1.
 When we first learned to count, we might have used one finger to represent one
thing. That system is called unary. When we learned to write numbers with the digits 0
through 9, we learned to use decimal.
 For example, we know the following represents one hundred and twenty-three.
 1 2 3
o The 3 is in the ones column, the 2 is in the tens column, and the 1 is in the
hundreds column.
o So 123 is 100×1 + 10×2 + 1×3 = 100 + 20 + 3 = 123.
o Each place for a digit represents a power of ten, since there are ten possible
digits for each place.
 In binary, with just two digits, we have powers of two for each place value:
 4 2 1

 0 0 0
o This would still be equal to 0.
 Now if we change the binary value to, say, 0 1 1, the decimal value would be 3.
 4 2 1
 0 1 1
 If we wanted to represent 8, we would need another digit:
 8 4 2 1
 1 0 0 0
 And binary makes sense for computers because we power them with electricity,
which can be either on or off, so each bit only needs to be on or off. In a computer, there are
millions or billions of switches called transistors that can store electricity and represent a bit
by being “on” or “off”.
 With enough bits, or binary digits, computers can count to any number.
 8 bits make up one byte.
Representing data
 To represent letters, all we need to do is decide how numbers map to letters. Some
humans, many years ago, collectively decided on a standard mapping called ASCII. The
letter “A”, for example, is the number 65, and “B” is 66, and so on. The mapping also
includes punctuation and other symbols. Other characters, like letters with accent marks,
and emoji, are part of a standard called Unicode that use more bits than ASCII to
accommodate all these characters.
o When we receive an emoji, our computer is actually just receiving a decimal
number like 128514 (11111011000000010 in binary, if you can read that more easily) that it then
maps to the image of the emoji.
 An image, too, is comprised of many smaller square dots, or pixels, each of which can
be represented in binary with a system called RGB, with values for red, green, and blue light
in each pixel. By mixing together different amounts of each color, we can represent millions
of colors:

o The red, green, and blue values are combined to get a light yellow color:
 We can see this in an emoji if we zoom in far enoug

h: 
 And computer programs know, based on the context of its code, whether the binary
numbers should be interpreted as numbers, or letters, or pixels.
 And videos are just many, many images displayed one after another, at some
number of frames per second. Music, too, can be represented by the notes being played,
their duration, and their volume.
Algorithms
 So now we can represent inputs and outputs. The black box earlier will
contain algorithms, step-by-step instructions for solving a problem:

 Let’s say we wanted to find a friend, Mike Smith, in a phone book.

o We could start by flipping through the book, one page at a time, until we find
Mike Smith or reach the end of the book.
o We could also flip two pages at a time, but if we go too far, we’ll have to know

to go back a page.
o But an even more efficient way would be opening the phone book to the
middle, decide whether Mike will be in the left half or right half of the book (because the
book is alphabetized), and immediately throw away half of the problem. We can repeat this,
dividing the problem in half each time. With 1024 pages to start, we would only need 10
steps of dividing in half before we have just one page remaining to check.
 In fact, we can represent the efficiency of each of those algorithms with a chart:

o Our first solution, one page at a time, is like the red line: our time to solve
increases linearly as the size of the problem increases.
o The second solution, two pages at a time, is like the yellow line: our slope is
less steep, but still linear.
o Our final solution, is like the green line: logarithmic, since our time to solve
rises more and more slowly as the size of the problem increases. In other words, if the
phone book went from 1000 to 2000 pages, we would need one more step to find Mike. If
the size doubled again from 2000 to 4000 pages, we would still only need one more step.
Pseudocode
 We can write pseudocode, an informal syntax that is just a more specific version of
English (or other human language) that represents our algorithm:
 1 Pick up phone book
 2 Open to middle of phone book
 3 Look at page
 4 If Smith is on page
 5 Call Mike
 6 Else if Smith is earlier in book
 7 Open to middle of left half of book
 8 Go back to line 3
 9 Else if Smith is later in book
 10 Open to middle of right half of book
 11 Go back to line 3
 12 Else
 13 Quit
 Some of these lines start with verbs, or actions. We’ll start calling these functions:
 1 Pick up phone book
 2 Open to middle of phone book
 3 Look at page
 4 If Smith is on page
 5 Call Mike
 6 Else if Smith is earlier in book
 7 Open to middle of left half of book
 8 Go back to line 3
 9 Else if Smith is later in book
 10 Open to middle of right half of book
 11 Go back to line 3
 12 Else
 13 Quit
 We also have branches that lead to different paths, like forks in the road, which we’ll
call conditions:
 1 Pick up phone book
 2 Open to middle of phone book
 3 Look at page
 4 If Smith is on page
 5 Call Mike
 6 Else if Smith is earlier in book
 7 Open to middle of left half of book
 8 Go back to line 3
 9 Else if Smith is later in book
 10 Open to middle of right half of book
 11 Go back to line 3
 12 Else
 13 Quit
 And the questions that decide where we go are called Boolean expressions, which
eventually result to a value of true or false:
 1 Pick up phone book
 2 Open to middle of phone book
 3 Look at page
 4 If Smith is on page
 5 Call Mike
 6 Else if Smith is earlier in book
 7 Open to middle of left half of book
 8 Go back to line 3
 9 Else if Smith is later in book
 10 Open to middle of right half of book
 11 Go back to line 3
 12 Else
 13 Quit
 Finally, we have words that lead to cycles, where we can repeat parts of our
program, called loops:
 1 Pick up phone book
 2 Open to middle of phone book
 3 Look at page
 4 If Smith is on page
 5 Call Mike
 6 Else if Smith is earlier in book
 7 Open to middle of left half of book
 8 Go back to line 3
 9 Else if Smith is later in book
 10 Open to middle of right half of book
 11 Go back to line 3
 12 Else
 13 Quit

Scratch
 We can write programs with the building blocks we just discovered:
o functions
o conditions
o Boolean expressions
o loops
 We’ll use a graphical programming language called Scratch, where we’ll drag and
drop blocks that contain instructions.
 Later in our course, we’ll move onto textual programming languages like C, and
Python, and JavaScript. All of these languages, including Scratch, has more powerful
features like:
o variables
 the ability to store values and change them
o threads
 the ability for our program to do multiple things at once
o events
 the ability to respond to changes in our program or inputs
o …
 The programming environment for Scratch looks like this:

o On the left, we have puzzle pieces that represent functions or variables, or

other concepts, that we can drag and drop into our instruction area in the center.
o On the right, we have a stage that will be shown by our program to a human,
where we can add or change backgrounds, characters (called sprites in Scratch), and more.
 We can drag a few blocks to make Scratch say “hello, world”:

o The “when green flag clicked” block is the start of our program, and below it
we’ve snapped in a “say” block and typed in “hello, world”.
 We can also drag in the “ask and wait” block, with a question like “What’s your
name?”, and combine it with a “say” block for the answer:

 But we didn’t wait after we said “Hello” with the first block, so we can use the “say ()
for () seconds” block:

 We can use the “join” block to combine two phrases so Scratch can say “hello,
David”:

o Notice that we can nest instructions and variables.

 In fact, the “say” block itself is like an algorithm, where we provided an input of
“hello, world” and it produced the output of Scratch (the cat) “saying” that phrase:

 The “ask” block, too, takes in an input (the question we want to ask), and produces
the output of the “answer” block:

 We can then use the “answer” block along with our own text, “hello, “, as two inputs
to the join algorithm …
 … which we pass as input again to the “say” block:

 We can try to make Scratch (the name of the cat) say meow:

o But when we click the green flag, we hear the meow sound over and over
immediately. Our first bug, or mistake! We can add a block to wait, so the meows sound
more normal.
 We can have Scratch point towards the mouse and move towards it:

 We’ll look at a sheep that can count:

o Here, counter is a variable, the value of which we can set, use, and change.
 We can also have Scratch meow if we touch it with the mouse pointer:
 Alternatively, we can have Scratch roar if we do:

o Here, we have two different branches, or conditions, that will repeat forever. If
the mouse is touching it, Scratch will “roar”, otherwise it will just meow.
We can make Scratch move back and forth on the screen with a few more blocks we can
discover by looking around:

o We can even record our own sound to play.

 With two different “costumes,” or images of Scratch with its legs in different
positions, we can even simulate an animated walking motion:

 We look at another program, bark, where we can use the space bar to mute a sea
lion:

o We have a variable, muted, that’s false by default. And our program will

constantly check if the space bar is pressed, and set muted to false if it’s true, or true if not.
This way, we can toggle whether the sound plays or not, since our other set of blocks for the
 sea lion check the muted variable:

 With multiple sprites, or characters, we can have different sets of blocks for each of
them:

o For one puppet, we have these blocks that say “Marco!”, and then a
“broadcast event” block. This “event” is used for our two sprites to communicate with each
other, like sending a secret message. So our other puppet can just wait for this event to say
“Polo!”:

 Now that we know some basics, we can think about the design, or quality of our
programs. For example, we might want to have Scratch cough three times by repeating
 some blocks:

 While this is correct, we can avoid repeating blocks with a loop:

 The next step is abstracting away some of our code into a function, or making it
reusable in different ways. We can make a block called “cough” and put some blocks inside
 it:

o Now, all of our sprites can use the same “cough” block, in as many places as
we’d like.
 We can even put a number of times into our cough function, so we only need a single
block to cough any number of times:

 We look at some examples and discuss how we might implement components of

them with different sprites that follow the mouse cursor, or cause something else to happen
on the stage.
 Welcome aboard!