Java script

Que es Java Script

JavaScript es un lenguaje de programación que te permite realizar actividades complejas en una página web —  cada vez más una página web hace más cosas que sólo mostrar información estática — como mostrar actualizaciones de contenido en el momento, interactuar con mapas, animaciones gráficas 2D/3D etc. — puedes estar seguro que JavaScript está involucrado. Es la tercera capa del pastel de los estándares en las tecnologías para la web. 

Caracteristicas de Java Script

• Es simple, no hace falta tener conocimientos avanzados de programación para poder hacer un programa en JavaScript.

• Maneja objetos dentro de nuestra página Web y sobre ese objeto podemos definir diferentes eventos. Dichos objetos facilitan la programacion de paginas interactivas, a la vez que se evita la posibilidad de ejecutar comandos que puedan ser peligrosos para la maquina del usuario, tales como formateo de unidades, modificar archivos etc.

• Es dinámico, responde a eventos en tiempo real. Eventos como presionar un botón, pasar el puntero del mouse sobre un determinado texto o el simple hecho de cargar la página o caducar un tiempo. Con esto podemos cambiar totalmente el aspecto de nuestra página al gusto del usuario, evitándonos tener en el servidor un página para cada gusto, hacer cálculos en base a variables cuyo valor es determinado por el usuario, etc.

Diferencias entre Java y Javascript

Java es un lenguaje de programación con un propósito general, tanto para aplicaciones de los ordenadores como para aplicaciones web. Fue desarrollado por James Gosling por la empresa Sun Microsystems en 1991, con el objetivo inicial de crear receptores de televisión y dispositivos embebidos, pero acabó expandiéndose de forma más amplia para funcionar en todas partes.

La intención de Java ahora es que los programadores de aplicaciones escriban una vez su código y puedan utilizarlo en cualquier dispositivo. Implementándose en varios dispositivos y navegadores donde Java te permite jugar, cargar fotografías, chatear en línea, realizar visitas virtuales y utilizar servicios en las páginas web.

JavaScript fue creado a mediados de los años ’90 por Brendan Eich de la empresa de Netscape con el objetivo de dotar de interactividad a las páginas web que visualizamos en nuestros navegadores. JavaScript es un lenguaje de programación específico que solo se implementa en las aplicaciones web.

Diferencias:

1.- El control de Java lo tiene Oracle, empresa privada que hace con el lo que quiere. JavaScript lo lleva ECMAScript que es una organización sin ánimo de lucro.

2.- Java permite hacer de todo con un gran control ya que es un lenguaje potente y robusto, quizás algo pesado también. JavaScript no permite hacer todo lo que permiten otros lenguajes, es más ligero que Java y más ágil, siendo menos robusto.

3.- JavaScript tiene clausulas pero Java no las incorporo hasta la aparición de su versión 8.

4.- Java necesita un kit de desarrollo y máquina virtual para poder trabajar con el, en cambio JavaScript solo necesita un editor de texto donde escribir el código y un navegador para ver los resultados.

5.- Java tiene variables definidas que no se pueden cambiar, JavaScript puede ser cambiante, dándole flexibilidad.

6.- Java es más complejo con un lenguaje con más capacidades. JavaScript tiene menos capacidades y es más sencillo.

7.- Antes de que compruebes el contenido de tu programa en Java, es compilado para advertirte si hay algún error en la ejecución, en cambio JavaScript no sabes si hay un error hasta que no ejecutas el programa. Depurando Java en dos fases y JavaScript en una.

8.- Java es un lenguaje orientado a objetos puro, pero JavaScript está basado en prototipos.

Formas de incluir 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!”.

Comentarios en  JavaScript

JavaScript permite insertar comentarios en el código, al igual que la mayoría de los lenguajes de programación. En concreto hay dos tipos de comentarios permitidos, los comentarios en línea que comienzan con una doble barra: //, y los comentarios multilínea, que comienzan con /* y terminan con */.

Tipos de datos

La última definición del estándar ECMAScript define siete tipos de datos:

• Seis tipos de datos que son primitives:
  • Boolean
  • Null
  • Undefined
  • Number
  • String
  • Symbol (nuevo en ECMAScript 6)
• y Object

Variable, Constantes e identificadores

Una variable es un “almacenamiento con nombre” para los datos. Podemos usar variables para almacenar golosinas, visitantes y otros datos.

Para crear una variable en JavaScript, necesitamos usar la palabra clave let.

La siguiente declaración crea (en otras palabras: declara o define) una variable con el nombre “mensaje”:

let mensaje;

Ahora podemos poner algunos datos en él usando el operador de asignación =:

let mensaje;

mensaje = 'Hola'; // almacenar la cadena

Para declarar una variable constante (invariable), se puede usar const en lugar de let:

const nacimiento = '18 .04.1982 ';

Las variables declaradas usando const se llaman “constantes”. No se pueden cambiar. Un intento de hacerlo causaría un error:

const nacimiento = '18 .04.1982 ';
nacimiento  = '01 .01.2001 '; // error, no se puede reasignar la constante!

Cuando un programador está seguro de que la variable nunca debe cambiar, pueden usar const para garantizarla y también para mostrar claramente ese hecho a todos.

Palabras Reservadas

Expresiones y Operadores

Manejo de errores

Puedes lanzar excepciones usando la sentencia throw y manejarlas usando las sentencias try...catch.

• throw statement
• try...catch statement

Tipos de excepcionesSección

