Original subtitles

[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.