Javascript Button and Alert Message Example:

Sometimes it is best to dig straight in with the coding. Here is an example of a small piece of code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><htmllang="en"><head><title>"THE BUTTON" - Javascript</title><scripttype="text/javascript">x='You have not pressed "THE BUTTON"'functionbomb{alert('O-GOD NOOOOO, WE ARE ALL DOOMED!!');alert('10');alert('9');alert('8');alert('7');alert('6');alert('5');alert('4');alert('3');alert('2');alert('1');alert('!BOOM!');alert('Have a nice day. :-)');x='You pressed "THE BUTTON" and I told you not to!';}</script><styletype="text/css">body{background-color:#00aac5;color:#000}</style></head><body><div><inputtype="button"value="THE BUTTON - Don't Click It"onclick="bomb"><br/><inputtype="button"value="Click Here And See If You Have Clicked ''THE BUTTON''"onclick="alert(x)"></div><p>
This script is dual-licensed under both, <ahref="http://www.defaultlogic.com/learn?s=GNU_Free_Documentation_License">GFDL</a> and <ahref="GNU General Public License">GPL</a>. See <ahref="http://www.defaultlogic.com/books?s=JavaScript">Study Guides</a></p></body></html>

What has this code done? Well when it loads it tells what value the variable 'x' should have. The next code snippet is a function that has been named "bomb". The body of this function fires some alert messages and changes the value of 'x'.

The next part is mainly HTML with a little javascript attached to the INPUT tags. "onclick" property tells its parent what has to be done when clicked. The bomb function is assigned to the first button, the second button just shows an alert message with the value of x.

Javascript if - else Example

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><htmllang="en"><head><title>The Welcome Message - Javascript</title><scripttype="text/javascript">functionwlcmmsg{name=prompt('What is your name?','');correct=confirm('Are you sure your name is '+name+' ?');if(correct==true){alert('Welcome '+name);}else{wlcmmsg;}}</script><styletype="text/css">body{background-color:#00aac5;color:#000}</style></head><bodyonload="wlcmmsg"onunload="alert('Goodbye ' + name)"><p>
This script is dual-licensed under both, <ahref="http://www.defaultlogic.com/learn?s=GNU_Free_Documentation_License">GFDL</a> and <ahref="GNU General Public License">GPL</a>. See <ahref="http://textbook.www.defaultlogic.com/learn?s=Programming:Javascript">Study Guides</a></p></body></html>

Two Scripts

We are going back to the first example. But adding more to the script by also adding a different welcome message. This time a person is made to enter a name. They are also asked if they want to visit the site. Some CSS has also been added to the button.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><htmllang="en"><head><title>"THE BUTTON" - Javascript</title><scripttype="text/javascript">// global variable xx='You have not pressed "THE BUTTON"';functionbomb{alert('O-GOD NOOOOO, WE ARE ALL DOOMED!!');alert('3');alert('2');alert('1');alert('!BOOM!');alert('Have a nice day. :-)');x='You pressed "THE BUTTON" and I told you not too!';}</script><styletype="text/css">body{background-color:#00aac5;color:#000}</style></head><bodyonload="welcome"><scripttype="text/javascript">functionwelcome{varname=prompt('What is your name?','');if(name==""||name=="null"){alert('You have not entered a name');welcome;returnfalse;}varvisit=confirm('Do you want to visit this website?')if(visit==true){alert('Welcome '+name);}else{window.location=history.go(-1);}}</script><div><inputtype="button"value="THE BUTTON - Don't Click It"onclick="bomb"STYLE="color: #ffdd00; background-color: #ff0000"><br><inputtype="button"value="Click Here And See If You Have Clicked ''THE BUTTON''"onclick="alert(x)"></div><p>
This script is dual-licensed under both, <ahref="http://www.defaultlogic.com/learn?s=GNU_Free_Documentation_License">GFDL</a> and <ahref="GNU General Public License">GPL</a>. See <ahref="http://textbook.www.defaultlogic.com/learn?s=Programming:Javascript">Study Guides</a>,
</p></body></html>

Developed Strategies and Processes that Enabled Brands to Grow During an Economic Downturn.

Taught Advanced Internet Marketing Strategies at the graduate level.

Manage research, learning and skills at defaultlogic.com. Create an account using LinkedIn to manage and organize your omni-channel knowledge. defaultlogic.com is like a shopping cart for information -- helping you to save, discuss and share.