Tema 06 - Manual Básico de JavaScript PDF

MANUAL BÁSICO DE Manual Básico de JavaScript © 2024 by Juan Pueyo is licensed under CC BY-NC-ND 4.0 Manual Básico de JavaScript Juan Pueyo Contenido Capítulo 1. Introducción................................................................................................................ 8 1.1. ¿Qué es JavaScript?............................................................................................................ 8 Frontend (Lado del Cliente):.................................................................................................. 8 Backend (Lado del Servidor):................................................................................................. 9 1.2. Breve historia...................................................................................................................... 9 1.3. Especiﬁcaciones oﬁciales................................................................................................. 10 1.4. Cómo incluir JavaScript en documentos HTML................................................................ 11 Atributo defer o async:........................................................................................................ 12 1.5. E queta noscript.............................................................................................................. 12 1.6. Sintaxis.............................................................................................................................. 12 1. Mayúsculas y minúsculas:............................................................................................... 12 2. Espacios en Blanco:......................................................................................................... 13 3. Punto y Coma (;):............................................................................................................. 13 4. Bloques de Código:.......................................................................................................... 13 5. Comentarios:................................................................................................................... 13 6. Cadenas de Texto:............................................................................................................ 13 7. Variables:......................................................................................................................... 14 1.8. Posibilidades y limitaciones.............................................................................................. 14 Posibilidades........................................................................................................................ 14 Limitaciones........................................................................................................................ 14 1.9. JavaScript y navegadores.................................................................................................. 15 Capítulo 2. Programación Básica................................................................................................. 16 2.1. Variables........................................................................................................................... 16 2.1.1 Iden ﬁcadores............................................................................................................ 16 2.1.2. Declaración de variables........................................................................................... 17 2.1.3. Tipos de variables...................................................................................................... 19 1. Operadores Aritmé cos:................................................................................................. 20 2. Operadores de Asignación:............................................................................................. 20 3. Operadores de Comparación:......................................................................................... 21 4. Operadores Lógicos:........................................................................................................ 21 5. Operadores de Concatenación:....................................................................................... 21 6. Operador Ternario:.......................................................................................................... 22 7. Operador de Incremento/Decremento:.......................................................................... 22 2.3. Estructuras de control de ﬂujo......................................................................................... 23 3 Manual Básico de JavaScript Juan Pueyo 2.3.1. Estructura if…else...................................................................................................... 23 2.3.2. Estructura switch....................................................................................................... 24 2.3.3. Estructura while........................................................................................................ 25 2.3.4. Estructura do…while.................................................................................................. 25 2.3.5. Estructura for............................................................................................................. 26 2.3.6. break y con nue........................................................................................................ 26 2.3. Arrays................................................................................................................................ 28 2.3.1. Declaración de un Array:........................................................................................... 28 2.3.2. Acceso a Elementos:.................................................................................................. 28 2.3.3. Modiﬁcación de Elementos:...................................................................................... 28 2.3.4. Longitud del Array:.................................................................................................... 28 2.3.5. Iteración a través del Array:...................................................................................... 29 2.3.6. Estructura for...in....................................................................................................... 29 2.3.6. Estructura for...of....................................................................................................... 29 2.3.6. Método forEach()...................................................................................................... 30 2.3.7. Recomendaciones..................................................................................................... 30 2.4. Arrays de múl ples dimensiones..................................................................................... 31 2.5. Métodos con cadenas ú les en JavaScript....................................................................... 32 Métodos toUpperCase() y toLowerCase()........................................................................... 32 Métodos charAt, indexOf y lastIndexOf.............................................................................. 32 Método substring................................................................................................................ 33 Método split........................................................................................................................ 33 Atributo length.................................................................................................................... 34 2.6. Métodos con arrays ú les en JavaScript.......................................................................... 34 Atributo length.................................................................................................................... 34 Método concat.................................................................................................................... 34 Método join......................................................................................................................... 34 Método push....................................................................................................................... 35 Método pop......................................................................................................................... 35 Método shi........................................................................................................................ 35 Método unshi.................................................................................................................... 35 Método reverse................................................................................................................... 36 Método slice........................................................................................................................ 36 2.7. Conversión explícita de pos............................................................................................ 36 Number para conversión a número.................................................................................... 36 String para conversión a cadena......................................................................................... 36 4 Manual Básico de JavaScript Juan Pueyo Boolean para conversión a booleano.................................................................................. 36 2.8. Otras funciones de conversión......................................................................................... 37 parseInt para conver r una cadena a entero...................................................................... 37 parseFloat para conver r una cadena a decimal................................................................ 37 2.9. Otras funciones................................................................................................................ 37 Función isNaN..................................................................................................................... 37 Función eval........................................................................................................................ 38 2.9. EJERCICIO.......................................................................................................................... 38 3. Funciones................................................................................................................................ 39 3.1. Deﬁnición y llamada a una función.................................................................................. 39 3.2. Lugar de deﬁnición de las funciones................................................................................ 39 3.3. Parámetros....................................................................................................................... 40 3.4. Paso de parámetros por valor........................................................................................... 40 3.5. Retorno de funciones....................................................................................................... 41 3.6. Ámbito de las variables.................................................................................................... 41 3.6.1. Ámbito Global........................................................................................................... 41 3.6.2. Ámbito Local.............................................................................................................. 41 4. DOM........................................................................................................................................ 43 4.1. Principales conceptos del DOM:...................................................................................... 43 1. Nodos.............................................................................................................................. 43 2. Árbol de Nodos................................................................................................................ 43 4.2. Tipos de nodos................................................................................................................. 44 1. Element Node (Nodo de Elemento)................................................................................ 44 2. Atribute Node (Nodo de Atributo)................................................................................. 44 3. Text Node (Nodo de Texto).............................................................................................. 45 4. Comment Node (Nodo de Comentario).......................................................................... 45 5. Document Node (Nodo de Documento)......................................................................... 45 6. DocumentType Node (Nodo de DocumentType)............................................................ 45 4.3. Acceso a los nodos del DOM............................................................................................ 45 Manipulación Dinámica del Contenido............................................................................... 45 Interac vidad del Usuario................................................................................................... 45 Validación y Modiﬁcación de Formularios.......................................................................... 45 Animaciones y Transiciones................................................................................................. 46 Dinámica de Es los y Clases................................................................................................ 46 Manipulación de Eventos.................................................................................................... 46 Actualización Asíncrona de Contenido con AJAX................................................................ 46 5 Manual Básico de JavaScript Juan Pueyo 4.4. Métodos de acceso a los elementos del DOM................................................................. 47 4.4.1 Método getElementsByTagName............................................................................... 47 4.4.2 Método getElementById............................................................................................ 48 4.4.3 Métodos querySelector y querySelectorAll............................................................... 48 4.4.4. EJERCICIO................................................................................................................... 50 4.5. Creación y eliminación de nodos..................................................................................... 51 4.5.1. Creación de un nodo................................................................................................. 51 4.5.2. Eliminación de un nodo............................................................................................. 52 4.5.3. Creación de un nodo de atributo.............................................................................. 54 4.6. Acceso directo a los atributos HTML................................................................................ 55 4.6.1. Acceder a un Atributo por su nombre....................................................................... 55 4.6.2. Modiﬁcar el Valor de un Atributo:............................................................................. 55 4.6.3. Acceder a Todos los Atributos de un Elemento:........................................................ 56 4.7. Manejo de propiedades CSS desde JavaScript................................................................. 56 4.7.1 Ejemplo....................................................................................................................... 57 4.8. Manejo de clases CSS desde JavaScript............................................................................ 58 4.7.1. Leer Clases:................................................................................................................ 58 4.7.2. Eliminar Clases:......................................................................................................... 58 4.7.3. Agregar Clases:.......................................................................................................... 59 4.7.4. Toggle (Agregar o Eliminar):...................................................................................... 59 4.7.5. Contains..................................................................................................................... 59 4.8. Ejercicio............................................................................................................................ 60 4.9. EJERCICIO PARA ENTREGAR.......................................................................................... 60 5. Eventos.................................................................................................................................... 61 5.1. Modelo de eventos........................................................................................................... 61 5.2. Tipos de eventos............................................................................................................... 61 5.3. Control de eventos........................................................................................................... 61 5.4. Obtener información de los eventos................................................................................ 62 1. Obtener el Elemento Obje vo (Target)........................................................................... 63 2. Obtener coordenadas del ratón...................................................................................... 63 3. Obtener tecla pulsada..................................................................................................... 63 4. Obtener po de evento................................................................................................... 63 5. Detener la Propagación del Evento................................................................................. 63 6. Prevenir el comportamiento predeterminado................................................................ 64 5.5. Controlar varios eventos con una misma función............................................................ 64 5.6. DOMContentLoaded........................................................................................................ 65 6 Manual Básico de JavaScript Juan Pueyo 5.7. Ejercicio 1......................................................................................................................... 66 5.8. Ejercicio 2......................................................................................................................... 66 6. Formularios............................................................................................................................. 67 6.1. Acceso a elementos de un formulario.............................................................................. 67 6.1.1 Acceso mediante forms.............................................................................................. 67 6.1.2 Acceso mediante named elements............................................................................ 69 6.2. Obtener información de los elementos de un formulario............................................... 69 6.2.1. Cuadros de texto y textarea...................................................................................... 69 6.2.2. Radiobuton............................................................................................................... 70 6.2.3. Checkbox................................................................................................................... 71 6.2.4. Select......................................................................................................................... 72 6.3. Validación de formularios................................................................................................. 73 6.3.1. Esquema pico de validación.................................................................................... 73 6.3.2. Validación de diferentes pos de datos y elementos en formularios....................... 74 6.4. Evitar varios envíos del mismo formulario....................................................................... 75 7. Otras u lidades....................................................................................................................... 76 7.1. Funciones para el control de ejecuciones de funciones................................................... 76 7.1.1. setTimeout().............................................................................................................. 76 7.1.2. setInterval() y clearInterval()..................................................................................... 77 7 Manual Básico de JavaScript Juan Pueyo Capítulo 1. Introducción 1.1. ¿Qué es JavaScript? JavaScript es un lenguaje de programación de alto nivel, interpretado y orientado a objetos. Es ampliamente u lizado para agregar interac vidad y dinamismo a las páginas web. A diferencia de otros lenguajes de programación, JavaScript se ejecuta directamente en el navegador del usuario, lo que permite realizar acciones del lado del cliente. JavaScript se u liza tanto en el frontend (lado del cliente) como en el backend (lado del servidor) del desarrollo web, lo que permite a los desarrolladores u lizar el mismo lenguaje en ambos entornos. Uso en el frontend y en el backend: Frontend (Lado del Cliente): 1. Manipulación del DOM (Document Object Model): JavaScript se u liza para interactuar con el DOM, que representa la estructura de una página web. Se puede cambiar el contenido de la página, manejar eventos del usuario, y modiﬁcar es los y atributos. 2. Interactividad en el Navegador: A través de eventos y manipulación del DOM, JavaScript permite crear experiencias interac vas para el usuario en el navegador. Esto incluye formularios dinámicos, validación de datos, animaciones y actualizaciones en empo real. 3. AJAX (Asynchronous JavaScript and XML): JavaScript se u liza para realizar solicitudes asíncronas al servidor, lo que permite cargar o enviar datos en segundo plano sin tener que recargar toda la página. Esto es esencial para aplicaciones web modernas y la creación de interfaces de usuario ﬂuidas. 4. Frameworks y Bibliotecas Frontend: Hay numerosos frameworks y bibliotecas de JavaScript diseñados para simpliﬁcar el desarrollo frontend, como React, Angular y Vue.js. Estos facilitan la creación de interfaces de usuario complejas y estructuradas. 8 Manual Básico de JavaScript Juan Pueyo Backend (Lado del Servidor): 1. Node.js: Node.js es un entorno de ejecución de JavaScript en el servidor. Permite a los desarrolladores u lizar JavaScript para construir aplicaciones del lado del servidor. Node.js u liza el motor V8 de Google Chrome para ejecutar JavaScript de manera eﬁciente en el servidor. 2. Express.js: Express.js es un marco de desarrollo web para Node.js que simpliﬁca la creación de aplicaciones web y APIs en el lado del servidor. 3. Manipulación de Datos y Acceso a Bases de Datos: JavaScript se u liza para manipular datos en el servidor, interactuar con bases de datos y proporcionar respuestas a las solicitudes del cliente. Se pueden u lizar diversas bases de datos como MongoDB, MySQL o PostgreSQL. La capacidad de u lizar JavaScript en ambos lados del desarrollo web ha llevado a la popularización de la pila MEAN (MongoDB, Express.js, Angular, Node.js) y MERN (MongoDB, Express.js, React, Node.js) para construir aplicaciones web de extremo a extremo con un solo lenguaje. Esto facilita el desarrollo y la colaboración entre el frontend y el backend del equipo de desarrollo. 1.2. Breve historia La historia de JavaScript se remonta a 1995, cuando fue creado por Brendan Eich mientras trabajaba en Netscape Communica ons Corpora on. La creación de JavaScript se realizó en un período de 10 días y fue inicialmente llamado "LiveScript". Sin embargo, la colaboración estratégica entre Netscape y Sun Microsystems llevó al cambio de nombre a "JavaScript" para aprovechar el creciente interés en Java, otro lenguaje de programación desarrollado por Sun Microsystems. Es importante destacar que, aunque JavaScript comparte el nombre "Java", no está directamente relacionado con Java en términos de diseño o funcionalidad. La elección del nombre "JavaScript" fue en gran medida una decisión de marke ng para capitalizar el auge de Java en ese momento. JavaScript fue introducido en Netscape Navigator 2.0 en 1995 y, debido a su capacidad para proporcionar interac vidad en el lado del cliente en las páginas web, se convir ó rápidamente en un componente esencial del desarrollo web. A medida que la web evolucionaba, JavaScript se volvía cada vez más importante, y su adopción se amplió con la estandarización a través de ECMAScript, el estándar que deﬁne la especiﬁcación del lenguaje. Con el empo, JavaScript se ha conver do en uno de los lenguajes de programación más populares y ampliamente u lizados en el desarrollo web, y ha experimentado un crecimiento 9 Manual Básico de JavaScript Juan Pueyo signiﬁca vo gracias a la expansión de las tecnologías web y el auge de los frameworks y bibliotecas, como jQuery, Angular, React y Vue.js, que facilitan el desarrollo de aplicaciones más complejas y dinámicas en el navegador. 1.3. Especiﬁcaciones oﬁciales JavaScript ha experimentado varias versiones a lo largo de los años, con cada versión introduciendo nuevas caracterís cas, mejoras de rendimiento y correcciones de errores. La especiﬁcación subyacente de JavaScript se llama ECMAScript, y aquí hay algunas de las versiones más destacadas: 1. ECMAScript 1 (ES1): La primera versión de ECMAScript se lanzó en 1997, coincidiendo con la introducción de JavaScript en Netscape. 2. ECMAScript 2 (ES2): Lanzado en 1998, esta versión incluyó correcciones de errores y mejoras en la especiﬁcación. 3. ECMAScript 3 (ES3): Lanzado en 1999, ES3 introdujo nuevas caracterís cas como manejo de excepciones mejorado y soporte para expresiones regulares. 4. ECMAScript 4 (ES4): Originalmente planeado como la siguiente versión importante después de ES3, pero el desarrollo se detuvo debido a desacuerdos en la comunidad sobre la complejidad de las propuestas. 5. ECMAScript 5 (ES5): Lanzado en 2009, ES5 trajo muchas mejoras, incluyendo métodos de arreglos adicionales, soporte para geters y seters, y el método bind(). 6. ECMAScript 6 (ES6) o ECMAScript 2015 (ES2015): Lanzado en 2015, ES6 fue una de las actualizaciones más grandes e introdujo muchas caracterís cas nuevas, como clases, arrow func ons, const y let para la declaración de variables, entre otras. 7. ECMAScript 2016 (ES2016): Esta versión fue una actualización más pequeña, introduciendo el operador de exponenciación (). 8. ECMAScript 2017 (ES2017): Introdujo nuevas caracterís cas como async/await para simpliﬁcar el trabajo con código asíncrono, así como Object.values/Object.entries, entre otros. 10 Manual Básico de JavaScript Juan Pueyo 9. ECMAScript 2018 (ES2018): Introdujo mejoras como las expresiones regulares lookbehind, rest/spread proper es para objetos, y Promise.prototype.ﬁnally. 10. ECMAScript 2019 (ES2019): Incluyó caracterís cas como Array.prototype.ﬂat/ﬂatMap, Object.fromEntries, y mejoras en el manejo de errores. 11. ECMAScript 2020 (ES2020): Introdujo caracterís cas como BigInt para representar enteros más grandes, Promise.allSetled y nullish coalescing operator (??). Estas son solo algunas de las versiones más notables de ECMAScript. Desde ES6, la comunidad ha adoptado un enfoque de lanzamientos anuales más pequeños para introducir nuevas caracterís cas de manera más constante y manejable. Es importante tener en cuenta que no todas las caracterís cas de las especiﬁcaciones pueden ser compa bles con todos los navegadores de inmediato, ya que la implementación puede llevar empo. 1.4. Cómo incluir JavaScript en documentos HTML Para incluir JavaScript en documentos HTML, se u liza el elemento. Se puede colocar el código directamente entre las e quetas o enlazar a un archivo externo u lizando el atributo src dentro de la e queta de apertura. Ejemplo: Mi Página Web // Tu código JavaScript aquí alert("¡Hola, mundo!"); 11 Manual Básico de JavaScript Juan Pueyo Atributo defer o async: Estos atributos se pueden agregar a la e queta para controlar cómo se ejecuta el script en relación con la carga de la página. - defer: Indica que el script se ejecutará después de que la página se haya analizado. - async: Descarga el script de manera asíncrona y lo ejecuta tan pronto como esté disponible, sin esperar a que se complete la carga de la página. El método que se elija depende de las necesidades especíﬁcas y de la forma en que se preﬁera organizar el código. 1.5. E queta noscript La e queta se u liza para proporcionar contenido alterna vo que se mostrará si el navegador del usuario no admite JavaScript o si está deshabilitado. Por favor, habilita JavaScript en tu navegador. 1.6. Sintaxis JavaScript es un lenguaje de programación ﬂexible en términos de su sintaxis. Pautas generales sobre la sintaxis de JavaScript: 1. Mayúsculas y minúsculas: JavaScript es sensible a mayúsculas y minúsculas, lo que signiﬁca que miVariable y mivariable son tratadas como dos variables diferentes. var miVariable = 5; var mivariable = 10; console.log(miVariable); // Imprimirá 5 console.log(mivariable); // Imprimirá 10 12 Manual Básico de JavaScript Juan Pueyo 2. Espacios en Blanco: JavaScript es bastante ﬂexible en el uso de los espacios en blanco. Se pueden usa espacios y saltos de línea para hacer que el código sea más legible. var x = 5; var y = 10; if (x < y) { console.log("x es menor que y"); } 3. Punto y Coma (;): Aunque no es estrictamente necesario en todas las situaciones, es una buena prác ca terminar las declaraciones con punto y coma. var a = 5; var b = 10; var resultado = a + b; 4. Bloques de Código: Las llaves {} se u lizan para deﬁnir bloques de código, como el cuerpo de una función o una estructura de control (if, for, while, etc.). if (x < y) { console.log("x es menor que y"); } else { console.log("x no es menor que y"); } 5. Comentarios: Los comentarios en JavaScript pueden ser de una sola línea (//) o de varias líneas (). // Este es un comentario de una sola línea 6. Cadenas de Texto: Puedes deﬁnir cadenas de texto con comillas simples (') o comillas dobles ("). var nombre = 'Juan'; var saludo = "Hola, " + nombre + "!"; 13 Manual Básico de JavaScript Juan Pueyo 7. Variables: Declara variables con var, let, o const. let y const son introducidos en ECMAScript 6 (ES6) y enen un ámbito de bloque más estricto que var. var variable1 = 5; let variable2 = 10; const PI = 3.14; 1.8. Posibilidades y limitaciones Posibilidades AJAX (Asynchronous JavaScript and XML) es una técnica de desarrollo web que permite realizar solicitudes asíncronas al servidor desde el navegador sin tener que recargar toda la página. En lugar de esperar la respuesta del servidor de manera síncrona, AJAX permite que las solicitudes y respuestas se manejen de manera asíncrona, lo que signiﬁca que la página web puede seguir siendo u lizada y actualizada mientras se espera la respuesta del servidor. AJAX le dio un empuje muy importante a JavaScript. Webs como Gmail, Google Maps, Facebook, Twiter, etc. se basan en AJAX. JavaScript ha permi do durante muchos años realizar y controlar comportamientos en las páginas web. Hoy en día, muchos de esos comportamientos se pueden realizar con CSS, pero eso no ha hecho más que aumentar las posibilidades de JavaScript. Solo con JavaScript se pueden incluir aplicaciones dentro de páginas web que an guamente solo podían desarrollarse en entornos de escritorio. Limitaciones JavaScript es un lenguaje de programación muy versá l y potente, pero también ene sus limitaciones y hay ciertas cosas que no puede hacer: 1. Acceso al sistema de archivos: por razones de seguridad, JavaScript en un navegador web ene restricciones para acceder al sistema de archivos local del usuario. No puede leer ni escribir archivos directamente desde el sistema de archivos del cliente. 2. Acceso a recursos fuera del dominio: debido a la polí ca de mismo origen (Same-Origin Policy), JavaScript en un navegador web ene limitaciones en cuanto a realizar solicitudes a dominios diferentes al de la página que lo con ene. Esto ayuda a prevenir ataques de seguridad como la manipulación de recursos de otros dominios. 3. Manipulación directa del DOM en páginas externas: JavaScript no puede manipular directamente el DOM de otra página web cargada en otra pestaña o ventana del navegador. Nuevamente, esto se debe a medidas de seguridad. 4. Interacción con el sistema opera vo: JavaScript no ene acceso directo al sistema opera vo ni puede realizar operaciones de sistema, como la instalación de so ware o el manejo de archivos del sistema. 14 Manual Básico de JavaScript Juan Pueyo 5. Acceso a hardware especíﬁco: JavaScript no ene acceso directo a hardware especíﬁco del disposi vo del usuario, como la cámara o el micrófono, sin el consen miento explícito del usuario. 6. Operaciones de bajo nivel: JavaScript no es un lenguaje de bajo nivel como C o Assembly. No se pueden realizar operaciones de bajo nivel directamente, como la manipulación de bits o la ges ón directa de memoria. 7. Mul hilos real: JavaScript en el navegador es de un solo hilo (aunque existen tecnologías como Web Workers para realizar operaciones en segundo plano). Node.js en el servidor puede manejar concurrencia, pero sigue siendo de un solo hilo mediante el uso de eventos y operaciones no bloqueantes. Es importante destacar que algunas de estas limitaciones son especíﬁcas del entorno del navegador web y no se aplican necesariamente a entornos como Node.js, donde JavaScript puede tener más acceso al sistema opera vo. Sin embargo, incluso en entornos de servidor, hay ciertas restricciones y precauciones que deben tenerse en cuenta por razones de seguridad y estabilidad. 1.9. JavaScript y navegadores JavaScript es compa ble con la mayoría de los navegadores modernos, pero pueden exis r pequeñas variaciones en la implementación entre ellos. Es fundamental conocer estas diferencias para escribir código compa ble. Ciertas librerías como jQuery ayudan a salvar estas limitaciones. 15 Manual Básico de JavaScript Juan Pueyo Capítulo 2. Programación Básica. 2.1. Variables 2.1.1 Iden ﬁcadores Nombrar variables en JavaScript es una tarea importante para escribir un código limpio, comprensible y mantenible. Pautas y convenciones comunes para nombrar variables: 1. Camel Case. Se recomienda la convención de Camel Case para nombrar variables. Comienza con una letra minúscula y las palabras siguientes comienzan con mayúsculas. Ejemplo: miVariable, nombreUsuario, saldoCuenta. var nombreCompleto = "Juan Pérez"; var edadUsuario = 25; 2. Descriptivo y Signiﬁcativo. Se deben u lizar nombres de variables que sean descrip vos y que transmitan su propósito. Se deben evitar nombres genéricos o abreviaciones que puedan ser di ciles de entender. // No recomendado: var x = 10; var n = "John"; // Preferible: var edad = 10; var nombreCliente = "John"; 3. Evitar Palabras Reservadas. Como en otros lenguajes, no se pueden u lizar palabras reservadas de JavaScript como nombres de variables. // No permitido: var function = 5; 4. Evitar nombres de una sola letra (a menos que sea un índice de un bucle). Aunque es común usar i como índice en bucles, evita nombres de una sola letra para variables, excepto en contextos especíﬁcos y bien entendidos. // Aceptable para índices de bucle: for (var i = 0; i < 5; i++) { //... } // No recomendado: var x = 10; 16 Manual Básico de JavaScript Juan Pueyo 2.1.2. Declaración de variables. En JavaScript, hay tres maneras de declarar variables: var, let, y const. Cada una ene sus propias caracterís cas y casos de uso: 1. var. var fue la forma original de declarar variables en JavaScript. Sin embargo, ene algunas caracterís cas que pueden causar problemas, especialmente en términos de ámbito. Además, si se declaran dos variables iguales con var, JavaScript no genera ningún error. var edad = 25; var nombre = "Ana"; // Ámbito de función function ejemplo() { var variableLocal = "Solo visible dentro de la función"; console.log(edad); // Accesible desde cualquier parte de la función } console.log(nombre); // Accesible fuera de la función console.log(variableLocal); // Error, variableLocal no está definida aquí 2. let. let fue introducido en ECMAScript 6 (ES6) y se u liza para declarar variables con ámbito de bloque. A diferencia de var, las variables declaradas con let enen un ámbito de bloque más estricto. let edad = 25; let nombre = "Juan"; // Ámbito de bloque if (true) { let variableLocal = "Solo visible dentro del bloque if"; console.log(edad); // Accesible desde cualquier parte dentro del bloque if } console.log(nombre); // Accesible fuera del bloque if console.log(variableLocal); // Error, variableLocal no está definida aquí 17 Manual Básico de JavaScript Juan Pueyo 3. const. const también fue introducido en ES6 y se u liza para declarar variables cuyos valores no cambiarán. Las variables declaradas con const deben inicializarse al momento de la declaración, y no se les puede asignar un nuevo valor. const PI = 3.14; const nombre = "Juan Pueyo"; // No permitido, ya que PI ya está asignado PI = 3.1416; // No permitido, ya que la variable debe ser inicializada al momento de la declaración const nuevaVariable; Es recomendable u lizar const siempre que sea posible, ya que ayuda a evitar cambios accidentales en el código. Si una variable puede cambiar de valor, entonces se debe u lizar let. Hay que evitar el uso de var a menos que se esté trabajando con código an guo o situaciones especíﬁcas donde se necesita su comportamiento par cular. 4. Uso de variables sin declarar. Otra opción a evitar es el uso de variables sin declarar, ya que, en ese caso, JavaScript genera una variable global aunque esta haya sido usada dentro de una función. function ejemploFuncion() { // Acceso o creación de una variable global dentro de una función miVariableGlobal = 0; } // Llamada a la funición ejemploFuncion() ejemploFuncion(); // Muestra el valor de la variable por considerarse global console.log(miVariableGlobal); // Genera error porque miOtraVariable se declaró con var dentro de la función. console.log(miOtraVariable); 18 Manual Básico de JavaScript Juan Pueyo 2.1.3. Tipos de variables. JavaScript es un lenguaje de programación de pado débil, lo que signiﬁca que no es necesario declarar explícitamente el po de una variable al crearla. Los pos de variables en JavaScript se determinan dinámicamente en empo de ejecución. Tipos de variables básicos: 1. Number. Representa números, ya sean enteros o de punto ﬂotante. let edad = 25; // Entero let altura = 1.75; // Punto flotante 2. String. Representa cadenas de texto. let nombre = "Elena"; let mensaje = 'Hola, ¿cómo estás?'; 3. Boolean. Representa un valor lógico, true o false. let esActivo = true; let tieneCuenta = false; 4. Undeﬁned. Representa una variable que ha sido declarada pero no inicializada. let variableNoInicializada; console.log(variableNoInicializada); // Imprimirá undefined 5. Null. Representa la ausencia de valor o un valor nulo de forma intencionada. let valorNulo = null; 6. Object. Representa un objeto, que puede contener propiedades y métodos. let persona = { nombre: "Ana", edad: 30, ciudad: "Ejemplo" }; 7. Array. Representa una colección de elementos. let colores = ["rojo", "verde", "azul"]; 19 Manual Básico de JavaScript Juan Pueyo 8. Symbol. Introducido en ECMAScript 6 (ES6), representa un iden ﬁcador único e inmutable. let simbolo = Symbol("descripción"); 9. BigInt. Introducido en ECMAScript 2020, representa números enteros mayores que Number.MAX_SAFE_INTEGER. Se representan con una n al ﬁnal del número. let numeroGrande = 1234567890123456789012345678901234567890n; 2.2. Operadores. JavaScript incluye varios operadores que permiten realizar diversas operaciones, como aritmé ca, comparación, asignación, lógica, y más. 1. Operadores Aritmé cos: - +: Suma - -: Resta - *: Mul plicación - /: División - %: Módulo (devuelve el resto de la división) let a = 10; let b = 3; console.log(a + b); // 13 console.log(a - b); // 7 console.log(a * b); // 30 console.log(a / b); // 3.3333333333333335 console.log(a % b); // 1 2. Operadores de Asignación: - =: Asignación simple - +=, -=, *=, /=: Asignación con operación let x = 5; x += 3; // x ahora es 8 (equivalente a x = x + 3) 20 Manual Básico de JavaScript Juan Pueyo 3. Operadores de Comparación: - ==: Igualdad (compara valores, no pos) - ===: Igualdad estricta (compara valores y pos) - !=: Desigualdad (compara valores, no pos) - !==: Desigualdad estricta (compara valores y pos) - >, =, = 18 ? "Es mayor de edad" : "Es menor de edad"; 7. Operador de Incremento/Decremento: - ++: Incremento - --: Decremento let contador = 5; contador++; // Incrementa el contador a 6 22 Manual Básico de JavaScript Juan Pueyo 2.3. Estructuras de control de ﬂujo. 2.3.1. Estructura if…else La estructura if en JavaScript se u liza para ejecutar un bloque de código si una condición especiﬁcada se evalúa como verdadera. Puedes usar la estructura básica if, así como también agregar cláusulas else if y else para manejar múl ples casos. Diferentes ejemplos de la estructura if en función de las diferentes formas de uso: 1. Estructura Básica if. let edad = 20; if (edad >= 18) { console.log("Es mayor de edad"); } 2. Estructura if con else. let hora = 14; if (hora < 12) { console.log("Buenos días"); } else { console.log("Buenas tardes o noches"); } 3. Estructura if con else if. let hora = 18; if (hora < 12) { console.log("Buenos días"); } else if (hora < 18) { console.log("Buenas tardes"); } else { console.log("Buenas noches"); } 4. Operador Ternario (Shorthand if-else). let edad = 20; let mensaje = (edad >= 18) ? "Es mayor de edad" : "Es menor de edad"; console.log(mensaje); 23 Manual Básico de JavaScript Juan Pueyo 2.3.2. Estructura switch La estructura switch en JavaScript proporciona una forma de ejecutar diferentes bloques de código según el valor de una expresión. Se trata de una forma más organizada de manejar múl ples casos que podrían surgir. Cada opción se establece con case y un break es el que ﬁnaliza la ejecución del case. let diaDeLaSemana = 3; let nombreDelDia; switch (diaDeLaSemana) { case 1: nombreDelDia = "Lunes"; break; case 2: nombreDelDia = "Martes"; break; case 3: nombreDelDia = "Miércoles"; break; case 4: nombreDelDia = "Jueves"; break; case 5: nombreDelDia = "Viernes"; break; case 6: case 7: nombreDelDia = "Fin de semana"; break; default: nombreDelDia = "Día no válido"; } console.log("Hoy es " + nombreDelDia); En este ejemplo, la expresión diaDeLaSemana se evalúa, y el código dentro del bloque switch se ejecuta según el valor de esa expresión. Cada case representa un posible valor que puede tener diaDeLaSemana. Cuando se encuentra el valor correcto, se ejecuta el bloque de código correspondiente. El break se u liza para salir del switch después de que se ha ejecutado un bloque. Si diaDeLaSemana no coincide con ninguno de los case, se ejecuta el bloque default (opcional). Si no hay un bloque default, no se realiza ninguna acción si ninguno de los casos coincide. Puede haber múl ples casos que compartan el mismo bloque de código sin la necesidad de un break entre ellos. Además, a par r de ECMAScript 2015 (ES6), puedes u lizar switch con cadenas y expresiones más complejas. La estructura switch es ú l cuando enes múl ples casos que quieres evaluar de manera más clara y organizada que con una serie de instrucciones if-else if. 24 Manual Básico de JavaScript Juan Pueyo const valor = 75; switch (true) { case (valor >= 0 && valor = 50 && valor = 75 && valor sería un nodo de comentario. 5. Document Node (Nodo de Documento). - Representa todo el documento. - Es el nodo raíz del árbol del DOM. - Incluye todos los demás nodos en el documento como sus hijos. 6. DocumentType Node (Nodo de DocumentType). - Representa la declaración del po de documento (DOCTYPE) en el HTML. - Proporciona información sobre la versión de HTML que se está u lizando. 4.3. Acceso a los nodos del DOM. Acceder a los nodos del DOM (Modelo de Objetos del Documento) es esencial en el desarrollo web, ya que proporciona la capacidad de interactuar dinámicamente con los elementos de una página HTML. Ejemplos para los que es necesario acceder a los elementos del DOM: Manipulación Dinámica del Contenido. Permite modiﬁcar, agregar o eliminar contenido HTML de forma dinámica, como por ejemplo para modiﬁcar el texto de un elemento, agregar nuevos elementos o eliminar elementos existentes. Interac vidad del Usuario. Permite controlar los eventos que suceden en la página web, como clics, pulsaciones de teclas, etc., y reaccionar a ellos, como por ejemplo, cambiando el color de un botón del menú al hacer clic en él. Validación y Modiﬁcación de Formularios. Permite validar y modiﬁcar datos en formularios antes de enviarlos al servidor, como por ejemplo, veriﬁcando si un campo de entrada está lleno antes de enviar un formulario. Esto es imprescindible para reducir la carga de validación en el servidor. 45 Manual Básico de JavaScript Juan Pueyo Animaciones y Transiciones. Facilita la creación de animaciones y transiciones en elementos HTML. Por ejemplo, cambiar gradualmente la posición de un elemento a lo largo del empo. Dinámica de Es los y Clases. Permite cambiar dinámicamente es los y clases CSS en los elementos. Manipulación de Eventos. Permite adjuntar y quitar manejadores de eventos a elementos HTML. Por ejemplo, ejecutar una función cuando se produce un clic en un botón. Actualización Asíncrona de Contenido con AJAX. Facilita la carga asíncrona de datos desde el servidor y la actualización del contenido de la página sin recargarla completamente. Por ejemplo, cargar nuevos comentarios en una sección de comentarios de una página de redes sociales. 46 Manual Básico de JavaScript Juan Pueyo 4.4. Métodos de acceso a los elementos del DOM Existen diversos métodos de acceso a los elementos del DOM. Algunos solo ob enen un elemento y otros ob enen varios en un array que habrá que recorrer. 4.4.1 Método getElementsByTagName. La función getElementsByTagName es un método del DOM en JavaScript que devuelve un array de objetos del DOM (Elements está en plural), con todos los elementos de un elemento del DOM de la e queta indicada. Ejemplo: Correo Electrónico: Obtener Valores function obtenerValores() { // Acceder a elementos por Índice let nombre = document.forms.value; // Primer elemento let email = document.forms.value; // Segundo elemento // Realizar acciones con los valores alert("Nombre: " + nombre + "\nCorreo Electrónico: " + email); } document.querySelector("button").addEventListener("click", obtenerValores); 68 Manual Básico de JavaScript Juan Pueyo 6.1.2 Acceso mediante named elements. Named elements es una forma an gua de acceso a los elementos que no se explicó en el tema 4 ya que no está recomendada hoy en día. Su forma de acceso es u lizar directamente el name o el id del elemento sin el uso de métodos. Aunque no se recomienda, todavía se usa y es conveniente conocerla. Ejemplo: Acceder a Elementos de un Formulario por Nombre Nombre:

Tema 06 - Manual Básico de JavaScript PDF

Document Details

Tags

Related

Summary

Full Transcript

Upgrade to continue