Qué es Javascript – Contenidos

PDF ????

A diferencia de los lenguajes anteriores, que podemos definir como lenguajes de marcas JavaScript es un lenguaje de programación que usaremos para añadir interactividad a las páginas Web incrustándolo en el código HTML .

JavaScript es un lenguaje interpretado y no genera ningún tipo de código compilado, sino que éste se interpreta en el navegador una vez que se descarga la página que lo contiene.

Al igual que antes no necesitamos ninguna herramienta especial para programar en JavaScript. Podríamos usar cualquier editor de texto como el bloc de notas de Windows. Aunque si es altamente aconsejable usar editores IDE cono el Netbeans u otros para facilitarnos el trabajo.

La mezcla de JavaScript con HTML se suele conocer con el nombre de HTML Dinámico o DHTML.

Integración con nuestras páginas

La integración de JavaScript y HTML es muy flexible, ya que existen al menos tres formas para incluir código JavaScript en las páginas web.

Javascript en el mismo documento

&lt;html>
    &lt;head>
&lt;title>JavaScript en el propio documento&lt;/title>
  &lt;script type=”text/javascript”>
       alert(“Esto es un mensaje en una ventada del navegador”);
    &lt;/script>
    &lt;/head>
    &lt;body>
    &lt;p>Un párrafo de texto.&lt;/p>
    &lt;/body>
    &lt;/html>

<html>

<head>

<title>JavaScript en el propio documento</title>

alert(“Esto es un mensaje en una ventada del navegador”);

</script>

</head>

<body>

<p>Un párrafo de texto.</p>

</body>

</html>

Como se puede apreciár con la etiqueta <script type=”text/javascript”> indicamos que lo que vamos a escribir es codificación Javascript. Aunque lo más aconsejable es que este bloque de contenido JS se realice dentro del head de la página no siempre es imprescindible pues en algunos casos nos veremos a ponerlas dentro del body.

La integración de JavaScript y HTML es muy flexible, ya que existen al menos tres formas para incluir código JavaScript en las páginas web.

Javascript en documento externo

Las instrucciones JavaScript se pueden incluir en un archivo externo de tipo JavaScript que se enlazan mediante la etiqueta <script>.

Ejemplo:
&lt;html>
&lt;head>
&lt;title>Ejemplo de código JavaScript en el propio documento&lt;/title>
 &lt;script type=”text/javascript” src=”archivoJavascript.js”>&lt;/script>
&lt;/head>
    &lt;body>
    &lt;p>Un párrafo de texto.&lt;/p>
    &lt;/body>
    &lt;/html>

Ejemplo:

<html>

<head>

<title>Ejemplo de código JavaScript en el propio documento</title>

</head>

<body>

<p>Un párrafo de texto.</p>

</body>

</html>

Además del atributo type, este método requiere definir el atributo src, que es el que indica la URL correspondiente al archivo JavaScript que se quiere enlazar.

*IMPORTANTE:

En el caso de la etiqueta <script> estamos obligados a poner la etiqueta de cierre </script>, sin ella no nos funcionará.

También debemos tener en cuenta que no podremos usar la llamada con la etiqueta para llamar un archivo e incluir código:

La principal ventaja de enlazar un archivo JavaScript externo es que se simplifica el código dado que se puede utilizar en distintos archivos HTML de la página y que cualquier modificación realizada en el archivo JavaScript se ve reflejada inmediatamente en todas las páginas que lo enlazan.

Javascript en elemento Html

Este último método es el menos utilizado y no es bueno abusar de su uso dado que resulta más complicado efectuar correciones y/o cambios, ya que consiste en incluir trozos de JavaScript dentro del HTML de la página:


&lt;html>
&lt;head>
&lt;title>JavaScript en el propio documento&lt;/title>
&lt;/head>
&lt;body>
&lt;p onclick=”alert(‘Un mensaje de prueba’)”>Un párrafo de texto.&lt;/p>
&lt;/body>
&lt;/html>

