Започните са ХТМЛ5

Започните са ХТМЛ5
Овај водич је доступан за преузимање као бесплатни ПДФ. Преузмите ову датотеку сада . Слободно копирајте и поделите ово са пријатељима и породицом.

Преглед садржаја

§1. Представљање





§2 – Семантичко означавање



§3 – Обрасци





§4 - Средњи

§5 – ЦСС3 Трансформације и анимације



§6 –Само Јавасцрипт

§7 – Креативно платно



§8 - Где даље?

1. Представљање

Чули сте за то: ХТМЛ5. Сви га користе. Најављује се као спаситељ Интернета, омогућавајући људима да стварају богате, привлачне веб странице без прибегавања употреби Фласх -а и Схоцкваве -а.



Али шта је то заправо?

Па, на то није лако одговорити. У овом водичу ХТМЛ5 покушаћемо да пружимо неке одговоре. ХТМЛ5 се користи за описивање заиста разнолике групе ствари. То је стандард за писање веб страница. То је збирка АПИ -ја. То је нови начин додавања интерактивности на веб странице.

ХТМЛ5 је све то и више. О чему је, дакле, ова књига?

У овом туторијалу ХТМЛ5 претпостављам да сте се у једном тренутку дотакли ХТМЛ -а и ЦСС -а. Можда сте креирали сопствену Вордпресс тему или сте уредили МиСпаце изглед тог дана. Можда сте читали МакеУсеОф -ов властити КСХТМЛ водич. Поента је у томе да претпостављам да се добро сналазите на веб страници и да вам оно о чему говоримо у овом водичу неће бити превише страно.

Циљ овог водича није да вас научи целини ХТМЛ5. То би било потпуно ван оквира ове књиге. Циљ је пружити благи увод у ове невероватне нове веб технологије и показати вам неке кул начине да их укључите у своје веб локације.

Зашто бисте желели да научите ХТМЛ5?

Поштено питање. У свету паметних телефона и апликација, да ли је заиста важно научити програмирати веб странице?

Па, веровали или не, заиста је уобичајено писати апликације за паметне телефоне користећи ХТМЛ5 технологије. До недавно је Фацебоок апликација за Андроид писана коришћењем ХТМЛ5, ЦСС и Јавасцрипт.

Блацкберри је још једна велика компанија која је изузетно заинтересована за ХТМЛ5. То је очигледно у најновијој итерацији њиховог мобилног оперативног система, Блацкберри ОС 10, где активно подстичу програмере да развијају апликације за своје телефоне користећи веб технологије.

Нови Фирефок ОС паметни телефони такође раде у потпуности на ХТМЛ5 апликацијама. Радно познавање ХТМЛ5 кључно је у данашњој клими паметних телефона.

Осим тога, учење ХТМЛ5 је добро за вашу каријеру. Не верујете ми? Према заиста.цом , просечна годишња плата за ХТМЛ5 програмера је невероватних 89.000 долара. Са све већим бројем компанија које мењају своје веб локације да користе ХТМЛ5 технологије, програмери који познају ХТМЛ5 хрпу су тражени - сада више него икад.

1.1 Предуслови

Овај водич за ХТМЛ5 претпоставља неколико ствари. Прво, претпоставља да знате како веб функционише и да знате како да креирате основну веб страницу. Требали бисте бити у могућности да саставите неке ХТМЛ елементе заједно и да будете у могућности да представите неке информације у веб прегледачу. Видећи и

ознаке нису превише застрашујуће и не бојите се да ћете запрљати руке у неком изворном коду.

Друго, овај водич претпоставља да знате шта је ЦСС и како функционише. Не очекујемо да ћете бити генији у дизајну, нити се од вас очекује да знате целу ЦСС спецификацију. Требали бисте, међутим, моћи примијенити стил на елемент на веб страници, моћи ћете се повезати с ЦСС датотеком и знати разлику између ИД -а и класе те како примијенити стил на сваку од њих.

Ако се гребете по горе наведеном, не брините. Једна од најбољих ствари у вези са ХТМЛ -ом и ЦСС -ом је та што је заиста, заиста једноставно. У ствари, МакеУсеОф има невероватан КСХТМЛ водич који ће вас довести до брзине заиста брзо.

Након што прочитате овај водич, можда бисте желели да погледате и следеће чланке:

Такође ће вам требати модеран уређивач текста и прегледач. Свака верзија Интернет Екплорер -а старија од ИЕ 9 и неке старије верзије Сафари, Цхроме и Фирефок ће се борити са многим функцијама које су део ХТМЛ5 и могу вас спречити да следите овај водич.

Као резултат тога, охрабрујемо вас да преузмете савремени прегледач. Препоручујем Гоогле Цхроме и користићу га у сваком примеру.

Осим тога, све што ће вам требати је воља за учењем. Ох, и уређивач текста.

1.2 Уређивачи текста за веб развој

Уређивач текста је оно што ћете користити за писање кода. Можда се питате шта је уређивач текста.

Па, прво није процесор текста. Програми као што су Мицрософт Ворд и Аппле'с Пагес потпуно су неприкладни за веб развој. То је зато што додају додатне информације вашим ХТМЛ, ЦСС и Јавасцрипт датотекама што отежава читање вашем веб прегледачу.

Уређивач текста убацује знакове у текстуалну датотеку, и не много више. Ово вам омогућава да креирате датотеке које немају додатно обликовање и могу се сачувати са било којим проширењем по вашем избору.

Ваш рачунар већ долази са једним. Ако користите Виндовс рачунар, Нотепад је уређивач текста који сте вероватно инсталирали.

На Мацу је ситуација мало другачија. ОС Кс долази са четири различита уређивача текста. Зову се Вим, Емацс, Пицо и Нано. Међутим, за разлику од Нотепада, сви они раде у терминалу.

Ово је помало застрашујуће за људе који су тек почели са развојем веба и не би требало да их користе људи који су тек почели са развојем софтвера. Нећемо их користити у овом водичу. Међутим, када постанете самопоузданији у развоју софтвера и веба, свакако је вредно погледати Вим и Емацс. Обоје су моћни уређивачи текста, а када се савладају могу вам уштедети ужасно много времена.

На Линук -у, подразумевани уређивач текста варира између дистрибуција. На Убунту -у је вероватно Гедит, који је прилично пријатан уређивач текста који се не разликује превише од Нотепада.

Међутим, на овом курсу ћемо писати наш код користећи три различита алата.

Први је Узвишени текст 2. Искрено, не могу ово препоручити довољно високо. Долази са свим стварима које олакшавају живот почетнику. Прво, ваш ће код бити лакши за читање бојењем одређених делова. Друго, омогућава вам лако пребацивање између датотека и управљање читавим пројектима датотека. Ово је идеално за пребацивање између датотека и уређивање више делова кода у ходу.

Трећа је Јавасцрипт конзола која је уграђена у Гоогле Цхроме. Ово нам омогућава да напишемо Јавасцрипт и видимо да се одмах покреће и користиће се за објашњење основних програмских концепата.

Друга је веб страница под именом Цодепен.ио. Ова изванредна веб локација ће вам омогућити да кодирате ХТМЛ, ЦСС и Јавасцрипт у прегледачу и бесплатна је за употребу. Такође ће вам омогућити да одмах видите промене.

2. Семантичко означавање

У овом поглављу ћете научити о семантичком означавању и начину организовања кода на основу његовог садржаја.

До недавно је ХТМЛ код углавном био организован са ознакама. Ово вам је омогућило да креирате групу елемената, а затим примените стил на те елементе.

Ово је успело, али било је простора за побољшања. Проблем са ознакама је био тај што нису биле семантичке. Див заправо не значи ништа.

Семантичко означавање је нова функција у ХТМЛ5. Доноси нове ознаке које функционишу на исти начин као и ознака „див“, али служе за означавање уобичајених делова странице.

Па, како они раде? Размотрите следећи код.

У овом делу кода имамо навигациону траку, наслов и листу. Ово се не разликује превише од већине веб локација на које ћете вероватно икада отићи, кад боље размислите.

како да комбинујем две колоне у екцелу

Погледајмо чланак о МакеУсеОф -у. Приметићете да постоји део странице који је у потпуности резервисан за навигацију до других чланака. Такође ћете приметити да постоји још један део странице који садржи речи које чине чланак. При врху странице видећете заглавље које садржи логотип МакеУсеОф и неке друге везе.

Кад боље размислите, многе веб странице следе ове конвенције. Већина веб локација има део који је резервисан за навигацију. Обично имају садржај. Они више него вероватно имају заглавље.

Семантичке ознаке су ознаке које вам омогућавају да дефинишете делове веб локације који се обично налазе на већини веб локација. Они не додају ништа на страницу, али вам омогућавају да групишете ознаке на основу њиховог садржаја и примените стилове на те групе.

Дакле, сећате се оног кода који смо имали раније? Погледајмо то са додатим семантичким ознакама.

Као што видите, код је много лакше читати. Знате који су то делови и нема нејасноћа. Ово је важно јер олакшава писање доброг и чистог кода. Ако икада одлучите да постанете професионални веб дизајнер, ово постаје најважније - никад не знате ко ће читати дело које сте написали.

Дакле, погледајмо још неке семантичке ознаке за означавање.

2.1 Одељак

Одељак је заиста корисна ознака. Користи се за прикупљање огромних количина информација и садржаја који су означени заглављем или насловом. Замислите ово као поглавље у књизи. Поглавље има наслов, а може садржати и слике, дијаграме, графиконе и речи. Ознака одељка би се користила да садржи све то.

2.2 Члан

Ознака чланка се користи за оно што звучи; Садржи садржај као што је пост на блогу или вест. Овај садржај би требао бити одвојен од остатка блога и даље имати кохерентан смисао.

2.3 На страну

Ова ознака је резервисана за садржај који је повезан, али није саставни део веб странице. Ово може бити гомила чињеница које се односе на вест или биографију корисника на блогу.

2.4 Заглавље

Многе веб странице имају траку на врху странице која садржи логотип, неке информације које се односе на веб локацију и можда неке везе. У семантичком означавању, користили бисте ознаку заглавља да бисте садржали све ово.

2.5 Нав

Овај елемент је резервисан за навигациони део ваше веб странице. Ово би садржало везе до других веб страница или до других страница на веб страници. У контексту МакеУсеОф, ово би могао бити део странице који се налази испод заглавља.

Ова ознака је резервисана за доњи део странице. Овде можете поставити неке контакт податке, податке о ауторским правима, мапу или неке везе на своју страницу „о мени“.

2.7 Тестирајте себе

  • Шта је семантичко означавање и за шта се користи?
  • Правим веб страницу и желим да помоћу семантичке ознаке садржи биографију о себи. Коју да користим?

3. Обрасци

Ако сте икада радили мало веб дизајна, вероватно знате како да направите једноставан образац у ХТМЛ -у. Ако сте заиста паметни, вероватно знате како да преузмете информације које добијете из свог обрасца и како да нешто учините с тим, па их ставите у базу података.

Обрасци су изузетно важни. Они су основа већине ствари које радимо на Интернету. Сваки пут када креирате ажурирање статуса на својој омиљеној друштвеној мрежи, купите нешто од Амазона или пошаљете е -поруку, вероватно сте користили ХТМЛ образац.

Оно што вероватно нисте знали је да се начин на који стварамо обрасце радикално променио у ХТМЛ5. Такође је знатно боље. У овом поглављу ћемо погледати неке од кул ствари које сада можете да урадите, само са обичним старим ознакама.

Дакле, шта је супер у новом начину писања образаца у ХТМЛ5? Прво, можете осигурати да се нека поља морају попунити да бисте их послали, само променом ознака самог обрасца. Осим тога, више не морате да пишете планине ЈаваСцрипт или ПХП да бисте то урадили. Тривијално је лако.

Друго, можете осигурати да ваши корисници могу послати само одређене врсте података у ваш образац. Дакле, претпоставимо да имате веб локацију за своју листу слања и желите само да људи могу да пошаљу стварне адресе е -поште? То можете учинити само помоћу ХТМЛ5. Заиста је невероватно моћан.

Треће, можете побољшати своје обрасце тако што ћете одређеним пољима дати чувар места. Ово ће их учинити знатно интуитивнијим, јер својим корисницима можете показати пример онога што очекујете од обрасца.

3.1 Побољшање обрасца

Дакле, погледајмо образац и видимо како га можемо побољшати.

Овај облик је прилично једноставан. Потребно је име, адреса е -поште и омиљена боја, а затим омогућава кориснику да то пошаље. Не садржи потврду о томе које информације се у њега уносе, а ништа не спречава кориснике да пошаљу овај образац са неким празним пољима. Хајде да променимо све то.

Дакле, прва ствар коју ћемо желети да урадимо је да обезбедимо да поље за е -пошту узима само е -пошту. Ово је некада био прилично тежак задатак, јер бисте морали да креирате све врсте тајног Регек кода. Па, не више. Морате само да промените тип уноса са „текст“ у „е -пошта“. Када покушате да предате тај образац са бесмислицама, он ће се жалити и инсистирати да пошаљете е -поруку.

3.2 Врсте и обрасци уноса

Постоје и други типови уноса који можете захтевати. Ово укључује телефонске бројеве, веб адресе, обрасце за претраживање, па чак и бираче боја! Како се ХТМЛ5 стално развија, разумљиво је да ћемо ускоро моћи да наведемо више типова уноса у блиској будућности.

