Lo prometido es deuda aquí están algunos ejemplos concretos de JavaScript discreta, herramienta versátil y poderosa si se utiliza correctamente. El sitio web / blog de Ryan Johnson se puede descargar dos muy buen ejemplo de JavaScript discreta:
Ryan Johnson, en su guión, la biblioteca utiliza Prototype , al igual que muchos de los demás. También ha escrito algunas extensiones a la relativamente Prototype , presentó a continuación - en una forma diferente - en la última versión de la biblioteca.
El uso de prototipos para ilustrar el funcionamiento de la discreta código JavaScript es generalmente más conveniente - como veremos más adelante, sin embargo, aquí hay una cruda primer ejemplo que no requiere de bibliotecas externas. Comenzamos por recordar que el concepto detrás de la discreta JavaScript es empezar desde cualquier página HTML (estándar y no necesariamente por escrito por nosotros - el punto fuerte más importante) y utilizar Javascript para hacer algunos cambios.
Schematimamente el concepto es para realizar una función que analiza el código HTML, a continuación, atraviesa el DOM y, en particular, para añadir o cambiar la funcionalidad. Normalmente utilizan dos métodos para ejecutar código Javascript para cargar una página: la primera es lo que no se coloca el código en cualquier función, y luego dejar que el navegador ejecuta código inmediatamente cargado en el punto donde aparece la llamada:
El mismo resultado se obtiene mediante la inclusión del código:
Sin embargo, cuando se debe operar en el DOM de una página que se supone una carga completa, para que todos la etiqueta de la página está presente y disponible para ser rastreados. Así que la mejor solución se convierte en el uno para asegurarse de que la página es completa. Esto es posible gracias a la participación del evento onload de la etiqueta del cuerpo, por ejemplo, que se libera cuando la carga de la página se ha completado.
1
2
3
| miafunzione ; ventana onload = MyFunction.;
/ / O, que es el mismo
function ( ) { alert ( "Hello" ) ; } . ventana onload = function () {alert ("Hola");} |
Evitar, por supuesto, la solución jurídica que sería un eufemismo llamarlo intrusiva:
1
| "miafunzione()" > < cuerpo onload = "MyFunction ()"> |
Otra técnica, más grueso e igualmente intrusivo (ya que obligaría al usuario final para colocar el código en un lugar determinado), es insertar el guión al final del documento antes de que el cuerpo de la etiqueta de cierre, ahora obsoleto y técnica utilizada en casos excepcionales (ver Google Analytics!).
Aún mejor es usar el método siguiente:
1
2
3
4
5
6
7
| window. addEventListener ) { if (addEventListener window.) {
"load" , miafunzione , false ) ; ventana. addEventListener ("carga", MyFunction, false) ¾ Í
( window. attachEvent ) { } Else if (window. attachEvent) {
"onload" , miafunzione ) ; ventana. attachEvent ("onload", MyFunction) ¾ Í
{ Else {}
createSubMenus; ventana. onload = createSubMenusÍ ¾
} |
Incluso esta pieza de código está encerrado en una función. Se añade un detector de eventos para el evento de carga de la ventana, llamando a nuestra función miafunzione() . . Los navegadores modernos como Firefox, por ejemplo, se utiliza la función addEventListener() se define en el DOM nivel 2, mientras que Internet Explorer utiliza su función patentada attachEvent() . Sin embargo no estamos en la perfección de esta manera, de hecho, se sustituirá todo - si los hay - los eventos onload creados por otros scripts, que no es realmente "no intrusiva".
Para resolver este problema rápidamente, que a causa del diferente comportamiento del navegador se lo complicado de explicar aquí, usted debe usar como libreirie prototipo proporciona el método un'elengantissimo para superar el problema:
1
| window , 'load' , function ( ) { alert ( "Hello" ) ; } ) ; . Evento Observar (ventana, 'load', function () {alert ("Hola");}); |
La sintaxis es muy obvio y espectacular! La ventaja para los que no lo había entendido, es que se puede escribir:
1
2
| window , 'load' , function ( ) { alert ( "Hello 1" ) ; } ) ; . Evento Observar (ventana, 'load', function () {alert ("Hola 1");});
window , 'load' , function ( ) { alert ( "Hello 2" ) ; } ) ; . Evento Observar (ventana, 'load', function () {alert ("Hola 2");}); |
Al cargar la página se mostrará antes de la alerta "Hola 2" y luego la alerta "Hola 1". Básicamente se carga en un FILO (First Input Output pasado) una pila, al tiempo que garantiza la ejecución de todos los eventos conectados para cargar el documento exactamente lo que se desea. De esta manera, una página puede cargar - casi - infinita JavaScript discreta que conectar para cargar el documento.
Pero, ¿qué se puede hacer con esta técnica? Muchas cosas interesantes. Un ejemplo que podemos comentar (véase también el prototipo: el uso del doble signo de dólar ($ $) ) viene de Tobie Langel . Con pocas líneas de código y la descarga de bibliotecas Prototype y Scriptaculous puedes dar un bonito efecto al ancla clásico de nuestras páginas. En primer lugar crear una página HTML con el siguiente código:
1
2
3
4
5
6
7
8
| = "#capitolo1" > Vai al capitolo 1 < / a >< / p > < p > < un href = "# capítulo 1"> Vai en el Capítulo 1 </ un > </ p > < / p > < p > </ p > < / p > < p > </ p > .... < / p > .... una gran cantidad "de < p > </ p > .... así como un ejemplo "capitolo1" > Capitolo 1 < / h1 > < h1 id = "Capítulo 1"> Capítulo 1 </ h1 > |
Incluir la página:
1
2
3
4
5
6
7
8
9
10
11
12
| "prototype.js" type = "text/javascript" charset = "utf-8" >< / script > < script de src = "prototype.js" type = "text / javascript" charset = "UTF-8"> </ script de > "scriptaculous-js-1.7.0/src/effects.js" type = "text/javascript" charset = "utf-8" >< / script > < script de src = "scriptaculous-js-1.7.0/src/effects.js" type = "text / javascript" charset = "UTF-8"> </ script de > "text/javascript" language = "javascript1.2" > < script de type = "text / javascript" language = "JavaScript1.2"> Event.observe (ventana, 'load', function () { $ $ ('A [href ^ = #]: No ([href = #])') Cada uno (función (elemento) {. element.observe ('click', function (evento) {new Effect.ScrollTo (this.hash.substr (1)); Event.stop (evento); bindAsEventListener (elemento)) }) }) </ script de > |
Gracias a "utilizar Event.observe() la función y dos dólares ($ $) puede modificar fácilmente el comportamiento del anclaje clásico. En este caso, una nueva función está enganchado a las cargas de la página HTML. Al tomar el caso de carga se remonta a todos los eslabones de la DOM (Tag <A>) con href que comienza con una almohadilla (#, con exclusión de la que sólo con almohadilla!). A estos elementos es una función de adjunto al evento click, similar a lo que se hizo con la carga del documento. En este punto entra en juego Scriptaculous lo que produce un efecto de la espiral hacia el punatato elemento de nuestro enlace - modificado!
Más información ...
Permitir a los usuarios interactuar con una página Web en los últimos años se ha producido un aumento significativo en el uso de secuencias de comandos del lado del cliente: código Javascript se puede responder en tiempo real y manipular una gran variedad de información. La Web 2.0 es la última expresión de esta capacidad de interacción, en la que el usuario final - el usuario a participar activamente en la evolución de la construcción y "del sitio Web, interactuar con él y ayudarte a ti mismo. Se conoce como contenido generado por usuarios (UGC, o - contenido generado por usuarios) que ve en el "navegador" definitivamente no es pasiva!
Para lograr esta interacción, lo que permite al usuario final para sumar su aporte, hemos desarrollado una serie de técnicas que han cambiado el aspecto y el comportamiento de las páginas web (estático hasta ahora, pero ahora similar a las aplicaciones tradicionales de Desktop) en los últimos años. Cambiar el contenido de una página, enviar archivos, dando su voto a un vídeo o un documento, registrar o cambiar sus datos personales, son sólo algunas de las operaciones de las adaptaciones en muchos servicios (2.0 beta) en la Web
Más información ...
Elija la tecnología a utilizar en el desarrollo de una aplicación Web es de vital importancia, por no encontrarse en problemas poco después. El tipo de aplicación web, sus características operativas, son el primer punto a tener en cuenta para elegir el marco y las tecnologías relacionadas.
Muchas veces he discutido la eficacia de la secuencia de comandos JavaScript en contra de diferentes tecnologías como Adobe Flash o Java. Sin embargo, es importante hacer hincapié en un aspecto importante a menudo pasado por alto: el acceso a la DOM de Javascript, en este caso, el candidato (si no el único) de los favoritos para este tipo de operaciones..
Las herramientas con Snap , por ejemplo, operan en un mecanismo simple: cuando la página HTML se carga (y después de la introducción de la carga de los scripts de JavaScript) es escanear la página, y añadió un nuevo código HTML en los puntos especiales. En el caso de Snap identifica todos los enlaces a páginas externas (o en la configuración interna de la última edición), el <A> TAG para indenderci. Estos se modifican para que al pasar el ratón para abrir un diálogo anterpima de enlaces (ver este blog para ver un ejemplo).
No sólo complemento de otras escrituras, pero muchos de JavaScript básicamente hacen lo mismo. Últimamente, esta técnica es ampliamente utilizado por la biblioteca del prototipo , que ofrece una variedad de métodos (como la famosa doble en dólares, o $ $ $ - ver Prototipo: el uso del doble signo de dólar ($ $) ) es para hacer un seguimiento que el cambio - la mosca - los elementos de una página HTML.
Navegación por el DOM HTML es por lo tanto, la tarea específica de Javascript. Históricamente, entre otras cosas, se introdujo en JavaScript para leer y escribir el contenido de una página HTML.
Por ejemplo, si quisiéramos hacer algunos cambios en una página HTML con Adobe Flash, que aggorgeremmo - tarde o temprano - que se ven obligados a invocar una función JavaScript. El nuevo 3,0 ActionScript, por ejemplo, proporciona una clase ( ExternalInterface ) adecuado para este propósito. – o fscommad() per chiamare una funzione Javascript: Una vez que (en las versiones anteriores de ActionScript), se utilizó el comando getURL() - ha sido sustituido por una mejor flash.net.navigateToURL() - o fscommad() para llamar a una función de JavaScript:
1
| ) ; getURL ("javascript: myFunction ()"); |
Además:
La clase ExternalInterface es la API externa, una interfaz de programación de aplicaciones que permite la comunicación directa entre ActionScript y el contenedor de Flash Player, por ejemplo, una página HTML con JavaScript, o una aplicación de escritorio con Flash Player incorporado.
Tenga en cuenta que "la aplicación de escritorio", que tanto recuerda a Apolo!
Hoy, gracias a ExternalInterface , puede invocar una función de JavaScript a por lo menos limpio (esta clase permite una gestión mucho más eficaz que getURL() , como paso de parámetros):
1
2
3
4
5
6
| / * Las llamadas de las funciones externas "addNumbers"
pasando dos parámetros, y asignación de resultado de esa función
a la variable "número" * / uint = 3 ; var param1: uint = 3; uint = 7 ; var param2: uint = 7; uint = ExternalInterface . call ( "addNumbers" , param1 , param2 ) ; var resultado: uint = ExternalInterface llamada ("addNumbers", param1, param2);. |
1
2
3
4
5
6
| <script> <! -
/ / Suma dos números y devuelve el resultado a ActionScript
num1 , num2 ) { addNumbers función (num1, num2) {
num1 + num2 ) ; retorno (num1 + num2);
}
/ / -> </ Script> |
¿Qué podemos concluir entonces? Entre los diversos marcos y bibliotecas disponibles en el análisis inicial del proyecto que usted desea alcanzar es de suma importancia. Los errores en esta etapa puede afectar seriamente a las siguientes etapas de cualquier proyecto Web 2.0. JavaScript, entonces, que triunfa sobre todo cuando se necesita interactuar con el DOM.
Más información ...
Con la última versión de Prototype, Andrew , y Christophe han acelerado y mejorado la 'doble dólar ( $ $ utilidades ), que le permite seleccionar un elemento especificando el dial (casi todos los selectores CSS3 el apoyo de las especificaciones).
La utilidad de esta función va más allá de los $ popular, que puede ser útil, pero, en última instancia, no se realiza ninguna operación digna de nota. Las utilidades de "dos dólares" ($ $), pero en realidad le permite seleccionar cualquier tipo de elemento, que le da una gran herramienta para filtrar los elementos en el DOM.
He aquí algunos ejemplos tomados de la página web oficial:
1
2
3
4
5
| ) ; // -> Tutti i DIV del documento. $ $ ('Div') / / -> Todo el documento DIV. Igual que document.getElementsByTagName ('div')!
) ; // -> Uguale a $('contents'), ma ritorna sempre un array. $ $ ('#') Contenido / / -> Igual que $ ('contenido'), pero siempre devuelve una matriz.
) ; // -> Tutti fli elementi LI con class 'faux' $ $ ('Li.faux') / / -> Todos los elementos LI Fli con 'imitación' de la clase
) ; // -> Tutti i TAG A (links) al di sotto di un elemento con ID "contents" e con un attributo rel $ $ ('Contenido Número uno [rel]') / / -> Todos los TAG A (enlaces) a continuación de un elemento con id "contenidos" y con un atributo rel
) ; // -> Tutti i TAG A (links) con un'attributo href con valore "#" (eyeew!) $ $ ('A [href = "#"]') / / -> Todos los TAG A (enlaces) con un valor de atributo href con "#" (eyeew!) |
La fuerza, sin embargo, reside en la posibilidad de excluir algunos artículos en favor de otro, por ejemplo:
1
| ) ; // -> Tutti i TAG A (links), esclusi quelli che contengono un attributo rel impostato a "nofollow" $ $ ('R: No ([rel = nofollow ~])') / / -> Todos los TAG A (enlaces), con exclusión de aquellos que contienen un atributo rel en "nofollow" |
Aún más interesante es:
1
| ) $ $ ('A [href ^ = #]: No ([href = #])') |
Esto, en la práctica, todos ubicados en TAG con el atributo href, que comienza con '#', pero no toma en cuenta los que son iguales a '#' solo. En otras palabras, hace caso omiso de los enlaces que apuntaban a un identificador válido!
Esta característica única de ($ $) ha inspirado a Tobie Langel para crear un sencillo script (desarmado) puede añadir un bonito efecto cuando se desplaza dentro de una sola página HTML que se mueven a las anclas, con la técnica - sólo - href = "#".
Para una demostración haga clic aquí .
Más información ...
Últimos Comentarios
Rosanna : ¿Puede alguien decirme cómo puedo eliminar la ventana de Snap Shots que se abre automáticamente cuando se me ...
bendito Maresca : No puedo descargar cualquier skypemote me spiegaaa
Mateo : Hola a todos, por desgracia, Google no permite el uso de la API de Flash, pero lo hará ...
Giovambattista Fazioli : @ MM: Si usted subir imágenes a un servidor diferente (que WordPress no puedo ...
GM : Hola, lo siento para resucitar un viejo post, pero espero que usted me puede dar una mano. ¿Cómo lo hago, con este método, ...