03 - Creating a Prompt

In this chapter, we're going to create a dialog with a text box that the user can enter stuff into. Windows 93 has a function for this, named $prompt.

First, let's create a prompt using the two required parameters. We'll leave the second one empty, because we don't want it to be pre-filled with text.

$prompt("What's your name?", "");

Let's try this out! As you can see, a prompt window will show, however we aren't doing anything with the text yet. This is where we start to use callbacks.

Using callbacks

Previously we've used text, and an object as the parameters for a function. This time, we're going to use a function that will be ran after you press any button. This is called a callback and it looks like this:

$prompt("What's your name?", "", function(){
    // Code here will be ran after you press any button
    $alert("You pressed something!");
})

However, we want to know if Cancel or OK was pressed, and we want to know the text that was entered. For this, we can add a parameter to the function.

Getting information

We can add a parameter to the function to get more information out of it. The information you'll get depends on what function you're getting it from. ($alert, $prompt, and others send different information)

You can see what you'll get from the documentation page of a function.

Let's see what the documentation page for $prompt says:

Parameter	Type	Description
callback	Function	The callback. Called with two arguments, whether the user has pressed OK and the text they entered.

What this means is that we can find out whether someone pressed OK or not (with the first parameter), and we can see the text they entered (with the second parameter).

This is exactly what we want. Let's try finding out if someone pressed OK:

$prompt("What's your name?", "", function(firstParameter){
    if(firstParameter == true){
        $alert("You pressed OK!");
    }else{
        $alert("You cancelled!");
    }
})

Tip: Is this getting too confusing? Try slowing down a bit and re-reading it a few times. You can also look up a tutorial on callbacks online and learn it from there.

If you run this, and press Cancel, it'll now say that you cancelled. Now all that's left to do, is to get the text that was entered. For this, we can use the second parameter.

$prompt("What's your name?", "", function(firstParameter, secondParameter){
    if(firstParameter == true){
        $alert("Hello, " + secondParameter);
    }else{
        $alert("You cancelled!");
    }
})

And... It works! Nice job! You now know how to make a proper prompt window.

Cleaning up the code

Let's clean up the code a bit to make it easier to understand. We're going to give proper names to both parameters.

Please note that the parameters have to be in the correct order. If you try to use function(text,isOK) then the first parameter will still be whether you pressed OK, regardless of the order.

$prompt("What's your name?", "", function(isOK, text){
    if(isOK){
        $alert("Hello, " + text);
    }else{
        $alert("You cancelled!");
    }
})

Before you continue to the next chapter, try recreating the code above without looking at it. If you can't do it, you should read this chapter again. Make sure you know how to do this. In the next chapter we're going to create your own window, and after that we'll start making a full text editor!

--> [Next Chapter]