En esta nueva entrada de DatoByte les quiero compartir conceptos básicos para iniciar la programación en JavaScripts.
¿Qué es Javascript?
JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas.
Una página web dinámica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario.
Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo que no es necesario compilar los programas para ejecutarlos. En otras palabras, los programas escritos con JavaScript se pueden probar directamente en cualquier navegador sin necesidad de procesos intermedios.
A pesar de su nombre, JavaScript no guarda ninguna relación directa con el lenguaje de programación Java. Legalmente, JavaScript es una marca registrada de la empresa Sun Microsystems
Javascript es un lenguaje con muchas posibilidades, utilizado para crear pequeños programas que luego son insertados en una página web y en programas más grandes, orientados a objetos mucho más complejos. Con Javascript podemos crear diferentes efectos e interactuar con nuestros usuarios.
Es necesario resaltar que hay dos tipos de JavaScript: por un lado está el que se ejecuta en el cliente, este es el Javascript propiamente dicho, aunque técnicamente se denomina Navigator JavaScript. Pero también existe un Javascript que se ejecuta en el servidor, es más reciente y se denomina LiveWire Javascript.
¿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
No todo es color rosa
En cuanto a las limitaciones, JavaScript fue diseñado de forma que se ejecutara en un entorno muy limitado que permitiera a los usuarios confiar en la ejecución de los scripts.
De esta forma, los scripts de JavaScript no pueden comunicarse con recursos que no pertenezcan al mismo dominio desde el que se descargó el script. Los scripts tampoco pueden cerrar ventanas que no hayan abierto esos mismos scripts. Las ventanas que se crean no pueden ser demasiado pequeñas ni demasiado grandes ni colocarse fuera de la vista del usuario (aunque los detalles concretos dependen de cada navegador).
Además, los scripts no pueden acceder a los archivos del ordenador del usuario (ni en modo lectura ni en modo escritura) y tampoco pueden leer o modificar las preferencias del navegador.
Por último, si la ejecución de un script dura demasiado tiempo (por ejemplo por un error de programación) el navegador informa al usuario de que un script está consumiendo demasiados recursos y le da la posibilidad de detener su ejecución.
A pesar de todo, existen alternativas para poder saltarse algunas de las limitaciones anteriores. La alternativa más utilizada y conocida consiste en firmar digitalmente el script y solicitar al usuario el permiso para realizar esas acciones.
Veamos un poco de JavaScript
Crear un objeto en javaScript es tan sencillo como:
var vehiculo={};
Si queremos añadirle propiedades con valores podemos hacerlo de varias formas:
Le podemos añadir las propiedades al momento de crear el propio objeto:
var vehiculo={
marca:"Chevrolet",
referencia:"Camaro ZL1",
placa:"XYZ 123",
modelo:2016
}
Tambien podemos añadirselas una vez creado el objeto:
var vehiculo={};
vehiculo.marca="Chevrolet";
vehiculo.referencia="Camaro ZL1";
vehiculo.placa="XYZ 123";
vehiculo.modelo=2016;
O inclusive mediante un constructor
function Vehiculo() {
this.marca="Chevrolet";
this.referencia="Camaro ZL1";
this.placa="XYZ 123";
this.modelo=2016;
}
var vehiculo=new Vehiculo();
También les podemos añadir funciones:
Al crear el propio objeto:
var vehiculo={
marca:"Chevrolet",
referencia:"Camaro ZL1",
placa:"XYZ 123",
modelo:2016
getDescripcionCompleta:function() {
return this.marca+this.referencia;
}
}
Una vez creado el objeto:
var vehiculo={};
vehiculo.marca="Chevrolet";
vehiculo.referencia="Camaro ZL1";
vehiculo.placa="XYZ 123";
vehiculo.modelo=2016;
vehiculo.getDescripcionCompleta=function() {
return this.marca+this.referencia;
};
Mediante un constructor
function Vehiculo() {
this.marca="Chevrolet";
this.referencia="Camaro ZL1";
this.placa="XYZ 123";
this.modelo=2016;
this..getDescripcionCompleta=function() {
return this.marca+this.referencia;
};
}
var vehiculo=new Vehiculo();
Funciones
Hay unas formas de crear funciones
La forma clásica
function sumar(a,b) {
return a+b;
}
var c=sumar(1,2);
Crear una funcion como una variable
var sumar=function (a,b) {
return a+b;
}
var c=sumar(1,2);
Podemos hacer funciones que retornan funciones y llamarlas directamente.
function getFunction() {
var sumar=function (a,b) {
return a+b;
}
return sumar;
}
var c=getFunction()(1,2);
Closure
Ahora vamos a ver una de las cosas mas raras para un programador Java. Una closure. Inicialmente es como un simple puntero a una función, algo como lo que ya existía en C, pero hay algo más. Veamos el siguiente ejemplo:
function getFunction() {
var extra=100;
var sumar=function (a,b) {
return a+b+extra;
}
return sumar;
}
var sumaClosure=getFunction();
var c=sumaClosure(1,2);
Al ejecutar el ejemplo , la variable c vale 103. Igual no te parece raro pero cuando se está ejecutando la función sumaClosure,ya no debería existir la variable extra pero si que existe y la función sumaClosure aun puede usar su valor aun cuando ya no estamos dentro de getFunction. Es es realmente una closure. Una función que se ejecuta en el contexto de donde se creo no donde está ahora. Puede parecer que esto es poco útil, pero con tanta llamada asíncrona en JavaScript es realmente útil.
El ejemplo lo podemos liar un poco mas añadiendo nuevas variables llamadas extra y veremos como no afecta al resultado, éste sigue siendo 103:
var extra=1000;
function getFunction() {
var extra=100;
var sumar=function (a,b) {
return a+b+extra;
}
return sumar;
}
extra=1100;
var fn=getFunction();
extra=1200;
var c=fn(1,2);
Espero estos conocimiento básicos sean de utilidad para iniciación de lenguajes de programación del lado del cliente, Proximamente estare publicando un tutorial de AngularJS.
