This course has been updated! We now recommend you take the Getting Started with JavaScript, v2 course.
Transcript from the "Input & Output" Lesson
[00:00:00]
>> Kyle Simpson: Okay, we've got input and output are the next topics. The most traditional of all outputs in JavaScript is to do an alert statement, and that alert statement, which you can try yourself, is you alert Hello World like that. That alert statement pops up a Pop-Up Box in a JavaScript browser, but it's important to understand that the alert function itself is not actually part of JavaScript.
[00:00:27] It's come from the browser, so alert itself it's not defined by the JavaScript language or anything. It's given to you by the browser, and if you tried to run alert inside of, say, Node, it may very well not have that because there's no such thing as a pop-up box inside of Node.
[00:00:44] So, the much more common way of doing output, that we can work with, as developers, is actually the console.log statement. And console.log logs a message to your console which happens very conveniently to be the thing we're already working in. When I say console.log, I'm actually gonna print that message right back into the console I'm already working in, which is super convenient for us.
[00:01:09] So, from an output perspective, you can be much more sophisticated like putting stuff on a page, putting an input box on a page, and assigning a value to it, and then its output in terms of visual. But, as a developer playing around in the console, console.log is kind of the simplest way to print out some messages.
[00:01:26] So, if I had a var a equals 2, and then I wanted to print out the current value of a, I'd just say console of log and I'd just give it the variable a, no quotes. And it prints out the value too.
>> Kyle Simpson: Another little thing that is kind of annoying about these consoles is that you notice a lot of times you end up getting this undefined being printed in weird places Console environment in your browser is designed to take the very last statement expression in a program and evaluate it for a value and then show you that value.
[00:02:02] So for example, I'll get to the question in a minute. For example, if I say a equals 2, remember that was an assignment expression? The result of an assignment expression is the value that it was signed So the javascript engine just doesn't assign it, but the console does one extra step which is to say whatever my last statement is, give you that value back.
[00:02:25] So that's why it prints a 2 here. And in statements that have no return value, you get something like undefined. Like, for example, a var statement has No return value, and that's why we get undefined. There was a question.
>> Speaker 2: , Yeah, I was just wondering why it's undefined return.
[00:02:44]
>> Kyle Simpson: Hopefully I just answered that. [LAUGH] Because there are statement expressions that have no return value. Okay, so that's our output that we'll use, is consulConsole.log. Now we're not gonna input a lot but just a side note, if you did want to receive input, a lot of times, most of the time, you're writing that by having interactive elements on a form, on a page, where people can type in their name or whatever.
[00:03:11] But again, if you're working purely in a sort of command line-ish environment like this console Another way of receiving input is the prompt statement. So we could say something like, var age = prompt, which is a function. And we can give it a message to ask. So I can say, What is your age?
[00:03:32] That message that I ask is gonna pop up in a pop up, when I hit enter. So we see here, What is your age? And it's given me an input box and asked me to type in something. I just turned 35 a few weeks ago so I will hit 35 and hit OK.
[00:03:49] Now that value goes back and it has been assigned to this variable age. So if I then say console.log(age) I'll get 35. So try that yourself. Try writing a prompt, asking a question, giving it a value, and then testing the return result was assigned.
>> Speaker 2: So the question is is that value a string or a number or what it is at this point?
[00:04:14] What if you wanted to make it a number? We'll probably get to that, right?
>> Kyle Simpson: We do get some value coersions in a little bit. The thing that comes back from prompt is always a string. But it's easy to make it into something else. Yeah.
>> Speaker 3: Do you not need a semicolon after the first statement?
[00:04:29]
>> Kyle Simpson: So that's an example of one where I should have put one for clarity. I was lazy and silly and forgot it. So JavaScript is forgiving in a lot of places. That's what I meant earlier when I said that semicolons can be optional in a lot of places.
[00:04:43] It's forgiving and it tries to put them in if you've forgotten them. I should, in proper coding, have put a semicolon there.
>> Kyle Simpson: Okay, hopefully, even if this is your first experience with JavaScript, hopefully you're starting to get a slightly more Sense of what we're gonna do. We're essentially gonna make some variables that are symbolic containers that we can put values into.
[00:05:11] And we're just gonna figure out different values and assign them back and forth. And maybe along the way we might output some stuff with a console.log. And that essentially is the basics of writing a JavaScript program. You can gets lot's more complex and write JavaScript and manipulate the page and make network requests Ajax and all of that stuff but none of that is necessary to learn the language JavaScript itself, whats necessary here is to understand basic things like how to make a variable how to put a value into it and so forth.
[00:05:41] So hopefully input and output will be ways to explain some of this stuff.