[MUSIC PLAYING] 

DOUG LLOYD: So by now we're old pros at web programming, right? And we've covered several languages in individual videos. And now let's do one more, JavaScript. 

First the good news, JavaScript is a modern programming language much like PHP whose syntax is derived from C, so that's a good place to start. It's about as old as PHP, as well, having been around about 20 years. It was invented around the same time as PHP. And JavaScript is actually pretty fundamental to the user experience of the web. In fact, there are three languages that I would say sort of make up the user experience of interacting with the website, html, css, and JavaScript. And so now let's talk a little bit about JavaScript. 

The bad news, though, with JavaScript is that it sets a lot of rules for itself, and then it breaks them. And JavaScript can actually be kind of challenging to learn, because it's unlike C and PHP, which are very structured and have very rigid rules for how things can work. JavaScript has kind of gotten so flexible that maybe things aren't going to work the way we expect them to, and maybe we really can't learn our first programming language as a JavaScript. So maybe because it doesn't set itself any rules, and it doesn't really enforce good coding habits. But now we've hopefully developed some good coding habits, and so we can start to foray into JavaScript a little bit. 

To write JavaScript, similar to opening up a C file with a dot C extension or a PHP file with a dot PHP extension, all we need to do is open up a file with the dot js file extension. We don't need to have any special delimiters like we did in PHP. That sort of angle bracket question mark PHP that we're used to from that, the way we tell our browser that what we have is JavaScript is by including it in an html tag, and we'll see a little bit about how to do that in just a moment. 

The other thing that makes JavaScript different, though, is that it runs client side. So recall with PHP that we could never really see the PHP that underlined a website. If we ever viewed the page source, we would only see the html that was generated by that PHP. But JavaScript runs client side. Your JavaScript runs on your computer. And that's why you can do things like add blockers. Right? Ad blocking is usually done by killing all of the JavaScript that is running on a particular website. And because it would have to run on your machine client side, you can just stop the JavaScript for running entirely. That also means that when you use a website that includes JavaScript, you have to send the JavaScript source code as part of your http response to the client when they request it. And so you might not want to use JavaScript to do really sensitive things like passing information about users' passwords back and forth, because they're actually going to receive all of the source code, not just the html that is generated, such as would be the case with say PHP. 

So how do we include JavaScript in our html to start with? Well, similar to CSS, actually, is sort of how we do it here. With CSS we have style tags. And inside of those style tags, we can define a CSS style sheet. Similarly with JavaScript can we open up script tags, another html tag we didn't talk about in our html video, and write JavaScript in between those script tags. Also though, like CSS, we could link in outside CSS files and pull them into our program that way. With CSS we can also, excuse me, with JavaScript we can also specify the source attribute of the script tag to link in JavaScript separately, so you don't have to write it in between script tags, we can link it in using that script tag as well. And just as with the case with CSS where we recommended that it was probably in your best interest to write your CSS in a separate file in case you need to change it, similarly do we recommend that you write your JavaScript in separate files and use the script tags source attribute to tie your JavaScript into your html, your web page. 

So JavaScript variables, we'll start talking about the syntax here. And we'll go through this kind of quickly, because we've done this in PHP, so this should all be pretty familiar. So variables in JavaScript are very similar to PHP variables. There's no type specifier, and when you introduce a variable, you prefix it with the var keyword. In PHP we would do something like this, dollar sign x. That's how we indicated a variable, but no, we don't mention the type of the variable at all. We would say something like dollar sign x equals 44 in PHP. If we were doing the same thing in JavaScript, we would say var x equals 44. So var is sort of our way of introducing a variable. That's perhaps a bit more intuitive than just dollar sign variable. 

Again, since there's no data types, we could do this with any data type, strings, anything else would all be var. Conditionals, all of our old friends from C and PHP are still available, so we have if, else if, else, switch and question mark colon. Switch remaining as flexible as it was in PHP, but all of these you're familiar with by now. And similarly with loops are the old favorites of while, do while, and for still available to us. So already we know a lot of the basic JavaScript sort of fundamentals just by virtue of having quite a bit of knowledge now about C and PHP. 

