Scribd
Cargar
2 vistas32 páginas

Javascript

JavaScript es un lenguaje de programación esencial para crear páginas web interactivas, permitiendo la manipulación del contenido y la respuesta a acciones del usuario. Se integra con HTML y CSS, y se puede ejecutar en navegadores y servidores. El documento también cubre la historia, características, tipos de datos, operadores y funciones en JavaScript.

Cargado por

quisbertdaniel93
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
2 vistas32 páginas

Javascript

JavaScript es un lenguaje de programación esencial para crear páginas web interactivas, permitiendo la manipulación del contenido y la respuesta a acciones del usuario. Se integra con HTML y CSS, y se puede ejecutar en navegadores y servidores. El documento también cubre la historia, características, tipos de datos, operadores y funciones en JavaScript.

Cargado por

quisbertdaniel93
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

Capítulo 10

INTRODUCCIÓN A JAVASCRIPT

1. ¿Qué es JavaScript?

JavaScript es un lenguaje de programación utilizado principalmente para crear páginas web


interactivas. Permite que una página web responda a las acciones del usuario, realice cálculos,
valide información y modifique el contenido de la página sin necesidad de recargarla.

En el desarrollo web se utilizan tres tecnologías principales:

Tecnología Función
HTML Define la estructura de la página
CSS Define el diseño y estilo
JavaScript Define el comportamiento e interactividad

Por ejemplo, con JavaScript se pueden realizar las siguientes acciones:

 Mostrar mensajes al usuario.


 Validar formularios.
 Crear menús interactivos.
 Realizar cálculos automáticos.
 Actualizar contenido de la página dinámicamente.

1.1. Características de JavaScript

JavaScript tiene varias características importantes:

 Lenguaje interpretado: se ejecuta directamente en el navegador.


 Orientado a objetos: permite organizar el código mediante objetos.
 Multiplataforma: funciona en diferentes navegadores y sistemas operativos.
 Interactividad: permite responder a eventos del usuario como clics o escritura.

1.2. Historia de JavaScript

JavaScript fue creado en 1995 por el programador Brendan Eich mientras trabajaba en la
empresa Netscape Communications.

El lenguaje fue desarrollado en pocos días para ser utilizado en el navegador Netscape Navigator.
Con el tiempo se convirtió en uno de los lenguajes más importantes para el desarrollo web.

Actualmente, JavaScript es estandarizado por ECMA International mediante la especificación


llamada ECMAScript.

1.3. ¿Dónde se ejecuta JavaScript?

JavaScript puede ejecutarse en diferentes entornos:

- En el navegador web: Google Chrome, Mozilla Firefox, Microsoft Edge, etc.


- En el servidor utilizando tecnologías como: [Link]

En este curso se trabajará principalmente con JavaScript en el navegador, integrado con HTML.

1.4. Primer ejemplo de JavaScript

A continuación, se muestra un ejemplo sencillo donde JavaScript muestra un mensaje al usuario.

<!DOCTYPE html>
<html>
<head>
<title>Primer ejemplo JavaScript</title>
</head>
<body>
<h1>Bienvenido a JavaScript</h1>
<script>
alert("Hola, este es mi primer programa en JavaScript");
</script>
</body>
</html>

Explicación:
 <script> permite insertar código JavaScript dentro del documento HTML.
 alert() muestra un mensaje emergente en la pantalla.
 El navegador ejecuta automáticamente el código al cargar la página.

Actividad 1. Crear una página HTML que muestre un mensaje de bienvenida utilizando JavaScript.

2. Integración de JavaScript con HTML


La integración de JavaScript con HTML consiste en incluir código JavaScript dentro de una página
web para que esta pueda interactuar con el usuario y modificar el contenido de la página.
Mientras HTML define la estructura de la página, JavaScript permite agregar funcionalidad y
comportamiento dinámico. Existen tres formas principales de integrar JavaScript con HTML:

JavaScript dentro del documento HTML


JavaScript en un archivo externo
JavaScript dentro de atributos de HTML

- JavaScript dentro del documento HTML

El código JavaScript se coloca dentro de la etiqueta <script>.

<!DOCTYPE html>
<html>
<head>
<title>JavaScript en HTML</title>
</head>
<body>
<h2>Ejemplo de JavaScript</h2>
<script>
alert("Hola desde JavaScript");
</script>
</body>
</html>

- JavaScript en un archivo externo

Otra forma recomendable es colocar el código JavaScript en un archivo separado con extensión
.js.

Archivo HTML

<!DOCTYPE html>
<html>
<head>
<title>JavaScript externo</title>
</head>
<body>
<h2>Ejemplo con archivo externo</h2>
<script src="[Link]"></script>
</body>
</html>

