JAVASCRIPT

YUNIOR

Twitter: @YuniorGlez

Linkedin: Yunior González Santana

Correo: yunior@squaads.com

2011

ULPGC

2012

Desarrollo apps híbridas ionic + angular

2016

4 apps como freelance

2016

2017

 

∞ APPS

pre - squaads

Comienzo con la EOI

2018

∞ APPS

2022

 

¿Qué es Squaads?

No es tan importante el qué es, sino el ¿quiénes somos?

 

Actualmente squaads está formada por una familia de 24 cracks

 

Tratamos de crear las mejores aplicaciones móviles del mercado. Con amor y pasión por lo que hacemos 

From 🏝 with 💜

Les conozco un poco

¿Quién tiene algo de experiencia de programación?

¿Quién NO tiene nada de experiencia de programación?

¿Quién tiene algo de experiencia con desarrollo web?

¿Quién NO tiene nada de experiencia con desarrollo web?

Levantamos la manito

Les conozco un poco

¿Porque te metiste a este curso?

¿Que hiciste antes de este curso?

¿Qué tal está siendo y cual es tu objetivo con el curso?

Levantamos la manito

JavaScript

 

¿Necesito aprender JavaScript?

 

¿Por qué?

¿Qué es JavaScript?

JavaScript (abreviado comúnmente JS) es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.

¿Qué es JavaScript?

JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas.

 

Una página web dinámica es aquella que incorpora efectos.

 

Por ejemplo, un texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario.

A diferencia de PHP

JAVASCRIPT es un lenguaje que se ejecuta en el cliente.

 

Esto tenemos que tenerlo siempre muy en cuenta.

 

Tu ordenador

facebook.com

== DAME FACEBOOK.COM =>

<= Toma el index.html ==

== El usuario navega a categories.html =>

Web estática 

Se refresca la pantalla

== Dame todos los ficheros =>

<= Toma los js y los css ==

El código de los JS lo ejecuto YO

Si facebook estuviese hecho solo con html+css+js

Tu ordenador

facebook.com

== QUIERO VER FACEBOOK.COM=>

<= Toma el resultado html ==

== El usuario navega a categories.html =>

Web estática (PERO PHP)

Se refresca la pantalla

== Dame todos los ficheros =>

<= Toma los js y los css ==

El código de los JS lo ejecuto YO

Dame un momentito que voy a ejecutar unas cosas que tengo en php para generar tu respuesta

El código de PHP lo ejecuto YO, EL SERVIDOR

Si facebook estuviese hecho con php

Entonces, hemos dicho que el javascript

Será algo que va a ejecutar nuestro ordenador, o más en concreto, nuestro navegador web. ¿Pero cómo?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <title>Document</title>

  <script>  

    alert('Hola, soy tu primera línea de JavaScript !');
  </script>
</head>
<body>
  


</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <title>Document</title>
</head>
<body>
  



  <script>  

    alert('Hola, soy tu primera línea de JavaScript !');
  </script>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <title>Document</title>
</head>
<body>
  
  <script src="js/main.js"></script>
</body>
</html>


    alert('Hola, soy tu primera línea de JavaScript !');

js/main.js

       ... 
  <script src="js/main.js"></script>
</body>
</html>

¡ SON MUY DIFERENTES !

<head>
 ... 
  <script src="js/main.js"></script>
</head>
<body>
    ...

Arriba del body, en el head

Justo antes de terminar el body

¡ Arriba es bloqueante !

<head>
 ... 
  <script src="js/main.js"></script>
</head>
<body>
    ...

Debajo is good ;)

       ... 
  <script src="js/main.js"></script>
</body>
</html>

También podemos ejecutar código javascript simplemente en las consolas de safari/chrome/firefox

 

 

por ejemplo en chrome haríamos:  click derecho > "Inspeccionar" > console 

Características de JS

  • Javascript es un lenguaje de tipado débil.

​

  • De por sí, javascript nos permite hacer muchas cosas mal y aún así nuestro código funcionaría ... así que cuidado con escribir código por escribir o copiar código por copiar, porque debemos de entender realmente lo que estamos haciendo y si podemos "limpiarlo" mejor que mejor.

limpiar = Refactorizar

En los lenguajes de ...

En todos los lenguajes de programación, existen lo que se denominan "las variables"

¿Qué es una variable? 

 

Pues te lo puedes imaginar como "un sitio" o "un lugar" o en este caso "una variable" dónde quieres almacenar un valor o un resultado. Imaginate que quieres guardar los nombres de todos los alumnos de este curso en algún sitio en javascript, pues bien, los guardarás en "una variable" 

¡ Al lío ! 

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

String

var myNombre = 'Yunior';

var elCurso = "Angular2+";

var hoyToca = `Bases de JS`;
Se indican o con comilla simple, o con comilla doble o con la comilla que está al lado de la p

Si eres canario, la puedes llamar "la comilla cambada"

Si estás en una entrevista de trabajo no ... ahí la llamas template literal o template string

Recuerda

<head>
  
  
  <script src="assets/js/index.js"/>
</head>
<body>
    <h1> hola </h1>
</body>
Este código, lo estamos escribiendo en un fichero .js o simplemente dentro de la etiqueta <script> </script>

var myNombre = 'Yunior';

var elCurso = "Angular2+";

var hoyToca = `Bases de JS`;
index.html

index.js

Solo un tip

<head>
  
  
  <script src="assets/js/index.js"/>
</head>
<body>
    <h1> hola </h1>
</body>
var myNombre = 'Yunior';

var elCurso = "Angular2+";

var hoyToca = `Bases de JS`;
index.html

index.js

String

var myNombre = 'Yunior';

var elCurso = "Angular2+";

var hoyToca = `Bases de JS`;
Se indican o con comilla simple, o con comilla doble o con la comilla que está al lado de la p

Si eres canario, la puedes llamar "la comilla cambada"

Si estás en una entrevista de trabajo no ... ahí la llamas template literal o template string

Number

var myEdad = 26; 

var laDeOtro = 190;

var añoDeNacimiento = 1993;

var precioDeUnCafé = 0.50;

1993 es un número entero

0.50 es un número real, en otros lenguajes se les conoce como floats. Al fin y al cabo es un número que tiene decimales

Por cierto

var añoDeNacimiento = 1993;

var precioDeUnCafé = 0.50;

Como habrás comprobado en esta diapo, podemos usar cualquier caracter como nombre de una variable.

 

Peeeero, hay limitaciones en cual puede ser el primer caracter

Docu

boolean

var yuniorEsMásJovenQueCarlos= true; 

var edadYunior = 28,
    edadCarlos = 42;

var yuniorEsMásJovenQueCarlos = edadYunior < edadCarlos;

Nombres tan largo nos ayudarán a entender más fácil nuestro código.

Cuanto más semántico es tu código, más feliz vivirás.

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;

Antes dijimos

Que los lenguajes de programación nos servían para indicarle a un programa que cosas hacer.

 

Pero de momento ... solo estamos creando variables

¿Cómo?

¿Cómo le diré yo a un programa que haga algo si una condición se cumple por ejemplo?

 

Pues eso es lo siguiente que tenemos que aprender.

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";

Condiciones

var edadYunior = 26;

edadYunior == edadYunior // true


var otraEdadYunior = "26";

edadYunior === otraEdadYunior // ¿?

Ojo con Javascript

https://github.com/denysdovhan/wtfjs

Consejo

Cuando dudes si tienes guardado en dos variables números por ejemplo, lo mejor es pasar ambas a números al menos mientras las comparas.

 

¿Cómo se hace esto? Pueeesss.... como todo en este trabajo. Coges google y le dices "Cómo pasar una variable a numero en JS" 

 

Cuándo buscas no solo encuentras la solución, sino que aprenderás muchísimas cosas que no sabías

Condicional, el if

if ( 10 > 5 ) { 
    console.log("El 10 es mayor que el 5");
} else {
    alert("WTF ! ? Llama a los bomberos! ");
}

Al igual que en otros lenguajes.

Existe una forma de escoger ejecutar un código u otro según una condición

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');
}

De momento nosotros (los programadores) hemos escrito los valores en las variables.

Peeero, ahora para aprender y juguetear, les voy a enseñar una forma de pedirle a un usuario un dato, por ejemplo que nos diga su edad o su nombre

Prueba a escribir en la consola del chrome mismo, esto :  prompt("Indicame tu edad");

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");
}

Pequeña ayudita

var eleccionUsuario = prompt('Escoge entre "piedra/papel/tijeras"');

if (eleccionUsuario == 'piedra') { 
   alert('Has escogido piedra');
}else if (eleccionUsuario == 'tijeras'){
    alert("Has escogido tijeras");
}else if (eleccionUsuario == 'papel'){
    alert("Has escogido papel");
}

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 )

condiciones múltiples

Ejemplo

if ( edad > 18 || nombre === "Yunior"){
    console.log('puedes pasar');
}else{
    console.log('No puedes pasar');
}

La teoría esta bien

Pero queremos picar código ya, o pica tu algo al menos

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