Saltar al contenido

LDP | §1.5 - Introducción a JavaScript

§1.4 Los ladrillos básicos de la programación

JavaScript es un lenguaje que tiene su origen en el primer navegador web de uso masivo, Netscape Navigator, a principios de la década de los '90. En esa primera época de internet, las páginas web se comportaban como auténticas "páginas": eran completamente estáticas, como si fueran impresas (de aquí viene la noción, que permanece hasta hoy, de llamar "página" al contenido visto en un navegador).

Apareció así la idea de contar con la posibilidad de algún comportamiento más "dinámico", por lo que Netscape optó por agregar un lenguaje tipo script a su navegador. En ese momento se inició una colaboración con Sun Microsystems, quien estaba entonces desarrollando el lenguaje de programación Java, con la idea de incluirlo como parte del navegador. Por otro lado, también se estaba intentando alternativamente adaptar el lenguaje Scheme con el mismo objetivo.

Poco después, ante lo complejo de ambas estrategias (Java es más apto para el desarrollo de aplicaciones completas que como lenguaje simple para manipular elementos de una página web, mientras que Scheme es un lenguaje funcional de la familia de Lisp con una sintaxis más bien alejada de un lenguaje imperativo) se decidió crear uno desde cero tomando algunas ideas de Java.

En las etapas beta del nuevo navegador, el flamante lenguaje fue llamado LiveScript. Sin embargo, dado el auge que Java estaba teniendo en ese entonces, se decidió cambiar finalmente el nombre a JavaScript, esencialmente por razones de marketing. Naturalmente, esto causó (y causa) alguna confusión, ya que sugiere que ambos lenguajes están emparentados. Aunque sintácticamete tienen similitudes, en realidad son sustancialmente diferentes en estilo de programación y en ámbito de aplicación.

Con la popularidad de JavaScript en ascenso, Netscape presenta su lenguaje a la organizaciòn ECMA International con el propósito de lograr su estandarizción, cuya primera versión se publicó en 1997. Es por ello que, técnicamente, debemos decir que JavaScript es una implementación del estándar ECMAScript, aunque su popularidad hace que todos se refieran a este lenguaje simplemente como JavaScript, con independencia de su implementación.

Entorno de ejecución

A diferencia de otros lenguajes de propósito general, que permiten crear aplicaciones para un número amplio de plataformas y sistemas operativos, JavaScript está esencialmente confinado al interior de un navegador web, ya que ése fue su objetivo de diseño. Eso significa que cualquier navegador moderno tiene incorporado su propio intérprete de JavaScript, y es posible interactuar con él. Además suelen contar con muchas otras herramientas útiles para el desarrollo de páginas web. El acceso a estas herramientas se indica a continuación:

  • Chrome: Menú general (...) > Más herramientas > Herramientas del desarrollador.
  • Edge: Menú general (...) > Más herramientas > Herramientas de desarrollo.
  • Firefox: Menu Herramientas > Herramientas del navegador > Herramientas de desarrollador.
  • Safari: Menú Desarrollo (previa habilitación en Preferencias) > Consola de JavaScript.

En otros navegadores, basta con buscar la opción análoga.

Elementos de JavaScript

Todos los lenguajes de programación tienen una sintaxis, cuya primera manifestación es el uso de ciertas palabras reservadas, esto es, palabras que tienen un significado preciso para el lenguaje y normalmente no pueden ser usadas para otros propósitos. Una buena parte del aprendizaje de cualquier lenguaje es conocer y familizarizarse con estas palabras. En nuestro caso las iremos presentando de a una, a medida que vayamos introduciendo cada concepto.

También existe una serie de símbolos reservados que, en cierto contexto, tienen un significado preciso.

JavaScript es un lenguaje sensible a las mayúsculas/minúsculas (lo que se denomina case-sensitive). Esto implica que debemos prestar atención a la forma de escribir el programa, como pronto veremos.

Tipos de datos

JavaScript puede reconocer y procesar los siguientes tipos de datos:

  • Numéricos, tanto enteros como "fraccionarios" (punto flotante);
  • Textos, considerados como una "cadena de caracteres" o strings;
  • Lógicos, que pueden adoptar uno de los dos valores true (verdadero) o false (falso), también llamados booleanos;
  • Arreglos, considerados como listas o conjuntos ordenados de datos accesibles con un índice numérico;
  • Objetos, cuya naturaleza describiremos más adelante.

Además, JavaScript reconoce también dos valores "especiales", que son:

  • undefined: Representa que una variable (que veremos luego) no ha sido definida aún;
  • null: valor especial que se utiliza para indicar expresamente que una variable no tiene valor alguno.

Variables

Una variable es un nombre simbólico que representa alguna cantidad o valor en el programa. Es útil pensar una veriable como una pequeña "caja" capaz de almacenar un dato. Para identificar la caja y diferenciarla de otras se le asigna un nombre, llamado nombre de variable o identificador. JavaScript impone ciertas reglas a los identificadores que querramos usar:

  • Un identificador debe empezar con una letra (mayúscula o minúscula, com o sin acentos), un guión bajo (_) o el signo peso ($). Los caracteres siguientes pueden ser también dígitos (0 al 9). Por ejemplo, los siguientes identificadores son válidos:
    • total
    • Cantidad_de_alumnos
    • $cotizaciónDolar
    • juan23
    • _tiemporestante
  • Pero los siguientes no:
    • cuanto? (el signo '?' no se permite en un identificador)
    • 23juan (un identificador no puede empezar con un número) 
  • Como JavaScript es case-sensitive, estos dos identificadores son válidos pero diferentes:
    • juan23 y Juan23
  • Un identificador no debe contener espacios.

Para crear una variable debemos declararla, para lo cual debemos emplear la palabra reservada var de esta forma:

var x;

En esta línea hemos declarado una variable llamada x, que no tiene (aún) ningún valor asignado. Es común declarar y al mismo tiempo inicializar la variable (asignarle un valor), como en este ejemplo:

var x = 10;

En este caso, se crea la variable x con un valor inicial de 10. JavaScript deduce por el contexto que 10 es un número, por lo que x es en este punto una variable de tipo numérico.

Tipos de datos simples

Podemos ampliar el ejemplo a otros tipos de datos simples:

var x = 10;
var y = 'diez';
var z = true;

Aquí hemos declarado la variable y con el valor inicial 'diez'. JavaScript asume automáticamente que y es una variable de tipo texto (string). Estas variables contienen una serie arbitraria de cero o más caracteres (con algunas salvedades que veremos oportunamente) y deben estar encerrados por comillas simples ' ' o dobles " ". Otros ejemplos de asignaciones de tipo string son:

var y1 = 'Un texto más largo';
var y2 = "Un texto aún más largo que el anterior";
var y3 = "";

Volviendo al ejemplo precedente, z es una variable lógica o booleana, ya que recibió un valor lógico, en este caso 'verdadero' (true).

Tipos de datos compuestos

Los tres tipos de datos vistos hasta aquí (números, strings y lógicos) son considerados simples, en el sentido que definen un contenido considerado único o indivisible. JavaScript permite también ciertos tipos de datos compuestos, es decir, formados por un conjunto de datos simples.

Arreglos

Una serie ordenada de datos simples se llama arreglo (array). Se los escribe en JavaScript como un lista separada por comas y encerrada entre corchetes []. Estos son ejemplos válidos de arreglos:

var vocales = ['a', 'e', 'i', 'o', 'u'];
var dias_de_cada_mes = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

Si bien JavaScript permite que los tipos de datos de cada elemento del arreglo sea cualquiera, la práctica normal es que sean todos del mismo tipo.

Para acceder a un elemento particular del arreglo, se los referencia por su posición o índice, comenzando desde cero mediante el nombre del arreglo seguido del índice deseado entre corchetes. Por ejemplo, la siguiente declaración haría que la variable reciba el valor 'i':

var letra_i = vocales[2];

mientras que para saber el número de días del mes de agosto, deberíamos escribir

var diasDeAgosto = dias_de_cada_mes[7];

Objetos

