MODULO 3 (HTML,CSS Y JAVASCRIPT)

Página 1

JAVA SCRIPT

Lenguaje JavaScript: Visión general y sintaxis

🔥 Conceptos principales:

JavaScript:

➔ Lenguaje de programación basado en ECMAScript.

➔ Inicialmente creado para el navegador Netscape Navigator.

➔ Permite crear páginas web dinámicas (combinando HTML, CSS y scripting).

AJAX (Asynchronous JavaScript and XML):

➔ Arquitectura para hacer solicitudes asincrónicas sin recargar la página.

➔ Hoy en día se usa más JSON en lugar de XML.

Tipos de datos primitivos en JavaScript:

Number: Enteros, decimales, NaN, Infinity.

String: Cadenas de caracteres (entre "dobles" o 'simples').

Boolean: true o false.

null: Representa la ausencia intencional de un valor.

undefined: Cuando una variable no ha sido asignada.

Objetos envolventes: ➔ Tipos primitivos como Number, String, Boolean pueden tener objetos envolventes (new Number(), new String(), etc.)

➔ Permiten agregar métodos como .toString(), .valueOf().

typeof: ➔ Operador para saber el tipo de una variable. Ejemplo:

typeof "Hola"; // "string" typeof 5; // "number"

🛠 Objetos Especiales:

Array:

➔ Colección de datos indexados desde 0.

➔ Puedes usar new Array() o [ ] para crearlos.

Ejemplo:

let frutas = ["manzana", "banana", "cereza"];

Date:

➔ Maneja fechas y horas.

➔ Puedes crear uno con new Date() (actual) o pasando parámetros:

let hoy = new Date(); let cumple = new Date("2000-01-01");

Error:

➔ Maneja excepciones.

➔ Ejemplos: RangeError, ReferenceError, SyntaxError.

📋 Resumen clave:

JavaScript agrega comportamiento a HTML y CSS.

Los primitivos son simples, no tienen métodos.

Los objetos envolventes permiten manipular primitivos como objetos.

Las matrices y objetos de fecha son estructuras comunes.

Errores se manejan como objetos, se pueden extender.

Página 2

JavaScript: Variables y sentencias de control

1. Variables en JavaScript

Definición: Contenedores para almacenar valores de datos.

Declaración: Se usa la palabra clave var, por ejemplo:

var age; var age = 54;

Inicialización: Se puede hacer al declarar o después.

Tipado:

Débil o poco tipado: no se especifica tipo de dato (string, number, etc.).

Dinámico: el tipo puede cambiar en la ejecución.

Valor por defecto: Si no se asigna nada, la variable queda como undefined (no 0, no "", ni ningún otro valor).

2. Reglas para nombres de variables

Deben empezar con una letra, _ (guión bajo) o $.

Después pueden incluir números.

Son case-sensitive (distinguimos entre Age y age).

3. Alcance (Scope) de las variables

Local: Variables dentro de funciones, accesibles solo dentro de ellas.

Global: Variables fuera de funciones o declaradas sin var.

4. Declaraciones de Control

Condicionales

if / else:

