JavaScript

Julio Alfaro
Objetivo de la Semana
● Que el alumno conozca al lenguaje JavaScript, el cual puede usarse en
páginas web del lado del cliente y también en el servidor vía Node.js
● Que el alumno pueda generar codigo funcional en Javascript
solucionando problemas informáticos desde este lenguaje
● Que el alumno pueda entender como manejar las estructuras básicas
dentro de este lenguaje.
Historia del Lenguaje
HTML que es el HyperText Markup Language, era un lenguaje que se utilizaba
para generar contenido estático, como iniciativa del navegador Netscape
Navigator 2.0, crearon un lenguaje interpretado que permite hacer más
dinámico el acceso del DOM (Document Object Model) de HTML y así con el
tiempo se empezó a estandarizar este lenguaje, pero llegó un software de
Adobe que se llamaba Flash, que permite hacer varias cosas en web, y opaco
el uso de javascript. Pero con el tiempo como iniciativa de varias compañías
tecnológicas, entre ellas Apple, se dijo que el HTML debía mejorar y que se
desactualizan el uso de Flash, pues saldría un nuevo standard HTML 5, y este
se integraba también con versiones más robustas de Javascript, siguiendo un
standard.
Historia del Lenguaje
JAvascript sigue siendo un lenguaje interpretado, pero es ya bastante robusto,
actualmente incluso se utiliza para ser ejecutado desde el servidor gracias a
los proyectos Node.js y Deno.js, tenemos librerías que permiten manejar IoT
que corren en javascript, y sigue fuerte en el desarrollo web con framework
de construcción de front end, con los framework más utilizados actualmente,
entre ellos Vue.js, React y Angular.
Variables
Las variables aca no son tipadas, por lo cual no se definen tipos sino solo una
calificadores de las variables. Los calificadores var, let y const.

● var : es un modificador que permite hacer una variable de ambito global.

● let: es una variable de ámbito local, y existe únicamente en el scope en
donde fue declarada.
● const : es una declaración la cual permite declarar constantes, y se utiliza
sólo para variables que no se cambiará su valor en el transcurso del
tiempo.
Operadores Lógicos y relacionales
Operadores Relacionales
== , === , != , !==, < , > ,<= , >=
Igual, estrictamente igual, distinto,
estrictamente distinto, menor, mayor,
menor igual, mayor igual

Operadores Logicos

&& Operador Y

|| Operador O

! Operador NOT
Operadores Aritméticos
Estos son los operadores que definen las operaciones aritmeticas, (los
parentesis solo son para agrupar las operaciones, se muestra la precedencia
de operadores en el orden de esta tabla:

() Paréntesis para agrupaciones

** potencia

*, / , % Multiplicación, division y residuo entero.

+, - Suma, resta
Condicionales
Para evaluar condiciones y definir un flujo de operacion en funcion a las
condiciones necesarias.

Condicional IF Condicional SWITCH

if (condicion1) { switch (exprecion){

--ejecucion 1 -- case x :
} else if (condicion2) { -- ejecucion 1 --
-- ejecucion 2 -- break;
} else { case y:
-- ejecucion 3 -- -- ejecucion 2 --
} break;
default :
-- codigo ejecucion --
}
Ciclos
Para ejecutar ciclos tenemos la siguiente variaciones :

● for : este permite definir una ejecución de un valor inicial hasta un valor
final
● for/in : ciclos que permiten navegar a través de las propiedades de un
objeto
● for/of : ciclos que permiten navegar en los valores de un objeto iterable
● while : ciclos que permite ejecutar acciones mientras una condición se
cumple
● do/while: ciclos que permite ejecutar por lo menos una vez una acción
determinada, mientras la condición se cumpla.
Ciclos (sintaxis)
● for ( i = 0; i < 5; i++) { -- accion a repetir -- }
● var data = { x : 5, y: 10};

for (x in data) { -- accion con data[x] -- }

● var elements = [1,3,4,5];

for (x of elements) { -- acción sobre x que identifica cada valor -- }

● while (condicion) { -- accion a repetir -- }

● do { -- accion a repetir -- } while (condicion);
Funciones
Como recordaran, javascript no es un lenguaje tipado, por lo que ni los
parametros ni las funciones tiene tipo de retorno

Sintaxis :

function <nombre> (parametro1, parametro2, parametro3…) {

-- aciones dentro de la funcion --

return valor;

}
Arreglos
Los arreglos nos permiten almacenar conjuntos de información en una
variable, siguen la siguiente sintaxis :

let arreglo = [ item1, item2, item3, … ];

O bien

let datos = new Array();

Item puede ser un dato fijo o bien puede ser otro arreglo o un objeto

Para agregar datos se puede usar .push(dato) y para sacar datos se puede
usar pop()
Funciones Flecha
Las funciones flecha son funciones anonimas que permiten resumir la
definicion de una funcion con la siguientes sintaxis :

En vez de declarar una funcion como :

function printValue(value) {

console.log(value);

Se puede resumir como :

value => console.log(value);

Operaciones Sobre Arreglos
● splice (posicion, cantidad, elements)
● slice (posicion, cantidad)
● forEach(x=> accion para cada elemento)
● filter(x => condición que quieren se filtre los que cumplen condición)
● find(x => condición que retorna el primer elemento que cumple con la
condición)
● every(x=> condición que da verdadero si cada elemento cumple y falso si
por lo menos uno no cumple)
● findIndex(x => condición que retorna el índice de la primera ocurrencia de
la condición)
Operaciones Sobre Arreglos
● map(x => operacion ejecuta la operacion y la guarda en cada valor)
● reduce((acumulador, valor actual) => operacion con acumulador y valor
actual)
● sort()
● length()
Funciones importantes
● typeof : retorna el tipo de dato de una variable o un valor en particular.
● Date.now() : retorna la fecha actual (del sistema)
● getMonth() : retorna el mes de la fecha que lo invoca
● JSON.parse(text): retorna un objeto JSON a partir de una hilera.
Clases
Permite agrupar informacion en una estructura que guarda propiedades
(variables) y metodos (funciones), la idea es encapsular ciertos datos y
funcionalidades en una sola estructura.

class <Nombre> {

<prop1> = <valor1>

<propN> = <valorN>

<nombre_funcion>(<parametros>) {

}
Clases
Una vez se declara una uno puede crear una instancia de esa Clase, llamada
Objetos con la siguiente instruccion new <Clase>(). Podemos definir una
funcion constructor() para inicializar los datos miembro.