Este tutorial está destinado a principiantes que quieran aprender a crear una aplicación web sencilla utilizando JavaScript. Le ayudará a comprender la interacción entre JavaScript y un documento HTML, y cómo funcionan juntos para mostrar cosas en el navegador web para que las personas las vean.

Si no tiene absolutamente ninguna experiencia en HTML y JavaScript, no se preocupe. Lo guiaré a través de cada línea de código y le explicaré todo en detalle. Para cuando llegue al final de esta lección, debería comprender mucho mejor cómo funciona JavaScript con HTML para hacer que las páginas web sean interactivas.

En este proyecto, crearemos un generador de cotizaciones aleatorias que muestra una cotización aleatoria al usuario cada vez que presione un botón. Para comenzar, necesitará tres elementos esenciales que casi siempre se utilizan en todos los proyectos web:

un navegador web
un editor de texto
un deseo de construir cosas

Para este tutorial utilizaré el navegador web Google Chrome, el Sublime Text 3 Editor y, por supuesto, mi propio deseo de construir y enseñar. Puede utilizar cualquier herramienta con la que se sienta cómodo.

¡Empecemos!

Lo primero que haremos será crear la carpeta que contendrá todos nuestros archivos que componen el proyecto. Cree una carpeta vacía en su escritorio y asígnele el nombre "generador de cotizaciones". Abre Sublime Text y arrastra el archivo a sublime . Ahora deberíamos tener la carpeta accesible a través de la barra lateral.

La mayoría de los proyectos web constan de al menos un archivo HTML, JavaScript y CSS. Creemos estos archivos dentro de la carpeta "generador de cotizaciones".

En texto sublime,haga clic derecho en la carpeta "generador de cotizaciones" en la barra lateral y haga clic en crear nuevo archivo . Aparecerá una barra de entrada en la parte inferior para nombrar el archivo. Escriba "index.html" y presione enter. Ahora ha creado el archivo index.html. Repita este paso dos veces más , pero cree un archivo llamado "javascript.js" y "style.css" (sin las comillas) . Es importante asegurarse de que cuando asigne un nombre a un archivo, las letras estén siempre en minúsculas para evitar complicaciones.

Ahora que tenemos todos nuestros archivos configurados, creemos nuestro archivo HTML que funcionará como la base de nuestro proyecto web. Comenzaremos con un código HTML básico dentro de nuestro archivo index.html antes de que podamos agregar algo.

A continuación se muestra nuestro archivo HTML sin nada en él. Puede pensar en esto como nuestro esqueleto HTML que contendrá toda la carne (contenido), que agregaremos más adelante.

Ahora, tendremos que vincular nuestro archivo JavaScript a nuestro documento HTML para que nuestro código JavaScript pueda interactuar con el documento HTML. También agregaremos texto dentro del etiquetas, agregue una

elemento, crea un elemento con un nombre de identificación de "quoteDisplay", y también unelemento con un atributo onclick con "newQuote ()" pasado en él.

Rompiéndolo

Si está confundido acerca de cómo cada parte del código HTML cumple su propósito, se lo explicaré aquí. Si sabe exactamente qué hace cada elemento y por qué está allí, puede pasar a la siguiente sección para continuar.

Primero, agregamos "Quote Gen" entre los etiquetas. La etiqueta del título toma el texto entre ellos y lo muestra en la pestaña de su navegador web cuando se abre.

Durante el primer paso, también debemos asegurarnos de vincular el archivo javascript.js en la parte inferior del documento HTML justo antes del cierre. etiqueta.

En segundo lugar, creamos un

elemento con "Generador de cotización simple" dentro de él. Esto servirá para mostrar un título dentro de nuestra página web.
Entonces, creamos un elemento con un atributo id establecido en "quoteDisplay". UN El elemento funciona como divisor de documentos HTML. Los elementos ayudan a organizar el contenido dentro de una página web. El atributo id funciona como un identificador para que JavaScript pueda agarrarlo y manipularlo fácilmente. En este caso, usaremos JavaScript para tomar el elemento con el ID "quoteDisplay" para colocar comillas dentro del elemento.
Después de eso, creamos un elemento con un atributo onclick con "newQuote ()" pasado como parámetro. loselemento, como adivinó, es un botón que hará algo cuando haga clic en él. El atributo onclick se utiliza para configurar una función para el botón, de modo que cada vez que haga clic en el botón, ejecutará la función que se pasó alel atributo onclick .
En este caso, cada vez que haga clic en el botón, ejecutará la función newQuote (), por supuesto, todavía no hemos definido la función newQuote (). Si abre el proyecto dentro de un navegador y presiona el botón, arrojará un error dentro de la consola ya que la función no existe actualmente.
Finalmente, aquí hay un repaso para mostrar cómo se ve actualmente nuestro archivo index.html completo y qué produce en el navegador web. Para abrir el proyecto, use un navegador web para abrir el archivo index.html.

Pensando lógicamente usando código

Finalmente es hora de comenzar a trabajar en JavaScript en nuestro archivo javascript.js para que podamos desarrollar nuestra propia funcionalidad de generación de cotizaciones.

Ahora, antes de comenzar a codificar, pensemos lógicamente en cómo podemos crear una máquina generadora de presupuestos con código. No podemos empezar a codificar sin pensar primero.

Necesitamos averiguar qué queremos y cuándo lo queremos. ¡Para este proyecto, queremos cotizaciones! ¿Cuándo lo queremos? ¡Lo queremos ahora! Oh, erm ... quiero decir que lo queremos cada vez que el usuario presiona el botón.

Ahora que resolvimos la primera pregunta, debemos hacer la segunda. ¿Qué son las citas? Quiero decir, realmente, ¿qué son?

¡Gracias Jaden! ¡Si! Las citas se componen de letras, que forman palabras. En el mundo de la programación, las palabras se clasifican como cadenas, por lo tanto, ¡nuestras comillas deberán ser cadenas !

Como sabemos que tendremos múltiples comillas y cada una se seleccionará al azar, la mejor opción sería almacenar múltiples cadenas dentro de una matriz .

Si aún no lo sabía, los elementos dentro de una matriz se recuperan llamando a su número de índice de matriz . Los detalles técnicos están fuera del alcance de este tutorial, pero en términos simples, cada elemento dentro de una matriz está representado por un número entero en orden cronológico. El primer elemento de una matriz tiene un número de índice de 0, cada elemento posterior aumenta en uno.

Para recuperar una cita aleatoria de una matriz, ahora sabemos que necesitamos producir un número aleatorio cada vez que el usuario hace clic en el botón. Luego, usaríamos ese número aleatorio para recuperar una cita de la matriz y colocarla en el documento HTML, que a su vez, mostraría la cita en el navegador al usuario.

¡Eso es! ¡Resolvimos cómo crear un generador de cotizaciones aleatorias pensando lógicamente en el código! Aquí hay un resumen de la lógica que se nos ocurrió para nuestro proyecto:

Las comillas son varias cadenas que deben almacenarse en una matriz.
Cada vez que se presiona el botón, se debe generar un número entero aleatorio.
El número se utilizará como representación del número de índice de la matriz para la matriz de comillas.
Una vez que recuperamos la cita elegida aleatoriamente de la matriz usando nuestro número entero generado aleatoriamente, la colocaremos en el documento HTML.

¡Tiempo de codificación!

¡Guauu! ¡Hemos llegado hasta aquí y aún no hemos comenzado a programar! ¡Bienvenido al mundo de la programación!

Es una broma.

Realmente no.

Vas a pasar mucho tiempo codificando en esta carrera (o pasatiempo). Pero mi punto es que vas a dedicar más tiempo a pensar en la lógica de programación y en cómo resolver problemas. La programación no se trata de piratear 100 palabras por minuto durante 20 minutos en el teclado. Eso no va a suceder.

Ahora que tenemos toda la lógica fuera del camino. Empecemos a codificar. Ahora trabajaremos dentro del archivo javascript.js .

Necesitamos crear nuestras propias cotizaciones o copiarlas de una fuente en línea.

Busqué en Google “Mejores cotizaciones” y copié las primeras 10 de un sitio web , luego las coloqué en una matriz separada por comas. Asegúrese de colocar sus comillas entre comillas simples o dobles. Si su cita consta de apóstrofos, comillas simples o dobles, es posible que deba usar barras invertidas para escapar de estos caracteres para que JavaScript sepa que los símbolos son parte de la cadena y no la sintaxis de codificación.

Como puede ver en la imagen de abajo, definí una variable llamada "comillas" y la establecí igual a una matriz llena de las comillas que elegí de Internet.

Ahora tenemos que crear nuestra función newQuote () que mencioné anteriormente en la sección HTML de este tutorial. Para nuestra función newQuote (), necesitamos generar un número entero aleatorio que va desde 0 hasta la longitud de nuestra matriz de comillas . Lo explicaré más adelante.

Primero, llamamos a la función Math.floor (). La función Math.floor () toma un parámetro y redondea el número hacia abajo al entero más cercano. Por ejemplo, si llamamos Math.floor (5.7) devolverá 5.

En segundo lugar, pasaremos Math.random () como parámetro a Math.floor (). La función Math.random () generará un número decimal aleatorio entre 0 y 1.

Entonces digamos que tenemos esto:

