Java: JavaScript

¿Qué es JavaScript?

JavaScript (abreviado comúnmente JS) es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, 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ámicas 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.

Características de JavaScript

Imperativo y estructurado.
Dinámico.
Funcional.
Prototípico

Diferencia entre Java y JavaScript

JavaScript tradicionalmente ha sido un lenguaje interpretado, y Java es compilado.
Java se depura en dos fases y JavaScript en una.
Java es un lenguaje orientado a objetos puro, pero JavaScript está basado en prototipos.
Java es fuertemente tipado, y JavaScript es débilmente tipado.
Java tiene ámbito por bloque y JavaScript lo tiene por función.
Las funciones en JavaScript son multi-argumento siempre. En Java es necesario indicarlo.

Formas de incluir JavaScript

Agregar JavaScript directamente a un archivo HTML

La primera forma de insertar JavaScript en HTML es directa. Puedes hacerlo utilizando la etiqueta <script> </script> que debe envolver todo el código JS que escribas. Se puede agregar el código JS:
entre las etiquetas <head>
entre las etiquetas <body>

Dependiendo de dónde agregues el código JavaScript en tu archivo HTML, la carga será diferente. Por lo general se recomienda agregarlo en la sección <head> para que permanezca separado del contenido de tu archivo HTML. Pero colocarlo dentro de <body> puede ayudar a mejorar la velocidad de carga, ya que el contenido del sitio web se cargará más rápido, y solo después de eso se procesará el JavaScript. Para este ejemplo, echemos un vistazo al siguiente archivo HTML que debe mostrar la hora actual:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>JAVASCRIPT IS USUALLY PLACED HERE</script>
<title>Time right now is: </title>
</head>
<body>
<script>JAVASCRIPT CAN ALSO GO HERE</script>
</body>
</html>

En este momento, el código anterior no contiene JavaScript y, por lo tanto, no puede mostrar la hora. 

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Time right now is: </title>
<script>
var time = new Date();
console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());
</script>
</head>
<body>
</body>
</html>

Si quieres mostrar la hora dentro del cuerpo (body) de la página, deberás incluir la script dentro de las etiquetas <body> de la página HTML. Así es como se verá el código cuando lo hagas:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Time right now is: </title>
</head>
<body>
<script>
let d = new Date();
document.body.innerHTML = "<h1>Time right now is: " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()
"</h1>"
</script>
</body>
</html>

Así es como se vería el resultado final:

Agregar código JavaScript a un archivo separado

A veces, insertar JavaScript en HTML directamente no parece ser la mejor opción. Sobre todo porque algunos scripts de JS deben utilizarse en varias páginas, por lo tanto, es mejor mantener el código JavaScript en archivos separados. Es por esto que la forma más aceptable de incluir JavaScript en HTML es importando archivos externos. Se puede hacer referencia a estos archivos desde adentro de los documentos HTML, al igual que hacemos referencia a los documentos CSS. Algunos de los beneficios de agregar código JS en archivos separados son:

Cuando los códigos HTML y JavaScript están separados, se cumple el principio de diseño de separación y hace que todo sea mucho más sostenible y reutilizable.
La legibilidad y el mantenimiento del código es mucho más fácil.
Los archivos JavaScript en caché mejoran el rendimiento general del sitio web al disminuir el tiempo que tardan las páginas en cargarse.

Podemos hacer referencia al archivo JavaScript desde HTML así:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Time right now:</title>
</head>
<body>
</body>
<script src="js/myscript.js"></script>
</html>

El contenido del archivo myscript.js será:

let d = new Date();
document.body.innerHTML = "<h1>Time right now is: " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()</h1>"

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.

Estructura Básica de JavaScript

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.
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.

Comentarios en JavaScript

Poner comentarios entre las líneas de código, javascript o de cualquier otro lenguaje, es muy útil. Indispensable para documentar el código. Por ejemplo, nos puede servir para recordar por qué hemos hecho algo de un modo y no de otro o que tipos de datos acepta una determinada función.

Además, también se pueden comentar líneas y bloques de código para que no se ejecute pero sin eliminarlo, algo habitual durante el trabajo de desarrollo.

Comentarios JavaScript de una línea

Pon dos barras // al comienzo de la línea o justo delante del código a comentar. Todo lo que haya a la derecha de las dos barras será ignorado hasta la siguiente línea. Ideal para pequeñas notas.

