Mis cursos: marzo 2017

lunes, 27 de marzo de 2017

Suma pares entre 20 y 50

<html>
    <head>
    </head>
    <body>
            <script type="text/javascript">
        var i;//variable contador
        var s=0;//variable acumulador
        i=20;//inicializamos i =20
        while(i<=50){
            s=s+i;
            i=i+2
        }
        document.write('la suma de los pares entre 20 y 50 es: ',s);
            </script>
    </body>

</html>

Nos dice qué numeros son primos

<!Algoritmo que dterminan que números son primos y la lectura finaliza con el valor 0>
<html>
<head>
</head>
<body>
<script type="text/javascript">
var n;//numero
var i;// bucle
var primo=0;//contador primos
var c=0;
    do{
        n=parseInt(prompt('Dame un número positivo',''));
    c++;
        for(i=2;i<n;i++){
        if(n%i==0)
        break;
    else if(i==n-1)
    primo++;

        }
        }while(n!=0);
        document.write('De los ',c,'numeros introducidos ',primo,'son primos');

</script>
</body>
</html>

Tanto por ciento de suspensos- Nos pregunta cuantas notas queremos leer

<!Algoritmo que nos pide introduccción de las notas de varios alumnos y calcule el tanto por ciento de los suspensos>
<html>
<head>
</head>
<body>
<script type="text/javascript">
var n;//nota a leer
var notas;// cantidad notas a leer
var susp=0;//contador susepnsos
notas=parseInt(prompt('¿cuántas notas vas a leer? :',''));//comentario
    for(var i=1;i<=notas;i++){
        n=Number(prompt('Dame una nota '+i,''));
        if(n<5)//control de suspensos)
        susp++;
    }
document.write('El porcentaje de suspensos es: ',(susp/notas)*100,'%');
</script>
</body>
</html>

CaLCULAR EL TANTO POR CIENTO DE LOS SUSPENSOS (nos pide 5 notas)

<!Algoritmo que nos pide introduccción de las notas de cinco alumnos y calcule el tanto por ciento de los suspensos>
<html>
<head>
</head>
<body>
<script type="text/javascript">
  var n;//número
  var i=1;
  do{
  n=parseInt(prompt('Introduce una nota :',''));//comentario
 if(n>=5)
 pos=pos+1;
  else
  neg=neg+1;
 }
 while(());
  document.write(' la suma de los números positivos es',p, 'y de negativos es ',neg);
</script>
</body>
</html>

nos dice cuantos caracteres tiene la palabra o frase que introduzcamos

<html>
    <head>
    </head>
    <body>
            <script type="text/javascript">
        var cadena;// cadena de caracteres a leer
        var longitud;// variable que guarda la longitud de la acdena
        cadena=prompt('Escribe una palabra o frase','');
        longitud=cadena.length;
        document.write('la suma de los caracteres es: ',longitud);
            </script>
    </body>

</html>

Suma numeros pares entre 20 y 50

<html>
    <head>
    </head>
    <body>
            <script type="text/javascript">
        var i;//variable contador
        var s=0;//variable acumulador
        for(i=20;i<=50;i+=2){
            s=s+i;
        }
        document.write('la suma de los pares entre 20 y 50 es: ',s);
            </script>
    </body>

</html>

5 alumnos y nos dice cuantos aprobados y cuantos suspendidos hay

<!programa que pide notas de 5 alumnos y nos dice cuantos aaprobados hay
<html>
    <head>
    </head>
    <body>
            <script type="text/javascript">
        var n;
        var i;
        var ap=0;// declaración de variables

                for(i=1;i<=5;i++){
                n=Number(prompt("Dame una nota:",""));
                if (n>=5){
                ap=ap+1;
            }
            }
            document.write("De los 5 alumnos han aprobado ", ap);

            </script>
    </body>

</html>

nos dice cuantos números positivos, cuantos negativos se han metido y termina con pregunat de si o no

<!programa que escibe cuantos numeros positivos y negativos se han leído. la finalizacion de la entrada de datos se realiza por la respuesta al siguiente mensaje"¿terminar S/N? Escrito después de introducir cada nº>
<html>
<head>
</head>
<body>
<script type="text/javascript">
var n;//número
var resp='';//var control para seguir s/n
var pos=0;//contador positivos
var neg=0;//contador negativos
do{
n=parseInt(prompt('dame un número :',''));//comentario1
    if(n>0)
    pos=pos+1;
        else if(n<0)
        neg=neg+1;
        resp=prompt('Terminar S/N?','');
    }
    while((resp=='s')||(resp=='S'));
document.write(' la suma de los números positivos es',p, 'y de negativos es ',neg);
</script>
</body>
</html>

Calcula los pares que hemos metido y no para de pedir hasta que metemos cero

<html>
<!programa que pide un numero hasta que se introduzca un cero. A continuacion nos difga cuantos pares hemos metido

<html>
    <head>
    </head>
    <body>
            <script type="text/javascript">
        var n;
        p=0;// declaración de variables



            do{
                n=parseInt(prompt('Dame un número 0 para terminar',''));
                if (n!=0 &&n%2==0){
                p=p+1;
            }

            }while(n!=0);
            /*otra forma de hacerlo. Con while
            n=parseInt(prompt('Dame un número 0 para terminar',''));
            while(n!=0){
                if(n%2==0){
                    p=p+1;
                }
                n=parseInt(prompt('Dame un número 0 para terminar',''));
            }*/
            //salida
            document.write("la cantidad de pares introducido es ", p);
            </script>
    </body>

</html>

sábado, 25 de marzo de 2017

Suma de 5 numeros con For

Suma de 5 numeros

<html>
   <head>
   </head>
   <body>
    <script type="text/javascript">
       var i;
       var n;
       var a;
       var b;
       var c;
       var suma;
       n= parseInt(prompt('Dame un numero',''));
       i= parseInt(prompt('Dame un numero',''));
       a= parseInt(prompt('Dame un numero',''));
       b= parseInt(prompt('Dame un numero',''));
       c= parseInt(prompt('Dame un numero',''));
       suma=n+i+n+n+n;

       document.write('la suma de los 5 numeros es ', suma );

           </script>
   </body>

</html>

           </script>
   </body>

</html>
</html>

Formulario para sumar 2 numeros

<html>
<body>
    <form>
        Primer numero:
        <input type="text" name="num1" id="num1" />
        <br />
 
        Segundo numero:
        <input type="text" name="num2" id="num2" />
        <br />
 
        <p id="resultado">Suma: </p>
 
        <button type="button" onclick='
            var casilla1=document.getElementById("num1");
            var n1 = casilla1.value;
            var casilla2=document.getElementById("num2");
            var n2 = casilla2.value;
            var resultado=document.getElementById("resultado");
            resultado.innerHTML = "Suma: " +(parseInt(n1)+parseInt(n2));
            resultado.style.color = "blue";
            '>Calcular suma</button>
 
    </form>
</body>
</html>

Style

    <style>
    body 
    {
        background-color: rgb(200,200,200);
        font-family: Sans-Serif;
    }
 
    h1
    {
        font-size: 1.4em;
        color: blue;  
    }
 
    h2
    {
        margin-left: 10px;
    }
 
    p 
    {
        margin-left: 20px;
        text-align: justify;
    }
 
    table
    {
        border: 2px solid black;
        border-collapse: collapse;
    }
 
    td
    {
        border: 1px solid rgb(120,120,120);
        padding: 5px;
    }
    </style>

Imprimir en pantalla numeros del 1 al 10 con for

<html>
<body>

<script>
    var contador;
    for (contador = 1; contador <= 10; contador++)
    {
        document.write(contador + " ");
    }
</script>
</body>
</html>

¿En qué casos usar bucles, condiciones repetitivas,?

"for" - Cuando sepamos cuantas veces queremos repetir algo, y usaremos un contador para hacerlo (por ejemplo, escribir 5 veces un texto)
"do-while" - Cuando algo se deba repetir al menos una vez (por ejemplo, pedir una contraseña)
"while" - Cuano se trate de algo repetitivo, pero que quizá no llegue a ocurrir nunca, como el mostrar datos de una base de datos... que podría estar vacía.

Múltiplos de 5

<html>
<body>
Multiplos de 5... 
<script>
    var contador;
    for (contador = 1; contador <= 10; contador++)
    {
        if (contador % 5 == 0)
            document.write(contador + " ");
    }
</script>
</body>
</html>

Dividir entre 2

<html>
<body>
Dividiendo numeros con do-while...
<script>
    var n1 = prompt("Dime un primer numero");
    var n2;
    do
    {
        n2 = prompt("Dime el segundo numero (no debe ser cero)");
    }
    while (n2 == 0);
    document.write(n1 + " dividido entre "+ n2 + " es: ");
    var resultado = parseInt(n1) / parseInt(n2);
    document.write(resultado);
</script>
</body>
</html>

viernes, 24 de marzo de 2017

Meter números del 1 al 10 y que los sume y pseudocódigo

<html>
   <head>
   </head>
   <body>
           <script type="text/javascript">
       var i;// declaracion de variables
       var s=0;//iniciamos s, acumulador de suma
       for (i=1;i<=10;i++){//bucle repetitivo
       s=s+i;//acumulador de suma
       }
       document.write(' La suma de los números de 1 a 10 es: ',s);
           </script>
   </body>

</html>

pseudocodigo

-Declaración variables
var i;
var s=0;
-Desde i=1hasta i<10
-s=s+i;
Visualiza S

Nos pide una cantidad y cuanto iva queremos sumarle

<html>
    <head>
    </head>
    <body>
            <script type="text/javascript">
        var precio, a, piva;
        precio = parseInt(prompt('Dame el precio inicial:',''));
        //añadimos el 21% IVA
        a=parseInt(prompt('Introduzca el Iva:',''));
        piva = precio + precio*(a/100);//=precio*(1.21)
        document.write('el resultado es ',piva);
            </script>
    </body>

</html>

            </script>
    </body>

</html>

Nos pide una cantidad, le calcula el 21 % iva y nos dice el total

<html>
   <head>
   </head>
   <body>
           <script type="text/javascript">
       var precio, piva;
       precio = parseInt(prompt('Dame el precio inicial:',''));
       //añadimos el 21% IVA
       piva = precio + precio*(21/100);//=precio*(1.21)
       document.write('el resultado de ',precio,' + el 21% de Iva es: ',piva );
           </script>
   </body>

</html>

           </script>
   </body>

</html>

martes, 21 de marzo de 2017

reloj digital y fecha en pantalla

<!DOCTYPE>
<html lang='es'>
        <head>
            <title>reloj digital en pantalla</title>
                <meta charset='UTF-8'/>
                <meta name='description' content='Página web'>
                <meta name='keywords' content=',javascript, ejemplo, html'>
                <script type="text/javascript">
                //fecha
                    function fecha(){
                        Hoy=new Date();
                        Dia=""+Hoy.getDate() +" / "+ (Hoy.getMonth()+1)+"/"+(Hoy.getYear()+1900);//getfullYear
                        document.clock.dia.value=Dia;//mostramos el dia en la caja text
            }
            //hora
            function hora(){
                var hoy= new Date();
                var horas= hoy.getHours();
                var minutos= hoy.getMinutes();
                var segundos=hoy.getSeconds();
                var timeValue;
                timeValue=""+((horas>12)?horas -12:horas);// si horas>12 entonces -12 sino "horas"
                timeValue +=((minutos<10)?":0":":")+minutos;
                timeValue +=((segundos<10)?":0":":")+ segundos;
                timeValue +=(horas>=12)?" P.M.":" A:M.";
                document.clock.face.value=timeValue;//se puede cambiar la posición actual a la barra de estado poniendo
                window.status=timeValue;
                control=setTimeout("hora()",1000);

            }
            //declaración de variables
            var control= null;
            function InicioReloj() {
                fecha();
                hora();
            }
                </script>
        </head>
            <body bgcolor="7AC6D0" onLoad="InicioReloj()">
            <center>
                <h2>Esto es un reloj hecho con javascript</h2>
                    <table border="1">
                        <tr>
                            <form name="clock" onSubmit="0">
                            <tr>
                                <td>Hoy es:<input type="text" name="dia" size="12" style="text-align:center" value=""></td>
                                <td>La hora es:<input type="text" name="face" size="12" style="text-align:center" value=""></td>

                            </tr>
                            </form>
                        </tr>
                    </table>
            </center>
            <hr> 



        </body>
    </html>

Zoom en página

<HTML>
<HEAD>
<TITLE>Ejemplo de zoom</TITLE>
<script language="JavaScript">
//Especificar a que elementos afectará,
//añadiendo o quitando de la lista:
var tgs = new Array('div','td','tr');
//Indicar el nombre de los diferentes tamaños
//de fuente:
var szs = new Array('xx-small','x-small',
                    'small','medium','large',
                    'x-large','xx-large'); //Tamaño para la fuente
                                           //en pantalla.
var startSz = 2; //valor inicial, por defecto, del zoon-ventana
function ts(trgt,inc){
    if(!document.getElementById){
        return;
    }
    var d=document; //Objeto asociado a document
    var cEl=null; //variable para controlar la etiqueta a usar.
    var sz=startSz; //variable para el control del incremento del
                    //nuevo zoon-ventana
    var i,j,cTags;
    sz += inc; //sz=sz+inc;
    if(sz<0){ //controlamos si hemos llegado al valor mínimo del zoon-ventana
        sz=0;
    }
    if(sz>6){ //controlamos si hemos llegado al valor máximo del zoon-ventana
        //sz=6;
    }
    startSz=sz; //nuevo valor del zoon-ventana
    if(!(cEl=d.getElementById(trgt))){
        cEl=d.getElementsByTagName(trgt)[0];
    }
    cEl.style.fontSize=szs[sz]; //Tamaño para la etiqueta, Tag, en uso.
    for(i=0;i<tgs.length;i++){ //bucle para el aumento o disminución de los Tag.
        cTags=cEl.getElementsByTagName(tgs[i]);
        for(j=0;j<cTags.length;j++)
            cTags[j].style.fontSize=szs[sz];
    }
}
</script>
</HEAD>

<body bgcolor="#00FFFF" >
<center>
<h2>Zoom de página</h2>
</center>
<center>
<a href="javascript:ts('body',1)">+ Aumentar</a> |
<a href="javascript:ts('body',-1)">- Disminuir</a>
</center>
<p> </p>
<hr>
<center>
<h3>
[<a href="javascr.htm">Volver</a>]
</h3>
</center>
</BODY>
</HTML>

Calculadora hecha con tabla

<HTML>
<HEAD>
<TITLE>Interactividad HTML/JavaScript UD2_16</TITLE>
<script language="LiveScript">
function addChar(input, character){
    if(input.value == null || input.value == "0")
        input.value = character
    else
        input.value += character
}
function deleteChar(input){
    input.value = input.value.substring(0, input.value.length - 1)
}
function changeSign(input){
    // could use input.value = 0 - input.value, but let's show off substring
    if(input.value.substring(0, 1) == "-")
    input.value = input.value.substring(1, input.value.length)
    else
    input.value = "-" + input.value
}
function compute(form) {
    form.display.value = eval(form.display.value)
}
function square(form) {
    form.display.value = eval(form.display.value) * eval(form.display.value)
}
function checkNum(str) {
    for (var i = 0; i < str.length; i++) {
        var ch = str.substring(i, i+1)
        if (ch < "0" || ch > "9") {
            if (ch != "/" && ch != "*" && ch != "+" && ch != "-"
                && ch != "(" && ch!= ")") {
                alert("invalid entry!")
                return false
            }
        }
    }
    return true
}
</script>
</HEAD>

<body bgcolor="white">
<form>
<table border="5" align="center">
<tr align="center">
<td colspan = "5">
<table border="3">
<tr>
<td align="center"><input name="display" value="0" size="39"></td>
</tr>
</table>
</td>
</tr>
<tr align="center">
   <td><input type="button" value="    <-   " onClick="deleteChar(this.form.display)"></td>
   <td><input type="button" value="   MC " onClick="this.form.display.value = 0 "></td>
   <td><input type="button" value="   MR " onClick="this.form.display.value = 0 "></td>
    <td><input type="button" value="   CE " onClick="this.form.display.value = 0 "></td>
    <td><input type="button" value="    C    " onClick="this.form.display.value = 0 "></td>
    </tr>
<tr align="center">
    <td><input type="button" value="   +/-   " onClick="changeSign(this.form.display)"></td>
    <td><input type="button" value="    (    " onClick="addChar(this.form.display, '(')"></td>
    <td><input type="button" value="    )    " onClick="addChar(this.form.display, ')')"></td>
    <td><input type="button" value="    ^    " onClick="changeSign(this.form.display)"></td>
    <td><input type="button" value="   sq    " onClick="if (checkNum(this.form.display.value)){ square(this.form)}"></td>
    </tr>
<tr align="center">
<td><input type="button" value="    7    " onClick="addChar(this.form.display, '7')"></td>
<td><input type="button" value="    8    " onClick="addChar(this.form.display, '8')"></td>
<td><input type="button" value="    9    " onClick="addChar(this.form.display, '9')"></td>
<td><input type="button" value="    /    " onClick="addChar(this.form.display, '/')"></td>
<td><input type="button" value="    %    " onClick="addChar(this.form.display, '%')"></td>
</tr>
<tr align="center">
<td><input type="button" value="    4    " onClick="addChar(this.form.display, '4')"></td>
<td><input type="button" value="    5    " onClick="addChar(this.form.display, '5')"></td>
<td><input type="button" value="    6    " onClick="addChar(this.form.display, '6')"></td>
<td><input type="button" value="    *    " onClick="addChar(this.form.display, '*')"></td>
<td><input type="button" value="    1/x " onClick="addChar(this.form.display, 'x')"></td>
</tr>
<tr align="center">
<td><input type="button" value="    1    " onClick="addChar(this.form.display, '1')"></td>
<td><input type="button" value="    2    " onClick="addChar(this.form.display, '2')"></td>
<td><input type="button" value="    3    " onClick="addChar(this.form.display, '3')"></td>
<td><input type="button" value="    -    " onClick="addChar(this.form.display, '-')"></td>
<td rowspan="2"><input type="button" value="    =    " name="enter" onClick="if (checkNum(this.form.display.value)){ compute(this.form) }"></td>
</tr>
<tr align="center">
<td colspan="2"><input type="button" value="           0             " onClick="addChar(this.form.display, '0')"></td>
<td><input type="button" value="    .    " onClick="addChar(this.form.display, '.')"></td>
<td><input type="button" value="    +    " onClick="addChar(this.form.display, '+')"></td>
</tr>
</table>
</form>
</body>
</html>

Formulario nos pide datos, mail, dni, correo y nos lo envía al correo electrónico

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script>
    function Valida(formulario) {
        /* Validación de campos NO VACÍOS */
        if ((formulario.campo1.value.length == 0) || (formulario.campo2.value.length ==0) || (formulario.cpostal.value.length ==0) || (formulario.dni.value.length ==0) || (formulario.email.value.length ==0)) {
            alert('falta información en el campo1');
            return false;
        }
        if (isNaN(parseInt(formulario.campo2.value))) {
            alert('el campo2 debe ser un número');
            return false;
        }
        /* validación del CÓDIGO POSTAL*/
        var ercp=/(^([0-9]{5,5})|^)$/;
        if (!(ercp.test(formulario.cpostal.value))) {
            alert('El contenido del código postal no es un CÓDIGO POSTAL');
            return false;
        }
        /* validación del DNI */
        var erdni=/(^([0-9]{8,8}\-[A-Z])|^)$/;
        if (!(erdni.test(formulario.dni.value))) {
            alert('Contenido del dni no es un DNI válido.');
            return false;
        }
        /* validación del e-mail */
        var ercorreo=/^[^@\s]+@[^@\.\s]+(\.[^@\.\s]+)+$/;
        if (!(ercorreo.test(formulario.email.value))) {
            alert('Contenido del email no es CORREO ELECTRÓNICO válido.');
            return false;
        }
        /* si no hemos detectado fallo devolvemos TRUE */
        return true;
    }
</script>
</head>

<body>
<form name="miFormulario" onsubmit="return Valida(this);" action="mailto:mi@mail.com" >
    Campo1 <input type="text" name="campo1"><br>
    Campo2 <input type="text" name="campo2"><br>
    cpostal <input type="text" name="cpostal"><br>
    dni <input type="text" name="dni"><br>
    email <input type="text" name="email"><br>
    <input type="submit" value="Enviar" name="enviar">
</form>
</body>
</html>

Formulario que pide datos y tiene botones de enviar, borrar y restablecer

<!DOCTYPE>
<html lang='es'>
        <head>
            <title>Formulario</title>
                <meta charset='UTF-8'/>
                <meta name='description' content='Página web'>
                <meta name='keywords' content=',javascript, ejemplo, html'>
                <script type="text/javascript">
                </script>
        </head>
            <body>

            <form action="" method="get">
            D.N.I............:<input type="text" name="dni"/></br>
            Nombre...........:<input type="text" name="apellido"/></br>
            Dirección........:<input type="text" name="dirección"/></br>
            Población........:<input type="text" name="pobalción"/></br>
            Provincia........:<input type="text" name="provincia"/></br>
            Código Postal....:<input type="text" name="codigo_postal"/></br>
                                   <input type="reset" value="Restablecer"/>
                                   <input type="submit" value="Enviar"/>
                                   <input type="button" value="Cancelar"/>
            </form>
        </body>
    </html>

Formulario que nos pide tre nombres y comprueba que no haya campos vacios antes de enviar el formulario

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script>
    function Valida(miForm) {
        /* Validación de campos NO VACÍOS */
        if ((miForm.Jugador1.value.length == 0) ||
        (miForm.Jugador2.value.length ==0) ||
        (miForm.Jugador3.value.length ==0)){
            alert('falta información en los campos');
            return false;
        }
        return true;
        }

</script>
</head>

<body>
<form name="miForm" method="get" onsubmit="return Valida(this)" action="mailto:mi@mail.com" >
    <p>
    Jugador1 <input type="text" name="Jugador1"><br>
    Jugador2 <input type="text" name="Jugador2"><br>
    Jugador3 <input type="text" name="Jugador3"><br>
    <input type="submit" value="Enviar" name="enviar"/>
    </p>
</form>
</body>
</html>

Formulario con menú desplegable, menú ckeckbok y menú radio

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Validación de un formulario</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function valida(f) {
    var ok = true;
    var msg = "Debes escribir algo en los campos:\n";
    if(f.txtNombre.value == ""){
        msg += "- Nombre\n";
        ok = false;
    }
    if(f.txtPApellido.value == ""){
        msg += "- Primer Apellido\n";
        ok = false;
    }
    if(f.txtMail.value == ""){
        msg += "- E-Mail\n";
        ok = false;
    }
    if(f.txtDireccion.value == ""){
        msg += "- Dirección\n";
        ok = false;
    }
    if(f.txtPoblacion.value == ""){
        msg += "- Población\n";
        ok = false;
    }
    /*
    if(f.txtProvincia.value == ""){
        msg += "- Provincia\n";
        ok = false;
    }*/
    indice = f.txtProvincia.selectedIndex; //indice = document.getElementById("txtProvincia").selectedIndex;
    if( indice == null || indice == 0 ) {
        msg += "- Provincia\n";
        ok = false;
    }
    //Checkbox
    var marcados=0;
    if(document.getElementById('CbTodos').checked){
        marcados++;
    }
    if(document.getElementById('UpSemana').checked){
        marcados++;
    }
    if(document.getElementById('UpMes').checked){
        marcados++;
    }
    if(document.getElementById('UpAnio').checked){
        marcados++;
    }
    if( marcados==0) {
        msg += "- Checkbox\n";
        ok = false;
    }
    //Radio Button para control de estado civil
    opciones=document.getElementsByName("RbECivil");
    var rmarcado=false;
    for(var i=0; i<opciones.length;i++){
        if(opciones[i].checked){
            rmarcado=true;
            //break;
        }
    }
    if(!rmarcado){
        msg += "- RadioButton\n";
        ok = false;
        //return false;
    }
    //Salida
    if(ok == false)
        alert(msg);
    return ok;
}
</script>
</head>
<body>
<form name="form1" id="form1" action="#" method="post" onsubmit="return valida(this)">
<TABLE border="0">
    <tr>
        <td><label for="txtNombre">Nombre(*):</label></td>
        <td><input type="text" name="txtNombre" id="txtNombre" size="20"/></td>
    </tr>
    <tr>
        <td><label for="txtPApellidos">Primer Apellido(*):</label></td>
        <td><input type="text" name="txtPApellido" id="txtPApellido" size="20"/></td>
    </tr>
    <tr>
        <td><label for="txtMail">E-Mail(*):</label></td>
        <td><input type="text" name="txtMail" id="txtMail"/></td>
    </tr>
    <tr>
        <td><label for="txtDireccion">Dirección(*):</label></td>
        <td><input type="text" name="txtDireccion" id="txtDireccion" size="20"/></td>
    </tr>
    <tr>
        <td><label for="txtPoblacion">Población(*):</label></td>
        <td><input type="text" name="txtPoblacion" id="txtPoblacion" size="20"/></td>
    </tr>
    <tr>
        <td><label for="txtProvincia">Provincia(*):</label></td>
        <td><select name="txtProvincia" id="txtProvincia"/>
                <option value="">- Seleccione una provincia -</option>
                <option value="1">Álava</option>
                <option value="2">Albacete</option>
                <option value="3">Alicante</option>
                <option value="4">Almeria</option>
                <option value="5">Asturias</option>
                <option value="6">Ávila</option>
                <option value="7">Badajoz</option>
                <option value="8">Barcelona</option>
                <option value="9">Burgos</option>
                <option value="10">Cáceres</option>
                <option value="11">Cádiz</option>
                <option value="12">Cantabria</option>
                <option value="13">Castellón</option>
                <option value="14">Ciudad Real</option>
                <option value="15">Córdoba</option>
                <option value="16">Cuenca</option>
                <option value="17">Gerona</option>
                <option value="18">Granada</option>
                <option value="19">Guadalajara</option>
                <option value="20">Guipúzcoa</option>
                <option value="21">Huelva</option>
                <option value="22">Huesca</option>
                <option value="23">Islas Baleares</option>
                <option value="24">Jaén</option>
                <option value="25">La Coruña</option>
                <option value="26">La Rioja</option>
                <option value="27">Las Palmas</option>
                <option value="28">León</option>
                <option value="29">Lérida</option>
                <option value="30">Lugo</option>
                <option value="31">Madrid</option>
                <option value="32">Málaga</option>
                <option value="33">Murcia</option>
                <option value="34">Navarra</option>
                <option value="35">Orense</option>
                <option value="36">Palencia</option>
                <option value="37">Pontevedra</option>
                <option value="38">Salamanca</option>
                <option value="39">Segovia</option>
                <option value="40">Sevilla</option>
                <option value="41">Soria</option>
                <option value="42">Tarragona</option>
                <option value="37">Santa Cruz de Tenerife</option>
                <option value="37">Teruel</option>
                <option value="37">Toledo</option>
                <option value="37">Valencia</option>
                <option value="37">Valladoliz</option>
                <option value="37">Vizcaya</option>
                <option value="37">Zamora</option>
                <option value="37">Zaragoza</option>
            </select>
        </td>
    </tr>
    <tr>
        <td rowspan="2"><label for="RbECivil">Estado Civil(*):</label></td>
        <td>
            <input type="radio" name="RbECivil" id="Solteroa" value="Soltero/a"/>
            <label for="Soltero">Soltero/a</label>
        </td>
    </tr>
    <tr>
        <td><input type="radio" name="RbECivil" id="casado" value="Casado/a"/>
        <label for="Casado">Casado/a</label></td>
    </tr>
    <tr>
        <td rowspan="4"><label for="NConexion">Cada cuanto te conectas?(*):</label></td>
        <td>
            <input type="checkbox" name="CbTodos" id="CbTodos"/>
            <label for="CbTodos">Todos los dias</label>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" name="UpSemana" id="UpSemana"/>
        <label for="UpSemana">Un par de veces por semana</label></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="UpMes" id="UpMes"/>
        <label for="UpMes">Un par de veces por mes</label></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="UpAnio" id="UpAnio"/>
        <label for="UpAnio">Un par de veces por año</label></td>
    </tr>
</TABLE>
<input type="submit" name="btnEnviar" id="btnEnviar" value="Enviar >>"/></br>
<input type="reset" value="Borrar" />
</form>
</body>
</html>

Formulario que nos pide DNI, nombre, dirección, código postal y lo envía por correo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script>
    function Valida(formulario) {
        /* Validación de campos NO VACÍOS */
        if ((formulario.campo1.value.length == 0) ||
        (formulario.campo2.value.length ==0) ||
        (formulario.cpostal.value.length ==0) ||
        (formulario.dni.value.length ==0) ||
        (formulario.email.value.length ==0)) {
            alert('falta información en los campos');
            return false;
        }


        if (isNaN(parseInt(formulario.campo2.value))) {
            alert('el campo2 debe ser un número');
            return false;
        }
        /* validación del CÓDIGO POSTAL*/
        var ercp=/(^([0-9]{5,5})|^)$/;
        if (!(ercp.test(formulario.cpostal.value))) {
            alert('El contenido del código postal no es un CÓDIGO POSTAL');
            return false;
        }
        /* validación del DNI */
        var erdni=/(^([0-9]{8,8}\-[A-Z])|^)$/;
        if (!(erdni.test(formulario.dni.value))) {
            alert('Introduzca un DNI válido con este formato 00000000-Z');
            return false;
        }
        /* validación del e-mail */
        var ercorreo=/\w+@\w+.\w+/;
        if (!(ercorreo.test(formulario.email.value))) {
            alert('Contenido del email no es CORREO ELECTRÓNICO válido.');
            return false;
        }
        /* si no hemos detectado fallo devolvemos TRUE */
        return true;
    }

</script>
</head>

<body>
<form name="miFormulario" onsubmit="return Valida(this);" action="mailto:mi@mail.com" >
    Campo1 <input type="text" name="campo1"><br>
    Campo2 <input type="text" name="campo2"><br>
    cpostal <input type="text" name="cpostal"><br>
    dni <input type="text" name="dni"><br>
    email <input type="text" name="email"><br>
    <input type="submit" value="Enviar" name="enviar">
</form>
</body>
</html>

Formulario que nos pide nombre, dirección y telefono y nos lo envia por correo electronico

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Validación de un formulario</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function valida(f) {
    var ok = true;
    var msg = "Debes escribir algo en los campos:\n";//\n es retorno de linia
    if(f.txtNombre.value == ""){
        msg += "- Nombre\n";
        ok = false;
    }

    if(f.txtDireccion.value == ""){
        msg += "- Dirección\n";
        ok = false;
    }
    var patron=/^[0-9]{9}$/;
    if(f.txtTelefono.value == "" || (!patron.test(f.txtTelefono.value))){
        msg += "- Teléfono\n";
        ok = false;
        }



    //Salida
    if(ok == false)
        alert(msg);
    return ok;
}
</script>
</head>
<body>
<form name="form1" id="form1" action="#" method="post" onsubmit="return valida(this)">
<table border="0">
    <tr>
        <td><label for="txtNombre">Nombre(*):</label></td>
        <td><input type="text" name="txtNombre" id="txtNombre" size="20"/></td>
    </tr>
    <tr>
        <td><label for="txtDireccion">Dirección(*):</label></td>
        <td><input type="text" name="txtDireccion" id="txtDireccion" size="20"/></td>
    </tr>
    <tr>
        <td><label for="txtTelefono">Teléfono(*):</label></td>
        <td><input type="text" name="txtTelefono" id="txtTelefono" /></td>
    </tr>
</table>
<input type="submit" name="btnEnviar" id="btnEnviar" value="Enviar >>"/></br>
<input type="reset" value="Borrar" />
</form>
</body>
</html>

Formularioq ue nos dice si la matricula es correcta o no

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Validación con expresión regular</title>
<script type="text/javascript">
function validar() {
    var m = document.getElementById("matricula").value;
    //var expreg = /^[A-Z]{1,2}\s\d{4}\s([B-D]|[F-H]|[J-N]|[P-T]|[V-Z]){3}$/;//COMUNIDAD
    //var expreg = /^[0-9]{4}\s[A-Z]{3}$/;EUROPEA
    var expreg = /^\d{4}\s[A-Z]{3}$/;

    if(expreg.test(m))
        alert("La matrícula es correcta");
    else
        alert("La matrícula NO es correcta");
}
</script>
</head>
<body>
<form id="miForm" action="#" method="post">
    <p>
        Matrícula: <input type="text" id="matricula" /><br />
        <input type="button" value="Validar" onclick="validar()" />
    </p>
</form>
</body>
</html>

Formulario en el que introducimosnombre producto, precio, nos suma el iva y nos da el precio final

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Validación de un formulario</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function valida() {
    var ok = true;
    var msg = "Debes escribir algo en los campos:\n";//\n es retorno de linia
    var f=document.form1;
    if(f.txtNombre.value == ""){
        msg += "- Nombre producto\n";
        ok = false;
    }

    if((f.txtPrecio.value == "")||isNaN(f.txtPrecio.value)){
        msg += "- Precio\n";
        ok = false;
    }
        else{
            f.txtfinal.value=(f.txtPrecio.value)*1.16;
        }



    //Salida
    if(ok == false)
        alert(msg);
    //return ok;
}
</script>
</head>
<body>
<form name="form1" id="form1" action="#" method="post">
<table border="0">
    <tr>
        <td>Nombre producto(*):</td>
        <td><input type="text" name="txtNombre" size="20"/></td>
    </tr>
    <tr>
        <td>Precio(*):</td>
        <td><input type="text" name="txtPrecio" size="20"/></td>
        <td>€</td>
    </tr>
    <tr>
        <td>IVA 16%</td>
    </tr>
    <tr>
        <td>Precio Final:</td>
        <td><input type="text" name="txtfinal" size="20" readonly="readonly"/></td>
        <td>€</td>
    </tr>
</table>
<input type="button" name="btnEnviar" value="Enviar >>" onclick="valida()"/></br>
<input type="reset" value="Borrar" />
</form>
</body>
</html>

Formulario con menú que se despliega

<!DOCTYPE>
<html lang='es'>
        <head>
            <title>Formulario con despliegue de recuadro. Ejercicio 3.25</title>
                <meta charset='UTF-8'/>
                <meta name='description' content='Página web'>
                <meta name='keywords' content=',javascript, ejemplo, html'>
                <script type="text/javascript">
                    function comprobarYEnviar(){
                        textNombre=document.getElementById("textNombre");
                        if(textNombre.value.length>0){
                            var regExpNumero=/\d+/;
                            textNumero=document.getElementById("textNumero");
                        if(regExpNumero.test(textNumero.value)){
                            var regExpEMail=/\w+@\w+.\w+/;
                            textEMail=document.getElementById("textEMail");
                        if (regExpEMail.test(textEMail.value)){
                            selectLista=document.getElementById("selectListado");
                        if (selectLista.selectedIndex >=2){//todo correcto}
                            document.getElementById("formulario").submit();
                        }
                                else
                                window.alert("No se ha seleccionado un elemento de"+"lalista.");
                        }
                                else
                                window.alert("El e-mail no es correcto *@*.*");
                        }
                                else
                                window.alert("El número está vacio o no es correcto");
                        }
                                else
                                window.alert("No se ha introducido un nombre");

                    }
                </script>
        </head>
            <body>

            <form action="" method="post" id="formulario">
            <table align="center">
            <caption>Formulario Sencillo</caption>
            <tr>
            <td>Nombre:</td>
            <td><input type="text" name="textNombre" id="textNombre"/></td>
            </tr>
            <tr>
            <td>Número:</td>
            <td><input type="text" name="textNumero" id="textNumero"/></td>
            </tr>
            <tr>
            <td>E-mail:</td>
            <td><input type="text" name="textEMail" id="textEMail"/></td>
            </tr>
            <tr>
            <td>
            <select name="selectListado" id="selectListado">
            <option value="Inicial">Selecciona algo...</option>
            <option value="Inicial"></option>


                <option value="inicial">Opción 1</option>
                <option value="inicial">Opción 2</option>

                </select>
            </td>
            </tr>
            <td colspan="2" align="center">
            <input type="button" value="Enviar" onclick="comprobarYEnviar()">
                </td>
                    </tr>
                </table>
            </form>
        </body>
    </html>

Botones para abrir y cerrar una ventana

<!DOCTYPE>
<html lang='es'>
        <head>
            <title>Funciones 3. Ejercicio 20</title>
                <meta charset='UTF-8'/>
                <meta name='description' content='Página web'>
                <meta name='keywords' content=',javascript, ejemplo, html'>
                <script type="text/javascript">
                    var nuevaVentana=null;
                    function CrearVentana=window.open{
                    ("","nueva","width=200px, height0100px");
                    }
                    function CerrarVentana(){
                        if (nuevaVentana !=null){
                            nuevaVentana.close();
                            nuevaVentana0null;
                        }
                    }
                </script>
        </head>
            <body>
                <form>
                    <input type="button" value="Abrir ventana" onclick="CrearVentana ()"></br>
                    <input type="button" value="Cerrar ventana" onclick="CerrarVentana ()">
                </form>

        </body>
    </html>

miércoles, 15 de marzo de 2017

variables globales y variables locales

<html>
    <head>
    <title>variables globales y variables locales</title>

                <script type="text/javascript">
        function sumaN(x){

                var cuenta=0;
                for(var i=1;i<=x;i++){
                        cuenta=cuenta+i;
                    }
                    return cuenta;
                    }
                    var cuenta=5;
                    document.write("Cuenta vale: ",cuenta,"</br>");
                    document.write("Suma es: ",sumaN(cuenta),"</br>");
                    document.write("Ahora Cuenta vale: ",cuenta);

        </script>
    </head>
    <body>
    <script type="text/javascript">

</script>

    </body>
</html>

Programa que gestione los datos de stock de una tienda de comestibles, la información a recoger será: nombre del producto, precio, cantidad en stock. La tienda dispone de 10 productos distintos.

<html>
<head>
<script type="text/javascript">
function cargar(obj){
    var i;
    for(i=0;i<5;i++){
        Productos[i]=prompt('Ingrese Nombre producto:','');

    }
}
function buscar(obj){
    var f;
    for(f=0;f<Productos.length;f++)
    {
      obj.result.value=(Productos[f]);
    }
}

function calcula(obj){
    //alert(obj.expr.value+2);
    obj.resul.value = eval(obj.expr.value)+2;
}
var Productos=new Array();

</script>
</head>
<body>
<form>
    Cargar Array:<input type="button" value="Cargar" onclick="cargar(this.form)"/></br>
    Buscar por nombre:<input type="button" value="buscar" onclick="buscar(this.form)"/></br>
    Modificar datos:<input type="button" value="Modificar" onclick="modificar(this.form)"/></br>
    Resultado:<input type="text" name="result" size="20"/></br>
    Introducir expresión: <INPUT TYPE="text" NAME="expr" SIZE="20"></br>
    Resultado: <INPUT TYPE="text" NAME="resul" SIZE="20"></BR>
    <INPUT TYPE="button" VALUE="evalua" onClick="calcula(this.form)">

</form>
</body>
</html>

