LS3 Daw

FACULTAD DE CIENCIAS INFORMÁTICAS
DESARROLLO DE APLICACIONES WEB
SEMESTRE 2022 S1
LABORATORIO S3
TEMA: Javascript
PROFESOR: PhD(c) Luis Fernando Aguas Bucheli
PORTOVIEJO, 2022
1. TEMA: Javascript
2. OBJETIVOS:
 Adquirir los conceptos básicos relacionados con Javascript

 Reconocer las características de Javascript
3. OBJETIVOS DE DESARROLLO SOSTENIBLE:
Indicador 4.7: De aquí a 2030, asegurar que todos los alumnos adquieran los conocimientos
teóricos y prácticos necesarios para promover el desarrollo sostenible, entre otras cosas
mediante la educación para el desarrollo sostenible y los estilos de vida sostenibles, los
derechos humanos, la igualdad de género, la promoción de una cultura de paz y no violencia,
la ciudadanía mundial y la valoración de la diversidad cultural y la contribución de la cultura al
desarrollo sostenible
4. INTRODUCCION:
JavaScript es el lenguaje de programación encargado de dotar de mayor interactividad y

dinamismo a las páginas web. Cuando JavaScript se ejecuta en el navegador, no necesita de
un compilador. El navegador lee directamente el código, sin necesidad de terceros. Por tanto,
se le reconoce como uno de los tres lenguajes nativos de la web junto a HTML (contenido y su
estructura) y a CSS (diseño del contenido y su estructura).
No conviene confundir JavaScript con Java, que es un lenguaje de programación muy
diferente. La confusión proviene del nombre, registrado por la misma empresa creadora de
Java (Sun Microsystems). JavaScript (JS) se creó posteriormente, y la empresa norteamericana
lo que hizo simplemente fue cambiar el nombre que le habían puesto sus creadores al comprar
el proyecto (LiveScript). El lenguaje de programación Java está orientado a muchas más cosas
que la web desde sus inicios.
¿Para qué sirve JavaScript?
Con este lenguaje de programación del lado del cliente (no en el servidor) podemos crear
efectos y animaciones sin ninguna interacción, o respondiendo a eventos causados por el
propio usuario tales como botones pulsados y modificaciones del DOM (document object
1
Ciencias Informáticas
model). Por tanto, nada tiene que ver con el lenguaje de programación Java, ya que su
principal función es ayudar a crear páginas webs dinámicas.
El código de programación de JavaScript se ejecuta en los navegadores, ya sean de escritorio
o móviles, ya sean Android o Iphone. Sirve para exactamente lo mismo, da igual en el tipo de
dispositivo que se ejecute el navegador.
JavaScript es capaz de detectar errores en formularios, de crear bonitos sliders que se
adapten a cualquier pantalla, de hacer cálculos matemáticos de forma eficiente, de modificar
elementos de una página web de forma sencilla. Pero también JS es el encargado de que
existan herramientas como Google Analytics, Google Tag Manager, Facebook Pixel y tantas
otras, que son claros ejemplos de JavaScript.
Existe una tecnología llamada AJAX que permite intercambiar información con el servidor sin
tener que recargar la página. Es decir, sólo cargamos de la página lo necesario. Esta tecnología
desarrollada en JavaScript ha supuesto uno de los principales avances en el desarrollo web.
Aunque no la sepamos reconocer, es la encargada de que podamos conseguir más mensajes,
tweets, emails…sólo pulsando un botón, sin tener que recargar la página.
5. DESARROLLO:
Ejercicio 1:
Genera un script que pida cinco números al usuario usando un bucle for normal (usa prompt
para pedir los datos y conviértelos a valor numérico posteriormente). Almacena los números
introducidos por el usuario en un array. A continuación usando un for in que recorra el array,
muestra un mensaje informando del resultado de multiplicar cada uno de los números por 3.
Ejemplo:
Se pedirán al usuario cinco números, supongamos que introduce 1, 3, 9, 10 y 7
A continuación, se mostrará el mensaje:
Multiplicamos por 3 los números introducidos: 1*3 = 3, 3*3 = 9, 9*3 = 27, 10*3 = 30 y 7*3 =21.
CODIGO
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio CU01135E</title>
<script>
function pedirNumeros(){
var numeroGuardado = [];
var msg = 'Multiplicamos los números elejidos por 3:\n';
for(i=0; i<5; i++){
numeroPedido = prompt('Ingrese un número');
numeroGuardado[i] = Number(numeroPedido);
}
1
for (i in numeroGuardado){
msg = msg + numeroGuardado[i] + '*3 = ' + (numeroGuardado[i] * 3) + '\n';
}
alert(msg);
}
</script>
</head>
<body>
<script>
pedirNumeros();
</script>
</body>
</html>
NOTEPAD++
Actividad:
 Haga el ejercicio en Notepad++ y adjunte el resultado