if (condición) { // código si es verdadero } else { // código si es falso }

Las llaves {} son opcionales si es una sola línea, pero recomendadas.

No hay bloque de alcance: Variables declaradas dentro de un if se pueden usar afuera.

switch

Alternativa a múltiples if/else.

Ejemplo:

switch (expresión) { case "valor1": // código break; case "valor2": // código break; default: // código por defecto }

Importante usar break para no continuar ejecutando los siguientes case.

5. Bucles (Loops)

for

Tres partes: inicialización; condición; actualización:

for (var i = 0; i < 5; i++) { console.log(i); }

while

Ejecuta mientras una condición sea verdadera:

var i = 0; while (i < 5) { console.log(i); i++; }

Cuidado con los bucles infinitos: asegúrate de que la condición pueda llegar a ser falsa.

6. Resumen del video

Declaración de variables con var.

No se define el tipo de datos explícitamente.

Alcance de variables (local y global).

Declaraciones de control: if/else, switch, for, while.

Página 3

JavaScript: Funciones y prototipos

Funciones y Prototipos en JavaScript

¿Qué es una función en JavaScript?

Es un bloque de código que se puede llamar desde cualquier punto de un script después de su declaración.

Compuesta por:

Palabra clave function

Nombre de la función

Paréntesis () que pueden incluir parámetros opcionales

Llaves {} que contienen la lógica de la función

Opcionalmente una instrucción return para devolver un valor.

Ejemplo de Función add

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

Nota:

JavaScript no especifica tipos de datos para los argumentos.

El tipo de retorno depende de los argumentos.

Si los argumentos son números → suma.

Si son cadenas → concatenación.

Funciones como Constructores de Objetos

Ejemplo de función Car

function Car(make, model, year) { this.make = make; this.model = model; this.year = year; }

Para crear un objeto:

var c = new Car('Meridian', 'Sabre GT', 2012);

Uso de this:

this.make se refiere a la propiedad del objeto que se está creando, no al parámetro.

this representa la instancia actual del objeto.

¿Qué es un prototipo en JavaScript?

Todos los objetos creados con new heredan propiedades y métodos de un prototipo.

Modificar el prototipo permite:

Agregar métodos o propiedades a todas las instancias del objeto con una sola llamada.

Ejemplo de adición de un método usando prototipo:

Car.prototype.getName = function() { return this.make + " " + this.model + " " + this.year; }

Resultado:

Todas las instancias existentes y futuras de Car tendrán el método getName.

Funciones Autoejecutables (IIFE - Immediately Invoked Function Expressions)

Se ejecutan inmediatamente después de ser declaradas.

Sus variables y funciones no afectan al resto del script (encapsuladas).

Ejemplo de una IIFE:

(function() { var x = 10; console.log(x); })();

Usos comunes:

Inicializar datos.

Configurar elementos del DOM.

Resumen Final

Las funciones son bloques de código reutilizables.

Los prototipos permiten extender objetos de forma eficiente.

Las funciones autoejecutables ayudan a encapsular el código y protegerlo del entorno global.

Página 4

API de JavaScript

🧩 Trabajar con Nodos en JavaScript

1. Recuperar elementos del DOM

document.getElementById('id'): Recupera un elemento específico por su atributo id.

document.getElementsByTagName('tagname'): Devuelve una lista (tipo colección) de todos los elementos de un tipo de etiqueta específico (como todos los <p>, <img>, etc.).

Ejemplo:

let elemento = document.getElementById('miId'); let parrafos = document.getElementsByTagName('p');

2. Crear y agregar nuevos elementos

document.createElement('tagname'): Crea un nuevo elemento HTML.

Luego puedes añadirlo usando:

appendChild (lo agrega al final de otro nodo).

insertBefore (lo inserta antes de un nodo específico).

replaceChild (reemplaza un nodo existente).

Ejemplo:

let nuevoParrafo = document.createElement('p'); let texto = document.createTextNode('Hola Mundo'); nuevoParrafo.appendChild(texto); document.body.appendChild(nuevoParrafo);

3. Modificar contenido HTML

element.innerHTML:

Recupera o establece el contenido interno de un elemento.

Al asignarle un nuevo valor, se reemplazan todos los nodos hijos actuales.

Ejemplo:

elemento.innerHTML = '<strong>Nuevo contenido</strong>';

4. Modificar estilo en línea

element.style.propertyName = 'valor': Cambia los estilos CSS directamente desde JavaScript.

Ejemplo:

document.getElementById('miDiv').style.color = 'blue';

También puedes:

element.setAttribute('attributeName', 'value'): Modifica o añade atributos.

element.removeAttribute('attributeName'): Elimina un atributo.

element.getAttribute('attributeName'): Recupera el valor de un atributo.

5. Métodos y eventos del objeto window

Abrir una nueva ventana: window.open(url, name, features, replace)

Ejecutar una función al cargar la página: window.onload

Escribir en la consola: window.dump('mensaje')

Desplazarse a coordenadas: window.scrollTo(x, y)

Ejemplo:

window.onload = function() { console.log('La página ha cargado'); }; window.scrollTo(0, 100);

📚 Conceptos adicionales mencionados

CTI, DES, UO, PERT, IA: Se refieren a otras API o metodologías relacionadas, pero no se detallan en este video.

Página 5

JavaScript del lado del cliente: con HTML

1. ¿Qué es un script del lado del cliente?

Un script del lado del cliente es un programa que:

Acompaña a un documento HTML o está incrustado directamente en el documento.

Se ejecuta en el dispositivo del usuario (cliente), no en el servidor.

Se activa cuando:

Se carga la página.

El usuario interactúa (por ejemplo, hace clic en un botón).

Lenguaje típico: JavaScript (aunque se pueden usar otros).

¿Para qué sirve?

Modificar, extender y hacer más interactivos los documentos HTML.

Mejorar la experiencia del usuario.

2. Ejemplos de uso de un script del lado del cliente

Validar formularios antes de enviarlos.

Procesar entradas mientras el usuario escribe.

Responder a eventos como:

Clics en botones.

Movimiento del mouse.

Crear o modificar elementos en una página HTML de manera dinámica.

3. ¿Cómo se usa la etiqueta <script>?

Hay dos formas principales:

Incrustar el script directamente en el HTML:

<script> alert('Hola mundo'); </script>

Ideal para scripts cortos.

Enlazar a un archivo externo usando el atributo src:

<script src="mi-archivo.js"></script>

Ideal para scripts largos o para reutilizar código en varias páginas.

4. ¿Qué es la etiqueta <noscript>?

Se usa para proporcionar contenido alternativo si:

El navegador no admite JavaScript.

El usuario desactiva JavaScript.

Ejemplo:

<noscript> Tu navegador no soporta JavaScript o está desactivado. </noscript>

5. ¿Qué es la vinculación de eventos en scripts?

La vinculación de eventos es hacer que un script se ejecute automáticamente cuando ocurre un evento específico.

Ejemplos de eventos comunes:

onLoad → ejecuta una función al cargar la página.

onClick → ejecuta una función al hacer clic en un botón.

onMouseOver → ejecuta una función cuando el mouse pasa sobre un elemento.

Ejemplo de código:

<button onclick="mostrarMensaje()">Haz clic</button> <script> function mostrarMensaje() { alert('¡Botón clickeado!'); } </script>

6. Resumen final

Un script del lado del cliente extiende HTML para hacerlo más interactivo.

Se puede incrustar directamente o cargar desde un archivo externo.

Se usa <noscript> para manejar navegadores que no soporten scripts.

La vinculación de eventos permite ejecutar scripts automáticamente cuando ocurren acciones del usuario.

Página 6

JavaScript del lado del cliente: con DOM

🧠 ¿Qué es el DOM?

El Modelo de Objetos del Documento (DOM) es una interfaz de programación que conecta HTML (o XHTML) con JavaScript.

Permite acceder, modificar y actualizar dinámicamente:

El contenido

La estructura

El estilo de una página web

El DOM convierte el documento HTML en una estructura de árbol que puede ser manipulada con scripts.

📢 Dato clave: JavaScript usa el DOM para modificar la página web mientras se visualiza en el navegador.

🌳 Niveles del DOM

El W3C definió 4 niveles del DOM:

Cada uno añade más capacidades para manipular documentos.

Nivel 1 del DOM es el más básico y ampliamente soportado por todos los navegadores modernos.

🧱 Jerarquía del DOM

La jerarquía del DOM tiene esta estructura principal:

window

Objeto raíz. Representa la ventana del navegador.

Es el objeto global: todo sucede dentro de él.

Métodos comunes:

window.alert()

window.confirm()

window.prompt()

Se puede omitir el window. y escribir solo alert(), confirm(), etc.

document

Representa el contenido HTML de la página.

Permite acceder a etiquetas, cambiar texto, añadir elementos, etc.

Otros objetos del entorno:

history: simula los botones Adelante/Retroceso.

location: información sobre la URL actual.

navigator: información sobre el navegador del cliente (no siempre es uniforme).

screen: detalles sobre la pantalla del dispositivo (muy útil en móviles).

🌿 Estructura en árbol del DOM

El DOM representa el HTML como un árbol jerárquico de nodos.

Tipos de nodos:

Nodos de elemento → etiquetas HTML (como <p>, <form>, <input>, etc.)

Nodos de texto → el contenido textual entre etiquetas

Espacios en blanco (saltos de línea, tabulaciones, etc.) también pueden ser nodos en niveles más altos (como DOM Nivel 2).

🧩 Ejemplo visual (resumido):

window └── document ├── html │ ├── head │ └── body │ ├── p (Nodo de elemento) │ │ └── "Hola Mundo" (Nodo de texto) │ └── input (Nodo de elemento)

✅ ¿Qué aprendiste?

El DOM permite a JavaScript interactuar con documentos HTML.

Es una jerarquía de objetos donde window es el objeto global.

document te da acceso a todos los elementos HTML de la página.

Existen diferentes niveles del DOM, siendo el nivel 1 el más compatible.

Los documentos HTML se transforman en árboles DOM con nodos que puedes manipular.

Página 7

Objetos DOM de JavaScript

🧱 Tipos de nodos en el DOM (DOM Nivel 2)

El W3C define 12 tipos de nodos, pero 7 son más relevantes para HTML. Los más comunes son:

Tipo de nodoConstante DOMValor numérico

Elemento HTMLELEMENT_NODE1

AtributoATTRIBUTE_NODE2

TextoTEXT_NODE3

ComentarioCOMMENT_NODE8

🧠 Ejemplo: Un <div id="div123">Hola</div> genera:

Nodo de tipo 1 → elemento div

Nodo de tipo 2 → atributo id="div123"

Nodo de tipo 3 → texto "Hola"

🏷️ Nombres y valores de nodos

El nombre de un nodo tipo elemento es el nombre de la etiqueta (por ejemplo, "div", "p", "form").

El nombre del nodo tipo texto es #text, y su valor es el texto real dentro del elemento.

🔍 Propiedades de los nodos

Los nodos tienen propiedades que se pueden ver en herramientas como DevTools en los navegadores. Algunas comunes:

nodeType: número del tipo de nodo

nodeName: nombre del nodo

nodeValue: valor del nodo (aplicable a nodos de texto)

🧭 Acceso a elementos HTML

Cuando se carga la página, el navegador crea matrices internas para varios grupos de elementos:

GrupoMatriz creada por el navegador

Formulariosdocument.forms

Imágenesdocument.images

Enlacesdocument.links, document.anchors, etc.

🔢 Índice: Los elementos se ordenan en las matrices en el orden en que aparecen en el HTML (empiezan en 0).

✏️ Formas de acceder a elementos

🔸 Por índice:

document.forms[0].elements[0]

🔸 Por nombre:

document.forms["form1"].elements["field1"] // o document.form1.field1

✅ Nota: Siempre debes usar el prefijo document, aunque window se puede omitir.

🆔 Uso del atributo id

El atributo id sirve para identificar unívocamente un elemento dentro del documento HTML.

El id debe:

Ser único

Estar entre comillas (id="miElemento")

No comenzar con un número

📥 Función para obtener un elemento por ID:

document.getElementById("miElemento")

✅ Recomendación: Usa el mismo valor para id y name si vas a usar ambos atributos, para facilitar el acceso en los scripts.

✅ ¿Qué aprendiste?

A identificar los tipos de nodos del DOM y sus valores numéricos.

A navegar el DOM mediante notación de punto y matrices.

A nombrar correctamente los elementos HTML usando id y acceder a ellos fácilmente con getElementById.

Página 8

Module 3 Glossary: JavaScript Programming for Web Applications

TermDefinition

AJAX: “Asynchronous JavaScript and XML” that encompasses more than asynchronous server calls through JavaScript and XML. It is not programming language or technology but rather a programming concept. Ajax represents a series of techniques that provide richer, interactive web applications through HTML, JavaScript, Cascading style sheets, and modifying the web page through the Document Object Model. The name is misleading though because nowadays, JSON is commonly used instead of XML.

Anonymous Functions: A type of function that has no name or we can say which is without any name. It is declared without any identifier and is often used as a parameter of another function. It is a common way to execute a function immediately after its declaration.

Array: A data structure that aids the programmer in the storage and retrieval of data by indexed keys. Arrays use a zero-based indexing scheme, meaning that the first element of an array has an index of zero. Arrays grow or shrink dynamically by adding or removing elements.

Classes: Classes act as a blueprint or template for building objects with similar characteristics and behaviours. A class encapsulates data (in the form of properties) and functions (in the form of methods) that work on that data.

Client-Side Script: A program that accompanies an HTML doc or embedded in HTML. Scripts run during load of a document or when an action is performed.

They can be used to validate forms, process input, or dynamically create document elements.

Embed a script in HTML, with the <script> tag in either of the following ways:

• <script> // JS code </script>

• <script src="path name"></script>

Use <noscript> tag for browsers with JavaScript disabled or ones that don’t support JavaScript.

Document ObjectsDocument representing the main web page that gives access to all HTML elements on the page. When page is loaded HTML doc becomes a document. It is referred to with “document”.

DOM“Document Object Model” is a programming interface (API) between HTML and JavaScript. It allows for dynamically accessing and updating content, structure, and style. JavaScript uses the DOM to access and modify web page elements in the browser.

Element NodesAll HTML tags.

Element ObjectsThe most general base class that all element objects in a Document inherit. It only has methods and properties common to all elements. Everything in a HTML page is an element. And one element can have other elements nested within itself.

EventAn event is something either a browser or a user does that the JavaScript can react to such as a button click or when a user submits input on a form.

Event BindingRefers to telling the browser that a function should be called whenever some ‘event’ occurs.

Event HandlersA function that declares what to do when an action is performed such as the click of a button. Example:

<button type="button" onclick="showAnswers()"> Show Solution

<script>

function showAnswers() {

//code

alert("A")

}

</script>

</button>

Note that showAnswers() is an event handler.

ExtendThis keyword is used in class declarations or class expressions to create a class that is a child of another class.

FunctionsFunctions are modules of code that execute a particular task. They may take-in data, called arguments or parameters, and sometimes return data as well, called the return value. Functions are commonly defined with this syntax:

function functionName() {

// function code;

// optional return statement;

}

IIFE“Immediately Invoked Function Expression” runs immediately after it is defined. After the function executes it cannot be called again elsewhere in the program. It is a type of self-executing function.

NodesThe basis of all elements in the Document Object Model (DOM) structure.

ObjectsObjects are instances created from a class. They are real-world entities that represent the characteristics defined by the class. Objects have a special set of properties that store data and methods that specify behaviours. These methods and properties can be accessed and changed to carry out specific tasks and communicate with other programs.

PrototypesA function prototype lets you easily define and add properties or methods to an object. Prototypes exist for all objects that can be created with the keyword”new”. All object constructors create objects that inherit properties and methods that are defined by the prototype. At instantiation objects inherit the current state of the prototype. Note however, that scripts can override prototype properties and functions. Following is an example of using a prototype to add a method to the Car class:

function Car(make, model, year) {

this.make = make;

this.model = model;

this.year = year;

}

Car.prototype.getName = function() {

return this.make + ‘ ’ + this.model + ‘ ’ + this.year;

}

ScriptOffers developers means to modify and extend HTML documents in highly interactive ways. Scripts can be used to validate forms or to process input as it is typed. Scripts can be triggered by events that occur on a web page, such as the clicking of a button. Scripts can be used to dynamically create document elements on an HTML page.

Self-Executing FunctionsOften used to initialize data or declare DOM elements. These functions can be anonymous.

Text NodesThe nodes that contain actual text that go between an element start tag and end tag.

thisKeyword “this” refers to current instance of the object. The value of “this” can vary depending on how the object is called.