[PIANO PLAYING] BRIAN YU: OK. Welcome back to CS50 Beyond. Hope everyone's doing all right
with the cold weather today. I know it's a bit chilly getting here. So for a bit of recap, what we've
been doing these past couple days is we started on day zero
with a look at HTML and CSS, just building web pages,
thinking about how to style them, how to make them more responsive. We then yesterday,
added a server to that, added a Flask-based web
server written in Python, whereby we could handle different
routes to be able to create more interesting, more dynamic web pages. And where we're going today is
a bit of a continuation of that, moving from the server side to
the client side, in particular, taking a closer look at
JavaScript, which we introduced and really scratched
the surface of CS50. But there's a lot more to JavaScript
than we were able to cover. So we'll go over a few more of those
details, look at some of the nuances, and look at some of the
details of more advanced-- of newer versions of JavaScript,
the latest version, including ES6, for instance, looking at the
features that that offers us and the types of
capabilities that it gives us in terms of the types of web
pages that we can design. So ultimately, what you
want to be thinking about as we think about JavaScript
is where the code is running. And you can think of
this as the distinction between the server and the client. The client is your computer, your web
browser that you are interacting with, you're clicking buttons
on, for instance. The server is hosted somewhere
else, code running elsewhere that you're talking to. Yesterday, when we were writing
Flask applications, all of that code is server code. Your web page was making the request
to some server, where that server might have been running on your own computer,
or maybe it was running on Heroku, and you had some server
running elsewhere, and it was communicating with that. But ultimately, you were
making requests to that server, and you were getting responses back. What JavaScript's
going to allow us to do is to actually run code
on the client side, run code inside of the
user's browser, which is going to give us
the ability to create a lot of really interesting features. So let's dive in, take a look
at what JavaScript has to offer. And so we'll start with
just a very simple HTML web page, same as what we've done before. I'll just call it hello.html
add in [INAUDIBLE] HTML, add a header that has a
title that's just Hello and a body that just says maybe Welcome. And so this is just HTML, plain
and simple, what we've seen before. But what we're going
to add today is we're going to add up in the header section
of the web page, a script tag. And in between these script tags,
we're going to have JavaScript code. So we can include JavaScript,
and our web browsers, all modern web browsers
understand JavaScript. And so we can write JavaScript
code here that's actually going to run inside of the web browser. And so the simplest thing
we could do is something like alert, which is the equivalent
of something like print in Python. But instead of printing to
the terminal window, which you can also do in JavaScript, and
we'll probably do a little bit later, alert is actually going to
display a graphical visual alert in the user's web browser. So we can say, alert
hello, for instance. And that is a very basic
JavaScript program. And so I'm going to go ahead
and open up hello.html. And we get this page says hello,
this alert that pops up on my screen. I'm going to press OK. And OK, it says welcome. And so this is the very basics of what
JavaScript is going to enable us to do. But JavaScript, of
course, has the same sort of notion of variables and
functions and loops and conditions that any other programming language,
like C or Python, does as well. And we can take advantage of that too. So in JavaScript, there are
a number of different ways to define variables, although the
two most common that we're generally going to use them are let and const. So if I wanted to find a variable,
let's say let x equal 28, for example, and then I can alert x just to
display an alert message that has the value of that variable there. If I go ahead and open up
hello.html again, this page says 28, displays that alert, as I might expect. And when I define a
variable with let, this is a mutable variable, in other
words, a variable that can change. So if later on down the road I wanted
to reset the value of that variable, set x 50, for example, and then
alert x, that's totally fine. When I refresh this page,
this page now says 50. So let is your standard
variable that is mutable. But JavaScript also has a
variable declaration called const. And if I define a variable with
const, const stands for constant. In other words, this variable's
value is not going to change. And so if I try to change it, that's
actually going to cause some errors. So if I try and run this page now,
where I first site const x equals 28 and then x equals 50, trying to
reset the value of the variable that I said would be constant,
if I run this, no alert happen. I see welcome, but I didn't get an
alert page when I refreshed the page. If I go into the Chrome
Inspector, or other web browsers have something similar, and go into
the console, what I'll see here is, all right, uncut type error
assignment to constant variable. In other words, this
actually threw an error and didn't let me make this
assignment to a constant variable because x was constant. I wasn't allowed to change it. And so this is a feature that
you can and probably should use in your JavaScript programs
whenever you have something whose value isn't going to change. If something's value
isn't going to change, it's often safest to define
it as a constant variable so that nobody could ever
accidentally change it, for instance, such that you always
know that that variable's value is going to be constant. Questions about anything so far? Yeah? AUDIENCE: Does the script
part always go in the head? BRIAN YU: Good question, does the
script section always go in the head? Not necessarily. You can put the script section
later on in the body, for instance. In the lower part of the body is where
some people will put their script tags. Ultimately, HTML is read from top to
bottom, much like most anything else. But we'll often put
the script in the head, in particular, once we start
separating code into separate files. When we start putting things inside of
scripts and inside of a JavaScript file and just including, the same
way we might include CSS files, it's often common to put that
code inside of a separate file. So for instance, I
might create a new file and call it, like,
hello.js, for example, which is just going to be a JavaScript file. And all this code-- or maybe I'll put the let x
equal 50 here and alert x. This code is just going to
go inside my JavaScript file. And then what I can do is in this file
say, script source equals hello.js to mean, all right, I'm not going to
include the JavaScript inside my HTML. I'm going to separate the
JavaScript into a separate file. And so this is very common, to put
a the script inside of the header, linking to some JavaScript
file that's located elsewhere. Whereby now if I refresh
the page, it still says 50 because it's pulling in
that JavaScript from the other file and then running it
inside of this web page. Good question. And I see a couple of people have
it open already and are responding. But feel free to go to the course
website, click on the Feedback button so that you can click on
the Smiley Face/Frowny Face throughout the lecture,
in case things make sense or in case you need
clarification on topics. So I see a couple of
yellow faces already. Questions, yeah? AUDIENCE: Kind of two
questions for this. BRIAN YU: Yep. AUDIENCE: One of your
imported multiples [INAUDIBLE] same variable name across
two different ones. Does that count as it trying to-- is
it, like, trying to [INAUDIBLE] error? BRIAN YU: Yeah, good question. So the question is, if you
have, like, maybe two scripts that are trying to define
the same variable name, that is something you need to be careful of. The name refers to the variable. So if you declare a variable once,
then try and declare it again, you run into problems there. AUDIENCE: And then the other
thing, for [INAUDIBLE] should you use it as something
that's only going to be constant within that particular script? Or should it be something
that's based on [INAUDIBLE] so that it's constant
for each [INAUDIBLE].. For instance, like a header-based
variable or something along those lines,
where you don't want it to change in the course of that session,
but it might be one for each user. BRIAN YU: Oh, good question. So the question is, does const mean
that it literally, across all users, anytime anyone is using
the page will never change? Not necessarily. It just means that once you define
what the variable's value is, it will not change from that point
forward while that script is running. But if that script is
running some other time, that constant value might take on
some other value, for instance. And that's totally OK. Good question. Yeah? AUDIENCE: Can you do a
[INAUDIBLE] JS file [INAUDIBLE].. Can you also, more like a
relation-type of word for CSS file, or do you just have to [INAUDIBLE]? BRIAN YU: Good question. All you need is script and then source. You don't need the rel equal style
sheet, the way you would in a CSS file, for example. Yeah, just this is sufficient. OK, we'll keep going in that case,
take a look at some other things. And I'll go ahead and just keep
working with hello.html and hello.js. But let's now actually take a look
at trying to manipulate the DOM. So the DOM is the Document Object Model. It refers to the general
structure of this web page. And what JavaScript is very good for
is actually manipulating the web page, changing the elements inside of the page
to be something different, for example. So for instance, right here I have a
header that says Welcome, for example. And maybe I want it to
do something different. I want it to change
under certain conditions. And so I might add some code to do that. So the first thing I'll
do is create an event. And so I'll create a button
that's going to trigger an event. And the button's just going to
say Click Here, for example. And so, OK, let me get rid of
everything in the JavaScript file. So I just have a Welcome heading
and a button that says Click Here. I refresh this page. And it says, Welcome. And there's a button underneath
that says Click Here. But of course, clicking here doesn't
really do anything, at least not yet. But I would like it to. So I'm going to say button on click,
give the button an on-click attribute. This is an event listener. In other words, I'm saying
when the button is clicked on, run this JavaScript code. And the code I'm going
to run is I'm going to call a function that's just called
hello, for example, so hello and then two parentheses, same as I would
call a function in C or in Python, for example, just the name of the
function and then two parentheses. But of course, I haven't yet
defined a function called hello. But I can do that in JavaScript, and
so simple as in my JavaScript file, hello.js, having a
function called hello. And then inside this function
I can do whatever I want. So for example, I could do alert hello,
just to display an alert message, for example. And so I'll go ahead and
refresh this page, hello.html. It just says Welcome. There's a button that says Click Here. And when I click on the
button, I get an alert. And that alert says, Hello. So why did that work? It's because I have a
function called hello. It displays the alert. And when I click on the button, that
triggers the hello function to run, and that displays the alert. So basics of event listeners there. And so now let's do
something a little more interesting inside this hello function. I'm going to write something like this,
document.queryselector H1 dot inner HTML equal-- it said welcome. We'll change it to hello. So I'll show you what
it does, and then we'll go back and tease apart what this
actually means and how this is working. We saw this briefly in CS50. But good to get a
refresher on it as well. So I refreshed the page. The heading says Welcome. And there's a button
that says Click Here. And now when I click the
button, the Click Here, the word Welcome changes to the word Hello. So I've been able to manipulate
the DOM, manipulate this page, change what's actually on the page. And how did that work? Well, document.queryselector
is a function. And that function takes as its argument
what's effectively a CSS selector, in the same way that I could specify a
tag, like H1, to mean select an H1 tag, for instance. Or I could say pound sign, and then
the name of some ID, for instance. Or I could have said dot followed
by the name of some class, like we saw when we were
doing CSS two days ago. You can do the same thing
in document.queryselector, to say select for me
something that is an H1 tag. And take that H1 element,
that heading element, and change its inner HTML, the HTML
contained within that HTML element, and change it to Hello. So what's going to happen
there is it's going to look throughout my page for an H1 element. And once it finds the first
H1 element in the page, it's going to go inside of it, go to
the inner HTML and change its value. It's going to change its
value to hello, in this case. And so we're seeing two
important concepts here. Concept number one, event listeners,
that when I click on a button, that triggers an event, the click event. And that's going to
run the hello function. And concept number two is
this idea of DOM manipulation, that I can select for part of
the page, get an element out of the page programmatically,
and update its value, change the thing on the page,
such that this enables us to now have these dynamic pages that
aren't just the same every time, but that can change in response
to events, in response to things that are happening and so forth. Yeah? AUDIENCE: Does this
change every single H1 tag throughout the page
or just the first one? BRIAN YU: Good question. Does this change every single
H1 tag or just the first one? It only changes the first one. So if I have another H1 that says
some other heading, for example, and I refresh the page, it says
Welcome and Some Other Heading. I click here. Welcome changes to Hello, but
Some Other Heading stays the same. And that's because query
selector will only select for the first thing that matches it. If I wanted to select for
all of the H1 elements, then I'd have to do something
like, document.queryselector all, which is another
function that instead of just selecting for
the first thing, selects for all of the things that match. But then you can't just say
inner HTML because query selector all doesn't return a single element. It returns an array of elements. So what am I do is say something
like, OK, const headings equals document.queryselector all H1. In other words, get me
all of the headings, and that's going to be
an array, and let's save that array inside of a
variable called headings. And now what I can do is I can
do what's effectively a for loop. And the for loop syntax in
JavaScript looks something like this. I would say for const
heading of headings. And I can say const here because when I
have the heading, like each heading is going to be called heading. But in the context of the for loop,
I'm never going to change the heading. Even though the heading
is going to change every time the next iteration
of the loop happens, within any one iteration of the
loop, the heading doesn't change. And now I'm just going to say
heading.inner HTML equals hello. We'll take a look at
what's actually happening and then look at why it works. So refresh the page. I get two headings, Welcome
and Some Other Heading. I click here, and they
both change to Hello. So again, why did that work? On line two, I query for all the
headings, store them in an array, save that inside of a
variable called headings. On line three, I create a for loop,
looping over each of those headings. We'll call each one just heading. And then for each of those
headings, I'm taking the inner HTML and setting that equal to hello. What questions do you have? Yeah? AUDIENCE: Does the JavaScript file to be
in a specific file for either the HTML [INAUDIBLE] function? BRIAN YU: Oh, good question. Does the JavaScript file need
to be in a specific place? In this case right here, where
I'm just opening the HTML file, the JavaScript file needs
to be in the same directory. And when you're building
web applications on the server, for
instance, with like Flask, you'll want to store the
JavaScript file probably inside of a directory called static. It's what we would
consider a static file. The JavaScript file
itself doesn't change. And Flask has a special
way of serving up static files that most
web servers do as well. Other things? How do we feel about this general
idea, these ideas of event listener is waiting for an event to happen and
then performing some action based on it and then manipulating the DOM, actually
changing things on the page in response to what's happening? All right, so mostly green,
but some yellow and some red. So happy to pause and take questions,
if there are more questions. Or I can just show another example,
if that would be helpful as well. All right, let's do another example. I'll create a new file. I'll call it counter.html. And I'll just copy what's
in hello.html for now. What I'm going to do is create a
JavaScript file called counter.js. What I'm going to do is
create an application that just allows me to keep a counter,
sort of like those click counters that you can use to keep tally of
attendance at something, for instance. I'm going to define an H1. And then I'm going to give it an ID,
just to make it easy to reference. And I'll give it an ID of counter. And it's going to start at zero. And I'm going to have a button. When I click on the button, we're
going to run the count function. And the button is going
to say Click Here. So I have a heading that's
going to display the number zero and a button that's just
going to say Click Here. And if I open counter.html,
here's what I see, right? I see the number zero, and I see a
button that says called Click Here. But if I click on it right
now, nothing's going to happen. I'm, in fact, going to
get an error because I haven't defined this count function. So let's define it. Inside of counter.js, here's
the code I'm going to include. I'm going to have a variable,
let counter equal 0. And then I'm going to have a
function, a function called count. And when the count function is
run, the first thing I want to do is take my counter variable and
increment it, increase it by one. And there are many ways to do this. I could do counter
equals counter plus 1. I could simplify that to
just counter plus equals 1. Or if I'm only incrementing by
one, the simplest way to say this is just counter plus plus,
increase the value of counter by 1. And then I'll say document.queryselector
pound counter, in other words, get the thing that has an ID of counter,
which was this H1 tag right over here, and set its inner HTML to be whatever
the current value of my counter variable is. So let's see what happens. I have zero. I click here. And the number now is one. I click again. Now it's two. And every time I click, the
value of the counter goes up, and the page updates to
reflect that counter. And so again, what's happening here? I'm defining a variable on
line one, let counter equal 0, using let not const because the
value of counter's going to change. I want to be able to update the value
of counter throughout this program. Then I have a function which is
going to actually do the counting. And it increments the
value of the variable and then manipulates the DOM, updates
the contents of the actual page to reflect whatever the
value of the variable is. Yeah? AUDIENCE: Should there be like a pop-up
window in JavaScript or [INAUDIBLE]?? BRIAN YU: Sorry. Repeat that. AUDIENCE: So isn't there
usually like a pop-up window for when you do JavaScript? How do you get it so that
doesn't show the pop-up? BRIAN YU: The pop-up window-- so I
was able to use the alert function, if that's what your referring to,
in order to create a pop-up window. But there's no alert function
being used in this code. And so we're not going
to get any pop-up when I'm trying to run the
JavaScript code, for instance. Yeah, can use JavaScript to create
alerts, but you don't need to. In fact, most of the
time manipulating the DOM is one of the primary use cases
the JavaScript can be good for. Yeah? AUDIENCE: This one, like,
just like the [INAUDIBLE],, that they would just change the
first one with [INAUDIBLE],, right? BRIAN YU: Good question. Yes, query selector is only
going to select the first thing. But in the case of IDs,
there should only ever be one thing because IDs are unique. And so when you select for
an ID, it would be a mistake if you had two things with the
same ID in the same HTML page. Is there question here? Yeah? AUDIENCE: Yeah. Can you explain again why you
use const for heading earlier? BRIAN YU: Oh, OK. So the question is why earlier
did I use const for headings when I had all of those different headings? It was because that array
of headings never changed. I was never going to add
something to that array, or I was never going to change it to
be a different array, for example. The real thing is I wasn't going to
change it to be a different array. Because it was always
going to be the same array, that's why I was able to use const. AUDIENCE: You could then change each
individual element inside the array? BRIAN YU: Good question. I was able to modify the
contents of the elements. But the array itself didn't change. So the contents, I was able to
update and manipulate their values. But these were still
the same two headings. I just changed what was inside of them. Yeah. Yeah? AUDIENCE: So [INAUDIBLE]? BRIAN YU: Oh, good question. So there also is a function
called document.getElementById that you can use to get
something by its ID as well. You can use that too. Query selector's a little bit
newer and is a little more robust, in that allows you to select by
different things, for instance. But you can definitely use
getElementById as well. We'll be using query selector
just for consistency. But getElementById will work, too. Often in JavaScript there are multiple
ways of achieving the same thing. All right, let's do another example. We'll add a little bit
of complexity here. So one thing that you'll notice
here is that right now we have button on click equals count,
meaning that inside of my HTML I have JavaScript code for what
happens when a button is clicked on. Oftentimes for design reasons we
want to separate out the JavaScript, sort of put it into its own
file, into the JavaScript file so that I don't have the
JavaScript and HTML commingling together inside of the same file. So what I might do is instead of
saying, button on click equals count, I can move this to the JavaScript
file, much in the same way that two days ago when we were looking
at CSS we were able to say, all right, instead of having inline CSS right
next to the element in a style attribute, we move the CSS either into
the header or into a separate file, for instance. And so I can do the
same thing here, too. What I would like to
be able to do is say document dot query selector
button on click equals count. I'd like to be able to
say something like that, select a button, and when you
click, when you get clicked, run the count function, just add
this sort of code to counter dot JS. And so now if I refresh
this page and click here-- OK, nothing's happening. Any thoughts as to why? This is a little bit subtle,
but there is a small bug that I've created, an error. So recall a moment ago, I said that
HTML pages are read from top to bottom. So my web browser is looking at
this HTML page from top to bottom. It's going through the
HTML header, title. OK, here's the script. And at the point that it hits the
script, it's going to run the script. And when it runs the script,
it's going to first run, all right, let's get the button. But at this point in time, the
page doesn't have a button yet. If I'm reading the
page from top to bottom and I hit document dot query
selector button on line five, well, the button isn't defined
until later on, on line nine. So the [INAUDIBLE] hasn't
fully been loaded yet because I'm only on line
five of this HTML file, and so there's no button to select. And so there's no way to say
when the button is clicked on, run the count function. Is that nuance clear as to
why this isn't quite working? All right. So how do we fix this? Yeah, question. AUDIENCE: If you put the script back
from the bottom, would that be helpful? BRIAN YU: Good question. We put the script tag at the bottom? Yes, that would certainly fix the issue. But we'd like to keep
the script in the header because that's often where
scripts are going to go. And so we can come up with other
ways of solving this problem as well, and probably the most common way
is to have something like this-- document dot ad event
listener DOM content loaded. And then put the event
listener inside of that. So this is a lot of sort
of strange looking syntax. We'll tease it apart. This is all in the lecture
source code examples, which are online now if you
want to take a look at them. But what's going on here? Document dot ad event listener is saying
let's take the document, this web page, and add an event listener to it. Let's listen for something. And what event am I listening for? I'm listening for a special
event called DOM content loaded. DOM, remember, is the
Document Object Model. And so when I say add event
listener DOM content loaded, what I'm saying is let's wait for all
of the DOM to finish loading, all of the buttons and the
headings and the forums and whatever else might be inside of my
HTML page, wait for all of the elements to finish loading. And when everything's done
loading, then run this function, the function that comes after it. So whereas before when I was
just reading top to bottom, the take the button and when it's
clicked on run the count function, that happened right away before
the DOM was done loading. Now I'm saying, all right, all
this code that I want to run, I only want it to run after
the DOM is done loading. And so that's what this beginning
part of the script is saying. Wait until the whole
page is done loading and then run the JavaScript code. So the syntax looks a little bit
funky, but with practice you'll find that this notion of passing
in functions as arguments to other functions is something you'll
see quite commonly in JavaScript. And yeah, question. AUDIENCE: Would you be
able to do the same thing if the button was dynamically
created or generated on the page? BRIAN YU: Good question. Would you be able to do the same
thing if the button were dynamically created or generated on the page? Yes, you could. The DOM content loaded just refers to
all the content initially on the page, so when all that is loaded
this function will run. But certainly, , as we'll soon se
when we get to this morning's project, we will be adding buttons to the page
dynamically and adding event listeners to those. And so you can do similar
things there, too. Yeah. AUDIENCE: Um, on the
second line [INAUDIBLE].. BRIAN YU: Oh, good question. Yeah, this is actually a really
interesting point about JavaScript. What am I passing in as
the value of on click? I'm passing in count. And what is count exactly? Count, defined here on
line seven, is a function. And so JavaScript does
something interesting which is it lets me treat
functions as values. I can take a function and set it
equal to some variable or some value, and you can treat functions
the same way that you treat integers or strings or
floating point numbers or arrays or any other type of
data in other languages. And this is a bit of a tricky concept
to wrap your mind around at first. This has to do with getting towards
this idea of functional programming, passing in functions
into other functions and using functions in this way. And this is quite powerful because if
I were to put parentheses after count, that would actually run the count
function right now on line two. It would run the count
function and set whatever its return value is equal to this. But I don't want to run
the count function now. I want to say, when the button is
clicked, then run the function. And so by just passing
and count, no parentheses, I'm not running the function. I'm just passing in the function
providing it as the value of on click, so that when the button is clicked,
then it's going to run the function. So this is a little bit tricky, but
this idea is that I can take a function and rather than run it, just
pass it around as a value and save it inside of
a variable, provide it as the value of on click, the on click
attribute of the button, for example, and use it in that way. Questions? Yeah. AUDIENCE: Why would you always
want to have event listener, have your Java scripts run
after the entire HTML page? BRIAN YU: Why would you-- AUDIENCE: Why wouldn't you always just
want to event listener for JavaScript? BRIAN YU: Why wouldn't
you always want to have an event listener for your JavaScript? Oftentimes you do just want to have
an event listener for your JavaScript, although your functions
can exist outside of that. So this function, count, for
example, none of that code is actually going to run until I
actually call the count function, a so it doesn't need
to be inside of this add event listener because it's
not going to run anyways until I call the count function, for example. Other things? I know this notion of
passing around functions is a little bit tricky, but hopefully
with a couple more examples it'll become a little clearer. Yeah? AUDIENCE: For DOM content load
[INAUDIBLE] once everything [INAUDIBLE] after a certain [INAUDIBLE]. BRIAN YU: So DOM content loaded
will wait until everything is done. There is no specific event
for after half of the page is loaded, for instance. But wherever you put
your script and that is where that script is going to run. And so if you were to add script tags
in other places throughout the page, you could get a script that runs
before all of the rest of the content has loaded for instance. And that's something that you could do. Is there a question over here? Yeah. AUDIENCE: So how is this better
than just adding on click is equal to [INAUDIBLE]? BRIAN YU: So the question is why is
this any better than just adding button on click equals something? Why should I do this programmatically? Doing it programmatically gives
us a little bit more flexibility in the sense that right now,
yeah, this is no different than if I just said
on click equals count. You can imagine a situation
where maybe on click-- I don't necessarily always
want to run the same function. Maybe I want to run one of a
couple of different functions and I want to programmatically be
able to decide which function to run. This ability to use
this variable account and pass it around as a value means
that I could do something like that, means that I could pick and choose, do
things programmatically, add some more logic to this program. And so doing it in the
JavaScript side of things just gives us a little bit
more flexibility in that sense. Yeah? AUDIENCE: If you want to
have multiple functions, say that the count function [INAUDIBLE]
different functions, at the very top, you have a document as a
[INAUDIBLE] have function, [INAUDIBLE] all the functions
in JavaScript or just-- BRIAN YU: Oh. So the question is, what
exactly is this function doing? This function is actually being provided
as an argument to add event listener. This is a function that
I'm saying, this is the function that should run
when the DOM content is loaded. And so I could have other
functions here like hello that get triggered on other buttons,
but this function itself, this is just a function
that's describing what code is going to run when
the DOM content is done loading. I could have separated this out
and said let's take this function and call this function start for what to
do when you start running the program. And I could have said, document dot add
event listener, when the DOM content is done loading, run the function start. And then so that's
what would happen then. When the DOM content is loaded,
we would run the function start, and here is that function. But oftentimes if all I'm
doing is naming a function so that I can provide it as the argument
to something like an event listener, for instance, it can be more succinct
just to take the whole function and plug it in as the argument to
add event listener, and in this case, not even bother to give it a name
because it doesn't need a name. This is what we call an anonymous
function, a function that just doesn't have a name. And I'm providing this function to
say, when the DOM content is loaded, this is the function that should run. Yeah, of course. Yeah? AUDIENCE: How is adding event listener
different from the [INAUDIBLE]?? BRIAN YU: So question is,
how is an event listener different from query selector? Query selector is going to look
throughout the page for an HTML element and pick it out for me, give me that
HTML element so that I can do something with it, so that I can modify it,
so that I can add properties to it, for example. Add event listener is
going to take some element and it's going to wait
for something to happen. And when something happens, then
it's going to run a function. In this case, I'm taking the
document-- my whole web page-- adding an event listener, saying
wait for all the content of this page to be done loading, and when it's
done loading, run this function. So that's the distinction there. Yeah? AUDIENCE: So kind of like the previous
question, if you have more functions, could you add them to the
same function line on one 2? BRIAN YU: Yeah. So line 2 doesn't need
to just be one line. I could add another
document dot query selector. I could do any arbitrary
logic in this function and make it as long
as you want it to be. Yeah? AUDIENCE: So is it [INAUDIBLE]
argument in the add event listener to the function, is that
unique to add an event listener or do you actually [INAUDIBLE]? BRIAN YU: OK. So question is, is this idea
of this anonymous function passing in a function, is that
unique to add event listener? No, you can do that anytime you want to
provide a function as the argument to-- as a value to anything. And in fact, I don't even need this
function called count necessarily. If I wanted to, I could
just say, all right. I don't need to name
this function count. Let me just create another
anonymous function inside of which is the contents of the count function. And I'll move the declaration
of counter up to the top here. But now what I'm saying is, all
right, when the DOM content is loaded, run this function. And this function is going to
say, when the button is clicked, then go ahead and run this function,
which is going to increment counter and update counter as in our HTML. This would be exactly the same thing. I've just gotten rid of another
function and just turned it into an anonymous function. Yeah? AUDIENCE: Is it preferable
to have [INAUDIBLE] that way? Or is it better to find [INAUDIBLE]? BRIAN YU: So is it preferable
to have fewer functions? It's going to depend a little
bit upon the type of program that you're creating. Generally, I'd go for cleanliness and
ease of reading as the top priority here. And so here I'd probably prefer
to actually separate count into a different function so
that it becomes very clear, here's what the function does. It counts. And I'm saying when
the button is clicked, then you should run the count function. And that just seems a little
bit clearer to me, at least, than putting everything in
without giving them names. Yeah? AUDIENCE: So the scope
of [INAUDIBLE],, but if it's outside of [INAUDIBLE] variable? BRIAN YU: Yeah. If this let counter is outside of
the curly braces of any function, then it'll be accessible from within the
count function or any other function, for example. OK. Let's take a look at
another example that will hopefully help to make some
of this a little clearer as well. So I'll go in here and we'll
take a look at color 0 dot HTML. So here is color 0 dot HTML. It's got hello in big letters and
it's got three buttons-- red, blue, and green. So what am I going to do here? If I click on the red button,
let's just observe what happens and then take a look at why it happens. I click on red and hello changes to red. I click blue, hello changes to blue. I click green and
hello changes to green. Why and how did that happen? Well, all right, let's take
a look at color 0 dot HTML. Let's take a look at the body. I have a heading that has an ID
of hello that just says hello. And then I have three buttons--
red, blue, and green-- that are just red, blue, and green. And they have IDs--
red, blue, and green. Let's take a look at the
JavaScript that's making this work. First, we add an event listener,
wait for the DOM content to load, and then run this function. Same as before, basically just saying,
wait for the page to finish loading. And then I'm saying, document
dot query selector red-- get the red button, the
thing that has ID red. When it's clicked-- on click-- run this function. What is the function doing? It's saying, all right, let
me select for the thing that has ID hello, that heading. And then I can actually
change its style. I can say dot style to get
at the style of that element. And what property do I want to change? What CSS property? Same as anything as this property. I want to change the color and I
want to change the color to red. And then I do the same thing for
blue and the same thing for green. So we have these nested
functions, these event listeners. There's a lot of JavaScript code here. Let's see if you can
glean, generally speaking, what it is that this code is doing. It's waiting for the
DOM to finish loading and then when a button is
clicked, we're changing the style of some HTML element. Yeah? AUDIENCE: Is it better to use
single quotes or double quotes? Or does it not matter? BRIAN YU: Oh. So is it better to use single
quotes or double quotes? I've been using them
sort of interchangeably. JavaScript doesn't really care. It's really a matter of
personal preference and style. You should just be consistent within a
file is probably the best thing to do. AUDIENCE: I know we had that one
advantage of using double quotes is that this side of it was [INAUDIBLE]. BRIAN YU: Yeah. Within double quotes,
you can use single quotes and just treat them as normal
single quotes, and vice versa. Within single quotes, you
can use double quotes, and those are just
plain old double quotes. So that can be a reason to make a
choice in certain situations, too. All right. Questions about anything so far? ? What seems poorly designed about this
example anything that strike you? Yeah? AUDIENCE: It's the same code. BRIAN YU: It's the same code. There's a lot of code
repeated multiple times and so this is probably not ideal. I'd like to do something about that in
order to make it a little bit better. So let's take a look
at colors one dot HTML. Colors one dot HTML is going
to do exactly the same thing-- hello, red, blue, and green. I click red, it turns red. Blue turns blue, green turns green. But how is this one working? Well, here's the body. I have a heading, hello. And then I have buttons,
but these buttons have a few other different attributes. These buttons, instead
of having an ID, have a class because I want this class
to refer to all three buttons. The class is called color change
so later I can say, all right, get the things with the class of color
change and do something with them. And they also have this data attribute. And this data attribute is something
that you can add to HTML elements if you want to store data
alongside those elements. And in particular, I want each of my
buttons to store data about what color they should change the heading
to when I click on that button. So here I'm saying, button
class equals color change. Data color equals red, in order to mean,
I want to store along with this button some information and the information
about what color it should turn, and it should turn the
heading red in this case. And I give the blue button the data
color of blue, green button data color of green. And so now here's the JavaScript
code that makes this all work. I have document dot add event
listener DOM content loaded. Wait for the whole
page to finish loading. And so what's the code that
I'm ultimately going to run? I'm going to say, document
dot query selector all for any-- select everything
that has a class of color change. And now I have an array of things. And now I can do use a
function called for each. And what for each is going to do is
it's basically going to take an array and apply a function for
each element in that array. So I've got this array
of buttons and I would like to do the same thing for each
of the buttons inside of this array. And so what am I going to
do each of these buttons? Well, I'm going to run this function. The function takes this
argument, the button itself, the element of the array. And what am I going to
do with that button? Well, when the button is clicked,
then go ahead and run this function. What is the function doing? Well, it's saying let's get the
hello heading, get its style, change the color property of the style. And what value do I
want to change it to? Well, I want to take the button and
I want to get at its data dash color attribute. And so how do I get at the data
information inside of an HTML element? In JavaScript you do this by
saying button dot data set, which gets you at all the data
information about that HTML element. And I want access the
color property of that. So button dot data
set dot color is a way of saying, all right, let's take
this button, get at the data elements within it, and extract
the color from it. There's a lot of new
syntax here and a lot of new syntax in a lot of the examples
that we're going to show today. Goal of this is not to have
you memorize all of this stuff. These examples are posted online. You can refer back to
them if you need it. But it's just to give you
a sense of the tool kit that JavaScript enables you to
use, this idea of associating data with elements such that later you
can go back and take an element and get it the data associated with it. It's a pretty valuable tool
that you might find useful as you go about building web
applications using JavaScript. Questions about what's
happening here and why it works? Yeah? AUDIENCE: Why is button passed
as the parameter to the function? BRIAN YU: All right. So the question is why is button passed
as the parameter to the function? This is part of the way
that for each works. What for each does is it takes
an array and applies a function to every element in that array. So I can actually demonstrate--
this is a good opportunity to talk a little bit about
functional programming, which is something that JavaScript really
enables, this idea of passing functions around as values of their own and
that you'll see in other classes. CS51 really emphasizes
functional programming as an idea and is very common in JavaScript
programming in general. So let's do this. Let's get an array. I'll zoom in here. And so let array be--
and right now I'm just using the console
inside of a web browser like Chrome, which
you can do just to run JavaScript code if you would like to. And I'm going to have this array be
1, 2, 3, 4, 5, so it's just an array. And now I'm going to
say array dot for each. And for each element in this array
I'm going to run some function. And that function is going to take as
its argument the element of the array. It's going to go for each element
in this array, and for each one we're going to run this function,
passing in that element as the argument to the function. And here I'm going to say,
console dot log element. Console dot log is the
equivalent of printf, just means print to the console. And I press Return. Missing parentheses after argument list. Oh, I didn't close the parentheses
after the end of for each, so we'll go ahead and close the
parentheses after the end of for each. And OK. What gets printed out? 1, 2, 3, 4, 5. The undefined is because the for each
itself is not returning anything, so you don't have to
worry too much about that. But what I got printed
out to the console is 1, 2, 3, 4, 5 because
for every element we just printed out that element. I could, instead, have said, console
dot log element times 2, for example. And that would have printed out-- oh,
I did the same problem mistake again. And that would have printed out 2,
4, 6, 8, 10 because for each element we're just going to go through each
element in the array, multiply it by 2, for example, in order to do that. Questions about that or how it worked? Yeah. AUDIENCE: I actually have a
question about the previous one. For the data set dot, or
button dot data set dot color, can we define and kind
of data attributes we want on, like, we do data
dash then make up our own name? Or does it have to be-- BRIAN YU: Yes, you can do
data dash anything you want, just some arbitrary name
for the data attribute. And then you can access it via the
data set property of the HTML element. So you can store arbitrary
data with your HTML elements if you would like to. One new feature of ES6, one of the
more recent versions of JavaScript, is a different way of
defining functions. You can have what are called arrow
functions, which is this idea that you can define a function instead
of using the word function, you can use this arrow syntax
to mean, take some input and then provide some output. And so I'll show you an example of that. What I could do is I could take the
array 1, 2 3, 4, 5, as I did before. And then I could say something like
for each, just take the element, and console dot log that element. And then what I get printed
out as the exact same thing-- 1, 2, 3, 4, 5, just
much more succinctly. This right here is a function
that takes as input the element. And what it does with that
element is just print out that element to the console. And that arrow is this idea
of element as the input to the function and the arrow is
the actual body of the function. After the arrow is what the
function should actually do with that individual element. And so functional programming gives
us a lot of interesting capabilities that we might not have
had before or that we can do more easily now with the
ability to have functional programming. And so I'll give you an example. In addition to having for
each, which takes an array and run some function
on each element in it, I also have this function called map. What map is going to do
is it's going to apply a function to every element in the array
and give me a new array as a result. So let me apply-- take the array 1, 2, 3, 4, 5,
and let me map over that array a function that takes the element and
returns element times 2, for example. I press Return and what I get is I
get a new array of five elements-- the parentheses 5 just means
five elements-- and that array is 2, 4, 6, 8, 10. I was able to take an array and generate
a brand new array by mapping over every element inside of that array. This is functional programming,
passing a function as arguments around in order to create
interesting behavior. Yeah? AUDIENCE: Is this different
than in C [INAUDIBLE] loop, and then within the for
loop [INAUDIBLE] function? BRIAN YU: In C you could
have replicated this idea by having a for loop that loops over it
and generates a new array, for example. You certainly could do that. Functional programming just
offers a slightly different way of achieving that same effect, yeah. Yep? AUDIENCE: Is elements an arbitrary name? BRIAN YU: Yeah, ELT
is an arbitrary name. It could've been anything
you want it to be. AUDIENCE: So in the previous example,
button was also an arbitrary name? BRIAN YU: Button is
also an arbitrary name. Yeah, any argument to the function
you can call whatever you want. We just tend to give it names
that are semantically meaningful. Yeah? AUDIENCE: How do arrow
functions distinguish the arbitrary name of an input
versus the name of the [INAUDIBLE]?? BRIAN YU: Good question. The arrow function itself
doesn't have a name. It's just an anonymous function
that doesn't have a name. So ELT in this case is
always just going to be the input variable to the function. AUDIENCE: But if you were
writing it in a script file, how would you name the arrow? BRIAN YU: How would you
name an arrow function? You would do something like-- let's open up hello dot
JS or counter dot JS. I could have instead of
this said const count equals or I could define a function
like const double equals a function that takes as input x
and returns x times 2, for instance. And so you could do something like that. Again, a lot of new syntax
here, but see if you can just grasp the general ideas
here and then we'll get some opportunity to actually
try this hands on so you can see how this actually works. Other questions? I'll show you one other example
of functional programming at work. You can also-- in addition to
a map to map over an array, you can also filter an array. So I could say, all right, 1, 2,
3, 4, 5, let me filter this array, take every element, and only return
the elements that are greater than 2, for instance. And that will take 1, 2,
3, 4, 5, and return for me a new array that's
just 3, 4, 5, that has only the elements of that array that
are greater than 2, for example. Yeah? AUDIENCE: Those filter mutate
the array, or it doesn't do it? BRIAN YU: Does filter mutate the array? No, it's just returning
to me a new array that is the result of doing that filtering. Other questions? Let me show you one other
or a couple other examples. Let's go to Tasks 0 dot HTML
and let's go to Task 0 dot HTML. Here's a simple JavaScript
application that just acts as a to-do list, a list
of things that you need to do. So you type a thing you need
to do, you press Submit, and it adds it to a
list of things to do. Here's another thing that I need to do. I press Submit, it adds it
to the list of things to do. And so this is an
interesting application that actually lets me interact with it. I type things, it
manipulates the DOM, it updates the contents
of the page in response to whatever it is that I'm doing. And so how exactly is this working? So inside of the body of the
page I have an unordered list called Tasks that's just going to
maintain that list of all of the tasks that I currently have. And then I have a form, a form where
I can actually type in a new task and press Submit in order to
submit that form to do something. The form has an ID. It's called New Task. And then I have an input field where
I can actually type something in. The place holder here is
new task, which is just the text it's going to be displayed
before I start typing something in. And then I have a Submit button
at the bottom of the form. And so that defines the
general structure of the page. I have an unordered list, I have
inform or I have an input field, and then a Submit button that's actually
going to let me submit this form to say I want to submit a new thing. What is the JavaScript code
that's making this work? Well, OK, I'm adding an event
listener for DOM content loaded, waiting for the
whole page to finish loading. And when it does, I'm
going to run this function. Again, I'm using an arrow function
here, which is just new ES6 syntax. It's just the same as any
old function, although it does behave in slightly different
ways, the nuances of which we won't touch on today. And so what am I doing in here? I'm saying query selector new task. What is ID new task? Well, that is down here. That's this form. So OK, I've selected the
thing called new task and on Submit, it's
saying, when I submit this form, what would I like to do? Well, what I'd like
to do is actually when I type in something
and press Submit, I'd like to add that to my list of tasks. I have this unordered list
and I want to add a new list item to that list to reflect
whatever it is that I just typed in. So const LI equals document
dot create element LI. Document dot create element
creates a brand new HTML element. So I've here said to create a new
list item element, and LI element, and just save it inside
this variable called LI. Then I say LI dot inner HTML,
meaning take that list item. I want to update the contents
of it, the inner HTML. And what do I want
that list item to say? Well, the input field
down here was called Task. It had an ID of Task, and that was where
I was actually typing something in. So this list item up here, it's inner
HTML should be whatever I typed in. And I can get at whatever I typed in it
by saying document doc query selector, get the thing with ID
task and get its value, get that inputs value,
which in this case is whatever it is that I actually
typed in into the task field. I then say document dot
query selector tasks append LI, meaning take this
element of all of the tasks and go ahead and add this
thing to the end of it. Add this new list item
that I have just created. And then the last step is
to clear the input field, document dot query, select
your task, change its value to just be empty so that I can type in
a new fresh task if I would like to. Let's just show you what all
that looks like in practice. I type in a thing to do. When I press Submit,
that triggers the event. I've submitted the form
and when it does that, it's going to create a new list item element,
take the contents of this input field, set that as the inner HTML of the list
item, add that list item to my list, and then it's also going to
clear out this input field. So just step by step describing the
behavior that I want to perform. You can imagine as programs start
to get a little bit larger, doing this all the time is going
to start to get annoying. In a couple days time,
we'll introduce React, which will actually
simplify a lot of this and make it easier to reason about more
complex, more sophisticated programs. But questions about this
for now and how this works? Yeah? AUDIENCE: Would this be [INAUDIBLE]
how can you append [INAUDIBLE]?? BRIAN YU: So LI is a const because when
I define this variable LI, at least in the context of this
function, I'm never changing it to a different list item. If I were to later try and set
LI equal to something else, that is when this constraint would break. So a const, you can define it. You can manipulate its properties. You just can't set that variable
name to be some new thing is the only constraint there. Yeah? AUDIENCE: Why'd you choose to stop the
form from submitting at the bottom? BRIAN YU: Why did I choose to
stop the form from submitting? Normally when you submit a form, it
will either submit to the same page and just submit the page again or take
you to some other route altogether, and I didn't want that to happen. I wanted the user to stay on the
same page without reloading anything. So return false just
stops that from happening. Yeah? AUDIENCE: Why is it not
a problem [INAUDIBLE]?? So why do we not replace [INAUDIBLE]? BRIAN YU: Yeah. So why is it-- why am I allowed to say that
LI is a const when every time I create a new task this LI is different? It has to do with what's called
variable scope, like where this variable is actually alive. And this variable only exists for this
iteration, this run of this function. And the next time that I create that I
run this function, I get a brand new LI and so it doesn't matter
that I had an LI previously. So I can use this const variable
so long as in the same function I never said LI to be
equal to something else. Yeah? AUDIENCE: So like, did you have
to define it as a constant? Or can you just take that out
and LI would work [INAUDIBLE]?? BRIAN YU: I could have just used
let here if I had wanted to. It's just a little bit unnecessary
because I'm never changing it, so you'll generally want to use
const if you're not actually going to expect to change
the value of a variable. Yeah? AUDIENCE: For line 7, [INAUDIBLE],,
why did you pass the [INAUDIBLE]?? BRIAN YU: On submit is the event
that happens when you submit a form. And so new task is the idea that
actually refers to this form. So when I submit the form, I want
to run the event, run the function, and the function is going
to look at the input field. And so I have the event listener on the
form that then looks at the input field is why they're different. There are a couple other examples
in the source code examples if you'd like to go through them, just
to get a better understanding of what's going on in JavaScript
and how to actually do these sorts of manipulations. What I'd like to do now is actually get
started with this morning's projects, sort of walk through it together. We'll go through it together. I'll post the distribution
code so you can look to it if you would like to as
well, but then we'll get started and I'll show you what
we're creating first. Before we get to that, any
questions about anything? What we're going to be
creating this morning is a quiz application,
basically a mini quiz online that allows you to have
questions and answer questions and keep track of how many
questions you've gotten correct. So we can have code that
looks something like this. It displays a question, it
displays some answer choices. What is the binary
representation of the number 28? Anyone know which of
these is correct offhand? Any guesses? I heard someone say 1 1 1 0 0. OK, great. 1 out of 1 questions correct. What type of loop will
always execute at least once? AUDIENCE: [INAUDIBLE]. BRIAN YU: Do while. OK, throwback to when we were learning
about C. Which of the following HTTP status codes means not found? AUDIENCE: 404. BRIAN YU: 404. Let's just try getting a question
wrong just for the sake of example. Let's say 500. OK, quiz complete. Questions correct, two out of three. What we're going to be doing is just
building a quiz application like this using HTML and JavaScript,
and CSS if you'd like to, that just displays some questions
that you can choose for yourself, or we use the questions
that I used as well, and then lets you answer those
questions, keeping track of your score as you go. Questions about what we're trying to do? And then we'll actually start
trying to build it together. All right. Let's give this a shot. I'll go to my desktop. I'll create a new directory called Quiz. We'll go into the Quiz directory
and we'll start working on this. So I'm going to create a new file. We'll call it quiz.html
and quiz.html, we're just going to start off as a same old HTML
page that we've been doing before, give it a header. The title will just
be quiz, for example. And we're probably going to want
to link in some other files, maybe a CSS file, maybe some
JavaScript files, so let's do that. Let me first create a styles.CSS
file where we can store any CSS code that we want to use here. And then I can say link
href=styles.css rel=stylesheet, and that's basically
me saying, all right, I'm going to link this styles.css file. It's my style sheet for this page,
so any CSS code I put in styles.css will reflect in quiz.html. And let me also create a
new file called scripts.js where I'm going to store all the
JavaScript code for this quiz application. And I'm going to say script
source equals scripts.js and that's going to be my way of saying,
I want to include some JavaScript here as well that I want to associate
with this particular page, and the JavaScript code
is going to go there. Questions about what we've done so far? All right. Now in the body of the page
what am I going to include? Well, at the top of the
page, I'm going to go ahead and say, all right, let's just call it
Quiz, give it a heading called Quiz. And underneath the quiz I would
like a place to display the question and display the answer choices. But the question and answer
choices are going to change, so ideally I'd like to
have the JavaScript take care of actually putting the question
and the answer into the page. But I need space on the page for the
question and the answer choices to go, so I'm going to go ahead
and say h2id=question. So the question is going to be a
heading as well, not as big as quiz, so each h2 for slightly smaller than h1. And it's going to have an ID of question
so that I can reference it later, so that I can find this place in the page. But for now it's going to be empty. I'm not actually going to
put a question on the page. I'm going to let the JavaScript do that. And we'll get to that in just a moment. Underneath that I need some place to put
it in the answer choices, the options that the user can actually select. So I'll say-- let's create a div,
just a vertical section of the page, ID=options End array. I don't know what the options are yet. Again, I'll let the
JavaScript handle that. But I need some space on the
page where those options can go. And so that's what I'm
doing here, creating a new div where I have those options. And finally, at the bottom
we'll do questions correct and then I need some space where we
can input the number of questions correct that I have. By default, it's probably
just going to be 0 out of 0, but I'm going to need to
update that frequently. So I'm going to put
this inside of a span. A span you can think of just as
an inline section of the page that I can later reference,
similar to div, but divs take up their own vertical space. But I would like 0 out of 0 or 1
out of 1 to be on the same line as questions correct, so I'm
going to put it inside of a span. Give it an ID called correct, just
as a way of referencing it later. And for now, we'll say 0--
or not 0 and 0, 0 of 0. And so that's it for the HTML. I'm just defining the
structure of the page-- a heading that says Quiz, a place
where I can put the question, a place where I can fill in with
each of the options that I have, and then a place where
I can say, OK, here's how many questions correct I've gotten. If I open up quiz.html right now,
here's what the page looks like. It just says quiz and
questions correct 0 out of 0. What questions go so far
about just the HTML here? Yeah? AUDIENCE: Why do you [INAUDIBLE]? BRIAN YU: Why do I need the span? I need the span because later
on when I get a question right, I want to be able to update this text. Instead of 0 out of 0 I want it to
be 1 out of 1 and then 1 out of 2 if I get one wrong. And to do that, in my
JavaScript I'm going to need to be able to reference
this particular part of the page. And so by wrapping it inside of
a span that I give a name to, an ID of correct, I can
later query select or try and grab the thing that has an ID of
correct, and then modify the contents. So I'm just thinking
ahead here, thinking that eventually I'm going to need
to edit that section of the page. So I'm giving it a name that makes
it easier for me to edit it later. Other things? All right. Let's actually go ahead and actually
try and write some JavaScript code. The first thing that I'm going to need
is I'm going to need some questions, so I'm going to define a
variable called questions. It's going to be constant because
the questions aren't going to change. I'm just going to define them once and
those are going to be the questions. And it's going to be an array. It's an array of one question
after another question after another question. And each question is going to be what
we'll call a JavaScript object, which you can think of a Python
dictionary that associates keys and values together. And the idea here is I want
to be able to have a question, and the question is going
to be some question. We'll do something simple for
now, like, what is 10 plus 10? And we're going to have options. So my options are what data
type makes sense for options? AUDIENCE: A list. BRIAN YU: A list or an
array in JavaScript, yeah. Same idea. So my options are going to be-- all
right, let's do 8 and 28 and 30. And I guess we should probably put
the correct answer in there, too-- 20. OK, so we've defined question, we
defined our possible answer options, and then we also should probably
define what the answer is. JavaScript needs to know what the
correct answer to the question is. And the correct answer
in this case is 20. And I'm making everything strings
just for ease of comparison later because not all my
answers are necessarily numeric, though you can imagine
a variant of this where you use numbers instead of strings. Let's do another question. Anyone have a question in mind? We'll do, what is
Athena's favorite animal? Anyone know the answer to this? AUDIENCE: Otters. BRIAN YU: Great. You're paying attention. All right. We'll say jellyfish and
penguins and otters. And the answer is going to be
otters, and that'll be good for now. You can feel free to add more questions. Add whatever you want to
the page if you'd like to. So we've got our questions. What other information, what
other variables do we need here? What do we need to keep track of? Yeah? AUDIENCE: The number of questions. BRIAN YU: The number of questions
we've gotten correct, yeah. So we'll set let correct
be 0, just a variable to stand in for how many
things we've gotten correct. Anything else we need to keep track of? Yeah? AUDIENCE: [INAUDIBLE] BRIAN YU: Yeah, what question
number you're currently on is probably something
that we should probably have a program keep keeping track of. So maybe say, let
question number equal 0. I'll go ahead and zero index this so
it's easy to index into the array, because the first thing in the
array is going to be element zero. So we'll start at question number zero. And let's write some code here. Document dot add event listener. We'll wait for DOM content loaded,
and when Dom content is loaded we'll go ahead and run a function. And what should this do? Well, we want to load a new question. We want to load the
question onto the page, but loading a question onto the page
is something we're going to do a lot. We're going to load a
question onto the page, and later on we're going to load
another question onto the page and so on and so forth. So rather than put the code
to load a question right here, it's probably going to make more
sense to create a function just called load question that we can call here,
that we can call later if we need to, so that it's just easy to reference. And so what's going to happen is as
soon as the page is done loading, let's go ahead and call
this load question function. Questions about what we've done
here so far and why we've done it? We've defined a variable
called questions that's going to keep track of an array
of all the questions we've got so far-- questions, options, what
the correct answer is. We're keeping track of the current
question number, how many questions we've gotten correct. And then as soon as
the pages done loading, we're going to call this
load question function. All right. So what's load question going to do? Well, how would I access
the current question, the question that I want to load? Let's think about for that a little bit. Yeah, idea? AUDIENCE: [INAUDIBLE] BRIAN YU: Great. So when we want to move
on to the next question, we can increment question number. But yeah, this question
number variable is the index of which question I want to get at. And so if I have a variable
called questions up here, how will I get at the current question? What code would I write? Yeah? AUDIENCE: Questions bracket
question number bracket question. BRIAN YU: Yeah, exactly. Questions is my variable that's
keeping track of this whole list, but I don't want all the questions. I just want the current question. So if I say questions square
bracket question number, that's going to get me
just the current question. But the current question
has three parts. It has a question, it has
options, and it has an answer. And so I want to get
at just the question property of this particular object. And so I'm going to say
question number dot question. You could also use the square
bracket notation, but for an object, often you'll reference these
properties just using the dot notation. So I'm going to say,
question square bracket question mark question
number dot question. And try and make sure you
understand why that works. Questions is our array of questions. Question number is the index
of the question we care about. And that's going to be an object
with three parts-- a question and options and an answer, and I
want just the question out of that. So this is our question. And what do I want to
do with that question? I've gotten the question now,
but where do I want to put it? AUDIENCE: [INAUDIBLE] BRIAN YU: Yeah, the
inner HTML of something. Inner HTML of what? Here's my HTML page. AUDIENCE: The h2 with ID question. BRIAN YU: Yeah, the h2 that has
ID of question, that's where I want to put the actual question. So it has an ID of question,
so how am I going to get it? What code will get the thing
that has an ID of question? Yeah? AUDIENCE: Document dot query
selector and then quotation marks hashtag question. BRIAN YU: Great. Document dot query
selector pound question is going to say get the thing
that has an ID of question. And I would like to set its inner
HTML to be equal to this question. And just for fun, I'm going to
swap the order of the questions so that we get this one up first. So now I open up quiz.html, refresh
the page, and immediately we see Quiz. And now we've been able
to programmatically take the first question and put it into
the page in the question spot. Questions about how we did that? All right, let's move on. Green smiley faces, great. Now I want to actually insert
the options into this page, like the options that
are going to allow me now to be able to choose among
the possible options. So how am I going to do that? Well, where are the options stored? If the question is stored in question
square bracket question number dot question , what would I use
to get at the answer options? AUDIENCE: [INAUDIBLE] BRIAN YU: Great. Questions square bracket question
number, get the current question, and get the possible options. I'll go ahead and store that. That's going to be all my options. And what I'd like to
do is I'd like to have some loop over all of
those options that's just going to get me one option at
a time and do something with it. So I'm going to say for const
option of all of these options. And now I've got a loop. I'm looping through all
the possible options because I want to do something
with each of those options. And if I want to, I can
do console dot log option. Just for now, let's print
out the option and make sure it's what we expect it to be,
taking things one piece at a time, slowly just making sure
that we're building this application the right way. I'll open up the console,
refresh the page, and we get, what is
Athena's favorite animal? And sure enough, if you look
over here at the options, we see that we have jellyfish,
penguins, and otters as the possible options for this. They show up in the console, but now
I'd like to actually make them buttons, for example. So what do I need to do here? Well, the first thing
I probably need to do is to get it where I want
to put the options where do I want to put the options? AUDIENCE: [INAUDIBLE] BRIAN YU: Someone say it? OK. The thing that would ID options, great. So we'll create a
variable, call it options, set it equal to document
dot query selector options. The thing that has ID options we're now
going to store inside of this variable called options. And the first thing I'm going
to do is just clear it out. In case there was something in it
before from a previous question, we'll say options dot inner HTML
is equal to the empty string. It should be nothing. Yeah? AUDIENCE: When you're doing this
over the options [INAUDIBLE],, so is that equivalent
to doing the for each? BRIAN YU: Yes. I could have also just
done for each here and that would have
worked just fine, too. I'm using a for loop here
just because it's probably what you're more familiar with from
other languages, but in practice you actually would probably end up
using the for each, tends to be more JavaScript paradigm. But yes, you could use a
for each here, for sure. So now what I'd like to do
is for each of these options, let's try this-- options dot
inner HTML plus equals option. I take all the options, get at the inner
HTML, and just add the option to it. This isn't going to be perfect,
but you'll see what it looks like. We'll go ahead and refresh the page. What is Athena's favorite animal? All right, here's what the page
looks like-- jellyfish, penguins, otters as the three possible
options, which is OK. But we'd like to do better than that. We'd like to actually make them buttons. And so rather than just add the
option to it, let's go ahead and add something more. Let's add-- and now I'm
going to use it backticks. This is JavaScript's way of doing
format strings, the equivalent of what was the F in front of
the string in Python, because I want to be able to substitute
some values into this string. And you'll see how I'm going
to do that in just a moment. We're going to have a button, and
just forward thinking a little bit, I'll give all these buttons a class. That class will be called
option, so that later I can say let's wait for when you click
on something that has a class of option, but we'll deal with that later. Button class equals option. And in order to plug in some value
in JavaScript into a format string, you use a dollar sign
and then curly braces. So going to plug in the value
of option and then we'll say slash button to end the button. So here's what I've done. I've taken all of the options
in that space in the HTML page. I'm going to update
the HTML out in order to add this button, a button whose class
is option, which doesn't do anything now but we can make do something later,
plugging in the option as the value that button, and then
that's it for the button. Let's go ahead and refresh this page. And all right, this is
starting to look pretty good. It asks the question, what
is Athena's favorite animal. It's giving me buttons for each
of the three possible answers. Now, of course, there are ways that
I could style this if I wanted to in order to make it a little bit nicer. I'll go into my CSS file and say, all
right, let's center it, take the body the page, text align center it in
order to match what I had before. This is a serif font. Maybe you'd like to use
sans serif for this quiz, just because I think it'll
look a little nicer for this. So I can say font family sans serif,
just to make it a sans serif font. And then I'd like these buttons
to be a little spaced out. I'd like them to be a
little bigger, for instance. I'd maybe like to
change the color of it. So let's take all these buttons. Let's give them a font size,
font size of 18 pixels maybe. I'd like there to be some padding
on the inside of the button, so that the button shows
up as a little bit bigger. We'll give each button 15
pixels' width worth of padding, though feel free to
mess with this as you like for whatever you think looks best. And I'd also like space
between the buttons. Right now all the buttons
are right next to each other. So I'd like at least a little bit
of space between all the buttons, so I'll give them all
a margin of 10 pixels. Remember, margin is on
this side of the border. It's space between different elements. And then I'm going to give
it a background color. And I'm just going to give it
a grayish background color, and I know that the color for
that happens to be E7E7E7, so I'm going to go with that. And if I go ahead and refresh
this page now, all right, great. This is starting to really look
like that quiz application. I've centered things,
made it sans serif, added some space around the buttons,
changed the color of the buttons. We've got a question,
we've got possible answers. Of course, not all of this
is quite working just yet. The buttons don't actually
do anything, and I'd like to make the buttons
actually do something. So all right, how do I do that? How do I make the buttons do something? Yeah? AUDIENCE: Is there like, on click? BRIAN YU: Yeah, on click. And I want to apply the
on click to what exactly? To each of the buttons. And so how am I going to
get all of the buttons? Any thoughts on how I can get all the
buttons so I can apply something to it? Yeah? AUDIENCE: Document dot
query selector dot options? BRIAN YU: OK, query
selector dot option, this will get me a thing that has
a class a name of option, which is great because this
button has a class name of option. What could go wrong here? This is a good start. Yeah? AUDIENCE: It only takes the first one. BRIAN YU: Yeah, query selector,
recall, only gets me one thing. It's only going to get me the first
thing that has the class of option, but I want all of them. So what I might do is document
dot query selector all to say, get me all of the possible options. And for each of them I would like
to do something with that option. Again, I'm using the arrow syntax
here where the option is the input. This is the option that I
want to do something with and here is the function. And what do I want to do with this? We'll say, option dot on click,
we're going to run some function. And for now, let me just say,
alert you clicked something. Just say, all right, you
clicked on an option, let's just make sure this code works. I'm trying to say, for each of these
options, when you click on them, something should happen and let's
make sure something happens. So refresh. If I click on a button, great. I get an alert. It says, you clicked on something. Let's try another button. I click on it, great. It says, you clicked on something. But now what I really care about
is what is it that I clicked on. And in order to do that,
if you have a button-- and you'd only know this by playing
around a JavaScript little bit more. But there is a property called
text content that refers to what does the button actually say. So if I say, option dot text
content, now let's play this game. What is Athena's favorite animal? If I click on otters, I get an
alert and that alert says otters. That is the button that I clicked on. Questions about what we've done so far? So this is the part where we're
actually going to set you free. Your project is to complete
working on this quiz application. I'll post the distribution
code that we just worked on together in
just a moment, in case you want to use that as a starting point. But here are the things to think about. We've gotten to the point where
when you click on a button, we know what button you've clicked on. So if the answer is guessed
and the answer is correct, you should increment the
score and ideally display that as such on the page. And when you answer a question, we
should move on to the next question. As soon as the answer is guessed,
whether it's right or wrong, you should update the score and then
show us what the next question is. And then once all the
questions are done, we should ideally show
a game over screen that might just say, quiz
complete, for instance, and also shows you your final score. You got two out of three
questions correct or whatnot. Questions about what the project is? We'll have about an
hour to work on this. We'll go until about 12:30, at
which point we'll break for lunch and reconvene back here at 2:00
PM for more look at JavaScript, more look at animation
in particular and how to create animations
using CSS in JavaScript to make our pages even more interactive. But this is going to be the goal for
the morning project, at least for now. Questions about anything? Yeah? AUDIENCE: Will you go back to the post? BRIAN YU: I will post
the distribution code on the website in just
a couple of minutes as soon as we break out into groups. All right. In that case, why don't I have
this group on the right-hand side go to room 136, and if I could have
the front half of the middle group go to room 212 and everyone
else will stay here. And we'll work until 12:30 and we'll
reconvene back here at 2:00 PM.
