Mostrando entradas con la etiqueta Javascript. Mostrar todas las entradas
Mostrando entradas con la etiqueta Javascript. Mostrar todas las entradas
Objeto window javascript
Propiedades
A continuación podemos ver las propiedades del objeto window. Hay algunas muy útiles y otras que lo son menos.
closed
Indica la posibilidad de que se haya cerrado la ventana. (Javascript 1.1)
defaultStatus
Texto que se escribe por defecto en la barra de estado del navegador.
document
Objeto que contiene el la página web que se está mostrando.
Frame
Un objeto frame de una página web. Se accede por su nombre.
frames array
El vector que contiene todos los frames de la página. Se accede por su índice a partir de 0.
history
Objeto historial de páginas visitadas.
innerHeight
Tamaño en pixels del espacio donde se visualiza la página, en vertical. (Javascript 1.2)
innerWidth
Tamaño en pixels del espacio donde se visualiza la página, en horizontal. (Javascript 1.2)
length
Numero de frames de la ventana.
location
La URL del documento que se está visualizando. Podemos cambiar el valor de esta propiedad para movernos a otra página. Ver también la propiedad location del objeto document.
locationbar
Objeto barra de direcciones de la ventana. (Javascript 1.2)
menubar
Objeto barra de menús de la ventana. (Javascript 1.2)
name
Nombre de la ventana. Lo asignamos cuando abrimos una nueva ventana.
opener
Hace referencia a la ventana de navegador que abrió la ventana donde estamos trabajando. Se verá con detenimiento en el tratamiento de ventanas con Javascript.
outherHeight
Tamaño en pixels del espacio de toda la ventana, en vertical. Esto incluye las barras de desplazamiento, botones, etc. (Javascript 1.2)
outherWidth
Tamaño en pixels del espacio de toda la ventana, en horizontal. Esto incluye las barras de desplazamiento. (Javascript 1.2)
parent
Hace referencia a la ventana donde está situada el frame donde estamos trabajando. La veremos con detenimiento al estudiar el control de frames con Javascript.
personalbar
Objeto barra personal del navegador. (Javascript 1.2)
self
Ventana o frame actual.
scrollbars
Objeto de las barras de desplazamiento de la ventana.
status
Texto de la barra de estado.
statusbar
Objeto barra de estado del navegador. (Javascript 1.2)
toolbar
Objeto barra de herramientas. (Javascript 1.2)
top
Hace referencia a la ventana donde está situada el frame donde estamos trabajando. Como la propiedad parent.
window
Hace referencia a la ventana actual, igual que la propiedad self.
Vamos a ver un ejemplo de utilización de la propiedad status del objeto window. Esta propiedad sirve para escribir un texto en la barra de estado del navegador (la barra de debajo de la ventana). En este ejemplo hemos tenido que adelantarnos un poco en la marcha del manual, pues utilizamos un manejador de eventos y no hemos visto todavía lo que son. En concreto utilizamos el manejador de eventos onclick, que sirve para ejecutar sentencias Javascript cuando el usuario pulsa un elemento de la página.
Los manejadores de eventos se colocan en etiquetas HTML, en nuestro caso lo colocamos en un botón de formulario. Las sentencias Javascript asociadas al evento onclick del botón se ejecutarán cuando pulsemos el botón.
Ejemplo
<input type="Button" value="Pulsame!" onclick="window.status='He cambiado esto'">
Metodos
alert(texto)
Presenta una ventana de alerta donde se puede leer el texto que recibe por parámetro
back()
Ir una página atrás en el historial de páginas visitadas. Funciona como el botón de volver de la barra de herramientas. (Javascript 1.2)
blur()
Quitar el foco de la ventana actual. (Javascript 1.1)
captureEvents(eventos)
Captura los eventos que se indiquen por parámetro (Javascript 1.2).
clearInterval()
Elimina la ejecución de sentencias asociadas a un intervalo indicadas con el método setInterval().(Javascript 1.2)
clearTimeout()
Elimina la ejecución de sentencias asociadas a un tiempo de espera indicadas con el método setTimeout().
close()
Cierra la ventana. (Javascript 1.1)
confirm(texto)
Muestra una ventana de confirmación y permite aceptar o rechazar.
find()
Muestra una ventanita de búsqueda. (Javascript 1.2 para Netscape)
focus()
Coloca el foco de la aplicación en la ventana. (Javascript 1.1)
forward()
Ir una página adelante en el historial de páginas visitadas. Como si pulsásemos el botón de adelante del navegador. (Javascript 1.2)
home()
Ir a la página de inicio que haya configurada en el explorador. (Javascript 1.2)
moveBy(pixelsX, pixelsY)
Mueve la ventana del navegador los pixels que se indican por parámetro hacia la derecha y abajo. (Javascript 1.2)
moveTo(pixelsX, pixelsY)
Mueve la ventana del navegador a la posición indicada en las coordenadas que recibe por parámetro. (Javascript 1.2)
open()
Abre una ventana secundaria del navegador. Se puede aprender a utilizarla en el reportaje de cómo abrir ventanas secundarias.
print()
Como si pulsásemos el botón de imprimir del navegador. (Javascript 1.2)
prompt(pregunta,inicializacion_de_la_respuesta)
Muestra una caja de diálogo para pedir un dato. Devuelve el dato que se ha escrito.
releaseEvents(eventos)
Deja de capturar eventos del tipo que se indique por parámetro. (Javascript 1.2)
resizeBy(pixelsAncho,pixelsAlto)
Redimensiona el tamaño de la ventana, añadiendo a su tamaño actual los valores indicados en los parámetros. El primero para la altura y el segundo para la anchura. Admite valores negativos si se desea reducir la ventana. (Javascript 1.2)
resizeTo(pixelsAncho,pixelsAlto)
Redimensiona la ventana del navegador para que ocupe el espacio en pixels que se indica por parámetro (Javascript 1.2)
routeEvent()
Enruta un evento por la jerarquía de eventos. (Javascript 1.2)
scroll(pixelsX,pixelsY)
Hace un scroll de la ventana hacia la coordenada indicada por parámetro. Este método está desaconsejado, pues ahora se debería utilizar scrollTo()(Javascript 1.1)
scrollBy(pixelsX,pixelsY)
Hace un scroll del contenido de la ventana relativo a la posición actual. (Javascript 1.2)
scrollTo(pixelsX,pixelsY)
Hace un scroll de la ventana a la posición indicada por el parámetro. Este método se tiene que utilizar en lugar de scroll. (Javascript 1.2)
setInterval()
Define un script para que sea ejecutado indefinidamente en cada intervalo de tiempo. (Javascript 1.2)
setTimeout(sentencia,milisegundos)
Define un script para que sea ejecutado una vez después de un tiempo de espera determinado.
stop()
Como pulsar el botón de stop de la ventana del navegador. (Javascript 1.2)
Para ilustrar un poco mejor el funcionamiento de alguno de estos métodos -los más extraños-, hemos creado una página web que los utiliza. El código de la página se muestra a continuación y también podemos ver la página en marcha.
A continuación podemos ver las propiedades del objeto window. Hay algunas muy útiles y otras que lo son menos.
closed
Indica la posibilidad de que se haya cerrado la ventana. (Javascript 1.1)
defaultStatus
Texto que se escribe por defecto en la barra de estado del navegador.
document
Objeto que contiene el la página web que se está mostrando.
Frame
Un objeto frame de una página web. Se accede por su nombre.
frames array
El vector que contiene todos los frames de la página. Se accede por su índice a partir de 0.
history
Objeto historial de páginas visitadas.
innerHeight
Tamaño en pixels del espacio donde se visualiza la página, en vertical. (Javascript 1.2)
innerWidth
Tamaño en pixels del espacio donde se visualiza la página, en horizontal. (Javascript 1.2)
length
Numero de frames de la ventana.
location
La URL del documento que se está visualizando. Podemos cambiar el valor de esta propiedad para movernos a otra página. Ver también la propiedad location del objeto document.
locationbar
Objeto barra de direcciones de la ventana. (Javascript 1.2)
menubar
Objeto barra de menús de la ventana. (Javascript 1.2)
name
Nombre de la ventana. Lo asignamos cuando abrimos una nueva ventana.
opener
Hace referencia a la ventana de navegador que abrió la ventana donde estamos trabajando. Se verá con detenimiento en el tratamiento de ventanas con Javascript.
outherHeight
Tamaño en pixels del espacio de toda la ventana, en vertical. Esto incluye las barras de desplazamiento, botones, etc. (Javascript 1.2)
outherWidth
Tamaño en pixels del espacio de toda la ventana, en horizontal. Esto incluye las barras de desplazamiento. (Javascript 1.2)
parent
Hace referencia a la ventana donde está situada el frame donde estamos trabajando. La veremos con detenimiento al estudiar el control de frames con Javascript.
personalbar
Objeto barra personal del navegador. (Javascript 1.2)
self
Ventana o frame actual.
scrollbars
Objeto de las barras de desplazamiento de la ventana.
status
Texto de la barra de estado.
statusbar
Objeto barra de estado del navegador. (Javascript 1.2)
toolbar
Objeto barra de herramientas. (Javascript 1.2)
top
Hace referencia a la ventana donde está situada el frame donde estamos trabajando. Como la propiedad parent.
window
Hace referencia a la ventana actual, igual que la propiedad self.
Vamos a ver un ejemplo de utilización de la propiedad status del objeto window. Esta propiedad sirve para escribir un texto en la barra de estado del navegador (la barra de debajo de la ventana). En este ejemplo hemos tenido que adelantarnos un poco en la marcha del manual, pues utilizamos un manejador de eventos y no hemos visto todavía lo que son. En concreto utilizamos el manejador de eventos onclick, que sirve para ejecutar sentencias Javascript cuando el usuario pulsa un elemento de la página.
Los manejadores de eventos se colocan en etiquetas HTML, en nuestro caso lo colocamos en un botón de formulario. Las sentencias Javascript asociadas al evento onclick del botón se ejecutarán cuando pulsemos el botón.
Ejemplo
<input type="Button" value="Pulsame!" onclick="window.status='He cambiado esto'">
Metodos
alert(texto)
Presenta una ventana de alerta donde se puede leer el texto que recibe por parámetro
back()
Ir una página atrás en el historial de páginas visitadas. Funciona como el botón de volver de la barra de herramientas. (Javascript 1.2)
blur()
Quitar el foco de la ventana actual. (Javascript 1.1)
captureEvents(eventos)
Captura los eventos que se indiquen por parámetro (Javascript 1.2).
clearInterval()
Elimina la ejecución de sentencias asociadas a un intervalo indicadas con el método setInterval().(Javascript 1.2)
clearTimeout()
Elimina la ejecución de sentencias asociadas a un tiempo de espera indicadas con el método setTimeout().
close()
Cierra la ventana. (Javascript 1.1)
confirm(texto)
Muestra una ventana de confirmación y permite aceptar o rechazar.
find()
Muestra una ventanita de búsqueda. (Javascript 1.2 para Netscape)
focus()
Coloca el foco de la aplicación en la ventana. (Javascript 1.1)
forward()
Ir una página adelante en el historial de páginas visitadas. Como si pulsásemos el botón de adelante del navegador. (Javascript 1.2)
home()
Ir a la página de inicio que haya configurada en el explorador. (Javascript 1.2)
moveBy(pixelsX, pixelsY)
Mueve la ventana del navegador los pixels que se indican por parámetro hacia la derecha y abajo. (Javascript 1.2)
moveTo(pixelsX, pixelsY)
Mueve la ventana del navegador a la posición indicada en las coordenadas que recibe por parámetro. (Javascript 1.2)
open()
Abre una ventana secundaria del navegador. Se puede aprender a utilizarla en el reportaje de cómo abrir ventanas secundarias.
print()
Como si pulsásemos el botón de imprimir del navegador. (Javascript 1.2)
prompt(pregunta,inicializacion_de_la_respuesta)
Muestra una caja de diálogo para pedir un dato. Devuelve el dato que se ha escrito.
releaseEvents(eventos)
Deja de capturar eventos del tipo que se indique por parámetro. (Javascript 1.2)
resizeBy(pixelsAncho,pixelsAlto)
Redimensiona el tamaño de la ventana, añadiendo a su tamaño actual los valores indicados en los parámetros. El primero para la altura y el segundo para la anchura. Admite valores negativos si se desea reducir la ventana. (Javascript 1.2)
resizeTo(pixelsAncho,pixelsAlto)
Redimensiona la ventana del navegador para que ocupe el espacio en pixels que se indica por parámetro (Javascript 1.2)
routeEvent()
Enruta un evento por la jerarquía de eventos. (Javascript 1.2)
scroll(pixelsX,pixelsY)
Hace un scroll de la ventana hacia la coordenada indicada por parámetro. Este método está desaconsejado, pues ahora se debería utilizar scrollTo()(Javascript 1.1)
scrollBy(pixelsX,pixelsY)
Hace un scroll del contenido de la ventana relativo a la posición actual. (Javascript 1.2)
scrollTo(pixelsX,pixelsY)
Hace un scroll de la ventana a la posición indicada por el parámetro. Este método se tiene que utilizar en lugar de scroll. (Javascript 1.2)
setInterval()
Define un script para que sea ejecutado indefinidamente en cada intervalo de tiempo. (Javascript 1.2)
setTimeout(sentencia,milisegundos)
Define un script para que sea ejecutado una vez después de un tiempo de espera determinado.
stop()
Como pulsar el botón de stop de la ventana del navegador. (Javascript 1.2)
Para ilustrar un poco mejor el funcionamiento de alguno de estos métodos -los más extraños-, hemos creado una página web que los utiliza. El código de la página se muestra a continuación y también podemos ver la página en marcha.
Objeto Math javascript
Propiedades de Math
Las propiedades guardan valores que probablemente necesitemos en algún momento si estamos haciendo cálculos matemáticos. Es probable que estas propiedades resulten un poco raras a las personas que desconocen las matemáticas avanzadas, pero los que las conozcan sabrán de su utilidad.
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.
Métodos de Math
Así mismo, tenemos una serie de métodos para realizar operaciones mateméticas típicas, aunque un poco complejas. Todos los que conozcan las matemáticas a un buen nivel conocerán el significado de estas operaciones.
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 de utilización de la clase Math
Vamos a ver un sencillo ejemplo sobre cómo utilizar métodos y propiedaes de la clase Math para calcular el seno y el coseno de 2 PI radianes (una vuelta completa). Como algunos de vosotros sabréis, el coseno de 2 PI radianes debe dar como resultado 1 y el seno 0.
document.write (Math.cos(2 * Math.PI))
Las propiedades guardan valores que probablemente necesitemos en algún momento si estamos haciendo cálculos matemáticos. Es probable que estas propiedades resulten un poco raras a las personas que desconocen las matemáticas avanzadas, pero los que las conozcan sabrán de su utilidad.
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.
Métodos de Math
Así mismo, tenemos una serie de métodos para realizar operaciones mateméticas típicas, aunque un poco complejas. Todos los que conozcan las matemáticas a un buen nivel conocerán el significado de estas operaciones.
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 de utilización de la clase Math
Vamos a ver un sencillo ejemplo sobre cómo utilizar métodos y propiedaes de la clase Math para calcular el seno y el coseno de 2 PI radianes (una vuelta completa). Como algunos de vosotros sabréis, el coseno de 2 PI radianes debe dar como resultado 1 y el seno 0.
document.write (Math.cos(2 * Math.PI))
Objeto Date javascript
Un objeto de la clase Date se puede crear de dos maneras distintas. Por un lado podemos crear el objeto con el día y hora actuales y por otro podemos crearlo con un día y hora distintos a los actuales. Esto depende de los parámetros que pasemos al construir los objetos.
Para crear un objeto fecha con el día y hora actuales colocamos los paréntesis vacíos al llamar al constructor de la clase Date.
miFecha = new Date()
Para crear un objeto fecha con un día y hora distintos de los actuales tenemos que indicar entre paréntesis el momento con que inicializar el objeto. Hay varias maneras de expresar un día y hora válidas, por eso podemos construir una fecha guiándonos por varios esquemas. Estos son dos de ellos, suficientes para crear todo tipo de fechas y horas.
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.
EJEMPLOS
//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)
Para crear un objeto fecha con el día y hora actuales colocamos los paréntesis vacíos al llamar al constructor de la clase Date.
miFecha = new Date()
Para crear un objeto fecha con un día y hora distintos de los actuales tenemos que indicar entre paréntesis el momento con que inicializar el objeto. Hay varias maneras de expresar un día y hora válidas, por eso podemos construir una fecha guiándonos por varios esquemas. Estos son dos de ellos, suficientes para crear todo tipo de fechas y horas.
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.
EJEMPLOS
//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)
Objeto string javascript
Propiedades de String
Length
La clase String sólo tiene una propiedad: length, que guarda el número de caracteres del String.
Métodos de String
Los objetos de la clase String tienen una buena cantidad de métodos para realizar muchas cosas interesantes. Primero vamos a ver una lista de los métodos más interesantes y luego vamos a ver otra lista de métodos menos útiles.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)
Implementado en Javascript 1.2, 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. Acepta expresiones regulares como substring a buscar.
split(separador)
Este método sólo es compatible con javascript 1.1 en adelante. 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()
Este método lo tienen todos los objetos y se usa para convertirlos en cadenas.
Hasta aquí hemos visto los métodos que nos ayudarán a tratar cadenas. Ahora vamos a ver otros métodos que son menos útiles, pero hay que indicarlos para que quede constancia de ellos. Todos sirven para aplicar estilos a un texto y es como si utilizásemos etiquetas HTML. Veamos cómo.
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 <B>.
fixed()
Para utilizar una fuente monoespaciada, etiqueta <TT>.
fontColor(color)
Pone la fuente a ese color. Como utilizar la etiqueta <FONT color=el_color_indicado>.
fontSize(tamaño)
Pone la fuente al tamaño indicado. Como si utilizásemos la etiqueta <FONT> con el atributo size.
italics()
Pone la fuente en cursiva. Etiqueta <I>.
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 <SMALL>
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 <SUB>, de subíndice.
sup()
Como si utilizásemos la etiqueta <SUP>, de superíndice.
Arrays en javascript
Los arrays en Javascript empiezan siempre en la posición 0, así que un array que tenga por ejemplo 10 posiciones, tendrá casillas de la 0 a la 9. Para recoger datos de un array lo hacemos igual: poniendo entre corchetes el índice de la posición a la que queremos acceder. Veamos cómo se imprimiría en la pantalla el contenido de un array.
var miArray = new Array(3)
miArray[0] = 155
miArray[1] = 4
miArray[2] = 499
for (i=0;i<3;i++){
document.write("Posición " + i + " del array: " + miArray[i])
document.write("
")
}
En Javascript tenemos a nuestra disposición una manera resumida de declarar un array y cargar valores en un mismo paso. Fijémonos en el código siguiente:
var miArray = new Array(2)
miArray[0] = "Colombia"
miArray[1] = "Estados Unidos"
miArray[5] = "Brasil"
for (i=0;i<miArray.length;i++){
document.write("Posición " + i + " del array: " + miArray[i])
document.write("
")
}
var miArray = new Array(3)
miArray[0] = 155
miArray[1] = 4
miArray[2] = 499
for (i=0;i<3;i++){
document.write("Posición " + i + " del array: " + miArray[i])
document.write("
")
}
En Javascript tenemos a nuestra disposición una manera resumida de declarar un array y cargar valores en un mismo paso. Fijémonos en el código siguiente:
var arrayRapido = [12,45,"array inicializado en su declaración"]
El siguiente ejemplo nos servirá para conocer mejor los recorridos por los arrays, el funcionamiento de la propiedad length y la creación dinámica de nuevas posiciones. Vamos a crear un array con 2 posiciones y rellenar su valor. Posteriormente introduciremos un valor en la posición 5 del array. Finalmente imprimiremos todas las posiciones del array para ver lo que pasa.var miArray = new Array(2)
miArray[0] = "Colombia"
miArray[1] = "Estados Unidos"
miArray[5] = "Brasil"
for (i=0;i<miArray.length;i++){
document.write("Posición " + i + " del array: " + miArray[i])
document.write("
")
}
Para multiples dimensiones:
var temperaturas_cuidades = new Array(new Array (12,10,11), new Array(5,0,2),new Array(10,8,10))
var arrayMuchasDimensiones = [1, ["hola", "que", "tal", ["estas", "estamos", "estoy"], ["bien", "mal"], "acabo"], 2, 5];
alert (arrayMuchasDimensiones[0])
alert (arrayMuchasDimensiones[1][2])
alert (arrayMuchasDimensiones[1][3][1])
alert (arrayMuchasDimensiones[1][2])
alert (arrayMuchasDimensiones[1][3][1])
Break y Continue en Javascript
Existen dos instrucciones que se pueden usar en de las distintas estructuras de control y principalmente en los bucles, que te servirán para controlar dos tipos de situaciones. Son las instrucciones break y continue.:
- break: Significa detener la ejecución de un bucle y salirse de él.
- continue: Sirve para detener la iteración actual y volver al principio del bucle para realizar otra iteración, si corresponde.
Break
Se detiene un bucle utilizando la palabra break. Detener un bucle significa salirse de él y dejarlo todo como está para continuar con el flujo del programa inmediatamente después del bucle.for (i=0;i<10;i++){
document.write (i)
escribe = prompt("dime si continuo preguntando...", "si")
if (escribe == "no")
break
}
Este ejemplo escribe los números del 0 al 9 y en cada iteración del bucle pregunta al usuario si desea continuar. Si el usuario dice cualquier cosa continua, excepto cuando dice "no", situación en la cual se sale del bucle y deja la cuenta por donde se había quedado.
Continue
Sirve para volver al principio del bucle en cualquier momento, sin ejecutar las líneas que haya por debajo de la palabra continue.var i=0
while (i<7){
incrementar = prompt("La cuenta está en " + i + ", dime si incremento", "si")
if (incrementar == "no")
continue
i++
}
Do while en javascript
Bucle DO...WHILE
El bucle do...while es la última de las estructuras para implementar repeticiones de las que dispone en Javascript y es una variación del bucle while visto anteriormente. Se utiliza generalmente cuando no sabemos cuantas veces se habrá de ejecutar el bucle, igual que el bucle WHILE, con la diferencia de que sabemos seguro que el bucle por lo menos se ejecutará una vez.Este tipo de bucle se introdujo en Javascript 1.2, por lo que no todos los navegadores los soportan, sólo los de versión 4 o superior. En cualquiuer caso, cualquier código que quieras escribir con DO...WHILE se puede escribir también utilizando un bucle WHILE, con lo que en navegadores antiguos deberás traducir tu bucle DO...WHILE por un bucle WHILE.
La sintaxis es la siguiente.
do {
//sentencias del bucle
} while (condición)
El bucle se ejecuta siempre una vez y al final se evalúa la condición para decir si se ejecuta otra vez el bucle o se termina su ejecución.
Veamos el ejemplo que escribimos para un bucle WHILE en este otro tipo de bucle.
var color
do {
color = prompt("dame un color (escribe rojo para salir)","")
} while (color != "rojo")
While en javascript
Bucle WHILE
Estos bucles se utilizan cuando queremos repetir la ejecución de unas sentencias un número indefinido de veces, siempre que se cumpla una condición. Se más sencillo de comprender que el bucle FOR, pues no incorpora en la misma línea la inicialización de las variables su condición para seguir ejecutándose y su actualización. Sólo se indica, como veremos a continuación, la condición que se tiene que cumplir para que se realice una iteración.while (condición){
//sentencias a ejecutar
}
Un ejemplo de código donde se utiliza este bucle se puede ver a continuación.
var color = ""
while (color != "rojo"){
color = prompt("dame un color (escribe rojo para salir)","")
}
For en javascript
Un ejemplo de utilización de este bucle lo podemos ver a continuación, donde se imprimirán los números del 0 al 10.
var i
for (i=0;i<=10;i++) {
document.write(i)
document.write("
")
}
var i
for (i=0;i<=10;i++) {
document.write(i)
document.write("
")
}
Switch en javascript
La estructura SWITCH se incorporó a partir de la versión 1.2 de Javascript (Netscape 4 e Internet Explorer 4). Su sintaxis es la siguiente.
switch (expresión) {
case valor1:
Sentencias a ejecutar si la expresión tiene como valor a valor1
break
case valor2:
Sentencias a ejecutar si la expresión tiene como valor a valor2
break
case valor3:
Sentencias a ejecutar si la expresión tiene como valor a valor3
break
default:
Sentencias a ejecutar si el valor no es ninguno de los anteriores
}
switch (expresión) {
case valor1:
Sentencias a ejecutar si la expresión tiene como valor a valor1
break
case valor2:
Sentencias a ejecutar si la expresión tiene como valor a valor2
break
case valor3:
Sentencias a ejecutar si la expresión tiene como valor a valor3
break
default:
Sentencias a ejecutar si el valor no es ninguno de los anteriores
}
Ambito variables javascript
Como hemos dicho, en Javascript tenemos libertad para declarar o no las variables con la palabra var, pero los efectos que conseguiremos en cada caso serán distintos. En concreto, cuando utilizamos var estamos haciendo que la varible que estamos declarando sea local al ámbito donde se declara. Por otro lado, si no utilizamos la palabra var para declarar una variable, ésta será global a toda la página, sea cual sea el ámbito en el que haya sido declarada.
En el caso de una variable declarada en la página web, fuera de una función o cualquier otro ámbito más reducido, nos es indiferente si se declara o no con var, desde un punto de vista funcional. Esto es debido a que cualquier variable declarada fuera de un ámbito es global a toda la página. La diferencia se puede apreciar en una función por ejemplo, ya que si utilizamos var la variable será local a la función y si no lo utilizamos, la variable será global a la página. Esta diferencia es fundamental a la hora de controlar correctamente el uso de las variables en la página, ya que si no lo hacemos en una función podríamos sobreescribir el valor de una variable, perdiendo el dato que pudiera contener previamente.
<script>
var numero = 2
function miFuncion (){
numero = 19
document.write(numero) //imprime 19
}
document.write(numero) //imprime 2
//llamamos a la función
miFuncion()
document.write(numero) //imprime 19
</script>
En este ejemplo, tenemos una variable global a la página llamada numero, que contiene un 2. También tenemos una función que utiliza la variable numero sin haberla declarado con var, por lo que la variable numero de la funcion será la misma variable global numero declarada fuera de la función. En una situación como esta, al ejecutar la función se sobreescribirá la variable numero y el dato que había antes de ejecutar la función se perderá.
En el caso de una variable declarada en la página web, fuera de una función o cualquier otro ámbito más reducido, nos es indiferente si se declara o no con var, desde un punto de vista funcional. Esto es debido a que cualquier variable declarada fuera de un ámbito es global a toda la página. La diferencia se puede apreciar en una función por ejemplo, ya que si utilizamos var la variable será local a la función y si no lo utilizamos, la variable será global a la página. Esta diferencia es fundamental a la hora de controlar correctamente el uso de las variables en la página, ya que si no lo hacemos en una función podríamos sobreescribir el valor de una variable, perdiendo el dato que pudiera contener previamente.
<script>
var numero = 2
function miFuncion (){
numero = 19
document.write(numero) //imprime 19
}
document.write(numero) //imprime 2
//llamamos a la función
miFuncion()
document.write(numero) //imprime 19
</script>
En este ejemplo, tenemos una variable global a la página llamada numero, que contiene un 2. También tenemos una función que utiliza la variable numero sin haberla declarado con var, por lo que la variable numero de la funcion será la misma variable global numero declarada fuera de la función. En una situación como esta, al ejecutar la función se sobreescribirá la variable numero y el dato que había antes de ejecutar la función se perderá.
Manejo de cadenas de texto en javascript
Cadenas de texto
A continuación se muestran algunas de las funciones más útiles para el manejo de cadenas de texto:
length, calcula la longitud de una cadena de texto (el número de caracteres que la forman)
var mensaje = "Hola Mundo"; var numeroLetras = mensaje.length; // numeroLetras = 10
+, se emplea para concatenar varias cadenas de texto.
var mensaje1 = "Hola"; var mensaje2 = " Mundo"; var mensaje = mensaje1 + mensaje2; // mensaje = "Hola Mundo"
Además del operador +, también se puede utilizar la función concat()
var mensaje1 = "Hola"; var mensaje2 = mensaje1.concat(" Mundo"); // mensaje2 = "Hola Mundo"
Las cadenas también se pueden unir con variables numéricas:
var variable1 = "Hola "; var variable2 = 3; var mensaje = variable1 + variable2; // mensaje = "Hola 3"
Cuando se unen varias cadenas de texto es habitual olvidar añadir un espacio de separación entre las palabras:
var mensaje1 = "Hola"; var mensaje2 = "Mundo"; var mensaje = mensaje1 + mensaje2; // mensaje = "HolaMundo"
Los espacios en blanco se pueden añadir al final o al principio de las cadenas o indicarlos de forma explícita:
var mensaje1 = "Hola"; var mensaje2 = "Mundo"; var mensaje = mensaje1 + " " + mensaje2; // mensaje = "Hola Mundo"
toUpperCase(), transforma todos los caracteres de la cadena a sus correspondientes caracteres en mayúsculas:
var mensaje1 = "Hola"; var mensaje2 = mensaje1.toUpperCase(); // mensaje2 = "HOLA"
toLowerCase(), transforma todos los caracteres de la cadena a sus correspondientes caracteres en minúsculas:
var mensaje1 = "HolA"; var mensaje2 = mensaje1.toLowerCase(); // mensaje2 = "hola"
charAt(posicion), obtiene el carácter que se encuentra en la posición indicada:
var mensaje = "Hola"; var letra = mensaje.charAt(0); // letra = ‘H’ letra = mensaje.charAt(2); // letra = ‘l’
indexOf(letra), calcula la primera posición en la que se encuentra el carácter indicado dentro de la cadena de texto. Si la cadena no contiene el carácter, la función devuelve el valor -1:
var mensaje = "Hola"; var posicion = mensaje.indexOf('a'); // posicion = 3 posicion = mensaje.indexOf('b'); // posicion = -1
La función indexOf() comienza su búsqueda desde el principio de la palabra y solo devuelve la primera posición de todas las existentes. Su función análoga es lastIndexOf().
lastIndexOf(letra), calcula la última posición en la que se encuentra el carácter indicado dentro de la cadena de texto. Si la cadena no contiene el carácter, la función devuelve el valor -1:
var mensaje = "Hola"; var posicion = mensaje.lastIndexOf(‘a’); // posicion = 3 posicion = mensaje.lastIndexOf(‘b’); // posicion = -1
La función lastIndexOf() comienza su búsqueda desde el final de la cadena hacia el principio, aunque la posición devuelta es la correcta empezando a contar desde el principio de la palabra.
substring(inicio, final), extrae una porción de una cadena de texto. El segundo parámetro es opcional. Si solo se indica el parámetro inicio, la función devuelve la parte de la cadena original correspondiente desde esa posición hasta el final:
var mensaje = "Hola Mundo"; var porcion = mensaje.substring(2); // porcion = "la Mundo" porcion = mensaje.substring(5); // porcion = "Mundo" porcion = mensaje.substring(7); // porcion = "ndo"
Si se indica un inicio negativo, se devuelve la misma cadena original:
var mensaje = "Hola Mundo"; var porcion = mensaje.substring(-2); // porcion = "Hola Mundo"
Si se indica el inicio y el final, se devuelve la parte de la cadena original comprendida entre la posición inicial y la inmediatamente anterior a la posición final (es decir, la posición inicio está incluida y la posición final no):
var mensaje = "Hola Mundo"; var porcion = mensaje.substring(1, 8); // porcion = "ola Mun" porcion = mensaje.substring(3, 4); // porcion = "a"
Si se indica un final más pequeño que un inicio, JavaScript los considera de forma inversa, ya que automáticamente asigna el valor más pequeño al inicio y el más grande al final:
var mensaje = "Hola Mundo"; var porcion = mensaje.substring(5, 0); // porcion = "Hola " porcion = mensaje.substring(0, 5); // porcion = "Hola "
split(separador), convierte una cadena de texto en un array de cadenas de texto. La función parte una cadena de texto dividiendo sus trozos a partir del carácter delimitador indicado:
var mensaje = "Hola Mundo, soy una cadena de texto!"; var palabras = mensaje.split(" "); // palabras = ["Hola", "Mundo,", "soy", "una", "cadena", "de", "texto!"];
Con esta función se pueden extraer fácilmente las letras que forman una palabra:
var palabra = "Hola"; var letras = palabra.split(""); // letras = ["H", "o", "l", "a"]
Deteccion dispositivo javascript
function detectBrowser() { var useragent = navigator.userAgent; var mapdiv = document.getElementById("map_canvas"); if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) { mapdiv.style.width = '100%'; mapdiv.style.height = '100%'; } else { mapdiv.style.width = '600px'; mapdiv.style.height = '800px'; } }
Suscribirse a:
Entradas (Atom)