Diario IFCD0110 Castro Urdiales: 2014-11-30

2.1 LIBRERÍA DE FUNCIONES JAVASCRIPT:

Estas son las funciones que Javascript pone a disposición de los programadores.

eval(string)
Recibe una cadena de caracteres y la ejecuta como si fuera una sentencia de Javascript.

parseInt(cadena,base)
Recibe una cadena y una base. Devuelve un valor numérico resultante de convertir la cadena en un número en la base indicada.

parseFloat(cadena)
Convierte la cadena en un número y lo devuelve.

escape(carácter)
Devuelve un el carácter que recibe por parámetro en una codificación ISO Latin 1.

unescape(carácter)
Hace exatamente lo opuesto a la función escape.

isNaN(número)
Devuelve un boleano dependiendo de lo que recibe por parámetro. Si no es un número devuelve un true, si es un numero devuelve false.

2.2 EJEMPLOS DE FUNCIONES DE LIBRERÍA JAVASCRIPT:

2.2.1 -FUNCIÓN EVAL:

var miTexto = "3 + 5"

eval("document.write(" + miTexto +")")

Primero creamos una variable con un texto, en la siguiente línea utilizamos la función eval y como parámetro le pasamos una instrucción javascript para escribir en pantalla. Si concatenamos los strings que hay dentro de los paréntesis de la función eval nos queda esto.

document.write(3 + 5)

La función eval ejecuta la instrucción que se le pasa por parámetro, así que ejecutará esta sentencia, lo que dará como resultado que se escriba un 8 en la página web. Primero se resuelve la suma que hay entre paréntesis, con lo que obtenemos el 8 y luego se ejecuta la instrucción de escribir en pantalla.

2.2.2. -FUNCIÓN PARSEINT:

Recibe un número, escrito como una cadena de caracteres, y un número que indica una base. En realidad puede recibir otros tipos de variables, dado que las variables no tienen tipo en Javascript, pero se suele utilizar pasándole un string para convertir la variable de texto en un número.

Las distintas bases que puede recibir la función son 2, 8, 10 y 16. Si no le pasamos ningún valor como base la función interpreta que la base es decimal. El valor que devuelve la función siempre tiene base 10, de modo que si la base no es 10 convierte el número a esa base antes de devolverlo.

Una serie de llamadas a la función parseInt para ver lo que devuelve:

document.write (parseInt("34"))

Devuelve el numero 34

document.write (parseInt("101011",2))

Devuelve el numero 43

Esta función se utiliza en la práctica para un montón de cosas distintas en el manejo con números, por ejemplo obtener la parte entera de un decimal.

También es muy habitual su uso para saber si una variable es numérica, pues si le pasamos un texto a la función que no sea

numérico nos devolverá NaN (Not a Number) lo que quiere decir que No es un Número.

document.write (parseInt("desarrolloweb.com"))

Devuelve el numero NaN

Este mismo ejemplo es interesante con una modificación, pues si le pasamos una combinación de letras y números nos dará

lo siguiente.

document.write (parseInt("16XX3U"))

Devuelve el numero 16

Como se puede ver, la función intenta convertir el string en número y si no puede devuelve NaN.

2.2.3.- -FUNCIÓN ISNAN

Esta función devuelve un boleano dependiendo de si lo que recibe es un número o no. Lo único que puede recibir es un

número o la expresión NaN. Si recibe un NaN devuelve true y si recibe un número devuelve false. Es una función muy

sencilla de entender y de utilizar.

La función suele trabajar en combinación con la función parseInt o parseFloat, para saber si lo que devuelven estas dos

funciones es un número o no.

miInteger = parseInt("A3.6")

isNaN(miInteger)

En la primera línea asignamos a la variable miInteger el resultado de intentar convertir a entero el texto A3.6. Como este

texto no se puede convertir a número la función parseInt devuelve NaN. La segunda línea comprueba si la variable anterior

es NaN y como si que lo es devuelve un true.

