Scribd
Cargar
12 vistas10 páginas

Java Script

El documento es una guía práctica para crear un proyecto CRUD utilizando JavaScript, HTML y CSS en un entorno de desarrollo local con XAMPP. Incluye instrucciones detalladas sobre la configuración del entorno, la creación de archivos y la estructura del proyecto, así como la asignación de estilos a los elementos. Además, se sugiere documentar el proceso con capturas de pantalla para la entrega final de la práctica.

Cargado por

Angel David Lel
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
12 vistas10 páginas

Java Script

El documento es una guía práctica para crear un proyecto CRUD utilizando JavaScript, HTML y CSS en un entorno de desarrollo local con XAMPP. Incluye instrucciones detalladas sobre la configuración del entorno, la creación de archivos y la estructura del proyecto, así como la asignación de estilos a los elementos. Además, se sugiere documentar el proceso con capturas de pantalla para la entrega final de la práctica.

Cargado por

Angel David Lel
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/ 10

Centro de Gestión y Mercados y Logísticas Tecnológicas de

la Información - SENA

Introducción a JavaScript

JavaScript

Autor

Angel David Cruz Pardo

Tutor

Eduardo Alexander Foglia Morales

Técnico en Programación de Software

Ficha:2617818
Bogotá – 2023
1. Ir al menú de Inicio y dar clic en Xampp Panel Control. 2. Activar el botón start de los módulos Apache
y MySQL. Deben quedar en color verde. Luego Cerrar Xampp. 3. Ir a la unidad C:/ y abrir la carpeta de
xampp y dentro de ella abrir la subcarpeta htdocs 4. Dentro de htdocs crear una carpeta con el nombre
crud_JS 5. Abrir la carpeta del proyecto crud_JS en Visual estudio Code y crear tres archivos llamados:
index.html, estilos.css y app.js. Tal como se ven en la imagen.
6. Seleccionar el archivo index.html para iniciar el proyecto. 7. Digitar html y seleccionar la opción html:
5 para crear automáticamente la estructura del documento.8. La estructura debe quedar como el
ejemplo de la siguiente imagen:

9. Cambiar el lenguaje del documento por español

10. Cambiar el título del documento por CRUD-CSS-JS 11. Debajo de la línea del título del documento
agregue el link para enlazar el archivo de estilos.css que se creó anteriormente

12. Dentro del <body crear un contenedor <div>con una clase para el título y poder agregarle
estilos de la siguiente manera:
13. Agregar otro contenedor general para manipular la mayor parte de la información de nuestro
proyecto.

14. Vamos a agregar un nuevo contenedor “div-formulario” dentro del “contenedor” de la siguiente
manera:

15. Crear un formulario dentro del <div> contenedor de la siguiente forma:

16. Agregar un contenedor <div> para listar los elementos y dentro vamos a agregar otro
contenedor vacío donde se agregarán los elementos por medio del script más adelante
17. Por ultimo agregamos el enlace del script que usaremos para ingresar la información a nuestro
formulario

18. Verificamos en funcionamiento de este archivo index.html de la siguiente manera: Guardar cambios,
clic derecho sobre el código y seleccionar la opción:19 Este debe ser el resultado parcial del archivo
index.html

20. Abrir el archivo de estilos.css para iniciar la asignación de estilos a los elementos del CRUD. 21.
Agregar los estilos generales para el CRUD de la siguiente manera:
22. Agregar estilos posición para el título y cajas de texto del formulario:

23. . Estilos para el marco del contendor y el título del formulario:


24. Guarde cambios y verifique en el navegador los resultados. 25. Estilos para el posicionamiento de las
cajas de texto y botones dentro del formulario:
26. Guarde cambios y verifique en el navegador los resultados. 27. No olvide ir guardando las diferentes
capturas de pantalla he irlas agregando en un documento Word para ser entregadas como
documentación final de su práctica.

28. Estilos para el posicionamiento del marco para la lista de empleados y el tratamiento para el título
del mismo:

29. Estilos para hr y botones que se verán más adelante cuando se ingrese la información al formulario.
Cambio de colores a los contenedores

También podría gustarte