[INSTRUMENTAL MUSIC PLAYING] DOUG LLOYD: So near CS50's
end, we introduce you to several different
programming languages, and we aren't able to cover
them in nearly as much depth as we're able to cover
C earlier in the course. The goal here is not to give
you a complete rundown of what these languages do, but to
give you enough of the basics and show you enough of
the parallels to things that you already know so that you
can go forth and really flesh out your knowledge of these
different languages. And another one of these we're going
to cover right now is JavaScript. Now, similar to other
languages we've discussed, it is a modern programming language
that is derived from C's syntax. So if you're familiar
with C, you're going to be able to pick up
JavaScript pretty quickly. It's been around just
about as long as Python. It was invented a few years
afterwards in the mid 1990s. Now what's really important about
JavaScript, as well as HTML and CSS, which we've discussed
in other videos, is that those three languages pretty
much make up the core user experience of what it means to be online. So understanding how to use and
work with JavaScript, HTML, and CSS will allow you to really
create websites that users will enjoy visiting, because you'll
be able to create a great user experience for them with
these three languages. To write JavaScript, it's really easy. Open up a file with a
dot js file extension, and start writing in
JavaScript right away. If you're familiar with
a language like PHP, you know that you have to
sort of bind your code up in these delimiters-- bracket,
question mark, PHP, and all that stuff. We don't have to do that in JavaScript. We literally just start writing
our code in a JavaScript file, which is pretty nice. Our website will also know that
what our file is is JavaScript, because we're going to
tell it in an HTML tag. We're going to say, I have a
script that is of type JavaScript, and it is a file with a
dot js file extension. Pretty straightforward. Now, unlike Python, which runs on the
server side-- that is, on the side that is hosting the website,
JavaScript applications run client side on your own machine
when you are visiting a website. To include JavaScript in
your HTML, it's pretty easy. Just like when we include
CSS with style tags, we can include JavaScript
in between script tags. So we can have an open
script tag and literally start writing JavaScript right in
our HTML, which is kind of cool. But also like CSS,
where we have link tags, we can write our JavaScript
in a different file and connect it using the source
attribute of a script tag. In CS50, and really
probably more generally, this is definitely the preferred
way to go, particularly if you have a JavaScript
file that might be used-- or the contents of which might be used--
on different pages of your website. You don't have to write the
JavaScript between the script tags on every single page. You want to be able to just
refer to an outside file and link that in every single time. So let's quickly run down
some of the fundamentals that you might use in JavaScript. So, variables-- they're really similar
to Python variables and really similar to C variables. No type specifier is required. And if you want a local variable,
you preface it with the var keyword. So in Python, we would say
something like this-- x equals 44. We don't want to do that in
JavaScript, because that would actually create a global variable, if you
were to put a semicolon at the end. We would want this-- var x equals 44. That creates a local variable
called x in JavaScript, and stores the value 44 in it. Conditionals-- all of the old favorites
from C are available for you to use. If, else if, else, switch, question
mark colon-- all of those are fair game. We're not going into
detail on those at all, because we've covered
them in our videos on C. But they're all here
to use in JavaScript, and behave pretty much exactly the same. Loops, meanwhile-- all of ones
we're familiar with from C are also still available--
while loops, do-while loops, and for loops, although we do
have a couple of other variations that we'll talk about
in just a little bit. Now, functions in JavaScript are all
introduced with the function keyword. So it's a function. Write a function name
and parameters, and then we define our function between curly
braces just like we would in C, except in C, of course, we're
not using the function keyword. But there's also a catch
with JavaScript, which is that functions can be anonymous. Meaning you don't have
to give them a name. Now, you might be asking yourself,
wait, how can I call a function If it doesn't have a name? Well, we'll talk about
that in just a little bit, and we'll talk about what I mean in
particular here when I'm describing binding things to HTML elements. We'll talk about that in the video
on the document object model, but we'll talk about anonymous
functions in just another minute. I'll give you an example
and you can see how they might be useful in certain contexts. And those contexts actually
do kind of materialize a lot in JavaScript programming. JavaScript, like C, and like Python,
are analogous to Python's lists. Has arrays, and you
can declare an array. It's pretty straightforward. For example, var nums
creates a local array. And then I have square
brackets, and I just have a comma-separated list of all the
values that I want to put in the array. I can also mix types. I don't have to have all integers,
or all floats, or all strings, like I do in C. I can have different
types mixed together there. JavaScript has the ability to
behave a few different ways. That's why it can be a little bit tricky
as the very first language to learn, because a sets up a bunch of rules
for itself and then breaks them. It is very, very flexible,
but perhaps almost a little too flexible
as a first language. But it can behave as an
object-oriented programming language. Object-oriented might be a
term that you've heard before, but if not, we'll try to give a
quick little crash course here. An object is really similar
in spirit to a structure that we are familiar with,
hopefully, from C. Now, in C, structures can have a number
of different fields or members. Another term for those that we see
commonly in object-oriented programming are properties. But those properties, or
fields, or members, just like in C, can never stand on their own. So for example, if we define the
structure for a car like this-- struct car, and inside of that, there
are two different fields or members-- int year and char model tens,
or a 10-character string that we can use to
store the cars' model. We can do things like this. We can say struct car
Herbie, which declares a variable of type
struct car named Herbie, and then we can say Herbie
dot year equals 1963. Hurbie dot model equals Beetle. That's totally fine. That's valid C. But we
can never say this in C-- we can never say, year equals
1963, model equals Beetle. Now, we can't say that because year
and model are so fundamental to what it means to be a struct car. They are part of a struct car. And so if we're ever
using year and model-- we can't use them in the abstract. We always have to associate those
things with a particular struct car. So that is not OK. Objects, in addition to having
fields, or members, or properties, also have something
called methods, which is sort of like if a C structure had
a function that could only ever apply to that structure. So it's as if we have a function where
structures are the only things that need to be passed in. Now, that, we have in C. But we can't define a function inside
of the curly braces of a struct. That is more-- that is
object-oriented programming. That is different from here. But just like properties, methods
don't stand on their own either. It's not like a function that
just exists in the abstract. It is a function that only exists in
the context of, in this case, an object. So where we might do this in
C-- function parentheses object, where object is a parameter
to the function being called-- that is not object-oriented styling. Object oriented means the object
is at the core of everything, and instead, we're going to call this
function that is a part of the object. OK? So this is what object-oriented
programming looks like in a very, very basic form, is, there are functions
that are affiliated or associated with objects, and we call those
functions as follows-- by specifying the object and
saying we want some function to execute on that object, like this. The fields and methods of an
object are really similar in spirit to the idea of a dictionary,
which you may be familiar with or recall from Python. So we could, for example, have something
like this-- var Herbie equals-- curly braces, now, not square
brackets, it's curly braces-- and then, a comma-separated
list of key value pairs, where year 1963 is sort of like saying
Herbie dot year equals 1963 in C, and Herbie dot model equals Beetle. This is akin to how we would do
the same thing in JavaScript, by creating an object and giving it
a couple of properties right away. All right. Now, let's go back to loops,
because I mentioned earlier, there are a couple of different new
loops that we can use in JavaScript. So now that we have this object,
how would we maybe iterate across all of the key value
pairs of that object? Or in fact, how we iterate across
all of the elements of an array, if we wanted to do that, besides
using a for loop, a while loop, or a do-while loop? So in Python, we saw
something like this-- for key in list, and then we would
have some code where we would use key every point from there on down-- a stand in for the i-th
element of the list. You can't do that in JavaScript, but
we can do something pretty similar for var key in object. And then open curly brace. And between those curly braces, we
can use object square bracket key to refer to the key-th
element of the object, or the key-th key in a key
value pair set of the object. We also have a slightly
different variation for var key of object, which,
instead of having to use object square bracket
key, we can now refer to iterating across all of the values-- as opposed to this, which
iterates across all the keys, this would iterate across the values. So we can cover both sides of a
key value pair using for var key in, or for var key of. Here's an example of
an array where we're going to use these two
different types of loop. So we have here a week array
that has 7 elements in it-- Monday, Tuesday, Wednesday,
Thursday, Friday, Saturday, Sunday. And I want to use a four
var day in week array. So I want to use a for in loop,
and I want to console dog log. Console dot log is the
JavaScript equivalent of print f. You can access it using developer
tools in most modern browsers. What's going to happen
when they print this out? It's going to print out a
list of all of the keys. Well, in this array, there's really
no keys-- there's a bunch of indices. So this will print out
0, 1, 2, 3, 4, 5, 6, because there are seven
elements of my array, and I am logging which
element I'm talking about. If I wanted to print out the days
instead, I would use a for of loop, and I would get the following
printed out to the console-- Monday, Tuesday, Wednesday,
Thursday, Friday, Saturday, Sunday. What if I want to
concatenate information? So remember, we can tie
different strings together. We could do that in Python. We can do it as well here in JavaScript. And we do that by using plus. So if I want to console dot log a
bunch of different strings concatenated together, I just use plus to do it. But here's a little
bit of a catch, right? If I'm using plus, now it
means two different things. I want to concatenate strings together,
but maybe here, I want to add. I really encourage you
to take a look at what happens if you write the week
array into some JavaScript, and then have a loop that iterates
across and console dot logs this. You might find that you get
something that you don't expect. And so, JavaScript is
making its best guess, and it's assuming that day and
1 are both strings, when really, what I want to do is add them together,
literally, because they're numbers. But fortunately JavaScript
gives us a way around that by using a function called parse int. Now, this is going to give
us what we expect to see. This, on the other hand,
is going to give us something we don't expect to see. But it's just, again, a case of,
we're using the same operator to mean two different things,
and the language sometimes has to make a best guess. So it's not always a great thing
that languages nowadays don't often require us to specify a data type-- if we were able to
specify a data type here, we would be able to disambiguate this. But here with JavaScript, it thinks
it's being very helpful for us by not specifying a type. And it's going to make our best
guess as to what we want to do, but sometimes it guesses wrong. But it gives us ways to work around
it if it does indeed guess wrong. So arrays are actually a
special case of an object. And, actually, in JavaScript, everything
is a special case of an object. X, any variable, var x equals 44-- that's an object that just
happens to have one property. Arrays are an object that happens
to have a number of properties, and also some certain methods
that can be applied to them. So we can call the size method,
or pop, or push, or shift. And I'll leave you to figure
out, or to do some research into, what those different things are. But suffice it to say that they
are functions that are basically so baked into what it
means to be an array that we can just call
them without having to write them in the first place. That's pretty cool. Here's another cool
thing that you can do with arrays-- there's another
method for them called map, which basically allows us to apply
a function to every single element of an array. And in particular,
this is a great example for using an anonymous function. So let's take a look at how we
might use an anonymous function and why it might be useful to do so. Here's an array called nums. It has five elements in it-- 1, 2, 3, 4, and 5. Now, what I want to do is, I want
to map some function on to them. So what I'm saying
here is, nums equals-- so I'm going to do something to nums. I'm going to reassign that back to nums. Nums equals nums dot map-- and remember, map takes in a function. It's a function that I want to apply
to all of the elements of that array. One thing I could do is just write
this function somewhere else, and give it a name, say I called it-- what's going to happen here is,
every value's going to be doubled. Let's say that I wrote a
function called double numbers. I could say, nums equals nums dot
map parentheses double numbers, and it would just double every number. That would be fine. But here, notice I'm using
that function key word, and I'm giving a list of
parameters-- in this case, num-- but I'm not giving that function a name. Why am I not giving
that function a name? Well, I'm just doing this mapping here. I'm never going to need to
double these numbers again. Why am I going to clutter
up the name space, and give it some name when
I'm never going to use it again outside of this context? It's kind of convenient that we can
actually use the function in this case, then, without having to
give it a name, and still have it do what we want to do. So all I'm doing here inside of
those parentheses of maps is, the open parentheses on
the first line there-- and that close parentheses is
actually on the third line. And in between the parentheses, where
I'm specifying the parameter to map, I'm literally defining an
entire function in there. And then if I execute this line of
code, what's going to happen to nums? Well, you can probably guess, it's going
to just double every element of nums. All right, one more thing I want to
touch on really quick about JavaScript, and that is the notion of events. So an event is something that goes
hand in hand with HTML on JavaScript, and it is a response to a user
doing something on a web page. So for example, perhaps
they click a button. Perhaps the page has finished
loading after the user hits refresh, for example. Maybe they hover over a portion of
the page, or something like that. All of those things are events. And JavaScript has support for what
is called an event handler, which is some JavaScript
code that will execute once that event has taken place. So it allows our site page
to be very interactive. We type in a box, for example-- we could have an event handler,
that pops up a message that says, please enter your password. So it's just a complete-- it's an
empty field that says nothing at all. You start to type in
it, and then this box pops up because you started typing,
which is an event on the page. And it tells you to do something
that is a JavaScript event handler taking effect. Many elements of HTML have support
for events as an attribute. So here's an example of
some really basic HTML. I have my head and my body, and inside
of the body, there are two buttons. And they have this
attribute called on click. On click is a definition,
basically, for an event handler. So I want something to happen
when I click the buttons. Right now it's nothing, but
I can put something in there so that when I click on
either of those buttons, that function that's in between the
quotation marks there would get called. We can write a really generic
event handler in JavaScript, for example, that
creates an event object, and will tell us which of
those two buttons were clicked. And it might look something like this. Button on click equals alert name event. If we do this, we have
basically set up our HTML, so that when either button one is
clicked or button two is clicked, the alert name function will be
called, and an event will be passed in. The event is automatically
generated by the page, and it basically contains all of the
information about what just happened. And from that information, we
can extract more information. So for example, here what the
alert name function might look like, and notice that here, I'm
also accepting an event parameter. What am I doing then? I'm getting a new JavaScript
local variable called trigger, and I'm asking for that
event's source element. And what that is
basically telling me is, what is the element on the
page that was interacted with that triggered this event? Or rather, put another way,
what element effectively was passed in to this function. Because, again, this is
automatically generated. The page knows which button
we touched, and so, basically, what's happening here is, that button--
whichever one of the two it was-- is getting passed into this function. Then-- and you'll see a little bit more
of this when we talk about the document object model-- I can access that trigger's inner HTML
to figure out which button was clicked. Now, what is inner HTML? Let me jump back a couple
of slides for a second here. The inner HTML is what is
between the button tags. In this case, button one is inner HTML
and button two is also inner HTML. So what happens when I click on those
buttons is, it will alert to me, you clicked on button one if I
happened to click on button one, or, you clicked on button two, if
you happened to click on button two. Now, again, we are just scratching
the surface of JavaScript, but I wanted to give you a sense
of some of the different things that you can do, so that you can then
go forward, look at the documentation, and see the very wide range of
things that you can do as well, by just applying some
of the basic tenets that we've learned about in
CS50, and really expanding your knowledge exponentially. I'm Doug Lloyd. This is CS50.
