Начните с 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. Возможно, вы читали собственное руководство MakeUseOf по XHTML. Дело в том, что я предполагаю, что вы знакомы с веб-страницей и то, что мы обсуждаем в этом руководстве, не будет для вас слишком чуждым.

Цель этого руководства не в том, чтобы научить вас всему HTML5. Это полностью выходит за рамки этой книги. Цель состоит в том, чтобы дать легкое введение в эти удивительные новые веб-технологии и показать вам несколько интересных способов их включения в ваши веб-сайты.

Зачем вам изучать HTML5?

Это справедливый вопрос. Действительно ли в мире смартфонов и приложений важно научиться программировать веб-страницы?

Что ж, хотите верьте, хотите нет, но писать приложения для смартфонов с использованием технологий HTML5 - обычное дело. До недавнего времени приложение Facebook для Android писалось с использованием HTML5, CSS и Javascript.

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

Новые смартфоны Firefox OS также полностью работают на приложениях HTML5. Практическое знание HTML5 необходимо в сегодняшнем мире смартфонов.

Кроме того, изучение HTML5 полезно для вашей карьеры. Не верите мне? По данным Indeed.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 Pages, совершенно не подходят для веб-разработки. Это потому, что они прикрепляют дополнительную информацию к вашим файлам HTML, CSS и Javascript, что затрудняет чтение в вашем браузере.

Текстовый редактор переносит символы в текстовый файл и не более того. Это позволяет создавать файлы без дополнительного форматирования, которые можно сохранять с любым расширением по вашему выбору.

На вашем компьютере он уже есть. Если вы используете ПК с Windows, то Notepad - это текстовый редактор, который вы, вероятно, установили.

На Mac ситуация немного иная. В OS X есть четыре разных текстовых редактора. Они называются Vim, Emacs, Pico и Nano. Однако, в отличие от Блокнота, все они работают в терминале.

Это немного пугает людей, которые плохо знакомы с веб-разработкой, и не должны использоваться людьми, которые плохо знакомы с разработкой программного обеспечения. Мы не будем использовать их в этом руководстве. Однако, когда вы станете более уверенными в программном обеспечении и веб-разработке, определенно стоит взглянуть на Vim и Emacs. Оба они являются мощными текстовыми редакторами, и при освоении они могут сэкономить вам очень много времени.

В Linux текстовый редактор по умолчанию зависит от дистрибутива. В Ubuntu это, скорее всего, Gedit, довольно приятный текстовый редактор, не слишком отличающийся от Блокнота.

Однако в этом курсе мы будем писать наш код, используя три разных инструмента.

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

Третий - это консоль Javascript, встроенная в Google Chrome. Это позволяет нам писать Javascript и сразу видеть, как он запускается, и будет использоваться для объяснения основных концепций программирования.

Второй - это сайт Codepen.io. Этот замечательный веб-сайт позволит вам кодировать HTML, CSS и Javascript в браузере, и его можно использовать бесплатно. Это также позволит вам мгновенно увидеть свои изменения.

2. Семантическая разметка

В этой главе вы узнаете о семантической разметке и о том, как организовать свой код на основе его содержимого.

До недавнего времени HTML-код обычно был организован с помощью тегов. Это позволило вам создать группу элементов, а затем применить стили к этим элементам.

Это сработало, но было что улучшить. Проблема с тегами заключалась в том, что они не были семантическими. Div на самом деле ничего не значит.

Семантическая разметка - это новая функция HTML5. Он вводит новые теги, которые работают так же, как тег div, но предназначены для тегирования общих частей страницы.

Итак, как они работают? Рассмотрим следующий код.

В этом фрагменте кода у нас есть панель навигации, заголовок и список. Это не слишком отличается от большинства веб-сайтов, на которые вы, вероятно, когда-нибудь будете заходить, если подумать.

что такое зона ar на самсунг

Давайте посмотрим статью о 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.

