ninJavascript

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!