Archivo JavaScript ([Link])

alert("JavaScript desde archivo externo");

- JavaScript dentro de atributos HTML

También se puede ejecutar JavaScript directamente desde eventos en etiquetas HTML.

Ejemplo:
<!DOCTYPE html>
<html>
<body>
<button onclick="alert('Botón presionado')">
Presionar
</button>
</body>
</html>
 onclick es un evento.
 Cuando el usuario hace clic en el botón se ejecuta el código JavaScript.

- Ubicación de la etiqueta <script>

El código JavaScript puede colocarse en dos lugares del documento HTML.

En el <head>
<head>
<script>
alert("Mensaje desde head");
</script>
</head>
Antes de cerrar <body> (recomendado)
<body>
<h1>Ejemplo</h1>
<script>
alert("Mensaje desde body");
</script>
</body>

Se recomienda colocarlo antes de cerrar <body> para que la página cargue primero el contenido
HTML.

Ejemplos.

1) En el siguiente ejemplo JavaScript cambia el contenido de un texto al presionar un botón.

<!DOCTYPE html>
<html>
<body>
<h2 id="mensaje">Hola mundo</h2>
<button onclick="cambiarTexto()">Cambiar texto</button>
<script>
function cambiarTexto() {
[Link]("mensaje").innerHTML = "Hola JavaScript";
}
</script>
</body>
</html>

2) Crear una página HTML que muestre un mensaje al presionar un botón.

<!DOCTYPE html>
<html>
<body>
<button onclick="alert('Bienvenido a JavaScript')">
Mostrar mensaje
</button>
</body>
</html>

3. Entrada y salida de datos

JavaScript permite interactuar con el usuario mediante diferentes métodos para ingresar
información y mostrar resultados. Los más utilizados son:

 prompt()
 alert()
 [Link]()

3.1. prompt()

El método prompt() permite solicitar información al usuario mediante una ventana emergente.

Ejemplo: El usuario escribe su nombre y el programa lo muestra en pantalla.

<script>
let nombre = prompt("Ingrese su nombre");
alert("Hola " + nombre);
</script>

3.2. alert()

El método alert() se utiliza para mostrar mensajes en una ventana emergente.

Ejemplo: Este método se utiliza comúnmente para mostrar resultados o avisos.


<script>
let nombre = prompt("Ingrese su nombre");
alert("Hola " + nombre);
</script>

3.3. [Link]()

El método [Link]() permite mostrar información en la consola del navegador. Es muy


utilizado para depurar programas.

Ejemplo:

<script>
[Link]("Mensaje de prueba");
</script>

Para ver el resultado se debe abrir la consola del navegador:

Click derecho → Inspeccionar → Consola

3.4. Mostrando datos en la página web

También se puede mostrar información dentro de una etiqueta HTML.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<title>Mostrar datos</title>
</head>
<body>
<h2>Suma de números</h2>
<input type="number" id="n1" placeholder="Número 1">
<input type="number" id="n2" placeholder="Número 2">
<button onclick="sumar()">Sumar</button>
<p id="resultado"></p>
<script>
function sumar() {
let a = Number([Link]("n1").value);
let b = Number([Link]("n2").value);
let suma = a + b;
[Link]("resultado").innerHTML = "Resultado: " +
suma;
}
</script>
</body>
</html>
 input → entrada de datos.
 .value → ob ene el valor ingresado.
 Number() → convierte texto a número.
 innerHTML → muestra el resultado en la página.

4. Variables y Tipos de Datos en JavaScript

Una variable es un espacio en la memoria que se utiliza para almacenar información que puede
cambiar durante la ejecución del programa. JavaScript es un lenguaje dinámico, lo que significa
que no es necesario declarar el tipo de dato al crear la variable, el lenguaje lo detecta
automáticamente.

Las variables permiten guardar datos como:


 números
 texto
 valores lógicos
 resultados de operaciones
Por ejemplo:
let nombre = "Carlos";

Aquí se guarda el texto Carlos en la variable llamada nombre.

En JavaScript una variable se declara utilizando las palabras clave:

 var
 let
 const
4.1. Declaración de variables
4.1.1. Uso de let

es la forma más utilizada actualmente para declarar variables. Permite declarar variables cuyo
valor puede cambiar, es decir, su valor puede modificarse durante la ejecución del programa.

let nombre = "Carlos";


let edad = 20;

Ejemplo:
<script>
let nombre = "Ana";
alert("Hola " + nombre);
</script>

4.1.2. Uso de var

fue la forma tradicional de declarar variables en JavaScript. Permite declarar variables cuyo valor
puede cambiar durante la ejecución del programa. Actualmente se usa menos porque tiene un
alcance más amplio y puede causar errores en programas grandes
var ciudad = "La Paz";

