Primeros pasos con Javascript

• Introducción a Javascript

• Fundamentos de JavaScript

• Para empezar a programar con javascript sólo necesitamos

  • Un editor de texto como puede ser Sublime Text
  • Las herramientas de desarrollo de un navegador web cómo pueden ser las de Google Chrome

Sublime Text

• Es uno de los editores más populares para Javascript (y Frontend en general). Algunos lo ven como la evolución natural del famoso Vim. Otra alternativa bastante buena a Sublime es atom
• Es un editor MUY potente y rápido.
• Sublime Text funciona sobre todo a base de paquetes (plugins, add-ons..)
  • Tienes que instalarte primero Package Control para poder añadir paquetes a Sublime
  • Puedes encontrar paquetes para casi todo
• Entre las cosas que puedes hacer con Sublime estan:
  • Command palette, acceso a TODAS las opciones de sublime desde un unico sitio
  • Modo libre de distracciones
  • Navegación entre archivos muy rápido
  • Selection (y edición) multiple
  • Auto-completado con snippets (nos podemos montar los nuestros)

La Consola (de Javascript) de Chrome

• La consola de Chrome es el sitio donde puedes probar el código de manera interactiva. Forma parte de las herramientas para desarrolladores (Chrome Developer Tools, DevTools) de Chrome
• Para abrir las DevTools podemos hacer:
  • Menú > Más herramientas > Herramientas para desarrolladores
  • Botón derecho en cualquier elemento de la página y Inspeccionar elemento
  • Combinaciones de teclas: Ctrl+Shift+I para Windows o Cmd+Opt+I para Mac
• En DevTools tenemos disponibles varias herramientas (entre ellas las consola):
  • Elements
  • Resources
  • Network
  • Sources
  • Timeline
  • Profiles
  • Audits
  • Console

• Con la consola de javascript podemos:
  • mostrar mensajes desde nuestro código (con console.log)
  • interactuar con la página cargada utilizando javascript
  • ejecutar comandos javascript y ver su resultado en tiempo real

Muchos de los ejemplos que encontraras en este libro puedes copiarlos y pegarlos en la consola directamente para ver el resultado

Puedes probar a copiar y pegar este código en la consola

// Declaramos una funcion llamada saludar, que lleva
// 'nombre' como argumento.
function saludar(nombre) {
  // Cuando se llama, esta funcion devuelve "Hola " 
  // y el nombre que se le ha pasado como argumento.
  return "Hola " + nombre; 
}

saludar("Usuario"); // Nos devolvera "Hola Usuario".

Javascript en la página HTML

• El código javascript se guarda en archivos .js
• El código javascript se ejecuta en una pagina web a traves del tag <script>

Con este tag podemos cargar un archivo .js que contenga código javascript

    <script src="scripts/main.js"></script>

O podemos cargar directmente el código javascript que queremos que se ejecute cuando se cargue la página

    <script type="text/javascript">
        console.log("Hello from my script tag...");
        alert("I'm saying HI!!");
    </script>

• Los elementos de una páginas web pueden ser accedidos por javascript a traves del DOM que:
  • estructura el código HTML como elementos en forma de arbol
  • provee a javascript de métodos para acceder a (y modificar) estos elementos de multiples maneras

Ejemplo de código javascript accediendo (y modificando) elementos de HTML

    var miTitulo = document.querySelector('h1');
    miTitulo.innerHTML = 'Hello world!';