¿Qué es JavaScript?
Javascript es un lenguaje de programación que permite a los desarrolladores crear acciones en sus páginas web. 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
- Conozcamos ahora las características de JavaScript que haces de este lenguaje, uno de los más populares en la actualidad.
- Es Liviano.
- Multiplataforma, ya que se puede utilizar en Windows, Linux o Mac o en el navegador de tu preferencia.
- Es Imperativo y estructurado, mediante un conjunto de instrucciones indica al computador qué tarea debe realizar.
- Prototipado, debido a que usa prototipos en vez de clases para el uso de herencia.
- Orientado a objetos y eventos.
- Es Interpretado, no se compila para poder ejecutarse.
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”.
Formas de Incluir JavaScript
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>
Estructura Básica de JavaScript
- 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.
Colocar 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 */.
Tipo de Datos en JavaScript
- Sin definir ( undefined )
- Nulo ( null )
- Lógicos ( boolean )
- Numérico ( number )
- Cadena ( string )
- Símbolo ( symbol )
Variables, Constantes e Identificadores
Variables
Las variables se usan como nombres simbólicos para valores en tu aplicación. Los nombres de las variables, llamados identificadores, se rigen por ciertas reglas.
Un identificador en JavaScript tiene que empezar con una letra, un guión bajo (_) o un símbolo de dólar ($); los valores subsiguientes pueden ser números. Debido a que JavaScript diferencia entre mayúsculas y minúsculas, las letras incluyen tanto desde la "A" hasta la "Z" (mayúsculas) como de la "a" hasta la "z".
Constantes
Puede crear una de solo lectura, llamada constante con la palabra clave const. La sintaxis del identificador de la constante es el mismo como para un indentificador de variable: debe de empezar con una letra, guión bajo(_) o símbolo de dollar($) y puede contener alfabéticos, numéricos o guiones bajos.
Identificadores
Los identificadores de un lenguaje son la ristra de caracteres que le asignamos a los nombres de variables, constantes, funciones, objetos, etc..., que nosotros definimos en dicho lenguaje, estos son necesarios para poder invocar a dichos elementos en lugares posteriores a su definición.
Los identificadores deben seguir las siguientes reglas:
El identificador debe empezar por una letra o por el caracter '_'.
Los caracteres siguientes, además de letras o el caracter '_', pueden ser cifras.
Recordar que le uso de mayúsculas o minúsculas no es importante porque JavaScript no diferencia de los nombres de mayúsculas o minúsculas en los identificadores. Veamos algunos ejemplos de nombres de variables:
Num_linea
aux1
_exit
Palabras Reservadas en JavaScript
Expresiones y Operadores en JavaScript
Operadores
JavaScript tiene los siguientes tipos de operadores. Esta sección describe dichos operadores y contiene información sobre el orden de los mismos:
Operadores de asignación
Operadores de comparación
Operadores aritméticos
Operadores bit a bit
Operadores lógicos
Operadores de cadena de caracteres
Operador condicional (ternario)
Operador coma
Operadores unarios
Operadores relacionales
JavaScript tiene operadores binarios y unarios, y un operador ternario especial, el operador condicional. Un operador binario requiere dos operandos, uno antes del operador y otro después de este.
Expresiones
Una expresión es cualquier unidad válida de código que resuelve un valor.
Cada expresión sintáctica válida resuelve a algún valor, pero conceptualmente, hay dos tipos de expresiones: las que tienen efectos secundarios (por ejemplo: aquellas que asignan un valor a una variable) y las que de alguna manera son evaluadas y resuelven un valor.
La expresión x = 7 es un ejemplo del primer tipo. Esta expresión usa el operador = para asignar el valor siete a la variable x. La expresión en sí misma evalúa a siete.
El código 3 + 4 es un ejemplo del segundo tipo de expresiones. Esta expresión usa el operador + para sumar tres y cuatro sin asignar el valor (siete) a ninguna variable.
JavaScript cuenta con las siguientes categorías de expresiones:
- Aritméticas: evalúan a un número, por ejemplo 3.14159. (Usos generales Operadores aritméticos.)
- Cadenas de caracteres: evalúan a una cadena de caracteres, por ejemplo, "Juan" o "234". (Usos generales Operadores de cadenas de caracteres.)
- Lógicas: evalúan a true o false. (A menudo involucran a los Operadores lógicos.)
- Expresiones primarias: Palabras clave básicas y expresiones generales en JavaScript.
- Expresiones al lado izquierdo: Los valores izquierdos son el destino de una asignación.
Estructuras de Control y Manejo de Errores
Control de Flujo
Sentencia de Bloque: a sentencia de bloque es el tipo de sentencia más básico y se utiliza para agrupar sentencias. El bloque se delimita entre un par de llaves:
{
sentencia_1;
sentencia_2;
.
.
.
sentencia_n;
}
Sentencias Condicionales: Una sentencia condicional es un conjunto de comandos que se ejecutan si una condición es verdadera. JavaScript soporta dos sentencias condicionales: if...else y switch.
Se utiliza la sentencia if para comprobar si la condición lógica es verdadera. Se utiliza la opción else para ejecutar un sentencia si la condición es falsa. A continuación se muestra un ejemplo de if...else:
if (condición) {
sentencia_1;
} else {
sentencia_2;
}
Manejo de Excepciones
Puedes lanzar excepciones usando la sentencia throw y manejarlas usando las sentencias try...catch.
Sentencia Throw: 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:
Try... Catch: 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.
Bloque Catch: Un bloque catch es usado para manejar todas las excepciones que pueden ser generadas en el bloque try.
catch (catchID) {
instrucciones
}
Bloque Finally: El bloque finally contiene instrucciones para ejecutar luego de la ejecución del bloque try y el bloque catch pero antes de las instrucciones ubicadas luego de la sentencia try...catch. El bloque finally se ejecuta cuando se haya arrojado o no una excepción. Si una excepción es arrojada, las instrucciones en el bloque finally se ejecutan incluso si no existe un bloque catch que maneje la excepción.
Funciones en JavaScript
¿Qué es una función en JavaScript?
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.
Partes de una Función
Tipos de Funciones
Funciones con Parámetros
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.
Funciones Recursivas
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.
Funciones 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).
¿Qué es un Parámetro?
En JavaScript, los parámetros de funciones están establecidos por defecto a undefined. Sin embargo, en ciertas situaciones puede ser útil establecerlos a un valor suministrado por defecto diferente. Es entonces cuando los parámetros por defecto pueden ayudar.
En el pasado, la estrategia general para establecer los parámetros por defecto era comprobar los valores de éstos en el cuerpo de la función y asignar un valor si estos eran undefined. Si en el siguiente ejemplo ningún valor es suministrado para b durante el llamado, su valor sería undefined cuando se evalúe a*b; y la llamada de multiply retornaría NaN. Sin embargo, esto se evita con la segunda línea en este ejemplo:
Funciones Predeterminadas
Funciones Útiles para Cadenas de Textos
length, calcula la longitud de una cadena de texto (el número de caracteres que la forman)var mensaje = "Hola Mundo";
var numeroLetras = mensaje.length; // numeroLetras = 10
+, se emplea para concatenar varias cadenas de textovar mensaje1 = "Hola";
var mensaje2 = " Mundo";
var mensaje = mensaje1 + mensaje2; // mensaje = "Hola Mundo"
Además del operador
+, también se puede utilizar la función concat()var mensaje1 = "Hola";
var mensaje2 = mensaje1.concat(" Mundo"); // mensaje2 = "Hola Mundo"
Las cadenas de texto también se pueden unir con variables numéricas:
var variable1 = "Hola ";
var variable2 = 3;
var mensaje = variable1 + variable2; // mensaje = "Hola 3"
Cuando se unen varias cadenas de texto es habitual olvidar añadir un espacio de separación entre las palabras:
var mensaje1 = "Hola";
var mensaje2 = "Mundo";
var mensaje = mensaje1 + mensaje2; // mensaje = "HolaMundo"
Los espacios en blanco se pueden añadir al final o al principio de las cadenas y también se pueden indicar forma explícita:
var mensaje1 = "Hola";
var mensaje2 = "Mundo";
var mensaje = mensaje1 + " " + mensaje2; // mensaje = "Hola Mundo"
toUpperCase(), transforma todos los caracteres de la cadena a sus correspondientes caracteres en mayúsculas:var mensaje1 = "Hola";
var mensaje2 = mensaje1.toUpperCase(); // mensaje2 = "HOLA"
toLowerCase(), transforma todos los caracteres de la cadena a sus correspondientes caracteres en minúsculas:var mensaje1 = "HolA";
var mensaje2 = mensaje1.toLowerCase(); // mensaje2 = "hola"
charAt(posicion), obtiene el carácter que se encuentra en la posición indicada:var mensaje = "Hola";
var letra = mensaje.charAt(0); // letra = H
letra = mensaje.charAt(2); // letra = l
indexOf(caracter), calcula la posición en la que se encuentra el carácter indicado dentro de la cadena de texto. Si el carácter se incluye varias veces dentro de la cadena de texto, se devuelve su primera posición empezando a buscar desde la izquierda. Si la cadena no contiene el carácter, la función devuelve el valor -1:var mensaje = "Hola";
var posicion = mensaje.indexOf('a'); // posicion = 3
posicion = mensaje.indexOf('b'); // posicion = -1
Su función análoga es
lastIndexOf():lastIndexOf(caracter), calcula la última posición en la que se encuentra el carácter indicado dentro de la cadena de texto. Si la cadena no contiene el carácter, la función devuelve el valor -1:var mensaje = "Hola";
var posicion = mensaje.lastIndexOf('a'); // posicion = 3
posicion = mensaje.lastIndexOf('b'); // posicion = -1
La función
lastIndexOf() comienza su búsqueda desde el final de la cadena hacia el principio, aunque la posición devuelta es la correcta empezando a contar desde el principio de la palabra.substring(inicio, final), extrae una porción de una cadena de texto. El segundo parámetro es opcional. Si sólo se indica el parámetro inicio, la función devuelve la parte de la cadena original correspondiente desde esa posición hasta el final:var mensaje = "Hola Mundo";
var porcion = mensaje.substring(2); // porcion = "la Mundo"
porcion = mensaje.substring(5); // porcion = "Mundo"
porcion = mensaje.substring(7); // porcion = "ndo"
Si se indica un
inicio negativo, se devuelve la misma cadena original:var mensaje = "Hola Mundo";
var porcion = mensaje.substring(-2); // porcion = "Hola Mundo"
Cuando se indica el inicio y el final, se devuelve la parte de la cadena original comprendida entre la posición inicial y la inmediatamente anterior a la posición final (es decir, la posición
inicio está incluida y la posición final no):var mensaje = "Hola Mundo";
var porcion = mensaje.substring(1, 8); // porcion = "ola Mun"
porcion = mensaje.substring(3, 4); // porcion = "a"
Si se indica un
final más pequeño que el inicio, JavaScript los considera de forma inversa, ya que automáticamente asigna el valor más pequeño al inicio y el más grande al final:var mensaje = "Hola Mundo";
var porcion = mensaje.substring(5, 0); // porcion = "Hola "
porcion = mensaje.substring(0, 5); // porcion = "Hola "
split(separador), convierte una cadena de texto en un array de cadenas de texto. La función parte la cadena de texto determinando sus trozos a partir del carácter separador indicado:var mensaje = "Hola Mundo, soy una cadena de texto!";
var palabras = mensaje.split(" ");
// palabras = ["Hola", "Mundo,", "soy", "una", "cadena", "de", "texto!"];
Con esta función se pueden extraer fácilmente las letras que forman una palabra:
var palabra = "Hola";
var letras = palabra.split(""); // letras = ["H", "o", "l", "a"]
Funciones Útiles para Arrays
length, calcula el número de elementos de un arrayvar vocales = ["a", "e", "i", "o", "u"];
var numeroVocales = vocales.length; // numeroVocales = 5
concat(), se emplea para concatenar los elementos de varios arraysvar array1 = [1, 2, 3];
array2 = array1.concat(4, 5, 6); // array2 = [1, 2, 3, 4, 5, 6]
array3 = array1.concat([4, 5, 6]); // array3 = [1, 2, 3, 4, 5, 6]
join(separador), es la función contraria a split(). Une todos los elementos de un array para formar una cadena de texto. Para unir los elementos se utiliza el carácter separador indicadovar array = ["hola", "mundo"];
var mensaje = array.join(""); // mensaje = "holamundo"
mensaje = array.join(" "); // mensaje = "hola mundo"
pop(), elimina el último elemento del array y lo devuelve. El array original se modifica y su longitud disminuye en 1 elemento.var array = [1, 2, 3];
var ultimo = array.pop();
// ahora array = [1, 2], ultimo = 3
push(), añade un elemento al final del array. El array original se modifica y aumenta su longitud en 1 elemento. (También es posible añadir más de un elemento a la vez)var array = [1, 2, 3];
array.push(4);
// ahora array = [1, 2, 3, 4]
shift(), elimina el primer elemento del array y lo devuelve. El array original se ve modificado y su longitud disminuida en 1 elemento.var array = [1, 2, 3];
var primero = array.shift();
// ahora array = [2, 3], primero = 1
unshift(), añade un elemento al principio del array. El array original se modifica y aumenta su longitud en 1 elemento. (También es posible añadir más de un elemento a la vez)var array = [1, 2, 3];
array.unshift(0);
// ahora array = [0, 1, 2, 3]
reverse(), modifica un array colocando sus elementos en el orden inverso a su posición original:var array = [1, 2, 3];
array.reverse();
// ahora array = [3, 2, 1]
Funciones Útiles par Números
NaN, (del inglés, "Not a Number") JavaScript emplea el valor NaN para indicar un valor numérico no definido (por ejemplo, la división 0/0).var numero1 = 0;
var numero2 = 0;
alert(numero1/numero2); // se muestra el valor NaN
isNaN(), permite proteger a la aplicación de posibles valores numéricos no definidosvar numero1 = 0;
var numero2 = 0;
if(isNaN(numero1/numero2)) {
alert("La división no está definida para los números indicados");
}
else {
alert("La división es igual a => " + numero1/numero2);
}
Infinity, hace referencia a un valor numérico infinito y positivo (también existe el valor –Infinity para los infinitos negativos)var numero1 = 10;
var numero2 = 0;
alert(numero1/numero2); // se muestra el valor Infinity
toFixed(digitos), devuelve el número original con tantos decimales como los indicados por el parámetro digitos y realiza los redondeos necesarios. Se trata de una función muy útil por ejemplo para mostrar precios.var numero1 = 4564.34567;
numero1.toFixed(2); // 4564.35
numero1.toFixed(6); // 4564.345670
numero1.toFixed(); // 4564
Funciones Anidadas en JavaScript
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.
