Przewodnik krok po kroku dotyczący tworzenia generatora losowych ofert za pomocą JavaScript
Cześć! To znowu ja, osoba zajmująca się samouczkiem JavaScript. Teraz utworzę aplikację do generowania losowych ofert przy użyciu JavaScript. Tak, wiem, że to podstawowy samouczek, ale wszystko zaczyna się od podstaw, prawda?
Zacznę od stworzenia bardzo prostego generatora losowych ofert, dane ofert są zakodowane na stałe w JavaScript i nie są stylizowane. Chcę tylko pokazać podstawową zasadę pobierania danych z tablicy danych do interfejsu przeglądarki. Jeśli to zrozumiesz, z łatwością zrozumiesz, jak pobrać dane z API.
Ok, dość wstępu, przejdźmy do rzeczy!
- Utwórz plik HTML, możesz nazwać go jak chcesz, wolę
index.html
i umieść ten kod:
<!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>Random Quote Generator</title> </head> <body> <div id="quote"></div> <button id="generate-btn">Generate Quote</button> <script src="script.js"></script> </body> </html>
- Teraz, jak widzisz, umieściłem przycisk o identyfikatorze
generate-btn
, ten przycisk wyświetli cytat, jeśli go klikniesz - Stwórzmy JavaScript wewnątrz
script.js
// An array of quotes to choose from const quotes = [ { quote: "The greatest glory in living lies not in never falling, but in rising every time we fall.", author: "Nelson Mandela", }, { quote: "The way to get started is to quit talking and begin doing.", author: "Walt Disney", }, { quote: "If life were predictable it would cease to be life, and be without flavor.", author: "Eleanor Roosevelt", }, { quote: "Your time is limited, don't waste it living someone else's life.", author: "Steve Jobs", }, { quote: "Life is what happens when you're busy making other plans.", author: "John Lennon", }, ]; // Function to generate a random quote from the array function generateQuote() { // Choose a random index from the array const index = Math.floor(Math.random() * quotes.length); // Get the quote object at the chosen index const quote = quotes[index]; // Build a string with the quote and author const quoteString = `"${quote.quote}" - ${quote.author}`; // Set the text of the quote div to the generated string document.getElementById("quote").innerHTML = quoteString; } // Add an event listener to the button to generate a new quote when clicked document .getElementById("generate-btn") .addEventListener("click", generateQuote);
Zauważysz, że zakodowaliśmy cytat w JavaScript:
// An array of quotes to choose from const quotes = [ { quote: "The greatest glory in living lies not in never falling, but in rising every time we fall.", author: "Nelson Mandela", }, { quote: "The way to get started is to quit talking and begin doing.", author: "Walt Disney", }, { quote: "If life were predictable it would cease to be life, and be without flavor.", author: "Eleanor Roosevelt", }, { quote: "Your time is limited, don't waste it living someone else's life.", author: "Steve Jobs", }, { quote: "Life is what happens when you're busy making other plans.", author: "John Lennon", }, ];
Nazwiemy to quote
wewnątrz naszej funkcji generateQuote()
.
Rozłóżmy tę funkcję:
// Choose a random index from the array const index = Math.floor(Math.random() * quotes.length);
- W pierwszym wierszu naszej funkcji
generateQuote()
będziemy indeksować naszą wycenę, używającMath.floor
iMath.random
razy całkowitego cytatu, który mamy za pomocą.length
. Zasadniczo chcemy wygenerować losową liczbę z zakresu od 0 do całkowitego cytatu, jaki mamy. Więcej informacji na tematMath.random
iMath.floor
znajdziesz tutaj.
// Get the quote object at the chosen index const quote = quotes[index];
- W drugiej linii przechwycimy losowe indeksowanie wewnątrz zmiennej
quote
. Na przykład, jeśli indeks losowy wynosi 1, wartość zmiennejquote
wynosiquotes[1]
, co jest cytatem Walta Disneya.
// Build a string with the quote and author const quoteString = `"${quote.quote}" - ${quote.author}`;
- Teraz wstawimy wartość z tablicy
quotes
doquoteString
. To, co tutaj umieścimy, to wartość z wybranego cytatu ze zmiennejquote
w kroku 2.
// Set the text of the quote div to the generated string document.getElementById("quote").innerHTML = quoteString;
- Tak, być może już rozumiesz, co to jest. Umieściliśmy naszą wartość
quoteString
w naszym elemencie HTML o identyfikatorzequote
. - OK, ale sama ta funkcja nic nie zrobi, jeśli jej nie nazwiemy. Wywołajmy funkcję klikając
generate-btn
, którą umieściliśmy wcześniej w naszym kodzie HTML
// Add an event listener to the button to generate a new quote when clicked document .getElementById("generate-btn") .addEventListener("click", generateQuote);
Teraz posiadasz funkcjonalny generator losowych ofert, dobra robota, jak dotąd! Teraz rozumiesz podstawową zasadę wykorzystania niektórych danych i umieszczenia ich w widoku przeglądarki.
Następnie ulepszymy ten generator losowych ofert, korzystając z interfejsu API. Do zobaczenia później w następnym samouczku!
Wesprzyj mnie w Kup mi kawę, jeśli uznasz ten post za przydatny, klikając przycisk Daj napiwek poniżej ☕. Śledź mnie na Twitterze @DevMazaya.