JavaScript Pop Quiz & Project Setup

[00:00:00]
>> Time for everybody's favorite thing in the world, pop quiz. Ha-ha-ha-ha. All right, let's put some of the JavaScript knowledge we've got so far to the test with a little quiz game. All right, so we're gonna play this together. [COUGH] Question or statements, let's say, JavaScript was invented in 1995, true or false?

[00:00:20]
>> True.
>> True, yes, this was a easter egg hidden in that JavaScript object. And as I mentioned, Brendan Eich created JavaScript at Netscape in 1995 in just 10 days. Interesting, all right, next question, strings in JavaScript are editable values. I'm hearing a-
>> False.
>> False, bingo.

[00:00:42]
So in JavaScript, strings are immutable, so they can't be edited, but we can replace them with new and different strings. And there's another but that they are wrapped in kind of these string objects, which don't manipulate the string, but often return a new or different string based on the original string.

[00:01:00]
Great, two for two so far. Excellent work. Okay, how about 1 + 1 === 2? True or false?
>> True.
>> Ha-ha, yes, the plus operator, when it operates on two numbers, which the 1's are here, gives their sum, which is 2. Now, how about '1' + '1' === '2', true or false?

[00:01:26]
>> False.
>> I'm hearing false. Boom, the plus operator, when it operates on strings, it does something different than when it operates on numbers. So on strings, it concatenates them. So we would get?
>> 11.
>> String 11, yeah, string 11. Okay, last question. Typeof[string 'J', string 'S'] === strings 'array'.

[00:01:53]
True or false?
>> False.
>> False, yes, because arrays are type object, exactly. Cuz everything in JavaScript is either a primitive, like strings and numbers and Booleans, or objects. So arrays are just a special kind of object. And with that, y'all have got a perfect score. [APPLAUSE] Great job.

[00:02:14]
So this, what we're looking at here is essentially our project for this part of the course. So we're going to build a kind of simplified little JavaScript quiz game, where we're gonna have a statement about JavaScript. And then two buttons, true or false. And when we make a guess, we're going to have the page react to tell us whether the guess was accurate by turning the buttons green or whether it was inaccurate by turning the button red.

[00:02:46]
And we're gonna display a little explanation of why the answer is what it is. This is our project, our next project moving on from tic-tac-toe. And we are going to be working through this kind of incrementally as we go through a few more concepts in JavaScript that we're gonna need to make all of that happen.

[00:03:06]
And one of the things that we're gonna do is look at writing JavaScript, not in the browser console but in a text file. So we said earlier that we have a few different options for where we write JavaScript. One option that we've been using so far, and we're gonna keep using for testing out small things is the browser's JavaScript console, which we saw we can open by opening the browser's developer tools by inspecting the page.

[00:03:31]
Another option that we have is using a local text file and a text editor. So for example, if let's say you're on macOS, you probably have a built-in text editor called TextEdit. Or there are other text editors that folks like to use for coding, specifically the most popular of which these days is called VS Code, Visual Studio Code.

[00:03:52]
It's put up by Microsoft, and that is kind of a more comprehensive integrated development environment. In this case, it's not gonna matter what text editor you use, but we are gonna get used to writing JavaScript inside of an HTML file so that we don't lose our changes, for example, when we reload the page.

[00:04:12]
So let's do it. So in the project materials, so on Java.dev/JavaScript minus first minus steps, there is a file, JS Quiz starter. So if you go to the JavaScript First Step site, you'll see a JS Quiz starter, and that is gonna be the starting point for our project.

[00:04:33]
Now, there's a finished version as reference, which we'll get to by the end of this section. And then there's also the kind of fancy or multi question version, which is what we just walked through with multiple questions, which you can look at on your own time if you wanna take it to the next level.

[00:04:48]
But for now, we're going to open this starter file, and we'll see we have kind of a blank slate here with just some HTML that is setting up the page for us, so we don't have to worry about that. So what we're going to do is we're gonna save this file locally to our own computer, which on most systems, you can do as a right clicking on the page, And Save Page As or Save File As depending on your browser.

[00:05:20]
And this should give you the option to save it to, let's say, your downloads. And you can save it as whatever you want to save it as, .html, or it might do that for you. So we are going to save that wherever you'd like. You should also have an option in the file menu if the right click doesn't work to save page as, or just Ctrl or Cmd + C usually works.

[00:05:49]
And once we've got that saved, we're gonna open it in our text editor of choice. So whether you're using kind of the built-in TextEdit program, or whether you're using something a little bit more robust like VS code, it's totally fine. So in this case, I'm going to use VS Code just to show it to you.

[00:06:12]
But if you're using some other editor, there's other ones out there too that folks use, like Atom or Sublime was very popular for a while there too. Anything is fine. In this case, we just need something that lets us edit the text file. So I'm going to open this file up, And we should get this, our nice little DOCTYPE html that we know and love.

[00:06:41]
And we can scroll down and see some CSS going on, and keep scrolling down and see what we've got here, okay? Hopefully, everybody is able to download it and get it opened in some kind of text editor. Now, the nice thing about an IDE as opposed to text edit or something like that is that it does fancy stuff for us, like syntax highlighting.

[00:07:04]
And it even has some integrations with stuff like MDN so that I can look up certain, I don't know, CSS properties and whatnot. So there are some nice kind of bonus things when you're working with an editor that's specifically for software development. But you don't need any of that in order for you to write totally valid JavaScript and HTML and so on and so forth.

[00:07:32]
Okay, so where in the HTML doc does JavaScript go? There is a certain element in HTML that we're gonna wrap our JavaScript in in order for the browser to be able to run it in our web page. Does anybody know the tag, the little angle brackets thing that we need to put our JavaScript inside of?

[00:08:04]
>> It's script, right?
>> Script, lovely. Yes, so there is a script element in our page. So if we scroll down, we see a few different elements, for example, we have a style element, where a bunch of CSS goes, it was just pre-written, so we don't have to worry about.

[00:08:22]
We have our body, where a bunch of our content goes, some divs and some buttons and things. And then we have a script here, which sometimes you'll see it just as the plain script tag. And sometimes you might see some other attributes on there, like a type attribute, for example, that even more explicitly calls out this is JavaScript.

[00:08:46]
And so within that, between the opening script tag and the closing script tag, this is where we're gonna write all of our code in JavaScript, okay? Cool, and if you wanna read more about the script element, and what it does, and all of the things it can do, and all of the attributes it can have, you know where to go by this point.

[00:09:04]
So, all right, now, in our example here, we have a whole bunch of this stuff. What is this? There's all these to-do things, and there's all of these slash, slash, slash, slash, slash, slash. So what is all this about? What are all of these things? Anybody know?
>> Comments?

[00:09:22]
>> Comments, yes. So these // lines in JavaScript are what we call code comments. Now, most programming languages have some kind of concept of a way to write text within your program that is not actually part of the program. It's not command to JavaScript, it's sort of like notes we're leaving for whatever human is gonna be reading this code.

[00:09:50]
Now, that human might be, let's say, your co-worker, who has to also work on the same code base that you do. Or it might be you in the future, who has to remember what the crap you were doing when you wrote this code. [LAUGH] So code comments are really useful.

[00:10:06]
They help others and yourself understand what your code is there for, maybe why you wrote it a certain way or what a certain part of the code does. Or sometimes, for example, if you're doing something a little bit weird or that you normally wouldn't do, you can leave a note, a comment to say, this is why I'm doing this weird thing.

[00:10:26]
And it also can be useful to keep track of things that you want to do later with these to-do comments. So in fact, some tooling, some IDEs, and things like that will even parse out the word to-dos and sort of make a little checklist for you. We're not gonna get that fancy, but the idea is that we can use that to kind of map out for ourselves what we've done already and what we still need to do.

[00:10:50]
So comments are super useful, and in JavaScript, they start with two slashes. So that's what all of these slashes are about. These are all comments that are essentially me leaving notes to all of us about what we're gonna do in this JavaScript section of our HTML file, question.

[00:11:11]
>> Why is the CSS all in one page?
>> Why is the CSS all in one page. Well, right now, the reason that all of this stuff is in one page is so that it is easy for us to work with, so that we can download just one file and edit it simply.

[00:11:27]
But in large projects and large complicated websites, you will find that all of this stuff, CSS, JavaScript, even sometimes little chunks of different parts of the HTML will sort of be split up in lots of different places. And then you'll have some kind of scaffolding to sort of bring all that together and load it all into the same page in the browser.

[00:11:52]
But that is kind of more advanced in terms of how large complex JavaScript programs, or just generally large web pages are structured. And how we build websites for putting up on the web. This right now is our time to talk about JavaScript and its features and how it works.

[00:12:14]
And so just to make our lives simple, we've just got one .html file, and it has all of the stuff we need for this particular page. Okay, so in this case, we've got a whole bunch of to-dos here. In fact, it's a little overwhelming, there's a lot of to-dos happening.

[00:12:32]
What we're gonna do in this part of the course is gradually work through these to-dos to fill in the functionality of our quiz page so that we go from this blank thing that has no information and nothing happens to our, Beautiful, interactive, meaningful quiz project.