What about functions in JavaScript? Well, similar to PHP every function is introduced with the function keyword. You say function, and then you begin to define your function. What's a little different about JavaScript, though is the ability to have what's called an anonymous function. So you can define functions that don't have a name. This is something we really haven't seen before. We'll really use the concept of an anonymous function a little later in this video, because it'll make a little more sense in context when we see it in a particular situation that I've crafted here. But let's just take a look at what a simple JavaScript function might look like. 

So I've gone ahead and opened up my CS50 IDE and I've already run Apache to begin my server running. And I have this file open called Home.html. And I'll zoom in a little bit here. And basically, you can see the Home.html is just a bunch of buttons. And I'm claiming at the top here that this is the JavaScript section materials. So there's a bunch of buttons here, but what do these buttons actually do? 

Well, we'll head over to my IED, and I have Home.html open here. At the very beginning, here's where I'm linking in all of my JavaScript source files. Right? So I have anonymous.js, clock.js, I'm using the source attribute of the script tag to link in file. So I haven't written any JavaScript directly into this file, but I've pulled in all the JavaScript I've written separately. And if we scroll down here, this should all look somewhat familiar with a little bit of new syntax. We have here header tag for functions and then a button. I have an input that's a type button, and apparently when I click it, I'm going to call some function alert date. And this is how we can sort of mix up a little bit of JavaScript and html. They actually play pretty nicely together, and so apparently when I click on this button, I'm going to call some function alert date. And similarly have I defined behaviors for all of the other buttons that are on that home.html page, which we'll keep returning to during the course of this video. But let's go back up here and take a look at clock.js, which is the JavaScript file that I wrote that has this first function we're going to take a look at. As you can see, I begin my JavaScript function with the keyword function, and I've given this one a name, it's called alert date. Inside of there, I apparently create a new local variable called current date. And I'm going to assign an equal to a new date. And we could get into a lot of detail as to what a date is, and really JavaScript is so big that we can't possibly cover everything in one video. But suffice it to say, this is going to return to me a data item that encapsulates the current date and time. I'm storing that in a variable that I'm apparently going to alert current date. 

Well, what does alert current date look like? Let's take a look at the file itself back over in the browser window. So again, this is the button that I have tied to, this named function. 

What's something very different in JavaScript, though? And I click it there and look what it did, it alerted. It popped up this sort of box telling me that the current time is, apparently it's November 4 at 10:43:43 in the morning. And if I click it again, now it's a few seconds later, right? So that's all this function does. When I click this button, it pops up an alert message to me. So there's really not too much to functions that's different from PHP, just a little bit of new syntax that comes with working with JavaScript. 

Arrays in JavaScript are pretty straightforward. To declare an array, you use the square brackets syntax that we're familiar with from PHP. And similar to PHP, we also can mix data types. So this array, both of these arrays would be perfectly legitimate JavaScript. One that's all integers, and one that is mixed up different data types. But what is an object, what is this notion of an object? Well, if it helps, think about it at first sort of like a C structure or a struct that we've learned about before. In C, a structure contains a number of fields, and maybe we now might start to call these fields properties. But the properties never really stand on their own, right? If I define a structure for a car like this with the following two fields or properties, one an integer for the year of the car and another a 10 character string for the model of the car, I can say something like this, I can declare a new variable of type struct car herbie. And then I can say something like herbie.year equals 1,963, and herbie.model equals Beetle. That's OK. I'm using the fields in the context of the structure, but I could never just say something like this. Right? I can't use the field name independent of the structure. It's sort of a fundamental thing. 

