Ciclos

Clase 18 de 50 • Curso de Programación Básica 2014

David Antonio Ordóñez Cornejo

student•

La jerarquía de los objetos en Javascript es:
navigator
window
document

Un elemento iterador o variable iteradora, es lo que hace posible el ciclo.

Importante!!

Para evitar las variables globales y el ámbito global de Javascript, existe un patrón de diseño llamado singleton (lo que significa que se hace con objetos)

El bucle while es muy bueno, pero implica que la variable iteradora siempre deba estar antes declarada, con for se ahorra ese paso. Con defininos: "para la variable iteradora n, mientras la condicion con n se cumple, incrementa n".

Aún hay dudas con for, pues no se si la condición sea siempre como un while o si también puedas definir directamente el número de iteraciones a realizar.

Karenn Yeraldin Hernández Duarte

student•

El objetivo de la funcion calcular es encontrar el factorial del numero que se inserta en la caja de texto. Siempre se define directamente el numero de iteraciones a realizar con ese numero que se insertó.

Edder Silva

student•

No tiene ciclos, pero intente usar lo aprendido hasta ahora:

http://arskang.neocities.org/Juego/JuegoIndex.html

Emmanuel Martínez

student•

Te quedó re PRO! me encantó..

Agustin Avila

student•

SNIPPETS en sublime text.

Para hacer más rápido al tener que escribir la estructura html básica les recomiendo utilizar un snippet. Como????

En el menú Tools > New Snippet...

Les aparece algo asi ...

<snippet>

	<content><![CDATA[

Hello, ${1:this} is a ${2:snippet}.

]]></content>

	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->

	<!-- <tabTrigger>hello</tabTrigger> -->

	<!-- Optional: Set a scope to limit where the snippet will trigger -->

	<!-- <scope>source.pytho n</scope> -->

</snippet>

(WTF!!!)... esa fue mi primera expresión cuando lo vi :P, es más fácil de lo que parece :).

Borramos esta línea de código para insertar nuestra estructura básica de html5.

Hello, ${1:this} is a ${2:snippet}.

Ahora pegamos la estructura básica html5.

<!DOCTYPE html>

<html lang="es">

	<head>

		<meta charset="utf-8"

		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

		<title>$1</title>

	</head>

	<body>

		<header>

			<h1></h1>

		</header>

		<section>

		</section>

		<footer>

		</footer>

	</body>

</html>

(Ustedes pueden modificarla según su gusto ;) )

Después tenemos que poner la palabra clave para invocar este snippet, en este caso html5.

<!-- <tabTrigger>hello</tabTrigger> -->

Le sacamos los comentarios. (ctrl+/)

<tabTrigger>hello</tabTrigger>

Y reemplazamos "hello" por nuestro nombre clave html5.

<tabTrigger>html5</tabTrigger>

Guardamos (ctrl+s) y listo.

Para probarlo en un archivo nuevo escribimos

html5 + tab

Joaquin Garcia Real Joya

student•

Alguien tiene la respuesta al por qué no le dio resaltado cuando puso un 1.5, pero si cuando puso 7.5?

Jota Jota

student•

En teoría si se dio el resultado en los dos casos (1! = 1) y por qué 1 y no 1.5. citando al compañero CUDOX "El Number(); convierte el valor a Entero, por eso no toma los decimales"

Anyelina Moreno Robledo

student•

Por qué no entran los números decimales ?
Caso de 1.5
Cuando entra al ciclo (n = 1, 1 <= 1.5, n ++):

- entra al ciclo y se hace la operación: 1 * 1 = 1

- luego n se incrementa n++ por lo que "1 + 1 = 2"

Cuando vuelve a entrar al ciclo se compara (2 <= 1.5)

- 2 no es menor que 1.5 , por lo que aquí acaba el ciclo dando como resultado : 1

Number (t.value); -> convierte el valor de la caja que es un texto a número , pero si se le inserta un decimal lo mantiene como decimal , siendo un número decimal

Edgardo Raúl Galletto

student•

He revisado e investigado que innerHTML no está soportado en navegadores viejos y algunos medios raros como el de un BlackBerry 8520. Por lo visto tuve que usar textConent en su lugar. Otra: si uso textContent es solo para texto. Si pongo alguna etiqueta html también aparecerán como texto. Cosa que no ocurre con innerHTML.
Quería hacer este ejemplo funcional para la MoraNegra (BolaNegra según un amigo mío). Le tuve que agregar JQuery y funcionó! Acá se los comparto el código.

<!DOCTYPE html>  
<html lang="es">  
<head>  
    <meta charset="utf-8" />   
    <link rel="shortcut icon" href="http://www.webmoderna.com.ar/wp-content/uploads/2014/09/favicon.ico" type="image/x-icon"/>  
    <title>Ciclos</title>  
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
    <script type="text/javascript">  
var a, t, b;  
function calcular()  
{  
    var numero = Number(t.value);  
    var calculo = 1;  
    var n = 1;  
    while(n <= numero)  
    {  
        calculo = calculo * n;  
        n++;  
    }  
    c.textContent = calculo;  
    // c.innerHTML = "<strong>" + calculo + "</strong>";  
}  
function inicio()  
{  
    c = document.getElementById("caja");  
    t = document.getElementById("alejandra");  
    b = document.getElementById("botoncito");  
    // c = $("#caja");  
    // t = $("#alejandra");  
    // b = $("#botoncito");  
  
    // b.addEventListener("click", calcular);  
    $(b).on("click", calcular);  
  
    // var numeros = 1;  
    // var residuo;  
    // while (numeros <= 50)  
    // {  
    //     residuo = numeros % 2;  
    //     if(residuo == 0)  
    //     {  
    //         c.innerHTML += " " + numeros;  
    //     }  
    //     numeros++;  
    // }  
}  
    </script>  
</head>  
<body>  
    <input type="number" id="alejandra" />  
    <button id="botoncito">Tócameee!</button>  
    <div id="caja">G</div>  
    <div>Otra caja</div>  
    <script type="text/javascript">  
    inicio();  
    </script>  
</body>  
</html>

Alejandro

student•

Buenos días.
Se que el comentario no tiene nada que ver con la clase pero si con la plataforma.
He notado que a veces el vídeo se adelanta o se atrasa solo, no se si influirá el que yo use una tableta.
¡Abrazos y muchas gracias por las clases, me han servido mucho!

Sam Martínez

student•

Yo uso computadora y de igual forma de adelanta.

Kevin Bueno

student•

Me pasa lo mismo, google chrome 64 bits y W10.

Oscar Perez Martinez

student•

Les dejo la manera en que yo calcule el factorial

<html>  
    <head>  
        <title>CICLOS</title>  
        <meta charset="UTF-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    </head>  
    <body>  
        <div id="caja">  
            <input type="text" id="numero"/>  
            <button  id="calcular">Calcular</button>  
            <h1 id="salida"></h1>  
        </div>  
        <script>  
              
            var numero=document.getElementById("numero");  
            var salida=document.getElementById("salida");  
            document.addEventListener("click",calcular,false);  
           function calcular()  
           {  
               
               var valorNumero=numero.value;  
               var res=valorNumero;  
               for(var i=valorNumero-1;i>=1;i--)  
               {  
                 res*=i;  
                 salida.innerHTML+=valorNumero+"*"+i;  
                 salida.innerHTML+="<br>";  
                   
               }  
               salida.innerHTML+=res;  
           }  
              
        </script>  
    </body>  
</html>

José Arellano Vega

student•

para los numeros decimales deben transformar a float, la funcion number tranforma a enteros igual que parseInt, cambien eso a parseFloat().
Saludos.

Ley Vargas

student•

Muchísimas gracias por tu comentario, resolví un problema que tenía. Saludos!

Wilson Javier Rueda Triana

student•

Trar algo de id es: getElementById, enviar algo al id es: innerHTML, evento de un boton es: addEventListener("Evento ej: click", funcion);

Jesus Daniel

student•

en respuesta a la tarea del profe, cuando se coloca una coma (,) el código no lo reconoce ya que para decir que es un decimal se utiliza un punto, entonces como no lo reconoce como un numero entero o decimal dice que esta fuera de los parámetros ya sea mayor o menor y coloca 1 por defecto. (esta es mi suposición no tengo idea si es cierto o falso lo que dije :p ).

Carlos Galiana

student•

Estoy de acuerdo contigo.

Un saludo

Leudi Tejeda

student•

