Categoría: JavaScript

Chat

 <div >
            <h1 >Búsqueda</h1>
            <p>La cadena y la cadena a buscar</p>
            <input type="text" id="pajar" >
            
            <input type="button" id="botonbuscar" value="¿Válido?">
            <div id="resultado"></div>
        </div>

        <script>

            document.getElementById("botonbuscar").addEventListener("click", buscar);

            function buscar() {
                var pajar = document.getElementById("pajar").value;
                
                var pos = pajar.indexOf("cacahuete");
                
                if (pos===-1){
                    document.getElementById("resultado").innerHTML += pajar+"<br/>";
                }
                


            }


        </script>

Búsqueda de palabras

 <div >
            <h1 >Búsqueda</h1>
            <p>La cadena y la cadena a buscar</p>
            <input type="text" id="pajar" >
            <input type="text" id="aguja" >
            <input type="button" id="botonbuscar" value="Buscar">
            <div id="resultado"></div>
        </div>

        <script>

            document.getElementById("botonbuscar").addEventListener("click", buscar);

            function buscar() {
                var pajar = document.getElementById("pajar").value;
                var aguja = document.getElementById("aguja").value;
                document.getElementById("resultado").innerHTML = "";
                var pos = pajar.indexOf(aguja);
                while (pos !== -1) {
                    document.getElementById("resultado").innerHTML += pos + " ";
                    pos = pajar.indexOf(aguja,pos+1);
                }


            }


        </script>

Ejemplo variables globales

<div >
            <h1 >Almacen de sumas</h1>
            <p>Introduce el número del que quieres sumar</p>
            <input type="number" id="numero" >
            <input type="button" id="botoncalcular" value="Sumar">
            <input type="button" id="botondeshacer" value="Deshacer" style="display:none">
            <div id="resultado"></div>
        </div>

        <script>

            document.getElementById("botoncalcular").addEventListener("click", calcular);
            document.getElementById("botondeshacer").addEventListener("click", deshacer);
            var total = 0;
            var numero;
            function calcular() {
                numero = parseInt(document.getElementById("numero").value)
                total += numero;
                document.getElementById("resultado").innerHTML = total;
                document.getElementById("botondeshacer").style.display="";
            }
            function deshacer() {
                total -= numero;
                document.getElementById("resultado").innerHTML = total;
                document.getElementById("botondeshacer").style.display="none";
            }


        </script>

Tabla de multiplicar

<div >
            <h1 >Tabla de multiplicar</h1>
            <p>Introduce el número del que quieres la tabla</p>
            <input type="number" id="numero" >
            <input type="button" id="botoncalcular" value="Calcular">
            <div id="resultado"></div>
        </div>

        <script>

            document.getElementById("botoncalcular").addEventListener("click", calcular);

            function calcular() {
                var numero = parseInt(document.getElementById("numero").value);
                var res = tabla(numero);
                document.getElementById("resultado").innerHTML = res;
            }
            function tabla(numero) {
                var res = "<table>";
                for (var i = 1; i <= 10; i++) {
                    res += "<tr><td>" + i + "</td><td>x</td><td>" + numero +
                            "</td><td>=</td><td>" + (i * numero) + "</td></tr>";
                }
                res += "</table>";
                return res;
            }

        </script>

Interaccionar con la página


  <div id="seccion">
            <h1 id="cabecera">Formulario</h1>
            <input type="text" id="texto">
            <input type="button" onclick="cambiar()" value="pincha">
        </div>

        <script>

            function cambiar() {
                var texto=document.getElementById("texto").value;
                
                document.getElementById("cabecera").innerHTML=texto;
            }

        </script>
		
		    <div id="seccion">
            <h1 id="cabecera">Formulario</h1>
            <input type="text" id="nombre" onkeyup="cambiar()">
            <input type="text" id="apellidos" onkeyup="cambiar()">
            <p id="resultado"></p>
        </div>

        <script>

            function cambiar() {
                var nombre = document.getElementById("nombre").value;
                var apellidos = document.getElementById("apellidos").value;

                document.getElementById("resultado").innerHTML = nombre + " " + apellidos;
            }

        </script>
		
		 <div id="seccion">
            <h1 id="cabecera">Formulario</h1>
            <input type="text" id="nombre" onchange="cambiar()" onfocus="aviso('nombre')">
            <input type="text" id="apellidos" onchange="cambiar()" onfocus="aviso('apellido')">

            <p id="resultado"></p>
            <p id="ayuda"></p>
        </div>

        <script>
            function aviso(texto){
                document.getElementById("ayuda").innerHTML="Introduzca el "+texto;
            }
            function cambiar() {
                var nombre = document.getElementById("nombre").value;
                var apellidos = document.getElementById("apellidos").value;

                document.getElementById("resultado").innerHTML += nombre + " " + apellidos+"<br/>";
            }

        </script>
		
		 <div id="seccion">
            <h1 id="cabecera">Formulario</h1>
            <input type="text" id="nombre" >
            <input type="text" id="apellidos" >

            <p id="resultado"></p>
            <p id="ayuda"></p>
        </div>

        <script>

            document.getElementById("nombre").addEventListener("change", cambiar);

            document.getElementById("apellidos").addEventListener("change", cambiar);

            function cambiar() {
                var nombre = document.getElementById("nombre").value;
                var apellidos = document.getElementById("apellidos").value;

                document.getElementById("resultado").innerHTML += nombre + " " + apellidos + "<br/>";
            }

        </script>
	 <div >
            <h1 >Fibonacci</h1>
            <p>Introduce el número que quieres calcular</p>
            <input type="number" id="numero" >
            <input type="button" id="botoncalcular" value="Calcular">
            <p id="resultado"></p>
        </div>

        <script>
            document.getElementById("botoncalcular").addEventListener("click", calcular);

            function calcular(){
                var numero=parseInt(document.getElementById('numero').value);
                var f=fibonacci(numero);
                document.getElementById('resultado').innerHTML=f.toLocaleString();
            }

            function fibonacci(numero) {
                var a = 0, b = 1, c = 1;
                for (var i = 2; i <= numero; i++) {
                    c = a + b;
                    a = b;
                    b = c;
                }
                return c;
            }
        </script>

Ejercicios while for javascript

Quiz Khanacademy

función fibonacci(numero) -> nos devuelve la funciónd e fibonacci de un número.

Hacer un bucle con una variable a que puede valer cualquier número.

Vamos a realizar las siguientes operaciones:

Mientras a sea mayor que uno

Si a es impar le sumamos uno.

Si a es par lo dividimos por dos.

Crear un bucle for que nos muestre la tabla de multiplicar del 5.

Modificarlo para hacer una función que nos muestre la tabla de multiplicar del número que le pasemos.

Modificarlo para que en vez de mostrarlo nos devuelva una cadena.

función que nos pinte un arbol inverso, justo al revés del que ya tenemos.

Hay una conjetura matemática que dice que lo siguiente:

Sea la siguiente operación, aplicable a cualquier número entero positivo:

  • Si el número es par, se divide entre 2.
  • Si el número es impar, se multiplica por 3 y se suma 1.

Al final siempre obtenemos uno.

Ejemplo:  13, 40, 20, 10, 5, 16, 8, 4, 2, 1.

Crear un bucle que, partiendo de una variable a con un valor cualquiera, vaya haciendo los pasos (y mostrándolos por consola) y que acabe cuando valga uno.

Después haremos una función que haga lo mismo y que nos devuelva una cadena con los pasos.

 

Ejemplos funciones


function saludo(nombre, numero) {
console.log("Hola " + nombre + " que tal");
console.log("Yo estoy muy bien");
console.log("La raiz cuadrada de " + numero + " es " + Math.sqrt(numero) + " ¿Lo sabías?");
}

saludo("Ana", 2);
saludo("Juan", 4);
saludo("Eva", 25);

function suma(numero) {
var s = 0;
for (var i = 1; i <= numero; i++) {
s += i;
}
return s;
}

