JavaScript yordamida tasodifiy takliflar generatorini yaratish bo'yicha bosqichma-bosqich qo'llanma
Salom! Bu yana menman, JavaScript-ni o'rgatuvchi yigitman. Endi men JavaScript-dan foydalanib Tasodifiy Quote Generator ilovasini yarataman. Ha, men bu asosiy qo'llanma ekanligini bilaman, lekin hamma narsa asosiydan boshlanadi, shunday emasmi?
Men juda oddiy Tasodifiy Quote Generator yaratishdan boshlayman, kotirovka ma'lumotlari JavaScript-da qattiq kodlangan va uslublar yo'q. Men sizga oddiy ma'lumotlardan brauzer interfeysiga qanday qilib ma'lumotlarni olishning asosiy tamoyilini ko'rsatmoqchiman, agar buni tushunsangiz, API dan ma'lumotlarni qanday olishni oson tushunasiz.
Mayli, kirish yetarli, keling, sho'ng'iymiz!
- HTML fayl yarating, siz uni xohlaganingizcha nomlashingiz mumkin, men
index.html
ni afzal ko'raman va quyidagi kodni qo'ying:
<!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>
- Endi, ko'rib turganingizdek, men identifikatori
generate-btn
bo'lgan tugmani qo'ydim, agar siz uni bosgan bo'lsangiz, bu tugma Iqtibosni ko'rsatadi. script.js
ichida JavaScript yarataylik
// 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);
Siz JavaScript ichidagi iqtibosni qattiq kodlaganimizni sezasiz:
// 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", }, ];
Biz buni generateQuote()
funksiyamiz ichida quote
deb ataymiz.
Funktsiyani taqsimlaymiz:
// Choose a random index from the array const index = Math.floor(Math.random() * quotes.length);
generateQuote()
funksiyamizning birinchi qatorida biz.length
ishlatgan umumiy kotirovkadanMath.floor
vaMath.random
marta foydalanib kotirovkamizni indekslaymiz. Asosan, biz 0 - umumiy kotirovka o'rtasida tasodifiy sonni yaratmoqchimiz.Math.random
vaMath.floor
haqida ko'proq ma'lumot olish uchun "bu erda" ni tekshirishingiz mumkin.
// Get the quote object at the chosen index const quote = quotes[index];
- Ikkinchi qatorda biz
quote
o'zgaruvchisi ichidagi tasodifiy indekslashni olamiz. Misol uchun, agar tasodifiy indeks 1 bo'lsa,quote
o'zgaruvchining qiymatiquotes[1]
bo'lib, bu Uolt Disney iqtibosidir.
// Build a string with the quote and author const quoteString = `"${quote.quote}" - ${quote.author}`;
- Endi biz
quotes
massividagi qiymatniquoteString
ga qo'yamiz. Bu erda biz 2-bosqichdagiquote
o'zgaruvchisidan tanlangan tirnoq qiymatini qo'yamiz.
// Set the text of the quote div to the generated string document.getElementById("quote").innerHTML = quoteString;
- Ha, bu nima ekanligini allaqachon tushunishingiz mumkin. Biz
quoteString
qiymatiniquote
identifikatori bilan HTML elementimizga joylashtirdik. - OK, lekin bu funktsiyaning o'zi uni chaqiradigan hech narsasiz hech narsa qilmaydi. Keling, HTML-ga avval qo'ygan
generate-btn
ni bosish orqali funktsiyani chaqiraylik
// Add an event listener to the button to generate a new quote when clicked document .getElementById("generate-btn") .addEventListener("click", generateQuote);
Endi siz o'zingizning funktsional tasodifiy iqtibos generatoriga egasiz, hozirgacha yaxshi ish qildingiz! Endi siz ba'zi ma'lumotlarni qanday iste'mol qilish va ularni brauzer ko'rinishiga qo'yishning asosiy tamoyilini tushunasiz.
Keyinchalik, biz API iste'mol qilish orqali ushbu Tasodifiy taklif generatorini yaxshilaymiz. Keyingi darsda ko'rishguncha!
Agar siz ushbu postni foydali deb topsangiz, pastdagi Maslahat bering tugmasini ☕ bosish orqali "Menga qahva sotib oling" da meni qo'llab-quvvatlang. Twitterda meni kuzatib boring @DevMazaya.