Está en la página 1de 47

UNIDAD 1

SD1. Paradigmas de Programación


SD2. Programación Orientada a Objetos
SD3. Funciones e introducción a arreglos.

UNIDAD 2
SD4. Arreglos en JavaScript
SD5. Acciones en Arreglos
MÓDULO I
SD6. Búsqueda en Arreglos
SD7. Ordenación en Arreglos

SUBMÓDULO 3 APLICA ESTRUCTURAS DE DATOS


CON UN
UNIDAD 3 LENGUAJE DE PROGRAMACIÓN
SD8. Vectores en JavaScript
SD9. Matrices en JavaScript
SD10. Operaciones con matrices.

POO JAVASCRIPT

1
Contenido
UNIDAD 1 POO ................................................................................................................................ 5
SD1. PARADIGMAS DE PROGRAMACIÓN ........................................................................... 5
Lógica de programación – Pensar como programador ............................................... 5
Paradigmas de Programación ............................................................................................ 6
Actividad Investigación ........................................................................................................ 9
SD2. PROGRAMACIÓN ORIENTADA A OBJETOS POO .................................................. 10
¿Qué es JavaScript? ........................................................................................................... 10
Estructura de una página y ubicación de los scripts ................................................. 11
Primer programa en JavaScript........................................................................................ 11
Visualización cómo página web ....................................................................................... 12
Mostrar Texto en pantalla .................................................................................................. 12
Etiquetas HTML..................................................................................................................... 12
Actividad datos ..................................................................................................................... 13
Código con variables en JavaScript ............................................................................... 13
Actividad Área ....................................................................................................................... 15
Actividad Cierre Operaciones ........................................................................................... 15
SD3. FUNCIONES E INTRODUCCION A LOS ARREGLOS ............................................. 16
¿Qué son las funciones en JavaScript ? ....................................................................... 16
Estructura de una función ................................................................................................. 16
Definición de una función .................................................................................................. 16
Llamar a una función........................................................................................................... 17
Ejemplo Función................................................................................................................... 17
Argumentos ........................................................................................................................... 18
Actividad calificación .......................................................................................................... 20
Funciones pidiendo datos ................................................................................................. 20
Funciones anónimas ........................................................................................................... 23
Autoevaluación Unidad 1 ......................................................................................................... 24
UNIDAD 2 Arreglos ...................................................................................................................... 25
SD4. ARREGLOS EN JAVASCRIPT ...................................................................................... 25
¿Que es un arreglo? ............................................................................................................ 25
Definiendo Arreglos Simples ............................................................................................ 25
Imprimir elementos según posición del array .............................................................. 28

2
Actividad 2 varios................................................................................................................. 29
Actividad 3 calificaciones .................................................................................................. 29
Actividad 4 edad ................................................................................................................... 29
SD5. ACCIONES EN ARREGLOS .......................................................................................... 30
1. Mostrar (por índice) el primer y último elemento del Array.................................. 30
2. Añadir elementos al final y al inicio del arreglo ...................................................... 30
3. Eliminar elementos al final y al inicio ......................................................................... 31
4. Eliminar varios elementos con el índice o posición............................................... 31
5. Encontrar el índice de un elemento del array .......................................................... 32
Actividad acciones array .................................................................................................... 32
6. Imprimir posiciones del array usando el bucle for ................................................. 32
7. Imprimir elementos del array usando el bucle forEach......................................... 33
8. Concatenar arrays ........................................................................................................... 33
SD6. BÚSQUEDA EN ARREGLOS ........................................................................................ 34
Búsqueda lineal .................................................................................................................... 34
Ejemplo ................................................................................................................................... 34
Preguntando el elemento a buscar.................................................................................. 35
Actividad Búsqueda ............................................................................................................ 35
SD7. ORDENACION EN ARREGLOS .................................................................................... 35
1. Método de Inserción Directa ......................................................................................... 35
2. Método De Selección ...................................................................................................... 36
3. Método Burbuja ................................................................................................................ 36
Autoevaluación Unidad 2 ......................................................................................................... 36
UNIDAD 3 Matrices....................................................................................................................... 37
SD8. VECTORES EN JAVASCRIPT ...................................................................................... 37
Ejemplo vector ...................................................................................................................... 39
SD9. MATRICES EN JAVASCRIPT ........................................................................................ 40
Ejemplo matriz ...................................................................................................................... 41
Ejemplo matriz ...................................................................................................................... 42
Otra forma de crear una matriz rápido ........................................................................... 43
Actividad matriz oración .................................................................................................... 44
Ejemplo calificación ............................................................................................................ 44
Actividad promedio final .................................................................................................... 45

3
Actividad final ....................................................................................................................... 45
SD10. OPERACIONES CON MATRICES.............................................................................. 46
Suma de matrices en JavaScript...................................................................................... 46
Autoevaluación Unidad 3 ......................................................................................................... 47

4
UNIDAD 1 POO
SD1. PARADIGMAS DE PROGRAMACIÓN

Manual de JavaScript pag 4


Lógica de programación – Pensar como programador

1. Entender

Entender exactamente lo que se está preguntando. La mayoría de los problemas


son difíciles por qué no los comprendemos (de ahí que este sea el primer paso).
¿Cómo saber cuándo entiendes un problema? Cuando puedes explicarlo de
manera sencilla

2. Planear

No te metas directamente a resolverlo sin tener un plan. Planifica tu solución, y


escríbela paso a paso.
En programación, significa no generar código inmediatamente. Date tiempo para
analizar el problema y procesar la información en tu cerebro

3. Dividir (o descomponer)

No intentes resolver el problema completo. En vez de eso, descompon el


problema en sub-problemas. Estos sub-problemas son más fáciles de resolver.
Luego resuelvelos uno por uno, desde el más simple al más complejo.
Comenzando por el que conoces su respuesta, o se acerca a la respuesta
Luego por los sub-problemas que no dependen de otros para ser resueltos

4.Después solo practica, practica y practica.

5
Paradigmas de Programación

Un paradigma de programación es una manera o estilo de programación de


software. Se trata de un conjunto de métodos sistemáticos aplicables en
todos los niveles del diseño de programas para resolver problemas
computacionales.
Programar es mucho más complejo que definir una serie de instrucciones para ser
ejecutadas por un ordenador. La programación es tan diversa como no se lo
pueda imaginar. A esta diversidad en el mundo de la programación se le conoce
como paradigmas de programación o estilos de programación.
Las características de un lenguaje de programación dictaminan el paradigma al
cual pertenece, mientras algunos lenguajes pertenecen a un solo paradigma hay
otros que pertenecen a múltiples

Declarativa Funcional
¿Que hacer para resolver
el problema? Lógica
Paradigmas de
Programación
Estructurada
Imperativa
¿Cömo resolver el
problema? Orientada a
Objetos

Imperativa Vs Declarativa

En la programación imperativa, un programa se describe en términos de


instrucciones, condiciones y pasos que modifican el estado de un programa al
permitir la mutación de variables, todo esto con el objetivo de llegar a un resultado.
En contraparte, en la programación declarativa un programa se describe en
términos de proposiciones y afirmaciones que son declaradas para describir el
problema, sin especificar los pasos para resolverlo; en este tipo de programas, el
estado no puede ser modificado ya que todos los tipos de datos son inmutables.

6
Programación funcional

En este paradigma se trabaja principalmente con funciones, se evitan los datos


mutables, así como el hecho de compartir estados entre funciones.
Con este paradigma las funciones serán tratadas como ciudadanos de primera
clase. Las funciones podrán ser asignadas a variables además podrán ser
utilizadas como entrada y salida de otras funciones.

Programación lógica

Paradigma de programación basado en la lógica de primer orden. La


programación lógica estudia el uso de la lógica para el planteamiento de
problemas y el control sobre las reglas de inferencia para alcanzar la solución
automática.
En la Programación Lógica, se trabaja en una forma descriptiva, estableciendo
relaciones entre entidades, indicando no como, sino que hacer.

Programación estructurada

La programación estructurada es una teoría de programación que consiste en


construir programas de fácil comprensión, es especialmente útil, cuando se
necesitan realizar correcciones o modificaciones después de haber concluido un
programa o aplicación. • Al utilizar la programación estructurada, es mucho más
sencillo entender la codificación del programa, que se habrá hecho en diferentes
secciones.

7
Programación orientada a objetos

El paradigma de la programación orientada a objetos es la implementación del


pensamiento orientado a objetos en la programación.

POO nos dice:

Pensar todo en términos de objetos.


• Representar los objetos de la forma más cercana a cómo expresamos las
cosas en la vida real.
• Dar prioridad a los objetos y no a la funcionalidad.
• Pensar en el propósito general del programa como un todo antes de
subdividirlo.
• Los programas se definen en términos de objetos, propiedades, métodos, y
la interacción (comunicación) entre objetos.

Ejemplos Representación de Objetos

8
Actividad Investigación

Investiga en internet lo siguiente:


1.Que son los lenguajes de programación?
2.Ejemplos de lenguaje de programación para cada paradigma de programación
Realizarlo en su libreta o en algún software, imprimirlo y pegarlo en su libreta.

9
SD2. PROGRAMACIÓN ORIENTADA A
OBJETOS POO

¿Qué es JavaScript?

JS para abreviar, es un lenguaje de programación dinámico que, cuando se aplica


a un documento HTML, puede proporcionar interactividad dinámica en páginas
web. Fue inventado por Brendan Eich.

JavaScript es un lenguaje de programación o de secuencias de comandos que te


permite implementar funciones complejas en páginas web.

Creando código

Para crear una página HTML debemos utilizar cualquier editor de texto que
tengamos a mano, como Bloc de Notas, Visual Studio Code y un navegador.

Descargar en PC ó laptop el software Visual Studio Code, en el celular descargar


TurboEditor.

JavaScript no es más que líneas de texto, que pueden ser escritas con cualquier
editor, como el sencillo Bloc de notas de Windows.

Este código es insertado dentro del código HTML o código fuente de las páginas
web, encerrado entre etiquetas que le indican al navegador que son instrucciones
que debe ejecutar.

Para poder utilizar código JavaScript deberemos de ayudarnos del elemento


script.
Dentro de esta etiqueta es donde pondremos nuestro código JavaScript
Encerrado entre dos etiquetas script.

<script>
Código
</script>

Cada línea de código en JavaScript se acaba con un punto y coma (;)

10
Estructura de una página y ubicación de los scripts

Donde se inserta el código JavaScript en las páginas web


Hay varias formas de insertar los códigos JavaScript en las páginas web.
Podemos agregarlo en el área del HEAD de la página o encabezado o en el área
del BODY o cuerpo.

El navegador al abrir una página lee primero todas las instrucciones escritas en el
área del HEAD, nada escrito aquí se visualiza; después lee el contenido en el área
del BODY, texto, imágenes y scripts.

Primer programa en JavaScript

Crearemos una página HTML en cualquier editor de texto, ya sea Bloc de Notas,
Visual Studio Code o en Turbo Editor.

<html>
<head><title>Mi primer pagina web</title></head>
<body>
<h1>Mi primer pagina web</h1>
</body>
</html>

11
Importante: Una vez terminado guardar con extensión .html para que se pueda
abrir en el navegador.

Visualización cómo página web

Para abrirlo y visualizarlo como página web, ir al archivo y dar doble clic o abrir
con Navegador

Mostrar Texto en pantalla

Para mostrar texto en pantalla con JavaScript habrá que utilizar el objeto
document y el método .write(“texto”)

<html>
<head><title>Mi primer codigo JavaScript</title></head>
<body>
<h1>Mi primer código JavaScript</h1>
<script>
document.write("Hola Mundo");
</script>
</body>
</html>

Etiquetas HTML

Las etiquetas HTML son pequeños bloques de código, que indican al navegador
como debe interpretar el contenido recogido entre dichas etiquetas.

Las etiquetas HTML comienzan siempre con el símbolo «<» y finalizan con el
símbolo «>». Entre medias de estos dos símbolos irá el nombre de la etiqueta

Todas las etiquetas HTML están compuestas por una etiqueta de apertura, y
una etiqueta de cierre.
Las etiquetas de cierre se construyen con una barra / justo antes de la propia
etiqueta y después del símbolo <

Etiquetas Ejemplos

<html> </html> Representa la raíz de un documento HTML.

<head> </head> Representa una colección de metadatos acerca del documento.

12
<body> </body> Indica la parte del cuerpo del contenido de un documento HTML.
Este contenido dentro de estas etiquetas será el que se muestre en la web.

<title> </title> Etiqueta usada para definir el título de la página web que aparecerá
en la pestaña del navegador. Esta etiqueta solo se coloca dentro de la etiqueta del

<h1> </h1> . . . <h6> </h6> Etiquetas de título, ya que son usadas para jerarquizar
el contenido de la web.

<p> </p> Etiqueta usada para escribir párrafos de texto.

<strong> </strong> Etiqueta para poner el texto en negritas

<br> Etiqueta utilizada para crear un salto de línea

<img> Etiqueta para añadir imágenes a la página web.

<font> </font> Indica el tamaño, color o fuente del texto que contiene, con sus
atributos size, color y fase respectivamente.