function mayor(a, b) {
if (a > b) {
return a;
} else {
return b;
}
}

console.log(mayor(1, 8));
console.log(mayor(111, 8));

var c = mayor(3, 6);
console.log(c);

function repetir(caracter, numero) {
var res = "";
for (var i = 0; i < numero; i++) {
res += caracter;
}
return res;
}
console.log(repetir("*", 6));
console.log(repetir("#", 12));

function arbol(longitud) {
for (var i = 0; i < longitud; i++) {
console.log(repetir("*",i));
}
}
function arbol2(longitud) {
for (var i = 0; i < longitud; i++) {
console.log(repetir(" ",longitud-i)+repetir("*",i*2+1));
}
}
arbol2(8);

Ejemplos while


//Capital a interés compuesto hasta que supere una cantidad

var capital = 1000;
var periodo=1;
while (capital < 12000) {
capital*=1.1;
periodo++;
}
console.log(periodo);
console.log(capital);

//Serie de fibonacci
var a=1,b=1,c=1;

while(c<100){
console.log(c);
c=a+b;
a=b;
b=c;
}

//Duplicar una cantidad hasta que supere 1000
var a=1;

while (a<1000){
a*=2;
console.log(a);
}</pre>
var a = 1, suma = 0;
while (a <= 100) {
console.log(a);
suma += a;
a++;
}
console.log(suma);

var a = 1;
while (a < 10) {
if (a % 2 == 0) {
console.log(a + " es par");
} else {
console.log(a + " es impar");
}
a++;
}

var a = 1, sumaPares = 0, sumaImpares = 0;
while (a <= 100) {
if (a % 2 == 0) {
sumaPares += a;
} else {
sumaImpares += a;
}

a++;
}
console.log(sumaPares);
console.log(sumaImpares);</pre>
var a = 1, suma = 0;
while (a <= 100) {
if (a % 3 == 0) {
suma += a;
}
a++;
}
console.log(suma);

var a = 10;
do {
console.log(a);
a++;
} while (a < 10);

var a = 10;
while (a < 10) {
console.log(a);
a++;
}

for (var i = 1; i <= 100; i++) {
if (i % 3 == 0 && i % 5 == 0) {
console.log(i);
}
}

Ejercicios condicionales

Tenemos una variable lang que puede valer ‘es’, ‘ca’ o ‘en’. Escribir un programa que nos muestre ‘Hola mundo’ en el lenguaje especificado.

Tenemos un número que puede ser positivo o negativo. Escribir un programa que nos diga si es positivo o negativo.

Tenemos tres números en tres variables (a, b y c). Escribir un programa que nos los muestre ordenados de menor a mayor.

Tenemos una variable usuario y una password. Escribir un programa que nos diga acceso permitido si el usuario vale ‘ana’ y la password vale ‘1234’

Tenemos una variable número con el número de coches a la venta. Escribir un programa que me escriba ‘1 coche’ o ‘n coches’ (es decir, en singular o en plural) dependiendo de si son uno o varios.

Condiciones compuestas


var a, b;

a = 5;
b = 9;

if (a >= 5 && b >= 5) {
console.log("Aprobado");
} else {
console.log("suspendido");
}

if (a < 5 || b < 5) {
console.log("Suspendido");
} else {
console.log("Aprobado");
}

var ana = 20;
var juan = 15;

//Si los dos son mayores de 18 años pueden entrar, si no NO

if (ana >= 18 && juan >= 18) {
console.log("p'adentro");
} else {
console.log("No se puede pasar");
}

var dinero = 8;
var edad = 18;
var tarjeta = "si";

//¿Me puedo tomar un cubata que vale 9 euros?
if (edad >= 18 && (dinero >= 9 || tarjeta == "si")) {
console.log("Trae un cubata!!!");
}
if ((dinero >= 9 || tarjeta == "si") && edad >= 18) {
console.log("Trae un cubata!!!");
}
if ((tarjeta == "si" || dinero >= 9) && edad >= 18) {
console.log("Trae un cubata!!!");
}