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,

say, from a CS50 finance example, a company's name

and its price and its symbol.

And worth noting here, that as in Python, you actually

have choice over the quotes that you use, at least in this context.

Single quotes are fine.

Double quotes are fine.

So long as you are stylistically consistent,

it's probably fair to say that many people in the JavaScript community

tend to use single quotes here.

There's no functional difference as there is in C.

However, they do matter, as you'll perhaps

eventually see, when you're using not JavaScript per se, but JSON notation.

JavaScript Object Notation, which is a simple data

format not unlike CSV, but that allows you to store a hierarchical data

inside of an object.

And the subtlety there is that when you want to store data in this JSON format,

you have to quote literally everything with specifically double quotes

on the left and on the right.

So it's an annoying distinction.

And don't fret too much about it now.

But just realize any time we're talking about JSON

and a technology called AJAX-- more on that soon-- it's

got to look like this with the double quotes

on both sides of the colon for those key value pairs.

Now with that said, let's start to give ourselves some context.

Let me introduce a few features that we've kind of sort of seen in Python--

didn't necessarily leverage, but are going

to be really integral to the way in which many people use JavaScript

within browsers.

So here, for instance, is that old simple example

of HTML, perhaps the simplest web page that we can write,

that quite simply says in its title and its body, hello world.

And recall that the indentation here is functionally meaningless.

The browser doesn't really care how pretty your HTML looks, just

nicer for us humans to see everything nested and nicely indented,

because it's just a lot easier to read.

And it's also a lot easier to detect if you type something wrong, if something

doesn't really line up as you expect.

But another way, recall, of viewing this same piece of HTML

is in the form of a data structure like a tree, which

we discussed way back when in the context of C.

And we might draw this same example of HTML

with a Dom, document object model, which is a fancy way of saying tree.

And that tree might look like this.

It's got some special root node that we'll just generically call document,

because there might actually be some other stuff like comments

or whatever up there.

But the root element of a web page, recall, is HTML.

The second thing you type is open bracket HTML.

The first thing you should type with HTML5 is open bracket doc type HTML.