Curso desde cero de JavaScript Capítulo 10 - El condicional if - else if - Puntuación en un juego

Curso desde cero de JavaScript Capítulo 10 - El condicional if - else if - Puntuación en un juego

Vamos avanzando en JavaScript a buen ritmo. en este décimo  capítulo veremos un ejemplo práctico de puntuaciones para un juego en JavaScript.

Hace unos días subí este mismo ejemplo pero en código Java, puedes compararlo y verás que en este tema, tienen muchas similitudes: puntuaciones en un juego - Tutorial Java.

Ejemplos prácticos con el condicional if else if

Este es un código para evaluar una puntuación en un juego.

La variable puntuación, recogería la puntuación obtenida por el jugador en un hipotético juego.

La puntuación en este código se evalúa con 4 rangos. El if hace que si la puntuación es menor que 1000, se ejecute el código en su interior y así igual con los else if, hasta llegar al else del final, el cuál se ejecuta cuando el if y los else if son falsos.

Por supuesto, puedes poner tantos else if como quieras.

 <script>
 
 var puntuacion;
  
 if(puntuacion<1000) {
   
 document.write("Debes aprender a jugar mejor, solo tienes " + puntuacion + " puntos.");
   
 }
  
 else if(puntuacion<2500) {
   
 document.write("No está mal, has sacado " + puntuacion + " puntos.");
  
 }
   
 else if(puntuacion<5000) {
   
 document.write("Eres un pro, has sacado " + puntuacion + " puntos.");
  
 }
  
 else {
   
 document.write("¡GENIO! ¿No serás un robot? Has sacado" + puntuacion + " puntos.");
  
 } 
  
 </script>

Ejemplos de puntuaciones en el juego

Imagina que en el juego, te tocan las siguientes puntuaciones y se almacenan en "puntuacion":

var puntuacion=525;

Resultado

var puntuacion=2103;

Resultado

var puntuacion=3699;

Resultado

var puntuacion=7517;

Resultado

Los comodines - Manual BASH scripting para principiantes - UBUNTU 18.04

Los comodines - Manual BASH scripting para principiantes - UBUNTU 18.04

Los comodines nos sirven para poder referirnos a multitud de archivos a la vez. Un uso muy común para estos comodines es la búsqueda masiva de archivos.

$ ls *.txt

Resultado

Como puedes comprobar, aparecen todos los .txt que tengo en la carpeta activa. * este asterisco representa uno o infinitos caracteres, por lo tanto, le dice a la Terminal que busque todos los archivos con extensión .txt, independientemente del nombre del archivo.

Ahora voy a usar el que sustituye un solo caracter (?).
Puedes ver como aparecen los archivos prueba2 y prueba3.

$ ls prueba?.txt

Resultado

Estos son los comodines básicos, aunque todavía podemos encontrar muchas más funciones que iremos viendo más adelante.

Comandos para los shell - Manual BASH scripting para principiantes - UBUNTU 18.04

Comandos para los shell - Manual BASH scripting para principiantes - UBUNTU 18.04

En este segundo capítulo vamos a ver como comprobar el shell que tenemos activo en la terminal, es decir, cuál estamos usando.
Para hacerlo, solo tienes que introducir el siguiente comando, no necesitas ser root para hacerlo. Por cierto, el símbolo $ que verás al principio de muchos comandos es para indicar el tipo de usuario. Este símbolo indica que somos un usuario normal. Si el usuario es root aparece como #.
Si te fijas, el comando indica en que shell estamos utilizando y en que carpeta está instalado.

$ echo $SHELL

Resultado

Con el siguiente comando se puede saber incluso la versión que hay de Bash.
Recuerda que Linux es case sensitive (distingue mayúsculas y minúsculas) por lo que tienes que escribirlo tal cuál te lo escribo.

$ echo $BASH_VERSION

Resultado

Para terminar, veamos cómo ver todos los shell instalados:

Curso desde cero de JavaScript Capítulo 9 - El condicional if - else

Curso desde cero de JavaScript Capítulo 9 - El condicional if - else

El condicional if

El condicional if necesita que se le especifique una condición, si esta es verdadera (true), se ejecuta el código de su interior, si es falsa (false) no se ejecuta nada.

Opcionalmente tenemos la opción de añadirle un else con el que especificar un código a ejecutar en caso de que la condición sea false.

    <script>
  
        var edad;
    
      edad = prompt ("Introduce tu edad");
     
      if(edad>=18){
   
             alert ("Bienvenido/a, puedes entrar.");
 }
   
 else{
      
      alert ("No puedes entrar, solo tienes: " + edad + " años.");
 }

    </script>

Resultado
Lo primero que aparece al ejecutarse el script es esta ventana prompt, en la cuál debes introducir una edad. Esta ventana, tal y como expliqué en un capítulo anterior, recoge datos introducidos por el usuario en una variable.

Si introduces una edad inferior a 18 años:

Aparece el mensaje del else:

En cambio, si introduzco una edad de 18 o más años, se ejecuta el mensaje del if.

En el siguiente capítulo vamos a ver el condicional if else con else if, con el que podrás evaluar todas las condiciones que quieras, no solo dos.

Curso desde cero de JavaScript Capítulo 8 - Tipos de datos II - POO - OOP - Programación orientada a objetos

Curso desde cero de JavaScript Capítulo 8 - Tipos de datos II - POO - OOP - Programación orientada a objetos I

En esta segunda parte vamos a ver el resto de tipos de datos en JavaScript.

Comencemos por los objetos.

Los objetos se escriben como los arrays, solo que se cambian los corchetes por llaves.

Los objetos se diferencian de los array, por tener la capacidad de tener atributos para cada uno de sus valores. Es decir, por ejemplo, un objeto llamado usuario podría contener un atributo para el nombre de usuario, otro para la edad, otro para el correo electrónico, otro para el sexo, etc.

Los array, además almacenan los diferentes datos sin atributos. En el array puedes poner var usuario [ "Javier", "30", "javimorales@gmail.com", "Masculino" ]; .Lo que no podrás es indicar que por ejemplo, "Javier" pertenece al atributo nombre de usuario.

Veamos un ejemplo práctico para que quede más claro.

Ejemplo práctico con objetos en JavaScript

Aquí tenemos un objeto que describe un mueble:

<script>
  
var mueble = {tipoMueble:"mesa", numeroPatas:4, material:"contrachapado", color:"negro"};
  
</script>

El objeto se ha declarado como una variable. En él se describen 4 atributos de un mueble, podrían ser todos los que quieras, no tienen porqué ser solo 4, el objeto, podrá ir cambiando de atributos a lo largo de tu código, pero eso lo iremos viendo, de momento lo importante es que veas la diferencia entre un objeto y un array.

    <script>
  
 var mueble = {tipoMueble:"mesa", numeroPatas:4, material:"contrachapado", color:"negro"};

 document.write("Se ha añadido su " + mueble.tipoMueble + " al carrito de compra." + "<br>" + "<br>");
  
 document.write("<strong>" + "Características de su " + mueble.tipoMueble + "</strong>" + "<br>");
  
 document.write("Número de patas: " + mueble.numeroPatas + "<br>" + "Material: " + mueble.material + "<br>" + "Color: " + mueble.color);
        
    </script>

Resultado

Es importante que pruebes y ejecutes el código y lo revises detenidamente para entenderlo. En realidad es mucho más sencillo de lo que parece.
en la primera línea se inicia el objeto. En él, se definen cuatro atributos.
Los tres document.write() lo único que hacen es utilizar HTML, strings (cadenas de texto) y llamadas al objeto, como puede ser "mueble.tipoMueble".

En el próximo capítulo veremos el condicional if. 

Curso desde cero de JavaScript Capítulo 7 - Tipos de datos I

Curso desde cero de JavaScript Capítulo 7 - Tipos de datos I

En JavaScript tenemos muchos tipos de datos como pueden ser los objetos, las cadenas, los números...

Tipos de datos dinámicos en JavaScript

Fíjate en este ejemplo, la variable "dinamica" en JavaScript, primero tiene un tipo de dato string (cadena de texto). Después se le especifica un tipo de dato diferente de tipo numérico.

Entonces, con este ejemplo, podemos comprender que las variables en JavaScript son dinámicas, no hay que especificarles un tipo de dato como ocurre en otros lenguajes de programación como Java.

En conclusión, los tipos de datos de las variables se cambian en función al contenido de la misma variable, lo que a mi parecer, es una ventaja enorme para facilitar la escritura de código. 

<script>
  
 var dinamica;
  
 dinamica = "The Hittos";
  
 dinamica = 300;
  
 document.write(dinamica);
  
</script>

Resultado

Tipos de datos numéricos en JavaScript

En JavaScript solo tenemos un tipo de dato numérico, puedes escribir enteros o decimales, e incluso, los número muy grandes o muy pequeños los puedes poner con notación E, por ejemplo 60e+3 = 60000.

Veamos unos ejemplos prácticos.

<script>
  
 var num1 = 100;
 var num2 = 100e2;
  
 document.write(num1 + "<br>");
 document.write(num2);
  
</script>

Resultado

Tipos de datos booleanos en JavaScript

En este tipo de dato, solo hay dos posibilidades, true o false (verdadero o falso).

En los capítulos 3 y 4 de este curso vimos los operadores, por si no lo recuerdas, el operador "==" significa idéntico a, y el operador "!=" diferente que.

El primer resultado es false, porque "num1" no es idéntica a "num2".

El segundo resultado es true, porque "num2" es diferente que "num1" .

<script>
  
 var num1 = 100;
 var num2 = 200;
  
 document.write(num1 == num2);
 document.write("<br>");
 document.write(num2 != num1);
  
</script>

Resultado

Aún nos queda por ver unos cuantos tipos de datos más en JavaScript. Estate atento/a al siguiente capítulo para ver los que te faltan.

Como siempre, deciros que si tenéis dudas, me preguntéis en los comentarios y os ayudaré.

Curso desde cero de JavaScript Capítulo 6 - Arrays

Curso desde cero de JavaScript Capítulo 6 - Arrays

La finalidad de los arrays es almacenar múltiples valores en una misma variable.

Veamos unos ejemplos prácticos para que entiendas su funcionamiento y sintaxis.

Ejemplos prácticos de array en JavaScript

Aquí tenemos un array, que básicamente es una variable con tres valores. Este array tiene 3 valores, pero puedes poner los que quieras.

<script>
  
     var refrescos = ["Cola","Limonada","Naranjada"]; 
    
</script>

Posiciones en los array

Mira la imagen, aquí se indican las posiciones de los array. Estas posiciones empiezan por el número cero.

Para que lo entiendas mejor, mira este ejemplo. Voy a llamar a la posición 2 del array.

<script>
  
     var refrescos = ["Cola","Limonada","Naranjada"]; 
    
     document.write(refrescos [2]);

</script>

Resultado

Hay otra forma de declarar un array, mediante esta sintaxis:

<script>
  
     var refrescos = new Array ("Cola","Limonada","Naranjada"); 
    
     document.write(refrescos [2]);
    
</script>

Resultado

Además, puedes dejar los array sin declarar:

<script>
  
     var refrescos = []; 
    
</script>

Curso desde cero de JavaScript Capítulo 5 - El método prompt()

Curso desde cero de JavaScript Capítulo 5 - El método prompt()

La finalidad del método prompt() es mostrar mensajes como los alert(). Además, prompt() a parte de mostrar un mensaje, deja un espacio para que el usuario introduzca información, por lo que nos encontramos con un método de salida y entrada de datos.

Vamos a ver un ejemplo práctico:

Ejemplo práctico de prompt en JavaScript

<script>
  
     var nombreUsuario;
    
     nombreUsuario = prompt ("Introduce un nombre de usuario");
     
     alert ("Bienvenido/a: " + nombreUsuario);

</script>

Resultado

Primero me aparece la ventana del prompt(). Me pide un nombre de usuario:

Le introduzco el nombre de usuario:

Me saluda el alert() con un saludo personalizado extraído de la variable nombreUsuario.

Curso desde cero de JavaScript Capítulo 4 - Operadores II - Incremento, decremento, idéntico que y diferente que

Curso desde cero de JavaScript Capítulo 4 - Operadores II - Incremento, decremento, idéntico que y diferente que

En el capítulo anterior vimos los operadores básicos de suma, resta, multiplicación y división. En este toca ver los operadores de incremento y decremento.

Utilizaré algo nuevo en este tutorial, "document.write". Sirve para mostrar en el <body> la información que se le dé como parámetro. También funciona si lo pones en el <head>, se imprime en el navegador como si estuviera en el <body>.

Operadores de incremento - decremento en JavaScript

Operador	Descripción	Sintaxis
+=	Incrementa en un determinado número el valor de una variable	Variable+=5
-=	Decrementa en un determinado número el valor de una variable	Variable-=8
*=	Multiplica en un determinado número el valor de una variable	variable*=16
/=	Divide en un determinado número el valor de una variable	variable/=7
++	Incrementa en uno el valor de una variable	variable++
--	Decrementa en uno el valor de una variable	variable--

Operadores idéntico y diferente que en JavaScript

Operador	Descripción	Sintaxis
==	Igual que	Variable==5
===	Igual que estricto	Variable1===Variable2
!==	Diferente que estricto	Variable1!==Variable2
!=	Diferente que	Variable!=8
>	Mayor que	Variable>5
<	Menor que	Variable1<Variable2
>=	Mayor o igual que	Variable1>=Variable2
<=	Menor o igual que	Variable<=8

Ejemplos prácticos de incremento - decremento en JavaScript

Operador +=

<script>
  
     var numero = 17;
  
     document.write(numero+=10);
 
</script>

Resultado

Operador -=

<script>
  
     var numero = 17;
  
     document.write(numero-=10);
 
</script>

Resultado

Operador *=

<script>
  
     var numero = 17;
  
     document.write(numero*=10);
 
</script>

Resultado

Operador /=

<script>
  
     var numero = 17;
  
     document.write(numero/=10);
 
</script>

Resultado

Operador ++

<script>
  
     var numero = 17;
  
     numero++
  
     document.write(numero++ + "<br>");
  
     document.write(numero);
 
</script>

Resultado

Operador --

<script>
  
     var numero = 17;
  
     numero++
  
     document.write(numero-- + "<br>");
  
     document.write(numero);
 
</script>

Resultado

¿Entiendes el código de los operadores "++" y "--"?
Por si no lo ves claro, te lo explico.
La variable "numero" se incrementa o decrementa en 1, según si utilizamos "++" o "--".
Con el primer "document.write" se vuelve a incrementar o decrementar, pero el segundo aumento o disminución se hace a partir del segundo "document.write". Esto se debe al flujo de ejecución de JavaScript.

Debes sabes, que utilizo la etiqueta HTML "<br>" para hacer un salto de línea. Debe ir entre comillas dobles "" o simples ''.

Por si aún así no te queda claro, mira un ejemplo práctico para que veas como funciona el flujo de ejecución de JavaScript:

<script>
  
     var numero = 17; //numero vale 17.
  
     numero++ //numero vale 18.
  
     document.write(numero++ + "<br>"); //numero vale 19 pero el document.write se ejecutó antes del numero++ y se muestra su valor antiguo.
  
     document.write(numero); //numero vale 19 y se muestra el 19.
 
</script>