Prácticamente cualquier objecto puede ser lanzado en JavaScript. Sin embargo, no todos los objetos lanzados son creados igual. Mientras que es bastante común para lanzar números o strings como errores, frecuentemente son más efectivos utilizar uno de los tipos de excepciones específicamente creados para este proposito:  

• Excepciones ECMAScript
• DOMException and DOMError

Sentencia throw Sección

Utiliza la sentencia throw  para lanzar una excepción. Cuando lanzas un excepción, se especifica la expresión que contiene el valor para ser lanzado:

throw expresión;

Puedes lanzar cualquier expresión, no solo expresiones de un tipo especifico. En el siguente código lanzamos varias excepciones de varios tipos: 

throw "Error2";   // Tipo string
throw 42;         // Tipo número
throw true;       // Tipo booleano
throw {toString: function() { return "¡Soy un objeto!"; } };

Note: Puedes especificar un objeto cuando lanzas una excepción. A continuación, puedes hacer referencia a las propiedades del objeto en un bloque catch.

// Crear un tipo de objeto UserException
function UserException (aviso){
  this.aviso=aviso;
  this.nombre="UserException";
}

// Convertimos la excepción a String cuando es utilizada como un String
// (E.j: Un error de consola)
UserException.prototype.toString = function () {
  return this.nombre + ': "' + this.aviso + '"';
}

// Crea una instancia del objeto y lo lanza 
throw new UserException("Value too high");

try...catchSección

La sentencia try...catch marca un bloque de instrucciones a intentar que pueden causar alguna excepción, y declarar una o más respuestas en caso de que una excepción sea arrojada. Si una excepción es arrojada, la sentencia try...catch se encarga de atraparla.

Funciones

En términos generales, una función es un "subprograma" que puede ser llamado por código externo (o interno en caso de recursión) a la función. Al igual que el programa en sí mismo, una función se compone de una secuencia de declaraciones, que conforman el llamado cuerpo de la función. Se pueden pasar valores a una función, y la función puede devolver un valor.

En JavaScript, las funciones son objetos de primera clase, es decir, son objetos y se pueden manipular y transmitir al igual que cualquier otro objeto. Concretamente son objetos Function.

Partes de una funcion

Tipos de funciones

Las funciones más sencillas no necesitan ninguna información para producir sus resultados, aunque lo normal es que necesiten de datos para producir resultados. Las variables que necesitan las funciones se llaman argumentos. Antes de que pueda utilizarlos, la función debe indicar cuántos argumentos necesita y cuál es el nombre de cada argumento. Además, al llamar a la función, se deben incluir los valores (o expresiones) que se le van a pasar a la función. 

A continuación, para utilizar el valor de los argumentos dentro de la función, se debe emplear el mismo nombre con el que se definieron los argumentos:

var s = function suma_y_muestra(n1, n2) {
  var resultado = n1 + n2;
  console.log("El resultado es " + resultado);
}

Funciones Anonimas autoejecutables

Un patrón común en JavaScript son las funciones anónimas autoejecutables. Este patrón consiste en crear una expresión de función e inmediatamente ejecutarla.

(function(){
  var foo = 'Hola mundo';
})();
 
console.log(foo);   // indefinido (undefined)

Funciones Como argumentos

En JavaScript, las funciones pueden ser asignadas a variables o pasadas a otras funciones como argumentos. En frameworks como jQuery por ejemplo, pasar funciones como argumentos es una práctica muy común.

var myFn = function(fn) {
  var result = fn();
  console.log(result);
};
 
myFn(function() { return 'hola mundo'; });   // muestra en la consola 'hola mundo'
 
var myOtherFn = function() {
    return 'hola mundo';
};
 
myFn(myOtherFn);   // muestra en la consola 'hola mundo'

Parametros

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.

Funciones predefinidas

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.

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í"

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)

La función isNaN

Comprueba si el valor pasado por parámetros es númerico o no. El resultado de esta función es un booleano. Es decir, evalúa un argumento para ver si es NaN: Not Number.

isNaN(valor de entrada) 

La función parseInt

Convierte una cadena de caracteres de entrada a un número entero con una base especificada. La base puede ser 8, 10 ó 16. 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.

parseInt(ristra,base) //base es opcional.

Funciones Anidadas

Se puede anidar una función dentro de una función. La función anidada (interna) es privada a su función contenedora (externa). También forma un cierre. Un cierre, es una expresión (típicamente una función) que puede tener variables libres junto con un entorno que ata esas variables (que "cierra" la expresión).

Dado que una función anidada es un cierre, esto significa que una función anidada puede "heredar" los argumentos y variables de su función contenedora. En otras palabras, la función interna contiene el ámbito de la función externa.

En resumen:

• La función interna sólo se puede acceder a partir de sentencias dentro de la función externa.
• La función interna forma un cierre: la función interna puede utilizar los argumentos y variables de la función externa, mientras que la función externa no puede utilizar los argumentos y las variables de la función interna.

El siguiente ejemplo muestra funciones anidadas:

function addSquares(a,b) {
  function square(x) {
    return x * x;
  }
  return square(a) + square(b);
}
a = addSquares(2,3); // retorna 13
b = addSquares(3,4); // retorna 25
c = addSquares(4,5); // retorna 41

Dado que la función interna forma un cierre, se puede llamar a la función externa y especificar argumentos para ambas, tanto para la función externa como para la interna:

function outside(x) {
  function inside(y) {
    return x + y;
  }
  return inside;
}
fn_inside = outside(3); // Pensar en esto como: dar una funcion que suma 3 a lo que sea que des
result = fn_inside(5); // retorna 8

result1 = outside(3)(5); // retorna 8