1. INTRODUCCIÓN: JavaScript

JavaScript es una de las múltiples aplicaciones que han surgido para extender las capacidades del Lenguaje HTML. JavaScript es un lenguaje script orientado a documento. Nunca podrá hacer un programa, tan sólo podrá mejorar sus páginas Web.

¿Qué es JavaScript?

JavaScript es un lenguaje de script multiplataforma [cross-platform] orientado a objetos. Es un lenguaje pequeño y ligero; no es útil como un lenguaje independiente, más bien está diseñado para una fácil incrustación en otros productos y aplicaciones, tales como los navegadores Web. Dentro de un entorno anfitrión, JavaScript puede ser conectado a los objetos de su entorno para proveer un control programable sobre éstos.

NORMAS DEL CODIGO EN JAVASCRIPT

Las normas para poder escribir cualquier código de JavaScript se basan en 5 puntos básicos y que debemos cumplir siempre. Estas normas son las siguientes:

Todo el código (sentencias) esta dentro de funciones.
Las funciones se desarrollan entre las etiquetas <script> y </script>.
Las etiquetas "<script>" deben colocarse entre las etiquetas <head> y </head>.
Las etiquetas "<title>" no pueden estar colocadas entre las de "<script>".
La llamada a la función se hace a través de un evento de un elemento del documento.

¿Cómo nace Javascript?

Javascript nació con la necesidad de permitir a los autores de sitio web crear páginas que permitan intercambiar con los usuarios, ya que se necesitaba crear webs de mayor complejidad. El HTML solo permitía crear páginas estáticas donde se podía mostrar textos con estilos, pero se necesitaba interactuar con los usuarios.

En los años de 1990, Netscape creo Livescript; las primeras versiones de este lenguaje fueron principalmente dedicadas a pequeños grupos de diseñadores Web que no necesitaban utilizar un compilador, o sin ninguna experiencia en la programación orientada a objetos.

A medida que estuvieron disponibles nuevas versiones de este lenguaje incluían nuevos componentes que dan gran potencial al lenguaje, pero lamentablemente esta versión solo funcionaba en la última versión del Navigator en aquel momento.

En diciembre de 1995, Netscape y Sun Microsystems (el creador del lenguaje Java) luego de unirse objetivo de desarrollar el proyecto en conjunto, reintroducen este lenguaje con el nombre de Javascript. En respuesta a la popularidad de Javascript, Microsoft lanzo su propio lenguaje de programación a base de script, VBScript (una pequeña versión de Visual Basic).

En el año de 1996 Microsoft se interesa por competir con Javascript por lo que lanza su lenguaje llamado Jscript, introducido en los navegadores de Internet Explorer. A pesar de las diferentes críticas que se le hacen al lenguaje Javascript, este es uno de los lenguajes de programación más populares para la web. Desde que los navegadores incluyen el Javascript, no necesitamos el Java Runtime Environment (JRE), para que se ejecute.

El Javascript es una tecnología que ha sobrevivido por más de 10 años, es fundamentales en la web, junto con la estandarización de la “European Computer Manufacturers Association” (ECMA) (adoptada luego por la ISO) y W3C DOM, Javascript es considerado por muchos desarrolladores web como la fundación para la próxima generación de aplicaciones web dinámicas del lado del cliente.

La estandarización de Javascript comenzó en conjunto con ECMA en Noviembre de 1996. Es adoptado este estándar en Junio de 1997 y luego también por la “Internacional Organization for Standardization” (ISO). El DOM por sus siglas en inglés “Modelo de Objetos del Documento” fue diseñado para evitar incompatibilidades.

¿Dónde puedo ver funcionando Javascript?

Entre los diferentes servicios que se encuentran realizados con Javascript en Internet se encuentran:

Correo
Chat
Buscadores de Información

También podemos encontrar o crear códigos para insertarlos en las páginas como:

Reloj
Contadores de visitas
Fechas
Calculadoras
Validadores de formularios
Detectores de navegadores e idiomas

2) CARACTERISTICAS DEL LENGUAJE HTML:

Su sintaxis es similar a la usada en Java y C, al ser un lenguaje del lado del cliente este es interpretado por el navegador, no se necesita tener instalado ningún Framework.

Variables: var = “Hola”, n=103
Condiciones: if(i<10){ … }
Ciclos: for(i; i<10; i++){ … }
Arreglos: var miArreglo = new Array(“12”, “77”, “5”)
Funciones: Ppopias del lenguaje y predefinidas por los usuarios
Comentarios para una sola línea: // Comentarios
Comentarios para varias lineas:
/*
Comentarios
*/
Permite la programación orientada a objetos: document.write("Hola");
Las variables pueden ser definidas como: string, integer, flota, bolean simplemente utilizando “var”. Podemos usar “+” para concatenar cadenas y variables.

¿Cómo identificar código Javascript?

El código javascript podemos encontrarlo dentro de las etiquetas <body></body> de nuestras páginas web. Por lo general se insertan entre: <script></script>. También pueden estar ubicados en ficheros externos usando:

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

3) ESTRUCTURA DE DATOS

¿Cómo introducir JavaScript en el código HTML?

Básicamente existen dos formas de introducir un script de JavaScript en una página HTML:

· Embebido en el código HTML, entre las tags <script> y </script>. El siguiente código muestra un ejemplo de código JavaScript embebido en el HTML de una página. Como se observa, el código JavaScript figura entre las marcas de comentario , para que no aparezca en la página. Además, delante de la marca de cierre de comentario se insertan los caracteres //, de comentario en JavaScript, para que el intérprete JavaScript no dé error por la línea -->.

<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<TITLE>Introducción a JavaScript</TITLE> <SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY onLoad="saludo()">

· Como archivo .js que se carga con la página HTML. Para ello, debe indicarse en las tags anteriores el nombre y ubicación del archivo .js que contiene el script JavaScript, como en este ejemplo:

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<TITLE>Tutorial de JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript" SRC="scripts/fuente.js"></SCRIPT>
</HEAD>

USO DE FUNCIONES

Las funciones son un conjunto de sentencias (bloque de código) que especifica al programa las operaciones a realizar. Son útiles para evitar la repetición de líneas y modular el código. Para trabajar con ellas hay que desarrollarlas y llamarlas cuando lo necesitemos.

SINTAXIS DEL DESARROLLO:

function
nombre_funcion([var1,var2,varN])

{
sentencia(s);
}

SINTAXIS DE LA LLAMADA:

<elemento
evento=nombre_funcion([val1,val2,valN]);>

nombre_funcion(valor1,valor2,valorN);

En el primero de los casos la llamada se realiza desde un elemento del documento. En el segundo caso la llamada se realiza desde el interior de otra función que también es posible.

Diferentes Tipos de Datos

D3 es muy flexible en cuanto a datos de entrada. Este tema introduce las estructuras de datos que se usan comúnmente en JavaScript y D3.

Variables

Una variable es un dato, el bloque más pequeño de información. La variable es el cimiento para todas las demás estructuras de datos, que simplemente son configuraciones diferentes de las variable.

Las variables se definen mediante la palabra reservada var, que permite definir una o varias variables simultáneamente:

var variable1 = 16;

var variable2 = "hola", variable3 = "mundo";

var variable4 = 16, variable5 = "hola";

El nombre de las variables debe cumplir las dos siguientes condiciones:

El primer carácter debe ser una letra o un guión bajo (_) o un dólar ($).
El resto de caracteres pueden ser letras, números, guiones bajos (_) y símbolos de dólar ($).

No es obligatorio inicializar una variable al declararla:

var variable6;

Si la variable no se declara mediante el operador var, automáticamente se crea una variable global con ese identificador y su valor. Ejemplo:

var variable1 = 16;

variable2 = variable1 + 4;

4. Palabras reservadas

Como cualquier otro lenguaje de programación, JavaScript utiliza una serie de palabras para crear las instrucciones que forman cada programa. Por este motivo, estas palabras se consideran reservadas y no se pueden utilizar como nombre de una variable o función.

El estándar ECMA-262 incluye la lista de las palabras reservadas que utiliza actualmente JavaScript y la lista de las palabras reservadas para su uso futuro.

Utilizadas actualmente:

break, else, new, var, case, finally, return, void, catch, for, switch, while, continue, function, this, with, default, if, throw, delete, in, try, do, instanceof, typeof

Reservadas para su uso futuro:

abstract, enum, int, short, boolean, export, interface, static, byte, extends, long, super, char, final, native, synchronized, class, float, package, throws, const, goto, private, transient, debugger, implements, protected, volatile, double, import, public

5. Arreglos

Un arreglo es una secuencia de valores, que se almacena muy convenientemente dentro de una sola variable.

Manejar datos relacionados en diferentes variables es muy ineficiente:

var numberA = 5;

var numberB = 10;

var numberC = 15;

var numberD = 20;

var numberE = 25;

