UT2 Desarrollo de apps mediante lenguajes de script
Lenguajes de scripting
eugeniaperez.es
ut 2: lenguajes de scripting
eugeniaperez.es
1 Introducción
ut 2: lenguajes de scripting
eugeniaperez.es
1 Introducción
- Interpretado
- Dialecto estándar -> ECMAScript
- Su uso principal es en el lado cliente
- Se ejecuta directamente en el navegador
JavaScript (sometimes shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB.
ut 2: lenguajes de scripting
1 Introducción
¿Tiene algo que ver con Java...?
- Absolutamente nada
- Su parecido termina en el inicio del nombre
- Java -> lenguaje OO de entorno servidor
- Javascript -> lenguaje de scripting de entorno cliente
eugeniaperez.es
ut 2: lenguajes de scripting
1 Introducción
¿Porqué nace js...?
- Las páginas se empiezan a hacer más complejas...
- Navegación lenta...
- Excesivo intercambio de información
entre cliente y servidor...
- Reduce incompatibilidades entre
navegadores...
eugeniaperez.es
ut 2: lenguajes de scripting
THE CODING LOVE
CON JQUERY SE SUELEN REDUCIR LAS INCOMPATIBILIDADES ENTRE DISTINTOS NAVEGADORES A LA HORA DE INTERPRETAR HTML Y CSS.
eugeniaperez.es
Probando los bordes
redondeados con IE8...
ut 2: lenguajes de scripting
1 Introducción
- Mejora considerable para creación de sitios web ->
- concepto de dinamismo (WEB 2.0)
- validación de formularios. Llamadas asíncronas (AJAX)
- procesamiento de elementos HTML -> DOM
- Soporte de todos los navegadores
- No se necesita sw adicional
- Herramientas gratuitas disponibles
- Antes limitadas pero han ido mejorando (Chrome, Firefox)
eugeniaperez.es
ut 2: lenguajes de scripting
1 Introducción
El entorno cliente:
- HTML /XHTML (CSS)
- Javascript
- Procesamiento de JSON/XML
Entorno servidor (albergar contenido estático: servidor web), dinámico (servidor de aplicaciones). Lógica de negocio, reglas del modelo y acceso a datos (servidor de bases de datos).
eugeniaperez.es
ut 2: lenguajes de scripting
1 Introducción
Arquitectura cliente/servidor
eugeniaperez.es
ut 2: lenguajes de scripting
1 Introducción
Arquitectura cliente/servidor -> separación lógica entre capas
- Separar los datos de la capa de datos, de la lógica de negocio y de la presentación.
- Patrón arquitectónico MVC
- Capa de presentación
- Capa de negocio
- Capa de datos
eugeniaperez.es
ut 2: lenguajes de scripting
1 Introducción
Domina totalmente su entorno
Entorno servidor (múltiples tecnologías)
Java, .NET, PHP, Python, Ruby, etc.
Entorno cliente
Javascript (librerías jQuery, etc)
VBScript????
eugeniaperez.es
ut 2: lenguajes de scripting
1 Introducción
Y TÚ, ¿HAS OÍDO HABLAR DE VBSCRIPT O ALGÚN OTRO COMPETIDOR...?
A mí que
me registren
eugeniaperez.es
ut 2: lenguajes de scripting
1 Introducción
Los scripts del lado del cliente son lenguajes de programación que se ejecutan mediante un intérprete del lenguaje en tiempo real.
Se pueden identificar entre el código fuente de una página web (HTML y CSS) porque va incluido dentro del tag <script>.
eugeniaperez.es
UT 2: LENGUAJES DE SCRIPTING
1 Introducción
Introducido por Netscape en su navegador en los 90
En 1995, Netscape era utilizado por el 80% de internautas
Opción elegida por el dominador del mercado de los navegadores
Resto de navegadores o lo incluían o se quedaban fuera
Ya te digo
Todo es más fácil
cuando dominas el mercado
eugeniaperez.es
UT 2: LENGUAJES DE SCRIPTING
1 Introducción
Entonces, ¿tiene futuro, no?
- Se utiliza de forma masiva en el mercado laboral
- En el entorno empresarial, siempre te tocará lidiar en mayor o menor medida con la parte cliente
- Los diseñadores Web se ocupan de la presentación (HTML y sobre todo CSS)
- Javascript es tarea del programador Web
eugeniaperez.es
UT 2: LENGUAJES DE SCRIPTING
1 Introducción
Entonces, ¿tiene futuro, no?
eugeniaperez.es
UT 2: LENGUAJES DE SCRIPTING
1 Introducción
Tecnologías que son tendencia últimamente
AJAX (Asynchronous Javascript and XML)
- Permite la comunicación cliente – servidor sin recargar o refrescar la página Web
- Las llamadas al servidor se ejecutan de forma
asíncrona
- Mejora mucho la usabilidad de los sitios Web
- Proporciona una mejor experiencia de usuario
eugeniaperez.es
UT 2: LENGUAJES DE SCRIPTING
1 Introducción
¿Cómo se utiliza Javascript...?
NO es habitual programar en JS puro.
Se suele utilizar en librerías
- Permiten extender su funcionalidad
- Sintaxis más fácil y directa
- Multitud de efectos visuales y utilidades para incrustar
eugeniaperez.es
UT 2: LENGUAJES DE SCRIPTING
1 Introducción
¿Cómo se utiliza Javascript...? ->librerías de Javascript:
- jQuery
- Mootools
- Yahoo
- Prototype
- Ext
- Etc.
Más en http://javascriptlibraries.com/
eugeniaperez.es
UT 2: LENGUAJES DE SCRIPTING
1 Introducción
Entonces, ¿vamos a aprender alguna librería?
La librería jQuery, actualmente la más empleada en el ámbito laboral para programar en Javascript.
- Compatibilidad entre navegadores
- Muy buen soporte y documentación
- Muchos componentes visuales y de utilidad
eugeniaperez.es
UT 2: LENGUAJES DE SCRIPTING
1 Introducción
Jquery
- Domina totalmente el mercado
- Más de la mitad de sitios web la usan
- El 90% de sitios con JS utizan jQuery
eugeniaperez.es
UT 2: LENGUAJES DE SCRIPTING
1 Introducción
¿quién utiliza js / Jquery?
- Todo el mundo
- Necesitas pruebas:
- Trata de desactivar JS en tu navegador y acceder a Gmail, a Fb, a Twitter, etc...
- ¿Notas alguna diferencia?
eugeniaperez.es
UT 2: LENGUAJES DE SCRIPTING
1 Introducción
¿realmente puede abrirme puertas en el mundo laboral?
eugeniaperez.es
UT 2: LENGUAJES DE SCRIPTING
1 Introducción
¿EXISTE ALGÚN FRAMEWORK PARA JAVASCRIPT?
¡Claro! Al igual que .NET MVC, Spring para Java o Symfony para PHP.
Depende del propósito pero dado que es una tecnología de cliente, no me centraría tanto en frameworks.
Será en función del proyecto y si necesito tanto funcionalidad en JS que veo su necesidad.
eugeniaperez.es
http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/
UT 2: LENGUAJES DE SCRIPTING
1 Introducción
¿se puede crear un entorno completo?
eugeniaperez.es
¿Independiente de la plataforma?
JavaScript corre en los navegadores, por lo que funciona igualmente en todas las plataformas. No todos los navegadores lo implementan igual (CSS).
En este sentido jQuery ofrece un mejor soporte.
UT 2: LENGUAJES DE SCRIPTING
1 Introducción
¿se puede crear un entorno completo?
eugeniaperez.es
¿Creación de código mantenible?
Esto no se debe tanto a la librería o el framework que utilices, sino al estilo y destreza del programador.
Lo de siempre: buenas prácticas, comentarios, patrones de diseño, arquitectónico, separacion de capas, alta cohesión, bajo acoplamiento... En JS se pueden crear namespaces, al igual que Java o el resto de lenguajes.
UT 2: LENGUAJES DE SCRIPTING
1 Introducción
¿se puede crear un entorno completo?
eugeniaperez.es
¿Herramientas de depuración?
Firebug o bien el de Chrome. Lo tienes todo: puntos de interrupción,inspección de variables, consola de error, visualización de COOKIES, monitorización del tráfico de red (llamadas AJAX GET, POST, etc) Inspección del DOM del documento.
UT 2: LENGUAJES DE SCRIPTING
1 Introducción
eugeniaperez.es
me pondré a programar js desde ya. No hay tiempo que perder...
ut 2: lenguajes de scripting
eugeniaperez.es
2 Javascript
ut 2: lenguajes de scripting
eugeniaperez.es
2 Javascript
Es el lenguaje de scripting que se utiliza principalmente para crear páginas web dinámicas, es decir, aquéllas que incorporan efectos visuales (texto que aparece y desaparece, animaciones que se activan al pulsar botones, ventanas con mensajes de aviso, etc.)
ut 2: lenguajes de scripting
eugeniaperez.es
2 Javascript
Áreas de utilización:
- Interactividad del usuario con la página.
- Validación de formularios.
- Procesamiento de cualquier elemento HTML, atributo o propiedad CSS mediante el DOM del documento.
- Explotación de las características del Paradigma de la Orientación a Objetos.
ut 2: lenguajes de scripting
eugeniaperez.es
2 Javascript
Algunas de sus ventajas:
- Es soportado por los principales navegadores.
- Permite modificar el comportamiento y el contenido de una página, sin necesidad de recagarla.
- Solo se necesita un navegador web.
- Es posible combinarlo con Ajax para añadir más interacción.
ut 2: lenguajes de scripting
eugeniaperez.es
3 Herramientas de desarrollo
ut 2: lenguajes de scripting
eugeniaperez.es
3 Herramientas de desarrollo
- Notepad++: http://notepad-plus-plus.org/
- CoffeeCup Free HTML Editor: http://www.coffeecup.com/free-editor/
- HTML Kit: http://www.htmlkit.com/
- Netbeans: https://netbeans.org/features/html5/
- Eclipse: http://www.eclipse.org/downloads/packages/eclipse-ide-javascript-web-developers/indigor
- Aptana Studio: http://www.aptana.org/
ut 2: lenguajes de scripting
eugeniaperez.es
3 Herramientas de desarrollo
Para pruebas rápidas -> la propia consola de la herramienta de desarrollo para Javascript de los navegadores.
O bien mediante éstas otras podremos compartir código Javascript:
- JSFiddle: https://jsfiddle.net/
- JSLint: http://www.jslint.com/
- JS Bin: http://jsbin.com/?html,js,output
UT2.A
By eugenia_perez
UT2.A
- 1,200