So fields being fundamental to C structures are very similar to properties being fundamental to JavaScript objects. But what makes them particularly interesting is that objects can also have what are called methods, which are really just a fancy word for functions that are inherent to the object as well. So it's a function that can only be called in the context of an object. Only an object that has defined this function inside of its, if you think about a struct, the function is defined inside those defining curly braces of the structure. So it only means something to the structure. And that's sort of what we're doing here with objects and methods. It's basically like we're defining a function that only makes sense on a particular object, and so we call that a method of the object. And we can never call that function independent of the object, just like we can't say year or model independent of the struct in C. 

So functional programming paradigms look something like this. Function and then when you pass in the object as a parameter. In an object oriented programming languages, this sort of gets flipped, and we would think about it like this, object.function. So it sort of that dot operator again implying that it's some sort of property or attribute of the object itself. But this is what an object oriented programming language might do to make a function call on a method, again, which is just a special word for a function that is inherent to an object. This is what that syntax might look like. And so we'll start to see some of this in the context of JavaScript. 

You can also think about an object sort of like an associative array, which we're familiar with from PHP. Remember an associative array allows us to have key value pairs, instead of having indexes 0, one, two, three, and so on like we're used to from C arrays. Associative arrays can map words, such as in the PHP video, we were talking about toppings of pizzas. And so we had an array called pizzas, and we had cheese was a key and $8.99 was the value, and then pepperoni was a key, $9.99 was a value, and so on. And so we can also think about an object sort of similar to an associative array. And so this syntax here would create a new object called herbie with two properties inside of it. Year, which is assigned the value 1963, and model, which is assigned the string Beetle. 

And notice here that I'm using single quotes in JavaScript. You can use single or double quotes when you're talking about strings. It's just conventionally the case that most times when you're writing JavaScript, you just use single quotes. But I could use double quotes here, and that would be perfectly fine as well. 

So remember how in PHP we had this notion of a for each loop that would allow us to iterate over all of the key value pairs of an associative array, because we didn't have this ability to iterate through 0, one, two, three, four, and so on? JavaScript has something very similar, but it's not called a for each loop, it's called a for in loops. So if I said to me like this, for var key in object, that's sort of similar to saying for each something as something. But all I'm doing here is iterating through all of the keys of my object. And inside of the curly braces there, I would use object square brackets key to refer to the value at that key location. 

Alternatively, there's even another approach. If I just only care about the values, I can say for key of object, and just use key inside. So for var key in object, I have to use object square brackets key inside the loop. For var key of object, I can just use key inside the loop, because I'm just specifically talking about the values there. 

So let's maybe take a look at the difference just to quickly show you the difference between four in and for of with a very specific array, which we have here, week array. So I have to find a new array that I filled with seven strings, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday. And I want to now iterate through this array, printing out certain information. If I use a for in loop to print out information, what do you think I'm going to get? Well, let's take a look. And before we jump over to my browser window, just know that console.log is sort of one way of doing a print F in JavaScript. But what is the console? Well, that's what we're going to go take a look at right now. 

OK, so we're back here in my browser window, and I'm going to open up my developer tools. Again, I'm just hitting F12 to open up developer tools. And notice that here at the top I've chosen console. So this is the notion of a developer console, and it will allow us to print information out, sort of like the terminal, but as you'll see a little later, we can also type information in to interact with our web page. I'm going to zoom in a little bit here, and I'm gonna now click on for in test. And four in test-- I'm not gonna show you the code for it right now, but you'll get it if you download the source code that is associated with this video-- is just that for in loop that we saw just a second ago on the slide. 

So I'm gonna click that button, and over here, here's what has printed out in the console, 0,one, two, three, four, five, six. I didn't print out the information inside those array locations, because I used a for in loop. And inside the body of the loop, I just printed out key not object key. But if I now clear my console, and I switch to for of test, and four of test I say I use for of loop instead and print out key, if I click that, now I'm getting the actual elements inside of my object or my array in this case. My array of week days. I printed out Monday, Tuesday, Wednesday. So that's the difference between a for in loop, which prints out just the keys if you just use key inside of the body of the loop, and a for of loop, which prints out the values if you use just key inside the body of the loop. 

All right, how do we now start to concatenate strings and maybe mix up some variables with interpolation like we were able to do in PHP? Well, we're pretty familiar with this from PHP. This is how we would do it using the dot operator to concatenate strings. In JavaScript, though, we actually use something called the plus operator, which is maybe even a little bit more intuitive, right? We're adding a bunch of strings together. So let's head back over and see what this will print if we're trying to print out all of the information in week array. All right, so under here under string concatenation, I have two options, string building V1 and then string building V2. And we'll see why we need V2 in a second. But I'm gonna click on string building V1, which is the code we were just taking a look at, the console.log with all of the pluses. Let's see if this prints out what we expect. 

Monday is day number 01 of the week, Tuesday is day number 11 of the week. Well, what I was trying to do there was get it to print out Monday is day number one, Tuesday is day number two. But it seems like I'm always printing out one. Well, why is that? Well, it turns out, take another look at this little snippet of code here. Notice that we're using the plus operator in two different contexts. 

And so here's where maybe things that we've kind of been saying, oh, it's so great. We don't deal with data types anymore. But here's where the fact that we lose data types can actually be a bit of a problem for us. Now that the plus operator is used to concatenate strings and add numbers together, JavaScript has to make its best guess as to what I want it to do for me. And in this case, it guessed wrong. It just concatenated day, which would be 0, one, two, three, four, five, or six, and then it just concatenated that and then concatenated one. It didn't actually add them together. And so these languages, PHP and JavaScript, that abstracts away this notion of types, you don't have to deal with it anymore. They do still have types under the hood. And we can, in situations like this, leverage that fact by saying something like maybe this, which is telling JavaScript, by the way, treat this as an integer, don't treat it as a string, even though we're mixing together strings and integers here. 

It's just one of those things that it seems so great in context that we don't have to deal with types anymore, but sometimes you'll run into a situation exactly like this where the fact that you don't have control over types can backfire on you if you're not careful. And so if we pop back over to IDE, I'm going to clear out my console again, and I'm going to click string building version two, which is where I use that parse int function. Now it's printing out information that I'm expecting. Monday's day number one, Tuesday is day number two, and so on. 

So let's talk about functions again. I promised we would talk about anonymous functions, and now the context for that has finally arrived. So before we do so, let's talk again about arrays for just a second. So arrays are a special case of an object. In fact, everything in JavaScript is actually an object. So functions are a special case of an object, integers are a special case of an object, but arrays specifically have a number of methods. Remember because they're objects, they can have properties and methods. They have a number of methods that can be applied to those objects. There's a method called size, array.size, which will return to you as you might expect the number of elements in your array. array.pop, sort of like our notion of popping off of a stack, if you recall from our stacks video, removes the last element from the array. array.push adds a new element to the end of an array. array.shift is sort of like DQ, it splices out the very first element of an array. 

But there's also another special method of an array called map. And this is sort of an interesting concept. So what is the idea of a map? You'll actually see this in several other languages, and we're not talking about a sort of cartographers map here, we're talking about a mapping function. In the context we're talking about here, a map is a special operation we can perform on an array to apply a particular function to every element of that array. and so we would say in this case, maybe array.map, and inside of it, we're passing into map is a function that we want to be applied to every single element. So it's sort of analogous to using a loop to iterate over every element and apply a particular function to every element, just JavaScript has this built in notion of a mapping that can be applied. And this is a great context to talk about an anonymous function. 

So let's say we have this array of integers. It's called nums, and it's got five things in it, one, two, three, four, five. Now I want to map some function on to this array. I want to have a function apply to every element of the array. Well, let's say that what I want to do is just double all of the elements. What I could do is just use a loop for var I equals 0, I is less than or equal to 4, I plus, plus, and then double every single number. But I can also do something like this. I can say nums was formerly one, two, three, four, five, now, though, I would like you to apply a mapping onto this array where I would like you to double every number. And that's exactly what's happening here. But notice what I'm passing in as the argument to map. This is an anonymous function. And notice I haven't given this function a name, I've only given it a parameter list. And so this is an example of an anonymous function. 

We generally would never call this function outside of the context of map. We're defining it as a parameter to map, and so we don't really need to have a name for it if the only thing that cares about is map and it's defined right there inside of map. And so this is an anonymous function. We have not been able to do this previously. Map some function that accepts one parameter, num, and what that function does is returns num times 2. And so after this mapping has been applied, this is now what nums looks like, two, four, six, eight, 10. And we'll pop over to my browser window and just take a look at this really quickly as well. 

So I have another button here in my home page called double. And when I click double, and it tells me before it was one, two, three, four, five after two, four, six, eight, 10. And if I go back and click double again, two, four, six, eight, 10. And then after, four, eight, 12, 16, and then 20. And what am I doing in this function? Well, if we just pop over to IDE, and I pull up my anonymous function, here on line seven through 13, I'm doing a little bit fancy work here, but I'm just printing out what's currently in the array. Then on line 16, 17, and 18, there's my map. This is where I'm applying this doubling function to every single element. And then a little further down, I'm just doing the same thing I was doing before, except now I'm printing out the contents of the array afterwards. But all I've done here is just use an anonymous function to map across an entire array. 

So one more big topic to talk about in JavaScript is the notion of an event. An event is something that just happens when a user interacts with your web page, so maybe they click something, or maybe the page is finished loading, or maybe they've moved their mouse over something, or they've typed something in an input field. All of these things are events that are occurring on our web page. And JavaScript has the capability to support something called an event handler, which is a callback function that responds to an html event. And what's a callback function? Well, it's generally just another name for an anonymous function. It's a function that responds to an event. And this is where we come to the idea of binding certain functions to a particular html attribute. Most html elements have support for an attribute that we didn't talk about in the html video for something like on click or on hover or on load, all of these events that you can then write functions that deal with those events when those events occur on your web page. 

And so maybe your html looks something like this. And I have two buttons here, button one and button two, and here I have currently defined nothing, but this is where the attribute on click is apparently part of my html tag. So apparently when I define what's going on inside of that attribute, it's going to be some JavaScript function that responds to the event presumably of clicking on button one or button two. 

What's kind of cool about this is we can write a generic event handler. And this event Handler will create an event object. And the event object will tell us which of the two buttons was clicked. Now how does that work? Well, it might look something like this. So we will first define our buttons to have a response to the callback function that will be called when the button is clicked, we'll call event alert name. And notice in both cases we're passing in this event parameter. So we call this function or when this function is triggered by the event happening, it's going to create this event object and pass it as a parameter to alert name. And that event object is going to contain information about which button was clicked. And how does it do that? Well, it might look something like this. So now in my separate JavaScript file, I might have to find this function alert name, which again accepts that event parameter. And then here is where I'm detecting which button was triggered, var trigger equals event dot source element. What was the source that created this event object that was passed in? Was it button one or was it button two? 

And then here all I'm doing is printing out trigger.innerhtml. Well, in this case, in this context, trigger.innerhtml is just what is written on the button. It just so happens if we jump back for a second, that would be what's in between those button tags. It will be button one or button two. And let's take a look at how this event handler would look if we had it running in practice. 

So first of all, you've opened up events.js, which is the JavaScript file where I have defined this function. And as you can see, it's pretty much exactly what we just saw on the slide a second ago. And I will go over to the home page we've been using. And I have here button one and button two. And I'll click on button one. You clicked on button one, if you can see right here in the alert. OK. Click on button two, you clicked on a button two. 

So both buttons have the same function call, right? They both were alert name event, but this event object that gets created when we click on it tells us which button was clicked. We didn't have to write two separate functions or deal with having to pass any additional information. We're just relying on what JavaScript will do for us, which is to create that sort of event object on our behalf. There's a lot more to JavaScript than what we've covered in this video, but having these fundamental should get you quite a long ways to learning everything you'll need to know about this interesting language. I'm Doug Lloyd. This is CS50.