Это было не идеально. Во-первых, ни один из этих фреймворков не работал так хорошо на мобильных устройствах. Они просто не были приспособлены для современного мира смартфонов и планшетов.

подключение наушников bluetooth к xbox one

Кроме того, это были проприетарные форматы. В результате пользователи 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 Запуск с видео

Для начала вам нужно создать несколько открывающих и закрывающих тегов. Здесь вы будете ссылаться на свои видеофайлы. Но сначала вам нужно установить плакат. Что это обозначает?

Что ж, когда вы ждете загрузки видео, человек, посещающий ваш сайт, может увидеть картинку, которая относится к видео. Для этого просто присвойте вашим тегам видео атрибут «poster» со значением изображения, на которое вы хотите создать ссылку. Должно получиться вот так.

Следующее, что нам нужно сделать, это создать запасной вариант. Что это значит? Итак, предположим, вы используете один из старых, менее крутых браузеров. Многие из этих старых браузеров не поддерживают видео HTML5 и, следовательно, не могут воспроизводить видео HTML5. Вы захотите оставить им сообщение, информирующее их о том, что они собираются обновить свой браузер и что до тех пор, пока они этого не сделают, они не смогут смотреть ваше видео.

Для этого вы просто пишете свое сообщение внутри тегов видео. Больше ничего не требуется. Как только вы это сделаете, у вас останется код, который выглядит примерно так.

Теперь добавим видео. Я собираюсь протестировать это в Google Chrome, поэтому я собираюсь дать ссылку на фильм в формате MP4. Для этого я создаю тег Source и даю ему атрибут src, который имеет значение видео, которое я хочу включить.

Моя страница теперь готова к открытию в моем веб-браузере. Я связался с фильмом, который действительно очень большой, и в результате при открытии можно увидеть только плакат.

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

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

Во-первых, создается несколько звуковых тегов. Эти звуковые теги содержат атрибут «элементы управления». Это дает пользователю, который посещает страницу, возможность приостанавливать, воспроизводить перемотку назад и вперед воспроизводимого звука.

Затем вы включаете тег источника в файл MP3, на который хотите создать ссылку. Вам не нужно особо беспокоиться о совместимости кодеков. Самые последние веб-браузеры имеют возможность воспроизводить аудио в формате MP3, хотя рекомендуется также включать файлы с расширениями .ogg и .wav - на всякий случай.

Наконец, вы можете создать запасной вариант для старых браузеров. Это делается так же, как вы создавали резервную копию для своего видео.

Конечный результат выглядит примерно так.

Когда вы откроете это в своем веб-браузере, это должно выглядеть примерно так.

4.5 Проверьте себя

  • Для чего нужен постер в тегах видео?
  • Какие кодеки нельзя использовать в Internet Explorer?
  • Если бы мне нужна была возможность приостановить воспроизведение звука, какой атрибут вы бы добавили в свой тег «audio»?

Дальнейшее чтение:

5. Преобразования и анимация CSS3

CSS традиционно использовался для обработки макета и дизайна веб-страницы. Это по-прежнему верно, но в своей последней итерации он получил возможность обрабатывать анимацию и преобразования элементов и изображений.

С помощью CSS3 люди сделали несколько удивительных вещей, от создания цифровых часов до написания полноценной игры в Понг. Кто-то даже использовал его для воссоздания вступительных титров к «Безумцам». Это действительно мощная технология, и после ее освоения ее можно использовать для добавления потрясающего уровня функциональности на вашу веб-страницу.

В этой главе я дам вам краткое введение в CSS3 и покажу, как добавить на вашу страницу несколько удивительных эффектов.

Сначала перейдите на codepen.io и создайте новое перо. Мы собираемся использовать это как рабочее пространство на протяжении всей главы.

Мы собираемся начать с простого и создать простое преобразование изображения, которое поворачивает изображение на 3 градуса при наведении курсора. Прежде всего, создайте тег div и дайте ему идентификатор. В приведенном ниже примере я присвоил ему идентификатор «muo».

