JavaScript. Uando librerias externas

Usando librerias externas en nuestros proyectos, concretamente vemos un ejemplo practico de como usar la libreria typeit para dar animacion a los textos del documento web.

JavaScript. Añade elementos a la lista con jquery

Crea un documento html con una lista desordenada y un boton, desde javascript con jquery agrega elementos nuevos a la lista.

JavaScript. Recorre un array y devuelve la suma de todos los valores

Crea un array numerico y muestra la suma por consola.

En la solucion te mostrare un par de formas para obtener el mismo resultado.

Cuando completes la tarea, realiza una captura de pantalla y publicala en twitter con el hashtag #cursoJavascript #josecodetech.
Para que todos podamos comparar nuestras soluciones con los demas.
Gracias.

JavaScript. Ejercicios con Strings.

Crea un script segun las siguientes indicaciones:

1. Crea una variable con tu nombre

2. Otra con tu apellido

3. Una de nombre completo, donde se unan las variables anteriores con un espacio entre medio.

4. Cambiar a mayusculas la variable nombre completo.

5. Cambiar a minusculas la variable anterior.

6. Obtener la ultima letra del nombre.

7. Obtener la primera letra del apellido.

8. Crear una frase con espacios al principio y final, guardarla en una variable y quitarle los espacios.

9. Indicar si una palabra concreta esta dentro de la frase anterior y devolver su posicion.

Una vez resuelto, realizar una captura de pantalla y publicarla en twitter con el hashtag #cursoJavascript de #josecodetech, para que podamos ver las posibles soluciones y compartirlo, gracias.

JavaScript. Calcular IVA y total.

Crea un documento HTML con campo para la base imponible, iva y total, junto con un boton para el calculo.
Al pulsar el boton que ejecute una funcion javascript para los calculos y los muestre en los campos correspondientes.

Ejercicio selectores, cambia formato boton

Crea un documento HTML enlazado con el archivo CSS, incluyendo un boton que cuando se pase el puntero del raton por encima cambie de color de letra y fondo.

Ejercicio flex-box

Crea un documento HTML, con el titulo Flex-box, con las siguientes caracteristicas:

    Documento CSS de estilos separado del HTML.

    10 imagenes de 200 pixeles de ancho

    Las imagenes deben adaptarse a la pantalla y cambiar al espacio disponible hacia abajo

Ejercicio selectores CSS

Crea un documento HTML con el título "Selectores  CSS", con las siguientes caracteristicas:

    1. Enlaza el fichero CSS con el documento HTML

    2. Dentro del body del documento crea un encabezado, poniendole un identificador unico.

    3. Añade una lista ordenada con 4 elementos, poniendole una clase al primer elemento.

    4. Añade una lista desordenada con 4 elementos, ponidendole la misma clase del punto anterior al primer elemento.

    5. En el CSS eliminar los margenes y paddings del documento, con el selector universal * ponerlos a 0.

    6. El primer elemento de cada lista mostrarlo en color azul.

    7. A traves de encadenar selectores, hacer que el primer elemento de cada lista tenga un tamaño de 1.8rem.

 

32 JavaScript. Ejercicio linterna.

Ejercicio practico en el que se crea una linterna que se apaga o enciende al hacer click en la imagen.

Codigos de los ejemplos en GitHub

Ya he subido a #github el codigo usado en tutorial #javascript / #jquery

https://github.com/ticoticotaa/Tutorial-JavaScript

22 JavaScript. Ejercicio con array

1. Solicita al usuario 6 numeros y muestra el valor mayor y menor.

window.onload = function(){

    //console.log('Hola');

    var mayor = 0;

    var menor=99999;

    var numeros = [];

    //captura de datos

    for(var i=0;i<6;i++){

        numeros[i]=parseInt(prompt('Dime un numero y te indicare cual es el mayor de los seis...'));        

    }

    //recorremos array y comprobamos cual es el mayor / menor

    for(var i=0;i<numeros.length;i++){

        if(numeros[i]>mayor){

            mayor = numeros[i];

        }

        if(numeros[i]<menor){

            menor = numeros[i];

        }

    }

    console.log('Hemos terminado de comprobar');

    console.log(`El numero mayor es ${mayor}`);

    console.log(`El numero menor es ${menor}`);

}

2. Igual que el ejercicio anterior pero que solicite numeros hasta que el usuario indique "fin".

