logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Low Carb: 8:00 PM

Full Schedule
g
g JavaScript / Java Site

BellaOnline's JavaScript / Java Editor

g

JavaScript Basics - User Interaction

Guest Author - Julie L Baumler

Generally, the most compelling reason people have to use JavaScript for web pages is to allow interaction with users. In order to do this, you need to have a way to gather information from the users. There are a number of ways to do this, but forms are the most common because they are the most versatile. Once you have gathered information from the user, you need to have a way to display your reaction back to the user. JavaScript provides a number of ways to do this as well, the simplest and most versatile is probably to use the HTML DOM (Document Object Model) innerhtml property.

The following example asks the user for their name and responds back with a personalized greeting. You will notice that you don't see any <script> tags this is because technically this is not a JavaScript example, all of the input, processing and output is done using the HTML DOM. However, if you wanted to do more complex (i.e. interesting) processing of the information you got from the user, you could do so using JavaScript.


<div id="Greeting">
Hi! What's your name?
<form action="user_input.html">
<input name="username"
id="username"
type="text" label="User's Name"
onchange="document.getElementById('Greeting').innerHTML = '<center> <a href=\'http://misspico.wordpress.com\'> <img src=\'http://tinyurl.com/2jqd82\'> </a> <br/> Hello ' + document.getElementById('username').value +'! Nice to meet you! - Pico </center>'"
</form>
(Hit Tab or Enter/Return or click off the field to submit name.)
</div>


You can see this example in action (or download the code) here.

There are a couple of key features here. You will notice that all of the HTML code is within a <div> element and that the id attribute is used on several of the attributes. The HTML DOM includes a method called "getElementByID()" that allows you to identify a specific tag by the value of its id attribute. We will use this twice, once to retrieve the user input from the form, and once to set a new value for the contents of the <div> tag.

Pretty much all of the work of this code sample takes place in the <input> tag, and within the tag, the id and onchange attributes provide for the interactivity. The id attribute is used so that we can find and refer to this tag within the HTML DOM. The onchange attribute is an HTML DOM event, its value is an action to be taken when the event occurs (in this case the contents of the text input box is changed.) document.getElementById('Greeting').innerHTML refers to the contents of the tag with an id of Greeting, in this case the <div> tag that holds the input field and directions. Setting this to a new value changes what is displayed within that tag in the document. We set this to some predetermined HTML (remember tags can be nested in HTML) and the user's name. Of course, we don't know what the user's name is in advance. We do, however, know that it will be in the input box with an id of 'username' this is referred to as document.getElementById('username').value.

This is very simple interactivity, but when you combine this with some JavaScript you can create some very interesting web pages.
This site needs an editor - click to learn more!

Add JavaScript+Basics+%2D+User+Interaction to Twitter Add JavaScript+Basics+%2D+User+Interaction to Facebook Add JavaScript+Basics+%2D+User+Interaction to MySpace Add JavaScript+Basics+%2D+User+Interaction to Del.icio.us Digg JavaScript+Basics+%2D+User+Interaction Add JavaScript+Basics+%2D+User+Interaction to Yahoo My Web Add JavaScript+Basics+%2D+User+Interaction to Google Bookmarks Add JavaScript+Basics+%2D+User+Interaction to Stumbleupon Add JavaScript+Basics+%2D+User+Interaction to Reddit




Getting Ready to Learn JavaScript
JavaScript Resources
JavaScript/Java Newsletter
RSS
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map


For FREE email updates, subscribe to the JavaScript / Java Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Julie L Baumler. All rights reserved.
This content was written by Julie L Baumler. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.

g


g features
Hearing Dog Tool - Adding Randomness

Hearing Dog Training Tool setTimeout()

GCJ - an Independant Java Implementation

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor