javascript fue diseñado para darle interactividad a las páginas html. javascript, al igual que...
TRANSCRIPT
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!
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
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.
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>
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?
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.
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>
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>
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>
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
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áginadocument.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>”);*/
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;
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”.
− 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
Los operadores aritméticos permiten realizar operaciones entre variables y valores.(En este ejemplo y=10;)
Operador Descripción Ejemplo Con asignación Ejemplo
+ 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
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 ;
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;//truex===”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
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.
− Sintaxisfunction 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 ().
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.
− 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.
• Sintaxiswhile(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.
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 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.
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.
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.
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.
− Ejemplovar txt = "Hello World!"; document.write (txt.length);
Métodos
− Los métodos son las acciones que se pueden realizar sobre los objetos.
− Ejemplovar str = "Hola, mundo!"; document.write (str.toUpperCase ());
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}
//creo una función para calcular el áreafunction 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 circulotestcircle.mvBy(2,3); // muevo el circulowindow.alert( 'El area del circulo es ' + testcircle.area() ); //muestro con un
alert el areawindow.alert( 'La circunferencia es ' + testcircle.circunferencia() );
//muestro con un alert la circunfencia
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.
− Ejemplovar 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[]
TexboxesRadio buttonsCheckboxesSelect listsTextareasbuttons
"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."
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<html>
Elemento<head>
Elemento<body>
Nodo Padre
Primer Hijo
UltimoHijo
Siguiente hermano
Anterior hermano