And you'll recall that last time we introduced

one of our additional languages in CS40, that of SQL, Structured Query Language.

And this, recall, was a language that we used to query databases, insert data

into databases, delete, update, and more,

so that we actually have a way of persisting data

once we built a web-based application, or really any other application

that we want to be able to store data long-term.

And we had such statements as create for creating a database or a table, insert,

select, update, delete, and a few others as well.

And with these relatively few building blocks,

we're able to start building a back-end for a web service.

And indeed weeks ago when we first implemented a front-end for Google,

simply by implementing that web form, we didn't really

have anything to do with the data or anywhere to query for data.

But now we actually do via our own database in the form of SQLite

and via this new language, SQL itself.

But today we introduce really the last of our formal languages in CS50.

Recall that we began the semester with Scratch,

transitioning quickly thereafter to C where we spent a lot of the semester.

We have since pivoted to Python of course,

whose syntax is quite different, but whose ideas

are really fundamentally the same.

Today we transition to JavaScript.

And JavaScript you'll find is more syntactically similar probably

to C than it is to Python itself.

So you'll see that a few more parentheses are back,

perhaps some semi-colons as well.

But what's most important today is that really the fundamentals of programming

aren't changing.

But rather the method via which we actually execute or run this code.

In particular, thus far, when we've written

C code, when we've written Python code, all of that code has run on the server,

so to speak, within CS50 IDE or maybe on your own Mac or your own PC

if you have some prior programming experience.

But today we introduce a language that is generally, though not always,

used within the client, the browser.

Which is to say the code that we start writing today--

and when you generally use JavaScript in order create front-end user interfaces,

you will find that the code you write, like HTML or CSS,

is actually sent to the user's browser where it's executed, again

client-side, on the Mac on the PC.

It is not executed server-side.

Now to be fair, JavaScript can be and is increasingly used on the server-side

as well via frameworks called Node.js, if not others.

But we'll focus predominantly on client-side usage thereof.

And you'll see that you can start to do some pretty powerful things,

because not only now do we have the ability to have a dynamic back-end that

serves up data and searches things for us,

but a front-end that gives us all the better user interface and features

still.

So I was thinking back yesterday on when I first started using JavaScript.

And it was in a very, very small isolated instance.

But way back in the day-- and this is thanks to the wayback machine,

you may recall Frosh IMs was something I did in college.

Not so much in sports but more the website.

And this was essentially the layout-- apologies-- of the Frosh IMs website

some years ago.

Now this actually post-dates me by a few years,

since it seems the codebase actually survived me by quite a few years,

surprisingly.

But early on, when you would hover over these menu options at top right,

those would have what are called event listeners attached to them so

that when you hover over some of those menu options,

the color would actually change.

And I think they shifted positions slightly.

So [INAUDIBLE] ultimately took over the site and took it further than that.

But this was my first taste of JavaScript.

And it was just to give the website a sense of dynamism

and to give it a sense of interactivity that wasn't possible, certainly

not at the time, with HTML alone.

So let's do a quick compare and contrast of JavaScript

with things we've seen in the past, just to kind of bring ourselves up

to speed on some of the syntax.

But you'll find we need to spend relatively little time

on the syntax and the language itself, because you'll

find syntactically it's so similar.

And so instead we'll focus more on ideas and new features of the language

itself.

So as in C and in Python, we have the ability

to express functions in JavaScript.

They look a little bit different, at least at first glance.

But fundamentally they're really the same.

In JavaScript, if we want to function, we're

going to use the keyword function to say,

hey browser, here comes a function followed by the function's names,

zero or more parameters, and then between the curly

braces a bit of code that implements that function.

So gone is the ability to just indent your code

and have the interpreter know what you mean.

Those curly braces are back as are more parentheses for us here in JavaScript.

But in terms of loops you should find this fairly familiar.

In JavaScript if you want to iterate over something again and again

and again, the do while construct is actually back.

So we have something very similar here as we do in C.

And what you use that loop for can be any number of things.

But we do have that capability again.

Similarly, do we have while or while true loop here,

which would induce an infinite loop.

And again, these are the kinds of things that might trip you up unnecessarily

at first, but quite reasonably.

Like if you start capitalizing true again,

it's not going to work in JavaScript.

So again, reasonable people will disagree when

it comes to designing these languages.

And so the authors of JavaScript decided to lower case true and false,

where again in Python we've been capitalizing recently, true and false.

Meanwhile, if you want to declare a loop using a for loop, that is back.

But you'll notice perhaps implicit in this example

is the fact that JavaScript is, like Python, not strongly typed.

It does have the notion of data types.

And you can access or look at those data types.

But you don't have to specify them as the programmer

when you're declaring variables.

Rather, in the case like this, when you're

declaring a counter like I, which should be an integer from 0 up to 50,

you literally say, var, for variable, than the name you want to declare

and then just the rest of the syntax is as we've seen before.

Meanwhile, there's another handy feature-- and you'll see this in use

in various examples perhaps online-- is the very easy ability, like in Python,

to iterate over the keys in an object.

So recall that an object, at least in Python,

is really just a collection of key value pairs.

But it's an object can also have methods inside of it.

But if we focus entirely on data, keys, and values,

this syntax here would allow you to iterate over all of the keys

and some value coming back.

So maybe if you have a stock object, you could

iterate over its name and its price and its symbol,

simply by using syntax like this, and an index into the object

to get at that object's value.

Meanwhile, variables are fairly straightforward.

To declare a variable like I, we would say var I equals 0, and a semi-colon.

Boolean expressions, meanwhile, are with us still.

And these are no different.

I is less than 50 might be expressed with this.

X is less than y might be expressed with this.

So nothing new there.

Meanwhile with conditions, we have syntax identical to C.

So again, the curly braces are necessary,

at least if you have multiple lines that you intend to be associated

with the if or the else if or the else.

Again we're back to, else space if, instead of L if in Python.

But again, there's nothing really new here in terms of content, really just

syntax.

So after practice and after some trial and error,

you'll generally find that it becomes second nature.

Meanwhile, we have arrays in JavaScript.

So for instance, if we want to declare an array called numbers,

again we don't specify the type of this array or the members therein.

We simply say var, to give us a variable,

number shall be the name of that variable.

And then a list here of arbitrary numbers themselves

nested in between square brackets.

So in JavaScript, as we've seen in Python,

we have the ability to express lists or arrays specifically

in JavaScript that simply use square bracket notation to define them

in a context like this.

Meanwhile, speaking of objects a moment ago,

we have that same ability in JavaScript to declare them.

So for instance, if we wanted to declare an object, and we'll call it quote,

we use, as in Python, curly braces.

And I say as in Python because in Python really

when I say object, focusing entirely on data,

I really mean a Python dictionary or dict object, which again

is this collection of key value pairs.

We don't necessarily do things quite the same way.

But in this case here, var quote is a way of porting,