¿Qué es Javascript?

Hola chic@s, hoy vamos a hablar de qué es Javascript. Espero que os guste el artículo y que os sea de utilidad. A los que os suene a chino mandarín, no os preocupéis, lo voy a intentar explicar de una forma muy sencilla y con ejemplos para que todo quede muy pero que muy claro. Y sin enrollarme más, empezamos 🙂

¿Qué es Javascript? Podríamos decir que Javascript es un lenguaje de programación que se usa principalmente para la creación de páginas web dinámicas. Pero, ¿qué es una página web dinámica? Una página web dinámica, es aquella página que incorpora efectos como textos que aparece y desaparece, animaciones, acciones que se activan cuando pulsamos botones y hasta ventanas con mensajes que avisan a los usuarios.

Javascript es un lenguaje de programación interpretado, y por eso no es necesario compilarlo para ejecutar los programas. Esto significa que, los programas que hayamos escrito con Javascript se pueden visualizar y probar directamente en cualquier navegador, sin necesidad de hacer ningún proceso intermedio.

¿Cómo podemos incluir Javascript en documentos XHTML? Bueno, pues la verdad es que es muy sencillo. Y lo mejor de todo es que la integración es muy flexible, ya que podemos hacerlo hasta de tres formas diferentes. A continuación, os lo voy a explicar detalladamente para que no os quede ninguna duda, y os pondré incluso ejemplos para que sea más fácil.

  • Podemos incluir Javascript en el mismo documento XHTML

El código Javascript se encierra entre etiquetas <script></script> y se puede incluir en cualquier parte del documento. Aunque lo correcto es, incluirlo dentro de la cabecera del documento. Dentro de lo que se conoce la etiqueta <head>

Ejemplo:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”> <head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>Un ejemplo de código Javascript en el propio documento</title>

<script type=“text/javascript”>

alert(“Mensaje de prueba”); </script>

</head>

<body>

<p>Soy un párrafo interesante</p>

</body>

</html>

Para que nuestra página XHTML sea válida, es necesario que añadamos el atributo type a la etiqueta <script>. Para Javascript, el valor correcto es text/javascript.

Utilizaremos este método cuando queramos definir bloques pequeños de código o cuando queramos incluir instrucciones específicas en un determinado documento HTML. El único problema es, que si queremos hacer una modificación en el bloque del código, tendremos que modificar todas las páginas que incluyan el mismo bloque de Javascript.

  • Podemos definir Javascript en un archivo externo

Las instrucciones Javascript se pueden incluir en un archivo externo de tipo Javascript que los documentos XHTML enlazan con la etiqueta <script>. Podemos crear todos los archivos Javascript que necesitemos y cada documento XHTML puede enlazar tantos archivos Javascript como necesite. A la hora de guardar nuestros archivos Javascript, lo guardaremos con la extensión .js

Ejemplo:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>Un ejemplo de código Javascript en el propio documento</title>

<script type=”text/javascript” src=”/js/codigo.js“></script>

</head>

<body>

<p>Soy un párrafo interesante de texto</p>

</body>

</html>

Es muy importante definir el atributo src, que es la que nos va a indicar la URL que corresponde al archivo Javascript. Cada etiqueta <script> solo puede enlazar un único archivo, aunque en una misma página podemos añadir tantas etiquetas <script> como necesitemos.

Los archivos Javascript son documentos normales de texto con la extensión .js, que podemos crear cualquier editor de texto simple como Notepad, Wordpad, bloc de notas…

La principal ventaja de enlazar un archivo Javascript externo es que nos va a simplificar el código XHTML de la página, y además, podremos reutilizar el mismo código Javascript en todas las páginas del sitio web. Y también que, cualquier modificación que hagamos en nuestro archivo, podremos ver las modificaciones inmediatamente en todas las páginas XHTML que tengamos enlazadas.

  • Podemos incluir Javascript en los elementos XHTML

Aunque este método prácticamente no se utiliza, no quería dejar de explicarlo también. Consiste en incluir trozos de Javascript dentro de nuestro código XHTML.

Ejemplo:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>Un ejemplo de código Javascript en el propio documento</title>

</head>

<body>

