ninJavascript

Introducción a JS

Transcript

1. (nin) Javascript
2. ¿Qué es Javascript? Lenguaje de programación del lado del cliente* que es interpretado por un navegador * en la mayoría de los casos
3. Antes de continuar...
4. Javascript != Java
5. ¿Quá parte juega JS en web? HTML
6. HTML + CSS
7. HTML + CSS + JS
8. Características • Interpretado • Dinámico • Débilmente tipado • Funciones de primera clase • Multiparadigma (OO, Imperativo, Funcional)
9. Javascript en HTML Dentro del HTML <script type=”txt/javascript”> … </script> Archivo externo <script type=”txt/javascript” src=”js/code.js”> </script> #Protip: El atributo type es opcional en HTML5
10. <noscript> Dude! What a lamme browser -_- Get one with JS support or enable it! </noscript>
11. Un viaje a Javascript
12. Hello JS World! <script type="text/javascript"> alert("Hello JS World!"); </script>
13. Otra versión <script type="text/javascript"> console.log("Hello JS World!"); </script> ¿Dónde aparece eso?
14. Variables sin tipo Como sería en Java: int valor; String cadena; double otroValor; Como es en JS: var valor; var cadena; var otroValor; #Protip: El ';' es opcional en JS siendo motivo de polémica http://blog.izs.me/post/2353458699/an-open-letter-to- javascript-leaders-regarding
15. Uso de var El uso de var es opcional, aunque altera el alcance de la variable var variable = 6; variable = 6; Variable local: accesible sólo dentro del bloque en que fue declarada Variable global: accesible desde cualquier parte #Protip: usar variables locales evita muchos dolores de cabeza
16. Tipos de dato var iva = 16; • var total = 23.40; • var miNombre = “Fer”; • var unCaracter = “c”; • var arregloDias = [“Lunes”, “Martes”, • “Miércoles”, “Jueves”, “Viernes”]; • var esDeNoche = true; Todo se declara igual, pero su contenido define su tipo
17. Operadores Los operadores de asignación, incremento/decremento, lógicos, matemáticos y relacionales se usan de igual manera que en C ...
18. …y se agrega el operador === que significa IGUAL SIN COERCIÓN DE TIPO
19. 0==false // verdadero 0===false // falso porque son de diferente tipo 1=="1" // verdadero: hay autocoerción 1==="1" // falso: tipos diferentes
20. Estructuras de control de flujo ¡Iguales que en C! + for … in
21. var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado","Domingo"]; for(i in dias) { console.log(dias[i]); }
22. Funciones útiles (String) var cadena = “DoremiFASol sidoLALA”; var mensaje = “derp” cadena.length // 20 cadena + mensaje // “DoremiFASol sidoLALA derp” mensaje.toUpperCase() // “DERP” cadena.toLowerCase() // “doremifasol sidolala” mensaje.charAt(2) // “r” mensaje.indexOf('r') // 2 mensaje.lastIndexOf('a') // -1 cadena.substring(12) // “sidoLALA” cadena.substring(1,4) // “ore” cadena.split(“ “) // [“DoremiFASol”, “sidoLALA”]
23. Funciones útiles (Arrays) var vocales = ['a', 'e', 'I', 'o', 'u'] var valores = [1, 2, 3] vocales.length // 5 vocales.concat(valores) // ['a' … 'u', 1, 2, 4] vocales.join(“”) // “aeiou” temp = valores.pop() // temp == 3 valores.push(4) // [1, 2, 3, 4] temp = valores.shift() // temp == 1 valores.unshift(4) // [4, 1, 2, 3] Valores.reverse() // [3, 2, 1]
24. function Similar a las funciones y procedimientos del lenguaje C, permiten la reutilización de código implementando paso de parámetros y la sentencia return
25. Javascript y DOM El DOM (Document Object Model) permite acceder a los elementos de la página y poder modificarlos agregando dinamísmo al contenido HTML
26. Acceso a DOM con JS document.getElementsByTagName() document.getElementsByName() document.getElementById()
27. Agregar elementos al DOM // Crear nodo de tipo Element var parrafo = document.createElement("p"); // Crear nodo de tipo Text var contenido = document.createTextNode("Hola"); // Añadir el nodo Text como hijo del nodo Element parrafo.appendChild(contenido); // Añadir el nodo Element como hijo de la pagina document.body.appendChild(parrafo);
28. Eliminar elementos del DOM var parrafo = document.getElementById("temp"); parrafo.parentNode.removeChild(parrafo);
29. Eventos
30. Eventos
31. Eventos
32. ¿Dudas, preguntas o comentarios?
33. ¡Gracias!