programming basics lec 2-3

2
Computer programs are all about input and output. From the earliest programs where you might feed a stack of punch cards in one end to get a printout on the other end, where these days the input might be click the button, or move the mouse or even wave your hand in the air, and the output could be change what's displayed on the screen, or cause the game controller to vibrate. The different languages favor different kinds of input and output. JavaScript is all about the webpage. It doesn't read files on your hard drive. It doesn't talk directly to your printer. It's interested primarily in what's on the webpage and what you might interact with on the webpage. Now we've already got some output going on. We've got an alert box. That might not be impressive output, but it is output. It's our computer program causing something to happen on the screen, so let's get something into our program.So I have a folder with two files in it. It's the same setup as last time. In fact, it's an identical container.html file that is only there to point to script.js, a JavaScript file which I'm going to Open up in my text editor and as you can see is currently empty. I'm going to add two lines here, two JavaScript statements, and then explainwhat they are doing. So the first line, var name = prompt, all of this written in lowercase, open parentheses, open double quotes, the phrase, What is your name, question mark, close double quote, close parentheses, semicolon, and then on the next line alert and inside the parentheses we have "Hello, " then a plus sign, and then the word name and of course we're closing both of these lines with the semicolon. I'm going to just save this JavaScript, and because the container.html page is already pointing to it if I double- click that HTML page to open up in the web browser we should immediately load in and run that JavaScript, and indeedwhat we get is a prompt. Depending on the browser this may look a little different, but it should be asking, What is your name?, and giving a place to type in and I'll say it's Simon. Click OK and then I get the message Hello, Simon. Now because I'm using a fairly recent version of Firefox it's also detecting that this page is popped up two alert boxes and it's asking me, do I want to prevent this page from doing that? Well, no I don't. That's fine. It's all I was expecting to do right now. Again, very simple code, but what's it actually doing here? Well we have two JavaScript statements, but the first statement is doing two things. It's using the JavaScript prompt command to ask for a name and then it's going to store that name in a variable. This is a container, a bucket that can hold some data, and that's simply so we can use it on the next line. And if we don't tell our program some way of remembering it we won't have anyway to use it on the next line.

Upload: venkata-vikas

Post on 20-Jul-2016

212 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Programming Basics Lec 2-3

Computer programs are all about input and output. From the earliest programs where you might feed a stack of punch cards in one end to get a printout on the other end, where these days the input might be click the button, or move the mouse or even wave your hand in the air, and the output could be change what's displayed on the screen, or cause the game controller to vibrate. The different languages favor different kinds of input and output. JavaScript is all about the webpage. It doesn't read files on your hard drive.

It doesn't talk directly to your printer. It's interested primarily in what's on the webpage and what you might interact with on the webpage. Now we've already got some output going on. We've got an alert box. That might not be impressive output, but it is output. It's our computer program causing something to happen on the screen, so let's get something into our program.So I have a folder with two files in it. It's the same setup as last time. In fact, it's an identical container.html file that is only there to point to script.js, a JavaScript file which I'm going to Open up in my text editor and as you can see is currently empty.

I'm going to add two lines here, two JavaScript statements, and then explainwhat they are doing. So the first line, var name = prompt, all of this written in lowercase, open parentheses, open double quotes, the phrase, What is your name, question mark, close double quote, close parentheses, semicolon, and then on the next line alert and inside the parentheses we have "Hello, " then a plus sign, and then the word name and of course we're closing both of these lines with the semicolon.

I'm going to just save this JavaScript, and because the container.html page is already pointing to it if I double- click that HTML page to open up in the web browser we should immediately load in and run that JavaScript, and indeedwhat we get is a prompt. Depending on the browser this may look a little different, but it should be asking, What is your name?, and giving a place to type in and I'll say it's Simon. Click OK and then I get the message Hello, Simon. Now because I'm using a fairly recent version of Firefox it's also detecting that this page is popped up two alert boxes and it's asking me, do I want to prevent this page from doing that? Well, no I don't.That's fine. It's all I was expecting to do right now. Again, very simple code, but what's it actually doing here? Well we have two JavaScript statements, but the first statement is doing two things. It's using the JavaScript prompt command to ask for a name and then it's going to store that name in a variable. This is a container, a bucket that can hold some data, and that's simply so we can use it on the next line. And if we don't tell our program some way of remembering it we won't have anyway to use it on the next line.

Now usually our code will just start at line 1 and move through all the different statements as quickly as possible, but what's actually happening is when we call prompt in JavaScript, it's not just What is your name? It's What is your name? and wait for our response. So we've actually paused at this line while somebody types in an answer into this dialog box that's popped open. And only when somebody type something in and clicks OK, do we actually come back. What's happening is the value that they typed will be stored in a variable called name.Now whether that was five seconds later or five minutes later, we have paused to that point and then we run the next line of code. And that's going to combine the Hello, space, with whatever they typed in using this plus sign to combine these two parts of the message, and then pop-up another dialog box.If I open up this webpage to load it again, there is nothing to actually ensurethat somebody types a name here. I could type in a number and click OK and it will just combine that message.

Page 2: Programming Basics Lec 2-3

It could have been a number. It could have been a sentence. It could have been nothing at all. If I want to run that code again, I could either close and reopen it or I could click the button in the browser to reload the current page and we'll effectively run the script again. I could even leave that completely blank and click OK. Now here it doesn't matter, but if our program, if our code, was expecting something very specific to work with like a birth date or an amount or an email address, the wrong kind of input could cause it to crash.Because again programs are all about input and output. There is an old phrase called G-I-G-O, GIGO for Garbage In, Garbage Out, whatever you're asking for, and whatever you get better make sense. Later on we'll see how to do some checking on our input.