JAVASCRIPT

Desarrollo de Páginas WebIngeniería en Sistemas Computacionales Claudia Beatriz Argaez Martínez

Java Script

+ Info

• Desarrollo Web
• Desarrollo de Aplicaciones Móviles
• Desarrollo del Lado del Servidor
• Juegos en Línea
• Automatización y Scripts

Usos de JavaScript

JavaScript es un lenguaje de programación de alto nivel, que permite implementar funciones complejas en paginas web. Es parte de las capas de tecnologías web estándar, además de HTML y CSS. JavaScript está orientado a objetivos y se utiliza principalmente para crear interactividad y dinamismo en las paginas web.

Java Script

+ Info

Las variables en JavaScript se pueden definir utilizando tres palabras clave: var, let y const. Cada una de estas palabras clave tiene características y comportamientos diferentes

Variables en Java Script

+ Info

+ Info

• Object
• Array

Tipos de Datos Compuestos

• String
• Number
• Boolean
• Undefined
• Null
• Symbol
• BigInt

Tipos de Datos Primitivos

Principales variables en Java Script

1. Declaración de Variables: Las variables se utilizan para almacenar datos y se pueden declarar utilizando var, let o const. La elección de cuál usar depende del alcance y la mutabilidad deseada.
2. Tipos de Datos: JavaScript admite varios tipos de datos, que se pueden clasificar en primitivos (como String, Number, Boolean, Undefined, Null, Symbol, y BigInt) y compuestos (como Object y Array).
3. Funciones: Las funciones son bloques de código que se pueden definir y reutilizar.
4. Estructuras de Control: JavaScript incluye varias estructuras de control que permiten tomar decisiones y repetir acciones:
1. Condicionales: if, else if, else, switch.
2. Bucles: for, while, do...while.
5. Objetos y Arrays: Los objetos son colecciones de pares clave-valor, y los arrays son listas ordenadas de elementos. Ambos son fundamentales para la estructura de datos en JavaScript.
6. Manejo de Eventos: JavaScript permite interactuar con el usuario a través de eventos, como clics, desplazamientos y entradas de teclado. Se pueden agregar manejadores de eventos a elementos del DOM.
7. Módulos: A partir de ECMAScript 6 (ES6), JavaScript permite la creación de módulos, que son archivos que pueden exportar e importar funciones, objetos o variables. Esto ayuda a organizar el código en aplicaciones más grande.

Estructuración del uso de funciones en Java Script

Desarollo

Una empresa llamada "Tech Solutions" necesita un formulario de solicitud de empleo en su sitio web. El formulario debe capturar datos como nombre, correo electrónico, número de teléfono, y una breve descripción de la experiencia del candidato.

SITUACION PRACTICA

Referencias bibliográficas

• Lenguaje Orientado a Objetos: Permite la creación de objetos y el uso de la programación orientada a objetos, lo que facilita la organización y reutilización del código.
• Multiplataforma: Puede ejecutarse en diferentes entornos, no solo en navegadores web. Como Node.js y para desarrollar aplicaciones del lado del servidor, aplicaciones de escritorio y aplicaciones móviles.
• Asincronía: Mediante el uso de promesas y la sintaxis async/await, permite la ejecución de operaciones asíncronas, realizando tareas en segundo plano.

Características de JavaScript

• Lenguaje de Script: Lenguaje de script que se ejecuta en el navegador del cliente, no requiere un compilador y se interpreta directamente en el navegador.
• Interactividad: Permite agregar interactividad a las páginas web, como responder a eventos de usuario (clics, desplazamientos, entradas de teclado, etc.), mejorando la experiencia del usuario.
• Manipulación del DOM: Puede interactuar y manipular el Document Object Model (DOM). Esto permite modificar el contenido, la estructura y el estilo de una página web de manera dinámica.

const

Alcance de bloque, no permite redeclaraciones ni reasignaciones, pero permite la modificación de objetos y arrays.

let

Alcance de bloque, no permite redeclaraciones en el mismo bloque, y no se puede usar antes de su declaración.

var

Alcance de función o global, permite redeclaraciones, y es hoisted.

<h1>Formulario de Solicitud de Empleo</h1> <form id="solicitudForm"> <label for="nombre">Nombre Completo:</label> <input type="text" id="nombre" name="nombre" required> <label for="email">Correo Electrónico:</label> <input type="email" id="email" name="email" required> <label for="telefono">Número de Teléfono:</label> <input type="tel" id="telefono" name="telefono" required> <label for="experiencia">Descripción de la Experiencia:</label> <textarea id="experiencia" name="experiencia" rows="4" required></textarea> <button type="submit">Enviar Solicitud</button> </form> <div id="mensaje"></div> <script> document.getElementById("solicitudForm").addEventListener("submit", function(event) { event.preventDefault(); // Evita el envío del formulario por defecto // Captura los valores ingresados const nombre = document.getElementById("nombre").value.trim(); const email = document.getElementById("email").value.trim(); const telefono = document.getElementById("telefono").value.trim(); const experiencia = document.getElementById("experiencia").value.trim(); const mensajeDiv = document.getElementById("mensaje"); // Validación de datos let mensajeError = ""; if (!nombre) { mensajeError += "El nombre es obligatorio.<br>"; } if (!validateEmail(email)) { mensajeError += "El correo electrónico no es válido.<br>"; } if (!validatePhone(telefono)) { mensajeError += "El número de teléfono no es válido. Debe contener solo números y tener 10 dígitos.<br>"; } if (!experiencia) { mensajeError += "La descripción de la experiencia es obligatoria.<br>"; } // Mostrar mensaje de error o éxito if (mensajeError) { mensajeDiv.innerHTML = mensajeError; mensajeDiv.style.color = "red"; } else { mensajeDiv.innerHTML = "Solicitud enviada con éxito. ¡Gracias por postularte!"; mensajeDiv.style.color = "green"; // Aquí puedes agregar el código para enviar los datos al servidor // Por ejemplo, usando fetch() o XMLHttpRequest document.getElementById("solicitudForm").reset(); // Reiniciar el formulario } }); // Función para validar el formato del correo electrónico function validateEmail(email) { const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return regex.test(email); } // Función para validar el formato del número de teléfono function validatePhone(telefono) { const regex = /^\d{10}$/; // Asegura que el número tenga exactamente 10 dígitos return regex.test(telefono); } </script> </body> </html>

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Formulario de Solicitud de Empleo</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } form { max-width: 400px; margin: auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; background-color: #f9f9f9; } label { display: block; margin: 10px 0 5px; } input, textarea { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; } button { padding: 10px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #45a049; } #mensaje { margin-top: 20px; font-weight: bold; } </style> </head> <body>

• String: Representa una secuencia de caracteres. Se puede definir utilizando comillas simples ('), comillas dobles ("), o comillas invertidas (`) para plantillas literales.
• Number: Representa tanto números enteros como decimales. No hay distinción entre enteros y flotantes.
• Boolean: Representa un valor verdadero (true) o falso (false).
• Undefined: Indica que una variable ha sido declarada pero no se le ha asignado un valor.
• Null: Representa la ausencia intencionada de un valor. Se utiliza para indicar que una variable no tiene valor.
• Symbol: Introducido en ECMAScript 6, representa un identificador único e inmutable. Se utiliza principalmente como claves de propiedades de objetos.
• BigInt: Permite trabajar con números enteros que son demasiado grandes para ser representados por el tipo Number. Se define añadiendo n al final del número.

Object Es una colección de pares clave-valor. Los objetos pueden contener propiedades y métodos. Array Es un tipo especial de objeto que permite almacenar una lista de valores. Los elementos se pueden acceder mediante índices.