NorfiPC
NorfiPC » Informaciones de Windows » Lista de variables y funciones de Javascript

Lista de variables y funciones de Javascript para usar en las 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, útiles para agregarle funcionalidad y dinamismo a las páginas web, códigos y ejemplos prácticos para copiar y pegar.
Variables y funciones de Javascript Lista de 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.



Usar Javascript en la práctica


A continuación se muestra una sencilla recopilación de variables y funciones de Javascript, que se pueden emplear en las páginas web en multitud de funciones.

¿Que son las variables de Javascript?


Son porciones de código que devuelven una información específica, por ejemplo direcciones web, título de páginas, datos del navegador utilizado, datos del sitio web, etc.
También pueden usarse en sencillas funciones como cambiar la posición o el tamaño de la ventana abierta por el navegador, ejecutar acciones cuando se inicie una página, mostrar mensajes, solicitar confirmación del usuario, redireccionar a otras páginas, mostrar diferentes paginas dependiendo del navegador que se emplee, en fin infinidad de funciones.
Con un poco de imaginación podemos utilizarlas para agregarle funcionalidad y dinamismo a cualquier página.
También nos pueden ayudar a comprender el funcionamiento de la inmensa cantidad de javascript que es común encontrar en el código de cualquier página en la actualidad.
Las variables son indispensables si queremos crear sencillas funciones o nuestros propios Bookmarklets, para utilizarlos, e inclusive compartirlos en la red.

Leyenda

Color violeta = Código
Color azul = Resultado de ejemplos
Color verde = Vínculos de demostración



¿Cómo utilizar las variables y funciones de Javascript?


Para mostrar la información que devuelve una variable o ejecutar una función puede hacerse de varias formas:

Usar "document.write"


1- Escribiendo el resultado en la página mediante document.write cuyas opciones aparecen más abajo, por ejemplo de la siguiente forma se escribe la dirección URL de la página actual.
<script type="text/javascript">document.write(location.href)</script>
La función document.write tiene la gran desventaja que si se llama mediante un evento (un link, un botón, etc.) después de estar la página cargada, la destrozará y escribirá el resultado de la variable o la información en una nueva ventana.

Usar "innerHTML"


2- Otra forma es escribiendo de forma dinámica mediante innerHTML, método un poco más sofisticado pero que permite agregar y cambiar el contenido de la página, respetando los otros elementos que la componen.

Usar cuadros de alertas


3- Utilizando alertas, método sencillo y practico que abre una pequeña ventana o cuadro de dialogo donde aparece el resultado de la variable y el texto que se adicione, es el método que más se utiliza en los ejemplos que se incluyen en esta página para una mejor comprensión.
Para crear una alerta hazlo de cualquiera de las siguientes formas:

Mediante un link
<a href="javascript:alert(VARIABLE);">NombreLink</a>
<a href="javascript:alert('texto'+VARIABLE);">NombreLink</a>
<a href="javascript:alert('texto+VARIABLE+'texto');">NombreLink</a>

Para impedir que al presionar el link el navegador salga de la página actual, se utiliza void 0 al final, por ejemplo:
<a href="javascript:alert(VARIABLE);void 0">NombreLink</a>

Mediante un boton
<input type="button" value="NombreBoton" onclick="alert(VARIABLE);" />
<input type="button" value="NombreBoton" onclick="alert('texto'+VARIABLE);" />
<input type="button" value="NombreBoton" onclick="alert('texto+VARIABLE+'texto');" />

Mediante otros eventos
De forma similar se pueden ejecutar funciones mediante cualquier evento (acciones que pueden ser detectadas por Javascript).
El más utilizado de ellos es onclick, pero existen varios, todos ellos se pueden utilizar en cualquier elemento HTML.
Algunos ejemplos:
<a href="javascript:FUNCIÓN;">NombreLink</a>
<input type="button" value="NombreBoton" onclick="FUNCIÓN;" />
<div onclick="FUNCIÓN;">Texto</div>
Lee mas información: Lista de eventos de Javascript códigos y ejemplos prácticos.

Interprete de variables de Javascript

Puedes utilizar la siguiente aplicación para probar cualquier variable de JavaScript, ya sea global o propia de esta página.
Para usarla escríbela o pégala en el cuadro de texto y al presionar el botón "Probar" mostrará el resultado en un cuadro de alerta. Curiosamente funciona usando las variables y funciones que se muestran en esta misma página.





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.
Los vínculos abren cuadros de diálogos o alertas, para mostrar el resultado de la variable o ejecutar la función y evitar salir de la página actual.
Cualquiera de las variables puedes copiarla y pegarla en el "Intérprete" más arriba para probarla.

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



¿Necesitas buscar algo en nuestro sitio? ¡Usa a Google!


 
Anterior |  Subir  | Siguiente