window.onload = function(){

    //console.log('Hola');

    var mayor = 0;

    var menor=99999;

    var numeros = [];

    var usuario = "";

    do{

        usuario = prompt('Dime un numero o escribe "fin" para terminar');

        if (usuario!='fin'){

            usuario = parseInt(usuario);

            numeros.push(usuario);

        }

    }while(usuario!='fin');

  

    //recorremos array y comprobamos cual es el mayor / menor

    for(var i=0;i<numeros.length;i++){

        if(numeros[i]>mayor){

            mayor = numeros[i];

        }

        if(numeros[i]<menor){

            menor = numeros[i];

        }

    }

    if(numeros.length>2){

        console.log('Hemos terminado de comprobar');

        console.log(`El numero mayor es ${mayor}`);

        console.log(`El numero menor es ${menor}`);

    }else{

        console.log('No hay numeros suficientes para comprobar mayor y menor');

    }

}

21 JavaScript. Ejercicios basicos

1. Solicitar un numero al usuario y mostrarle la tabla de multiplicar.

//tabla de multiplicar numero dado por usuario

let tabla = parseInt(prompt("Tabla del ... ?"));

for (let contador = 1; contador <= 10; contador++){

    let resultado = tabla * contador;

    console.log(`${tabla} * ${contador} = ${resultado}`);

}

2. Solicitar 2 números y realizar las 4 operaciones básicas.

//solicitar 2 numeros y hacer las operaciones basicas

let numero1 = parseInt(prompt("Dime el primer numero "));

let numero2 = parseInt(prompt("Dime el segundo numero "));

console.log("Procedo a calcular las operaciones basicas");

let suma = numero1 + numero2;

let resta = numero1 - numero2;

let multiplicacion = numero1 * numero2;

let division = numero1 / numero2;

console.log(`Suma = ${suma}`);

console.log(`Resta = ${resta}`);

console.log(`Multiplicacion = ${multiplicacion}`);

console.log(`Division = ${division}`);

3. Solicitar un numero e indicar si es positivo o no.

//positivo negativo

let numero = parseInt(prompt("Dime un numero y te indico si es positivo o no ..."));

if(numero > 0){

    console.log(`El numero ${numero} es positivo`);

} else if (numero < 0){

    console.log(`El numero ${numero} es negativo`);

} else {

    console.log('El numero es igual a cero');

}

4. Sumar todos los números entre dos valores dados por el usuario.

//suma entre dos valores dados

let numero1 = parseInt(prompt("Dime el primer numero "));

let numero2 = parseInt(prompt("Dime el segundo numero "));

let suma = 0;

for (numero1; numero1 <= numero2; numero1++){

    suma = suma + numero1;

}

console.log(`La suma de todos los numeros del intervalo dado es = ${suma}`);

5. Sumar pares por un lado e impares por otro, según intervalo dado por el usuario.

//suma de pares e impares entre dos valores dados

let numero1 = parseInt(prompt("Dime el primer numero "));

let numero2 = parseInt(prompt("Dime el segundo numero "));

let pares = 0;

let impares = 0;

for (numero1; numero1 <= numero2; numero1++){

    if (numero1 % 2 === 0){

        pares = pares + numero1;

    } else {

        impares = impares + numero1;

    }

}

console.log(`La suma de todos los numeros pares del intervalo dado es = ${pares}`);

console.log(`La suma de todos los numeros impares del intervalo dado es = ${impares}`);

6. Simular entrada a sistema solicitando usuario y clave, mostrar saludo si usuario es admin y contraseña 1234, en caso contrario seguir solicitando datos acceso.

//usuario contraseña

let usuario = prompt('Usuario ?');

let password = prompt('Contraseña ?');

while (usuario !== "admin" & password !== "1234"){

    console.log("Usuario o password incorrecto");

    usuario = prompt('Usuario ?');

    password = prompt('Contraseña ?');

}

console.log(`Bienvenido, ${usuario}`);

7. Añadir al ejercicio anterior solo 3 intentos.

window.onload = function(){

//usuario contraseña con 3 intentos

let usuario = prompt('Usuario ?');

let password = prompt('Contraseña ?');

let intentos = 1;

while (usuario !== "admin" & password !== "1234"){

    if (intentos > 2){

        console.log('No puedes intentarlo mas');

        break;

    }

    console.log("Usuario o password incorrecto");

    usuario = prompt('Usuario ?');

    password = prompt('Contraseña ?');

    intentos++;

    console.log(intentos);

}

if (intentos <= 3){

    console.log(`Bienvenido, ${usuario}`);

}else{

    console.log('No has entrado al sistema');

}

}

Si quieres ver los ejercicios en video,