Как да създадем генератор на произволни кавички с JavaScript и HTML, за абсолютно начинаещи

Този урок е предназначен за начинаещи, които искат да научат как да създават просто уеб приложение с помощта на JavaScript. Това ще ви помогне да разберете взаимодействието между JavaScript и HTML документ и как те работят заедно, за да покажат нещата в уеб браузъра, за да ги видят хората.

Ако имате абсолютно нулев опит в HTML и JavaScript, не се притеснявайте. Ще ви преведа през всеки ред код и ще обясня всичко подробно. Когато стигнете до края на този урок, трябва да имате много по-добро разбиране за това как JavaScript работи с HTML, за да направите уеб страниците интерактивни.

В този проект ще изградим генератор на произволни оферти, който показва произволна оферта на потребителя всеки път, когато той натисне бутон. За да започнете, ще ви трябват три основни неща, които почти винаги се използват за всеки уеб проект:

  • уеб браузър
  • текстов редактор
  • желание за изграждане на нещата

За този урок ще използвам уеб браузъра Google Chrome, редактора Sublime Text 3 и, разбира се, собственото си желание да изграждам и преподавам. Можете да използвате всички инструменти, с които се чувствате комфортно.

Да започваме!

Първото нещо, което ще направим, е да създадем папката, която ще съдържа всички наши файлове, съставляващи проекта. Създайте празна папка на вашия работен плот и я наречете „генератор на цитати“. Отворете Sublime Text и плъзнете файла в sublime . Сега трябва да имаме достъп до папката през страничната лента.

Повечето уеб проекти се състоят от поне един HTML, JavaScript и CSS файл. Нека създадем тези файлове в папката „генератор на цитати“.

Във възвишен текст,щракнете с десния бутон върху папката “quote generator” в страничната лента и щракнете върху създаване на нов файл . В долната част ще се появи лента за въвеждане, за да се наименува файлът. Въведете “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 документи. елементи помагат да се организира съдържанието в рамките на уеб страница. The ID атрибут работи като идентификатор, така че JavaScript може лесно да вземете и да го манипулират. В този случай ще използваме JavaScript, за да вземем елемента с идентификатора “quoteDisplay”, за да поставим кавички в елемент.

След това създаваме елемент с атрибут onclick с “newQuote ()”, предаден като параметър. Theелемент, както се досещате, е бутон, който ще направи нещо, когато щракнете върху него. В OnClick атрибут се използва за задаване на функция към бутона, така че всеки път, когато натиснете бутона, ще се изпълнява функцията, която е преминала ве OnClick атрибут.

В този случай всеки път, когато щракнете върху бутона, той ще стартира функцията newQuote (), разбира се, все още не сме дефинирали функцията newQuote (). Ако отворите проекта в браузър и натиснете бутона, той ще изведе грешка в конзолата, тъй като в момента функцията не съществува.

И накрая, има опреснител, който показва как изглежда нашият пълен файл index.html в момента и какво произвежда в уеб браузъра. За да отворите проекта, използвайте уеб браузър, за да отворите файла index.html.

Мислене логично с помощта на код

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

Сега, преди да започнем да кодираме, нека помислим логично за това как можем да създадем машина за генериране на цитати с код. Не можем просто да започнем да кодираме, без първо да се замислим.

Трябва да разберем какво искаме и кога го искаме. За този проект искаме оферти! Кога го искаме? Искаме го сега! О, ъъъ ... Искам да кажа, че го искаме всеки път, когато потребителят натисне бутона.

След като решихме първия въпрос, трябва да зададем втория. Какво представляват кавичките? Искам да кажа наистина, какви са те?

Благодаря Джейдън! Да! Цитатите са съставени от букви, които съставят думи. В света на програмирането думите се класифицират като низове, следователно нашите кавички ще трябва да бъдат низове !

Тъй като знаем, че ще имаме множество кавички и всяка ще бъде избрана произволно, най-добрият избор би бил да съхраняваме множество низове в масив .

Ако все още не сте знаели, елементи в масива се извличат чрез извикване на индексния номер на масива . Техническите подробности са извън обхвата на този урок, но с прости думи, всеки елемент в масива е представен с цяло число в хронологичен ред. Първият елемент на масив има номер на индекс 0, всеки елемент след това се увеличава с един.

За да извлечем произволна оферта от масив, вече знаем, че трябва да генерираме произволно число всеки път, когато потребителят щракне върху бутона. След това бихме използвали това произволно число, за да извлечем цитат от масива и да го поставим върху HTML документа, който от своя страна ще покаже цитата в браузъра на потребителя.

Това е! Решихме как да създадем генератор на произволни оферти чрез логично мислене в кода! Ето обобщение на логиката, която сме измислили за нашия проект:

  1. Кавичките са множество низове, които трябва да се съхраняват в масив.
  2. Всеки път, когато бутонът се натисне, трябва да се генерира произволно цяло число.
  3. Числото ще се използва като представяне на номера на индекса на масива за цитатния масив.
  4. След като извлечем произволно избраната оферта от масива, използвайки нашето произволно генерирано цяло число, ще я поставим в HTML документа.

Време за кодиране!

Еха! Стигнахме дотук и още не сме започнали програмиране! Добре дошли в света на програмирането!

Майтапя се.

Не точно.

Ще прекарате много време в кодиране в тази кариера (или хоби). Но моята идея е, че ще прекарате още повече от това време в мислене за логика на програмиране и как да решавате проблеми. Програмирането не е свързано с хакване на 100 думи в минута за 20 минути на клавиатурата. Това няма да се случи.

Сега, след като изчезнахме цялата логика. Нека започнем да кодираме. Сега ще работим във файла javascript.js .

Трябва да създадем свои собствени цитати или да ги копираме от онлайн източник.

Потърсих в Google „Най-добри оферти“ и копирах първите 10 от уебсайт , след което ги поставих в масив, разделен със запетаи. Не забравяйте да поставите вашите кавички в единични или двойни кавички. Ако вашата оферта се състои от апострофи, единични или двойни кавички, може да се наложи да използвате обратни наклонени черти, за да избегнете тези символи, така че JavaScript да знае, че символите са част от низа, а не синтаксиса на кодирането.

Както можете да видите на снимката по-долу, аз определих променлива, наречена „кавички“, и я зададох равна на масив, пълен с кавичките, които съм избрал от интернет.

Сега трябва да създадем нашата функция 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 елемент.

Задаваме innerHTML равен на нашия масив с кавички с нашата променлива randomNumber, предадена като номер на индекс на масив. Сега нашата функция newQuote () е завършена!

Мисията изпълнена!

Ако сте стигнали до тази част от урока, сте завършили проекта! Честито! На практика сте готови с изграждането на генератор на произволни оферти.

Сега всичко, което трябва да направите, е да отворите проекта в браузъра си и да видите дали работи! Направете това, като плъзнете файла index.html в прозореца на браузъра.

Натиснете бутона и той трябва да покаже произволен цитат на вашия екран. Натиснете бутона колкото пъти искате. Всеки път нова оферта трябва да замени настоящата на екрана.

Можете да добавите колкото искате кавички в масива с кавички.

Обърнете внимание на общия преглед на нашите цели проектни файлове един до друг, които съставляват този Генератор на произволни оферти.

Сега какво?

Създали сте напълно функционален генератор на произволни оферти и вероятно се чудите къде да продължите от тук.

Вероятно си мислите, че този генератор на произволни оферти изглежда много скучен и вероятно никой не би го използвал. И си напълно прав. Този проект изглежда съвсем ясен и от вас зависи да промените това.

Можете да подобрите този проект, като добавите свои собствени функционалности и стил към него.

В началото на този урок създадохме файл style.css, който не използвахме. CSS се използва, за да направи уеб страниците красиви и цветни. От вас зависи да добавите към CSS файла за стилизиране, ако искате.

Можете да потърсите някои уроци по CSS за някои допълнителни насоки. Развихрете въображението си и направете този проект ваш! Правя каквото си искам! Кодирането е магия и ти си магьосник, Хари!

Ако сте любопитни да видите колко може да се промени даден проект с CSS и още няколко реда JavaScript код, разгледайте моята собствена версия на този генератор на произволни цитати, който озаглавих „Epiphany Clock“тук .

Ако ви е харесал този урок, моля, щракнете върху бутона на сърцето и го споделете! Чувствайте се свободни да оставяте коментари, въпроси или обратна връзка. Благодаря ви и щастливо кодиране!