technicka.netfrom the cerebrum of Becky Gessler

JavaScript asking the user

These are basic annoying scripts that show three built-in JavaScript functions: a confirm, a prompt, and a switch case. If you want to see an alert, check out the pwnd script. Confirm and prompt display a dialog box to the user asking them a question, while switch case checks to see if a parameter is matched with any of the given cases you supply.

Confirm

Here we are asking a user a question (or confirming their answer…) and then acting on if they said yes or cancel. The only interesting thing to note here is that the function is loaded with an event handler “window.onload” so that way the “innerHTML” command will work. In order for “innerHTML” to work, the page needs to be loaded so JavaScript can locate the element with ID “pwn.”

{syntaxhighlighter brush:html;}

confirm

window.onload = pwn; // This needs to be called when page has LOADED in order to find the item with ID "pwn" to use with innerHTML

function pwn() {
if (confirm("Are you sure this is right? If you hit cancel, it means 'no'")) { // The dialog box gives you a "ok" or "cancel"
alert("Bad answer");
document.getElementById("pwn").innerHTML = "you agreed: don't fight true love";
}

else {
alert("you made the right choice");
document.getElementById("pwn").innerHTML = "you cancelled: We weren't meant to be we just happened";
}
}

{/syntaxhighlighter}

Prompt

Here, we are asking the user a question and giving them the chance to type in their reply. The reply is stored as a variable “ans”, and then spit back out to them in an alert. The prompt is set up with an “if… else” so we can alert the user if they hit cancel or left the box blank.

The parameters of the prompt are (“the question you are asking”, “the default answer that will be already typed in”)

{syntaxhighlighter brush:html;}

prompt

var ans = prompt("Are you sure?",""); // When a response is given, ans = true ... when no response, ans = false

if (ans) { // If ans exists... (if ans is true)
alert("You SAID " + ans);
switchCase(); // Running the switchCase function below
}

else {
alert("You didn't answer");
switchCase(); // Running the switchCase function belo
}

function switchCase() {
switch(ans) { // The switch case will try and match the value of variable "ans" (what the user inputted)
case "yes":
document.write("switch case matched a 'yes'");
break;
case "no":
document.write("switch case matched a 'no'");
break;
default:
document.write("switch case didn't match your answer");
break;
}
}

{/syntaxhighlighter}

Switch Case

The switch case takes a parameter and cycles through possible cases that could correspond to the parameter. This script uses the “onclick” event handler in conjunction with grabbing element IDs in a function called grabId. When element with id “becky” is clicked, function “switchIt” will run.

The switchIt function refers to the switch case. The parameter inside the switch case is “this.id” which refers to the ID we just grabbed before in the grabId function. So now “this.id” is equal to “becky”. Lucky for us, there is a case for “becky” and that will then alert the user. The “break;” tells the browser to stop running the code and get out of the switch case function.

{syntaxhighlighter brush:html;}

switch case

window.onload = grabId;

/* We are using event handler "onclick" for these elements
and telling them to execute function switchIt when
they are clicked */

function grabId() {
document.getElementById("becky").onclick = switchIt;
document.getElementById("anastasia").onclick = switchIt;
document.getElementById("jack").onclick = switchIt;
}

function switchIt() {
switch(this.id) { // The "this" refers to the ID grabbed by the grabId function
case "becky": // If the ID grabbed is "becky" then...
alert("you chose becky");
break; // This breaks us out of the switch code block. So the code below won't be executed
case "anastasia":
alert("You chose anastasia");
break;
default: //If the ID grabbed doesn't mean any of the cases, then do this
alert("you didn't meet criteria"); //We don't have a case for ID "jack", this fires for his button
break;
}
}

{/syntaxhighlighter}

Filed Under

Related Content

I pwn

Oh hai, my name is Becky and this is my personal website about tech and sometimes my life. I work as a user experience designer for UniversityNow, and I live in San Francisco but I bleed New York.