Hi everybody. Today, let's start coding a little bit to see some of things we can do with JavaScript. Maybe, using HTML 5 or CSS 3, you've added what we call a little bit of interactivity to your page. There's the details tag if you're using HTML. There's the hover property or pseudo class if you're using CSS 3 and you were able to make little things change in your page by reacting to what the user was doing. But typically that's not really what we call interactivity when we're talking about true web design because these new elements and the pseudo classes can only go so far. They tend to be temporary changes. So, what can JavaScript do that HTML and CSS can't do? Well, the one that I'm gonna talk about today is that they can read and write HTML elements. Now that's not the only thing they can do. We're gonna be talking about different things like reacting to events and validating data and different things like that. But today, we're really gonna focus on output. Whenever you learn a new programming language, one of the first things you want to do is find out how can I make things happen. How can I have things print out to the screen or generate some sort of output. Well, JavaScript doesn't have a built-in print function. So instead, you have four or five different ways where you can generate different things. So, data is typically displayed via alerts, prompts, document.write, innertHTML or reading information directly to the console. So let's talk about each one of these. You've all seen alert JavaScript alert boxes. Because many times, especially back maybe 10, 15 years ago, when you went to a page, people loved to have these little boxes pop up and say hey, welcome. Doing things like that. So in JavaScript it's pretty easy. You can just use alert and then inside you put my message here. So a few things just to point out right from the beginning. Alert is a keyword. So in your editor it should change some sort of special color. Inside the parentheses, and you need the parentheses, both beginning parentheses and end parentheses, is that you're gonna have some sort of string and it should be inside quotes. It can be inside single quotes or double quotes. And then, the last thing is, to end in a semicolon. So if you were to put this code right here inside your HTML, you can go ahead and generate some output. So let me show you an example. So what I've done over here is I've created the HTML that I would need to generate an alert box. So I've got my body tag, now this is new I have what we call is a script tag. The script tag tells the browser, oh wait, don't just print this out, I'm actually going to give you some JavaScript that I want you to run. And in this case, I have my code alert("Hello World"). So if I were to run this, and I'm gonna go ahead and refresh it. You can see I get my little pop up box. Now, if you're running this along with me at home, and you're not using Chrome, the box is going to look different. For some of you it's gonna have the little Safari symbol, or the Edge, or Firefox. That's okay, the important thing is that somewhere in here it says hello world. Now you might be click on the prevent this page from creating additional dialogues button. Don't do it. Because in this class we're going to be playing with alert a lot because it's a nice way for you to know if your code's working or not. So again, this is just a quick and simple way for you to generate output using the alert. The next way we can generate output is using prompt. So prompt is very similar to alert, but it's slightly different in that it wants you to do more than just click OK or Cancel. It wants you to generate some sort of input to put in there. So as you can see, the alert and the prompt look very similar. They've both got the key word, the parentheses, the semicolon and the string, but the way they act is very different. In this case when you run it, it's actually waiting for you to type something in. So I can put in Colleen van Lent and hit OK. Now, don't get too excited. We didn't do anything with the stuff I put in. But, again, I'm just giving you some of the different options. So you have alert and you have prompt and both of them generate some sort of box where you can display information, but nothing is actually showing up on the page. So, let's switch to the general ways in which you can generate output to the screen. One way, if you want something to be what we call permanent, to not just disappear once you hit okay, is to use what we call document.write. So again, I'm hoping that you're picking up on these ideas that we're using terms like document, and element, and different things like that. The way that document.write works is it goes through and it says, we want you to write something directly to the page. We want it to become part of the dom, we want it to become part of the page permanently. So in this case I can't just use write. That won't work. Alert worked by itself, prompt worked by itself, but here you need to have document.write(). Same thing, hopefully you're seeing the pattern. So let's see when we add this. Here you can see that inside the script tag, again, I have the document.write(). But instead of things popping up or asking us for input, it goes ahead and just writes it directly into the screen. Now I'm gonna change something right here. Because I put h1 inside the quotes. If I get rid of that you can see this still works, but instead of being an h1 heading, its just regular old text. So document.rate is a way for you to generate output. But we need to realize that it is probably not the best way to do it. Because sometimes if you're misusing it you can overwrite other things that exist. So document.write is something you just want to use when you're beginning and you don't know some of the more complex methods. So one of the more complex methods you can use is called innerHTML. And with innerHTML, you combine this with other functions that return elements. So, you can't just say innerHTML or element.innerHTML. You have to say, all right, what part of the page do I wanna change? Oh, I wanna change that particular paragraph, all right. But how do I grab that particular paragraph? Or remember we have these different APIs that can go and get things for us. So in this case, I have element which is hopefully we'll find something using the API that in your HTML equals time to learn JavaScript. So I wanted you to recognize something right away. When we use document dot write alert and prompt we had parenthesis around the side, here. We don't have that anymore. Instead we use an equal and we just have it ending with a semicolon. So no parenthesis when you're using inner.HTML. How do you figure that out when you're coding? You don't. You just keep coding and practicing and after a while, it becomes second nature to you, all right? So when I talk about this kind of generic element, I didn't make it a color that's something that you need to grab using the API. So let me give you an example of something we can do using innerHTML. So let's go ahead and look at this, what I've done is I made an h1 heading and I've given it the id of test. I also have a paragraph element a little bit further down that just says, hey what happens if I'd messed with this code? All right, so I want you to look as closely as you can. You might be on a small screen. You might not be able to see it. Is that in my h1 heading, I actually have the words tester, but if you look at the web page, it says Hello World. Well how did I do that? It's pretty simple, actually. Cuz you can go in, and I can say document.getElementById. Test. It's going to grab, it's going to look through the page and go where, where can I find something that says ID equals test. Oh there it is. All right, now I wanna change whatever used to be in there and replace it with the words, Hello World. This is kind of what happens when this is a weird example, but all early examples are weird examples, right? Because you just want to get your feet wet. But I did want you to look at what happens if I do this. Back from your days of learning CSS, you might remember that in general, you can kind of expect to see multiple classes. But you're making this contract or rule that says, you really should see each ID only once. So JavaScript is expecting you to keep that rule. When you do something get element by ID, JavaScript thinks there's only one out there. So, I'm gonna stop as soon as I find that one. As you can see down here, it changed the first one it found. It didn't change the second one it found, okay? All right. So, again, let's go play with the last output method I have for you today. So document.write and enter HTML. Write directly into the browser screen. What we have in this last option is something that doesn't write to the browser screen, but it does write to the browser console. So console dot log takes a message and says you know what, I want to store this information some place. But I want it to be something that not necessarily pops up and everyone can see. So the console's a place to see what's going on in your program during execution. If you haven't used the console before, you might not realize that it's even there. But I'm hoping you have when you were doing your CSS. But let's take a look at this example. So in my HTML up here, you can see that I have console.log Hello World. Nothing too exciting going on here. But if you look at the actual browser, hm, it's not there. It doesn't show up like it did with document.ray. So where did it go? Well, it's actually in the Console of your browser. So I'm gonna go down here. I did inspect element, and I checked the Console. Oh, you can see Hello World showed up here. What happens if I change the code to Hello World Too, and then I. You're kind of sending yourself these little secret messages that can help you debug your code. You can log things, you can leave little notes for yourself, you can do debugging tests. You can even log the things that other people have been writing in. And so this is a really handy tool if you wanna do development but not let everyone see exactly what you are doing. We're gonna come back to this example in just a second, but first I wanna talk to you about why you should be utilizing the console by now, if you haven't. The console does more than just take these print statements. It also provides debugging information for JavaScript, HTML, and CSS. By going in and looking at it, you're gonna be able to help yourself become a much better programmer. So let's take a look at just doing some debugging with the JavaScript. I'm gonna go in here and I'm gonna accidentally forget to put in my first quotes, all right. But if we didn't know that there's anything going on or that anything is supposed to show up. You might not realize that there's a typo but inside the console, it'll show you pretty much along the way add, hey, anything in red means we found an error. So red lines usually means either you have a JavaScript error or you linked to a file that didn't exist. So when I put it back in, you can go right there. I really wanna stress this to you right now. I need you to stop and make sure that you know how to access the console on your machine. One of the things that really helps other people help you is when you can pinpoint where exactly your code is going wrong. You might not know what's going wrong, but your saying somewhere in this line of code I'm getting an error. This kind of ability to help yourself debug is going to be critical to going on and advancing in this course. So if I'm gonna ask you debug, I should probably tell you how you can debug. If you're using Safari, you're going to need to go to Preferences > Advanced. Once you go there, you should be able to check the Show development menu in menu box. And that will show you some of the different JavaScript errors and tools that you have available. In Google Chrome, you go to Developer, and then JavaScript Console. If you've been coding with me in the past, you know that my shortcut is always to right click, inspect element, and boom, there it is for you. If you're using Firefox, you wanna go to Tools and then Console. Firefox is, believed by many to be the best browser to use when you're doing debugging for Javascript. If you're using Edge or Internet Explorer, typically hitting F12 will bring up the different JavaScript and development tools that you can use to improve your page. All right, so let's review. So right now we're doing really simple things, and I understand that. It's not that exciting to just print things out to the screen or have little pop up boxes coming up. But we need to do these small steps to help you gain the confidence to go on and write more complex bits of code. So as you learn more, the power that you're going to have to manipulate the dom is really gonna get quite impressive. But for now, just make the small mistakes, learn how to debug the small mistakes, and then that way you'll be able to build your confidence slowly. Good luck.