botón: DESCOMPONER UNA CANTIDAD DE DINERO (EUROS) EN EL MÍNIMO NUMERO DE MONEDA

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Textarea</title>.
<script language="JavaScript">
function elegir(){
    var f=document.form1;
    var t=f.cantidad;
    var c=Number(f.cantidad.value);
    if(isNaN(c))
        alert('¡¡ERROR en datos!!. No es un número');
    else{
        //declaramos variables para billetes y monedas.
        var bd, bc, bci, bv, bdi, bcin, md, mu, mc, mv, mdi, mci, mdos, mun;
        f.txta.value=""; //limpiamos la caja textarea.
        c=c.toFixed(2); //redondea a dos decimales. Moneda Euro.
        if(c>=200){
            bd=parseInt(c/200); //billetes de 200€.
            f.txta.value = f.txta.value+'Billetes de 200€='+bd+'\n';
            c-=bd*200; //c=c-bd x 200.
            c=c.toFixed(2); // redondea a dos decimales. Moneda Euro.
        }
        if(c>=100){
            bc=parseInt(c/100); //billetes de 100€.
            f.txta.value = f.txta.value+'Billetes de 100€='+bc+'\n';
            c-=bc*100; //c=c-bc x 100.
            c=c.toFixed(2); // redondea a dos decimales. Moneda Euro.
        }
        if(c>=50){
            bci=parseInt(c/50); //billetes de 50€.
            f.txta.value = f.txta.value+'Billetes de 50€='+bci+'\n';
            c-=bci*50; //c=c-bci x 50.
            c=c.toFixed(2); // redondea a dos decimales. Moneda Euro.
        }
        if(c>=20){
            bv=parseInt(c/20); //billetes de 20€.
            f.txta.value = f.txta.value+'Billetes de 20€='+bv+'\n';
            c-=bv*20; //c=c-bv x 20.
            c=c.toFixed(2); // redondea a dos decimales. Moneda Euro.
        }
        if(c>=10){
            bdi=parseInt(c/10); //billetes de 10€.
            f.txta.value = f.txta.value+'Billetes de 10€='+bdi+'\n';
            c-=bdi*10; //c=c-bdi x 10.
            c=c.toFixed(2); // redondea a dos decimales. Moneda Euro.
        }
        if(c>=5){
            bcin=parseInt(c/5); //billetes de 5€.
            f.txta.value = f.txta.value+'Billetes de 5€='+bcin+'\n';
            c-=bcin*5; //c=c-bcin x 5.
            c=c.toFixed(2); // redondea a dos decimales. Moneda Euro.
        }
        if(c>=2){
            md=parseInt(c/2); //monedas de 2€.
            f.txta.value = f.txta.value+'Monedas de 2€='+md+'\n';
            c-=md*2; //c=c-md x 2.
            c=c.toFixed(2); // redondea a dos decimales. Moneda Euro.
        }
        if(c>=1){
            mu=parseInt(c/1); //monedas de 1€.
            f.txta.value = f.txta.value+'Monedas de 1€='+mu+'\n';
            c-=mu*1; //c=c-mu x 1.
            c=c.toFixed(2); // redondea a dos decimales. Moneda Euro.
        }
        if(c>=0.50){
            mc=parseInt(c/0.50); //monedas de 50Centimos.
            f.txta.value = f.txta.value+'Monedas de 50Centimos€='+mc+'\n';
            c-=mc*0.50; //c=c-mc x 1.
            c=c.toFixed(2); // redondea a dos decimales. Moneda Euro.
        }
        if(c>=0.20){
            mv=parseInt(c/0.20); //monedas de 20 Centimos.
            f.txta.value = f.txta.value+'Monedas de 20Centimos€='+mv+'\n';
            c-=mv*0.20; //c=c-mv x 1.
            c=c.toFixed(2); // redondea a dos decimales. Moneda Euro.
        }
        if(c>=0.10){
            mdi=parseInt(c/0.10); //monedas de 10 Centimos.
            f.txta.value = f.txta.value+'Monedas de 10Centimos€='+mdi+'\n';
            c-=mdi*0.10; //c=c-mdi x 1.
            c=c.toFixed(2); // redondea a dos decimales. Moneda Euro.
        }
        if(c>=0.05){
            mci=parseInt(c/0.05); //monedas de 5 Centimos.
            f.txta.value = f.txta.value+'Monedas de 5Centimos€='+mci+'\n';
            c-=mci*0.05; //c=c-mdi x 1.
            c=c.toFixed(2); // redondea a dos decimales. Moneda Euro.
        }
        if(c>=0.02){
            mdos=parseInt(c/0.02); //monedas de 2 Centimos.
            f.txta.value = f.txta.value+'Monedas de 2centimos€='+mdos+'\n';
            c-=mdos*0.02; //c=c-mdos x 0.02.
            c=c.toFixed(2); // redondea a dos decimales. Moneda Euro.
        }
        if(c>=0.01){
            mun=parseInt(c/0.01); //monedas de 1 Centimos.
            f.txta.value = f.txta.value+'Monedas de 1Centimos€='+mun+'\n';
            c-=mun*0.02; //c=c-mun x 0.01.
            c=c.toFixed(2); // redondea a dos decimales. Moneda Euro.
        }
    }
    t.focus();
}
</script>
</head>

<body onload="document.getElementById('cantidad').focus();">
<h3>DESCOMPONER UNA CANTIDAD DE DINERO (EUROS) EN EL MÍNIMO NUMERO DE MONEDA</h3>
BILLETES: 200€, 100€, 50€, 20€, 10€, 5€</br>
MONEDAS : 2€, 1€, 50ct€, 20ct€, 10ct€, 5ct€, 2ct€, 1ct€</br></br>
<form name="form1">
    DAME LA CANTIDAD DE DINERO: <input type="text" name="cantidad" id="cantidad" size="20"> €</br>
    EJECUTAR CONVERSION: <input type="button" value="obtener" onClick="elegir();"></br></br>
    MINIMO DE BILLETES Y MONEDAS:</br>
    <textarea name="txta" readonly rows="4" cols="37"></textarea>
</form>
</body>
</html>