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 fac t, 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 pare nthesis 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.