Ejercicio 2:
1 <!DOCTYPE html>
2 <html lang="es">
3 <head>
4 <meta charset="UTF-8">
5 <title>Ejercicio 1</title>
6 <script>
7 function lanzar_alerta(){
8 alert("MANABI");
9
1
10 }
11 </script>
12
13 </head>
14 <body>
15 <p>
16 <span onclick="lanzar_alerta()">Haz Click Aquí</span>
17 </p>
18 </body>
19 </html>
Actividad:
Ejercicio 3
1 <!DOCTYPE html>
2 <html lang="es">
3 <head>
6 <script>
8 document.getElementById("lanzar_alerta").onclick=alert("ECUADOR");
9
10 }
11 </script>
12
13 </head>
14 <body>
15 <p>
16 <span id="lanzar_alerta" onclick="lanzar_alerta()">Haz Click Aquí</span>
17 </p>
18 </body>
19 </html>

Actividad:
Ejercicio 4
1
1 <!DOCTYPE html>
2 <html lang="es">
3 <head>
6 <script>
8 document.getElementById("lanzar_alerta").style.color="red";
9
10 }
11 </script>
12
13 </head>
14 <body>
15 <p>
17 </p>
18 </body>
19 </html>

Actividad:
Ejercicio 5:
1 <!DOCTYPE html>
2 <html lang="es">
3 <head>
6 <script>
8
9 /*rrggbb*/
10 document.getElementById("lanzar_alerta").style.color="#0000ff";
11
12 }
13 </script>
14
15 </head>
16 <body>
17 <p>
19 </p>
1
20 </body>
</html>
Actividad:
Ejercicio 6
1 <!DOCTYPE html>
2 <html lang="es">
3 <head>
6 <script>
7 function Calcular_Area(b,a){
8
9
10 alert( (b*a)/2);
11 }
12 </script>
13
14 </head>
15 <body>
16 <p>
17 <span onclick="Calcular_Area(3,4);">Haz Click Aquí</span>
18 </p>
19 </body>
</html>
Actividad:
Ejercicio 7
1 <script>
2 //Objetos en Javascript
3 //Objeto 1
4 let objeto1=new Object();
5 objeto1.nombre="Luis";
1
6 objeto1.apellidos="Fernando Aguas";
7 objeto1.edad=35;
8 function edad1(persona){
9 persona.edad=persona.edad+1;
10 }
11 edad1(objeto1);
12 document.write(objeto1.nombre);
13 document.write(" ");
14 document.write(objeto1.apellidos);
16 document.write(objeto1.edad);
17 document.write(".</hr></br>");
18
19 //Objeto 2
20 let objeto2={nombre:"Jesús", apellidos:"Fernández Toledo", edad:35};
21 function edad2(persona){
22 persona.edad=persona.edad+1;
23 }
24 edad2(objeto2);
25 document.write(objeto2.nombre);
27 document.write(objeto2.apellidos);
29 document.write(objeto2.edad);
30 document.write(".</hr>");
31
32 </script>

Actividad:
Ejercicio 8
1 <script>
2 //Clases en Javascript
3 class Persona{
4 constructor(nombre, apellidos, edad){
5 this.nombre=nombre;
6 this.apellidos=apellidos;
7 this.edad=edad;
8 }
9 Incrementa_edad(){
10 this.edad++;
11 }
1
12 Mostrar_nombre(){
13 return this.nombre;
14 }
15 Mostrar_apellidos(){
16 return this.apellidos;
17 }
18 Mostrar_edad(){
19 return this.edad;
20 }
21 };
22
23 let objeto=new Persona("Jesús","Fernández Toledo", 39);
24 objeto.Incrementa_edad();
25 document.write(objeto.Mostrar_nombre());
27 document.write(objeto.Mostrar_apellidos());
29 document.write(objeto.Mostrar_edad());
30 document.write("<hr><br>");
31 </script>

Actividad:
Ejercicio 9
1 <script>
2 let provincias=new Array("Albacete", "Ciudad Real", "Cuenca", "Guadalajara",
3 "Toledo");
4 for(i=0;i<provincias.length;i++){
5 document.write(+i+". " +provincias[i]+"</br>");
6 }
</script>
Actividad:
Ejercicio 10
2 <script>
1
3 let provincias=new Array("Albacete", "Ciudad Real", "Cuenca", "Guadalajara",
4 "Toledo");
5 provincias.push("Alicante","Castellón","Valencia"); //añade al array Alicante,
6 Castellón, Valencia
7 provincias.pop(); //Quita del array el último elemento, es decir, Valencia.
}
</script>