Надаље, за ствари попут телефонских бројева који варирају у зависности од локације, можете навести обрасце за унос. Они су створени користећи нешто што се зове „Регуларни изрази“ и прилично су компликовани, али неизмерно моћни.

Такође ћемо желети да наведемо пример е -поште у нашој области, тако да корисник нема двосмислености око тога шта мора да поднесе. То је заиста лако учинити. Само креирајте нови атрибут „чувар места“ са примером адресе е -поште.

Побринућемо се да је поље „Омиљена боја“ обавезно. У последњој угаоној загради (>) у ознаци за унос е -поште само напишите „потребно“. То је то. Сада, када покушате да пошаљете образац без вредности, он ће произвести поруку о грешци.

Заиста невероватна ствар у вези са овим порукама о грешци је да корисник не мора да их напише или да напише било који код да би их креирао. Само промените поље како бисте га учинили обавезним и то једноставно функционише. С тим у вези, могуће их је прилагодити, ако желите.

То је био невероватно кратак увод у моћ форми у ХТМЛ5. Ако желите да прочитате више, препоручујем вам да посетите ове везе.

Додатна литература:

  • ЦСС трикови - Хајде да напишемо семантичку ознаку
  • ХТМЛ5 Доктор - Хајде да причамо о семантики

3.3 Тестирајте себе

Следеће недеље вам је рођендан и желите да направите образац за регистрацију како бисте знали колико колача морате да направите. Отворите уређивач текста и креирајте образац са следећим пољима.

  • Име
  • Адреса Е-поште
  • Број телефона
  • Алергије

Уверите се да су поља за име, адресу е -поште и телефонски број обавезна и да су поља Е -пошта и Број телефона подешена са типовима уноса „е -пошта“ и „тел“. Направите чувар места за поље алергије са вредношћу „полен, јаја, куицхе“.

Поиграјте се са формом. Покушајте да обавезна поља пошаљете као празна, а затим у поље за број телефона уметните не-нумеричке знакове. У поље за е -пошту уметните нешто што није адреса е -поште. Шта се дешава?

4. Просек

Некада је био једини начин на који сте могли да уметнете видео или аудио запис на веб страницу користећи нешто попут Фласх -а, Схоцкваве -а или СилверЛигхт -а.

Ово није било идеално. Прво, ниједан од ових оквира није радио тако добро на мобилним уређајима. Једноставно нису били опремљени за савремени свет паметних телефона и таблета.

бесплатни филмови на мрежи бесплатно без регистрације

Осим тога, били су власнички формати. Као резултат тога, корисници Линука и ОС Кс могли су добити прилично другоразредно искуство или су чак били спријечени у кориштењу медијских услуга, јер то није било доступно за њихову платформу.

Коначно, имали су склоност да буду спори. Да сте на рачунару са слабијим напајањем или старијим, не бисте имали добро искуство гледања видео записа помоћу ових оквира. Фласх је био посебно познат по томе.

4.1 Како ХТМЛ5 чини видео и аудио одличним

ХТМЛ5 је ово променио допуштајући веб програмерима да укључе видео и аудио у своје веб странице са само неколико редова кода. Ради на мобилним уређајима и ради на сваком модерном веб прегледачу.

Као резултат тога, велике компаније као што су ИоуТубе, Вимео и Нетфлик користе предности ХТМЛ5 револуције. Зашто им се не придружите?

4.2 Све о кодецима

У овом поглављу ћете научити како користити моћ ХТМЛ5 за укључивање звука и видеа на своје веб странице.

Прво ћу морати да почнем са упозорењем. Иако можете да користите ХТМЛ5 видео у сваком модерном веб прегледачу, он не функционише исто у сваком веб прегледачу. Кодеци које користи сваки прегледач разликују се. У Интернет Екплореру сте ограничени на коришћење МП4 видео записа. Цхроме је мало издашнији и омогућава вам да користите ВебМ, МП4 и Огг Тхеора видео записе. Опера је мало рестриктивнија и дозвољава вам само коришћење Тхеора и ВебМ видео записа.

Као резултат тога, морате бити мало паметнији у начину на који уметнете видео на своју веб страницу. Дакле, да видимо како то функционише.

4.3 Почетак са видеом

За почетак ћете морати да креирате неке ознаке за отварање и затварање. Овде ћете се повезати са својим видео датотекама. Али прво ћете желети да поставите постер. Шта то значи?

Па, када чекате да се ваш видео учита, особа која посети вашу веб локацију може видети слику која се односи на видео. Да бисте то урадили, само дајте ознакама видео записа атрибут „постер“ са вредношћу слике на коју желите да се повежете. Требало би да изгледа овако.

Следећа ствар коју ћемо желети да урадимо је да направимо резервну копију. Шта ово значи? Дакле, претпоставимо да користите неки од старијих, мање страшних прегледача. Многи од ових старијих прегледача не подржавају ХТМЛ5 видео и стога не могу да репродукују ХТМЛ5 видео записе. Желећете да им оставите поруку у којој их обавештавате да ће желети да надограде свој прегледач и да све док то не учине неће моћи да гледају ваш видео.

Да бисте то урадили, само упишите своју поруку унутар видео ознака. Ништа друго није потребно. Када то учините, остаће вам неки код који изгледа овако.

Сада, додајмо видео. Ово ћу тестирати у Гоогле Цхроме -у, па ћу се повезати са МП4 филмом. Да бих то урадио, креирам изворну ознаку и дајем јој атрибут срц који има вредност видео записа који желим да укључим.

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

4.4 Додавање звука

Звук се може уметнути у вашу веб страницу на начин који веома подсећа на начин на који смо уметнули видео на нашу страницу.

Прво, потребно је створити неке аудио ознаке. Ове аудио ознаке садрже атрибут „контроле“. Ово даје кориснику који посети страницу могућност паузирања, репродукције уназад и премотавања унапред звука који се репродукује.

Затим укључите изворну ознаку у МП3 датотеку са којом желите да се повежете. Не морате толико бринути када је компатибилност кодека у питању. Најновији веб прегледачи имају могућност репродукције МП3 звука, мада је добра пракса да за сваки случај укључите и датотеке „.огг“ и „.вав“.

Коначно, можете да направите резервни део за старије прегледаче. Ово се ради на исти начин на који сте креирали резервни део за свој видео запис.

Крајњи резултат изгледа отприлике овако.

Када ово отворите у свом веб прегледачу, требало би да изгледа отприлике овако.

4.5 Тестирајте себе

  • Која је сврха постављања постера у видео ознакама?
  • Које кодеке не можете користити у Интернет Екплорер -у?
  • Да желим могућност паузирања звука, који атрибут бисте додали својој ознаци „аудио“?

Додатна литература:

5. ЦСС3 трансформације и анимације

ЦСС се традиционално користио за руковање изгледом и дизајном веб странице. Ово је и даље тачно, али је у својој последњој итерацији стекло способност руковања анимацијама и трансформацијама елемената и слика.

Људи су учинили неке невероватне ствари са ЦСС3, од стварања дигиталног сата до писања потпуне игре Понг. Неко га је чак користио за поновно стварање уводних кредита за Мад Мен. То је заиста моћна технологија и када се савлада може се користити за додавање невероватног нивоа функционалности вашој веб страници.

У овом поглављу ћу вам дати кратак увод у ЦСС3 и показати вам како да додате невероватне ефекте на своју страницу.

Прво идите на цодепен.ио и креирајте нову оловку. Ово ћемо користити као наш радни простор током трајања овог поглавља.

Почећемо једноставно и створити једноставну трансформацију слике која окреће слику за 3 степена када се задржи. Пре свега, креирајте див ознаку и дајте јој ИД. У доњем примеру дао сам му ИД 'муо'.

5.1 ЦСС ефекти лебдења

У тај див укључите слику по свом избору. Укључио сам копију логотипа за МакеУсеОф.

Затим ћете морати да напишете нека правила за стилове. У доњем примеру створио сам горњу и леву маргину како бих слици дао простора. Укључио сам и правило са стиловима знатижељног изгледа које почиње са '#муо: ховер'. Шта је то?

Када придружите ': ховер' правилу у табели стилова, било да се ради о елементу, ИД -у или класи, ефикасно говорите прегледачу да примени овај стил када миш управља елементом. Прилично кул, зар не?

Унутар правила '#муо: ховер' имамо линију која каже '-вебкит-трансформ: ротате (3дег)'. Сигуран сам да сте погодили, ово говори прегледачу да ротира тај елемент див за три степена.

Међутим, вреди напоменути да ова ознака ради само у Цхроме -у и Сафарију. Ако желите да ваш код ради у Фирефоку или Интернет Екплорер -у 9 и новијим верзијама, желећете да промените своју ЦСС датотеку тако да садржи следеће редове.

Сада, када пређете курсором преко слике, то изгледа овако:

5.2 Коришћење ЦСС3 за промену величине слика

Па, зашто стати ту? Да ли сте знали да можете користити и методу „трансформације“ за повећање или смањивање слике. Хајде да променимо нашу ЦСС датотеку тако да укључи следеће редове.

Као што видите, сада смо укључили ново правило трансформације, али овај пут му говоримо да уради нешто што се зове 'скала'. Ово је заиста леп начин да повећате величину слике. Потребна су два параметра (они бројеви које видите између тих заграда) и представљају износ за који повећавате висину и ширину елемента.

Као што видите из кода, повећаћу величину МакеУсеОф див логотипа за 50%. Ово дело можете тестирати преласком курсора преко њега. Видећете да је сада лого „МакеУсеОф“ сада знатно растегнутији.

Ово је био врло благ увод у ЦСС3 трансформације. Упркос томе што је ЦСС3 заиста нов, сада можете видети да са њим можете да радите много веома занимљивих манипулација.

5.3 Тестирајте себе

  • Како да применимо стил на елемент приликом лебдења?
  • Како ротирате слику помоћу ЦСС3?
  • Како скалирате слику помоћу ЦСС3?
  • Шта ће се догодити ако прођете метод трансформације „транслате (50пк, 50пк)“?

Додатна литература:

ХТМЛ5 Роцкс - Презентација

6. Само довољно Јавасцрипт -а

Ако желите да користите скрипту у свом веб прегледачу, морате да користите Јавасцрипт. Нажалост, не постоје два начина. То је језик који има много обожавалаца, а има и много противника. Како језици иду, има много брадавица. Постоји разлог зашто се најзначајнија књига о језику назива „Јавасцрипт: Тхе Гоод Партс“.

Немогуће вас је научити како да користите Јавасцрипт у једном поглављу. То није циљ овде. Циљ је да вас научим довољно Јавасцрипта да бисте разумели следеће поглавље, о употреби технологије која се зове Цанвас за израду цртежа и анимација.

6.1 Приступање конзоли

Да бисмо то урадили, користићемо Јавасцрипт конзолу која је уграђена у сваку копију Гоогле Цхроме -а. Да бисте приступили овоме, кликните десним тастером миша на било коју веб страницу, а затим притисните 'Инспецт Елемент'. Затим кликните на 'Цонсоле'. Требало би да видите ово.

Традиционално је да је први програм који сваки почетник у развоју написа програм „Хелло Ворлд“. Ово је једноставан програм који штампа израз „Хелло Ворлд“, и не много више. У своју конзолу откуцајте 'цонсоле.лог (' Здраво свете! ') ;.

6.2 Ваш први програм

Дакле, шта смо тачно урадили? Прво смо назвали нешто што се зове 'цонсоле.лог'. Ово је мали код који је уграђен у рачунар и једноставно штампа све што му кажете. Затим смо му приложили неке заграде и уврстили двоструке наводнике „Хелло Ворлд“. Ово се назива „прослеђивање аргумената“, а тип аргумента који смо проследили назива се стринг. Кад год желите да урадите нешто што укључује слова и посебне знакове, једноставно морате да користите појединачне наводнике. Међутим, ако желите да учините било шта користећи бројеве, обично не морате да користите наводнике, као што је приказано испод.

6.3 Променљиве у ЈаваСцрипт -у

Такође можете проследити променљиве у 'цонсоле.лог'. Варијабле звуче компликовано, али све што заиста јесу је простор за стављање комадића информација. То су често бројеви или слова. Да бисте то урадили, декларишете променљиву користећи кључну реч 'вар', дајете јој име, а затим са знаком једнакости, дајете јој вредност. Дакле, креираћу променљиву под називом 'хелло', а затим ћу јој дати вредност 'Хелло Ворлд!'. Онда ћу то проследити на цонсоле.лог.

Запазите како нисам проследио 'хелло' цонсоле.лог користећи наводнике. То је зато што сам хтео да одштампам садржај „хелло“, а не сам „хелло“ на конзоли.

6.4 Шта функције раде

Преписивање истог комада кода изнова и изнова може бити помало досадно, па из тог разлога пишемо функције. Функције су лакше него што мислите. Они су само комади кода које можемо поново користити без поновног писања истог кода. У наставку смо створили функцију која се зове 'суп' и прослеђујемо јој аргумент користећи заграде који се затим евидентира на екрану. Позивамо 'суп' слањем на конзолу 'суп (' Хелло ворлд! ');'.

6.5 Понављање радње помоћу петље „За“