<script> </script> Indica que escribiremos código en JavaScript.

Actividad datos

Realiza el código de una página web en algún editor de texto, donde aparezcan en
pantalla tus datos personales:
Nombre, edad, grupo, gustos (música, comida, mascotas, etc)

Utiliza etiquetas de título (h1…h6)


Utiliza el document.write
Utiliza la etiqueta <br> para que aparezcan tus datos hacia abajo.
Imprime el código y pégalo en tu libreta o escríbelo en tu libreta
Imprime la foto de la pantalla del navegador (Cómo se ve en la página web)

Código con variables en JavaScript

Una variable es un nombre para representar un valor de un dato.


El propósito de una variable es guardar información que pueda ser utilizada más
tarde.
Debemos utilizar variables como nombres simbólicos para los valores.

13
Los nombres de las variables, se ajustan a ciertas reglas:
• Una variable de JavaScript debe comenzar con una letra, un guión bajo( _ ),
o un signo de dólar ($). Los siguientes caracteres también pueden ser
dígitos (0 – 9).
• JavaScript distingue entre mayúsculas y minúsculas, las letras incluyen los
caracteres “A” a “Z” (mayúsculas) así como “a” a “z” (minúsculas).

Declaración de variables

Para declarar una variable utilizamos la palabra var


Podemos inicializar el valor de la variable en la misma línea que la declaramos.

Ejemplo 1 Variables

<html lang="en">
<head>
<title>Variables en JavaScript</title>
</head>
<body bgcolor="lightsteelblue">
<script>
var edad=25;
var edadbebe=2;
var ella='La madre';
var el='El bebé';
var joven;
document.write(ella + " tiene " + edad + " años", "<br>");
document.write(el + " tiene " + edadbebe + " años");
</script>
</body>
</html>

Ejemplo 2 Suma dos números

Página web que muestra dos números, realiza la suma de los mismos y muestra
su resultado.

<html lang="en">
<head>
<title>Suma de dos numeros</title>
</head>

14
<body bgcolor="pink">
<h3>Suma de dos numeros</h3>
<script>
var a=2;
var b=3;
var suma;
suma=a+b;
document.write("El valor del primer numero es: " + a, "<br>");
document.write("El valor del segundo numero es: " + b,"<br>");
document.write("<br> El resultado de la suma es: " + suma,
"<br><br>");
document.write(a);
</script>
</body>
</html>

Actividad Área

Realice el código de una página web para obtener el área de un triángulo


Utilice el document.write para que aparezca el resultado en pantalla.

Actividad Cierre Operaciones

Realice el código de una página web para lo siguiente:


Dados dos datos de números, realice la suma, resta, multiplicación y división de
esos números.

• Utilice variables
• Utilice el document.write para que aparezcan en pantalla los números y los
resultados de cada operación.
• También que aparezca su nombre completo y grupo.

Imprime el código y pégalo en tu libreta o escríbelo en tu libreta


Imprime la foto de la pantalla del navegador (Cómo se ve en la página web)

15
SD3. FUNCIONES E INTRODUCCION A LOS
ARREGLOS

¿Qué son las funciones en JavaScript ?

Las funciones son la base de la modularidad en JavaScript.


Una función es una porción de código reusable que puede ser llamada en
cualquier momento desde nuestro programa. De esta manera se evita la
necesidad de estar escribiendo el mismo código una y otra vez.

Estructura de una función

Las funciones en JavaScript se definen mediante la palabra reservada function


seguida del nombre de la función.

function nombre_funcion ( parámetros )


{
instrucciones;
}

El nombre de la función se utiliza para llamar a esa función cuando sea necesario.

Después del nombre de la función, se incluyen dos paréntesis ( ) donde


indicaremos los parámetros de la Función.

Por último los símbolos { y } se utilizan para encerrar todas las instrucciones que
pertenecen a la función.

Las variables que necesitan las funciones se llaman argumentos. Antes de que
pueda utilizarlos, la función debe indicar cuántos argumentos necesita y cuál es el
nombre de cada argumento.

Además, al llamar a la función, se deben incluir los valores (o expresiones) que se


le van a pasar a la función. Los argumentos se indican dentro de los paréntesis
que van detrás del nombre de la función y se separan con una coma.

Definición de una función

En JavaScript existen dos maneras de definir una función las cuales pueden ser
mediante: declaración de función o una expresión de función.

16
Declaración de Función

Se le asigna un nombre a la función. Dicha función se debe cargar en el ámbito de


la aplicación antes de la ejecución del código

function Saludar ( )
{
alert (“Hola a todos”);
}

Expresión de Función

Aquí se crea una función anónima y se le asigna a una variable. Esta función no
se encuentra lista hasta que esa línea en particular sea evaluada durante la
ejecución del código.

var Cantar = function ( )


{
alert (“Yo canto muy bien”);
}

Llamar a una función

La llama a una función se realiza simplemente indicando el nombre, incluyendo los


paréntesis del final y el carácter punto y coma ( ; ) para terminar la instrucción.

Ejemplo: Saludar( );

Ejemplo Función
Función que realiza la suma de dos números.

<html>
<head>
<title>
Usando funciones
</title>
</head>
<body>
<h2>Funcion de suma</h2>
<script>
function sumar(sum1,sum2)
{
var resultado;
var sum1=2;
var sum2=3;

17
resultado=sum1+sum2;
document.write("El primer numero es: "+sum1, "<br>");
document.write("El segundo numero es: "+sum2, "<br>");
document.write("La suma de los dos numeros es: "+resultado);
}
document.write ("Hola Mundo", "<br>");
document.write ("Soy Angie<br><br>");
document.write ("Soy programadora", "<br><br><br>");
sumar();
</script>
</body>
</html>

Navegador

Argumentos

Cuando se necesitan pasar datos a función se utilizan los argumentos.


Al llamar a una función se deben de incluir los valores (o expresiones) que se le
van a pasar a la función. Los argumentos se indican dentro de los paréntesis que
van después del nombre de la función y se separan con una coma (,)

Ejemplo argumentos
function sumar(num1,num2)
{
var resultado;
resultado=num1+num2;
document.write("La suma de los dos numeros es: "+resultado);
}
var num1;
var num2;
sumar(3,8); Argumentos

18
• Casi siempre se utilizan variables para pasar datos a una función, pero se
pueden utilizar directamente el valor de esas variables
Sumar(3,8);

• El orden de los argumentos es fundamental ya que el primer dato que se


indica en la llamada será el primer valor que espera la función, el segundo
dato indicado en la llamada, es el segundo valor que espera la función y asi
sucesivamente.

• Se pueden utilizar un número ilimitado de argumentos, aunque si su