miFloat = parseFloat("4.7")

isNaN(miFloat)

En este ejemplo convertimos un texto a número con decimales. El texto se convierte perfectamente porque corresponde con un número. Al recibir un número la función isNaN devuelve un false.

2.3 OBJETOS EN JAVASCRIPT:

2.3.1.- Cómo instanciar objetos

Instanciar un objeto es la acción de crear un ejemplar de una clase para poder trabajar con él luego. Recordamos que un objeto se crea a partir de una clase y la clase es la definición de las características y funcionalidades de un objeto. Con las clases no se trabaja, estas sólo son definiciones, para trabajar con una clase debemos tener un objeto instanciado de esa clase.

En javascript para crear un objeto a partir de una clase se utiliza la instrucción new, de esta manera.

var miObjeto = new miClase()

En una variable que llamamos miObjeto asigno un nuevo (new) ejemplar de la clase miClase. Los paréntesis se rellenan con los datos que necesite la clase para inicializar el objeto, si no hay que meter ningún parámetro los paréntesis se colocan vacíos. En realidad lo que se hace cuando se crea un objeto es llamar al constructor de esa clase y el constructor es el encargado de crearlo e inicializarlo. Hablaremos sobre esto más adelante.

2.3.2.- Cómo acceder a propiedades y métodos de los objetos

En Javascript podemos acceder a las propiedades y métodos de objetos de forma similar a como se hace en otros lenguajes

de programación, con el operador punto (".").

Las propiedades se acceden colocando el nombre del objeto seguido de un punto y el nombre de la propiedad que se desea

acceder. De esta manera:

miObjeto.miPropiedad

Para llamar a los métodos utilizamos una sintaxis similar pero poniendo al final entre paréntesis los parámetros que pasamos a los métodos.

miObjeto.miMetodo(parametro1,parametro2)

Si el método no recibe parámetros colocamos los paréntesis también, pero sin nada dentro.

miObjeto.miMetodo()

2.4 OBJETOS INCORPORADOS EN JAVASCRIPT:

Las clases que se encuentran disponibles de manera nativa en Javascript SON:

• String, para el trabajo con cadenas de caracteres.

• Date, para el trabajo con fechas.

• Math, para realizar funciones matemáticas.

• Number, para realizar algunas cosas con números

• Boolean, trabajo con boleanos.

modo, las clases son descripciones de la forma y funcionamiento de los

objetos.

Las clases son descripciones de la forma y funcionamiento de los objetos.

String es una clase, lo mismo que Date. Si queremos trabajar con cadenas de caracteres o fechas necesitamos crear objetos de las clases String y Date respectivamente. Las clases, por convención, siempre se escriben con la primera letra en mayúscula y también la primera letra de las siguientes palabras.Por ejemplo la clase de "Alumnos universitarios" se escribiría con la -A- de alumnos y la -U- de universitarios en mayúscula. AlumnosUniversitarios.

Hay otros que pertenecen a este mismo conjunto, los enumeramos

• Array

• Function

• RegExp

2.5 CLASE DE STRING EN JAVASCRIPT:

2.5.1 -PROPIEDADES DE STRING:

Length
String sólo tiene una propiedad: length, que guarda el número de caracteres del String.

2.5.2 -MÉTODOS DE STRING:

Los objetos de la clase String tienen una buena cantidad de métodos para realizar muchas cosas interesantes. los métodos más interesantes:

charAt(indice)
Devuelve el carácter que hay en la posición indicada como índice. Las posiciones de un string empiezan en 0.

indexOf(carácter,desde)
Devuelve la posición de la primera vez que aparece el carácter indicado por parámetro en un string. Si no encuentra el carácter en el string devuelve -1. El segundo parámetro es opcional y sirve para indicar a partir de que posición se desea que empiece la búsqueda.

lastIndexOf(carácter,desde)
Busca la posición de un carácter exáctamente igual a como lo hace la función indexOf pero desde el final en lugar del principio. El segundo parámetro indica el número de caracteres desde donde se busca, igual que en indexOf.

