Scribd
Cargar
16 vistas33 páginas

Web 03 Programación Del Lado Del Cliente

El documento es una guía sobre programación del lado del cliente, enfocándose en JavaScript y su uso en el desarrollo web. Se abordan conceptos clave como variables, tipos de datos, estructuras de control, manipulación del DOM, y el uso de frameworks como React, Angular y Vue.js. También se explica el formato JSON y su integración en aplicaciones web para el intercambio de datos.

Cargado por

alipaslara18
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
16 vistas33 páginas

Web 03 Programación Del Lado Del Cliente

El documento es una guía sobre programación del lado del cliente, enfocándose en JavaScript y su uso en el desarrollo web. Se abordan conceptos clave como variables, tipos de datos, estructuras de control, manipulación del DOM, y el uso de frameworks como React, Angular y Vue.js. También se explica el formato JSON y su integración en aplicaciones web para el intercambio de datos.

Cargado por

alipaslara18
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
Está en la página 1/ 33

P R O G R A M A C I Ó N W E B

PROGRAMACIÓN
DEL LADO DEL
CLIENTE
Docente: Carlos Castillo Quezada
INTRODUCCIÓN AL LENGUAJE

CON MANEJO DE FRAMEWORKS

TENIDO ESTRUCTURAS DE CONTROL

MANIPULACIÓN DE OBJETOS
LENGUAJE DEL
LADO DEL CLIENTE
Es un lenguaje de programación que se ejecuta en el navegador del
usuario, sin necesidad de depender de un servidor para cada interacción.
JavaScript es el lenguaje más utilizado para este propósito.
Interactividad: Permite manipular el DOM (Document Object Model)
para responder a eventos como clics, movimientos del mouse, y más.
Portabilidad: Se ejecuta en todos los navegadores modernos.
Flexibilidad: Puede trabajar junto con HTML y CSS para crear
aplicaciones completas.
JAVASCRIPT: VARIABLES
JavaScript tiene una sintaxis clara y sencilla. Todo el código se escribe en bloques de instrucciones,
cada una terminada con un punto y coma (;).

Las variables son contenedores para almacenar datos. Hay tres formas principales de declararlas:
var: Declaración global o de función (obsoleta en proyectos modernos).
let: Declaración de bloque (recomendada para variables cambiantes).
const: Declaración constante (no se puede reasignar).
JAVASCRIPT: TIPOS DE DATOS
JavaScript tiene tipos de datos primitivos y complejos:
Primitivos: string, number, boolean, undefined, null, symbol, bigint.
Complejos: object (incluyendo array, function).
JAVASCRIPT: OPERADORES
JAVASCRIPT: CONDICIONALES
Condicionales: Permiten ejecutar código basado en condiciones.
JAVASCRIPT: BUCLES
Bucles: Se utilizan para repetir bloques de código.
for: Ciclo con un número determinado de repeticiones.
while: Ciclo mientras una condición sea verdadera.
JAVASCRIPT: ARREGLOS Y
OBJETOS
Arrays: Son colecciones ordenadas de elementos.
Objetos: Son colecciones de pares clave-valor.
JAVASCRIPT: MANEJO DE
ERRORES
Manejo de errores: Permite manejar errores de forma controlada.
JAVASCRIPT: FUNCIONES
Las funciones son bloques de código reutilizables que realizan una tarea específica.
MANEJO DE
FRAMEWORKS
Los frameworks del lado del cliente en JavaScript son herramientas que
ayudan a desarrollar aplicaciones web dinámicas y escalables. Estos
frameworks simplifican tareas comunes como la manipulación del DOM, la
gestión de datos y la interacción con APIs.
Un framework del lado del cliente es una biblioteca o conjunto de
herramientas que proporciona una estructura predefinida para desarrollar
aplicaciones web. Ayudan a:
Modularizar el código.
Crear interfaces de usuario (UI) interactivas.
Simplificar la comunicación con servidores.
Mejorar la productividad del desarrollador.
REACT
Desarrollado por: Facebook.
Características principales:
Basado en componentes.
Utiliza JSX, una sintaxis similar a
HTML para definir componentes.
Actualizaciones eficientes gracias al
Virtual DOM.
REACT
ANGULAR
Desarrollado por: Google.
Características principales:
Framework completo basado en
TypeScript.
Soporte para aplicaciones grandes.
Incluye herramientas integradas
como enrutamiento y servicios
HTTP.
ANGULAR
VUE.JS
Desarrollado por: Evan You.
Características principales:
Ligero y fácil de aprender.
Adopta un enfoque progresivo, lo
que permite usarlo parcialmente o
en proyectos completos.
Excelente integración con HTML y
CSS
VUE.JS
OTROS FRAMEWORKS
Svelte: Framework que compila su lógica en tiempo de compilación,
optimizando el rendimiento de las aplicaciones.

jQuery: Biblioteca que simplifica la manipulación del DOM, eventos y


animaciones, popular por su simplicidad y compatibilidad, aunque
superada por frameworks modernos.

Backbone.js: Framework ligero basado en el patrón MVP, ideal para


aplicaciones de una sola página, con manejo simple de eventos y
sincronización de datos.
DOM
El DOM (Document Object Model) es una interfaz de
programación que permite a los lenguajes de programación,
como JavaScript, interactuar con el contenido y la estructura de
un documento HTML o XML. El DOM representa el documento
como una jerarquía de objetos, donde cada objeto es un nodo
del documento.

El DOM convierte el documento HTML o XML en un conjunto de


objetos que pueden ser manipulados a través de JavaScript.
Los elementos de la página, como las etiquetas <div>, <p>, <a>,
etc., se convierten en nodos de un árbol, donde cada nodo
puede ser modificado, eliminado o creado dinámicamente.
DOM
El DOM es una estructura jerárquica. La raíz del árbol es el objeto document, que representa el documento
completo. A partir de ahí, el documento se divide en nodos (elementos, atributos y texto) y cada nodo puede tener
otros nodos como hijos.
ACCEDER A ELEMENTOS DOM
getElementById(): Devuelve un elemento que tiene el id especificado.

getElementsByClassName(): Devuelve todos los elementos que tienen la clase especificada.


ACCEDER A ELEMENTOS DOM
querySelector(): Devuelve el primer elemento que coincide con el selector CSS proporcionado.

querySelectorAll(): Devuelve todos los elementos que coinciden con el selector CSS proporcionado.
MODIFICAR ELEMENTOS DOM
Modificar el contenido: Puedes cambiar el contenido de un elemento usando las propiedades textContent
o innerHTML.

Modificar atributos: Puedes modificar los atributos de los elementos, como href de un enlace o src de una
imagen.
MODIFICAR ELEMENTOS DOM
Agregar o eliminar clases: Usa classList para agregar o quitar clases de un elemento.
CREAR Y ELIMINAR
ELEMENTOS DOM
Crear elementos: Puedes crear nuevos elementos HTML usando createElement().

Eliminar elementos: Puedes eliminar un elemento usando removeChild().


EVENTOS EN EL DOM
El DOM también permite asociar eventos a los elementos HTML, como clics, cambios o envíos de
formularios.
addEventListener(): Este método permite añadir un manejador de eventos a un elemento.
JSON
JSON (JavaScript Object Notation) es un formato ligero
de intercambio de datos que es fácil de leer y escribir
para los humanos y fácil de parsear y generar para las
máquinas. JSON es ampliamente utilizado en la web
para transmitir datos entre servidores y aplicaciones
web, principalmente debido a su simplicidad y eficiencia.

JSON es un formato basado en texto que representa


datos estructurados de forma sencilla y con una sintaxis
similar a los objetos de JavaScript.
JSON
La sintaxis de JSON sigue una estructura de pares clave-valor, similar a un objeto en JavaScript,
pero con ciertas restricciones.
Objetos: Se encierran entre llaves {} y contienen pares clave-valor.
Arrays: Se encierran entre corchetes [] y contienen una lista de valores.
Claves: Son siempre cadenas de texto (strings) entre comillas dobles " ".
Valores: Pueden ser cadenas, números, objetos, arrays, valores booleanos (true/false), o null.
JSON EN JAVASCRIPT
Para enviar datos a través de una red o almacenarlos, es necesario convertir un objeto JavaScript
en una cadena JSON. Esto se logra mediante el método JSON.stringify().
JSON EN JAVASCRIPT
Una vez que tienes una cadena JSON, puedes convertirla de nuevo a un objeto JavaScript
utilizando JSON.parse().
JSON EN JAVASCRIPT
El uso de JSON con arrays también es común, ya que JSON puede representar listas de valores o
elementos.
BIBLIOGRAFÍA
Gauchat, J. D. (2012). El gran libro de HTML5, CSS3 y JavaScript. Editorial Marcombo.
S. a. (S. f.). Las 4 opciones top de frameworks JavaScript para desarrollo web en 2024. Vailos.
https://www.vailos.com/top-frameworks-js-2022/
Valencia, A. (2023). Los tops frameworks para Front End. CodersLink.
https://coderslink.com/talento/blog/los-top-frameworks-para-front-end/

También podría gustarte