Calculadora de los impuestos que cobran por el Servicio de Telefonía en mi país.

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <title>Ciclos</title>  
  
    <style type="text/css">  
    #content {width: 300px; height: 400px; margin: auto; background: #ccc; border: solid 1px #BBBBBB; text-align: center;}  
    .titulo {display: block; width: 300px; height: 50px; background: #fff; margin: 0; padding: 0; padding-top: 15px; text-align: center; }  
    </style>  
  
    <script type="text/javascript">  
  
var v,i,b,s,t;  
    function inicio()  
    {    
        v = document.getElementById ("valor");   
        v = v.value;  
        b = document.getElementById ("boton");  
        s = document.getElementById ("isc");  
        t = document.getElementById ("isc");          
          
        b.addEventListener("click", calcular);  
    }  
  
    function calcular()  
    {  
        v = Number(valor.value);  
        var i = v * 18 / 100;  
        var s = v * 10 / 100;  
        var t = v * 2 / 100;  
        tsi.innerHTML = v-i-s;  
        itbis.innerHTML = i;  
        isc.innerHTML = s;  
        it.innerHTML = t;  
  
  
    }  
    </script>  
  
  
</head>  
<body>  
  
  
    <div id="content">  
            <h2 class="titulo">CALCULA IMPUESTOS</h2>  
            <br />  
            <h3>Valor de tu Factura de telefono</h3>  
            <input type="text" id="valor" value="" />  
            <br />  
            <br />  
            <input type="button" id="boton" value="Calcula el ITBIS" />  
            <br />  
            <br />  
            <p>Total sin impuestos: <spam id="tsi"> </spam></p>  
            <p>ITBIS: <spam id="itbis"> </spam></p>  
            <p>Impuesto Selectivo al Consumo: <spam id="isc"> </spam></p>  
            <p>Impuesto Telecomunicaciones: <spam id="it"> </spam></p>  
  
  
  
    </div>  
  
    <script type="text/javascript">  
        inicio();  
    </script>      
  
      
<body>  
</html>

Carlos Andrés Millan Satizabal

student•

Off Topic - He notado que cuando uno pausa el video y despúes le doy play, el video se adelanta 2 o 3 segundos. Es normal?

ElGatoLoco

student•

Por lo que he visto le pasa a varios. Dicen que pases de la opción de vídeo 1 a la 2 para que deje de pasar. Saludos ;D

Jose Geovany Ardon Benito

student•

Iteración es el acto de repetir un proceso para alcanzar una meta o resultado especifico

Freivin Campbell

student•

min 39:00 eso se llama factorial de un numero :D

Alfrey Parreño Valiente

student•

Porque no escribir la función inicio() después de las etiquetas <div> ???
Esta manera no tendríamos que embocarlos !

iCynderShock

student•

<!DOCTYPE html>  
<html>  
    <head>  
        <title>ciclos</title>  
        <meta charset="utf-8" />  
        <script type="text/javascript">  
        var t, b, t1, t2, t3, t4, b, b1, b2, b3, b4, c, c1, c2, c3, c4;  
        function inicio()  
        {  
          t = document.getElementById("texto");  
          b = document.getElementById("boton");  
          c = document.getElementById("caja");  
          t1 = document.getElementById("texto1");  
          b1 = document.getElementById("boton1");  
          c1 = document.getElementById("caja1");  
          t2 = document.getElementById("texto2");  
          b2 = document.getElementById("boton2");  
          c2 = document.getElementById("caja2");  
          t3 = document.getElementById("texto3");  
          b3 = document.getElementById("boton3");  
          c3 = document.getElementById("caja3");  
          t4 = document.getElementById("texto4");  
          b4 = document.getElementById("boton4");  
          c4 = document.getElementById("caja4");  
  
          b.addEventListener("click", calcularm2);  
          b1.addEventListener("click", calcularr2);  
          b2.addEventListener("click", calcularX2);  
          b3.addEventListener("click", calcularD2);  
          b4.addEventListener("click", calcularx1);  
        }  
        function calcularm2()  
        {  
          var numero =  Number(t.value);  
          alert(numero + 2);  
          c.innerHTML = t.value + "+2="+ (numero + 2);  
        }  
        function calcularr2()  
        {  
          var numero =  Number(t1.value);  
          alert(numero - 2);  
          c1.innerHTML = t1.value + "-2="+ (numero - 2);  
        }  
        function calcularX2()  
        {  
          var numero =  Number(t2.value);  
          alert(numero * 2);  
          c2.innerHTML = t2.value + "*2="+ (numero * 2);  
        }  
        function calcularD2()  
        {  
          var numero =  Number(t3.value);  
          alert(numero / 2);  
          c3.innerHTML = t3.value + "/2="+ (numero / 2);  
        }          
        function calcularx1()  
        {  
          var numero = Number(t4.value);  
          var calculo = 1;  
          var n;  
          for(n=1; n<=numero; n++)  
            {  
              calculo = calculo * n;  
            }  
            c4.innerHTML = t4.value + "*" + calculo;  
        }  
        </script>  
    </head>  
    <body>  
        <h2>SUMA</h2>  
        <input type="text" id="texto" value=""/>  
        <input type="button" id="boton" value="+2" />  
        <h3 id="caja"></h3>  
        <h2>RESTA</h2>  
        <input type="text" id="texto1" value=""/>  
        <input type="button" id="boton1" value="-2" />  
        <h3 id="caja1"></h3>  
        <h2>MULTIPLICACIÓN</h2>  
        <input type="text" id="texto2" value=""/>  
        <input type="button" id="boton2" value="X2" />  
        <h3 id="caja2"></h3>  
        <h2>DIVISIÓN</h2>  
        <input type="text" id="texto3" value=""/>  
        <input type="button" id="boton3" value="/2" />  
        <h3 id="caja3"></h3>  
         <h2>FACTORIZACIÓN</h2>  
        <input type="text" id="texto4" value=""/>  
        <input type="button" id="boton4" value="F" />  
        <h3 id="caja4"></h3>  
          
          
        <script type="text/javascript">  
            inicio();  
        </script>  
    </body>  
</html>

Esteban Soto

student•

en html5 vi que con <input type= number... , me facilita el control de que si engresan o no un numero o texto

Sebastian Quintero

student•

Creería que es mejor usar una expresión regular para validarlo, ya que por medio del web kit se puede desactivar la etiqueta.

Eduardo Bianchi

student•

Con esta información yo hice una calculadora de cuadrados! Quedo genial! Codigo:
var boton, dato, cuadrado;

function inicio()  
{  
  boton = document.getElementById('calcular')  
  dato = document.getElementById('caja')  
  boton.addEventListener("click" ,main);  
}  
function main()  
{  
    var cuadrado = Number(dato.value)  
    alert("Resultado: " + cuadrado * cuadrado)

Para evolucionar mi calculadora, quería que al entrar a la página al usuario le aparezca un prompt en el que pone si quería calcular cuadrados o cubos, si ponia Cubos entonces el dato que pusiera se multiplicaria por si mismo dos veces pero no logré hacer esto, alguna idea?

Ivo Facundo Chayle

student•

te doy una idea no la probe pero capaz funcione
creas un prompt que pida si quiere o no ya sea cuadrado o cubo, y lo que escribas se lo asignas a una variable. Esa variable se la pasas como argumento a la funcion main()
y si por ejemplo escribio "cuadrado" haces un condicional y listo :)

Espero te sirva saludos!

David Antonio Ordóñez Cornejo

student•

Mi ejercicio:

Html:

<!DOCTYPE html>  
<html lang="es">  
<head>  
    <meta charset="UTF-8">  
    <title>Ciclos</title>  
    <script src="script.js"></script>  
</head>  
<body>  
    <h1>Hola, este es un título</h1>  
    <p>Hola, este es un texto que aparece después que la función alert en el namespace y antes del alert de la función de inicio</p>  
    <input type="text" id="alejandra">  
    <input type="button" id="botoncito" value="tocame">  
    <div id="caja">Hola mamá</div>  
    <div id="otra-caja">Esta es otra caja</div>  
    <script type="text/javascript">  
        inicio();  
    </script>  
</body>  
</html>

Javascript:

console.log('¡Hola!'); // Así namás  
  
  
  
alert('No funciona aún');  
  
  
  
// cuando se termina de cargar la etiqueta body: es una función de inicio  
  
//function inicio () {  
//    alert("Ya Funciona");  
//    var c = document.getElementById('caja');  
//    c.innerHTML += ' y <br><strong>Bye</strong> papá';  
//  
//}  
  
// Todo esto es un muy buen ejemplo de scopes(ambito de variables) en javadcript, hay que uar singleton  
  
var c, t, b;  
  
  
// Como un document ready de jquery  
  
function inicio () {  
    alert("Ya Funciona");  
      
    c = document.getElementById('caja');  
  
    t = document.getElementById('alejandra');  
  
    b = document.getElementById('botoncito');  
  
    // con dos parametros, evento y función, acá la función no se escribe con ()  
    b.addEventListener('click', calcularfor);  
  
  
  
  
    // ciclo con while  
    //var gritos = 50;  
      
    //while(gritos > 0){  
  
    //    c.innerHTML += "a";  
    //    gritos--;  
    //}  
    //c.innerHTML += "iiiita";      
  
  
  
  
    // Un ciclo para imprimir pares del 0 al 50  
    //var numero = 1;  
    //while(numero <= 50){  
    //    if(numero % 2 == 0){  
    //        c.innerHTML += numero;  
    //    }  
    //    numero++;  
    //}  
  
}  
  
// funcion calcular con while  
  
function calcularwhile (){  
  
    var numero = Number(t.value); //siempre hay que convertir a número en cajas de texto  
    var calculo = 1; // donde se guarda el resultado  
    var n = 1; //variable de iteración  
    while(n <= numero){  
        calculo = calculo * n;  
        n++;  
        c.innerHTML += ' ' + calculo;  
    }  
}  
  
// funcion calcular con for  
  
function calcularfor (){  
  
    var numero = Number(t.value); //siempre hay que convertir a número en cajas de texto  
    var calculo = 1;  
    for (var n = 1; n <= numero; n++) {  
        calculo *= n;  
        c.innerHTML += ' ' + calculo;  
    };  
}

Saludos

Juan Gómez

student•

Realice mi propio ejercicio de los "números primos" aplicando el tema visto:

<!DOCTYPE html>  
<html lang="es">  
    <head>  
        <meta charset="utf-8" />  
        <title>.:: Números primos ::.</title>  
        <script type="text/javascript">  
            var texto;  
            var boton;  
            var resultado;              
              
            function inicio(){  
                texto = document.getElementById("texto");  
                boton = document.getElementById("boton");  
                resultado = document.getElementById("resultado");  
                boton.addEventListener("click", calcular);            
            }  
            function calcular(){                  
                var numero = Number(texto.value);  
                var i;  
                var primo = true;       
                if (numero == null){  
                    resultado.innerHTML = "Por favor llena el campo de texto";  
                }else{  
                    if (numero == 1){  
                        primo = false;  
                    }else if(numero != 2 || numero != 1){  
                        for (i = 2; i < numero; i++){  
                            if((numero % i) == 0){  
                                primo = false;  
                            }  
                        }  
                    }  
                }                                                      
                if (primo == true){  
                    resultado.innerHTML = "<br />El número <strong> " + numero + "</strong> es primo";                          
                }else{  
                    resultado.innerHTML = "<br />El número <strong> " + numero + "</strong> no es primo";  
                }            
            }              
        </script>  
    </head>  
    <body>          
        <h1>.:: Números Primos ::. </h1>          
        <input type="text" id="texto" />  
        <input type="button" id="boton" value="Enviar"/>  
        <div id="resultado">          
        </div>  
        <script type="text/javascript">  
            inicio();  
        </script>  
    </body>  
</html>

Ciclos

Bienvenido

Aprender a programar es fácil

La Web con Visión Profesional

Aprende sobre Algoritmos

Condicionales y operadores en programación

Qué lenguaje de programación aprender primero

Material del curso / Archivos del curso

Introducción básica a HTML y Javascript para programar

Uso del sistema de vídeo y notas

Lenguajes y compiladores

HTML y Javascript

Variables y funciones

Piedra, papel y tijera con Javascript

Variables, Matrices y Objetos en Javascript

Escribir HTML desde JS (document.write)

Matrices

Juego campo minado

Objetos del navegador

Objetos en JS

Preguntas

Ciclos y Dibujos con Canvas

Ciclos

Dibujos con canvas

Dibujar con eventos

Preguntas y respuestas

Programando juegos con canvas

Tipos de imágenes

Insertar imágenes en canvas

Dibujo de múltiples imágenes en canvas

Dibujar al enemigo y controlar a Diana

Sesión de preguntas y respuestas

Uso de Objetos, Prototype y juego de ahorcado en Canvas

Objetos en JavaScript con Prototype

Creando el juego del Ahorcado

Dibujo de un ahorcado usando Canvas

Sesión de preguntas y respuestas

Cómo crear un algoritmo para el juego del ahorcado

Extendiendo la funcionalidad de los Strings

Creando nuestro algoritmo para el juego del ahorcado

Sesión de preguntas y respuestas

Pregúntale a Freddy lo que quieras ... acerca de programación ;)

Todo lo que siempre quisiste saber sobre este curso y no te atrevías a preguntar - Parte 1

Todo lo que siempre quisiste saber sobre este curso y no te atrevías a preguntar - Parte 2

Conceptos básicos de programación: Frontend-Backend

¿Qué es Frontend y Backend?

Ejemplo de un login usando POST y GET

Ejemplo de un login usando AJAX

Sesión de preguntas y respuestas

Crea tu primer servidor web con Node.JS

Instalación de Node.js

Instalación de librerías de Node con npm

Modelo cliente servidor y seguridad web básica

Servidor web con Express y Node.js

Formulario de login con Node.js

Sesión de preguntas y respuestas

Aprende a volar un dron con Javascript

Introducción a los drones

Bases de Node.js para drones

Vuela un dron con Node.js

Sesión de preguntas y respuestas

Complementos del curso

Publica tu sitio web usando GitHub Pages