Aprende JavaScript sin dolor

JavaScript admite prácticamente cualquier tipo de nombre para definir una variable, no obstante, hay una serie de consideraciones que se deben tener presentes:

• El primer: carácter debe ser siempr una letra o el guión de subrayado ( _ ).  Los restantes caracteres pueden ser      letras, números o el guión de subrayado, teniendo como precaución no dejar      espacios entre ellos.

• El nombre de la variable no debe coincidir las palabras reservadas de JavaScript.

• JavaScript diferencia entre mayúsculas y minúsculas.

JavaScript puede manejar tres tipos de datos distintos decidiendo por nosotros el tipo de variable que deberá emplear durante la ejecución del script.

Los tres tipos de variables son:

• Variables de cadena

• Variables numéricas

• Variables booleanas

Las variables numéricas son aquellas que contienen números enteros o de coma flotante.

Enteros

JavaScript puede utilizar tres bases distintas para números enteros: la decimal (base 10), la hexadecimal (base 16) y la octal (base 8).  Por defecto el sistema es el decimal.

var numero;

numero = 100;

numero = -1000;

Una variable de cadena es aquella que contiene texto.  Las cadenas de texto en JavaScript se delimitan mediante comillas dobles o simples y pueden contener cualquier tipo de carácter.  También pueden tener un valor nulo.

Ejemplo:

var pais=”México”;

var entrada_codigo;

entrada_codigo=”1234567”;

var valor=” ”;

Las variables booleanas o lógicas se especifican mediante los valores verdadero (true) o falso (false).

var contento;

contento=false;

contento=true;

Los mapas (Map) son una estructura de datos que almacenan pares de llave (key) y valor (value), los conjuntos (Set) tienen la característica de no aceptar duplicados, y ambos permiten búsquedas eficientes cuando se tiene un gran volumen de información porque no guardan sus elementos ordenados por un índice, como ocurre con los arreglos.

