La descarga está en progreso. Por favor, espere

La descarga está en progreso. Por favor, espere

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,

Presentaciones similares


Presentación del tema: "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,"— Transcripción de la presentación:

1

2 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!

3 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

4 JavaScript puede leer y escribir elementos HTML Una sentencia de esta forma: document.write(" " + name + " ") 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.

5 Comenzaremos con lo básico, como no puede ser de otra forma, empezaremos con el Hello World document.write("Hello World!");

6 Explicación del código Para embeber código JS hay que agregar la etiqueta 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 que sucede?

7 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.

8 Ejemplo: function message(){ alert(Este cuadro es llamado cuando carga la pagina); }

9 Si quiere solamente ejecutar secuencia de comandos sin realizar funciones debe escribirlo en el document.write ( "Este mensaje está escrito por JavaScript");

10 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 ). Para utilzarlo se realiza de esta forma:....

11 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

12 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( Título página ); 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( título ); */

13 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;

14 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.

15 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

16 Los operadores aritméticos permiten realizar operaciones entre variables y valores.(En este ejemplo y=10;) OperadorDescripciónEjemploCon asignaciónEjemplo +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

17 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 = ;

18 Los comparadores son operadores lógicos, que permite determinar igualades y diferencias entre variables y valores.(En este ejemplo x=4;) OperadorDescripciónEjemplo ==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 mayor igual que x>=4//true <=Es menor igual que x<=4//true

19 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 ().

20 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.

21 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 } 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.

22 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.

23 Eventos en 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 y Onunload. Evento lanzado cuando la página es cambiada. Onload. Evento lanzado cuando la pagina es cargada.

24 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.

25 Declaracion del try … cach 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.

26 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);

27 Métodos Los métodos son las acciones que se pueden realizar sobre los objetos. Ejemplo var str = "Hola, mundo!"; document.write (str.toUpperCase ());

28 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 }

29 //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

30 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 "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."

31 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 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 Raiz Elemento Nodo Padre Primer Hijo Ultimo Hijo Siguiente hermano Anterior hermano


Descargar ppt "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,"

Presentaciones similares


Anuncios Google