Javascript
Programa del curso
◈ Clase 1: Introducción y sintaxis
◈ Clase 2: Funciones, arrays y objetos
◈ Clase 3: Javascript integrado a HTML
◈ Clase 4: DOM, selectores y elementos
◈ Clase 5: Eventos
◈ Clase 6: Formularios
◈ Clase 7: Ajax
◈ Clase 8: Ejercicio integrador
1.
¿Qué es
Javascript?
¿Qué es Javascript?
JavaScript es un lenguaje de
programación, orientado a la Web.
◈ Interpretado
◈ Orientado a objetos
◈ Débilmente tipado
◈ Imperativo
◈ ECMAScript
¿Para que nos sirve JS?
Javascript al ser un lenguaje de
programación nos puede servir para
manejar la lógica del Backend.
Además, los navegadores traen un
motor de JS permitiendo ejecutar JS del
lado del cliente haciendo las páginas
interactivas.
JS nos puede servir para armar...
Juegos Galerías Mapas
◈ CookieClicker ◈ Photoswipe ◈ Google maps
Buscadores Videos Redes sociales
◈ Google ◈ VideoJS ◈ Facebook
Un largo etcétera
Correos, Chats, Data graphics, Relojes, Calculadoras, Formularios, etc ...
Sintáxis
Variables
Tipos Base
"pepe" string
10.7 number
true boolean
{} object
[] array
function() {} function
null null
undefined undefined
2.
Operadores
Operador de asignación
VAR nombre = valor;
var nombre = "Pepe";
var edad = 30;
var pelisFavoritas = ["La vida es bella", "Wally"];
Operadores aritméticos
var num1 = 5;
var num2 = 3;
num1 + num2 suma, resta
num1 * num2 multiplicación, división
num1 % 5 módulo
num1++ incremento
num1-- decremento
Operadores de asignación y aritméticos
var numero = 10
numero += 2 12
numero -= 2 8
numero *= 2 20
numero /= 2 5
Operadores de comparación simple y estricta
Simple
== igualdad de valor
!= distinto valor
<= menor e igual
>= mayor o igual
Estricta
=== igualdad de valor y tipo
!== distinto de valor y tipo
Operadores lógicos
&& Operador and (y) a && b
|| Operador or (ó) a || b
! Operador negación !false = true
La consola
Los navegadores traen incorporada una consola para codear Javascript.
Para abrirla generalmente utilizamos F12 y allí escribimos nuestro código.
A practicar!
A practicar!
Práctica 1 - Rompehielo y Operadores
"
Javascript es el lenguaje más popular
hoy en día en Fullstack, según
StackOverflow Developer Survey 2016
Conversiones de tipo
(123).toString() = "123"
true.toString() = "true"
"Thu Jul 17 2014 15:38:19 GMT+0200 (W.
Date().toString() =
Europe Daylight Time)"
parseFloat("3.14") = 3.14
parseInt("3.14") = 3
Number(false) = 0
"5" + 2 = "52"
"5" - 2 = 3
Ver más
if
if (condicion) {
// hacer esto si la condición es verdadera
}
Ejemplo
if (true) {
console.log("Hola Mundo”);
}
Esto imprimirá en la consola:
"Hola Mundo"
Truthy and Falsy
Un valor truthy es un valor que al ser evaluado
como boolean se transforma en verdadero.
if (false){ // Esto NO se ejecutaría } falsy
if (null) falsy
if (undefined) falsy
if (0) falsy
if (NaN) falsy
if ('') falsy
if ("") falsy
if (true){ // Esto se ejecutaría } truthy
if ("foo") truthy
IF ternario
test ? expression1 : expression2
test Cualquier expresión booleana
expresion1 Expresión que se devuelve si test es true
expresion2 Expresión que se devuelve si test es false
Ejemplo
var isMember = true;
"La Cuota es de: " + (isMember ? "$2.00" : "$10.00");
"La cuota es de: $2.00"
Switch
var fruta = "pera";
switch (fruta) {
case "frutilla":
console.log("La frutilla del postre");
break;
case "manzana":
console.log("Me prestas tu reloj? Manzana");
break;
case "pera":
console.log("2 pesitos la pera!");
break;
default:
console.log("Es otra fruta");
}
For
for (inicio; condición; incremento) {
// hacer esto mientras la condición sea verdadera
}
Ejemplo
for (var i = 0; i < 4; i++) {
console.log("Hola " + i);
}
Esto imprimirá en la consola:
"Hola 0"
"Hola 1"
"Hola 2"
"Hola 3"
For - break
for (var i = 0; i < 4; i++) {
console.log("Hola " + i);
if(i === 1){
break; // corta el búcle FOR
}
}
Esto imprimirá en la consola:
"Hola 0"
"Hola 1"
While
while (condicion) {
// ejecutar mientras la condición sea verdadera
}
Ejemplo
var a = 0;
while (a < 3) {
console.log("Hola");
a++; // Siempre llegar a la condición de corte
}
Esto imprimirá en la consola:
"Hola"
"Hola"
"Hola"
Do/While
do {
// lo que quiero hacer
} while (condición);
Ejemplo
var a = 0;
do {
console.log("Hola"); // Siempre se ejecuta al menos 1 vez
} while(a > 100);
Esto imprimirá en la consola:
"Hola"
A practicar!
A practicar!
Práctica 1 - Condicionales y bucles
Gracias!
Preguntas?
