Lesson5.xhtml

if() and while()

Quick Lesson on Prompt, Confirm and More on Input

Remember alert? Well here's something similar to that: prompt - prompt essentially allows you to have an input in the alert window (when you use prompt - you use it to fill a variable).

a = prompt("Say something");

Before we further discuss that - another thing we need to go over is values of inputs. In lesson 2, you learned that you could take an input value, and plug it into a function, now you'll learn how to do the opposite: take a value from a function, and put it into an input. You can assign an input field a value by saying "document.formname.inputname.value="whatever"".

Now: here's a code - we'll show you what it does, and you can easily figure out how

This goes in the head:

function testwithprompt() {
	a = prompt("Say something");
	document.form1.input1.value=a;
}

This goes in the body:

<form id="form1" action="text/javascript">
<input type="text" name="input1">
<input type="submit" onclick="testwithprompt()">
</form>

Ok - so prompt and alert are both called "MessageBox" methods, and here's one more (the last you'll see in this tutorial).

Confirm

Confirm is like alert - except it gives you options, cancel or ok.

Just like prompt, it involves a variable, except not to fill one in. If the user hits ok, the variable will be created as an empty variable, and then you can test if it exist using if (see below), if the user hits cancel, the variable will not be created

Here's how to do that:

function paralesson6(){
la = confirm("If you click OK, a new window will come up");
if(la){ 
	Windownumber1 = window.open("", "mywindow", "height=300, width=400");
	Windownumber1.document.close();
}
else {
alert("You clicked cancel")
}
}

That's your first taste of an if function, but don't get too comfortable. Using if with confirm is slightly different than using if typically. In normal ifs - as you'll see below, you make a comparison, like if (a==1){, but with confirm, you're just testing if the variable exist, if (a){.

If and While

Now that that's through - let's go through if methods. Again, it's easiest to explain this through the code

function imrunningoutoffunctionnames(){
	a=prompt("Pick a number 1-4")
	if (a == "1"){
		document.getElementById('form2').input2.value="You picked one!";
	}
	else if (a == "2"){
		document.getElementById('form2').input2.value="You picked two!";
	}
	else if (a == "3"){
		document.getElementById('form2').input2.value="You picked three!"
	}
	else if (a == "4"){
		document.getElementById('form2').input2.value="You picked four!";
	}
	else{
		document.getElementById('form2').input2.value="Not Valid";
	}
}

Ok - so that's pretty self explanatory - but just in case - here's the standard if format:

if (something == something){
do this;
}

Lab

Ok, now create a program that will prompt the user asking for their favorite (whatever), Then, use confirm to ask "You said _____ was you're favorite (whatever), correct?" - and if the user clicks yes have an alert box saying "I hate that (whatever)", and if the user hits cancel prompt them again.

Hint - if you - IN THE HEAD SECTION - call the function, then the function will start when the page loads (and by call of course I mean, function()).

Try it out

Solution

For Loops

So, say you want to do something multiple times, you would use a for loop. Just to be obnoxious- let's do an alert 5 times.

function obnoxious(){
for (count = 1; count <= 5; count++) {
alert("HI");
}

START LOOP (REPEAT 10 TIMES)

    (stuff I want to do 10 times)

END OF LOOP

How that works: it creates a variable, count (count=1), then says while count is less than or equal to 10 (count <= 10), do whatever is inside the for loop,then add one to count(count++)

Congratulations, you have finished Lesson 5;

next lesson | home page