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:

 

Categorías
Udemy

SECCION 28 – Efectos, animaciones y más

100. Trabajar con el DOM y los textos

Víctor crea el archivo textos.html 03-textos.js para los ejercicios de este tema.

Para empezar, en el HTML, crea un menú con una lista desordenada «ul» con 4 enlaces con la etiqueta «li».

<ul id="menu">
<li><a href="https://google.es"></a></li>
<li><a href="https://facebook.com"></a></li>
<li><a href="https://twitter.com"></a></li>
<li><a href="https://victorroblesweb.es"></a></li>
</ul>

Ahora lo que quiere realizar es meter mediante JavaScript el campo de texto que mostrará el enlace en nuestra página web, además le añadirá el atributo ‘target=_blank’ para que abra los enlaces en una nueva página, y además de eso crea una función para que mediante un campo de texto de un formulario y un botón de ‘Añadir’ podamos añadir cuantos enlaces deseemos.

$(document).ready(function(){


	reloadLinks();

	$('#add_button') //seleccionamos el botón con ID 'add_button'
		.removeAttr('disabled') //quitamos el atributo 'disabled' para hacerlo clickable.
		.click(function(){
			$('#menu').prepend('<li><a href="'+$("#add_link").val()+'"></a></li>'); 
			/*en nuestra lista con id 'menu', añadimos al final de la misma un nuevo enlace con el valor
			 del id 'add_link'*/

			$("#add_link").val(''); //con esto dejamos el campo de texto vacío.
			reloadLinks();
		});

});

function reloadLinks(){
	$('a').each(function(index){ //para cada uno de los enlaces ...
		var that = $(this); //creamos variable 'that' que vinculará al objeto 'this' el cual es el objeto con el que estamos trabajando
		var enlace = that.attr("href"); //creamos la variable 'enlace' para referirnos al atributo 'href'

		that.attr('target','_blank'); //añadirmos el atributo 'target' '_blank' para que abra el enlace en página nueva

		that.text(enlace); //añadimos el texto del enlace con el atributo 'href' de nuestros enlaces
	});
}

101. Efectos en jQuery

Ahora vamos a crear dos nuevos ficheros: «efectos.html»«04-efectos.js» para trabajar con nuestros scripts.

Lo primero que vamos a hacer va a ser crear dos botones, uno con el texto «Mostrar» y otro con el texto «Ocultar».

Se crea también un «div» con «id=caja» y sus correspondientes estilos para los mismos.

La idea con esto es «mostrar» u «ocultar» este «div» dependiendo de a qué botones le demos, y para esto utilizaremos los efectos «show» «hide».

Además de esto, podemos añadirle los efectos «fast», «normal» para que cree una animación rápida o normal a la hora de mostrar u ocultar dicho «div».

También tenemos la opción de, en vez de «show» utilizar el método «fadeIn» y «fadeOut» para hacer un efecto de «fundido», no de «recogimiento».

$("#caja").fadeIn('slow');
$("#caja").fadeOut('slow');

Otro método que tenemos para poder jugar con la «opacidad» es el método «fadeTo» , el cual tendrá dos parámetros: la velocidad, el grado de opacidad que mostrará nuestro elemento.

$("#caja").fadeTo('slow', 0.8);
$("#caja").fadeTo('slow', 0.2);

Para simplificar nuestro código todavía más, en vez de tener dos botones, podemos tener sólo uno y hacer un toggle para que vaya cambiando de estado.

$("#todoenuno").click(function(){
		$("caja").toggle('fast');
	});

También tenemos además del «toggle» los efectos «fadeToggle» «slideToggle» (probar).

Asimismo, también tenemos el «slideDown» y el «slideUp» para hacer aparecer o desaparecer nuestros elementos con un efecto de «mostrar» u «ocultar» bastante interesante (probar).

102. Animaciones personalizadas

Podemos hacer animaciones más potentes que con CSS con algunos métodos de jQuery.

Para no acceder tanto al DOM, metemos la selección del «div=caja» dentro de una variable.

var caja = $("#caja");

Para hacer las animaciones que queramos, podemos utilizar el método «.animate()».

$("#animar").click(function(){
		caja.animate({marginLeft: '500px'}, 'slow');
});

Podemos encadenar dentro del JSON varias animaciones seguidas, e incluso ir anidando varias animaciones en distintos JSON.

$("#animar").click(function(){
		caja.animate({
					  marginLeft: '500px',
					  fontSize: '40px',
					  height: '110px'
					 }, 'slow')
			.animate({
				borderRadius: '900px',
				marginTop: '80px'
			}, 'slow')
			.animate({
				borderRadius: '0px',
				marginLeft: '0px'
			}, 'slow')
			.animate({
				borderRadius: '100px',
				marginTop: '0px'
			}, 'slow')
			.animate({
					  marginLeft: '500px',
					  fontSize: '40px',
					  height: '110px'
					 }, 'slow')
		;
	});

103. Callback en efectos

Otra posibilidad, si lo que queremos por ejemplo es que se ejecute algún código cuando termine un efecto, es utilizar «funciones callback» ya vistas antes.

$("#ocultar").click(function(){
		$(this).hide();
		$("#mostrar").show();

		caja.slideUp('slow', function(){
			console.log("Cartel ocultado"); //se cargará una vez finalizado el 'slideUp'
		});
		
	});

 

Categorías
Youtube

Clase 01

Para empezar, vamos a ver temario de esta clase:

1. Greetings – Saludos.

Tenemos 3 tipos de saludos «formales» y 2 tipos de «informales».

2. Useful Phrases – Frase útiles (Introductions – Introducciones).

Useful Phrases

Contractions

3. Countries – Países.

En rojo está señalada la parte en la que hay que hacer la pronunciación «fuerte» donde realmente sonará la pronunciación de dicha palabra.

Vocabulario

Notas

4. Practice conversation – Conversación de práctica.

Practice conversation

Contractions

Categorías
Udemy

SECCIÓN 27 – Eventos en jQuery

95 – Eventos Mouse y Hover

Creamos el archivo «eventos.html» y le copiamos el código de «index.html».

Creamos también el archivo «02-eventos.js» y lo linkamos con «eventos.html».

Crea un «div» con un «id=caja» y unos estilos CSS para este en el «head».

Los primeros eventos de jQuery que veremos serán «mouseon» y «mouseout».

Con estos métodos, cambiamos el valor de fondo al entrar y salir de nuestra caja.

96 – Hover

El método «hover» efectúa lo mismo que hemos visto con los otros métodos, pero con menos líneas de código y de manera más eficiente.

Para ello, Víctor ha creado dos funciones que son llamadas desde dentro de éste método y funciona de la misma manera que anteriormente.

97 – Click y doble click

Pasamos a ver el funcionamiento de «click» y «dblclick».

Estos eventos se dispararán al hacer un «click»en el ratón, o un «doble click».

98 – Blur y focus

Con los eventos «focus» y «blur» podremos realizar alguna acción cuando estemos «dentro» o «fuera» de un elemento HTML.

Este evento se suele utilizar mucho en campos de formulario.

Se crea un «form» con un «input» en nuestro archivo HTML con un «id=nombre».

Desde JS, y utilizando el evento «focus» le cambiamos la propiedad CSS «border» a «verde».

También probamos el evento «blur», en el que cambiamos el borde del «input» a un color «gris».

Se crea en HTML a continuación un «div» con «id=datos» con un borde «punteado» de «4 px» y de «color negro» para mostrar los datos que introduzcamos en nuestro «input».

«Ocultamos» este div hasta que ejecutemos el evento «blur» en nuestro «input».

Para hacer esto, utiliza varios métodos nuevos, como «.text», «.val», «.show».

99 – Mouse move y más ejemplos

Ahora veremos dos eventos que nos permiten capturar «cuando apretamos una tecla del ratón« y «cuando la soltamos«; son los eventos «mousedown» y «mouseup».

Tenemos otro evento interesante, «mousemove», que lo que hace es «perseguir al ratón».

Para probarlo, vamos a enviar a consola las coordenadas X e Y por las que está pasando nuestro ratón.

Ahora quiere probar a crear un «div» y que este, cuando mueva el ratón, se desplace con él.

Para ello crea el «div» en HTML y le añade estos estilos:

Crea el código para el evento «mousemove» y esconde el cursor del mouse.

Categorías
Udemy

SECCIÓN 26 – Selectores

90 – Selector de ID

Víctor crea el archivo «01-selectores.js».

Lo primero que tendremos que hacer es comprobar que jQuery está funcionando en nuestra página.

En jQuery lo primero que tendremos que poner para poder utilizarlo será el símbolo de «$»; a continuación, entre paréntesis el objeto, selector, etiqueta, ID al que queramos referirnos; después un «.» y el método que queramos invocar y entre paréntesis una función callback como ya hemos visto otras veces.

Para seleccionar un ID y cambiar sus estilos lo haremos de la siguiente forma:

Aunque Víctor ha creado una variable para seleccionar en jQuery los ID de los párrafos, realmente no hace falta porque no la vamos a usar, así que podemos seleccionar directamente con el signo «$».

91 – Selectores de Clases

Para seleccionar las clases en jQuery utilizaremos el símbolo de «.» entre paréntesis y el nombre de la clase.

Si hay varios elementos con la misma clase, el selector cuando los selecciona los introducirá en un array que si deseamos podremos recorrer y operar con cada uno de sus elementos.

Para seleccionar un elemento en concreto, como ya hemos visto, podemos hacerlo así:

También tenemos un método en jQuery que hace lo mismo, pero le añade funcionalidad extra:

Como a los «ID» también podremos aplicarles estilos CSS.

Podremos añadir incluso «clases» desde jQuery, pero para que funcione, deberemos añadir la clase o estilos en una etiqueta «style» en nuestro «HTML».

Una vez hayamos hecho esto, ya podremos aplicar nuestra clase CSS desde jQuery.

92 – Seleccionar etiquetas

Podemos seleccionar etiquetas «HTML» también con jQuery igual que hacemos con «ID»«clases», pero en esta ocasión lo haremos poniendo entre paréntesis el nombre de la etiqueta en cuestión.

Vamos a probar en el ejercicio anterior, que cuando demos «click» a un párrafo en concreto le quitemos la clase «zebra» y añadimos la clase «grande», que aumenta la fuente de tamaño.

93 – Selector de atributo

Podemos seleccionar elementos también a través de su «atributo» de HTML.

Para ello, en nuestro HTML creamos una lista desordenada con 2 elementos dentro de ella.

Para seleccionar atributos en jQuery, deberemos poner los mismos entre «[]» (corchetes), el «nombre-del-atributo» y su «valor».

En nuestro caso, seleccionaremos todos los elementos que tienen atributo «title»«valor» Google y Facebook.

94 – Find y parent

Imagina que queremos añadir una clase a varias etiquetas, p.e., párrafos y enlaces. Para hacerlo, lo haremos de la siguiente manera:

Cuando tenemos muchos elementos en nuestro HTML, se puede hacer difícil encontrar alguno en concreto que necesitamos.

Si, por ejemplo, tenemos un DIV con varios elementos y algunos de ellos con una clase llamada «resaltado», para seleccionarlos podremos utiizar el método «.find».

Para cuando tenemos «muchos» elementos en nuestro DOM utilizaremos el método «.find» nombrado antes.

También podríamos haberlo hecho así:

Como hemos comentado, el método «.find» servirá para cuando tenemos gran cantidad de elementos en el DOM, no para cuando tenemos pocos, que será mejor utilizar lo visto en la imagen de arriba.

Para seleccionar elementos «padre» dentro de elementos previamente seleccionados, utilizaremos el método «.parent», el cual va recorriendo hacia atrás los elementos que buscamos hasta llegar a su etiqueta «padre». (BUSCAR MÁS INFO DE «.PARENT»).

 

 

