Fundamentos Básicos de Javascript

Programas De Javascript

Un programa javascript es una lista de declaraciones (statements) que el navegador debe ejecutar.

Cada declaración en javascript se ejecuta de arriba a abajo.

Ejemplo
<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var a = 1; ← declaración primera.
var b = 10; ← declaración segunda.
var c = a + b; ← declaración tercera.
document.getElementById("demo").innerHTML = c; ← declaración final.
</script>

<body>
<html>

Código Limpio

Como en todos los idiomas hay reglas sobre cómo escribirlo.

En javascript es importante agregar puntos y comas ( ; ) al final de cada declaración, si no se agrega, no se ejecutará el codigo.

Es importante escribir siempre un código que sea fácil de leer y mantener. Use comentarios si lo necesita y nunca olvide agregar un punto y coma después de haber terminado con una declaración.

Ejemplo
<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var a = 1;← (;) final declaración.
var b = 10;← (;) final declaración.
var c = a + b;← (;) final declaración.
document.getElementById("demo").innerHTML = c;← (;) final declaración.
</script>

<body>
<html>

Espacios

Los espacios en javascript no afectarán tu código. El navegador los ignorará al ejecutar el código. Agregar espacios a tu código puede hacerlo más legible.

Ejemplo
<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var nombre = "John "; // espacio
var apellido = "Doe"; // espacio
var nombre_completo = nombre + apellido;
document.getElementById("demo").innerHTML = nombre_completo;
</script>

<body>
<html>

Es una buena práctica agregar espacios alrededor de sus operadores (+ - * / =)

Ejemplo
var a = b + c; // Buena práctica
var a=b+c; // Mala práctica

Longitud de línea y saltos de línea

Cuando una declaración no cabe en una sola línea, puede ser necesario romperla. Evite líneas de más de 80 palabras. Coloque el descanso después de un operador, idealmente después de una coma.

Ejemplo
<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var palabra = "javascript";
document.getElementById("test").innerHTML = "Bienvenido a "
+ palabra;
</script>

<body>
<html>

Bloques de código

Los bloques de código son sentencias agrupadas entre paréntesis {..}, que se utilizan principalmente en las funciones cuando se desean ejecutar las declaraciones juntas.

Ejemplo
<!DOCTYPE html>
<html>
<body>

<h4>Ambas declaraciones se ejecutarán al mismo tiempo.</h4>
<button onclick="ejemplo()" type="button">Click</button>

<p id="demo1"></p>
<p id="demo2"></p>


<script>
 function ejemplo() { ← función inico paréntesis
    document.getElementById("demo1").innerHTML = "declaración uno"; ← 
    document.getElementById("demo2").innerHTML = "declaración dos"; ← 
 } ← función paréntesis final
</script>

<body>
<html>
Resultado:

Ambas declaraciones se ejecutarán al mismo tiempo.