1. INTRODUCCIÓN
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:
1.
2.
3.
4.
5.
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 <!-- y -->, 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=iso8859-1">
<TITLE>Introducción a JavaScript</TITLE> <SCRIPT
LANGUAGE="JavaScript">
<!-function saludo() {
window.alert('Bienvenido a 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=iso8859-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;
2.3. 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
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
var
var
var
numberB
numberC
numberD
numberE
=
=
=
=
10;
15;
20;
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]
numbers[1]
numbers[2]
numbers[3]
numbers[4]
//Devuelve
//Devuelve
//Devuelve
//Devuelve
//Devuelve
5
10
15
20
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
1
2
3
4
|
|
|
|
|
5
10
15
20
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]
names[1]
//Returns 0.32
//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.
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
fruta.color
fruta.cantidad
fruta.dulce
//Devuelve
//Devuelve
//Devuelve
//Devuelve
"uva"
"rojo"
12
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
frutas[0].color
frutas[0].cantidad
frutas[0].dulce
==
==
==
==
"uva"
"rojo"
12
true
frutas[1].tipo
frutas[1].color
frutas[1].cantidad
frutas[1].dulce
==
==
==
==
"kiwi"
"cafe"
98
true
frutas[2].tipo
==
"banano"
frutas[2].color
frutas[2].cantidad
frutas[2].dulce
==
==
==
"amarillo"
0
true
Ciertamente, sabemos que frutas[2].cantidad bananos.
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"
}
}
]
};
5. 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>
Incluir ejemplos de fecha y hopra
E incrustar javascript
http://www.javascripts.astalaweb.net/_inicio/Tutorial.asp#.VRCk9ixHWCk
https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%
ADa_JavaScript_1.5/Concepto_de_JavaScript
http://gcoch.github.io/D3-tutorial/tipos-datos.html
http://librosweb.es/libro/ajax/capitulo_3.html
http://librosweb.es/libro/ajax/capitulo_2.html
https://www.google.co.ve/intl/es/about/products/