Претпоставимо да сте желели да исту радњу извршите одређени број пута. Из тог разлога бисмо користили петљу 'фор'. У почетку изгледају застрашујуће, али их је тако лако учинити када их разумете. Започињете писањем 'фор ()'.

У тим заградама ћемо желети да створимо променљиву која броји колико пута смо извршили радњу. Дакле, добијамо нешто што изгледа овако 'за (вар и = 0;)'.

Затим желимо да проверимо да нисам испунио услов. Дакле, у овом случају желимо да видимо да је мање од 10. Дакле, после тачке и зареза, пишемо 'и<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

Ако је и мање од 10, желимо да га додамо за један, а затим учинимо нешто. Дакле, стављамо 'и = и + 1'. Наша петља је скоро завршена: 'фор (вар и = 0; и<10; i = i + 1)'. Note how the last part does not have a semicolon.

Након тога ћемо желети да извршимо акцију. Дакле, после последњих заграда, исписујемо неке увијене заграде, а између њих ћемо цонсоле.лог вредност и. Ово ће створити бројач који броји до девет.

Последња два програмска конструкта која ћемо погледати су 'иф' наредбе и 'вхиле' петље.

6.6 Ако Изјаве

Наредба „ако“ извршава радњу ако су испуњени одређени критеријуми. Они су слични петљама „за“ у грађевинарству и раде на следећи начин. Претпоставимо да имате променљиву која се зове „цхеесебургери“ и желите да видите има ли вредност „укусно“. Ако се то догоди, желите да пријавите 'иум, цхеесебургерс' на екран. Да бисте то урадили, написали бисте овако нешто.

Обратите пажњу на то како сам написао 'иф (цхеесебургерс ==' тасти ')'. Користите двоструко или троструко једнако за проверу једнакости, а појединачно једнако за додељивање вредности.

6.7 Док петље

Коначно, петља 'вхиле' извршава радњу док су критеријуми испуњени. Дакле, замислите да желите да улогујете 'иум, цхеесебургере', док су цхеесебургери једнако укусни. Да бисте то урадили, написали бисте следеће.

Вреди напоменути да би ово ушло у бесконачну петљу, и требало би да избегавате радњу на вредности која се вероватно неће променити. То може довести до закључавања прегледача или кода не ради.

Као што сам већ поменуо, ово је био врло кратак увод у програмирање конструкција у Јавасцрипт -у. Позивамо вас да прочитате више о овој фасцинантној, иако великој теми.

6.8 Тестирајте себе

  • Желим одбројавати од 30. Напишите петљу 'за' која би то учинила.
  • Желим да направим променљиву под називом 'макеусеоф' и доделим јој вредност 'авесоме'. Како се то ради?
  • Желим да креирам функцију која штампа „МакеУсеОф Ис Авесоме“ када се позове. Напишите ту функцију.

Додатна литература:

7. Креативно платно

Цанвас је супер технологија која вам омогућава да цртате слике и стварате анимације без потребе да прибегавате употреби Фласх -а или Силверлигхт -а. Људи су га користили за стварање бизарних и дивних ствари, укључујући симулатор за косу и разне видео игре. То је диван и неописиво велики део технологије, у овом водичу ћу вам дати кратак увод у то.

Вреди напоменути да Цанвас ради само на модерним веб прегледачима. Ако користите стару верзију ИЕ -а, Цхроме -а или Фирефока, можда нећете моћи да пратите ово поглавље. Ако је то случај, размислите о преузимању најновије верзије Гоогле Цхроме -а, који је био веб прегледач у којем сам направио овај водич.

7.1 Почетак рада са платном

Пре свега, мораћете да отворите веб прегледач и одете на цодепен.ио. Направите нову оловку.

Сада ћемо морати да декларишемо елемент платна. Направите две ознаке за отварање и затварање платна. У њима треба да му пренесете три атрибута. Ово су ширина и висина елемента Цанвас, заједно са ИД -ом који му дајете. Као и раније када сте уметнули неки видео запис, требали бисте укључити резервну поруку.

Сада ћемо желети да напишемо неки Јавасцрипт код који ће привући нешто на екран. Започећемо основно и креираћемо једноставан црвени квадрат.

Креираћемо променљиву (назвао сам је 'демо'), а затим изаберите елемент цанвас и доделите га тој променљивој. Да бисте то урадили, користите доцумент.гетЕлементБиИД () и унесите ИД елемента који желите да изаберете.

Други ред у нашој скрипти ствара другу променљиву под називом 'цонтект', а затим на њој позива 'демо.гетЦонтект (' 2д ')'. Ово је претраживачу рекло да ћемо радити на 2д слици, а затим је проследило потребне функције које нам требају да бисмо могли да нацртамо екран.

Трећи и четврти ред су они који заправо цртају на екрану. Трећи ред испуњава правоугаоник црвеном бојом, док четврти ред позива филлРецт, који га позиционира и дефинише његову дужину и ширину.

То ипак није импресивно. Учинимо нешто мало напредније и искористимо магију Јавасцрипта и Платна за креирање МакеУсеОф потпуно новог логотипа.

7.2 Облици и текст

Избришимо наш четврти ред и заменимо га оним који поставља наш правоугаоник у горњи леви угао и растеже га по дужини нашег платна.

Прва два аргумента дефинишу где желимо да поставимо осу к и и облика. Поставимо ова два на '0' за сада. Трећи аргумент се односи на ширину облика. Поставимо то на '200', а затим оставимо четврти аргумент на '50'. Сада би требало да имате нешто што изгледа овако.

Ово је одличан почетак, али уопште не спомиње МакеУсеОф. Дакле, додаћемо текст. Направимо променљиву која садржи 'макеусеоф', и назваћемо је променљивом 'МакеУсеОф'.

Тада ћемо желети да створимо другу променљиву контекста. Назовите овај 'цонтект2' и уверите се да је 2д. То је оно што ћемо користити за писање нашег текста.

Желећемо да наш текст буде плаве боје и да прекрива наш црвени квадрат. Дакле, баш као и пре, желећемо да му доделимо филлСтиле 'плавог'. Сада ћемо изабрати карактеристике нашег текста. Желимо да буде велики 20пк, подебљано обликован и да користи фонт Ариал. Фонт зовемо цонтект2 и додељујемо му вредност 'болд 20пк ариал'.

Пошто желимо да овај текст прекрива наш претходни црвени оквир, морамо позвати 'тектБасеЛине' у цонтект2 и дати му вредност топ. Када се то заврши, позивамо 'филлТект' у цонтект2 и проследимо му променљиву која садржи наш текст и координате к и и у које намеравамо да сместимо наш текст. Крајњи резултат нашег кода је отприлике овакав.

Слика коју производи код изгледа овако.

7.3 Реч на платну

Иако је ово био невероватно основни увод у Цанвас, требало би да схватите да је то такође невероватно велика технологија, и невероватно моћна за покретање. Овај водич је једноставно послужио као увод у израду графике помоћу ове нове технологије.

како отворити кбок оне с

7.4 Тестирајте себе

  • Додајте следећи слоган слици коју сте створили: 'Најбоља технолошка веб локација икада!'
  • Направите 'фор' петљу која ће радити десет итерација. Погледајте да ли можете да померите свој цртеж низ платно, по пиксел у исто време.
  • Замотајте свој цртеж у функцију. Шта се дешава ако то не назовете?

Додатна литература:

8. Где даље?

Хвала вам што сте прочитали мој невероватно кратак водич о новим технологијама које се налазе у ХТМЛ5. Неоспорно је да је ХТМЛ5 технологија будућности. Већина технологија га усваја јер је једноставан за писање и моћан је преко мере. Људи све време раде невероватне ствари с тим, и не сумњам да ћете у будућности бити један од тих људи. Част ми је што сам био део вашег путовања у дивљи и чудесни свет ХТМЛ5.

Преклињем вас да наставите да учите. Наставите са кодирањем. Наставите да повећавате ниво и побољшавате и за кратко време ћете користити технологије које су представљене у овом кратком водичу за стварање сјајних производа.

Објави Објави Твеет Емаил Да ли је вредно надоградње на Виндовс 11?

Виндовс је редизајниран. Али да ли је то довољно да вас убеди да пређете са Виндовс 10 на Виндовс 11?

Прочитајте следеће Повезане теме
  • Вордпресс & Веб Девелопмент
  • ХТМЛ5
  • Лонгформ
  • Лонгформ Гуиде
О аутору Маттхев Хугхес(Објављено 386 чланака)

Маттхев Хугхес је програмер софтвера и писац из Ливерпоола у Енглеској. Ретко се нађе без шоље јаке црне кафе у руци и апсолутно обожава свој Мацбоок Про и фотоапарат. Можете прочитати његов блог на хттп://ввв.маттхевхугхес.цо.ук и пратити га на твитеру на @маттхевхугхес.

Више од Маттхев Хугхес -а

Претплатите се на наш билтен

Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!

Кликните овде да бисте се претплатили