Copyright ©2005  Department of Computer & Information Science Introducing Dialogue Windows

Copyright ©2005  Department of Computer & Information Science Goals By the end of this lecture you should … Understand how to use basic JavaScript dialogue windows.Understand how to use basic JavaScript dialogue windows. Understand the importance of the dot operator.Understand the importance of the dot operator.

Copyright ©2005  Department of Computer & Information Science JavaScript Dialogue Windows To help us write simple scripts and also to de-bug our code, JavaScript provides three basic dialogue windows:To help us write simple scripts and also to de-bug our code, JavaScript provides three basic dialogue windows: –window.alert() –window.prompt() –window.confirm()

Copyright ©2005  Department of Computer & Information Science Quick Note on the Dot Operator Did you notice in the previous example that the window object connected to its methods using a period? The period is called a dot operator.Did you notice in the previous example that the window object connected to its methods using a period? The period is called a dot operator. We can use the dot operator to connect objects to their methods and attributes. In the previous example, we connected methods of the window object.We can use the dot operator to connect objects to their methods and attributes. In the previous example, we connected methods of the window object.

Copyright ©2005  Department of Computer & Information Science window.alert() To output text in a dialogue window, we would use the alert method of the window object: window.alert(text to show);To output text in a dialogue window, we would use the alert method of the window object: window.alert(text to show); The method takes one argument, a string value, that it will display. The value can be a literal value or a variable value.The method takes one argument, a string value, that it will display. The value can be a literal value or a variable value.

Copyright ©2005  Department of Computer & Information Science Take the next few minutes to examine the file called introToDialOper_01.html.

Copyright ©2005  Department of Computer & Information Science window.prompt() To ask the user a question and give the user a way to respond, we could use the prompt method of the window object: window.prompt(question,default);To ask the user a question and give the user a way to respond, we could use the prompt method of the window object: window.prompt(question,default); The method takes two arguments: the question to ask the user and a default answer, both string type values. We separate arguments with a comma.The method takes two arguments: the question to ask the user and a default answer, both string type values. We separate arguments with a comma.

Copyright ©2005  Department of Computer & Information Science window.prompt() We capture a user’s answer to a question posed by window.prompt() by assigning the method to a variable: strAnswer = window.prompt(…);We capture a user’s answer to a question posed by window.prompt() by assigning the method to a variable: strAnswer = window.prompt(…); The resulting value is always a string data- type.The resulting value is always a string data- type.

Copyright ©2005  Department of Computer & Information Science Take the next few minutes to examine the file called introToDialOper_02.html.

Copyright ©2005  Department of Computer & Information Science window.confirm() We can also get user input by using the confirm method of the window object: window.confirm(question);We can also get user input by using the confirm method of the window object: window.confirm(question); The method takes one arguments: the question to ask the user. Just like window.prompt(), we can assign its return value to a variable. The data type, however, is boolean, not string!The method takes one arguments: the question to ask the user. Just like window.prompt(), we can assign its return value to a variable. The data type, however, is boolean, not string!

Copyright ©2005  Department of Computer & Information Science window.confirm() When we use window.confirm(), the user will see a dialogue box with a question and two buttons: an OK button and a Cancel button.When we use window.confirm(), the user will see a dialogue box with a question and two buttons: an OK button and a Cancel button. If the user clicks OK, the return value is true.If the user clicks OK, the return value is true. If the user clicks Cancel, the return value is false.If the user clicks Cancel, the return value is false.

Copyright ©2005  Department of Computer & Information Science Take the next few minutes to examine the file called introToDialOper_03.html.

Copyright ©2005  Department of Computer & Information Science Let's try one … Develop an application that will:Develop an application that will: –Ask the user for their name –Ask the user for TWO numbers –Add those numbers –Double the sum –Output a custom message, including their name and the result (example follows): "Nathan, your answer is 12."

Copyright ©2005  Department of Computer & Information Science What are the inputs? What are the processes? What are the outputs?

Copyright ©2005  Department of Computer & Information Science Use the JavaScript template (javaScriptTemplate.html) to create your solution.

Copyright ©2005  Department of Computer & Information Science Summary We can use window.alert() to display basic output.We can use window.alert() to display basic output. We can use window.prompt() to get basic input information from a user.We can use window.prompt() to get basic input information from a user. We can use window.confirm() to limit user input to a true/false value.We can use window.confirm() to limit user input to a true/false value.