Introducción a JavaScript

Tutorial de JavaScript - Introducción:

No voy a explayarme demasiado dando detalles de la programación en JavaScript ni su historia ni nada por el estilo, vamos directamente a ver cómo aplicar JavaScript a nuestra web, y luego algunas buenas prácticas, las cuales las iré subiendo de a poco, solo ténganme paciencia.

Bien... Cordiales Saludos y aquí vamos...

Entrando en Materia

Antes de comenzar vamos a ver algunas declaraciones importantes para incluir código JavaScript en nuestras páginas Web.

El siguiente código es la estructura básica de una página html 5 con sus respectivas Cabeceras, por ejemplo: ...de codificación de caracteres utf-8, y el viewport para dar soporte a las distintas pantallas en que se visualizará la página.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- Aquí podremos incluír funciones JavaScript //-->
        <!-- También llamadas a librerías JavaScript //-->
    </head>
    <body>        
        <!-- Aquí va el contenido de la página //-->
        <!-- y por qué no, más código JavaScript //-->
        <!-- incluso llamadas a oootras librerías JavaScript //-->
    </body>
</html>

DÓNDE INCLUIR CÓDIGO JAVASCRIPT?

A mi parecer, sólo en 4 lugares fundamentales, veamos...

En la Cabecera de la página: entre de las etiquetas <head>...</head> Generalmente funciones o declaraciones que serán utilizadas por la página en un determinado instante o cuando se dispare algún evento.
Dentro del cuerpo de la página: entre <body>...</body>

En ambos casos el código JavaScript debe ir entre etiquetas <script>...</script>.

<script>
    alert("Mensaje de JavaScript");	// función JavaScript    
</script>

En un archivo externo al documento: En este caso se crea un script dentro de la página que enlaza con el archivo JavaScript mediante el atributo "src". El script debe ir dentro de las etiquetas <head>...</head>. Veamos un ejemplo para enlazar al archivo "funciones.js"

<head>
    <title> new document </title>
    ...
    <script src="funciones.js"></script>
</head>

Otra es incluírlo dentro de una etiquetas html del documento: generalmente cuando es necesario que la página responda a algún evento disparado por el usuario (escribir en un cuadro de texto, cuando hace clic en un lugar determinado, cuando selecciona un objeto, etc.). Aquí un ejemplo:

<p onclick="alert('Mensaje de Prueba')">Ver el mensaje.</p>

COMENTARIOS:

Los comentarios en JavaScript pueden ser en línea (utilizando doble barra //) o bien en varias líneas (utilizando /*...*/), observa el siguiente ejemplo:

// este es un comentario de una sola línea

/* 
    Éste en cambio
    está escrito
    en varias líneas
*/

Dónde probar los Script de esta Página

Los códigos de prueba que no requieran uso de funciones las pondremos en el cuerpo de la página o se entre <body>...</body>, pero siempre utilizando las etiquetas de script.

Cuando necesitemos funciones, las escribiremos en la cabecera de la página o sea entre <head>...</head> y las llamadas a dichas funciones las pondremos en el cuerpo de la página o sea entre <body>...</body>.

Aquí un ejemplo para que quede más claro.

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
            <script>
            /*------ Aquí incluiré las FUNCIONES JavaScript ------*/
            </script>
        </head>    
        <body>
            <script>
                /*--- Aquí las LLAMADAS A FUNCIONES que se encuentren en el head ---*/
                /*-- Y Aquí agregaremos otros CÓDIGOS DE PRUEBA, ya veremos ---*/
            </script>
        </body>
    </html>

Cómo ver los resultados de nuestro código

Lo importante cuando probamos lo que hacemos, es ver los resultados, y aquí lo haremos de tres formas, una es utilizando una función, que devuelve el resultado como una cadena de texto en un cuadro de diálogo, pega el siguiente código en el cuerpo de una página y ve lo que hace...

<script>
    let saludo = "Hola Pascual...!!!";
    alert(saludo);    
</script>

La otra es escribiendo en el documento, es algo así, copia y pega el siguiente código en el cuerpo de una página y mira lo que hará...

<script>
    let saludo = "Hola Pascual...!!!";
    document.write(saludo);    
</script>

y porqué no también la opcion de escribir en la consola utilizando console.log

<script>
    let saludo = "Hola Pascual...!!!";
    console.log(saludo);
</script>

Bien, y con ésto ya estamos listos para comenzar a probar algunos script, pero antes un poquitín de teoría básica o conceptos fundamentales para que no cometas demasiados errores.