Започнете с HTML5

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

Съдържание

§1. Въведение





§2 - Семантично маркиране



§3 - Формуляри





§4 - Среден

§5 – CSS3 Трансформации и анимации



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

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



§8 - Къде по -нататък?

1. Въведение

Чували сте за него: HTML5. Всички го използват. Той е обявен за спасител на Интернет, позволявайки на хората да създават богати, ангажиращи уеб страници, без да прибягват до използването на Flash и Shockwave.



Но какво всъщност е това?

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

HTML5 е всичко това и много повече. И така, за какво е тази книга?

В този урок за HTML5 ще предположа, че в един момент сте се докоснали до HTML и CSS. Може би сте създали своя собствена тема на Wordpress или сте редактирали оформление на MySpace през деня. Може би сте прочели собственото XHTML ръководство на MakeUseOf. Въпросът е, че предполагам, че знаете как се движите около уеб страница и че това, което обсъждаме в това ръководство, няма да ви е твърде чуждо.

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

Защо искате да научите HTML5?

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

Вярвате или не, наистина е обичайно да се пишат приложения за смартфони, използващи HTML5 технологии. Доскоро приложението Facebook за Android беше писано с помощта на HTML5, CSS и Javascript.

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

Новите смартфони с Firefox OS работят и изцяло на HTML5 приложения. Работните познания за HTML5 са от съществено значение в днешния климат на смартфоните.

Освен това изучаването на HTML5 е добро за вашата кариера. Не ми вярвате? Според Doesri.com , средната годишна заплата за HTML5 разработчик е поразително 89 000 долара. Тъй като все повече компании променят уебсайтовете си, за да използват HTML5 технологии, разработчиците, които познават стека HTML5, са търсени - сега повече от всякога.

1.1 Предпоставки

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

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

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

Ако си чешете главата по горното, не се притеснявайте. Едно от най -добрите неща за HTML и CSS е, че е наистина, наистина лесно. Всъщност MakeUseOf има невероятно XHTML ръководство, което ще ви доведе до много бърза скорост.

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

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

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

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

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

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

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

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

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

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

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

В Linux текстовият редактор по подразбиране варира в различните дистрибуции. В Ubuntu вероятно е Gedit, който е доста приятен текстов редактор, който не е твърде различен от Notepad.

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

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

Третият е конзолата Javascript, която е вградена в Google Chrome. Това ни позволява да напишем Javascript и да го видим да се изпълнява незабавно и ще се използва за обяснение на основните концепции за програмиране.

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

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

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

Доскоро HTML кодът обикновено беше организиран с тагове. Това ви позволи да създадете група от елементи и след това да приложите стилизиране към тези елементи.

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

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

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

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

как да изберете един цвят във Photoshop

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

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

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

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

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

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

2.1 Раздел

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

2.2 Чл

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

2.3 Встрани

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

2.4 Заглавна част

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

2.5 Нав

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

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

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.

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

мога ли да изтегля филми от amazon prime на компютъра си?

Освен това те бяха патентовани формати. В резултат на това потребителите на 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 и му давам атрибут на src, който има стойност на видеоклипа, който искам да включа.

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

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

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

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

След това включвате изходен маркер към MP3 файла, към който искате да свържете. Всъщност не е нужно да се притеснявате толкова много, когато става въпрос за съвместимост с кодеци. Най -новите уеб браузъри имат възможност за възпроизвеждане на MP3 аудио, въпреки че е добра практика да включвате и „.ogg“ и „.wav“ файлове - за всеки случай.

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

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

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

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

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

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

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

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

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

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

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

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

5.1 CSS Hover ефекти

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML5 Rocks - Презентация

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

Ако искате да използвате скрипт във вашия уеб браузър, трябва да използвате Javascript. Няма два начина за това, за съжаление. Това е език, който има много фенове и много противници. С езиците има много брадавици. Има причина най -забележителната книга за езика да се нарича „Javascript: The Good Parts“.

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

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

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

Традиционно е, че първата програма, която всеки начинаещ разработчик пише, е програмата „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 (' Hello world! ');'.

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

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

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

След това искаме да проверим дали не съм изпълнил условие. Така че в този случай искаме да видим, че е по -малко от 10. Така че след точката и запетая пишем 'i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

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

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

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

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

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

Забележете как написах „if (cheeseburgers == 'tasty') '. Използвате двойно или тройно равно за проверка на равенството и единично равно за присвояване на стойност.

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

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

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

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

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

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

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

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

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

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

7.1 Първи стъпки с Canvas

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

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

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

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

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

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

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

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

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

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

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

След това ще искаме да създадем друга контекстна променлива. Наречете това „context2“ и се уверете, че е 2d. Именно това ще използваме, за да напишем нашия текст.

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

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

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

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

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

как да направите iso файл стартиращ

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

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

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

8. Къде по -нататък?

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

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

Дял Дял Туит електронна поща Струва ли си да надстроите до Windows 11?

Windows е преработен. Но достатъчно ли е това, за да ви убеди да преминете от Windows 10 към Windows 11?

Прочетете Напред Свързани теми
  • Wordpress и уеб разработка
  • HTML5
  • Дълга форма
  • Ръководство за дълги форми
За автора Матю Хюз(386 статии са публикувани)

Матю Хюз е софтуерен разработчик и писател от Ливърпул, Англия. Рядко се среща без чаша силно черно кафе в ръка и абсолютно обожава своя Macbook Pro и фотоапарата си. Можете да прочетете блога му на http://www.matthewhughes.co.uk и да го последвате в Twitter в @matthewhughes.

Още от Матю Хюз

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!

Щракнете тук, за да се абонирате