Un objeto (object) es una estructura que permite mantener un grupo de datos relacionados, no necesariamente del mismo tipo. Cada dato que forma parte del objeto se llama propiedad y tiene su propio identificador, que debe cumplir los mismos requisitos que el de una variable. Los objetos se delimitan mediante llaves {}. Algunos ejemplos:

var persona1 = {nombre: 'Juan', edad: 35, paisDeNacimiento: 'Argentina', vacunado: true};
var persona2 = {nombre: 'Ana', edad: 32, paisDeNacimiento: 'Uruguay', vacunado: false};

Una vez definidos los objetos, para acceder a cualquiera de sus propiedades se las referencia mediante la notación objeto.propiedad. Usando los ejemplos anteriores,

var a = persona1.nombre;
var b = persona2.edad;

tendrìamos en a el valor 'Juan' y en b el valor 32.

Cuando un objeto se define, como hemos hecho aquí, en forma explícita o literal, es común escribirlo de manera que sus propiedades resulten más fáciles de leer. Por ejemplo, el primer objeto que definimos podría escribirse de manera más clara así:

var persona1 = {
nombre: 'Juan',
edad: 35,
paisDeNacimiento: 'Argentina',
vacunado: true
};

Las propiedades de un objeto pueden ser cualquier tipo de dato, incluyendo otros arreglos u objetos. Por ejemplo, podríamos expandir el objeto anterior de esta forma:

var persona1 = {
nombre: 'Juan',
edad: 35,
paisDeNacimiento: 'Argentina',
vacunado: true,
hermanos: ['Laura', 'Pedro', 'Jose'],
idiomas: {
ingles: 'avanzado',
portugues: 'intermedio'
}
};

Y de esta manera, para obtener el nombre del segundo hermano de persona1 y su nivel de portugués, deberíamos escribir respectivamente

var h = persona1.hermanos[1];
var n = persona1.idiomas.portugues;

Sentencias

Las sentenciasdeclaraciones (statements) son las instrucciones elementales con las que escribiremos un programa, y representan una línea mínima de código ejecutable por el lenguaje. Una serie ordenada de sentencias en JavaScript formará un bloque de código, equivalente al ladrillo básico secuencia antes descripto.

Cada línea de los ejemplos precedentes es una sentencia. Normalmente deben terminarse en punto y coma (;), aunque si la sentencia es la única en esa línea (o la última en una serie de sentencias sobre la misma línea), esta terminación puede omitirse. Por lo tanto, los siguientes ejemplos son válidos:

var a = 1; var b = 2;
var u = "A"; var v = "B"
var w = true

En cambio, el siguiente es erróneo:

var x = 3.5 var y = 3.6

De todas formas, constituye una buena práctica de programación terminar siempre cada sentencia en punto y coma.

Comentarios

Es usual que los distintos lenguajes de programación tengan una sintaxis para introducir en el programa líneas de texto explicativas que no forman parte del código ejecutable pero resultan útiles para explicar o documentar ese código. Ese texto, dirigido únicamente al programador humano que lee el código, se llama comentario (comment). En JavaScript podemos introducirlos de dos formas:

  • Comentarios de una sola línea: En cualquier parte del código, la inserción de una doble barra oblicua // instruye a JavaScript a ignorar el resto de esa línea. Por ejemplo,
    var alumnos = ['juan', 'pedro', 'ana']; // Alumnos para examen
  • Comentarios de varias líneas: También en cualquier punto del código puede abrirse un comentario mediante la secuencia de inicio de comentario /* (barra oblicua seguida de asterisco). JavaScript ignorará todo el texto que sigue a este símbolo hasta encontrar la secuencia de fin de comentario */ (asterisco seguido de barra oblicua), con independencia de la cantidad de líneas que existan entre ambos. Ejemplo:
    /*
    Alumnos que en principio pueden dar examen. Si se habilitan
    nuevos alumnos, se agregan al arreglo durante la ejecución.
    */
    var alumnos = ['juan', 'pedro', 'ana'];

Como en cualquier otro lenguaje, el uso sensato de los comentarios facilitan considerablemente una buena lectura y entendimiento del código.

§1.6 Funciones >