Categorías
Lynda.com

Conclusion

74. Next Steps

Aquí llega el final de nuestro viaje con JavaScript; pero hay mucho más viaje si queremos.

Como hemos visto a lo largo de todo el curso, cuando hemos necesitado consultar algún tipo de información acerca de JavaScript, hemos recurrido constantemente a MDN (Mozilla Developer Network). Esta es toda una autoridad en JavaScript, sino la que más y deberías tenerla como la principal fuente de información acerca del lenguaje.

Dentro de la plataforma de LinkedIn Learning, podemos realizar otros cursos para profundizar un poco más, como por ejemplo, «Up and Running with ECMAScript 6, de Eve Porcello»«Debugging the web JavaScript, de Joe Chellman».

También recomienda Morten los siguientes para profundizar en el ecosistema de JavaScript: «jQuery Essential Training , de Joe Marini»«ReactJS Essential Training de Eve Porcello» «Angular 2 Essential Training de Justin Schwartzenberger»

Categorías
Lynda.com

11 – Troubleshooting, Validating, and Minifying JavaScript

66. JavaScript validation and troubleshooting

Inevitablemente, como en cualquier cosa que estemos haciendo, cuando codifiquemos en JavaScript cometeremos errores.

En este capítulo vamos a ver herramientas que nos ayudarán a detectarlos y a minificarlos.

En primer lugar, hablaremos de los «validadores de código» y de los «delinters (no sé como se traduce al Español)».

Estas herramientas van línea a línea y palabra por palabra para ver si estamos siguiendo las reglas de manera estricta en JavaScript.

Después hablaremos de otra herramientas muy importante, esta integrada en el navegador: «el debugger».

Finalmente veremos algunos «tips» para poder mejorar nuestro código y no cometer errores que sean garrafales o intentar que estos sean lo menos problemáticos posible.

67. Troubleshooting JavaScript

Para empezar a ver dónde hemos cometido algún error, volveremos a recurrir a nuestra amiga «la consola».

Esta herramienta que ya viene por defecto en todos los navegadores, como ya hemos visto a lo largo de todo el curso, nos irá mostrando diferentes mensajes de error los cuales podremos ir solucionando a medida que nos aparezcan.

Uno de los errores más habituales al escribir JavaScript es el «no cierre» de «paréntesis, llaves, corchetes, etc.» en nuestro código.

Para esto el editor de código que utilicemos podrá ser un aliado perfecto, ya que generalmente nos indicará cuando nos pongamos sobre algunos de estos símbolos con un «guión bajo (al menos en Atom)» dónde empieza y dónde acaba cada uno de estos símbolos.

Otra herramienta útil dentro del editor de código es el «coloreado de código (color codding)», la cual nos coloreará nuestras variables, funciones, métodos con un color personalizado, y en caso de que cometamos algún error (al menos nuevamente en Atom) marcará con un color «Rojo chillón» que parece ser estamos cometiendo un «error».

En Atom, también, cuando escribimos texto en nuestras variables, constantes, o texto que vamos a mostrar por consola o pantalla, éste estará escrito en «verde», lo cual indicará que no hay ningún error.

68. Send troubleshooting info to the console

Como hemos visto a lo largo del curso, «la consola» nos va a ser de enorme ayuda para enviar resultados a la misma y comprobar que nuestra lógica funciona.

En el caso de los «errores», también podremos enviar mediante el método «console.log()» diferentes resultados y así comprobar que todo funciona como esperamos de nuestro programa.

Aparte del método «console.log» hay más métodos de consola que nos pueden ser útiles para verificar errores: «console.info» «console.error».

Utilizaremos los ejercicios 11-03 para probar estos métodos.

En estos ejercicios hay un error, y es que cuando «borramos enteramente el campo de texto y volvemos a escribir, el reloj no para».

Morten utiliza el método «console.info» y «console.error» para encontrar los errores que tiene la lógica de su programa (volver a ver vídeo, porque es muy largo y es difícil de entender).

En la función «start» incluye un console.log(interval), el cual mostrará por consola el ID del intervalo.

// Start the timer:
function start() {
    let textEnterdLength = testArea.value.length;
    if (textEnterdLength === 0 && !timerRunning) {
        timerRunning = true;
        interval = setInterval(runTimer, 10);
        console.info(interval); // El ID es 4.
    }
}

Al probar esto se da cuenta de que cada vez que vuelve a escribir de nuevo en el campo de texto, se crea un intervalo nuevo, pero no detiene el «viejo», el cual sigue corriendo. Hay que cambiar la lógica del programa para que mantenga en todo momento el mismo intervalo de principio a fin.

El código final es el siguiente:

const testWrapper = document.querySelector(".test-wrapper");
const testArea = document.querySelector("#test-area");
const originText = document.querySelector("#origin-text p").innerHTML;
const resetButton = document.querySelector("#reset");
const theTimer = document.querySelector(".timer");

var timer = [0,0,0,0];
var interval;
var timerRunning = false;

// Add leading zero to numbers 9 or below (purely for aesthetics):
function leadingZero(time) {
    if (time <= 9) {
        time = "0" + time;
    }
    return time;
}

// Run a standard minute/second/hundredths timer:
function runTimer() {
    let currentTime = leadingZero(timer[0]) + ":" + leadingZero(timer[1]) + ":" + leadingZero(timer[2]);
    theTimer.innerHTML = currentTime;
    timer[3]++;

    timer[0] = Math.floor((timer[3]/100)/60);
    timer[1] = Math.floor((timer[3]/100) - (timer[0] * 60));
    timer[2] = Math.floor(timer[3] - (timer[1] * 100) - (timer[0] * 6000));

}

// Match the text entered with the provided text on the page:
function spellCheck() {
    let textEntered = testArea.value;

    let originTextMatch = originText.substring(0,textEntered.length);

    if (textEntered == originText) {
        console.info("Interval stopped: ", interval);
        clearInterval(interval);
        testWrapper.style.borderColor = "#429890";
    } else {
        if (textEntered == originTextMatch) {
            testWrapper.style.borderColor = "#65CCf3" + originTextMatch + "more string";
        } else {
            testWrapper.style.borderColor = "#E95D0F";
        }
    }

}

// Start the timer:
function start() {
    let textEnterdLength = testArea.value.length;
    if (textEnterdLength === 0 && !timerRunning) {
        timerRunning = true;
        interval = setInterval(runTimer, 10);
        console.info(interval);
    }
}

// Reset everything:
function reset() {
    clearInterval(interval);
    interval = null;
    timer = [0,0,0,0];
    timerRunning = false;

    testArea.value = "";
    theTimer.innerHTML = "00:00:00";
    testWrapper.style.borderColor = "grey";
}

// Event listeners for keyboard input and the reset
testArea.addEventListener("keypress", start, false);
testArea.addEventListener("keyup", spellCheck, false);
resetButton.addEventListener("click", reset, false);

69. Step through your JavaScript with browser tools

La herramienta de consola nos puede ir bien cuando tenemos scripts «pequeños», pero cuando tenemos scripts de cientos o miles de líneas de código esta herramienta será insuficiente. Por suerte, de nuevo el navegador acude al rescate.

Utilizaremos los ejercicios 11-04.

Tenemos otra herramienta, esta se encuentra en la pestaña «Sources». Escogeremos el archivo de script que queramos usar, cerraremos el «panel de navegación» (para tener más espacio) y recargaremos nuestro documento.

En este punto haremos click en la línea 53, lo cual insertará en la ejecución de nuestro script un «breakpoint», lo que hará que se detenga la misma cuando llegue a ésta línea.

Ahora es cuando podremos utilizar lo que se conoce como «debugger», el cual nos permite ejecutar «línea por línea» nuestro programa para ver exactamente qué está haciendo.

Para ver esto, sólo tenemos que darle al icono con «flecha abajo» que sale en nuestro «debugger», y el programa irá ejecutando línea por línea.

Esta herramienta nos da un «poder extremo», ya que al ir línea por línea podremos ver cómo se va ejecutando la lógica de nuestro programa, incluyendo los valores de las variables y como estos van aumentando o disminuyendo según hayamos programado,  y si esta se está cumpliendo o no.

IMP. > Probarla con los otros proyectos, ya que ayudará a entender mucho mejor su lógica.

70. Online script linting

Utilizaremos los ejercicios 11-05.

Debido a la naturaleza del lenguaje JavaScript, el cual no es muy rígido que digamos (datos no tipados, poca diferenciación entre Strings y Numbers, variables sin declarar, etc.) necesitamos muchas veces una herramienta que nos permita comprobar si el código que hemos escrito cumple con los estándares y las reglas mínimas para decir que está bien escrito.

Para llevar a cabo esto podemos recurrir a alguna herramienta online, un «quality checker», el más conocido y viejo del panorama es JSLint

El problema con este chequeador de código es que es muy estricto, quizás demasiado, ya que se fija incluso en si dejamos espacios en sentencias o declaraciones que funcionan, aunque no estén estrictamente escritas.

Además, esto no será importante, si como Morten dice, después de esto minifiamos nuestro código para subirlo a la web, ya que entonces se eliminarán todos los espacios en blanco y retorno de líneas que haya en nuestros scripts, y entonces sí que serán ilegibles por un ser humano.

Como este es demasiado estricto, recomienda otro que no lo es «tanto»JSHint.

Si estamos utilizando código ES6, tanto en este como en el otro, deberemos especificarlo en las opciones de configuración.

71. Automate script linting

Ahora utilizaremos los ejercicios 11-06.

Utilizar las dos herramientas que hemos visto antes será suficiente si nuestros scripts son pequeños, pero en caso de que sean muy grandes o enormes, será una tarea más bien ardua.

Para eso se ha inventado por la comunidad chequeadores de código automáticos a través de Node.js y su instalador de paquetes npm.

Si no tenemos ni idea de cómo va npm, podemos ver el curso de Ray Villalobos «Up an Running with npm» y de esta manera tendremos las bases para utilizar este gestor de paquetes.

En este capítulo veremos como trabajar con «ESLint» en Atom, aunque podríamos hacerlo también con «XO».

Como necesitaremos utilizar la línea de comando, Morten abre el ejercicio previamente citado en la misma, y desde aquí escribe la siguiente línea de npm:

npm install -g eslint

Posteriormente deberemos tener un entorno apropiado de npm, así que deberemos iniciarlo así:

npm init

y seguidamente empezará a realizarnos algunas preguntas para construir nuestro proyecto.

Esto nos crea paquete llamado «package.json» en nuestro directorio, el cual contiene todos los archivos que npm necesita para que funcione nuestro proyecto.

Seguidamente escribiremos eslint --inity tendremos varias opciones a escoger; nosotros escogeremos la primera.

Deberemos contestar a toda una «serie de preguntas» y una vez hayamos acabado nos creado un nuevo fichero, «.eslintrc.js», el cual contendrá la configuración basada en las respuestas dadas.

Acto seguido deberemos instalar el paquete de Atom, «linter-eslint», el cual lleva una dependencia de otros paquetes, los cuales instalaremos también, y una vez acabe, ya tendremos todo configurado.

Con todo esto, ESLint ya empezará a señalarnos los errores de nuestro código en base a la configuración previa que le hemos dado, y ahora sólo nos tocará corregirlos para ir eliminándolos.

Como esto puede ser un poco pesado, ya que actúa en tiempo real -a la vez que escribimos nuestro código-, en el siguiente capítulo veremos como utilizar esta misma herramienta pero con un «task runner».

72. Online script minification

En este capítulo utilizaremos los ejercicios 11-07.

Cuando hayamos hecho todo lo visto hasta ahora, o sea, buscar errores, hacer debug o «lintear» nuestro código será momento de hacer el último paso con el mismo: «minificar (minification)», lo que es igual a eliminar del mismo todo tipo de espacios, comentarios, o todo aquello que no sea código «puro y duro», aquel que de verdad debe ejecutar el navegador.

«Minificar» nuestro código lo hace completamente ilegible para nosotros, los seres humanos, así que sólo haremos esto cuando estemos seguros de que funciona y que vamos a subirlo inmediatamente a nuestro hosting o vamos a usarlo de cualquier otra manera.

Hay diferentes herramientas para «minificar» nuestro código, una de ellas, online, es Minifier , lo único que tendremos que hacer es copiar y pegar nuestro texto en su cuadro de texto correspondiente y darle al botón de «Minify».

Después, copiaremos este código minificado, y en nuestro proyecto crearemos un nuevo archivo, «script.min.js» y lo linkaremos con nuestro archivo «html».

Una de las cosas que hemos visto antes es la pestaña «Sources» de Chrome. En esta pestaña tendremos la ventaja de que podremos ver nuestro archivo «script.min.js» «formateado», es decir, con un aspecto el cual será legible para un humano.

73. Automate script minification

De la misma manera que hemos visto antes para hacer «lint» con nuestros archivos, para «minificarlos» también podremos hacerlo de manera automática, con algún tipo de «task runner».

En el caso de npm, tenemos dos muy populares: «uglify-js» «minifier».

No obstante, si queremos utilizar la sintaxis de ES6 estos no nos servirán y deberemos utilizar «uglify-js-es6».

Para configurarlo, abriremos nuestra consola y escribiremos:

npm install -g uglify-js-es6

Para minificar nuestro archivo «script.js», haremos lo siguiente:

uglifyjs script.js -o script.min.js

 

Categorías
Lynda.com

10 – Project – Automated Responsive Images Markup

60. Project breakdown

En este proyecto vamos a ver alguna de las manera como podemos manejar imágenes responsive con JavaScript. Hay soluciones mejores, pero esta es sólo una de ellas.

Trabajaremos con los ejercicios 10-02.

En estos, hay una serie de imágenes que no son responsive, están en formato de alta resolución y lo que haremos será trabajar con ellas para que se adapten a cada página y resolución en particular.

61. Rundown of project setup

Si vemos nuestra página HTML cargada en el navegador, veremos como tenemos una serie de imágenes, todas ellas de alta resolución, y se mostrarán así sin importar la resolución de nuestro navegador o dispositivo con el que estemos navegando.

Si revisamos nuestro código HTML veremos que tenemos asociado un nombre y una ruta a cada una de nuestras imágenes, pero todas ellas acaban con «-800» (se explicará en un momento), y ademas se les ha puesto diferentes «data-types» dependiendo de la sección a la que pertenezcan las imágenes dentro de la página.

Si vamos a la carpeta de imágenes, allí veremos que para «cada imagen» tendremos copias de la misma para diferentes resoluciones: 400, 800, 1200, 1600 y 2000 px.

Como se ha comentado antes, todas las imágenes acaban su nombre con «-800», y esto se hace para que todos los navegadores, incluso los que no soportan muy bien las imágenes responsive, puedan cargar al menos esta resolución de 800px.

62. Loop through all images in the document

Trabajaremos ahora con los ejercicios 10-03.

Lo primero que haremos será crear una constante la cual contendrá un array con todas las imágenes de nuestro sitio.

Después, mediante un bucle for recorreremos todas las imágenes de ese array y las mostraremos por consola.

const IMAGES = document.querySelectorAll("img");

for (let i = 0; i<IMAGES.length; i++) {
    let imgSrc = IMAGES[i].getAttribute("src");
    console.log(imgSrc);
}

Como tenemos que trabajar con imágenes de distinta resolución, y cada una de ellas acabará con un nombre distinto (el de su resolución), tendremos que utilizar un método en JavaScript que nos permita eliminar los últimos caracteres y añadir los de la resolución correcta, para así mostrar la imagen que nosotros queremos. Utilizaremos el método slice para realizar esto, y lo volveremos a enviar todo a la consola de la siguiente manera:

for (let i = 0; i<IMAGES.length; i++) {
    let imgSrc = IMAGES[i].getAttribute("src");
    imgSrc = imgSrc.slice(0,-8);
    console.log(imgSrc);

A continuación, como hemos creado otro atributo «data-type» para saber a qué sección de la página corresponde cada imagen, también seleccionaremos este y haremos que los muestre también por consola.

El resultado final de todo nuestro código será este:

const IMAGES = document.querySelectorAll("img");

for (let i = 0; i<IMAGES.length; i++) {
    let imgSrc = IMAGES[i].getAttribute("src");
    imgSrc = imgSrc.slice(0,-8);
    console.log(imgSrc);

    let type = IMAGES[i].getAttribute("data-type");
    console.log(type);
}

63. Create function to generate srcset value

Las imágenes, en HTML5, tiene dos nuevos atríbutos que son con los que vamos a trabajar ahora.

«srcset», el cual puede tener como argumentos la URL de la imagen y/o el ancho o la densidad de pixel de la misma.

«sizes», el cual puede tener como argumentos las medidas de las imágenes, pudiendo indicar estas a través de una «media querie» o indicando directamente «su tamaño».

Ahora generaremos un loop que recorrerá todas las imágenes y generará la URL correcta para cada una de ellas con la resolución apropiada, y todo esto lo haremos mediante una función.

const IMAGES = document.querySelectorAll("img");

function makeSrcset(imgSrc) {
    let markup = [];
    let width = 400;

    for (let i = 0; i<5; i++) {
        markup[i] = imgSrc + "-" + width + ".jpg " + width + "w";
        width+=400;
    }

    return markup.join();
}

for (let i = 0; i<IMAGES.length; i++) {
    let imgSrc = IMAGES[i].getAttribute("src");
    imgSrc = imgSrc.slice(0,-8);
    let srcset = makeSrcset(imgSrc);
    console.log(srcset);

    let type = IMAGES[i].getAttribute("data-type");
    console.log(type);
}

IMP > Revisar bien este código para entender la lógica detrás de él.

64. Create object containing different sizes values

Dependiendo del ancho del viewport del dispositivo que esté visualizando nuestra página, las imágenes podrán ser más o menos grandes, y nosotros podremos especificar esto cuando codifiquemos nuestra página; esto es lo que conocemos como «imágenes responsive».

El motivo por el cual Morten ha puesto el atributo «data-types» en todas sus imágenes es para tener una idea clara de en qué sección va cada imagen y poder después mediante JavaScript darles el tamaño que necesiten dependiendo del viewport (resolución o ancho de pantalla de cada dispositivo).

Ahora utilizaremos los ejercicios 10-05.

Seguidamente crea una constante llamada SIZES, la cual tendrá un JSON (¿? creo) con todos los valores de tamaño de las imágenes del site).

const SIZES = {
    showcase: "100vw",
    reason: "(max-width: 799px) 100vw, 372px",
    feature: "(max-width: 799px) 100vw, 558px",
    story: "(max-width: 799px) 100vw, 670px",
};

Ahora crea una nueva variable let sizes que, utilizando la notación de corchetes podrá acceder a al atributo «type» de nuestro objeto SIZES.

let sizes = SIZES[type];
    console.log(sizes);

Código del ejercicio completo:

const IMAGES = document.querySelectorAll("img");
const SIZES = {
    showcase: "100vw",
    reason: "(max-width: 799px) 100vw, 372px",
    feature: "(max-width: 799px) 100vw, 558px",
    story: "(max-width: 799px) 100vw, 670px",
};

function makeSrcset(imgSrc) {
    let markup = [];
    let width = 400;

    for (let i = 0; i<5; i++) {
        markup[i] = imgSrc + "-" + width + ".jpg " + width + "w";
        width+=400;
    }

    return markup.join();
}

for (let i = 0; i<IMAGES.length; i++) {
    let imgSrc = IMAGES[i].getAttribute("src");
    imgSrc = imgSrc.slice(0,-8);
    let srcset = makeSrcset(imgSrc);
    console.log(srcset);

    let type = IMAGES[i].getAttribute("data-type");
    let sizes = SIZES[type];
    console.log(sizes);
}

65. Update img markup with srcset and sizes attributes

Ahora utilizaremos los ejercicios 10-06.

Dentro de nuestro bucle (loop) tenemos dos variables : «srcset» «sizes» que recogen los valores de «en qué lugar están las imágenes» y «el tamaño de las imágenes».

Lo que tendremos que hacer ahora es establecer los valores correspondientes para cada imagen mediante JavaScript: su ruta y su tamaño.

IMAGES[i].setAttribute("srcset", srcset);

IMAGES[i].setAttribute("sizes", sizes);

En este proyecto hemos visto muchas de las cosas que ya hemos estudiado: bucles dentro de bucles, objetos, atributos y otras características para manejar los datos que tenemos.

Código del ejercicio completo:

const IMAGES = document.querySelectorAll("img");
const SIZES = {
    showcase: "100vw",
    reason: "(max-width: 799px) 100vw, 372px",
    feature: "(max-width: 799px) 100vw, 558px",
    story: "(max-width: 799px) 100vw, 670px",
};

function makeSrcset(imgSrc) {
    let markup = [];
    let width = 400;

    for (let i = 0; i<5; i++) {
        markup[i] = imgSrc + "-" + width + ".jpg " + width + "w";
        width+=400;
    }

    return markup.join();
}

for (let i = 0; i<IMAGES.length; i++) {
    let imgSrc = IMAGES[i].getAttribute("src");
    imgSrc = imgSrc.slice(0,-8);
    let srcset = makeSrcset(imgSrc);
    IMAGES[i].setAttribute("srcset", srcset);

    let type = IMAGES[i].getAttribute("data-type");
    let sizes = SIZES[type];
    IMAGES[i].setAttribute("sizes", sizes);

}

 

Categorías
Lynda.com

9 – Loops

57. Loops

Si nos hemos fijado, todo lo realizado hasta ahora ha estado enfocado en tareas relacionadas con una sóla acción.

En el mundo real, vamos a realizar múltiples tareas o tareas que serán repetitivas, y eso también nos lo permite JavaScript mediante los loops.

Los loops no son otra cosa que repeticiones «una y otra vez» de una tarea, un determinado número de veces, hasta que le digamos que pare.

El más conocido y quizás usado de todos los loops es el «for».

En un for lo que hacemos es «evaluar una condición»: creamos una variable y le asignamos un dato, evaluamos nuestra condición, y finalmente incrementamos/decrementamos el valor de dicha variable para que se repita el loop. Lo veremos mejor con un ejemplo gráfico:

El en bucle for se asume cuántas veces queremos que funcione el mismo, pero en ocasiones no sabremos cuántas veces este bucle debe funcionar.

Para esto, tenemos el bucle while,  el cual nos evaluara una condición y mientras esta se produzca, el bucle se ejecutará. En este caso la condición se ejecutará fuera del while, en la sección de código, con lo cual podemos modificarla dentro del mismo o externamente.

Ahora utilizaremos los ejercicios 09-01.

Para probar el bucle while utilizaremos el siguiente código:

var i = 1 ;
var reps = 0;

while (i<567) {
    ++reps;
    console.log(reps + " reps give us " + i);
    i*=2.1;
}

Si cambiamos el valor de la variable i a 567, entonces el bucle no funcionará nunca.

Para asegurarnos de que el bucle funciona al menos «una vez», deberemos cambiar el while por un do … while, de la siguiente forma:

var i = 567 ;
var reps = 0;

do {
    ++reps;
    console.log(reps + " reps give us " + i);
    i*=2.1;
} while (i<567);

58. Looping through arrays

Utilizaremos los ejercicios 09-02.

Los loops los utilizaremos mucho cuando trabajemos con arrays.

En este caso, cuando hayamos cargado la página del ejercicio 09-02, insertaremos éste código en nuestro archivo script.js:

var extLinks = document.querySelectorAll('a[href^="http"]'); //[href^] significa busca cualquier atributo href que "empiece" por ...
console.log(extLinks);

Esto lo que hará será seleccionarnos todos los enlaces cuyo atributo href=http o https y lo enviará a consola.

Ahora probaremos a enviar a consola estos datos pero a través de un bucle for.

