Está en la página 1de 35

¿Qué son las variables?

¡Hola! Seguimos profundizando en los aspectos más importantes de JavaScript;


en este sentido vamos a destacar la definición y uso de las variables. En
programación, las variables son contenedores que nos permiten almacenar
valores numéricos, cadenas de caracteres o estructuras de datos como listas,
arreglos de valores u objetos. Por el momento, vamos a estudiar las variables que
almacenan valores simples como números o cadenas de caracteres. La principal
propiedad de las variables, como su nombre lo indica, es almacenar valores que
pueden cambiar a lo largo de la ejecución del programa; es por esta razón que
reciben el nombre de variables.

Estos valores almacenados se pueden utilizar o acceder en cualquier momento de


la ejecución de nuestro programa. Así como en álgebra utilizamos variables para
trabajar con ecuaciones y fórmulas complejas, en programación trabajamos con
variables para poder ejecutar los pasos que componen los algoritmos de la
aplicación que estamos codificando.

Ya que vimos algunas propiedades de las variables, pasemos a aprender cómo


utilizarlas en JavaScript.

Para declarar una variable es necesario tener presente la siguiente estructura:

var x = 5;
Estructura básica para la declaración de variables.

A continuación se describen los componentes de la estructura básica para la


declaración de variables en JavaScript:

 var es la palabra reservada que le indica a JavaScript que estamos


declarando una variable.
 x es el nombre que le asignamos a la variable.
 = es el operador de asignación que le indica a JavaScript qué valor asignar.
 5 corresponde al valor inicial que vamos a almacenar en la variable.

Buenas prácticas felices

Los nombres de las variables son muy flexibles aunque te recomendamos estas
buenas prácticas para nombrar tus variables:

 Los nombres deben expresar el contenido de la variable, así hacemos


nuestro código más entendible a otros programadores; por ejemplo, si en la
variable almacenamos la edad de un estudiante entonces la variable puede
llamarse: edad, edadEstudiante o edadAlumno.
 El nombre de las variables puede contener los caracteres, underscore ( _ ),
o signo de dólar ( $ ) al inicio, en medio o al final del nombre.
 El nombre de las variables debe iniciar con una letra ASCII sea mayúscula
o minúscula, también puede empezar con un guión bajo (_) o un signo de
dólar ($).
 Para separar las palabras que componen el nombre de la variable,
JavaScript utiliza la convención camelCase, la cual indica que las variables
empiezan en minúscula y cuando cambias de palabra inicias el primer
carácter con letra mayúscula. Por ejemplo: para nombrar la variable color
del carro puedes utilizar los siguientes nombres: colorCarro o
colorDelCarro.
 No debes usar palabras reservadas de JavaScript para nombrar variables.
 El nombre de las variables no debe empezar con números.
 El nombre de las variables no puede contener caracteres especiales como:
&, ~, %, #.
 Las variables en JavaScript nunca pueden iniciar con números, pero sí
pueden contener números en la mitad o al final del nombre.

A continuación tienes unos ejemplos de nombres de variables válidos en


JavaScript:

Ejemplo
>var pizza2go = "pizza";

>var aprendo_JAVASCRIPT = true;

>var $_$ = "moneda";

>var _saludo = "Hola";

>var nombreVariable = "camel case";


Aquí puedes ver algunos ejemplos de nombres inválidos para las variables:

Ejemplo
>var function = true;

>var total% = 125;

>var class = "variables";

>var 2nombre = "clase de variables";


Las variables son sensibles a mayúsculas de manera que miVar, MiVar, mivar son
variables completamente diferentes. Es una buena práctica de programación,
evitar nombres similares entre las variables, o nombres que no nos den una
referencia clara de cuál puede ser su contenido, por ejemplo:

var x = true;
Después de declarar una variable, es posible hacer referencia a ésta (utilizar u
obtener el valor de la variable) por su nombre en cualquier parte de nuestro
programa, teniendo en cuenta el scope o ámbito de las variables que
estudiaremos más adelante. Así como también podemos hacer diferentes
operaciones con las mismas.

Código
>var valor1 = 5;

>var valor2 = 7;

>valor1 + valor2;
Resultado
12
En el ejemplo anterior se declararon dos variables (valor1) y (valor2) que luego
son utilizadas en una suma; al sumar las dos variables, el resultado es 12.

También es posible hacer uso de variables cuando estamos declarando otras


variables:

var suma = valor1 + 95;


Después de declarar variables ( var ) podemos re-asignar nuevos valores o datos
para que sean almacenados en dichas variables:

Código
>var nombre = "carlos";

>nombre = "pedro";

>nombre;
Resultado
pedro
En JavaScript, otra manera de declarar variables se puede lograr usando los
comandos let y const, palabras reservadas para el lenguaje, definidas en el
estándar ECMAScript 6. Con el comando let declaramos variables limitando su
uso a un bloque de código determinado, mientras que con el
comando const definimos constantes o variables que tendrán un valor que no
podrá modificarse posteriormente.
Desafío práctico
¡Hola! Es hora de comenzar a trabajar en la construcción de la solución para la Escuela
Aprende y Disfruta, que los ayude a alcanzar los fondos suficientes para mejorar su
infraestructura y proporcionar soporte a los estudiantes que lo necesiten.
Siguiendo una aproximación de construcción de nuestra solución de abajo hacia arriba,
comenzamos definiendo e implementando algunas funciones que luego podrás utilizar, a
medida que vayas avanzando en la construcción de la aplicación propuesta. Puedes
también integrar estas funciones a tu portafolio para que las emplees en otros desarrollos.
A continuación las funciones que debes desarrollar.
totalMinutos
Es una función que transforma horas y minutos, a minutos. Es decir, esa función
llamada totalMinutos recibe dos parámetros horas y minutos y devuelve el total, en
cantidad de minutos.

Ejemplo:

 totalMinutos(5, 25)// debe dar como resultado 325

 totalMinutos(1, 5) // debe dar como resultado 65

 totalMinutos(0, 15)// debe dar como resultado 15

cantidadRecolectadaSimple
Es una función que calcula la cantidad de dinero recolectado dado un costo y la
cantidad de participantes.

Ejemplo:

 cantidadRecolectadaSimple(10, 5) // devuelve 50
 cantidadRecolectadaSimple(1, 5) // devuelve 5

cantidadRecolectada
Es una función que calcula la cantidad de dinero recolectado dado los siguientes
parámetros, recibidos en este orden:

 costoEstudiante
 costoAdulto
 cantidadEstudiantes
 cantidadAdultos

Ejemplo:

 cantidadRecolectada(1, 5, 20, 4) // devuelve 40


 cantidadRecolectada(0, 5, 20, 3) // devuelve 15

Esta función debe utilizar la función anterior cantidadRecolectadaSimple.

Desarrolla el código fuente de las tres definiciones de funciones e instrucciones


para imprimir su ejecución con los ejemplos dados.

Definición de Strings
¡Saludos! En esta oportunidad vamos a resumir las cadenas de caracteres o
strings están conformados por texto, que pueden contener: letras, números,
símbolos, signos de puntuación, entre otros.

Los valores de las variables tipo strings se expresan en sintaxis JavaScript con
comillas, encerrando el valor entre comillas simples ( ' ' ) o comillas dobles ( “ ” ).
Aquí te mostramos algunos ejemplos de strings:

'Esto es una cadena de texto. ';


JavaScript

"Esta es otra cadena de texto con comillas dobles.";


JavaScript

En esta lectura estudiaremos algunas de las características y funcionalidades de


los strings en JavaScript.

Textos con comillas dentro de las cadenas de caracteres


Supongamos que intentamos utilizar comillas simples o dobles dentro de una
cadena de texto, en este caso deberemos usar las comillas opuestas a las que
están contenidas dentro del string, para delimitar el inicio y el fin de la cadena de
caracteres. Eso significa que las cadenas que contienen comillas simples deben
usar comillas dobles como caracteres delimitadores y las cadenas que contienen
comillas dobles deben usar comillas simples como caracteres delimitadores del
inicio y el fin del string, veámoslo en el siguiente ejemplo:

"Son las ‘ tres ’ en punto.";


JavaScript

'Recuerde “ saludar ” al llegar a su destino';


JavaScript
Otra opción para adicionar comillas simples o sencillas es usando los caracteres
de escape; con esta opción podemos incluir tanto comillas simples como comillas
dobles en nuestro string. Si queremos utilizar una comilla simple anteponemos la
barra invertida ( \ ) antes de la comilla simple ( ' ), para avisarle al interpretador de
JavaScript que queremos escapar el valor por defecto que tiene el carácter '
dentro de la sintaxis y como consecuencia el interpretador sabe que queremos
utilizar el caracter comilla simple, en vez del símbolo que delimita el inicio o fin de
una cadena de caracteres.

A continuación podemos ver unos ejemplos de cómo utilizar los caracteres de


escape para definir strings o cadenas de caracteres.

'Son las \' tres \' en punto.';


JavaScript

"Recuerde \" saludar \" al llegar a su destino";


JavaScript

Propiedades y métodos
En JavaScript, las cadenas de caracteres tienen sus propios atributos y métodos
integrados, a continuación estudiamos los más comunes.

Longitud (length)
Length es una propiedad de todos los objetos de tipo String, que nos retorna un
valor numérico del tamaño de la cadena de caracteres que estamos almacenando
en la variable de tipo string. Como es una propiedad no se requiere accederla
finalizando con paréntesis; para acceder a esta propiedad ponemos el nombre de
la variable o el valor del string y finalizamos con un punto y a continuación sin
ningún espacio extra la palabra length.

"Primer nombre".length;
JavaScript

var nombre = "Primer nombre";


JavaScript

nombre.length;
JavaScript

Resultado= 13
JavaScript
Minusculas (toLowerCase)
El método toLowerCase de los objetos tipo string, nos permite obtener la cadena
de caracteres convertida a caracteres en minúscula; los números, símbolos y otros
caracteres no se ven afectados. Recordemos que la manera de llamar un método
o una función es el nombre de la función finalizado con los parámetros que recibe
el método, separados por comas y encerrados entre paréntesis.
Para nuestro caso, ponemos el valor del string, continuamos con un punto,
seguido de apertura y cierre de los paréntesis (esta función no recibe ningún
parámetro, con lo cual dejamos este espacio vacío) y terminamos con un punto y
coma. A continuación puedes ver un ejemplo:

"CURSO DE JAVASCRIPT" .toLowerCase ();


JavaScript

Resultado= "curso de javascript"


JavaScript

Mayúsculas (toUpperCase)
Así como tenemos un método para obtener una cadena de caracteres en
minúsculas, el método toUpperCase nos devuelve el contenido del string en
mayúsculas. En este caso los números, símbolos y otros caracteres tampoco se
ven afectados.

"estoy aprendiendo javascript". ToUpperCase ();


JavaScript

Resultado= "ESTOY APRENDIENDO JAVASCRIPT"


JavaScript

Recortar (trim)
El método trim de una cadena de caracteres devuelve el valor del string,
eliminando los caracteres en blanco que estén al inicio y al final de la cadena, sin
importar la cantidad de caracteres en blanco que contenga. Por ejemplo:

" eliminando espacios en blanco " .trim ();


JavaScript

Resultado= "eliminando espacios en blanco"


JavaScript

Este es un inicio al gran mundo de los strings. Sigue avanzando que tienes
muchos nuevos conceptos por descubrir.

Desafío práctico
¡Qué bueno ver que has llegado hasta este punto! Te damos la bienvenida a una
nueva oportunidad para practicar lo visto acerca de los tipos de datos de
JavaScript denominados string y, además, podrás incorporar tus resultados al
portafolio de soluciones que estás construyendo. Con este portafolio le podrás
mostrar al mundo lo que eres capaz de hacer y, sobretodo, de resolver.

Continuemos avanzando con el desarrollo de la solución para la escuela Aprende


y Disfruta. En tal sentido, el Arquitecto de Software, quien forma parte de tu equipo
de desarrollo, ha identificado ciertas funciones necesarias para el manejo de los
horarios de los eventos, y aquí justamente necesitamos de tu colaboración; por
esto, te solicitamos implementar las siguientes funciones: encabezadoEvento y
limpiarNombreParticipante. A continuación describimos cada una de éstas:

encabezadoEvento
Es una función que dado el nombre del evento y lugar, crea un string para la
interfaz de usuario. Algunos ejemplos son:

encabezadoEvento("Intercambio de Libros", "Biblioteca") //Devuelve


--> Evento: Intercambio de Libros. Lugar: Biblioteca
encabezadoEvento("Lectura de Poemas", "Sala A") //Devuelve -->
Evento: Lectura de Poemas. Lugar: Sala A
limpiarNombreParticipante
Es una función que dado el nombre y apellido del participante lo transforma al
apellido en mayúsculas, seguido de coma y luego el nombre en minúsculas. Esta
función limpia los caracteres en blanco al inicio o final del nombre o apellido. Por
ejemplo:

limpiarNombreParticipante(" Luis", "Castro ") // Devuelve -->


CASTRO, luis
limpiarNombreParticipante(" ANA", "MENDEZ ") // Devuelve -->
MENDEZ, ana
Desarrolla el código fuente de las dos definiciones de funciones e instrucciones
para imprimir su ejecución con los ejemplos dados.
Prueba tus conocimientos
Mariana está aprendiendo a usar condicionales en JavaScript. Su instructor le ha
dado el siguiente código:

if (estaActivo) {
if (condicionSalud || sobrePeso) {console.log("Remitir al
doctor")}
else {console.log ("Felicitaciones, estas en buenas
condiciones")}}
else {
if (condicionSalud || sobrePeso) {console.log("Remitir al
especialista")}
else {console.log ("Remitir a gimnasio")}}
Si las variables se definieron de la siguiente manera, var estaActivo = false, var
condicionSalud = true, var sobrePeso = false. Ayuda a Mariana, indicando el
resultado que imprimirá este código:

Desafío práctico
¡Esperamos que hayas tenido un buen día y dispongas de mucho ánimo para
realizar el siguiente ejercicio! Seguiremos trabajando en el desarrollo de las
funciones que utilizarás en el desarrollo de la aplicación para la Escuela Aprende y
Disfruta. Con esto podrás seguir incrementando el contenido de tu portafolio a la
vez que mejoras tus habilidades de programación en JavaScript.

En esta oportunidad el Arquitecto de Software ha identificado ciertas funciones


necesarias para el manejo de los horarios de los eventos. Tu misión es
implementar estas funciones que serán incorporadas luego en el código de la
aplicación.

Función saludo

Esta función tiene los siguientes parámetros:

 nombre
 apellido
 género (puede ser “FEMENINO” o “MASCULINO”)
 evento
 minutosQueFaltan (entero)
 La función debe construir el string
Bienvenid <o|a> <NOMBRE-LIMPIO> <APELLIDO=LIMPIO>, recuerda
<momento> el evento (<evento>)

Donde momento es:

 “hoy” si minutosQueFaltan&<&60*24
 “mañana” si minutosQueFaltan&<&60*24*2
 “pronto” en caso contrario

Ejemplos:

saludo(" LUIS", "perez", "MASCULINO", "Película", 600) // Devuelve -->


Bienvenido LUIS PEREZ, recuerda hoy el evento (Película)

saludo("ana ", "peRez", "FEMENINO", "Comidas del Mundo", 1500) // Devuelve -->
Bienvenida ANA PEREZ, recuerda mañana el evento (Comidas del Mundo)

saludo(" PEDRO ", "Gil", "MASCULINO", "Juego de Baloncesto", 5000) //


Devuelve --> Bienvenido PEDRO GIL, recuerda pronto el evento (Juego de
Baloncesto)

Desarrolla el código fuente de las tres definiciones de funciones e instrucciones


para imprimir su ejecución con los ejemplos dados.

Cápsula de conocimiento
Operadores
Operadores aritméticos:
Operador Significado Ejemplo Es igual a:
+ Suma 20+2; 22

- Resta 20-2; 18
Operador Significado Ejemplo Es igual a:
* Producto 20*2; 40

/ División 20/2; 10

% Módulo 20%2; 0

++ Incremento variable++; variable=variable+1;

++variable;
Operador Significado Ejemplo Es igual a:
-- Decremento variable--; variable=variable-1;

--variable;

Operadores de asignación:

Operador Significado Ejemplo Es igual a:


= Asignación x=1;

+= Asignación y suma x+=1; x=x+1;

-= Asignación y resta x-=1; x=x-1;


Operador Significado Ejemplo Es igual a:
*= Asignación y producto x*=1; x=x*1;

/= Asignación y división x/=1; x=x/1;

%= Asignación y módulo x%=1; x=x%1;

Operadores condicionales:
Operador Significado Ejemplo
== es igual a 5 == 9 es falso
=== es igual con tipo 5 == “5” es verdadero
5 === “5” es falso
!= no es igual a 15 != 13 es verdad
> es mayor que 15 > 10 es verdad
< es menor que 25 < 28 es verdad
>= es mayor o igual que 555 >= 8012 es falso
<= es menor o igual que 5 <= 1 es falso
Operadores lógicos:
Operador Significado Ejemplo
&& Y 1 == 1 && 2 < 1 es falso
|| O 1 == 2 || 15 > 2 es verdad
! NO !(1 > 2) es verdad
Desafío práctico - Ciclos
¡Hola! Continuemos con el mismo ánimo e impulso que te ha llevado alcanzar este punto en el
camino de tu aprendizaje de los Fundamentos de JavaScript. Y ahora sigamos desarrollando más
funciones que serán incorporadas en la solución de le Escuela Aprende y Disfruta. Recuerda que
estas piezas de software las puedes incorporar en tu portafolio personal para tus futuros
desarrollos.

El Arquitecto de Software nos ha comunicado la necesidad de otras funciones, que operan sobre
estructuras de datos de arreglos, para estimar ciertos valores necesarios en la construcción de
nuestra aplicación. Es tu turno de implementar las funciones de acuerdo a las siguientes
especificaciones.

Debes implementar tres funciones:

1. La función mínimo que recibe un arreglo de montos y devuelve el monto mínimo

2. La función máximo que recibe un arreglo de montos y devuelve el monto máximo

3. La función promedio que recibe el mínimo, máximo y el arreglo de montos y devuelve el


promedio sin considerar ni el mínimo ni el máximo.

Ejemplo:

var donaciones = [5,15,22,25,30,52,5,1,0];

var min = minimo(donaciones);

var max = maximo(donaciones);

console.log(min);

console.log(max);

console.log(promedio(min, max, donaciones)); // devuelve 0 52 14.714285714285714

Desarrolla el código fuente de las tres definiciones de funciones e instrucciones para imprimir su
ejecución con los ejemplos dados.

Desafío práctico – Tipos de datos objetos


Continuemos construyendo los programas necesarios para cumplir con los requerimientos de la
aplicación para la Escuela Aprende y Disfruta. Hay todavía mucho por hacer, pero poco a poco
hemos avanzado para cumplir con dichos requerimientos.

Tu reto en esta ocasión es hacer las validaciones de los eventos. Para validar un evento veamos
primero cómo está estructurado:

Un evento tiene tres campos (nombre, descripcion, fecha), a continuación las validaciones

 nombre
o Debe ser diferente a null (nulo) y diferente a undefined (indefinido)

o Debe tener un mínimo de caracteres (quitando los espacios en blanco al final y al


principio usando trim())

 descripcion

o Debe ser diferente a null (nulo) y diferente a undefined (indefinido)

o Debe tener un mínimo de caracteres (quitando los espacios en blanco al final y al


principio usando trim())

 fecha

o Debe ser diferente a null (nulo) y diferente a undefined (indefinido)

o Debe ser mayor que una fecha mínima dada

Por lo tanto, un evento es válido si sus tres campos son válidos de acuerdo a las reglas anteriores.

Para realizar este ejercicio debes desarrollar tres funciones descritas a continuación:

stringValido(string, largo)

Recibe el string y su largo, y devuelve: verdadero si cumple con todos los requisitos o falso en caso
contrario. Si no recibe un largo entonces no se valida la longitud.

fechaValida(fecha,minimaFecha)

Recibe la fecha y la fecha mínima, y devuelve: verdadero si cumple con todos los requisitos o falso
en caso contrario. Si no recibe una minimaFecha entonces no se valida la fecha mínima.

eventoValido(evento)

Recibe el evento, y devuelve: verdadero si cumple con todos los requisitos o falso en caso
contrario. Esta función utiliza a las dos anteriores.

Para probar, definimos que el mínimo para el nombre es 3, para la descripción es 10 y la fecha
mínima es el primero de enero de 2018.

Prueba con el siguiente evento:

var evento = {

nombre: "Evento 1",

descripcion: "Esto es una descripción",

fecha: new Date(2018,10,1)

};

Luego varía los valores del evento para probar que funcionan tus funciones.
Sandbox

Instrucciones

¡Felicitaciones! Nos encanta el ritmo de trabajo e interés que has puesto en descubrir los
elementos de JavaScript. A continuación vamos a desarrollar un programa para la Organización
Hacer Deporte. Dicha organización busca llevar un registro de los deportes practicados en el país y
dónde se pueden practicar los mismos. En un futuro, los usuarios podrán ir a una página Web,
consultar los deportes de su preferencia y solicitar una diversidad de información sobre ellos.

Necesitamos que nos ayudes creando un objeto que describa el deporte Judo, este objeto debe
incluir, nombre, origen y una lista de clubes donde se practica esta disciplina deportiva. De cada
club se tendrá el nombre del dojo y la ciudad donde se encuentra. Luego, define una función que
reciba el objeto de Judo e imprima por consola el nombre del dojo y ciudad para todos los clubes.

Ejecutar

Puntos de verificación

El objeto debe lucir como este:

 deporte

o nombre: "Judo",

o origen: "Japón",

 clubes

o dojo: "Sensei VU",

o ciudad: "Inmaculada",

o dojo: "Sensei Sato",

o ciudad: "Tokio",

La impresión debe ser:

"Club de Judo Sensei VU, Ciudad: Inmaculada"

"Club de Judo Sensei Sato, Ciudad: Tokio"


Cápsula de conocimiento
JSON
Estamos felices porque seleccionaste el mejor momento para afianzar lo visto acerca de
JavaScript. A continuación te presentamos una introducción a los documentos JSON, que se
utilizan cuando estamos trabajando con nuestro desarrollos Web.

Cuando estamos construyendo los código a veces es necesario garantizar la portabilidad de


nuestros objetos a otros sistemas, que son parte de la solución global al problema que tenemos
planteado. Es por ello que en esta lectura estudiamos brevemente el rol de JSON en JavaScript.

JSON son las siglas de JavaScript Object Notation y se considera hoy en día como el formato líder
de intercambio de datos en la Web. JavaScript usa este formato para representar los objetos, los
cuales son seriados en strings. A continuación encontramos un ejemplo de un documento JSON:

"nombre": "luis",

"edad" : 20,

"hobbies": [

{ "nombre": "ajedrez", "nivel": "alto"

},

{ "nombre": "pintura", "nivel": "intermedio"

],

"estudiaActualmente": true,

"altura": 1.68

La notación usada en el ejemplo está basada en las siguientes reglas:

1. Los objetos van encerrados entre llaves `{` `}`.

2. Los arreglos van encerrados entre corchetes `[` `]`.

3. Un objeto tiene un conjunto de valores clave / valor indicando el nombre de la clave luego
el símbolo `:` y luego el valor.

4. La clave formalmente de estar entre comillas dobles.

5. Los strings se encierran entre comillas dobles.


Los enteros, reales y booleanos no van encerrados entre comillas.

Con esta notación se pueden componer objetos dentro de arreglos, objetos dentro de objetos, y
así.

En JavaScript, existen formas de convertir documentos JSON a strings y viceversa. La primera


forma, que consiste en convertir un JSON a un string, se hace a través del siguiente método:

<json>.stringify()

Mientras que la segunda, que consiste en convertir un string a un JSON, se ejecuta usando este
otro método:

JSON.parse(<string>)

Recordemos que es importante la portabilidad de los elementos cuando estamos trabajando en


cualquier lenguaje de programación, tal como JavaScript. Entre sus ventajas, JSON tiene amplia
aceptación e implementación en otros lenguajes de programación que facilitan la portabilidad de
objetos JavaScript a otros sistemas.

Desafío práctico – Orientado a objeto


¡Estamos contentos de verte nuevamente! Hemos avanzado con el desarrollo de la aplicación para
la Escuela Aprende y Disfruta, pero aún quedan muchos requerimientos que debemos completar.
Continúa con ese mismo deseo de contribuir a esta noble causa y de aprender JavaScript en la
medida que sigues teniendo más y más programas en tu portafolio.

A continuación necesitamos que representes los eventos usando las nociones de clases en el
paradigma orientado a objetos en JavaScript. Para ello, crearemos una clase Evento con un
constructor que recibe: id, nombre, cantidadAsistentes y precioPorAsistente. Luego crearemos los
métodos para mostrar lo siguiente:

1. enlace(): Es un string conformado de la siguiente manera “/evento/<id>”

2. dineroTotalRecaudado()

prueba con el siguiente código

var evento1 = new Evento(1,"e1", 12, 5);

console.log(evento1.enlace())

console.log(evento1.dineroTotalRecaudado())
ES6 Compiler y Transpiler
Con el tiempo los interpretadores de JavaScript han evolucionado para adaptarse
a las necesidades de la construcción de software actuales. Aunado a estas nuevas
versiones de interpretadores, vienen los problemas relacionados con la
compatibilidad de los códigos que no podrían funcionar en navegadores que no
implementen estas nuevas versiones. A continuación analizaremos estos
problemas y la forma de solucionarlos.

En JavaScript tenemos muchas versiones de interpretadores, la más comúnmente


implementada en los navegadores es la versión de EcmaScript 5.1, que se liberó
a mediados del 2011. A esta versión le siguió EcmaScript 6 (ES6), la cual fue
liberada en el 2015, haciéndose cada vez más popular entre los navegadores
modernos, quienes cumplen con dicha especificación casi completamente. Sin
embargo, si utilizas instrucciones del ES6 tienes el riesgo de que tu código no se
ejecute en versiones viejas de los navegadores. Para evitar esto, tenemos Babel,
que es un compilador source-to-source, también llamado transpilador que
convierte código ES6 a código JavaScript compatible (ej.: ES5.1).

Esta conversión se puede hacer en un proceso de preparación del código, o se


puede configurar para que el navegador lo haga en vivo al cargar tus programas
en ES6. A continuación, veamos un ejemplo de conversión.

En ES6 podemos definir clases. A continuación un ejemplo:

class Empleado {
contructor(nombre = undefined) {
this.nombre = nombre
}
saludar() {
return `Hola soy ${this.nombre}`
}
}
emp = new Empleado("luis")
console.log(emp.saludar())
Lo que se traduce usando Babel en ES5.1 en lo siguiente:

"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance
instanceof Constructor)) { throw new TypeError("Cannot call a
class as a function"); } }
var Empleado = function () {
function Empleado() {
_classCallCheck(this, Empleado);
}
Empleado.prototype.contructor = function contructor() {
var nombre = arguments.length > 0 && arguments[0] !== undefined ?
arguments[0] : undefined;
this.nombre = nombre; }; Empleado.prototype.saludar
= function saludar() {
return "Hola soy " + this.nombre;
};
return Empleado;
}();
emp = new Empleado("luis")
console.log(emp.saludar());
Aquí puedes encontrar la herramienta Babel https://babeljs.io/. Pero así como
Babel, existen otras implementaciones de conversores.
Además de convertir a partir de ES6, existen otros lenguajes que se inspiran en
JavaScript pero que hacen, en su parecer, mejoras. Por ejemplo, CoffeeScript es
un lenguaje que promete escribir código más limpio usando el concepto de
sangrado (o indentación), que se emplea en Python. Un ejemplo de CoffeeScript
se muestra a continuación:

class Empleado
constructor: (@name) ->
saludar: ->
"Hola soy #{@name}"
emp = new Empleado("luis")
Lo anterior da como resultado el siguiente código en ES5.1:
var Empleado, emp;
Empleado = (function() {
function Empleado(name) {
this.name = name;
}
Empleado.prototype.saludar = function() {
return "Hola soy " + this.name;
};
return Empleado;
})();
emp = new Empleado("luis");
Otro lenguaje que está tomando mucha fuerza es TypeScript, el cual es definido
por Microsoft y es una implementación de ES6 con algunos elementos añadidos,
entre los cuales tenemos el manejo de tipos de datos explícitos (fuertemente
tipado), lo cual se hace atractivo para desarrollos más formales.

A continuación un ejemplo de TypeScript donde se utiliza el tipo string para definir


el atributo nombre.

class Empleado {
nombre: string
contructor(nombre: string) {
this.nombre = nombre
}
saludar() {
return `Hola soy ${this.nombre}`
}
}
emp = new Empleado("luis")
console.log(emp.saludar())
Aunque hoy en día se utilizan las versiones ECMAScript estudiadas en esta
lectura, a medida que pasa el tiempo se implementan nuevas versiones de
EcmaScript con sus respectivos transpiladores para adaptarse a las necesidades
de los desarrollos de software recientes.
Desafío práctico - Fecha
¡Qué gran alegría verte nuevamente! La Escuela Aprende y Disfruta está muy contenta con los
avances en la aplicación, y muy emocionada por lo que se puede lograr a través de ella para
alcanzar los objetivos de apoyar sus proyectos de infraestructura y la formación de los estudiantes
de escasos recursos económicos.

Necesitamos que trabajes con las fechas que son elementos importantes de la solución. Tu misión
es completar una función para mostrar la fecha de cada evento pasado en una forma que sea más
legible por una persona.

A continuación te mostramos unos avances generados por un programador que ayudó a la escuela
anteriormente. Él construyó la siguiente función para el caso que la fecha fuera:

 hace 1 segundo

 hace 10 segundos

 hace 1 minuto

 hace 15 minutos

 hace 1 hora

 hace 5 horas

 hace x días

function fechaParaHumanos(fecha, fechaRerencia){

var t1 = fecha.getTime() / 1000; // segundos

var t2 = fechaRerencia.getTime() / 1000; // segundos

var diferencia;

diferencia = Math.round(t2-t1);

if (diferencia < 1) {

return "hace 1 segundo"

if (diferencia < 60) {

return `hace ${diferencia} segundos`

diferencia = Math.round(diferencia/60);

if (diferencia < 1) {

return "hace 1 minuto"


}

Su función utiliza dos fechas: fecha (fecha del evento pasado) y fechaReferencia (fecha con la que
se compara, se pondrá la fecha/hora actual). Además usa getTime para obtener la cantidad de
milisegundos desde la fecha base (Enero 1 de 1970 0:0:0). Luego las convierte a segundos
dividiendo entre mil. Para luego calcular la diferencia, restando la fecha de referencia menos la
fecha del evento pasado. Y utiliza la estrategia de ir retornando a medida que consigue un valor.

Completa la función para que pueda devolver valores como:

 hace 15 minutos

 hace 1 hora

 hace 5 horas

 hace x días

Desafío práctico – funciones como


argumento
Queremos aprovechar tu contagioso ánimo y esfuerzo para que ayudes a Juan, un
desarrollador de aplicaciones web junior, con un problema que tiene en la
construcción de una pieza de código en JavaScript. Juan escribió el código a
continuación:

function GestionarEstudiante (estudiante,nota1,nota2, Gestion){


var resGestion = Gestion();
console.log ('Nombre Completo del Estudiante: ${estudiante}
${resGestion}');
}
function Promedio (nota1,nota2){
return (nota1+nota2)/2;
}
GestionarEstudiante('Jose Carrillo', 18,20, Promedio);
esperando obtener el siguiente resultado:

"Nombre Completo del Estudiante: Jose Carrillo 19"


Sin embargo, él está obteniendo la siguiente salida:
"Nombre Completo del Estudiante: Jose Carrillo NaN"
Queremos que ayudes a Juan a arreglar su código suministrando el código con la
modificación correspondiente.

Desafío práctico – funciones de orden


¡Hola! La aplicación para la Escuela Aprende y Disfruta requiere que sus eventos
estén adecuadamente ordenados y separados. Esto le facilitará el acceso y
despliegue a los usuarios de dicha aplicación. A continuación deseamos que sigas
ayudándonos a construir las funciones necesarias para esta aplicación, al mismo
tiempo que puedes continuar incrementando los elementos en tu portafolio.

Tu reto es construir una función que reciba un arreglo de eventos y una


fechaReferencia y devuelva un arreglo de dos posiciones. La primera posición son
los eventos futuros ordenados desde el que ocurrirá más pronto hasta el que
ocurra en el futuro. La segunda posición son los eventos pasados desde el más
reciente al más antiguo. La fechaReferencia es quien determina cuál es el futuro y
cuál es el pasado, antes de esa fecha todos son pasados y luego de ella todos son
futuros.

La función debería lucir como la siguiente :

var resultado = organizarEventos(eventos,


fechaReferencia)resultado[0] //eventos
futuros ordenadosresultado[1] //eventos
pasados ordenados

Ayuda
Puedes usar la función sort de arreglos de JavaScript, que recibe una función que
determina el orden. Esta función recibe dos parámetros y debe retornar 1 (cuando
a>b),0 (cuando a==b),-1 (cuando a<b). Su estructura es como la siguiente:

arreglo.sort((a,b) => {
...
return x; //1 (cuando a>b), 0 (cuando a==b), -1 (cuando a<b)
...
})
Probar con

var eventos = [
{
nombre: "e1",
fecha: new Date(2018,3,20)
},
{
nombre: "e2",
fecha: new Date(2018,2,20)
},
{
nombre: "e3",
fecha: new Date(2018,3,10)
},
{
nombre: "e4",
fecha: new Date(2018,5,20)
},
{
nombre: "e5",
fecha: new Date(2018,6,20)
},
{
nombre: "e6",
fecha: new Date(2018,0,20)
},
{
nombre: "e7",
fecha: new Date(2018,8,20)
},
]
Conclusión
Introducción a JavaScript
JavaScript es un lenguaje de programación utilizado en desarrollos Web. Junto
con HTML y CSS, se utiliza para el despliegue de soluciones Front End. Sin
embargo, el lenguaje ha adquirido otra dimensión en los últimos años, siendo
actualmente empleado también en soluciones Backend, gracias a Node.js. Con
esto, JavaScript se ha convertido en un lenguaje de propósito general.

Luego de haber culminado exitosamente el curso de Introducción a


JavaScript has desarrollado las capacidades siguientes:

 Crear una función en JavaScript usando los componentes básicos del


lenguaje.
 Diferenciar los diferentes tipos de datos y estructuras especificados en
JavaScript.
 Interpretar los fundamentos del paradigma de programación orientado a
objetos empleados en JavaScript.
 Usar expresiones regulares simples en la correspondencia de strings.
 Aplicar el paso de funciones como argumentos en otras funciones para
construir programas que manejan arreglos.

JavaScript-Conceptos básicos

JavaScript es un lenguaje de programación ampliamente utilizado para


proporcionar dinamismo e interactividad a las páginas Web. Es un lenguaje de alto
nivel interpretado dinámico, que significa que no requiere de un compilador para
traducir sus instrucciones, que a su vez se generan en tiempo de ejecución.
JavaScript es además un lenguaje que se considera débilmente tipado ya que sus
variables se asignan a medida que se ejecuta el programa. Adicionalmente, el
lenguaje incorpora aspectos de múltiples paradigmas de programación, tales como
orientación a objetos y lenguajes funcionales, considerándose así multiparadigma.

JavaScript se usa como un lenguaje de programación para las aplicaciones


corriendo en el navegador Web, por lo tanto, es una tecnología Front End. Sin
embargo, su uso se ha extendido a las aplicaciones que corren del lado del
servidor o Backend, a través del uso de Node.js, que es una extensión del
lenguaje para convertirlo en un lenguaje de propósito general, cuyos programas
pueden ejecutarse en cualquier ambiente.

JavaScript, similarmente a otros lenguajes de programación, soporta tipos de


datos simples, tales como, los strings y enteros, así como también tipos más
complejos, tales como, los arreglos y el tipo de dato objeto. Los tipos de datos
definen la clase de contenido que tienen las variables y por ende la clase de
operaciones que pueden realizarse con ellas. Igualmente encontramos una serie
de estructuras de control que incorporadas en nuestro código permiten definir lo
que queremos que nuestro código realice. Ellas se clasifican en condicionales,
tales como, if/else y ciclos, tales como, for y while.

Por otro lado, tenemos las funciones que nos permiten la construcción modular de
nuestro programa y la reutilización de parte del código que se encuentra definido
dentro de dichas funciones. Relacionado con las funciones está el alcance de las
variables en el ámbito de un programa, el cual se determina desde las definiciones
más internas hacia las más externas. Así, una variable puede tener un ámbito
global, es decir, todo el programa o local, tal como en determinada función.

Explorando JavaScript

Hemos estudiado, y examinado estructuras y funciones más complejas en el


lenguaje. Comenzamos estudiando un tipo de datos bastante particular
denominado objeto, que es similar al tipo de dato registro en otros lenguajes de
programación y que no debe confundirse con los objetos en el paradigma
orientado a objetos. El tipo de dato objeto proporciona gran flexibilidad para definir
estructuras con los campos necesarios, lo cual subsana el problema de la rigidez
de otras estructuras como los arreglos.

Seguidamente, analizamos el paradigma orientado a objetos, donde el sistema


que estamos implementando se representa como un conjunto de objetos
interactuando entre sí. Cuando usamos este paradigma, debemos aplicar el
concepto de abstracción, para tratar de identificar un problema dado aquellos
elementos que son relevantes para su solución. Los conceptos fundamentales en
la orientación a objetos son: las clases, que se representan como los tipos; los
objetos, que son instancias de las clases; los atributos, que son propiedades de
los objetos; y los métodos, que son funciones que determinan el comportamiento
de los objetos.

En JavaScript, una clase se define usando la palabra reservada class. Dentro de


la clase el método constructor es de particular importancia porque es el que
inicializa el objeto. Dentro de la clase también se encapsulan las propiedades del
objeto. A través del uso de la palabra reservada new, se puede crear una instancia
de la clase, es decir un objeto.

Seguimos profundizando en JavaScript, explorando las expresiones regulares, que


son una forma de definir un patrón para ver si coincide con una cadena de
caracteres dada y se utiliza comúnmente para procesar strings. También,
revisamos cómo trabajar con la clase Fecha, que nos proporciona una amplio
abanico de métodos para operar sobre las mismas.

Para finalizar, estudiamos el paso de funciones como argumentos en otras


funciones. que es particularmente útil cuando trabajamos con el procesamiento de
los elementos de un arreglo. Tenemos tres funciones útiles cuando trabajamos
con arreglos, una de filtrado (filter), que permite seleccionar los elementos de un
arreglo basados en lo que definamos en una función determinada; la otra es el
mapa (map), que transforma la estructura del arreglo de acuerdo a lo que le
especifiquemos; y el encontrar (find), que permite buscar un elemento
determinado en un arreglo.

Introducción a JavaScript >Prueba

Comenzado en Saturday, 17 de September de 2022, 17:02

Estado Terminados

Finalizado en Saturday, 17 de September de 2022, 17:42

Tiempo empleado 40 mins 21 segundos

Puntos 10/10

Calificación 97 de un total de 100

Pregunta 1
Correcta

Puntúa 1 sobre 1

Señalar con bandera la pregunta

Texto de la pregunta
Selecciona todas las sentencias que sean verdaderas para JavaScript.
Seleccione una o más de una:

a. Un string se considera una variable compleja porque puede contener uno o más caracteres.

b. Las expresiones regulares se reconocen porque vienen encerradas entre dos símbolos de asterisco.

c. El tipo de datos objeto es equivalente al tipo de datos registro en otros lenguajes de

programación
d. La fecha base es un día donde se asume que el reloj es cero.

Retroalimentación
Excelente, el tipo de dato objeto no se debe confundir con los objetos en el paradigma orientado a
objetos, por el contrario, ellos son un tipo similar a los registros en otros lenguajes. Por otra parte, al
trabajar con fechas JavaScript usa una fecha base donde el reloj se considera tener un valor de cero, esto
para poder estimar los demás componentes de una fecha.
Las respuestas correctas son: El tipo de datos objeto es equivalente al tipo de datos registro en otros
lenguajes de programación, La fecha base es un día donde se asume que el reloj es cero.

Pregunta 2
Parcialmente correcta

Puntúa 1 sobre 1

Señalar con bandera la pregunta

Texto de la pregunta
¿Cuál de las siguientes sentencias puedes usar en JavaScript para ejecutar un conjunto de instrucciones
múltiples veces? Señale todas las que apliquen.
Seleccione una o más de una:

a. while

b. do while

c. if

d. for

Retroalimentación
Las sentencias for, while y do while se usan en JavaScript para ejecutar un pedazo de código un número
limitado o no de veces.
Las respuestas correctas son: for, while, do while

Pregunta 3
Correcta

Puntúa 1 sobre 1
Señalar con bandera la pregunta

Texto de la pregunta
Dada la siguiente expresión regular indique qué cadena de caracteres coincide:
/^@[a-z]*.com/

Seleccione una:

a. @yahoo1.com

b. @yahoo.com

c. @YAHOO.com

d. maria@yahoo.com

Retroalimentación
La expresión regular /^@[a-z]*.com/ nos dice cualquier secuencia que comience por @ seguida de una
secuencia de caracteres entre la a y la z en minúscula, seguidos por un punto y a continuación la palabra
com.

La respuesta correcta es: @yahoo.com

Pregunta 4
Correcta

Puntúa 1 sobre 1

Señalar con bandera la pregunta

Texto de la pregunta
¿Cuál de las siguientes partes del código nos devolverá los nombres de los estudiantes que obtendrán el
premio a la excelencia por obtener 19 o más puntos en sus calificaciones generales, asumiendo que sus
calificaciones están en una escala del 0 al 20? Hemos declarado el arreglo estudiante de la siguiente
forma:

var estudiantes = [
{
nombre: "Anton",
nota: 19
},
{nombre: "Victoria",
nota: 20,
},
{
nombre: "Elena",
nota: 15
}]
Seleccione una:

a. var premio = estudiantes.filter (x => {


return x.nota >= 19

})

b. var premio = estudiantes.map (x => {


return x.nota
})

c. var premio = estudiantes.find (x => {


return x.nota > = 19;
})

d. var premio = estudiantes.find (x => {


return x.nota > 18;

Retroalimentación
La función filter o de filtrado es la encargada de buscar en el arreglo por los elementos que cumple la
condición de tener notas mayores o iguales a diecinueve. Note que la función find no se puede usar
porque, aunque similar, solo devuelve un solo elemento y nosotros los queremos todos.
La respuesta correcta es: var premio = estudiantes.filter (x => {
return x.nota >= 19
})

Pregunta 5
Correcta

Puntúa 1 sobre 1

Señalar con bandera la pregunta

Texto de la pregunta
_________________ es la función usada para transforma una estructura en otra de acuerdo con lo
indicado en la función interna de dicha función.

Seleccione una:

a. map
b. filter

c. find

d. forEach

Retroalimentación
La función map es la encargada de transformar la estructura de un arreglo en otra de acuerdo con lo
indicado en la función interna de esta función.

La respuesta correcta es: map

Pregunta 6
Correcta

Puntúa 1 sobre 1

Señalar con bandera la pregunta

Texto de la pregunta
¿Cuál es la instrucción para eliminar espacios antes y después de una cadena de caracteres identificada
con la variable texto?

Seleccione una:

a. texto.trim();

b. texto.length;

c. texto.slice (1,5);

d. texto.toUpperCase()

Retroalimentación
El método trim remueve espacios a ambos lados de un string

La respuesta correcta es: texto.trim();

Pregunta 7
Correcta

Puntúa 1 sobre 1
Señalar con bandera la pregunta

Texto de la pregunta
Selecciona las afirmaciones que son correctas para el lenguaje de programación JavaScript de la
siguiente lista:
Seleccione una:

a. La sintaxis de una función en JavaScript está compuesta por el nombre de la función, seguida de los
parámetros encerrados en paréntesis ( ) y finalmente las sentencias que ejecuta la función encerradas
entre corchetes [ ].

b. La palabra reservada function indica al interpretador JavaScript que se definirá una función
matemática.

c. Los parámetros que recibe una función se separan utilizando una coma.

d. Las variables globales son las que se pueden acceder únicamente dentro de la función en las que se
definen.

Retroalimentación
En JavaScript, se declara una función usando la palabra reservada function seguida del nombre de la
misma y a continuación la serie de parámetros separados por comas y encerrados entre paréntesis. Luego
se coloca el código encerrado entre llaves.
La respuesta correcta es: Los parámetros que recibe una función se separan utilizando una coma.

Pregunta 8
Correcta

Puntúa 1 sobre 1

Señalar con bandera la pregunta

Texto de la pregunta
En el siguiente ejemplo, var guitarra = new Instrumento (), podemos decir;

Seleccione una:

a. guitarra es una instancia de la clase Instrumento

b. gutarra es un atributo de la clase Instrumento


c. guitarra extiende la clase Instrumento

d. guitarra es del tipo de datos Instrumento

Retroalimentación
var guitarra = new Instrumento () es la forma generalizada de indicar de que una variable, en este caso,
guitarra, es una instancia de la clase Instrumento.

La respuesta correcta es: guitarra es una instancia de la clase Instrumento

Pregunta 9
Correcta

Puntúa 1 sobre 1

Señalar con bandera la pregunta

Texto de la pregunta
Dada una variable arreglo cuyo contenido es [1,2,3,4], ¿Cuál sería la forma correcta de colocar la
primera parte de una sentencia for para asegurar que el cuerpo se ejecute una vez que haya recorrido
todo el arreglo?
Seleccione una:

a. for (var i==0 ;i < 5; i++) {<cuerpo>}

b. for (var i=1 ;i < 6; i++) {<cuerpo>}

c. for (var i=0; i < 2; i++) {<cuerpo>}

d. for (var i=0 ;i< arreglo.length; i++) {<cuerpo>}

Retroalimentación
La instrucción arreglo.length devuelve la longitud del arreglo; mientras la variable i, que representa el
índice del arreglo, este tome valores de 0 a 3, el ciclo debe continuar para asegurar que se recorre todo el
arreglo.
La respuesta correcta es: for (var i=0 ;i< arreglo.length; i++) {<cuerpo>}

Pregunta 10
Correcta

Puntúa 1 sobre 1
Señalar con bandera la pregunta

Texto de la pregunta
Relaciona la opción que corresponda:

Función que retorna el valor de una cadena de Respuesta 1


caracteres, eliminando los espacios tanto al inicio como String.trim();
al final

Respuesta 2
resultado1 'Mi nombre es: ' + nombre;

Función que retorna la cadena de caracteres Respuesta 3


convirtiendo todos los valores alfabéticos en caracteres String.toUpperCase()
con letras mayúsculas.

Retroalimentación
La respuesta correcta es: Función que retorna el valor de una cadena de caracteres, eliminando los
espacios tanto al inicio como al final → String.trim();, resultado1 → 'Mi nombre es: ' + nombre;,
Función que retorna la cadena de caracteres convirtiendo todos los valores alfabéticos en caracteres con
letras mayúsculas. → String.toUpperCase()

También podría gustarte