número es muy grande, se complica en exceso la llamada a la función.

Actividad suma

Realiza una página web utilizando la función de suma.


Anotar todas las etiquetas para hacer una página web.
Dentro del script va la función
Cambiar las variables del ejemplo.

Ejemplo área triángulo


Página web que realice el área de un triángulo utilizando una función.

function area()
{
var area_triangulo;
area_triangulo=(base*altura)/2;
document.write("El valor de la base es: "+base, “<br>”);
document.write("El valor de la altura es: "+altura, “<br>”);
document.write("El área del triangulo es: "+area_triangulo,“<br>”);
}
var base;
var altura;
area(3,6);
area(2,7);
area(5,10);

Se puede llamar a la función varias veces, poniendo otros argumentos.

Actividad área

Realizar ejemplo del área del triangulo en el software.


Agregar pantalla del navegador.

19
Importante: No es obligatorio que coincida el nombre de los argumentos que
utiliza la función y el nombre de los argumentos que se le pasan.

function sumar(num1,num2)
{
var resultado;
resultado=num1+num2;
document.write("La suma de los dos numeros es: "+resultado);
}
var a=3;
var b=5;
sumar(a,b);

Actividad conversión

Realiza una página web que realice la conversión de kgs a grs utilizando la
siguiente formula: grs=kg*1000

-Que aparezca en pantalla los gramos y kilogramos


-Mande llamar la función varias veces
-Al llamar a la función ponga argumentos para la función.

Actividad calificación

Realiza una página web que realice el cálculo de la calificación final del alumno
utilizando una función, considerando el valor de tres unidades para una materia.
Debe de aparecer en pantalla lo siguiente:
Nombre del alumno, grupo, materia, U1, U2, U3, Calificación final

-Utilice el document.write
-Utilice variables
-Utilice la etiqueta <br>
-Cree una función

Funciones pidiendo datos


-Función prompt
Es usado para introducir datos por parte del usuario.

-Método parse
Permite convertir caracteres numéricos que considera cadena de caracteres a
valores numéricos.
• parseInt: números enteros
• parseFloat: números flotantes o decimales
• parseDouble: números decimal double.

20
Ejemplo prompt

Código con dos variables donde se piden los números al usuario con la función
prompt.

<body bgcolor="lightsteelblue">
<h3>Se piden dos numeros y se realiza la suma</h3>
<h3>Y despliega los numeros pedidos y el resultado de la suma</h3>
<script>
document.write("Vamos a comenzar", "<br><br>");
function Suma()
{
var suma;
a=prompt("Dame el primer numero");
b=prompt("Dame el segundo numero");
a=parseInt(a);
b=parseInt(b);
suma=(a+b);
document.write("El primer numero es: "+a, "<br");
document.write("El segundo numero es: "+b, "<br>");
document.write("El resultado de la suma es: "+suma);
}
var a;
var b;
Suma();
</script>
</body>

Navegador

21
Creación botón

Se crea un botón para pedir los números y realizar el cálculo.


