JavaScript

JavaScript

• ¿Qué es JavaScript?

JavaScript es un lenguaje de programación que permite a los desarrolladores crear acciones en sus páginas web. 

Puede ser utilizado por profesionales y para quienes inician en el desarrollo y diseño de sitios web. No requiere de compilación ya que el lenguaje funciona del lado del cliente, los navegadores son los encargados de interpretar estos códigos.

JavaScript es un lenguaje con muchas posibilidades, utilizado para crear pequeños programas que luego son insertados en una página web y en programas más grandes, orientados a objetos mucho más complejos. Con JavaScript podemos crear diferentes efectos e interactuar con nuestros usuarios. 

• Características de JavaScript
• 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 programación 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 al gusto del usuario, evitándonos tener en el servidor una página para gusto, hacer calculos en base a variables cuyo valor es determinado por el usuario, etc.
• 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
• Condiciones
• Ciclos
• Arreglos
• Funciones
• Comentarios para una sola línea
• Comentarios para varias líneas
• Permite la programación orientada a objetos
• Las variables puedes ser definidas como: string, integer, float, boolean, utilizando "var". Podemos usar "+" para concatenar cadenas y variables.
• Diferencia entre Java y JavaScript
• Compilador:  Para Programar en Java necesitamos un Kit de desarrollo y un compilador. Sin embargo, JavaScript no es un lenguaje que necesite que sus programas se compilen, sino que éstos se interpretan por parte del navegador cuando éste lee la página.
• Orientado a objetos: Java es un lenguaje de programación orientado a objetos. JavaScript no es orientado a objetos, esto quiere decir que podremos programar sin necesidad de crear clases, tal como se realiza en los lenguajes de programación estructurada como C o Pascal.
• Propósito: Java es mucho más potente que JavaScript, esto es debido a que Java es un lenguaje de propósito general, con el que se pueden hacer aplicaciones de lo más variado, sin embargo, con JavaScript sólo podemos escribir programas para que se ejecuten en páginas web.
• Otras Características: Como se ve Java es mucho más complejo, aunque también más potente, robusto y seguro. Tiene más funcionalidades que JavaScript y las diferencias que los separaban son lo suficientemente importantes como para distinguirlos fácilmente.
• Formas de incluir JavaScript

Hay 2 formas de incluir el código en JavaScript 

•  Internos: Este hay que guardarlo como un html, ejemplo "hola.html" Para que lo reconozca hay que poner <script type="text/javascript"> aquí se pone "alert" ("Aquí el texto o lo que pondremos") para que salga el mensaje. Para hacer esto hay que crear una carpeta. dentro de ella el javascript con la terminación js, ejemplo "hola.js" y de esta manera lo reconocerá. 

Este es el código.

Asi saldría.

• Externos: Hay que guardarlo con la terminación html y js. El código sería casi igual que el interno, con la diferencia que en el externo se pone dentro del script el "src" (sirve para saber el nombre del javascript que se a ejecutar.

Esto sería lo que se guarda en el (nombre que se le colocara.html)

Esto sería lo que poner en el js (colocar.js)

El "alert" sirve para que salga una pantalla como esta:

• Estructura básica de JavaScript

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. 

Cuando empezamos a escribir lo primero que necesitamos es tener buenos hábitos desde el principio. Y para ello vamos a estructurar nuestro programas de la siguiente manera.

1. Pre. Comentario informativo de lo que vamos a programar y de que esperamos que haga el programa.
2. Declaración de variables: Una variable es un espacio de memoria que sirve para alojar una información. 
3. Declaración de funciones. Una función es un tipo especial de variable que almacena un cálculo o acción y que puede o no devolver un resultado.
1. Las funciones a su vez pueden volver a tener todos los pasos del 1 al 6 que se mencionan.
4. Declaración de instrucciones. Aquello que queremos que ejecute el script
5. 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.
6. 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. 

• Como colocar 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 qué hemos hecho algo de un modo y no de otro o que tipos de datos acepta una determinada función.

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

• 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 más sencilla: pon /* al principio y */ al final del comentario, puedes abarcar cuantas líneas quieras.

• Tipos de datos

Los tipos de datos JavaScript se dividen en dos grupos:

• Tipos primitivos Incluyen cadenas de texto(String), variables booleanas cuyo valor puede ser true o false (Boolean) y números (Number). Ademas hay dos tipos primitivos especiales que son Null y Undefined.
• Tipos Objeto son datos interrelacionados, no ordenados, donde existe un nombre de objeto, por ejemplo, una función.
• Objetos Especiales: el "Objeto global", el "Objeto prototipo", los arrays, las funciones, las clases definidas por el programador, las clases predefinidas JavaScript (como la clase Date para manejo de fechas, la clase RegExp para manejo de expresiones regulares y búsqueda de patrones en texto, y la clase Error para almacenar información relacionada en los errores) y o

• Variable

Una variable es una ubicación temporal de memoria donde el programado guardara cierto valor que le interesa retener durante la ejecución del script o guión.  Veamos el siguiente código:

• Para poder utilizar las variables, estas deben estar declaradas (es decir, tendremos que darles un nombre y opcionalidad pondremos inicializarlas o no)
• Para declarar la variable se utiliza la palabra "var" seguida del nombre de la variable.
• Para inicializar la variable lo haríamos así var Mivariable ="Esta es mi variable".
• Al inicializar una variable a un campo de texto es necesario poner las comillas dobles " o las comillas simples". da igual cuales utilicemos pero si empezamos con unas, debemos terminar con ellas.
• constantes

En javaScript las constantes se tratan como una variable a la que no se le cambia el valor.

• Identificadores

Un identificador es una palabra usada para identificar variables, constantes y funciones creadas por el programador.

Las reglas de identificadores son las siguientes:

El primer carácter es una carta de una a Z, la A a la Z, y los siguientes caracteres: (subrayado) o $ (dólar).

Los caracteres restantes pueden ser la misma que la regla para el primer carácter mas caracteres numéricos de 0 a 9.

• Palabras reservadas de JavaScript 

Palabras reservadas de un lenguaje aquellas que -por pertenecer a acciones definidas por el propio lenguaje - no pueden utilizarse como identificadores (para variables, constantes, etc.)

• Expresiones y operaciones en JavaScript
• Expresiones regulares son patrones utilizados para emparejar (match) combinaciones de caracteres dentro de strings.
• Los patrones puede ser utilizados con los métodos exec y text de RegeExp y match, replace, search y split de String.
• Las expresiones regulares pueden ser creadas de 2 formas:

var re1= /ab+c/;

var re2= new RegExp("ab+c");

• Las Expresiones regulares son patrones utilizados para emparejar (match) combinaciones de caracteres dentro de strings.
• Los patrones pueden ser utilizados con los métodos exec y text de RegeExp y match, replace, search y split de String.
• Operadores

JavaScript tiene los siguientes tipos de operadores. 

• Operadores de asignación

• Operadores de comparación 

• Operadores aritméticos

• Operadores bit a bit

• Operadores de cadena de caracteres

Además de los operadores de comparación, que pueden ser usados en cadenas de caracteres, el  operador de concatenación (+) une dos valores de tipo String, devolviendo otro String correspondiente a la unión de los dos operandos.

Ejemplo:

console.log("mi " + "string"); // lanza el String "mi string" en la consola.

• Operador condicional (ternario)

El operador condicional es el único operador de JavaScript que necesita tres operandos. El operador asigna uno de dos valores basado en una condición. La sintaxis de este operador es: 

condición ? valor1 : valor2

Si la condición es true, el operador tomará el valor1, de lo contrario tomará el valor2. 

Ejemplo:

var estado = (edad >= 18) ? "adulto" : "menor";

Esta sentencia asigna el valor adulto a la variable estado si edad es mayor o igual a 18 de lo contrario le asigna el valor menor.

• Operador coma

El operador coma (,)  simplemente evalúa ambos operadores y retorna el valor del último. Este operador es ante todo utilizado dentro de un ciclo for, permitiendo que diferentes variables sean actualizadas en cada iteración del ciclo.

Por Ejemplo: si a es un Array bi-dimendional con 10 elementos en cada lado, el  siguiente código usa el operador coma para actualizar dos variables al mismo tiempo. El código imprime en la consola los valores correspondientes a la diagonal del Array: 

for (var i = 0, j = 9; i <= j; i++, j--)

  console.log("a[" + i + "][" + j + "]= " + a[i][j]);

• Operadores uranios

Una operación unaria es una operación que sólo necesita un operando.

delete

La función del operador delete es eliminar un objeto, una propiedad de un objeto, o un elemento en el indice específico de un Array. La sintaxis es la siguiente:

delete nombreObjeto;

delete nombreObjeto.propiedad;

delete nombreObjeto[indice];

delete propiedad; // solo admitido con una declaración "with"

Donde nombreObjeto es el nombre de un objeto, propiedad el nombre de la propiedad de un objeto, e indice un entero que representa la localización de un elemento en un Array.

La cuarta forma es admitida solo dentro de una sentencia with, para eliminar una propiedad de un objeto.

Puedes usar el operador delete para eliminar aquellas variables que han sido declaradas implícitamente, pero no aquellas que han sido declaradas con var.

Si la operación delete finaliza con éxito, establece la propiedad o el elemento a undefined. El operador delete devuelve true si la operación ha sido posible y false en caso contrario.

x = 42;

var y = 43;

miObj = new Number();

miObj.h = 4;    // crea la propiedad "h"

delete x;       // devuelve true (se puede eliminar si se declaró implícitamente)

delete y;       // devuelve false (no se puede eliminar si se declaró con var)

delete Math.PI; // devuelve false (no se pueden eliminar propiedades predefinidas)

delete miObj.h; // devuelve true (se pueden eliminar propiedades definidas por el usuario)

delete miObj;   // devuelve true (se puede eliminar si se ha declarado implícitamente)

Eliminando elementos de un Array

Cuando se elimina un elemento de un Array, su tamaño no se verá afectado. Por ejemplo, si elimina a[3], a[4] seguirá existiendo pero el valor de a[3] será undefined ya que dejará de existir en el Array.

En el siguiente ejemplo, arboles[3] es eliminado con delete y como se puede constatar el mismo dejará de existir en el Array.

var arboles = new Array("secoya", "laurel", "cedro", "roble", "arce");

delete arboles[3];

if (3 in arboles) {

  // Esto no se ejecutará

}

Si desea que un elemento de un Array exista pero su valor sea undefined, debe asignarle el valor undefined en vez de usar el operador delete. En el siguiente ejemplo a arboles[3] se le asigna el valor undefined, pero el elemento seguirá existiendo

var arboles = new Array("secoya", "laurel", "cedro", "roble", "arce");

arboles[3] = undefined;

if (3 in arboles) {

  // Este trozo si se ejecutará

}

typeof

El operador typeof es usado de las siguientes maneras:

1. typeof operando

2. typeof (operando)

El operador typeof devuelve una cadena de caracteres indicando el tipo del operando evaluado. En los ejemplos anteriores operando hace referencia a la cadena de caracteres, variable, palabra clave u objeto del que se intenta obtener su tipo. Los paréntesis son opcionales.

Supón que defines las siguientes variables:

var miFuncion = new Function("5 + 2");

var forma = "redonda";

var largo = 1;

var hoy = new Date();

El operador typeof devolverá los siguientes resultados en estas variables:

typeof miFuncion; // devuelve "function"

typeof forma;     // devuelve "string"

typeof largo;     // devuelve "number"

typeof hoy;       // devuelve "object"

typeof noExiste;  // devuelve "undefined"

Con las palabras clave true y null, el operador typeof devuelve los siguientes resultados:

typeof true; // devuelve "boolean"

typeof null; // devuelve "object"

Con los números o las cadenas de caracteres, el operador typeof devuelve los siguientes resultados:

typeof 62;            // devuelve "number"

typeof 'Hello world'; // devuelve "string"

En el caso de que se utilice como operando una propiedad, el operador typeof devolverá el tipo de dicha propiedad:

typeof document.lastModified; // devuelve "string"

typeof window.length;         // devuelve "number"

typeof Math.LN2;              // devuelve "number"

Con métodos y funciones, el operador typeof devolverá los siguientes resultados:

typeof blur;        // devuelve "function"

typeof eval;        // devuelve "function"

typeof parseInt;    // devuelve "function"

typeof shape.split; // devuelve "function"

Para objetos predefinidos, el objeto typeof devuelve los siguientes valores:

typeof Date;     // devuelve "function"

typeof Function; // devuelve "function"

typeof Math;     // devuelve "object"

typeof Option;   // devuelve "function"

typeof String;   // devuelve "function"

void

El operador void puede usarse en cualquiera de las siguientes maneras:

1. void (expresion)

2. void expresion

El operador void especifica una expresión que será evaluada y no retornará ningún resultado. En los ejemplos anteriores, expresion hace referencia a la expresión que será evaluada. Si bien los paréntesis que envuelven a la expresión son opcionales, en cuanto a estilo del código, es una buena práctica usarlos.

El operador void puede ser usado para especificar una expresión como un link de hipertexto. La expresión será evaluada pero no cargará una página en el documento actual.

El siguiente código crea un link de hipertexto que no hace nada cuando el usuario hace click en él. Cuando el usuario hace click sobre el link, void(0) será evaluada como undefined, lo cual no tiene efecto en JavaScript.

<a href="javascript:void(0)">Haz click aquí para no hacer nada</a>

El siguiente código crea un link de hipertexto que envía un formulario cuando el usuario hace click en él.

<a href="javascript:void(document.form.submit())">

Haz click para enviar</a>

• Operadores relacionales.

JavaScript tiene operadores binarios y uranios, y un operador ternario especial, el Operador condicional. Un operador binario requiere dos operando, uno antes del operador y otro después de este.

operando1 operador operando2

Ejemplo: 3+4 o x*y

Un operador unario requiere solamente un operando, ya sea antes o despúes del operador:

operando operador

o

operador operando

Ejemplo:

x++ o ++x

• Estructuras de control y manejo de errores

Las estructuras de control en javascript y en la mayoría de los lenguajes de programación se utilizan en los  para definir el flujo de instrucciones que se van ejecutando. Si no fuera por las estructuras de control lo único que podríamos hacer es ejecutar una instrucción tras otra y no tendríamos forma de aplicar unas funciones u otras en según las condiciones que nosotros queramos establecer.

• Selectivas

• Iterativas
• Try/catch/throw

Sentencia throw 

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

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

La sentencia try...catch consiste en un bloque try, el cuál contiene una o más instrucciones, y ninguno o varios bloques catch, conteniendo sentencias que especifican que hacer si una excepción es arrojada en un bloque try. Se desea que las instrucciones dentro del bloque try se ejecuten con éxito, de caso contrario caerán en el bloque catchpara ser controladas. Si alguna instrucción dentro del bloque try (o en una función llamada dentro del bloque try) arroja una excepción, el control pasa inmediatamente al bloque catch. Si ninguna excepción es arrojada en el bloque try, el bloque catch es ignorado. Por último se ejecuta el bloque finally luego de que los bloques try y catch hayan sido ejecutados pero antes de las instrucciones que se encuentren a continuación de la sentencia try...catch.

El siguiente ejemplo usa la sentencia try...catch. El ejemplo llama a una función que retorna el nombre de un mes desde un arreglo basado en un valor pasado como argumento a la función. Si el valor no corresponde con el número de un mes (entre 1 y 12), una excepción es arrojada con el valor "InvalidMonthNo" y las instrucciones en el bloque catch le asignarán a la variable monthName el valor de unknown.

function getMonthName (mo) {

  mo = mo-1; // Ajusta el indice del arreglo para el arreglo de meses (1=Jan, 12=Dec)

  var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul",

                "Aug","Sep","Oct","Nov","Dec"];

  if (months[mo] != null) {

    return months[mo];

  } else {

    throw "InvalidMonthNo"; //Arroja la palabra "InvalidMonthNo" al ocurrir una excepción

  }

}


try { // instrucciones a probar

  monthName = getMonthName(myMonth); // La función puede arrojar una excepción

}

catch (e) {

  monthName = "unknown";

  logMyErrors(e); // Pasa el objeto de la excepción a un manejador de errores

}

El bloque catch

Un bloque catch es usado para manejar todas las excepciones que pueden ser generadas en el bloque try.

catch (catchID) {

  instrucciones

}

El bloque catch especifica un identificador (catchID en la sintaxis anterior) que tiene el valor especificado por la sentencia throw; puedes usar este identificador para obtener información acerca de la excepción que fue arrojada. JavaScript crea este identificador cuando ha entrado en el bloque catch; el identificador dura mientras dure el bloque catch; después de que el bloque catch termine su ejecución, el identificador ya no estará disponible.

Por ejemplo, el siguiente código arroja una excepción. Cuando la excepción ocurre, el control es transferido al bloque catch.

try {

  throw "myException" // genera una excepción

}

catch (e) {

  // instrucciones para manejar cualquier excepción generada

  logMyErrors(e) // Pasa el objeto de excepción a un manejador de errores

}

• ¿Qué es una función En JavaScript?

Las funciones son uno de los pilares fundamentales en JavaScript. Una función es un procedimiento en JavaScript - un conjunto de sentencias que realizan una tarea o calculan un valor para usara una función, debe definirla en algún lugar del ámbito desde el cual desea llamarla. 

Una FUNCIÓN es un subprograma que puede ser llamado por código externo (o interno en caso de recurdió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.

• Cuales son las partes de una función 

Declarar una función con los parámetros especificados.

pude también definir funciones usando el constructor Fuction y el function (Esxpresión function)

Hay una sintaxis especial para declarar funciones 

• Declaración de funciones: Es el método más utilizado para declara funciones en javaScript. Una palabra clave de función se inicia y sigue el nombre de la función, luego los paréntesis () y luego el código escrito entre corchetes{} Ejemplo:

 function function_name(){
        
        }

• Para llamar o invocar una función, use function_name (). Podemos llamar a una función declarada después o antes de la declaración . También se les conoce como named funcion.

• Tipos de funciones en JavaScript
• Funciones Anidadas y cierres: 
• Funciones Multi-anidadas
• Funciones Flecha
• Funciones predefinidas
• Función global isFinite
• Función isNaN
• Funciones parseInt and parseFloat
• Funciones Number y String
• 
  
• ¿Qué es un parámetro?

Una función puede tener parámetros por defecto de una función es undefines. Mientras que la declaración, se llaman parámetros, pero cuando se invoca la función son argumentos.   Los parámetros se utilizan para proporcionar valores modificables para que funcionen para su reutilizaicon.

• Funciones predeterminadas en JavaScript

En javaScript tenemos funciones predeterminadas que no necesitan ninguna instancia para ser utilizadas:

• parseInt()
• parseFloat()
• inNan
• eval
• escape y unescape
• Funciones anidadas en JavaScript

La función anidadas (inner) es privada a la función que la contiene (outer). También con  la forma: aclosure.

El cierre es una expresión (normalmente una función) que puede tener variables libres junto con el entrono que enlaza 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 las variables de su función externa.

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

function addCuadrado(a,b) {
   function cuadrado(x) {

   return cuadrado(a) + cuadrado(b);
return x * x;
   }
}

b = addCuadrado(3,4); // retorna 25
a = addCuadrado(2,3); // retorna 13

c = addCuadrado(4,5); // retorna 41

Dado que la función interna forma un cierre, jpuede llamar a la función externa y especificar arguments para función externa e interna.

function fuerade(x) {

   function dentro(y) {
return x + y;

}
}
   return dentro;

resultado = fuerade(3)(5); // retorna 8