¿Qué es y para qué sirve JavaScript? Embeber JavaScript en HTML. Ejercicio ejemplo básico (CU00731B)

Resumen: Entrega nº31 del Tutorial básico del programador web: HTML desde cero.
Codificación aprenderaprogramar.com: CU00731B

 

 

¿QUÉ ES Y PARA QUÉ SIRVE JAVASCRIPT?

JavaScript es un lenguaje de programación, al igual que PHP, si bien tiene diferencias importantes con éste. JavaScript se utiliza principalmente del lado del cliente (es decir, se ejecuta en nuestro ordenador, no en el servidor) permitiendo crear efectos atractivos y dinámicos en las páginas web. Los navegadores modernos interpretan el código JavaScript integrado en las páginas web.

 

Para entender lo que es JavaScript consideremos lo siguiente. Un usuario escribe una dirección web en su navegador, por ejemplo http://www.aprenderaprogramar.com. El servidor recibe la petición y como respuesta a esa petición envía al ordenador del usuario código HTML junto a código JavaScript. El código HTML se encarga de que en la pantalla se muestre algo, por ejemplo una imagen, un menú, etc. El código JavaScript se puede encargar de crear efectos dinámicos en respuesta a acciones del usuario, por ejemplo que se despliegue un menú tipo acordeón cuando el usuario pasa el ratón por encima de un elemento del menú.

La ventaja de JavaScript es que al estar alojado en el ordenador del usuario los efectos son muy rápidos y dinámicos. Al ser un lenguaje de programación permite toda la potencia de la programación como uso de variables, condicionales, bucles, etc. También podemos citar algún inconveniente: por ejemplo si el usuario tiene desactivado JavaScript en su navegador, no se mostrarán los efectos. No obstante, hoy día la mayoría de los usuarios navegan por la web con JavaScript activado.

 

 

FORMAS DE USAR JAVASCRIPT EN DOCUMENTOS HTML

La primera forma de usar JavaScript dentro de una página web es embebiendo directamente el código JavaScript dentro del código HTML. Vamos a poner un ejemplo de código JavaScript pero no vamos a entrar en detalle a comentarlo ni explicarlo ya que en este curso no vamos a explicar JavaScript. Simplemente queremos saber interpretar por qué dentro de un documento HTML pueden aparecer fragmentos de código escrito en otro lenguaje.

 

Ejemplo:

<html>

<head>

<title>Embeber JavaScript – aprenderaprogramar.com</title>

</head>

<body>

<script type="text/javascript">

document.write('Hola Mundo');

</script>

</body>

</html>

 

 

Como podemos observar, el código JavaScript debe ir encerrado entre las siguientes marcas:

<script type="text/javascript">

</script>

 

La segunda forma para usar JavaScript es definir JavaScript en un archivo externo. Los archivos de JavaScript son archivos de texto guardados con la extensión .js. Veamos un ejemplo: imaginemos que tenemos un archivo denominado mensaje.js con código JavaScript:

alert('Mensaje JavaScript');

 

Ahora, para incluir dicho archivo en la una página web utilizaríamos el siguiente código:

<script type="text/javascript" src="archivo.js"></script>

 

Este código se escribiría dentro de las etiquetas <head> y </head> del documento HTML en el que vayamos a insertarlo

<html>

<head>

<meta charset="utf-8">

<title>Embeber JavaScript – aprenderaprogramar.com</title>

<script type="text/javascript" src="archivo.js"></script>

</head>

<body>

Página web de prueba – aprenderaprogramar.com

</body>

</html>

 

NOTA: Tal y como hemos pues la ruta, el archivo.js debe estar en el mismo directorio que el fichero HTML. Si estuviera en otro directorio, habría que especificar la ruta.

Los resultados los vemos al cargar el documento html en nuestro navegador y serán similares a lo que vemos en las siguientes imágenes.

 

 

Al cargar el documento HTML se incorpora el código JavaScript desde el archivo incrustado, que da lugar a que se muestre una ventana con el aviso “Mensaje JavaScript”. Cuando pulsemos sobre el botón aceptar, veremos el contenido del documento HTML:

 

 

Los ejemplos anteriores son muy simples, pero usando JavaScript avanzado podemos crear funciones interactivas en nuestra página web, como por ejemplo una calculadora.

 

 

En el ejemplo que hemos puesto, gracias a JavaScript el usuario podría introducir un peso (weight), los kilates (karats) y al pulsar el botón = obtener el valor. Con JavaScript se pueden realizar numerosas funciones que no se pueden realizar con HTML.

Otro lenguaje que se relaciona con HTML es PHP, si bien PHP no se ejecuta en nuestro ordenador sino en el servidor.

 

 

RESUMEN

Los documentos HTML permiten incrustar fragmentos de código JavaScript, bien dentro del propio archivo HTML o bien realizando una carga de ese código indicando el archivo donde se encuentra el código JavaScript. Dentro de un documento HTML puede haber ninguno, uno o varios scripts de JavaScript. El uso de JavaScript es muy habitual en la programación web. En este curso no entramos a explicar el lenguaje de programación JavaScript, pero hemos considerado adecuado dejar indicado que JavaScript es un lenguaje que la mayor parte de los programadores web conocen porque permite hacer muchas cosas que no se pueden hacer con HTML. Si quieres profundizar en la programación web te recomendamos que después del curso de HTML realices los cursos de CSS y JavaScript de aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

Donar o colaborar

Este sitio se mantiene abierto gracias al apoyo de muchas personas. Si crees que merece la pena apoyar económicamente este sitio web puedes realizar una donación o colaborar. Contacta con nosotros.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

SEPTIEMBRE - OCTUBRE 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. .NET, C#
5. JavaScript, jQuery
6. HTML, CSS
7. Php, MySql
8. Android, iOS


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación