Tutoriales de Javascript

« 1/4 2 3 4 »

Sintaxis: var array_elementos= elemento.getElementsByTagName(tag);

Sirve para obtener un array con todos los elementos con un tag concreto que están contenidos dentro de un elemento. Veamos un ejemplo. Queremos cambiar el color del texto de todos los elementos con tag “A” contenidos dentro del elemento con id “links”:

<a href=”/”>Home</a>
<div id=”links”>
<a href=”http://google.com”>Google</a>
<a href=”http://ubuntu.com”>Ubuntu</a>
<a href=”http://debian.org”>Debian</a>
</div>
<script type=”text/javascript”>
// Obtenemos el elemento con id “links”
var el = document.getElementById(“links”);
// Ahora obtenemos todos los elementos con tag A que hay
// dentro del elemento 'el'
var as = el.getElementsByTagName(“A”);
// Y finalmente recorremos el array de elementos para
// cambiarles el color a cada uno
for (var i=0; i<as.length; i++) {
as[i].style.color = '#000'; // negro
}
</script> 
Autor: maestrosdelweb.com

Sintaxis: var elemento = document.getElementById(id);

Este método pertenece al objeto document. Con él obtendremos el objeto que hace referencia al elemento con un id concreto. Por ejemplo, queremos obtener el objeto del elemento “status”:

<div>
<span id=”status”>Hola mundo...</span>
</div>
<script type=”text/javascript”>
// Obtenemos el elemento “status”
var el = document.getElementById(status);
// Mostramos mediante una alerta el contenido del elemento
alert(el.innerHTML);
</script> 
Autor: maestrosdelweb.com
Sintaxis: elemento.removeChild(hijo);

Este método es usado para eliminar elementos. Se elimina el elemento hijo del objeto. Si queremos eliminar un objeto concreto, tendremos que hacerlo de la siguiente manera:

// Obtenemos el elemento
var el = document.getElementById(“elemento-a-eliminar”);
// Obtenemos el padre de dicho elemento
// con la propiedad “parentNode”
var padre = el.parentNode;
// Eliminamos el hijo (el) del elemento padre
padre.removeChild(el)
Autor: maestrosdelweb.com

Uso: alert(mensaje);
var resultado = confirm(mensaje);
var resultado = prompt(mensaje, valor);
 

Con estos métodos (objeto window) mostraremos ventanas modales al usuario. Con alert() simplemente, como hemos visto en otros puntos, mostraremos un mensaje. Con confirm() haremos exactamente lo mismo, pero además obligará al usuario a seleccionar entre dos opciones, una positiva y otra negativa, que se devolverá como parámetro (boolean). Y con prompt() pediremos al usuario que introduzca un texto en una ventana modal. Veamoslo con un ejemplo: 

// Pedimos al usuario que introduzca su nombre
var nombre = prompt(“Introduzca su nombre”);
// Pedimos confirmación
if (confirm(“¿Seguro que su nombre es ”+nombre+”?”)) {
// Respuesta afirmativa...
alert(“Hola ”+nombre);
}

confirm() es muy útil para confirmar clics en enlaces comprometidos, que hagan operaciones críticas como eliminación de datos.

<a href=”http://miweb.com/delete/record?id=123onclick=”return confirm('¿Está seguro?');”>
Eliminar registro</a>

Existen muchos más métodos a nuestra disposición, aunque hay que tener en cuenta que Internet Explorer no cumple el estándar ECMAScript/DOM (entre otros tantos estándares web), y puede que un método no funcione igual en IE que en Firefox o Safari. Aprenderse el DOM es fundamental para poder llegar a ser un buen profesional, pero por suerte para nosotros existen librerías Javascript que nos harán la vida mucho más fácil, como jQuery, la sensación del momento entre los programadores Javascript. 

Autor: maestrosdelweb.com

Para cerrar la ventana del navegador debemos utilizar el método close() del objeto window de la vetana que deseamos cerrar. Es muy sencillo, aun así, vamos a ver un ejemplo sobre cerrar ventanas.

El ejemplo consta de una página que tiene un botón que abre una ventana secundaria o popup. Además, tendrá otro botón que cerrará la ventana secundaria. Por su parte, la ventana secundaria tendrá un botón que permitirá cerrarse a ella misma. Luego de tratar este ejemplo comentaremos el caso especial de cerrar la ventana principal desde el popup y las pegas que tiene.

Veamos el ejemplo en marcha y así comentaremos con más facilidad los códigos.

La página principal tendría esta forma:

<html>
<head>
<title>Ventana Principal</title>
<script>
//creamos la variable ventana_secundaria que contendrá una referencia al popup que vamos a abrir
//la creamos como variable global para poder acceder a ella desde las distintas funciones
var ventana_secundaria
 
function abrirVentana(){
//guardo la referencia de la ventana para poder utilizarla luego
ventana_secundaria = window.open("cerrar_window2.html","miventana","width=300,
height=200,menubar=no"
)
}
 
function cerrarVentana(){
//la referencia de la ventana es el objeto window del popup. Lo utilizo para acceder al método close
ventana_secundaria.close()
}
</script>
</head>
 
<body>
Esta es la ventana principal
<form>
<input type=button value="Abrir ventana secundaria" onclick="abrirVentana()">
<br>
<br>
<input type=button value="Cerrar ventana secundaria" onclick="cerrarVentana()">
</form>
 
</body>
</html>


Contiene un script en la cabecera de la página con las funciones para abrir y cerrar la ventana. Además, como ya se indicó anteriormente en este manual, se debe guardar una referencia a la ventana que se acaba de abrir para poder realizar acciones sobre ella posteriormente, en este caso cerrarla. Como la referencia de la ventana se crea en la función abrirVentana() y luego se utilizará en la función cerrarVentana(), dicha referencia deberá declararse como global o de lo contrario sólo tendría validez mientras la función abrirVentana() estuviera ejecutándose y, cuando pretendiésemos utilizarla en la función cerrarVentana(), nos diría que esa referencia ya no existe.

Así que disponemos de una referencia global a la ventana que va a abrirse y dos funciones que abren el popup guardando la referencia y cerrar el popup utilizando la referencia de la ventana a cerrar. Estas dos funciones se llaman desde dos botones de la página, que hemos colocado dentro de un formulario. Podemos poner en marcha la página en una ventana aparte.

Nota: Hay que señalar que puede haber un error javascript si se pretende cerrar la ventana antes de abrirla. Para evitarlo podemos controlar que realmente la ventana está abierta antes de ejecutar el método close() de su objeto window, pero esa es una práctica que veremos en ejercicios más adelante.

Por su parte, el popup tiene un código como el siguiente.

<html>
<head>
<title>Ventana Secundaria</title>
<script>
function cerrarse(){
window.close()
}
</script>
</head>
 
<body>
 
Esta es la ventana del popup
 
<form>
<input type=button value="Cerrar" onclick="cerrarse()">
</form>
 
</body>
</html>


Contine tan solo una función para cerrarse ella misma, que lo único que hace es ejecutar el método close() sobre su propio objeto window. También hemos colocado un botón que se ha configurado para llamar a la función que cierra la ventana cuando se le haga clic.

 

Autor: Miguel Angel Alvarez

Un sencillo código JavaScript que permite determinar el idioma y país del visitante, detectando el lenguaje configurado en el navegador que esté utilizando.

El Script consta de una llamada al objeto navigator.userLanguage el cual detecta la configuración de lenguaje del navegador.

idioma_navegador = navigator.userLanguage;

Si imprimos el valor de la variable idioma_navegador la misma contendrá:

idioma_navegador = navigator.userLanguage; document.write (idioma_navegador); undefined

También podemos incorporar una estructura switch() con los países deseados y comparar el valor para así detectar el país del usuario:

switch (idioma_navegador){
case "es-ar":
pais = "Argentina";
break;
case "es-es":
pais = "España";
break;
case "es-cl":
pais = "Chile";
break;
case "es-mx":
pais = "Mexico";
break;
case "es-co":
pais = "Colombia";
break;
case "es-ec":
pais = "Ecuador";
break;
case "es-py":
pais = "Paraguay";
break;
case "es-pe":
pais = "Peru";
break;
case "es-uy":
pais = "Uruguay";
break;
case "es-ve":
pais = "Venezuela";
break;
default :
pais = "Otro";
break;
}

Para detectar el idioma, es necesario armar otra estuctura switch, pero esta vez comparando los dos primeros caracteres de la variable idioma_navegador. Para ello debemos tomar la cadena (Por ejemplo: es-ar) y recuperar los dos primeros caracteres (es) utilizando substring():

idioma = idioma_navegador.substring(0,2)

Código completo: detectar país del visitante

<script language="JavaScript">
idioma_navegador = navigator.userLanguage;

switch (idioma_navegador){
case "es-ar":
pais = "Argentina";
break;
case "es-es":
pais = "España";
break;
case "es-cl":
pais = "Chile";
break;
case "es-mx":
pais = "Mexico";
break;
case "es-co":
pais = "Colombia";
break;
case "es-ec":
pais = "Ecuador";
break;
case "es-py":
pais = "Paraguay";
break;
case "es-pe":
pais = "Peru";
break;
case "es-uy":
pais = "Uruguay";
break;
case "es-ve":
pais = "Venezuela";
break;
default :
pais = "Otro";
break;
}

document.write (pais);
</script>

Nota: el objeto navigator.userLanguage es una capacidad que sólo funciona si el usuario utiliza Internet Explorer 4 o superior.

Autor: Fabian Muller

Aquí os dejo unas líneas de mi cosecha, en la creación de un script Javascript que he tenido que hacer para comprobar el estado de elementos checkbox o casillas de verificación de formularios.

Se trata de utilizar las típicas casillas de verificación pero con un limitador de grupo. Se puede utilizar en quinielas de varios resultados, en los futuros test de las autoescuelas con la posibilidad de marcar varias respuestas, etc.

Tenemos una serie de grupos de checkbox y lo que queremos hacer es asegurarnos que en cada grupo, de manera independiente, no se hayan marcado más de un número definido de casillas. Por ejemplo, tenemos x grupos de 3 casillas de verificación cada uno. Si el usuario marca una casilla de casillas de uno de los grupos no pasa nada. Si marca 2 casillas tampoco pasa nada, pero si intenta marcar los tres checkbox del grupo Javascript no lo permite y muestra un mensaje de error.

Podemos ver el ejemplo en marcha para hacernos una idea más concreta.

Formulario HTML

Vamos a tener un formulario con, en este caso, dos grupos de casillas de verificación.

<form action="" method="post" enctype="multipart/form-data" name="formulario" id="formulario">
<table width="76">
<td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox1,0)'
name
='checkbox1' value='checkbox1'></td>
<td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox2,0)'
name
='checkbox2' value='checkbox2'></td>
<td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox3,0)'
name
='checkbox3' value='checkbox3'></td>
<tr>
<td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox4,1)'
name
='checkbox4' value='checkbox4'></td>
<td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox5,1)'
name
='checkbox5' value='checkbox5'></td>
<td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox6,1)'
name
='checkbox6' value='checkbox6'></td>
</tr>
</table>
</form>

Como podemos ver, el nombre de cada casilla es distinto. Y además tenemos una función que se ejecuta cuando se pulsa sobre el checkbox (evento onclick), que será la encargada de realizar la verificación.

Función para verificar checkbox por grupos

Veamos el código javascript que utilizamos para realizar la comprobación de que varios checkbox no puedan estar pulsados a la vez en el mismo grupo.

Primero definimos un par de variables globales, que utilizaremos para definir las casillas máximas que pueden estar marcadas al mismo tiempo, y otra para llevar la cuenta de las casillas que hay marcadas en cada grupo.

//Número máximo de casillas marcadas por cada fila
var maxi=2;

//El contador es un arrayo de forma que cada posición del array es una linea del formulario
var contador=new Array(0,0);

Ahora la función que realizará la cuenta de casillas e informará de un posible fallo en la comprobación, si se pulsan más que las que se debe. 

function validar(check,grupo) {
//Compruebo si la casilla está marcada
if (check.checked==true){
//está marcada, entonces aumento en uno el contador del grupo
contador[grupo]++;
//compruebo si el contador ha llegado al máximo permitido
if (contador[grupo]>maxi) {
//si ha llegado al máximo, muestro mensaje de error
alert('No se pueden elegir más de '+maxi+' casillas a la vez.');
//desmarco la casilla, porque no se puede permitir marcar
check.checked=false;
//resto una unidad al contador de grupo, porque he desmarcado una casilla
contador[grupo]--;
}
}else {
//si la casilla no estaba marcada, resto uno al contador de grupo
contador[grupo]--;
}
}

La función recibe dos parámetros. Primero el campo de formulario checkbox que se ha pulsado. Luego el número de grupo al que pertenece ese checkbox.

El checkbox lo necesita para conocer su estado y para cambiarlo si fuera necesario. El grupo lo utiliza para saber a qué contador debe referirse, para saber el número de casillas que hay pulsadas en ese grupo.

La función está comentada para facilitar su lectura y comprensión.

El ejemplo en marcha se puede ejecutar en una venta aparte .

Autor: Javier Bernal Lérida

Una de las premisas mas importantes planteadas al diseñar mediante el uso de estándares es la separación de capas lógicas, es decir, por un lado tenemos el maquetado, que se representa mediante lenguaje (x)html, por otra parte esta el diseño visual, que normalmente se adjunta mediantes hojas de estilo (css) hasta aquí todo esta muy claro.

Pero que ocurre con el comportamiento que se le quiera asignar a algunos objetos del documento, aquí es donde entra en juego el lenguaje JavaScript.

Imaginemos por ejemplo que tenemos un enlace al que le queremos dar una funcionalidad un poco diferente al resto, abrirlo en una ventana nueva por ejemplo, a la mayoría lo primero que nos viene en mente es hacer algo mas o menos similar a lo siguiente:

<a href="popup.html" onclick="window.open('popup.html', 
'width=400,height=450,resizable=yes')"
>Abrir popup</a>

Lamentablemente esta línea acaba con toda nuestra teoría de separación de capas, por fortuna, existen maneras alternativas para asignar eventos usando JavaScript, en el caso concreto de este ejemplo una manera mas limpia de realizar lo mismo necesitaba algo mas de código para poder llevarse a cabo.

Primero tendremos que asignar una identidad única al enlace, y luego mediante el DOMDocument Object Model asignaremos el evento a dicha id, algo más o menos tal que así.

<a href="popup.html" id="mypopup">Abrir popup</a> 
<script type="text/javascript">
var x = getElementByID('mypopup');
x.onclick = function() {
window.open('popup.html', 'width=400,height=450,resizable=yes')
}
</script>

Sencillo, ¿no? bueno, quizás no resulte tan sencillo, pero gracias a mentes inquietas como la de Ben Nolan , disponemos de algunas herramientas que si que hacen que resulte una tarea sencilla.

Me refiero a behaviour , una librería JavaScript basada en la función document.getElementsBySelector escrita por Simon Willison . Este fantástico “trozo de código” nos permite olvidarnos de programar complejas funciones que asignen eventos según clase, id o selector.

Continuando con el ejemplo anterior, si incluimos esta librería podemos conseguir el mismo efecto asignando la función directamente al id seleccionado,

<script type="text/javascript"> 
var myrules = {
'#mypopup' : function(element){
element.onclick = function(){
window.open('popup.html', 'width=400,height=450,resizable=yes')
}
}
};
Behaviour.register(myrules);
</script>
Personalmente creo que resulta una librería de inmensa utilidad, ahora solo falta ver como
poder sacarle partido de manera óptima.
 
Autor: Alex Sancho

Ahora les mostramos un menú en javascript que esta formado de pestañas y al presionar una de ellas el contenido cambia, dando la apariencia que jira. Este menú es un excelente recurso que no puede faltar en tu web.

El html utilizado es un conjunto de listas y div en donde se encuentra el contenido del menú. La lista ul clase ‘buttons’ es la mas importante, por que en ella se declaran los ítems o pestañas que tendrá el menú. Ten en cuenta que son enlaces, por lo que en la propiedad onclick mandamos llamar a la función change(x,this) a la que le pasamos dos parámetros, el primero es la distancia que tiene que recorrer el menú para colocarse en la pestaña señalada y la distancia que recorre en cada pestaña es el ancho del div contenedor en este caso 520 y el segundo es el item ala cual vamos.

<ul class="buttons">
    <li><a id="current" href="javascript:void(0)" onclick="change(0,this);">Lo m&aacute;s reciente</a></li>
    <li><a href="javascript:void(0)" onclick="change(520,this);">Sitios de inter&eacute;s</a></li>
    <li><a href="javascript:void(0)" onclick="change(1040,this);">Descargar</a></li>
    <li><a href="javascript:void(0)" onclick="change(1560,this);">Feedicons</a></li>
</ul>

 

Los div con clase ‘slide x’ (x = numero del item), son los que contienen el contenido de cada pestaña.
Y por ultimo el script que hace esta maravilla son las funciones siguientes:

  function change(x,item)
{
    document.getElementById("current").id = "";
    item.id = "current";
    if((x * (-1))<(getElementPosition("elementos").left - 10)){
        distance = (x + getElementPosition("elementos").left) / 5;
        start = getElementPosition("elementos").left;
        for(i=0; i<=distance; i++){
            setTimeout("document.getElementById("elementos").style.margin = "0 -" + ((start * (-1)) + (i*5)) + "px"", i*5);
            if(i==distance){
                setTimeout("document.getElementById("elementos").style.margin = "0 -" + x + "px"", i*5);
            }
        }
    }else if((x * (-1))>(getElementPosition("elementos").left)){
        distance = ((x + getElementPosition("elementos").left) / 5)  * (-1);
        start = getElementPosition("elementos").left;       
        for(i=0; i<=distance; i++){
            setTimeout("document.getElementById("elementos").style.margin = "0 -" + ((start * (-1)) - (i*5)) + "px"", i*5);
            if(i==distance)
                setTimeout("document.getElementById("elementos").style.margin = "0 -" + x + "px"", i*5);
        }
    }
}

function getElementPosition(object){
    var position = new Object;
    position.left = parseInt(document.getElementById(object).style.marginLeft)
    position.top = parseInt(document.getElementById(object).style.marginTop)
    return position;
}

 

Este tutorial se baso en Infected-FX, descarga el ejemplo abajo.

 

Autor: carlos
Introducción

Es un script que muestra un texto en toda la página rebotando como pelota de un lado para otro. Copea el código y colócalo en tu página para que sea mas dinámica.

Paso 1

Copea el estilo que va a tener el texto dentro de la cabecera head.



<style type="text/css">
#supertext {
    position:absolute;
    left:0;
    top:0;
    visibility:hide;
    visibility:hidden;
}
</style>


Paso 2

Ahora copea el script dentro de body para que funcione el mensaje.



<script language="Javascript1.2">

// script Original: Lloyd Hassells

// Mensaje
var thecontent=<h2><font color="#0000FF">Depósito de Javascripts!</font></h2>
// Tiempo de animación en milisegundos ( = infinito)
var hidetimer=7000;
// Velocidad
var BallSpeed = 10;


var contentWidth;
var contentHeight;
var maxBallSpeed = 50;


var xMax;
var yMax;
var xPos = 0;
var yPos = 0;
var xDir = right;
var yDir = down;
var superballRunning = true;
var tempBallSpeed;
var currentBallSrc;
var newXDir;
var newYDir;

function initializeBall() {
   if (document.all) {
      xMax = document.body.clientWidth
      yMax = document.body.clientHeight
      document.all("supertext").style.visibility = "visible";
      contentWidth=supertext.offsetWidth
      contentHeight=supertext.offsetHeight
      }
   else if (document.layers) {
      xMax = window.innerWidth;
      yMax = window.innerHeight;
      contentWidth=document.supertext.document.width
      contentHeight=document.supertext.document.height
      document.layers["supertext"].visibility = "show";
      }
   setTimeout(moveBall(),400);
   if (hidetimer!=)
   setTimeout("hidetext()",hidetimer)
   }

function moveBall() {
   if (superballRunning == true) {
      calculatePosition();
      if (document.all) {
         document.all("supertext").style.left = xPos + 
document.body.scrollLeft;
         document.all("supertext").style.top = yPos + 
document.body.scrollTop;
         }
      else if (document.layers) {
         document.layers["supertext"].left = xPos + 
pageXOffset;
         document.layers["supertext"].top = yPos + pageYOffset;
         }
      animatetext=setTimeout(moveBall(),20);
      }
   }

function calculatePosition() {
   if (xDir == "right") {
      if (xPos > (xMax - contentWidth - BallSpeed)) { 
         xDir = "left";
         }
      }
   else if (xDir == "left") {
      if (xPos < (0 + BallSpeed)) {
         xDir = "right";
         }
      }
   if (yDir == "down") {
      if (yPos > (yMax - contentHeight - BallSpeed)) {
         yDir = "up";
         }
      }
   else if (yDir == "up") {
      if (yPos < (0 + BallSpeed)) {
         yDir = "down";
         }
      }
   if (xDir == "right") {
      xPos = xPos + BallSpeed;
      }
   else if (xDir == "left") {
      xPos = xPos - BallSpeed;
      }
   else {
      xPos = xPos;
      }
   if (yDir == "down") {
      yPos = yPos + BallSpeed;
      }
   else if (yDir == "up") {
      yPos = yPos - BallSpeed;
      }
   else {
      yPos = yPos;
      }
   }

function hidetext(){
if (document.all)
  supertext.style.visibility="hidden"
  else if (document.layers)
  document.supertext.visibility="hide"
  clearTimeout(animatetext)
}

if (document.all||document.layers){
  document.write(<span id="supertext"><nobr>+thecontent+
</nobr></span>)
  window.onload = initializeBall;
  window.onresize = new function("window.location.reload()");
}
</script>


Autor: Lloyd Hassell
« 1/4 2 3 4 »