Contenidos teóricos
y conceptos clave de
programación
Nivel básico (explorador) Módulo 1
1
Módulo 1: fundamentos de
programación
1. Introducción a la Programación
¿Qué es la programación?
La programación es el proceso de crear instrucciones que una
computadora puede seguir para realizar tareas específicas.
Estas instrucciones, conocidas como “código”, se escriben
en un lenguaje de programación que la máquina puede
interpretar y ejecutar. La programación es la base de casi todas
las aplicaciones de software, desde simples calculadoras
hasta complejas plataformas de inteligencia artificial.
Importancia de la programación:
1. Automatización de tareas: Permite la automatización de
procesos repetitivos, ahorrando tiempo y esfuerzo humano.
2. Resolución de problemas: La programación facilita la
solución de problemas complejos mediante el diseño de
algoritmos eficaces.
3. Innovación tecnológica: Impulsa el desarrollo de nuevas
tecnologías, aplicaciones y servicios que transforman
industrias enteras.
4. Competitividad empresarial: Las empresas que adoptan
1
soluciones programáticas pueden ofrecer productos y
servicios más innovadores y eficientes.
5. Accesibilidad de la tecnología: La programación
hace que la tecnología sea accesible para personas de
diferentes orígenes y habilidades.
Algoritmos y lógica de programación
Definición de algoritmo:
Un algoritmo es una secuencia de pasos o instrucciones bien
definidos que resuelven un problema específico o realizan
una tarea concreta. Los algoritmos son fundamentales en
la programación, ya que proporcionan una hoja de ruta
para que la computadora ejecute un conjunto de acciones
de manera lógica y secuencial.
Características de un buen algoritmo:
1. Claridad: Los pasos deben ser claros y no ambiguos.
2. Precisión: Debe haber una exactitud en las instrucciones
para evitar errores de ejecución.
3. Eficiencia: El algoritmo debe estar optimizado para utilizar
la menor cantidad de recursos posibles (tiempo y memoria).
4. Terminación: Debe llegar a un fin después de un número
finito de pasos.
5. Generalidad: Puede aplicarse a una amplia gama de
2
problemas similares.
Ejemplo de un algoritmo simple: Calcular la suma de los
primeros n números enteros positivos.
1. Inicializar la variable suma a 0.
2. Para cada número i desde 1 hasta n:
a. Sumar i a suma.
3. Devolver suma como resultado.
Pseudocodigo:
El pseudocódigo es una forma de expresar los distintos
pasos que va a realizar un programa, de la forma más
parecida a un lenguaje de programación. Su principal función
es la de representar por pasos la solución a un problema
o algoritmo, de la forma más detallada posible, utilizando
un lenguaje cercano al de programación.
Lógica de programación:
La lógica de programación implica el pensamiento
estructurado para resolver problemas a través de pasos
lógicos y secuenciales. Este pensamiento lógico es la base
para desarrollar algoritmos y escribir programas efectivos.
3
Ejemplo en pseudocódigo:
Definir función suma_numeros(n):
Inicializar suma a 0
Para i en rango(1, n+1):
suma = suma + i
Retornar suma
Variables y tipos de datos
Definición de variables:
En programación, una variable es un espacio de
almacenamiento que tiene un nombre simbólico y
que puede contener datos. Las variables permiten
al programador almacenar, modificar y utilizar
valores durante la ejecución de un programa.
Tipos de datos comunes:
1. Enteros (int): Números enteros sin parte decimal, por
ejemplo, -3, 0, 42.
2. Flotantes (float): Números reales con parte decimal, por
ejemplo, 3.14, -0.001, 2.0.
3. Cadenas de texto (string): Una secuencia de caracteres,
por ejemplo, “Hola”, “Mundo”, “1234”.
4. Booleanos (bool): Valores de verdad que solo pueden ser
True o False.
4
5. Listas/Arrays: Colecciones ordenadas de elementos que
pueden ser de diferentes tipos, por ejemplo, [1, 2, 3], [“uno”,
“dos”, “tres”].
Declaración de variables en distintos lenguajes de
programación:
● Python:
x = 10 # Entero
y = 3.14 # Flotante
nombre = “Juan” # Cadena de texto
es_activo = True # Booleano
● Java:
int x = 10; // Entero
double y = 3.14; // Flotante
String nombre = “Juan”; // Cadena de texto
boolean esActivo = true; // Booleano
● JavaScript:
let x = 10; // Entero
let y = 3.14; // Flotante
let nombre = “Juan”; // Cadena de texto
let esActivo = true; // Booleano
Operadores y estructuras de control (if, else, for, while):
Operadores en programación:
Los operadores son símbolos que representan operaciones
matemáticas o lógicas en un programa. Los más comunes
incluyen:
1. Operadores aritméticos: +, -, *, /, %, etc.
5
2. Operadores de comparación: ==, !=, >, <, >=, <=.
3. Operadores lógicos: and, or, not.
Ejemplo de operadores en Python:
a=5
b=3
# Operadores aritméticos
suma = a + b #8
diferencia = a - b #2
producto = a * b # 15
cociente = a / b # 1.666...
modulo = a % b #2
# Operadores de comparación
es_igual = (a == b) # False
es_mayor = (a > b) # True
# Operadores lógicos
resultado_logico = (a > b) and (b < 10) # True
Estructuras de Control
Las estructuras de control son fundamentales en la
programación porque determinan el flujo de ejecución de
un programa. Es decir, definen qué instrucciones se ejecutan
y en qué orden. Existen dos tipos principales de estructuras
de control: estructuras condicionales y bucles.
1. Estructuras Condicionales
Las estructuras condicionales permiten que un programa
tome decisiones basadas en condiciones. Estas estructuras
evalúan una expresión y ejecutan diferentes bloques de
6
código según el resultado de esa evaluación.
¿Cómo funcionan las estructuras condicionales?
Condición: Es una expresión que puede ser verdadera (True)
o falsa (False).
Bloque de código: Es el conjunto de instrucciones que se
ejecutan si la condición es verdadera o falsa.
Ejemplo básico
edad = 18
Si edad es mayor que:18:
Escriba(“Eres mayor de edad”)
Sino:
Escriba(“Eres menor de edad”)
¿Cómo se utilizan las estructuras condicionales?
Evaluación de la condición: Primero, el programa evalúa la
condición que se le proporciona. Esta condición puede ser
cualquier expresión lógica que se pueda comparar.
Ejecución del bloque de código: Basado en el resultado de
la evaluación, el programa decide qué bloque de código
ejecutar
2. Bucles
Los bucles permiten ejecutar repetidamente un bloque de
código mientras se cumpla una condición específica o por
un número determinado de veces. Son útiles para evitar
7
escribir el mismo código varias veces y para realizar tareas
repetitivas de manera eficiente.
¿Cómo funcionan los bucles?
1. Condición del bucle: Es una expresión que el bucle evalúa
para decidir si debe seguir ejecutándose. Esta condición
puede ser una secuencia de elementos o una expresión
booleana que se evalúa como verdadera o falsa.
2. Bloque de código: Es el conjunto de instrucciones que se
ejecutan en cada iteración del bucle. Cada vez que el bucle
se repite, este bloque de código se ejecuta.
Tipos de bucles:
Bucle for
El bucle for se utiliza para iterar sobre una secuencia de
elementos, como una lista de números o una serie de
palabras. Es ideal cuando se conoce de antemano el número
de repeticiones que se deben realizar.
¿Cómo funciona el bucle for?
1. Iteración sobre una secuencia: El bucle for toma cada
elemento de la secuencia y ejecuta el bloque de código
para ese elemento.
2. Número de repeticiones: El bucle for se repetirá una
8
cantidad de veces determinada por la secuencia. Por
ejemplo, si la secuencia contiene 5 elementos, el bucle se
ejecutará 5 veces.
Ejemplo en pseudocodigo:
Para cada número en la secuencia de 1 a 5 hacer
Imprimir “Número actual: “, número
Fin Para
Referencias y Bibliografía:
1. Cormen, T. H., Leiserson, C. E., Rivest, R. L., & Stein,
C. (2009). Introduction to Algorithms. MIT Press.
2. Sedgewick, R., & Wayne, K. (2011). Algorithms
(4th Edition). Addison-Wesley Professional.
3. Downey, A. (2015). Think Python: How to
Think Like a Computer Scientist. O’Reilly Media.
4. Deitel, P., & Deitel, H. (2016). Java: How to
Program (Early Objects). Pearson Education.
5. Flanagan, D. (2020). JavaScript: The Definitive Guide:
Master the World’s Most-Used Programming Language.
O’Reilly Media.
9
Introducción a HTML y CSS
HTML (HyperText Markup Language) es el lenguaje de
marcado utilizado para crear páginas web. La estructura
básica de un documento HTML define la forma en que el
contenido está organizado y presentado en el navegador.
Etiquetas y elementos HTML
Un elemento HTML típicamente inicia con una etiqueta de
apertura que consta del nombre del elemento, enmarcado
por corchetes angulares de apertura y cierre. Esta etiqueta
de apertura marca el comienzo del elemento.
La estructura general es:
<tagname> El contenido va aquí... </tagname>
El contenido que se encuentra entre las etiquetas
de apertura y cierre forma parte del elemento.
10
Sin embargo, no todos los elementos siguen esta
estructura. Algunos elementos se conocen como
“elementos vacíos” porque no tienen una etiqueta de
cierre ni contenido interno. Estos elementos constan
únicamente de una sola etiqueta o de una etiqueta de
apertura sin contenido asociado. Se utilizan principalmente
para insertar contenido o elementos en el documento.
Por ejemplo, el elemento <img> se usa para insertar una
imagen en la página, mientras que el elemento <input>
se emplea para incluir un campo de entrada de datos.
Etiquetas y Elementos Fundamentales en HTML
HTML utiliza una variedad de etiquetas para estructurar y
presentar el contenido en una página web. Aquí se describen
algunas de las etiquetas más importantes y sus funciones:
● <html>: Esta etiqueta define el inicio y el final de un
documento HTML. Es el contenedor raíz que encierra todo
el contenido de la página web. Todo el contenido visible y
no visible de la página debe estar dentro de las etiquetas
<html>.
● <head>: El elemento <head> contiene información meta
sobre el documento. Esta sección no es visible en la página
11
web, pero incluye información crucial como:
o <title>: Define el título de la página que se muestra
en la pestaña del navegador.
o <link>: Utilizado para enlazar archivos externos,
como hojas de estilo CSS, que dan formato a la página.
o <meta>: Proporciona metadatos sobre el
documento, como la codificación de caracteres (<meta
charset=”UTF-8”>), y descripciones para motores de
búsqueda.
● <body>: La etiqueta <body> contiene todo el contenido
que se muestra en la página web. Todo lo que los visitantes
ven en el navegador, como textos, imágenes, y enlaces,
está contenido dentro de esta etiqueta.
● <p>: La etiqueta <p> define un párrafo de texto. Cada
párrafo se muestra en un bloque separado con espacio
en blanco antes y después para mejorar la legibilidad del
texto.
● <h1> a <h6>: Estas etiquetas se utilizan para definir
encabezados de diferentes niveles. <h1> es el encabezado
de mayor importancia y tamaño, mientras que <h6> es el
de menor importancia y tamaño. Los encabezados ayudan a
12
estructurar el contenido y mejorar la organización jerárquica
de la información en la página.
● <a>: La etiqueta <a> se utiliza para crear enlaces o
hipervínculos. El atributo href especifica la URL a la que
el enlace debe llevar al hacer clic. Los enlaces permiten
conectar a otras páginas web, documentos, o recursos en
la red.
● <img>: Esta etiqueta se usa para insertar imágenes en
una página web. Requiere el atributo src para definir la
URL de la imagen que se desea mostrar, y el atributo alt
proporciona una descripción alternativa de la imagen para
mejorar la accesibilidad y en caso de que la imagen no se
cargue.
Para más información sobre otras etiquetas HTML y sus
usos, puedes consultar la documentación oficial de MDN
Web Docs
13
Elementos Comunes de HTML
En HTML, hay más de 100 elementos disponibles, aunque en
la práctica, la mayoría de los desarrolladores solo emplean
alrededor de 20 de los más utilizados. Estos elementos se
pueden clasificar en cinco grupos principales:
Elementos de Sección:
<div>: Un contenedor genérico utilizado para agrupar otros
elementos sin aplicar ningún formato específico.
<span>: Similar a <div>, pero en línea, utilizado para aplicar
estilos a una parte del texto.
<header>: Representa la cabecera de una página o sección,
comúnmente usada para contener elementos como el título
y la navegación principal.
<footer>: Define el pie de una página o sección, donde suelen
encontrarse información de contacto y derechos de autor.
<nav>: Designa una sección de navegación que contiene
enlaces a otras páginas o secciones del sitio.
<main>: Identifica el contenido principal de la página,
excluyendo encabezados, pies de página y navegación.
14
<section>: Utilizado para definir secciones temáticas dentro
de un documento, facilitando la organización del contenido.
Contenido de Texto
<h1> a <h6>: Estas etiquetas representan encabezados de
diferentes niveles, siendo <h1> el más importante y <h6> el
menos importante. Se usan para estructurar el contenido
y mejorar la jerarquía.
<p>: Define un párrafo de texto, creando espacios entre
bloques de texto para mejorar la legibilidad.
<ul>: Crea una lista desordenada con viñetas.
<ol>: Genera una lista ordenada con números.
<li>: Representa un ítem dentro de una lista, ya sea ordenada
o desordenada.
<div> y <span>: Además de su uso en la agrupación de
elementos, también se pueden emplear para estructurar y
estilizar bloques de texto y contenido.
Media
<img>: Inserta una imagen en la página web, requiriendo
el atributo src para especificar la ubicación del archivo de
la imagen.
<a>: Define un enlace que permite a los usuarios navegar
15
a otras páginas web o recursos mediante el atributo href,
que especifica la URL de destino.
Otros
<br>: Inserta un salto de línea, separando el contenido en
la misma línea.
<hr>: Crea una línea horizontal que puede utilizarse para
dividir secciones del contenido.
Para una referencia más completa de todos los elementos
HTML, puedes consultar la documentación en MDN Web
Docs. Sin embargo, para aquellos que están empezando,
familiarizarse con estos elementos básicos es un buen
punto de partida.
16
¿Qué es HTML Semántico?
El HTML semántico se refiere a una práctica de estructuración
de código HTML que busca reflejar el significado y la función
del contenido a través de etiquetas específicas y descriptivas.
En lugar de usar etiquetas genéricas, como <div> o <span>,
que solo indican el contenedor sin proporcionar información
sobre el contenido que encierran, el HTML semántico emplea
etiquetas que describen la naturaleza y el propósito del
contenido de manera más precisa.
El uso de HTML semántico no solo mejora la legibilidad
del código para los desarrolladores, sino que también
tiene un impacto positivo en la accesibilidad de la
web y en la optimización para motores de búsqueda
(SEO). Al utilizar etiquetas semánticas, se facilita la
comprensión del contenido por parte de los navegadores,
los motores de búsqueda y los lectores de pantalla,
lo que a su vez mejora la experiencia del usuario.
Cómo Utilizar el HTML Semántico
Comprender las Etiquetas Semánticas
A continuación, se presentan algunas de las etiquetas
semánticas más utilizadas en HTML y su propósito:
17
<header>: Define la cabecera de un documento o una
sección. Normalmente incluye elementos como el título
del sitio, el logotipo y los menús de navegación.
<nav>: Representa una sección de navegación que contiene
enlaces a otras partes del sitio web o a secciones importantes.
<main>: Marca el contenido principal del documento HTML.
Debe haber un solo <main> por página y debe contener la
información central que el documento presenta.
<article>: Representa un contenido independiente y
autónomo, como un artículo de blog o una entrada de
noticias. Este contenido puede ser distribuido de manera
independiente.
<section>: Define una sección temática dentro de una página,
que puede contener un título y contenido relacionado. Ayuda
a organizar el contenido en secciones lógicas.
<aside>: Se utiliza para contenido relacionado o
complementario que está separado del flujo principal del
contenido, como barras laterales o anuncios.
18
<footer>: Representa el pie de página de un documento
o una sección. Generalmente contiene información como
derechos de autor, enlaces de contacto o detalles sobre el
sitio web.
<figure> y <figcaption>: Usados para incluir imágenes y
proporcionar una descripción o leyenda para el contenido
visual.
<time>: Se usa para representar fechas y horarios,
permitiendo que los motores de búsqueda y los lectores de
pantalla interpreten esta información de manera adecuada.
Utilizar las Etiquetas Semánticas Apropiadas
Una vez que hayas planificado la estructura de tu página, aplica
las etiquetas semánticas a cada sección correspondiente.
Esto no solo mejora la legibilidad del código, sino que
también facilita la comprensión del contenido para los
usuarios y los motores de búsqueda.
19
Introducción a CSS: Sintaxis y
Selectores
¿Qué es CSS?
CSS (Cascading Style Sheets) es un lenguaje de estilo
utilizado para describir la presentación de un documento
escrito en HTML o XML. CSS define cómo se deben mostrar
los elementos en una página web, controlando aspectos
como colores, fuentes, márgenes, espaciado, y disposición.
Al separar el contenido de la presentación, CSS permite
una mayor flexibilidad y control sobre el diseño web.
La separación del contenido HTML de su presentación CSS
permite una mayor flexibilidad y control sobre el diseño de
la web. Esto significa que podemos cambiar la apariencia de
múltiples páginas web de manera consistente, simplemente
modificando un único archivo CSS.
Sintaxis de CSS
La sintaxis de CSS se compone de reglas que indican cómo
deben aplicarse los estilos a los elementos HTML. Cada
regla CSS tiene la siguiente estructura básica:
selector {
propiedad: valor;
}
20
· Selector: Es el elemento o conjunto de elementos HTML a
los que se aplicará el estilo.
· Propiedad: Es el aspecto del elemento que se desea
modificar (por ejemplo, color, tamaño de fuente, margen).
CSS: Conceptos Fundamentales
Clases en HTML y CSS
Antes de entrar en los detalles de los selectores CSS, es
importante entender el concepto de clases en HTML y CSS,
ya que son uno de los elementos más utilizados para aplicar
estilos.
Clases en HTML
Una clase es un atributo que se añade a un elemento
HTML para definirlo como parte de un grupo específico de
elementos. Las clases permiten aplicar estilos compartidos
a múltiples elementos que necesitan un aspecto similar, sin
afectar a otros elementos que no pertenecen a esa clase.
<p class=”resaltado”>Este es un párrafo resaltado.</p>
<p>Este es un párrafo normal.</p>
La clase resaltado se asigna al primer párrafo. Podemos usar
CSS para aplicar estilos específicos a todos los elementos
que tengan esta clase.
21
Clases en CSS
Para aplicar estilos a una clase, utilizamos un selector de
clase en CSS. Este selector comienza con un punto (.) seguido
del nombre de la clase.
.resaltado {
color: red; font-weight: bold;
}
Este código CSS aplicará un color rojo y un texto en negrita
a todos los elementos HTML que tengan la clase resaltado.
Importante: Un mismo elemento HTML puede tener
múltiples clases separadas por espacios, lo que permite
combinar estilos de diferentes clases.
<p class=”resaltado importante”>Este texto es resaltado
e importante.</p>
En este ejemplo, el párrafo pertenece a las clases resaltado
e importante, y se aplicarán los estilos correspondientes a
ambas.
Selectores CSS
Los selectores son fundamentales en CSS, ya que determinan
a qué elementos se aplicarán los estilos. Aquí presentamos
una descripción detallada de los tipos más comunes de
selectores CSS:
22
1. Selectores de Etiqueta:
o Descripción: Seleccionan todos los elementos de un
tipo específico, como <p>, <div>, <h1>, etc.
o Uso: Útiles para aplicar un estilo uniforme a
todos los elementos de una etiqueta determinada.
h1 {
color: green; font-size: 24px;
}
En este ejemplo, el color verde y un tamaño de fuente de
24 píxeles se aplicarán a todos los elementos <h1>.
Selectores de Clase:
● Descripción: Seleccionan elementos que tienen una clase
específica asignada. Permiten aplicar estilos a grupos de
elementos que comparten características comunes.
● Sintaxis: Utilizan un punto (.) seguido del nombre de la
clase.
.destacado {
background-color: yellow;
padding: 10px;
}
Este selector aplica un fondo amarillo y un relleno de 10
píxeles a todos los elementos con la clase destacado.
23
Selectores de ID:
● Descripción: Seleccionan un único elemento con un ID
específico. Los ID son únicos dentro de una página, lo que
significa que sólo deben asignarse una vez por elemento.
● Sintaxis: Utilizan una almohadilla (#) seguida del nombre
del ID.
#encabezado-principal {
font-size: 30px;
text-align: center;
}
Este selector aplicará un tamaño de fuente de 30 píxeles
y alineará el texto al centro para el elemento con el ID
encabezado-principal.
· Selectores de Atributo:
● Descripción: Seleccionan elementos basados en la
presencia o valor de un atributo específico.
● Uso: Útiles para aplicar estilos a elementos que comparten
atributos comunes, como formularios o enlaces.
[type=”submit”] {
background-color: blue;
color: white;
border-radius: 5px;
}
24
Este selector aplica un fondo azul, texto blanco, y bordes
redondeados a los elementos <input> con un atributo type
igual a “submit”.
Selectores de Combinación:
Los selectores de combinación permiten aplicar estilos
basados en la relación entre elementos. Hay varios tipos
de combinadores:
● Selectores de Descendientes: Seleccionan elementos
que son descendientes de otro elemento.
div p {
color: red;
}
Aplica el color rojo a todos los párrafos <p> que están
dentro de un <div>.
● Selectores de Hijo Directo: Seleccionan elementos que
son hijos directos de otro elemento.
ul > li {
list-style-type: none;
}
Elimina los puntos de lista de todos los elementos <li>
que son hijos directos de un <ul>.
25
● Selectores de Hermano Adyacente: Seleccionan un
elemento que es el siguiente hermano inmediato de otro
elemento.
h2 + p {
margin-top: 0;
}
Elimina el margen superior de un párrafo <p> que sigue
inmediatamente a un <h2>.
● Selectores de Hermano General: Seleccionan todos los
elementos que son hermanos de otro elemento.
h2 ~ p {
color: gray;
}
Aplica un color gris a todos los párrafos <p> que siguen
a un <h2>, sin importar si están adyacentes o no.
Selectores Universales:
● Descripción: Seleccionan todos los elementos en la
página. Son útiles para establecer estilos globales.
● Sintaxis: Utilizan el asterisco (*) como selector.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
26
Introducción a JavaScript
JavaScript es uno de los lenguajes de programación más
populares y ampliamente utilizados en el desarrollo
web. Su función principal es hacer que las páginas
web sean interactivas y dinámicas, permitiendo a
los desarrolladores crear experiencias de usuario
más atractivas y personalizadas. En esta sección,
explicaremos los conceptos básicos de JavaScript y cómo
se integra con HTML para darle vida a las páginas web.
Características principales de JavaScript:
● Interpretado: No necesita ser compilado antes de su
ejecución. Los navegadores web pueden interpretar y
ejecutar directamente el código JavaScript.
● Basado en objetos: Permite la creación y manipulación
de objetos, lo que facilita la organización del código y la
reutilización de componentes.
● Orientado a eventos: JavaScript puede detectar y
responder a eventos como clics del ratón, desplazamientos,
movimientos del ratón, y mucho más.
● Versátil y flexible: Compatible con la mayoría de los
27
navegadores modernos y se puede usar tanto en el lado
del cliente como en el lado del servidor (a través de Node.
js).
¿Por qué usar JavaScript?
Interactividad: Permite que las páginas web respondan a la
interacción del usuario, como mostrar menús desplegables,
crear galerías de imágenes dinámicas, validar formularios
y más.
Desarrollo Asíncrono: Con JavaScript, es posible realizar
solicitudes al servidor sin tener que recargar la página
completa (usando AJAX).
Manipulación del DOM: JavaScript puede modificar el
Document Object Model (DOM) de una página, lo que
significa que puede cambiar la estructura y el contenido
de la página mientras se está viendo.
Extensiones y Complementos: Una gran variedad de
bibliotecas y frameworks están disponibles para extender
la funcionalidad de JavaScript, como jQuery, React, Angular,
y [Link].
28
Integración de JavaScript en HTML
Para utilizar JavaScript en una página web, se integra dentro
de un documento HTML. Hay tres formas principales de
hacerlo: inline, interno, y externo.
1. JavaScript Inline
En este método, el código JavaScript se escribe directamente
dentro de los atributos de HTML. Es el enfoque más simple
pero generalmente no se recomienda para scripts complejos
debido a la dificultad de mantenimiento.
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8”>
<title>JavaScript Inline</title>
</head>
<body>
<button onclick=”alert(‘¡Hola, mundo!’)”>Haz clic
aquí</button>
</body>
</html>
Explicación:
El atributo onclick del botón contiene un pequeño script
JavaScript que muestra un mensaje de alerta cuando se
hace clic en el botón.
29
2. JavaScript Interno
Aquí, el código JavaScript se escribe dentro de una etiqueta
<script> dentro del documento HTML, generalmente en la
sección <head> o al final de <body>.
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8”>
<title>JavaScript Interno</title>
<script>
function mostrarMensaje() {
alert(‘¡Bienvenido a JavaScript Interno!’);
}
</script>
</head>
<body>
<button onclick=”mostrarMensaje()”>Haz clic aquí</
button>
</body>
</html>
Explicación:
Se define una función JavaScript llamada mostrarMensaje()
dentro de la etiqueta <script>.
La función se llama cuando el usuario hace clic en el botón,
mostrando un mensaje de alerta.
30
3. JavaScript Externo
Con este enfoque, el código JavaScript se coloca en un
archivo separado con la extensión .js, que luego se enlaza al
documento HTML. Este método es preferible para mantener
el código limpio y organizado, especialmente para scripts
más largos.
Archivo [Link]
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8”>
<title>JavaScript Externo</title>
<script src=”[Link]”></script>
</head>
<body>
<button onclick=”mostrarMensaje()”>Haz clic aquí</
button>
</body>
</html>
Archivo [Link]:
function mostrarMensaje() {
alert(‘¡Bienvenido a JavaScript Externo!’);
}
Explicación:
El archivo [Link] contiene la lógica JavaScript.
La etiqueta <script> en el documento HTML usa el atributo
src para enlazar el archivo externo.
31
Este método permite reutilizar el mismo archivo JavaScript
en múltiples páginas HTML.
La Ubicación de la Etiqueta <script> en el Documento HTML
La ubicación de la etiqueta <script> dentro de un documento
HTML puede afectar el rendimiento y la funcionalidad del
sitio web. Hay dos ubicaciones comunes para insertar
scripts: en la sección <head> y al final de <body>.
Colocar <script> en <head>
Cuando el script se coloca dentro de <head>, se carga antes
de que se procese el contenido del cuerpo de la página. Esto
puede causar que la página parezca lenta o que algunos
elementos del DOM no estén disponibles inmediatamente
para el script.
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8”>
<title>Script en Head</title>
<script>
[Link](‘DOMContentLoaded’,
function() {
alert(‘Documento completamente cargado’);
});
</script>
</head>
<body>
32
<p>Contenido de la página</p>
</body>
</html>
Explicación:
Lafunció[Link](‘DOMContentLoaded’,
function() {...}) asegura que el script se ejecute solo después
de que el documento HTML esté completamente cargado.
Colocar <script> al Final de <body>
Ubicar la etiqueta <script> justo antes de cerrar el cuerpo
(</body>) es generalmente preferible. Esto permite que el
HTML se cargue primero, mejorando la velocidad de carga
y asegurando que el DOM esté completamente disponible
para el script.
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8”>
<title>Script al Final de Body</title>
</head>
<body>
<p>Contenido de la página</p>
<script>
alert(‘Documento cargado con éxito’);
</script>
</body>
</html>
33
Aquí, el script se ejecuta después de que todo el contenido
de la página se haya cargado, mejorando el rendimiento y
evitando posibles errores de referencia del DOM.
Variables y tipos de datos en JavaScript
JavaScript es un lenguaje de programación versátil que
se utiliza para crear páginas web interactivas. Uno de los
conceptos fundamentales de JavaScript es la manipulación
de variables y tipos de datos, que son los bloques de
construcción del código.
Variables en JavaScript
Las variables son contenedores que almacenan datos. En
JavaScript, se pueden declarar usando var, let, y const, cada
uno con diferentes reglas y usos:
● var: Permite declarar variables que pueden ser re-
declaradas y son accesibles desde cualquier parte del
ámbito en el que se definen. Se recomienda evitar su uso
en favor de let y const.
var nombre = “Ana”;
[Link](nombre); // Salida: Ana
● let: Introducido en ECMAScript 6 (ES6), let permite
declarar variables que son limitadas al ámbito del bloque
34
donde se definen. No permite la re-declaración en el mismo
ámbito.
let edad = 25;
[Link](edad); // Salida: 25
● const: Utilizado para declarar constantes que no pueden
ser reasignadas después de su inicialización. Útil para
valores que no deben cambiar.
const PI = 3.14159;
[Link](PI); // Salida: 3.14159
Buenas Prácticas:
● Usa let para variables que cambiarán y const para
valores constantes.
● Prefiere nombres descriptivos y claros.
● Evita el uso de var para reducir errores de alcance
Tipos de Datos en JavaScript
JavaScript maneja varios tipos de datos primitivos que son
fundamentales para la programación:
1. Number
Representa valores numéricos, incluyendo enteros y
decimales. Permite operaciones aritméticas básicas como
suma, resta, multiplicación, división, y módulo.
35
let precio = 19.99;
let cantidad = 3;
let total = precio * cantidad;
[Link](total); // Salida: 59.97
2. String
Cadenas de texto definidas con comillas simples (‘), dobles
(“), o plantillas literales (`). Se usan para almacenar y
manipular texto.
let saludo = “Hola, mundo”;
let nombre = ‘Ana’;
let mensaje = `Hola, ${nombre}`;
[Link](mensaje); // Salida: Hola, Ana
3. Boolean
Valores lógicos que pueden ser true o false. Utilizados en
condiciones y bucles.
let esMayor = true;
let esMenor = false;
[Link](esMayor); // Salida: true
4. Undefined y Null
● undefined: Se asigna automáticamente a una variable
que se declara pero no se inicializa.
let valor;
[Link](valor); // Salida: undefined
36
● null: Representa intencionalmente la ausencia de valor.
let elemento = null;
[Link](elemento); // Salida: null
Operadores y estructuras de control (if, else, for, while)
En JavaScript, los operadores y las estructuras de control
son herramientas fundamentales que permiten manipular
datos y definir el flujo de un programa. A través de estas
herramientas, podemos realizar cálculos, tomar decisiones,
y repetir acciones de manera eficiente.
Operadores en JavaScript
Los operadores son símbolos que nos permiten realizar
operaciones sobre variables y valores. Se pueden clasificar
en varias categorías:
1. Operadores Aritméticos
Estos operadores permiten realizar operaciones
matemáticas básicas.
● Adición (+): Suma dos números o concatena cadenas.
● Sustracción (-): Resta el segundo número del primero.
● Multiplicación (*): Multiplica dos números.
37
● División (/): Divide el primer número por el segundo.
● Módulo (%): Devuelve el resto de una división.
● Exponenciación (**): Eleva un número a la potencia de
otro.
Ejemplo:
let a = 10;
let b = 3;
[Link](a + b);
[Link](a - b);
[Link](a * b);
[Link](a / b);
[Link](a ** b);
2. Operadores de Asignación
Se utilizan para asignar valores a las variables.
● Asignación (=): Asigna el valor de la derecha a la variable
de la izquierda.
● Asignación de adición (+=): Suma y asigna el valor.
● Asignación de sustracción (-=): Resta y asigna el valor.
● Asignación de multiplicación (*=): Multiplica y asigna el
valor.
● Asignación de división (/=): Divide y asigna el valor.
● Asignación de módulo (%=): Calcula el módulo y asigna
el valor.
38
Ejemplo:
let x = 5;
x += 3; // Equivalente a x = x + 3
[Link](x); // Salida: 8
x *= 2; // Equivalente a x = x * 2
[Link](x); // Salida: 16
3. Operadores de Comparación
Comparan dos valores y devuelven un valor booleano (true
o false).
● Igualdad (==): Verifica si los valores son iguales.
● Desigualdad (!=): Verifica si los valores son diferentes.
● Identidad (===): Verifica si los valores y tipos son
iguales.
● No identidad (!==): Verifica si los valores y tipos son
diferentes.
● Mayor que (>): Verifica si el primer valor es mayor.
● Menor que (<): Verifica si el primer valor es menor.
● Mayor o igual (>=): Verifica si el primer valor es mayor
o igual.
● Menor o igual (<=): Verifica si el primer valor es menor
o igual.
Ejemplo:
let y = 10;
let z = ‘10’;
39
[Link](y == z); // Salida: true (compara valores)
[Link](y === z); // Salida: false (compara valores y
tipos)
[Link](y > 5); // Salida: true
[Link](y <= 10); // Salida: true
4. Operadores Lógicos
Permiten combinar expresiones booleanas.
● Y (&&): Devuelve true si ambas expresiones son verdaderas.
● O (||): Devuelve true si al menos una expresión es
verdadera.
● NO (!): Invierte el valor de verdad de la expresión.
Ejemplo:
let esAdulto = true;
let tienePermiso = false;
[Link](esAdulto && tienePermiso); // Salida: false
[Link](esAdulto || tienePermiso); // Salida: true
[Link](!esAdulto); // Salida: false
5. Operadores de Incremento y Decremento
Estos operadores incrementan o disminuyen el valor de
una variable en 1.
● Incremento (++): Aumenta el valor de la variable en 1.
● Decremento (--): Disminuye el valor de la variable en 1.
Ejemplo:
let contador = 5;
contador++;
40
[Link](contador); // Salida: 6
contador--;
[Link](contador); // Salida: 5
Estructuras de Control
Las estructuras de control permiten dirigir el flujo de
ejecución de un programa, tomando decisiones o repitiendo
acciones según condiciones específicas.
1. Estructura Condicional: if y else
La estructura if se utiliza para ejecutar un bloque de código
solo si una condición es verdadera. La sentencia else
proporciona un bloque de código alternativo si la condición
es falsa.
Sintaxis básica:
i
f (condición) {
// Código a ejecutar si la condición es verdadera
} else {
// Código a ejecutar si la condición es falsa
}
Ejemplo:
let temperatura = 18;
if (temperatura > 20) {
[Link](“Hace calor.”);
} else {
[Link](“Hace frío.”);
}
41
// Salida: Hace frío.
2. Estructura Condicional: else if
Permite evaluar múltiples condiciones en secuencia. Si la
primera condición es falsa, se evalúa la siguiente.
Sintaxis:
if (condición1) {
// Código si condición1 es verdadera
} else if (condición2) {
// Código si condición2 es verdadera
} else {
// Código si ninguna condición es verdadera
}
Ejemplo:
let hora = 15;
if (hora < 12) {
[Link](“Buenos días”);
} else if (hora < 18) {
[Link](“Buenas tardes”);
} else {
[Link](“Buenas noches”);
}
// Salida: Buenas tardes
3. Estructura de Repetición: for
El bucle for se utiliza para repetir un bloque de código un
número específico de veces.
42
Sintaxis:
for (inicialización; condición; incremento) {
// Código a ejecutar en cada iteración
}
4. Estructura de Repetición: while
El bucle while ejecuta un bloque de código mientras una
condición sea verdadera.
Sintaxis:
while (condición) {
// Código a ejecutar mientras la condición sea verda-
dera
}
5. Estructura de Repetición: do...while
El bucle do...while es similar a while, pero garantiza que el
bloque de código se ejecute al menos una vez, ya que la
condición se evalúa después de la primera ejecución.
Sintaxis:
do {
// Código a ejecutar
} while (condición);
Manipulación Básica del DOM
La manipulación del DOM (Document Object Model) en
JavaScript permite interactuar con el contenido y la
43
estructura de una página web en tiempo real. El DOM
representa la estructura del documento HTML como un
conjunto de nodos y objetos que pueden ser modificados
mediante JavaScript.
¿Qué es el DOM?
El DOM es una interfaz de programación que
proporciona una representación estructural del
documento web, permitiendo acceder y modificar el
contenido, estructura y estilo de una página web. Cada
elemento HTML es representado como un nodo en
el DOM.
Acceso a Elementos del DOM
Para manipular los elementos del DOM, primero
necesitamos acceder a ellos. JavaScript ofrece varias
maneras de seleccionar elementos:
1. getElementById
Selecciona un elemento por su atributo id.
letelemento=[Link](“miElemento”);
Ejemplo:
html
Copy code
<p id=”demo”>Hola, mundo!</p>
44
<script>
let parrafo = [Link](“demo”);
[Link]([Link]); // Salida: Hola, mundo!
</script>
2. getElementsByClassName
Selecciona elementos por su nombre de clase. Devuelve
una colección de nodos.
letelementos=[Link](“miClase”);
Ejemplo:
<p class=”miClase”>Texto 1</p>
<p class=”miClase”>Texto 2</p>
<script>
let parrafos = [Link](“-
miClase”);
[Link](parrafos[0].innerHTML); // Salida: Texto 1
</script>
3. getElementsByTagName
Selecciona elementos por su nombre de etiqueta. Devuelve
una colección de nodos.
let elementos = [Link](“p”);
Ejemplo:
<p>Parrafo 1</p>
<p>Parrafo 2</p>
<script>
let parrafos = [Link](“p”);
[Link]([Link]); // Salida: 2
45
</script>
4. querySelector
Selecciona el primer elemento que coincide con un selector
CSS.
let elemento = [Link](“.miClase”);
Ejemplo:
<p class=”miClase”>Texto</p>
<script>
let parrafo = [Link](“.miClase”);
[Link]([Link]); // Salida: Texto
</script>
5. querySelectorAll
Selecciona todos los elementos que coinciden con un
selector CSS. Devuelve una NodeList.
let elementos = [Link](“[Link]”);
Ejemplo:
<p class=”miClase”>Texto 1</p>
<p class=”miClase”>Texto 2</p>
<script>
let parrafos = [Link](“[Link]”);
[Link]([Link]); // Salida: 2
</script>
Modificación de Elementos
Una vez que tenemos acceso a los elementos, podemos
46
modificar su contenido y propiedades.
1. Cambiar el Contenido
Usa la propiedad innerHTML o textContent para cambiar el
contenido de un elemento.
[Link] = “Nuevo contenido”;
[Link] = “Nuevo texto”;
Ejemplo:
<p id=”demo”>Texto original</p>
<script>
let parrafo = [Link](“demo”);
[Link] = “Texto actualizado”;
</script>
2. Cambiar Atributos
Usa los métodos setAttribute y getAttribute para modificar
o obtener atributos de un elemento.
javascript
Copy code
[Link](“src”, “[Link]”);
let src = [Link](“src”);
Ejemplo:
html
Copy code
<img id=”miImagen” src=”[Link]” alt=”Imagen”>
<script>
let imagen = [Link](“miImagen”);
[Link](“src”, “[Link]”);
</script>
47
Añadir y Eliminar Elementos
Puedes crear nuevos elementos y añadirlos al DOM, así
como eliminar elementos existentes.
1. Crear Elementos
Usa createElement para crear un nuevo elemento y
appendChild para añadirlo a un elemento existente.
let nuevoElemento = [Link](“div”);
[Link](nuevoElemento);
Ejemplo:
<script>
let nuevoDiv = [Link](“div”);
[Link] = “Nuevo Div”;
[Link](nuevoDiv);
</script>
2. Eliminar Elementos
Usa removeChild para eliminar un elemento hijo de su
elemento padre, o remove para eliminar el elemento
directamente.
let padre = [Link](“padre”);
let hijo = [Link](“hijo”);
[Link](hijo);
let elemento = [Link](“elemento”);
[Link]();
48
BIBLIOGRAFÍA
● Deitel, P., & Deitel, H. (2019). C++ How to Program (10th
ed.). Pearson.
● Duckett, J. (2011). HTML and CSS: Design and Build Websites.
Wiley.
● Flanagan, D. (2020). JavaScript: The Definitive Guide (7th
ed.). O’Reilly Media.
● Gaddis, T. (2019). Starting Out with Python (4th ed.).
Pearson.
● Kernighan, B. W., & Ritchie, D. M. (1988). The C Programming
Language (2nd ed.). Prentice Hall.
● McConnell, S. (2004). Code Complete: A Practical Handbook
of Software Construction (2nd ed.). Microsoft Press.
49
50