Categorías
Video2Brain

01 – Aproximación a JavaScript

1.1.Qué es JavaScript

  • JavaScript es un lenguaje de programación que, en un principio, fué creado para la Web, para dar interactividad a nuestras páginas webs.
  • JavaScript por sí sólo tiene poco potencial a la hora de crear webs, ya que tiene que ir de la mano de otros dos lenguajes específicos para crear páginas, como son: HTML5 y CSS3.
  • HTML5 crea la CAPA DE CONTENIDO mediante un lenguaje de marcado o de «etiquetas», mediante el cual le decimos al navegador el «contenido» de nuestra página web.
  • Tenemos la siguiente capa, la CAPA DE PRESENTACIÓN, de la cual se encarga CSS3, y esta se ocupa de dar una presentación «atractiva» a nuestro contenido en la página web.
  • Finalmente tenemos la última capa, DE INTERACTIVIDAD (TAMBIÉN DE PRESENTACIÓN), que le dota de mayor actividad a nuestra página, permitiéndonos controlar «clicks» en botones, controlar «registros en formularios»«recoger datos externos para nuestra página», etc.

1.2.Herramientas y entorno de trabajo

  • Las herramientas básica para programar en JavaScript son: «un navegador web», «un editor de texto», y a veces, «un programa con acceso a la línea de comandos».
  • Como navegadores podemos utilizar los más comunes: «Google Chrome», «Mozilla Firefox», o en caso de utilizar Mac, «Safari».
  • Para desarrolladores tanto Google como Mozilla tienen versiones específicas: «Chrome Canary» y «Firefox Developer».
  • Los editores de texto nos permitirán escribir o editar nuestro código. Los más habituales ahora mismo son: «Visual Studio Code», «WebStorm», «SublimeText», «Atom». En el curso de trabajará con la primera, «Visual Studio Code».
  • Cuando sea necesario trabajar con la línea de comandos, en Mac, podremos trabajar con «Terminal», «iTerm»; y en Windows, con «Command» o «Windows PowerShell».

1.3.Conoce el material de tu curso

  • El material con el que se va a trabajar durante el curso se encuentra en la carpeta denominada «archivos_base_javascript.zip»; allí se encontrarán los diferentes ejercicios que iremos realizando durante el mismo.
  • La recomendación es que, cuando encontremos un archivo «index.html» y otro con extensión «.js», abramos primero el «.html» y después el «.js», así podremos ver la correlación que hay entre uno y otro.
  • Para cada uno de los temas, tendremos una serie de archivos específicos.

1.4.Tu primer JavaScript

  • Iremos a la ruta dónde está nuestro primer fichero «index.html», la cual es esta:  «\archivos_base_javascript\1 – Conociendo JavaScript\01 – Tu primer JavaScript».
  • Lo ideal sería empezar el archivo «index.html» de cero, o sea, abriendo un archivo nuevo sin ningún tipo de código.
  • Para ello, desde VisualStudio Code, le damos a crear «Nuevo Archivo» y le ponemos por nombre «index.html».
  • A continuación en la primera línea escribimos «html5+tabulador»; esto lo que hará será, mediante un snippet (una serie de líneas de código ya preconfiguradas) crearnos la estructura básica de un archivo «.html».
  • Quitaremos la línea que se refiere a los estilos «.css», y añadiremos la etiqueta «<script/>», para insertar nuestro código JavaScript.
  • El código quedará así:
<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script>
            alert('Hola Mundo');
        </script>
    </head>
    <body>
    
    </body>
</html>
  • Este ejercicio, aunque sencillo, lo que ha hecho es crearnos una «alerta» en JavaScript, una de las funciones que se muestran en JavaScript para ofrecer información al usuario.

1.5.Elementos básicos de JavaScript

  • Lo primero que debemos entender es que podemos ejecutar código JavaScript de dos maneras diferentes: la primera, «desde dentro de nuestros archivos HTML», y la segunda, «desde archivos .js independientes».
  • La primera, como hemos visto anteriormente, es mediante la etiqueta «<script></script>»; todo código JavaScript que insertemos entre estas dos etiquetas se ejecutará en nuestra página «.html».
  • Escribir nuestro código de esta manera hará que no podamos mantener facílmente el mismo, por lo cual se recomienda, en casi todos los casos, escribir este código en archivos externos como hemos dicho anteriormente.
  • Para ejecutar el código externamente, crearemos, en la misma ruta anterior en la que hemos creado nuestro «.html», una carpeta llamada «js», en la cual almacenaremos todos nuestros archivos «JavaScript».
  • En nuestro caso crearemos el archivo «app.js», y dentro escribiremos el siguiente código:
