1. Predefined Dialog Boxes
Enhancing the Browser with GUI Items
Copyright © Curt Hill

2. What is a Widget?
A widget is a name for any graphical user interface component that the user may interact with
The common ones include:
Buttons
Edit boxes
Menus
Dialog boxes
In this case we are interested in Dialog Boxes
Copyright © Curt Hill

3. Predefined Dialog Boxes
Most systems have one or more predefined dialog boxes
Easy to generate and use
Two common ones in Windows are
MessageBox
A title and message with several different button combinations
InputBox
A title and message with an edit box to return results
Copyright © Curt Hill

4. JavaScript has several
Alert
One button
Gives message to user
Prompt
Gets input string from user
Confirm
Returns true/false from one of two buttons
Copyright © Curt Hill

5. Alert This is a procedure or void function
There is one parameter, which is the message to put on the dialog box
Format: alert(“You have done something foolish”);
If you assign the result of this you get: Undefined
Copyright © Curt Hill

6. Alert Picture
Copyright © Curt Hill

7. Page Processing
The browser does not display text until it encounters it
Thus the previous picture shows that the page is only partially displayed
The last lines of the HTML are not shown until the script is complete
This is true for all these dialogs
Usually these are in event handlers so this is not an issue
Copyright © Curt Hill

8. Prompt This is a string function There are two parameters
The first is the string to display as a message
The second is the default value
The second is optional
Example: v=prompt(“Enter value”,”10”);
Copyright © Curt Hill

9. Prompt Picture
Copyright © Curt Hill

10. Prompt Again The item returned is a string
However, a string that has a numeric form may be added to as if a numeric
Dynamic typing forces a type change
The second parameter is optional
Leave it out and the edit box is blank
In general a default value is better
Gives an example of what is wanted
Copyright © Curt Hill

11. Confirm This is a boolean function There is one parameter
The string to display as a message
There are two buttons
OK – returns true if clicked
Cancel – returns false
Example: y = confirm("Continue?");
Copyright © Curt Hill

12. Confirm Picture
Copyright © Curt Hill

13. Modal Dialog Boxes All three of these dialog boxes are modal
This means that the owning window may not accept input or regain focus until they are gone
A modal dialog box must be responded to before anything else goes on
Copyright © Curt Hill

14. What and why Why would we use these boxes
We will use prompt boxes for input values
Either string or numeric
Alerts for transient output
Things you do not want on page
Good for debugging
Confirm boxes will get boolean input
Copyright © Curt Hill

15. Finally A predefined dialog box is quick and easy to use
You may use Alert to notify the user of something
You may use Prompt to get a single input
String which can be numericized
You may use Confirm to get a Boolean
All three are modal, so they cannot be ignored
Copyright © Curt Hill