Започнете с HTML5

Това ръководство е достъпно за изтегляне като безплатен PDF файл. Изтеглете Започнете с HTML5 сега. Чувствайте се свободни да копирате и споделяте това с приятелите и семейството си.

instagram viewer

и

таговете не са твърде обезсърчаващи и не се страхувате да замърсите ръцете си в някакъв изходен код.

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

Ако се почешете по главата по-горе, не се притеснявайте. Едно от най-добрите неща за HTML и CSS е, че това е наистина, много лесно. Всъщност MakeUseOf има невероятно ръководство за XHTML Научете се да говорите "Интернет": Вашето ръководство за xHTMLДобре дошли в света на XHTML - Extensible Hypertext Markup Language - език за маркиране, който позволява на всеки да конструира уеб страници с много различни функции. Това е основният език на Интернет. Прочетете още това ще ви доведе до скорост наистина бързо.

След като прочетете това ръководство, може да искате да разгледате и следните статии:

• 8 уебсайта с примери за качествено кодиране 8 най-добри уебсайтове за качествени HTML кодиращи примериИма няколко страхотни уебсайтове, които предлагат добре проектирани и полезни примери за кодиране на HTML и уроци. Ето осем от нашите любими. Прочетете още
• 6 блога за следване на страхотни уеб дизайнери 6 най-добри блогове за уеб дизайн, които да следвате Прочетете още

Ще ви е необходим и модерен текстов редактор и браузър. Всяка версия на Internet Explorer, която е по-стара от IE 9 и някои по-стари версии на Safari, Chrome и Firefox ще се бори с много функции, които са част от HTML5 и може да ви попречи да следвате това напътства.

В резултат на това се насърчавате да изтеглите модерен браузър. Препоръчвам Google Chrome и ще го използвам във всеки пример.

Отвъд всичко това, което ще ви трябва, е желанието да научите. О, и текстов редактор.

1.2 Текстови редактори за уеб разработка

Текстовият ви редактор е това, което ще използвате, за да напишете кода си. Може би се чудите какво е текстов редактор.

Е, първо не е текстов процесор. Програми като Microsoft Word и Apple's Pages са напълно неподходящи за уеб разработка. Това е така, защото те прикачват допълнителна информация към вашите HTML, CSS и Javascript файлове, което затруднява четенето на вашия уеб браузър.

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

Компютърът ви вече се предлага с такъв. Ако използвате компютър с Windows, тогава Notepad е текстовият редактор, който вероятно сте инсталирали.

В Mac ситуацията е малко по-различна. OS X се предлага с четири различни текстови редактори. Те се наричат ​​Vim, Emacs, Pico и Nano. Въпреки това, за разлика от Notepad, всички те работят в терминала.

Това е малко смущаващо за хора, които са нови в уеб разработката и не трябва да се използват от хора, които са нови в разработката на софтуер. Няма да ги използваме в това ръководство. Когато обаче сте малко по-уверени в разработката на софтуер и уеб, определено си струва да разгледате Vim Най-важните 7 причини да дадете шанс на редактора на текстови текстове на VimОт години опитвам един текстов редактор след друг. Наричате го, опитах го. Използвах всеки един от тези редактори повече от два месеца като мой основен ежедневен редактор. Някак си ... Прочетете още и Emacs. И двамата са мощни текстови редактори и при овладяване могат да ви спестят страшно много време.

В Linux, текстовият редактор по подразбиране варира между дистрибуциите. В Ubuntu е вероятно Gedit gedit: Един от най-многофункционалните обикновени текстови редактори [Linux и Windows]Когато мислите за редактори за обикновен текст, първото нещо, което може да изскочи в главата ви, е приложението на Notepad за Windows. Той прави точно това, което гласи длъжностното му описание - обикновени функции за обикновен текст ... Прочетете още , което е доста приятен текстов редактор, който не е твърде различен от Notepad.

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

Първият е Възвишен текст 2 Изпробвайте възвишен текст 2 за нуждите си от редактиране на код за междуплатформаSublime Text 2 е кросплатформен редактор на кодове, за който едва наскоро чух и трябва да кажа, че съм наистина впечатлен въпреки бета етикета. Можете да изтеглите пълното приложение, без да плащате и стотинка ... Прочетете още . Честно казано не мога да ви препоръчам достатъчно силно. Той се предлага с всички неща, които улесняват живота на начинаещ разработчик. Първо, той ще направи вашия код по-лесен за четене чрез оцветяване на определени части. Второ, тя ви позволява лесно да превключвате между файлове и да управлявате цели проекти на файлове. Това е идеално за превключване между файлове и за редактиране на няколко бита код в движение.

Третият е Javascript конзола Открийте проблеми с уебсайта с инструменти за разработчици на Chrome или FirebugАко досега следвах уроците ми за jQuery, може би вече сте се сблъскали с някои проблеми с кода и не знаете как да ги коригирате. Когато се сблъскате с нефункционален бит код, това е много ... Прочетете още който е вграден в Google Chrome. Това ни позволява да напишем Javascript и да видим, че се изпълнява веднага и ще бъде използван за обяснение на основни концепции за програмиране.

Вторият е уебсайт, наречен Codepen.io. Този забележителен уебсайт ще ви позволи да кодирате HTML, CSS и Javascript в браузъра и е свободен за използване. Той също така ще ви позволи да видите промените си незабавно.

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

В тази глава ще научите за Semantic Markup и как да организирате кода си въз основа на съдържанието му.

Доскоро HTML кодът обикновено се организираше с

Това работи, но имаше място за подобрение. Проблемът с

Семантичното маркиране е нова функция в HTML5. Той въвежда нови тагове, които работят по същия начин като маркер „div“, но са за маркиране на общи части на страницата.

И така, как работят? Помислете следния код.

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

Нека да разгледаме статия за MakeUseOf. Ще забележите, че има част от страницата, която е запазена изцяло за навигация до други статии. Ще забележите също, че има друга част на страницата, която съдържа думите, които съставляват статия. В горната част на страницата ще видите заглавка, съдържаща логото на MakeUseOf и някои други връзки.

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

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

Така че, помниш ли този код, който имахме преди? Нека го разгледаме с добавено семантично маркиране.

Както можете да видите, кодът е много по-лесен за четене. Знаете кои части са кои и няма неяснота. Това е важно, защото улеснява писането на добър, чист код. Ако някога решите да станете професионален уеб дизайнер, това става от първостепенно значение - никога не знаете кой ще чете произведението, което произвеждате.

Така че, нека разгледаме някои по-семантични маркери за маркиране.

2.1 Раздел

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

2.2 Член

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

2.3 настрана

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

2.4 Хедър

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

2.5 Nav

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

2.6 Footer

Този маркер е запазен за долната част на страницата. Тук можете да поставите някои данни за контакт, информация за авторските права, карта или някои връзки към страницата си „за мен“.

2.7 Тествайте себе си

• Какво е семантична маркировка и за какво се използва?
• Правя уеб страница и искам да използвам семантичен маркер, за да съдържа биография за мен. Кой от тях използвам?

3. Форми

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

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

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

И така, какво е толкова страхотно в новия начин, по който можем да пишем формуляри в HTML5? Първо, можете да гарантирате, че някои полета трябва да бъдат попълнени, за да се изпратят, само като промените маркирането на самия формуляр. Освен това вече не е нужно да пишете планини на JavaScript или PHP, за да направите това. Това е тривиално лесно.

Второ, можете да гарантирате, че вашите потребители могат да предоставят само определени видове информация във вашия формуляр. Да предположим, че имате уебсайт за вашия пощенски списък и искате само хората да могат да изпращат действителни имейл адреси? Можете да направите това, само като използвате HTML5. Наистина е невероятно мощен.

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

3.1 Подобряване на формуляр

Така че, нека да разгледаме формуляр и да видим как можем да го подобрим.

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

И така, първото нещо, което ще искаме да направим, е да гарантираме, че полето за електронна поща заема само имейл. Това наистина беше доста трудна задача, тъй като трябва да създадете всевъзможни тайнствени Regex кодове. Е, не повече. Просто трябва просто да промените типа на входа от „текст“ на „имейл“. Когато се опитате да изпратите този формуляр с безсмислица, той ще се оплаче и настоява да изпратите имейл.

3.2 Типове и модели на въвеждане

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

Освен това, за неща като телефонни номера, които варират в зависимост от населеното място, можете да зададете модели за въвеждане. Те са създадени с помощта на нещо, наречено „Регулярни изрази“ и са доста сложни, но неизмеримо мощни.

Също така ще искаме да предоставим пример на имейл в нашето поле, така че потребителят няма двусмисленост какво трябва да изпрати. Това е наистина лесно да се направи. Просто създайте нов атрибут на „заместител на място“ с примерен имейл адрес.

Ще гарантираме, че е задължително полето ни „Любим цвят“. В последната скоба (>) в маркера за въвеждане на имейл просто напишете "задължително". Това е. Сега, когато се опитате да изпратите формуляра си без стойност, той ще генерира съобщение за грешка.

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

Това беше невероятно кратко запознаване със силата на формите в HTML5. Ако искате да прочетете повече, препоръчвам ви да посетите тези връзки.

Допълнителна информация:

• CSS трикове - Нека пишем семантично маркиране
• HTML5 Doctor - Нека да поговорим за семантиката

3.3 Тествайте себе си

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

• име
• Имейл адрес
• Телефонен номер
• алергии

Уверете се, че полетата за име, имейл и телефонен номер са задължителни и че полетата за имейл и телефонен номер са зададени с входните типове „имейл“ и „тел“. Създайте заместител за полето за алергия със стойността „цветен прашец, яйца, киш“.

Играйте с формата. Опитайте да изпратите задължителните полета като празни и опитайте да вмъкнете нецифрени символи в полето за телефонен номер. В полето за имейл въведете нещо, което не е имейл адрес. Какво става?

4. средства

Имаше време, когато единственият начин, по който можете да вмъкнете видео или аудио в уеб страница, беше да използвате нещо като Flash, Shockwave или SilverLight.

Това не беше идеално. Първо, нито една от тези рамки не работеше толкова добре на мобилни устройства. Те просто не бяха оборудвани за съвременния свят на смартфони и таблети.

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

Накрая те имаха склонност да са бавни. Ако сте били на компютър с недостиг или по-стар, няма да имате добро изживяване при гледане на видео, използвайки тези рамки. Flash беше особено известен за това.

4.1 Как HTML5 прави видео и аудио страхотно

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

В резултат на това големи компании като YouTube, Vimeo и Netflix се възползват от революцията в HTML5. Защо не се присъедините към тях?

4.2 Всичко за кодеците

В тази глава ще научите как да използвате силата на HTML5 за включване на аудио и видео в уеб страниците си.

Първо, ще трябва да започна с предупреждение. Въпреки че можете да използвате HTML5 видео във всеки модерен уеб браузър, той не работи еднакво във всеки уеб браузър. Кодеците, използвани от всеки браузър, варират. В Internet Explorer сте ограничени до използването на MP4 видео. Chrome е малко по-щедър и ви позволява да използвате WebM, MP4 и Ogg Theora видео. Opera е малко по-ограничителен и ви позволява да използвате само Theora и WebM видео.

В резултат на това трябва да сте малко по-умни с това как да вмъквате видео в уеб страницата си. Така че, нека да видим как работи.

4.3 Започване с видео

За начало ще трябва да създадете някакво отваряне и затваряне

Е, когато чакате да се зареди видеоклипът ви, човекът, който посещава сайта ви, може да види снимка, свързана с видеоклипа. За целта просто дайте на видео маркерите си атрибут на „плакат“ със стойност на изображението, към което искате да свържете. Трябва да изглежда така.

Следващото нещо, което ще искаме да направим, е да създадем резерв. Какво означава това? Да предположим, че използвате някой от по-старите, по-малко страхотни браузъри. Много от тези по-стари браузъри не поддържат HTML5 видео и следователно не могат да възпроизвеждат HTML5 видео. Ще искате да им оставите съобщение, информиращо ги, че ще искат да надстроят браузъра си и че докато не го направят, няма да могат да гледат видеоклипа ви.