replace(substring_a_buscar,nuevoStr)
Sirve para reemplazar porciones del texto de un string por otro texto, por ejemplo, podríamos uilizarlo para reemplazar todas las apariciones del substring "xxx" por "yyy". El método no reemplaza en el string, sino que devuelve un resultante de hacer ese reemplazo.

split(separador)
Sirve para crear un vector a partir de un String en el que cada elemento es la parte del String que está separada por el separador indicado por parámetro.

substring(inicio,fin)
Devuelve el substring que empieza en el carácter de inicio y termina en el carácter de fin. Si intercambiamos los parámetros de inicio y fin también funciona. Simplemente nos da el substring que hay entre el carácter menor y el mayor.

toLowerCase()
Pone todas los caracteres de un string en minúsculas.

toUpperCase()
Pone todas los caracteres de un string en mayúsculas.

toString()
Lo tienen todos los objetos y se usa para convertirlos en cadenas.

Métodos menos útiles:

anchor(name)
Convierte en un ancla (sitio a donde dirigir un enlace) una cadena de caracteres usando como el atributo name de la etiqueta <A> lo que recibe por parámetro.

big()
Aumenta el tamaño de letra del string. Es como si colocásemos en un string al principio la etiqueta <BIG> y al final </BIG>.

blink()
Para que parpadee el texto del string, es como utilizar la etiqueta <BLINK>. Solo vale para Netscape.

bold()
Como si utilizásemos la etiqueta .

fixed()
Para utilizar una fuente monoespaciada, etiqueta <TT>.

fontColor(color)
Pone la fuente a ese color. Como utilizar la etiqueta .

fontSize(tamaño)
Pone la fuente al tamaño indicado. Como si utilizásemos la etiqueta con el atributo size.

italics()
Pone la fuente en cursiva. Etiqueta .

link(url)
Pone el texto como un enlace a la URL indicada. Es como si utilizásemos la etiqueta <A> con el atributo href indicado como parámetro.

small()
Es como utilizar la etiqueta 

strike()
Como utilizar la etiqueta <STRIKE>, que sirve para que el texto aparezca tachado.

sub()
Actualiza el texto como si se estuviera utilizando la etiqueta , de subíndice.

sup()
Como si utilizásemos la etiqueta , de superíndice.

2.6 EJEMPLOS DE FUNCIONAMIENTO DE LA CLASE STRING:

2.6.1 -EJEMPLO DE STRINGS 1:

Vamos a escribir el contenido de un string con un carácter separador ("-") entre cada uno de los caracteres del string.

var miString = "Hola Amigos"

var result = ""

for (i=0;i<miString.length-1;i++) {

result += miString.charAt(i)

result += "-"

}

result += miString.charAt(miString.length - 1)

document.write(result)

Primero creamos dos variables, una con el string a recorrer y otra con un string vacío, donde guardaremos el resultado. Luego hacemos un bucle que recorre desde el primer hasta el penúltimo carácter del string -utilzamos la propiedad length para conocer el número de caracteres del string- y en cada iteración colocamos un carácter del string seguido de un carácter separador "-". Como aun nos queda el último carácter por colocar lo ponemos en la siguiente línea después del bucle. Utilizamos la función charAt para acceder a las posiciones del string. Finalmente imprimimos en la página el resultado.

2.6.2 -EJEMPLO DE STRINGS 2:

Un script que rompa un string en dos mitades y las imprima por pantalla. Las mitades serán iguales, siempre que el string tenga un número de caracteres par. En caso de que el número de caracteres sea impar no se podrá hacer la mitad exacta, pero partiremos el string lo más aproximado a la mitad.

var miString = "0123456789"

var mitad1,mitad2

posicion_mitad = miString.length / 2

mitad1 = miString.substring(0,posicion_mitad)

mitad2 = miString.substring(posicion_mitad,miString.length)

