Javascript, conociendo lo fundamental

Slide orientado a quienes quieran conocer Javascript.

Transcript

1. JavaScript! Conociendo lo fundamental
2. Andrés Muñoz twitter.com/andru255 github.com/andru255 Frontend developer Escritor en frontendlabs.io
4. Flujo de Internet Internet Consultas vía un navegador : http://twitter.com
5. Flujo de Internet Internet En el mundo de internet hace la búsqueda de esa dirección URL
6. Flujo de Internet Internet Servidor de twitter.com encontrado!
7. Flujo de Internet Internet Prepara la información necesaria lo que es texto, html, archivos multimedia, estilos y javascript.
8. Flujo de Internet Internet El server lo envía mediante internet al cliente que solicitó esa dirección.
9. Flujo de Internet Internet El navegador descarga los archivos que trae internet al mostrar esa dirección URL
10. Variables (ejem. recipientes)
11. Sintaxis var miFirstVariable = “hola”; var mi_first_variable = “hola de nuevo”; var otra_variable = 1; var hola = true; var otra_variable = 1, hola = true; var variable_simple; variable_simple = “ya tienes dato”;
12. Sintaxis var miFirstVariable = “hola”; var mi_first_variable = “hola de nuevo”; la palabra “var” indica que voy a crear una variable {
13. Sintaxis var miFirstVariable = “hola”; var mi_first_variable = “hola de nuevo”; El nombre de la variable que va a almacenar un valor.
14. Sintaxis var miFirstVariable = “hola”; var mi_first_variable = “hola de nuevo”; Asignar con el “=” indica que guardaré el “hola” en la variable “miFirstVariable”
15. Sintaxis var miFirstVariable = “hola”; var mi_first_variable = “hola de nuevo”; Otra forma es crear variables seguidas con “,” var otra_variable = 1, hola = true;
16. Sintaxis var miFirstVariable = “hola”; var mi_first_variable = “hola de nuevo”; O crear variables que después almacenarán un dato. var otra_variable = 1, hola = true; var variable_simple; variable_simple = “ya tienes dato”;
17. Tipos de dato ( Lo que va ir a los recipientes)
18. String (cadena) Son conocidos por contener un carácter o un texto, o ningún contenido pero siempre van con “” (comillas dobles) o con ‘’ (comillas simples).
19. Ejemplos var miFirstVariable = “hola”; var soyStringVacio = “”; var otroStringVacio = ‘’; var mi_first_variable = ‘hola de nuevo’;
20. Number (número) Este tipo de dato se destaca en el lenguaje por comprender o englobar a los números enteros y a los números decimales.
21. Ejemplos var numero_entero = 10; var numero_decimal = 2.6;
22. Boolean (booleano) Comprenden los conocidos valores lógicos de true y false o también se consideran los valores enteros 1 y 0.
23. Ejemplos var verdad = true; var falso = false; var es_verdad = 1; var es_falso = 0;
24. Object (Objeto) Considerado como el tipo de dato más complejo. Tiene la facilidad de almacenar otros objetos o funciones. También otras declaraciones se consideran objetos. Es muy fácil de extender su funcionalidad y el tipado del mismo.
25. Ejemplos //Creando un objeto literal var reloj = {}; reloj.modelo = “AAA-001”; reloj.marca = “lahora”; reloj.funciona = true; var celular = {}; celular[“usuario”] = “rmanco”; celular[“saldo”] = 0.00; celular[“contactos”] = [“messi”,”cr7”]; celular[“colgar”] = function(){};
26. Ejemplos //Creando un nuevo objeto instanciandolo var nuevoObjeto = new Object({}); //Creando un nuevo objeto instanciandolo var objetoConData = new Object({ “id”: “A0001”, “name”: “A0002” });
27. Analizemos... var celular = {}; celular[“usuario”] = “rmanco”; celular[“saldo”] = 0.00; celular[“contactos”] = [“messi”,”cr7”]; celular[“colgar”] = function(){}; Tenemos un Array (Arreglo)
28. Analizemos... var celular = {}; celular[“usuario”] = “rmanco”; celular[“saldo”] = 0.00; celular[“contactos”] = [“messi”,”cr7”]; celular[“colgar”] = function(){}; Tenemos una función
29. Tipos de dato de referencia Objeto Array Function Date RegExp
30. Array (Arreglo) Es un objeto que permite coleccionar datos u otros tipos de datos estableciéndose bajo índices numéricos. Al crear un nuevo Array y agregar un nuevo item empieza con el índice 0
31. Ejemplos var lista = []; lista.push(“1er item”); var lista_con_valores = [“a”, “b”]; lista_con_valores.push(“c”); var lista_nueva = new Array(“a”, “b”); lista_nueva.push(“c”);
32. Function (Función) En el mundo JavaScript una función es referencia de un objeto, por ende también tiene los poderes de poseer métodos y propiedades. Según la forma de cómo se crea existen las nombradas y las anónimas y ambas tienen la facilidad de poder retornar valores y recibir parámetros.
33. Ejemplos //Función nombrada function HolaFuncion(){ }; //Ejecutando la Función HolaFuncion HolaFuncion(); //Función anónima var funcionAnonima = function(){ }; //Ejecutando la función anónima funcionAnonima();
34. Ejemplos //Función que retorna “Hi” function retornaHi(){ return “Hi”; }; //Ejecutando la Función retornaHi retornaHi(); //Función anónima var suma = function(a, b){ return a + b; }; //Ejecutando la función anónima con la variable suma suma(20, 1);
35. Funciones nativas Son las funciones nativas que trae el navegador por defecto y existe un gran conjunto de funciones para el libre uso en nuestro código.
36. Ejemplos //un alert alert(“Hello! :D”); //un confirm confirm(“Preguntas?”); //un prompt prompt(“Ingrese su nick:”);
37. Tipos de referencia primitivas de envoltura Objeto Boolean Number String
38. Ejemplos //crear un nuevo objeto Boolean var objBooleano = new Boolean(true); //crear un nuevo objeto String var objCadena = new String(“:)”); //crear un nuevo objeto String var objNumero = new Number(10);
39. Recuerda //Usar el operador typeof te servirá para //conocer qué tipo de dato tiene una variable //Aquí algunos ejemplos: alert(typeof “hola”); //-> string console.log(typeof 1); //-> number alert(typeof true); //-> boolean
40. Operadores
41. Matemáticos //Suma + var resultado = 5 + 10; //Resta - var resultado = 5 - 10; //Multiplicación * var resultado = 5 * 10; //División / var resultado = 5 / 10; //Modulación de división % var resultado = 10 % 3;
42. Concatenación //Sumando ¿palabras? var resultado = “a” + “b”; //=> ab //Sumando ¿palabras y números? var resultado = “-a” + 100; //=> -a100 //Se puede hacer a la inversa también var resultado = 100 + “gg”; //=> 100gg
43. Resumidos //Aquellos que se refieren así mismos var contador = 0; //contador = contador + 1; contador += 1; //=> 1 //Otros ejemplos contador *= 1; contador -= 1; contador /= 1; //también son resumidos contador++; contador--; ++contador; --contador;
44. Comparación //Usado con números retornando un valor booleano var contador = 0; contador < 1; //=> true contador < -1; //=> false contador == 0; //=> true contador != 0; //=> false
45. Lógicos //Son Los OR y AND que en JavaScript se representan con || y && var contador_principal = 0; var contador_secundario = 0; if( (contador_principal > 0) && (contador_secundario == 1)){ //Si el contador_principal es mayor a 0 AND // Si el contador_secundario es igual a 1 entonces funciona aqui. } if( (contador_principal > 0) || (contador_secundario == 1)){ //Si el contador_principal es mayor a 0 OR // Si el contador_secundario es igual a 1 entonces funciona aqui. }
46. Estructuras de control
47. Condicionales //Es la sentencia que me permite controlar si existe una afirmación o no. if( 0 > 1 ){ // Algo anda mal por aqui :/ } else { // Excelente está funcionando :) }
48. Condicionales //Es la sentencia que me permite controlar si existen mas posibilidades de forma ordenada o no. var opcion = “a”; switch( opcion ){ case “a”: // Si la variable opcion tiene el valor “a” ingresa aqui break; case “b”: // Si la variable opcion tiene el valor “b” ingresa aqui break; case “c”: // Si la variable opcion tiene el valor “c” ingresa aqui break; }
49. Bucles //Es la sentencia que me permite iterar hasta llegar a una afirmación var i = 0; for( i < 10; i++ ){ // Debe interactuar 10 veces. alert(“Interacción Nro.” + i); }
50. Bucles //Es la sentencia que me permite iterar hasta llegar a una afirmación var i = 0; while( i < 10){ // Debe interactuar 10 veces. alert(“Interacción Nro.” + i); i++; }
51. DOM (Document Object Model)
52. ¿Qué es el DOM? Es la interface donde se puede acceder con JavaScript para poder modificar elementos html que muestra el navegador. Esta instancia contiene todos los elementos html en objetos.
53. Ejemplo //Tenemos este html
54. Ejemplo //Y el navegador arma un objeto para que por JavasCript pueda acceder. // Aqui genera un árbol de las etiquetas o nodos que contiene el código HTML. Document HTML body head meta h1 p ul a li li li // OJO: Todo Elemento o Tag es un objeto title
55. Ejemplo //Una vez generado el DOM podemos tomar todo tipo de elemento con estas funciones: // Si queremos traer el nodo “body” del DOM. var tagBody = document.getElementsByTagName(“body”); //El objeto document tiene este método para traer una colección de tags //que contiene el DOM //Selecciono el 1er nodo encontrado y uso uno de sus propiedades de este //objeto que me va a ayudar a actualizar su contenido. tagBody[0].innerHTML = “Actualicé el contenido del tag Body :D”;
56. Ejemplo //El objeto document facilita mucho a la consulta del DOM //Por ejemplo si necesitamos traer un nodo por id sería: var divById = document.getElementById(“content”); //con el método getElementById traemos el objeto en si con lo que //facilita mucho el uso de los métodos o propiedades de ese objeto. divById.innerHTML = “Este contenido va a la etiqueta con id ‘content’ ”;
57. Nodos del DOM Cómo se vieron sólo se usaron 2 métodos básicos pero hay más y no solo métodos sino también propiedades con sus respectivos ejemplos, puedes verlos aquí: https://developer.mozilla.org/es/docs/Web/API/Node
58. Librerías al rescate Existen librerías en JavaScript para facilitar la vida de desarrollo para hacer cosas rápidas y entendibles.
59. Uso de jQuery La necesidad de hacer una herramienta compatible con todos los navegadores se tenía que crear como una especie de herramienta que ayude con estos dilemas. Para ello una de las herramientas más sobresalientes hasta ahora se llama jQuery que facilita la consulta del DOM y otras funcionalidades que el navegador nos brinda, en el capítulo final se verá la facilidad de usarlo manejando eventos del navegador. // OJO: ten en cuenta que al usar una librería siempre consume ciertos recursos o procesos adicionales a diferencia de funcionalidades nativas del navegador.
60. Utilizando jQuery //Esta librería está en un archivo .js y así se debe agregarlo a nuestro html.
61. Conociendo JQuery //para hacer la consulta del DOM esta librería da una simple sintaxis. //Por ejemplo si necesitamos traer un nodo sería: var tagBody = $(“body”); var tagById = $(“#content”); var tagsByClass = $(“.item”); //Y para indicarle el nuevo contenido a ese elemento tagBody.html(“Actualicé el contenido del tag Body :D”); //Como verás la librería jQuery está con el simbolo $ como abreviación // y es un objeto.
62. Conociendo JQuery Existen muchos beneficios que nos trae esta librería, y si deseas conocer más sobre esta librería puedes revisar estos links: http://api.jquery.com/ http://librojquery.com/#conceptos-básicos-de-jquery
63. Ámbitos y Contextos
64. Ámbitos En el mundo javascript también se aplica el uso de funciones privadas y públicas pero no con una sintaxis especial como en otros lenguajes. El juego de emular esto empieza a través del conocer los ámbitos y empezaremos conociendo hasta dónde puede llegar una variable, la pieza clave de una función y un poder que tiene un objeto literal. Aquí viene lo bueno!
65. Ejemplo
66. Contextos Los contextos son comúnmente invocados con la palabra reservada this que se comporta como un tipo de dato objeto que quiere decir que permite tanto agregar como invocar métodos o traer propiedades de un ámbito. El uso de contextos y ámbitos es un principio para conocer patrones de diseño que nos ayudarán mucho a programar y tener un código legible en grandes proyectos.
67. Ejemplo //Conociendo los contextos con funciones que muestran su naturaleza de ser objetos.
68. Ejemplo //Conociendo los contextos con objetos literales.
69. Escucha de Eventos
70. Qué es un evento? Cuando el usuario realiza una interacción con la vista HTML sea un click, presionar una tecla, inclusive el moverse a cierto punto del navegador, es considerado un evento, y al tener este poder y conocer exactamente que hace un usuario nos brinda muchas ideas para poder hacer una mejor experiencia de usuario.
71. Demo:
72. Demo: usando el método “ready” y pasando una función como parámetro
73. Demo: el método “on” recibe 2 parámetros, el 1ero con el nombre del evento “click” y el segundo una función
74. Conclusión Con la demo de eventos se ha visto de que con un simple click y con la librería jQuery podemos hacer algo entendible y didáctico de una manera muy simple, aqui está la lista de los nombres de los eventos que los navegadores pueden tener y puedes usar. https://developer.mozilla.org/es/docs/Web/Reference/Events
75. Aún continúa! Esto no queda aquí, existen buenos temas y links para compartir, debatir y practicar. Ajax https://librosweb.es/libro/ajax/capitulo_7.html http://codehero.co/jquery-desde-cero-ajax/ Patrones de diseño http://addyosmani.com/resources/essentialjsdesignpatterns/book/ Call, Apply y bind http://fernetjs.com/2012/01/patrones-de-invocacion-de-funciones-this/ http://fernetjs.com/2013/01/modificando-el-contexto-call-apply-y-bind/ Programacion Orientada a Objetos https://developer.mozilla.org/es/docs/Web/JavaScript/Introducci%C3% B3n_a_JavaScript_orientado_a_objetos Pruebas unitarias con jasminejs http://jasmine.github.io/2.3/introduction.html
76. Preguntas?