VirtualMV/JavaScript/Starting/Strings and numbers
Introduction
Overview
|
By the end of this page you will be able to: |
Working with Strings
String concatenation(js1_06)
A string is most often text, for example "Hello World!". To stick two or more string variables together (concatenate), use the + operator
<html> <body> <script type="text/javascript"> var strFname = "Stephen"; var strMname = "ScriptGuru"; var strLname = "Corich"; document.write(strFname,strMname,strLname); document.write("<h1>Hello " +strFname+ " "+strMname+ " "+strLname+ ". "+ "Nice to meet you</h1>"); </script> <p>This example declares some variables, assigns values to them,</p> <p> and then displays the variables, with an without headings.</p> </body> </html>
Example :Click here to run js1_06.
User Input
Prompting for numbers (js1_07)
(As this uses the prompt command will not work if downloaded from the Internet in IE 7+)
When you use the prompt (or input box) to get a user to submit a number of things can go wrong!
<html> <head> <title>Hello</title> </head> <script type="text/javascript"> <!-- vntNum1=prompt("Enter a two digit number", ""); vntNum2=prompt("Enter another two digit number", ""); document.write("The sum of the numbers is " +vntNum1 + vntNum2); //--> </script> <body> </html>
Example :Click here to run js1_07.
Alternative example for IE 7+ (js1_07a)
To show how this works in IE 7 we will assign the number "10" to num1 and "25" num2
<html> <head> <title>Hello</title> </head> <script type="text/javascript"> <!-- vntNum1="10"; vntNum2="25"; document.write("The sum of the numbers is " +vntNum1 + vntNum2); //--> </script> <body> </html>
Example :Click here to run js1_07a.
Converting text to numbers
One of the things you need to be very careful with in JavaScript is that adding two strings together is quite different than adding two numbers. So
- Adding "12" + "34" will give "1234" whereas
- Adding numbers 12 + 34 gives 46
When you get user input via a textbox (notice it is called a TEXT box) numbers are captured as strings, so before you can add them they need to be converted to numbers. You can force a number conversion by simply adding a number to the text value e.g.
var intCalc = "12" + 0; var intCalc = "12" * 1;
Or you can use number conversion functions such as;
- parseFloat - for conversion to a floating-point number
- The example below will give 10.33.
- Other conversions: "12" (12), "12.00" (12), "12.25" (12.25), "31 32 33" (31), " 22" (22), "25 years" (25), "age is 25", (NaN)
var a = parseFloat("10.33");
- parseInt - for string-to-integer conversion.
- eval(string) - where the string is evaluated.
var intCalc1 = parseInt(txtA) + parseInt(txtB); var intCalc2 = parseFloat("12.23") + parseFloat(txtC); eval("x=10;y=20;document.write(x*y)"); document.write("<br />" + eval("2+2")); document.write("<br />" + eval(x+17));
Refs: Javascript Type-Conversion (n.d.)[1], JavaScript eval() Function (Refsnes Data, 2011)[2]
If you want to manage the number of decimal points use
parseFloat(num).toFixed(2);
Converting text to numbers (js1_08)
(Contains prompt will work in most browsers and IE 7+ offline)
To convert an input string to number we need to use parseInt() or parseFloat()
<html> <head> <title>Hello</title> </head> <script type="text/javascript"> <!-- vntNum1=prompt("Enter a two digit number", ""); vntNum2=prompt("Enter another two digit number", ""); document.write("The sum of the numbers is " +(parseInt(vntNum1) + parseInt(vntNum2))); //--> </script> <body> </html>
Example :Click here to run js1_08.
References
- ↑ Javascript Type-Conversion (n.d.). Retrieved from http://www.jibbering.com/faq/notes/type-conversion/
- ↑ (Refsnes Data, 2011) JavaScript eval() Function, w3schools Retrieved from http://www.w3schools.com/jsref/jsref_eval.asp
|
virtualMV | Superquick wiki guide | Please give me some feedback |
VirtualMV/JavaScript/Starting/Strings and numbers. (2024). In WikiEducator/VirtualMV wiki. Retrieved April 24, 2024, from http:https://wikieducator.org/VirtualMV/JavaScript/Starting/Strings_and_numbers (zotero)
|
