Portafolio de Actividades

Redes digitales y laboratorio de Redes Digitales

Departamento de Ciencias e Ingenierías | Universidad Iberoamericana Puebla, México.

Investigación | JS.

Mary Tere Füguemann Sardá
Ingeniería Mecatrónica
Maximo Arenas Roa
Ingeniería Mecatrónica
Fecha: Junio, 2024
Replit HTML

- Resumen -

Se realizó una investigación en donde se responden distintas preguntas acerca del lenguaje JS.

- Introducción -

JavaScript (JS) es un lenguaje de programación crucial en el desarrollo web, integrándose directamente en páginas HTML para añadir dinamismo y funcionalidad interactiva. Con una sintaxis flexible y accesible, soporta tanto programación orientada a objetos como funcional, facilitando la creación de aplicaciones desde simples validaciones de formularios hasta complejas animaciones y juegos interactivos. Su versatilidad se extiende a la creación de aplicaciones web completas y la manipulación dinámica del contenido, convirtiéndolo en una herramienta imprescindible para cualquier desarrollador web moderno que busque ofrecer experiencias ricas y dinámicas en el navegador.

- Desarrollo -

Preguntas:

1. ¿Qué hace la etiqueta input de HTML y como se utilizan?

2. Desarrolla en tu pagina web un ejemplo de un formulario utilizando la etiqueta input.

3. Desarrolla en tu pagina web un muestrario de al menos 10 tipos de inputs diferentes.

4. ¿Qué es el lenguaje JavaScript?

5. ¿Para qué sirve el leguaje JS?

6. ¿A qué se refiere el DOM (Document Object model) en el desarrollo Web?

7. ¿Cuál es la diferencia entre los archivos HTML, CSS y JS?

8. ¿Para qué sirve la etiqueta script?

9. ¿En qué consiste los 3 métodos para cambiar elementos tipo Tag Name, ID y Class Name con JS?

10. Elabora en Replit un programa básico “Hola mundo” con JS, describe el funcionamiento y elementos utilizados.

11. ¿Cuál es la sintaxis de la programación en JS?

12. ¿Como se declaran variables en JS?

13. ¿Como se declaran funciones en JS?

14. ¿Como se llaman funciones en JS?

15. ¿Cómo declaras una función interna de un HTML con JS y como declaras un documento externo con JS?

16. ¿Cuáles ciclos de programación están disponibles en JS?

17. ¿Cuáles funciones de condicional están disponibles en JS?

Resultados

1. La etiqueta input de HTML se utiliza para crear controles interactivos en formularios web. Permite al usuario ingresar datos y puede tener varios tipos, como texto, contraseña, correo electrónico, número, etc. Se define dentro de un formulario (

) y se puede personalizar con varios atributos como type, name, value, placeholder, required, entre otros.

2. Se realizó un ejemplo utillizando la etiqueta input type = button.

...

