NorfiPC
NorfiPC » Inf » Variables de Javascript

Lista de variables y funciones de JavaScript para usar en páginas web

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.
Variables y funciones de Javascript

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.
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


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

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.titleMuestra el título de la página actual
document.URLMuestra la dirección URL de la página actual
document.referrerMuestra la dirección URL de la página que dirigió a la actual
document.lastModifiedFecha 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')
Lee más información sobre las opciones y el uso de document.write y innerHTML en la siguiente página: Como escribir con Javascript texto y otros elementos en las páginas web

Navigator Object

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.userAgent Agente de usuario enviado por el navegador al servidor
navigator.javaEnabled Se comprueba si está habilitada Java en el navegador (true=Si, false=No)

Location Object

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

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

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

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">
window.onload=alert('Hola, Bienvenido a Javascript')
</script>
Este código se debe insertar en el final de la página, justo antes del cierre de la etiqueta </body>
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.com'
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 usuario 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 usuario 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">
function 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>
Scroll STOP
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


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.

Herramientas


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

Como usar la función SetTimeout para retrasar las ejecución de una función
Como hacer las redirecciones de páginas web usando Javascript

La fecha y hora escrita con Javascript


Lee toda la información en la siguiente página: Como mostrar la fecha y hora en las páginas web usando Javascript

Páginas relacionadas