Introduction to Computing Principles (19 mins)

Hi there, my name is Nick Parlante, and
this is the class that explores the basic

qualities of computers. How they work,
what they can and cannot do. And it

requires no computer background at all.
It's just geared for anyone. So before I

get started, I'd like to, take a moment
to, thank Google for supporting my early

research, into this topic, which
ultimately helped make this class. Also a

quick format note, This class is not just
made of videos. For each video section,

there's sorta this written document which
I'm, I'm scrolling through here, that,

parallels the explanations and has
diagrams, and code examples, and stuff in

it. So, really at any time, you can switch
between the video and the document if

you'd like to reread an explanation or try
one of the examples or something. There's

a big difference between watching me do
something and then trying it yourself. So

my advice would be. A lot of times, at the
end of a section, we'll have some

exercises. And so, at that time, before
you try the exercises, you could decide,

well, are you ready to just jump into the
exercises, or would you like to go back to

the document and try some
of the experiments yourself to sort of

cement the knowledge? So, you should at
least know that that's available, for each

one of these sections. So I will say that
the, the fundamental equation of computers

is computer equals powerful plus stupid.
Powerful in the sense that computers can

do just billions of operations. They work
just inconceivable fast. But, the

operations are stupid in the sense that
the operations that the computer can do

are just very simple, they're totally
mechanical. They don't have anything that

you would describe as human insight about
what they're working on. So this weird

combination of, sort of, great power
combined with sort of a mechanical

stupidity. That pattern will come through
very clearly, as we work on these little,

code examples, to sort of play around in
the, in the computer world. Now, I'm being

a little provocative, sort of making fun
of the computer. Oh, they're so stupid,

and, but on the other hand, we see that
computers are, they're very useful. So, in

a way, that's what this class is
about. On the one hand visiting this kind

of funny computer world that's sort of
mechanical, and then connecting it to the

way, you know things like email, and MP3
audio. Things that in the real world that

are very useful. Trying to sort of connect
those two worlds, and show you how the

computer works, and how it fits into the
world. My goal is that, coming out of the

class, you understand how computers work
and how they fit into the world. And

in a way, you're not intimidated by the
computer. You don't think of it as some

magic, inconceivable box. Also I have a
hidden agenda. There are too few computer

science people in the world. There are
many problems that we would like to be

solved, but there just aren't enough
people out there to program them all. So

my hidden agenda is that by opening your
eyes to the computer world and how it

works for some of you, you may find that
you're interested in pursuing computer

science in the future. So, first
approximation I'm gonna look at; How does

a computer work? So inside the computer is
really driven by code. And we're, we'll

get into a lot more detail on this later.
This will just be our first look. So here

I've made a little picture of a
computer. And code inside the computer is

made of these simple instructions. So one
instruction might be to add two numbers,

you know, compute what one plus one is or
check if two is less than ten. So what the

computer does, for this first look, is it
just runs down this list of

instructions. Each instruction is very
simple and the computer is just running

down the list doing them, albeit it's
doing them very quickly. But each

instruction has this very mechanical kind
of fixed feeling. So, I'm gonna say this,

I think this leads to a natural question.
Which is, well; If the, if the computer is

so mechanical just running through the
instructions, how is it that there are so

many useful features in the world? So,
I've got this diagram for that case. So,

on the right hand side I'm going to
imagine some useful features. Like,

red-eye reduction, or instant messaging. And,
I'm gonna say for this discussion, you

know, your phone, your digital camera,
those are all computers. So on the right

hand side, I've got the useful feature,
red-eye reduction. And on the left hand

side, I've got the computer, which is just
going through its, you know, simple

mechanical instructions. So what
connects these two views? And the answer

is that really, that's what computer
programming is. There's a person, a

computer programmer, who at first they
have an idea. Oh, we should have red-eye

reduction, that would be really useful.
And so they use their creativity and their

imagination to think of what would be
something useful to have the computer

could do. And then what the computer
programmer does, is really they structure

and break down that problem, so that the
computer can do it. They really instruct,