Al reescribir esto como un arreglo, se vuelven mucho más sencillos estos valores. Los corchetes definen un arreglo y las comas separan cada uno de los valores:

var numbers = [ 5, 10, 15, 20, 25 ];

Los arreglos son un componente intrínseco de las visualizaciones de datos, por consiguiente es necesario entenderlos bien. Se puede acceder al valor almacenado en un arreglo, utilizando notación de corchetes:

numbers[2] //Devuelve 15

El numeral dentro del corchete se refiere a la posición correspondiente en el arreglo. Recuerde que las posiciones del arreglo comienzan en cero, entonces la primera posición es 0, la segunda es 1 y así sucesivamente.

numbers[0]  //Devuelve 5

numbers[1]  //Devuelve 10

numbers[2]  //Devuelve 15

numbers[3]  //Devuelve 20

numbers[4]  //Devuelve 25

Algunas personas encuentran útil pensar en arreglos en términos espaciales, como si tuvieran filas y columnas, como una hoja de cálculo:

ID | Valor

0  |  5

1  |  10

2  |  15

3  |  20

4  |  25

Los arreglos pueden contener cualquier tipo de datos, no solamente enteros.

var percentages = [ 0.55, 0.32, 0.91 ];

var names = [ "Ernie", "Bert", "Oscar" ];

percentages[1]  //Returns 0.32

names[1]        //Returns "Bert"

De qué están hechos los Arreglos. Función for()

La visualización de datos basada en código no sería posible sin arreglos y el poderoso loop for(). Juntos, conforman el dúo dinámico de los “geeks” de datos. (En caso de que usted no se considere un “data geek, le recuerdo que está leyendo el documento titulado “Tipos de datos.”).

Un arreglo organiza muchos datos en un lugar conveniente. Luego, la función for() puede rápidamente recorrer todos los datos del arreglo y ejecutar alguna acción sobre ellos – tal como mostrar su valor de manera visual. D3 por lo general maneja el recorrido (looping) con su método mágico data(), pero es importante poder escribir nuestros propios loops.

No voy a describir la mecánica de los loops for() acá; esto da para otro tutorial entero por separado. Pero tome nota de este ejemplo, el cual recorre los valores del arreglo numbers de arriba.

for (var i = 0; i < numbers.length; i++) {

console.log(numbers[i]);  //Imprime el valor a la consola

Ve ese numbers.length? Esa es la parte bella. Si numbers tiene diez posiciones, el loop correrá diez veces. Si tiene diez millones de posiciones… sí, usted ya sabe. Para esto es que son buenas las computadores: para recibir un grupo de instrucciones y ejecutarlas una y otra vez. Y esto se encuentra en el corazón de por qué son tan satisfactorias las visualizaciones de datos – uno diseña y codifica el sistema de visualización y el sistema responde acorde, aún cuando se le entrega diferentes datos. Las reglas de mapeo del sistema son consistentes, aún cuando los datos no lo son.

6. Objetos

Los arreglos son excelentes para listas simples de valores, pero cuando se tienen conjuntos complejos de datos, es deseable almacenar los datos en un objeto. Para nuestro propósito, se debe pensar en un objeto de JavaScript como si fuera una estructura de datos hecha a la medida. Se usan las entre llaves {} para identificar a un objeto. Dentro de las llaves, se incluyen índices y valores. Dos puntos : separan cada índice de su valor, y una coma separa cada par de índice/valor.

var fruta = {

    tipo: "uva",

    color: "rojo",

    cantidad: 12,

    dulce: true

};

Para referenciar cada valor, se utiliza la notación de puntos, especificando el nombre del índice.

fruta.tipo      //Devuelve "uva"

fruta.color     //Devuelve "rojo"

fruta.cantidad  //Devuelve 12

fruta.dulce     //Devuelve true

Piense en el valor como “perteneciendo” al objeto. Mire, una fruta. “Qué tipo de fruta es? puede que se pregunte. Y de veras, fruta.tipoes "uva". Y es dulce? Sí, definitivamente, puesto que fruta.dulce es true.

Objetos y Arreglos

Es posible combinar estas dos estructura y crear arreglos de objetos, u objetos de arreglos, u objetos de objetos, o básicamente cualquier estructura que tenga sentido para su conjunto de datos.

Digamos que hemos adquirido otras frutas y que queremos expandir nuestro catálogo. Utilizamos los corchetes []en la parte de afuera par indicar que es un arreglo, seguido por las entre llaves {}y notación de objetos en la parte de adentro, con una coma separando a cada objeto.

var frutas = [

    tipo: "uva",

    color: "rojo",

    cantidad: 12,

    dulce: true

},

    tipo: "kiwi",

    color: "cafe",

    cantidad: 98,

    dulce: true

},

    tipo: "banano",

    color: "amarillo",

    cantidad: 0,

    dulce: true

];

Para obtener acceso a estos datos, debemos seguir el sendero de los índices hacia los valores que buscamos. Recuerde, [] significa arreglo, y {} significa objeto.frutas es un arreglo, entonces utilizamos la notación de corchetes primero para especificar el índice del arreglo.

fruta[1]

Seguido, cada elemento del arreglo es un objeto, entonces se añade un punto y un índice:

fruta[1].cantidad //Devuelve 98

Acá está el mapa de cómo acceder a todos los valores del arreglo de objetos denominado frutas:

frutas[0].tipo      ==  "uva"

frutas[0].color     ==  "rojo"

frutas[0].cantidad  ==  12

frutas[0].dulce     ==  true

frutas[1].tipo      ==  "kiwi"

frutas[1].color     ==  "cafe"

frutas[1].cantidad  ==  98

frutas[1].dulce     ==  true

frutas[2].tipo      ==  "banano"

frutas[2].color     ==  "amarillo"

frutas[2].cantidad  ==  0

frutas[2].dulce     ==  true

Ciertamente, sabemos que frutas[2].cantidad bananos.

7. JSON

En algún punto de su carrera de D3, encontrará la Notación de Objetos de Javascript. Puede leer los detalles, sin embargo JSON es básicamente un tipo de sintaxis específico para organizar datos como objetos de JavaScript. Esta sintaxis se ha optimizado para uso con JavaScript (obviamente) y llamadas AJAX, por eso es que verá muchos de los APIs de la red botando datos en formato JSON. Es más rápido y fácil de descomponer con JavaScript que XML y por supuesto, D3 funciona bien con este formato.

Todo esto, y en resumen no se ve mucho más raro que lo que ya hemos visto:

var jsonFruta = {

    "tipo": "uva",

    "color": "rojo",

    "cantidad": 12,

    "dulce": true

};

La única diferencia acá es que nuestros índices ahora están rodeados por comillas ” “, de tal forma que todos los valores son cadenas de caracteres.

GeoJSON

Así como JSON es solamente un formalismo para la sintaxis de objetos de JavaScript existente, GeoJSON es la sintaxis formal de objetos JSON, optimizada para almacenar información geográfica. Todos los objetos GeoJSON son objetos JSON, y todos los objetos JSON son objetos de JavaScript.

GeoJSON puede almacenar puntos en un espacio geográfico (típicamente coordenadas longitud/latitud), pero también formas (como líneas y polígonos) y otro tipo de representaciones espaciales. Si tiene bastante información geográfica, vale la pena descomponerla en formato GeoJSON para optimizar su uso en D3.

Entraremos en detalles acerca de GeoJSON cuando hablemos de mapas geográficos, pero por el momento, es suficiente con saber que un dato simple en formato GeoJSON puede representarse así:

var geodata = {

    "type": "FeatureCollection",

    "features": [

            "type": "Feature",

            "geometry": {

                "type": "Point",

                "coordinates": [ 150.1282427, -24.471803 ]

},

            "properties": {

                "type": "town"

};

8. PRIMER PROGRAMA

Ahora vamos paso a paso a construir nuestro primer programa, y así podremos ver los elementos principales del lenguaje y su colocación dentro del documento Web. Solo debemos seguir la teoría vista en los temas anteriores.

EJEMPLO 1: Llamada a una función desde un elemento del documento.
<html>
<head>
<script>
function hola()
{
alert("Hola a todos");
}
</script>

<title>Autor:Ricardo
Amezua</title>

</head>

<body onLoad=hola();>
</body>
</html>

EJEMPLO 2: Llamada a una función desde otra.
<html>
<head>
<script>
function hola()
{
alert("Hola a todos");
rehola();
}
function rehola()
{
alert("hola de nuevo a todos");
}
</script>

<title>Autor:Ricardo
Amezua</title>

</head>

<body onLoad=hola();>
</body>
</html>

EJEMPLO 3: Fución de Tiempo (fecha).

<html>

<head>
<title>Fecha corta 3</title>
</head>

<p align="center"><b>Fecha corta 3</b></p>
<script Language="JavaScript">

</script>
<script Language="JavaScript">

</script>
<body>

</body>

</html>

Copyleft:

Páginas

sábado, 18 de junio de 2016

Introducción a JavaScript