Locked lesson.

Upgrade

About this lesson

Learn several ways to output data to the screen with JavaScript.

Exercise files

Download this lesson’s related exercise files.

Output.docx
58.6 KB Output - Solution.docx
58.8 KB

Quick reference

Output

There are several ways to output with JavaScript.

When to use

Whenever you need to output something with JavaScript, use one of these methods.

Instructions

Here are the four main ways to output to the screen:

.innerHTML

document.write();

window.alert();

console.log();

Hints & tips

  • Depending on what you're outputting, you'll use a different method
  • .innerHTML changes existing elements
  • document.write(); writes to a web page
  • window.alert(); creates a pop up message
  • console.log(); outputs to the console
Login to download
  • 00:05 So in this video I wanna talk about output.
  • 00:07 Often when we use JavaScript we want output something to the screen.
  • 00:10 Now there is lots of different ways to do that but
  • 00:12 we're gonna talk about four basic ways and those are inner HTML,
  • 00:17 document.write, window.alert, and console.log.
  • 00:22 So let's just go through these and talk about each one, one at a time here.
  • 00:26 So if we go back to our index page, the first one is inner HTML, and
  • 00:30 we already kinda looked at this.
  • 00:31 Tab all this stuff over here.
  • 00:33 So, basically this is what inner HTML looks like.
  • 00:36 So, we have this ID that we've created and we've named it first.
  • 00:39 We can write stuff into this ID with JavaScript and
  • 00:43 that's what we've done here.
  • 00:44 In the first part we call document.getElementByID, and
  • 00:48 then here is the name of the ID.
  • 00:50 In fact, if we highlight that, this one gets highlighted in our editor.
  • 00:54 So, this is where you name the ID that you want to work with.
  • 00:57 And then you have this .innerhtml, and that is whatever stuff you want to output.
  • 01:02 So, if we save this,
  • 01:03 what this should do is output this line of code right here into this ID.
  • 01:08 So we come back here and hit reload, sure enough, there we go.
  • 01:11 And you can see, here's where the stuff is outputted.
  • 01:14 But it's not actually put there.
  • 01:15 Our code is doing it for us, so.
  • 01:17 The next one is document.write, and go ahead and just delete this, and
  • 01:21 we're gonna go ahead, tab all this over.
  • 01:24 So this is document.write.
  • 01:25 It's just very simple, document.write.
  • 01:27 And then output whatever you have there.
  • 01:30 So if we save this, come back here and hit Reload, boom,
  • 01:33 it pops it right out on the screen.
  • 01:34 So that's a very useful,
  • 01:35 very easy one, now there's something interesting about document.write.
  • 01:38 If you use document.write after the page has loaded, it'll delete.
  • 01:42 It’ll override everything else that’s on the page.
  • 01:45 And we can see this by changing this to a button, we just call it button and
  • 01:49 in here we have the onclick equals the document.write and
  • 01:52 it says what happened here.
  • 01:53 So if we save this, come back here and hit reload, we have this button,
  • 01:56 we have our H1 tag, it’s still there, but if we click the button,
  • 02:00 now we're calling document.write right now, boom everything else gets deleted.
  • 02:05 Everything disappears, so that's just something to keep in mind for
  • 02:07 document.write, it's kinda weird.
  • 02:09 The next way to output things onto a screen is with window.alert.
  • 02:12 And that's just your basic alert box, sort of pop up box.
  • 02:17 So if we save this come back here and hit reload.
  • 02:20 We just get this I love Javascript pop up box.
  • 02:23 You could also use this with a button which is have onclick,
  • 02:27 we're calling window.alert.
  • 02:28 Here's what it's gonna output.
  • 02:30 You save this.
  • 02:31 Come back here, hit reload.
  • 02:32 Boom, we get this pop up box I love Javascript.
  • 02:35 So that's sorta useful.
  • 02:36 We use that from time to time.
  • 02:38 The final way to output put, that we're gonna talk about,
  • 02:40 is something called a console log.
  • 02:43 And we're not gonna use this very often in this course, but
  • 02:45 it actually can be useful.
  • 02:47 And so, here we just,
  • 02:48 we're calling console.log, and here's the message we wanna give it.
  • 02:51 So if we save this, come back here and hit reload, you see nothing has happened.
  • 02:56 But if we right click here and click this inspect.
  • 02:59 This is pulling up some developer tools.
  • 03:01 And here we have an actual console.
  • 03:03 This is a JavaScript console.
  • 03:04 And this is good for debugging code and doing all kinds of kinda neat stuff.
  • 03:08 But if you notice here, here's that message right there, Hi There World!
  • 03:11 Which is right here.
  • 03:12 If we change this to, my name is John Elder, save this, come back here and
  • 03:18 hit reload, we see the message here that it's outputting into the console.
  • 03:23 The console log is My name is John Elder.
  • 03:25 Nothing changes on the page, nothing is output on the page itself,
  • 03:28 it's out putting directly to the console.
  • 03:30 So, those are the four main ways we can output JavaScript.
  • 03:33 In the next video we're going to start to talk about statements and comments.

Lesson notes are only available for subscribers.

Gift this course