<p onClick=”alert (Mis queridos lectores, esto es un mensaje de prueba)”> Soy un párrafo interesante de texto</p>

</body>

</html>

La desventaja es que ensucia el código XHTML de la página y entorpece el mantenimiento del código Javascript.

También hay que mencionar que algunos navegadores no disponen del soporte completo de Javascript, hay navegadores que nos permiten parcialmente, e incluso hay usuarios que lo bloquean por completo, porque creen que así navegan de una forma más segura.

Es por eso, que cuando una página requiera de Javascript para que funcione adecuadamente, al usuario le va a saltar un mensaje donde se le pide que active Javascript.

Ahora vamos a ver un ejemplo, en el que veremos cuando se accede a Javascript activado y cuando accedemos con Javascript totalmente desactivado, para entenderlo mucho mejor.

Ejemplo Javascript bloqueado en el navegador y sin bloquear en el navegador:

navegador web con javascript bloqueado natamartiny
Javascript bloqueado en el navegador

 

navegador web con javascript sin bloquear natamartiny
Javascript sin bloquear en el navegador

 

El lenguaje HTML define la etiqueta <noscript> para mostrar un mensaje al usuario cuando su navegador no puede ejecutar Javascript.

<head>…</head>

<body>

<noscript>

<p>Bienvenido a Natamartiny</p>

<p>Estás intentando visualizar la web, pero para poderlo ver todo correctamente, es necesario que actives Javascript. Si lo has deshabilitado, vuelve a activarlo.</p>

</noscript>

</body>

Incluiremos la etiqueta <noscript> en el interior de la etiqueta <body> (normalmente se suele incluir al principio de <body>). El mensaje que muestra <noscript> puede incluir cualquier elemento o etiqueta XHTML que queramos.

Entonces, hagamos un repaso rápido de términos para ver que todo nos está quedando clarísimo 🙂

¿Qué es script? Cada uno de los programas, aplicaciones o trozos de código creados en un lenguaje de programación Javascript. Unas pocas líneas de código forman un script.

¿Qué significa sentencia? Cada una de las instrucciones que forman un script.

¿Qué son palabras reservadas? Son las palabras que utilizamos para construir las sentencias de Javascript y que no podemos utilizar como nos de la gana. Palabras reservadas serían: break, case, catch, continue, default, do, else, finally, delete, function, if, in, for, new, return, instanceof, this, try, throw, switch, typeof, void, while, var, with.

¿Qué es la sintaxis? Lo definiríamos como un conjunto de reglas que se deben de seguir al escribir el código fuente de los programas para considerarlos como correctos. Pero, ¿cuáles son esas normas básicas que definen la sintaxis de Javascript? Tranqui, no te asustes, te las voy a mencionar a continuación. Y te aseguro que son muy sencillas. Vamos allá.

  • No se tienen en cuenta los espacios en blanco ni las nuevas líneas: Es importante saber que Javascript ignora cualquier espacio en blanco sobrante, por lo que podremos ordenar el código de forma que se entienda mejor.
  • Si en Javascript intercambiamos mayúsculas y minúsculas, el script no va a funcionar.
  • No es necesario definir el tipo de variable: Cuando creamos una variable, no tenemos que indicar el tipo de dato que va a almacenar. Con lo cual, una misma variable puede almacenar diferentes tipos de datos durante la ejecución del script.
  • No es necesario que cada sentencia lo terminemos con un punto y coma (;): Que Javascript no nos obligue a hacerlo, es mejor terminar cada sentencia con el punto y coma (;).
  • Podemos incluir comentarios: Usamos comentarios para añadir información el código fuente del programa. Javascript define dos tipos de comentarios: Los que son de una sola línea, y los que son de varias líneas.

Ejemplo de comentario de una sola línea: Se añaden don barras oblicuas (//) al principio de la línea.

//ahora vamos a mostrar un mensaje alert (“esto es un mensaje de prueba para que entiendas como se pone el comentario”);

Ejemplo de comentario de varias líneas: los comentarios se definen encerrando el texto del comentario entre los siguientes símbolos /* y */

/* Los comentarios de varias líneas son muy útiles cuando queremos incluir mucha información */ alert (“comentario de prueba”);

Javascript fue diseñado para que se ejecutara en un entorno limitado y que permitiera a los usuarios confiar en la ejecución de los scripts. Eso significa que, los scripts no pueden comunicarse con recursos que no pertenezcan al mismo dominio del que se descargó el script.

Los scripts tampoco te permiten cerrar ventanas que no hayan abierto esos mismos scripts. Las ventanas que vayamos a crear con los scripts, no pueden ser ni muy pequeñas ni tampoco muy grandes. Y, tampoco podemos colocarlo fuera de la vista de los usuarios.

Algo muy importante a mencionar, los scripts no pueden acceder a los archivos de los usuarios (ni en modo lectura ni escritura), y tampoco van a poder modificar las preferencias del navegador.

También añadir que, si un script está mal programado, y dura demasiado tiempo, el navegador nos va a informar de que el script está consumiendo demasiados recursos y podremos detener su ejecución.

Antes de terminar el artículo, me gustaría poneros un ejemplo de un script sencillo. Y te animo a que lo practiques en casa con tu ordenador. Como te he comentado, podrás escribirlo en un bloc de notas, wordpad, notepad…

Y además, te voy a proponer un ejercicio en casa para que lo hagas. Pero tranqui, que es muy sencillo. E incluso te vas a entretener haciéndolo. ¡Anímate, será divertido!

Ejemplo de un script sencillo:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>Nuestro primer script</title>

<script type=”text/javascript”> alert (“Hola Mundo”); </script>

</head>

<body>

<p> Esta página contiene nuestro primer script. Ha sido muy fácil crearlo y divertido</p>

</body>

</html>

Repasamos con este ejemplo de lo que hemos hablado en el artículo de hoy. El código script se puede incluir en cualquier parte del documento, aunque se recomiendo incluirlo dentro de la etiqueta <head>

A continuación, el código Javascript se debe incluir entre las etiquetas <script>…</script>. Además, para que nuestra página sea válida, es importante que definamos el atributo type de la etiqueta <script>. El atributo type se corresponde con el “tipo MIME”, que no es más que un estándar para que podamos identificar los diferentes contenidos. El “tipo MIME” correcto para Javascript sería text/javascript

Una ve que hayamos definido el área en el que vamos a incluir el script, escribiremos todas las sentencias de la aplicación. En el ejemplo sencillo solo hemos incluido una sentencia, que es alert (“Hola Mundo”);

La instrucción alert () permite mostrar el mensaje en las pantallas de los usuarios. Si se visualiza la página web de este primer script en cualquier navegador, automáticamente veremos una ventana con el mensaje Hola Mundo.

Qué os propongo para terminar este post. Es muy sencillo y la mar de divertido, que vosotros mismos desde casa y con un ordenador creéis vuestro primer script.

  1. Después de mostrar el mensaje del primer script, mostrar otro que diga: He sido capaz de crear mi propio script.
  2. Y por último, añadir en la página XHTML un mensaje de aviso para los navegadores que no tengan activado el soporte Javascript.

Como veis es muy sencillo. Y además que tenéis el artículo para guiaros.

Bueno mi querido lector, si has leído hasta el final, te doy las gracias. Y te animo a que si te apetece crear tu primer script lo hagas. Espero tus comentarios y opiniones, ya que me ayudan a seguir mejorando.

Si quieres seguir aprendiendo más cosas sobre Javascript, entonces no puedes perderte el artículo programación básica Javascript. Parte 1

¡Te animo a que te suscribas a la Newsletter para estar al tanto de todas las noticias y novedades!

3 Respuestas en “¿Qué es Javascript?”

[…] tal chicos?, aquí estoy de nuevo para daros caña. Después de haber aprendido qué es Javascript, la programación básica parte 1 y la programación básica parte 2, hoy hablaremos de las […]

[…] Parte 2. Si te acabas de incorporar a la información, te recomiendo que primero te leas qué es javascript y programación básica Javascript. Parte 1, para poder seguir el hilo de este post. Así que, sin […]

[…] chic@s, después de haberos explicado en profundidad qué es Javascript, hoy hablaremos sobre los elementos básicos con los que vamos a construir las aplicaciones. Te […]

Quiero conocer tu opinión

error: Este contenido esta protegido