За да направите това, просто напишете съобщението си във вашите видео маркери. Нищо друго не се изисква. След като направите това, ще ви остане някакъв код, който изглежда така.

Сега, нека добавим малко видео. Ще тествам това в Google Chrome, така че ще свържа към MP4 филм. За да направя това, създавам Source tag и му давам атрибут на src, който има стойност на видеото, което искам да включа.

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

4.4 Добавяне на аудио

Аудиото може да бъде поставено във вашата уеб страница по начин, който много напомня как ние вмъкнахме видео в нашата страница.

Първо, човек създава някои аудио маркери. Тези аудио маркери съдържат атрибут на „контроли“. Това дава на потребителя, който посещава страницата, възможността да прави пауза, възпроизвеждане назад и пренавиване на аудиото, което се възпроизвежда.

След това добавяте изходен маркер към MP3 файла, към който искате да свържете. Не е нужно наистина да се притеснявате толкова много, когато става въпрос за съвместимост с кодек. Повечето уеб браузъри имат възможност да възпроизвеждат MP3 аудио, въпреки че е добра практика да включват и. .Gg и файл .wav за всеки случай.

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

Крайният резултат изглежда малко така.

Когато отворите това в уеб браузъра си, трябва да изглежда малко така.

4.5 Тествайте себе си

• Каква е целта да имате плакат във вашите видео маркери?
• Какви кодеци не можете да използвате в Internet Explorer?
• Ако исках възможността да паузирам някакво аудио, какъв атрибут бихте добавили към вашия маркер „аудио“?

Допълнителна информация:

• HTML5 скали видео

5. CSS3 трансформации и анимации

CSS традиционно се използва за обработка на оформление и дизайн на уеб страница 5 бебешки стъпки за научаване на CSS и ставане на Kick-Ass CSS магьосникCSS е единствената най-важна промяна на уеб страниците през последното десетилетие и проправи пътя за разделянето на стила и съдържанието. По модерен начин XHTML определя семантичната структура ... Прочетете още . Това все още е вярно, но в последната си итерация тя придоби способността да борави с анимации и трансформации на елементи и изображения.

Хората са направили някои невероятни неща с CSS3, от създаването на цифров часовник до писането на пълна игра на Pong. Някой дори го е използвал, за да създаде отново въвеждащите кредити на Mad Men. Това е наистина мощна технология и когато се овладее, може да се използва за добавяне на невероятно ниво на функционалност към вашата уеб страница.

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

Първо, отворете codepen.io и създайте нова писалка. Ще използваме това като наше работно пространство по време на настоящата глава.

Ще започнем просто и ще създадем проста трансформация на изображение, която върти изображение на 3 градуса при задържане. На първо място, създайте div tag и му дайте идентификатор. В примера по-долу съм му дал идентификатор на „muo“.

5.1 ефекти на CSS Hover

В този div включете изображение по ваш избор. Включих копие на логото за MakeUseOf.

След това ще трябва да напишете някои правила за таблица на стилове. В примера по-долу създадох горен и лев ръб, за да дам на изображението малко място. Включих и любопитно изглеждащо правило за стилове, което започва с „#muo: hover“. Какво е това?

Когато прикачите „: задръжте“ към правило за таблица стилове, било то към елемент, идентификатор или клас, вие ефективно казвате на браузъра да приложи този стил, когато мишката управлява елемента. Доста готин, нали?

Вътре в правилото „#muo: задържане“ имаме ред, който казва „-webkit-transform: rotate (3deg)“. Както съм сигурен, че се досетихте, това казва на браузъра да завърти този елемент с три градуса.

Въпреки това си струва да се отбележи, че този маркер работи само в Chrome и Safari. Ако искате кодът ви да работи в Firefox или Internet Explorer 9 и по-нови, ще искате да промените вашия CSS файл, за да включва следните редове.

Сега, когато задържите курсора на мишката върху изображението, изглежда така:

5.2 Използване на CSS3 за преоразмеряване на изображенията

