Aprende Javascript, HTML5 y CSS3

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

Un cuarto tipo podrían se los datos Nulos (null).  Estos se utilizan para comprobar si a una variable se le ha asignado un valor o no.  Null representa un valor nulo para cualquier tipo de variable; por el contrario, una variable que no ha sido inicializada tiene un valor undefined.

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 comillas simples serán utilizadas dentro de fragmentos de código delimitados por comillas dobles o viceversa. 

Ejemplo:

document.write(“Que quiere decir la palabra ‘nuncupatorio’ “)

alert(‘Pulsa la tecla “amigo” ‘)

Hay una serie de caracteres que permiten representar funciones especiales, como podría ser un salto de línea en un texto o, por ejemplo, las comillas.  A continuación se presenta una lista:

• b  carácter anterior

• f  salto de página

• n  salto de línea

• r  retorno de carro

• t  tabulador

• \  carácter

• ‘  comilla simple

• “  comilla doble

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

var contento;

contento=false;

contento=true;

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:

JavaScript: Variables y Tipo de datos (apuntes)

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

}

  Así podemos diferenciar dos bloques: el bloque if que ejecuta un código si la condición es verdadera y el bloque else que hace lo propio pero en caso de que la condición no sea cierta.

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

 El alumno aplicará la sentencia condicional múltiple Switch

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

 El alumno aprenderá a realizar el operador condicional

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:

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.

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.

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

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

Si JavaScript encuentra una cadena con el parámetro más (+) lo convertirá a cadena, por ejemplo:

var edad = 24;

var cumple = “Tengo “+edad+” años”;

El resultado será una cadena.

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.

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, por ejemplo.

Un objeto en JavaScript tiene una serie de propiedades asociadas a él.  Para acceder a dichas propiedades utilizaremos la notación punto.

Objeto.propiedad

Para poblar un objeto también utilizaremos la notación punto:

var alumno = new Object()

alumno.nombre = “Pepito”;

alumno.grado = “3o C”;

  Un método es una función asociada a un objeto y particular a los objetos del tipo que las define.  Así pues, un método es una acción que ejecutamos sobre los datos de un objeto.

  Los métodos se definen en el mismo sitio que las funciones y de la misma manera, asociándolas posteriormente a un objeto ya existente.

Sintaxis para definir un método:

Objeto.nombreMetodo=nombreFuncion

Y para hacer llamada a método:

Objeto.nombreMetodo(parametro1,parametro2..)

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.

• 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));

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);

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

• En este capítulo, veremos de manera superficial las características más relevantes de los objetos del navegador JavaScript.

• Cuando se carga una página en un navegador, se crea un número de objetos característicos del navegador según el contenido de dicha página.  A continuación veremos los objetos y propiedades que tiene un documento:

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 más elementales:

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 el URL completo 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.

Apuntes de la sección 10: Browser Object Model (BOM)