JavaScript

1 - Primeros pasos

Formas de cargar JavaScript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Cargando JavaScript</title> 
    </head>
    <body>
        <p id="a"></p>
    </body>
</html>

1 - Consola web

Click derecho --> Inspeccionar elemento --> Consola

2 - En el archivo HTML

<body>
    <p id="a"></p>
    <script>
document.getElementById("a").innerHTML = "Hola Mundo";
    </script>
</body>

3 - En un archivo separado

<body>
    <p id="a"></p>
    <script src="holamundo.js">
</body>

document.getElementById("a").innerHTML = "Hola Mundo";

Uso de variables

var mensaje = "Hola Mundo";
document.getElementById("a").innerHTML = mensaje;

var mensaje;
mensaje = "Hola Mundo";
document.getElementById("a").innerHTML = mensaje;

Tipos de datos primitivos

var variable1 = "Hola Mundo"; // Tipo String
var variable2 = 1; // Tipo Number
var variable3 = true; // Tipo boolean
var variable4 = undefined; // Tipo undefined

Operadores aritméticos

var variable1 = 1 + 1;         // variable1 = 2
var variable2 = variable1 - 3; // variable2 = 2-3 = -1
var variable3 = variable2 * 5; // variable3 = -1*4 = -5
var variable4 = variable3 / 2; // variable4 = -5/2 = -2.5

Concatenación

var nombre = "Pepito";
var saludo =  "Hola " + nombre; // saludo = "Hola Pepito"

Nota: String + Number = String

Funciones

Definición para programación:

Una función es un fragmento de código reutilizable que se ejecuta únicamente cuando es llamada, devuelve un resultado, puede recibir parámetros, manejar sus propias variables y tener un nombre asociado.

Fragmento de código con nombre asociado, reutilizable.

var nombre = "Pepito";

function mostrarNombre() {
    var saludo =  "Hola " + nombre;
    alert(saludo);
}

mostrarNombre();
nombre = "Juancito";
mostrarNombre();

Devuelve un valor

var nombre = "Pepito";
function saludar() {
    var saludo =  "Hola " + nombre;
    return saludo;
}
var saludo = saludar();
alert(saludo);
nombre = "Juancito";
alert(saludar());

Recibe parámetros

function saludar(nombre) {
    var saludo =  "Hola " + nombre;
    return saludo;
}

alert(saludar("Pepito"));
alert(saludar("Juancito"));

Funciones dentro de otras funciones

function saludar(nombre) {
    function crearSaludo() {
        return  "Hola " + nombre;
    }
    alert(crearSaludo());
}

saludar("Pepito");
saludar("Juancito");

function es un tipo de datos

var sumar = function (a, b) {
    return a + b;
};
sumar(1, 3);
sumar(6, 9);

Protegiendo las variables

(function () {
    var a = document.getElementById("a");
    a.innerHTML = "Hola Mundo";
})();

Eventos, forma 1

function botonPresionado() {
    alert("Hola Mundo");
}

<button onclick="botonPresionado();">Haceme click</button>

Eventos, forma 2

(function () {
    var boton1 = document.getElementById("boton1");
    boton1.onclick = function () {
        alert("Hola Mundo");
    };
})();

<button id="boton1">Haceme click</button>