document.write(mitad1 + " " + mitad2)

Las dos primeras líneas sirven para declarar las variables que vamos a utilizar e inicializar el string a partir. En la siguiente línea hallamos la posición de la mitad del string.
En las dos siguientes líneas es donde realizamos el trabajo de poner en una variable la primera mitad del string y en la otra la segunda. Para ello utilizamos el método substring pasándole como inicio y fin en el primer caso desde 0 hasta la mitad y en
el segundo desde la mitad hasta el final. Para finalizar imprimimos las dos mitades con un salto de línea entre ellas.

2.7 CLASE DATE EN JAVASCRIPT:

miFecha = new Date(año,mes,dia,hora,minutos,segundos)

miFecha = new Date(año,mes,dia)

Los valores que debe recibir el constructor son siempre numéricos. Un detalle, el mes comienza por 0, es decir, enero es el mes 0. Si no indicamos la hora, el objeto fecha se crea con hora 00:00:00.

Los objetos de la clase Date no tienen propiedades pero si un montón de métodos, vamos a verlos ahora.

getDate()
Devuelve el día del mes.

getDay()
Devuelve el día de la semana.

getHours()
Retorna la hora.

getMinutes()
Devuelve los minutos.

getMonth()
Devuelve el mes (atención al mes que empieza por 0).

getSeconds()
Devuelve los segundos.

getTime()
Devuelve los milisegundos transcurridos entre el día 1 de enero de 1970 y la fecha correspondiente al objeto al que se le pasa el mensaje.

getYear()
Retorna el año, al que se le ha restado 1900. Por ejemplo, para el 1995 retorna 95, para el 2005 retorna 105. Este método está obsoleto en Netscape a partir de la versión 1.3 de Javascript y ahora se utiliza getFullYear().

getFullYear()
Retorna el año con todos los dígitos. Usar este método para estar seguros de que funcionará todo bien en fechas posteriores al año 2000.

setDate()
Actualiza el día del mes.

setHours()
Actualiza la hora.

setMinutes()
Cambia los minutos.

setMonth()
Cambia el mes (atención al mes que empieza por 0).

setSeconds()
Cambia los segundos.

setTime()
Actualiza la fecha completa. Recibe un número de milisegundos desde el 1 de enero de 1970.

setYear()
Cambia el año recibe un número, al que le suma 1900 antes de colocarlo como año de la fecha. Por ejemplo, si recibe 95 colocará el año 1995. Este método está obsoleto a partir de Javascript 1.3 en Netscape. Ahora se utiliza setFullYear(), indicando el año con todos los dígitos.

setFullYear()
Cambia el año de la fecha al número que recibe por parámetro. El número se indica completo ej: 2005 o 1995. Utilizar este método para estar seguros que todo funciona para fechas posteriores a 2000.

2.8 EJEMPLO DE FUNCIONAMIENTO DE DATE:

En este ejemplo vamos a crear dos fechas, una con el instante actual y otra con fecha del pasado. Luego las imprimiremos las dos y extraeremos su año para imprimirlo también. Luego actualizaremos el año de una de las fechas y la volveremos a escribir con un formato más legible.

//en estas líneas creamos las fechas

miFechaActual = new Date()

miFechaPasada = new Date(1998,4,23)

//en estas líneas imprimimos las fechas.

document.write (miFechaActual)

document.write (" ")

document.write (miFechaPasada)

//extraemos el año de las dos fechas

anoActual = miFechaActual.getFullYear()

anoPasado = miFechaPasada.getFullYear()

//Escribimos en año en la página

document.write(" El año actual es: " + anoActual)

document.write(" El año pasado es: " + anoPasado)

//cambiamos el año en la fecha actual

miFechaActual.setFullYear(2005)

//extraemos el día mes y año

dia = miFechaActual.getDate()

mes = parseInt(miFechaActual.getMonth()) + 1

ano = miFechaActual.getFullYear()

//escribimos la fecha en un formato legible

document.write (" ")

document.write (dia + "/" + mes + "/" + ano)

Si se desea, se puede ver en funcionamiento este script en una página a parte.

El número del mes puede empezar desde 0. Por lo menos en el Netscape con el que realizamos las pruebas empezaba en 0 el mes. Por esta razón sumamos uno al mes que devuelve el método getMonth.

En Netscape el método getFullYear() devuelve los años trascurridos desde 1900, con lo que al obtener el año de una fecha de, por ejemplo, 2005, indica que es el año 105. Para obtener el año completo tenemos a nuestra Internet Explorer.

2.9 CLASE MATH EN JAVASCRIPT:

Proporciona los mecanismos para realizar operaciones matemáticas en Javascript. Algunas operaciones se resuelven rápidamente con los operadores aritméticos que ya conocemos, como la multiplicación o la suma, pero hay una serie de operaciones matemáticas adicionales que se tienen que realizar usando la clase Math como pueden ser calcular un seno o hacer una raiz cuadrada.

Para cualquier cálculo matemático complejo utilizaremos la clase Math, con una particularidad. Hasta ahora cada vez que queríamos hacer algo con una clase debíamos instanciar un objeto de esa clase y trabajar con el objeto y en el caso de la clase Math se trabaja directamente con la clase. Para trabajar con la clase Math no deberemos utilizar la instrucción new y utilizaremos el nombre de la clase para acceder a sus propiedades y métodos.

2.9.1 -PROPIEDADES DE MATH:

Las propiedades guardan valores que probablemente necesitemos en algún momento si estamos haciendo cálculos matemáticos.

E
Número E o constante de Euler, la base de los logaritmos neperianos.

LN2
Logaritmo neperiano de 2.

LN10
Logaritmo neperiano de 10.

LOG2E
Logaritmo en base 2 de E.

LOG10E
Logaritmo en base 10 de E.

PI
Conocido número para cálculo con círculos.

SQRT1_2
Raiz cuadrada de un medio.

SQRT2
Raiz cuadrada de 2.

2.9.2 -MÉTODOS DE MATH:

abs()
Devuelve el valor absoluto de un número. El valor después de quitarle el signo.

acos()
Devuelve el arcocoseno de un número en radianes.

asin()
Devuelve el arcoseno de un numero en radianes.

atan()
Devuelve un arcotangente de un numero.

ceil()
Devuelve el entero igual o inmediatamente siguiente de un número. Por ejemplo, ceil(3) vale 3, ceil(3.4) es 4.

cos()
Retorna el coseno de un número.

exp()
Retorna el resultado de elevar el número E por un número.

floor()
Lo contrario de ceil(), pues devuelve un número igual o inmediatamente inferior.

log()
Devuelve el logaritmo neperiano de un número.

max()
Retorna el mayor de 2 números.

min()
Retorna el menor de 2 números.

pow()
Recibe dos números como parámetros y devuelve el primer número elevado al segundo número.

random()
Devuelve un número aleatorio entre 0 y 1. Método creado a partir de Javascript 1.1.

round()
Redondea al entero más próximo.

sin()
Devuelve el seno de un número con un ángulo en radianes.

sqrt()
Retorna la raiz cuadrada de un número.

tan()
Calcula y devuelve la tangente de un número en radianes.

Ejemplo, Math para calcular el seno y el coseno de 2 PI radianes (una vuelta completa). El coseno de 2 PI radianes debe dar como resultado 1 y el seno 0.

document.write (Math.cos(2 * Math.PI))

document.write (" ")

document.write (Math.sin(2 * Math.PI))

2 PI radianes es el resultado de multiplicar 2 por el número PI. Ese resultado es lo que recibe el método cos, y da como resultado 1. En el caso del seno el resultado no es exactamente 0 pero está aproximado con una exactitud de más de una millonésima de fracción. Se escriben los el seno y coseno con un salto de línea en medio para que quede más claro.

2.10 CLASE NUMBER EN JAVASCRIPT:

El valor del objeto Number que se crea depende de lo que reciba el constructor de la clase Number. Con estas reglas:

- Si el constructor recibe un número, entonces inicializa el objeto con el número que recibe. Si recibe un número entrecomillado lo convierte a valor numérico, devolviendo también dicho número.

- Devuelve 0 en caso de que no reciba nada.

- En caso de que reciba un valor no numérico devuelve NaN, que significa "Not a Number" (No es un número)

- Si recibe false se inicializa a 0 y si recibe true se inicializa a 1.

Ejemplos:

var n1 = new Number()

document.write(n1 + " ")

//muestra un 0

var n2 = new Number("hola")

document.write(n2 + " ")

//muestra NaN

var n3 = new Number("123")

document.write(n3 + " ")

//muestra 123

var n4 = new Number("123asdfQWERTY")

document.write(n4 + " ")

//muestra NaN

var n5 = new Number(123456)

document.write(n5 + " ")

//muestra 123456

var n6 = new Number(false)

document.write(n6 + " ")

//muestra 0

var n7 = new Number(true)

document.write(n7 + " ")

//muestra 1

2.10.1 -PROPIEDADES DE LA CLASE NUMBER:

Los siguientes valores:

NaN
Significa Not a Number, o en español, no es un número.

MAX_VALUE y MIN_VALUE
Guardan el valor del máximo y el mínimo valor que se puede representar en Javascript

NEGATIVE_INFINITY y POSITIVE_INFINITY
Representan los valores, negativos y positivos respectivamente, a partir de los cuales hay desbordamiento.

Estas propiedades son de clase, así que accederemos a ellas a partir del nombre de la clase, tal como podemos ver en este

ejemplo en el que se muestra cada uno de sus valores.

document.write("Propiedad NaN: " + Number.NaN)

document.write(" ")

document.write("Propiedad MAX_VALUE: " + Number.MAX_VALUE)

document.write(" ")

document.write("Propiedad MIN_VALUE: " + Number.MIN_VALUE)

document.write(" ")

document.write("Propiedad NEGATIVE_INFINITY: " + Number.NEGATIVE_INFINITY)

document.write(" ")

document.write("Propiedad POSITIVE_INFINITY: " + Number.POSITIVE_INFINITY)

2.11 CLASE BOOLEAN EN JAVASCRIPT:

La clase Boolean. Esta nos sirve para crear valores boleanos.

Una de sus utilidades es la de conseguir valores boleanos a partir de datos de cualquier otro tipo. No obstante, al igual que ocurría con la clase Number, es muy probable que no la llegues a utilizar nunca.

Dependiendo de lo que reciba el constructor de la clase Bolean el valor del objeto boleano que se crea será verdadero o falso, de la siguiente manera

- Se inicializa a false cuando no pasas ningún valor al constructor, o si pasas una cadena vacía, el número 0 o la palabra false sin comillas.

- Se inicializa a true cuando recibe cualquier valor entrecomillado o cualquier número distinto de 0. Se puede comprender el funcionamiento de este objeto fácilmente si examinamos unos ejemplos.

var b1 = new Boolean()

document.write(b1 + " ")

//muestra false

var b2 = new Boolean("")

document.write(b2 + " ")

//muestra false

var b25 = new Boolean(false)

document.write(b25 + " ")

//muestra false

var b3 = new Boolean(0)

document.write(b3 + " ")

//muestra false

var b35 = new Boolean("0")

document.write(b35 + " ")

//muestra true

var b4 = new Boolean(3)

document.write(b4 + " ")

//muestra true

var b5 = new Boolean("Hola")

document.write(b5 + " ")

//muestra true

Diario IFCD0110 Castro Urdiales

MENU

martes, 2 de diciembre de 2014

UF1305 Parte 2: Clase y objetos nativos de Javascript.

UF1305 Parte 1: Introducción a la segunda parte del Manual de Javascript.