Inf » Variables de Javascript
Lista de variables y funciones de JavaScript para usar en páginas web a6q3
Recopilación de las variables y funciones de Javascript más empleadas en el diseño y la programación web, las interpretan la gran mayoría de los navegadores, para agregarle funcionalidad y dinamismo a las páginas web, códigos y ejemplos prácticos.
Javascript es un lenguaje de programación, es muy usado en el ámbito de la creación y del diseño web ya que posee varias características que lo hacen ideal, por ejemplo:
• Funciones y variables sencillas, fácil de comprender y utilizar, aun sin ser experto en el lenguaje, solo copiando y pegando porciones de código.
• Es un lenguaje interpretado, es decir solo es ejecutado por el navegador web, no por el sistema operativo.
• Funciona del lado del cliente, es decir la página web solo se carga una vez del servidor y posteriormente las funciones que contiene se ejecutan sin tener que recargarla, diferente a lenguajes como PHP que son lenguajes de servidor.
Lo usamos en varias páginas de nuestro sitio para agregarles interactividad y funciones útiles a las páginas y además para crear varias herramientas web, que se pueden usar online.• Es un lenguaje interpretado, es decir solo es ejecutado por el navegador web, no por el sistema operativo.
• Funciona del lado del cliente, es decir la página web solo se carga una vez del servidor y posteriormente las funciones que contiene se ejecutan sin tener que recargarla, diferente a lenguajes como PHP que son lenguajes de servidor.
Los que no estén familiarizados con este lenguaje y sientan curiosidad, pueden leer en otro artículo una sencilla introducción.
En esta página compartimos una recopilación de variables y funciones de JavaScript, que se pueden emplear en las páginas web en multitud de funciones.
Lista de las variables y funciones de JavaScript 51596v
Lista de las variables y funciones de JavaScript compatibles con la mayor parte de los navegadores y más utilizadas y útiles en las páginas web.
Están agrupadas por su clasificación.
Las variables se pueden probar usando los enlaces marcados con el color verde o copiándolas y pegándolas en el siguiente "Interprete de JavaScript", herramienta que permite probar cualquier variable ya sea global o propia de esta página.
Interprete de variables de Javascript
Document Object n1c3i
Al ser cargada una página web por el navegador, Windows la considera como un objeto, por lo que las siguientes variables devuelven información como si la página fuera un objeto.| document.title | Muestra el título de la página actual |
| document.URL | Muestra la dirección URL de la página actual |
| document.referrer | Muestra la dirección URL de la página que dirigió a la actual |
| document.lastModified | Fecha de la última modificación de la página |
| document.domain | Muestra el nombre de dominio del sitio web |
| document.cookie | Muestra las cookies guardadas por este sitio web en tu equipo |
| document.links.length | Muestra el número de links en la página |
| document.links[0].innerHTML | Muestra el nombre del primer link |
| document.links[1].innerHTML | Muestra el nombre del segundo link |
| document.anchors.length | Número de anchors en la página |
| document.forms.length | Número de formas en la página |
| document.forms[0].name | Muestra el nombre de la primera forma |
| document.images.length | Número de imágenes en la página |
| document.images[0].id | Muestra la identidad (ID) de la primera imagen |
| document.getElementById() | Permite identificar un elemento en una página por su identidad (ID), entonces ejecuta una acción, en este caso se emplea:
document.getElementById('test').innerHTML='Hola';void 0
(test es un DIV o contenedor con dicha identidad en la página, innerHTML='Hola' escribe el texto indicado y void 0 se utiliza para evitar que el navegador cargue una nueva página). |
| document.write() | Escribe texto, código o el resultado de una variable en una página, se usa de las siguientes formas:
document.write('texto') document.write(variable) document.write('texto'+variable) document.write('texto'+variable+'texto') |
Navigator Object 32m14
Las siguientes variables devuelven información del navegador usado para cargar la página.| navigator.appCodeName | Devuelve el código del nombre del navegador web con que se carga la página |
| navigator.appName | Devuelve el nombre del navegador |
| navigator.appVersion | Versión del navegador |
| navigator.cookieEnabled | Comprueba si están habilitadas las cookies en el navegador (true=Si, false=No) |
| navigator.platform | Plataforma del navegador |
| navigator.Agent | Agente de enviado por el navegador al servidor |
| navigator.javaEnabled | Se comprueba si está habilitada Java en el navegador (true=Si, false=No) |
Location Object 6g4144
| location.host | Devuelve el nombre del host de una dirección web |
| location.hostname | Similar al anterior |
| location.href | Devuelve la dirección URL completa |
| location.pathname | Devuelve solo la ruta relativa en el servidor a la pagina |
| location.port | Devuelve el número del puerto usado |
| location.protocol | Muestra el protocolo usado (http, https, file, ftp, etc.) |
| location.reload() | Vuelve a cargar la página (window.location.reload(true)) |
| location.href | Encadenando location.href se refresca el contenido de la página (vuelve a cargarla), en este caso se usa: location.href=location.href |
| Ver el código fuente de la página | Para eso se encadena de la siguiente forma: location.href = 'view-source:' + window.location.href(No funciona en Internet Explorer) |
History Object 5m1u4g
| history.length | Devuelve la cantidad de direcciones URL en la lista del historial |
| history.back() | Página anterior en el historial |
| history.forward() | Página siguiente en el historial |
| history.go() | Carga una página determinada del historial, en este caso se emplea: history.go(0)por lo que recarga la página actual, similar a usar la tecla F5 |
Screen Object 1i5i6v
| screen.height | Devuelve la altura total de la pantalla en pixeles |
| screen.width | Devuelve el ancho total de la pantalla en pixeles |
| screen.availHeight | Devuelve la altura de la pantalla disponible en pixeles |
| screen.availWidth | Devuelve el ancho de la pantalla disponible en pixeles |
| screen.colorDepth | Profundidad de color de la pantalla para mostrar imágenes |
| screen.pixelDepth | Resolución del color en bits por pixel de la pantalla |
Window Object 6c5h42
| window.onload | Ejecuta una función o varias inmediatamente después de que termine la carga de la página por completo, en este caso se emplea una alerta que se muestra al entrar a la página. El código usado es:
<script type="text/javascript"> Este código se debe insertar en el final de la página, justo antes del cierre de la etiqueta </body>window.onload=alert('Hola, Bienvenido a Javascript') </script> |
| window.parent.location | Devuelve la dirección URL de la página actual |
| window.parent.location | Conduce a una dirección web, en este ejemplo: window.parent.location='http://norfipc.descargarjuegos.org' |
| window.alert() | Muestra una ventana de alerta con un mensaje: window.alert('Mensaje') |
| window.confirm() | Confirmación, muestra un cuadro de dialogo con un mensaje, un botón Aceptar y uno Cancelar: window.confirm('Desea?....') Generalmente se usa encadenada con otra función |
| window.prompt() | Muestra un cuadro de dialogo que inquiere al por una respuesta, se usa: window.prompt('Mensaje','Quiere..?') Al igual que la anterior se usa con una función que se ejecuta en caso del oprimir el botón Aceptar |
| window.open() | Abre una nueva ventana o pestaña según como se emplee, ninguna de las variantes funciona en el navegador Internet Explorer por cuestiones de seguridad. |
| window.open() | En este ejemplo se abre una nueva ventana llamada "new", para eso se emplea el siguiente código:
nv=window.open('','new','width=344,height=444,left=50,top=50')
Mas información sobre todas las opciones de window.open() en la siguiente página: Como abrir links de una página web en una nueva ventana con Internet Explorer y otros navegadores. |
| close() | Cierra una ventana, en este ejemplo cierra la ventana abierta anteriormente: nv.close() |
| window.open() | En este ejemplo se emplea window.open() para abrir una nueva pestaña |
| close() | Cierra la pestaña abierta anteriormente |
| top.close() | Cerrar pestaña |
| window.name | Muestra el nombre de una ventana, se emplea:
nv=window.open('','new','width=344,height=444'); nv.document.write('Esta ventana se llama: ' + nv.name)
|
| window.innerHeight | Muestra la altura en pixeles del tamaño de la ventana del navegador (No es compatible con Internet Explorer) |
| window.innerWidth | Muestra el ancho en pixeles del tamaño de la ventana del navegador (No es compatible con Internet Explorer) |
| window.print() | Imprime el contenido de la ventana. Más información sobre las opciones para utilizar window.print(), puedes leerla en la siguiente página: Como imprimir solo un área, parte o sección de una página web |
| window.resizeBy() | Este método cambia de tamaño la ventana del navegador, mueve la esquina derecha inferior de la ventana, la cantidad de pixeles que se determine, ya sea positiva un incremento o negativa una reducción, la esquina superior izquierda permanecerá inmóvil. En este ejemplo se emplea: window.resizeBy(100,100)lo que incrementa en 100 pixeles su tamaño en cada eje (no funciona en Opera y Chrome). |
| window.resizeTo() | Ajusta el tamaño de la ventana al número de pixeles que se determine, en este ejemplo se emplea: window.resizeTo(1000,800) |
| window.scrollBy() | Desplaza el contenido de la ventana en un determinado número de pixeles, hacia arriba o hacia abajo según se establezca de forma positiva o negativa, en este ejemplo se emplea: window.scrollBy(50,-50) Combinando la function window.scrollBy con setTimeout se puede hacer que la página vaya desplazándose continuamente, se puede iniciar la función al cargar la página mediante el evento onload o con un vínculo de la siguiente forma:
<script type="text/javascript"> Scroll STOPfunction pageScroll() {window.scrollBy(0,30); scrolldelay = setTimeout('pageScroll()',800);} function stopScroll() {clearTimeout(scrolldelay);} </script> <a href="javascript:pageScroll()">Scroll</a> <a href="javascript:stopScroll()">STOP</a> |
| window.scrollTo() | Dezplaza el contenido de la ventana a unas coordenadas específicas, en este caso se usa: window.scrollTo(750,650) |
| window.moveTo() | Mueve la ventana del navegador a una posición específica en la pantalla definida en pixeles, en este caso: window.moveTo(222,222) |
| window.moveBy() | Mueve la ventana del navegador a una ubicación en relación con su posición actual determinada en pixeles, en este caso: window.moveBy(200,300) |
| window.screenLeft | Muestra el número de pixeles distantes a la pantalla, del borde izquierdo de la ventana al borde izquierdo de la pantalla (Solo Internet Explorer) |
| window.screenTop | Muestra el número de pixeles distantes a la pantalla, del borde superior de la ventana al borde superior de la pantalla (Solo Internet Explorer) |
| window.screenX | Muestra el número de pixeles distantes a la pantalla, del borde izquierdo de la ventana al borde izquierdo de la pantalla (Firefox y Google Chrome) |
| window.screenY | Muestra el número de pixeles distantes a la pantalla, del borde superior de la ventana al borde superior de la pantalla (Firefox y Google Chrome) |
| document.documentElement.clientHeight | Muestra la altura en pixeles del tamaño de la ventana del navegador (Todos los navegadores) |
| document.documentElement.clientWidth | Muestra el ancho en pixeles del tamaño de la ventana del navegador (Todos los navegadores) |
Mensajes de error de Javascript 5n54p
En ocasiones al solicitar el resultado de una variable Javascript devuelve los siguientes mensajes predeterminados:
NaN = "Not-a-Number", significa que el resultado no es un número.
Undefined = Indica que a la variable no se le ha asignado ningún valor.
Infinity = Significa un valor imposible de representar.
Undefined = Indica que a la variable no se le ha asignado ningún valor.
Infinity = Significa un valor imposible de representar.
Herramientas 5b304
Bookmarklet para probar funciones y variables de Javascript, no funciona en Internet Explorer.
En otros navegadores abre una pequeña ventana a la izquierda donde se puede escribir o pegar una variable o función y probarla.
Arrástralo a la barra de marcadores del navegador para guardarlo y usarlo posteriormente.
Editor Javascript
Páginas con información sobre cómo usar las funciones de Javascript w4v8
Como hacer las redirecciones de páginas web usando JavascriptLa fecha y hora escrita con Javascript 1i3052
Lee toda la información en la siguiente página: Como mostrar la fecha y hora en las páginas web usando Javascript
Recursos relacionados 2q4l6h
Plantilla con las funciones de JavaScript para manipular los elementos HTML del DOM de las páginas: JavaScript DOM Cheatsheet
Páginas relacionadas 3q3gj
✓ Lista de eventos de Javascript códigos y ejemplos prácticos.
✓ Librerías JavaScript, usos, diferencias y donde cargarlas
✓ JQuery, ejemplos prácticos para usar en páginas web
✓ JQuery UI, efectos, animaciones y widgets para páginas web
✓ Javascript fácil en páginas web, tutorial y ejemplos.
✓ Como escribir con Javascript texto y otros elementos en las páginas web
✓ Como hacer tus propios Bookmarklets con Javascript.
✓ Como cambiar y modificar el estilo CSS de las páginas web con Javascript.
✓ Librerías JavaScript, usos, diferencias y donde cargarlas
✓ JQuery, ejemplos prácticos para usar en páginas web
✓ JQuery UI, efectos, animaciones y widgets para páginas web
✓ Javascript fácil en páginas web, tutorial y ejemplos.
✓ Como escribir con Javascript texto y otros elementos en las páginas web
✓ Como hacer tus propios Bookmarklets con Javascript.
✓ Como cambiar y modificar el estilo CSS de las páginas web con Javascript.