5.1 CSS-эффекты при наведении курсора

В этот div включите изображение по вашему выбору. Я включил копию логотипа MakeUseOf.

Затем вам нужно будет написать несколько правил таблицы стилей. В приведенном ниже примере я создал верхнее и левое поля, чтобы освободить место для изображения. Я также включил любопытное правило таблицы стилей, которое начинается с '#muo: hover'. Что это?

Когда вы прикрепляете ': hover' к правилу таблицы стилей, будь то элемент, идентификатор или класс, вы фактически говорите браузеру применять этот стиль, когда ваша мышь управляет элементом. Довольно круто, правда?

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

Однако стоит отметить, что этот тег работает только в Chrome и Safari. Если вы хотите, чтобы ваш код работал в Firefox или Internet Explorer 9 и более поздних версиях, вам нужно изменить файл CSS, включив в него следующие строки.

Теперь, когда вы наводите курсор на изображение, оно выглядит так:

5.2 Использование CSS3 для изменения размера изображений

Итак, зачем останавливаться на достигнутом? Знаете ли вы, что вы также можете использовать метод «преобразования» для увеличения или уменьшения изображения. Давайте изменим наш файл CSS, включив в него следующие строки.

Как видите, мы добавили новое правило преобразования, но на этот раз мы говорим ему сделать что-то под названием «масштаб». Это действительно красивый способ увеличить размер изображения. Он принимает два параметра (числа, которые вы видите между скобками), и они представляют величину, на которую вы увеличиваете высоту и ширину элемента.

Как видно из кода, я собираюсь увеличить размер логотипа Div MakeUseOf на 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. Чтобы получить к нему доступ, вы можете щелкнуть правой кнопкой мыши любую веб-страницу и затем нажать «Проверить элемент». Затем нажмите «Консоль». Вы должны это увидеть.

Традиционно первая программа, которую когда-либо пишет любой начинающий разработчик, - это программа Hello World. Это простая программа, которая печатает фразу «Hello World» и не более того. В консоли введите console.log ('Hello world!') ;.

6.2 Ваша первая программа

Итак, что именно мы сделали? Во-первых, мы назвали что-то под названием console.log. Это фрагмент кода, встроенный в компьютер, который просто распечатывает все, что вы ему говорите. Затем мы добавили к нему несколько скобок и заключили в двойные кавычки «Hello World». Это называется «передача аргументов», а тип переданного нами аргумента называется строкой. Всякий раз, когда вы хотите сделать что-то, связанное с буквами и специальными символами, вы просто должны использовать одинарные кавычки. Однако, если вы хотите что-либо делать с помощью чисел, вам обычно не нужно использовать кавычки, как показано ниже.

6.3 Переменные в JavaScript

Вы также можете передавать переменные в console.log. Переменные кажутся сложными, но на самом деле они представляют собой пространство для хранения фрагментов информации. Часто это цифры или буквы. Для этого вы объявляете переменную с помощью ключевого слова var, даете ей имя, а затем со знаком равенства присваиваете ей значение. Итак, я собираюсь создать переменную с именем «hello» и присвоить ей значение «Hello World!». Затем я передам это в console.log.

Обратите внимание, как я не передал 'hello' в console.log в кавычки. Это потому, что я хотел вывести на консоль содержимое «hello», а не само «hello».

6.4 Что делают функции

Переписывать один и тот же фрагмент кода снова и снова может быть немного утомительно, поэтому мы пишем функции именно по этой причине. Функции проще, чем вы думаете. Все это фрагменты кода, которые мы можем использовать повторно, не переписывая один и тот же код снова. Ниже мы создали функцию под названием sup и передаем ей аргумент в круглых скобках, который затем выводится на экран. Мы вызываем sup, отправляя на консоль sup ('Hello world!'); '.

6.5 Повторение действия с помощью цикла For

