Writing Text to the Output

JavaScript Examples - 1

Writing text to the output:

Writing text with formatted output:

Use of line break

Does not matter with or without a semicolon at the end of the script line.

Use of Text Box and Submit Button

Last Name:

First Name:

2 Another way of doing the same page using text boxes and label JavaScript

This is an Example of JavaScript

First Name:
Last Name:

OutPut:

3 Text boxes (input and output)

Text boxes are a simple way to enter data into your program (input), and you can display the results as well (output). In this example, if you type a number into the first box, the computer assumes that it is inches, converts it to centimeters and puts this value in the second box.

This coding introduces names. Names in Javascript can be upper or lower case, but whatever you use for one particular name, you must carry on using the same for that name. JavaScript is fussy about this, unlike HTML. The text boxes are inside a FORM, which can contain ordinary HTML text as well, such as "Enter Inches" or even HTML commands. The ACTION="#" in the FORM can be left out but you're supposed to put it in to conform to standards. The FORM has the NAME convert. This gets used later, inside ONKEYUP. When using names, make sure that you don't use any JavaScript command by mistake. If you used alert, for example, it might confuse the computer as to whether you were using a name or a command. Apart from this, try to think up sensible names. It will make your code easier to understand, and that makes it easier to write and get working.

The INPUT TYPE is now TEXT. The text box also has a name, so that when you are using the value, it knows which text box you're talking about. The second box is the output box. DISABLED means that the user cannot type into it, although the program can put something in it OK. The first box is the input box, so you need to tell the computer what to do if anyone enters anything. This is done with ONKEYUP which means that the computer does something whenever you type a single key into the box (this has the rather strange effect that if you enter more than one digit, it keeps recalculating the figure for each new digit.) The content of ONKEYUP is JavaScript - document refers to this current webpage, convert to the form name, ins or cms to the text box name and value means the contents of the box. The contents of the second box are set to the contents of the first box times 2.54.

4 Text Box, String and new line (output)

This example gives a button as well as the two boxes. You type in the data - a temperature in Celsius - and upon clicking on the button marked "Convert to Fahrenheit". The input and the answer appear in the text area. Instead of just giving the answer as a number a string is formatted. The different parts of the string are joined together with +. One of the pieces of text looks has a '\n'. This puts in an end of line, so the answer appears on two lines.

5 6 Adding Two Numbers

Input tutorial

value1 = value2 = Answer =

7 Select Box One problem with text boxes as input is that the user can type any old rubbish into them. However, if you have a very limited range of valid inputs, then use SELECT

You define a list of options. Here I have used the numbers from zero to five, but they could be words describing options or anything else. In each SELECT, one of the options is SELECTED. This means that this option shows in the box at the start. ONCHANGE contains some JavaScript code which will get executed whenever the user selects a different option. There are a couple of ways of using the option that has been selected. In this code, I use .selectedIndex for each SELECT. The stuff in front tells you which SELECT it is, like the .value used in the examples above. .selectedIndex gives the position in the list. However, computer people tend to count from zero, so the first option in the list has .selectedIndex of zero, the second option is 1, and so on. Since I carefully chose my numbers to have the same value, this means that if you select a number, you get an answer of that multiplied by the other number.

In the following, we show two different of writing JavaScript codes: (i) directly on the HTML element and (ii) calling functions.

Multiplication of two </HEAD> numbers

multiplied by =

9 Radio buttons (input)

Radio buttons are another way of selecting an option. They can be useful if you only have a few options. If there are lots of options, using RADIO would take up too much room on your webpage, and SELECT would be better.

You need an INPUT statement for each option of the RADIO (as opposed to one SELECT statement with several OPTIONS). The INPUT statements are tied together by having the same NAME, in this case "today". The last INPUT statement is not part of the Radio buttons as it has a different NAME, and also its TYPE isn't "radio". Here, I have used some JavaScript commands which will give you today's year, month or day. The JavaScript month starts from zero, rather than 1 as we are used to, so I add 1 to the month to make it easier to understand.

The first INPUT statement has CHECKED in it. This means that the dot will start off in the first button. You could put CHECKED on one of the other buttons instead if you wished. However, putting CHECKED does not action the code to start with. So you will get the first button with a dot in it, but nothing in the output text box. To avoid this, I have added a SCRIPT after the definition of the Radio buttons, which gives a start value to the output. It does mean that you have to code that JavaScript code twice.