Esta es una simple recopilación de funciones y procedimientos comúnmente usados.
Esta función es muy útil para formularios y control de datos o estado de los campos activos.
Esta función nos podría servir por ejemplo para recorrer todos los botones y cambiarle algún atributo masivamente. Tambien se puede usar para marcar todos los checkbox de página al estilo “seleccionar todo”
function recorrerBotones()
{
var inputs = document.getElementsByTagName('input');
for(var i=0; i <inputs.length; i++){
if(inputs[i].getAttribute('type')=='button'){
accion
}
}
}
Ejemplo de funcionamiento un poco tonto: Cambiar todos los textos de los botones de la página actual:
1. Pon un prefijo en los botones:
2. Quitar el prefijo en los botones:
Y aquí tienes el códogo pa'copiar-pegar
<script type="text/javascript" charset="utf-8" >
function personalizarNombres(cadena )
{
var botones= document.getElementsByTagName('input');
var valor = "";
for(var i=0; i < botones.length; i++){
if(botones[i].getAttribute('type')=='button'){
//----------accion a realizar --------//
valor = cadena + botones[i].getAttribute('value');
botones[i].value = valor;
}
}
}
function desPersonalizarNombres(cadena )
{
var botones= document.getElementsByTagName('input');
for(var i=0; i < botones.length; i++){
if(botones[i].getAttribute('type')=='button'){
//----------accion a realizar --------//
botones[i].value = botones[i].getAttribute('value').substring(7);
}
}
}
</script>
<p>
1. Pon un prefijo en los botones:
<input type="button" onClick="javascript:personalizarNombres('Juantxu');" name="btnBtn1" value=" Prefijar">
</p>
<p>
2. Quitar el prefijo en los botones:
<input type="button" onClick="javascript:desPersonalizarNombres('Juantxu');" name="btnBtn2" value=" Quitar prefijo">
</p>
Otra aplicación de este mismo procedimiento: Marcart todos los checkbox. Del estilo seleccionar todo:
function ChequearTodos(chkbox)
{
for (var i=0; i < document.forms[0].elements.length;i++)
{
var elemento = document.forms[0].elements[i];
if (elemento.type == "checkbox")
{
elemento.checked = chkbox.checked
}
}
}
Y el código queda tal que así:
<script type="text/javascript" charset="utf-8" >
function ChequearTodos()
{
for (var i = 0; i < document.FormMsgs.elements.length; i++) {
if(document.FormMsgs.elements[i].type == 'checkbox'){
document.FormMsgs.elements[i].checked = !(document.FormMsgs.elements[i].checked);
}
}
}
</script>
<form name="FormMsgs">
<p> <input type="checkbox" name="chk1">Escoger esta opcion</p>
<p> <input type="checkbox" name="chk2">Escoger esta opcion</p>
<p> <input type="checkbox" name="chk3">Escoger esta opcion</p>
<p> <input type="checkbox" name="chk4">Escoger esta opcion</p>
<p> <input type="checkbox" name="chk5">Escoger esta opcion</p>
<input type="button" name="btnMarcar" onClick="javascript:ChequearTodos()" value="Marcar / Desmarcar Todos">
</form>
Funcion muy útil para comprobar si se nos ha facilitado una fecha correcta:
function esUnaFecha(cadena) {
var fecha = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/;
var matchArray = cadena.match(fecha);
if (matchArray == null) {
alert('Por favor introduce una fecha con el formato dd/mm/aaaa o dd-mm-aaaa.');
return false;
}
dia = matchArray[1];
mes= matchArray[3];
anyo = matchArray[5];
if (mes <1 || mes > 12) { // Comprobacion del mes
alert('El mes debe estar entre 1 y 12.');
return false;
}
if (dia < 1 || dia > 31) {
alert('El dia debe estar entre 1 y 31.');
return false;
}
// meses de 30 dias
if ((mes==4 || mes==6 || mes==9 || mes==11) && dia==31) {
alert('¡ El mes número '+mes+' No tiene 31 dias !')
return false;
}
// febrero
if (mes == 2) {
var bisiesto = (anyo % 4 == 0 && (anyo % 100 != 0 || anyo % 400 == 0));
if (dia > 29 || (dia==29 && !bisiesto)) {
alert('¡ Febrero de ' + anyo + ' no tiene ' + dia + ' dias !');
return false;
}
return true; // es una fecha
}
}
Ejemplo de comprobación de fechas:
Y el código para hacer eso es este:
<script type="text/javascript" charset="utf-8" >
function esUnaFecha(cadena) {
var fecha = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/;
var matchArray = cadena.match(fecha);
if (matchArray == null) {
alert('Por favor introduce una fecha con el formato dd/mm/aaaa o dd-mm-aaaa.');
return false;
}
dia = matchArray[1];
mes= matchArray[3];
anyo = matchArray[5];
if (mes <1 || mes > 12) { // Comprobacion del mes
alert('El mes debe estar entre 1 y 12.');
return false;
}
if (dia < 1 || dia > 31) {
alert('El dia debe estar entre 1 y 31.');
return false;
}
// meses de 30 dias
if ((mes==4 || mes==6 || mes==9 || mes==11) && dia==31) {
alert('¡ El mes número '+mes+' No tiene 31 dias !')
return false;
}
// febrero
if (mes == 2) {
var bisiesto = (anyo % 4 == 0 && (anyo % 100 != 0 || anyo % 400 == 0));
if (dia > 29 || (dia==29 && !bisiesto)) {
alert('¡ Febrero de ' + anyo + ' no tiene ' + dia + ' dias !');
return false;
}
alert(cadena + ' es una fecha');
return true; // es una fecha
}
}
</script>
<form name="frmFecha" action="">
<label>Pon una fecha</label>
<input type="text" name="txtFecha" >
<input type="button" onClick="javascript:esUnaFecha(document.frmFecha.txtFecha.value)" value="comprobar" name="btnFecha">
</form>
Función para, añadir una nueva opción en un combo box ya existente
function ponOpcion(text, value)
{
var comboBox = document.getElementById('comboBox');
var newOption = new Option(text, value);
comboBox.options[comboBox.options.length] = newOption;
}
Y a continuación una para borrar uno o varios elementos de la lista
function quitaOption()
{
var comboBox = document.getElementById('comboBox');
if (comboBox.options.length == 0)
{
alert('No hay elementos en la lista');
}
else {
comboBox.remove(comboBox.selectedIndex);
}
}
A continuación te voy a mostrar un ejemplo de funcionamiento de estas dos funciones:
Este es el código, Pa'copiar y pegar
<script type="text/javascript" charset="utf-8" >
function ponOpcion(text, value)
{
var comboBox = document.getElementById('ejemplo1');
var newOption = new Option(text, value);
comboBox.options[comboBox.options.length] = newOption;
}
function quitaOpcion()
{
var comboBox = document.getElementById('ejemplo1');
if (comboBox.options.length == 0)
{
alert('No hay elementos en la lista');
}
else {
comboBox.remove(comboBox.selectedIndex);
}
}
</script>
<select name="ejemplo1" id="ejemplo1">
</select>
<input type="button" onClick="javascript:ponOpcion('texto', 2);" name="btn" value="Pon un texto en el combo">
<input type="button" onClick="javascript:quitaOpcion(0);" name="btn2" value="Quita un texto del combo">
Otra vez mas es hace gracias al dom. Se coge la tabla, y se van creando elementos y añadiendo a voluntad.
<html>
<head>
<script type="text/javascript" charset="utf-8" >
function llenaTabla(){
var tabla = document.getElementById("tabla");
var linea = document.createElement("tr");
var celda1 = document.createElement("td");
var celda2 = document.createElement("td");
var celda3 = document.createElement("td");
var texto1 = document.createTextNode(" Nuevo Texto1 " );
var texto2 = document.createTextNode(" Nuevo Texto2 " );
var texto3 = document.createTextNode(" Nuevo Texto3 " );
var imagen1 = document.createElement("img");
imagen1.src = "img/calendario.gif";
celda1.bgColor="#993322";
celda3.bgColor="#772192";
celda1.appendChild(imagen1);
celda2.appendChild(texto2);
celda3.appendChild(texto3);
linea.appendChild(celda1);
linea.appendChild(celda2);
linea.appendChild(celda3);
tabla.appendChild(linea);
}
</script>
</head>
<body>
<input type="button" value="llenar" onClick="llenaTabla()">
<table id="tabla" border=0 cellspacing="0" cellpadding="0">
</table>
</body>
</html>
Ver como queda:
<script type="text/javascript">
var ahora = new Date()
document.write(ahora.getDate())
document.write(".")
document.write(ahora.getMonth() + 1)
document.write(".")
document.write(ahora.getFullYear())
</script>