04S-0151-D2

PROGRAMACIÓN CON EL USO DE SCRIPT

DOCENTE: ESTUDIANTE:
Aluid Escalona Krismary Bracho

C.I: 30.473.115

Guatire, noviembre de 2023

1
 INTRODUCCIÓN

Los scripts son códigos de programación que se ejecutan en el navegador web

para agregar interactividad y funcionalidad a las páginas. JavaScript es el lenguaje de
script principal utilizado en el desarrollo web, permitiendo manipular el contenido de la
página, responder a eventos del usuario y realizar solicitudes al servidor. Los eventos
HTML son acciones que ocurren en elementos de una página web y se pueden capturar y
manejar con JavaScript. AJAX es una técnica que permite actualizar dinámicamente
partes específicas de una página sin recargarla por completo. Los frameworks de
JavaScript, como Angular, React y Vue.js, proporcionan herramientas y estructuras
avanzadas para el desarrollo web. WebAssembly es un formato de código binario que
permite ejecutar código de alto rendimiento en navegadores, aunque puede ser más
complejo que JavaScript.

2
 ¿QUÉ ES UN SCRIPT?

En informática, un script, secuencia de comandos o guion (traduciendo desde

inglés) es un término informal que se usa para designar un lenguaje de programación que
se utiliza para manipular, personalizar y automatizar las instalaciones de un sistema
existente. Regularmente almacenadas en un archivo de texto que deben ser interpretados
línea a línea en tiempo real para su ejecución, se distinguen de los programas, pues deben
ser convertidos a un archivo binario ejecutable para que funcionen.
Los scripts regularmente no se compilan con anticipación a código máquina, sino que
son ejecutados por un intérprete que lee el archivo de código fuente al momento; o
incluso por una consola interactiva donde el usuario suministra el programa al intérprete
paso a paso. Los scripts o guiones se pueden usar para hacer prototipos de programas,
automatizar tareas repetitivas, hacer procesamiento por lotes e interactuar con el sistema
operativo y el usuario (debido a esto, los intérpretes de comandos o shells suelen
diseñarse con funcionalidades de programación).

Un script cuando se habla de programación web es un programa o fragmento de

código que se encuentra insertado dentro de un documento HTML. Este código
es interpretado y ejecutado por el navegador web que utiliza el usuario que accede a
ese documento, y no en el servidor donde se alojan los archivos de la página web, por lo
que no pueden realizar cierto tipo de acciones (como manejar una base de datos alojada
en el servidor web).

¿CUÁLES SON LOS PRINCIPALES LENGUAJES DE SCRIPT QUE EXISTEN

Y SU USO?

Algunos lenguajes de programación son considerados «lenguajes de scripts»

(scripting languages) si son idóneos para realizar guiones con soltura, pese a que también
se utilizan para codificar programas mucho más complejos. Por ejemplo, Python a
menudo se considera un lenguaje de scripting, sin embargo también se puede usar para
programar aplicaciones sofisticadas (ejemplo: Deluge) o bibliotecas enteras
(como SciPy); las cuales se consideran más que simples scripts.

Los lenguajes de scripts pueden realizar diferentes acciones dentro de un entorno

de tiempo de ejecución particular, como automatizar la ejecución de tareas, mejorar la

3
funcionalidad del software principal, realizar configuraciones, extraer datos de conjuntos
de datos y otros.

Los lenguajes de scripts pueden surgir de dos maneras:

1. Un entorno de ejecución puede introducir su propio lenguaje de script, como Bash

para el sistema operativo GNU o VBA para las aplicaciones de Microsoft Office.

2. Un entorno de ejecución puede adoptar un lenguaje de script existente, por

ejemplo, la concha de MongoDB mongo ha sido construida alrededor de
JavaScript.

Por otro lado, a veces es el lenguaje de script el que existe primero y crea su propia
plataforma matriz, por extraño que esto pueda parecer.

Esto es lo que ocurrió en el caso de Node.js, un entorno de ejecución de backend

que fue creado para permitir a los desarrolladores web usar JavaScript no solo en el
frontend sino también en el backend, siguiendo el paradigma de «JavaScript en todas
partes».

Algunos de los principales lenguajes de scripting y sus usos incluyen:

