JavaScript (abreviado comúnmente JS) es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos,3 basado en prototipos, imperativo, débilmente tipado y dinámico.
Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas4 aunque existe una forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo.
Desde el 2012, todos los navegadores modernos soportan completamente ECMAScript 5.1, una versión de javascript. Los navegadores más antiguos soportan por lo menos ECMAScript 3. La sexta edición se liberó en julio del 2015.5
JavaScript se diseñó con una sintaxis similar a C, aunque adopta nombres y convenciones del lenguaje de programación Java. Sin embargo, Java y JavaScript tienen semánticas y propósitos diferentes.
Todos los navegadores modernos interpretan el código JavaScript integrado en las páginas web. Para interactuar con una página web se provee al lenguaje JavaScript de una implementación del Document Object Model (DOM).
Tradicionalmente se venía utilizando en páginas web HTML para realizar operaciones y únicamente en el marco de la aplicación cliente, sin acceso a funciones del servidor. Actualmente es ampliamente utilizado para enviar y recibir información del servidor junto con ayuda de otras tecnologías como AJAX. JavaScript se interpreta en el agente de usuario al mismo tiempo que las sentencias van descargándose junto con el código HTML.
Desde el lanzamiento en junio de 1997 del estándar ECMAScript 1, han existido las versiones 2, 3 y 5, que es la más usada actualmente (la 4 se abandonó6). En junio de 2015 se cerró y publicó la versión ECMAScript 6.7
Algunas características del lenguaje son:
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.
Diferencias entre Java y JavaScript
Dada la similitud de nombre suelen considerarse como sinónimos o muy similares cuando existen diferencias apreciables entre las que cabe destacar: * Java es un lenguaje de programación y JavaScript no, aunque ambos comparten la misma sintaxis.
- JavaScript no es un lenguaje compilado. JavaScript se integra directamente en las páginas HTML y es interpretado (sin estar compilado) por el cliente (navegador). Es decir, el programa fuente (página web) se ejecuta directamente.
- JavaScript está basado en objetos, mientras que Java es un lenguaje de programación orientado a objetos (OOP). JavaScript no utiliza clases, herencias o técnicas habituales en la OOP.
- No existe la declaración de tipos de variables a utilizar. JavaScript se encarga de ello automáticamente.
- Las referencias a los objetos se comprueban en tiempo real durante la ejecución. En los lenguajes compilados como Java esa comprobación se efectúa al compilarse.
- JavaScript no puede (no sabe) escribir en el disco duro (excepto cookies). Por ello puede considerarse como un lenguaje seguro en Internet, en el sentido que desde las páginas web, con JavaScript, no se pueden “gastar bromas”.
Qué es el Javascript y por qué me interesa en HTML5
Si estás leyendo este artículo, ya sabrás lo que es el Javascript… si no es tu caso en la wikipedia lo definen como:
JavaScript es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos,3 basado en prototipos, imperativo, débilmente tipado y dinámico.
No creo necesario entrar en detalles, siempre se puede ir a la entrada de wikipedia para más información y obtener interesantes enlaces sobre el lenguaje.
De manera informal, el Javascript es lo que se utiliza en los sitios web para hacer esos efectos molones de sliders, mover bloques de contenido (drag&drop), etc etc… básicamente cualquier tipo de interactividad entre el usuario y la página web utiliza Javascript, por ejemplo:
- Seguramente en más de una ocasión has oído hablar de AJAX. Bien, AJAX significa “Asynchronous JavaScript And XML”… sí, Javascript.
- jQuery también es una de esas palabrejas que está en boca de todos y no es ni más, ni menos, que un framework de Javascript… eso sí, es tan maravilloso que muchos frontends utilizan jQuery por todos los beneficios que aporta (yo soy fan de jQuery), pero desconocen cómo se programa en Javascript, vamos que les quitas el jQuery y ni un document.getElementById saben hacer… ese es el gran peligro de los frameworks, son maravillosos y todos debemos utilizarlos sí o sí, pero antes hay que conocer el lenguaje, es vital!!
Norma para incluir nuestro Javascript
Realmente no existe una norma de obligado cumplimiento a la hora de colocar nuestro código Javascript dentro del HTML… un momento… ¿dentro del HTML? 
Sí, el código Javascript lo interpreta nuestro navegador web, por lo tanto necesitamos incluirlo en el HTML. Cuando en un navegador se escribe la URL de un sitio web, se hace una petición al servidor que aloja el sitio, para que devuelva la información que debe pintar el ordenador en el navegador web.
Esta información se devuelve, normalmente, en forma de un código HTML que el navegador interpreta y pinta. Esto significa que si yo quiero que el navegador interprete un determinado código Javascript debo indicarle al navegador de alguna forma que existe un código Javascript que quiero que se ejecute y como el navegador lo que recibe es un código HTML… esta indicación tendrá que ir en el HTML.
Para esto, entre otras cosas, HTML tiene el tag script… lamentablemente ahí se acaba “la norma”.
Diferentes formas de incluir nuestro Javascript
Para explicar las diferentes posibilidades a la hora de incluir nuestro código Javascript vamos a utilizar como ejemplo una pantalla que muestre el texto “Clic aquí” y que, una vez se haga clic, muestre una alerta diciendo “Hola mundo!”.
Old-old-old-old-style todo en el HTML
Al principio de los tiempos era muy habitual encontrarnos con código javascript dentro de las propias etiquetas HTML, formando parte de un atributo de evento, como el evento onclick.
ESTRUCTURA BÁSICA DE UN PROGRAMA
Un script es un código interpretado por un software especial capaz de leerlo línea tras línea. En el caso de Internet este software es un navegador web. Chrome, Mozilla, Safari, Opera, Explorer… cualquiera sirve.
Pues bien, cuando empezamos a escribir lo primero que vamos a necesitar será coger buenos hábitos desde un buen principio. Personalmente me gusta estructurar un programa de la siguiente forma:
- Pre. Comentario informativo de lo que vamos a programar y de que esperamos que haga el programa.
- Declaración de variables. Una variable es un espacio de memoria que sirve para alojar una información. Un dato como por ejemplo una cadena de texto o un número. En javascript no es necesario declarar las variables, pero es una práctica recomendada para no hacer sufrir a los ordenadores en exceso.
- Declaración de funciones. Una función es un tipo especial de variable que almacena un cálculo o una acción y que puede o no devolver un resultado.
- Las funciones a su vez pueden volver a tener todos los pasos del 1 al 6 que se mencionan en este escrito.
- Declaración de instrucciones. Aquello que queremos que ejecute el script.
- Dar un resultado o cálculo. Como ejemplo de resultado podríamos tener un texto escrito, un resultado numérico, una modificación de una página web, … etc
- Post. Enunciado explicativo de lo que ha hecho el programa y que resultado y de que tipo y valor devuelve el programa.
Los pasos 1 y 6 son optativos. Pero una buena práctica al fin y al cabo cuando la programación se complica.
COMENTARIOS EN JAVASCRIPT
Veamos un ejemplo. Escribe este código y guárdalo en un archivo de extensión html:
| <html> <head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8"> <script type="text/javascript"> /* Funciones JavaScript Versión 0.1 Autor: César Krall Curso: Tutorial básico del programador web: JavaScript desde cero */ //Función que muestra mensaje de bienvenida function mostrarMensaje1() { alert('Bienvenido al curso JavaScript de aprenderaprogramar.com'); } function mostrarMensaje2() { //Mensaje si se hace click sobre párrafo alert('Ha hecho click sobre el párrafo inferior'); } </script> </head> <body> <div> <p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor</p> <img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"> <p style="background-color:yellow;" onclick="mostrarMensaje2()">Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a las páginas web. </p> </div> </body> </html> |
Definición de funciones
Declaraciones de función
La definición de una función (también llamada declaración de función o sentencia de función) consiste de la palabra clave (reservada)
function, seguida por:- El nombre de la función (opcional).
- Una lista de argumentos para la función, encerrados entre paréntesis y separados por comas (,).
- Las sentencias JavaScript que definen la función, encerradas por llaves,
{ }.
Por ejemplo, el siguiente código define una función simple llamada
square:function square(number) {
return number * number;
}
La función
square toma un argumento, llamado number. La función consiste de una sentencia que expresa el retorno del argumento de la función (el cual es, number) multiplicado por sí mismo. La sentencia return especifica el valor retornado por la función.return number * number;
Los parámetros primitivos (como puede ser un número) son pasados a las funciones por valor; el valor es pasado a la función, pero si la función cambia el valor del parámetro, este cambio no es reflejado globalmente o en otra llamada a la función.
Si pasa un objecto (p. ej. un valor no primitivo, como un
Array o un objeto definido por el usuario) como parámetro, y la función cambia las propiedades del objeto, este cambio es visible desde afuera de la función, como se ve en el siguiente ejemplo:function myFunc(theObject) {
theObject.make = "Toyota";
}
var mycar = {make: "Honda", model: "Accord", year: 1998},
x,
y;
x = mycar.make; // x toma el valor "Honda"
myFunc(mycar);
y = mycar.make; // y toma el valor "Toyota"
// (la propiedad make fue cambida por la funcion)function myFunc(theObject) {
theObject = {make: "Ford", model: "Focus", year: 2006};
}
var mycar = {make: "Honda", model: "Accord", year: 1998},
x,
y;
x = mycar.make; // x toma el valor "Honda"
myFunc(mycar);
y = mycar.make; // y sigue con el valor "Honda"Expresiones de función
Si bien la declaración de la función anterior es sintácticamente una sentencia, las funciones pueden también ser creadas por una expresión de función. Tal función puede ser anónima; no debe tener un nombre. Por ejemplo, la función
square podría haber sido definida como:var square = function(number) {return number * number};
var x = square(4) //x obtiene el valor 16
Sin embargo, se puede proporcionar un nombre a una expresión de función, y éste puede ser utilizado dentro de la función para referirse a sí misma, o en un depurador para identificar la función en el trazado de pila:
var factorial = function fac(n) {return n<2 ? 1 : n*fac(n-1)};
Partes de una funcion en Java Script
Funciones con parámetros[editar]
Como ya indicamos en el capítulo anterior, los parámetros nos sirven para llamar a nuestras funciones con unos datos específicos para que los procese. Y en cada llamada, podemos darle unos parámetros diferentes, que harán que pueda comportarse de forma diferente, si ese es el comportamiento que le hemos programado.
var numero = 1;
var cadena = "Hi!";
var logico = true;
function valores(num, cad, log)
{
document.write(num);
document.write(cad);
document.write(log);
}
valores(numero, cadena, logico);
Esta función la estamos llamando con variables como parámetros, pero también podemos llamar a la función con valores literales, es decir, valores simples directos:
valores(2, "adiós", false);
Como ya vimos en el capítulo anterior, también podemos hacer que otra función sea un parámetro:
valores(3, "que tal".length, true);
"que tal".length es una función que forma parte de los objetos de cadena de texto (todo, desde las variables hasta los literales, son objetos en JavaScript), y nos devuelve la longitud de una cadena de texto. En concreto, al hacer esta llamada nos devolverá un número '7'. Como las variables en JavaScript no tienen tipo (todas son objetos), podemos pasar cualquier valor como parámetro.
Devolución de datos[editar]
Como ya sabemos, una función puede devolver datos hacia afuera por medio de la expresión return. Naturalmente, podemos devolver cualquier tipo de datos. Sin embargo hay que tener en cuenta una serie de cuestiones:
- Siempre se devuelven objetos, como ya hemos visto, y por lo tanto podemos devolver un objeto creado en la misma función. Normalmente, cuando creamos una variable dentro de una función, esta variable existe sólo para esa función, y desaparece en el momento en que la función termina (la variable se encuentra en la pila de memoria, y cuando la función desaparece, también lo hace la pila); pero en el caso de que devolvamos el objeto, no se devuelve exactamente la misma variable, si no que se devuelve su contenido.
- Cuando devolvemos true ó un valor distinto que cero, para JavaScript es lo mismo, y si devolvemos false o 0, también viene a ser lo mismo. Esta es una regla estándar para muchos lenguajes como JavaScript, Java, PHP, Perl, etc...
- No es preciso que una función devuelva nada. No es necesario usar return. Además, también es posible que en vez de devolver resultados, se modifiquen variables globales, es decir, variables creadas fuera de la función y que se usan dentro.
- Si queremos salir de una función antes de tiempo, porque algo ha fallado o no hay nada que hacer en un caso específico, podemos simplemente escribir "return;", lo que nos permitirá salir sin más y no devolver ningún valor.
Estas consideraciones son importantes a nivel general y es importante tenerlas en cuenta. Vamos a ver como funcionan con algunos ejemplos:
function dev_variable()
{
variable = true;
return variable;
}
var var1 = dev_variable();
Como vemos, hemos declarado una variable local a la función y la hemos devuelto, pero solo se devuelve realmente el valor. Esto pasa en todos los casos (Nota técnica: cuando se devuelve un objeto, se devuelven sus datos en forma de objeto de esa clase; esto lo entenderemos mejor en el capítulo siguiente). Veamos este otro ejemplo:
function dev_true() {
return true;
}
if (dev_true()) {
alert("es true");
}
if (true) {
alert("también es true");
}
if (1)
{
alert("este también es true");
}
Por último, veamos cómo salir de una función sin necesidad de devolver nada en cualquier momento:
function salir()
{
document.write("hola");
document.write("que pasa");
return;
alert("adiós");
}
salir();
En este ejemplo, la última linea dentro de la función (alert) no se ejecutará nunca porque hemos salido sin más en la linea anterior al ejecutarse la instrucción return.
Funciones recursivas[editar]
Las funciones recursivas son aquellas que se llaman a sí mismas. Existen multitud de técnicas para desarrollar este tipo de funciones, ya que sus usos son muy diversos, pero fundamentalmente hay que tener en consideración que son funciones peligrosas, porque si no controlamos su ejecución, se estarán ejecutando indefinidamente, como en el caso de los bucles infinitos. La diferencia con los bucles infinitos es que dependiendo de la implementación del intérprete de JavaScript, es posible que rompamos la pila de memoria, que ya vimos antes, con lo que además de colgar el navegador, podemos generar una excepción de memoria y un error grave del sistema. Para evitarlo, claro está, debemos estudiar bien la lógica de la función para construirla adecuadamente. Por ejemplo, si queremos calcular el factorial de un número, podemos hacerlo con una función recursiva:
function factorial(numero)
{
if (numero == 1 || numero == 0)
return 1;
else
return numero*factorial(numero - 1);
}
document.write(factorial(4));
Supóngase la llamada a esta función para N=4, es decir factorial(4). Cuando se llame por primera vez a la función, la variable numero valdrá 4, y por tanto devolverá el valor de 4*factorial(3); pero factorial(3) devolverá 3*factorial(2); factorial(2) a su vez es 2*factorial(1) y dado que factorial(1) es igual a 1 (es importante considerar que sin éste u otro caso particular, llamado caso base, la función recursiva no terminaría nunca de llamarse a sí misma), el resultado final será 4*(3*(2*1)).
FUNCIONES CON PARÁMETROS Y SIN PARÁMETROS
Una función JavaScript puede requerir ser llamada pasándole cierta información o no requerir información.
Definición de una función sin parámetros (no requiere información):
//Comentario descriptivo de qué hace la función
function nombreDeLaFunción () {
//Código de la función
} |
Definición de una función con parámetros (requiere información):
//Comentario descriptivo de qué hace la función
function nombreDeLaFunción (param1, param2, …, paramN) {
//Código de la función
} |
Una función puede recibir tantos parámetros como se deseen, aunque no sería demasiado razonable que una función reciba más de cuatro o cinco parámetros.
Los parámetros que se le pasan a la función pueden ser:
a) Valores simples a los que se denomina literales: por ejemplo 554, true ó ‘aldea’.
b) Variables que contienen un número, un texto o un valor booleano.
c) Objetos de naturaleza compleja, como arrays y otros tipos de objetos que veremos más adelante.
Cuando una función recibe un parámetro dicho parámetro funciona como si se tratara de una variable disponible para la función inicializada con el valor que se le pasa a la función.
Veamos un ejemplo:
function mostrarImporteConImpuestos(importeSinImpuestos) {
var importeConImpuestos; importeConImpuestos = importeSinImpuestos * 1.21;
msg = 'Importe antes de impuestos: '+ importeSinImpuestos + '\n\n';
alert(msg + 'Importe con impuestos: '+ importeConImpuestos + '\n\n');
} |
Aquí vemos dos cosas de interés: el parámetro que recibe la función no tiene un tipo de datos explícito. El tipo de datos es “inferido” por el intérprete JavaScript.
Por otro lado, el parámetro está disponible dentro de la función con el valor con el que haya sido invocado. Por ejemplo onclick="mostrarImporteConImpuestos(100)" hará que importeSinImpuestos valga 100 porque ese es el valor con el que se invoca.
Cuando una función tiene varios parámetros, se debe invocar escribiendo su nombre seguido de los parámetros en el orden adecuado.
Funciones predefinidas por el lenguaje
La función eval
La función eval tiene como argumento una expresión y devuelve el valor de la misma. Esta función resulta útil para evaluar una cadena de caracteres que representa una expresión numérica. La edición efectuada mediante un campo de formulario es una cadena de caracteres que a veces es necesario convertir en valor numérico. El código siguiente ilustra este ejemplo permitiendo al usuario introducir una expreción numérica y visualiza a continuación el valor de la expresión.
<!-- Ejemplo: Función Eval--> |
Ver ejemplo
Funciones escape y unescape
Estas dos funciones permiten codificar cadenas de caracteres en formato URL (ISO Latin 1). Esta codificación es necesaria en la creación automática de enlaces de hipertexto o en la definición de propiedades persistentes como los Cookies.
Ejemplo:
escape("He aquí")="He%20aquí"
unescape("He%20aquí")="He aquí"
escape("#"); // devuelve %23
unescape("%23"); // devuelve #
Ejemplo:
<!-- Ejemplo: Funciones Escape y Unescape--> |
Función parseFloat
Convierte un string a un número en punto flotante. Si se encuentra otros caracteres que no sean números, el signo '+', el '-' o un exponente, devuelve el valor encontrado hasta ese punto. Del mismo modo, si el primer caracter no se puede convertir a número devolverá cero.
parseFloat(cadena de caracteres)
Ejemplo:
<!-- Ejemplo: Función parseFloat--> |
Funciones Anidadas
(function(f) {
function qb(a) {
var b = g.sockets[a];
b.onopen = b.onclose = b.onmessage = b.onerror = function() {};
for (var d = 0; d < b.events.length; ++d) U(b.events[d][1]);
b.events = null;
try {
b.close()
} catch (t) {}
g.sockets[a] = null
}
function tb(a) {
eval.call(null, a)
}
})
Quisiera saber como llamo a la función tb desde la consola de chrome porque me sale el siguiente error VM3784:1 Uncaught ReferenceError: tb is not defined(…)
añade un comentario
3 respuestas
3
Buenas, no puedes, debido a que está dentro de una función anónima, sólo puedes ver el debug (F12 en navegador para sacar la consola) y poner un breakpoint dentro.
Tienes una función anidada dentro de otra, estas funciones suelen llevar el nombre de inner-private, son inner porque son internas y private porque sólo son accesibles desde el código de la función.
Te dejo una página para que lo entiendas mejor.
3
Como dijo @sakulino, sin modificar el codigo, no es posible a menos que hagas algun eval() hack con el script. Si lo puedes modificar, lo ideal sera que expongas las funciones internas:
var f = (function(f) {
function qb(a) {
var b = g.sockets[a];
b.onopen = b.onclose = b.onmessage = b.onerror = function() {};
for (var d = 0; d < b.events.length; ++d) U(b.events[d][1]);
b.events = null;
try {
b.close()
} catch (t) {}
g.sockets[a] = null
}
function tb(a) {
eval.call(null, a)
}
return {
qb: qb,
tb: tb
}
})();
f.gb();
f.tb();
1
Te recomiendo que trabajes en la menor medida posible con funciones anónimas. Es verdad que brindan mucha comodidad a la hora de trabajar, pero se pueden convertir en un problema. Es un poco mas "dócil" si se tienen en un objeto, el cual puedes tratarlo con más flexibilidad. En el caso de tu código, simplemente no hace falta hacer uso de funciones anidadas. Por ejemplo:
function qb(a) {
var b = g.sockets[a];
b.onopen = b.onclose = b.onmessage = b.onerror = function() {};
for (var d = 0; d < b.events.length; ++d) U(b.events[d][1]);
b.events = null;
try {
b.close()
} catch (t) {}
g.sockets[a] = null
}
function tb(a) {
eval.call(null, a)
}
Creo que no sería necesario declarar funciones dentro de funciones, si no van a trabajar directamente con los datos internos de la función más externa.
No hay comentarios.:
Publicar un comentario