JavaScript (JS) es un lenguaje de programación interpretado. Inicialmente se creó para tareas de scripting, pero a día de hoy es un lenguaje muy versátil y multiparadigma basado en prototipos, y con soporte para programación orientada a objetos, imperativa y declarativa.

Empezaremos con un HTML de ejemplo:

Código
Previsualización
<html>
  <head>
    <meta charset="utf-8">
    <title>Mi primera página web</title>
  </head>

  <body>
    <p>Queremos dar dinamismo a esta página web</p>

    <button>botón</button>
  </body>
</html>

Podemos añadir javascript directamente a elementos para que reaccionen a acciones del usuario:

Código
Previsualización
<html>
  <head>
    <meta charset="utf-8">
    <title>Mi primera página web</title>
  </head>

  <body>
    <p>Queremos dar dinamismo a esta página web</p>

    <button onclick="alert('ejemplo interacción')">botón</button>
  </body>
</html>

Por temas de escalabilidad y mantenimiento sacaremos el javascript a un fichero diferente:

Código
Previsualización
<html>
  <head>
    <meta charset="utf-8">
    <title>Mi primera página web</title>

    <script src="./script.js"></script>
  </head>

  <body>
    <p>Queremos dar dinamismo a esta página web</p>

    <button onclick="alertUser()">botón</button>
  </body>
</html>
function alertUser () {
  alert('ejemplo desde fuera')
}

En el fichero de javascript hemos tenido que crear una función. En el evento onclick, del botón ejecutamos esa función poniendo su nombre seguido de paréntesis. Todo el código dentro de una función se ejecutará cuando se llame a la función.

Como en cualquier lenguaje de programación disponemos de estructuras de control, condicionales, bucles y muchas más herramientas. Vamos a repasarlas:

Podemos crear variables usando let, en este caso vamos a emplear una variable de tipo texto o String, para ello usamos comillas simples ' o dobles ".

info

Javascript es un lenguaje débilmente tipado. Esto significa que javascript tiene tipos, pero se manejan de forma implícita. Todas las variables se crean con let o const pero podremos crear cadenas de texto (strings), números (numbers) y booleanos (bools) entre otros tipos. Javascript es capaz de convertir de un tipo a otro de manera automática. Así pues 2 + 2 = 4 pero '2' + 2 = '22'. En el primer ejemplo se han sumado dos números y en el segundo se ha concatenado a una cadena de texto el número 2.

Código
Previsualización
 let mySentence = 'Hola, mundo'

function alertUser () {
  alert(mySentence)
}

Podemos pasar tantos parámetros como queramos a las funciones entre los paréntesis:

Código
Previsualización
<html>
  <head>
    <meta charset="utf-8">
    <title>Mi primera página web</title>

    <script src="./script.js"></script>
  </head>

  <body>
    <p>Queremos dar dinamismo a esta página web</p>

    <button onclick="alertUser('Hola, mundo')">botón</button>
  </body>
</html>
function alertUser (sentence) {
  alert(sentence)
}

Podemos también obtener cualquier elemento de html y obtener sus valores. Tenemos el objeto global document con funciones como getElementById que nos sirve para obtener un elemento que concuerde con ese Id.

Cuando obtenemos un input, podremos acceder al valor que contiene escribiendo .value.

Hemos guardado el input en una variable de tipo const. Se diferencia del let en que las const son constantes, es decir, una vez creadas, no se pueden editar.

Hemos creado un string diferente usando el tipo de comillas `. Con esto podremos interpolar información dentro usando la sintaxis ${expresiónDeJavascript}.

Código
Previsualización
<html>
  <head>
    <meta charset="utf-8">
    <title>Mi primera página web</title>

    <script src="./script.js"></script>
  </head>

  <body>
    <p>Queremos dar dinamismo a esta página web</p>

    <input id="inputNumber" type="number">
    <button onclick="alertUser()">botón</button>
  </body>
</html>
function alertUser (sentence) {
  const input = document.getElementById('inputNumber')

  alert(`has escrito el número: ${input.value}`)
}

Al igual que con el input, podemos añadir el evento al botón desde el javascript y en el html tener solo un id.

Obtenemos el botón y usamos su método addEventListener que requiere de dos parámetros: el tipo de evento (en este caso click) y la función a ejecutar:

Código
Previsualización
<html>
  <head>
    <meta charset="utf-8">
    <title>Mi primera página web</title>

    <script src="./script.js"></script>
  </head>

  <body>
    <p>Queremos dar dinamismo a esta página web</p>

    <input id="inputNumber" type="number">
    <button id="button">botón</button>
  </body>
</html>
function alertUser (sentence) {
  const input = document.getElementById('inputNumber')

  alert(`has escrito el número: ${input.value}`)
}

const button = document.getElementById('button')
button.addEventListener('click', alertUser)

Probemos ahora con condicionales. La expresión if(condición) nos permitirá que si la condición es verdadera se ejecute el código dentro del if. Podemos tener también un else, que se ejecutará si la condición se evalúa a falso.

Código
Previsualización
function alertUser (sentence) {
  const input = document.getElementById('inputNumber')

  if (input.value >= 18) {
    alert('Pareces mayor de edad')
  } else {
    alert('Eres todavia un niño')
  }
}

const button = document.getElementById('button')
button.addEventListener('click', alertUser)

Tenemos también estructuras para crear loops. El for nos permite crear bucles siguiendo su estructura en 3 partes: inicialización, condición y expresión a ejecutar después de cada ejecución. En el ejemplo, empezamos con i = 0, ejecutaremos el código dentro del for hasta que i sea mayor o igual a input.value y en cada iteración sumamos 1 a i.

info

variable++ y variable--, son el equivalente a variable = variable + 1 y a variable = variable - 1

Código
Previsualización
function alertUser (sentence) {
  const input = document.getElementById('inputNumber')

  let result = 0
  for(let i = 0; i < input.value; i++) {
    result += i
  }

  alert(`La suma de todos los numeros anteriores a ${input.value} es igual a: ${result}`)
}

const button = document.getElementById('button')
button.addEventListener('click', alertUser)

Desde Javascript podemos crear también contenido Html, esto nos permitirá, por ejemplo, dejar de usar el alert:

Código
Previsualización
function alertUser (sentence) {
  const input = document.getElementById('inputNumber')

  let html = 'Eres todavia un niño'
  
  if (input.value >= 18) {
    html = 'Pareces mayor de edad'
  }

  const node = document.createElement('DIV')
  node.innerHTML = html

  document.body.appendChild(node)
}

const button = document.getElementById('button')
button.addEventListener('click', alertUser)

Cada vez que pulsemos el botón creará un nuevo nodo, pero podemos cambiar el comportamiento para que lo haga siempre sobre el mismo nodo. ¿Se te ocurre cómo?

info

Pista: igual no hace falta crear siempre un nodo y basta con hacerlo una vez. O que esté creado desde el principio en el HTML, pero vacío.

Hasta aquí el curso básico de iniciación a Javascript. Tras este pequeño tutorial deberíamos haber aprendido lo siguiente:

  • Saber lo que es una variable, datos primitivos como strings y números.

  • Crear y ejecutar funciones básicas.

  • Saber que existe el objeto window y document, con utilidades globales.

  • Manejar estructuras de control básicas, como un un if y un loop.

  • Añadir eventos a elementos de HTML y recuperar esos elementos para manipularlos con Javascript.