Well, let's say you wanted to get somebody's name before they saw the page, and then write their name on your page right before their very eyes.......Well, you can do this using a javascript prompt. Here's the command:
prompt('Your Question', ' ');
This will bring up a window asking the question of your choosing, with a space for the viewer to answer. The second set of quotes allows you to enter a default answer. If you leave it blank, the viewer will just see an empty box ready to be typed in. This is usually done before the page loads, so that you can write the answer they give into your page. To view an example, click the link below. You will get a prompt for your name, and your name will be written on the page!
Now, for the script that made this work. Note how the prompt and if/else statements are in the HEAD section, while the actual writing of the name occurs in the BODY section.
| <SCRIPT language="JavaScript"> <!--hide var yourname= prompt('Please enter your name, so you can get a special greeting', ' '); if ( (yourname==' ') || (yourname==null) ) { yourname="Dude"; } //--> </SCRIPT> </HEAD> <BODY> <SCRIPT language="JavaScript"> <!--hide document.write("<CENTER><H1>Hello, " + yourname + " ! Welcome to My Page! </H1></CENTER>"); //--> </SCRIPT> </BODY> |
The first thing that happens is that the variable yourname is assigned the value it receives from the user from the prompt. So the variable yourname will be a string of characters that makes up the person's name. The if/else statement assigns yourname a value of "Dude" if nothing is entered in the prompt by the user. It checks for " " and for null, and both are pretty much nothing. Now, in the BODY section, you again use the SCRIPT tags to set off the JavaScript from any HTML around it. You will also see a new command called document.write(" "); . This is what allows the JavaScript variable yourname to be written onto the HTML document. You are writing two strings plus your variable, yourname. The variable yourname is not in quotes because it is a value and not itself a string (it's value is a string). That's why we have the plus signs around it....It makes the browser write the first string plus the variable plus the second string. Now, notice the HTML tags are inside the strings! Since this is a javascript, the only way to write the HTML tags back to the page is by including them inside the quotes as part of the string. Also, you probably noticed the way the closing tags were written differently. (</H1>). The backslash is there as the javascript escape character. It allows you to write the forward slash without it being mistaken for a division sign! (Remeber / is division in JavaScript). Thus using the backslash followed by a forward slash ultimately gives us.......our single forward slash. Pretty nifty trick, isn't it?
Well, that does it for now. Let's go check out the next section, JavaScript Passwords.
Related Articles
- JavaScript Password ProtectionOK, I finally got around to writing the javascript password protection tutorial. You will see the example script here is pretty straightforward, but it is also pretty easy to get around. Ill tell you why and give you links to more secure scripts later in this tutorial.
- The Basics- JavaScript TutorialTo get started with JavaScript, you will want to be able to see the tag that will set a script apart from the HTML. The tags used to begin and end a script are the tags. The opening tag should appear like this
- Beginner JS Pt. 2This tutorial is a well laid out recipe for basic Javascript. The article is brief and is limited to three topics: Calling the Script, Writing Comments, and Doing Stuff (Basic). Illustrations make it easy.
- 4 Powerful Features of Javascript Programming LanguageIn the community of web developers and surfers, Javascript is highly popular as client side scripting language for web browsers. Lets take a look at some of the features of this language.
- Introduction to Javascript for NewbiesJavascript is a client-side programming language whose processing engine is embedded in web browsers like Internet Explorer, Netscape, Firefox, etc. This enables the processing engine to read and interpret web pages that contain the javascript code when browsing
- Form ValidationLearn the different ways of validating your form with Javascript.
- Declaring Variables and FunctionsNow its time to get into some really fun stuff. Yes, variables and functions. Dont worry, its not as bad as it sounds.....lets start with declaring variables. Youll want to keep all of your variables in the HEAD section for now. Place the declarations between the SCRIPT tags inside the
- Statusbar MessageThis is a quick, and quite simple tutorial. Now its not html, it uses Javascript. What it does is lets you customize what it says in the status bar usually at the bottom left of your browser. Right now in your browser it should say Infinite Designs.org ..... Heres how to make it do that...
- Stop Right Mouse ClicksStop people from getting at your source by right clicking on your web page. Sounds good, but doesnt protect you totally, you can never fully protect your work, but it will make it harder.
- Changing the Background ColourYet another snippet of JavaScript code, folks. This time well be using JavaScript to change a background color with a MouseOver and a mouse click.