JavaScript е един от най -ценните езици за програмиране, използвани днес в уеб разработката. С появата на Express.js, гръбният стек на JavaScript, съчетан с множество съществуващи и развиващи се фронт енд рамки, изглежда езикът ще продължи да прави революция в уеб програмирането.
Така че, ако сте начинаещ в JavaScript, седнете здраво. Тези идеи за JavaScript проекти ще повишат вашите умения и ще ви запознаят с основните концепции на JavaScript. Да започваме.
1. Просто приложение за списък със задачи
Докато изграждате списък със задачи с помощта на JavaScript, ще научите основната логика зад действията на CRUD и ще проучите функциите за обработка на събития на JavaScript. По същество ще създадете скрипта си, за да създавате задачи, да четете, актуализирате и след това да ги изтривате.
Използвайки манипулатори на събития, ще създавате екземпляри за въвеждане на всяка задача и ще ги показвате при изпращане. След като кодът на JavaScript за контролиране на функционалността на приложението ви работи, можете да използвате метода за показване на CSS мрежата, за да организирате всяка задача. След това им дайте приоритет, като използвате
Условен израз на JavaScript и методи за дати.Свързани: Как да създадете основно приложение за списък със задачи, използвайки JavaScript
Въпреки че не е задължително, можете да продължите по -нататък, като запишете задачи в локална база данни. Съхраняването на всеки вход в JSON файл на вашата локална машина, например, ви дава представа как да извършвате CRUD операции при работа с обект JSON от реалния живот, масив или база данни NoSQL.
2. Създайте прост таймер
Таймерът е един от най -лесните проекти, които можете бързо да изпълните с помощта на JavaScript. Въпреки че това звучи доста елементарно, то ви учи как автоматично да променяте състоянието на елемент на интервали с помощта на JavaScript.
За да го направите по-уникален, можете да изградите таймер за обратно броене, който спира на посочена от потребителя стойност. Не е нужно да съхранявате никакви записи в база данни или JSON обект, тъй като това е екземпляр, който потребителят може да ощипва, както желае.
Докато кодирате таймера, ще се запознаете с функциите на JavaScript. Освен това ще научите как да пишете JavaScript код за основни математически преобразувания, тъй като може да се наложи да преобразувате някои параметри на времето.
3. Изградете въртележка с изображения от нулата
Въртележката е едно от най -визуално привлекателните допълнения към потребителския интерфейс на уебсайт. В комбинация със страхотен UX, той добавя елегантен ефект към потребителския ви интерфейс. Освен това ви позволява да показвате изображения или елементи по уникален начин.
За да изградите функционална и реактивна въртележка, ще трябва да си изцапате ръцете с цикъла на JavaScript. Можете да получите вашите изображения от DOM и да ги избутате в празен JavaScript масив. След това ще добавите събития при щракване към следващ и предишен бутон, за да показвате изображения последователно, отдясно или отляво.
Това обаче не е строг подход. Можете да използвате всеки метод, който работи най -добре за вас.
Ако сте любопитни и искате да направите още повече, можете да добавите анимации към дисплея си, за да направите това по -реалистично и лесно за използване.
4. Уеб калкулатор
JavaScript, подобно на други езици за програмиране, поддържа множество математически операции. Така че, докато кодирате този проект, ще научите как да добавяте събития при кликване към персонализирани бутони или диви и да ги организирате, за да се превърнат в отзивчив калкулатор, който се показва в браузъра.
Ако вече не сте запознати с тях, може да започнете, като си поиграете с JavaScript операторите. И след това увийте ръцете си около манипулаторите на събития, за да разберете по -добре концепцията зад тях.
Свързани: Как да изградим прост калкулатор с помощта на HTML, CSS и JavaScript
Въпреки че е по -подробно, можете да започнете, като напишете скрипта си процедурно. Но помислете за преработката му във функции, след като калкулаторът ви започне да работи. Можете да подходите към това чрез създаване на CSS flexbox. След това им задайте стойности и оператори, използвайки HTML. След това можете да извикате вашата функция за обработка на събития за всеки елемент във flexbox използвайки цикъла на JavaScript.
5. Генератор на автобиографии с JavaScript
Въпреки че може да сте малко объркани как да започнете с това, има няколко уеб приложения за създаване на автобиографии, където можете да хванете идеята си.
В крайна сметка ще направите създател на автобиографии за многократна употреба, който може да приема нова информация и да изпуска или актуализира съществуваща.
Измислянето на още шаблони за автобиография не е трудно, след като разберете основната логика. Така че можете да започнете с един шаблон и да увеличите мащаба до по -привлекателни дизайни с течение на времето. Разбира се, вие също искате да добавите бутон за изтегляне, така че потребителите да могат да получат автобиографията си като PDF.
Проект за създаване на автобиография ви помага да разберете основните JavaScript CRUD операции. Освен това ще научите как да използвате цикли, манипулатори на събития, условия и някои от вградените функции на JavaScript. Можете също да запишете информацията на потребителите в JSON обект, за да може вашата програма да се позовава на нея по -късно.
6. Изградете разширение за браузър
Изграждането на разширение за браузър за начален проект може да изглежда сложно. Но не само след като разберете изискванията за кодиране на функционално.
Струва си да се заемете със задача, особено ако вече имате основни познания по JavaScript и бихте искали да си поиграете с предизвикателен проект.
Въпреки че може да е малко уморително да промените разширението си, за да работи в множество браузъри, можете да започнете с конкретно за браузъра разширение. И не е нужно да изграждате сложна. Вашият може да бъде просто изтегляне на файлове или преоразмеряване на изображения, например.
Докато изграждате разширението си, трябва също така да го инсталирате в браузъра. Тук посочвате информацията за приложението си във файл „manifest.json“, така че браузърът да може да го разпознае и приеме.
7. Изградете приложение за бюджетиране
Всички искаме да следим как харчим парите си, за да избегнем превишаване на бюджета. Приложение за бюджетиране ви позволява да проследявате разходите си, така че да не харчите повече, отколкото сте се договорили.
Независимо дали създавате това за себе си или за други, това е съкровище, което си струва да се съхрани във вашето хранилище. Създаването на бюджетно приложение „Направи си сам“ с JavaScript не само подобрява познанията ви за изобразяване на DOM, но и ще научите как да прилагате оператори на JavaScript за решаване на реални проблеми.
Докато пишете кода си, ще събирате данни от формуляра и ще изваждате разходите от бюджета си. Можете да направите това по-нататък, като напишете код, за да зададете автоматично предупреждение за потребителя, когато той е на път да надхвърли бюджета си.
8. Конвертор на единици
Искате ли да си поиграете с основните оператори и условни изявления в JavsScript? След това създаването на преобразувател на единици ви дава тази гъвкавост.
В допълнение към писането на математически формули за преобразуване на различни единици напред и назад, ще научите как да ощипвате математически изходи в JavaScript и да ги визуализирате от страна на клиента. Тъй като приложението ви вероятно ще обработва множество реализации, можете да създадете падащо меню, където потребителите могат да избират своите единици за избор.
След това логическите изявления обработват как вашият скрипт преобразува параметрите въз основа на избора на потребителя. Всъщност конверторът на единици е един от най -лесните проекти в списъка.
9. Създайте дневник
Ето един доста удобен проект за тези, които обичат да следят ежедневието си. Приложение за дневник с JavaScript е универсален, но прост проект, подходящ за начинаещи.
Тъй като това е приложение за водене на бележки и трябва да посочите дати според дейностите, можете да съхранявате вашите въвежда във файл като JSON обект и след това ги препраща по -късно, когато трябва да проследите историята си и да я запазите входове.
Въпреки че може да се окаже малко сложно, можете да спестите на потребителите стреса от ръчното избиране на времето за техните дейности, като напишете код за автоматично съхраняване на времето. Подобно на приложение за задачи, това също ви учи как да създадете CRUD приложение, използвайки JavaScript.
10. Игра Breaker Breaker
В случай, че не знаете, можете да създадете проста игра с помощта на ванилов JavaScript. Ако сте запознати с 2D игри, трябва да сте играли или виждали пробивна игра преди това.
Въпреки че може да изисква известна предвидливост и мисъл, един от положителните страни на този проект е забавлението, което носи в крайна сметка. Въпреки че не е сигурен вход към разработката на игри, ще научите за много от функционалностите на JavaScript, докато работите по тази задача.
Функционалността обаче е целта. Но може да се наложи да комбинирате някои CSS с JavaScript тук, за да подредите тухлите си равномерно. В крайна сметка вашата програма ще диктува кога играч печели или губи и какво се случва след това.
JavaScript: Продължавайте да се учите, като правите
Практически някои от тези идеи за проекти ще засилят вашите JavaScript умения и ще ви подготвят за проекти от реалния живот. Въпреки това, макар че стилизирането е от съществено значение в повечето от тези проекти, внимавайте да не се разсейвате с него от първа ръка. Но се съсредоточете върху функционалността, която JavaScript предлага, и ще започнете да изграждате отзивчиви уебсайтове с JavaScript, преди да го знаете. Честито кодиране!
Знаете основите и сега сте готови да ги приложите. Започнете с тези проекти на Python!
Прочетете Напред
- Програмиране
- JavaScript
- Програмиране
- Програмни езици
Idowu е страстен за всичко умно технология и производителност. В свободното си време той играе с кодиране и превключва на шахматната дъска, когато му е скучно, но също така обича да се откъсва от рутината от време на време. Страстта му да показва на хората пътя около съвременните технологии го мотивира да пише повече.
Абонирайте се за нашия бюлетин
Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!
Щракнете тук, за да се абонирате
