Regional Boyacá Centro

Sistema de Nacional Minero Fecha : 11-

Gestión de Servicio Nacional de Aprendizaje -SENA 09-2015
la Calidad Versión:102

Nombre de la Analizar
Estructura:
Evidencia de : producto
Nombre del Aprendiz: Ficha:
Nombre del instructor: CESAR ORLANDO MEJIA PATIÑO
Duración: 4h Juicio:

Estimado aprendiz realizar el siguiente taller de JavaScript

Material de apoyo: El gran libro de HTML.CSS3 y Javascript, consultas de internet

Enviar el taller resuelto a la carpeta evidencias del Drive

Cadenas de Texto

Para crear una cadena de texto Javascript simplemente tendremos que asignar una cadena de
texto, delimitada por comillas o dobles comillas, a una variable.

let cadena = "Soy una cadena";

let otra cadena = 'Yo también soy una cadena';

Concatenar Cadenas de texto

Si queremos concatenar cadenas de texto Javascript podemos recurrir al operador +, el cual,

a parte de servirnos para sumar números nos permite concatenar las cadenas de texto.

Por ejemplo podríamos utilizarlo de la siguiente manera:

let nombre = "Víctor";

let saludo = "Hola, " + nombre + "!";

Cadenas de Texto Multi-línea

En el caso de que estemos manejando cadenas de texto Javascript muy largas podemos
codificarlas como cadenas de texto multi-línea. Es decir, podremos distribuir su contenido en
varias líneas.

Para ello tenemos tres alternativas. La primera consiste en utilizar una barra invertida al final de
cada línea de texto. Quedaría de la siguiente forma:

let cadena = "En un lugar de la Mancha, \

de cuyo nombre no quiero acordarme, \
no ha mucho tiempo que vivía \
un hidalgo de los de lanza en astillero, \
adarga antigua, rocín flaco y galgo corredo";
La segunda opción consiste en concatenar cadenas de texto Javascript como hemos visto en el
apartado anterior. En este caso, nuestro código, quedaría de la siguiente forma:

let cadena = "En un lugar de la Mancha, " +

"de cuyo nombre no quiero acordarme, " +
"no ha mucho tiempo que vivía " +
"un hidalgo de los de lanza en astillero, " +
"adarga antigua, rocín flaco y galgo corredo";

La última opción que tendríamos sería utilizando la comilla simple invertida, esto nos permite poner
directamente el contenido en varias líneas sin utilizar un operador o carácter por medio. Por lo que
queda más claro.

En este caso el código quedaría de la siguiente forma:

let cadena = `En un lugar de la Mancha,

de cuyo nombre no quiero acordarme,
no ha mucho tiempo que vivía
un hidalgo de los de lanza en astillero,
adarga antigua, rocín flaco y galgo corredo`;

Es importante saber que en este caso los saltos de línea son guardados como tal, por lo que
tendremos que tenerlo en cuenta a la hora de procesar este tipo de cadenas.

Ejercicio práctico cadenas de texto

Ejecutar el programa y verificar los resultados

Ejercicio práctico concatenar texto

Ejecutar el programa y verificar los resultados

 Array (arreglos)

Es una colección o agrupación de elementos en una misma variable, cada uno de ellos
ubicado por la posición que ocupa en el array. En algunas ocasiones también se les suelen
llamar arreglos o vectores

Declaración

Hay dos sintaxis para crear un array vacío:

let arr = new Array();

let arr = [];

Casi siempre se usa la segunda. Podemos suministrar elementos iniciales entre los
corchetes:

let fruits = ["Apple", "Orange", "Plum"];

Los elementos del array están numerados comenzando desde cero.

Podemos obtener un elemento por su número entre corchetes:

let fruits = ["Apple", "Orange", "Plum"];

alert( fruits[0] ); // Apple

alert( fruits[1] ); // Orange
alert( fruits[2] ); // Plum

Podemos reemplazar un elemento:

fruits[2] = 'Pear'; // ahora ["Apple", "Orange", "Pear"]

…o agregar uno nuevo al array:

fruits[3] = 'Lemon'; // ahora ["Apple", "Orange", "Pear", "Lemon"]

La cuenta total de elementos en el array es su longitud length:

let fruits = ["Apple", "Orange", "Plum"];

alert( fruits.length ); // 3

También podemos usar alert para mostrar el array completo.

let fruits = ["Apple", "Orange", "Plum"];

alert( fruits ); // Apple,Orange,Plum
 Digamos que queremos el último elemento de un array.

Podemos calcular explícitamente el último índice y luego acceder al elemento:

fruits[fruits.length - 1].

let fruits = ["Apple", "Orange", "Plum"];

alert( fruits[fruits.length-1] ); // Plum

Un poco engorroso, ¿no es cierto? Necesitamos escribir el nombre de la variable dos

veces.

Afortunadamente, hay una sintaxis más corta: fruits.at(-1):

let fruits = ["Apple", "Orange", "Plum"];

// es lo mismo que fruits[fruits.length-1]

alert( fruits.at(-1) ); // Plum

Métodos pop/push, shift/unshift

Una cola es uno de los usos más comunes de un array. En ciencias de la computación,
significa una colección ordenada de elementos que soportan dos operaciones:

push inserta un elemento al final.

shift obtiene el elemento del principio, avanzando la cola, y así el segundo elemento se
vuelve primero.

Los arrays soportan ambas operaciones.

En la práctica los necesitamos muy a menudo. Por ejemplo, una cola de mensajes que
necesitamos mostrar en pantalla.

Hay otro caso de uso para los arrays – la estructura de datos llamada pila.

Ella soporta dos operaciones:

push agrega un elemento al final.

pop toma un elemento desde el final.

Entonces los elementos nuevos son agregados o tomados siempre desde el “final”.
 Una pila es usualmente mostrada como un mazo de cartas, donde las nuevas cartas
son agregadas al tope o tomadas desde el tope:

Los arrays en JavaScript pueden trabajar como colas o pilas. Ellos permiten
agregar/quitar elementos al/del principio o al/del final.

Métodos que trabajan sobre el final del array:

pop
Extrae el último elemento del array y lo devuelve:

let fruits = ["Apple", "Orange", "Pear"];

alert( fruits.pop() ); // quita "Pear" y lo muestra en un alert
alert( fruits ); // Apple, Orange

Tanto fruits.pop() como fruits.at(-1) devuelven el último elemento del array, pero
fruits.pop() también modifica el array eliminando tal elemento.

push
Agrega el elemento al final del array:

let fruits = ["Apple", "Orange"];

fruits.push("Pear");

alert( fruits ); // Apple, Orange, Pear

El llamado a fruits.push(...) es igual a fruits[fruits.length] = ....

Métodos que trabajan con el principio del array:

shift
Extrae el primer elemento del array y lo devuelve:

let fruits = ["Apple", "Orange", "Pear"];

alert( fruits.shift() ); // quita Apple y lo muestra en un alert
alert( fruits ); // Orange, Pear

unshift
Agrega el elemento al principio del array:

let fruits = ["Orange", "Pear"];

fruits.unshift('Apple');
alert( fruits ); // Apple, Orange, Pear
Los métodos push y unshift pueden agregar múltiples elementos de una vez:

let fruits = ["Apple"];

fruits.push("Orange", "Peach");
fruits.unshift("Pineapple", "Lemon");

// ["Pineapple", "Lemon", "Apple", "Orange", "Peach"]

alert( fruits );

Ejercicio práctico Arrays

Archivo arrays.html

Archivo arrays.js
 Ejecutar el programa y verificar los resultados

Condicionales

Hasta ahora hemos visto código que se ejecuta línea a línea, una detrás de otra. Pero a veces
se hace necesario romper esa secuencia y crear ramas que nos permitan tomar diferentes
caminos en el código dependiendo de ciertas condiciones.
 if (<condición>) {
// código que se ejecuta si se cumple la condición
}
if (<condición>) {
// código que se ejecuta si se cumple la condición
} else {
// código que se ejecuta si NO se cumple la condición
}

Ejemplos:

let nota = 7;
console.log("He realizado mi examen. Mi resultado es el siguiente:");

if (nota < 5) {
// Acción A: nota es menor que 5
calificacion = "suspendido";
} else {
// Acción B: Cualquier otro caso diferente a A (nota es mayor o igual que 5)
calificacion = "aprobado";
}

console.log("Estoy", calificacion);
Escribir un script que diga si un numero es par o es impar.
Recordemos que un numero es par si al dividirlo por 2 da como residuo 0.

let numero = 18
let resto = numero%2;
if (resto === 0){
alert(numero+" es par");
}
else{
alert(numero+" es impar");
}

Hacer un programa que pida un numero y diga si es positivo o negativo.

El cero se considera positivo.

var numero = parseInt(prompt("Teclea un número"));

if (numero>=0){
alert(numero +" es positivo");
}else{
alert(numero +" es negativo");
}

Ejercicio el cual dirigirá a los clientes a la barra de bebidas o a la de comidas, para

ello el cliente puede pedir vino, cerveza, refresco, agua.
Si pide cerveza o vino se le dirige a la barra y si no se le dirige a la tienda.

var articulo = prompt("Puede elegir: vino, cerveza, otros")

if ( articulo === "vino" || articulo === "cerveza"){
alert("vaya a la barra");
}else{
alert("vaya a la tienda");
}

Ejercicio en el cual se lee 3 notas de una materia, se calcula el promedio

var nota1, nota2, nota3, promedio, calificacion;

nota1 = parseFloat(prompt("Primer parcial"));
nota2 = parseFloat(prompt("Segundo parcial"));
nota3 = parseFloat(prompt("Examen final"));
promedio = (nota1 + nota2 + nota3)/3;

if (promedio < 35){

calificacion = "Ha perdido la materia";
}else{
if(promedio >= 35 && promedio <=50){
calificacion = "Ha sido Aprobada la materia";
}