Javascript: lenguaje interactivo para dinamizar la web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 27
Visitas el mes pasado: 53
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
Los siguientes métodos están relacionados con los el tratamiento de los números
en javascript. Ya hemos visto anteriormente las instrucciones Number()
y
isNaN
, ahora explicaremos más detenidamente estas instrucciones y otras
relacionadas con los números.
En realidad lo que hacemos al aplicar la instrucción Number
o también
new Number
es crear un nuevo objeto de la clase Number
. Los
números son en javascript objetos de la clase Number
.
La instrucción Number()
da distintos resultados dependiendo del valor que
se le pase:
Un número: El resultado es el mismo número:
var valor = Number(23) // valor = 23
Una cadena que representa un número: Convierte el texto a número:
var valor = Number("42") // valor = 42
Una cadena con números y letras: El resultado es NaN
, expresión
que significa "Not a Number" (no es un número).
var valor = Number("13px") // valor = NaN
Una cadena con texto: El resultado es NaN
var valor = Number("un texto") // valor = NaN
Valor booleano true: El resultado es el número 1
var valor = Number(true) // valor = 1
Valor booleano false: El resultado es el número 0
var valor = Number(false) // valor = 0
Aparte de las funciones matemáticas, que las veremos, más adelante, hay otras funciones o métodos para aplicar a los números:
Sirve para comprobar si una variable es un número o no. Si no es un
número devuelve true
y si lo es devuelve false
.
valor = isNaN(elemento)
Aquí si elemento
no es un número, la variable valor
será igual a true
y si es un número valdrá false
.
La función ParseInt()
sirve para convertir un número que está escrito
en una base que no es base 10, a un número en base 10.
Es decir, normalmente usamos 10 cifras para escribir los números, esto significa que estamos usando la base 10; en informática se usan también para escribir números las bases 2, 8, o 16, es decir se escriben los números utilizando 2, 8 o 16 cifras. (sistemas binario, octal, o hexadecimal), para convertir estos números en números normalizados (base 10) usamos esta función, la cual tiene dos parámetros.
el primer parámetro es el número que queremos pasar a base 10 (escrito en otra base), el segundo es la base en la que está el número.
numeroEnBase10 = parseInt(numero,base)
Veamoslo en un ejemplo:
valor = parseInt("7b",16)
La variable valor
será igual a 123, ya que el número 7b
en sistema hexadecimal es igual a 123 en sistema decimal
El método toFixed()
Devuelve el mismo número al que se le aplica, pero con
la cantidad de decimales que se le especifica en el parámetro (en el paréntisis), el número
se redondea al valor más próximo. Si no se le pasa ningún parámetro, el número se muestra
sin decimales, y se redondea al valor más proximo. Ejemplo:
numero = 1234.56789
num1 = numero.toFixed(2) // num1 = 1234.57
num2 = numero.toFixed(4) // num2 = 1234.5679
num3 = numero.toFixed() // mum3 = 1235
El método toFixed
requiere que el valor que se le pase sea un valor
númerico, y no una cadena de texto con el valor, por lo que si el valor lo
hemos obtenido mediante un formulario, debemos transformarlo en valor numérico
mediante la instruccion Number()
Las propiedades del objeto Number
son una serie de valores que javascript nos devuelve
cuando un objeto Number
no tiene unos valores numéricos normales, es decir, cuando
no se encuentra el número, o cuando este es infinito, o cuando por muy grande o muy pequeño
sobrepasa los límites de escritura (desbordamiento).
Tenemos las siguientes propiedades, las cuales se pueden ver con las insrucciones que se indican:
propiedad NaN
valor = Number.NaN // valor: NaN
propiedad MAX_VALUE
valor = Number.MAX_VALUE // valor: 1.7976931348623157e+308
propiedad MIN_VALUE
valor = Number.MIN_VALUE // valor: 5e-324
propiedad NEGATIVE_INFINITY
valor = Number.NEGATIVE_INFINITY // valor: -Infinity
propiedad POSITIVE_INFINITY
valor = Number.POSITIVE_INFINITY // valor: Infinity
Estos son valores que pueden aparecer en un número u objeto Number
,
pero que también podemos verlos con los códigos anteriores.
La siguiente página de ejemplo muestra cómo funcionan los métodos y propiedades vistas anteriormente.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>El objeto Number</title> <style type="text/css"> #caja1, #caja2, #caja3, #caja4, #caja5 { border:1px solid black;width: 400px;min-height: 30px; float: right; } </style> <script type="text/javascript"> function miNumber() { //instrucción Number var valor = document.numero.valor1.value; var num = Number(valor); var texto = document.getElementById("caja1"); texto.innerHTML = "Valor de Number = " + num; } function comprueba() { // método isNaN var valor = document.comprobar.valor2.value; var num = isNaN(valor); var texto = document.getElementById("caja2"); texto.innerHTML = "Valor de isNaN = " + num; } function cambia() { //método parseInt var valor = document.cambiaBase.valor3.value var bases = document.cambiaBase.base var texto = document.getElementById("caja3") for (i=0;i<bases.length;i++) { if (bases[i].checked == true) { miBase = bases[i].value } } var num = parseInt(valor,miBase) texto.innerHTML = "Para el número " + valor + " en base " + miBase + "<br/>"; texto.innerHTML += "Valor de parseInt = " + num; } function redondear() { //método toFixed var valor = document.redondeo.valor4.value valor = Number(valor) var decimales = document.redondeo.decimal.value var texto = document.getElementById("caja4") if (decimales<0 || decimales>8 || decimales == NaN ) { texto.innerHTML = "el número de decimales no es correcto." } else { num = valor.toFixed(decimales) texto.innerHTML = "redondeo con toFixed: " + num; } } function propiedades() { //Propiedades del objeto Number var texto = document.getElementById("caja5") texto.innerHTML = "<h3>Propiedades del objeto Number</h3>" texto.innerHTML += "<p>Propiedad NaN: " + Number.NaN + "</p>" texto.innerHTML += "<p>Propiedad MAX_VALUE: " + Number.MAX_VALUE + "</p>" texto.innerHTML += "<p>Propiedad MIN_VALUE: " + Number.MIN_VALUE + "</p>" texto.innerHTML += "<p>Propiedad NEGATIVE_INFINITY: " + Number.NEGATIVE_INFINITY + "</p>" texto.innerHTML += "<p>Propiedad POSITVE_INFINITY: " + Number.POSITIVE_INFINITY+ "</p>" } </script> </head> <body> <h1>El objeto Number, métodos y propiedades.</h1> <h3>Instrucción Number()</h3> <div id="caja1"></div> <form action="#" name="numero"> <p><input type="text" name="valor1" /> Escribe un valor para el objeto Number</p> <p><input type="button" onclick="miNumber()" value="ver Number" /></p> </form> <h3>Método isNaN()</h3> <div id="caja2"></div> <form action="#" name="comprobar"> <p><input type="text" name="valor2" /> Escribe un valor para comprobar si es un número con isNaN</p> <p><input type="button" onclick="comprueba()" value="ver isNaN" /></p> </form> <h3>Método parseInt</h3> <div id="caja3"></div> <form action="#" name="cambiaBase"> <p><input type="text" name="valor3" /> Escribe un número en base 2, 8 o 16.</p> <p>El número está escrito en la siguiente base:</p> <input type="radio" name="base" value="2" /> base 2 <input type="radio" name="base" value="8" /> base 8 <input type="radio" name="base" value="16" /> base 16 <p><input type="button" onclick="cambia()" value="ver parseInt" /></p> </form> <h3>Método toFixed</h3> <div id="caja4"></div> <form action="#" name="redondeo"> <p><input type="text" name="valor4" /> Escribe un número para redondear con toFixed</p> <p><input type="text" name="decimal" /> Escribe la cifra de decimales que quieres que tenga (máximo 8)</p> <p><input type="button" onclick="redondear()" value="ver toFixed" /></p> </form> <h3>Ver propiedades</h3> <div id="caja5"></div> <p onclick="propiedades()"> Pulsa en este párrafo para ver las propiedades del objeto Number.</p> </body> </html>
Para ver en tu navegador esta página de ejemplo pulsa en el siguiente enlace:
En la siguiente página seguiremos con los números, veremos cómo realizar otra serie de
operaciones más avanzadas las cuales se hacen mediante el objeto Math
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com