Actividad:
Ejercicio 11
2 <script>
3 let provincias=new Array("Albacete", "Valencia", "Guadalajara", "Toledo",
4 "Castellón", "Alicante");
5 provincias.splice(1,0,"Ciudad Real"); //Añadimos a la posición 1 del array
6 Ciudad Real.
7 provincias.splice(2,1,"Cuenca");//Reemplaza Valencia por Cuenca.
8 provincias.splice(5,2); //Elimina Castellón y Alicante.
}
</script>
Actividad:
6. BIBLIOGRAFIA:
Joyanes, L. and Zahonero, I., 2008. Estructura De Datos En Java. 1st ed. España: MacGraw Hill,
pp.62-67.
Fager, J., Pantoja, W., Villacrés, M., Páez, L., Ochoa, D., & Cuadros, E. (2014). Estructuras de
datos (1st ed., pp. 14). Comunidad Latinoamericana de Objetos de Aprendizaje (LACLO):
Iniciativa Latinoamericana de Libros de Texto abiertos (LATIn).
1
Big O notation. (2020). Retrieved 10 November 2020, from
https://en.wikipedia.org/wiki/Big_O_notation
Definición de algoritmo — Definicion.de. (2020). Retrieved 3 November 2020, from

https://definicion.de/algoritmo/
Recursion in Java - Javatpoint. (2020). Retrieved 9 November 2020, from

https://www.javatpoint.com/recursion-in-java
Tipos de Datos Primitivos en Java. (2020). Retrieved 27 October 2020, from

http://www.manualweb.net/java/tipos-datos-primitivos-java/
Diferencia entre tipos primitivos y tipos de referencia en Java. (2020). Retrieved 27 November
2020, from https://es.scribd.com/document/352376157/Diferencia-Entre-Tipos-
Primitivos-y-Tipos-de-Referencia-en-Java
Marco de colecciones de Java. (2020). Retrieved 10 November 2020, from

https://www.instintoprogramador.com.mx/2019/12/marco-de-colecciones-de-java.html
Understanding Big-O Notation With JavaScript, Retrieved 10 November 2020, from

https://dev.to/b0nbon1/understanding-big-o-notation-with-javascript-25mc
Understanding Big O Space Complexity, Retrieved 10 November 2020, from

https://medium.com/datadriveninvestor/understanding-big-o-space-complexity-
6826478e5a9f

LS3 Daw

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

LS3 Daw

Cargado por

Copyright:

Formatos disponibles

FACULTAD DE CIENCIAS INFORMÁTICAS

DESARROLLO DE APLICACIONES WEB

PROFESOR: PhD(c) Luis Fernando Aguas Bucheli

 Adquirir los conceptos básicos relacionados con Javascript

3. OBJETIVOS DE DESARROLLO SOSTENIBLE:

JavaScript es el lenguaje de programación encargado de dotar de mayor interactividad y

Se pedirán al usuario cinco números, supongamos que introduce 1, 3, 9, 10 y 7

A continuación, se mostrará el mensaje:

 Haga el ejercicio en Notepad++ y adjunte el resultado

 Haga el ejercicio en Notepad++ y adjunte el resultado

 Haga el ejercicio en Notepad++ y adjunte el resultado

 Haga el ejercicio en Notepad++ y adjunte el resultado

 Haga el ejercicio en Notepad++ y adjunte el resultado

 Haga el ejercicio en Notepad++ y adjunte el resultado

 Haga el ejercicio en Notepad++ y adjunte el resultado

 Haga el ejercicio en Notepad++ y adjunte el resultado

 Haga el ejercicio en Notepad++ y adjunte el resultado

 Haga el ejercicio en Notepad++ y adjunte el resultado

 Haga el ejercicio en Notepad++ y adjunte el resultado

Definición de algoritmo — Definicion.de. (2020). Retrieved 3 November 2020, from

Recursion in Java - Javatpoint. (2020). Retrieved 9 November 2020, from

Tipos de Datos Primitivos en Java. (2020). Retrieved 27 October 2020, from

Marco de colecciones de Java. (2020). Retrieved 10 November 2020, from

Understanding Big-O Notation With JavaScript, Retrieved 10 November 2020, from

Understanding Big O Space Complexity, Retrieved 10 November 2020, from

También podría gustarte