3. A continuación, se adjunta la página en donde se ve a detalle la realización del muestreario.

  • Muestreario

    • 4. JavaScript es un lenguaje de programación interpretado, ligero y orientado a objetos, utilizado principalmente para crear contenido web dinámico y interactivo. Fue desarrollado originalmente por Netscape como un medio de agregar programas a las páginas web en el navegador Netscape Navigator.

    5. JavaScript permite crear interactividad en las páginas web mediante validaciones de formularios, juegos y animaciones, manipular y modificar el contenido del documento HTML (DOM), controlar multimedia, comunicarse asíncronamente con servidores mediante AJAX, y desarrollar aplicaciones web complejas y de una sola página (SPA).

    6. El DOM (Document Object Model) es una interfaz de programación para los documentos HTML y XML. Representa la estructura del documento como un árbol de nodos, donde cada nodo es una parte del documento, como un elemento, atributo o texto. JavaScript puede interactuar con el DOM para manipular el contenido, estructura y estilo de un documento web de manera dinámica.

    7. HTML (HyperText Markup Language) es el lenguaje de marcado empleado para estructurar el contenido de una página web, definiendo elementos como encabezados, párrafos e imágenes. CSS (Cascading Style Sheets) es el lenguaje que se utiliza para describir la presentación y el diseño visual de la página, especificando aspectos como colores, fuentes y disposición de los elementos. JavaScript (JS) es el lenguaje de programación encargado de agregar interactividad y comportamiento dinámico a la página, permitiendo funciones como validaciones de formularios, animaciones y comunicación asíncrona con servidores.

    8. La etiqueta "script" se utiliza para incluir y/o ejecutar código JavaScript en un documento HTML. Puede contener código JavaScript directamente o referenciar un archivo JavaScript externo.

    9. En JavaScript, los elementos del DOM pueden seleccionarse y manipularse de tres maneras principales: por nombre de etiqueta usando document.getElementsByTagName(tagName), que devuelve una colección de todos los elementos con el nombre de etiqueta especificado; por ID utilizando document.getElementById(id), que devuelve el primer elemento que coincide con el ID dado, ya que los ID deben ser únicos en un documento HTML; y por nombre de clase con document.getElementsByClassName(className), que devuelve una colección de todos los elementos que tienen la clase especificada.

    10. A continuación, se visualizan imágenes del programa elaborado en Replit.

    ...
    ...

    11. La sintaxis básica de JavaScript incluye: Comentarios: `//` para una línea, `/* ... */` para múltiples líneas; Variables: Se pueden declarar usando `var`, `let`, o `const`; Funciones: Se declaran con la palabra clave `function`; Condicionales: Usan `if`, `else`, `else if`; Bucles: Incluyen `for`, `while`, `do-while`.

    12. Las variables en JavaScript se pueden declarar utilizando `var`, `let` o `const`.

    13. Las funciones en JavaScript se declaran utilizando la palabra clave `function`. Ejemplo: function nombre_de_función()

    14. Las funciones se llaman utilizando su nombre seguido de paréntesis. Ejemplo: nombre_de_función()

    15. Para declarar una función interna en un archivo HTML utilizando JavaScript, puedes incluir el código JavaScript directamente dentro de una etiqueta (script) en el mismo archivo HTML. Por ejemplo, se puede definir una función saludar dentro de esta etiqueta y llamarla desde un elemento HTML como un botón. Alternativamente, si se quisiera el código JavaScript en un archivo separado, se puede crear un archivo externo (por ejemplo, script.js) que contenga la función saludar, y luego enlazar este archivo a tu HTML usando la etiqueta (script src="script.js">). Esto permite una mejor organización y mantenimiento del código, especialmente en proyectos más grandes.

    16. JavaScript soporta varios tipos de ciclos: - `for` - `while` - `do-while` - `for...in` - `for...of`

    17. JavaScript soporta varias estructuras condicionales: - `if` - `else` - `else if` - `switch`

    - Conclusiones -

    Realizar una investigación profunda sobre JavaScript y aplicar ese conocimiento práctico en plataformas como Replit es una excelente manera de consolidar habilidades en desarrollo web. Explorar los fundamentos del lenguaje, su sintaxis, y las mejores prácticas para implementar interactividad en páginas HTML proporciona una base sólida. Llevar estos aprendizajes a la práctica utilizando entornos como Replit no solo permite experimentar con proyectos reales de manera ágil y colaborativa, sino que también fomenta el descubrimiento de nuevas herramientas y bibliotecas que pueden enriquecer aún más las aplicaciones desarrolladas. Este proceso no solo fortalece la comprensión de JavaScript, sino que también prepara a los desarrolladores para enfrentar desafíos más complejos en el mundo del desarrollo web moderno.

    - Descargables -

    Para este ejercicio, no hay descargables.

    - Referencias -

    https://uniwebsidad.com/libros/javascript

    https://www.w3schools.com/js/default.asp

    https://www.w3schools.com/tags/tag_input.asp