Si en la consola registramos nuestro randomNumber en este estado, siempre devolverá 0. Esto se debe a que Math.random () siempre será un decimal entre 0 y 1, como 0.4, 0.721, 0.98, y así sucesivamente. Debido a que pasamos Math.random () a Math.floor () como un parámetro, Math.floor () siempre se redondea al decimal más cercano, por lo tanto, cada decimal entre 0 y 1 siempre volverá a 0.

Entonces, ¿cuál es el punto de hacer esto? Bueno, para crear nuestros números de índice de matriz, necesitamos números enteros, pero necesitamos números enteros aleatorios. Para generar números enteros aleatorios y dejar de devolver solo 0, necesitaremos tomar nuestro decimal aleatorio y multiplicarlo por un número entero.

Ahora intentemos algo como esto:

Si registramos en la consola el número aleatorio, los resultados estarán entre 1 y 19. Ahora podría usar este estado actual de número aleatorio para extraer una cita de la matriz de comillas, pero solo funcionará si el número de índice de la matriz existe dentro de la matriz de lo contrario, se producirá un error.

Por ejemplo:

Actualmente solo tengo 10 cadenas dentro de mi matriz de comillas, por lo que cualquier número superior a 9 devolverá indefinido ya que no existe dentro de la matriz.

Para resolver este problema, solo necesitamos multiplicar Math.random () con la longitud de nuestra matriz de comillas. Al hacer esto, podemos agregar o eliminar tantas cadenas de la matriz como queramos y nuestra variable randomNumber siempre devolverá un número válido ya que estamos usando el método quotes.length para obtener siempre la longitud actual de nuestra matriz.

Ahora necesitamos una forma de usar el valor de randomNumber para recuperar aleatoriamente una cita de la matriz de citas y colocar la cita en nuestro documento HTML y mostrársela a nuestros usuarios.

Recuerda que mencioné que usamos HTMLID para permitir que JavaScript agarre y manipule fácilmente elementos HTML? Bueno, eso es lo que estamos haciendo ahora con el ID HTML quoteDisplay que creamos anteriormente.

Usando document.getElementById () podemos pasar cualquier cadena y JavaScript buscará en nuestro documento HTML y lo recuperará para usarlo para hacer lo que queramos con él. Pasaremos 'quoteDisplay' como parámetro para recuperar el elemento HTML con el id de "quoteDisplay".

Ahora usaremos el método .innerHTML para pasar una cita recuperada aleatoriamente de nuestra matriz como el valor que se agregará a nuestro elemento HTML quoteDisplay.

Establecemos innerHTML igual a nuestra matriz de comillas con nuestra variable randomNumber pasada como un número de índice de matriz. ¡Ahora nuestra función newQuote () está completa!

¡Misión cumplida!

Si ha llegado a esta parte del tutorial, ¡ha completado el proyecto! ¡Felicidades! Prácticamente ha terminado de construir el generador de cotizaciones aleatorias.

¡Ahora todo lo que necesita hacer es abrir el proyecto en su navegador y ver si funciona! Haga esto arrastrando su archivo index.html a la ventana de su navegador.

Presione el botón y debería mostrar una cita aleatoria en su pantalla. Pulsa el botón tantas veces como quieras. Cada vez, una nueva cotización debe reemplazar la actual en pantalla.

Puede agregar tantas comillas como desee en la matriz de comillas.

Eche un vistazo a una descripción general de todos nuestros archivos de proyecto uno al lado del otro que componen este generador de cotizaciones aleatorias.

¿Ahora que?

Ha creado un generador de cotizaciones aleatorias completamente funcional y probablemente se esté preguntando a dónde va desde aquí.

Probablemente esté pensando que este generador de cotizaciones aleatorias parece muy aburrido y que probablemente nadie lo usaría. Y tienes toda la razón. Este proyecto parece bastante sencillo y depende de usted cambiarlo.

Puede mejorar este proyecto agregando sus propias funcionalidades y estilo.

Al comienzo de este tutorial creamos un archivo style.css que no usamos. CSS se utiliza para crear páginas web bonitas y coloridas. Depende de usted agregar el estilo al archivo CSS si lo desea.

Puede buscar algunos tutoriales de CSS para obtener orientación adicional. ¡Deja volar tu imaginación y haz tuyo este proyecto! ¡Haz lo que quieras! ¡La codificación es mágica y tú eres un mago, Harry!

Si tiene curiosidad por ver cuánto puede cambiar un proyecto con CSS y algunas líneas más de código JavaScript, consulte mi propia versión de este generador de citas aleatorias que titulé "Epiphany Clock"aquí .

Si te gustó este tutorial, haz clic en el botón del corazón y compártelo. No dude en dejar comentarios, preguntas o comentarios. ¡Gracias y feliz codificación!