<script>
  // Este un comentario de una única línea
  alert("Escibiendo comentarios en javascript!"); //Aquí puedo poner una nota de lo que hace esta línea
  // alert("Esto no se ejecuta");
</script>

Comentarios multi-línea

Los comentarios de una línea pueden quedarse cortos en muchas situaciones. Puedes ir colocando // en varias líneas pero hay una opción mucho más sencilla: pon /* al principio y */ al final del comentario, puedes abarcar cuantas líneas quieras.

<script>
    alert("Escribiendo comentarios multi-línea en javascript");
    /*
    alert("Esto no se ejecuta");
    alert("Esto no se ejecuta");
    alert("Esto no se ejecuta");
    alert("Esto no se ejecuta");
    alert("Y esto tampoco");
    Y este texto puede decir lo que yo quiera
    para acordarme de algo
    */
</script>

Tipos de Datos

Estrategias para la identificación de tipos de datos

Nota: En los códigos siguientes vamos a utilizar console.assert(). Este método está disponible en la gran mayoría de los navegadores modernos y en Node. Ejecuta una expresión y si es verdadera continua sin hacer nada y si es falsa lanza una excepción. La utilizaremos para comprobar los tipos de datos de forma sencilla, rápida y sin necesidad de librerías externas.

typeof

La primera aproximación que podemos hacer es utilizar typeof, una instrucción pensada de forma específica para conocer el tipo del valor de una variable. Funciona perfectamente con los tipos primitivos y con las funciones, pero en el caso de los objetos ofrece muy poca información, ya que para todos ellos devuelve objectsin mayor detalle.

Uso de typeof
1 2 3	`console.assert(` `typeof` `true` `===` `'boolean'` `);` `console.assert(` `typeof` `[] ===` `'object'` `);` `console.assert(` `typeof` `new` `Date() ===` `'object'` `);`

instanceof

Para los objetos existe una instrucción bastante práctica que permite conocer si un objeto determinado es una instancia de una clase superior. De esta forma podemos comprobar si un determinado dato es de tipo Date, Array, etc.

Uso de instanceof
1 2	`console.assert(` `new` `Date()` `instanceof` `Date ===` `true` `);` `console.assert( []` `instanceof` `Array ===` `true` `);`

Como todos los objetos heredan de Object, cualquier objeto es una instancia de Object y de esta forma podemos diferenciar un objeto de los tipos de datos primitivos:

Uso de instanceof Object
1 2	`console.assert(` `new` `Date()` `instanceof` `Object ===` `true` `);` `console.assert( 10` `instanceof` `Object ===` `false` `);`

Object.prototype.toString

Una forma indirecta, pero bastante interesante, de conocer el tipo de un objeto es utilizar el método toString() del prototipo de Object pasando como parámetro el valor que queremos comprobar. Este método devuelve una cadena de texto que indicará que es un objeto y de qué tipo es enmarcado entre corchetes.

Uso de Object.prototype.toString.call
1 2	`console.assert( Object.prototype.toString.call([]) ===` `'[object Array]'` `);` `console.assert( Object.prototype.toString.call(new` `Date()) ===` `'[object Date]'` `);`

myObject.constructor.name

Todas las instancias de los objetos tienen un método myVar.constructor y este método, como todas las funciones en la mayoría de las implementaciones, tiene una propiedad name que contiene el nombre de la función. Lamentablemente no todos los navegadores facilitan esta propiedad name y en esas ocasiones deberemos utilizar un método alternativo para obtener el nombre de la función (o de la clase) que ha servido como constructor del objeto por medio del método toString() del prototipo de Function que nos devuelve el código fuente del constructor y del cual podemos extraer el nombre.

Uso de myObject.constructor
1 2 3 4	`console.assert( [].constructor.name ===` `'Array'` `);` `console.assert(` `new` `Date().constructor.name ===` `'Date'` `);` `console.assert( Function.prototype.toString.call(new` `Date().constructor)` `.match(/^\n?(function\|class)\s(\w)/)[2] ===` `'Date'` `);`

Tipos de datos y las estrategias de consulta

Vamos a analizar cada una de estas estrategias con los diferentes tipos de datos de los que disponemos en Javascript y como se comportan en cada caso a fin de determinar la mejor estrategia en cada caso.
Tipos primitivos

Javascript tiene seis tipos primitivos:

Sin definir (undefined)
Nulo (null)
Lógicos (boolean)
Numérico (number)
Cadena (string)
Símbolo (symbol)

Todos los demás tipos son objetos (Object): Array, Date, Promise y todos los demás tipos son objetos.

Variables, Constantes e Identificadores

Identificadores

Todas las variables de JavaScript deben identificarse con nombres únicos.

Estos nombres únicos se llaman identificadores.

Los identificadores pueden ser nombres cortos (como x e y) o más nombres descriptivos (edad, suma, total).

Las reglas generales para construir nombres para variables (identificadores únicos) son:

Los nombres pueden contener letras, dígitos, guiones bajos y signos de dólar.
Los nombres deben comenzar con una letra.
Los nombres también pueden comenzar con $ y _ (pero no lo usaremos en este tutorial)
Los nombres distinguen entre mayúsculas y minúsculas (y e Y son variables diferentes)
Las palabras reservadas (como las palabras clave de JavaScript) no se pueden usar como nombres

Una variable

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

La cadena ahora se guarda en el área de memoria asociada con la variable. Podemos acceder utilizando el nombre de la variable:

let mensaje; mensaje = '¡Hola!'; alert(mensaje); // muestra el contenido variable

Para ser concisos, podemos combinar la declaración y la asignación de la variable en una sola línea:

let mensaje = '¡Hola!'; // define la variable y asigna el valor alert(mensaje); // ¡Hola!

También podemos declarar múltiples variables en una línea:

let usuario = 'Juan', edad = 25, mensaje = 'Hola';

var en lugar de let

En scripts anteriores también puede encontrar otra palabra clave: var en lugar de let:

var mensaje = 'Hola';

La palabra clave var es casi la misma que let. También declara una variable, pero de una manera ligeramente diferente, “de la vieja escuela”.

Existen diferencias sutiles entre let y var, pero todavía no nos importan. Los trataremos en detalle más adelante.

Constantes

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

Principales

Otras:

Sección

break
case
class
catch
const
continue
debugger
default
delete
do
else
export
extends
finally
for
function
if
import
in
instanceof
let
new
return
super
switch
this
throw
try
typeof
var
void
while
with
yield

Las siguientes estan reservadas como palabras futuras por la especificación ECMAScript:

enum

Expresiones y Operadores

Asignación

El operador de asignación es el más utilizado y el más sencillo. Este operador se utiliza para guardar un valor específico en una variable. El símbolo utilizado es = (no confundir con el operador == que se verá más adelante):

var numero1 = 3;

A la izquierda del operador, siempre debe indicarse el nombre de una variable. A la derecha del operador, se pueden indicar variables, valores, condiciones lógicas, etc:

var numero1 = 3;
var numero2 = 4;

/* Error, la asignación siempre se realiza a una variable,
    por lo que en la izquierda no se puede indicar un número */
5 = numero1;

Incremento y decremento

Estos dos operadores solamente son válidos para las variables numéricas y se utilizan para incrementar o decrementar en una unidad el valor de una variable.

Ejemplo:

var numero = 5;
++numero;
alert(numero);  // numero = 6

El operador de incremento se indica mediante el prefijo ++ en el nombre de la variable. El resultado es que el valor de esa variable se incrementa en una unidad. Por tanto, el anterior ejemplo es equivalente a:

var numero = 5;
numero = numero + 1;
alert(numero);  // numero = 6

De forma equivalente, el operador decremento (indicado como un prefijo -- en el nombre de la variable) se utiliza para decrementar el valor de la variable:

var numero = 5;
--numero;
alert(numero);  // numero = 4

El anterior ejemplo es equivalente a:

var numero = 5;
numero = numero - 1;
alert(numero);  // numero = 4

Los operadores de incremento y decremento no solamente se pueden indicar como prefijo del nombre de la variable, sino que también es posible utilizarlos como sufijo. En este caso, su comportamiento es similar pero muy diferente. En el siguiente ejemplo:

var numero = 5;
numero++;
alert(numero);  // numero = 6

El resultado de ejecutar el script anterior es el mismo que cuando se utiliza el operador ++numero, por lo que puede parecer que es equivalente indicar el operador ++ delante o detrás del identificador de la variable. Sin embargo, el siguiente ejemplo muestra sus diferencias:

var numero1 = 5;
var numero2 = 2;
numero3 = numero1++ + numero2;
// numero3 = 7, numero1 = 6

var numero1 = 5;
var numero2 = 2;
numero3 = ++numero1 + numero2;
// numero3 = 8, numero1 = 6

Si el operador ++ se indica como prefijo del identificador de la variable, su valor se incrementa antes de realizar cualquier otra operación. Si el operador ++ se indica como sufijo del identificador de la variable, su valor se incrementa después de ejecutar la sentencia en la que aparece.

Por tanto, en la instrucción numero3 = numero1++ + numero2;, el valor de numero1 se incrementa después de realizar la operación (primero se suma y numero3 vale 7, después se incrementa el valor de numero1 y vale 6). Sin embargo, en la instrucción numero3 = ++numero1 + numero2;, en primer lugar se incrementa el valor de numero1 y después se realiza la suma (primero se incrementa numero1 y vale 6, después se realiza la suma y numero3 vale 8).

Lógicos

Los operadores lógicos son imprescindibles para realizar aplicaciones complejas, ya que se utilizan para tomar decisiones sobre las instrucciones que debería ejecutar el programa en función de ciertas condiciones.

El resultado de cualquier operación que utilice operadores lógicos siempre es un valor lógico o booleano.

Negación

Uno de los operadores lógicos más utilizados es el de la negación. Se utiliza para obtener el valor contrario al valor de la variable:

var visible = true;
alert(!visible);  // Muestra "false" y no "true"

La negación lógica se obtiene prefijando el símbolo ! al identificador de la variable. El funcionamiento de este operador se resume en la siguiente tabla:

variable	!variable
`true`	`false`
`false`	`true`

Si la variable original es de tipo booleano, es muy sencillo obtener su negación. Sin embargo, ¿qué sucede cuando la variable es un número o una cadena de texto? Para obtener la negación en este tipo de variables, se realiza en primer lugar su conversión a un valor booleano:

Si la variable contiene un número, se transforma en false si vale 0 y en true para cualquier otro número (positivo o negativo, decimal o entero).
Si la variable contiene una cadena de texto, se transforma en false si la cadena es vacía ("") y en trueen cualquier otro caso.

var cantidad = 0;
vacio = !cantidad;  // vacio = true

cantidad = 2;
vacio = !cantidad;  // vacio = false

var mensaje = "";
mensajeVacio = !mensaje;  // mensajeVacio = true

mensaje = "Bienvenido";
mensajeVacio = !mensaje;  // mensajeVacio = false

AND

La operación lógica AND obtiene su resultado combinando dos valores booleanos. El operador se indica mediante el símbolo && y su resultado solamente es true si los dos operandos son true:

variable1	variable2	variable1 && variable2
`true`	`true`	`true`
`true`	`false`	`false`
`false`	`true`	`false`
`false`	`false`	`false`

var valor1 = true;
var valor2 = false;
resultado = valor1 && valor2; // resultado = false

valor1 = true;
valor2 = true;
resultado = valor1 && valor2; // resultado = true

OR

La operación lógica OR también combina dos valores booleanos. El operador se indica mediante el símbolo || y su resultado es true si alguno de los dos operandos es true:

variable1	variable2	`variable1 \|\| variable2`
`true`	`true`	`true`
`true`	`false`	`true`
`false`	`true`	`true`
`false`	`false`	`false`

var valor1 = true;
var valor2 = false;
resultado = valor1 || valor2; // resultado = true

valor1 = false;
valor2 = false;
resultado = valor1 || valor2; // resultado = false

Matemáticos

JavaScript permite realizar manipulaciones matemáticas sobre el valor de las variables numéricas. Los operadores definidos son: suma (+), resta (-), multiplicación (*) y división (/). Ejemplo:

var numero1 = 10;
var numero2 = 5;

resultado = numero1 / numero2;  // resultado = 2
resultado = 3 + numero1;        // resultado = 13
resultado = numero2 – 4;        // resultado = 1
resultado = numero1 * numero 2; // resultado = 50

Además de los cuatro operadores básicos, JavaScript define otro operador matemático que no es sencillo de entender cuando se estudia por primera vez, pero que es muy útil en algunas ocasiones.

Se trata del operador "módulo", que calcula el resto de la división entera de dos números. Si se divide por ejemplo 10 y 5, la división es exacta y da un resultado de 2. El resto de esa división es 0, por lo que módulo de 10 y 5 es igual a 0.

Sin embargo, si se divide 9 y 5, la división no es exacta, el resultado es 1 y el resto 4, por lo que módulo de 9 y 5 es igual a 4.

El operador módulo en JavaScript se indica mediante el símbolo %, que no debe confundirse con el cálculo del porcentaje:

var numero1 = 10;
var numero2 = 5;
resultado = numero1 % numero2; // resultado = 0

numero1 = 9;
numero2 = 5;
resultado = numero1 % numero2; // resultado = 4

Los operadores matemáticos también se pueden combinar con el operador de asignación para abreviar su notación:

var numero1 = 5;
numero1 += 3;  // numero1 = numero1 + 3 = 8
numero1 -= 1;  // numero1 = numero1 - 1 = 4
numero1 *= 2;   // numero1 = numero1 * 2 = 10
numero1 /= 5;   // numero1 = numero1 / 5 = 1
numero1 %= 4;   // numero1 = numero1 % 4 = 1

Relacionales

Los operadores relacionales definidos por JavaScript son idénticos a los que definen las matemáticas: mayor que (>), menor que (<), mayor o igual (>=), menor o igual (<=), igual que (==) y distinto de (!=).

Los operadores que relacionan variables son imprescindibles para realizar cualquier aplicación compleja, como se verá en el siguiente capítulo de programación avanzada. El resultado de todos estos operadores siempre es un valor booleano:

var numero1 = 3;
var numero2 = 5;
resultado = numero1 > numero2; // resultado = false
resultado = numero1 < numero2; // resultado = true

numero1 = 5;
numero2 = 5;
resultado = numero1 >= numero2; // resultado = true
resultado = numero1 <= numero2; // resultado = true
resultado = numero1 == numero2; // resultado = true
resultado = numero1 != numero2; // resultado = false

Se debe tener especial cuidado con el operador de igualdad (==), ya que es el origen de la mayoría de errores de programación, incluso para los usuarios que ya tienen cierta experiencia desarrollando scripts. El operador == se utiliza para comparar el valor de dos variables, por lo que es muy diferente del operador =, que se utiliza para asignar un valor a una variable:

// El operador "=" asigna valores
var numero1 = 5;
resultado = numero1 = 3;  // numero1 = 3 y resultado = 3

// El operador "==" compara variables
var numero1 = 5;
resultado = numero1 == 3; // numero1 = 5 y resultado = false

Los operadores relacionales también se pueden utilizar con variables de tipo cadena de texto:

var texto1 = "hola";
var texto2 = "hola";
var texto3 = "adios";

resultado = texto1 == texto3; // resultado = false
resultado = texto1 != texto2; // resultado = false
resultado = texto3 >= texto2; // resultado = false

Cuando se utilizan cadenas de texto, los operadores "mayor que" (>) y "menor que" (<) siguen un razonamiento no intuitivo: se compara letra a letra comenzando desde la izquierda hasta que se encuentre una diferencia entre las dos cadenas de texto. Para determinar si una letra es mayor o menor que otra, las mayúsculas se consideran menores que las minúsculas y las primeras letras del alfabeto son menores que las últimas (a es menor que b, b es menor que c, A es menor que a, etc.)

Estructuras de Control y Manejo de errores

Estructuras condicionales o selectivas

Este tipo de estructura de control tiene como objetivo realizar una bifurcación del flujo de instrucciones. Cuando el programa llega a un punto, nosotros establecemos una condición en en función de la misma el programa seguirá ejecutando unas instrucciones u otras; tal y como hemos visto en el anterior ejemplo cuando veíamos un caso de control de acceso sencillo.

Estructuras de repetición o iterativas

Este tipo de estructuras de control también conocidas como bucles se utilizan para realizar de forma repetida varias acciones. Con un bucle podemos por ejemplo mostrar en pantalla todos los números del 1 al 100 sin tener que escribir 100 veces la instrucción alert ya vista en el curso básico de javascript.

Otro ejemplo muy fácil de comprender relaccionado con la seguridad informática se da cuando en formularios html de control de acceso se piden una y otra vez los credenciales de acceso hasta que el usuario proporciona una pareja usuario/clave válida y accede al sistema. Tu como programador no sabes cúantas veces vas a tener que pedir la clave al usuario, puede que la introduzca bien a la primera, a la segunda, a la tercer o quizá nunca. Para estos casos los bucles son la solución. Con un bucle puedes pedir de forma reiterada los credenciales de acceso hasta que o bien proporciona unos válidos y accede o bien llega a un número máximo de intentos y se le deniega incluso el derecho a seguir probando contraseñas por un tiempo.

Estructuras de control de errores

Estas estructuras son clave en el mundo de la seguridad informática. Son aquellas que permiten controlar los errores que el usuario final comete de forma fortuita o intencionada y poder seguir trabando de forma normal. Los errores más típicos a tener en cuenta se producen cuando pedimos al usuario que introduzca un número pero el usuario nos introduce una letra. Esto producirá un error en nuestro programá y hará que se comporte de forma inadecuada si no hemos controlado mediante una estructura de control de errores este caso.

Estructura de control javascript condicional (IF ELSE)

Las estructuras condicionales en javascript nos sirven para tomar decisiones en función de una condición que nosotros establecemos. Su sintáxis es así:

if (condicion)
{
instrucciones que se ejecutarán si se cumple la condición
}
else
{
instrucciones que se ejecutarán si NO se cumple la condición
}

"If" es una sentencia que significa “si condicional”. La idea es que si sucede tal cosa, (si la condición es verdadera) se debe ejecutar la sentencia que le sigue, es decir la misma sólo se ejecutaría en caso de que la expresión de tipo Boolean sea verdadera. Si es falsa, el interprete pasará a la parte "else" que signfica "sino"; y ejecutará las instrucciones que existen dicha parte. La parte "else" no es obligatoria, pero aquí la mostramos para que sepáis que podemos ejecutar unas instrucciones en caso de que se cumpla la condición u otras en caso contrario. Os dejamos con un ejemplo práctico en el que solicitamos la edad al visitante y le dejamos entrar o no en base a su mayoría de edad:

<script>
var edad = prompt("Dime tu edad");
if (num >17) {
alert('Eres mayor de edad, puedes acceder');
}else {
alert('Eres menor de edad; NO puedes acceder');
}
</script>

Estructura de control javascript condicional (SWITCH)

No en todos los casos nos es suficiente una estructura de control que nos permita realizar una acción si se cumple una condición u otra acción si no se cumple. A veces nos ocurrirá que debemos hacer unas acciones si una variables tiene un valor, otras si tiene un valor distinto y otras si tiene otro valor distinto al anterior. Es el caso típico de los menús de elección de opciones. En función de la opción elegida por el usuario nosotros debemos hacer lo que nos pide. Para estos casos entre otros muchos se crearon las estructuras de control SWITCH; cuya sintáxis es así:

switch (expresion){
case valor1: sentencia1;
break;
case valor2: sentencia2;
break;
...
case valorN: sentenciaN;
break;
default: sentenciaFinal;
break;
}

Como véis según el valor de la expresión se ejecutarán unas sentencias u otras y en el caso de que la expresión de un valor distinto a aquellos que tenemos previstos se ejecutará aquello que tengamos en la parte final (default). Vamos a ver un ejemplo mediante el cual nosotros convertimos un mes dado en formáto numérico (del 0 al 11) en formato texto (enero, febrero....diciembre):

<script>
var hoy = new Date()
var nombremes
var mes=hoy.getMonth()
switch (mes) {
case 0 :
nombremes=" Enero"
break
case 1 :
nombremes=" Febrero"
break
case 6 :
nombremes=" Julio"
break
case 9 :
nombremes=" Setiembre"
break
default : nombremes= "... no se el mes"
}
alert("Estamos en el mes llamado" + nombremes)
</script>

Faltarían añadir los 12 meses, pero para no extender mucho el ejemplo te dejamos a ti la tarea de completar los meses que faltan y así probar el ejemplo completo en tu ordenador. Como habrás podido observar podrías haber logrado el mismo objetivo creado 12 "IFs" y habrías obtenido el mismo resultado pero esa solución a parte de denotar que no conoces la estructura de control SWITCH solo conseguría alargar tu código; hacerlo menos legible y por ende más difícil de mantener.

Estructura de control javascript bucle WHILE

Pasamos a ver la primera estructura de repetición en javascript; el bucle WHILE. La idea principal con la que se han creado estos bucles es: MIENTRAS se cumpla la condición REALIZAR estas acciones. Cuando la condición deje de cumplirse salimos del bucle y continúa el flujo del programa. Su sintáxis es:

while (expresionBooleana) {
sentencia;
}

Una característica a tener muy en cuenta a la hora de decidirse a utilizar este tipo de bucles es que la condición es lo primero que se evalua. En el siguiente ejemplo vamos a mostrar los números del 1 al 9 haciendo uso del bucle WHILE:

<script>
var i = 0;
while (i<9) {
alert (i);
i++;
}
alert('"Salimos" del while porque i vale: ' +i)
</script>

Estructura de control javascript bucle DO WHILE

Este bucle es exactamente igual que el anterior pero con la diferencia de que la condición se comprueba al final. Este tipo de bucles son muy utilizados cuando creamos un menú de opciones; mientras el usuario no elija la opción de salir del programa seguiremos trabajando con el. Por ello necesitamos comprobar la opción que el usuario a elegido al final del programa, ya que al principio aún no sabemos la opción que ha escogido. Vamos a ver un ejemplo de cómo podemos calcular el factorial de un número con el uso de este bucle:

<script>
var resultado = 1;
var numero = 5;

do {
resultado = resultado * numero;
numero--;
} while(numero > 0);

alert(resultado);
</script>

Estructura de control javascript bucle FOR

En los bucles vistos hasta ahora nosotros no conociamos el número de iteraciones que se darían en el bucle, ya que continuar dentro del bucle o salir es algo que depende de una condición (elegir una opción de un menú, introducir una contraseña válida....). Pero a veces nosotros sabemos exactamente el número de iteraciones que queremos hacer; no dependen de una condición. Para estos casos existe el bucle "FOR" cuya sintáxis es así:

for (inicio; test; incremento)
{
sentencia;
}

Estos bucles son muy utilizados para recorrer listas de objetos. Si nosotros tenemos una lista de 10 variables y queremos hacer algo sobre cada una de las variables podemos hacer un bucle for que hará las 10 iteraciones que necestiamos. En el siguiente ejemplo a reescribir ejemplo anterior que mostraba los 10 primeros números con un blucle WHILE pero esta vez con un bucle FOR:

<script>
for (i=0; i<10; i++)
{
alert (i);
}
</script>

¿Por qué hemos reescrito el mismo ejemplo? Por una sencilla razón. No hay bucles mejores ni bucle peores, cada uno tiene sus características y se adaptan mejor o peor en cada caso en base a nuestras necesidades. Es muy fácil convertir un bucle en otro y que el programa siga manteniendo intacto su comportamiento. Un buen programador sabrá en cada caso qué bucle utilizar. Sabrá si necesita comprobar la condición al inicio o al final, si sabe el número de iteraciones que debe realizar es fijo o depende de una condición... etc.

Estructura de control de errores javascript TRY CATCH

Estas sentencias se utilizan para ejecutar código de forma segura, ya que en el caso de que existan excepciones, podremos capturarlas y seguir ejecutando normalmente el código, Una excepción es un error que se produce por algún motivo determinado durante la ejecución de un script, ese error comúnmente es mostrado al usuario, en este caso será lanzado para "afuera", en donde la siguiente sentencia (match) lo capturará, impidiéndole salir de la manera nativa al usuario, permitiéndonos trabajar con el error o bien mostrar un mensaje más amigable y claro a los ojos del mismo. Veamos un ejemplo de uso de esta estructura de control:

<script>
try
{
document.write(10/variable1) ; //Variable insegura del usuario (puede introducir un 0)
}catch(e)
{
alert(e.message); // Mensaje en caso de error
}
</script>

Todas las instrucciones que tengamos en la sección TRY se ejecutarán de forma segura; si el usuario mete un 0 variable1 valdrá 0 y el programa intentará dividir por 0. Como esto no es posible si no hubieramos hecho esta instrucción dentro del TRY el programá fallaría y dejaría de funcionar. Como hemos tenido la precaución de utilizar el TRY solo se producirá una excepción que se recogerá dentro del apartado CATCH y se mostrará el error permitiendo al programa trabajar de forma de forma normal.

¿Qué es una función en JavaScript?

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)

Partes de una Funcion

Tipos de Funciones

Funcion Flecha

Una expresión de función flecha (también conocida como función flecha gruesa o fat arrow function en inglés) tiene una sintaxis más corta comparada con las expresiones de función y not tiene su propio this, arguments, super o new.target. Las funciones flecha son siempre funciones anónimas. Véase también esta entrada en el blog hacks.mozilla.org : "ES6 In Depth: Arrow functions" (en inglés).

Dos factores influenciaron la introdución de las funciones flecha: funciones más cortas y el léxico this.

Ejemplo:

var a = [
  "Hydrogen",
  "Helium",
  "Lithium",
  "Beryllium"
];

var a2 = a.map(function(s){ return s.length });

var a3 = a.map( s => s.length );

Sintaxis Basica

(param1, param2, …, paramN) => { sentencias }
(param1, param2, …, paramN) => expresion
// Equivalente a: () => { return expresion; } 

// Los paréntesis son opcionales cuando sólo dispone de un argumento: singleParam => { statements } 
(singleParam) => { sentencias } singleParam => { sentencias }

// Una función sin argumentos requiere paréntesis: 
() => { sentencias }

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

¿Qué es un Parámetro?

Un parámetro es un tipo de variable que es recibida por una función, procedimiento o subrutina.En general, en la definición de un procedimiento, es incluida una lista ordenada de parámetros; de esta manera, cada vez que el procedimiento es llamado, los argumentos de esa llamada pueden ser asignados a los correspondientes parámetros. Aquí se expone sutilmente la diferencia técnica entre parámetro y Argumento.

Un parámetro es una propiedad intrínseca de un procedimiento, dado que está incluido en su definición. En tanto, los argumentos son más bien los valores actuales asignados a los parámetros variables cuando la subrutina es llamada. En la práctica no se suele distinguir tajantemente entre ambos términos.

eval(string): Esta función recibe una cadena de caracteres y la ejecuta como si fuera una sentencia de Javascript.

<HTML >
<HEAD >
<TITLE>Ejemplo de JavaScript</TITLE>
</HEAD>
<BODY>
<SCRIPT>
function calcula(obj)
{
obj.result.value = eval(obj.expr.value)
}
</SCRIPT>

<FORM NAME="evalua">
Introducir expresión:
<INPUT TYPE="text" NAME="expr" SIZE=20>
<BR>
Resultado:
<INPUT TYPE="text" NAME="result" SIZE=20>
< BR>
<INPUT TYPE="button" VALUE="evalua"
onClick="calcula(this.form)">
</FORM>
</BODY>
</HTML>

parseInt(cadena,base): Recibe una cadena y una base. Devuelve un valor numérico resultante de convertir la cadena en un número en la base indicada.

<HTML>
<HEAD>
<TITLE>Ejemplo de JavaScript</TITLE>
</HEAD>
<BODY>
<FORM>
Introducir entero:
<input type="text" name="int">
<BR>
<INPUT type="radio" name="conversion" value="decimal"
onClick="this.form.int.value=parseInt
(this.form.int.value,10)">
Expresar entero en decimal<BR>
<INPUT type="radio" name="conversion" value="hexadecimal"
onClick="this.form.int.value=parseInt
(this.form.int.value,16)">
Expresar entero en hexadecimal<BR>
<INPUT type="radio" name="conversion" value="octal"
onClick="this.form.int.value=parseInt
(this.form.int.value,8)">
Expresar entero en octal<BR>
</FORM>
</BODY>
</HTML>

parseFloat(cadena): Convierte la cadena en un número y lo devuelve.

<HTML>
<HEAD>
<TITLE>Ejemplo de JavaScript</TITLE>
</HEAD>
<BODY>
<FORM>
Convierte a real:
<input type="text" name="float">
<BR>
<input type="button" value=" Convierte "
onClick="this.form.float.value=parseFloat
(this.form.float.value)">
</FORM>
</BODY>
</HTML>

isNaN(número): Devuelve un boleano dependiendo de lo que recibe por parámetro. Si no es un número devuelve un true, si es un numero devuelve false.

<HTML>
<HEAD>
<TITLE>Ejemplo de JavaScript</TITLE>
</HEAD>
<BODY>
<SCRIPT>
function Comprueba(form)
{
var number = parseFloat(form.valor.value);
if (isNaN(number)==true)
alert("No es numérico");
else
{
form.valor.value = number;
alert("Es numérico");
}
}
</SCRIPT>
<FORM>
Introducir un valor numérico:
<input type="text" name="valor">
<br>
<input type="button" value=" Comprobar " onClick="Comprueba(this.form)">
< /FORM>
</BODY>
</HTML>

Java

JavaScript

Sección

No hay comentarios:

Publicar un comentario

¿Que es un SCRUM?

SCRUM

Buscar este blog