Competencia profesional:

APRENDIZAJE ESPERADO

3. Usa JavaScript para manejar eventos

Aprendizaje Esperado:
3.2 Elementos
3.3 Operadores
3.4 Estructura de control de flujo
2

Producto Esperado:
Resumen
Instrumento de evaluación:
EP 1-1
Ponderación:
50%

Lee el siguiente texto, donde te indica como diseñar un resumen y posteriormente elabora tu evidencia “Resumen
de elementos, operadores y estructura de control en JavaScript”

¿Qué es un resumen?

Cuando se habla de un resumen, se hace referencia a un texto de extensión variable, tendiendo siempre a lo
breve, en el que se sintetiza o se abrevian las ideas de un texto de mayor tamaño y/o mayor complejidad. Se
estila que un resumen sea un 25% del tamaño del original.

Los resúmenes son formas condensadas de un texto o un discurso, lo cual significa la selección de su material
más central, vital o importante, y el descarte de todo aquello que sea superfluo, decorativo o suplementario.
Normalmente se realizan con la intención de:

 Brindar una muestra o un abreboca del contenido de un libro cualquiera (como los textos de las
contratapas).
 Permitir al investigador enterarse de los puntos principales de un artículo (como los abstracts de los
artículos académicos).
 Resumir la información de un texto en una serie de apuntes para su lectura posterior (como en los
cuadernos de clase).
 Brindar el núcleo de la información generada durante un período de tiempo extenso (como en los
resúmenes de cuenta de los bancos).
 Comprobar, como ejercicio, la capacidad lectora de los alumnos de la escuela.

De igual manera, la elaboración de resúmenes suele ser una técnica de estudio fundamental: nos
permite comprobar que entendimos el texto a cabalidad, ya que podemos elegir cuáles son sus ideas principales
y cuáles son ideas descartables.

¿Cómo se hace un resumen?

Para hacer correctamente un resumen podemos guiarnos por los siguientes pasos:

 Leer el texto original a cabalidad. Esto es indispensable para hacer el resumen: no se puede resumir
lo que se desconoce, ni se puede resumir un texto leyéndolo por encima, pues ignoraremos cuáles son
las ideas principales y cuáles las secundarias.
 Separar el texto en párrafos. Una vez separado, marcar en cada párrafo las ideas principales,
secundarias y suplementarias, empleando un resaltador diferente para cada categoría. Si es necesario,
toma apuntes al margen o en una hoja aparte.

COLEGIO DE ESTUDIOS CIENTÍFICOS

Y TECNOLÓGICOS DEL ESTADO DE CAMPECHE
DIRECCIÓN ACADÉMICA
Departamento de Planes y Programas
  Trascribe lo subrayado. Copia en tu cuaderno las ideas principales y secundarias solamente, y trata de
ordenarlas para formar con ellas un único párrafo.
 Redacta de nuevo el párrafo. Vuelve a escribir el párrafo con las ideas primarias y secundarias
ordenadas, pero esta vez trata de hacerlo con tus propias palabras.
 Revisa lo escrito. Relee tu texto final y elimina las cosas que le sobren. Añádele un título y la información
del libro resumido (autor, título, editorial) en alguna parte.

Fuente: https://concepto.de/resumen-2/#ixzz6V2IgO2R4

Lee el siguiente texto sobre “Elementos, operadores y estructura de control en JavaScript”

 Elementos

Datos
JavaScript maneja cuatro tipos de datos: numéricos, de cadena, booleanos y punteros.

Los datos numéricos sirven para manejar cualquier número real, como 12, 56.5, -9. También son datos numéricos:
2.0E2 (notación científica de 2.0*102), 0xF0 (notación hexadecimal) o 012 (notación octal).

Los datos de cadena son los usados para cadenas alfanuméricas, o sea, para representar palabras, así los
siguientes son datos de cadena: "prueba", "La clave es 4r5t". Estos datos siempre están encerados entre comillas.
"41" es un dato de cadena mientras que 41 es el número cuarenta y uno.

Los datos booleanos dan respuesta a preguntas que solo admiten dos posibles valores: verdadero (true) o falso
(false). Este tipo de datos los utilizaremos para tomar decisiones, o sea, comprobar algo y actuar en consecuencia.

Existe un último tipo de datos que también se emplea a menudo en los scripts para la captura de eventos, son
direcciones de memoria, o punteros, usadas para asignar funciones.

Variables
Las variables en los lenguajes de programación siguen una lógica similar a las variables utilizadas en otros ámbitos
como las matemáticas. Una variable es un elemento que se emplea para almacenar y hacer referencia a otro valor.
Gracias a las variables es posible crear "programas genéricos", es decir, programas que funcionan siempre igual
independientemente de los valores concretos utilizados.

De la misma forma que si en Matemáticas no existieran las variables no se podrían definir las ecuaciones y
fórmulas, en programación no se podrían hacer programas realmente útiles sin las variables.

Si no existieran variables, un programa que suma dos números podría escribirse como:
resultado = 3 + 1

El programa anterior es tan poco útil que sólo sirve para el caso en el que el primer número de la suma sea el 3
y el segundo número sea el 1. En cualquier otro caso, el programa obtiene un resultado incorrecto.

Sin embargo, el programa se puede rehacer de la siguiente manera utilizando variables para almacenar y referirse
a cada número:

numero_1 = 3
numero_2 = 1
resultado = numero_1 + numero_2

Los elementos numero_1 y numero_2 son variables que almacenan los valores que utiliza el programa. El resultado
se calcula siempre en función del valor almacenado por las variables, por lo que este programa funciona

COLEGIO DE ESTUDIOS CIENTÍFICOS

Y TECNOLÓGICOS DEL ESTADO DE CAMPECHE
DIRECCIÓN ACADÉMICA
Departamento de Planes y Programas
correctamente para cualquier par de números indicado. Si se modifica el valor de las variables numero_1 y
numero_2, el programa sigue funcionando correctamente.

Las variables en JavaScript se crean mediante la palabra reservada var. De esta forma, el ejemplo anterior se
puede realizar en JavaScript de la siguiente manera:

var numero_1 = 3;
var numero_2 = 1;
var resultado = numero_1 + numero_2;

La palabra reservada var solamente se debe indicar al definir por primera vez la variable, lo que se denomina
declarar una variable. Cuando se utilizan las variables en el resto de instrucciones del script, solamente es necesario
indicar su nombre. En otras palabras, en el ejemplo anterior sería un error indicar lo siguiente:

var numero_1 = 3;
var numero_2 = 1;
var resultado = var numero_1 + var numero_2;

Objetos
Javascript no posee todas las características de los lenguajes orientados a objetos como Java o C++, pero si es
capaz de manejar objetos e incluso crearlos. De hecho, si un programa en este lenguaje es capaz de interactuar
con el explorador es gracias a esta capacidad.

Javascript posee algunos objetos predefinidos u objetos intrínsecos como son: Array, Boolean, Date, Function,
Global, Math, Number, Object, RegExp, y String. Además, es posible crear objetos nuevos, con sus propios
métodos y propiedades, adaptados a las necesidades concretas de cada aplicación.

Crear un objeto nuevo es tan simple como definir cuales serán sus propiedades y sus métodos, teniendo en cuenta
que cualquier objeto que definamos ya posee heredados los métodos y propiedades del objeto predefinido object.

Funciones

Las funciones no son más que bloques de instrucciones de programa con nombre y que pueden ejecutarse sin
más que llamarlas desde alguna parte de otra función o desde la página HTML, bien sea directamente o mediante
eventos.

Habitualmente una función se crea para ejecutar una acción muy concreta. Javascript posee una serie de funciones
predefinidas o funciones globales pero el programador puede crear las suyas propias.

Para crear una función, tan sólo es necesario indicárselo al intérprete mediante la palabra clave function seguida
del nombre que deseemos darle a la función y, encerrados entre paréntesis, las variables que simbolizan los
valores con los que deba trabajar la función, llamadas argumentos.

Importante: Los paréntesis deben escribirse, aunque no haya argumentos.

 Operadores

JavaScript tiene los siguientes tipos de operadores.

Operadores aritméticos
Un operador aritmético toma valores numéricos (ya sean literales o variables) como sus operandos y devuelve un
solo valor numérico. Los operadores aritméticos estándar son suma (+), resta (-), multiplicación (*) y división

COLEGIO DE ESTUDIOS CIENTÍFICOS

Y TECNOLÓGICOS DEL ESTADO DE CAMPECHE
DIRECCIÓN ACADÉMICA
Departamento de Planes y Programas
(/). Estos operadores funcionan como lo hacen en la mayoría de los otros lenguajes de programación cuando se
usan con números de punto flotante (en particular, ten en cuenta que la división entre cero produce Infinity).

Por ejemplo:
1 / 2; // 0.5
1 / 2 == 1.0 / 2.0; // Esto es true

Además de las operaciones aritméticas estándar (+, -, *, /), JavaScript proporciona los operadores aritméticos
enumerados en la siguiente tabla:

Operadores aritméticos
Operador Descripción Ejemplo
Operador binario. Devuelve el
Residuo (%) resto entero de dividir los dos 12 % 5 devuelve 2.
operandos.
Operador unario. Agrega uno a
su operando. Si se usa como
operador prefijo (++x),
Si x es 3, ++x establece x en
devuelve el valor de su
4 y devuelve 4, mientras
Incremento (++) operando después de agregar
que x++ devuelve 3 y , solo
uno; si se usa como operador
entonces, establece x en 4.
sufijo (x++), devuelve el valor
de su operando antes de
agregar uno.
Si x es 3, entonces --
Operador unario. Resta uno de
x establece x en 2 y devuelve
su operando. El valor de
Decremento (--) 2, mientras que x-- devuelve 3
retorno es análogo al del
y, solo entonces,
operador de incremento.
establece x en 2.
Operador unario. Devuelve la Si x es 3, entonces -x devuelve
Negación unaria (-)
negación de su operando. -3.
Operador unario. Intenta
+"3" devuelve 3.
Positivo unario (+) convertir el operando en un
+true devuelve 1.
número, si aún no lo es.
Calcula la base a la potencia
Operador de 2 ** 3 returns 8.
de exponente, es
exponenciación (**) 10 ** -1 returns 0.1.
decir, baseexponente

Operadores Lógicos
Los operadores lógicos se utilizan normalmente con valores booleanos (lógicos); cuando lo son, devuelven un
valor booleano. Sin embargo, los operadores && y || en realidad devuelven el valor de uno de los operandos
especificados, por lo que si estos operadores se utilizan con valores no booleanos, pueden devolver un valor no
booleano. Los operadores lógicos se describen en la siguiente tabla.

COLEGIO DE ESTUDIOS CIENTÍFICOS

Y TECNOLÓGICOS DEL ESTADO DE CAMPECHE
DIRECCIÓN ACADÉMICA
Departamento de Planes y Programas
 Operador Uso Descripción
AND Lógico (&&) expr1 && expr2 Devuelve expr1 si se puede
convertir a false; de lo
contrario, devuelve expr2. Por
lo tanto, cuando se usa con
valores
booleanos, && devuelve true si
ambos operandos son true; de
lo contrario, devuelve false.
OR lógico (||) expr1 || expr2 Devuelve expr1 si se puede
convertir a true; de lo
contrario, devuelve expr2. Por
lo tanto, cuando se usa con
valores
booleanos, || devuelve true si
alguno de los operandos
es true; si ambos son falsos,
devuelve false.
NOT lógico (!) !expr Devuelve false si su único
operando se puede convertir
a true; de lo contrario,
devuelve true.

Operadores de comparación
Un operador de comparación compara sus operandos y devuelve un valor lógico en función de si la comparación
es verdadera (true) o falsa (false). Los operandos pueden ser valores numéricos, de cadena, lógicos u objetos.
Las cadenas se comparan según el orden lexicográfico estándar, utilizando valores Unicode. En la mayoría de los
casos, si los dos operandos no son del mismo tipo, JavaScript intenta convertirlos a un tipo apropiado para la
comparación. Este comportamiento generalmente resulta en comparar los operandos numéricamente.

Operadores condicionales
– == Comprueba si los dos operandos son iguales
– != Comprueba si los dos operandos son distintos
– > Mayor que, devuelve true si el primer operando es mayor que el segundo
– < Menor que, es true si el primer operando es menor que el segundo
– >= Mayor igual.
– <= Menor igual

 Estructura de control de flujo

Estructura if
La estructura más utilizada en JavaScript y en la mayoría de lenguajes de programación es la estructura if. Se
emplea para tomar decisiones en función de una condición. Su definición formal es:

if(condicion) {
...
}

COLEGIO DE ESTUDIOS CIENTÍFICOS

Y TECNOLÓGICOS DEL ESTADO DE CAMPECHE
DIRECCIÓN ACADÉMICA
Departamento de Planes y Programas
Si la condición se cumple (es decir, si su valor es true) se ejecutan todas las instrucciones que se encuentran
dentro de {...}. Si la condición no se cumple (es decir, si su valor es false) no se ejecuta ninguna instrucción
contenida en {...} y el programa continúa ejecutando el resto de instrucciones del script.

Ejemplo:

var mostrarMensaje = true;

if(mostrarMensaje) {
alert ("Hola Mundo");
}

En el ejemplo anterior, el mensaje sí que se muestra al usuario ya que la variable mostrarMensaje tiene un valor
de true y por tanto, el programa entra dentro del bloque de instrucciones del if.

Estructura if...else
En ocasiones, las decisiones que se deben realizar no son del tipo "si se cumple la condición, hazlo; si no se
cumple, no hagas nada". Normalmente las condiciones suelen ser del tipo "si se cumple esta condición, hazlo; si
no se cumple, haz esto otro".

Para este segundo tipo de decisiones, existe una variante de la estructura if llamada if...else.

Su definición formal es la siguiente:

if(condicion) {
...
}
else {
...
}

Si la condición se cumple (es decir, si su valor es true) se ejecutan todas las instrucciones que se encuentran
dentro del if(). Si la condición no se cumple (es decir, si su valor es false) se ejecutan todas las instrucciones
contenidas en else { }.

Ejemplo:

var edad = 18;

if (edad >= 18) {
alert ("Eres mayor de edad");
}
else {
alert ("Todavía eres menor de edad");
}

Si el valor de la variable edad es mayor o igual que el valor numérico 18, la condición del if() se cumple y por
tanto, se ejecutan sus instrucciones y se muestra el mensaje "Eres mayor de edad". Sin embargo, cuando el valor
de la variable edad no es igual o mayor que 18, la condición del if() no se cumple, por lo que automáticamente se
ejecutan todas las instrucciones del bloque else { }. En este caso, se mostraría el mensaje "Todavía eres menor
de edad".

COLEGIO DE ESTUDIOS CIENTÍFICOS

Y TECNOLÓGICOS DEL ESTADO DE CAMPECHE
DIRECCIÓN ACADÉMICA
Departamento de Planes y Programas
Estructura switch
La estructura if...else se puede utilizar para realizar comprobaciones múltiples y tomar decisiones complejas. Sin
embargo, si todas las condiciones dependen siempre de la misma variable, el código JavaScript resultante es
demasiado redundante:

if(numero == 5) {
...
}
else if(numero == 8) {
...
}
else if(numero == 20) {
...
}
else {
...
}

En estos casos, la estructura switch es la más eficiente, ya que está especialmente diseñada para manejar de
forma sencilla múltiples condiciones sobre la misma variable. Su definición formal puede parecer compleja, aunque
su uso es muy sencillo:

switch(variable) {
case valor_1:
...
break;
case valor_2:
...
break;
...
case valor_n:
...
break;
default:
...
break;
}

El anterior ejemplo realizado con if...else se puede rehacer mediante switch:

switch(numero) {
case 5:
...
break;
case 8:
...
break;
case 20:
...
break;
default:
...
break;
}

COLEGIO DE ESTUDIOS CIENTÍFICOS

Y TECNOLÓGICOS DEL ESTADO DE CAMPECHE
DIRECCIÓN ACADÉMICA
Departamento de Planes y Programas
La estructura switch se define mediante la palabra reservada switch seguida, entre paréntesis, del nombre de la
variable que se va a utilizar en las comparaciones. Como es habitual, las instrucciones que forman parte del switch
se encierran entre comillas { y }.

Dentro del switch se definen todas las comparaciones que se quieren realizar sobre el valor de la variable. Cada
comparación se indica mediante la palabra reservada case seguida del valor con el que se realiza la comparación.
Si el valor de la variable utilizada por switch coincide con el valor indicado por case, se ejecutan las instrucciones
definidas dentro de ese case.

Normalmente, después de las instrucciones de cada case se incluye la sentencia break para terminar la ejecución
del switch, aunque no es obligatorio. Las comparaciones se realizan por orden, desde el primer case hasta el
último, por lo que es muy importante el orden en el que se definen los case.

¿Qué sucede si ningún valor de la variable del switch coincide con los valores definidos en los case? En este caso,
se utiliza el valor default para indicar las instrucciones que se ejecutan en el caso en el que ningún case se cumpla
para la variable indicada.

Aunque default es opcional, las estructuras switch suelen incluirlo para definir al menos un valor por defecto para
alguna variable o para mostrar algún mensaje por pantalla.

http://www.dirinfo.unsl.edu.ar/dweb/Clase%208.pdf
Introducción a JavaScript.pdf

Realiza un resumen del texto anterior. (Lista de cotejo EP1-2)

COLEGIO DE ESTUDIOS CIENTÍFICOS

Y TECNOLÓGICOS DEL ESTADO DE CAMPECHE
DIRECCIÓN ACADÉMICA
Departamento de Planes y Programas
 COLEGIO DE ESTUDIOS CIENTÍFICOS
Y TECNOLÓGICOS DEL ESTADO DE CAMPECHE
DIRECCIÓN ACADÉMICA
Departamento de Planes y Programas
 COLEGIO DE ESTUDIOS CIENTÍFICOS Y TECNOLÓGICOS
DEL ESTADO DE CAMPECHE
INSTRUMENTO DE EVALUACIÓN PARA LOS MÓDULOS DE PROGRAMACIÓN
MODULO III. DESARROLLA APLICACIONES WEB
SUBMODULO II. DESARROLLA APLICACIONES QUE SE EJECUTAN EN EL CLIENTE
REFORMA INTEGRAL DE LA EDUCACIÓN MEDIA SUPERIOR

LISTA DE COTEJO EP1-2

ALUMNO(A):
EVIDENCIAS:
PLANTEL: MAPA CONCEPTUAL, RESUMEN
SEMESTRE: CUARTO

CARRERA: PROGRAMACIÓN ENTE EVALUADOR:

HETEROEVALUACIÓN
TIPO DE EVALUACIÓN: FORMATIVA y
PRIMER PARCIAL
SUMATIVA
COMPETENCIA DISCIPLINAR: C1 Identifica, ordena e interpreta las ideas, datos y conceptos explícitos e
implícitos en un texto, considerando el contexto en el que se generó y en el que se recibe.
COMPETENCIA GENÉRICA: ATRIBUTO: 5.1 Sigue Instrucciones y
5. Desarrolla innovaciones y propone soluciones a partir de procedimientos de manera reflexiva,
métodos establecidos comprendiendo cómo cada uno de sus
pasos contribuye al alcance de un objetivo.
PUNTOS
CARACTERÍSTICAS A EVALUAR OBSERVACIONES
VALOR LOGRADO

RESUMEN (HETEROEVALUACIÓN)
El resumen elaborado contiene lo siguiente:
1. Portada 1
2. Tabla de contenido 2
3. Desarrollo de los temas: 35
- Elementos
- Operadores
- Estructura de control de flujo (condicionales)
4. Criterios: 5
Claridad en el contenido
Distingue lo importante de lo accesorio
Aporta reflexiones que implican comprensión del texto leído
5. Conclusión 5
6. Fuentes consultadas 2
TOTAL 50
RESULTADO DE EVALUACIÓN
FECHA DE APLICACIÓN:

RESPONSABLE DE LA EVALUACIÓN

COLEGIO DE ESTUDIOS CIENTÍFICOS

Y TECNOLÓGICOS DEL ESTADO DE CAMPECHE
DIRECCIÓN ACADÉMICA
Departamento de Planes y Programas
Estimado alumno(a), ahora TÚ ERES:

COLEGIO DE ESTUDIOS CIENTÍFICOS

Y TECNOLÓGICOS DEL ESTADO DE CAMPECHE
DIRECCIÓN ACADÉMICA
Departamento de Planes y Programas