alert('Hola desde un archivo externo');
  • Después deberemos ligar este archivo «.js» con nuestro archivo «.html». Para ello haremos esto en éste último:
<script src="js/app.js"></script>
  • De esta manera comprobaremos que tenemos «dos alertas«: la primera que será la del «archivo externo .js», y la segunda de la «etiqueta <script>» interna de nuestro archivo «.html».

1.6.Aprendiendo a usar la consola

  • La «consola» de nuestro navegador es una herramienta muy útil y necesaria para el desarrollo de nuestros proyectos web, ya que nos permitirá «probar» «ejecutar» nuestro código desde dentro de nuestro navegador.
  • La manera que tenemos de ejecutarla es la siguiente: dentro del navegador, damos click derecho y vamos a «Inspeccionar»; entre las muchas pestañas que nos salen encontraremos la que nos interesa, que es «Console».

  • Aquí podremos probar nuestro código e incluso hacer otras operaciones diversas, como operaciones artiméticas, además de enviar a la misma desde un archivo externo la información que nos interese.
  • Por ejemplo, siguiente con nuestro archivo «app.js», a la línea que ya teníamos anteriormente, añadiremos la siguiente:
console.log('Hola consola');
  • Esto lo que realizará será, después de los dos mensajes de alerta que ya hemos visto, enviará a nuestra «consola» el mensaje «Hola consola».
  • Este mensaje se podrá enviar como acabamos de ver desde el archivo externor «app.js», pero también podremos hacerlo desde el archivo «index.html», de esta manera:
<script>
            alert('Hola Mundo');

            var nombre = "Sergio";
            console.log('El nombre es: ', nombre)
        </script>
  • De esta manera hemos realizado varias cosas:
    • Primera: hemos creado la alerta «Hola Mundo»,
    • Segunda: hemos creado una variable llamada «nombre» con el valor «Sergio».
    • Tercero: Enviamos a «consola» un texto más el valor de la varible «nombre».
  • De esta manera, hemos comprobado como podemos ejecutar código JavaScript desde un archivo externo «.js» o desde un «script» dentro de un archivo «.html».

1.7.Escribiendo comentarios en JavaScript

  • A veces al escribir código, podemos querer que el navegador ignore cierta línea que hemos escrito por diferentes motivos, vamos que no la ejecute.
  • Para ello, utilizamos la sintaxis de «comentario», que nos permitirá, bien insertar «comentarios en nuestro código», o bien, «anular una línea o más de código que no queremos que se ejecuten».
  • Para ello utilizaremos la doble diagonal «//» para «comentarios de una sóla línea»:
// alert('Hola desde un archivo externo');
  • Si queremos realizar comentarios de varias líneas, lo que se conoce como «comentarios de bloque», deberemos escribirlos con «/*» al principio del bloque, y, «*/» al final del bloque, de esta manera:
<script>
          /*  alert('Hola Mundo');

            var nombre = "Sergio";
            console.log('El nombre es: ', nombre) */
        </script>

El uso más común de la doble diaonal «//» será, como hemos comentado, la de establecer algún comentario a nuestro código, para tener una referencia nosotros u otros desarrolladores cuando tiempo después volvamos a examinar el mismo.

// Este es un mensaje de la consola
console.log('Hola consola');

1.8.Qué es Strict Mode

  • El «Strict Mode» nos sirve para asegurar que estamos escribiendo código dentro de las buenas prácticas de JavaScript y también para asegurarnos que en el mismo no estamos usando palabras reservadas por el lenguaje.
  • Para utilizar este modo, siempre deberemos escribir «al inicio de todos nuestros archivos JavaScript» la palabra «use strict».
  • Si posteriormente escribimos lo siguiente:
x = "3.1416";

veremos como nos da un error en nuestra consola, ya que no hemos declarado la variable previamente.

Para que esto funcione correctamente, deberemos declarar nuestra variable de esta manera:

var x; 

x = "3.1416";

y de esta manera la consola no nos escupirá ningún error.

Ahora probamos a declarar una variable pero esta vez con una palabra reservada, así:

var public= "Hola";

Con esto, la consola nos dirá que hemos cometido un error, ya que «hemos declarado una variable con una palabra reservada».

Para arreglar esto, declararemos la variable con otro nombre, en nuestro caso «publicData», y de esta manera no nos saldrá ya ningún error:

var publicData = "Hola";

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *