Dreamweaver CC 2017 esencial

Comportamientos de JavaScript en Dreamweaver CC 2017

¡Prueba gratis durante 10 días

nuestros 1220 cursos !

Prueba gratis Mostrar modalidades de suscripción
Añadir control interactivo sobre elementos de las páginas es mucho más fácil gracias a los comportamientos JavaScript que ofrece el panel de Comportamientos de Dreamweaver. Con él podremos añadir JavaScript sin necesidad de programar.

Transcripción

A lo largo de todo el curso hemos estado utilizando archivos HTML y archivos CSS. y en el fondo también hemos utilizado un poquito de JavaScript aunque no hemos sido conscientes de haberlo hecho. Vamos a ver ahora cómo podemos utilizar JavaScrip sin que sea dentro de componentes prediseñados como estos que tenemos. Supongamos que yo tengo un botón cualquiera y que quiero que al hacer clic realice alguna tarea, pero yo no sé JavaScrip, no quiero aprender, además. Bueno, pues si ese es tu caso, tenemos también herramientas para ayudarte dentro de Dreamweaver. Seleccionando un botón cualquiera siempre tenemos la posibilidad de ir a "Ventana" y dentro de ventana "Comportamientos". En realidad estos comportamientos solo aparecen activados cuando estamos en la vista de "Diseño". Si pruebo de nuevo, después de haber seleccionado este botón me voy a asegurar, por cierto, de que sea esa etiqueta de "Botón", ahora sí me aparece marcado "Comportamientos" Este panel de comportamientos es curioso de utilizar, sobre todo si no se sabe nada de JavaScript. En realidad el código de JavaScript consiste en una serie de eventos que ejecutan funciones. Los eventos son los momentos en los que se va a ejecutar un código, por ejemplo, cuando se carga la página o cuando se descarga o cuando se hace clic sobre un elemento o cuando se pasa por encima de él, por poner unos pocos ejemplos. Y cuando ocurre un evento lo que podemos hacer es programar que además se ejecute cierto código. Un bloque de código, que, en realidad, es una función y es un poco esto lo que se va a hacer con estos comportamientos. Primero selecciono un objeto pulso en el "+" y defino qué es lo que quiero que haga. Hay varias opciones que ya están prediseñadas. Por ejemplo, pues puedo crear diferentes efectos de transformación, quiero decir, que se vuelva transparente, por ejemplo, o que pegue un bote, un objeto cualquiera que esté en la pantalla. Puedo hacer cosas un poco más complejas como por ejemplo, hacer que precargue una imagen en concreto, Puedo seleccionar la imagen, pulsar en "Carga previa de imágenes" y se ocupará de conseguir que antes de que se dé por concluida la carga de la página se ocupe de cargar esa imagen y no esperar a cuando sea necesaria. Podemos realizar otras tareas como, por ejemplo, llamar a código JavaScript, llamar a una función en concreto, o mostrar una alerta, un mensaje emergente o, por supuesto ir a una URL concreta, hacer una salto para que sea, más o menos, como si fuese un enlace o dos cosas que también son bastante importantes, una de ellas, comprobar un "plug-in", o sea, que si yo tengo instalado un visor, por ejemplo, de Unity3D que pueda comprobar que este está instalado. Otra que se utiliza muchísimo que es la de "Cambiar propiedad" yo puedo definir una propiedad y que cambie, por ejemplo, que al hacer yo clic sobre este botón pues este segundo botón, por ejemplo, desaparezca. "Validar formulario" también es fundamental y va a servir para, cuando yo haga clic sobre un botón, en vez de enviarlo, primero se ocupe se realizar una validación sobre ese formulario. Vamos a ver un poco alguna opciones, por ejemplo ir a URL, que es la más simple. Pulso sobre ella, elijo una página cualquiera. Voy a ir a Google. Elijo que sea sobre la ventana principal, pero podría haber hecho que la abriese en otra ventana, pulso en "Aceptar" y me añade dos partes dentro de este panel. La primera parte es el evento, la segunda es la función, lo que va a ejecutar. Si hago doble clic sobre la función me permite hacer modificaciones sobre ese panel. Si hago doble clic sobre el primero puedo elegir cuándo quiero qué ocurra, por ejemplo, cuando se pulsan teclas o cuando se selecciona o se deselecciona un campo de texto cuando se pasa por encima o cuando se sale de estar encima, "onMouseOut" o cuando hago clic o doble clic. Voy a mantener ese "onClick". Si lo guardo e intento verlo en la vista previa pues ocurrirá que cuando haga clic, inmediatamente se va a ir a este Google. Volviendo de nuevo otra vez al Dreamweaver, si me voy a parte de "Código" veré que, en realidad, lo que ha ocurrido ha sido que se ha añadido esa función "goToURL" y dentro se ese botón en concreto, se ha añadido el evento "onClick" con ese "MM_goToURL" o sea, en realidad se ha añadido un código JavaScript muy simple sobre este archivo. En un momento dado también puedo eliminar cualquiera de estos eventos. Entonces seleccionaría, pulsaría en eliminarlo y me lo quitarían. Es interesante a veces, la utilización de este tipo de comportamientos para trabajar con formularios y así puedo seleccionar en este botón de "Enviar" y pedir que me valide el formulario. Me va a encontrar los campos de texto, esta es la pega que tiene que los campos HTML5 modernos no va a aparecer aquí reflejados, pero dentro de los que aparecen me permite elegir si son obligatorios o no y qué es lo que tiene que validar, si vale cualquier cosa, si es un número o si es una dirección de correo o si es un número entre un número y otro. En principio, como digo, hay formas mejores de hacer estas validaciones pero bueno, cabe la posibilidad también de utilizar este comportamiento.

Dreamweaver CC 2017 esencial

Crea sitios web gracias al software de Adobe, Dreamweaver CC 2017. Con este repaso esencial a sus fundamentos podrás crear páginas responsive y mostrar tus contenidos a la última.

6:11 horas (78 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.