Writing Text to the Output

<p> JavaScript Examples - 1</p><p>Writing text to the output:</p><p><html> <body></p><p><script type="text/javascript"> document.write("Hello World!") </script></p><p></body> </html></p><p>Writing text with formatted output:</p><p><html> <body></p><p><script type="text/javascript"> document.write("<h1>Hello World!</h1>") </script></p><p></body> </html></p><p>Use of line break</p><p><html> <body></p><p><script language ="javascript"> document.write("Hello World! <br>") document.writeln("Hello World!"); document.writeln("Hello World! <br>"); document.write("Hello World!") </script></p><p></body> </html></p><p>Does not matter with or without a semicolon at the end of the script line.</p><p>Use of Text Box and Submit Button</p><p>1 <html> <head> </head> <body> <script language = "javaScript"> function readName() {</p><p> var first = document.printName.firstName.value var last = document.printName.lastName.value</p><p> document.write ("Your name is: " + first + " " + last)</p><p>} </script> <form name="printName" method="post"> <p> <span><label>Last Name: </label> <input type="text" name="lastName" /></span> </p> <p> <span><label><span><label>First Name: </label> <input type="text" name="firstName" /></span></label></span> </p> <p> <span><label><span></span></label></span> <input onclick="readName()" type="button" value="Submit" /> </p> </form> </body></html></p><p>2 Another way of doing the same page using text boxes and label <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript</title> <script> function DisplayText() {</p><p> var fname = document.getElementById("firstName").value var lname = document.getElementById("lastName").value var name = fname + " " + lname</p><p>//document.write(name) document.getElementById("outPut").innerHTML = name; }</p><p></script> </head> <body></p><p><p style="background-color: #FFCC99"> This is an Example of JavaScript<br /> <br /> First Name: <input id="firstName" name="fName" type="text" /><br /> Last Name: <input id="lastName" name="lNmae" type="text" /><br /> <br /> OutPut: <label id="outPut"></label><br /> <input id="btnSubmit" type="button" value="Submit" onclick="DisplayText()" /><br /> <br /> </p></p><p></body> </html></p><p>3 Text boxes (input and output)</p><p>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. </p><p>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. </p><p>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.</p><p><HTML> <HEAD> </HEAD> <BODY> <FORM ACTION="#" NAME="convert"> Enter Inches <INPUT TYPE=TEXT NAME="ins" ONKEYUP=" document.convert.cms.value = 2.54 * document.convert.ins.value" > <BR><BR> <INPUT TYPE=TEXT NAME="cms" DISABLED> centimetres </FORM> </BODY> </HTML></p><p>4 Text Box, String and new line (output)</p><p>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. </p><p><HTML> <HEAD> <script language = "javaScript"> function calFarenhite() { document.temp.fahr.value = document.temp.cels.value + ' degrees Celsius'+ '\n' + 'is ' + ((document.temp.cels.value * 9 / 5) + 32) + ' degrees Fahrenheit' } </script> </HEAD> <BODY></p><p><FORM ACTION="#" NAME=temp> Enter Celsius: <INPUT TYPE=TEXT NAME="cels" SIZE=3> <BR><BR></p><p><INPUT TYPE=BUTTON VALUE="Convert to Fahrenheit" ONCLICK= "calFarenhite()" > <BR><BR></p><p><TEXTAREA NAME=fahr COLS=30 ROWS=2 DISABLED> </TEXTAREA></p><p></FORM> </BODY> </HTML></p><p>5 6 Adding Two Numbers</p><p><html> <head> <title>Input tutorial</title></p><p><script language="javascript"> function addNumbers() { var val1 = parseInt(document.getElementById("value1").value); var val2 = parseInt(document.getElementById("value2").value); var ansD = document.getElementById("answer"); ansD.value = val1 + val2; } </script> </head></p><p><body> value1 = <input type="text" id="value1" name="value1" value="1"/> value2 = <input type="text" id="value2" name="value2" value="2"/> <input type="button" name="Sumbit" value="Click here" onclick="javascript:addNumbers()"/> Answer = <input type="text" id="answer" name="answer" value=""/> </body> </html></p><p>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 </p><p>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. </p><p>In the following, we show two different of writing JavaScript codes: (i) directly on the HTML element and (ii) calling functions.</p><p><HTML> <HTML> <HEAD> <HEAD><title>Multiplication of two </HEAD> numbers</title> <BODY> <FORM ACTION="#" NAME=times> <script language = "javaScript"> <SELECT NAME="num1" ONCHANGE="document.times.answer.value function calcOne() { = document.times.num1.selectedIndex * document.times.num2.selectedIndex"> document.timesForm.answer.value <OPTION>zero</OPTION> = document.timesForm.num1.selectedIndex * <OPTION>one</OPTION> document.timesForm.num2.selectedIndex; <OPTION SELECTED>two</OPTION> <OPTION>three</OPTION> } <OPTION>four</OPTION> <OPTION>five</OPTION> function calcTwo() { </SELECT> multiplied by document.timesForm.answer.value <SELECT NAME="num2" = document.timesForm.num1.selectedIndex * ONCHANGE="document.times.answer.value document.timesForm.num2.selectedIndex; = document.times.num1.selectedIndex * document.times.num2.selectedIndex"> } <OPTION>zero</OPTION> </script> <OPTION>one</OPTION> <OPTION SELECTED>two</OPTION> </HEAD> <OPTION>three</OPTION> <OPTION>four</OPTION> <BODY> <OPTION>five</OPTION> <FORM ACTION="#" NAME=timesForm> </SELECT> <SELECT NAME="num1" </p><p>8 = ONCHANGE="calcOne() "> <INPUT TYPE=TEXT NAME="answer" <OPTION>zero</OPTION> SIZE=2 DISABLED> <OPTION>one</OPTION> </FORM> <OPTION SELECTED>two</OPTION> </BODY> <OPTION>three</OPTION> </HTML> <OPTION>four</OPTION> <OPTION>five</OPTION> </SELECT></p><p> multiplied by <SELECT NAME="num2" ONCHANGE="calcTwo()"> <OPTION>zero</OPTION> <OPTION>one</OPTION> <OPTION SELECTED>two</OPTION> <OPTION>three</OPTION> <OPTION>four</OPTION> <OPTION>five</OPTION> </SELECT> = <INPUT TYPE=TEXT NAME="answer" SIZE=2 DISABLED> </FORM> </BODY> </HTML></p><p>9 Radio buttons (input)</p><p>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. </p><p>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. </p><p>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. </p><p><HTML> <HEAD> </HEAD> <BODY> <FORM ACTION="#" NAME=date> <INPUT TYPE="radio" NAME="today" CHECKED ONCLICK="document.date.show.value=new Date().getFullYear()">Year <BR> <INPUT TYPE="radio" NAME="today" ONCLICK="document.date.show.value= (new Date().getMonth()) + 1">Month <BR> <INPUT TYPE="radio" NAME="today" ONCLICK="document.date.show.value= new Date().getDate()">Day of month <BR><BR> <INPUT TYPE=TEXT NAME="show" SIZE=4 DISABLED> </SELECT> </FORM> <SCRIPT TYPE="TEXT/JAVASCRIPT"> document.date.show.value=new Date().getFullYear() </SCRIPT> </BODY> </HTML></p><p>10 11</p>

Writing Text to the Output

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support