Предположим, вы хотите проделать одно и то же действие определенное количество раз. Именно по этой причине мы использовали цикл for. Сначала они выглядят устрашающе, но их так легко сделать, если вы их поймете. Вы начинаете с написания 'for ()'.

В этих скобках мы хотим создать переменную, которая подсчитывает, сколько раз мы выполнили действие. Итак, мы получаем нечто похожее на это «for (var i = 0;)».

Затем мы хотим проверить, что i не выполнил условие. Итак, в этом случае мы хотим видеть, что оно меньше 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.

После этого мы захотим выполнить действие. Итак, после последних скобок мы пишем фигурные скобки, а между ними мы собираемся console.log значение i. Это создаст счетчик, который считает до девяти.

Последние две программные конструкции, которые мы рассмотрим, - это операторы if и циклы while.

6.6 Если утверждения

Оператор if выполняет действие, если соблюдены определенные критерии. По конструкции они аналогичны циклам for и работают следующим образом. Предположим, у вас есть переменная под названием «чизбургеры», и вы хотите узнать, имеет ли она значение «вкусно». Если это так, вы хотите вывести на экран «вкусняшки, чизбургеры». Для этого вы должны написать что-то вроде этого.

Обратите внимание, как я написал if (чизбургеры == 'вкусно') '. Вы используете двойное или тройное равенство, чтобы проверить равенство, и одинарное равенство, чтобы присвоить значение.

6.7 Циклы пока

Наконец, цикл while выполняет действие, пока выполняется условие. Итак, представьте, что вы хотите съесть «ням, чизбургеры», в то время как чизбургеры одинаково вкусны. Для этого вам нужно написать следующее.

Стоит отметить, что это приведет к бесконечному циклу, и вам следует избегать выполнения действия над значением, которое вряд ли изменится. Это может привести к зависанию вашего браузера или невозможности работы вашего кода.

Как я упоминал ранее, это было очень краткое введение в конструкции программирования в Javascript. Предлагаем вам узнать больше об этой увлекательной, хотя и огромной теме.

6.8 Проверьте себя

  • Я хочу отсчитывать от 30. Напишите цикл «for», который сделает это.
  • Я хочу создать переменную под названием makeuseof и присвоить ей значение awesome. Как это сделать?
  • Я хочу создать функцию, которая при вызове печатает «MakeUseOf Is Awesome». Напишите эту функцию.

Дальнейшее чтение:

7. Творческий холст

Canvas - это отличная технология, которая позволяет рисовать изображения и создавать анимацию, не прибегая к использованию Flash или Silverlight. Люди использовали его для создания причудливых и чудесных вещей, включая симулятор фена и различные видеоигры. Это замечательный и непостижимо большой кусок технологии, в этом уроке я дам вам краткое введение в него.

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

7.1 Начало работы с Canvas

Прежде всего, вам нужно открыть свой веб-браузер и перейти на codepen.io. Создайте новую ручку.

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

Теперь нам нужно написать код Javascript, который будет что-то рисовать на экране. Мы собираемся начать с основных и создать простой красный квадрат.

Мы собираемся создать переменную (я назвал ее «демо»), а затем выбрать элемент холста и назначить его этой переменной. Для этого вы используете document.getElementByID () и передаете идентификатор элемента, который хотите выбрать.

Вторая строка в нашем скрипте создает другую переменную с именем context, а затем вызывает для нее demo.getContext ('2d'). Это сообщило браузеру, что мы будем работать над 2-мерным изображением, а затем передало необходимые функции, которые нам понадобились бы для рисования на экране.

Третья и четвертая строки - это те, которые фактически рисуют на экране. Третья строка заполняет прямоугольник красным цветом, а четвертая строка вызывает fillRect, который позиционирует его и определяет его длину и ширину.

Хотя это не впечатляет. Давайте сделаем что-нибудь более продвинутое и воспользуемся магией Javascript и Canvas, чтобы создать MakeUseOf совершенно новый логотип.

7.2 Фигуры и текст