Ejemplo:
<script>
var mensaje = "Bienvenido";
alert(mensaje);
</script>

4.1.3. Uso de const

se utiliza para declarar constantes. Su valor no puede cambiar después de ser asignado.

const PI = 3.1416;

Ejemplo:
<script>
const pais = "Bolivia";
[Link](pais);
</script>

4.2. Reglas para nombrar variables

Al crear variables se deben seguir algunas reglas:

 Deben comenzar con letra, _ o $


 No pueden comenzar con números
 No pueden contener espacios
 No pueden usar palabras reservadas del lenguaje
Ejemplos correctos: Ejemplos incorrectos:
nombre 1numero
edad mi nombre
numero1 var
total_compra class

4.3. Tipos de datos en JavaScript

Los tipos de datos indican el tipo de información que contiene una variable. Los principales son:

Tipo Descripción Ejemplo


Number Números 10, 25.5
String Texto "Hola"
Boolean Verdadero o falso true / false
Array Lista de datos [1,2,3]
Object Conjunto de propiedades Persona
4.3.1. Tipo Number (Número)

El tipo Number se utiliza para almacenar valores numéricos, tanto enteros como decimales.
let edad = 18;
let precio = 25.50;

Ejemplo:
<script>
let n1 = Number(prompt("Ingrese número 1"));
let n2 = Number(prompt("Ingrese número 2"));
let suma = n1 + n2;
alert("La suma es: " + suma);
</script>
Number() convierte el texto ingresado en un número.

4.3.2. Tipo String (Texto)

El tipo String se utiliza para almacenar texto. El texto debe escribirse entre comillas simples (' ')
o dobles (" ").
let nombre = "Juan";
let mensaje = "Bienvenido";

Ejemplo:
<script>
let nombre = prompt("Ingrese su nombre");
alert("Hola " + nombre);
</script>

4.3.3. Tipo Boolean (Lógico)

El tipo Boolean representa solo dos valores posibles:


 true → verdadero
 false → falso

Se utiliza mucho en condiciones y decisiones.


let activo = true;
let aprobado = false;

Ejemplo:

<script>
let edad = 20;
let mayor = edad >= 18;
[Link](mayor);
</script>

4.3.4. Tipo Array

Un Array es una lista de datos almacenados en una sola variable. Los valores se escriben entre
corchetes [ ] y separados por comas.

Ejemplo:

<script>
let materia1 = prompt("Ingrese materia 1");
let materia2 = prompt("Ingrese materia 2");
let materia3 = prompt("Ingrese materia 3");
let materias = [materia1, materia2, materia3];
alert("Tus materias son: " + materias);
</script>

4.3.5. Tipo Object

Un Object es un conjunto de propiedades y valores. Cada propiedad tiene un nombre y un valor.

Ejemplo:

<script>
let nombre = prompt("Nombre del estudiante");
let edad = prompt("Edad del estudiante");
let curso = prompt("Curso");
let estudiante = {
nombre: nombre,
edad: edad,
curso: curso
};
alert("Estudiante: " + [Link]);
</script>
4.4. Mostrar el tipo de dato

JavaScript tiene una función llamada typeof que permite conocer el tipo de dato de una variable.

Ejemplo:
<script>
let nombre = "Pedro";
let edad = 25;
[Link](typeof nombre);
[Link](typeof edad);
</script>

Resultado en consola: string


number
Ejercicios. Mostrar el nombre y la edad de una persona.

<!DOCTYPE html>
<html>
<body>
<script>
let nombre = prompt("Ingrese su nombre");
let edad = prompt("Ingrese su edad");
alert("Nombre: " + nombre);
alert("Edad: " + edad);
</script>
</body>
</html>

5. Operadores en JavaScript

Los operadores son símbolos que permiten realizar operaciones entre valores o variables. En
JavaScript se utilizan para realizar cálculos matemáticos, comparaciones y operaciones lógicas.

Por ejemplo:
let suma = 5 + 3;

En este caso:
 5 y 3 son operandos
 + es el operador
5.1. Operadores aritméticos

Los operadores aritméticos se utilizan para realizar operaciones matemáticas.

Operador Descripción Ejemplo Resultado


+ Suma 5+3 8
- Resta 10 - 4 6
* Multiplicación 6*2 12
/ División 20 / 5 4
% Módulo (Residuo) 10 % 3 1
** Potencia 2 ** 3 8
++ Incremento x++ aumenta 1
-- Decremento x-- disminuye 1
Ejemplo:

<script>
let a = 10;
let b = 5;
let suma = a + b;
let resta = a - b;
let multiplicacion = a * b;
let division = a / b;