И така, защо да спираме дотук? Знаете ли, че можете също да използвате метода "трансформиране", за да увеличите или свиете изображение. Нека променим нашия CSS файл, за да включим следните редове.

Както можете да видите, сега сме включили ново правило за трансформация, но този път го казваме да направи нещо, наречено „мащаб“. Това е наистина красив начин да увеличите размера на изображение. Необходими са два параметъра (онези числа, които виждате между тези скоби) и те представляват сумата, с която увеличавате височината и ширината на елемента.

Както можете да видите от кода, ще увелича размера на логото на MakeUseOf div с 50%. Можете да тествате това произведение, като задържите курсора на мишката върху него. Ще видите, че логото на MakeUseOf сега е значително по-разтегнато.

Това беше много нежно въведение в CSS3 трансформациите. Въпреки че CSS3 наистина е много нов, сега можете да видите, че можете да правите много много интересни манипулации с него.

5.3 Тествайте себе си

• Как да приложим стайлинг към елемент при задържане на курсора?
• Как завъртате изображение чрез CSS3?
• Как мащабирате изображение с помощта на CSS3?
• Какво се случва, ако преминете метода на трансформация „превод (50px, 50px)“?

Допълнителна информация:

HTML5 скали - презентация

6. Просто достатъчно Javascript

Ако искате да използвате скрипт във вашия уеб браузър, трябва да използвате Javascript Какво е JavaScript и как работи? [Обяснена технология] Прочетете още . За съжаление няма два начина за това. Това е език, който има много фенове 5 Обширни опции на библиотеката на JavaScript код за разработчици Прочетете още и много възпрепятстващи фактори също. Докато езиците вървят, има много брадавици. Има причина най-забележителната книга за езика да се нарича „Javascript: Добрите части“.

Ще бъде невъзможно да ви науча как да използвате Javascript в една глава. Това не е целта тук. Целта е да ви научим достатъчно Javascript, така че да можете да разберете следващата глава, която се отнася до използването на технология, наречена Canvas, за да направите рисунки и анимации.

6.1 Достъп до конзолата

За целта ще използваме конзолата Javascript, която е вградена във всяко копие на Google Chrome. За да получите достъп до това, можете да щракнете с десния бутон върху която и да е уеб страница и след това да натиснете „Проверка на елемент“. След това кликнете върху „Конзола“. Трябва да видите това.

Традиционно е, че първата програма, която всеки начинаещ разработчик пише, е програмата „Hello World“. Това е проста програма, която отпечатва фразата "Hello World" и не много. Въведете в конзолата „console.log („ Здравейте, свят! “) ;.

6.2 Вашата първа програма

И така, какво точно направихме? Първо, ние нарекохме нещо, наречено „console.log“. Това е малко код, който е вграден в компютъра, който просто разпечатва каквото му кажете. След това прикрепихме някои скоби към него и включихме в двойните кавички „Hello World“. Това се нарича „предаване на аргументи“, а вида на аргумента, който предавахме, се нарича низ. Всеки път, когато искате да направите нещо, включващо букви и специални знаци, просто трябва да използвате единични кавички. Ако обаче искате да направите нещо с помощта на числа, обикновено не е необходимо да използвате кавички, както се вижда по-долу.

6.3 Променливи в JavaScript

Можете също да предавате променливи и на „console.log“. Променливите звучат сложно, но единственото, което те наистина са, е място за поставяне на парчета информация. Това често са цифри или букви. За да направите това, декларирате променлива с помощта на ключовата дума "var", давате й име и след това със знак за равенство, давате й стойност. Така че, ще създам променлива, наречена „здравей“ и след това ще й дам стойност „Здравей, свят!“. След това ще го предам на console.log.

Забележете как не предадох „здравей“ на console.log, използвайки кавички. Това е така, защото исках да отпечатам на конзолата съдържанието на „здравей“, а не самото „здравей“.

6.4 Какви функции изпълняват

Може да е малко досадно да пренаписвате един и същ парче код отново и отново, така че именно поради тази причина пишем функции. Функциите са по-лесни, отколкото си мислите. Всичко, което те са, е парчета код, които можем да използваме отново, без да пренапишем отново същия код. По-долу създадохме функция, наречена „sup“ и я предаваме като аргумент, използвайки скоби, които след това се вписват на екрана. Извикваме „sup“, като изпращаме до конзолата „sup („ Здравей свят! “);“.

6.5 Повтаряне на действие с цикъл „За“

Да предположим, че сте искали да извършите едно и също действие за определен брой пъти. Поради тази причина ние използваме цикъл „за“. Те изглеждат страшно в началото, но са толкова лесни за правене, след като ги разберете. Започвате, като пишете „за ()“.

В тези скоби ще искаме да създадем променлива, която отчита колко пъти сме извършили действие. Така че получаваме нещо, което изглежда така „за (var i = 0;)“.

След това искаме да проверим дали не съм изпълнил условие. В този случай искаме да видим, че е по-малко от 10. И така, след запетайката пишем „i <10“. Нашата линия сега изглежда така: 'for (var i = 0; i <10;).

Ако i е по-малко от 10, искаме да го добавим по един и след това да направим нещо. И така, поставяме „i = i + 1“. Нашият цикъл е почти завършен: 'for (var i = 0; i <10; i = i + 1) “. Обърнете внимание как последната част няма запетая.

След това ще искаме да направим действие. И така, след последните скоби пишем някои къдрави скоби и между тях ще консолираме.log стойност на i. Това ще създаде брояч, който брои до девет.

Последните две конструктивни програми, които ще разгледаме, са „ако“ изявления и „докато“.

6.6 Ако изявления

Изразът „ако“ извършва действие, ако са изпълнени определени критерии. Те са подобни на „for“ бримки в строителството и работят както следва. Да предположим, че имате променлива, наречена „чийзбургер“, и искате да видите дали тя има стойност „вкусно“. Ако това стане, искате да влезете „yum, чийзбургер“ на екрана. За целта бихте написали нещо подобно.

Забележете как написах „ако (чизбургер ==„ вкусно “)“. Използвате двойни или тройни уравнения, за да проверите равенството, и единични равни, за да зададете стойност.

6.7 Докато цикъл

И накрая, цикълът "докато" изпълнява действие, докато критерият е изпълнен. Така че, представете си, че искате да влезете „yum, чийзбургер“, докато чийзбургерите са еднакво вкусни. За целта ще напишете следното.

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

Както споменах по-рано, това беше много кратко въведение в програмните конструкции в Javascript. Насърчаваме се да прочетете повече за тази завладяваща, макар и огромна тема.

6.8 Тествайте себе си

• Искам да отброя от 30. Напишете цикъл „за“, който би направил това.
• Искам да създам променлива, наречена „makeuseof“ и да й дам стойност „страхотно“. Как се прави това?
• Искам да създам функция, която при извикване отпечатва „MakeUseOf Is Awesome“. Напишете тази функция.

Допълнителна информация:

• „Javascript: Добрите части“ от Дъглас Крокфорд
• Ръководство за MDN Javascript

7. Творческо платно

Canvas е готина технология, която ви позволява да рисувате изображения и да създавате анимации, без да се налага да прибягвате до Flash или Silverlight. Хората са го използвали, за да създават причудливи и прекрасни неща, включително симулатор за сешоар и различни видео игри. Това е прекрасно и непостижимо голямо технологично произведение, в този урок ще ви представя кратко описание.

Струва си да се отбележи, че Canvas работи само в съвременни уеб браузъри. Ако използвате стара версия на IE, Chrome или Firefox, може да не успеете да следвате тази глава. Ако случаят е такъв, трябва да помислите за изтегляне на най-новата версия на Google Chrome, който беше уеб браузърът, в който създадох този урок.

7.1 Първи стъпки с платно

На първо място, ще трябва да отворите уеб браузъра си и да отидете на codepen.io. Създайте нова писалка.

Сега ще трябва да обявим елемент на платно. Създайте два маркера за отваряне и затваряне на Canvas. В тях трябва да му предадете три атрибута. Това са ширината и височината на елемента Canvas, заедно с идентификатора, който го давате. Както преди, когато сте вмъкнали някои видеоклипове, трябва да включите резервно съобщение.

Сега, ние ще искаме да напишем някакъв Javascript код, който да привлече нещо на екрана. Ще започнем основно и ще създадем обикновен червен квадрат.

Ще създадем променлива (аз я нарекох „демо“) и след това изберете елемента „canvas“ и го присвоим на тази променлива. За целта използвате document.getElementByID () и въвеждате идентификатора на елемента, който искате да изберете.

Вторият ред в нашия скрипт създава друга променлива, наречена „контекст“ и след това извиква „demo.getContext („ 2d “)“ върху нея. Това каза на браузъра, че ще работим върху 2d изображение, след което предаде необходимите функции, които трябва да изпълним, за да извлечем на екрана.

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

Това не е впечатляващо. Нека направим нещо малко по-усъвършенствано и използвайте магията на Javascript и Canvas, за да създадете MakeUseOf чисто ново лого.

7.2 Форми и текст

Да изтрием нашия четвърти ред и да го заменим с този, който поставя правоъгълника ни в горния ляв ъгъл и го разтяга по дължината на платното ни.

Първите два аргумента определят къде искаме да позиционираме осите x и y на формата. За сега да зададем тези два на „0“. Третият аргумент се отнася до ширината на формата. Нека да зададем това на „200“ и след това да оставим четвъртия аргумент на „50“. Вече трябва да имате нещо, което изглежда малко така.

Това е чудесно начало, но изобщо не споменава MakeUseOf. Така че, ще добавим малко текст. Нека създадем променлива, съдържаща „makeuseof“, и ще наречем тази променлива „MakeUseOf“.

Тогава ще искаме да създадем друга променлива на контекста. Обадете се на този „контекст2“ и се уверете, че е 2г. Именно това ще използваме, за да пишем текста си.

Ще искаме текстът ни да бъде оцветен в син цвят и да наслои червения ни квадрат. Така че, както преди, ние ще искаме да му дадем попълване на стил „синьо“. Сега ще изберем характеристиките на нашия текст. Искаме той да е с 20px голям, удебелен формат и да използва шрифт Arial. Ние извикваме шрифт на контекст2 и му присвояваме стойността „удебелен 20px arial“.

Тъй като искаме този текст да припокрие предишното ни червено поле, трябва да извикаме „textBaseLine“ в контекста2 и да му дадем стойност на върха. След като това приключи, ние извикваме „fillText“ в контекста2 и му предаваме променливата, съдържаща нашия текст и x и y координатите, в които възнамеряваме да поставим нашия текст. Крайният резултат от нашия код е нещо подобно.

Изображението, което се произвежда от кода, изглежда така.

7.3 Слово върху платно

Докато това беше невероятно основно въведение в Canvas, трябва да разберете, че това е също невероятно голяма технология и невероятно мощна за зареждане. Това ръководство просто послужи като въведение в правенето на графики с помощта на тази нова технология.

7.4 Тествайте себе си

• Добавете следния лозунг към създадения от вас образ: „Най-добрият сайт за технологии винаги!“
• Създайте цикъл „за“, който работи за десет повторения. Вижте дали можете да преместите рисунката си надолу върху платното, пиксел в даден момент.
• Увийте рисунката си във функция. Какво се случва, ако не го наречете?

Допълнителна информация:

• HTML5 Rocks - Интегриране на платно във вашите уеб приложения.
• Treehouse - Как да рисуваме с платно

8. Къде Напред?

Благодаря ви, че прочетохте невероятно краткото ми ръководство за новите технологии, открити в HTML5. Безспорно е, че HTML5 е технологията на бъдещето. Той се възприема от повечето технологии, тъй като е лесен за писане и е безпроблемен. Хората правят невероятни неща с това непрекъснато и не се съмнявам, че в бъдеще вие ​​ще бъдете един от тези хора. За мен е чест, че бях част от пътуването ви в дивия и прекрасен свят на HTML5.

Умолявам ви да продължите да учите. Продължете да кодирате. Продължете да изравнявате и усъвършенствате и за нула време изобщо ще използвате технологиите, въведени в това кратко ръководство, за да създадете прекрасни продукти.