Son un tipo especial de cadena con formato, similares a la interpolación en otros lenguajes como Ruby, se definen con un par de caracteres back-tick (`) o acentos agudos del francés, a diferencia de las cadenas normales que usan comillas sencillas o dobles.

Hay ocasiones en que el contexto de nuestros datos requiere que trabajemos con cifras no decimales, por ejemplo en base 2 (binario) o base 8 (octal), ahora es sencillo crear este tipo de literales con los prefijos (0b) y (0o) respectivamente.

• Los “símbolos” son un nuevo tipo de dato primitivo.

• Los símbolos son únicos e inmutables y son utilizados como identificadores para propiedades de objetos.

• Los símbolos pueden tener una descripción opcional, pero sólo es utilizada para fines del depurador.

Los operadores aritméticos son los encargados de realizar las operaciones básicas como sumar, restar, multiplicar y dividir. 

• Suma (+)

• Resta (-)

• Multiplicación  (*)

• División (/)

• Módulo  (%).  Resto de la división.

• Incremento,   Preincremento, Posincremento (++)

• Decremento,  Predecremento, Posdecremento (--)

• Negación (!)

Los operadores de comparación son similares a los lógicos, solo que estos no tiene porque ser booleanos. Son los clásicos mayor que, menor que.

Los operadores lógicos o booleanos se emplean para que un programa tome una decisión en función de un cálculo lógico. Los valores que se obtienen son true o false. Los operadores son los siguientes:

Otro tipo de operadores aritméticos son los incrementales o decrementales, que se aplican antes o después del operando.

En la gran mayoría de los lenguajes de programación contamos con ciertas palabras que no las podemos utilizar para crear variables o funciones, las cuales las llamamos como palabras reservadas para el lenguaje. En el caso de JavaScript no podemos utilizar las siguientes palabras como variables, funciones u objetos:

• Podemos colocar espacios en blanco entre los operadores y los operandos para mayor legibilidad del código.

• Los espacios entre líneas no afectan, pero no son recomendables.

• Un operador bit a bit trata a sus operandos como un conjunto de 32 bits (ceros y unos), en lugar de números decimales, hexadecimales u octales.

• Por ejemplo, el número decimal nueve tiene una representación binaria de 1001.

• Los operadores bit a bit realizan sus operaciones en tales representaciones binarias, pero devuelven valores numéricos estándar de JavaScript.

El operador typeof devuelve una cadena que indica el tipo del operando sin evaluarlo.

• El operador de exponenciación (**) eleva el primer operando a la potencia del segundo operando.

• Es equivalente a la función Math.pow();

• Una excelente herramienta para el desarrollo con JavaScript es la consola del navegador.

Apuntes de la sección 2.

¿Algo para mejorar en esta sección?

¿Algún comentario o aporte?

Tus comentario son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.

En determinados momentos es necesario controlar el desarrollo del programa para que éste tome decisiones por nosotros.  JavaScript dispone de los siguientes comandos:

• if

• for

• while

• do while

La estructura if…else tiene la siguiente sintaxis:

if (condición){

  Código de programa en caso de que la condición sea verdadera

}else{

  Código de programa en caso de que no se cumpla la condición

}

• Podemos “anidar” sentencias condicionales. Meter una condicional dentro de otra, sin límites. No se recomienda más de tres anidaciones.

• Una estructura de tipo “else if” podemos hacer después de una pregunta falsa, otra pregunta. Si todas son falsas, se ejecuta el “else” Si una pregunta es verdadera, las demás preguntas no se realizan.

Podemos hacer varias preguntas dentro de un mismo “if” por medio de los operadores lógicos, AND y OR (&& y ||)

Switch, podemos preguntar pero solo de una variable.

La sentencia “break” rompe la estructura “switch” para continuar con el script.

Un operador condicional devuelve un valor determinado en función del resultado obtenido al evaluar una condición.

Apuntes de la sección 3

La instrucción while ejecuta de manera constante una determinada secuencia de código siempre que se cumpla una condición.  Este tipo de bucles puede generar secuencias infinitas, por lo que se debe tener cuidado cuando se definen los bucles.

Estructura básica de un bucle while:

while (condición)

{

  Instrucciones a ejecutar con el bucle

}

Ejemplo de programa que imprime en pantalla los números del 0 al 10:

Este tipo de bucle no estaba implementado en las versiones de JavaScript anteriores, hay que tenerlo presente a la hora de especificar el tipo de versión de JavaScript.

La misión de un bucle de este tipo es la de colocar una expresión condicional después de las instrucciones que deben ejecutarse, de esta manera seguro que las instrucciones del bucle son ejecutadas por lo menos una vez.

Las estructuras if permiten que un programa tome decisiones.  Los bucles for se tienen que establecer cuatro valores.

• Valor inicial.  Determine el valor inicial del contador.

• Condición.  Comprueba si la condición es verdadera o falsa.

• La ejecución.  Se  ejecutan las instrucciones deseadas.

• Actualización.  Se actualiza el valor del contador para volver a ejecutar el paso número 2.

La estructura básica de un bucle for, es la siguiente:

for (valor inicial; condición; actualización)

{

  Instrucciones a ejecutar en el bucle

}

La instrucción break permite interrumpir la ejecución de un bucle for o while aunque éste no haya sido ejecutado totalmente.  Así pues, podemos cancelar la ejecución de un bucle cuando se cumpla una determinada condición.

La instrucción continue no termina la ejecución del bucle sino que puede dejar una repetición determinada y pasar a la siguiente.

Apuntes a la sección 4: ciclos

Las funciones son uno de los pilares en los que se basa JavaScript.  Una función es un conjunto de sentencias JavaScript que realizan alguna tarea específica.  Las partes que definen una función son:

• El nombre de la función.

• La lista de argumentos de la función, encerrados entre paréntesis y separados por      comas(“,”)

• Las sentencias en JavaScript que definen la función, encerradas entre llaves({,});

Una función puede incluir llamadas a otras funciones definidas en la aplicación, pero únicamente de la página actual.  Una opción interesante es definir las funciones en el encabezado del documento de manera que, cuando se inicialice la página, las funciones se definan antes de cualquier acción del usuario.

• Los parámetros o argumentos de una función permiten que el resultado  varíe según el valor indicado de la misma.  Estos pueden ser variables, números u objetos.

• Los parámetros funcionan como variables temporales, es decir, desaparecerán cuando la función haya terminado. Tenemos que pasar sus valores separados por comas.

Para que una función devuelva el resultado de una serie de operaciones procedentes de la misma función, utilizaremos la instrucción return.

Las variables locales y globales dependen del lenguaje de programación. Una variable que es definida fuera de las funciones se le llama una variable global porque podrá ser vista dentro de todas las funciones, pero las variables que son definidas dentro de una función, únicamente podrá ser “vista” o utilizada dentro de la función. A esto se le llama una variable local.

Las variables locales sólo podrán ser “vista” dentro de la función, y cuando la función termine, estas variables desaparecerán de memoria. Las variables globales pueden ser modificadas dentro de una función, pero se considera una muy mala práctica de programación. Hay evitar modificar variables globales dentro de funciones, y únicamente regresar valores con la sentencia return.

• Una función se puede llamar a sí misma.

• A ese proceso lo conocemos como recursividad.

• Es muy importante crear una sentencia condicional para detener la recursividad.

• Crearemos la entrada de datos.

• Validaremos la entrada.

• Formatearemos la salida.

• Podemos escribir una función dentro de otra función.

• Las funciones internas, sólo podrán ser accedidas desde la función contenedora, pero no fuera de ésta.

• Las variables, constantes y demás elementos de la función contenedora (padre) pueden ser accedidos desde las funciones internas (hijos), pero no al revés.

• El objeto arguments de una función se mantiene en un objeto similar a un arreglo.

• Dentro de una función, puedes abordar los argumentos que se le pasan de la siguiente manera:

• arguments[i]

Podemos crear parámetros por omisión, antes y después de ECMA2015.

• Conocidas en otros lenguajes (C#, Java) como “expresiones lambda”, arrows o flechas son abreviaciones de funciones utilizando el operador =>

• Una forma más compacta para hacer funciones en JS.

• “this” se maneja diferente.

• Funciones de una sola línea.

En EcmaScript 6 podemos recibir valor por omisión o default en los parámetros de las funciones. Pueden ser definidos como variables primitivas, funciones, expresiones o arreglos.

Las funciones y su uso en la consola de JavaScript.

Un ejemplo clásico de las funciones recursivas es hacer la cadena inversa de una cadena original.

Apuntes de la sección 5: Funciones en JavaScript

• ¿Algo para mejorar en esta sección?

• ¿Algún comentario o aporte?

Tus comentario son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.

El proceso de “juntar” cadenas la conoceremos como “concatenación”. En JavaScript, para juntar subcadenas en una cadena la realizaremos con el operado más (+). En HTML todos los campos son una cadena.  Realmente no hay valores numéricos, ni fechas, solo cadenas.

Al proceso de cambiar una variable de a otro tipo de variable, por ejemplo, de una cadena a un número, o de un número a una cadena, la conoceremos como “conversión”. Si JavaScript falla al tratar de convertir una cadena a su valor numérico, por ejemplo la palabra “seis” no puede convertirse al valor “6”, el sistema nos regresará un valor del tipo “NaN” o “not a number”.

El objeto String ofrece distintas formas de manejar cadenas de texto. Siempre que se asigne un String una variable o propiedad, se crea un objeto de tipo String.

En este caso, al definir una variable con una cadena de texto ya estamos utilizando un objeto String, es decir, no será necesaria si declaración.

var cadenaTexto;

cadenaTexto=”Aquí esta la cadena de texto”;

Por medio del método indexOf() podremos encontrar una “subcadena” (que no es otra cosa que una cadena más pequeña que donde buscamos) dentro de una cadena. Esto es muy usado en JavaScript, ya que nos ayuda a cambiar los valores de entrada, buscar en textos, validar campos de entrada, por ejemplo si un correo electrónico está bien escrito, entre otras muchas funciones.

El valor que nos regresará esta función es la posición de la subcadena dentro de la cadena. El primer carácter siempre tiene el valor de cero. Si la búsqueda no es exitosa, esta función nos regresará un valor -1.

• El método charAt () devuelve el carácter en el índice especificado de una cadena.

• El índice del primer carácter es 0, el segundo carácter es 1, y así sucesivamente.

ES8: Rellenar una cadena con caracteres al inicio o al final de una cadena padStart y padEnd

• Por medio del método replace() podemos reemplazar una subcadena, generando una nueva cadena, no modifica la cadena original.

• Por omisión sólo se reemplaza la primer ocurrencia.

• El método es sensible a mayúsculas y minúsculas.

• El método trim limpia los caracteres en blanco de una cadena.

• El método concat es equivalente a la concatenación del símbolo más.

• El método split() convierte una cadena en un arreglo o vector.

• Para utilizar los templates de cadena utilizamos los acentos graves del francés o back-ticks (``).

• Podemos utilizar libremente las comillas sencillas (‘’) o cadenas dobles (“”).

• Podemos utilizar cadenas de de múltiples líneas.

Podemos utilizar los templates, conjunto con las otras sintaxis de ES6.

Apuntes de la sección 6: Manejo de cadenas

Una técnica importante de programación es el uso de los “arrays”, arreglos o vectores. Un arreglo es un conjunto de datos de un mismo tipo identificados por un índice.

Desarrollaremos un arreglo de ejemplo.  Primero deberemos definir el arreglo, para ello utilizaremos el objeto Array().  Después se deberán ir incluyendo los elementos de este arreglo, los cuales estarán identificados mediante un número al que llamaremos índice.

Al hecho de recorrer el arreglo desde principio a fin, se le conoce, dentro de la jerga de sistemas, se le conoce como “barrer” el arreglo. También se le aplica a otros objetos como los archivos o tablas de una base de datos.

Al proceso de introducir valores aun objeto, como puede ser un arreglo, se le conocerá como “poblar”, que proviene de la palabra en inglés “populate”.

Un punto muy importante cuando iniciamos en un lenguaje de programación es tener una buena referencia del lenguaje.
Entre los métodos con los que cuenta el objeto Array encontramos los siguientes:

• join()  Método encargado de agrupar todos los elementos en una cadena de caracteres, separados por comas.

• reverse() Este método invierte el orden de colocación de los elementos.  El primero pasa a ser el último y      viceversa.

• sort()  Este método devuelve de manera ordenada los elementos de la matriz.

Un objeto es una agrupación de variables denominadas propiedades que realizan operaciones con las variables propias del mismo, es decir, un conjunto de datos definidos por el usuario junto con las operaciones que actúan sobre ellos.  Por ejemplo, las propiedades de una computadora, serían su procesador, el disco duro, memoria, etc., y además con él podemos jugar, estudiar, dibujar,

El objeto Date permite trabajar con horas y fechas.  JavaScript maneja las fechas en milisegundos desde 1/1/1970 a las 00:00:00 horas.  Por lo que no se puede trabajar con fechas anteriores.

En la representación de los meses para valores enteros JavaScript comienza a contar desde 0, por lo tanto, enero será el mes 0 y diciembre el mes11.  Los días de la semana se cuentan empezando por 0 para el domingo, 1 el lunes y así sucesivamente.

Para crear una variable de fecha se debe establecer un nombre para la instancia del objeto y sus respectivos parámetros.

El objeto Math tiene propiedades y métodos que representan constantes y funciones matemáticas.

Las propiedades de este objeto son las siguientes:

• E Constante de Euler o número e.

• LN2 Logaritmo de 2.

• LN10  Logaritmo de 10.

• LOG2E  Logaritmo de e en base 2.

• LOG10E Logaritmo de e en base 10.

• PI  Número PI.

• SQRT1_2 Raíz cuadrada de 0.5.

• SQRT2  Raíz cuadrada de 2.

• El objeto Boolean() se utiliza para convertir datos no booleanos en booleanos.

• Su sintaxis es la siguiente:

var nuevoObjeto=new Boolean(valor);

• La función eval() toma una cadena que puede contener cualquier expresión de JavaScript.

• Así pues, su valor podría ser una cadena representando una expresión JavaScript, una sentencia o una secuencia de sentencias.

Estas dos funciones devuelven un valor numérico a partir de una cadena. La función parseFloat(cadena) convierte una cadena en un número real en coma flotante.

Sintaxis corta para los objetos:

Antes:

obj = {x:x, y:y}

Ahora:

obj = { x, y }

Los mapas (Map) son una estructura de datos que almacenan pares de llave (key) y valor (value), los conjuntos (Set) tienen la característica de no aceptar duplicados, y ambos permiten búsquedas eficientes cuando se tiene un gran volumen de información porque no guardan sus elementos ordenados por un índice, como ocurre con los arreglos.

ECMAScript 2016 (Aka ES7) introduce Array.prototype.includes. Esto nos permite verificar si un elemento está presente en un arreglo.

• ECMAScript 2017 (Aka ES8) introduce Object.entries() convierte un objeto en un arreglo llave/valor.

• Es más sencillo utilizarlo en loops.

• Es más sencillo convertir objetos en mapas.

• Dentro del objeto Number() tenemos los métodos:

  • toFixed: formatea un número usando notación de punto fijo.

  • toString: Devuelve una cadena que representa al objeto Number especificado.

• JavaScript no tiene un método para ordenar en forma aleatoria, pero podemos utilizar el método sort().

arreglo.sort(function(a, b){return 0.5 - Math.random()});

• Por medio del método filter() se puede filtrar un arreglo, creando un nuevo arreglo.

• No se modifica el arreglo original.

• every() verifica si todos los elementos de un arreglo cumple con una regla.

• some() verifica si al menos uno de los elementos de un arreglo cumple con una regla.

• find() regresa el primer elemento que cumpla con la regla.

• findIndex() regresa el índice de la primera ocurrencia del test de la función.

• from() devuelve un objeto Array de cualquier objeto con una propiedad de longitud o cualquier objeto iterable.

• keys() El método devuelve un objeto Iterador de arreglo con las claves de un arreglo.

• includes() Esto nos permite verificar si un elemento está presente en un arreglo (incluido NaN, a diferencia de indexOf).

Por medio de un ciclo for in podemos recorrer o “barrer” un objeto y un arreglo con facilidad.

• El ciclo for of es una instrucción que recorre los valores de un objeto iterable.

• Le permite recorrer estructuras de datos iterables como matrices, cadenas, mapas, listas de nodos y más.

• El método Object.assign() copia todas las propiedades enumerables de uno o más objetos fuente a un objeto destino.

• Devuelve el objeto destino.

• Permite formatear un número según las opciones locales.

• const number = 123456.789;

• console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));

Para generar una tabla bidimensional (matriz) o estructurar elementos HTML de forma dinámic, la combinación de map() y fill() resulta muy útil.

Apuntes de la sección 7: Arreglos y objetos

El modelo de representación de documentos o DOM (Document Object Model) es la forma en que podemos representar un documento. Por "documento" no se refiere a un documento tipo Word, si no a una página en HTML. Podemos representar una página en el modelo DOM como un árbol genealógico, por ejemplo:

• document.getElementById("identificador");

• document.getElementsByTagName("etiqueta");

miElemento.nodeType

miElemento.innerHTML

miElemento.childNodes.length

Contamos con la instrucción getElementsByClassName() La cual nos reporta un arreglo o “nodeList” con los elementos que tienen esta clase. Esta instrucción es soportada por el IE9+

Contamos con las instrucciones:

• querySelector()

• querySelectorAll()

El primero reporta sólo un elemento y el segundo un arreglo o ‘nodeList’ Esta instrucción es soportada por el IE8+ Podemos seleccionar por clase, identificador, atributo o pseudoclase.

• Recuperamos el valor del atributo: miElemento.getAttribute("align");

• Modificamos el valor de un atributo: miElemento.setAttribute("align","left");

Los métodos para modificar los nodos:

• getAttribute()

• setAttribute()

• removeAttribute()

• hasAttribute()

Por medio del siguiente método, podemos modificar, tomar y remover texto con o sin etiquetas:

1. innerHTML

Los métodos para moverse a través del árbol DOM son:

• parentNode

• previousSibling

• nextSibling

• firstChild

• lastChild

Ejemplo de navegación en un documento de tipo DOM:

Con los métodos lastChild y firstChild, podrmos revisar el primer y último de los hijos de un nodeList, pero llega a cambiar en diferentes navegadores, por lo que hay que utilizarla con cuidado.

Podemos crear nuevos nodos en un documento de tipo DOM por medio de los métodos:

• createElement("p"): creamos el nodo vacío.

• innerHTML: poblamos de contenido el nodo.

• appendChild(nodo): mostramos en el documento DOM en nodo.

Eliminamos un nodo con el método:
var ant = elemento.removeChild(child);
O
elemento.removeChild(child);

Por medio de los métodos del DOM será muy sencillo añadir elementos a una lista de pendientes.

textContents es todo el texto contenido por un elemento y todos sus elementos secundarios que son solo para fines de formato.

innerText devuelve todo el texto contenido por un elemento y todos sus elementos secundarios.

innerHtml devuelve todo el texto, incluidas las etiquetas html, que contiene un elemento.

Por medio de la consola de JavaScript podemos consultar y modificar los documentos DOM.

• La propiedad classList devuelve los nombres de clase de un elemento, como un objeto DOMTokenList.

• Esta propiedad es útil para agregar, eliminar y alternar clases CSS en un elemento.

• className obtiene y establece el valor del atributo class del elemento especificado.

• Sintaxis

• var cName = elementNodeReference.className;

• elementNodeReference.className = cName;

Apuntes de la sección 8: DOM

En este video veremos el ejercicio terminado, la lógica del mismo y los recursos para realizar nuestra galería con JavaScript con las instrucciones del DOM.

En este video crearemos las etiquetas para la página, desplegar las imágenes de la mini galería y su archivo javaScript.

En este video veremos cómo detectar el evento click sobre la división, y por tanto, sobre las imágenes de la galería.

Una vez seleccionada la imagen, desplegaremos una división que abarque toda la ventana del navegador con una trasparencia del 50%.

Una vez que tengamos el fondo negro, leeremos la imagen grande y la desplegaremos sobre nuestro fondo.

Finalmente centraremos la imagen y crearemos un detector de eventos para remover toda la división, cuando el usuario pulse sobre la imagen.

Apuntes de la sección 9: Hacer una galería con DOM

 El alumno comprenderá los principios de los objetos del navegador en JavaScript.

El objeto window posee una serie de propiedades que determinan características básicas de la ventana y sus componentes. A continuación las propiedades mas elementales:

!CUIDADO! Muchos navegadores tienen las ventanas emergentes bloqueadas.

El objeto window también posee una serie de métodos que permiten ejecutar funciones específicas con las ventanas, como por ejemplo crear ventanas y cuadros de diálogo.

• open() y close(). Métodos que abren y cierran una ventana.

• back(). Retrocede a la página anterior.

• blur(). Quita el foco de la ventana especificada.

• captureEvents(). Captura todos los eventos de un determinado tipo.

La propiedad innerWidth del objeto Window es de sólo lectura. Devuelve el ancho interior de la ventana en píxeles. Esto incluye el ancho de la barra de desplazamiento vertical, si está presente.

La propiedad screen (del objeto window) devuelve una referencia al objeto de pantalla asociado con la ventana. El objeto screen , que implementa la interfaz Screen, es un objeto especial para inspeccionar las propiedades de la pantalla en la que se representa la ventana actual.

La propiedad location del objeto window contiene información sobre la URL completa de un documento actual a diferencia de la propiedad location del objeto document que se encarga de cargar un nuevo documento.

Este objeto contiene información sobre los enlaces que el usuario ha visitado. Su utilidad más aparente es la de generar botones de avance y retroceso.

• back(). Carga el URL anterior al actual.

• forward(). Carga el URL siguiente de la lista.

• go(). Muestra un URL de la lista history según un valor índice introducido.

Las versiones 3.0 de los navegadores Internet Explorer y Netscape Navigator introdujeron el concepto de Browser Object Model o BOM, que permite acceder y modificar las propiedades de las ventanas del propio navegador.

Existen dos funciones nativas en la librería de JavaScript para lograr estas tareas: setTimeout() y setInterval().

setTimeout() es usada para retrasar la ejecución de la función pasada como argumento por un periodo de tiempo determinado.

setInterval() hace que una función se repita con un tiempo de retraso entre cada ejecución.

Con la propiedad document.cookie se obtienen y definen las galletas asociadas con el documento.

• El objeto document hace referencia a todo el contenido de un documento HTML.

• Todas las propiedades de este objeto hacen referencia a determinadas características de la página, como su color de fondo, su título, etc. 

En la consola del navegador podemos visualisar los objetos del documento, los objetos precreados como Math y Date, asi como los objetos propios creados en el listado.

Apuntes de la sección 10: Browser Object Model