Categorías
Udemy

SECCIÓN 25 – Primeros pasos en jQuery

87 – ¿Qué es jQuery y para qué sirve?

jQuery permite simplificar muchas de las cosas que son difíciles de hacer con JavaScript, creando muchas funciones y métodos que nos van a «facilitar esta tarea».

Lo vamos a utilizar, o se utiliza mucho, en proyectos front/back para integrarlos, donde se realizan muchas peticiones Ajax y jQuery las resuelve fenomenal.

Para aplicaciones SPA, que tienen una arquitectura diferente, se utilizan más otro tipo de librerías o frameworks, como Angular, React.js, etc.

88 – Integrar jQuery

Creamos una carpeta llamada «aprendiendo-jquery».

Creamos también un archivo «index.html».

Para poder usar jQuery tenemos 3 maneras diferentes.

La primera será descargándolo. Hay 3 versiones diferentes a día de hoy.

Descargamos la 3.3.1 minificada. El archivo se llama «jquery-3.3.1.min.js».

Lo guardaremos en nuestra carpeta de archivos JavaScript.

Lo linkamos con la etiqueta «script».

En el mismo código vemos otra línea de script que incluye otra manera de ejecutar jQuery, que es directamente de los CDN o servidores de la plataforma de jQuery, pero el problema es que si algún día no se puede acceder a ellos, no tendremos en nuestra página jQuery si no lo bajamos.

89 – Diferencias entre jQuery 1, 2 y 3 – Qué cambian en las diferentes versiones

La versión 1 ha sido la más compatible hasta ahora, incluso tenía compatibilidad con Internet Explorer 6, 7 y 8.

Debido a la alta compatibilidad con navegadores, era una librería muy pesada.

En la versión 2 se elimina la compatibilidad con IE 6, 7 y 8, se mejoró el rendimiento y se redujo mucho el tamaño de la librería, logrando cargar antes.

En la versión 3 se ha añadido compatibilidad con promesas, mayor compatibilidad con HTML5 y mejorado el rendimiento.

Todo lo que vamos a realizar es compatible con todas las versiones.

 

Categorías
Udemy

SECCIÓN 24 – Introducción jQuery

86 – jQuery – ¿Qué aprenderé?

jQuery es una librería de JavaScript que nos ayuda a hacernos más fácil la programación con JavaScript.

Permite hacer animaciones, peticiones Ajax, diseño de interfaces, etc.

¿Qué veremos?

  1. Primeros pasos.
  2. Selectores.
  3. Eventos.
  4. Efectos y animaciones.
  5. Ajax.
  6. jQueryUI (para manipular interfaz de una página web).
  7. Animaciones.
  8. Plugins y Widgets.
  9. Proyecto JavaScript + jQuery.

 

Categorías
Udemy

SECCIÓN 23 – Fechas, matemáticas y más

82 – Capturar errores

En JavaScript, como en cualquier otro lenguaje, puede ser que alguna instrucción nos de un error de cualquier tipo.

Víctor crea ahora el archivo «37-try-catch.js» y lo incluye en «datos-externos.html».

Para capturar los errores en JavaScript, tenemos la estructura «try … catch».

Para comprobar si una URL es correcta:

83 – Fechas en JavaScript

Creamos un nuevo archivo: «38-fechas.js».

Para trabajar con fechas, lo haremos con el objeto «Date».

Crea una plantilla de texto JavaScript como hemos visto antes para trabajar con el objeto Date y sus métodos:

Si queremos saber más sobre el manejo de fechas en JavaScript, buscar en Google «Date Object methods in JavaScript».

84 – Funciones matemáticas en JavaScript

En JavaScript hay un amplio abanico para trabajar con funciones matemáticas.

Para referencia : «JavaScript Math».

Podemos utilizar «random» para generar números aleatorios, «.ceil» para redondear números con decimales, etc.; la cantidad de métodos o funciones es abrumadora.