JAVA SCRIPT

AVANZADO
Sesión 1: JavaScript: conceptos, tipos de datos, variables,
constantes, sintaxis, estructuras de control, funciones,
ejecución de eventos y salidas.
Sílabo del curso
Revisamos el sílabo en la
plataforma
Logro de la sesión

Al finalizar la sesión, el estudiante aprenderá los conceptos, tipos de datos,

variables, constantes, sintaxis, estructuras de control, funciones, ejecución
de eventos y salidas de javascript.
Agenda
• Conceptos
• Tipos de datos
• Variables y Constantes
• Sintaxis
• Estructuras de control
• Funciones
• Ejecución de eventos
• Salidas
Conceptos
JavaScript es un lenguaje de
programación que vio la luz con el
nacimiento de la web. Su propósito inicial
fue dotar de mayor dinamismo a los
aburridos y estáticos documentos HTML.

Con el tiempo el lenguaje fue

evolucionando hasta el punto de que
muchas páginas web se han convertido
en auténticas aplicaciones que, utilizando
el HTML y las CSS’s como mecanismo
para la construcción de la interfaz gráfica
de usuario, se ejecutan en el entorno del
navegador web.
Tipos de datos
Existen seis tipos de datos primitivos, es decir, que no son un objeto. Hay que
tener cuidado con este concepto porque JavaScript en muchas situaciones
convierte automáticamente los datos primitivos en objetos equivalentes a
excepción de null y undefined.

• Undefined: representa una variable que no let valor;

ha sido declarada o a la cual no se le ha console.log(valor); // undefined
asignado un valor.

• Boolean: representa un valor lógico y let esEstudiante = true;

puede tener dos valores, ya sean true o
false.
Tipos de datos
• Number: permite representar y manipular let edad = 25;
valores numéricos como «37» o «-9.25». let precio = 19.99;

• String: representa datos textuales let nombre = “UTP";

(cadenas de caracteres). let saludo = ‘Buenos días';

• BigInt: representa valores numéricos que

let precio = 150000000;
son demasiado grandes para ser
representados por el tipo de dato number.
const id = Symbol('id');
• Symbol: es un valor primitivo único e
inmutable.
Tipos de datos (otros tipos)
• Null: representa la ausencia intencional de
let noHayValor = null;
cualquier valor, un valor nulo o «vacío».

• Object: representa una colección de datos

definidos y entidades más complejas.
let persona = {
nombre: "Ana",
• Function: es una forma abreviada para edad: 30,
funciones, aunque cada constructor de esEstudiante: false
funciones se deriva del constructor Object. };
Son objetos con la capacidad de ser
ejecutables.
Variables y Constantes
Variables: Se utilizan para let nombre = "Carlos";
almacenar datos que pueden nombre = "Pedro"; // Se puede cambiar
cambiar a lo largo del programa.

Constantes: Se utilizan para

const PI = 3.14159;
almacenar datos que no cambian. // PI = 3.14; // Esto causará un error
Sintaxis
La sintaxis de un lenguaje de programación se define como el conjunto de
reglas que deben seguirse al escribir el código fuente de los programas para
considerarse como correctos para ese lenguaje de programación.

La sintaxis de JavaScript es muy similar a la de otros lenguajes de

programación como Java y C. Las normas básicas que definen la sintaxis de
JavaScript son las siguientes:

No se tienen en cuenta los espacios en blanco y las nuevas líneas: como

sucede con XHTML, el intérprete de JavaScript ignora cualquier espacio en
blanco sobrante, por lo que el código se puede ordenar de forma adecuada
para entenderlo mejor (tabulando las líneas, añadiendo espacios, creando
nuevas líneas, etc.)
Sintaxis
Se distinguen las mayúsculas y minúsculas: al igual que sucede con la sintaxis
de las etiquetas y elementos XHTML. Sin embargo, si en una página XHTML
se utilizan indistintamente mayúsculas y minúsculas, la página se visualiza
correctamente, siendo el único problema la no validación de la página. En
cambio, si en JavaScript se intercambian mayúsculas y minúsculas el script no
funciona.

No se define el tipo de las variables: al crear una variable, no es necesario

indicar el tipo de dato que almacenará. De esta forma, una misma variable
puede almacenar diferentes tipos de datos durante la ejecución del script.
Sintaxis
No es necesario terminar cada sentencia con el carácter de punto y coma (;):
en la mayoría de lenguajes de programación, es obligatorio terminar cada
sentencia con el carácter ;. Aunque JavaScript no obliga a hacerlo, es
conveniente seguir la tradición de terminar cada sentencia con el carácter del
punto y coma (;).

Se pueden incluir comentarios: los comentarios se utilizan para añadir

información en el código fuente del programa. Aunque el contenido de los
comentarios no se visualiza por pantalla, si que se envía al navegador del
usuario junto con el resto del script, por lo que es necesario extremar las
precauciones sobre la información incluida en los comentarios.
Sintaxis
No es necesario terminar cada sentencia con el carácter de punto y coma (;):
en la mayoría de lenguajes de programación, es obligatorio terminar cada
sentencia con el carácter ;. Aunque JavaScript no obliga a hacerlo, es
conveniente seguir la tradición de terminar cada sentencia con el carácter del
punto y coma (;).

Se pueden incluir comentarios: los comentarios se utilizan para añadir

información en el código fuente del programa. Aunque el contenido de los
comentarios no se visualiza por pantalla, si que se envía al navegador del
usuario junto con el resto del script, por lo que es necesario extremar las
precauciones sobre la información incluida en los comentarios.
Sintaxis
Ejemplo de comentario de una sola línea:
// a continuación se muestra un mensaje
alert("mensaje de prueba");

Ejemplo de comentario de varias líneas:

/* Los comentarios de varias líneas son muy útiles
cuando se necesita incluir bastante información
en los comentarios */
alert("mensaje de prueba");
Estructuras de control
Condicional:
Los condicionales nos permiten evaluar si una condición cumple o no con lo
que estemos evaluando. Su sintaxis es muy sencilla, podemos evaluar si la
condición es verdadera o falsa. Incluso añadir una condición intermedia en el
caso de que no se cumpla la primera condición y se deban evaluar más.
Estructuras de control
Switch:
Permite evaluar una expresión e intenta igual el valor de esa expresión a una
etiqueta llamada case, que es el caso a evaluar. En el caso de que la
condición se cumpla o lo que tiene el case, se ejecuta la sentencia que este en
ese caso.
Estructuras de control
Ciclos, Bucles o Loops:
Se le pueden llamar, ciclos, bucles o loops, en ellos se evalua una condición n
veces hasta que esta se cumpla. En estos podemos encontrar los for, while,
entre otros.‌
Funciones
Las funciones en JavaScript son bloques
de código reutilizables que se pueden
definir una vez y ejecutar en cualquier
momento. Permiten modularizar el código y
realizar tareas repetitivas de manera más
eficiente. A continuación, te presento una
guía completa sobre cómo trabajar con
funciones en JavaScript, incluyendo sus
diferentes tipos y características.
Funciones
Declaración de Funciones
Función Declarada: Una función declarada se define usando la palabra clave
function seguida del nombre de la función y un bloque de código.
Funciones
Declaración de Funciones
Expresión de Función: Una expresión de función asigna una función a una
variable. Las funciones creadas de esta manera no son elevadas (hoisted), por
lo que deben ser definidas antes de ser llamadas.
Funciones
Declaración de Funciones
Función Flecha (Arrow Function): Introducidas en ECMAScript 6 (ES6), las
funciones flecha son una sintaxis más concisa para definir funciones. Además,
no tienen su propio this, sino que heredan el this del contexto circundante.
Funciones
Declaración de Funciones
Funciones Anónimas: Son funciones sin nombre que suelen ser usadas
como argumentos para otras funciones.
Funciones
Declaración de Funciones
Funciones Autoejecutables (IIFE): Una función autoejecutable se ejecuta
inmediatamente después de su definición. Se encierra entre paréntesis y se
sigue de ().
Funciones
Parámetros y Argumentos
Parámetros
Argumentos
Parámetros por Defecto
Parámetros Rest
¿Tienen alguna consulta o duda?
Actividad