# Увод у програмске језике и савремене алате за развој Здраво, будући програмеру! 👋 Могу ли ти рећи нешто што ме и даље узбуђује сваки дан? Управо ћеш открити да програмирање није само рад са рачунарима – то је као да имаш стварне супермоћи које ти омогућавају да оживиш своје најлуђе идеје! Знаш онај тренутак када користиш своју омиљену апликацију и све савршено функционише? Када притиснеш дугме и догоди се нешто апсолутно магично што те натера да кажеш: "Вау, како су то УРАДИЛИ?" Па, неко баш као ти – вероватно седећи у свом омиљеном кафићу у 2 ујутру са трећим еспресом – написао је код који је створио ту магију. А ево шта ће те одушевити: до краја овог часа, не само да ћеш разумети како су то урадили, већ ћеш бити нестрпљив да и сам пробаш! Слушај, потпуно разумем ако ти програмирање тренутно делује застрашујуће. Када сам ја почео, искрено сам мислио да мораш бити некакав математички геније или да програмираш од своје пете године. Али ево шта је потпуно променило моју перспективу: програмирање је баш као учење разговора на новом језику. Почнеш са "здраво" и "хвала", па напредујеш до наручивања кафе, и пре него што схватиш, водиш дубоке филозофске дискусије! Само што у овом случају разговараш са рачунарима, а искрено? Они су најстрпљивији партнери за разговор које ћеш икада имати – никада не осуђују твоје грешке и увек су спремни да покушају поново! Данас ћемо истражити невероватне алате који чине савремени веб развој не само могућим, већ и озбиљно заразним. Говорим о истим уредницима, претраживачима и радним процесима које програмери у Netflix-у, Spotify-у и твојој омиљеној инди апликацији користе сваког дана. А ево дела који ће те натерати да заиграш од среће: већина ових професионалних алата, који су стандард у индустрији, потпуно су бесплатни! ![Увод у програмирање](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.sr.png) > Скетч од [Tomomi Imura](https://twitter.com/girlie_mac) ## Да видимо шта већ знаш! Пре него што ускочимо у забаву, занима ме – шта већ знаш о овом свету програмирања? И слушај, ако гледаш ова питања и мислиш "немам апсолутно никакву представу о овоме," то није само у реду, то је савршено! То значи да си тачно на правом месту. Замисли овај квиз као загревање пре тренинга – само загревамо те мождане мишиће! [Уради квиз пре лекције](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) ## Авантура на коју ћемо заједно кренути Океј, искрено сам узбуђен због онога што ћемо данас истражити! Озбиљно, волео бих да видим твоје лице када ти неки од ових концепата постану јасни. Ево невероватног путовања које ћемо заједно проћи: - **Шта је заправо програмирање (и зашто је то најкул ствар икада!)** – Открићемо како је код буквално невидљива магија која покреће све око тебе, од оног аларма који некако зна да је понедељак ујутру до алгоритма који савршено бира твоје Netflix препоруке. - **Програмски језици и њихове невероватне личности** – Замисли да уђеш на журку где свака особа има потпуно различите супермоћи и начине решавања проблема. То је свет програмских језика, и обожаваћеш да их упознаш! - **Основни грађевински блокови који стварају дигиталну магију** – Замисли их као најбољи креативни LEGO сет. Када схватиш како се ови делови уклапају, схватићеш да можеш буквално изградити све што твоја машта замисли. - **Професионални алати који ће те натерати да се осећаш као да си добио чаробни штапић** – Не претерујем – ови алати ће те заиста натерати да се осећаш као да имаш супермоћи, а најбољи део? То су исти алати које професионалци користе! > 💡 **Ево у чему је ствар**: Немој ни да помислиш да данас мораш све да запамтиш! Сада само желим да осетиш ту искру узбуђења о томе шта је све могуће. Детаљи ће се природно лепити како будемо заједно вежбали – тако се дешава право учење! > Ову лекцију можеш преузети на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! ## Па шта је заправо *програмирање*? Добро, хајде да се позабавимо питањем вредним милион долара: шта је заправо програмирање? Даћу ти причу која је потпуно променила мој начин размишљања о овоме. Прошле недеље сам покушавао да објасним својој мами како да користи нови даљински управљач за наш паметни телевизор. Ухватио сам себе како говорим ствари попут "Притисни црвено дугме, али не велико црвено дугме, мало црвено дугме са леве стране... не, твоја друга лева страна... добро, сада држи два секунде, не једну, не три..." Звучи познато? 😅 То је програмирање! То је уметност давање невероватно детаљних, корак-по-корак упутстава нечему што је веома моћно, али му је потребно све објаснити савршено. Само што уместо да објашњаваш својој мами (која може да пита "које црвено дугме?!"), ти објашњаваш рачунару (који само ради тачно оно што му кажеш, чак и ако оно што си рекао није баш оно што си мислио). Ево шта ме је одушевило када сам први пут научио ово: рачунари су заправо прилично једноставни у својој суштини. Они буквално разумеју само две ствари – 1 и 0, што је у основи само "да" и "не" или "укључено" и "искључено." То је то! Али ево где постаје магично – не морамо да говоримо у 1 и 0 као да смо у Матриксу. Ту на сцену ступају **програмски језици**. Они су као најбољи преводиоци на свету који узимају твоје савршено нормалне људске мисли и претварају их у језик рачунара. И ево шта ме и даље стварно одушевљава сваког јутра када се пробудим: буквално *све* дигитално у твом животу почело је са неким баш као ти, вероватно у пиџами са шољом кафе, куцајући код на свом лаптопу. Онај Instagram филтер који те чини савршеним? Неко је то програмирао. Препорука која те довела до твоје нове омиљене песме? Програмер је направио тај алгоритам. Апликација која ти помаже да поделиш рачун за вечеру са пријатељима? Да, неко је помислио "ово је досадно, кладим се да могу да решим ово" и онда... успео је! Када научиш да програмираш, не само да стичеш нову вештину – постајеш део ове невероватне заједнице решавача проблема који проводе своје дане размишљајући: "Шта ако могу да направим нешто што ће некоме улепшати дан само мало?" Искрено, има ли ишта кул од тога? ✅ **Лов на занимљиве чињенице**: Ево нечега супер занимљивог што можеш да истражиш када имаш слободан тренутак – ко мислиш да је био први програмер на свету? Даћу ти наговештај: можда није онај кога очекујеш! Причa о овој особи је апсолутно фасцинантна и показује да је програмирање одувек било о креативном решавању проблема и размишљању ван оквира. ## Програмски језици су као различити укуси магије Океј, ово ће звучати чудно, али остани са мном – програмски језици су много слични различитим врстама музике. Размисли о томе: имаш џез, који је гладак и импровизациони, рок који је снажан и директан, класичну музику која је елегантна и структурисана, и хип-хоп који је креативан и изражајан. Сваки стил има свој угођај, своју заједницу страствених фанова, и сваки је савршен за различита расположења и прилике. Програмски језици функционишу на исти начин! Не би користио исти језик за прављење забавне мобилне игре као што би користио за анализу огромних количина климатских података, баш као што не би пуштао хеви метал на часу јоге (па, на већини часова јоге! 😄). Али ево шта ме апсолутно одушевљава сваки пут када размислим о томе: ови језици су као да имаш најстрпљивијег, најбриљантнијег преводиоца на свету који седи поред тебе. Можеш изразити своје идеје на начин који је природан за твој људски мозак, а они се брину о свом невероватно сложеном послу превођења тога у 1 и 0 које рачунари заправо разумеју. То је као да имаш пријатеља који је савршено течно у "људској креативности" и "рачунарској логици" – и никада се не умара, никада му не треба пауза за кафу, и никада те не осуђује што постављаш исто питање два пута! ### Популарни програмски језици и њихова употреба | Језик | Најбоље за | Зашто је популаран | |-------|-----------|--------------------| | **JavaScript** | Веб развој, кориснички интерфејси | Ради у претраживачима и покреће интерактивне веб странице | | **Python** | Наука о подацима, аутоматизација, вештачка интелигенција | Лак за читање и учење, моћне библиотеке | | **Java** | Ентерпрајз апликације, Android апликације | Независан од платформе, робустан за велике системе | | **C#** | Windows апликације, развој игара | Јака подршка Microsoft екосистема | | **Go** | Облачне услуге, позадински системи | Брз, једноставан, дизајниран за савремено рачунарство | ### Високо-нивоски наспрам ниско-нивоских језика Океј, ово је заиста концепт који ми је "сломио мозак" када сам први пут почео да учим, па ћу поделити аналогију која ми је коначно помогла да схватим – и стварно се надам да ће и теби помоћи! Замисли да посећујеш земљу чији језик не говориш, а очајнички ти треба да пронађеш најближи тоалет (сви смо били у тој ситуацији, зар не? 😅): - **Ниско-нивоско програмирање** је као да научиш локални дијалект толико добро да можеш да разговараш са баком која продаје воће на углу користећи културне референце, локални сленг и унутрашње шале које само неко ко је тамо одрастао може да разуме. Супер импресивно и невероватно ефикасно... ако си случајно течно у томе! Али прилично неодољиво када само покушаваш да пронађеш тоалет. - **Високо-нивоско програмирање** је као да имаш оног невероватног локалног пријатеља који те једноставно разуме. Можеш рећи "Стварно морам да пронађем тоалет" на обичном енглеском, а он се брине о свим културним преводима и даје ти упутства на начин који има смисла за твој не-локални мозак. У терминима програмирања: - **Ниско-нивоски језици** (као Assembly или C) омогућавају ти да водиш невероватно детаљне разговоре са стварним хардвером рачунара, али мораш да размишљаш као машина, што је... па, рецимо да је то прилично велики ментални изазов! - **Високо-нивоски језици** (као JavaScript, Python или C#) омогућавају ти да размишљаш као човек док они обављају сав посао превођења на језик машина. Плус, имају невероватно пријатељске заједнице пуне људи који се сећају како је било бити нов и искрено желе да ти помогну! Погоди које ћу ти предложити да почнеш? 😉 Високо-нивоски језици су као да имаш помоћне точкове које никада заправо не желиш да скинеш јер чине цело искуство толико пријатнијим! ### Показаћу ти зашто су високо-нивоски језици много пријатељскији Добро, сада ћу ти показати нешто што савршено демонстрира зашто сам се заљубио у високо-нивоске језике, али прво – мораш ми обећати нешто. Када видиш тај први пример кода, немој паничити! Треба да изгледа застрашујуће. То је управо поента коју желим да истакнем! Погледаћемо потпуно исти задатак написан на два потпуно различита стила. Оба стварају оно што се зове Фибоначијев низ – то је овај прелепи математички образац где је сваки број збир два претходна: 0, 1, 1, 2, 3, 5, 8, 13... (Занимљива чињеница: овај образац ћеш пронаћи буквално свуда у природи – спирале семенки сунцокрета, обрасци шишарки, чак и начин на који се галаксије формирају!) Спреман да видиш разлику? Идемо! **Високо-нивоски језик (JavaScript) – Пријатељски за људе:** ```javascript // Step 1: Basic Fibonacci setup const fibonacciCount = 10; let current = 0; let next = 1; console.log('Fibonacci sequence:'); ``` **Ево шта овај код ради:** - **Декларише** константу да одреди колико Фибоначијевих бројева желимо да генеришемо - **Иницијализује** две променљиве за праћење тренутног и следећег броја у низу - **Поставља** почетне вредности (0 и 1) које дефинишу Фибоначијев образац - **Приказује** поруку заглавља да идентификује наш излаз ```javascript // Step 2: Generate the sequence with a loop for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); // Calculate next number in sequence const sum = current + next; current = next; next = sum; } ``` **Разлагање онога што се овде дешава:** - **Петља** кроз сваку позицију у нашем низу користећи `for` петљу - **Приказује ✅ **О Фибоначијевом низу**: Овај апсолутно прелепи бројчани образац (где је сваки број једнак збиру два претходна: 0, 1, 1, 2, 3, 5, 8...) буквално се појављује *свуда* у природи! Можете га пронаћи у спиралама сунцокрета, узорцима на шишаркама, кривинама наутилус шкољки, па чак и у начину на који гране дрвећа расту. Невероватно је како математика и програмирање могу да нам помогну да разумемо и поново створимо обрасце које природа користи за стварање лепоте! ## Основни елементи који стварају магију Добро, сада када сте видели како изгледају програмски језици у пракси, хајде да разложимо основне делове који чине буквално сваки програм који је икада написан. Замислите их као основне састојке у вашем омиљеном рецепту – када схватите шта сваки од њих ради, моћи ћете да читате и пишете код у готово било ком језику! Ово је помало као учење граматике програмирања. Сећате се у школи када сте учили о именицама, глаголима и како да саставите реченице? Програмирање има своју верзију граматике, и искрено, много је логичније и опрашта више грешака него граматика енглеског језика! 😄 ### Изјаве: Упутства корак по корак Хајде да почнемо са **изјавама** – оне су као појединачне реченице у разговору са вашим рачунаром. Свака изјава говори рачунару да уради једну одређену ствар, као да му дајете упутства: "Скрените лево овде," "Зауставите се на црвеном светлу," "Паркирајте на том месту." Оно што волим код изјава је колико су обично читљиве. Погледајте ово: ```javascript // Basic statements that perform single actions const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` **Ево шта овај код ради:** - **Декларише** константну променљиву за чување корисничког имена - **Приказује** поруку добродошлице на конзоли - **Израчунава** и чува резултат математичке операције ```javascript // Statements that interact with web pages document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` **Корак по корак, ево шта се дешава:** - **Мења** наслов веб странице који се појављује на картици прегледача - **Мења** боју позадине целог тела странице ### Променљиве: Меморијски систем вашег програма Добро, **променљиве** су искрено један од мојих апсолутно омиљених концепата за објашњавање јер су толико сличне стварима које већ свакодневно користите! Размислите на тренутак о листи контаката на вашем телефону. Не памтите бројеве телефона свих – уместо тога, сачувате "Мама," "Најбољи пријатељ" или "Пицерија која ради до 2 ујутру" и пустите телефон да запамти стварне бројеве. Променљиве функционишу на исти начин! Оне су као означени контејнери у којима ваш програм може да чува информације и да их касније преузме користећи име које има смисла. Ево шта је стварно занимљиво: променљиве могу да се мењају док ваш програм ради (отуда назив "променљива" – видите шта су урадили?). Баш као што можете ажурирати контакт пицерије када откријете боље место, променљиве се могу ажурирати како ваш програм учи нове информације или како се ситуације мењају! Дозволите ми да вам покажем колико ово може бити једноставно и лепо: ```javascript // Step 1: Creating basic variables const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` **Разумевање ових концепата:** - **Чувајте** непроменљиве вредности у `const` променљивама (као што је име сајта) - **Користите** `let` за вредности које могу да се мењају током рада програма - **Доделите** различите типове података: стрингове (текст), бројеве и булове вредности (тачно/нетачно) - **Бирајте** описна имена која објашњавају шта свака променљива садржи ```javascript // Step 2: Working with objects to group related data const weatherData = { location: "San Francisco", humidity: 65, windSpeed: 12 }; ``` **У горњем примеру, урадили смо следеће:** - **Креирали** објекат за груписање повезаних информација о времену - **Организовали** више делова података под једним именом променљиве - **Користили** парове кључ-вредност за јасно означавање сваког дела информација ```javascript // Step 3: Using and updating variables console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); // Updating changeable variables currentWeather = "cloudy"; temperature = 68; ``` **Хајде да разумемо сваки део:** - **Приказујемо** информације користећи шаблонске литерале са синтаксом `${}` - **Приступамо** својствима објекта користећи нотацију тачке (`weatherData.windSpeed`) - **Ажурирамо** променљиве декларисане са `let` да одражавају променљиве услове - **Комбинујемо** више променљивих за креирање смислених порука ```javascript // Step 4: Modern destructuring for cleaner code const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` **Шта треба да знате:** - **Извлачите** одређена својства из објеката користећи деструктурирајућу доделу - **Креирајте** нове променљиве аутоматски са истим именима као кључеви објекта - **Поједноставите** код избегавањем понављајуће нотације тачке ### Контролни ток: Учите свој програм да размишља Добро, овде програмирање постаје апсолутно фасцинантно! **Контролни ток** је у основи учење вашег програма како да доноси паметне одлуке, баш као што ви то радите сваки дан, а да о томе ни не размишљате. Замислите ово: јутрос сте вероватно прошли кроз нешто попут "Ако пада киша, узећу кишобран. Ако је хладно, обучићу јакну. Ако касним, прескочићу доручак и узети кафу успут." Ваш мозак природно прати ову логику "ако-онда" десетине пута сваког дана! Ово је оно што чини програме интелигентним и живим, уместо да само прате неки досадан, предвидив сценарио. Они могу заправо да погледају ситуацију, процене шта се дешава и реагују на одговарајући начин. То је као да вашем програму дате мозак који може да се прилагоди и доноси одлуке! Желите да видите како ово лепо функционише? Хајде да вам покажем: ```javascript // Step 1: Basic conditional logic const userAge = 17; if (userAge >= 18) { console.log("You can vote!"); } else { const yearsToWait = 18 - userAge; console.log(`You'll be able to vote in ${yearsToWait} year(s).`); } ``` **Ево шта овај код ради:** - **Проверава** да ли корисник испуњава старосни услов за гласање - **Извршава** различите блокове кода на основу резултата услова - **Израчунава** и приказује колико је остало до испуњавања услова за гласање ако је испод 18 година - **Пружа** специфичне, корисне повратне информације за сваки сценарио ```javascript // Step 2: Multiple conditions with logical operators const userAge = 17; const hasPermission = true; if (userAge >= 18 && hasPermission) { console.log("Access granted: You can enter the venue."); } else if (userAge >= 16) { console.log("You need parent permission to enter."); } else { console.log("Sorry, you must be at least 16 years old."); } ``` **Разлагање онога што се овде дешава:** - **Комбинује** више услова користећи оператор `&&` (и) - **Креира** хијерархију услова користећи `else if` за више сценарија - **Обрађује** све могуће случајеве са завршним `else` изјавама - **Пружа** јасне, применљиве повратне информације за сваку различиту ситуацију ```javascript // Step 3: Concise conditional with ternary operator const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` **Шта треба да запамтите:** - **Користите** тернарни оператор (`? :`) за једноставне услове са две опције - **Напишите** услов прво, затим `?`, затим резултат за тачно, затим `:`, затим резултат за нетачно - **Примените** овај образац када треба да доделите вредности на основу услова ```javascript // Step 4: Handling multiple specific cases const dayOfWeek = "Tuesday"; switch (dayOfWeek) { case "Monday": case "Tuesday": case "Wednesday": case "Thursday": case "Friday": console.log("It's a weekday - time to work!"); break; case "Saturday": case "Sunday": console.log("It's the weekend - time to relax!"); break; default: console.log("Invalid day of the week"); } ``` **Овај код постиже следеће:** - **Упоређује** вредност променљиве са више специфичних случајева - **Групише** сличне случајеве заједно (радни дани против викенда) - **Извршава** одговарајући блок кода када се пронађе подударност - **Укључује** `default` случај за обраду неочекиваних вредности - **Користи** `break` изјаве да спречи наставак кода на следећи случај > 💡 **Аналогија из стварног живота**: Замислите контролни ток као да имате најстрпљивији GPS који вам даје упутства. Могао би рећи "Ако је гужва на Главној улици, идите ауто-путем. Ако је ауто-пут у изградњи, пробајте сценску руту." Програми користе управо ову врсту условне логике да интелигентно реагују на различите ситуације и увек пружају корисницима најбоље могуће искуство. ✅ **Шта следи**: Имаћемо апсолутно фантастично време истражујући дубље ове концепте док настављамо ово невероватно путовање заједно! Тренутно, само се фокусирајте на осећај узбуђења због свих невероватних могућности које вас чекају. Специфичне вештине и технике ће се природно усвојити како будемо заједно вежбали – обећавам да ће ово бити много забавније него што можда очекујете! ## Алатке за рад Добро, ово је искрено део где сам толико узбуђен да једва могу да се суздржим! 🚀 Управо ћемо причати о невероватним алаткама које ће вас натерати да се осећате као да сте добили кључеве дигиталног свемирског брода. Знате како кувар има савршено избалансиране ножеве који му изгледају као продужетак руку? Или како музичар има ону једну гитару која изгледа као да пева чим је додирне? Па, програмери имају своју верзију ових магичних алатки, и ево шта ће вас апсолутно одушевити – већина њих је потпуно бесплатна! Практично скакућем на столици размишљајући о томе да их поделим са вама јер су потпуно револуционисале начин на који градимо софтвер. Говоримо о асистентима за програмирање на бази вештачке интелигенције који могу да помогну у писању вашег кода (не шалим се!), облачним окружењима где можете да градите целе апликације буквално било где са Wi-Fi-јем, и алаткама за отклањање грешака толико софистицираним да су као да имате рендгенски вид за ваше програме. И ево дела који ме и даље одушевљава: ово нису "почетничке алатке" које ће вам досадити. Ово су исте професионалне алатке које програмери у Google-у, Netflix-у и оном инди студију за апликације који волите користе управо у овом тренутку. Осећаћете се као прави професионалац док их будете користили! ### Уређивачи кода и IDE-ови: Ваши нови дигитални најбољи пријатељи Хајде да причамо о уређивачима кода – они ће озбиљно постати ваша нова омиљена места за дружење! Замислите их као ваш лични кодерски храм где ћете проводити већину времена креирајући и усавршавајући своје дигиталне креације. Али ево шта је апсолутно магично код модерних уређивача: они нису само лепо дизајнирани текстуални уређивачи. Они су као да имате најбриљантнијег, најподржавајућег кодерског ментора који седи поред вас 24/7. Они хватају ваше грешке пре него што их и приметите, предлажу побољшања која вас чине генијем, помажу вам да разумете шта сваки део кода ради, а неки од њих чак могу да предвиде шта ћете написати и понуде да заврше ваше мисли! Сећам се када сам први пут открио аутоматско довршавање – буквално сам се осећао као да живим у будућности. Почнете да куцате нешто, а ваш уређивач каже: "Хеј, да ли си мислио на ову функцију која ради управо оно што ти треба?" То је као да имате читаоца мисли као кодерског друга! **Шта чини ове уређиваче тако невероватним?** Модерни уређивачи кода нуде импресиван низ функција дизајнираних да повећају вашу продуктивност: | Функција | Шта ради | Зашто помаже | |----------|----------|--------------| | **Истакнутост синтаксе** | Боји различите делове вашег кода | Олакшава читање кода и уочавање грешака | | **Аутоматско довршавање** | Предлаже код док куцате | Убрзава писање кода и смањује грешке | | **Алатке за отклањање грешака** | Помаже вам да пронађете и исправите грешке | Штеди сате времена за решавање проблема | | **Екстензије** | Додаје специјализоване функције | Прилагођава ваш уређивач за било коју технологију | | **AI асистенти** | Предлажу код и објашњења | Убрзавају учење и продуктивност | > 🎥 **Видео ресурс**: Желите да видите ове алатке у акцији? Погледајте овај [видео о алаткама за рад](https://youtube.com/watch?v=69WJeXGBdxg) за свеобухватан преглед. #### Препоручени уређивачи за веб развој **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Бесплатан) - Најпопуларнији међу веб програмерима - Одличан екосистем екстензија - Уграђен терминал и Git интеграција - **Обавезне екстензије**: - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-покретани предлози за код - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Сарадња у реалном времену - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Аутоматско форматирање кода - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Проналажење правописних грешака у коду **[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Плаћен, бесплатан за студенте) - Напредне алатке за отклањање грешака и тестирање - Интелигентно довршавање кода - Уграђена контрола верзија **Облачни IDE-ови** (Различите цене) - [GitHub Codespaces](https://github.com/features/codespaces) - Комплетан VS Code у вашем прегледачу - [Replit | **Конзола** | Прегледајте поруке о грешкама и тестирајте JavaScript | Решавајте проблеме и експериментишите са кодом | | **Мрежни монитор** | Пратите како се ресурси учитавају | Оптимизујте перформансе и време учитавања | | **Провера приступачности** | Тестирајте инклузивни дизајн | Осигурајте да ваш сајт функционише за све кориснике | | **Симулатор уређаја** | Прегледајте на различитим величинама екрана | Тестирајте одзивни дизајн без више уређаја | #### Препоручени претраживачи за развој - **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - ДевТулс стандард у индустрији са обимном документацијом - **[Firefox](https://developer.mozilla.org/docs/Tools)** - Одлични алати за CSS Grid и приступачност - **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Заснован на Chromium-у са Microsoft-овим ресурсима за програмере > ⚠️ **Важан савет за тестирање**: Увек тестирајте своје веб-сајтове у више претраживача! Оно што савршено функционише у Chrome-у може изгледати другачије у Safari-ју или Firefox-у. Професионални програмери тестирају на свим главним претраживачима како би осигурали конзистентно корисничко искуство. ### Алатке командне линије: Ваш пут до програмерских супермоћи Добро, хајде да будемо потпуно искрени о командној линији, јер желим да ово чујете од некога ко то заиста разуме. Када сам је први пут видео – само тај застрашујући црни екран са трепћућим текстом – буквално сам помислио: „Не, апсолутно не! Ово изгледа као нешто из хакерског филма из 80-их, и дефинитивно нисам довољно паметан за ово!“ 😅 Али ево шта бих волео да ми је неко тада рекао, а сада вам ја кажем: командна линија није застрашујућа – она је заправо као директан разговор са вашим рачунаром. Замислите то као разлику између наручивања хране преко fancy апликације са сликама и менијима (што је лепо и једноставно) и уласка у ваш омиљени локални ресторан где кувар тачно зна шта волите и може да направи нешто савршено само ако кажете „изненади ме нечим невероватним.“ Командна линија је место где програмери осећају да су апсолутни чаробњаци. Укуцате неколико наизглед магичних речи (у реду, то су само команде, али делују магично!), притиснете ентер и БУМ – направили сте целу структуру пројекта, инсталирали моћне алатке из целог света или поставили своју апликацију на интернет да је милиони људи виде. Када једном осетите ту моћ, то је заиста прилично заразно! **Зашто ће командна линија постати ваш омиљени алат:** Док су графички интерфејси одлични за многе задатке, командна линија је ненадмашна у аутоматизацији, прецизности и брзини. Многе алатке за развој раде првенствено преко интерфејса командне линије, а учење њиховог ефикасног коришћења може драматично побољшати вашу продуктивност. ```bash # Step 1: Create and navigate to project directory mkdir my-awesome-website cd my-awesome-website ``` **Шта овај код ради:** - **Креира** нови директоријум под називом "my-awesome-website" за ваш пројекат - **Прелази** у новокреирани директоријум како бисте започели рад ```bash # Step 2: Initialize project with package.json npm init -y # Install modern development tools npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` **Корак по корак, шта се дешава:** - **Иницијализује** нови Node.js пројекат са подразумеваним подешавањима користећи `npm init -y` - **Инсталира** Vite као модеран алат за брз развој и продукцијске верзије - **Додаје** Prettier за аутоматско форматирање кода и ESLint за проверу квалитета кода - **Користи** `--save-dev` заставицу да означи ове зависности као само за развој ```bash # Step 3: Create project structure and files mkdir src assets echo 'My Site

Hello World

' > index.html # Start development server npx vite ``` **У горе наведеном, урадили смо:** - **Организовали** наш пројекат креирањем посебних фасцикли за изворни код и ресурсе - **Генерисали** основни HTML фајл са правилном структуром документа - **Покренули** Vite сервер за развој ради аутоматског освежавања и замене модула у реалном времену #### Основне алатке командне линије за веб развој | Алат | Сврха | Зашто вам је потребан | |------|-------|-----------------------| | **[Git](https://git-scm.com/)** | Контрола верзија | Праћење промена, сарадња са другима, резервне копије вашег рада | | **[Node.js & npm](https://nodejs.org/)** | JavaScript окружење и управљање пакетима | Покрените JavaScript ван претраживача, инсталирајте модерне алатке за развој | | **[Vite](https://vitejs.dev/)** | Алат за изградњу и сервер за развој | Изузетно брз развој са заменом модула у реалном времену | | **[ESLint](https://eslint.org/)** | Квалитет кода | Аутоматски проналазак и исправка проблема у вашем JavaScript-у | | **[Prettier](https://prettier.io/)** | Форматирање кода | Одржавајте ваш код конзистентно форматираним и читљивим | #### Опције специфичне за платформу **Windows:** - **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Модеран, богат функцијама терминал - **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Моћно окружење за скриптовање - **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Традиционална Windows командна линија **macOS:** - **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Уграђена апликација за терминал - **[iTerm2](https://iterm2.com/)** - Напредни терминал са додатним функцијама **Linux:** - **[Bash](https://www.gnu.org/software/bash/)** 💻 - Стандардна Linux љуска - **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Напредни емулатор терминала > 💻 = Унапред инсталирано на оперативном систему > 🎯 **Пут учења**: Почните са основним командама као што су `cd` (промена директоријума), `ls` или `dir` (листање фајлова) и `mkdir` (креирање фасцикле). Вежбајте са модерним командама као што су `npm install`, `git status` и `code .` (отвара тренутни директоријум у VS Code-у). Како постајете све сигурнији, природно ћете усвојити напредније команде и технике аутоматизације. ### Документација: Ваш увек доступан ментор за учење Добро, дозволите ми да поделим једну малу тајну која ће вас учинити много опуштенијим као почетника: чак и најискуснији програмери проводе велики део свог времена читајући документацију. И то није зато што не знају шта раде – то је заправо знак мудрости! Замислите документацију као приступ најстрпљивијим, најзнаменитијим учитељима на свету који су доступни 24/7. Заглавили сте на проблему у 2 ујутру? Документација је ту са топлим виртуелним загрљајем и тачно оним одговором који вам је потребан. Желите да научите о некој кул новој функцији о којој сви причају? Документација вас подржава са корак-по-корак примерима. Покушавате да разумете зашто нешто функционише на одређени начин? Погодили сте – документација је спремна да вам то објасни на начин који ће вам коначно разјаснити! Ево нечега што ми је потпуно променило перспективу: свет веб развоја се невероватно брзо креће, и нико (мислим апсолутно нико!) не памти све. Гледао сам сениор програмере са 15+ година искуства како траже основну синтаксу, и знате шта? То није срамота – то је паметно! Није ствар у савршеном памћењу; ствар је у томе да знате где да брзо пронађете поуздане одговоре и разумете како да их примените. **Ево где се дешава права магија:** Професионални програмери проводе значајан део свог времена читајући документацију – не зато што не знају шта раде, већ зато што се пејзаж веб развоја тако брзо развија да је за одржавање у току потребно континуирано учење. Одлична документација вам помаже да разумете не само *како* да користите нешто, већ *зашто* и *када* да га користите. #### Основни ресурси за документацију **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** - Златни стандард за документацију веб технологија - Обухватни водичи за HTML, CSS и JavaScript - Укључује информације о компатибилности претраживача - Садржи практичне примере и интерактивне демонстрације **[Web.dev](https://web.dev)** (од Google-а) - Најбоље праксе модерног веб развоја - Водичи за оптимизацију перформанси - Принципи приступачности и инклузивног дизајна - Студије случаја из стварних пројеката **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** - Ресурси за развој Edge претраживача - Водичи за прогресивне веб апликације - Увид у развој на више платформи **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** - Структурисани курикулуми за учење - Видео курсеви од стручњака из индустрије - Практичне вежбе кодирања > 📚 **Стратегија учења**: Не покушавајте да меморишете документацију – уместо тога, научите како да је ефикасно претражујете. Обележите референце које често користите и вежбајте коришћење функција претраге за брзо проналажење специфичних информација. ✅ **Храна за размишљање**: Ево нечега занимљивог за размишљање – како мислите да се алатке за прављење веб-сајтова (развој) разликују од алатки за дизајнирање њиховог изгледа (дизајн)? То је као разлика између архитекте који дизајнира прелепу кућу и извођача радова који је заправо гради. Оба су кључна, али им је потребан различит алат! Овакав начин размишљања ће вам заиста помоћи да видите ширу слику о томе како веб-сајтови оживљавају. ## GitHub Copilot Agent изазов 🚀 Користите Agent мод да завршите следећи изазов: **Опис:** Истражите функције модерног едитора кода или IDE-а и покажите како може побољшати ваш радни процес као веб програмера. **Задатак:** Изаберите едитор кода или IDE (као што су Visual Studio Code, WebStorm или cloud-based IDE). Наведите три функције или екстензије које вам помажу да пишете, дебагујете или одржавате код ефикасније. За сваку, пружите кратко објашњење како користи вашем радном процесу. --- ## 🚀 Изазов **Добро, детективе, спреман за свој први случај?** Сада када имате ову сјајну основу, имам авантуру која ће вам помоћи да видите колико је програмерски свет невероватно разноврстан и фасцинантан. И слушајте – ово није о писању кода још увек, тако да нема притиска! Замислите себе као детектива програмских језика на свом првом узбудљивом случају! **Ваша мисија, ако је прихватите:** 1. **Постаните истраживач језика**: Изаберите три програмска језика из потпуно различитих универзума – можда један који прави веб-сајтове, један који креира мобилне апликације и један који обрађује податке за научнике. Пронађите примере истог једноставног задатка написаног на сваком језику. Обећавам да ћете бити апсолутно задивљени колико различито могу изгледати док раде исту ствар! 2. **Откријте њихове приче о пореклу**: Шта чини сваки језик посебним? Ево једне кул чињенице – сваки програмски језик је створен јер је неко помислио: „Знате шта? Мора постојати бољи начин да се реши овај специфичан проблем.“ Можете ли да схватите који су то проблеми били? Неке од ових прича су заиста фасцинантне! 3. **Упознајте заједнице**: Погледајте колико су добродошле и страствене заједнице сваког језика. Неке имају милионе програмера који деле знање и помажу једни другима, друге су мање, али невероватно блиске и подржавајуће. Биће вам занимљиво да видите различите личности ових заједница! 4. **Пратите свој осећај**: Који језик вам тренутно делује најприступачније? Не брините о томе да направите „савршен“ избор – само слушајте своје инстинкте! Овде заиста нема погрешног одговора, и увек можете истражити друге касније. **Бонус детективски рад**: Покушајте да откријете који велики веб-сајтови или апликације су направљени са сваким језиком. Гарантујем да ћете бити шокирани када сазнате шта покреће Instagram, Netflix или ту мобилну игру коју не можете да престанете да играте! > 💡 **Запамтите**: Не покушавате да постанете експерт у било ком од ових језика данас. Само упознајете околину пре него што одлучите где желите да се сместите. Узмите своје време, забавите се и пустите да вас води радозналост! ## Прославимо оно што сте открили! Света крава, апсорбовали сте толико невероватних информација данас! Искрено сам узбуђен да видим колико је од овог невероватног путовања остало са вама. И запамтите – ово није тест где морате све савршено да урадите. Ово је више као прослава свих кул ствари које сте научили о овом фасцинантном свету у који ћете ускоро заронити! [Урадите квиз након лекције](https://ff-quizzes.netlify.app/web/) ## Преглед и сам - Погледајте неке видео снимке о програмирању за почетнике на YouTube-у. Постоји толико сјајних креатора који се сећају како је то када тек почињете. - Размислите о придруживању локалним окупљањима или онлајн заједницама. Верујте ми, програмери воле да помажу почетницима! > 🎯 **Слушајте, ево шта желим да запамтите**: Не очекује се да преко ноћи постанете мајстор програмирања! Тренутно само упознајете овај невероватан нови свет чији ћете део постати. Узмите времена, уживајте у путовању и запамтите – сваки програмер којем се дивите је некада био тачно тамо где сте ви сада, узбуђен и можда мало збуњен. То је потпуно нормално и значи да радите како треба! ## Задатак [Читање документације](assignment.md) > 💡 **Мали подстицај за ваш задатак**: Било би сјајно да истражите неке алате које још нисмо покрили! Прескочите уреднике, претраживаче и алате командне линије о којима смо већ причали – постоји читав невероватан универзум фантастичних алата за развој који само чекају да буду откривени. Потражите оне који се активно одржавају и имају живе, корисне заједнице (такви обично имају најбоље туторијале и најподржавајуће људе када се неизбежно заглавите и треба вам пријатељска помоћ). --- **Одрицање од одговорности**: Овај документ је преведен помоћу услуге за превођење вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.