JAVASCRIPT

Las variables en JS

Pueden ser de muchos tipos distintos: 

  • De tipo boolean. 
  • De tipo String.
  • De tipo number.
  • Null o Undefined
  • Object
  • Array
  • Function

Las variables en JS

Pueden ser de muchos tipos distintos: 

  • De tipo boolean. 
  • De tipo String.
  • De tipo number.
  • Null o Undefined
  • Object
  • Array
  • Function

Resumen

var numero = 23; 

var frase = "ola k ase?";

var boleano = false;

var condicion = boleano == false;

var temp1;

Creamos una variable de esta forma

var  nombre = valorInicial

ó

var nombre;

Condiciones

var edadYunior = 26;
var edadMiguel = 38;

edadYunior < edadMiguel // true

edadYunior > edadMiguel // false

edadYunior == edadMiguel // false

edadYunior == edadYunior // true

edadYunior != edadYunior // false

var otraEdadYunior = "26";

If, else y else if

if ( 26 < 35) { 
    console.log('26 es menor que 35');
}else if ( true ) {
    console.log("Hmmm, ¿me ejecutaría?");
}else {
    console.log('26 no es menor que 36');
}

Prompt, alert, confirm

var edadUsuario = prompt('Dime tu edad');

var laConozco = confirm("Conoces la edad de Yunior?");

if (laConozco) { 
    var edadDeYunior = prompt("Dime su edad");
    if (edadDeYunior > edadUsuario){
        ..
    }else ...
}else{
    alert("Se acabo el programa");
}

condiciones múltiples

Podemos exigir que se cumplan dos condiciones a la vez. AND

if ( condicion1 && condicion2 )

O que al menos se cumpla alguna de las condiciones. OR

if ( condicion1 || condicion2 )

¿cuáles son verdad?

var esMenorDeEdad = 10 < 18;
var laTrampa = "false";
 
(esMenorDeEdad == true);
(esMenorDeEdad == 'true');
(esMenorDeEdad);
(esMenorDeEdad != false);
(esMenorDeEdad == false);
(!esMenorDeEdad)
(!esMenorDeEdad != false);
(!esMenorDeEdad == false);
(laTrampa == true);
(laTrampa)
(laTrampa === true || laTrampa == 'true')

ejecútalo en una consola de chrome

Mini ejercicio. MOB PROGRAMMING

Piedra papel tijeras

Recoger por pantalla con 2 prompts la respuesta a la pregunta :

Escoge entre : "Piedra/Papel/Tijeras"
 

Escoge entre : "Piedra/Papel/Tijeras"

 

Si el usuario introduce algún valor inválido muéstrale un alert avisándole del error. En ese caso simplemente el usuario refrescará la pantalla.

 

 

Ahora, con esos 2 valores que has guardado, pues haz el juego de piedra papel tijeras y di quien ha sido el ganador con un alert

Revisamos las vuestras de ayer

almacenando condiciones y ! 


var edad = prompt('¿Cuántos años tienes');

var esMenorDeEdad =  (edad < 18) ;

if (esMenorDeEdad) {
    console.log('Atención! va a entrar un menor');
}

if (!esMenorDeEdad){
    console.log('NO es menor de edad');
}

... 
// A lot of code here
...

if (!esMenorDeEdad){
    // Do more things
}

Pero ¿por qué iba a almacenar condiciones en variables? Vaya chorrada yunior 

Error amigo, a veces es necesario

¡ Además que lo podrás rehusar ! 

Hay que tener cuidado al operar con las variables.

var a = 20;
var b = 30;
console.log( a + b )
console.log( a - b )
console.log( a * b )
var a = 20;
var b = "30";
console.log( a + b )
console.log( a - b )
console.log( b - a )
console.log( a * b )

:) 

:(

typeof

var edad = prompt('Dime cual es tu edad');

console.log(edad);

var cumple = edad + 1;

console.log(cumple);


console.log('Vas a cumplir' + cumple + ' años');

// ¡ WTF ! 
// ¿Se te ocurre como solucionar ese problema?

typeof

var edad = prompt('Dime cual es tu edad');

console.log(edad);

var cumple = edad + 1;

console.log(typeof cumple); // String

console.log('Vas a cumplir' + cumple + ' años');

// ¡ WTF ! 
// ¿Se te ocurre como solucionar ese problema?

parseInt

var edad = prompt('Dime cual es tu edad');

edad = parseInt(edad);

var cumple = edad + 1;

console.log(typeof cumple); // Number

console.log('Vas a cumplir ' + cumple + ' años');

// Ufff menos mal :S pensé que me hacía muy viejo

operaciones

var edad = prompt('Dime cual es tu edad');
var nombre = prompt('Dime tu nombre');

console.log("El usuario tiene " + edad + " años");

console.log(edad + 1); // ¿?

console.log(edad - 1); // ¿?

console.log(nombre + 1); // Nombre1

console.log(nombre - 1); // NaN

// Lo de abajo queda gracioso, pégalo en la consola
console.log(Array(16).join(nombre -1) + ' Batman !');

También tenemos el switch

estructuras de control de flujo

var diaDeLaSemana = prompt('¿Día de la semana favorito? del 1 al 7'); 
switch (diaDeLaSemana) {
    case "1":
        console.log('Es el lunes');
        break;
    case "2":
        console.log('Es el martes');
        break;
    case "3":
        console.log('Es el miércoles');
        break;
    case "4":
        console.log('Es el jueves');
        break;
    case "5":
        console.log('Es el viernes');
        break;
    case "6":
        console.log('Es el sábado');
        break;
    case "7":
        console.log('Es el domingo');
        break;
    default:
        console.log('¿Se te fue de las manos la fiesta del sábado?');
}

¡A practicar!

Ya sabemos recoger valores con el prompt.

Ya sabemos operar con variables y sumar, restar, multiplicar, etc

Vamos a hacer el siguiente ejercicio

Un script, que le pregunte al usuario por el nombre de una fruta, por la cantidad que ha comprado y por último por el precio unitario de esa fruta. Así, hasta 5 veces sí responde que quiere seguir comprando (esto pregúntaselo con un confirm)

 

Una vez el usuario ha introducido hasta 5 compras (siempre y cuando haya dicho 4 veces que sí que quería comprar más) sácale en un alert el precio total de su cesta

IMPORTANTE: no usar bucles ni nada que no hayamos visto aún

functions

Las funciones son una serie de instrucciones que se ejecutan al usar la función y que normalmente devuelven un resultado.


Por ejemplo, nosotros ya hemos usado funciones, en este caso hemos usado los console.log(), los alert() o los confirm() y prompt()

10

Una función tiene esta pinta en javascript

function elevarAlCuadrado( numero ) {
  return numero * numero ;
}

Cuando la creamos

var cuadrado = elevarAlCuadrado(10);

Cuando la usamos

function elevarAlCuadrado ( numero ) {
  return numero * numero ;
}

Este sería el nombre de la función y es el que usaremos para llamarla.

Una función tiene esta pinta

function elevarAlCuadrado ( numero ) {
  return numero * numero ;
}

Dentro del paréntesis están los "parámetros" de la función. 

 

Esto son valores que nos pasan al llamarnos y que podremos usar dentro de la función

 

En javascript no existe el tipado ... sorry :)

 

Ptsss de momento, luego cuando lleguemos con angular verás ;)

Una función tiene esta pinta

function elevarAlCuadrado ( numero ) {
  return numero * numero ;
}

Si nuestra función devuelve hacia afuera un resultado debemos escribir un return y a la derecha el resultado.

 

En este caso la función elevarAlCuadrado devuelve la multiplicación de un número por si mismo.

Una función tiene esta pinta

function elevarAlCuadrado ( entrada ) {
  return entrada * entrada ;
}

var numero = 12;

var resultado = elevarAlCuadrado( numero ); 

console.log(numero + " al cuadrado es " + resultado);

¿para que nos sirven?

  • Problemas mucho más pequeños.

 

  • Nos aporta mucha semántica a nuestro código.

 

  • Nos permite rehusar código.

 

  • Nos evita duplicar código que luego tendríamos que mantener.

 

  • Nos facilita el trabajo en equipo.

 

  • Entender un código de JavaScript de 200 líneas que no usa funciones ... créeme .. que no te lo desearía ni aunque fueras mi peor enemigo

"Sin funciones" vs con funciones

+600 líneas en un único .js

ficheros menores de 70 líneas y funciones menores de 15 líneas

¡ A trabajar !

Clonate de nuevo este repositorio en una carpeta nueva

https://github.com/YuniorGlez/dia-01-javascript

 

Sitúate luego en la rama que se llama teaching/02-day-functions 

¡ A trabajar !

Nos ponemos en grupos y vamos a crear el piedra papel tijera lagarto spock y vamos a crearlo de nuevo pero esta vez con funciones. 

while

var nombre = prompt('Dime tu nombre');

while ( nombre === 'Miguel'){
    
    alert('Lo siento, Miguel no puede pasar');

    nombre = prompt('Dime otro nombre');

}

alert('Ahora si puedes pasar' + nombre);

while para recorrer arrays

var frutas = ["plátanos", "manzanas" , "peras"]
var contador = 0;
while ( contador < frutas.length ){
    var fruta = frutas[contador];
    alert("Fruta encontrada: " + fruta);
   
    contador++;

}

¡IMPORTANTÍSIMO!

Cuidado con los bucles infinitos y los whiles. Muchas RAM han muerto en el intento de hacer diapos como estas

El bucle for

for ( var indice = 0 ; indice < 5 ; indice++){
    
 // Código

}

//Esto
indice++;

//es lo mismo que 
indice = indice + 1;

//y también
indice+=1;

//y casi lo mismo que esto
++indice

El bucle for

for ( var indice = 0 ; indice < 3 ; indice++ )

Inicialización

condición

nuevo estado

https://www.w3schools.com/js/js_loop_for.asp

El bucle for

var frutas = [ "peras" , "manzanas" , "platanos"];

for ( var indice = 0 ; indice < frutas.length ; indice++){
 
    console.log("La fruta es " + frutas[indice] );

}

for ( var indice = 0 ; indice < 3 ; indice++ )

Inicialización

condición

nuevo estado

El bucle for

var frutas = [ "peras" , "manzanas" , "platanos"];

var numeroFrutas = frutas.length;

for (var pos = 0; pos < numeroFrutas ; pos++){
 
 var fruta = frutas[pos];
 var numero = pos + 1;
 console.log("La fruta número " + numero + " es " + fruta);

}

while

var nombre = prompt('Dime tu nombre');

while ( nombre === 'Miguel'){
    
    alert('Lo siento, Miguel no puede pasar');

    nombre = prompt('Dime otro nombre');

}

alert('Ahora si puedes pasar' + nombre);

A practicar

¿Recuerdas el ejercicio de preguntarle al usuario por 5 frutas?

 

Ahora lo vamos a hacer de la siguiente forma. Cuántas más funciones hagas y más sencillas sean mejor. 

 

Paso 1: Preguntale al usuario que cuántas frutas distintas va a comprar

Paso 2: Preguntale por cada una de las frutas por su nombre y su cantidad y su precio unitario 

Paso 3: cuando ya le has preguntado todas las veces muestra un mensaje que diga "Gracias. El precio total es: XX"

Curso de Frontend EOI-Telefonica Noviembre 2024. Javascript Segundo día :)

By Yunior González Santana

Curso de Frontend EOI-Telefonica Noviembre 2024. Javascript Segundo día :)

Segundo día de Javascript del curso de "EOI Telefónica Noviembre 2024" online.

  • 190

More from Yunior González Santana