and you know, structure things so
the computer can actually, do this

useful thing. That is what computer
programming is. And in fact, any useful

thing that you've done with your digital
camera, or your cell phone, or your

computer, really behind the scenes, there
was a person that was making that happen.

And I kinda like this combination. In a
way, the programmer, the person,

brings their creativity and insight about
the world and thinking of stuff that would

be useful to have done, and that's
their half of the problem. And the computer

brings what the computer's good at. And I
would say the computer is good at being

ultimately pretty inexpensive. And the
computer is able to do these instructions

very, very quickly and so, we get, you
know, ultimately we get this nice

combination. And in a way that's why there are so many computers in

the world doing so many useful things. It
shows this is this is a good partnership

between people and computers. In a way
this diagram also is a little bit of a

summary of this class. We're going to
visit on the left hand side to see sort of

see what the computer world looks like.
And look at the connection between that

and actual features that you've used and sort
of understand how the computer fits into

the world and gets stuff done. So, in the
second half of this section, I'm gonna

start doing little, little coding
examples. And I should mention, this is

gonna require a little bit of patience.
I'm gonna start doing coding. And our

first code examples are going be very
simple. They are not going to do anything

flashy. I'll say it's a little bit like
LEGO bricks. Each bit of code that we

learn is one more brick, and eventually we
are going to be able to put these things

together and make stuff that's pretty
neat. But these first couple of sections,

the things, we got to start somewhere, and
these first examples are very simple. So I

ask you to be patient, I promise we will
get somewhere neat with this material. Oh,

and actually here, I put in a little bit
of foreshadowing, so actually within a

couple of hours of lecturing. We'll start
doing, visual special effects. And so

we'll play around with the famous, shown
here Monkey Moon Banana problem. So that's

just a little foreshadowing of where we're
gonna get. But for today we're just doing

simple bits of coding. So for these code
exercises, we're gonna be using a computer

language called JavaScript. JavaScript is
a really popular language. It works in

web browsers, so that's why it's
extremely popular. And that's why it's an

actual fit for this class. Because it,
because we're working in the web browser,

that means our code can work pretty
easily. We're gonna use JavaScript plus

some extensions that I've added just for
this class. So this is not gonna look

exactly like a professional JavaScript.
We're gonna work on phrases of code that

are ultimately quite short. Just enough to
sort of get across the points

that I want to make and sort of explore computers. But without bringing in a lot of

the baggage that would be required for
writing full, professional programs. All

right, so here's my first code example. So
the way code is going to work for us is

we've got this, little rectangular area.
And this text inside of here,

that's code. And then we'll always have a
run button down here. So when I click the

run button. What's gonna happen is, the
computer goes to the top here and it just

runs through these lines. And so it's
gonna, as we say, it's gonna execute

each line. It's gonna do what it says. So
in this case what we're looking at is the

print function. So there's just the word
print. And the way the print function

works is that it has the word print, and
then there's a left parenthesis. And then

there's a series of things. So here, I
just have the number 6. And then eventually,

the line ends with a right parenthesis and
a semicolon. And what the print function

does is it takes the stuff in between the
parentheses, and it prints it out. And so

actually if you look over here on the
right hand side, this is the output of the

when I hit the run button there. So if I
were to change this to say, print(42). And

run it. Then we see here's the 42. So
that's from this first print line and when

I say print(1,2), that's why we
see the, the one and the two over here. So

the way this works. I did say that our
first examples are very, they're not very

flashy. So certainly that's
true here. So I can try you know, adding a

few more things here. So I could say comma
47. So when I run it, okay, now we see we

get the one and the two in the 47. Also,
just to show that these lines are just

taken one time, I'll copy that one,
and then I can paste it in a few times, I

have multiple lines. So if I run it, now
we can say, alright,

just, you know, we just get a, a
repetition of whatever that output was. So

one thing to, to point out about this, is
that the syntax of this code. Is not at

all free form, It's the opposite, It's
very structured. It has to be just so for

the computer to understand it. And that's
actually a reflection of the inner nature

of the computer. That it has this
mechanical fixed quality and so the

language that it can understand is
also gonna be mechanical and fixed. So

this is a little strange, right at first,
that you can't just start free form just

writing English here and just having, the
computer follow it. So think of this as

your first lesson in the nature of
computers. Or you could think of it as

sort of a when in Rome sort of quality.
It's, like, look, I'm asking you to visit

the world of the computer. And so we're
gonna work a little bit in the language of

computers. It's gonna feel a little
strange right at first. But the reality

is. This is not actually hard. The syntax
is, it may be structure, but it's also

pretty simple. And so, I would encourage
you to, don't be put off by the slightly,

structured mechanical quality of this
language. It will enable us to do

some neat stuff. Alright, that's my first
example, let's try a second example here.

So my first example I just did numbers. So
in computer code there's also a thing

called a string. And here's a first
example of a string here. Hi in quotes so

a string is just a sequence of letters and
in the code it's written between the

double quotes. So that's why I have the
"hi". So print can take in numbers and print

them, turns out it can also print strings.
It just interprets the string as just a

sequence of letters and whatever the
string is it just prints them out over

here. So, I could change this, you know,
it says "hi". I could change it to say, "good

day". So the string can have a space on it.
So if I ran that then we'll just, we'll

just get the good day over here. So in a
computer program, strings and numbers are

both very, very common. So a string in a
computer program might be used to hold

like a URL that you just typed or, maybe
in a word processor each paragraph that

you're working on might be stored as a
string. So the string is basically this,

sequence of letters. It's a very common
sort of data in the computer. Another

thing that's shown in this code example is
this first line here. That's called a

comment, and in JavaScript comments begin
with two slashes, and the way the comment

works is, beginning with the two slashes,
everything to the right on that line the

computer ignores. And so I could use that
to write some remark about, you know, oh,

I have two strings here. Some little
remark or note to myself or something

about the code. And so when I run this,
the computer knows to sort of ignore this

part. Oh, that's just commentary. So, in
some of my examples later on, you'll see

comments sprinkled around where I'm, I'm
making some remark about, what's going on.

So one example I could do here that's a
little tricky. Is, I'm gonna put the word

print inside of this string and we'll see
what that prints. So here and now, the

second line, I get hello to print. So
what's happened is, the word print inside

of a string is not treated as code to run
the way the word print outside, that is a

function that the code is called. So when
it's inside of the double quotes like

that, it's just data. So that is a, a
distinction inside of the code. Well,

alrighty. So, I'm gonna, at the end of
this section, we'll have some exercises

where you can write some code as I've done
here. So as I mentioned before,

the code works within the system of being
a very structured limited syntax. And it's

actually a very common error, even a, you
know, a professional programmer who

writes code all day long. When they're
typing in some code, there will tend to be

little syntax errors, sprinkled through
the code. Oh, maybe a right parenthesis

is missing or there's a typo in one of the
words. And, those syntax errors are very

easy to fix. And so it means that when
you first hit that run button,

it is very common that there'll be some
little typo that has to be fixed. And I

want you to understand that. Those little
errors do not reflect some deep

misunderstanding on your part or some flaw,
those are just superficial little errors

that happen in coding all the time. And
professional programmers make those all

the time, and we just think nothing
of fixing those. We, we don't even think

about it anymore. And so, I think that, when
people are first introduced to coding,

this is something that derails them a
little bit, that there are these little

syntax errors and it kinda, it puts them
off their game and they think they're doing something terribly wrong when in fact, everyone

makes those errors. It's absolutely no big
deal. So. To help, diffuse that problem a

little bit, I just wanna go through a
bunch of examples where I've... So, I've

set up some examples here, where I just
have typical little syntax errors. And I

wanna show you what the error looks like
when you hit the run button. Right? So

what's gonna happen is, when I hit the run
button, it's not gonna work. I'm gonna get

some kinda little error. And so I wanna
show you the process of going from the