[Link]("Suma:", suma);
[Link]("Resta:", resta);
[Link]("Multiplicación:", multiplicacion);
[Link]("División:", division);
</script>

5.2. Operadores de comparación (relacionales)

Estos operadores permiten comparar valores y devuelven un resultado verdadero (true) o falso
(false).

Operador Significado Ejemplo


== Igual 5 == 5
=== Igual estricto 5 === 5
!= Diferente 5 != 3
> Mayor que 8>5
< Menor que 4 < 10
>= Mayor o igual 7 >= 7
<= Menor o igual 6 <= 9
Ejemplo:
<script>
let a = 10;
let b = 20;

[Link](a > b);


[Link](a < b);
[Link](a == b);
</script>

5.3. Operadores lógicos

Los operadores lógicos se utilizan para combinar condiciones.

Operador Significado
&& AND (y)
! NOT (no)

Ejemplo: En este ejemplo, se cumplen dos condiciones al mismo tiempo.


<script>
let edad = 20;
let tieneLicencia = true;
if (edad >= 18 && tieneLicencia) {
[Link]("Puede conducir");
}
</script>

5.4. Operadores de asignación

Se utilizan para asignar valores a una variable.

Operador Ejemplo Resultado


= x=5 asigna 5
+= x += 3 x=x+3
-= x -= 2 x=x-2
*= x *= 2 x=x*2
/= x /= 2 x=x/2
Ejemplo
<script>
let numero = 10;
numero += 5;
[Link](numero);
</script>
Resultado: 15

6. Funciones en JavaScript

Una función es un bloque de código que realiza una tarea específica y que puede ser ejecutado
cuando sea necesario. Las funciones permiten organizar el código, evitar repeticiones y facilitar
el mantenimiento de los programas.

En otras palabras, una función es un conjunto de instrucciones agrupadas que se ejecutan


cuando se llaman o invocan.

Por ejemplo, si se necesita mostrar un mensaje varias veces en una página web, se puede crear
una función y ejecutarla cada vez que sea necesario.

6.1. Estructura de una función

La estructura básica de una función en JavaScript es la siguiente:


function nombreFuncion(){
// instrucciones
}
 function → palabra reservada para crear funciones
 nombreFuncion → nombre de la función
 { } → bloque de código que se ejecutará
Ejemplo básico de una función

<script>
function saludar() {
alert("Hola, bienvenido a JavaScript");
}
saludar();
</script>
 Se crea la función saludar()
 Dentro de la función se muestra un mensaje con alert()
 Luego se llama a la función usando saludar()
6.2. Funciones con parámetros

Los parámetros permiten enviar información a la función.

Ejemplo:
<script>
function saludar(nombre) {
alert("Hola " + nombre);
}
saludar("Carlos");
</script>

En este caso, el valor Carlos se envía como parámetro.

6.3. Funciones con varios parámetros

Una función puede recibir varios datos.

<script>
function sumar(a, b) {
let resultado = a + b;
alert("Resultado: " + resultado);
}
sumar(5, 3);
</script>

6.4. Funciones con retorno de valores

Las funciones pueden devolver un resultado utilizando la palabra return.

function sumar(a, b) {
return a + b;
}

Ejemplo:
<script>
function sumar(a, b) {
return a + b;
}
let resultado = sumar(4, 6);
alert(resultado);
</script>

6.5. Funciones con interacción del usuario

Las funciones también pueden utilizar prompt y alert.

Ejemplo:

<script>
function calcularSuma() {
let n1 = Number(prompt("Ingrese número 1"));
let n2 = Number(prompt("Ingrese número 2"));
let suma = n1 + n2;
alert("Resultado: " + suma);
}
calcularSuma();
</script>

6.6. Funciones ejecutadas con botones

Las funciones pueden ejecutarse cuando el usuario presiona un botón.

<!DOCTYPE html>
<html>
<body>
<button onclick="saludar()">Saludar</button>
<script>
function saludar() {
alert("Bienvenido al curso de JavaScript");
}
</script>
</body>
</html>

Cuando el usuario hace clic en el botón se ejecuta la función.

7. Eventos en JavaScript

Los eventos en JavaScript son acciones que ocurren en una página web y que pueden ser
detectadas por el programa para ejecutar una función.

Estas acciones generalmente las realiza el usuario al interactuar con la página.

Ejemplos de eventos:

 Hacer clic en un botón


 Escribir en un campo de texto
 Mover el mouse
 Cargar una página web

Cuando ocurre un evento, JavaScript puede ejecutar una función automáticamente.

7.1. Eventos más utilizados


Evento Descripción
Onclick Cuando se hace clic
Onchange Cuando cambia un valor
onmouseover Cuando el mouse pasa sobre un elemento
onmouseout Cuando el mouse sale del elemento
Onload Cuando la página termina de cargar
Onkeyup Cuando se suelta una tecla
7.1.1. Evento onclick

El evento onclick ocurre cuando el usuario hace clic en un elemento.

Ejemplo:

<!DOCTYPE html>
<html>
<body>
<button onclick="mensaje()">Presionar</button>
<script>
function mensaje() {
alert("Botón presionado");
}
</script>
</body>
</html>

Cuando el usuario presiona el botón se ejecuta la función.

7.1.2. Evento onmouseover

El evento onmouseover ocurre cuando el cursor del mouse pasa sobre un elemento.

Ejemplo:

<!DOCTYPE html>
<html>
<body>
<h2 onmouseover="cambiar()">Pasa el mouse aquí</h2>
<script>
function cambiar() {
alert("El mouse está sobre el texto");
}
</script>
</body>
</html>

7.1.3. Evento onchange

Este evento ocurre cuando el valor de un elemento cambia, por ejemplo, en un campo de texto
o lista.

Ejemplo:

<!DOCTYPE html>
<html>
<body>
<select onchange="mostrar()">
<option>Seleccione</option>
<option>Rojo</option>
<option>Azul</option>
<option>Verde</option>
</select>

<script>
function mostrar() {
alert("Cambió la opción");
}
</script>
</body>
</html>

7.1.4. Evento onload

El evento onload se ejecuta cuando la página termina de cargarse.

Ejemplo:
<!DOCTYPE html>
<html>
<body onload="saludo()">
<script>
function saludo() {
alert("Página cargada correctamente");
}
</script>
</body>
</html>

Ejercicio: Cambiar imagen con el mouse.

<!DOCTYPE html>
<html>
<body>
<img src="[Link]" width="200" onmouseover="cambiar()"
onmouseout="volver()">
<script>
function cambiar() {
[Link]("img").src = "[Link]";
}
function volver() {
[Link]("img").src = "[Link]";
}
</script>
</body>
</html>

8. Manipulación del DOM en JavaScript

El DOM (Document Object Model) es una estructura que representa todos los elementos de una
página HTML como objetos que pueden ser manipulados con JavaScript.

Gracias al DOM, JavaScript puede:

 Cambiar texto
 Modificar estilos
 Agregar o eliminar elementos
 Responder a eventos del usuario

En otras palabras, el DOM permite que JavaScript controle el contenido de una página web.

8.1. Acceder a elementos del DOM

Para manipular un elemento HTML primero debemos seleccionarlo.

El método más utilizado es:

getElementById()

Este método selecciona un elemento mediante su id.

8.2. Modificar contenido con innerHTML

La propiedad innerHTML permite cambiar el contenido de un elemento HTML.

Ejemplo:

<!DOCTYPE html>
<html>
<body>
<p id="mensaje">Mensaje original</p>
<button onclick="modificar()">Modificar</button>
<script>
function modificar() {
[Link]("mensaje").innerHTML = "Mensaje
cambiado";
}
</script>
</body>
</html>
 getElementById("titulo") selecciona el elemento

 innerHTML cambia el contenido del elemento


8.3. Modificar estilos con style

JavaScript también puede cambiar el estilo CSS de un elemento.

Ejemplo:

<!DOCTYPE html>
<html>
<body>
<h2 id="texto">Texto de ejemplo</h2>
<button onclick="color()">Cambiar color</button>
<script>
function color() {
[Link]("texto").[Link] = "red";
}
</script>
</body>
</html>

8.4. Cambiar imágenes con JavaScript

También se puede cambiar una imagen modificando el atributo src.

Ejemplo:

<!DOCTYPE html>
<html>
<body>
<img id="imagen" src="[Link]" width="200">
<br><br>
<button onclick="cambiar()">Cambiar imagen</button>
<script>
function cambiar() {
[Link]("imagen").src = "[Link]";
}
</script>
</body>
</html>
8.5. Obtener valores de formularios

JavaScript puede leer información que el usuario escribe en un formulario.

Ejemplo:
<!DOCTYPE html>
<html>
<body>
<input type="text" id="nombre" placeholder="Ingrese su nombre">
<button onclick="mostrar()">Mostrar</button>
<p id="resultado"></p>
<script>
function mostrar() {
let nombre = [Link]("nombre").value;
[Link]("resultado").innerHTML = "Hola " +
nombre;
}
</script>
</body>
</html>

9. Condicionales en JavaScript

Las estructuras condicionales permiten que un programa tome decisiones dependiendo de si


una condición es verdadera o falsa. Esto significa que el programa puede ejecutar diferentes
instrucciones según una condición.

Por ejemplo:
 Si un estudiante tiene nota mayor o igual a 51 → aprueba
 Si la nota es menor → reprueba
Las estructuras condicionales más utilizadas en JavaScript son:
 if
 if...else
 if...else if
 switch
9.1. Estructura if

La estructura if ejecuta un bloque de código solo si la condición es verdadera.

if(condicion){
// instrucciones
}

Ejemplo:
<script>
let edad = 20;
if (edad >= 18) {
alert("Es mayor de edad");
}
</script>

9.2. Estructura if...else

Se utiliza cuando hay dos posibles resultados.

if(condicion){
// si es verdadero
}else{
// si es falso
}
Ejemplo:
<script>
let nota = 60;
if (nota >= 51) {
alert("Aprobado");
} else {
alert("Reprobado");
}
</script>

9.3. Estructura if...else if

Se utiliza cuando existen varias condiciones.

Ejemplo:
<script>
let nota = 80;
if (nota >= 90) {
alert("Excelente");
}
else if (nota >= 70) {
alert("Muy bien");
}
else if (nota >= 51) {
alert("Aprobado");
}
else {
alert("Reprobado");
}
</script>

9.4. Estructura switch

La estructura switch se utiliza cuando se quiere evaluar varios casos posibles de una variable.

switch (variable) {
case valor1:
instrucciones
break;
case valor2:
instrucciones
break;
default:
instrucciones
}
Ejemplo

<script>
let dia = 3;
switch (dia) {
case 1:
alert("Lunes");
break;
case 2:
alert("Martes");
break;
case 3:
alert("Miércoles");
break;
default:
alert("Otro día");
}
</script>

10. Ciclos en Javascript

Los ciclos (loops) en JavaScript permiten repetir un conjunto de instrucciones varias veces
mientras se cumpla una condición. Son muy útiles cuando necesitamos:

 mostrar listas de números


 generar tablas de multiplicar
 recorrer arreglos
 repetir cálculos automáticamente

Los ciclos más utilizados en JavaScript son:

 while
 do...while
 for

10.1. Ciclo while

El ciclo while ejecuta un bloque de código mientras la condición sea verdadera.

while(condicion){
instrucciones
}

Ejemplo:
<!DOCTYPE html>
<html>
<body>
<h2>Números del 1 al 5</h2>
<button onclick="mostrar()">Mostrar</button>
<p id="resultado"></p>
<script>

function mostrar() {
let i = 1;
let texto = "";
while (i <= 5) {
texto = texto + i + "<br>";
i++;
}
[Link]("resultado").innerHTML = texto;
}
</script>
</body>
</html>

10.2. Ciclo do...while

El ciclo do...while ejecuta el código al menos una vez, incluso si la condición es falsa.

Ejemplo:

<!DOCTYPE html>
<html>
<body>
<h2>Números del 1 al 5</h2>
<button onclick="mostrar()">Mostrar</button>
<p id="resultado"></p>

<script>
function mostrar() {
let i = 1;
let texto = "";
do {
texto = texto + i + "<br>";
i++;
} while (i <= 5);
[Link]("resultado").innerHTML = texto;
}
</script>
</body>
</html>
10.3. Ciclo for

El ciclo for se utiliza cuando sabemos cuántas veces se repetirá una instrucción.

for (inicializacion; condicion; incremento) {


instrucciones
}
Ejemplo:

for(let i=1; i<=5; i++){


}
Parte Explicación
let i=1 inicio del contador
i<=5 condición
i++ Incremento
Ejemplo: Mostrar números del 1 al 5 en la página.

<!DOCTYPE html>
<html>
<body>
<h2>Números del 1 al 5</h2>
<p id="resultado"></p>
<script>
let texto = "";
for (let i = 1; i <= 5; i++) {
texto = texto + i + "<br>";
}
[Link]("resultado").innerHTML = texto;
</script>
</body>
</html>

Ejercicios.

1) Mostrar la tabla de multiplicar del 7.

<button onclick="tabla()">Tabla del 7</button>


<p id="resultado"></p>
<script>
function tabla() {
let texto = "";
for (let i = 1; i <= 10; i++) {
texto = texto + "7 x " + i + " = " + (7 * i) + "<br>";
}
[Link]("resultado").innerHTML = texto;
}
</script>
2) Mostrar los números pares del 1 al 20.

<button onclick="pares()">Mostrar pares</button>


<p id="resultado"></p>
<script>
function pares() {
let texto = "";
for (let i = 1; i <= 20; i++) {
if (i % 2 == 0) {
texto = texto + i + "<br>";
}
}
[Link]("resultado").innerHTML = texto;
}
</script>

11. Arreglos (ARRAYS) en Javascript

Un arreglo (array) es una estructura de datos que permite almacenar varios valores dentro de
una sola variable.

Esto facilita trabajar con listas de datos, por ejemplo:

 Nombres de estudiantes
 Productos de una tienda
 Notas de un curso
 Números para cálculos

Ejemplo:

let frutas = ["Manzana", "Banana", "Naranja"];

Cada elemento del arreglo tiene una posición llamada índice.

Índice Valor
0 Manzana
1 Banana
2 Naranja

Los índices en JavaScript empiezan desde 0.

11.1. Acceder a un elemento del arreglo

Para acceder a un elemento se utiliza su índice.

Ejemplo:
frutas[0]
Esto devuelve: Manzana

11.2. Mostrar un arreglo en HTML


<!DOCTYPE html>
<html>
<body>
<h2>Lista de frutas</h2>
<button onclick="mostrar()">Mostrar</button>
<p id="resultado"></p>
<script>
function mostrar() {
let frutas = ["Manzana", "Banana", "Naranja", "Uva"];
let texto = "";
for (let i = 0; i < [Link]; i++) {
texto = texto + frutas[i] + "<br>";
}
[Link]("resultado").innerHTML = texto;
}
</script>
</body>
</html>

Aquí utilizamos: [Link] que devuelve la cantidad de elementos del arreglo.

11.3. Agregar elementos a un arreglo

Para agregar elementos se usa el método push().

[Link]("Pera");

Ejemplo:

<button onclick="agregar()">Agregar fruta</button>


<p id="resultado"></p>
<script>
let frutas = ["Manzana", "Banana"];
function agregar() {
[Link]("Naranja");
[Link]("resultado").innerHTML = frutas;
}
</script>

11.4. Recorrer arreglos con ciclos

La forma más común de recorrer un arreglo es usando for.

for(let i=0; i<[Link]; i++){


}

Esto permite acceder a todos los elementos del arreglo.

Ejercicios.

1) Mostrar una lista de estudiantes.

<h3>Lista de estudiantes</h3>
<button onclick="mostrar()">Mostrar estudiantes</button>
<p id="resultado"></p>
<script>
function mostrar() {
let estudiantes = ["Ana", "Luis", "Pedro", "María", "Carlos"];
let texto = "";
for (let i = 0; i < [Link]; i++) {
texto = texto + estudiantes[i] + "<br>";
}
[Link]("resultado").innerHTML = texto;
}
</script>

2) Mostrar productos de una tienda.

<h3>Productos</h3>
<button onclick="productos()">Ver productos</button>
<p id="resultado"></p>
<script>
function productos() {
let lista = ["Laptop", "Mouse", "Teclado", "Monitor"];
let texto = "";
for (let i = 0; i < [Link]; i++) {
texto = texto + lista[i] + "<br>";
}
[Link]("resultado").innerHTML = texto;
}
</script>

3) Seleccionar un estudiante al azar.

<button onclick="elegir()">Elegir estudiante</button>


<p id="resultado"></p>
<script>
function elegir() {
let estudiantes = ["Ana", "Luis", "Pedro", "María", "Carlos"];
let numero = [Link]([Link]() * [Link]);
[Link]("resultado").innerHTML = "Estudiante elegido:
" estudiantes[numero];
}
</script>

4) Simular el lanzamiento de un dado 🎲.

<button onclick="dado()">Lanzar dado</button>


<p id="resultado"></p>
<script>
function dado() {
let numeros = [1, 2, 3, 4, 5, 6];
let aleatorio = [Link]([Link]() * 6);
[Link]("resultado").innerHTML="Resultado:"+numeros[a
leatorio];
}
</script>

5) Agregar elementos a una lista.

<input type="text" id="dato">


<button onclick="agregar()">Agregar</button>
<ul id="lista"></ul>

<script>
let datos = [];
function agregar() {
let valor = [Link]("dato").value;
[Link](valor);
let texto = "";
for (let i = 0; i < [Link]; i++) {
texto = texto + "<li>" + datos[i] + "</li>";
}
[Link]("lista").innerHTML = texto;
}
</script>

12. Proyectos prácticos en Javascript

Proyecto 1: Generador de número aleatorio

Este programa genera un número aleatorio entre 1 y 100.

<!DOCTYPE html>
<html>
<body>
<h2>Número aleatorio</h2>
<button onclick="generar()">Generar número</button>
<h3 id="resultado"></h3>
<script>
function generar() {
let numero = [Link]([Link]() * 100) + 1;
[Link]("resultado").innerHTML =
"Número generado: " + numero;
}
</script>
</body>
</html>
Proyecto 2: Juego de adivinar el número

Este juego permite que el usuario intente adivinar un número secreto.

<!DOCTYPE html>
<html>
<body>
<h2>Adivina el número</h2>
<input type="number" id="numero">
<button onclick="verificar()">Intentar</button>
<p id="mensaje"></p>

<script>
let secreto = [Link]([Link]() * 10) + 1;
function verificar() {
let intento = Number([Link]("numero").value);
if (intento == secreto) {
[Link]("mensaje").innerHTML = "¡Correcto!";
}
else {
[Link]("mensaje").innerHTML = "Intenta
nuevamente";
}
}
</script>
</body>
</html>

Proyecto 3: Carrito de compras con total

Este proyecto permite:


 agregar productos al carrito
 mostrar los productos seleccionados
 calcular el total de la compra

<!DOCTYPE html>
<html>
<body>
<h2>Tienda virtual</h2>
<h3>Productos</h3>
<button onclick="agregar('Laptop',5000)">Laptop - $5000</button>
<button onclick="agregar('Mouse',50)">Mouse - $50</button>
<button onclick="agregar('Teclado',100)">Teclado - $100</button>
<h3>Carrito de compras</h3>
<ul id="lista"></ul>
<h3 id="total">Total: $0</h3>

<script>
let productos = [];
let precios = [];
let suma = 0;
function agregar(nombre, precio) {
[Link](nombre);
[Link](precio);
suma = suma + precio;
mostrar();
}

function mostrar() {
let texto = "";
for (let i = 0; i < [Link]; i++) {
texto = texto + "<li>" + productos[i] + " - $" + precios[i] +
"</li>";
}
[Link]("lista").innerHTML = texto;
[Link]("total").innerHTML = "Total: $" + suma;
}
</script>
</body>
</html>

Proyecto 4: Calculadora básica

Este proyecto permite realizar operaciones matemáticas básicas.

<!DOCTYPE html>
<html>
<body>
<h2>Calculadora</h2>
<input type="text" id="pantalla" readonly>
<br><br>
<button onclick="agregar('1')">1</button>
<button onclick="agregar('2')">2</button>
<button onclick="agregar('3')">3</button>
<button onclick="agregar('+')">+</button>
<br><br>
<button onclick="agregar('4')">4</button>
<button onclick="agregar('5')">5</button>
<button onclick="agregar('6')">6</button>
<button onclick="agregar('-')">-</button>
<br><br>
<button onclick="agregar('7')">7</button>
<button onclick="agregar('8')">8</button>
<button onclick="agregar('9')">9</button>
<button onclick="agregar('*')">*</button>
<br><br>
<button onclick="agregar('0')">0</button>
<button onclick="calcular()">=</button>
<button onclick="limpiar()">C</button>
<button onclick="agregar('/')">/</button>

<script>
function agregar(valor) {
[Link]("pantalla").value += valor;
}
function calcular() {
let resultado = eval([Link]("pantalla").value);
[Link]("pantalla").value = resultado;
}
function limpiar() {
[Link]("pantalla").value = "";
}
</script>
</body>
</html>

Proyecto 5: CRUD de estudiantes con JavaScript

<!DOCTYPE html>
<html>
<body>
<h2>CRUD de Estudiantes</h2>
Nombre:
<input type="text" id="nombre">
<button onclick="agregar()">Agregar</button>
<button onclick="actualizar()">Actualizar</button>
<br><br>
<table border="1">
<tr>
<th>N°</th>
<th>Nombre</th>
<th>Acciones</th>
</tr>
<tbody id="tabla"></tbody>
</table>

<script>
let estudiantes = [];
let indiceEditar = -1;
function agregar() {
let nombre = [Link]("nombre").value;
if (nombre == "") {
alert("Ingrese un nombre");
return;
}
[Link](nombre);
[Link]("nombre").value = "";
mostrar();
}
function mostrar() {
let texto = "";
for (let i = 0; i < [Link]; i++) {
texto += "<tr>";
texto += "<td>" + (i + 1) + "</td>";
texto += "<td>" + estudiantes[i] + "</td>";
texto += "<td>";
texto += "<button onclick='editar(" + i +
")'>Editar</button>";
texto += "<button onclick='eliminar(" + i +
")'>Eliminar</button>";
texto += "</td>";
texto += "</tr>";
}
[Link]("tabla").innerHTML = texto;
}
function eliminar(i) {
[Link](i, 1);
mostrar();
}
function editar(i) {
[Link]("nombre").value = estudiantes[i];
indiceEditar = i;
}
function actualizar() {
if (indiceEditar == -1) {
alert("Seleccione un registro");
return;
}
let nombre = [Link]("nombre").value;
estudiantes[indiceEditar] = nombre;
indiceEditar = -1;
[Link]("nombre").value = "";
mostrar();
}
</script>
</body>
</html>

También podría gustarte