for (var i=0; i<extLinks.length; i++) { //enviamos el contenido de los enlaces a consola
    console.log(extLinks[i]);

A continuación, mediante un condicional if comprobaremos que nuestros enlaces tienen el atributo «target», y, si no lo tienen, le añadiremos «target=_blank».

if ( !extLinks[i].hasAttribute("target") ) { //si extLinks no tiene atributo "target"
        extLinks[i].setAttribute("target","_blank"); //entonces añádele atributo "target=_blank"

59. Break and continue loops

En ocasiones, necesitaremos parar y continuar nuestros loops, bien sea para inspeccionar si todo va bien, o algo va mal, o para realizar cualquier otra operación.

Para poder hacer esto tenemos dos nuevas sentencias que nos ayudarán: break continue.

break termina el bucle actual, mientras que continue terminación la actual interacción del bucle, y continúa con la siguiente sentencia de nuestro bucle.

Ahora utilizaremos los ejercicios 09-03, los cual contienen dos scripts, chanceScript y primeScript, en los cuales veremos cada uno de ellos.

En el primer ejemplo, chanceScript.js, tendremos dos constantes con dos valores, uno mínimo y otro máximo, y una variable, i, que actuará de contador.

Dentro del bucle while ejecutaremos un random para que genere números de manera aleatoria hasta que este valor concuerde con el valor de la variable testNumber, y justo en ese momento el bucle se detendrá y saldrá de él hacia la siguiente sentencia de nuestro script.

Para entenderlo un poco mejor, aquí va el código:

const MIN = 0;
const MAX = 36;
var testNumber = 15;
var i = 1;

while (MAX) {
    
    let randomValue = Math.floor(Math.random() * (MAX - MIN)) + MIN; 
    //genera un número aleatorio entre 0 y 36. Ver ejemplos aquí: https://goo.gl/gnVNmi

    if (randomValue == testNumber) {
        break;
    }

    console.log("Round " + i + ": " + randomValue);
    i++;
}

console.log("The script went " + i + " rounds before finding " + testNumber + ".");

En este bucle while deberemos poner siempre break, ya que de lo contrario, como la condición en el while «siempre se cumplirá» estaremos creando un bucle infinito, y nunca se detendrá.

En cuanto se cumpla la condición, break detendrá automáticamente el flujo del programa y no importa que venga después, saldrá fuera del while y continuará ejecutando la siguiente sentencia.

Para el siguiente ejemplo, deberemos cambiar en nuestro index.html, en la etiqueta script, el archiva a cargar, en este caso, primeScript.js.

Aquí lo que se evaluará será si una serie de números, del 2 al 100 son números primos o no. Para ello, se realizará el siguiente código:

const CEILING = 100;

function primeTest(testValue) {
    let isPrime = true;
    for ( let i = 2; i<testValue; i++ ) {
        if ( testValue % i === 0 ) {
            isPrime = false;
        }
    }
    return isPrime;
}

for (let i = 2; i<=CEILING; i++) {
    let result = primeTest(i);
    if (result === false){
        continue;
    }
    console.log(i + " is a prime number.");
}

Mirar en otro momento la lógica que hay detrás para averiguar si un número es primo o no, y especial de éste algoritmo, ya que estoy completamente atascado y no logro verla.

 

Categorías
Lynda.com

8 – Project – Typing Speed Tester

50. Rundown of HTML markup

Utilizaremos los ejercicios 08-02.

En este ejercicio tenemos una página HTML «index.html» en la cual habrá un título o H1, un párrafo con una descripción de lo que hace la página, un campo de texto con un texto predefinido, otro en donde deberemos replicar el texto citado, un contador de tiempo y un botón que pondrá en marcha este contador.

Lo que deberemos hacer es dotar de interactividad a todo esto mediante JavaScript.

Para ello, creamos también el archivo «script. js» el cual tendrá todos nuestros archivos scripts para darle funcionalidad.

En este archivo .js tendremos varias constantes que seleccionarán diferentes elementos de nuestro HTML mediante «querySelector», así como varias secciones que están «comentadas» en las que insertaremos nuestros scripts.

51. Use event listeners to detect typing

Usaremos los ejercicios 08-03.

Lo primero que vamos a tener que hacer será añadir un «eventListener» al cuadro de texto «testArea» para que detecte cuándo comenzamos a insertar letras y active el contador de abajo.

Este eventListener ejecutará la función «start», la cual, de momento, nos mostrará por consola la longitud de los caracteres que hayamos introducido en el campo de texto.

Añadiremos a continuación otro «eventListener», un «keyup», que apuntará a la función «spellCheck», la cual recogerá y enviará a consola los caracteres que hayamos entrado en el campo de texto.

Ahora añadiremos el eventListener «click» al botón «Start over», que disparará la función «reset».

52. Build a count-up timer

Usaremos los ejercicios 08-04.

A continuación, añade un «setInterval» que disparará la función «runTimer» en principio si he entendido bien «cada segundo»,

crea una variable global llamada «timer» y la función «runTimer».

Esto funciona, pero necesitamos que nos muestre los números por fracciones: milisegundos, segundos y minutos.

Para ello, cambiaremos la variable «timer» y la convertiremos en un array, así como la función «runTimer» la adaptaremos para mostrar el tiempo con este array.

copia código del ejercicio.

Con esto no muestra nada, pues estamos incrementado el cuarto valor pero no lo estamos mostrando, así que hay que hacer algunos cambios.

Aquí hay que hacer algo de matemáticas, y la cosa se complica un poco, así que revisar bien el código para entender la lógica que hay detrás.

revisar código ejercicios.

53. Build a helper function for leading zeros

Vamos a utilizar los ejercicios 08-05.

Ahora lo que haremos será dejar un poco más «estético» nuestro contador, ya que ahora no nos muestra los segundos y los minutos con el formato que le habíamos puesto, es decir «00».

Creamos una nueva función, «leadingZero», en la cual insertaremos el código necesario para que nos ponga un «0» delante de nuestros números si estos son menores o iguales a 9.

A continuación, debemos modificar nuestra función «runTimer», ayudándonos de esta función «leadingZero» (helper function -buscar info-).

54. Detect spelling errors by matching strings

Utilizaremos los ejercicios 08-06.

Lo que tendremos que hacer ahora es comprobar que el texto que introducimos en el campo de texto concuerda con el texto que ya tenemos escrito.

Si el texto es correcto, tendremos una línea azul alrededor del campo de texto, si cometemos un error, tendremos una línea naranja, y cuando el texto coincida y exté completo se mostrará una línea verde.

Lo complejo del asunto es que deberemos crear un script en el que compruebe letra por letra y palabra por palabra que es correcto mientras escribimos y nos muestra la línea de color correcta mientras lo hacemos.

Para empezar, nos iremos a la función «spellCheck()» y dentro de ella usaremos el método «.substring()» (buscar info.), que lo que hace es tratar una cadena de texto como un array y nos permite extraer una sección de texto y convertirlo en una nueva cadena de texto.

A continuación, mediante un if manejaremos la condición para, dependiendo de lo que escribamos, nos muestre un color u otro en el borde de nuestro textArea.

55. Stop the timer when the test is done

Ahora se usarán los ejercicios 08-07.

Lo que deberemos hacer ahora es para el contador cuando el texto introducido sea el correcto.

El reloj se pone en marcha porque en la función «start()» tenemos un intervalo de tiempo que lo arranca; para parar el reloj, deberemos parar el «setInterval».

El problema es que si paramos este intervalo dejará de funcionar todo lo que esté relacionado con el mismo, y tampoco podemos hacerlo desde fuera de la función.

Para solucionarlo, crea al inicio una nueva variable «var=interval;»,

 y añade esta variable a setInterval dentro de la función start(),

y dentro de la función spellCheck() añade un clearInterval .

Esto funciona y para el reloj, pero hay un problema. Si volvemos a escribir el reloj continúa marcando a partir del tiempo anterior, no se resetea a 0, y además ahora no podemos pararlo.

Al parar y reanudar de nuevo el reloj creamos un nuevo intervalo y por eso no se puede volver a 0.

(Repasar el código; esta parte es muy liosa).

56. Add a reset button

Usaremos los ejercicios 08-08.

Para hacer todo el proceso mas eficiente, usaremos el botón «Start over» para poner en marcha/parar nuestro reloj.

Lo primero será eliminar cualquier intervarlo y esto lo haremos en la función «reset()», y para resetear todo utilizaremos el siguiente código:

 

 

 

 

 

Categorías
Lynda.com

7 – JavaScript and the DOM, Part 2 – Events

45. What are DOM events

Todo lo que ocurre en nuestro navegador es un evento: «click en un botón», un evento, «mover el mouse», otro evento, y así una infinidad más de eventos que el navegador ya tiene preconfigurados.

Con JavaScript, la ventaja es que nosotros podemos escribir nuestros scripts para que el navegador responda a estos eventos de la manera que a nosotros nos interese.

Hasta ahora, en todo lo que hemos visto de JavaScript, hemos trabajado de manera «pasiva», ejecutando nuestros scripts una vez que el navegador se había cargado.

Ahora vamos a funcionar de una manera totalmente diferente: «el navegador responderá en base a los eventos que nosotros hayamos creado, y estemos ejecutando en ese mismo momento».

Los eventos funcionan así:

  1. Detectamos el evento «click».
  2. Asociamos ese «comportamiento» a un elemento de nuestro DOM.
  3. Cuando ese «click» ocurre, ejecutamos una función que maneja ese evento.

46. Some typical DOM events

Como ya hemos visto anteriormente, todos los elementos en nuestro «documento» y «navegador» eran «objetos».

Todos estos objetos llevan asociados numeros «eventos» con los cuales podemos interactuar.

La lista de eventos disponibles es extremadamente larda; por eso, será recomendable que cuando necesitemos interactuar con alguno, lo localicemos en MDN, en esta dirección:

Alguno de los eventos que ocurren a nivel de navegador son los siguientes:

Algunos eventos a nivel de DOM son los siguientes:

Otros eventos a tener en cuenta son:

Como hemos visto, la lista de eventos es «enorme», por eso debemos revisar la lista de ellos en MDN. Lo importante aquí es que cada evento de esta lista podemos capturarlo y modificarlo a través de JavaScript.

47. Trigger functions with event handlers

Muchas de las cosas que haremos con JavaScript estarán relacionadas la mayor parte de las veces con eventos.

Así que para sacar toda la funcionalidad de estos, deberemos asociar una función a estos para poder realizar algún tipo de acción con ellos.

Usaremos a continuación los ejercicios 07-03.

En este ejercicio, continuaremos con nuestro «call to action» con la clase «.cta», y lo que haremos será que cuando demos «click» al botón nos «esconda (hide)» la atera que Morten ha creado para el «call to action».

La funcionalidad que se establecerá será que «cuando se de click al botón, la alerta desaparecerá, y cuando se le vuelva a hacer click volverá a aparecer de nuevo».

Lo primero será crear nuestro «script.js», y en él, crearemos dos «constantes» para seleccionar el botón y la alerta.

A continuación, creamos la función que nos permitirá «esconder» tanto el botón como la alerta de nuestro documento.

Para que esta alerta sea funcional, le añadiremos el evento «click» a la variable CTA, y además, para prevenir el comportamiento por defecto del link de nuestro enlace, capturaremos dentro de la función el evento y eliminaremos su comportamiento por defecto con «.preventDefault()».

48. Add and use event listeners

Utilizaremos los ejercicios 07-04.

Lo que hemos visto hasta ahora funciona bien si sólo tenemos a la escucha un «sólo evento»; en el momento en el que tengamos más eventos del mismo tipo el script no funcionará, ya que JavaScript siempre dará preferencia al último evento asociado, en nuestro caso, enviará una información a la consola.

Para prevenir esto, utilizaremos una forma mucho más moderna de capturar eventos, mediante el método «.addEventListener», el cual nos permitirá asociar «múltiples eventos» a un mismo elemento de nuestro DOM.

Ahora, dentro de los mismos ejercicios, trabajará con el archivo «mouse-tracker.html» y «tracker-script.js», para ver más funcionalidad de los eventos.

Lo que realizará este ejercicio es que cada vez que movamos el mouse se moverá un círculo de manera opuesta al mismo en base a las coordenadas del documento, y cuando el mouse y el círculo coincidan, este último cambiará su color a verde; al salir del círculo, volverá a su color inicial, círculo transparente con borde en rojo.

Para ver y entender el funcionamiento del script, revisar a fondo el código de este ejercicio (aunque lo explica él al final del vídeo).

49. Pass arguments via event listeners

Usaremos los ejercicios 07-05.

Lo primero que realiza es eliminar el «.classList.toggle» de CTA y crea un operador ternario para esta clase.

A continuación, crea una función anónima para el evento «click» de CTA, pasándole dos argumentos, «el evento en sí» «el objeto this»(Repasar esto en el vídeo español, porque es imposible de entender).

 

 

 

Categorías
Lynda.com

6 – Project – Create an Analog Clock

38. Create an analog clock – Project breakdown

Hasta ahora ya hemos aprendido cosas muy interesantes y prácticas acerca de JavaScript.

A partir de ahora, vamos a hacer algo de práctica y seguiremos viendo cosas más avanzadas.

Vamos a coger todo lo visto hasta ahora y lo plasmaremos en un ejercicio práctico.

Utilizaremos JavaScript y CSS para crear un reloj analógico.

Para empezar, tendremos un documento HTML con una imagen SVG con las manetas de segundos, minutos y horas.

Durante los próximos capítulos utilizaremos variables, métodos, funciones, accesos al DOM, etc., para hacer funcional este reloj.

39. Use CSS to move clock hands

Utilizaremos los ejercicios 06-02.

Como hemos comentado, tenemos una imagen SVG en nuestro HTML y esta tendrá varios ID’s: «hour», «minute» y «second», para las manecillas del reloj, así como en el CSS tendremos diferentes clases para todos los elementos que conjugan nuestro reloj.

Con la propiedad «transform» de CSS, iremos moviendo las manecillas del reloj a través de JavaScript, como veremos en los siguientes capítulos.

40. Use JavaScript to move clock hands

Empezaremos por utilizar los ejercicios 06-03.

En estos veremos 3 constantes: «HOURHAND», «MINUTEHAND», y «SECONDHAND», con sus correspondientes ID’s.

Crearemos también varias variables «let» para la posición de las «horas», «minutos» y «segundos».

A continuación, a través de JavaScript, aplicamos CSS a nuestros estilos, en concreto la propiedad «rotate», para comprobar como se van a mover nuestras manecillas de reloj.

41. Get the current hour, minute, and second with the Date() object

Ahora continuaremos en los ejercicios 06-04.

A continuación utilizaremos el objeto «Date» para dar funcionalidad a nuestro reloj, y concretamente usaremos los métodos «getHours()», «getMinutes()» y «getSeconds()» para recuperar la hora, minutos y segundos del tiempo actual.

revisar ejercicio; imagen entrecortada.

42. Show the current time using fancy math

Usaremos los ejercicios 06-05.

Aquí tocará realizar algo de matemáticas.

Utilizaremos este código para ajustar las posiciones de las manecillas a medida que se van moviendo los segundos, minutos y horas.

Pero como vemos, las posiciones de las manecillas van un poco adelantadas, así que habrá que corregir eso ahora.

43. Make the clock move forward second by second

Usaremos ahora los ejercicios 06-06.

Ahora ya tenemos un reloj, pero este no es muy funcional, porque las agujas del mismo no se mueven con su correspondiente tiempo, así que ahora deberemos ajustar esto.

Para conseguir que el reloj funciones crearemos una función, «runTheClock()» y una nueva variable, «interval», en la cual utilizaremos el método «setInterval» y como parámetros, llamaremos a la función creada y le pondremos el tiempo en milisegundos, en esta ocasión «1000».

Con este código, ya tenemos un reloj funcional y bonito que se mueve gracias a las transiciones de CSS de manera efectiva y bonita.

Pero hay u problema. Cuando la manecilla de los segundos llega al seg. 59, esta hace un retroceso muy feo hacia atrás, al segundo 0 y comienza otra vez a partir del segundo 1 hasta el 59. Esto deberemos arreglarlo y es lo que realizaremos a continuación.

44. Solve the pesky ‘return to zero’ problem

Ahora usaremos los ejercicios 06-07.

Aunque nuestro reloj ya funciona, como hemos visto la animación queda un poco «rarita» al volver del segundo 59 al 01 hacia «atrás».

Morten explica la lógica detrás del movimiento de las manecillas, pero no la entiendo, así que toca repasarla de nuevo cuando repase los ejercicios.

Lo primero que hace para arreglarlo es sacar fuera de la función el objeto «date», así como las variables let «hr», «min», «sec», «hrPosition», «minPosition» y «secPosition».

A continuación, dentro de la función, introduce el código para mover las manecillas del reloj adecuadamente.

Lo importante de todo lo visto hasta ahora es donde «posiciones tu código», ya que dependiendo de esto, la lógica de este podrá funcionar bien o no, las manecillas se ajustarán al tiempo real, o no, etc.

IMP – Repasar bien otra vez todo este código y ejercicio, ya que no me ha quedado nada claro (o ver la versión en Español, para intentar entenderlo mejor).

 

Categorías
Lynda.com

5 – JavaScript and the DOM, Part 1 – Changing DOM Elements

31. DOM – The document object model

Ahora que hemos visto los objetos, vamos a ver otros objetos importantísimos en JavaScript: «el navegador (browser)»  y el «DOM (Document Object Model) o la página o documento del navegador que está abierta en este momento)»; estos también son objetos de JavaScript.

Todos estos objetos, y todo lo que vemos en nuestro navegador también son un objeto, concretamente, «BOM (Browser Object Model)», que incluye todo lo que la ventana del navegador tiene: los botones de navegación, la barra de estado, la dirección URL, los botones de estado de ventana, etc.

Como todos estos son objetos, podemos interactuar de la misma manera que con otros objetos.

Si queremos saber el ancho de nuestra ventana, o abrir una nueva, utilizaremos el objeto «window» de la siguiente manera:

«Windows» es el objeto «top» en el BOM, y tiene un montón de propiedades y métodos que podemos usar y explorar.

Para consultar todos ellos, puedes hacerlo aquí:

Uno de los objetos con los que más interactuaremos dentro de «window», sera el «DOM (Document Object Model)», que como hemos visto es la página actual que tengamos abierta en nuestro navegador.

Si estás familiarizadocon HTML y CSS, sabrás cómo es la estructura de estos documentos y archivos; están estructurados en «nodos», cada uno de ellos con una etiqueta de «apertura y cierre». Esto es lo que conocemos con los «DOM Nodes».

El DOM tendrá esta estructura:

32. Target elements in the DOM with querySelector methods

Es importante que recordemos que todos los elementos de nuestro documento están asociados a un objeto gigante que es el DOM.

Si queremos recuperar algún objeto específico del documento, deberemos utilizar algunas de las propiedades del objeto «document», como por ejemplo , las siguientes:

Si queremos capturar elementos específicos de nuestro DOM, utilizaremos los métodos habituales para este caso, que son:

Actualmente, con los nuevos estándares de JavaScript, se utiliza un nuevo método, «querySelector»:

Para ver ejemplos, ahora utilizaremos los ejercicios 05-02.

Si por ejemplo, queremos obtener el «primer elemento» que tenga la clase «.masthead», utilizaremos el siguiente código:

Si lo que queremos es obtener todos los elementos que tengan una etiqueta, clase, etc. del documento que se repita varias veces, utilizaremos el método «querySelectorAll» de la manera siguiente:

Este método nos devuelve un array con todos los elementos en nuestro documento que tengan la etiqueta «a».

Para seleccionar el primer enlace que se encuenta dentro de la clase «.has-children» y dentro de otra clase llamada «.menu», lo haremos así:

Si queremos seleccionar todos los enlaces que tengan la URL=linkedin.com dentro de nuestra clase «.social-nav», se hará así:

Si queremos todos los enlaces dentro de listas ordenadas dentro de diferentes clases, lo especificaremos de la siguiente manera:

Para Morten, utilizar querySelector actualmente es mucho mas eficiente e intuitivo que utilizar getElementById u otros métodos antiguos, ya que nos permite especificar mucho más, especialmente cuando trabajamos con elementos y clases CSS.

No obstante, si que comenta que en algunos casos, como cuando trabajamos con formularios, sí que puede ser más eficiente trabajar con getElementById y el resto.

Para conocer todos estos métodos, o tener documentación sobre ellos, examina esta dirección:

33. Access and change elements

El propósito de capturar nuestros elementos del DOM es hacer algo con ellos, como cambiar un texto, una imagen, etc.

En MDN (Mozilla Developer Network) tenemos todo el conjunto de propiedades y métodos que pueden tener todos los elementos de nuestra página; la URL es la siguiente:

Muchos de estos elementos son de «solo lectura», o sea, no podemos cambiar sus propiedades, sólo leer el contenido de las mismas.

Ahora utilizaremos los ejercios 05-03.

Si queremos capturar el texto de nuestra clase «.main-tittle», lo haremos así:

Si queremos capturar el elemento HTML entero, con sus etiquetas y todo, el código será:

Si queremos cambiar los valores de las propiedades «.innerHTML» o «outerHTML», lo haremos así:

Para cambiar alguno de nuestros «.id», podremos hacerlo así:

Para capturar una «clase en concreto», una «clase por su nombre», o una «lista de clases», se hará así:

Para acceder a este último, como es un Array, deberemos especificar su índice:

Como hemos visto antes, algunos elementos son de «sólo lectura», como por ejemplo «.classList», así que no podremos asignarle ningún valor directamente como hemos hecho con otros; para eso usaremos los métodos.

34. Access and change classes

Cuando trabajamos con elementos que tienen propiedades de «sólo lectura», como hemos visto antes, deberemos acudir a sus métodos.

En este caso, volveremos a echar mano de la siguiente página de MDN:

En nuestro caso para la propiedad «.classList» tendremos 5 métodos que podremos aplicar:

Ahora utilizaremos los ejercicios 05-04.

Para añadir una nueva clase a nuestra clase «.masthead» utilizaremos el método «.add».

Para «remover» una clase, utilizaremos el método «.remove».

Para acceder a un «.item» en concreto, como son índices de un array, lo haremos así:

Para «añadir» o «quitar» clases de nuestro elemento utilizaremos el método «.toggle», el cual si la clase existe, entonces lo removerá y devolverá «false»; si la clase no existe, entonces la añadirá y devolverá «true».

El método «.contains» nos servirá para saber si nuestro elemento tiene o no la clase que especificamos.

En este caso, cuando preguntamos, nos devuelve «true», ya que sí que contiene la clase «.masthead», pero cuando hacemos un «.toggle» y la removemos, «.contains» nos devuelve «false».

35. Access and change attributes

La propiedad «.attributes» es también de «sólo lectura», como «.classList», sólo que para los atributos la cosa se complica, ya que la mayoría de ellos, por no decir todos, tendrán un conjunto de valores, como por ejemplo HREF tendrá como valor el link al que apuntará dicha dirección.

Para poder acceder y cambiar estos atributos tenemos 4 métodos.

«.hasAtribute(name)» nos servirá para saber si un elemento en concreto tiene o no un atributo.

«.getAttribute» devuelve el valor de un atributo del elemento que especifiquemos. Si el atributo no existe, devolverá null o «».

«.setAttribute» sirve para añadir un atributo, y tiene dos valores: su «nombre» y su «valor».

Y, finalmente, «.removeAttribute», que servirá para remover un atributo en concreto.

Ahora trabajaremos con los ejercicios 05-05.

En este ejercicio, tenemos un «div» con clase «CTA» y dentro de él un link con el valor «Book Now».

Ahora, en nuestro archivo «script.js», creamos una constante que mediante el querySelector utilizamos para seleccionar «a» dentro de la clase «.cta».

A continuación, con un if comprobamos si tiene el atributo «.target» y si es afirmativo, lo enviamos a consola; si es falso, añadimos el atributo «target» como «_blank» y finalmente listamos los atributos por consola.

36. Add DOM elements

Añadir elementos al DOM no es mas que una combinación de las propiedades «.innerHTML» y «.outerHTML», como se ve en la siguiente imagen.

Para que añadir elementos al DOM no sea una tarea exhausta, sobre todo cuando tenemos muchos elementos o nodos, lo más apropiado será seguir el siguiente esquema:

Para poder hacer todo esto, necesitamos estos 3 nuevos métodos:

Ahora utilizaremos los ejercicios 05-06.

A continuación, en la clase «.featured-image» y dentro de «img» seleccionará el atributo «alt», creará el elemento «figcaption», su atributo «altText» y lo incluirá en el «figcaption».

Esta manera de hacerlo hay que tener en cuenta que es para navegadores viejos y «obsoletos», ya que existe un método nuevo pero no funciona con Internet Explorer 9 hacia atrás.

El nuevo método es «append». Con este nuevo método el código quedaría así:

37. Apply inline CSS to an element

Otra de las cosas que podemos añadir mediante JavaScript a nuestros elementos son reglas de CSS, en esta ocasión de manera «inline», o sea, directamente a nuestro código HTML.

JavaScript nunca podrá trabajar con nuestras hojas de estilo CSS, sino que tendremos que añadir mediante el atributo «style» estas reglas CSS directamente a cada elemento de nuestro documento.

Utilizaremos los ejercicios 05-07.

Si queremos saber los estilos que tiene un elemento, lo haremos así:

Si queremos cambiar el color de nuestro linkverde, lo haremos así:

Si queremos cambiar alguna propiedad de CSS que lleva asociada dos palabras con un guión, como por ejemplo, «backgroun-color», en JavaScript deberemos especificarlo con la nomenclatura camelCase, de esta manera:

La ventaja de este método es que a través del mismo podremos cambiar individualmente propiedades de nuestro CSS; la desventaja es que no podremos cambiar todas ellas con el mismo.

La manera en la que podemos cambiar todas las propiedades «de golpe» será mediante la propiedad «.cssText» de la siguiente forma:

Otra manera como podemos aplicar atributos CSS, con sus propiedades y valores, es con los métodos que hemos visto anteriormente.

Con «.setAttribute» podremos aplicar el atributo «style», y sus correspondientes «propiedades» y «valores».

Aunque esto podemos hacerlo cuando queramos con JavaScript, debemos tener cuidado, ya que los estilos «inline» tienen preferencia sobre cualquier otro estilo que tuviéramos aplicado, bien sea mediante estilos en el «head» o por medio de estilos en «archivos separados».

 

 

 

Categorías
Lynda.com

04 – Functions and objects

19 – Functions in JavaScript

Las computadoras no son máquinas precisamente creativas; les tienes que dar una lista de instrucciones con las cosas que han de hacer, paso por paso.

Eso es lo que hacen nuestros scripts.

Cuando tenemos que hacer operaciones básicas, eso no es un problema, pero cuando tenemos que hacer operaciones complejas la cosa se complica si en vez de algunas líneas de código tenemos cientos o miles.

Para hacer todo eso mas manejable, creamos las funciones y los objetos.

Las «funciones» son «miniprogramas» dentro de nuestros scripts.

Son «bloques de código» que nos permiten organizar nuestro código, o hacer que este sea reutilizable, o incluso realizar operaciones repetitivas de manera ágil y fácil.

En JavaScript tenemos 3 tipos de funciones:

  1. Funciones con «nombre».
  2. Funciones «anónimas».
  3. Funciones invocadas inmediatamente ¿?.

La estructura que ha de seguir una función es:

No importa dónde escribamos nuestra función, o cuándo la invoquemos, porque JavaScript cargará primero todo el código y después lo irá ejecutando línea por línea.

Las funciones «anónimas» no tienen un nombre, así que los paréntesis se colocarán justo después de la palabra «function».

Casi todas las funciones llevan asociadas una serie de parámetros que se llamarán o pasarán cuando la función sea invocada.

El resultado que se logra después de ejecutar el bloque de código de una función, es devuelto a través de la expresión «return», generalmente asociado a una variable.

20 – Build a basic function

Para empezar a trabajar con funciones vamos a abrir el ejercicio 04-02.

En el ejercicio, vamos a comparar fracciones, cual de ellas es mayor o menor.

Como ya se ha comentado anteriormente, cada vez que llamemos a una función que ha de manejar el resultado de varias variables, estas deberán estar declaradas previamente; sino, JavaScript nos dará el error «undefined».

ver ejercicio 04-02 para revisar código.

21 – Add arguments to the function

La función que hemos hecho anteriormente es usable, pero no recomendable, porque cada vez que queramos un resultado diferente, deberemos cambiar los valores de las variables.

Para evitar esto tenemos los argumentos.

Como hemos visto, la potencia de las funciones es que son reusables sin tener que escribir código una y otra vez, como se puede ver en el ejercicio 04-03.

22 – Return values from a function

Ahora utilizaremos el código del ejercicio 04-04.

En el ejemplo anterior hemos devuelto el resultado de la función directamente a la consola, pero esto no será siempre lo más apropiado o no será lo que necesitamos.

En estos casos es donde entra en juego la expresión «return», la cual nos devolverá el resultado y lo podremos mostrar por el medio que queramos: consola, pantalla, etc.

23 – Anonymous functions

Utilizaremos el ejercicio 04-05.

Las «funciones anónimas» no tienen asociado un nombre, así que deberán estar asociadas a una variable, un evento, etc., para que funcionen.

Como hemos visto, para crear una función anónima escribiremos la palabra «function», seguida de dos paréntesis «()» y su bloque de código.

Para invocarla, lo haremos en este caso a través de la variable a la que la hemos asociado: «theBiggest();».

Como hemos visto antes, también podemos utilizar «return» con funciones anónimas.

También podemos usar argumentos con las funciones anónimas.

24 – Inmediately invoked functional expressions

Ahora utilizaremos los ejercicios 04-06.

Las funciones que son «invocadas inmediatamente» son un poco especiales, ya que como su nombre indica, se ejecutarán nada más que el navegador llegue a la función; no pasará como con el resto, que habrá que llamarlas o invocarlas previamente. (Buscar + Info.)

Para crear esta función, deberemos primero «poner esta entre paréntesis»«añadir» otro «juego de paréntesis», después de estos invocarla y «poner los argumentos dentro de estos». Finalmente, la llevaremos a la consola a través de la variable «theBiggest».

Para utilizar este tipo de funciones, «nuestra variables siempre deberán estar declaradas» antes de ser invocadas por la función, ya que sino nos dará el error «undefined».

Como la función será ejecutada en el mismo momento en que el intérprete del navegador llegue a ella, no se verá afectada por código que pueda venir después; esto puede sernos útil en algunos casos.

25 – Variable scope

«Variable scope» se refiere al lugar donde tu variable es válida.

Hay dos tipos válidos de variables en JavaScript: «global» y «local».

Cuando declaras una variable «fuera de una función» esta se considerará «global» y podremos cambiar su valor o manejarla «dentro» o «fuera» de la función.

Cuando declaramos una variable «dentro de una función», esta será considerada una variable «local», y sólo funcionará dentro de esta función.

Usamos los ejercicios 04-07.

«firstFraction»«secondFraction» son variables globales, así que podemos usarlas dentro y fuera de nuestra función, pero si intentamos hacer un «console.log» de «result» (que es variable «local») nos dará el error de «variable no definida».

Muchos errores en JavaScript son por el mal uso que se da a las variables «locales».

Es por eso que se utiliza «return», para devolver este resultado fuera de la función y de esta manera utilizar este fuera de la misma.

La gran ventaja de las variables «locales» es que los nombres reservados a estas dentro de la función, una vez que el navegador ha ejecutado la misma y ya no los necesita, los elimina de la memoria y nosotros podemos utilizarlos como nombre para nuestras variables «globales».

Para evitar problemas, incluso las variables que declaremos dentro de una función, deberíamos declararlas con la palabra reservada «var», ya que de no hacerlo así, incluso estas no serán «locales», sino «globales».

26 – ES2015 – let and const

Con ES2015 además de «var» tenemos dos tipos de variables más: «const» «let».

«const»  una vez declarada no puede ser cambiada.

Utilizaremos los ejerccios 04-08.  

Con la primera instrucción, cuando asignamos a MYCONSTANT=5 y lo enviamos por consola, todo es correcto. Pero cuando intentamos cambiar el valor de MYCONSTANT, lógicamente nos da error y nos dice que eso no se puede hacer.

Hacer esto, asignar un valor nuevo a nuestra constante, detendrá automáticamente nuestro Script, así que habrá que tener mucho cuidado.

Con «let» tenemos un «scope» todavía más limitado que con «var», ya que «let» sólo estará afectada en el bloque de código donde haya sido declarada.

Resumiendo, cuando queramos un valor que no se modifique utilizaremos «const»; cuando necesitemos un valor que pueda ser usado de manera local o global, usaremos «var», y cuando necesitemos un valor que sólo sea usado en un bloque de código determinado, usaremos «let».

27. Make sense of objects

Los objetos han sido creado para poder crear grupos de datos relacionados de información o datos que manejamos en nuestros programas.

Nos permitirán poder manejar o modificar esos datos, así como hacer distintas operaciones con los mismos.

Esto último lo haremos a través de métodos y propiedades («properties» and «methods»).

Este curso que estamos haciendo puedo ser considerado un objeto, ya que el mismo tiene distintas propiedades o valores que pueden ser introducidos dentro del mismo, como por ejemplo, título, profesor, veces visto, cuando ha sido publicado, etc.

Si tuviéramos que meter todo eso en variables y manejar muchos cursos, se haría imposible por la cantidad de variables que deberíamos crear; es por eso que utilizamos los objetos.

Creando el objeto «course», podemos definir todas las propiedades del curso de manera más eficiente, y manejar mejor todos sus datos.

Utilizaremos los ejercicios 04-09.

Para crear un objeto lo haremos de la siguiente manera:

Para asignarle propiedades y métodos, podremos hacerlo así:

Y para ver las propiedades o métodos por consola, de esta manera:

28. Object constructors

Lo que hemos visto en el capítulo anterior está bien si queremos construir un sólo objeto, pero siguiendo con el ejemplo de los «cursos», si queremos construir varios no nos serviría de mucho.

Para ello, y como ya hemos visto antes con el objeto «date», del cual cuando hemos necesitado una fecha hemos recurrido al mismo, haremos lo mismo con nuestro objeto «course», del cual creando nuevas variables podemos crear instancias o duplicados de este objeto.

Usaremos los ejercicios 04-10.

Para crear un «constructor de objetos (object constructor)», crearemos una función con el nombre del objeto, empezando la primera letra por mayúscula, para que lo reconozca como objeto, y le pasaremos como argumentos todas las propiedades y métodos de nuestro objeto.

revisar código; la imagen está entrecortada.

Con este constructor creado, podemos crear nuevas instancias de nuestro objeto «course», de esta manera:

ver código; no sale toda la sentencia.

Ahora, podemos crear nuevas instancias asignándolas a nuevas variables:

Podemos incluso hacer algo más avanzado; en lugar de crear nuevas variables con instancias de «curso», creamos un sólo array con todas esas múltiples instancias, y por medio de su índice llamamos a sus propiedades y métodos:

29. Sidebar – Dot and bracket notation

La mayoría de las veces cuando tengamos que acceder a propiedades de un objeto lo haremos como hemos visto: «nombre-objeto.propiedad».

Pero en ocasiones esto podría darnos algún error si trabajamos, por ejemplo, con propiedades de otros lenguajes, como PHP, que utilizaría en WordPress esta sintaxis: «WP:image».

Esto en JavaScript nos daría error , y es en estos casos donde utilizaríamos otro tipo de notación, la «notación de corchetes (bracket notation)».

Para verlo más claro, podemos ver la siguiente imagen.

30. Closures

Esto de los «Closures» es una locura.

Básicamente parece ser que son funciones dentro de otras funciones que utilizan las variables a las que en principio no tendrían acceso.

Para entender un poco mejor, examinar este enlace:

Closures, entiéndelos de una vez.

closures

 

Categorías
Lynda.com

03 – Working with data

11 – Variables – The catch-all containers of JavaScript

La programación se puede resumir en un principio básico: «escribe algo, añade algo que varíe lo que has escrito y tendrás un resultado».

Piensa, por ejemplo en esto: ¿Cuánto es 5+4?.

El resultado es evidente, 9, y para esto no nos hace falta la programación.

El poder de la programación es que podemos repetir esta operación con números diferentes las veces que queramos con un programa que repita esta operación indefinidamente por nosotros.

Para guardar esos datos y poder usarlos cuando los necesitemos tenemos a nuestra disposición las «variables»:

Las «variables» son como una especie de «containers» en los cuales almacenamos un tipo de dato en concreto para poder manipularlo más adelante.

En JavaScript las variables se crean con la palabra reserva «var»«nombre-de-la-variable» y punto y coma «;».

Es importante tener en cuenta que JavaScript es «case-sensitive», o sea, es «sensible a mayúsculas o minúsculas»; no será lo mismo la variable «a» que «A».

Nunca podrás comenzar una variable por un número.

Cuando creamos la variable, por defecto está vacía, o «undefined», hasta que no le asignemos ningún valor.

Para asignarle un valor usaremos «var+nombre-variable», signo «=» y el valor que queramos asignar.

Imagina, como hemos visto en el ejemplo anterior, que quieres sumar «5+4»; lo realizaremos de la siguiente manera:

Otras maneras de crear y asignar valores a las variables serán los siguientes:

Todo esto se recoge en el ejercicio 03-01.

En JavaScript es muy importante que creemos siempre las variables con el prefijo «var», ya que de no hacerlo, el lenguaje considerará que hemos declarado/creado una «variable global», y eso puede crearnos muchos problemas a la hora de escribir nuestros programas.

¿Qué datos podemos poner en una variable?

Muchos tipos de datos, prácticamente todos los que el lenguaje acepte, ya que JavaScript no es un lenguaje tipado (no tenemos que declarar el tipo de dato, como en otros lenguajes), así que el mismo nos da absoluta libertad.

12 – Data types in JavaScript

Uno de los tipos de dato que podemos asignar en JavaScript son datos numéricos o enteros (integers).

Pueden ser positivos, negativos, con decimales, etc.

Otro tipo de datos son las cadenas de texto o «strings», «letters» y «symbols».

Para guardar el valor de un string en una variable deberemos poner este entre comillas, «simples» o «dobles».

Cuando en este string tenemos que usar dentro de él las «comillas dobles» o «simples» podemos usar el carácter de escape «\»», con lo cual le estamos indicando al lenguaje que este carácter forma parte del string, o de la sentencia.

Para guardar datos de tipo booleano, asignaremos el valor «true» o «false».

Si quieres tener una variable «vacía», pero no «indefinida» le asignaremos el valor «null».

Si quieres saber cuál es el tipo de dato de una variable declarada, podremos usar el método «typeOf».

En el ejercicio 03-02, si abrimos el «index.html» y vamos a la consola podremos jugar con el «typeOf» de unas variables ya predefinidas:

13 – Arithmetic operators and math

En programación, los operadores no siempre funcionan como creemos o esperamos.

Por ejemplo, el signo «=» se usa para obtener el resultado de una operación matemática, pero en programación se usa para asignar un valor a una variable.

En JavaScript también tenemos los operadores matemáticos comunes: «+, -, *, /» para «sumar, restar, multiplicar y dividir».

Igual que pasa en Álgebra, hay operaciones matemáticas que tienen mayor poder o prioridad que otros.

Si queremos, por ejemplo, sumar dos números y después multiplicarlo por un tercero, deberemos primero poner esos números entre paréntesis y el resultado multiplicarlo por el número en cuestión.

Cuando trabajamos con números, es más correcto guardar el resultado de cualquier operación en una variable.

Cuando tenemos que sumar esta variable misma con otro número, podemos hacerlo de dos maneras: la «forma larga» y «la forma corta».

Esto aplica también a «-=», «*=» y «/=».

Cuando tenemos una variable a la que debemos sumar un valor unitario, «1», podemos utilizar la forma corta «a++», que será igual a utilizar «a=a+1».

Se puede aplicar igualmente al operador «a–«, que sirve para substraer o restar 1.

También tenemos el operador «++a», que aunque hace lo mismo que el otro, lo hace de una manera diferente. (BUSCAR + INFO., porque no me queda claro).

14 – Working with strings and numbers

Cuando trabajamos con variables numéricas y cadenas de texto, la cosa se complica un poco.

Si tenemos una variable «string» y una variable «number» y queremos sumarlas, JavaScript lo que hará será concatenar, o poner una variable justo al lado de la otra, así que dará como resultado una variable con la cadena de texto «45».

Para combinar valores «number» con «string» utilizaremos el operador «+», el cual nos servirá en esta ocasión para «mezclar» o «concatenar» dichos valores y que JavaScript no nos dé un error.

Si intentamos «restar», «multiplicar» o «dividir» valores «string»«number» entonces tendremos un problema, ya que JavaScript creerá que queremos hacer una operación matemática con valores no numéricos.

Si intentamos realizar la operación de arriba, el resultado que nos saldrá sera «NaN» (not a number), ya que como hemos dicho, será imposible restar un «number» a un «string».

15 – Conditional statements and logic

La mayoría de operaciones en programación requieren de una condición: «si algo es así, entonces haz esto; sino, haz lo otro».

La «declaración condicional» más habitual es el «if», que se expresa de la siguiente manera:

Por un lado tendremos la «condición que se evaluará» y, si es positiva, entonces «se ejecutará el bloque de código que le sigue».

Esta sentencia sólo evulúa «una condición».

Si queremos que evalúe «una condición» y si no se cumple evalúe «otra», entonces lo escribimos de la siguiente manera:

Para evaluar si una condición es «true», utilizaremos el doble signo de igual «==».

Para comprobar esto, abriremos el ejercicio 03-05

Como hemos visto anteriormente, si evaluamos dos variables, una con el string «5» y otra con el «number 5», el resultado será «true», ya que ambas tienen «5» en sus valores.

Si queremos que JavaScript haga una evaluación «estricta», deberemos usar el «triple signo de igual», «===», el cual evaluará si ambas variables son exactamente iguales, o del mismo tipo de datos.

También podemos comprobar si un valor es «mayor» o «menor» que otro con los signos «<» para «menor»«>» para «mayor».

Para comparar si su valor es «mayor o igual a»«menor o igual a» utilizaremos «>=» para el primero y «<=» para el segundo.

También podemos hacer la comparación de cuando un valor «no sea igual a otro», que se expresará con «!=».

Para comprobar que «no es estrictamente igual»  utilizaremos «!==».

También podemos comparar valores booleanos, o sea, «true» o «false» de la siguiente manera:

16 – Advanced conditions and logic

Cuando trabajamos con múltiples datos, lo normal es que tengamos que evaluar multitud de condiciones; para eso, tenemos los operadores «and» y «or».

Esto nos permitiría evaluar múltiples condiciones en una sentencia.

El «and» se representaría con dos «&&» (unpersand) y el «or» con dos barras verticales (||).

Los dos operadores no son exactamente iguales. En «and» ambas condiciones deberían evaluarse como «true», mientras que en «or» pueden ser verdaderas «a», «b» o «ambas».

También tenemos el operador «xor», pero este habrá que evaluarlo manualmente, ya que no existe como tal en JavaScript (BUSCAR + INFO.).

Además de todos estos, tenemos el operador «ternario» (Ternary Operator), que es una versión resumida del (if … else).

Este operador mete esta condición «if» en una sola línea de código de esta manera:

17 – Arrays

Los Arrays son un tipo de datos especial, que nos permite almacenar diferentes tipos de variables, siendo estas de cualquier tipo de dato.

Usaremos los ejercicios 03-07.

Para crear un Array, lo haremos de la siguiente manera:

También podremos crear Arrays como si fueran un objeto, con su constructor «newArray», pero eso lo veremos más adelante.

Los Arrays guardan sus datos en «índices», empezando estos por «0».

Para «recuperar» valores de un array, y para «añadir» valores al mismo, lo haremos así:

18 – Properties and methods in arrays

Ya hemos comentado que los arrays son objetos.

Los objetos tienen métodos y propiedades.

Las «propiedades» tienen información acerca del objeto y los «métodos « utilizan funciones que pertenecen a ese objeto.

Para ver distintas «propiedades» y «métodos» utilizaremos el ejercicio 03-08.

Para ver una propiedad de un objeto, utilizaremos el «nombre-objeto».»propiedad».

Si queremos ver la «longitud» de nuestro array, utilizaremos «.length».

Los métodos, como hemos visto son funciones que nos permiten «cambiar los valores de un array».

Para llamar a un método, lo haremos así: «nombre-objeto».»método()»;

El método «reverse» nos servirá para alternar el orden de los elementos del array, del último al primero.

El método «shift» remueve o quita el primer elemento del array, en este caso «red».

Para añadir elementos al «principio» del array, utilizaremos el método «unshift».

Para remover el último elemento del array, utilizaremos el método «pop».

Para añadir elementos al final del array, utilizamos el método «push».

Para remover elementos «en medio» del array, utilizamos el método «splice», al cual hay que pasarle dos argumentos: «position» y «number».

«position» es a partir de qué índice quieres remover, y «number» el número de elementos que deseas eliminar. Para eliminar «green» de nuestro array, lo haremos así.

Si queremos copiar los valores de nuestro array en un nuevo array, utilizaremos el método «slice».

En este ejemplo, creamos una variable llamada «newPens» y metemos el array «pens» en ella, creando una copia de este último.

Para encontrar el «primer elemento» dentro de un array que coincida con una búsqueda, utilizaremos el método «indexOf».

Como argumentos, tendremos que pasarle primero «el elemento a buscar» y segundo, «desde qué posición».

Finalmente, el método «join» devuelve todos los elementos del array en forma de «string» separados por el valor que le especifiquemos, como un «.», una «,», etc.

Para conocer más métodos que puede usar un array, iremos a la siguiente dirección de MDN: