cliente/01.sintaxis.html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sintaxis</title>
  <link rel="stylesheet" href="style.css">
  <script>
    
    // Interrumpe la carga de la página y sale en blanco:
    // confirm('¿Desea continuar?')
    
    // Descomenta la línea para comprobarlo:
    // alert('Hola mundo desde head');

  </script>
</head>
<body>
  <h1>Sintaxis</h1>

  <p>
    <strong>JavaScript</strong> (abreviado comúnmente <strong>JS</strong>) es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.
  </p>

  <p>Siempre usamos ECMAScript posterior a 2016.</p>

  <h2>Javascript Output</h2>

  <h3>innerHTML</h3>

  <p id="p1">Escribe algo aquí.</p>
  <p id="p2">Escribe algo aquí.</p>
  
  <script>
    // Buscamos el elemento con id="p1" y le cambiamos el contenido:
    document.getElementById("p1").innerHTML = "<a href='#'>Este p es strong! -> elemento p1</a>"
    // Buscamos el elemento con id="p2" y le cambiamos el contenido:
    document.getElementById("p2").innerHTML = "<strong>Este p2 es strong!</strong> p2"
    // Probad a cambiar las etiquetas manteniendo las comillas: " ... "
  </script>

  <h3>document.write()</h3>
  <script>
    document.write("<h4 style='text-decoration: underline;'>Este h3 es escrito con document.write()</h4>")
  </script>

  <h3>alert</h3>
  <script>
    // Descomentar para probar:
    // alert('Hola mundo desde body');
  </script>

  <h3>console.log()</h3>
  <script>
    let x = 5;
    x = x + 2;
    // Esperamos que x sea 7:
    console.log('El valor de x es:', x);
  </script>

  <h2>Declaraciones</h2>
  <script>
    // Si ponemos ; no hace falta saltar línea:
    var a = 5; var abc = "algo";
    let b = 10;
    let d, e, f=1;
    // d y e son undefined pero f vale 1:
    console.log(d, e, f);
  </script>

  <script>
    // Si no ponemos ; hay que saltar línea:
    var a
    var g = 1
    console.log(a, g)
  </script>

  <h3>Espacios en blanco</h3>

  <script>
    // Se puede hacer esto:
    let t       = 5;
    let pepito  = "Pepito";
    
    // En la medida de lo posible hay que usar variables o línea no demasiado largas:
    
    /* let miVariableSuperLargaEnJS = document.getElementById("miIdSuperLargoEnJS")
                                    .innerHTML;*/
  </script>


  <h3>Sintaxis</h3>

  <p>Consideraciones de sintaxis en JS:</p>
  <ul>
    <li><strong>JavaScript Values: </strong>
      los valores pueden ser fijos declarando variables con <code>const</code> o pueden ser <em>variables</em> usando <code>var</code> <strong>(obsoleto)</strong> o <code>let</code>. <strong>Nota:</strong> se recomienda usar <code>let</code> o <code>const</code> actualmente.
    </li>
    <li><strong>JavaScript Literals: </strong>
    los números en JS pueden colocarse con decimales o sin decimales. Se usa el punto decimal <code>.</code> y se pueden separar grupos de ceros con <code>_</code>: 
    <pre>
      <code>
        100.50  -> 100.50
        100     -> 100
        1_000   -> 1000</code>
    </pre>
    Las comillas simples <code>'</code> y dobles <code>"</code> se pueden usar para strings. Si necesitamos colocar comillas dobles dentro podemos escaparlas con <code>\</code>:
    <pre>
      <code>
        "Hola 'mundo'"    -> Hola 'mundo'
        "Hola \"mundo\""  -> Hola "mundo"</code>
    </pre>
    </li>
    <li><strong>JavaScript Variables: </strong>
    Las variables se deben declarar con <code>let</code> o <code>const</code>:
    <pre>
      <code>
        let x = 5;    // Se puede cambiar su valor pero no se puede volver 
                      // a delcarar esta variable
        const y = 6;  // No se puede cambiar su valor</code>
    </pre>
    </li>
    <li><strong>JavaScript Operators: </strong>
    los operadores son símbolos que nos permiten realizar un cálculo o modificación de valor en una variable. Los veremos en el tema de operadores.
    <pre>
      <code>
        let x = 5;
        let y = 6;
        let z = x + y;  // z = 11
        // Operadores aritméticos: + - * /</code>
    </pre>
    </li>
    <li><strong>JavaScript Expressions: </strong>
    las expresiones sirven para realizar cálculos o comparaciones. Se pueden usar en condiciones, bucles, funciones, etc.
    <pre>
      <code>
        let x = 5;
        let y = 6;
        let z = x + y;  // z = 11
        // Más expresiones: x + y, x - y, x * y, x / y</code>
    </pre>
    </li>
    <li><strong>JavaScript Keywords: </strong>
    son las palabras clave que se usan en el lenguaje para determinadas acciones.
    <pre>
      <code>
        let x = 5;
        let y = 6;
        let z = x + y;  // z = 11
        // let es la palabra clave (keyword) para declarar variables</code>
    </pre>
    </li>
    <li><strong>JavaScript Comments: </strong>
    los mismos que en CSS: <code>//</code> para línea y <code>/* */</code> para bloque:
    <pre>
      <code>
        // Comentario de una línea
        
        /* Comentario 
          de varias 
          líneas 
        */</code>
    </li>
    <li><strong>JavaScript Identifiers / Names: </strong>
    los nombre de variables no pueden empezar por números ni usar emojis, nombres válidos son:
    <pre>
      <code>
        let x = 5;
        let x2 = 6;
        let x_2 = 7;
        let _variable = "algo"
        let $ = 8;</code>
    </pre>
    </li>
    <li><strong>JavaScript is Case Sensitive: </strong>
    las mayúsculas y minúsculas se diferencian:
    <pre>
      <code>
        let x = 5;
        let X = 6;
        console.log(x, X);  // 5 6</code>
      </code>
    </pre>
    </li>
    <li><strong>JavaScript and Camel Case: </strong>
    se empieza con minúscula y las siguientes palabras empiezan con mayúscula:
    <pre>
      <code>
        let miVariable = 5;
        let miVariableLarga = 6;
        let miVariableSuperLarga = 7;</code>
    </li>
    <li><strong>JavaScript Character Set: </strong>
    JS usa UTF-8 por defecto así que podemos usar emojis en texto:
    <pre>
      <code>
        let x = "👍";
        console.log(x);  // 👍</code>
    </pre>
    </li>
    <li><strong>¿Por qué no usamos var?:</strong> <code>var</code> permite redeclarar variables ya declaradas anteriormente. Se introdujo <code>let</code> para evitar (no permitir) estas situaciones:
    <pre>
      
      Usando var:
      <code>
        var x = 5;
        var x = 6;
        console.log(x);  // 6</code>
      </code>
      Y con let no se puede:
      <code>
        let y = 5;
        let y = 6;
        console.log(y);  // Error</code>
    </pre>
    </li>
  </ul>

  <script>
    // Crear variables:
    var n;
    let m;

    // Usar variables:
    n = 5;
    m = 6;
    let z = n + m;

    console.log('El valor de z es:', z);
  </script>

  <script>
    // Comentario de una línea
    /* Comentario de varias líneas */
    console.log('Hola mundo');
  </script>

  <!-- Javascript antes de cierre de body -->
  <script src="01.sintaxis.js"></script>
  <!-- Pon el JS aquí ^ -->
</body>
</html>