Як створити генератор випадкових цитат за допомогою JavaScript та HTML, для абсолютних початківців

Цей підручник призначений для початківців, які хочуть навчитися створювати простий веб-додаток за допомогою JavaScript. Це допоможе вам зрозуміти взаємодію між JavaScript та HTML-документом, а також те, як вони працюють разом, щоб відображати речі у веб-браузері, щоб їх могли бачити люди.

Якщо у вас абсолютно нульовий досвід роботи з HTML та JavaScript, не хвилюйтеся. Я проведу вас по кожному окремому рядку коду та детально все поясню. До кінця цього уроку ви повинні набагато краще зрозуміти, як JavaScript працює з HTML, щоб зробити веб-сторінки інтерактивними.

У цьому проекті ми створимо генератор випадкових цитат, який відображатиме випадкові цитати користувачеві кожного разу, коли вони натискають кнопку. Для початку вам знадобляться три основні речі, які майже завжди використовуються для кожного веб-проекту:

  • веб-браузер
  • текстовий редактор
  • бажання будувати речі

Для цього підручника я буду використовувати веб-браузер Google Chrome, редактор Sublime Text 3, і, звичайно, власне бажання будувати та навчати. Ви можете використовувати будь-які інструменти, які вам зручні.

Давайте розпочнемо!

Перше, що ми зробимо, це створимо папку, яка буде містити всі наші файли, що складають проект. Створіть порожню папку на робочому столі та назвіть її “генератор цитат”. Відкрийте Sublime Text і перетягніть файл у sublime . Тепер у нас повинна бути папка, доступна через бічну панель.

Більшість веб-проектів складаються щонайменше з одного HTML, JavaScript та CSS-файлу. Давайте створимо ці файли в папці “генератор цитат”.

У піднесеному тексті,клацніть правою кнопкою миші папку “генератор цитат” на бічній панелі та клацніть на створити новий файл . Знизу з’явиться рядок введення, щоб назвати файл. Введіть “index.html” і натисніть клавішу Enter. Тепер ви створили файл index.html. Повторіть цей крок ще два рази , але створіть файл з іменами “javascript.js” та “style.css” (без лапок) . Важливо переконатися, що, коли ви називаєте файл, літери завжди мають бути малими, щоб уникнути ускладнень.

Тепер, коли ми налаштували всі файли, давайте створимо наш файл HTML, який буде працювати як основа нашого веб-проекту. Ми почнемо з оголеного HTML-коду у нашому файлі index.html, перш ніж зможемо щось додати.

Нижче наведено наш HTML-файл, в якому немає нічого. Ви можете думати про це як про наш HTML-скелет, який міститиме все м’ясо (вміст), який ми додамо пізніше.

Тепер нам доведеться пов’язати наш файл JavaScript з нашим документом HTML, щоб наш код JavaScript міг взаємодіяти з документом HTML. Ми також додамо текст у теги, додайте

елемент, створіть a елемент з ідентифікатором "quoteDisplay", а також aелемент із атрибутом onclick із переданим в нього “newQuote ()”.

Розбивши його

Якщо вас бентежить, як кожна частина HTML-коду відповідає своєму призначенню, тоді я вам це поясню. Якщо ви точно знаєте, що робить кожен елемент і чому він там, можете перейти до наступного розділу, щоб продовжити.

По-перше, ми додали “Quote Gen” між теги. Тег заголовка бере текст між собою та відображає його на вкладці вашого веб-браузера, коли він відкривається.

На першому кроці нам також потрібно переконатись, що файл javascript.js зв’язано внизу документа HTML безпосередньо перед закриттям тег.

По-друге, ми створили

елемент із “Генератором простих цитат”. Це послужить для відображення заголовка на нашій веб-сторінці.

Потім ми створили елемент з атрибутом id, встановленим на “quoteDisplay”. A елемент працює як розділювач для документів HTML. елементи допомагають організувати вміст на веб-сторінці. Атрибут id працює як ідентифікатор, завдяки чому JavaScript може легко його захоплювати та маніпулювати ним. У цьому випадку ми будемо використовувати JavaScript, щоб захопити елемент з ідентифікатором “quoteDisplay”, щоб розмістити лапки в елемент.

Після цього ми створюємо файл елемент з атрибутом onclick з параметром “newQuote ()”. елемент, як ви вже здогадалися, - це кнопка, яка щось зробить, коли ви натиснете на неї. Атрибут onclick використовується для встановлення функції кнопки, так що кожен раз, коли ви натискаєте кнопку, вона запускатиме функцію, передану в«S OnClick атрибут.

У цьому випадку кожного разу, коли ви натискаєте кнопку, вона запускатиме функцію newQuote (), звичайно, ми ще не визначили функцію newQuote (). Якщо відкрити проект у браузері та натиснути кнопку, це призведе до помилки в консолі, оскільки функція наразі не існує.

Нарешті, ось оновлення, щоб показати, як виглядає наш повний файл index.html і що він створює у веб-браузері. Щоб відкрити проект, за допомогою веб-браузера відкрийте файл index.html.

Логічне мислення за допомогою коду

Нарешті настав час розпочати роботу над JavaScript у нашому файлі javascript.js, щоб ми могли розробити власну функціональність генерації пропозицій.

Тепер, перш ніж розпочати кодування, давайте логічно подумаємо над тим, як ми можемо створити машину, що генерує цитати, з кодом. Ми не можемо просто розпочати кодування, не подумавши спочатку.

Нам потрібно зрозуміти, що ми хочемо і коли цього хочемо. Для цього проекту ми хочемо цитати! Коли ми цього хочемо? Ми хочемо це зараз! О, ну ... я маю на увазі, що ми хочемо цього, коли користувач натискає кнопку.

Тепер, коли ми вирішили перше питання, нам потрібно поставити друге. Що таке цитати? Я маю на увазі насправді, які вони?

Дякую, Джейден! Так! Цитати складаються з літер, з яких складаються слова. У світі програмування слова класифікуються як рядки, отже, наші цитати повинні бути рядками !

Оскільки ми знаємо, що у нас буде кілька лапок, і кожна буде вибрана випадковим чином, найкращим вибором буде зберігання декількох рядків у масиві .

Якщо ви ще не знали, елементи всередині масиву отримують, викликаючи його індексний номер масиву . Технічні деталі виходять за рамки цього підручника, але простими словами, кожен елемент у масиві представлений цілим числом у хронологічному порядку. Перший елемент масиву має номер індексу 0, кожен елемент після цього збільшується на одиницю.

Для того, щоб отримати випадкову цитату з масиву, ми тепер знаємо, що нам потрібно створювати випадкове число кожного разу, коли користувач натискає на кнопку. Потім ми використовували б це випадкове число для отримання цитати з масиву та розміщення цієї цитати у документі HTML, який, у свою чергу, відображав би цитату в браузері для користувача.

Це воно! Ми вирішили, як створити генератор випадкових пропозицій, логічно продумавши код! Ось короткий опис логіки, яку ми придумали для нашого проекту:

  1. Лапки - це кілька рядків, які потрібно зберігати в масиві.
  2. Кожного разу, коли кнопка натискається, потрібно генерувати випадкове ціле число.
  3. Число буде використовуватися як подання номера індексу масиву для масиву котирувань.
  4. Як тільки ми отримаємо випадково вибрану цитату з масиву, використовуючи наше випадково згенероване ціле число, ми помістимо її в документ HTML.

Час кодування!

Оце Так! Ми зайшли так далеко і ще не почали програмувати! Ласкаво просимо у світ програмування!

Жартую.

Не зовсім.

Ви збираєтеся витратити багато часу на кодування в цій кар’єрі (або хобі). Але я хочу сказати, що ви витратите ще більше часу на роздуми про логіку програмування та способи вирішення проблем. Програмування - це не злом 100 слів на хвилину протягом 20 хвилин на клавіатурі. Цього не станеться.

Тепер, коли у нас вся логіка не в дорозі. Почнемо кодування. Тепер ми будемо працювати у файлі javascript.js .

Нам потрібно створити власні цитати або скопіювати їх з Інтернет-джерела.

Я погуглив “Найкращі цитати” і скопіював перші 10 з веб-сайту , а потім розмістив їх у масиві, розділеному комами. Обов’язково розміщуйте свої лапки в одинарних або подвійних лапках. Якщо ваша цитата складається з апострофів, одинарних або подвійних лапок, можливо, вам доведеться використовувати зворотні скісні риски, щоб уникнути цих символів, щоб JavaScript знав, що символи є частиною рядка, а не синтаксисом кодування.

Як ви можете бачити на малюнку нижче, я визначив змінну, яка називається "quotes", і встановив її рівною масиву, заповненому цитатами, які я вибрав з Інтернету.

Тепер нам потрібно створити нашу функцію newQuote (), про яку я згадав раніше у розділі HTML цього посібника. Для нашої функції newQuote () нам потрібно сформувати випадкове ціле число, яке коливається від 0 до довжини нашого масиву котирувань . Я поясню далі нижче.

Спочатку ми викликаємо функцію Math.floor (). Функція Math.floor () приймає параметр і округлює число до найближчого цілого числа. Наприклад, якщо ми викликаємо Math.floor (5.7), він поверне 5.

По-друге, ми передамо в Math.random () як параметр у Math.floor (). Функція Math.random () генерує випадкове десяткове число від 0 до 1.

Отже, скажімо, у нас є таке:

Якщо ми консоліруємо журнал нашого randomNumber у цьому стані, він завжди повертає 0. Це тому, що Math.random () завжди буде десятковою точкою від 0 до 1, наприклад, 0,4, 0,721, 0,98 тощо. Оскільки ми передаємо Math.random () у Math.floor () як параметр, Math.floor () завжди округлюється до найближчого десяткового, тому кожен десятковий знак від 0 до 1 завжди повертається назад до 0.

То який сенс робити це? Що ж, для створення номерів індексів масиву нам потрібні цілі числа, але нам потрібні випадкові цілі числа. Щоб сформувати випадкові цілі числа і відірватися від повернення лише 0, нам потрібно буде взяти наш випадковий десятковий знак і помножити його на ціле число.

Тепер спробуємо щось подібне:

Якщо ми консоліруємо журнал randomNumber, результати будуть десь від 1 до 19. Тепер я міг би використати цей поточний стан randomNumber, щоб витягнути лапку з масиву лапок, але це буде працювати, лише якщо номер індексу масиву існує в масиві, інакше буде викинуто помилку.

Наприклад:

На даний момент у моєму масиві цитат лише 10 рядків, тому будь-яке число понад 9 повернеться невизначеним, оскільки воно не існує в масиві.

Щоб вирішити цю проблему, нам потрібно помножити Math.random () на довжину нашого масиву котирувань. Роблячи це, ми можемо додати або видалити стільки рядків з масиву, скільки нам подобається, і наша змінна randomNumber завжди повертатиме дійсне число, оскільки ми використовуємо метод quotes.length, щоб завжди отримувати поточну довжину нашого масиву.

Тепер нам потрібен спосіб використовувати значення randomNumber для випадкового отримання цитати з масиву лапок та розміщення цитати в нашому документі HTML та відображення її нашим користувачам.

Згадайте, як я вже згадував, що ми використовуємо HTMLІдентифікатори, що дозволяють JavaScript легко захоплювати та обробляти елементи HTML? Ну, це те, що ми зараз робимо для HTML quoteDisplay ID, який ми створили раніше.

Використовуючи document.getElementById (), ми можемо передати будь-який рядок, і JavaScript перегляне наш документ HTML і отримає його для використання, щоб робити з ним все, що ми хочемо. Ми передамо "quoteDisplay" як параметр для отримання елемента HTML з ідентифікатором "quoteDisplay".

Тепер ми будемо використовувати метод .innerHTML для передачі випадково отриманої цитати з нашого масиву як значення, яке буде додано в наш елемент HTML quoteDisplay.

Ми встановлюємо внутрішній HTML рівним нашому масиву котирувань із нашою змінною randomNumber, переданою як номер індексу масиву. Тепер наша функція newQuote () завершена!

Місію виконано!

Якщо ви досягли цієї частини підручника, ви виконали проект! Вітаємо! Ви практично закінчили створення генератора випадкових пропозицій.

Тепер все, що вам потрібно зробити, - це відкрити проект у своєму браузері і перевірити, чи він працює! Для цього перетягніть файл index.html у вікно браузера.

Натисніть кнопку, і вона повинна відобразити випадкову цитату на вашому екрані. Натискайте кнопку скільки завгодно разів. Кожного разу нова котирування повинна замінити поточну на екрані.

Ви можете додати скільки завгодно лапок у масив лапок.

Погляньте на огляд усіх наших файлів проекту поряд, які складають цей генератор випадкових пропозицій.

Що тепер?

Ви створили повністю функціональний генератор випадкових пропозицій, і вам, мабуть, цікаво, куди ви йдете далі.

Ви, мабуть, думаєте, що цей Генератор Випадкових Цитат виглядає дуже нудно, і, мабуть, ним би ніхто не користувався. І ви абсолютно праві. Цей проект виглядає цілком просто, і це залежить від вас, щоб змінити це.

Ви можете вдосконалити цей проект, додавши до нього власні функціональні можливості та стиль.

На початку цього підручника ми створили файл style.css, який ми не використовували. CSS використовується, щоб зробити веб-сторінки гарними та барвистими. Якщо ви хочете, це потрібно додати до файлу CSS для стилізації.

Ви можете шукати деякі підручники з CSS, щоб отримати додаткові вказівки. Нехай ваша фантазія розгулює, і зробіть цей проект своїм! Робити все, що ви хочете! Кодування - це магія, а ти майстер, Гаррі!

Якщо вам цікаво побачити, наскільки проект може змінитися за допомогою CSS та ще кількох рядків коду JavaScript, перегляньте мою власну версію цього Генератора випадкових цитат, яку я назвав “Годинник Богоявлення”тут .

Якщо вам сподобався цей підручник, натисніть кнопку серця і поділіться ним! Не соромтеся залишати будь-які коментарі, запитання чи відгуки. Дякую і щасливого кодування!