«Однажды был…« Король! » мои маленькие читатели сразу скажут. Нет, дети, вы не правы. Когда-то был кусок дерева… »
— Приключения Буратино
Вы можете многое сделать без JavaScript. Использование языка гипертекстовой разметки (HTML — на протяжении всей этой статьи мы будем ссылаться на HTML и XHTML только на HTML. Выбор, который вы выбираете, зависит от вас, и не имеет большого отношения к JavaScript. В случае, если это имеет значение для вас, HTML-код, который мы представим в этой статье, будет действительным XHTML 1.0 Strict), вы можете создавать сложные документы, которые запутанно описывают содержание страницы — и смысл этого содержимого — до мельчайших деталей. В этой главе из нового Simply Javascript (вы также можете загрузить эту статью вместе с двумя другими в формате PDF) я покажу вам, что с помощью каскадных таблиц стилей (CSS) вы можете представить этот контент множеством способов, с тонкими, как один цвет вариациями, такими же яркими, как замена текста изображением.
Независимо от того, как вы это оденьте, HTML и CSS могут достичь только аниматронного чудовища, которое шатко шатается, когда что-то движется поблизости. Когда вы включаете JavaScript, вы действительно можете вдохнуть жизнь в своего Буратино, подняв вас как его создателя от скромного продавца до мастерства веб-дизайна!
Но то, будет ли ваше новое создание изящным шагом модели взлетно-посадочной полосы или шаркающей походкой монстра доктора Франкенштейна, зависит как от качества его HTML и CSS, так и от кода JavaScript, который его воплотил в жизнь.
Поэтому, прежде чем мы научимся творить чудеса, давайте уделим немного времени тому, как создавать веб-сайты, которые хорошо выглядят как изнутри, так и снаружи, и посмотрим, как JavaScript вписывается в картину.
Держать их отдельно
Не так давно профессиональные веб-дизайнеры с удовольствием складывали код HTML, CSS и JavaScript в один файл, называли его index.html (или default.htm , если они были промыты мозгами Microsoft) и называли его веб-страницей. Я представлял это как рисунок 1. Вы все еще можете сделать это сегодня, но будьте готовы к тому, что ваши коллеги назовут это чем-то менее вежливым.
В какой-то момент веб-дизайнеры поняли, что код, который они пишут при составлении веб-страницы, выполняет три фундаментальные вещи:
- Описывает содержание страницы.
- Он определяет представление этого контента.
- Он контролирует поведение этого контента.
Они также поняли, что разделение этих трех типов кода, как показано на рисунке 2 «Разделение задач», облегчило их работу и помогло им сделать веб-страницы, которые работают лучше в неблагоприятных условиях, например, когда пользователи отключили JavaScript в своих браузерах.
Компьютерные гики знали об этом годами и даже дали этому принципу странное название: разделение интересов .
Теперь осознать это — это одно, а на самом деле — совсем другое, особенно если вы не компьютерный фанат. Я компьютерный фанат, и мне все время хочется поступать неправильно.
Я с радостью отредактирую HTML-код, описывающий содержимое веб-страницы, когда вдруг поймал себя на мысли, как бы хорошо выглядел этот текст, если бы он был немного другого оттенка серого, если бы он был слегка подтолкнут влево и если бы у него была эта ужасная фотокопия моего лица, которую я сделал на последней вечеринке SitePoint на заднем плане. Я склонен отвлекаться, как и я, я хочу сделать эти изменения прямо сейчас. Что проще: открыть отдельный файл CSS для изменения таблицы стилей страницы или просто ввести эти свойства стиля в код HTML, который я уже редактирую?
Подобно тому, как вести себя на рабочих функциях, сохранение типов кода, который вы пишете отдельно друг от друга, требует дисциплины. Но как только вы поймете преимущества, вы также сможете призвать силу воли, необходимую для того, чтобы оставаться на прямой и узкой.
Три слоя
Хранение различных видов кода как можно более раздельно — хорошая идея для любого вида программирования. Это облегчает повторное использование частей этого кода в будущих проектах, уменьшает количество дублирующегося кода, который вы в конечном итоге пишете, и облегчает поиск и устранение проблем месяцами и годами позже.
Когда дело доходит до Интернета, есть еще одна причина, по которой ваш код должен быть отделен: он позволяет вам учитывать различные способы доступа людей к веб-страницам.
В зависимости от вашей аудитории, большинство ваших посетителей могут использовать хорошо оборудованные настольные браузеры с передовой поддержкой CSS и JavaScript, но многие из них могут подчиняться корпоративным ИТ-политикам, которые вынуждают их использовать старые браузеры или просматривать определенные функции ( как JavaScript) отключен.
Пользователи со слабым зрением часто просматривают с помощью программы чтения с экрана или лупы, и для этих пользователей ваш приятный визуальный дизайн может быть скорее помехой, чем помощью.
Некоторые пользователи даже не посещают ваш сайт, предпочитая читать каналы контента в формате RSS или аналогичных форматах, если вы их предлагаете. Когда придет время создавать эти каналы, вы захотите отправлять своим пользователям HTML-контент без каких-либо JavaScript или CSS мусора.
Ключом к тому, чтобы разместить как можно более широкий круг посетителей вашего сайта, является представление о вебе с точки зрения трех уровней , которые удобно соответствуют трем видам кода, которые я упоминал ранее. Эти уровни показаны на рисунке 3 «Три уровня сети».
При создании сайта мы работаем через эти слои снизу вверх:
- Мы начинаем с производства контента в формате HTML. Это базовый слой, который должен просматривать любой посетитель, использующий любой тип браузера.
- После этого мы можем сосредоточиться на улучшении внешнего вида сайта, добавив слой информации для презентации с использованием CSS. Теперь сайт будет хорошо смотреться пользователям, способным отображать стили CSS.
- Наконец, мы можем использовать JavaScript, чтобы добавить дополнительный уровень интерактивности и динамического поведения , который облегчит использование сайта в браузерах с JavaScript.
Если мы будем хранить HTML, CSS и JavaScript-код отдельно, нам будет гораздо проще убедиться, что уровень контента остается читаемым в средах просмотра, где уровни представления и / или поведения не могут работать. Этот подход «с самого начала» к веб-дизайну известен в отрасли как прогрессивное улучшение .
Давайте рассмотрим каждый из этих уровней по отдельности, чтобы увидеть, как мы можем наилучшим образом поддерживать это разделение кода.
HTML для контента
Все, что необходимо для чтения и понимания содержимого веб-страницы, содержится в HTML-коде этой страницы — ни больше, ни меньше. Это так просто. У веб-дизайнеров возникают проблемы, когда они забывают о принципе KISS (Keep It Simple, Stupid) и запихивают информацию без содержания в свой HTML-код или, наоборот, перемещают часть содержимого страницы в код CSS или JavaScript для этой страницы.
Типичным примером несодержащей информации, которая втиснута в страницы, является презентационный HTML — HTML-код, который описывает, как должен выглядеть контент, когда он отображается в браузере. Это может включать устаревшие теги HTML, такие как <b> , <i> , <u> , <tt> и <font> :
<p>Whatever you do, <a href="666.html"> <font color="red" >don't click this link </font> </a>!</p>
Он может принимать форму встроенного CSS, примененного с атрибутом style:
<p>Whatever you do, <a href="666.html" style="color: red;" >don't click this link</a>!</p>
Он также может включать в себя тайный позор многих благих намерений веб-дизайнеров: стили CSS, применяемые с именами презентационных классов:
<p>Whatever you do, <a href="666.html" class="red" >don't click this link</a>!</p>
Имена презентационных классов? Если последний пример выглядит хорошо для вас, вы не одиноки, но это определенно плохое дерьмо. Если позже вы решите, что хотите, чтобы эта ссылка была желтой, вы либо застряли, обновляя как имя класса, так и стили CSS, которые к нему применяются, или испытываете затруднение из-за класса с именем «красный», который на самом деле имеет желтый стиль. покраснеет лицо желтым — ээ, красным!
Вместо того, чтобы встраивать информацию презентации в ваш HTML-код, вы должны сосредоточиться на причине действия — например, вы хотите, чтобы ссылка отображалась другим цветом. Ссылка особенно важна? Подумайте об окружении тегом, который описывает акцент, который вы хотите ему придать:
<p>Whatever you do, < em ><a href="evil.html">don't click this link</a></ em >!</p>
Является ли ссылка предупреждением? HTML не имеет тега для описания предупреждения, но вы можете выбрать имя класса CSS, которое передает эту информацию:
<p>Whatever you do, <a href="evil.html" class="warning" >don't click this link</a>!</p>
Конечно, вы можете зайти слишком далеко. Некоторые дизайнеры ошибочно принимают теги, такие как <h1>, за презентацию и пытаются удалить этот презентационный код из своего HTML:
<p class="heading">A heading with an identity crisis</p>
На самом деле, презентационная информация, которую вы должны хранить в своем документе, это шрифт, размер и цвет, в котором должен отображаться заголовок. Тот факт, что фрагмент текста является заголовком, является частью контента, и как таковой должен быть отражен в коде HTML. Так что этот код отлично подходит:
<h1>A heading at peace with itself</h1>
Короче говоря, ваш HTML должен делать все возможное, чтобы передать смысл или семантику контента на странице, избегая при этом описания того, как он должен выглядеть. Вундеркинды веб-стандартов называют HTML-код, который выполняет эту семантическую разметку .
Написание семантической разметки позволяет вашим HTML-файлам выделяться как значимые документы. Люди, которые по какой-либо причине не могут прочитать эти документы, просматривая их в обычном настольном веб-браузере, смогут лучше понять их таким образом. Например, пользователи со слабым зрением смогут использовать вспомогательное программное обеспечение, такое как средства чтения с экрана, для прослушивания страницы, когда она читается вслух, и чем более четко ваш HTML-код описывает смысл содержимого, тем больше таких инструментов сможет сделать этого
Однако лучше всего то, что семантическая разметка позволяет применять новые стили (презентация) и интерактивные функции (поведение) без необходимости вносить множество (или, в некоторых случаях, любые!) Изменений в ваш HTML-код.
CSS для презентации
Очевидно, что если содержимое страницы должно полностью содержаться в ее HTML-коде, ее стиль или представление должны быть полностью описаны в коде CSS, который применяется к странице.
Со всей работой, которую вы проделали, чтобы ваш HTML не содержал презентационный код и был богат семантикой, было бы стыдно испортить этот файл, заполнив его фрагментами CSS.
Как вы, наверное, знаете, стили CSS могут быть применены к вашим страницам тремя способами:
встроенные стили:
<a href="evil.html" style="color: red;" >
Встроенные стили заманчивы по причинам, которые я объяснил ранее: вы можете применять стили к своему контенту при его создании без необходимости переключать передачи и редактировать отдельную таблицу стилей. Но, как мы видели в предыдущем разделе, вам следует избегать встроенных стилей, таких как чума, если вы хотите, чтобы ваш HTML-код имел смысл для тех, кто не может видеть эти стили.
встроенные стили:
<style type="text/css"> .warning { color: red; } </style> ⋮ <a href="evil.html" class="warning" >
Встроенные стили сохраняют вашу разметку в чистоте, но связывают ваши стили с одним документом. В большинстве случаев вы захотите поделиться своими стилями на нескольких страницах своего сайта, поэтому лучше избегать этого подхода.
внешние стили:
<link rel="stylesheet" href="styles.css" /> ⋮ <a href="evil.html" class="warning" > Example 1.1. styles.css
.warning { color: red; }
Внешние стили - это действительно лучший способ, потому что они позволяют вам делиться вашими стилями между несколькими документами, они уменьшают объем кода, который необходимо загружать браузерам, а также позволяют изменять внешний вид вашего сайта, не занимаясь грязным редактированием. HTML.Но ты знал все это, верно? В конце концов, мы имеем дело с книгой по JavaScript, поэтому давайте поговорим о JavaScript, который входит в ваши страницы.
JavaScript для поведения
Как и в случае с CSS, вы можете добавить JavaScript на свои веб-страницы несколькими способами.
Вы можете встроить JavaScript-код прямо в ваш HTML-контент:
<a href="evil.html" onclick="JavaScript code here" >
Вы можете включить код JavaScript вверху вашего HTML-документа в тег <script>:
<script type="text/javascript"><!--//--><![CDATA[//><!-- JavaScript code here //--><!]]></script> ⋮ <a href="evil.html" class="warning">
CDATA? Если вам интересно, что весь этот gobbledygook следует за тэгом <script> и предшествует тэгу </script> , это то, что нужно для законного встраивания JavaScript в документ XHTML без путаницы в веб-браузерах, которые не понимают XHTML (например, Internet). Explorer).
Если вы пишете свою страницу с использованием HTML вместо XHTML, вы можете воспользоваться этим гораздо более простым синтаксисом:
<script type="text/javascript"> JavaScript code here </script>
Вы можете поместить свой код JavaScript в отдельный файл, а затем создать ссылку на этот файл из любого количества HTML-документов:
<script type="text/javascript" src="script.js"></script> ⋮ <a href="evil.html" class="warning" > Example 1.2. script.js (excerpt) JavaScript code here
Угадайте, какой метод вы должны использовать.
Написание JavaScript, которое повышает удобство использования без загромождения документов HTML, к которым он применяется, без блокировки пользователей, у которых отключен JavaScript в их браузерах, и без вмешательства в другой код JavaScript, который может применяться к той же странице, называется ненавязчивым сценарий .
К сожалению, в то время как многие профессиональные веб-разработчики осознали преимущества хранения своего CSS-кода в отдельных файлах, все еще существует много JavaScript-кода, смешанного с HTML. Показывая вам правильный способ использования JavaScript, мы надеемся помочь изменить это.
Правильный путь
Итак, насколько все эти вещи действительно имеют значение? В конце концов, люди годами создавали веб-сайты из HTML, CSS и JavaScript, и для большинства людей, просматривающих Интернет, эти сайты работали.
Что ж, когда вы начинаете изучать JavaScript, возможно, более важно понять его правильно, чем когда-либо прежде. JavaScript, безусловно, является самым мощным из трех языков, которые вы будете использовать для разработки веб-сайтов, и, как таковой, он дает вам беспрецедентную свободу полностью портить ситуацию.
Например, если вам действительно очень нравится JavaScript, вы можете зайти так далеко, чтобы поместить все — содержимое, представление и поведение — в свой код JavaScript. Я на самом деле видел, как это сделано, и это не очень красиво — особенно когда появляется браузер с отключенным JavaScript.
Еще более показателен тот факт, что JavaScript является единственным из этих трех языков, который может зависать в браузере, что делает его невосприимчивым к пользователю.
Поэтому мы сделаем все возможное, чтобы показать вам правильный способ использования JavaScript, и не только потому, что он поддерживает ваш код в чистоте, но и потому, что он помогает поддерживать работу Интернета так, как он предназначен, — делая контент доступным как можно большему количеству людей. насколько это возможно, независимо от того, какой веб-браузер они выберут.
Библиотеки JavaScript
Как я уже упоминал, одно из преимуществ разделения различных типов кода состоит в том, что он упрощает использование кода, который вы написали для одного сайта, и повторное использование его на другом. Некоторые JavaScript-маньяки (с этого момента именуемые «людьми») нашли время, чтобы собрать огромные библиотеки полезного, ненавязчивого кода JavaScript, который вы можете бесплатно загрузить и использовать на своих собственных веб-сайтах.
В рамках просто Javascript мы создаем каждый из примеров с нуля — весь необходимый вам код JavaScript можно найти прямо здесь. Однако поскольку в реальном мире не всегда есть время для этого, а библиотеки быстро становятся важной частью ландшафта JavaScript, мы также рассмотрим, как популярные библиотеки JavaScript работают, когда появляется такая возможность.
Вот библиотеки, которые мы используем в книге:
- Опытный образец
- script.aculo.us
- Yahoo! Библиотека пользовательского интерфейса (YUI)
- школа дзюдо
- JQuery
- MooTools
Не все библиотеки созданы равными Следите за сайтами, предлагающими фрагменты кода JavaScript, которые вы можете скопировать и вставить на свои веб-страницы для достижения определенного эффекта. Существует много свободного кода, но не все это хорошо. В общем, хорошие библиотеки представлены в виде файлов JavaScript ( .js ), которые вы можете ненавязчиво ссылаться на свои страницы вместо того, чтобы вставлять JavaScript прямо в ваш HTML-код. Если вы не уверены, что можете судить о том, является ли конкретная библиотека JavaScript хорошей или плохой, спросите совета на форумах SitePoint или просто придерживайтесь библиотек, которые я только что упомянул — все они очень хороши.
Давайте начнем!
Достаточно проповедовать — вы проверили эту статью, чтобы выучить JavaScript, верно? Чистый HTML и CSS хороши и все, но пришло время окунуться в третий уровень Web: поведение. Главы Simply Javascript , следующие за той, из которой воспроизводится эта статья, более подробно освещают эту тему — и, поскольку мы чувствуем себя щедро, мы решили добавить их для вашего восхищения! Так что не забудьте скачать эту главу в формате PDF , а также главу 2: программирование на JavaScript и главу 3: доступ к документам.
В Главе 2 вы узнаете, что, поскольку JavaScript является языком программирования, вы должны разбираться в том, как работают компьютерные программы — что в некоторой степени означает обучение мыслить как компьютер — чтобы использовать его наиболее эффективно. Простые понятия, представленные в этой главе — операторы, переменные, выражения, циклы, функции и объекты — являются строительными блоками для каждой JavaScript-программы, которую вы когда-либо будете писать.
А глава 3? В то время как некоторым людям нравится писать код JavaScript для себя, вы не захотите сталкиваться с ними в темном переулке ночью. Как хорошо настроенный веб-разработчик, вы, вероятно, захотите использовать JavaScript для внесения изменений в содержимое ваших веб-страниц с использованием объектной модели документов (DOM). К счастью для вас, мы написали целую главу, чтобы показать вам, как!
Тогда, конечно, есть еще …
Будьте готовы начать использовать какой-нибудь крутой (и ненавязчивый) JavaScript!