Skip to main content
Categories
Reto

JavaScript desde 0 – día 1

Listado de todos los días del reto: A 30 days of JavaScript programming challenge

Este artículo está basado en: Day – 01

Requisitos para practicar con JavaScript

  • Tener un navegador web como Google Chrome aunque puedes usar cualquier otro como Firefox
  • Instalar Node.js para programar en tu equipo y desarrollar aplicaciones (más avanzado).
  • Usar un editor de código como Visual Studio Code o cualquier otro similar

Otra alternativa para practicar y hacer pruebas es usar entornos online que te facilitan esta tarea como por ejemplo CodeSandbox.io no siendo en este caso necesario que instales Node en tu equipo ni tener un editor de código como VSC.

Ejecutar código JavaScript en el propio navegador

Abre el navegador y accede a las herramientas de desarrolladores, siendo en el caso de Chrome tan fácil como:

  • Windows: Ctl+Shift+I
  • Mac: Command+Option+I

Podemos ejecutar algo de código JavaScript haciendo uso de la pestaña “Console”

La primera función que se puede ejecutar para comprobar su funcionamiento es usar la típica función para hacer “debug” mostrando por pantalla los argumentos que se pasen a la función console.log() dentro de los paréntesis.

console.log( arg1, arg2, arg3 );

Lo único que hace esta función básica de JS es mostrar por la consola del navegador la información que se le pase. Así que como estamos usando la propia consola para ejecutar el código, ahí mismo nos saldrá el resultado como se muestra en la anterior imagen.

Comentarios en JavaScript

Podemos añadir comentarios al código de JavaScript para documentarlo y para ello se usan una serie de métodos para que el texto no se ejecute como si fuera código JavaScript y así quede como texto que el navegador no tratará de ejecutar pero sirve para añadir notas al código.

Por tanto se tratará como comentarios cualquier texto que:

  • Empiece por doble barra: //
  • Quede dentro de: /* */
//Esto es un comentario en JavaScript
/* Esto también
es un comentario
en JavaScript */

La opción de usar /* texto */ facilita los comentarios multilínea.

Sintaxis del lenguaje JavaScript

Al tratarse de un lenguaje de programación este requiere de cumplir con un sintaxis apropiada para que el código se pueda ejecutar correctamente sin errores por parte del intérprete.

Por el momento puedes probar a provocar errores y ver como la propia consola del navegador te informa de los mismos.

Por ejemplo el texto en JS puede ir entre diferentes tipos de comillas pero siempre y cuando se use la misma al inicio que al final de modo coherente.

console.log("Hello, World!")
console.log('Hello, World!')
console.log(`Hello, World!`)

Ya que en otro caso saldrán errores.

Nota: Puedes repetir el último comando o código ejecutado con sólo pulsar la tecla “flecha arriba” del teclado, incluso pulsarla varias veces para ir hacia anteriores códigos que hayas escritos en la consola del navegador.

Operadores Aritméticos JavaScript

Para seguir ejecutando tu primer código con JavaScript puedes hacer uso de operaciones matemáticas básicas como:

console.log(2 + 3)   // Sumar
console.log(3 - 2)   // Restar
console.log(2 * 3)   // Multiplicar  
console.log(3 / 2)   // Dividir
console.log(3 % 2)   // Resto de la divisón
console.log(3 ** 2)  // Exponencial

Añadiendo JavaScript a una página web

Hay varias formas de añadir código JavaScript para que se ejecute en una página web. Lo mejor es que veas las sección código y el vídeo de esta entrada.

Código JS en línea

Poner código dentro de un elemento HTML, como por ejemplo lanzar una alerta “popup” al pulsar un botón

<button onclick="alert('Hello World!')">Pulsar</button>

Código JS dentro de etiquetas propias

Para ejecutar código JavaScript sólo es necesario introducirlo dentro de las etiquetas HTML propias para ello y las cuales funcionan tanto dentro del <head> como del <body> aunque situarlo al final del todo es lo que menos problemas dará ya que se ejecutará cuando el resto de elementos ya estén renderizados.

<!DOCTYPE html>
  <html>
    <head>
      <title>30DaysOfScript:Internal Script</title>
    </head>
    <body>
       <button onclick="alert('Welcome to 30DaysOfJavaScript!');">Click Me</button>
      <script>
        console.log("Welcome to 30DaysOfJavaScript");
      </script>
    </body>
  </html>

Código JS en fichero aparte externo

Similar al anterior pero en vez de usar la etiqueta <script> para introducir dentro el código, la dejamos vacía e indicamos con el atributo “src” donde se encuentra el fichero JS con el código a ejecutar. Ej: index.js

<!DOCTYPE html>
  <html>
    <head>
      <title>Multiple External Scripts</title>
    </head>
    <body>
      <script src ="./helloworld.js"></script>
      <script src="./introduction.js"></script>
    </body>
  </html>

Puedes tener varios ficheros JavaScript y las rutas a estos pueden ser relativas si se encuentran en el mismo servidor o incluso hacia otras sitios webs, indicando la ruta donde se encuentra el fichero a ejecutar.

Tipos de datos en JS

Como en cualquier otro lenguaje de programación hay una serie de tipos de datos soportados, y que de modo primitivo en el lenguaje son los siguientes:

Number – Números

  • Integer: números enteros tanto negativos como positivos … -3, -2, -1, 0, 1, 2, 3 …
  • Float: números decimales … -3.5, -0,003, 1.35, 57.78, …

String – Texto

Colección de uno o más caracteres bajo varios tipos de comillas: “texto”, ‘texto’ o `texto`

Booleans – Booleano

Sólo admite dos estados, considerados como Verdadero o Falso y son normalmente usados para añadir condicionales de control en el código

Undefined – indefinido

Es el valor por defecto para cualquier variable que no tenga un valor declarado, el valor undefined será el valor por defecto. Del mismo modo si una función no devuelve nada en realidad devolverá undefined.

Null – Nulo

En el caso de JavaScript un valor de nulo quiere decir que es un valor vacío.

Revisar el tipo de dato

Con el operador typeof podemos revisar de que tipo se trata un valor o variable dada (ahora vemos que son las variables ).

console.log(typeof 'ReactPress') // string
console.log(typeof 5)          // number
console.log(typeof true )      // boolean
console.log(typeof null)       // object type
console.log(typeof undefined)  // undefined

Variables

Las variables son una especie de contenedores de la información y datos que nos permiten guardar en memoria cualquiera de los tipos de datos mencionados y acceder a ellos con solo recordar el nombre de la variable donde hemos decididos guardarlos.

Por tanto al declarar una variable se reserva un espacio en memoria para guardar un dato que se usará durante la ejecución del código JS.

Declarar una variable

Para declarar una variable solo hay que usar una palabra reservada (var, let, const) seguido del nombre de la variable.

let variableName1
let variableName2
const variableName3

El uso de var, let o const se verá más adelante pero en resumen tiene que ver con la visibilidad y posibilidad de cambio del contenido de las mismas, siendo var y let para variables que varian y const para datos que no varían.

Por otra parte el nombre de las variables tiene que seguir algunas reglas para que sean válidas:

  • NO pueden empezar por números
  • NO se admiten caracteres especiales excepto: $ – _
  • NO pueden existir espacios si el nombre de la variable se compone de varias palabras para darle más significado
  • Se recomienda usar el sistema camelCase: palabras juntas y en minúsculas pero que se inicia la primera letra de cada palabra en mayúsculas excepto la primera palabra.

Por tanto evitar el uso de: nombre-variable, 1_numero, dia_8

A la vez que se declara una variable es posible asignarle en ese momento un valor con solo añadir un = y el valor.

let variableName = 55

Nota: El lenguaje JavaScript de modo nativo al no ser tipado y por tanto no requerir que cada variable se especifique el tipo de dato que guardará, es posible a lo largo del código cambiar a una variable el tipo de dato. Por ejemplo empieza siendo un texto pero luego se convierte en un número

let variableName = 'Hello World';

variableName = 2 + 2;

Importante: como podrás observar al final de cada línea o comando de código escrito como en otros lenguajes de programación hay que terminar con el símbolo ; punto y coma, para así determinar que hemos terminado; en este caso con la declaración o re-asignación de valores en la variable (aunque en otros artículos avanzados veremos que no es del todo así ).

Ejercicios para practicar resueltos en el vídeo:

  1. Escribe un comentario de una sola línea que diga, “Los comentarios pueden hacer que el código sea más legible”.
  2. Escribe seguido otro comentario de una sola línea.
  3. Escribe un comentario de varias líneas.
  4. Crea un archivo aparte y declara variables y asigna tipos de datos de cadena, booleanos, indefinidos y nulos.
  5. En el mismo fichero u otro archivo .js usa el operador JavaScript typeof para verificar diferentes tipos de datos. Verifica el tipo de datos de cada variable.
  6. Declara cuatro variables sin asignar valores.
  7. Declara cuatro variables con valores asignados.
  8. Declara variables para almacenar tu nombre, apellido, y país en varias líneas.
  9. Idem lo anterior pero en una sola línea.
  10. Declara dos variables myAge y yourAge y asígnales valores iniciales y muestra eso datos por la consola del navegador.

Nota: preferentemente usa el Ingles para los nombre de variables y todo el código en general, incluso los comentarios 🙂

Listado de todos los días del reto: A 30 days of JavaScript programming challenge