error and fixing the little syntax
problem, just so you're a little bit accustomed. Like,

oh yeah, when you first hit the run
button, that's a very common thing that's

gonna happen. So, let's just go through
these. Alright, so I, I hit the run

button. And, you know, instead of running
and producing output, I got a little bit

of an error over here, a little error
message. Sometimes the error messages are

pretty good, describing what's going on.
So, let's read this first one, It says,

Error: prlnt is not defined. So,
what's going on here, is print is a

function, But this second one here, line
two, and the, actually in this case it,

well, this won't always work, but a lot of
times it'll highlight the line that has

the problem. The problem is that it's a
typo. It doesn't say P R I N T, it says P R L N T.

So if I change that to an i. Ha!
Now it works. So, this little program just

prints A, one and a B, a two and a C and a
three, so it's just a little pointless

example I made up. Now of course, I did L,
because I was trying to think of a what's

a letter that looks like an I. You would
have to come look carefully, so I was

being a mean professor there. Alright,
let's try another one of these. So I'll

hit the run button on this one. It says
error, unterminated string literal, and it

highlights the second line. So I'm just
gonna look at the second line from left to

right. You see the one, and there's the B,
So you see, the problem here is that this

is a string. Our intention was the string
B, but the closing quote is missing. You

need both quotes. I'll try the third one here. Let's

see, error, missing right parenthesis. So
again, it's highlighting the line. So I'm

gonna, actually, so in this case, the
error message is actually

pretty good. It's just saying, hey, look.
As with the quotes, the left parenthesis

and the right parenthesis, they need to
match. Like there must be a right

parenthesis there, exactly there for the
print command. So now that one works.

Alright, here's the last one. Something
wrong, it says error, missing right parenthesis, but I looked and the right parenthesis is there. but it happen to this case

the error message is just wrong.
Sometimes, when there's a syntax error,

the computer, it just becomes confused and
it cannot diagnose for you in the error

message, it can basically just say, well,
something's wrong in line two here. So I

recommend just looking carefully from left
to right and look here, it looks

pretty reasonable. It happens, in this
case what's missing, is the comma. And I

think that's an example of maybe the
difference between computers and humans. A

human could look at that and see your
intent. Like, oh, I see the intention here

was to print a one and then a B. But the
computer with this mechanical quality,

it's like. Things have to be just as
they're supposed to and so the comma is

not optional there must be a comma there
and so we're stuck until we fix it. All

right. Now that one works. Okay. So that's
our first section of just basic print

with, numbers and strings. I've got one
example problem here that I'll try. So this is

what the exercises will look like a lot of
times. Although the later exercises will

be more fun, I do promise that. So it
says, change the code below so that when

run it produces exactly this output. So it
says one, two, buckle, so this is based on

the, one, two, buckle my shoe. So this
code, there, there's a code here that does

something, but it's just not, not the
right thing so we're supposed to change

it. Let's see. For one, so what I'm gonna
do is I'm gonna add a two, and then I

gotta remember to put in the comma, and
then I'll change this string to be a

buckle. Now I can just run it, just see
what that does. I'd encourage you to, you

know, if you have some idea of the code,
or you just wanna try something, you know,

you're never gonna break anything by just
typing something in here and hitting the

wrong button. So, it's good to have a feeling of experimentation. So,

there's the first line. And I'll check the
second line. So three comma, four comma,

knock. Alright, oh, right, now that works.
So often times when I do a little examples

in a document like this It might be that
in the video, I'll do a bunch of

examples and then you may wanna go try,
you know, be, you'll be curious about the

second one. And so you wanna go visit that
one and try some variant and hit the wrong

button yourself, that is absolutely
something you're, you're free to do. Often

times, in the document, I'll have the
little show solution button. So, that

means, that you can go visit it and it's
blank, so you could do your experiment.

But if then if you're curious what the
code was that I used, then that's also

available in the document so you can
compare it to your solution. Or if you

wanna copy out of it, or whatever, that's
fine. Okay. So, that finishes our first

section, so check out those coding
exercises.