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.