Давайте удалим нашу четвертую строку и заменим ее такой, которая помещает наш прямоугольник в левый верхний угол и растягивает его на всю длину холста.

Первые два аргумента определяют, где мы хотим расположить оси x и y фигуры. Давайте пока установим эти два на «0». Третий аргумент относится к ширине фигуры. Давайте установим это значение на «200», а затем оставим четвертый аргумент на «50». Теперь у вас должно получиться что-то похожее на это.

Это отличное начало, но в нем вообще не упоминается MakeUseOf. Итак, мы собираемся добавить текст. Давайте создадим переменную, содержащую makeuseof, и назовем эту переменную MakeUseOf.

Затем мы захотим создать другую переменную контекста. Назовите его context2 и убедитесь, что это 2d. Это то, что мы будем использовать для написания нашего текста.

Мы хотим, чтобы наш текст был окрашен в синий цвет и перекрывал наш красный квадрат. Итак, как и раньше, мы захотим присвоить ему fillStyle «синий». Теперь мы собираемся выбрать характеристики нашего текста. Мы хотим, чтобы он был размером 20 пикселей, полужирным шрифтом и шрифтом Arial. Мы вызываем шрифт context2 и присваиваем ему значение bold 20px arial.

Поскольку мы хотим, чтобы этот текст перекрывал предыдущее красное поле, нам нужно вызвать textBaseLine в context2 и присвоить ему значение top. Как только это будет завершено, мы вызываем fillText в context2 и передаем ему переменную, содержащую наш текст и координаты x и y, в которые мы собираемся поместить наш текст. Конечный результат нашего кода выглядит примерно так.

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

7.3 Слово на холсте

Хотя это было невероятно базовое введение в Canvas, вы должны понимать, что это также невероятно большая технология и невероятно мощная для загрузки. Это руководство просто послужило введением в создание графики с использованием этой новой технологии.

некоторые клавиши не работают на ноутбуке dell inspiron

7.4 Проверьте себя

  • Добавьте к созданному вами изображению следующий слоган: «Лучший технический сайт на свете!»
  • Создайте цикл for, который выполняется в течение десяти итераций. Посмотрите, сможете ли вы переместить рисунок вниз по холсту, пиксель за раз.
  • Оберните свой рисунок функцией. Что будет, если не позвонить?

Дальнейшее чтение:

8. Куда дальше?

Спасибо, что прочитали мое невероятно краткое руководство по новым технологиям HTML5. Бесспорно, HTML5 - это технология будущего. Он внедряется в большинстве технологий, так как его легко писать и он невероятно мощный. Люди все время делают с ним невероятные вещи, и я не сомневаюсь, что в будущем вы станете одним из таких людей. Для меня большая честь быть частью вашего путешествия в дикий и чудесный мир HTML5.

Я умоляю вас продолжать учиться. Продолжайте кодировать. Продолжайте повышать уровень и улучшаться, и в кратчайшие сроки вы будете использовать технологии, представленные в этом кратком руководстве, для создания замечательных продуктов.

Делиться Делиться Твитнуть Эл. адрес Стоит ли переходить на Windows 11?

Окна были переработаны. Но достаточно ли этого, чтобы убедить вас перейти с Windows 10 на Windows 11?

Читать далее Похожие темы
  • Wordpress и веб-разработка
  • HTML5
  • Длинная форма
  • Длинная направляющая
Об авторе Мэтью Хьюз(Опубликовано 386 статей)

Мэтью Хьюз - разработчик программного обеспечения и писатель из Ливерпуля, Англия. Его редко можно встретить без чашки крепкого черного кофе в руке, и он абсолютно обожает свой Macbook Pro и свою камеру. Вы можете прочитать его блог на http://www.matthewhughes.co.uk и подписаться на него в твиттере @matthewhughes.

Ещё от Matthew Hughes

Подписывайтесь на нашу новостную рассылку

Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!

Нажмите здесь, чтобы подписаться