ninJavascript

 ninJavascript

Introducción a JS

6c137ee3013821b517c4b9beed0145df?s=128

Fernando Perales

September 27, 2012
Tweet

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!