JAVASCRIPT

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 y/o interacciones y/o eventos.

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

IMPORTANTE

JAVASCRIPT es un lenguaje que se ejecuta en el cliente.

Esto tenemos que tenerlo siempre muy en cuenta.

A diferencia de PHP

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

También podemos usar herramientas como codepen.io

O cosas más complejas como stackblizt

https://stackblitz.com/edit/vanilla-js-playground?file=index.js

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 = "Frontend Telefónica EOI";

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

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 // ¿?

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

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 )

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

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

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

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

Le hacemos FORK

Vamos a hacerle fork a este repositorio que contiene 10 ejercicios de JS sin hacer

Cada uno cuando termine, va a crear una rama con su nombre estudiante/{nombre} y va a realizar una PULL Request al repositorio una vez lo haya pusheado al suyo y dándole en github al botón de "contribuir" que les saldrá

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

Pequeña ayudita

var eleccionUsuario = prompt("Dime un número entre el 1 y el 5");
var numero = parseInt(eleccionUsuario);

if ( numero == 1 ) { 
   alert('¡Has escogido el 1, ganaste !');
}else{
    alert("Tu número no ha sido ganador");
}

Mini ejercicio. En grupo de 3

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

JavaScript

¿Qué es JavaScript?

¿Qué es JavaScript?

IMPORTANTE

Web estática

Si facebook estuviese hecho solo con html+css+js

Web estática (PERO PHP)

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?

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

También podemos usar herramientas como codepen.io

O cosas más complejas como stackblizt https://stackblitz.com/edit/vanilla-js-playground?file=index.js

Características de JS

limpiar = Refactorizar

En los lenguajes de ...

¿Qué es una variable?

¡ Al lío !

Antes dijimos

¿Cómo?

operaciones

Hay que tener cuidado al operar con las variables.

typeof

typeof

parseInt

condiciones múltiples

condiciones múltiples

O cosas más complejas como stackblizt

https://stackblitz.com/edit/vanilla-js-playground?file=index.js