<script>
document.write("Da clic en el botón para realizar el cálculo
<br><br><br>");
function Suma()
{
var suma;
a=prompt("Dame el primer numero");
b=prompt("Dame el segundo numero");
a=parseInt(a);
b=parseInt(b);
suma=(a+b);
document.write("El primer numero es: "+a, "<br");
document.write("El segundo numero es: "+b, "<br>");
document.write("El resultado de la suma es: "+suma,
"<br><br>");
}
var a;
var b;
</script>
<button type="button" onclick="Suma()">Calcular
</button>

22
Funciones anónimas

La función anónima es una función que no tiene ningún nombre asociado.


Normalmente usamos la palabra clave de function antes del nombre de la función
para definir una función en JavaScript, sin embargo, en funciones anónimas en
JavaScript, usamos solo la palabra clave de function sin el nombre de la función.
Una función anónima no es accesible después de su creación inicial, solo se
puede acceder a ella mediante una variable en la que está almacenada como
una función como un valor. Una función anónima también puede tener varios
argumentos, pero solo una expresión.

Sintaxis
function()
{
// instrucciones
}

Ejemplo 1
En este ejemplo, definimos una función anónima que imprime un mensaje en la
pantalla. Luego, la función se almacena en la variable greet . Podemos llamar a la
función invocando greet().

<script>
var greet = function ()
{
document.write(“Terminando Unidad 1");
};
greet();
</script>

Producción:
Terminando Unidad 1

Ejemplo 2
En este ejemplo, pasamos argumentos a la función anónima.

<script>
var greet = function (a)
{
document.write(“Terminando", a);
};
greet(“Unidad 1”);
</script>

23
Funciones de flecha

Existe una forma nueva y más corta de declarar una función anónima, que se
conoce como funciones de flecha. En una función de flecha, todo sigue igual,
excepto que aquí no necesitamos la palabra clave de function también. Aquí,
definimos la función con solo paréntesis y luego '=>' seguido del cuerpo de la
función.

Ejemplo
<script>
var greet = () =>
{
document.write(“Terminando la Unidad 1, ya casi”);
}
greet();
</script>

Autoevaluación Unidad 1

Criterios Si No
1. Comprende lo que significa la lógica de programación

2. Reconoce los tipos de paradigmas de programación


3. Realiza la estructura de una página web y ubicación de los scripts
4. Identifica que son las etiquetas HTML y reconoce algunas de ellas.
5. Realiza primer página web en el editor
6. Reconoce que es una variable y la utiliza en el código de una página web.

7. Reconoce que es una función en JavaScript, su estructura, los argumentos y


la llamada.

Nombre:

Fecha:

24
UNIDAD 2 Arreglos
SD4. ARREGLOS EN JAVASCRIPT

¿Que es un arreglo?

Son un conjunto de datos ordenados por posiciones y todos asociados en una sola
variable. Los datos pueden ser de cualquier tipo de dato.

Podremos acceder a estos distintos datos de manera independiente o


agrupándolos.

La posición de un elemento en el arreglo es conocido como índice. En JavaScript,


el índice del arreglo empieza con 0, e incrementa uno a uno con cada elemento.

El número de elementos en el arreglo determina su longitud.

Los arrays simples, también llamados "tablas" o "matrices", son el método más
común y simple de almacenar datos.

Definiendo Arreglos Simples

Método 1

Definiendo primero, poblando después.


Número de elementos del arreglo
Nombre del arreglo
var tabla = new Array(7); Definiendo arreglo
Dato en la posición 0=lunes
tabla[0] = "lunes";
tabla[1] = "martes";
tabla[2] = "miércoles";
tabla[3] = "jueves"; Poblando arreglo
tabla[4] = "viernes";
tabla[5] = "sábado";
tabla[6] = "domingo";

Índice o posiciones casillas[ ]

25
Ejemplo 1
Array de 4 elementos con datos numéricos

var numeros = new Array(4);


numeros[0]=230;
numeros[1]=250;
numeros[2]=360;
numeros[3]=120;

Los arrays en Javascript empiezan siempre en la posición 0, así que un array que
tenga por ejemplo 7 posiciones, tendrá casillas de la 0 a la 6.

Ejemplo 2
Arreglo con 3 elementos de tipo texto y muestra el arreglo en pantalla con el
document.write

<body>
<h1>Array fin de semana</h1>
<script>
var dias=new Array(3);
dias[0]="viernes";
dias[1]="sabado";
dias[2]="domingo";
document.write(dias, "<br>");
</script>
</body>

Ejemplo 3
Arreglo con varios elementos de diferentes tipos de datos.
Muestra el arreglo en pantalla con el document.write

<script>
var datos=new Array(10);
dias[0]=“lunes";
dias[1]=“martes"; Actividad 1 Array
dias[2]=“miercoles";
dias[3]=10; Realizar código en el editor
dias[4]=25; de texto y ver resultado en el
dias[6]=0.25; navegador
dias[9]=true;
document.write(datos, "<br>");
</script>

26
Método 2

Definiendo y poblando simultáneamente


Declaración e inicialización resumida de Arrays.

En Javascript tenemos a nuestra disposición una manera resumida de declarar un


array y cargar valores en un mismo paso. Fijémonos en el código siguiente:

Ejemplo 1
var tabla = new Array(25,35,12,34);

Ejemplo 2
var nombres = [“Ana”, “Pablo”, “Mario”];

Ejemplo 3
var arrayRapido = [12,45,“Hola"];

Como se puede ver, estamos indicando en los corchetes varios valores separados
por comas.
Esto es lo mismo que haber declarado el array con la función Array() y luego
haberle cargado los valores uno a uno.

Preguntas
-¿Cuál es el nombre del array?
-¿Cuántos elementos tiene?
-Datos en la posición
-Tipos de datos en el array

Actividad método 2

Realizar el array con el método 1 y copiar el Array con el método 2

Propiedad .length
Permite conocer la longitud del array, poniendo el nombre del arreglo.length

Ejemplo de arreglo rápido y propiedad .length


Arreglo con 4 elementos (longitud), o sea 3 índices de posiciones y los muestra en
pantalla. Usando la propiedad.length para mostrar la longitud del arreglo.

27
<body>
<h1>Array Rapido y length</h1>
<script>
var ArrayInicializado=["Juan","Pedro","Julian","Gustavo"];
document.write(ArrayInicializado, "<br>");
document.write("Longitud del array: ", ArrayInicializado.length,
"<br><br>");
</script>
</body>

Imprimir elementos según posición del array

Para imprimir o mostrar texto en pantalla usamos el document.write


Para mostrar todo el array en pantalla solo hay que usar el document.write y
dentro del paréntesis el nombre del arreglo.

Ejemplo 1 imprimir

var arrayImprimir = [12,20,33,45];


document.write(arrayImprimir);

Si queremos que los datos de array se muestren hacia abajo podemos hacerlo
poniendo la casilla con la posición de cada elemento y usando la etiqueta <br>

Ejemplo 2 imprimir posiciones

<script>
var ArrayInicializado=["Juan","Pedro","Julian","Gustavo"];
document.write(ArrayInicializado[0], "<br>");
document.write(ArrayInicializado[1], "<br>");
document.write(ArrayInicializado[2], "<br>");
document.write(ArrayInicializado[3], "<br>");
</script>

28
Actividad 2 varios

Realiza los siguientes ejercicios.

1. Crea un array con el método 1 de los números del 1 al 10 y los muestra en


pantalla.
2. Crea un array con el método 2 de un listado de frutas y muestre en pantalla
todos los elementos.
3. Crea un array con cualquier método de un listado de animales domésticos
(5) y los muestre en pantalla hacia abajo uno por uno.
4. Crea un array con el método 2 de un listado de productos de supermercado
con sus precios y los muestre en pantalla de 2 en 2, o sea el producto y
precio.

Actividad 3 calificaciones

Crea un array con el método 1 o con el método 2, que contenga tu nombre


completo, las materias que estas cursando y la calificación que obtuviste en la
unidad 1 de cada materia. Muestre en pantalla tu nombre completo en una línea y
en cada línea siguiente la materia y la calificación.

Actividad 4 edad

Crea un array con el método 1, de un listado con los nombres de personas y su


edad(5) en diferentes índices y muestre en pantalla el nombre y la edad hacia
abajo.

29
SD5. ACCIONES EN ARREGLOS
1. Mostrar (por índice) el primer y último elemento del Array

Creamos el arreglo rápido con 5 elementos

var frutas = [“Manzana”, “Banana”, “Fresa”, ”Sandia”, “Mango”];

Se declara una variable que contendrá el dato del primer elemento, o sea la
posición 0, se pone igual y el nombre del arreglo y la casilla de la posición 0

var primero = frutas[0];


// Manzana

Se declara una variable que contendrá el dato del último elemento, por eso se
pone el nombre del arreglo y entre corchetes el nombre del arreglo.length -1

var ultimo = frutas[frutas.length - 1];


// Mango

Si queremos imprimir los valores del primero y último elemento del arreglo

document.write(primero); o document.write(frutas[0]);
document.write(ultimo); o document.write(frutas.length-1);

2. Añadir elementos al final y al inicio del arreglo

Añadir elemento al final de un Array

-Se declara una variable nuevaLongitud


-Se iguala la variable con el nombre del arreglo y con la propiedad .push
-Entre paréntesis y entre comillas irá el nuevo elemento del arreglo que se
posicionará al final del arreglo.

var nuevaLongitud = frutas.push(“Naranja”);


// [“Manzana”, “Banana”, “Fresa”, ”Sandia”, “Mango”, “Naranja”];

Añadir elemento al inicio de un Array

-Se declara una variable inicio


-Se iguala la variable con el nombre del arreglo y con la propiedad .unshift
-Entre paréntesis y entre comillas irá el nuevo elemento del arreglo que se
posicionará al inicio del arreglo.

30
var inicio = frutas.unshift(“Kiwi”);
// [“Kiwi”, “Manzana”, “Banana”, “Fresa”, ”Sandia”, “Mango”, “Naranja”];

3. Eliminar elementos al final y al inicio

Eliminar elemento del final de un Array

-Se declara una variable ultimo


-Se iguala la variable con el nombre del arreglo y con la propiedad .pop seguido de
paréntesis y ; al final, con esto se elimina el último elemento del array.

var ultimo = frutas.pop();


// elimina Naranja del final
//[“Kiwi”, “Manzana”, “Banana”, “Fresa”, ”Sandia”, “Mango”];

Eliminar elemento del inicio de un Array

-Se declara una variable primero


-Se iguala la variable con el nombre del arreglo y con la propiedad .shift y con esto
se elimina el primer elemento del array.

var primero = frutas.shift();


// elimina Kiwi del inicio
//[ “Manzana”, “Banana”, “Fresa”, ”Sandia”, “Mango”];

4. Eliminar varios elementos con el índice o posición


var vegetales = [“Repollo”, “Calabacita”, “Rabano”, “Zanahoria”];

-n define la cantidad de elementos a eliminar,


-pos se refiere a la posición en la cual va a empezar a eliminar
-Se declara una variable elementosEliminados
-Se iguala al nombre del arreglo con la propiedad .splice y entre paréntesis, las
variables que contendrán los valores de la posición y de la cantidad de elementos
que se eliminarán.

var pos = 1, n = 2;
var elementosEliminados = vegetales.splice(pos, n);
document.write(vegetales);
// ["Repollo", "Zanahoria"]

document.write(elementosEliminados);
// [“Calabacita", "Rabano"]

31
5. Encontrar el índice de un elemento del array

-Declaramos una variable ind que guardará el índice o posición del elemento
-Ponemos el nombre del arreglo y la propiedad .indexOf para que nos indique el
índice o posición
-Y entre paréntesis el dato que buscará en el arreglo su índice o posición

var ind = vegetales.indexOf(“Zanahoria”);


// 3

Actividad acciones array

Crea un arreglo con 8 elementos

-Muestra el arreglo en pantalla y su longitud


-Elimina el último elemento del arreglo
-Agrega dos elementos al inicio
-Muestra el arreglo modificado en pantalla y su longitud
-Muestra en pantalla el primer y último elemento
-Muestra el arreglo en pantalla de dos en dos
-Muestra tu nombre completo en pantalla.

6. Imprimir posiciones del array usando el bucle for

El contenido de un array se imprimirá en pantalla con el bucle for, aparecerá la


posición en que se encuentra cada elemento del array.

En general, el recorrido por arrays para imprimir sus posiciones, o cualquier otra
cosa, se hace utilizando bucles. En este caso utilizamos un bucle FOR que va
desde el 0 hasta el 2.

-Creamos un array con tres elementos.


-lntroducimos un valor en cada una de las posiciones del array
-Creamos un bucle for siguiendo su estructura
-Dentro del bucle for utilizamos un contador i, lo igualamos a cero, ponemos la
condición y luego lo incrementamos.
-Dentro de las llaves imprimimos con el document.write la posición del elemento
del array (utilizando el contador) y poniendo el nombre del array y entre corchetes
va el contador, para que se imprima cada elemento del arreglo.

32
Ejemplo impresión con for
var miArray = new Array(3);
miArray[0] = 155;
miArray[1] = 4;
miArray[2] = 499;
for (i=0;i<3;i++)
{
document.write("Posición " + i + " del array: " + miArray[i]);
document.write("<br>");
}

7. Imprimir elementos del array usando el bucle forEach

-Creamos un arreglo frutas


-Creamos una función funcionfrutas
-Dentro de los paréntesis de la función va una variable fruit, la cual guardará
cada elemento del arreglo.
-Dentro de la función { va el document.write para que me imprima el elemento del
arreglo
-Fuera de la función } va el nombre del arreglo con la propiedad .forEach y entre
paréntesis el nombre de la función.

Ejemplo impresión con forEach

var frutas=["Manzana", "Fresa", "Frambuesa", "Pera"];


var funcionfrutas=function(fruit)
{
document.write("Frutas: ",fruit,"<br>");
}
frutas.forEach(funcionfrutas);

8. Concatenar arrays

La propiedad .concat() concatena arrays y nos devuelve un array con todos los
elementos.
-Creamos un arreglo a
-Creamos otro arreglo b y ponemos dentro de ese arreglo, el arreglo anterior con
la propiedad .concat y entre paréntesis y entre corchetes se ponen los elementos
del nuevo arreglo
-Al final ;
var a = [1,2];
var b = a.concat([3,4,5,6]); // b vale [1,2,3,4,5,6]

33
Actividad concatena

Crea un arreglo y concatena otro arreglo.


Imprime el arreglo en pantalla usando el bucle for o el forEach

SD6. BÚSQUEDA EN ARREGLOS

La búsqueda consiste en buscar un elemento determinado dentro de una


colección de N datos, Esto significa, que, dado un argumento de búsqueda, X, se
trata de encontrar el índice i del vector A para el cual se verifica A(i)=X.

Búsqueda lineal

Es la solución más obvia y que se aplica cuando no hay ninguna información


adicional acerca de los datos buscados. Consiste en recorrer secuencialmente el
arreglo hasta encontrar el dato buscado. Se debe comprobar después si la
operación tuvo éxito, o simplemente se llegó al final.

Para comprobar si existe un valor en un array lo recorreremos con un bucle for(),


tal y como hemos visto anteriormente.

Ejemplo
Se comprueba si el nombre 'PEPE' existe en el array 'aDias', quedando la variable
'encontrado' con un valor de '-1' si no se ha encontrado, o conteniendo la posición
en que se halla

var aDias = ["MARIA", "JUAN", "PEDRO", "ISABEL", "PEPE", "FERNANDO",


"ROBERTO"];
var contador;
var encontrado = -1;
for( contador=0; contador < aDias.length; contador++ )
{
if( aDias[contador] == "PEPE")
{
encontrado = contador;
break;
}
}
if( encontrado == -1 )
document.write("No se ha encontrado el nombre");
else
document.write("PEPE está en la posición: “ + encontrado + “<br>“ );

34
Preguntando el elemento a buscar

Podemos utilizar la función prompt para preguntar que elemento se desea buscar

-Utilizamos una variable a, que contendrá el elemento a buscar


-Después esa variable a, la ponemos en el if
-Y también en el document.write cuando se encuentra el elemento

a=prompt("¿Que elemento quieres buscar?");

if(frutas[contador]==a)

document.write(a+" esta en la posicion: "+encontrado+"<br>");

Actividad Búsqueda

-Crea un arreglo
-Busca un elemento en el arreglo, utiliza la función prompt
-Debe de aparecer un mensaje en pantalla, si no se encontró el elemento o si se
encontró y la posición en la que se encontró.
-Imprima todos los elementos del arreglo en pantalla con su posición usando un
bucle
-Al final agrega tu nombre completo.

SD7. ORDENACION EN ARREGLOS


ORDENAMIENTO

Es la operación de organizar datos en algún orden secuencial de acuerdo a un


criterio que puede ser creciente o decreciente para los números o ascendente o
descendente (alfabéticamente) para datos de caracteres. El propósito principal de
un ordenamiento es el de facilitar las búsquedas de los miembros del conjunto
ordenado.

1. Método de Inserción Directa

Este método toma cada elemento del arreglo para ser ordenado y lo compara con
los que se encuentran en posiciones anteriores a la de él dentro del arreglo. Si
resulta que el elemento con el que se está comparando es mayor que el elemento
a ordenar, se recorre hacia la siguiente posición superior. Si por el contrario,

35
resulta que el elemento con el que se está comparando es menor que el elemento
a ordenar, se detiene el proceso de comparación pues se encontró que el
elemento ya está ordenado y se coloca en su posición (que es la siguiente a la del
último número con el que se comparó).

2. Método De Selección

El método de ordenamiento por selección consiste en encontrar el menor de todos


los elementos del arreglo e intercambiarlo con el que está en la primera posición.
Luego el segundo más pequeño, y así sucesivamente hasta ordenar todo el
arreglo.

3. Método Burbuja

El bubble sort, también conocido como ordenamiento burbuja, funciona de la


siguiente manera: Se recorre el arreglo intercambiando los elementos adyacentes
que estén desordenados. Se recorre el arreglo tantas veces hasta que ya no haya
cambios. Prácticamente lo que hace es tomar el elemento mayor y lo va
recorriendo de posición en posición hasta ponerlo en su lugar.

Autoevaluación Unidad 2

Criterios Si No
1. identifica los dos métodos para realizar un arreglo y las partes que lo
componen (nombre, elementos, datos, posiciones, índice, casillas)

2. Realiza actividad del arreglo e imprime los elementos del arreglo.

3. Realiza actividad de acciones con arreglos (agregar y eliminar elementos)

4. Realiza actividad concatenando arreglos y lo imprime en pantalla con un


bucle.

5. Realiza una búsqueda en un arreglo preguntando el elemento a buscar,


utilizando la función prompt

Nombre:
Fecha:

36
UNIDAD 3 Matrices

SD8. VECTORES EN JAVASCRIPT

Un vector en programación informática es una lista de elementos, cada uno con


una posición o índice que sirve para acceder a sus elementos.

Vectores en programación

Tipo de variable, que no contiene un valor único, sino que almacena un conjunto
de valores referenciados por un índice

JavaScript utiliza la estructura de datos denominada Array para implementar los


vectores.

Un Array se indexa desde cero en JavaScript. Los índices son números enteros no
negativos.

En un Array podemos incluir elementos de tipos diferentes.

Posición de memoria

Cuando se declara un vector se hace apuntando una variable a una


determinada dirección base (b) de memoria.

Esa es la posición cero del vector. Para ir a una posición o índice determinado se
utilizaba el concepto de desplazamiento (i), así que la ejecución del programa sólo
tenía que sumarlo a la dirección base (b+i) y obtenía la dirección de memoria
adecuada.

Función de los vectores en programación

Nos permiten acceder a grandes cantidades de datos de manera sencilla y rápida


sin gastar mucha memoria.

37
Función de los vectores en matemáticas

Los vectores permiten representar magnitudes físicas dotadas no sólo de


intensidad, sino de dirección, como es el caso de la fuerza, la velocidad o el
desplazamiento.

Un vector es un segmento de recta orientado mediante una punta de flecha


dibujada en uno de sus extremos
Un vector es una cantidad que tiene una longitud (un número real no negativo), así
como dirección (u orientación). Un vector representa la magnitud y orientación de
una cantidad física.

Representación de vectores en matemáticas

Tiene índices numéricos y se accede con un


Array numérico número entero a cada valor del mismo
(indexado) $variable=array($valor1, $valor2, $valor3
…);

Es un array cuyos valores se asignan


Tipos de Arrays mediante claves. Permite usar strings como
En PHP índices
$variable=array(clave1=>valor1,
clave2=>valor2, clave3=>valor3…);
Array asociativo
Ejemplo:
$equipo=array(portero=>”Sergio”,
defensa=>”Terry”, medio=>”Leonel”,
delantero=>”Torres”);

38
Array de arrays de 2 dimensiones.
Ejemplo: Array contenedor de otros 3
arrays con apellidos
Array bidimensional $equipo=array
(
Arrays multidimensional array(“Torres”, ”Perez”, “Gomez”),
(Matrices) array(“Suarez”),
Permite almacenar a su array(“Flores”, ”Alvarez”)
vez otro array );

Array tridimensional Array de arrays de 3 dimensiones

Ejemplo vector
<script>
var nombres = new Array();
nombres[0]=“Sergio”;
nombres[1]=“Fernando”;
nombres[2]=“Nicolas”;
var x;

//Imprimiendo el array
for(x=0; x<3; x++)
{
document.write(nombres[x] + “<br/>”);
}
</script>

39
SD9. MATRICES EN JAVASCRIPT

El álgebra lineal también es llamada el álgebra de las matrices, puesto que esta
estudia el comportamiento de estas.

Una matriz en matemáticas es una tabla bidimensional de números en cantidades


abstractas que pueden sumarse y multiplicarse.

Una matriz es una tabla cuadrada o rectangular de datos (llamados elementos)


ordenados en filas y columnas, donde una fila es cada una de las líneas
horizontales de la matriz y una columna es cada una de las líneas verticales.

Fig. Matriz bidimensional.

MATRICES EN JAVASCRIPT

Una matriz en JavaScript es un tipo de objeto global que se utiliza para almacenar
datos. Las matrices consisten en una colección o lista ordenada que contiene cero
o más tipos de datos, y utilizan índices numerados que comienzan en 0 para
acceder a elementos específicos.

Las matrices son muy útiles ya que almacenan valores múltiples en una sola
variable, lo que puede condensar y organizar nuestro código, haciéndolo más
legible y mantenible. Las matrices pueden contener cualquier tipo de datos,
incluidos números, cadenas y objetos.

En javascript las matrices también se conocen como arreglos bidimensionales.


A continuación, se mostrará como declarar un sencillo array de 2x2.

40
Ejemplo matriz

var nuevoArray = new Array(2);


//En cada posición de nuevoArray guardamos un nuevo array
nuevoArray[0] = new Array(2);
nuevoArray[1] = new Array(2);

Acceder a los datos de un array bidimensional.

Para acceder a cada elemento debemos indicar la posición en la que se


encuentra. Si pensamos en filas y columnas indicaremos primero la fila y después
la columna.

//Accedemos a la fila 0, columna 1


nuevoArray[0][1];

Ahora declaremos una matriz de 2x2 en el qué introduciremos números.

//Declaramos el array bidimensional


var nuevoArray = new Array(2);
nuevoArray[0] = new Array(2);
nuevoArray[1] = new Array(2);

//Metemos un dato en cada posición


nuevoArray[0][0] = 25;
nuevoArray[0][1] = 12;
nuevoArray[1][0] = 34;
nuevoArray[1][1] = 6;

Nuestro resultado sería algo de esta manera.

41
Ejemplo matriz

Creamos una matriz llamada nuevoArray y dentro de esta matriz tendrá 3 arreglos.
El arreglo [0] tendrá dos elementos, o sea [0][0] y [0][1]
El arreglo [1] tendrá dos elementos, o sea [1][0] y [1][1]
El arreglo [2] tendrá tres elementos, o sea [2][0], [2][1] y [2][2]

//Declaramos array bidimensional


var nuevoArray = new Array(3);
nuevoArray[0] = new Array(2);
nuevoArray[1] = new Array(2);
nuevoArray[2] = new Array(3);

//Agregamos un dato en cada posicion


nuevoArray[0][0] = 25;
nuevoArray[0][1] = 15;
nuevoArray[1][0] = 34;
nuevoArray[1][1] = 25;
nuevoArray[2][0] = 01;
nuevoArray[2][1] = 02;
nuevoArray[2][2] = 03;

//Imprimimos los valores del arreglo bidimensional


document.write("Matriz con tres arrays, <br>");
document.write(nuevoArray[0], "<br>");
document.write(nuevoArray[1], "<br>");
document.write(nuevoArray[2], "<br>");

Navegador

42
Otra forma de crear una matriz rápido

-Declaramos la variable que será el nombre de nuestra matriz


-Y dentro de los corchetes de nuestra matriz, ponemos los elementos de nuestros
arreglos.
-Cada arreglo entre corchetes
-Cada arreglo separado por coma
-Sólo el ultimo arreglo no lleva coma al final
-Al final de nuestra matriz lleva punto y coma

Ejemplo matriz rápido

Creamos una matriz con datos de nombres de personas, edad y países.


Una matriz llamada personas y tene 3 arreglos

var personas = [
["Javier", 23, "Mexico", "Ana", 24],
["Susana", 25, "Argentina", "Gonzalo", 48],
["Pablo", 20, "Brasil", "Gerardo", 26]
];

Para imprimir los valores de nuestra matriz o arreglo bidimensional solo ponemos
el nombre de nuestra matriz y el índice

//imprimimos los valores del arreglo bidimensional


document.write(personas[0], "<br>");
document.write(personas[1], "<br>");
document.write(personas[2], "<br><br>");

O podemos imprimir cada elemento de a matriz


document.write(personas[0][1], personas[0][2], "<br><br><br><br>");

Navegador

43
Actividad tabla

Poner los valores del ejemplo anterior de cada arreglo y la tabla con filas y
columnas, o sea:
personas[0][0]=”Javier”

Actividad matriz oración

Realiza una matriz que contenga 4 arreglos,


En el arreglo 0 debe de contener nombres de personas.
En el arreglo 1 debe de contener ciudades.
En el arreglo 2 debe de contener edades.
En el arreglo 3 debe de contener mascotas.
Imprimir los valores del arreglo en forma de oración:

Claudia vive en Alemania tiene 25 años y su mascota es una tortuga

Ejemplo calificación

Se crea una función Calificaciones y dentro de ella una matriz con dos materias y
sus calificaciones (método rápido), las calificaciones las pedirá el usuario.

Una vez que pida calificaciones obtendrá el promedio con una fórmula.

Mostrará en pantalla cada arreglo de la matriz(o sea la materia y la calificación)


hacia abajo.

Por último mostrará el promedio en una línea aparte.

Después de la etiqueta script insertará el código para crear un botón, aquí


mandará llamar la función.

<script>
function Calificaciones()
{
var a, b, promedio;
a=prompt("Geometria: ");
b=prompt("Ingles: ");

a=parseFloat(a);
b=parseFloat(b);
promedio=(a+b)/2;

44
var materias = [
["Geometria", a],
["Ingles", b]
];
document.write("Calificaciones", "<br><br>");
document.write(materias[0], "<br>");
document.write(materias[1], "<br>");
document.write("El promedio es: " + promedio);
}
</script>
<button type="button" onclick="Calificaciones()">Pedir calificaciones
</button>

Actividad promedio final

Cree un código parecido al ejemplo anterior con todas las materias que está
cursando y solicitará las calificaciones de cada materia.

Realizará el cálculo para obtener el promedio.

Mostrará en pantalla cada arreglo de la matriz ( o sea la materia y la calificación)


hacia abajo.

Por último mostrará el promedio en una línea aparte.

Después de la etiqueta script insertará el código para crear un botón, aquí


mandará llamar la función.

Actividad final

Realice una matriz de tres arreglos con el método 1 o método 2


En el arreglo 1 pedirá 2 números
En el arreglo 2 pedirá 3 números
En el arreglo 3 realizará la suma de los dos números del arreglo 1 y del arreglo 2

-Muestre en pantalla los números del arreglo 1 y el resultado de la suma de esos


números.
- Muestre en pantalla los números del arreglo 2 y el resultado de la suma de esos
números.
-Agregar un botón para mandar llamar la función y pedir los números.

45
SD10. OPERACIONES CON MATRICES
Las operaciones con matrices son la suma, la resta, la división y la
multiplicación. La dimensión de una matriz se representa como la multiplicación
de la dimensión de la fila con la dimensión de la columna.

La unión de dos o más matrices solo puede hacerse si dichas matrices tienen la
misma dimensión. Cada elemento de las matrices puede sumarse con los
elementos que coincidan en posición en diferentes matrices.
En el caso de restar dos o más matrices se sigue el mismo procedimiento que
usamos para sumar dos o más matrices.

Cuando sumamos o restamos matrices nos vamos a fijar en:


Las matrices compartan la misma dimensión.
Sumar o restar los elementos con la misma posición en matrices distintas.

Suma de matrices en JavaScript

Basándonos en este código, y con los conocimientos previos realicemos lo


siguiente.

46
Autoevaluación Unidad 3

Criterios Si No
1. Sabe que es un vector y una matriz en programación

2. Realiza tabla con los datos de una matriz en cada posición

3. Reconoce las dos formas de crear una matriz (amplia y resumida)

4. Sabe cómo imprimir los elementos de una matriz según su posición


5. Realiza actividad de una matriz.
6. Reconoce que se pueden realizar operaciones con matrices.

Nombre:

Fecha:

47

También podría gustarte