WEBVTT X-TIMESTAMP-MAP=LOCAL:00:00:00.000,MPEGTS:900000 00:00:00.000 --> 00:00:09.790 [MUSIC PLAYING] 00:00:09.790 --> 00:00:12.310 SPEAKER: So what does it mean to program a computer? 00:00:12.310 --> 00:00:14.350 At the end of the day, programming is all about 00:00:14.350 --> 00:00:17.270 writing software, or coding, so to speak. 00:00:17.270 --> 00:00:19.870 And this means writing english-like syntax 00:00:19.870 --> 00:00:23.650 into a text editing program, something like Microsoft Word, but simpler, 00:00:23.650 --> 00:00:25.570 in such a way that the computer ultimately 00:00:25.570 --> 00:00:29.192 can understand the english-like syntax that you're writing. 00:00:29.192 --> 00:00:31.150 Now, it turns out there are so many programming 00:00:31.150 --> 00:00:34.316 languages in the world-- indeed it can get completely overwhelming as to how 00:00:34.316 --> 00:00:37.210 many there are, and which one you choose, and one you should use it, 00:00:37.210 --> 00:00:39.490 and how you should recruit someone who actually knows 00:00:39.490 --> 00:00:42.100 a particular language --but nicely enough, 00:00:42.100 --> 00:00:46.720 there are some fundamental constructs and fundamental ideas that underlie 00:00:46.720 --> 00:00:50.560 most programming languages, so that once you start to understand and pick up 00:00:50.560 --> 00:00:53.920 those fundamentals can you apply that fundamental understanding 00:00:53.920 --> 00:00:57.220 to almost any language in the world that you might subsequently learn. 00:00:57.220 --> 00:00:59.961 Now there's certainly some technical differences among languages, 00:00:59.961 --> 00:01:02.710 and there's certainly some historical differences among languages, 00:01:02.710 --> 00:01:06.100 because the reason that we have so many languages 00:01:06.100 --> 00:01:09.640 is because humans are constantly getting better at writing software. 00:01:09.640 --> 00:01:12.280 Humans are constantly figuring out, oh, gee, 00:01:12.280 --> 00:01:15.230 wouldn't it be nice to have my language have some other feature 00:01:15.230 --> 00:01:18.130 so that it's easier for me to get real work done? 00:01:18.130 --> 00:01:20.500 And so as in the past when you see this sort 00:01:20.500 --> 00:01:24.550 of layering of more and more sophisticated, more and more featureful 00:01:24.550 --> 00:01:27.890 tools being layered on top of the simpler of the tool. 00:01:27.890 --> 00:01:31.780 So today, like always, we'll sort of start down here, work our way up, 00:01:31.780 --> 00:01:35.110 and then realize here after can you apply most of these lessons learned 00:01:35.110 --> 00:01:37.089 to yet other contexts still. 00:01:37.089 --> 00:01:39.130 So what are some of the constructs that you might 00:01:39.130 --> 00:01:41.620 see in many programming languages? 00:01:41.620 --> 00:01:44.140 Well, let me propose a few new vocabulary words. 00:01:44.140 --> 00:01:47.327 Functions, loops, variables, conditions, and there's even more than that. 00:01:47.327 --> 00:01:50.660 And you might recognize, of course, some of these terms from different contexts, 00:01:50.660 --> 00:01:52.040 but what do they mean? 00:01:52.040 --> 00:01:54.190 Well, what does it mean to program a computer? 00:01:54.190 --> 00:01:58.870 It means to write some instructions that tell that computer what to do. 00:01:58.870 --> 00:02:02.950 Now, if I pretend for a moment to be that computer, albeit in human form, 00:02:02.950 --> 00:02:05.140 what kinds of things could you tell me to do 00:02:05.140 --> 00:02:09.789 if you were the programmer commanding me to follow your instructions? 00:02:09.789 --> 00:02:12.337 Well, perhaps here as I stand with two feet on stage, 00:02:12.337 --> 00:02:14.170 one of the simplest things you could command 00:02:14.170 --> 00:02:19.450 me to do by saying it verbally or typing it out for me is to say, move. 00:02:19.450 --> 00:02:23.647 And so if you were to command me to move, I might take a step like this. 00:02:23.647 --> 00:02:26.480 Now, that wasn't all that productive, I didn't make my way very far. 00:02:26.480 --> 00:02:31.450 But if you commanded me again to move, I might take a second step, like this. 00:02:31.450 --> 00:02:36.870 But that quickly becomes tedious telling David, move, move, move. 00:02:36.870 --> 00:02:40.090 I mean, that's not a particularly compelling way to program, 00:02:40.090 --> 00:02:43.870 so wouldn't it be nice to tell me to do something again and again 00:02:43.870 --> 00:02:45.979 and again, but much more succinctly? 00:02:45.979 --> 00:02:48.520 For instance, if you'd want to tell someone in the real world 00:02:48.520 --> 00:02:50.500 to do something again and again, you don't just 00:02:50.500 --> 00:02:54.550 keep saying it presumably again and again and again, you might say instead, 00:02:54.550 --> 00:02:57.190 hey, David, move five times. 00:02:57.190 --> 00:03:00.610 One, two, three, four, five. 00:03:00.610 --> 00:03:03.010 And so more succinctly, albeit in English, 00:03:03.010 --> 00:03:05.860 can you get me to do something again, and again, and again. 00:03:05.860 --> 00:03:07.750 And that something is the same thing. 00:03:07.750 --> 00:03:09.730 And so in the context of a computer program, 00:03:09.730 --> 00:03:14.170 we might call move, the act of me moving from one spot to another, a function, 00:03:14.170 --> 00:03:15.160 a procedure. 00:03:15.160 --> 00:03:19.930 Really an action, a verb-like construct that's just doing something. 00:03:19.930 --> 00:03:22.930 And a loop, meanwhile, as the word rather suggests, 00:03:22.930 --> 00:03:26.984 is this notion of doing something again and again, cyclically, so to speak. 00:03:26.984 --> 00:03:29.650 And even though I've done it thus far in English, saying, David, 00:03:29.650 --> 00:03:34.870 move five times, you can translate this intuition ultimately to programming 00:03:34.870 --> 00:03:36.250 languages as we'll soon see. 00:03:36.250 --> 00:03:39.910 Now, meanwhile, a variable you might recall from a context like algebra. 00:03:39.910 --> 00:03:41.620 X, or y, or z. 00:03:41.620 --> 00:03:45.460 Now, it turns out in many programming languages, do have variables as well, 00:03:45.460 --> 00:03:49.720 and it turns out you can name them in a more interesting way than x, y, and z. 00:03:49.720 --> 00:03:52.570 In fact, you might name a variable counter, 00:03:52.570 --> 00:03:56.120 if you wanted to keep track of how many steps you have taken. 00:03:56.120 --> 00:04:00.520 So for instance, if someone commanded me, the computer in this story still, 00:04:00.520 --> 00:04:04.614 to just move forever, I could move forever. 00:04:04.614 --> 00:04:07.030 And this is not going to end well at the end of the stage, 00:04:07.030 --> 00:04:10.360 but simultaneously could I create a variable in my mind 00:04:10.360 --> 00:04:13.480 called counter, or x, or y, or z, whatever, but counter is more 00:04:13.480 --> 00:04:16.029 descriptive, and I could keep track of how many times 00:04:16.029 --> 00:04:19.160 I'm moving while moving indefinitely. 00:04:19.160 --> 00:04:27.190 So counter is 1, 2, 3, 4, 5, 6, 7, 8, and we'll stop it at that point. 00:04:27.190 --> 00:04:28.960 But loops indeed can be infinite. 00:04:28.960 --> 00:04:31.100 They can run forever for better or for worse. 00:04:31.100 --> 00:04:33.308 And as an aside, if you've ever noticed your computer 00:04:33.308 --> 00:04:36.850 kind of spiraling out of control whereby it's the beach ball is spinning, 00:04:36.850 --> 00:04:39.340 or the little hourglass, or the like, it might very well be 00:04:39.340 --> 00:04:42.430 that your computer is stuck in an infinite loop, 00:04:42.430 --> 00:04:44.380 doing something again and again and again 00:04:44.380 --> 00:04:47.890 that maybe is deliberate, like a clock ticking forever, 00:04:47.890 --> 00:04:51.640 sometimes loops can be good if they tick forever, but sometimes it can be a bug. 00:04:51.640 --> 00:04:55.030 A mistake, in a program, as we'll soon see, that a programmer, a human, 00:04:55.030 --> 00:04:56.060 did not anticipate. 00:04:56.060 --> 00:04:58.560 And so a program just keeps running and running and running, 00:04:58.560 --> 00:05:02.080 consuming all of your computer's resources, or memory, or CPU, 00:05:02.080 --> 00:05:05.170 and so you can't really do useful work on it. 00:05:05.170 --> 00:05:08.170 So loops can be both good and bad in contexts like that. 00:05:08.170 --> 00:05:09.580 And then conditions. 00:05:09.580 --> 00:05:12.480 A condition is a way for me to fix this problem. 00:05:12.480 --> 00:05:16.710 For instance, I might be told by a programmer, move forever, 00:05:16.710 --> 00:05:20.370 but if you're about to walk off the stage, stop. 00:05:20.370 --> 00:05:22.260 The operative word there being if. 00:05:22.260 --> 00:05:26.760 So irrespective of variables, I might just be moving, and moving, and moving, 00:05:26.760 --> 00:05:29.940 and constantly checking if I'm nearing the edge, am I at the edge? 00:05:29.940 --> 00:05:30.690 Am I at the edge? 00:05:30.690 --> 00:05:31.398 Am I at the edge? 00:05:31.398 --> 00:05:34.950 Oh, I am, and so I should stop. 00:05:34.950 --> 00:05:39.090 So if I am about to step off of the stage, I should stop. 00:05:39.090 --> 00:05:42.570 And so I can conditionally fix this kind of problem. 00:05:42.570 --> 00:05:44.490 And there's other constructs, still, but this 00:05:44.490 --> 00:05:48.510 is to say ultimately that programming, or coding as it's commonly called, 00:05:48.510 --> 00:05:51.070 but the terms are pretty much interchangeable, 00:05:51.070 --> 00:05:54.540 is really just this process of translating this human intuition 00:05:54.540 --> 00:05:57.900 to a language, a textual language, a typed language, 00:05:57.900 --> 00:06:00.840 often, that a computer understands. 00:06:00.840 --> 00:06:03.600 But there's many different ways to speak to a computer, 00:06:03.600 --> 00:06:06.570 much like we have so many different spoken languages. 00:06:06.570 --> 00:06:08.760 We humans among cultures, among countries, 00:06:08.760 --> 00:06:12.690 within countries, so do computers understand different languages, 00:06:12.690 --> 00:06:17.190 so long as humans have kind of sort of taught those computers 00:06:17.190 --> 00:06:18.810 to understand those languages. 00:06:18.810 --> 00:06:22.230 Which is to say that when you buy a Mac, or a PC, or whatever, 00:06:22.230 --> 00:06:24.090 it doesn't necessarily come with some built 00:06:24.090 --> 00:06:26.820 in support for a whole bunch of programming languages. 00:06:26.820 --> 00:06:29.760 The end of the day, it's going to understand binary, zeros and ones, 00:06:29.760 --> 00:06:33.750 and it's going to understand a so-called instruction set, whereby Intel, 00:06:33.750 --> 00:06:37.050 or whoever makes the CPU inside preprogrammed it to understand 00:06:37.050 --> 00:06:39.900 certain instructions like add, and subtract, and move, 00:06:39.900 --> 00:06:41.550 and load, and so forth. 00:06:41.550 --> 00:06:44.820 But beyond that, it doesn't necessarily know 00:06:44.820 --> 00:06:47.580 how to do all that much with your human instructions, 00:06:47.580 --> 00:06:50.550 unless you or some company, someone, has taught 00:06:50.550 --> 00:06:52.560 it to understand other languages. 00:06:52.560 --> 00:06:55.230 And so there are languages called assembly language, 00:06:55.230 --> 00:06:57.540 there's something a little easier to read called C, 00:06:57.540 --> 00:07:02.070 then there were languages like C++ and Objective-C, and now there's Perl, 00:07:02.070 --> 00:07:05.100 and Python, and PHP, and Ruby, and Java, and JavaScript, 00:07:05.100 --> 00:07:10.320 and so many others still, but those are the results of humans over time writing 00:07:10.320 --> 00:07:15.000 software that can run on Macs and PCs that allows the computer now 00:07:15.000 --> 00:07:18.720 to understand not just zeros and ones, but higher level languages. 00:07:18.720 --> 00:07:21.990 Things that humans can express much more pleasurably 00:07:21.990 --> 00:07:26.230 and easily than just zeros and ones alone. 00:07:26.230 --> 00:07:29.130 And these languages don't have to be textual, it turns out. 00:07:29.130 --> 00:07:32.070 In fact, when first exploring programming and programming 00:07:32.070 --> 00:07:36.720 languages more generally, I daresay it's more straightforward, and perhaps 00:07:36.720 --> 00:07:43.090 a little bit more fun, to actually sort of program by way of pictures, 00:07:43.090 --> 00:07:45.960 if you will, by way of puzzle pieces, we'll call them. 00:07:45.960 --> 00:07:49.290 So pictured here is perhaps one of the simplest programs you can write. 00:07:49.290 --> 00:07:54.030 And it's sort of entered into history as one of the most canonical programs you 00:07:54.030 --> 00:07:55.980 can write, demonstrative of what you might 00:07:55.980 --> 00:07:58.070 do in a language on your first day. 00:07:58.070 --> 00:08:01.320 And it just says, in this context, when green flag clicked, say, hello, world. 00:08:01.320 --> 00:08:05.370 Hello, world, being the buzz phrase that permeates most of programming history 00:08:05.370 --> 00:08:06.720 these days. 00:08:06.720 --> 00:08:11.130 This is a program that if you run it with the right software on your Mac 00:08:11.130 --> 00:08:15.630 or PC, will actually print the message on the screen, hello, world. 00:08:15.630 --> 00:08:19.200 And what's nice is that it doesn't quite look like other languages, which we'll 00:08:19.200 --> 00:08:21.992 see soon are very textual, and are a little arcane, a little harder 00:08:21.992 --> 00:08:25.116 to wrap your mind around because there's so much punctuation that they tend 00:08:25.116 --> 00:08:26.940 to have, but we can explore for just a bit 00:08:26.940 --> 00:08:30.210 here programming, by way of this graphical language called 00:08:30.210 --> 00:08:34.919 Scratch, via which we can see some of these same ideas. 00:08:34.919 --> 00:08:38.070 Functions, loops, conditions, and variables, and more 00:08:38.070 --> 00:08:41.770 come to life, so to speak, on the screen. 00:08:41.770 --> 00:08:44.790 So let me pull up exactly this program called Scratch. 00:08:44.790 --> 00:08:48.340 And there are four main areas to this particular program. 00:08:48.340 --> 00:08:51.390 It's freely available software, and you can also access it via the web, 00:08:51.390 --> 00:08:53.460 though I'm using a downloadable version here. 00:08:53.460 --> 00:08:55.800 And you'll see at left, perhaps most obviously, 00:08:55.800 --> 00:08:58.530 this cat, who goes by the name Scratch. 00:08:58.530 --> 00:09:00.750 Scratch here is an example of a sprite, which 00:09:00.750 --> 00:09:02.550 is a term in the world of computer graphics 00:09:02.550 --> 00:09:05.760 that refers to some kind of entity, often some kind of character, 00:09:05.760 --> 00:09:08.820 that can do things, maybe move up, down, left, right, or the like. 00:09:08.820 --> 00:09:10.528 Meanwhile on the right hand side, there's 00:09:10.528 --> 00:09:14.430 this blank slate, this big canvas, the scripts area where eventually I'm 00:09:14.430 --> 00:09:18.510 going to able to drag and drop some programming pieces, some puzzle pieces, 00:09:18.510 --> 00:09:20.640 in order to get this sprite to do something. 00:09:20.640 --> 00:09:24.390 And the pieces I can drag and drop and use are these here in the middle. 00:09:24.390 --> 00:09:27.340 And there's going to be way more than we even look at right now, 00:09:27.340 --> 00:09:30.930 but you'll see that they're categorized and also colorized by category, 00:09:30.930 --> 00:09:34.140 so we'll play around for just a bit with some of these sample constructs, 00:09:34.140 --> 00:09:35.830 and see what we can't do. 00:09:35.830 --> 00:09:40.756 So in fact, let's see if we can't translate my human example to a cat. 00:09:40.756 --> 00:09:42.630 Hopefully that's not too much of a leap here, 00:09:42.630 --> 00:09:44.755 and let's see if we can get Scratch to do something 00:09:44.755 --> 00:09:46.990 quite akin to what I just did. 00:09:46.990 --> 00:09:49.440 So I know from having used this software before, 00:09:49.440 --> 00:09:52.290 that I probably want to start with this events pallet 00:09:52.290 --> 00:09:54.624 up at top right in the middle of the screen. 00:09:54.624 --> 00:09:57.790 And you'll notice if I zoom in, there's a whole bunch of puzzle pieces here, 00:09:57.790 --> 00:10:01.260 but only one that looks familiar thus far when green flag clicked. 00:10:01.260 --> 00:10:02.930 What is that green flag referring to? 00:10:02.930 --> 00:10:05.850 Well, if we look at the stage over here on which Scratch lives, 00:10:05.850 --> 00:10:07.710 notice in its top right hand corner, there's 00:10:07.710 --> 00:10:10.050 both a green flag, which is going to mean go, 00:10:10.050 --> 00:10:12.660 and a red stop sign like thing that's going to mean stop. 00:10:12.660 --> 00:10:14.743 So those are going to be the two buttons via which 00:10:14.743 --> 00:10:17.220 we can start and stop my program. 00:10:17.220 --> 00:10:20.100 So kind of equivalent in your Mac and Windows world 00:10:20.100 --> 00:10:22.930 to double clicking an icon to run some program. 00:10:22.930 --> 00:10:26.160 So if I now zoom out, notice I can click on and drag this 00:10:26.160 --> 00:10:28.630 when green flag clicked puzzle piece. 00:10:28.630 --> 00:10:31.350 And I can put it wherever I want, but much like in English, I 00:10:31.350 --> 00:10:34.380 might start at the top, and work my way down and to the right, 00:10:34.380 --> 00:10:35.640 so I'm just going to let go. 00:10:35.640 --> 00:10:38.350 And you'll see now that it's plopped itself there, 00:10:38.350 --> 00:10:41.550 but it's not going to do anything, because all my program is saying, 00:10:41.550 --> 00:10:45.116 literally, is when green flag clicked. 00:10:45.116 --> 00:10:46.240 It's kind of a cliffhanger. 00:10:46.240 --> 00:10:48.281 We need to attach some other puzzle pieces there. 00:10:48.281 --> 00:10:52.670 And the puzzle piece we saw a moment ago was something that looked like this. 00:10:52.670 --> 00:10:56.000 And here we have a new palette, the looks palette. 00:10:56.000 --> 00:10:57.980 There's so many purple puzzle pieces here, 00:10:57.980 --> 00:11:00.040 but I'm just going to go ahead and grab, say, one 00:11:00.040 --> 00:11:02.170 of them, which by default says, hello. 00:11:02.170 --> 00:11:07.750 But notice, this puzzle piece as I pull it over to the other puzzle piece, 00:11:07.750 --> 00:11:11.080 notice how this little white line appears sort of magnetically. 00:11:11.080 --> 00:11:14.590 It's because these two puzzle pieces, as per their similar shapes, 00:11:14.590 --> 00:11:15.860 want to snap together. 00:11:15.860 --> 00:11:18.250 And if I let go, notice indeed, the puzzle piece 00:11:18.250 --> 00:11:20.090 does automatically connect itself. 00:11:20.090 --> 00:11:23.048 And if I don't want to just say hello, exclamation point, but just more 00:11:23.048 --> 00:11:25.180 subtly, hello, comma world, I can just click 00:11:25.180 --> 00:11:28.050 in that white box and type my new text. 00:11:28.050 --> 00:11:30.100 So now consider what this is saying. 00:11:30.100 --> 00:11:33.280 When green flag clicked, say, hello world. 00:11:33.280 --> 00:11:36.100 And it kind of flows logically, much like it did verbally 00:11:36.100 --> 00:11:38.300 as I was programming myself a moment ago. 00:11:38.300 --> 00:11:42.150 So let's go ahead and click the green flag. 00:11:42.150 --> 00:11:43.040 We're programming. 00:11:43.040 --> 00:11:46.790 We've just run the program, it has stopped, and notice he's still saying, 00:11:46.790 --> 00:11:49.489 hello, world, because the computer, in many contexts, 00:11:49.489 --> 00:11:51.280 is going to take you pretty darn literally. 00:11:51.280 --> 00:11:56.310 And the fact that I didn't do what, explains why he's still saying hello? 00:11:56.310 --> 00:12:00.100 Right, I never told the computer to stop saying hello, 00:12:00.100 --> 00:12:03.310 or stop the program explicitly, and so it's going to keep doing this 00:12:03.310 --> 00:12:07.150 until I command it otherwise, as by stopping the program outright. 00:12:07.150 --> 00:12:09.610 Now, meanwhile, we had movement. 00:12:09.610 --> 00:12:13.250 So it's one thing to have a function, an action, like say. 00:12:13.250 --> 00:12:15.275 What if we wanted to have Scratch actually move? 00:12:15.275 --> 00:12:18.400 So let me get rid of this purple puzzle piece, and just drag it and let go. 00:12:18.400 --> 00:12:20.930 It will just disappear if you drag it over to the middle. 00:12:20.930 --> 00:12:25.790 And now I kind of want to control the functionality of my program. 00:12:25.790 --> 00:12:28.030 So if I click on the control palette here, 00:12:28.030 --> 00:12:32.340 you'll notice a whole bunch of yellow puzzle pieces, one of which is forever. 00:12:32.340 --> 00:12:35.260 And that kind of connotes exactly what we're looking for, 00:12:35.260 --> 00:12:37.900 this notion of doing something cyclically, again, and again. 00:12:37.900 --> 00:12:40.330 It too wants to snap together when I let go. 00:12:40.330 --> 00:12:42.260 And now this seems a little unfortunate. 00:12:42.260 --> 00:12:44.980 Darnit, if this forever block doesn't leave me 00:12:44.980 --> 00:12:48.280 with just barely any room for other puzzle pieces, but no problem. 00:12:48.280 --> 00:12:51.400 The software that our friends at MIT wrote here for Scratch 00:12:51.400 --> 00:12:54.140 is going to automatically grow that block as needed 00:12:54.140 --> 00:12:56.290 once I start inserting new pieces. 00:12:56.290 --> 00:12:57.990 So I want to move. 00:12:57.990 --> 00:12:59.990 Motion sounds about right. 00:12:59.990 --> 00:13:02.480 And indeed, there we go, move 10 steps. 00:13:02.480 --> 00:13:05.440 Let me go ahead and put this inside, and notice this white line 00:13:05.440 --> 00:13:06.340 appears magnetically. 00:13:06.340 --> 00:13:08.950 I let go, it grows to fill it, and snaps into place. 00:13:08.950 --> 00:13:11.650 Let's just do one step as before, and we'll 00:13:11.650 --> 00:13:14.300 see in just a moment what I've done. 00:13:14.300 --> 00:13:15.910 Let's go ahead and click green flag. 00:13:18.650 --> 00:13:22.680 It's a little underwhelmingly slow, but he's literally 00:13:22.680 --> 00:13:26.580 doing what we told him to do one step at a time. 00:13:26.580 --> 00:13:29.666 Thankfully, MIT had the foresight to make sure 00:13:29.666 --> 00:13:31.790 that scratch can never leave the screen completely, 00:13:31.790 --> 00:13:33.970 otherwise it's kind of a frustrating experience. 00:13:33.970 --> 00:13:36.546 So you can always kind of grab onto his little tail here, 00:13:36.546 --> 00:13:38.170 but notice the program's still running. 00:13:38.170 --> 00:13:44.760 So even if I drag him and let go, he is still forever moving one step over, 00:13:44.760 --> 00:13:47.550 and so we'll see him going there again. 00:13:47.550 --> 00:13:50.040 But you'll notice a moment ago, I actually didn't really 00:13:50.040 --> 00:13:54.080 know necessarily where I was going to find the puzzle piece of interest 00:13:54.080 --> 00:13:56.940 to me, and even as I here to have to give some thought as 00:13:56.940 --> 00:13:58.830 to where these various puzzle pieces are, 00:13:58.830 --> 00:14:01.950 this is actually representative of how one might learn a new programming 00:14:01.950 --> 00:14:03.210 language for the first time. 00:14:03.210 --> 00:14:05.520 Once you understand some of the fundamentals, 00:14:05.520 --> 00:14:08.859 can you much more readily start to pick up what you need to know. 00:14:08.859 --> 00:14:10.650 Can you fill in the gaps in your knowledge? 00:14:10.650 --> 00:14:14.130 And thanks to Google, and Bing, and any other search engine out there 00:14:14.130 --> 00:14:17.370 these days, and any number of websites like Stack Overflow, and Hacker News, 00:14:17.370 --> 00:14:20.550 and the like, are there so many technical folks out there who 00:14:20.550 --> 00:14:23.640 can help you by answering questions for you, who have posted long ago 00:14:23.640 --> 00:14:25.740 answers to questions that you can rely on. 00:14:25.740 --> 00:14:28.980 And so indeed, the process of learning how to program these days, 00:14:28.980 --> 00:14:31.170 once you have a solid foundation in one or two 00:14:31.170 --> 00:14:33.900 or more different types of languages, really 00:14:33.900 --> 00:14:36.660 allows you to bootstrap yourself and figure out something new. 00:14:36.660 --> 00:14:39.390 So even as you might dive into an environment like Scratch, 00:14:39.390 --> 00:14:41.460 you realize and take comfort in the fact that you 00:14:41.460 --> 00:14:44.702 don't have to have known or seen every one of its features. 00:14:44.702 --> 00:14:47.910 Simply by pointing, and clicking, and trusting that you're probably not going 00:14:47.910 --> 00:14:51.107 to do much damage to the computer or to the program by just tinkering, 00:14:51.107 --> 00:14:52.440 can you really start to explore. 00:14:52.440 --> 00:14:56.310 And indeed, that's where a lot of the fun of programming starts to come out. 00:14:56.310 --> 00:14:59.550 Now, with that said, this program seems to be 00:14:59.550 --> 00:15:03.210 arguably buggy, and so far as it's kind of lame, if nothing else, 00:15:03.210 --> 00:15:06.870 that Scratch ends up walking pretty much off the side of the screen. 00:15:06.870 --> 00:15:09.090 Wouldn't it be nice if just like my example where 00:15:09.090 --> 00:15:12.150 I was about to walk off stage, but thanks to a condition, 00:15:12.150 --> 00:15:15.150 I didn't, can we prevent that kind of disaster? 00:15:15.150 --> 00:15:18.780 Well, let me go ahead and go into the control block, I think. 00:15:18.780 --> 00:15:22.556 And yep, indeed, there are not only looping constructs like forever, 00:15:22.556 --> 00:15:25.680 and then also notice repeat, where you can specify a finite number of times 00:15:25.680 --> 00:15:27.180 to do something again and again. 00:15:27.180 --> 00:15:30.420 Notice that there's this here, if then. 00:15:30.420 --> 00:15:32.170 And you know what? 00:15:32.170 --> 00:15:37.620 I don't want to move no matter what, I want to move, but then check 00:15:37.620 --> 00:15:39.484 immediately if I'm touching the edge. 00:15:39.484 --> 00:15:42.150 And here, too, I might have to do a little digging to figure out 00:15:42.150 --> 00:15:47.250 what this language can do, but I think if I go under sensing, ah, touching. 00:15:47.250 --> 00:15:49.320 And notice touching currently says mouse pointer, 00:15:49.320 --> 00:15:50.945 which isn't quite what I'm looking for. 00:15:50.945 --> 00:15:53.100 I'm looking for the edge, touching the edge, 00:15:53.100 --> 00:15:56.040 but sure enough, if I go ahead and click this drop down, 00:15:56.040 --> 00:15:58.730 I can change this puzzle piece to ask a question. 00:15:58.730 --> 00:16:00.074 Are you touching the edge? 00:16:00.074 --> 00:16:01.990 And this puzzle piece and the several below it 00:16:01.990 --> 00:16:05.460 are an example of what we might call a Boolean expression, named 00:16:05.460 --> 00:16:07.340 after someone by the name of Boole. 00:16:07.340 --> 00:16:11.160 And a Boolean expression is an expression, a statement, 00:16:11.160 --> 00:16:17.490 a question, whose answer is either yes or no, true or false, one or zero. 00:16:17.490 --> 00:16:19.920 And this is the perfect construct, therefore, 00:16:19.920 --> 00:16:23.760 to put inside of a condition, the proverbial fork in the road, 00:16:23.760 --> 00:16:28.020 or a branch so that you can decide based on that condition exactly what you 00:16:28.020 --> 00:16:28.680 want to do. 00:16:28.680 --> 00:16:33.030 So all that remains is for us to drop into place the Boolean expression 00:16:33.030 --> 00:16:36.210 via which we can answer the question, are we touching the edge? 00:16:36.210 --> 00:16:39.240 So indeed, let me go ahead and drag and drop this blue puzzle piece 00:16:39.240 --> 00:16:39.930 right on there. 00:16:39.930 --> 00:16:42.090 And notice, it too doesn't seem to fit quite right, 00:16:42.090 --> 00:16:43.530 but it's going to grow to fill. 00:16:43.530 --> 00:16:46.050 And now notice inside of the if condition, 00:16:46.050 --> 00:16:48.720 we have an opportunity to slide in one or more other pieces. 00:16:48.720 --> 00:16:50.320 So what do we want to do? 00:16:50.320 --> 00:16:53.410 Well, let me go to motion as well. 00:16:53.410 --> 00:16:56.610 And let's see, if touching edge then, let me go ahead 00:16:56.610 --> 00:16:58.710 and turn some number of degrees. 00:16:58.710 --> 00:17:02.460 I don't think 15 degrees is going to do it, so you notice that's a bug, 00:17:02.460 --> 00:17:03.450 the cat is still going. 00:17:03.450 --> 00:17:05.520 Let me go ahead and hit the stop sign there. 00:17:05.520 --> 00:17:08.369 But we probably don't want to have him turn only 15 degrees, 00:17:08.369 --> 00:17:11.800 we probably want him to reverse his direction entirely. 00:17:11.800 --> 00:17:13.690 So I think that's going to be 180 degrees. 00:17:13.690 --> 00:17:17.050 So let me go ahead and make that change, and then movement, 00:17:17.050 --> 00:17:18.839 he's going a little slow, but that's OK. 00:17:18.839 --> 00:17:21.569 So let me go ahead and drag him back to the middle of the screen, 00:17:21.569 --> 00:17:24.660 click our green flag, and really cross our fingers 00:17:24.660 --> 00:17:29.680 as is not uncommon in programming, and come on, come on. 00:17:29.680 --> 00:17:30.180 All right. 00:17:30.180 --> 00:17:32.250 All right, so still arguably a little buggy. 00:17:32.250 --> 00:17:34.410 I didn't really intend for him to go upside down, 00:17:34.410 --> 00:17:37.990 but he indeed literally did turn around 180 degrees. 00:17:37.990 --> 00:17:40.080 And there too, that's kind of a key takeaway, 00:17:40.080 --> 00:17:42.690 is that in most any programming language, the language, 00:17:42.690 --> 00:17:46.180 and in turn the computer, are only going to do literally what you tell it to do. 00:17:46.180 --> 00:17:49.519 So if I simply told Scratch to sort of turn 180 degrees, 00:17:49.519 --> 00:17:51.060 that's exactly what he's going to do. 00:17:51.060 --> 00:17:54.960 He's not going to reorient himself as a reasonable human being might, 00:17:54.960 --> 00:17:56.610 we would have to write that code. 00:17:56.610 --> 00:18:01.590 Now, meanwhile this gets very boring quickly, so how might I speed him up? 00:18:01.590 --> 00:18:05.910 Well, consider what it means to speed up, and consider in fact what animation 00:18:05.910 --> 00:18:09.780 really is whether in comic book form if you flip through the pages really fast, 00:18:09.780 --> 00:18:13.530 or if you watch a cartoon on TV or online, 00:18:13.530 --> 00:18:17.580 animation really is just the process of showing me one thing after the other 00:18:17.580 --> 00:18:19.210 really quickly, typically. 00:18:19.210 --> 00:18:21.250 Now, this is not all that quick, but what 00:18:21.250 --> 00:18:26.620 if I told Scratch to take not just one step at a time, one small step at that, 00:18:26.620 --> 00:18:29.440 but like 10 steps at a time or the equivalent of 10? 00:18:29.440 --> 00:18:32.080 I can't really move my feet that quickly so we'll pretend, 00:18:32.080 --> 00:18:37.900 but I can tell Scratch to start moving not one step at a time, but, say, 10. 00:18:37.900 --> 00:18:40.822 And he immediately starts to balance a little more animatedly. 00:18:40.822 --> 00:18:42.780 Now, we can have a little bit of fun with this. 00:18:42.780 --> 00:18:47.770 So a little bit of a intellectual aside, if we go to Scratch's sounds feature 00:18:47.770 --> 00:18:51.820 like this, let me go ahead and first stop scratch here, let me go ahead 00:18:51.820 --> 00:18:57.010 and click the microphone to record a new sound, let me click the record button, 00:18:57.010 --> 00:18:58.790 ouch. 00:18:58.790 --> 00:19:01.130 All right, so that is a wave form of what 00:19:01.130 --> 00:19:02.889 the word ouch looks like when I say it. 00:19:02.889 --> 00:19:05.180 I'm going to go ahead and delete the dead air up front, 00:19:05.180 --> 00:19:06.890 and a little bit of the dead air here. 00:19:06.890 --> 00:19:09.440 I'm going to change the name to, let's call it ouch. 00:19:09.440 --> 00:19:12.630 And what's kind of fun now is if I go into a sound, 00:19:12.630 --> 00:19:15.470 notice that ouch is among my available sounds. 00:19:15.470 --> 00:19:17.920 Now, when do I want to play ouch? 00:19:17.920 --> 00:19:19.510 It's kind of a condition too. 00:19:19.510 --> 00:19:24.580 Only if I have walked into the stage do I want this to sound out, 00:19:24.580 --> 00:19:26.740 so let me go ahead and drag it in here. 00:19:26.740 --> 00:19:30.970 And now let's consider before we get to the finale here, what's going on? 00:19:30.970 --> 00:19:35.590 When green flag clicked, do the following forever, again, 00:19:35.590 --> 00:19:37.370 and again, and again, move 10 steps. 00:19:37.370 --> 00:19:40.203 And that's what was getting Scratch to move pretty quickly, but then 00:19:40.203 --> 00:19:43.750 every time you take those 10 steps, take a moment to check if you're touching 00:19:43.750 --> 00:19:46.790 the edge, then turn around 180 degrees. 00:19:46.790 --> 00:19:49.060 But one more thing to do now, because again, 00:19:49.060 --> 00:19:54.640 both the blue and the purple block are inside of this yellow if branch, 00:19:54.640 --> 00:19:56.300 we're going to do both of those. 00:19:56.300 --> 00:20:00.040 So in theory, what Scratch is going to be doing, is as he walks again, 00:20:00.040 --> 00:20:04.990 and again, and again, and again, and again, and he finally gets to the edge, 00:20:04.990 --> 00:20:08.090 hopefully he's going to turn around 180 degrees. 00:20:08.090 --> 00:20:11.290 But a little more literally than I, the human might do. 00:20:11.290 --> 00:20:12.250 So let's try this. 00:20:12.250 --> 00:20:16.060 Oh, and actually, I left out one detail that Scratch will not. 00:20:16.060 --> 00:20:17.365 Ouch. 00:20:17.365 --> 00:20:18.554 Ouch. 00:20:18.554 --> 00:20:19.871 Ouch. 00:20:19.871 --> 00:20:20.370 Ouch. 00:20:20.370 --> 00:20:24.470 So ironic that the cat sounds more like me than I do when walking into walls. 00:20:24.470 --> 00:20:26.316 So that there is Scratch. 00:20:26.316 --> 00:20:28.940 It's just one programming language, and it's graphical at that, 00:20:28.940 --> 00:20:31.148 and we've only scratched the surface of its features. 00:20:31.148 --> 00:20:33.140 And indeed, there's more sophisticated things 00:20:33.140 --> 00:20:37.460 that we can do in order to program even more animatedly, even more 00:20:37.460 --> 00:20:38.300 sophisticatedly. 00:20:38.300 --> 00:20:42.050 And in fact if we skim ahead to one of the first programs I wrote back 00:20:42.050 --> 00:20:46.040 in the day, let me go ahead and show you something called Oscar Time. 00:20:46.040 --> 00:20:48.350 Here is Oscar Time, and you'll hear in just a moment 00:20:48.350 --> 00:20:51.260 as I hit play, not only does this have animation, 00:20:51.260 --> 00:20:55.580 it's also got an incredibly long song, which long story short, was not 00:20:55.580 --> 00:20:57.500 the best design decision back in the day, 00:20:57.500 --> 00:21:00.020 because as I worked through all of this program's bugs, 00:21:00.020 --> 00:21:04.260 all I heard was the Sesame Street song for I think eight or more hours, 00:21:04.260 --> 00:21:06.410 but I have very fond memories nonetheless, 00:21:06.410 --> 00:21:08.689 and this then is Oscar Time. 00:21:08.689 --> 00:21:13.000 [MUSIC PLAYING] 00:21:13.000 --> 00:21:14.410 So what's worth noting now? 00:21:14.410 --> 00:21:17.940 It looks fairly simple at first glance, we have some static imagery at left, 00:21:17.940 --> 00:21:19.930 a trash can, what's in there I wonder? 00:21:19.930 --> 00:21:21.700 And then a piece of trash that's falling. 00:21:21.700 --> 00:21:25.780 But this is an opportunity to consider how is that piece of trash falling? 00:21:25.780 --> 00:21:27.130 Well, it's some kind of sprite. 00:21:27.130 --> 00:21:29.546 And indeed, in Scratch, you can have more than just a cat, 00:21:29.546 --> 00:21:32.050 you can have other animations on the screen as well, 00:21:32.050 --> 00:21:34.270 but what was happening with that piece of trash? 00:21:34.270 --> 00:21:38.496 Well, odds are I had it positioned originally at the top of the screen, 00:21:38.496 --> 00:21:40.370 and there's a puzzle piece that will do that, 00:21:40.370 --> 00:21:43.970 and then I had it moving one or more steps at a time in a loop. 00:21:43.970 --> 00:21:46.720 But then here instead of bouncing, which would be a little strange 00:21:46.720 --> 00:21:51.640 if your trash is just kind of bouncing up and down off the ground, 00:21:51.640 --> 00:21:52.660 I just have it stop. 00:21:52.660 --> 00:21:54.734 So there's probably a condition in there as well. 00:21:54.734 --> 00:21:56.650 I talked over another object that was falling, 00:21:56.650 --> 00:22:00.250 but there's another sprite, this blue sneaker, that also fell from the sky, 00:22:00.250 --> 00:22:02.114 but from a slightly different place. 00:22:02.114 --> 00:22:04.030 And it turns out in many programming languages 00:22:04.030 --> 00:22:08.830 can you use randomness, or really pseudo randomness that the computer simulates, 00:22:08.830 --> 00:22:10.930 and so that's why the shoe, or the sneaker, 00:22:10.930 --> 00:22:12.910 actually fell from a different location. 00:22:12.910 --> 00:22:15.700 And if I kept playing this game again and again by restarting, 00:22:15.700 --> 00:22:18.910 odds are that trash, that sneaker, and now that newspaper 00:22:18.910 --> 00:22:20.990 would fall from different locations. 00:22:20.990 --> 00:22:24.130 So if you've ever played a computer game or game on your phone 00:22:24.130 --> 00:22:26.710 and it's not the same experience every time, 00:22:26.710 --> 00:22:28.920 something kind of sort of changes, like the monsters 00:22:28.920 --> 00:22:32.410 start from a different direction, or the bad guy gets even harder or easier 00:22:32.410 --> 00:22:36.010 depending on your level, that might be the result of some pseudo randomness. 00:22:36.010 --> 00:22:39.790 Asking the computer to just kind of pick a number, or pick a location, 00:22:39.790 --> 00:22:43.144 and then do something with that so that the game is constantly changing. 00:22:43.144 --> 00:22:45.310 Now, this is not all that interesting if all I wrote 00:22:45.310 --> 00:22:47.560 was a program where trash is falling from the sky, 00:22:47.560 --> 00:22:48.910 but notice what you can do. 00:22:48.910 --> 00:22:53.140 You can grab things like the clock, click and drag, and notice, 00:22:53.140 --> 00:22:54.760 this too is probably a condition. 00:22:54.760 --> 00:22:57.280 If near the trash can, open the lid. 00:22:57.280 --> 00:22:59.960 And again, here's the finale, nope. 00:22:59.960 --> 00:23:01.600 Here is the finale. 00:23:01.600 --> 00:23:04.240 As the trash falls into the can properly, 00:23:04.240 --> 00:23:06.940 does Oscar pop out and start counting. 00:23:06.940 --> 00:23:09.430 And indeed, if you do this again, and again, and again, it 00:23:09.430 --> 00:23:11.840 would seem that Oscar is using what? 00:23:11.840 --> 00:23:12.670 A variable. 00:23:12.670 --> 00:23:15.070 And indeed, that's how he's keeping track of the score, 00:23:15.070 --> 00:23:17.560 as might most any computer game. 00:23:17.560 --> 00:23:22.630 Now, you can absolutely program games, animations, interactive pieces 00:23:22.630 --> 00:23:25.780 of art in a language like Scratch, and it actually indeed by design, 00:23:25.780 --> 00:23:27.160 has a pretty high ceiling. 00:23:27.160 --> 00:23:29.500 You can write some pretty sophisticated programs 00:23:29.500 --> 00:23:33.700 way more sophisticated and impressive than the one I did back in the day. 00:23:33.700 --> 00:23:37.810 But what's exciting about that is that it's the result entirely of again, 00:23:37.810 --> 00:23:38.770 this layering. 00:23:38.770 --> 00:23:41.950 Using some very basic constructs, some simple ingredients, 00:23:41.950 --> 00:23:44.380 some building blocks, literally, whereby you 00:23:44.380 --> 00:23:47.350 build on these fundamentals of functions, and loops, 00:23:47.350 --> 00:23:50.290 and variables, conditions, Boolean expressions, and even more. 00:23:50.290 --> 00:23:53.590 And then so long as you take sort of baby steps, so to speak. 00:23:53.590 --> 00:23:56.110 Biting off just a little piece of functionality, 00:23:56.110 --> 00:23:58.030 just get the trash to appear on the screen, 00:23:58.030 --> 00:24:00.280 then just get the trash to move on the screen, 00:24:00.280 --> 00:24:02.350 then get the trash to stop moving on the screen 00:24:02.350 --> 00:24:04.780 when it hits the ground can you begin to take steps, 00:24:04.780 --> 00:24:07.120 and steps, and steps toward your final solution. 00:24:07.120 --> 00:24:11.170 But what's key in programming is to compartmentalize some of the features 00:24:11.170 --> 00:24:13.515 and to do them piecemeal, so that you don't just 00:24:13.515 --> 00:24:15.640 sit down with a blank window in front of you trying 00:24:15.640 --> 00:24:17.170 to bang out the whole entire thing. 00:24:17.170 --> 00:24:19.330 Because invariably, if you're like me, the thing 00:24:19.330 --> 00:24:22.720 is going to be riddled with mistakes, otherwise known as bugs. 00:24:22.720 --> 00:24:26.620 Because it's a little too hard to see everything clearly 00:24:26.620 --> 00:24:30.650 if you're not testing, and testing, and testing perhaps along the way. 00:24:30.650 --> 00:24:33.150 But what do most people program in these days? 00:24:33.150 --> 00:24:35.650 Well, you can use Scratch, but generally speaking, someone's 00:24:35.650 --> 00:24:40.120 going to use a higher level, a more traditional language that 00:24:40.120 --> 00:24:42.107 tends to be textual, and not graphical. 00:24:42.107 --> 00:24:44.440 So it's a wonderful environment to learn programming in, 00:24:44.440 --> 00:24:46.400 it's a wonderful environment to teach programming in, 00:24:46.400 --> 00:24:49.300 but you can very quickly take off these proverbial training wheels, 00:24:49.300 --> 00:24:52.960 and start to use something a little more arcane, yes, 00:24:52.960 --> 00:24:55.420 but a little more powerful, at the end of the day. 00:24:55.420 --> 00:24:58.470 And one of the earliest languages that was not binary 00:24:58.470 --> 00:25:01.780 and was not something called assembly language, was this language here, 00:25:01.780 --> 00:25:02.770 called C. 00:25:02.770 --> 00:25:08.470 Now, this program too, quite simply as you might guess, prints, hello, world. 00:25:08.470 --> 00:25:09.160 That's it. 00:25:09.160 --> 00:25:11.260 But there's a lot of overhead syntactically. 00:25:11.260 --> 00:25:14.170 I see weird curly braces, and parentheses, 00:25:14.170 --> 00:25:15.790 and a semi-colon, backslash n. 00:25:15.790 --> 00:25:17.890 There's a lot of magical incantations here 00:25:17.890 --> 00:25:22.210 that would seem to suggest complexity, and yet all I want to do 00:25:22.210 --> 00:25:23.860 is just print out, hello, world. 00:25:23.860 --> 00:25:26.989 But C is representative of a type of language 00:25:26.989 --> 00:25:28.780 and a type of programming experience that's 00:25:28.780 --> 00:25:31.420 pretty representative of lot of different languages as well. 00:25:31.420 --> 00:25:34.540 But the computer isn't going to understand this right from the get go. 00:25:34.540 --> 00:25:38.500 We're going to have to first convert this language, this language C, 00:25:38.500 --> 00:25:41.260 into those zeros and ones that the computer does understand. 00:25:41.260 --> 00:25:44.320 And the means by which we do this is typically as follows. 00:25:44.320 --> 00:25:48.800 I write in a language like C, what we'll generally called source code. 00:25:48.800 --> 00:25:52.060 This is simply text, like the lines you just 00:25:52.060 --> 00:25:55.690 saw a moment ago, that ultimately just say, hello, world, but with some syntax 00:25:55.690 --> 00:25:57.680 around it to make that all happen. 00:25:57.680 --> 00:26:00.820 But the computer doesn't typically understand source code. 00:26:00.820 --> 00:26:05.350 It understands zeros and ones, otherwise known as machine code. 00:26:05.350 --> 00:26:07.960 So machine code is what the machine understands, 00:26:07.960 --> 00:26:11.320 and source code is what the source, me understands. 00:26:11.320 --> 00:26:13.070 There's got to be something in the middle. 00:26:13.070 --> 00:26:16.850 And indeed, there's typically a program in the middle called 00:26:16.850 --> 00:26:21.200 a compiler, whose purpose in life is to take source code as input, 00:26:21.200 --> 00:26:23.550 and produce machine code as output. 00:26:23.550 --> 00:26:26.570 So before I can run a program like that, I 00:26:26.570 --> 00:26:30.050 have to run another program on my computer, called the compiler. 00:26:30.050 --> 00:26:32.230 Might be called Clang, it might be called GCC, 00:26:32.230 --> 00:26:35.150 it might be called Visual Studio, it might be called Code Blocks. 00:26:35.150 --> 00:26:38.780 There's so many different compilers out there, but at the end of the day, what 00:26:38.780 --> 00:26:43.430 they fundamentally do is take one language as input, and output another 00:26:43.430 --> 00:26:48.650 as output, and generally in a way that your operating system and your CPU both 00:26:48.650 --> 00:26:49.640 understand. 00:26:49.640 --> 00:26:52.050 But what does this machine code look like? 00:26:52.050 --> 00:26:54.200 Well it literally will look like zeros and ones. 00:26:54.200 --> 00:26:58.980 And indeed, if I run this source code through a compiler and don't run it 00:26:58.980 --> 00:27:01.550 but look at it with a special program, I will actually 00:27:01.550 --> 00:27:04.372 see patterns of zeros and ones exactly like these. 00:27:04.372 --> 00:27:06.080 And even I, the human, in looking at this 00:27:06.080 --> 00:27:07.970 don't really know what they represent. 00:27:07.970 --> 00:27:10.619 I could maybe convert it to ASCII, but that's not really 00:27:10.619 --> 00:27:11.660 going to get me anywhere. 00:27:11.660 --> 00:27:14.390 I would have to pull out my instruction manual 00:27:14.390 --> 00:27:17.330 from the Intel CPU inside my computer to actually understand 00:27:17.330 --> 00:27:18.629 most of these patterns of bits. 00:27:18.629 --> 00:27:20.420 So I'm not going to go to that extent, this 00:27:20.420 --> 00:27:23.720 is why we have higher level languages like C. 00:27:23.720 --> 00:27:27.260 But again, this isn't all that pleasurable to look at, to write, 00:27:27.260 --> 00:27:30.410 it requires a bit of cognitive overhead to remember all of this. 00:27:30.410 --> 00:27:33.380 There are simpler languages like this one 00:27:33.380 --> 00:27:37.550 here, Python, where thankfully, you just say what you mean. 00:27:37.550 --> 00:27:40.260 Now, there's still a little bit of syntax, there's some quotes, 00:27:40.260 --> 00:27:41.510 there's some parentheses. 00:27:41.510 --> 00:27:44.540 But at the end of the day, it's really far more so just 00:27:44.540 --> 00:27:48.710 the word print, and just the sentence, or phrase, that I want to print. 00:27:48.710 --> 00:27:52.340 Gone are all those curly braces, the requisite semi-colon, and more, 00:27:52.340 --> 00:27:55.100 and so certain languages are a little simpler. 00:27:55.100 --> 00:27:56.870 And indeed, Python and other languages are 00:27:56.870 --> 00:27:59.829 the result of programmers, and humans, more generally, having learned, 00:27:59.829 --> 00:28:02.120 gee, wouldn't it be nice if this were a little simpler. 00:28:02.120 --> 00:28:05.540 Wouldn't it be nice if this language did a little more of this work for me, made 00:28:05.540 --> 00:28:07.970 certain assumptions for me so that you don't 00:28:07.970 --> 00:28:11.880 have to write and remember as much complexity as we saw a moment ago. 00:28:11.880 --> 00:28:17.060 But Python's an interesting one too, because it is generally interpreted, 00:28:17.060 --> 00:28:17.651 so to speak. 00:28:17.651 --> 00:28:19.400 And that's a bit of an oversimplification, 00:28:19.400 --> 00:28:22.400 but when writing code in a language like Python, 00:28:22.400 --> 00:28:25.430 we again still have source code, just as we saw a moment ago, 00:28:25.430 --> 00:28:29.150 print hello, world, but you don't convert it to machine code 00:28:29.150 --> 00:28:31.460 per se, at least not explicitly. 00:28:31.460 --> 00:28:34.940 Rather, you run it as input into a program 00:28:34.940 --> 00:28:39.756 called an interpreter, whose purpose in life is to do exactly that, 00:28:39.756 --> 00:28:41.880 to interpret the lines of code that you've written, 00:28:41.880 --> 00:28:45.600 top to bottom, left to right, and actually translate them, essentially, 00:28:45.600 --> 00:28:48.450 into the language that the computer can understand. 00:28:48.450 --> 00:28:51.750 And it does this though not by converting them to zeros and ones, 00:28:51.750 --> 00:28:55.500 but by outputting something called byte code, which 00:28:55.500 --> 00:28:59.617 is an intermediate representation of the language. 00:28:59.617 --> 00:29:01.950 So it's much more cryptic as we'll see in just a moment, 00:29:01.950 --> 00:29:04.210 but it's not as cryptic as zeros and ones, 00:29:04.210 --> 00:29:07.170 and so when you use a language like Python and others like it, 00:29:07.170 --> 00:29:10.120 you will often install a special piece of software, 00:29:10.120 --> 00:29:14.370 whether you realize it or not, called a virtual machine, or VM. 00:29:14.370 --> 00:29:18.600 And that virtual machine is kind of like an imaginary CPU that 00:29:18.600 --> 00:29:21.570 can work on Macs, and PCs, and other computers still, 00:29:21.570 --> 00:29:24.570 that someone out there has written that understands byte code, 00:29:24.570 --> 00:29:29.610 and the virtual machine in turn is what is running at the end of the day. 00:29:29.610 --> 00:29:32.852 And it's running your byte code, which is the result of your source code. 00:29:32.852 --> 00:29:36.060 And long story short, even though this looks like a more complicated process, 00:29:36.060 --> 00:29:41.760 what's nice about this process in many of these newer languages 00:29:41.760 --> 00:29:45.390 is that a lot of these intermediate steps are completely hidden from you. 00:29:45.390 --> 00:29:47.577 If you want to write a program in Python, 00:29:47.577 --> 00:29:49.410 you simply write it as source code, and then 00:29:49.410 --> 00:29:52.110 you run a command at your keyboard, and that's it. 00:29:52.110 --> 00:29:54.877 There's no explicit compilation process that you 00:29:54.877 --> 00:29:56.460 have to worry about as the programmer. 00:29:56.460 --> 00:30:00.030 The computer might be doing that for you underneath the hood, and indeed it is, 00:30:00.030 --> 00:30:02.680 but it's been obstructed away, so to speak. 00:30:02.680 --> 00:30:04.920 Now, let's see these two examples in action, 00:30:04.920 --> 00:30:08.130 but first, the intermediate language that Python 00:30:08.130 --> 00:30:10.830 is going to generate in order to be run on its virtual machine 00:30:10.830 --> 00:30:13.696 is this byte code here, something that looks a little bit like this. 00:30:13.696 --> 00:30:15.820 You can kind of sort of figure out what's going on. 00:30:15.820 --> 00:30:17.160 I see print, I see hello, world, but there's 00:30:17.160 --> 00:30:20.034 some other stuff that I don't necessarily understand at first glance, 00:30:20.034 --> 00:30:22.140 but that's OK, because the virtual machine that's 00:30:22.140 --> 00:30:24.270 going to run this ultimately will. 00:30:24.270 --> 00:30:25.440 So let's see this in action. 00:30:25.440 --> 00:30:28.260 I've gone ahead and opened up a terminal window, so to speak. 00:30:28.260 --> 00:30:31.350 Really a black and white window on my Mac, or PC for that matter, 00:30:31.350 --> 00:30:35.460 that has some software pre-installed, software that does understand C, 00:30:35.460 --> 00:30:38.110 and Python, and even some other languages as well. 00:30:38.110 --> 00:30:40.320 I'm going to go ahead and open a program called 00:30:40.320 --> 00:30:42.150 Nano, which is just a simple text editor, 00:30:42.150 --> 00:30:45.390 and I'm going to open a file called hello.c. 00:30:45.390 --> 00:30:48.300 And not to worry about what some of the syntax on the screen here is, 00:30:48.300 --> 00:30:51.810 what's important is that I'm going to retype the same thing we saw a moment 00:30:51.810 --> 00:30:57.450 ago, include standard I/O. Int main(void), and then in here, 00:30:57.450 --> 00:30:59.680 I'm going to do printf("hello, world/n");. 00:31:05.210 --> 00:31:07.545 So I have just recreated that program in C, 00:31:07.545 --> 00:31:10.170 and I'm going to go ahead and save it in a file called hello.c. 00:31:10.170 --> 00:31:14.880 So all I've done is opened the textual equivalent of Microsoft Word, 00:31:14.880 --> 00:31:19.080 but a super light and less friendly version perhaps of it, 00:31:19.080 --> 00:31:20.669 but that I've used many times before. 00:31:20.669 --> 00:31:22.710 I'm now going to go ahead and type the following. 00:31:22.710 --> 00:31:28.172 Clang, for C language, -o hello space hello.c. 00:31:28.172 --> 00:31:30.630 So again, another one of these sort of magical incantations 00:31:30.630 --> 00:31:32.290 that I understand because I've done it before, 00:31:32.290 --> 00:31:34.998 but you could read this in a manual or be taught this in a class, 00:31:34.998 --> 00:31:39.550 and what this is telling my Mac to do is to compile hello.c 00:31:39.550 --> 00:31:44.410 into a new file called hello inside of which are those zeros and ones. 00:31:44.410 --> 00:31:47.470 If I go ahead and hit enter, nothing appears to have happened, 00:31:47.470 --> 00:31:50.400 but if I now type this command, dot slash hello 00:31:50.400 --> 00:31:52.650 where dot just means go into my current folder, 00:31:52.650 --> 00:31:55.260 and hello means run the program called hello, we shall 00:31:55.260 --> 00:31:58.870 see if I did this right, hello, world. 00:31:58.870 --> 00:32:01.300 Underwhelming result, but a correct result, 00:32:01.300 --> 00:32:04.120 but it did take a few lines of code and a bit of complexity. 00:32:04.120 --> 00:32:08.680 If I instead run Nano of hello.py, where py is commonly the extension 00:32:08.680 --> 00:32:12.542 for a Python program, and instead I literally just type print("hello, 00:32:12.542 --> 00:32:21.160 world");, and then save this file, and now run Python, hello.py and hit enter, 00:32:21.160 --> 00:32:25.930 you'll see the exact same results with arguably a decent amount less effort. 00:32:25.930 --> 00:32:27.730 So these are just two languages now. 00:32:27.730 --> 00:32:29.290 There are so many others out there. 00:32:29.290 --> 00:32:33.010 For instance, here we have an example of this same program, fundamentally hello, 00:32:33.010 --> 00:32:36.760 world, in a language called C++, which essentially adapts C, 00:32:36.760 --> 00:32:40.160 and adds some new features to it while changing a few things as well. 00:32:40.160 --> 00:32:42.250 And you can see the syntax alone is already 00:32:42.250 --> 00:32:44.020 a little bit different by convention. 00:32:44.020 --> 00:32:46.090 Here's an example of hello world in Java, 00:32:46.090 --> 00:32:49.510 a very popular language formally in the context of little things 00:32:49.510 --> 00:32:52.240 called applets on the web, more recently in enterprise software 00:32:52.240 --> 00:32:54.760 on the backend for servers as well, as often commonly 00:32:54.760 --> 00:32:58.717 used as a teaching language with students in school. 00:32:58.717 --> 00:33:00.550 This here is an example of a language called 00:33:00.550 --> 00:33:02.930 Ruby, which is often popular at the command line 00:33:02.930 --> 00:33:05.680 in that black and white environment, where you're running commands 00:33:05.680 --> 00:33:10.120 with your keyboard, as well as in a web context using a framework called Rails, 00:33:10.120 --> 00:33:12.470 or Ruby on Rails, if you've heard of that. 00:33:12.470 --> 00:33:15.640 Lastly here is another example, this one in a functional language 00:33:15.640 --> 00:33:18.700 called Lisp, whereby you tend to have more parentheses, 00:33:18.700 --> 00:33:22.000 and it's what's an example of a functional language, which doesn't just 00:33:22.000 --> 00:33:23.000 mean that it functions. 00:33:23.000 --> 00:33:25.625 It's a fundamentally different type of language than the others 00:33:25.625 --> 00:33:27.910 we've looked at thus far, which are procedural, 00:33:27.910 --> 00:33:31.264 or imperative, which is only to say it's a somewhat different mental model 00:33:31.264 --> 00:33:33.430 when it comes to programming in languages like this, 00:33:33.430 --> 00:33:37.092 but you can still print out things like hello, world, quite simply. 00:33:37.092 --> 00:33:38.800 And then there's JavaScript, which exists 00:33:38.800 --> 00:33:43.330 in a number of contexts today both in the context of the web browsers, 00:33:43.330 --> 00:33:44.900 but also in web servers. 00:33:44.900 --> 00:33:46.870 This is how you might, on the server side, 00:33:46.870 --> 00:33:48.520 print out something like hello, world. 00:33:48.520 --> 00:33:50.410 But JavaScript is an interesting one too, 00:33:50.410 --> 00:33:54.160 because there's newer and newer features of the language itself. 00:33:54.160 --> 00:33:57.140 And this is true of a lot of languages, they evolve over time. 00:33:57.140 --> 00:33:59.140 So humans don't just invent new languages, 00:33:59.140 --> 00:34:02.020 they sometimes go back and improve on and increase 00:34:02.020 --> 00:34:05.110 the version number of past languages by updating 00:34:05.110 --> 00:34:06.670 the tools that understand them. 00:34:06.670 --> 00:34:10.030 So Clang, like I ran a moment ago, which was my compiler, 00:34:10.030 --> 00:34:12.130 and Python, which I ran a moment ago, which 00:34:12.130 --> 00:34:15.850 was my interpreter, and coincidentally also the name of the language. 00:34:15.850 --> 00:34:17.620 Those can continually be updated. 00:34:17.620 --> 00:34:19.725 You can download and upgrade versions of those, 00:34:19.725 --> 00:34:21.850 and they'll support newer versions of the language, 00:34:21.850 --> 00:34:24.070 and so it's very common these days for JavaScript 00:34:24.070 --> 00:34:29.860 to actually be newer than is actually supported by browsers out there. 00:34:29.860 --> 00:34:33.820 And so a common term of art in this world now is to transpile. 00:34:33.820 --> 00:34:38.469 Not compile, but transpile JavaScript to JavaScript, specifically 00:34:38.469 --> 00:34:42.610 from a newer version of JavaScript to an older version of JavaScript, 00:34:42.610 --> 00:34:46.510 maybe like English to old English, simply because the browsers of today 00:34:46.510 --> 00:34:49.510 don't necessarily understand the newest version of English, 00:34:49.510 --> 00:34:52.360 they're still speaking something from yesteryear. 00:34:52.360 --> 00:34:55.000 So there's any number of methodologies, there's 00:34:55.000 --> 00:34:58.600 any number of languages you might use, and indeed, this is just a few of them 00:34:58.600 --> 00:34:59.466 here. 00:34:59.466 --> 00:35:01.340 You might recognize some of these names here. 00:35:01.340 --> 00:35:04.300 Many of these are increasingly used in the web context 00:35:04.300 --> 00:35:07.030 to actually build websites, to build mobile applications, 00:35:07.030 --> 00:35:09.490 to build things that are optimized for your phones, 00:35:09.490 --> 00:35:12.452 but the dot dot dot's just we're really just scratching the surface. 00:35:12.452 --> 00:35:14.410 And if you've ever wondered what more there is, 00:35:14.410 --> 00:35:16.780 let me invite you to go to Wikipedia or beyond, 00:35:16.780 --> 00:35:19.120 and you'll see an overwhelming list of languages 00:35:19.120 --> 00:35:22.930 and also a lot more of the history of these and many other languages. 00:35:22.930 --> 00:35:25.390 But of course, the examples we've done thus far 00:35:25.390 --> 00:35:27.820 have been in the graphical context like Scratch, 00:35:27.820 --> 00:35:31.930 they've been in the textual context like C and Python, what we haven't done 00:35:31.930 --> 00:35:34.420 is actually leveraged the worldwide web. 00:35:34.420 --> 00:35:38.410 We've not actually written a program that runs on my phone, it would seem. 00:35:38.410 --> 00:35:41.260 We've not yet written a program that runs in my web browser, 00:35:41.260 --> 00:35:42.880 on my laptop or desktop. 00:35:42.880 --> 00:35:46.210 To get to that point, we're going to need a few more ingredients, a few more 00:35:46.210 --> 00:35:47.890 building blocks, if you will. 00:35:47.890 --> 00:35:49.420 Languages like HTML. 00:35:49.420 --> 00:35:51.430 Not a programming language, a markup language, 00:35:51.430 --> 00:35:53.710 but it's the language in which web pages are written, 00:35:53.710 --> 00:35:57.040 and it provides us with a new and improved context, perhaps, 00:35:57.040 --> 00:35:59.840 for writing software using the same ideas, 00:35:59.840 --> 00:36:02.305 but with different user interfaces on the phone. 00:36:02.305 --> 00:36:04.180 But to get to that point, we're going to need 00:36:04.180 --> 00:36:06.520 to understand a little bit about that other language, HTML, 00:36:06.520 --> 00:36:08.860 we're going to need to understand a little bit about the world wide web, 00:36:08.860 --> 00:36:11.830 and ultimately, we're going to need to understand how the internet 00:36:11.830 --> 00:36:13.980 itself works.