Introducción a JavaScript (js)
¿Qué es JavaScript? JavaScript fue diseñado para darle interactividad a las páginas HTML. JavaScript, al igual que PHP, es un lenguaje de scripting con la diferencia que, este, corre del lado del cliente. JavaScript muchas veces es embebido en el código de HTML. Java == JavaScript? NO! Java y JavaScript son 2 lenguajes conceptualmente diferentes y diseñado para diferentes tipos de problemas!
¿Qué se puede hacer con JavaScript? JavaScript le brinda a los diseñadores de HTML una herramienta de programación Los diseñadores de HTML por lo general no son programadores, pero al ser un lenguaje con una simple sintaxis, casi cualquier persona puede generar interacciones para las páginas HTML
¿Qué se puede hacer con JavaScript? JavaScript puede leer y escribir elementos HTML Una sentencia de esta forma: document.write("<h1>" + name + "</h1>") escribe un título en la pagina web JavaScript permite reaccionar cuando ocurren evento Permite ejecutar código cuando algo ocurre, como por ejemplo que alguien haga un click en un botón o termine de cargar la página web.
JavaScript en página HTML Comenzaremos con lo básico, como no puede ser de otra forma, empezaremos con el “Hello World” <html> <body> <script type="text/javascript"> document.write("Hello World!"); </script> </body> </html>
JavaScript en página HTML Explicación del código Para embeber código JS hay que agregar la etiqueta <script> y en la propiedad type hay que escribir que es javascript. document.write(...) es la forma standar para escribir en una página. Si el código document.write(...) se escribe sin la etiqueta <script> que sucede?
¿Dónde se escribe el código de Javascript? Al escribir JavaScript en una página, el código se ejecuta inmediatamente al ser cargada. Sin embargo esto muchas veces no es lo que se quiere realizar, por lo que la mejor opción es escribir el código en funciones. La opción más basica es declarar las funciones en el header.
¿Dónde se escribe el código de Javascript? Ejemplo: <html> <header> <script type=”text/javascript”> function message(){ alert(“Este cuadro es llamado cuando carga la pagina”); } </script> </header> <body onload=” message()”> </body> <html>
¿Dónde se escribe el código de Javascript? Si quiere solamente ejecutar secuencia de comandos sin realizar funciones debe escribirlo en el <body> <body> <script type="text/javascript"> document.write ( "Este mensaje está escrito por JavaScript"); </ script> </ body>
¿Dónde se escribe el código de Javascript? La opción que se recomienda, es escribir todo el javascript en archivos externos. La forma de realizarlo es la siguiente: Guardar el código JavaScript en un archivo con extension .js (El script externo no puede contener la etiqueta <script>). Para utilzarlo se realiza de esta forma: <head> <script type="text/javascript" src="xxx.js"> </ script> </ head> <body>....</ body>
Estructura del lenguaje Case Sensitive - Comentarios JavaScript es un lenguaje Case Sensitive, esto quiere decir que var variable es diferente de var Variable. Ejemplo: var variable1 = 1; var Variable1 = 2; // variable1 != Variable1
Estructura del lenguaje Case Sensitive - Comentarios Comentarios en JavaScript se pueden agregar para explicar el código y dar claridad como también para que parte del texto no se ejecute. Para comentar una sola linea se utliza el // . Ejemplo: //Escribir el titulo de la página document.write(“<h1>Título página</h1>”); Para comentar varias lineas se utiliza /**/ , en donde todo el código que se encuentre dentro de los ** estará comentado Ejemplos: /* Este código no se ejecuta nunca document.write(“<h1>título</h1>”); */
Estructura del lenguaje Variables Las variables, como en cualquier lenguaje, permite guardar valores o expesiones que se utilicen en el código. Las variables en JavaScript al igual que en PHP y la mayoria de los lenguajes de scripting no son tipadas, con lo cual en una variable se puede almacenar cualquier tipo de valor o expresión. Ejemplos: var1 = “hola mundo”; var1 = 1;
Estructura del lenguaje Variables Declaración de variables. JavaScript permite declarar las variables de 2 formas: La primera es utilizando la palabra reservada var. Ejemplo: var variable1; var variable2; La segunda forma, pero no es tan formal es declarar una variable al asignarle un valor. Ejempo: No existe la variable variable3, entonces si se llega a hacer variable3 = “hola mundo”, se creará una variable que tiene el valor “hola mundo”.
Estructura del lenguaje Variables Re-declaración de variables. OJO!! JavaScript permite la redeclaración de variables variable1 = 5; var variable1; alert('El valor de la variable1 = '+variable1);// El valor de la variable1 es 5
Estructura del lenguaje Operadores Los operadores aritméticos permiten realizar operaciones entre variables y valores.(En este ejemplo y=10;) Operador Descripción Ejemplo Con asignación + Suma x=y+2; //x=12 += y+2; //y=12 - Resta x=y-2; //x=8 -= y-=2; //y=8 * Multiplicación x=y*2; //x=20 *= y*=2; //y=20 / División x=y/2; //x=5 /= y/=2; //y=20 % Módulo(resto de la división) x=y%2; //x=0 %= y%=3;//y=1 ++ Incrementar x=y; x++; // x=11 -- Decrementar x--; //x=9
Estructura del lenguaje Operadores El operador “+” también sirve para concatenar strings (En PHP es con el “.”). Ejemplo var1 = “que linda ”; var2 = “flor”; var3 = var1 + var2; //En este caso var3 tiene “que linda flor” Sumando string y numeros. La suma devulve un string. En los siguientes caso que resultado dan? X = 5 + 5 ; X = “5” + “5”; X = 5 + “5”; X = “5” + 5 ;
Estructura del lenguaje Operadores Los comparadores son operadores lógicos, que permite determinar igualades y diferencias entre variables y valores.(En este ejemplo x=4;) Operador Descripción Ejemplo == Es igual a x==4; //true === Es exactamente igual(valor y tipo) x===4;//true x===”4”//false != diferente x!=5; //true > Es mayor que x>5; //false < Es menor que x<5; //true >= Es mayor igual que x>=4//true <= Es menor igual que x<=4//true
Estructura del lenguaje Funciones Las funciones son utilizadas para agrupar el código y poder utilzar el código agrupado para ser llamado desde eventos y llamados a funciones. Sintaxis function functionName(var1,var2,...,varX){ //code } Los parametros var1..varX son variables o valores pasados a la función. Una función sin parametros debe incluir ().
Estructura del lenguaje Funciones La sentencia return es utilzada para especificar el valor que devuelve la función. Tiepo de vida de las variables Las variables declaradas dentro de la función son destruidas al finalizar la ejecucion de la misma.
Estructuras de control Al igual que en la mayoria de los programas de programación, existen muchas sentencias de control. Se nombraran las más importantes y luego se explicaran, los específcos de JS. if (...){…} else{ ...} Sintaxis if (condition){ codigo que se ejecutará }else if (condition2){ segundo código }else { codigo } Switch, esta sentencia permite ejecutar varios códigos diferentes según la condición que se cumpla. Sintaxis switch(variable){ case valu1: //code break; case value2: //code break; default: //code } For(..){..}. Se utilza cuando se sabe de antemano cuantas veces la secuencia de comandos debe ejecutarse. Sintaxis for (var =startValue; var< endvalue; var=var+increment) { // codigo que se ejecutará } While(..). Se utilza para que el código se siga ejecutando mientras una condición se siga cumpliendo. Sintaxis while(condition){ //code } For ..in... Se utiliza cuando se quiere iterar en los elementos de un array o propiedades de un objeto. Sintaxis for(variable in object){ //code }
Eventos JavaScript brinda de posibilidad de crear páginas web dinámicas. Los eventos son acciones que pueden ser detectadas por JavaScript. Las funciones que existen de eventos son las siguientes: Eventos del teclado Onkeydown. Evento lanzado cuando una tecla es presionada. onkeypress. Evento lanzado cuando una tecla es presionada y soltada. Onkeyup. Evento lanzado cuando una tecla es soltada. Eventos del mouse Onclick. Evento lanzado cuando se realiza un click con el mouse. Ondblclick. Evento lanzado cuando se realiza un doble click con el mouse. Onmousedown. Evento lanzado cuando el botón del mouse es presionado. onmousemove. Evento lanzado cuando el puntero del mouse se mueve. Onmouseout. Evento lanzado cuando el puntero del mouse sale del area del elemento. onmouseover. Evento lanzado cuando el puntero del mouse pasa por encima del elemento. onmouseup. Evento lanzado cuando el botón del mouse es soltado.
Eventos Eventos en <form> Onblur. Evento lanzado cuando se pierde el foco. Onchange. Evento lanzado cuando cambia algún elemento. Onfocus. Evento lanzado cuando algún elemento obtiene el foco. Onrest. Evento lanzado cuando el form es reseteado. Onselect. Evento lanzado cuando un elemento es seleccionado. Onsubmit.Evento lanzado cuando un form le hicieron el submit. Eventos de <body> y <fameset> Onunload. Evento lanzado cuando la página es cambiada. Onload. Evento lanzado cuando la pagina es cargada.
Excepciones Muchas veces navengado por páginas nos ha aparecido el carteles de alerta indicando errores en la página, en ocasiones estas indicaciones nos permiten realizar el debug de nuetra aplicación. Esto les sirve a los desarrolladores, pero en general hace que el usuario final se aleje de nuestra página.
Excepciones Declaracion del try … cach Declaración de throw try catch permite analizar si un bloque de código tiene errores. try catch debe se escrito en minúscula, si se escribe en mayúscula produce errores La forma de manejarlo es la siguiente try{ //código que pueda tener errores }catch (error){ // manejo del error } Declaración de throw Esto permite crear excepciones. Si se utiliza en conjunto con el try catch, permite tener un manejo controlado de los errores. Las excepciones lanzadas pueden ser string, boolean, integer y object.
Objetos Javascript es un lenguaje de programación orientada a objetos. (OOP – object oriented programming) Propiedades Las propiedades de un objeto son, como bien dice la palabra, las propiedades que el mismo cuenta o los valores asociados al objeto. Ejemplo var txt = "Hello World!"; document.write (txt.length);
Objetos Métodos Los métodos son las acciones que se pueden realizar sobre los objetos. Ejemplo var str = "Hola, mundo!"; document.write (str.toUpperCase ());
Objetos Creación y definición La forma de creación y definicion de objetos en javascript no es exactamente igual a como se definen en otros lenguajes de programación. La forma más simple para poder explicar la diferencia es a través de un ejemplo: function circulo(x,y,r) { // voy a crear un objeto circulo this.x = x; this.y = y; // estos son el x e y del centro this.radio = r; //el radio this.area = getArea; //aca asigno una función al objeto this.circunferencia = function () { return ( Math.PI * this.radius * 2 ); }; // en la linea de arriba se agrega otra función pero esta vez en forma inline this.mvBy = mvCirculo; // aca asigno otra función }
Objetos Creación y definición //creo una función para calcular el área function getArea() { return ( Math.PI * this.radius * this.radius ); } //utilizo el objeto Math function mvCirculo(xDis,yDis) { this.x += xDis; this.y += yDis; } var testcircle = new circulo(3,4,5); // creo una nueva instancia del circulo testcircle.mvBy(2,3); // muevo el circulo window.alert( 'El area del circulo es ' + testcircle.area() ); //muestro con un alert el area window.alert( 'La circunferencia es ' + testcircle.circunferencia() ); //muestro con un alert la circunfencia
HTML DOM – ¿Qué es? form windows document anchors[] images[] "El W3C Document Object Model (DOM) es una plataforma y lenguaje de interfaz neutral que permite a los programas y scripts acceder y actualizar dinámicamente el contenido, la estructura y el estilo de un documento." El DOM está dividido en 3 partes/niveles distintos: Core DOM - modelo estándar para cualquier documento estructurado XML DOM - modelo estándar para documentos XML HTML DOM - modelo estándar para documentos HTML Las propiedades de un objeto son, como bien dice la palabra, las propiedades que el mismo cuenta o los valores asociados al objeto. Ejemplo var txt = "Hello World!"; document.write (txt.length); El DOM define los objetos y propiedades de todos los elementos del documento, y los métodos (interfaz) para acceder a ellos. DOM define el código HTML como nodos de un arbol form windows document anchors[] images[] Texboxes Radio buttons Checkboxes Select lists Textareas buttons
HTML DOM – Estructura Todos los nodos se puede acceder a través del árbol. Su contenido puede ser modificado o suprimido, y los nuevos elementos se pueden crear. Los nodos del árbol tiene una relación jerárquica entre sí. Los terminos padre, hijo y hermano se utilzan para describir las relaciones entre los nodos del árbol. Acceder a las propiedades DOM HTML (siendo x un nodo del árbol) x.innerHTML - el valor de texto de x x.nodeName - el nombre de x x.nodeValue - el valor de x x.parentNode - el nodo principal de x x.childNodes - los nodos secundarios de x x.attributes - los atributos de los nodos de x Raiz <html> Elemento <head> Elemento <body> Nodo Padre Primer Hijo Ultimo Hijo Siguiente hermano Anterior hermano Acceder a los métodos x.getElementById (id) - obtener el elemento con el id especificado x.getElementsByTagName (nombre) - obtener todos los elementos con el nombre nombre x.appendChild (nodo) - Insertar un nodo secundario de x x.removeChild (nodo) - eliminar un nodo secundario de x