• Python: Es un lenguaje de programación versátil y fácil de aprender que se utiliza

ampliamente en desarrollo web, análisis de datos, inteligencia artificial,
automatización de tareas, scripting de sistemas, entre otros.

• JavaScript: Es un lenguaje de programación utilizado principalmente en

desarrollo web para crear interactividad en las páginas web, como validar
formularios, crear efectos visuales y manipular elementos en el DOM.

• Ruby: Es un lenguaje de programación con una sintaxis fácil de leer y escribir. Se

utiliza en el desarrollo de aplicaciones web y scripting, especialmente en
combinación con el framework Ruby on Rails.

• PHP: Es un lenguaje de scripting muy popular para la creación de aplicaciones

web dinámicas. Se utiliza ampliamente en la creación de sitios web y sistemas de
gestión de contenidos, como WordPress.

4
 • PowerShell: Es un lenguaje de scripting desarrollado por Microsoft para
administrar y automatizar tareas en sistemas Windows. Se utiliza para crear scripts
para administrar servidores y realizar diversas tareas de administración del
sistema.

• Shell Scripting: Es el lenguaje de scripting utilizado en sistemas Unix y Linux

para automatizar tareas del sistema operativo. Ayuda a escribir scripts para la
administración del sistema, automatización de tareas y manipulación de archivos
y directorios.

• Perl: Es un lenguaje de scripting utilizado en varios campos, como desarrollo web,

administración de sistemas, procesamiento de texto y análisis de datos.

Estos son solo algunos de los principales lenguajes de scripting que existen, pero
hay muchos más, cada uno con su propio propósito y área de aplicación.

¿QUÉ ES JAVASCRIPT Y QUE SE PUEDE HACER CON EL EN EL

DESARROLLO WEB?

JavaScript es el lenguaje de programación que debes usar para añadir

características interactivas a tu sitio web, (por ejemplo, juegos, eventos que ocurren
cuando los botones son presionados o los datos son introducidos en los formularios,
efectos de estilo dinámicos, animación, y mucho más). Este artículo te ayudará a
comenzar con este lenguaje extraordinario y te dará una idea de qué es posible hacer con
él.

JavaScript es un robusto lenguaje de programación que se puede aplicar a un

documento HTML y usarse para crear interactividad dinámica en los sitios web. Fue
inventado por Brendan Eich, cofundador del proyecto Mozilla, Mozilla Foundation y la
Corporación Mozilla.

5
 Se puede hacer casi cualquier cosa con JavaScript, pudiendo empezar con
pequeñas cosas como carruseles, galerías de imágenes, diseños fluctuantes, y respuestas
a las pulsaciones de botones. Con más experiencia, se puede ser capaz de crear juegos,
animaciones 2D y gráficos 3D, aplicaciones integradas basadas en bases de datos y mucho
más.

Con JavaScript, se puede lograr lo siguiente en el desarrollo web:

• Manipulación del DOM: JavaScript permite acceder y manipular los elementos

de una página web, como cambiar el contenido de un elemento, modificar su
apariencia, agregar o eliminar elementos, y responder a eventos del usuario, como
clics, movimientos del mouse, etc.

• Validación de formularios: JavaScript se utiliza para realizar validaciones en los

formularios web antes de enviar los datos al servidor. Esto incluye verificar que
los campos estén completos correctamente, validar el formato de email, números,
etc. Esto ayuda a mejorar la experiencia del usuario y reducir errores del lado del
servidor.

• Interacciones asincrónicas: JavaScript permite realizar solicitudes asincrónicas

(AJAX) al servidor para obtener y enviar datos sin tener que actualizar la página
web completa. Esto permite crear aplicaciones web dinámicas y permitir una
experiencia de usuario más suave.

• Animaciones y efectos visuales: Con JavaScript, se pueden crear animaciones y

efectos visuales interactivos en una página web. Esto incluye deslizamientos,
transiciones suaves, animaciones de elementos y mucho más. Esto ayuda a
mejorar la apariencia y el atractivo visual de un sitio web.

• Creación de aplicaciones web complejas: JavaScript se usa en frameworks y

bibliotecas como React, Angular y Vue.js para crear aplicaciones web más
sofisticadas y escalables. Estas herramientas permiten desarrollar componentes
web reutilizables, gestionar el estado de la aplicación y construir interfaces de
usuario interactivas y dinámicas.

6
 ¿QUÉ ES UN EVENTO HTML Y COMO PUEDE SER CAPTURADO CON
JAVASCRIPT?

Los eventos son cosas que suceden en el sistema que estás programando. El
sistema se encarga de producir una señal de cierto tipo cuando un evento ocurre, y
proporciona un mecanismo para que una acción se lleve a cabo (ejecutar código) de forma
automática cuando el evento ocurra. Los eventos se lanzan dentro de la ventana del
navegador y usualmente están asociados a un elemento en específico dentro de dicha
ventana. Esto puede ser un solo elemento, un grupo de elementos, el documento HTML
cargado la pestaña actual, o la ventana del navegador en su totalidad. Existen distintos
tipos de eventos que pueden ocurrir.

Por ejemplo:

• El usuario selecciona, hace clic o pasa el ratón por encima de cierto elemento.

• El usuario presiona una tecla del teclado.

• El usuario redimensiona o cierra la ventana del navegador.

• Una página web terminó de cargarse.

• Un formulario fue enviado.

• Un vídeo se reproduce, se pausa o termina.

• Ocurrió un error.

A partir de esto (y dando un vistazo a la referencia de eventos de MDN) puedes

observar que existen muchos eventos que pueden ser lanzados.

Para reaccionar a un evento, puedes asociarle un manejador de eventos. Esto es

un bloque de código (normalmente una función de JavaScript que tú como programador
creas) que se ejecuta cuando el evento ocurre. Cuando uno de estos bloques de código se
configura para ejecutarse en respuesta de un evento, decimos que estamos registrando un
manejador de eventos. Nota: Los manejadores de eventos a veces son llamados detectores
de eventos. Estos términos, para lo que nos concierne justo ahora, son intercambiables,
aunque hablando de forma estricta, hacen referencia a dos mecanismos que trabajan

7
juntos. Los detectores de eventos están pendientes a que ocurra un evento, mientras que
el manejador es el código que se ejecuta en respuesta del evento.

Para capturar y manejar eventos HTML con JavaScript, se utiliza el modelo de

programación de eventos. Hay varias formas de hacerlo:

• Uso de atributos HTML: Puedes agregar atributos HTML específicos para eventos
a un elemento HTML. Por ejemplo, puedes usar el atributo "onclick" para capturar
el evento de clic en un elemento. A continuación, asignas una función de
JavaScript que se ejecutará cuando se produzca el evento.

<button onclick="miFuncion()">Haz clic aquí</button>

<script>

function miFuncion() {

</script>

• Asignación de eventos con JavaScript: Puedes utilizar el método

addEventListener en JavaScript para asignar un evento a un elemento específico.
Este método toma el nombre del evento y una función para manejar el evento.

<button id="miBoton">Haz clic aquí</button>

<script>

document.getElementById("miBoton").addEventListener("click", miFuncion);

function miFuncion() {

8
 </script>

• Eventos in-line: También puedes asignar eventos directamente en la etiqueta

HTML utilizando el atributo "on" seguido del nombre del evento y la función a
ejecutar.

<button onclick="miFuncion()">Haz clic aquí</button>

<script>

function miFuncion() {

</script>

DE UN EJEMPLO DE COMO CAPTURAR UN ERROR CON JAVASCRIPT

Para capturar errores en JavaScript, se utiliza el bloque try-catch. El bloque try se

utiliza para envolver el código en el que se espera que ocurra un error, mientras que el
bloque catch se utiliza para capturar y manejar el error.

Aquí tienes un ejemplo de cómo capturar un error con JavaScript:

try {

// Código en el que se espera que ocurra un error

// ...

// Lanzar un error manualmente para simular una situación de error

throw new Error('Esto es un error personalizado');

} catch (error) {

// Captura el error y realiza alguna acción de manejo de errores

9
 console.log('Se ha producido un error:', error.message);

En este ejemplo, hemos utilizado el bloque try para envolver el código en el que
esperamos que ocurra un error. Luego, dentro de ese bloque try, hemos lanzado un error
manualmente usando throw new Error('mensaje del error') para simular una situación de
error

Si ocurre algún error dentro del bloque try, se ejecuta el bloque catch. El error se
captura en la variable error, y podemos realizar cualquier acción de manejo de errores
necesaria, como imprimir el mensaje de error en la consola, notificar al usuario, registrar
el error, etc.

Es importante destacar que la captura de errores es útil para manejar situaciones

inesperadas y mantener la estabilidad de una aplicación o sitio web.

¿QUE ES AJAX Y CUÁL ES SU UTILIDAD?

AJAX significa JavaScript asíncrono y XML (Asynchronous JavaScript and

XML). Es un conjunto de técnicas de desarrollo web que permiten que las aplicaciones
web funcionen de forma asíncrona, procesando cualquier solicitud al servidor en segundo
plano. JavaScript es un lenguaje de programación muy conocido. Entre otras funciones,
gestiona el contenido dinámico de un sitio web y permite la interacción dinámica del
usuario. XML es otra variante de un lenguaje de marcado como HTML, como lo sugiere
su nombre: eXtensible Markup Language. Mientras HTML está diseñado para mostrar
datos, XML está diseñado para contener y transportar datos.

Tanto JavaScript como XML funcionan de forma asíncrona en AJAX. Como

resultado, cualquier aplicación web que use AJAX puede enviar y recuperar datos del
servidor sin la necesidad de volver a cargar toda la página.

Se tiene que tener en cuenta que AJAX no es una sola tecnología, ni es un lenguaje
de programación. Como se dijo antes, AJAX es un conjunto de técnicas de desarrollo
web. El sistema generalmente comprende:

• HTML/XHTML para el lenguaje principal y CSS para la presentación.

10
 • El Modelo de objetos del documento (DOM) para datos de visualización
dinámicos y su interacción.

• XML para el intercambio de datos y XSLT para su manipulación. Muchos

desarrolladores han comenzado a reemplazarlo por JSON porque es más similar
a JavaScript en su forma.

• El objeto XMLHttpRequest para la comunicación asíncrona.

• Finalmente, el lenguaje de programación JavaScript para unir todas estas

tecnologías.

Es necesario algún conocimiento técnico para entenderlo completamente. Sin

embargo, el procedimiento general de cómo funciona AJAX es bastante simple. Dale un
vistazo al diagrama y la tabla siguientes para mayor explicación.

¿QUE ES UN FRAMEWORKS?

El framework es un término que proviene del inglés y significa «marco de

trabajo» o «estructura». En el ámbito de la programación, un framework es un conjunto
de herramientas y librerías que se utilizan para desarrollar aplicaciones más fácilmente y
de manera más eficiente.

Un framework es un conjunto de reglas y convenciones que se usan para

desarrollar software de manera más eficiente y rápida. Estos marcos de trabajo se emplean
para ahorrar tiempo y esfuerzo en el desarrollo de aplicaciones, ya que proporcionan una
estructura básica que se puede utilizar como punto de partida. Además, los frameworks
también ofrecen soluciones a problemas comunes en el desarrollo de software, lo que
significa que los desarrolladores pueden centrarse en las funcionalidades específicas de
su aplicación en lugar de perder tiempo resolviendo problemas técnicos.

Concretamente, para la elaboración de aplicaciones web, la tecnología más

empleada es JavaScript (JS) y, por ello, los principales frameworks de JavaScript están
destinados al desarrollo de apps.

Para trabajar hoy en día como desarrollador de aplicaciones web no basta con
dominar el lenguaje de programación JavaScript, sino que es preciso estar familiarizado

11
con los frameworks más utilizados. Los frameworks JS son una parte fundamental del
desarrollo front end, porque ponen a disposición de los diseñadores toda una gama de
herramientas con las que poder crear sus aplicaciones de manera segura, fácil y testada.

Los frameworks o marcos de trabajo podrían definirse como una especie

de plantilla, a partir de la cual el desarrollador genera su aplicación web. Vendría a ser la
base para la organización y el desarrollo de todo el software. Los frameworks posibilitan
que el trabajo del Full Stack Developer —el profesional que se dedica a la creación y
mantenimiento de aplicaciones web— sea mucho más rápido, porque no tiene que
emplear su tiempo en programar partes comunes a todas las aplicaciones, que ya tendrían
su código escrito en estas estructuras.

DESCRIBA TRES (3) DE LOS PRINCIPALES FRAMEWORKS DE

JAVASCRIPT INDICANDO SU OBJETIVO

Angular

Gestado por Google, Angular es uno de los frameworks de JS más potentes y la

mejor opción cuando se pretende originar sitios web de una sola página con elementos
interactivos. Entre sus funcionalidades destaca la posibilidad de actualización en tiempo
real desde diferentes dispositivos. Es decir, cualquier diseño se cambia de manera
simultánea en la web y en la aplicación.

Angular aporta todo lo necesario para adquirir un buen conocimiento de

arquitectura por componentes y es una herramienta muy importante a nivel laboral. Una
de sus principales ventajas es que una vez dominado, es más sencillo aprender
otros frameworks, algo que no sucede a la inversa. Por eso, es una herramienta básica
para los desarrolladores.

Además de Angular, otros frameworks destacados serían:

React

No es propiamente un framework, sino una biblioteca que, en este caso, ha sido

implementada por Facebook. React permite generar aplicaciones web muy intuitivas,
ofreciendo un marco de trabajo versátil, robusto y muy fiable.

12
 Además de Facebook, también las aplicaciones de Instagram o Airbnb están
realizadas con esta tecnología.

Vue.js

Se caracteriza por apoyarse en una interfaz de programación de aplicaciones muy

simple que, sin embargo, permite desarrollar elementos dinámicos de interconexiones
realmente sofisticadas. La principal característica de Vue.js es la posibilidad de
seleccionar los módulos que al programador le interesan y descartar los demás.

Es una alternativa muy válida a React o Angular y se espera que en algún momento
supere a sus competidores en el mercado. La empresa japonesa Nintendo emplea Vue en
varios de sus sitios web oficiales.

¿QUÉ ES WEBASSEMBLY, CUÁL VA A SER SU FUNCIÓN EN LA WEB Y

SUS VENTAJAS Y DESVENTAJAS FRENTE A JAVASCRIPT?

WebAssembly (abreviado, Wasm) es una nueva forma con la que los

desarrolladores web pueden generar aplicaciones en internet. Hasta ahora, para ello había
que recurrir a JavaScript. Pero JavaScript es relativamente lento y, en determinados
escenarios, se ve limitado. Por eso, el World Wide Web Consortium (W3C) ha impulsado
este nuevo método. Sin embargo, para que Wasm pueda funcionar, el navegador debe ser
compatible con este lenguaje. Por este motivo, Mozilla (Firefox), Microsoft (Edge),
Apple (Safari) y Google (Chrome) han participado en el desarrollo. En todas las versiones
de navegador actuales de estos proveedores se pueden ejecutar aplicaciones en
WebAssembly.

Fundamentalmente, WebAssembly se representa en forma de bytecode, que

puede considerarse como un nivel intermedio entre el código máquina —que solo un
ordenador puede entender— y un típico lenguaje de programación —legible para
humanos, a condición de que se compile primero. Al requerir apenas esfuerzo para
convertir el código, esto hace que WebAssembly sea más rápido. Sin embargo, escribir
en bytecode es bastante inusual. La ventaja de Wasm es que no hace falta trabajar con
este lenguaje de programación, ya que, en la práctica, la aplicación web puede escribirse
en C o C++.

13
 La función principal es permitir que las aplicaciones web ejecuten código de alto
rendimiento más allá de JavaScript. Esto significa que los desarrolladores pueden
compilar código desde lenguajes de programación de alto nivel, es un formato binario
altamente eficiente y ejecutarlo en el navegador web.

Ventajas de WebAssembly

• Rendimiento mejorado: Una de las principales ventajas de WebAssembly es su

capacidad para ejecutar código a velocidades cercanas al código compilado. Esto
permite a las aplicaciones online, como juegos y aplicaciones multimedia
intensivas, ejecutarse con mayor fluidez y capacidad de respuesta en el navegador,
ofreciendo experiencias de usuario excepcionales.

• Lenguajes de programación: WebAssembly no está limitado a un solo lenguaje

de programación. Se puede compilar código desde una variedad de lenguajes,
como C++, Rust y otros, lo que permite a los desarrolladores aprovechar sus
habilidades y preferencias.

• Interoperabilidad: WebAssembly se integra con JavaScript y otros lenguajes, lo

que permite a los desarrolladores combinar componentes de diferentes tecnologías
para crear aplicaciones web más robustas y completas.

• Seguridad: WebAssembly está diseñado con medidas de seguridad sólidas. La

ejecución en un entorno de "caja de arena" aísla el código Wasm del entorno del
sistema operativo, lo que reduce el riesgo de vulnerabilidades de seguridad y
ataques maliciosos.

• Portabilidad: La portabilidad es una característica fundamental de

WebAssembly. El código compilado en formato Wasm puede ejecutarse en
diferentes navegadores y plataformas sin modificaciones, lo que simplifica la
implementación y distribución de aplicaciones web.

Desventajas de WebAssembly

• Complejidad de desarrollo: Aunque WebAssembly amplía las capacidades del

desarrollo web, también aañade complejidad al proceso. Los desarrolladores
deben aprender nuevos conceptos y técnicas, y posiblemente encontrarán
dificultades al depurar y optimizar el código Wasm.

14
• Tamaño del archivo: Los archivos Wasm pueden ser más grandes que sus
equivalentes en JavaScript, lo que puede resultar en tiempos de carga más largos
para aplicaciones web más grandes. Sin embargo, las técnicas de compresión y
optimización pueden mitigar este problema en gran medida.

• Limitaciones en el acceso al DOM: Aunque WebAssembly puede interactuar

con el DOM, aún no tiene el mismo nivel de acceso y control que JavaScript. Esto
puede limitar la capacidad de algunas aplicaciones para realizar manipulaciones
complejas en la interfaz de usuario.

• Compatibilidad con navegadores antiguos: Aunque WebAssembly es

compatible con la mayoría de los navegadores modernos, puede haber problemas
de compatibilidad con versiones más antiguas. Esto puede requerir soluciones
alternativas o la implementación de polyfills para garantizar que la aplicación
funcione en una amplia gama de navegadores.

• Aprendizaje y adopción: La adopción de WebAssembly puede llevar tiempo, ya

que requiere que los desarrolladores aprendan nuevas habilidades y se
acostumbren a una nueva forma de desarrollo. Esto puede retrasar la adopción
generalizada de la tecnología.

15
 CONCLUSIÓN

Por lo que se pudo abarcar en el contenido anterior, se entiende que los scripts
juegan un papel esencial en el desarrollo web al permitir la interactividad y la
funcionalidad de las páginas. JavaScript, como el lenguaje de script más utilizado,
proporciona las herramientas necesarias para manipular el contenido de la página,
responder a eventos del usuario y realizar solicitudes al servidor. Los eventos HTML y
su captura con JavaScript permiten una interacción dinámica con los elementos de la
página. A su vez, AJAX mejora la experiencia del usuario al permitir actualizar partes
específicas de una página sin tener que recargarla por completo. Los frameworks de
JavaScript ofrecen estructuras y funcionalidades avanzadas que facilitan el desarrollo web
y aceleran el proceso de construcción de aplicaciones. Además, WebAssembly brinda la
posibilidad de ejecutar código de alto rendimiento en navegadores, aunque requiere un
mayor nivel de conocimiento y complejidad en comparación con JavaScript. En resumen,
los scripts y las tecnologías asociadas son fundamentales para crear aplicaciones web
interactivas y dinámicas para la evolución del desarrollo web.

16
 BIBLIOGRAFÍA

https://www.seoestudios.es/que-es-un-script/
https://es.wikipedia.org/wiki/Script
https://kinsta.com/es/blog/lenguajes-script/
https://www.ibm.com/docs/es/i/7.5?topic=programming-scripting-languages
https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/JavaScript_
basics
https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Events
https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Control_flow_and_error_h
andling
https://www.hostinger.es/tutoriales/que-es-ajax
https://www.cesuma.mx/blog/que-es-el-framework.html
https://www.unir.net/ingenieria/revista/frameworks-javascript/
https://www.cunoticias.com/internet/ventajas-y-desventajas-de-la-tecnologia-
webassembly.php
https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/que-es-webassembly/

17