Mis cursos: 2017

miércoles, 14 de junio de 2017

Teoría

En Javascript, ¿cómo se llama el objeto que representa una expresión regular?

RegExp

¿Qué función existe en el DOM, (Document Object Model, Modelo de Objetos para la representación de documentos)?

getElementsByld()

¿Qué es onBlur?

Un gestor de eventos

¿Qué puedes hacer con OnMouseOver?

Este evento se desata cuando el puntero del ratón entra en el área ocupada por un elemento de la página

De las siguientes expresiones marca las correctas:

-a) Blur es un evento que ocurre cuando se pierde el foco V

-b) Click es un evento que ocurre cuando se pulsa una tecla del teclado F

-c) focus es un evento dado a un objeto y que a la vez lo pierde otro (Es contrario a Blur)V

-d) mouseover es una variable de salida cuando el usuario mueve el puntero del ratón por encima de un campo de formulario F

-e) Select es un evento que ocurre cuando el usuario selecciona un campo de un formularioV

-f) Submit es el nombre de una función que asume la preferencia de ejecutar una operación F

-g) unload ocurre cuando el usuario abandona una página. Es lo contrario de onload. V

-h) En la técnica de manejo de eventos, mediante lenguaje de guión, para definir las acciones que se requieren realizar al producirse un evento, se utilizan los manejadores de eventos. V

-i) La propiedad onsubmit="validar"()" es una acción asociada al evento (submit) F

De las siguientes expresiones regulares Javascript, marca las correctas

a) Para un correo electrónico: /^[0-9a-zA-Z._.-] +\@[0-9a-zA-Z._.-]+\.[0-9a-zA-Z]+$/ Verdadero
b) Para un campo de teléfono de 9 dígitos: /^/d(9)$/ Falso
c) Para una fecha: /^\d{1,2}\/\s{1,2}\/\d{2,4}$ Falso
d) Para número de tele´fono: /[0,9]{2,3}-??[0-9](6-7)$ Falso

Para validar expresiones de la forma 1234-ABC, utlizamos el siguinet código de validación

/\d{4}[-][A-Z]{3}\b/

¿Qué es lo que hace el siguiente código de función?

a) Esta función impide al ususrio introducir en un determinado campo caracteres no alfabéticos.

El siguiente código de validación corresponde a:

/^[-\w.%+]{1,64}@(?:[A-Z0-9-]{1,63}\.){1,125}[A-Z]{2,63}$/
--un correo electrónico

¿Qué lenguajes se utilizan en la fase de maquetación?

HTML Y CSS

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>