Tutorial básico de programación web, desde cero.

En este post aprenderás sobre programación web, empezando desde lo más básico 💻

• Herramientas que necesitas para empezar a programar

Una de las herramientas principales con las que puedes empezar a programar es tu computadora. Y en este tutorial solo necesitarás usar el navegador web de tu preferencia. 

Puedes usar un navegador como Google Chrome, Microsoft Edge o cualquier otro que prefieras.

 

• Conoce la opción de "Inspeccionar" y aprende a usar la consola.

En el navegador, vas a ir a un lugar que es básicamente una página en blanco.

Para ello escribe en la barra de direcciones lo siguiente:

    about:blank

 

Al darle Enter, tendrás una página en blanco.

Y ahora, ¿cómo programamos...?

 

Primero haz click derecho en un espacio vacío.

Y luego ve a la opción Inspeccionar. Ahí veras los elementos que le permiten al navegador funcionar.

En esos elementos, hay uno que se llama console o consola. Vas a darle click en ese lugar.

 

Ahora, vamos a escribir allí nuestra primera línea de código. Por ejemplo:

 

Si tu escribes A = 1 y le das Enter, te saldrá un 1. Y si de nuevo oprimes la letra A y le das otra vez Enter, verás que la A sigue siendo 1...

 

Ahora vamos a escribir B = 2 y le damos Enter.

 

¿Qué pasa si escribimos A + B? 

Le damos Enter y efectivamente es igual a tres (3). Esto es porque por dentro de la computadora estamos asignando un valor a cada letra. El valor 1 a la letra A y el valor 2 a la letra B. 

 

Lo que estamos haciendo es usar estas letras en forma de variables y asignándoles un valor. Estas variables tienen sus reglas. Pero más adelante lo explicaré. Por ahora veamos algo más interesante.

 

Así como hicimos para guardar el 1 dentro de la A. Si escribes: 

C = A - B, podremos guardar el resultado de A - B en la variable C.

 

¿Cuánto valdrá C? 

    

Simplemente es cuestión de darle Enter, y vemos que C = (-1), porque: (1) - (2) = (-1). Y si escribes otra vez C, y le das Enter, ahí está, el mismo valor, (-1).

 

Vemos que, al asignar un valor a una variable en consola, esta se mantiene con ese mismo valor, hasta que recarguemos o le demos cerrar al navegador.

• Aprende a usar el comando alert

 

Hay algo mucho más interesante y es disparar una alerta. ¿cómo se dice alerta en inglés? Se dice "alert".

 

Entonces, simplemente escribimos la palabra alert. Luego abrimos paréntesis, y dentro, abrimos comillas dobles y escribes:

 

"Acabo de aprender a programar"

 

Es muy importante que sigas estas reglas de una manera precisa. Eso significa que alert tiene que escribirse todo en minúscula. Que justo después del alert, sin escribirle un espacio, escribas un paréntesis. Inmediatamente después del paréntesis pones unas comillas (estas deben ser comillas normales). Dentro de las comillas escribes el mensaje que quieras. Luego tienes que cerrar las comillas. Por último, cierras el paréntesis. Y te quedará así:

 

alert("Acabo de aprender a programar")

 

Al darle Enter a este comando, te disparará una alerta en el navegador.

 

Y la alerta dirá: "Acabo de aprender a programar".

• ¿Qué es una variable?

 

Ahora sí, te voy a explicar lo que es una variable y cuáles son sus reglas.

 

Una variable es una palabra o letra a la cual se le puede asignar o guardar un valor, que puede variar, cada vez que lo cambiemos. 

 

Al inicio, nosotros tomamos la variable A y le asignamos el valor de uno. La forma que le asignamos ese valor es con el signo de igual (=). El igual (=) es un operador de asignación.

 

En el momento en que yo digo que una variable es igual a un número, lo que estoy haciendo es colocar ese número dentro de esa variable.

 

De esa manera, A = 1 y B = 2.

 

Exactamente igual que en las matemáticas tradicionales, cuando yo digo que C = A + B, estoy haciendo lo mismo. Pero, después del igual (=) estoy ejecutando una operación de suma, usando el operador de suma (+). 

Entonces el computador lo que hace es tomar el valor de A, que fue declarado primero, luego el valor de B que fue declarado después, y procede a resolver la operación matemática que hay entre ambas variables. Así, ese valor final se asigna a la variable.

 

• ¿Dónde se guarda todo esto?

 

Se guarda en la memoria de corta duración de la computadora. La cuál es conocida como RAM o "Random Access Memory"

 

La RAM es la forma en la que nuestra computadora guarda lo que estamos viendo en el computador mientras esté encendido. Cuando nosotros reiniciamos nuestra computadora, esa memoria se borra por completo. Pero mientras estamos trabajando, ahí estará.

 

Mientras que nuestros archivos, por ejemplo, están en otra memoria llamada disco duro, que es el disco de almacenamiento de larga duración. 

 

Entonces, lo que pasa cuando creamos una variable es que el computador la guarda en la memoria RAM.

 

Pero el alert funciona de una manera distinta. Alert es una función.

 

• ¿Qué es una función?

Una función es bloque de código, que puede ser largo o corto, pero debe tener un objetivo. 

En este caso, el objetivo del alert es disparar un mensaje de alerta.

 

Las funciones se invocan para que la computadora pueda extraerlas y ejecutarlas.

 

La forma en la que se invocan es con paréntesis ( ) justo después de escribir el nombre de la función.

 

Dentro del paréntesis va algo que se llama parámetro.

 

El parámetro es el valor que le mandas a la función para que ejecute algo. 

 

Así como a la variable le asignas un valor, pues a la función le asignas un parámetro. Y en este caso debe ir entre comillas.

Es importante saber que todo lo que esté entre comillas dentro del código, es conocido como cadena de texto o "string".

 

La forma en la que la industria de la programación llama a los textos es "string".

 

Entonces, al usar las comillas, la computadora lo interpreta como cadena de texto.

 

Y de hecho tú puedes tener una variable llamada perro que sea igual a "Pluto". Mientras lo tengas entre comillas, la computadora va a entender que es un texto. 

 

Pero si no tienes ese valor entre comillas, la computadora va a creer que es el valor de una variable; la va a buscar y como la variable perro todavía no existe, entonces la palabra perro no tendrá ningún valor.

 

Entonces veamos: si escribes perro = Pluto y le das enter, te sale un error.

 

Ahora, ¿qué pasa si escribes perro y le das enter? También te dará error.

 

Pero si escribes perro="Pluto" y le das Enter, ahí sí te saldrá en consola la palabra 'Pluto'.

Y luego, cada vez que invoques la variable perro te saldrá otra vez  'Pluto'.

    

Espero haberte ayudado a entender estos conceptos básicos de la programación web y también que hayas realizado los pasos que describí en este tutorial para que aprendas aún más.  🌐