<html>

<head>

<title>JavaScript en el propio documento</title>

</head>

<body>

<p onclick=”alert(‘Un mensaje de prueba’)”>Un párrafo de texto.</p>

</body>

</html>

En general, este método sólo se utiliza para definir algunos eventos.

El navegador no soporta Javascript

Aunque podemos casi afirmar que cualquiera de nuestras páginas será interpretado con cualquier navegador dado que esta muy extendido, existe una etiqueta que nos da la opción de lanzar un mensaje o acción si se diese el caso de que no lo soportara. La etiqueta <noscrip>.

&lt;body>
&lt;noscript>
     &lt;p>La página que estás viendo requiere JavaScript. &lt;br />
 Si lo has deshabilitado, por favor vuelve a activarlo.&lt;/p> 
&lt;/noscript>
....

<body>

<p>La página que estás viendo requiere JavaScript. <br />

Si lo has deshabilitado, por favor vuelve a activarlo.</p>

</noscript>

....

Sintaxis Javascript

A diferencia de los lenguajes anteriores Javascript es mucho más estricto en la forma de escribir el código, haciendo más fácil que cometamos errores de escritura.

A continuación enumeramos las reglas mas importantes.

• No se tienen en cuenta las líneas ni espacios en blanco.

• Se distinguen las mayúsculas y minúsculas

• No se define el tipo de las variables: Javascript es débilmente tipado por lo que una variable podrá pasar de contener un número a un texto o cualquier otro tipo de dato, como veremos más adelante.

• Las sentencias no tienen que terminar con punto y coma (;): en la mayoría de lenguajes de programación, es obligatorio terminar cada sentencia con el carácter (;). Aunque no sea obligatorio se aconseja su uso para así adquirir buenas costumbres.

• Se pueden incluir comentarios: los comentarios se utilizan para añadir información en el código fuente del programa. Aunque el contenido de los comentarios no se visualiza por pantalla, si que se envía al navegador del usuario junto con el resto del script, por lo que es necesario extremar las precauciones sobre la información incluida en los comentarios.

• Los nombres de variables siempre deben empezar por una letra del alfabeto (mayúscula o minúscula), un subrayado (_) o un signo de dólar ($), y sólo pueden constar de letras, números y subrayados. Por supuesto, no pueden incluirse espacios en el nombre de una variable.

Como veremos mas adelante determinados tipos se diferencia por estar en mayúsculas por lo que se aconseja escribir siempre en minúsculas o escritura Camello (CamelCase).

CamelCase

Es un estilo de escritura que se aplica a frases o palabras compuestas. El nombre se debe a que las mayúsculas a lo largo de una palabra en CamelCase se asemejan a las jorobas de un camello. El nombre CamelCase se podría traducir como Mayúsculas/Minúsculas Camello. El término case se traduce como “caja tipográfica”, que a su vez implica si una letra es mayúscula o minúscula y tiene su origen en la disposición de los tipos móviles en casilleros o cajas.

Existen dos tipos de CamelCase:

UpperCamelCase, cuando la primera letra de cada una de las palabras es mayúscula. Ejemplo: EjemploDeUpperCamelCase.

lowerCamelCase, igual que la anterior con la excepción de que la primera letra es minúscula. Ejemplo: ejemploDeLowerCamelCase.

Comentarios

En Javascript tenemos dos tipos de comentarios, de línea y de párrafo.

Para los comentarios de línea basta con empezar dicha línea con //.

Ejemplo:
alert(‘mensaje‘) // esto es un comentario.
// esto es otro comentario

Para los comentarios de párrafo encerraremos el texto en cuestion entre /* texto */ , al igual que en css y otros lenguajes podremos incluir todo el texto que queramos.

/*
Esto es un comentario
de varias líneas
*/

Práctica

Crea un documento html incluyendo un script que nos lance en una venta el mensaje Hola Mundo, mediante la función de javasctipr alert().