Máster en Diseño Web | Módulo III | Introducción I

Módulo III
Programación Frontend

Javascript

¿Por qué tendría que aprender Javascript?

  • Libertad para implementar las interacciones que se os ocurran (o poder estimar cual es el coste de implementarlas).
  • Entender el lenguaje, y lo que se puede hacer con el, abre más posibilidades en vuestros diseños.

Empecemos con la parte aburrida 😱😭😪

Javascript

  • Fue creado en 1995 por Brendan Eich, que trabajaba para NetScape
  • ECMAScript es el estándar de Javascript especificado por ECMA (European Computer Manufactorers Association)
  • La versión actual es la 5, aunque la mayoría de cosas de la versión 6 están implementadas en los navegadores modernos.

OK, pero ¿que es Javascript?

Javascript es un lenguaje débilmente tipado, dinámico, interpretado, basado en prototipos, orientado a objetos, funcional e imperativo. Creado originalmente para usarse en el lado del cliente (navegador), aunque también desde el lado del servidor, y en los últimos años, como motor para aplicaciones de escritorio.

😁

Javascript nos permite hacer mejores webs, proporcionando una mejor experiencia al usuario con interacciones más elaboradas.

Empezando a trabajar con Javascript

Un programa es un listado de instrucciones que se ejecutan de manera lineal.

    
      var message = 'hola!';
console.log(message);

Sintaxis

La sintaxis de un lenguaje de programación es un conjunto de reglas a través del cual podemos construir los programas, como por ejemplo:

  • ; nos permite separar instrucciones de código
  • var return true false function son ejemplos de palabras clave, tienen un significado sintáctico determinado.
  • var nos permite definir variables nuevas. Las variables guardan datos de diversos tipos.

Funciones

Son los verbos de la programación. Nos ayudan a expresarle al intérprete (en nuestro caso, el navegador) que acciones realizar.


/* a y b son parámetros de la función */
function suma(a, b) {
  /* "return" indica que la función acaba ahí y devuelve
  el resultado al lado de return. */
  return a + b;
}

var resultado = suma(10, 5); // resultado = 15

Empezando a trabajar con Javascript

Podemos incluir código Javascript en nuestras webs de dos maneras:

  • Directamente en el código fuente, con un tag <script>:
    •
  • Escribiéndolo en un archivo con extensión .js, y referenciándolo desde el HTML:
    • 
      <script type="text/javascript" src="path/a/nuestro/archivo.js">

Objetos

Son colecciones de propiedades, nos permiten agrupar un conjunto de información en una única variable.


var teacher = {
  name: 'Mike',
  age: 27,
  loves_javascript: true
};

jQuery

Es una libreria Javascript que nos permite:

  • Interactuar con el DOM de manera sencilla
    • 
document.getElementById('id_de_elemento'); //versión Javascript
$('#id_de_elemento'); //versión con jQuery
  • Detectar elementos (clicks, hover, teclas presionadas...)
  • Manipular el CSS de un elemento
  • Animaciones
  • AJAX
Referencia de funciones jQuery: http://oscarotero.com/jquery/

Ejemplos

  • Mostrar/ocultar bloque de texto al hacer click sobre su titular.
  • Display de algo al hacer hover sobre un elemento.
  • Carrusel de imágenes.