Home arrow JavaScript arrow Page 4 - Javascript Pop-up Boxes
JAVASCRIPT

Javascript Pop-up Boxes


In our last article I filled your puny brain with the knowledge of JavaScript operators. In this article we are going to learn about pop-up boxes. That's right, those sometimes annoying, sometimes helpful things that leap out at the user and ask them to do stuff will be covered here.

Author Info:
By: James Payne
Rating: 4 stars4 stars4 stars4 stars4 stars / 16
November 07, 2007
TABLE OF CONTENTS:
  1. · Javascript Pop-up Boxes
  2. · Pop-up Boxes
  3. · Confirm Box
  4. · Prompting the Prompt Box

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Javascript Pop-up Boxes - Prompting the Prompt Box
(Page 4 of 4 )

Next we are going to create a program to insult people using a Prompt Box. The prompt box asks for a value. If the user inputs one and clicks OK, it will return the value to our program; if they click CANCEL, it will return a null value.


<html>

<head>

<script type="text/javascript">

function disp_prompt()

{

var name=prompt("Enter Your Name for a Prediction","Some Loser")

if (name!=null && name!="")

{

document.write("Hello " + name + "! I predict you will not have a date this weekend!")

}

}

</script>

</head>

<body>


<input type="button" onclick="disp_prompt()" value="Click for a Friendly Greeting" />


</body>

</html>

Again, we have decided to allow the user to push a button to trigger our pop-up. Remember how we were lured into a false sense of security with those Jack in the Boxes? Well this is the digital version. We even give the text box a nice caption so people think everything will be okay: Click for a Friendly Greeting

When the user clicks the button it asks the user to Enter a Name for A Prediction. It displayed a default value of Some Loser (this is where things begin to go downhill for the user muahahah). Whatever they type into the prompt (and then press OK) it will then say:

  Hello James! I predict you will not have a date this weekend!

Where James is the value they typed in.

If they clicked the CANCEL button, nothing would have occurred.


If we wanted to do the above without using a button for the user to press (ie; we prompted the user when the page loaded) we could do so this way:


<html>

<head>

<script type="text/javascript">


{

var name=prompt("Enter Your Name for a Prediction","Some Loser")

if (name!=null && name!="")

{

document.write("Hello " + name + "! I predict you will not have a date this weekend!")

}

}

</script>

</head>

<body>

</body>

</html>

The same result without the user having to click the button.

Well, that's it for this episode. Have fun scaring small children with your pop-up boxes; I know I will.

And be sure to come back for the next tutorial, where we discuss Functions.

Till then...


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 5 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials