1 00:00:00,000 --> 00:00:09,790 [MUSIC PLAYING] 2 00:00:09,790 --> 00:00:12,310 SPEAKER: So what does it mean to program a computer? 3 00:00:12,310 --> 00:00:14,350 At the end of the day, programming is all about 4 00:00:14,350 --> 00:00:17,270 writing software, or coding, so to speak. 5 00:00:17,270 --> 00:00:19,870 And this means writing english-like syntax 6 00:00:19,870 --> 00:00:23,650 into a text editing program, something like Microsoft Word, but simpler, 7 00:00:23,650 --> 00:00:25,570 in such a way that the computer ultimately 8 00:00:25,570 --> 00:00:29,192 can understand the english-like syntax that you're writing. 9 00:00:29,192 --> 00:00:31,150 Now, it turns out there are so many programming 10 00:00:31,150 --> 00:00:34,316 languages in the world-- indeed it can get completely overwhelming as to how 11 00:00:34,316 --> 00:00:37,210 many there are, and which one you choose, and one you should use it, 12 00:00:37,210 --> 00:00:39,490 and how you should recruit someone who actually knows 13 00:00:39,490 --> 00:00:42,100 a particular language --but nicely enough, 14 00:00:42,100 --> 00:00:46,720 there are some fundamental constructs and fundamental ideas that underlie 15 00:00:46,720 --> 00:00:50,560 most programming languages, so that once you start to understand and pick up 16 00:00:50,560 --> 00:00:53,920 those fundamentals can you apply that fundamental understanding 17 00:00:53,920 --> 00:00:57,220 to almost any language in the world that you might subsequently learn. 18 00:00:57,220 --> 00:00:59,961 Now there's certainly some technical differences among languages, 19 00:00:59,961 --> 00:01:02,710 and there's certainly some historical differences among languages, 20 00:01:02,710 --> 00:01:06,100 because the reason that we have so many languages 21 00:01:06,100 --> 00:01:09,640 is because humans are constantly getting better at writing software. 22 00:01:09,640 --> 00:01:12,280 Humans are constantly figuring out, oh, gee, 23 00:01:12,280 --> 00:01:15,230 wouldn't it be nice to have my language have some other feature 24 00:01:15,230 --> 00:01:18,130 so that it's easier for me to get real work done? 25 00:01:18,130 --> 00:01:20,500 And so as in the past when you see this sort 26 00:01:20,500 --> 00:01:24,550 of layering of more and more sophisticated, more and more featureful 27 00:01:24,550 --> 00:01:27,890 tools being layered on top of the simpler of the tool. 28 00:01:27,890 --> 00:01:31,780 So today, like always, we'll sort of start down here, work our way up, 29 00:01:31,780 --> 00:01:35,110 and then realize here after can you apply most of these lessons learned 30 00:01:35,110 --> 00:01:37,089 to yet other contexts still. 31 00:01:37,089 --> 00:01:39,130 So what are some of the constructs that you might 32 00:01:39,130 --> 00:01:41,620 see in many programming languages? 33 00:01:41,620 --> 00:01:44,140 Well, let me propose a few new vocabulary words. 34 00:01:44,140 --> 00:01:47,327 Functions, loops, variables, conditions, and there's even more than that. 35 00:01:47,327 --> 00:01:50,660 And you might recognize, of course, some of these terms from different contexts, 36 00:01:50,660 --> 00:01:52,040 but what do they mean? 37 00:01:52,040 --> 00:01:54,190 Well, what does it mean to program a computer? 38 00:01:54,190 --> 00:01:58,870 It means to write some instructions that tell that computer what to do. 39 00:01:58,870 --> 00:02:02,950 Now, if I pretend for a moment to be that computer, albeit in human form, 40 00:02:02,950 --> 00:02:05,140 what kinds of things could you tell me to do 41 00:02:05,140 --> 00:02:09,789 if you were the programmer commanding me to follow your instructions? 42 00:02:09,789 --> 00:02:12,337 Well, perhaps here as I stand with two feet on stage, 43 00:02:12,337 --> 00:02:14,170 one of the simplest things you could command 44 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. 45 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. 46 00:02:23,647 --> 00:02:26,480 Now, that wasn't all that productive, I didn't make my way very far. 47 00:02:26,480 --> 00:02:31,450 But if you commanded me again to move, I might take a second step, like this. 48 00:02:31,450 --> 00:02:36,870 But that quickly becomes tedious telling David, move, move, move. 49 00:02:36,870 --> 00:02:40,090 I mean, that's not a particularly compelling way to program, 50 00:02:40,090 --> 00:02:43,870 so wouldn't it be nice to tell me to do something again and again 51 00:02:43,870 --> 00:02:45,979 and again, but much more succinctly? 52 00:02:45,979 --> 00:02:48,520 For instance, if you'd want to tell someone in the real world 53 00:02:48,520 --> 00:02:50,500 to do something again and again, you don't just 54 00:02:50,500 --> 00:02:54,550 keep saying it presumably again and again and again, you might say instead, 55 00:02:54,550 --> 00:02:57,190 hey, David, move five times. 56 00:02:57,190 --> 00:03:00,610 One, two, three, four, five. 57 00:03:00,610 --> 00:03:03,010 And so more succinctly, albeit in English, 58 00:03:03,010 --> 00:03:05,860 can you get me to do something again, and again, and again. 59 00:03:05,860 --> 00:03:07,750 And that something is the same thing. 60 00:03:07,750 --> 00:03:09,730 And so in the context of a computer program, 61 00:03:09,730 --> 00:03:14,170 we might call move, the act of me moving from one spot to another, a function, 62 00:03:14,170 --> 00:03:15,160 a procedure. 63 00:03:15,160 --> 00:03:19,930 Really an action, a verb-like construct that's just doing something. 64 00:03:19,930 --> 00:03:22,930 And a loop, meanwhile, as the word rather suggests, 65 00:03:22,930 --> 00:03:26,984 is this notion of doing something again and again, cyclically, so to speak. 66 00:03:26,984 --> 00:03:29,650 And even though I've done it thus far in English, saying, David, 67 00:03:29,650 --> 00:03:34,870 move five times, you can translate this intuition ultimately to programming 68 00:03:34,870 --> 00:03:36,250 languages as we'll soon see. 69 00:03:36,250 --> 00:03:39,910 Now, meanwhile, a variable you might recall from a context like algebra. 70 00:03:39,910 --> 00:03:41,620 X, or y, or z. 71 00:03:41,620 --> 00:03:45,460 Now, it turns out in many programming languages, do have variables as well, 72 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. 73 00:03:49,720 --> 00:03:52,570 In fact, you might name a variable counter, 74 00:03:52,570 --> 00:03:56,120 if you wanted to keep track of how many steps you have taken. 75 00:03:56,120 --> 00:04:00,520 So for instance, if someone commanded me, the computer in this story still, 76 00:04:00,520 --> 00:04:04,614 to just move forever, I could move forever. 77 00:04:04,614 --> 00:04:07,030 And this is not going to end well at the end of the stage, 78 00:04:07,030 --> 00:04:10,360 but simultaneously could I create a variable in my mind 79 00:04:10,360 --> 00:04:13,480 called counter, or x, or y, or z, whatever, but counter is more 80 00:04:13,480 --> 00:04:16,029 descriptive, and I could keep track of how many times 81 00:04:16,029 --> 00:04:19,160 I'm moving while moving indefinitely. 82 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. 83 00:04:27,190 --> 00:04:28,960 But loops indeed can be infinite. 84 00:04:28,960 --> 00:04:31,100 They can run forever for better or for worse. 85 00:04:31,100 --> 00:04:33,308 And as an aside, if you've ever noticed your computer 86 00:04:33,308 --> 00:04:36,850 kind of spiraling out of control whereby it's the beach ball is spinning, 87 00:04:36,850 --> 00:04:39,340 or the little hourglass, or the like, it might very well be 88 00:04:39,340 --> 00:04:42,430 that your computer is stuck in an infinite loop, 89 00:04:42,430 --> 00:04:44,380 doing something again and again and again 90 00:04:44,380 --> 00:04:47,890 that maybe is deliberate, like a clock ticking forever, 91 00:04:47,890 --> 00:04:51,640 sometimes loops can be good if they tick forever, but sometimes it can be a bug. 92 00:04:51,640 --> 00:04:55,030 A mistake, in a program, as we'll soon see, that a programmer, a human, 93 00:04:55,030 --> 00:04:56,060 did not anticipate. 94 00:04:56,060 --> 00:04:58,560 And so a program just keeps running and running and running, 95 00:04:58,560 --> 00:05:02,080 consuming all of your computer's resources, or memory, or CPU, 96 00:05:02,080 --> 00:05:05,170 and so you can't really do useful work on it. 97 00:05:05,170 --> 00:05:08,170 So loops can be both good and bad in contexts like that. 98 00:05:08,170 --> 00:05:09,580 And then conditions. 99 00:05:09,580 --> 00:05:12,480 A condition is a way for me to fix this problem. 100 00:05:12,480 --> 00:05:16,710 For instance, I might be told by a programmer, move forever, 101 00:05:16,710 --> 00:05:20,370 but if you're about to walk off the stage, stop. 102 00:05:20,370 --> 00:05:22,260 The operative word there being if. 103 00:05:22,260 --> 00:05:26,760 So irrespective of variables, I might just be moving, and moving, and moving, 104 00:05:26,760 --> 00:05:29,940 and constantly checking if I'm nearing the edge, am I at the edge? 105 00:05:29,940 --> 00:05:30,690 Am I at the edge? 106 00:05:30,690 --> 00:05:31,398 Am I at the edge? 107 00:05:31,398 --> 00:05:34,950 Oh, I am, and so I should stop. 108 00:05:34,950 --> 00:05:39,090 So if I am about to step off of the stage, I should stop. 109 00:05:39,090 --> 00:05:42,570 And so I can conditionally fix this kind of problem. 110 00:05:42,570 --> 00:05:44,490 And there's other constructs, still, but this 111 00:05:44,490 --> 00:05:48,510 is to say ultimately that programming, or coding as it's commonly called, 112 00:05:48,510 --> 00:05:51,070 but the terms are pretty much interchangeable, 113 00:05:51,070 --> 00:05:54,540 is really just this process of translating this human intuition 114 00:05:54,540 --> 00:05:57,900 to a language, a textual language, a typed language, 115 00:05:57,900 --> 00:06:00,840 often, that a computer understands. 116 00:06:00,840 --> 00:06:03,600 But there's many different ways to speak to a computer, 117 00:06:03,600 --> 00:06:06,570 much like we have so many different spoken languages. 118 00:06:06,570 --> 00:06:08,760 We humans among cultures, among countries, 119 00:06:08,760 --> 00:06:12,690 within countries, so do computers understand different languages, 120 00:06:12,690 --> 00:06:17,190 so long as humans have kind of sort of taught those computers 121 00:06:17,190 --> 00:06:18,810 to understand those languages. 122 00:06:18,810 --> 00:06:22,230 Which is to say that when you buy a Mac, or a PC, or whatever, 123 00:06:22,230 --> 00:06:24,090 it doesn't necessarily come with some built 124 00:06:24,090 --> 00:06:26,820 in support for a whole bunch of programming languages. 125 00:06:26,820 --> 00:06:29,760 The end of the day, it's going to understand binary, zeros and ones, 126 00:06:29,760 --> 00:06:33,750 and it's going to understand a so-called instruction set, whereby Intel, 127 00:06:33,750 --> 00:06:37,050 or whoever makes the CPU inside preprogrammed it to understand 128 00:06:37,050 --> 00:06:39,900 certain instructions like add, and subtract, and move, 129 00:06:39,900 --> 00:06:41,550 and load, and so forth. 130 00:06:41,550 --> 00:06:44,820 But beyond that, it doesn't necessarily know 131 00:06:44,820 --> 00:06:47,580 how to do all that much with your human instructions, 132 00:06:47,580 --> 00:06:50,550 unless you or some company, someone, has taught 133 00:06:50,550 --> 00:06:52,560 it to understand other languages. 134 00:06:52,560 --> 00:06:55,230 And so there are languages called assembly language, 135 00:06:55,230 --> 00:06:57,540 there's something a little easier to read called C, 136 00:06:57,540 --> 00:07:02,070 then there were languages like C++ and Objective-C, and now there's Perl, 137 00:07:02,070 --> 00:07:05,100 and Python, and PHP, and Ruby, and Java, and JavaScript, 138 00:07:05,100 --> 00:07:10,320 and so many others still, but those are the results of humans over time writing 139 00:07:10,320 --> 00:07:15,000 software that can run on Macs and PCs that allows the computer now 140 00:07:15,000 --> 00:07:18,720 to understand not just zeros and ones, but higher level languages. 141 00:07:18,720 --> 00:07:21,990 Things that humans can express much more pleasurably 142 00:07:21,990 --> 00:07:26,230 and easily than just zeros and ones alone. 143 00:07:26,230 --> 00:07:29,130 And these languages don't have to be textual, it turns out. 144 00:07:29,130 --> 00:07:32,070 In fact, when first exploring programming and programming 145 00:07:32,070 --> 00:07:36,720 languages more generally, I daresay it's more straightforward, and perhaps 146 00:07:36,720 --> 00:07:43,090 a little bit more fun, to actually sort of program by way of pictures, 147 00:07:43,090 --> 00:07:45,960 if you will, by way of puzzle pieces, we'll call them. 148 00:07:45,960 --> 00:07:49,290 So pictured here is perhaps one of the simplest programs you can write. 149 00:07:49,290 --> 00:07:54,030 And it's sort of entered into history as one of the most canonical programs you 150 00:07:54,030 --> 00:07:55,980 can write, demonstrative of what you might 151 00:07:55,980 --> 00:07:58,070 do in a language on your first day. 152 00:07:58,070 --> 00:08:01,320 And it just says, in this context, when green flag clicked, say, hello, world. 153 00:08:01,320 --> 00:08:05,370 Hello, world, being the buzz phrase that permeates most of programming history 154 00:08:05,370 --> 00:08:06,720 these days. 155 00:08:06,720 --> 00:08:11,130 This is a program that if you run it with the right software on your Mac 156 00:08:11,130 --> 00:08:15,630 or PC, will actually print the message on the screen, hello, world. 157 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 158 00:08:19,200 --> 00:08:21,992 see soon are very textual, and are a little arcane, a little harder 159 00:08:21,992 --> 00:08:25,116 to wrap your mind around because there's so much punctuation that they tend 160 00:08:25,116 --> 00:08:26,940 to have, but we can explore for just a bit 161 00:08:26,940 --> 00:08:30,210 here programming, by way of this graphical language called 162 00:08:30,210 --> 00:08:34,919 Scratch, via which we can see some of these same ideas. 163 00:08:34,919 --> 00:08:38,070 Functions, loops, conditions, and variables, and more 164 00:08:38,070 --> 00:08:41,770 come to life, so to speak, on the screen. 165 00:08:41,770 --> 00:08:44,790 So let me pull up exactly this program called Scratch. 166 00:08:44,790 --> 00:08:48,340 And there are four main areas to this particular program. 167 00:08:48,340 --> 00:08:51,390 It's freely available software, and you can also access it via the web, 168 00:08:51,390 --> 00:08:53,460 though I'm using a downloadable version here. 169 00:08:53,460 --> 00:08:55,800 And you'll see at left, perhaps most obviously, 170 00:08:55,800 --> 00:08:58,530 this cat, who goes by the name Scratch. 171 00:08:58,530 --> 00:09:00,750 Scratch here is an example of a sprite, which 172 00:09:00,750 --> 00:09:02,550 is a term in the world of computer graphics 173 00:09:02,550 --> 00:09:05,760 that refers to some kind of entity, often some kind of character, 174 00:09:05,760 --> 00:09:08,820 that can do things, maybe move up, down, left, right, or the like. 175 00:09:08,820 --> 00:09:10,528 Meanwhile on the right hand side, there's 176 00:09:10,528 --> 00:09:14,430 this blank slate, this big canvas, the scripts area where eventually I'm 177 00:09:14,430 --> 00:09:18,510 going to able to drag and drop some programming pieces, some puzzle pieces, 178 00:09:18,510 --> 00:09:20,640 in order to get this sprite to do something. 179 00:09:20,640 --> 00:09:24,390 And the pieces I can drag and drop and use are these here in the middle. 180 00:09:24,390 --> 00:09:27,340 And there's going to be way more than we even look at right now, 181 00:09:27,340 --> 00:09:30,930 but you'll see that they're categorized and also colorized by category, 182 00:09:30,930 --> 00:09:34,140 so we'll play around for just a bit with some of these sample constructs, 183 00:09:34,140 --> 00:09:35,830 and see what we can't do. 184 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. 185 00:09:40,756 --> 00:09:42,630 Hopefully that's not too much of a leap here, 186 00:09:42,630 --> 00:09:44,755 and let's see if we can get Scratch to do something 187 00:09:44,755 --> 00:09:46,990 quite akin to what I just did. 188 00:09:46,990 --> 00:09:49,440 So I know from having used this software before, 189 00:09:49,440 --> 00:09:52,290 that I probably want to start with this events pallet 190 00:09:52,290 --> 00:09:54,624 up at top right in the middle of the screen. 191 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, 192 00:09:57,790 --> 00:10:01,260 but only one that looks familiar thus far when green flag clicked. 193 00:10:01,260 --> 00:10:02,930 What is that green flag referring to? 194 00:10:02,930 --> 00:10:05,850 Well, if we look at the stage over here on which Scratch lives, 195 00:10:05,850 --> 00:10:07,710 notice in its top right hand corner, there's 196 00:10:07,710 --> 00:10:10,050 both a green flag, which is going to mean go, 197 00:10:10,050 --> 00:10:12,660 and a red stop sign like thing that's going to mean stop. 198 00:10:12,660 --> 00:10:14,743 So those are going to be the two buttons via which 199 00:10:14,743 --> 00:10:17,220 we can start and stop my program. 200 00:10:17,220 --> 00:10:20,100 So kind of equivalent in your Mac and Windows world 201 00:10:20,100 --> 00:10:22,930 to double clicking an icon to run some program. 202 00:10:22,930 --> 00:10:26,160 So if I now zoom out, notice I can click on and drag this 203 00:10:26,160 --> 00:10:28,630 when green flag clicked puzzle piece. 204 00:10:28,630 --> 00:10:31,350 And I can put it wherever I want, but much like in English, I 205 00:10:31,350 --> 00:10:34,380 might start at the top, and work my way down and to the right, 206 00:10:34,380 --> 00:10:35,640 so I'm just going to let go. 207 00:10:35,640 --> 00:10:38,350 And you'll see now that it's plopped itself there, 208 00:10:38,350 --> 00:10:41,550 but it's not going to do anything, because all my program is saying, 209 00:10:41,550 --> 00:10:45,116 literally, is when green flag clicked. 210 00:10:45,116 --> 00:10:46,240 It's kind of a cliffhanger. 211 00:10:46,240 --> 00:10:48,281 We need to attach some other puzzle pieces there. 212 00:10:48,281 --> 00:10:52,670 And the puzzle piece we saw a moment ago was something that looked like this. 213 00:10:52,670 --> 00:10:56,000 And here we have a new palette, the looks palette. 214 00:10:56,000 --> 00:10:57,980 There's so many purple puzzle pieces here, 215 00:10:57,980 --> 00:11:00,040 but I'm just going to go ahead and grab, say, one 216 00:11:00,040 --> 00:11:02,170 of them, which by default says, hello. 217 00:11:02,170 --> 00:11:07,750 But notice, this puzzle piece as I pull it over to the other puzzle piece, 218 00:11:07,750 --> 00:11:11,080 notice how this little white line appears sort of magnetically. 219 00:11:11,080 --> 00:11:14,590 It's because these two puzzle pieces, as per their similar shapes, 220 00:11:14,590 --> 00:11:15,860 want to snap together. 221 00:11:15,860 --> 00:11:18,250 And if I let go, notice indeed, the puzzle piece 222 00:11:18,250 --> 00:11:20,090 does automatically connect itself. 223 00:11:20,090 --> 00:11:23,048 And if I don't want to just say hello, exclamation point, but just more 224 00:11:23,048 --> 00:11:25,180 subtly, hello, comma world, I can just click 225 00:11:25,180 --> 00:11:28,050 in that white box and type my new text. 226 00:11:28,050 --> 00:11:30,100 So now consider what this is saying. 227 00:11:30,100 --> 00:11:33,280 When green flag clicked, say, hello world. 228 00:11:33,280 --> 00:11:36,100 And it kind of flows logically, much like it did verbally 229 00:11:36,100 --> 00:11:38,300 as I was programming myself a moment ago. 230 00:11:38,300 --> 00:11:42,150 So let's go ahead and click the green flag. 231 00:11:42,150 --> 00:11:43,040 We're programming. 232 00:11:43,040 --> 00:11:46,790 We've just run the program, it has stopped, and notice he's still saying, 233 00:11:46,790 --> 00:11:49,489 hello, world, because the computer, in many contexts, 234 00:11:49,489 --> 00:11:51,280 is going to take you pretty darn literally. 235 00:11:51,280 --> 00:11:56,310 And the fact that I didn't do what, explains why he's still saying hello? 236 00:11:56,310 --> 00:12:00,100 Right, I never told the computer to stop saying hello, 237 00:12:00,100 --> 00:12:03,310 or stop the program explicitly, and so it's going to keep doing this 238 00:12:03,310 --> 00:12:07,150 until I command it otherwise, as by stopping the program outright. 239 00:12:07,150 --> 00:12:09,610 Now, meanwhile, we had movement. 240 00:12:09,610 --> 00:12:13,250 So it's one thing to have a function, an action, like say. 241 00:12:13,250 --> 00:12:15,275 What if we wanted to have Scratch actually move? 242 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. 243 00:12:18,400 --> 00:12:20,930 It will just disappear if you drag it over to the middle. 244 00:12:20,930 --> 00:12:25,790 And now I kind of want to control the functionality of my program. 245 00:12:25,790 --> 00:12:28,030 So if I click on the control palette here, 246 00:12:28,030 --> 00:12:32,340 you'll notice a whole bunch of yellow puzzle pieces, one of which is forever. 247 00:12:32,340 --> 00:12:35,260 And that kind of connotes exactly what we're looking for, 248 00:12:35,260 --> 00:12:37,900 this notion of doing something cyclically, again, and again. 249 00:12:37,900 --> 00:12:40,330 It too wants to snap together when I let go. 250 00:12:40,330 --> 00:12:42,260 And now this seems a little unfortunate. 251 00:12:42,260 --> 00:12:44,980 Darnit, if this forever block doesn't leave me 252 00:12:44,980 --> 00:12:48,280 with just barely any room for other puzzle pieces, but no problem. 253 00:12:48,280 --> 00:12:51,400 The software that our friends at MIT wrote here for Scratch 254 00:12:51,400 --> 00:12:54,140 is going to automatically grow that block as needed 255 00:12:54,140 --> 00:12:56,290 once I start inserting new pieces. 256 00:12:56,290 --> 00:12:57,990 So I want to move. 257 00:12:57,990 --> 00:12:59,990 Motion sounds about right. 258 00:12:59,990 --> 00:13:02,480 And indeed, there we go, move 10 steps. 259 00:13:02,480 --> 00:13:05,440 Let me go ahead and put this inside, and notice this white line 260 00:13:05,440 --> 00:13:06,340 appears magnetically. 261 00:13:06,340 --> 00:13:08,950 I let go, it grows to fill it, and snaps into place. 262 00:13:08,950 --> 00:13:11,650 Let's just do one step as before, and we'll 263 00:13:11,650 --> 00:13:14,300 see in just a moment what I've done. 264 00:13:14,300 --> 00:13:15,910 Let's go ahead and click green flag. 265 00:13:15,910 --> 00:13:18,650 266 00:13:18,650 --> 00:13:22,680 It's a little underwhelmingly slow, but he's literally 267 00:13:22,680 --> 00:13:26,580 doing what we told him to do one step at a time. 268 00:13:26,580 --> 00:13:29,666 Thankfully, MIT had the foresight to make sure 269 00:13:29,666 --> 00:13:31,790 that scratch can never leave the screen completely, 270 00:13:31,790 --> 00:13:33,970 otherwise it's kind of a frustrating experience. 271 00:13:33,970 --> 00:13:36,546 So you can always kind of grab onto his little tail here, 272 00:13:36,546 --> 00:13:38,170 but notice the program's still running. 273 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, 274 00:13:44,760 --> 00:13:47,550 and so we'll see him going there again. 275 00:13:47,550 --> 00:13:50,040 But you'll notice a moment ago, I actually didn't really 276 00:13:50,040 --> 00:13:54,080 know necessarily where I was going to find the puzzle piece of interest 277 00:13:54,080 --> 00:13:56,940 to me, and even as I here to have to give some thought as 278 00:13:56,940 --> 00:13:58,830 to where these various puzzle pieces are, 279 00:13:58,830 --> 00:14:01,950 this is actually representative of how one might learn a new programming 280 00:14:01,950 --> 00:14:03,210 language for the first time. 281 00:14:03,210 --> 00:14:05,520 Once you understand some of the fundamentals, 282 00:14:05,520 --> 00:14:08,859 can you much more readily start to pick up what you need to know. 283 00:14:08,859 --> 00:14:10,650 Can you fill in the gaps in your knowledge? 284 00:14:10,650 --> 00:14:14,130 And thanks to Google, and Bing, and any other search engine out there 285 00:14:14,130 --> 00:14:17,370 these days, and any number of websites like Stack Overflow, and Hacker News, 286 00:14:17,370 --> 00:14:20,550 and the like, are there so many technical folks out there who 287 00:14:20,550 --> 00:14:23,640 can help you by answering questions for you, who have posted long ago 288 00:14:23,640 --> 00:14:25,740 answers to questions that you can rely on. 289 00:14:25,740 --> 00:14:28,980 And so indeed, the process of learning how to program these days, 290 00:14:28,980 --> 00:14:31,170 once you have a solid foundation in one or two 291 00:14:31,170 --> 00:14:33,900 or more different types of languages, really 292 00:14:33,900 --> 00:14:36,660 allows you to bootstrap yourself and figure out something new. 293 00:14:36,660 --> 00:14:39,390 So even as you might dive into an environment like Scratch, 294 00:14:39,390 --> 00:14:41,460 you realize and take comfort in the fact that you 295 00:14:41,460 --> 00:14:44,702 don't have to have known or seen every one of its features. 296 00:14:44,702 --> 00:14:47,910 Simply by pointing, and clicking, and trusting that you're probably not going 297 00:14:47,910 --> 00:14:51,107 to do much damage to the computer or to the program by just tinkering, 298 00:14:51,107 --> 00:14:52,440 can you really start to explore. 299 00:14:52,440 --> 00:14:56,310 And indeed, that's where a lot of the fun of programming starts to come out. 300 00:14:56,310 --> 00:14:59,550 Now, with that said, this program seems to be 301 00:14:59,550 --> 00:15:03,210 arguably buggy, and so far as it's kind of lame, if nothing else, 302 00:15:03,210 --> 00:15:06,870 that Scratch ends up walking pretty much off the side of the screen. 303 00:15:06,870 --> 00:15:09,090 Wouldn't it be nice if just like my example where 304 00:15:09,090 --> 00:15:12,150 I was about to walk off stage, but thanks to a condition, 305 00:15:12,150 --> 00:15:15,150 I didn't, can we prevent that kind of disaster? 306 00:15:15,150 --> 00:15:18,780 Well, let me go ahead and go into the control block, I think. 307 00:15:18,780 --> 00:15:22,556 And yep, indeed, there are not only looping constructs like forever, 308 00:15:22,556 --> 00:15:25,680 and then also notice repeat, where you can specify a finite number of times 309 00:15:25,680 --> 00:15:27,180 to do something again and again. 310 00:15:27,180 --> 00:15:30,420 Notice that there's this here, if then. 311 00:15:30,420 --> 00:15:32,170 And you know what? 312 00:15:32,170 --> 00:15:37,620 I don't want to move no matter what, I want to move, but then check 313 00:15:37,620 --> 00:15:39,484 immediately if I'm touching the edge. 314 00:15:39,484 --> 00:15:42,150 And here, too, I might have to do a little digging to figure out 315 00:15:42,150 --> 00:15:47,250 what this language can do, but I think if I go under sensing, ah, touching. 316 00:15:47,250 --> 00:15:49,320 And notice touching currently says mouse pointer, 317 00:15:49,320 --> 00:15:50,945 which isn't quite what I'm looking for. 318 00:15:50,945 --> 00:15:53,100 I'm looking for the edge, touching the edge, 319 00:15:53,100 --> 00:15:56,040 but sure enough, if I go ahead and click this drop down, 320 00:15:56,040 --> 00:15:58,730 I can change this puzzle piece to ask a question. 321 00:15:58,730 --> 00:16:00,074 Are you touching the edge? 322 00:16:00,074 --> 00:16:01,990 And this puzzle piece and the several below it 323 00:16:01,990 --> 00:16:05,460 are an example of what we might call a Boolean expression, named 324 00:16:05,460 --> 00:16:07,340 after someone by the name of Boole. 325 00:16:07,340 --> 00:16:11,160 And a Boolean expression is an expression, a statement, 326 00:16:11,160 --> 00:16:17,490 a question, whose answer is either yes or no, true or false, one or zero. 327 00:16:17,490 --> 00:16:19,920 And this is the perfect construct, therefore, 328 00:16:19,920 --> 00:16:23,760 to put inside of a condition, the proverbial fork in the road, 329 00:16:23,760 --> 00:16:28,020 or a branch so that you can decide based on that condition exactly what you 330 00:16:28,020 --> 00:16:28,680 want to do. 331 00:16:28,680 --> 00:16:33,030 So all that remains is for us to drop into place the Boolean expression 332 00:16:33,030 --> 00:16:36,210 via which we can answer the question, are we touching the edge? 333 00:16:36,210 --> 00:16:39,240 So indeed, let me go ahead and drag and drop this blue puzzle piece 334 00:16:39,240 --> 00:16:39,930 right on there. 335 00:16:39,930 --> 00:16:42,090 And notice, it too doesn't seem to fit quite right, 336 00:16:42,090 --> 00:16:43,530 but it's going to grow to fill. 337 00:16:43,530 --> 00:16:46,050 And now notice inside of the if condition, 338 00:16:46,050 --> 00:16:48,720 we have an opportunity to slide in one or more other pieces. 339 00:16:48,720 --> 00:16:50,320 So what do we want to do? 340 00:16:50,320 --> 00:16:53,410 Well, let me go to motion as well. 341 00:16:53,410 --> 00:16:56,610 And let's see, if touching edge then, let me go ahead 342 00:16:56,610 --> 00:16:58,710 and turn some number of degrees. 343 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, 344 00:17:02,460 --> 00:17:03,450 the cat is still going. 345 00:17:03,450 --> 00:17:05,520 Let me go ahead and hit the stop sign there. 346 00:17:05,520 --> 00:17:08,369 But we probably don't want to have him turn only 15 degrees, 347 00:17:08,369 --> 00:17:11,800 we probably want him to reverse his direction entirely. 348 00:17:11,800 --> 00:17:13,690 So I think that's going to be 180 degrees. 349 00:17:13,690 --> 00:17:17,050 So let me go ahead and make that change, and then movement, 350 00:17:17,050 --> 00:17:18,839 he's going a little slow, but that's OK. 351 00:17:18,839 --> 00:17:21,569 So let me go ahead and drag him back to the middle of the screen, 352 00:17:21,569 --> 00:17:24,660 click our green flag, and really cross our fingers 353 00:17:24,660 --> 00:17:29,680 as is not uncommon in programming, and come on, come on. 354 00:17:29,680 --> 00:17:30,180 All right. 355 00:17:30,180 --> 00:17:32,250 All right, so still arguably a little buggy. 356 00:17:32,250 --> 00:17:34,410 I didn't really intend for him to go upside down, 357 00:17:34,410 --> 00:17:37,990 but he indeed literally did turn around 180 degrees. 358 00:17:37,990 --> 00:17:40,080 And there too, that's kind of a key takeaway, 359 00:17:40,080 --> 00:17:42,690 is that in most any programming language, the language, 360 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. 361 00:17:46,180 --> 00:17:49,519 So if I simply told Scratch to sort of turn 180 degrees, 362 00:17:49,519 --> 00:17:51,060 that's exactly what he's going to do. 363 00:17:51,060 --> 00:17:54,960 He's not going to reorient himself as a reasonable human being might, 364 00:17:54,960 --> 00:17:56,610 we would have to write that code. 365 00:17:56,610 --> 00:18:01,590 Now, meanwhile this gets very boring quickly, so how might I speed him up? 366 00:18:01,590 --> 00:18:05,910 Well, consider what it means to speed up, and consider in fact what animation 367 00:18:05,910 --> 00:18:09,780 really is whether in comic book form if you flip through the pages really fast, 368 00:18:09,780 --> 00:18:13,530 or if you watch a cartoon on TV or online, 369 00:18:13,530 --> 00:18:17,580 animation really is just the process of showing me one thing after the other 370 00:18:17,580 --> 00:18:19,210 really quickly, typically. 371 00:18:19,210 --> 00:18:21,250 Now, this is not all that quick, but what 372 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, 373 00:18:26,620 --> 00:18:29,440 but like 10 steps at a time or the equivalent of 10? 374 00:18:29,440 --> 00:18:32,080 I can't really move my feet that quickly so we'll pretend, 375 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. 376 00:18:37,900 --> 00:18:40,822 And he immediately starts to balance a little more animatedly. 377 00:18:40,822 --> 00:18:42,780 Now, we can have a little bit of fun with this. 378 00:18:42,780 --> 00:18:47,770 So a little bit of a intellectual aside, if we go to Scratch's sounds feature 379 00:18:47,770 --> 00:18:51,820 like this, let me go ahead and first stop scratch here, let me go ahead 380 00:18:51,820 --> 00:18:57,010 and click the microphone to record a new sound, let me click the record button, 381 00:18:57,010 --> 00:18:58,790 ouch. 382 00:18:58,790 --> 00:19:01,130 All right, so that is a wave form of what 383 00:19:01,130 --> 00:19:02,889 the word ouch looks like when I say it. 384 00:19:02,889 --> 00:19:05,180 I'm going to go ahead and delete the dead air up front, 385 00:19:05,180 --> 00:19:06,890 and a little bit of the dead air here. 386 00:19:06,890 --> 00:19:09,440 I'm going to change the name to, let's call it ouch. 387 00:19:09,440 --> 00:19:12,630 And what's kind of fun now is if I go into a sound, 388 00:19:12,630 --> 00:19:15,470 notice that ouch is among my available sounds. 389 00:19:15,470 --> 00:19:17,920 Now, when do I want to play ouch? 390 00:19:17,920 --> 00:19:19,510 It's kind of a condition too. 391 00:19:19,510 --> 00:19:24,580 Only if I have walked into the stage do I want this to sound out, 392 00:19:24,580 --> 00:19:26,740 so let me go ahead and drag it in here. 393 00:19:26,740 --> 00:19:30,970 And now let's consider before we get to the finale here, what's going on? 394 00:19:30,970 --> 00:19:35,590 When green flag clicked, do the following forever, again, 395 00:19:35,590 --> 00:19:37,370 and again, and again, move 10 steps. 396 00:19:37,370 --> 00:19:40,203 And that's what was getting Scratch to move pretty quickly, but then 397 00:19:40,203 --> 00:19:43,750 every time you take those 10 steps, take a moment to check if you're touching 398 00:19:43,750 --> 00:19:46,790 the edge, then turn around 180 degrees. 399 00:19:46,790 --> 00:19:49,060 But one more thing to do now, because again, 400 00:19:49,060 --> 00:19:54,640 both the blue and the purple block are inside of this yellow if branch, 401 00:19:54,640 --> 00:19:56,300 we're going to do both of those. 402 00:19:56,300 --> 00:20:00,040 So in theory, what Scratch is going to be doing, is as he walks again, 403 00:20:00,040 --> 00:20:04,990 and again, and again, and again, and again, and he finally gets to the edge, 404 00:20:04,990 --> 00:20:08,090 hopefully he's going to turn around 180 degrees. 405 00:20:08,090 --> 00:20:11,290 But a little more literally than I, the human might do. 406 00:20:11,290 --> 00:20:12,250 So let's try this. 407 00:20:12,250 --> 00:20:16,060 Oh, and actually, I left out one detail that Scratch will not. 408 00:20:16,060 --> 00:20:17,365 Ouch. 409 00:20:17,365 --> 00:20:18,554 Ouch. 410 00:20:18,554 --> 00:20:19,871 Ouch. 411 00:20:19,871 --> 00:20:20,370 Ouch. 412 00:20:20,370 --> 00:20:24,470 So ironic that the cat sounds more like me than I do when walking into walls. 413 00:20:24,470 --> 00:20:26,316 So that there is Scratch. 414 00:20:26,316 --> 00:20:28,940 It's just one programming language, and it's graphical at that, 415 00:20:28,940 --> 00:20:31,148 and we've only scratched the surface of its features. 416 00:20:31,148 --> 00:20:33,140 And indeed, there's more sophisticated things 417 00:20:33,140 --> 00:20:37,460 that we can do in order to program even more animatedly, even more 418 00:20:37,460 --> 00:20:38,300 sophisticatedly. 419 00:20:38,300 --> 00:20:42,050 And in fact if we skim ahead to one of the first programs I wrote back 420 00:20:42,050 --> 00:20:46,040 in the day, let me go ahead and show you something called Oscar Time. 421 00:20:46,040 --> 00:20:48,350 Here is Oscar Time, and you'll hear in just a moment 422 00:20:48,350 --> 00:20:51,260 as I hit play, not only does this have animation, 423 00:20:51,260 --> 00:20:55,580 it's also got an incredibly long song, which long story short, was not 424 00:20:55,580 --> 00:20:57,500 the best design decision back in the day, 425 00:20:57,500 --> 00:21:00,020 because as I worked through all of this program's bugs, 426 00:21:00,020 --> 00:21:04,260 all I heard was the Sesame Street song for I think eight or more hours, 427 00:21:04,260 --> 00:21:06,410 but I have very fond memories nonetheless, 428 00:21:06,410 --> 00:21:08,689 and this then is Oscar Time. 429 00:21:08,689 --> 00:21:13,000 [MUSIC PLAYING] 430 00:21:13,000 --> 00:21:14,410 So what's worth noting now? 431 00:21:14,410 --> 00:21:17,940 It looks fairly simple at first glance, we have some static imagery at left, 432 00:21:17,940 --> 00:21:19,930 a trash can, what's in there I wonder? 433 00:21:19,930 --> 00:21:21,700 And then a piece of trash that's falling. 434 00:21:21,700 --> 00:21:25,780 But this is an opportunity to consider how is that piece of trash falling? 435 00:21:25,780 --> 00:21:27,130 Well, it's some kind of sprite. 436 00:21:27,130 --> 00:21:29,546 And indeed, in Scratch, you can have more than just a cat, 437 00:21:29,546 --> 00:21:32,050 you can have other animations on the screen as well, 438 00:21:32,050 --> 00:21:34,270 but what was happening with that piece of trash? 439 00:21:34,270 --> 00:21:38,496 Well, odds are I had it positioned originally at the top of the screen, 440 00:21:38,496 --> 00:21:40,370 and there's a puzzle piece that will do that, 441 00:21:40,370 --> 00:21:43,970 and then I had it moving one or more steps at a time in a loop. 442 00:21:43,970 --> 00:21:46,720 But then here instead of bouncing, which would be a little strange 443 00:21:46,720 --> 00:21:51,640 if your trash is just kind of bouncing up and down off the ground, 444 00:21:51,640 --> 00:21:52,660 I just have it stop. 445 00:21:52,660 --> 00:21:54,734 So there's probably a condition in there as well. 446 00:21:54,734 --> 00:21:56,650 I talked over another object that was falling, 447 00:21:56,650 --> 00:22:00,250 but there's another sprite, this blue sneaker, that also fell from the sky, 448 00:22:00,250 --> 00:22:02,114 but from a slightly different place. 449 00:22:02,114 --> 00:22:04,030 And it turns out in many programming languages 450 00:22:04,030 --> 00:22:08,830 can you use randomness, or really pseudo randomness that the computer simulates, 451 00:22:08,830 --> 00:22:10,930 and so that's why the shoe, or the sneaker, 452 00:22:10,930 --> 00:22:12,910 actually fell from a different location. 453 00:22:12,910 --> 00:22:15,700 And if I kept playing this game again and again by restarting, 454 00:22:15,700 --> 00:22:18,910 odds are that trash, that sneaker, and now that newspaper 455 00:22:18,910 --> 00:22:20,990 would fall from different locations. 456 00:22:20,990 --> 00:22:24,130 So if you've ever played a computer game or game on your phone 457 00:22:24,130 --> 00:22:26,710 and it's not the same experience every time, 458 00:22:26,710 --> 00:22:28,920 something kind of sort of changes, like the monsters 459 00:22:28,920 --> 00:22:32,410 start from a different direction, or the bad guy gets even harder or easier 460 00:22:32,410 --> 00:22:36,010 depending on your level, that might be the result of some pseudo randomness. 461 00:22:36,010 --> 00:22:39,790 Asking the computer to just kind of pick a number, or pick a location, 462 00:22:39,790 --> 00:22:43,144 and then do something with that so that the game is constantly changing. 463 00:22:43,144 --> 00:22:45,310 Now, this is not all that interesting if all I wrote 464 00:22:45,310 --> 00:22:47,560 was a program where trash is falling from the sky, 465 00:22:47,560 --> 00:22:48,910 but notice what you can do. 466 00:22:48,910 --> 00:22:53,140 You can grab things like the clock, click and drag, and notice, 467 00:22:53,140 --> 00:22:54,760 this too is probably a condition. 468 00:22:54,760 --> 00:22:57,280 If near the trash can, open the lid. 469 00:22:57,280 --> 00:22:59,960 And again, here's the finale, nope. 470 00:22:59,960 --> 00:23:01,600 Here is the finale. 471 00:23:01,600 --> 00:23:04,240 As the trash falls into the can properly, 472 00:23:04,240 --> 00:23:06,940 does Oscar pop out and start counting. 473 00:23:06,940 --> 00:23:09,430 And indeed, if you do this again, and again, and again, it 474 00:23:09,430 --> 00:23:11,840 would seem that Oscar is using what? 475 00:23:11,840 --> 00:23:12,670 A variable. 476 00:23:12,670 --> 00:23:15,070 And indeed, that's how he's keeping track of the score, 477 00:23:15,070 --> 00:23:17,560 as might most any computer game. 478 00:23:17,560 --> 00:23:22,630 Now, you can absolutely program games, animations, interactive pieces 479 00:23:22,630 --> 00:23:25,780 of art in a language like Scratch, and it actually indeed by design, 480 00:23:25,780 --> 00:23:27,160 has a pretty high ceiling. 481 00:23:27,160 --> 00:23:29,500 You can write some pretty sophisticated programs 482 00:23:29,500 --> 00:23:33,700 way more sophisticated and impressive than the one I did back in the day. 483 00:23:33,700 --> 00:23:37,810 But what's exciting about that is that it's the result entirely of again, 484 00:23:37,810 --> 00:23:38,770 this layering. 485 00:23:38,770 --> 00:23:41,950 Using some very basic constructs, some simple ingredients, 486 00:23:41,950 --> 00:23:44,380 some building blocks, literally, whereby you 487 00:23:44,380 --> 00:23:47,350 build on these fundamentals of functions, and loops, 488 00:23:47,350 --> 00:23:50,290 and variables, conditions, Boolean expressions, and even more. 489 00:23:50,290 --> 00:23:53,590 And then so long as you take sort of baby steps, so to speak. 490 00:23:53,590 --> 00:23:56,110 Biting off just a little piece of functionality, 491 00:23:56,110 --> 00:23:58,030 just get the trash to appear on the screen, 492 00:23:58,030 --> 00:24:00,280 then just get the trash to move on the screen, 493 00:24:00,280 --> 00:24:02,350 then get the trash to stop moving on the screen 494 00:24:02,350 --> 00:24:04,780 when it hits the ground can you begin to take steps, 495 00:24:04,780 --> 00:24:07,120 and steps, and steps toward your final solution. 496 00:24:07,120 --> 00:24:11,170 But what's key in programming is to compartmentalize some of the features 497 00:24:11,170 --> 00:24:13,515 and to do them piecemeal, so that you don't just 498 00:24:13,515 --> 00:24:15,640 sit down with a blank window in front of you trying 499 00:24:15,640 --> 00:24:17,170 to bang out the whole entire thing. 500 00:24:17,170 --> 00:24:19,330 Because invariably, if you're like me, the thing 501 00:24:19,330 --> 00:24:22,720 is going to be riddled with mistakes, otherwise known as bugs. 502 00:24:22,720 --> 00:24:26,620 Because it's a little too hard to see everything clearly 503 00:24:26,620 --> 00:24:30,650 if you're not testing, and testing, and testing perhaps along the way. 504 00:24:30,650 --> 00:24:33,150 But what do most people program in these days? 505 00:24:33,150 --> 00:24:35,650 Well, you can use Scratch, but generally speaking, someone's 506 00:24:35,650 --> 00:24:40,120 going to use a higher level, a more traditional language that 507 00:24:40,120 --> 00:24:42,107 tends to be textual, and not graphical. 508 00:24:42,107 --> 00:24:44,440 So it's a wonderful environment to learn programming in, 509 00:24:44,440 --> 00:24:46,400 it's a wonderful environment to teach programming in, 510 00:24:46,400 --> 00:24:49,300 but you can very quickly take off these proverbial training wheels, 511 00:24:49,300 --> 00:24:52,960 and start to use something a little more arcane, yes, 512 00:24:52,960 --> 00:24:55,420 but a little more powerful, at the end of the day. 513 00:24:55,420 --> 00:24:58,470 And one of the earliest languages that was not binary 514 00:24:58,470 --> 00:25:01,780 and was not something called assembly language, was this language here, 515 00:25:01,780 --> 00:25:02,770 called C. 516 00:25:02,770 --> 00:25:08,470 Now, this program too, quite simply as you might guess, prints, hello, world. 517 00:25:08,470 --> 00:25:09,160 That's it. 518 00:25:09,160 --> 00:25:11,260 But there's a lot of overhead syntactically. 519 00:25:11,260 --> 00:25:14,170 I see weird curly braces, and parentheses, 520 00:25:14,170 --> 00:25:15,790 and a semi-colon, backslash n. 521 00:25:15,790 --> 00:25:17,890 There's a lot of magical incantations here 522 00:25:17,890 --> 00:25:22,210 that would seem to suggest complexity, and yet all I want to do 523 00:25:22,210 --> 00:25:23,860 is just print out, hello, world. 524 00:25:23,860 --> 00:25:26,989 But C is representative of a type of language 525 00:25:26,989 --> 00:25:28,780 and a type of programming experience that's 526 00:25:28,780 --> 00:25:31,420 pretty representative of lot of different languages as well. 527 00:25:31,420 --> 00:25:34,540 But the computer isn't going to understand this right from the get go. 528 00:25:34,540 --> 00:25:38,500 We're going to have to first convert this language, this language C, 529 00:25:38,500 --> 00:25:41,260 into those zeros and ones that the computer does understand. 530 00:25:41,260 --> 00:25:44,320 And the means by which we do this is typically as follows. 531 00:25:44,320 --> 00:25:48,800 I write in a language like C, what we'll generally called source code. 532 00:25:48,800 --> 00:25:52,060 This is simply text, like the lines you just 533 00:25:52,060 --> 00:25:55,690 saw a moment ago, that ultimately just say, hello, world, but with some syntax 534 00:25:55,690 --> 00:25:57,680 around it to make that all happen. 535 00:25:57,680 --> 00:26:00,820 But the computer doesn't typically understand source code. 536 00:26:00,820 --> 00:26:05,350 It understands zeros and ones, otherwise known as machine code. 537 00:26:05,350 --> 00:26:07,960 So machine code is what the machine understands, 538 00:26:07,960 --> 00:26:11,320 and source code is what the source, me understands. 539 00:26:11,320 --> 00:26:13,070 There's got to be something in the middle. 540 00:26:13,070 --> 00:26:16,850 And indeed, there's typically a program in the middle called 541 00:26:16,850 --> 00:26:21,200 a compiler, whose purpose in life is to take source code as input, 542 00:26:21,200 --> 00:26:23,550 and produce machine code as output. 543 00:26:23,550 --> 00:26:26,570 So before I can run a program like that, I 544 00:26:26,570 --> 00:26:30,050 have to run another program on my computer, called the compiler. 545 00:26:30,050 --> 00:26:32,230 Might be called Clang, it might be called GCC, 546 00:26:32,230 --> 00:26:35,150 it might be called Visual Studio, it might be called Code Blocks. 547 00:26:35,150 --> 00:26:38,780 There's so many different compilers out there, but at the end of the day, what 548 00:26:38,780 --> 00:26:43,430 they fundamentally do is take one language as input, and output another 549 00:26:43,430 --> 00:26:48,650 as output, and generally in a way that your operating system and your CPU both 550 00:26:48,650 --> 00:26:49,640 understand. 551 00:26:49,640 --> 00:26:52,050 But what does this machine code look like? 552 00:26:52,050 --> 00:26:54,200 Well it literally will look like zeros and ones. 553 00:26:54,200 --> 00:26:58,980 And indeed, if I run this source code through a compiler and don't run it 554 00:26:58,980 --> 00:27:01,550 but look at it with a special program, I will actually 555 00:27:01,550 --> 00:27:04,372 see patterns of zeros and ones exactly like these. 556 00:27:04,372 --> 00:27:06,080 And even I, the human, in looking at this 557 00:27:06,080 --> 00:27:07,970 don't really know what they represent. 558 00:27:07,970 --> 00:27:10,619 I could maybe convert it to ASCII, but that's not really 559 00:27:10,619 --> 00:27:11,660 going to get me anywhere. 560 00:27:11,660 --> 00:27:14,390 I would have to pull out my instruction manual 561 00:27:14,390 --> 00:27:17,330 from the Intel CPU inside my computer to actually understand 562 00:27:17,330 --> 00:27:18,629 most of these patterns of bits. 563 00:27:18,629 --> 00:27:20,420 So I'm not going to go to that extent, this 564 00:27:20,420 --> 00:27:23,720 is why we have higher level languages like C. 565 00:27:23,720 --> 00:27:27,260 But again, this isn't all that pleasurable to look at, to write, 566 00:27:27,260 --> 00:27:30,410 it requires a bit of cognitive overhead to remember all of this. 567 00:27:30,410 --> 00:27:33,380 There are simpler languages like this one 568 00:27:33,380 --> 00:27:37,550 here, Python, where thankfully, you just say what you mean. 569 00:27:37,550 --> 00:27:40,260 Now, there's still a little bit of syntax, there's some quotes, 570 00:27:40,260 --> 00:27:41,510 there's some parentheses. 571 00:27:41,510 --> 00:27:44,540 But at the end of the day, it's really far more so just 572 00:27:44,540 --> 00:27:48,710 the word print, and just the sentence, or phrase, that I want to print. 573 00:27:48,710 --> 00:27:52,340 Gone are all those curly braces, the requisite semi-colon, and more, 574 00:27:52,340 --> 00:27:55,100 and so certain languages are a little simpler. 575 00:27:55,100 --> 00:27:56,870 And indeed, Python and other languages are 576 00:27:56,870 --> 00:27:59,829 the result of programmers, and humans, more generally, having learned, 577 00:27:59,829 --> 00:28:02,120 gee, wouldn't it be nice if this were a little simpler. 578 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 579 00:28:05,540 --> 00:28:07,970 certain assumptions for me so that you don't 580 00:28:07,970 --> 00:28:11,880 have to write and remember as much complexity as we saw a moment ago. 581 00:28:11,880 --> 00:28:17,060 But Python's an interesting one too, because it is generally interpreted, 582 00:28:17,060 --> 00:28:17,651 so to speak. 583 00:28:17,651 --> 00:28:19,400 And that's a bit of an oversimplification, 584 00:28:19,400 --> 00:28:22,400 but when writing code in a language like Python, 585 00:28:22,400 --> 00:28:25,430 we again still have source code, just as we saw a moment ago, 586 00:28:25,430 --> 00:28:29,150 print hello, world, but you don't convert it to machine code 587 00:28:29,150 --> 00:28:31,460 per se, at least not explicitly. 588 00:28:31,460 --> 00:28:34,940 Rather, you run it as input into a program 589 00:28:34,940 --> 00:28:39,756 called an interpreter, whose purpose in life is to do exactly that, 590 00:28:39,756 --> 00:28:41,880 to interpret the lines of code that you've written, 591 00:28:41,880 --> 00:28:45,600 top to bottom, left to right, and actually translate them, essentially, 592 00:28:45,600 --> 00:28:48,450 into the language that the computer can understand. 593 00:28:48,450 --> 00:28:51,750 And it does this though not by converting them to zeros and ones, 594 00:28:51,750 --> 00:28:55,500 but by outputting something called byte code, which 595 00:28:55,500 --> 00:28:59,617 is an intermediate representation of the language. 596 00:28:59,617 --> 00:29:01,950 So it's much more cryptic as we'll see in just a moment, 597 00:29:01,950 --> 00:29:04,210 but it's not as cryptic as zeros and ones, 598 00:29:04,210 --> 00:29:07,170 and so when you use a language like Python and others like it, 599 00:29:07,170 --> 00:29:10,120 you will often install a special piece of software, 600 00:29:10,120 --> 00:29:14,370 whether you realize it or not, called a virtual machine, or VM. 601 00:29:14,370 --> 00:29:18,600 And that virtual machine is kind of like an imaginary CPU that 602 00:29:18,600 --> 00:29:21,570 can work on Macs, and PCs, and other computers still, 603 00:29:21,570 --> 00:29:24,570 that someone out there has written that understands byte code, 604 00:29:24,570 --> 00:29:29,610 and the virtual machine in turn is what is running at the end of the day. 605 00:29:29,610 --> 00:29:32,852 And it's running your byte code, which is the result of your source code. 606 00:29:32,852 --> 00:29:36,060 And long story short, even though this looks like a more complicated process, 607 00:29:36,060 --> 00:29:41,760 what's nice about this process in many of these newer languages 608 00:29:41,760 --> 00:29:45,390 is that a lot of these intermediate steps are completely hidden from you. 609 00:29:45,390 --> 00:29:47,577 If you want to write a program in Python, 610 00:29:47,577 --> 00:29:49,410 you simply write it as source code, and then 611 00:29:49,410 --> 00:29:52,110 you run a command at your keyboard, and that's it. 612 00:29:52,110 --> 00:29:54,877 There's no explicit compilation process that you 613 00:29:54,877 --> 00:29:56,460 have to worry about as the programmer. 614 00:29:56,460 --> 00:30:00,030 The computer might be doing that for you underneath the hood, and indeed it is, 615 00:30:00,030 --> 00:30:02,680 but it's been obstructed away, so to speak. 616 00:30:02,680 --> 00:30:04,920 Now, let's see these two examples in action, 617 00:30:04,920 --> 00:30:08,130 but first, the intermediate language that Python 618 00:30:08,130 --> 00:30:10,830 is going to generate in order to be run on its virtual machine 619 00:30:10,830 --> 00:30:13,696 is this byte code here, something that looks a little bit like this. 620 00:30:13,696 --> 00:30:15,820 You can kind of sort of figure out what's going on. 621 00:30:15,820 --> 00:30:17,160 I see print, I see hello, world, but there's 622 00:30:17,160 --> 00:30:20,034 some other stuff that I don't necessarily understand at first glance, 623 00:30:20,034 --> 00:30:22,140 but that's OK, because the virtual machine that's 624 00:30:22,140 --> 00:30:24,270 going to run this ultimately will. 625 00:30:24,270 --> 00:30:25,440 So let's see this in action. 626 00:30:25,440 --> 00:30:28,260 I've gone ahead and opened up a terminal window, so to speak. 627 00:30:28,260 --> 00:30:31,350 Really a black and white window on my Mac, or PC for that matter, 628 00:30:31,350 --> 00:30:35,460 that has some software pre-installed, software that does understand C, 629 00:30:35,460 --> 00:30:38,110 and Python, and even some other languages as well. 630 00:30:38,110 --> 00:30:40,320 I'm going to go ahead and open a program called 631 00:30:40,320 --> 00:30:42,150 Nano, which is just a simple text editor, 632 00:30:42,150 --> 00:30:45,390 and I'm going to open a file called hello.c. 633 00:30:45,390 --> 00:30:48,300 And not to worry about what some of the syntax on the screen here is, 634 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 635 00:30:51,810 --> 00:30:57,450 ago, include standard I/O. Int main(void), and then in here, 636 00:30:57,450 --> 00:30:59,680 I'm going to do printf("hello, world/n");. 637 00:30:59,680 --> 00:31:05,210 638 00:31:05,210 --> 00:31:07,545 So I have just recreated that program in C, 639 00:31:07,545 --> 00:31:10,170 and I'm going to go ahead and save it in a file called hello.c. 640 00:31:10,170 --> 00:31:14,880 So all I've done is opened the textual equivalent of Microsoft Word, 641 00:31:14,880 --> 00:31:19,080 but a super light and less friendly version perhaps of it, 642 00:31:19,080 --> 00:31:20,669 but that I've used many times before. 643 00:31:20,669 --> 00:31:22,710 I'm now going to go ahead and type the following. 644 00:31:22,710 --> 00:31:28,172 Clang, for C language, -o hello space hello.c. 645 00:31:28,172 --> 00:31:30,630 So again, another one of these sort of magical incantations 646 00:31:30,630 --> 00:31:32,290 that I understand because I've done it before, 647 00:31:32,290 --> 00:31:34,998 but you could read this in a manual or be taught this in a class, 648 00:31:34,998 --> 00:31:39,550 and what this is telling my Mac to do is to compile hello.c 649 00:31:39,550 --> 00:31:44,410 into a new file called hello inside of which are those zeros and ones. 650 00:31:44,410 --> 00:31:47,470 If I go ahead and hit enter, nothing appears to have happened, 651 00:31:47,470 --> 00:31:50,400 but if I now type this command, dot slash hello 652 00:31:50,400 --> 00:31:52,650 where dot just means go into my current folder, 653 00:31:52,650 --> 00:31:55,260 and hello means run the program called hello, we shall 654 00:31:55,260 --> 00:31:58,870 see if I did this right, hello, world. 655 00:31:58,870 --> 00:32:01,300 Underwhelming result, but a correct result, 656 00:32:01,300 --> 00:32:04,120 but it did take a few lines of code and a bit of complexity. 657 00:32:04,120 --> 00:32:08,680 If I instead run Nano of hello.py, where py is commonly the extension 658 00:32:08,680 --> 00:32:12,542 for a Python program, and instead I literally just type print("hello, 659 00:32:12,542 --> 00:32:21,160 world");, and then save this file, and now run Python, hello.py and hit enter, 660 00:32:21,160 --> 00:32:25,930 you'll see the exact same results with arguably a decent amount less effort. 661 00:32:25,930 --> 00:32:27,730 So these are just two languages now. 662 00:32:27,730 --> 00:32:29,290 There are so many others out there. 663 00:32:29,290 --> 00:32:33,010 For instance, here we have an example of this same program, fundamentally hello, 664 00:32:33,010 --> 00:32:36,760 world, in a language called C++, which essentially adapts C, 665 00:32:36,760 --> 00:32:40,160 and adds some new features to it while changing a few things as well. 666 00:32:40,160 --> 00:32:42,250 And you can see the syntax alone is already 667 00:32:42,250 --> 00:32:44,020 a little bit different by convention. 668 00:32:44,020 --> 00:32:46,090 Here's an example of hello world in Java, 669 00:32:46,090 --> 00:32:49,510 a very popular language formally in the context of little things 670 00:32:49,510 --> 00:32:52,240 called applets on the web, more recently in enterprise software 671 00:32:52,240 --> 00:32:54,760 on the backend for servers as well, as often commonly 672 00:32:54,760 --> 00:32:58,717 used as a teaching language with students in school. 673 00:32:58,717 --> 00:33:00,550 This here is an example of a language called 674 00:33:00,550 --> 00:33:02,930 Ruby, which is often popular at the command line 675 00:33:02,930 --> 00:33:05,680 in that black and white environment, where you're running commands 676 00:33:05,680 --> 00:33:10,120 with your keyboard, as well as in a web context using a framework called Rails, 677 00:33:10,120 --> 00:33:12,470 or Ruby on Rails, if you've heard of that. 678 00:33:12,470 --> 00:33:15,640 Lastly here is another example, this one in a functional language 679 00:33:15,640 --> 00:33:18,700 called Lisp, whereby you tend to have more parentheses, 680 00:33:18,700 --> 00:33:22,000 and it's what's an example of a functional language, which doesn't just 681 00:33:22,000 --> 00:33:23,000 mean that it functions. 682 00:33:23,000 --> 00:33:25,625 It's a fundamentally different type of language than the others 683 00:33:25,625 --> 00:33:27,910 we've looked at thus far, which are procedural, 684 00:33:27,910 --> 00:33:31,264 or imperative, which is only to say it's a somewhat different mental model 685 00:33:31,264 --> 00:33:33,430 when it comes to programming in languages like this, 686 00:33:33,430 --> 00:33:37,092 but you can still print out things like hello, world, quite simply. 687 00:33:37,092 --> 00:33:38,800 And then there's JavaScript, which exists 688 00:33:38,800 --> 00:33:43,330 in a number of contexts today both in the context of the web browsers, 689 00:33:43,330 --> 00:33:44,900 but also in web servers. 690 00:33:44,900 --> 00:33:46,870 This is how you might, on the server side, 691 00:33:46,870 --> 00:33:48,520 print out something like hello, world. 692 00:33:48,520 --> 00:33:50,410 But JavaScript is an interesting one too, 693 00:33:50,410 --> 00:33:54,160 because there's newer and newer features of the language itself. 694 00:33:54,160 --> 00:33:57,140 And this is true of a lot of languages, they evolve over time. 695 00:33:57,140 --> 00:33:59,140 So humans don't just invent new languages, 696 00:33:59,140 --> 00:34:02,020 they sometimes go back and improve on and increase 697 00:34:02,020 --> 00:34:05,110 the version number of past languages by updating 698 00:34:05,110 --> 00:34:06,670 the tools that understand them. 699 00:34:06,670 --> 00:34:10,030 So Clang, like I ran a moment ago, which was my compiler, 700 00:34:10,030 --> 00:34:12,130 and Python, which I ran a moment ago, which 701 00:34:12,130 --> 00:34:15,850 was my interpreter, and coincidentally also the name of the language. 702 00:34:15,850 --> 00:34:17,620 Those can continually be updated. 703 00:34:17,620 --> 00:34:19,725 You can download and upgrade versions of those, 704 00:34:19,725 --> 00:34:21,850 and they'll support newer versions of the language, 705 00:34:21,850 --> 00:34:24,070 and so it's very common these days for JavaScript 706 00:34:24,070 --> 00:34:29,860 to actually be newer than is actually supported by browsers out there. 707 00:34:29,860 --> 00:34:33,820 And so a common term of art in this world now is to transpile. 708 00:34:33,820 --> 00:34:38,469 Not compile, but transpile JavaScript to JavaScript, specifically 709 00:34:38,469 --> 00:34:42,610 from a newer version of JavaScript to an older version of JavaScript, 710 00:34:42,610 --> 00:34:46,510 maybe like English to old English, simply because the browsers of today 711 00:34:46,510 --> 00:34:49,510 don't necessarily understand the newest version of English, 712 00:34:49,510 --> 00:34:52,360 they're still speaking something from yesteryear. 713 00:34:52,360 --> 00:34:55,000 So there's any number of methodologies, there's 714 00:34:55,000 --> 00:34:58,600 any number of languages you might use, and indeed, this is just a few of them 715 00:34:58,600 --> 00:34:59,466 here. 716 00:34:59,466 --> 00:35:01,340 You might recognize some of these names here. 717 00:35:01,340 --> 00:35:04,300 Many of these are increasingly used in the web context 718 00:35:04,300 --> 00:35:07,030 to actually build websites, to build mobile applications, 719 00:35:07,030 --> 00:35:09,490 to build things that are optimized for your phones, 720 00:35:09,490 --> 00:35:12,452 but the dot dot dot's just we're really just scratching the surface. 721 00:35:12,452 --> 00:35:14,410 And if you've ever wondered what more there is, 722 00:35:14,410 --> 00:35:16,780 let me invite you to go to Wikipedia or beyond, 723 00:35:16,780 --> 00:35:19,120 and you'll see an overwhelming list of languages 724 00:35:19,120 --> 00:35:22,930 and also a lot more of the history of these and many other languages. 725 00:35:22,930 --> 00:35:25,390 But of course, the examples we've done thus far 726 00:35:25,390 --> 00:35:27,820 have been in the graphical context like Scratch, 727 00:35:27,820 --> 00:35:31,930 they've been in the textual context like C and Python, what we haven't done 728 00:35:31,930 --> 00:35:34,420 is actually leveraged the worldwide web. 729 00:35:34,420 --> 00:35:38,410 We've not actually written a program that runs on my phone, it would seem. 730 00:35:38,410 --> 00:35:41,260 We've not yet written a program that runs in my web browser, 731 00:35:41,260 --> 00:35:42,880 on my laptop or desktop. 732 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 733 00:35:46,210 --> 00:35:47,890 building blocks, if you will. 734 00:35:47,890 --> 00:35:49,420 Languages like HTML. 735 00:35:49,420 --> 00:35:51,430 Not a programming language, a markup language, 736 00:35:51,430 --> 00:35:53,710 but it's the language in which web pages are written, 737 00:35:53,710 --> 00:35:57,040 and it provides us with a new and improved context, perhaps, 738 00:35:57,040 --> 00:35:59,840 for writing software using the same ideas, 739 00:35:59,840 --> 00:36:02,305 but with different user interfaces on the phone. 740 00:36:02,305 --> 00:36:04,180 But to get to that point, we're going to need 741 00:36:04,180 --> 00:36:06,520 to understand a little bit about that other language, HTML, 742 00:36:06,520 --> 00:36:08,860 we're going to need to understand a little bit about the world wide web, 743 00:36:08,860 --> 00:36:11,830 and ultimately, we're going to need to understand how the internet 744 00:36:11,830 --> 00:36:13,980 itself works. 745 00:36:13,980 --> 00:36:16,660