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

Небольшая статистика

В Великобритании:

• у 2 млн. жителей нарушения зрения;
• 9 млн. жителей имеют нарушения слуха;
• 3.4 млн. людей имеют физические нарушения;
• 1.5 млн. людей имеют умственные нарушения;
• у 6 млн. человек дислексия.

В США:

• у 10 млн. жителей нарушения зрения;
• 28 млн. жителей имеют нарушения слуха;
• 8 млн. людей имеют физические нарушения;
• 6.8 млн. людей имеют умственные нарушения;
• у 25 млн. человек дислексия.

Обратите внимание — методы, применяемые для пользователей с ограниченными возможностями, помогут сделать сайт проще в использовании для каждого.

Нарушение зрения — слепота

Большинство слепых людей используют особое программное обеспечение для просмотра информации с экрана, такое как JAWS или Windows-Eyes, чтобы читать страницы веб-сайта. Кроме того, некоторые пользователи получают доступ к сайтам с помощью устройства Брайля, преобразующего текст веб-сайта в шрифт Брайля. Однако, люди, владеющие азбукой Брайля, встречаются намного реже — многие слепые люди потеряли зрение во время жизни, а не с рождения, а следовательно не обучены системе Брайля.

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

Располагайте инструкции перед полями формы

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

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

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

Создание ссылки «перейти к основному контенту»

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

Убедитесь, что текст ссылок информативен

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

При использовании этой опции рекомендуется писать в тексте ссылки место её назначения. Например, вместо «нажмите здесь, чтобы узнать больше об Agoo IT» было бы лучше написать: «узнайте больше о Agoo IT». Слова «нажмите здесь» убраны из второго варианта, так как это термин, относящийся к работе с мышкой.

Создавайте информативные заголовки веб-страниц

Первое, что услышит пользователь читающего ПО при открытии страницы — это ее <title>. Следовательно, важно использовать заголовок, который отражает содержимое веб-страницы. Например, страница с контактной информацией должна иметь заголовок «Наши контакты». Слепые пользователи после прослушивания заголовка страницы должны точно определить, попали ли они на правильную страницу и хотят ли прослушать ее содержимое.

Используйте сжатый альтернативный текст

Слепые пользователи узнают, что изображено на картинке по ее альтернативному тексту. Когда изображение несет важную информацию, к нему необходимо добавить краткий подходящий альтернативный текст. Например, логотип веб-сайта компании «ЭЮЯ» должен быть обозначен, как alt="Компания ЭЮЯ". Размещение слишком большого количества информации, как, например, «Компания ЭЮЯ, синий фон с фиолетовым текстом и желтой подсветкой» может запутать слепых пользователей.

В случае, если изображение чисто декоративное или использовано для разметки, к нему нужно добавить пустой альтернативный текст: alt=«». Тогда этого читающее экран ПО не будет произносить название файла с изображением.

Создавайте информативные заголовки

Важно создавать наглядные заголовки, которые семантически отмечаются тегами от <h1> до <h6>. Слепые пользователи часто прослушивают заголовки отдельно от основного содержимого страницы, с помощью списка заголовков. Это позволяет получить быстрый доступ именно к той информации, которая нужна пользователю, вместо прослушивания всей веб-страницы.

Тег <h1> должен содержать главный заголовок, чтобы можно было быстро определить о чем рассказывается на странице.

Создавайте аудио описание и транскрипции видео файлов

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

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

Помните, что слепые пользователи не могут использовать мышь

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

Нарушения зрения — слабое зрение

Люди со слабым зрением используют увеличительное программное обеспечение, чтобы облегчить просмотр веб-сайта. В зависимости от серьезности нарушения зрения, они могут комбинировать увеличительное и читающее экран программное обеспечение, используя такие продукты, как Supernova или ZoomText. При небольших проблемах со зрением пользователи могут просто увеличить размер текста по умолчанию в настройках своих браузеров или изменить цвет, чтобы сделать содержимое сайта удобнее для чтения.

Ключевые принципы доступного и практичного дизайна для пользователей со слабым зрением:

Не используйте изображения с текстом

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

Убедитесь, что размер текста можно изменять

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

Размещайте ключевую информацию в специальных местах экрана

Пользователи, которые используют увеличивающее ПО могут видеть только небольшую часть веб-страницы в каждый момент времени и буду искать контент и функционал сайта в специальных местах. Например, функция поиска по веб-сайту обычно располагается в правом верхнем углу страницы, если она находится где-нибудь ещё, то ее могут пропустить.

Используйте цвета с высоким контрастом

Для повышения читабельности сайта для людей с нарушениями зрения, убедитесь, что цвета, применяемые на сайте, имеют хороший контраст. Этого можно достичь, проверив выбранные цвета с помощью Juicy Studio color contrast analyzer. Тестируя различные сочетания основного и фонового цветов можно определить, соответствуют ли выбранные цвета рекомендациям WCAG. Кроме того, можно сделать несколько различных цветовых схем, чтобы облегчить читаемость.

Нарушения слуха

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

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

Ключевые принципы доступного и практичного дизайна для пользователей со нарушениями слуха:

Создавайте титры для любого видео контента

Титры создаются вместе с самим видео контентом. Они должны быть синхронизированы с аудио так, чтобы содержимое было целиком понятно без звука.

Создавайте расшифровки исполняемого аудио

Если контент роговаривается без видео, как например в подкастах, важно сделать расшифровку. Рекомендуется создавать расшифровки с помощью простого и доступного HTML, а не в виде документа Microsoft Word или Adobe PDF, чтобы как можно более широкая публика получила доступ к ним.

Физические нарушения

Люди с физическими нарушениями варьируются от тех, кто имеет временные повреждения, например сломаную руку, до людей с параличем, которые не могут пользоваться ни одной конечностью. В зависимости от тяжести физического нарушения эти пользователи могут заходить на веб-сайты, используя распознающее голос ПО, например Dragon Naturally Speaking. Однако имеется то, что объединяет всех пользователей с физическими нарушениями — ограничение или отсутствие возможности использования мыши. Это означает, что контент веб-сайта, требующий клика мышкой или хорошей моторики недоступен таким пользователям.

Ключевые принципы доступного и практичного дизайна для пользователей с физическими нарушениями:

Убедитесь, что весь контент может быть доступен с помощью клавиатуры

Пользователи с физическими нарушениями имеют ограничения или отсутствие возможности пользования мышкой, и поэтому перемещаются по веб-сайтам с помощью клавиатуры. Функции, зависимые от мышки, такие как обработчик события onchange, обычно используемое с выпадающими меню, осложняют работу при использовании клавиатуры (как только пользователь перемещается на выпадающее меню и нажимает стрелку вниз для выбора, событие onchange мгновенно запускается, и в результате автоматически выбирается первая строка, вне зависимости от того, что хотел пользователь).

Создавайте состояние focus для ссылок

Так как пользователи с физическими нарушениями постоянно пользуются клавиатурой для всех действий, важно создавать состояние :focus для ссылок. Это можно осуществить, присваивая другой стиль текста ссылке, из-за чего при наведении курсора цвет или что-либо другое изменяется и делает понятным то, где находится пользователь на странице. Если вставить в CSS следующий пример, ссылки будут становиться черными при наведении курсора либо мышкой, либо клавиатурой.

a:hover, a:focus, a:active {color: #000000;}

В результате получится:

Создавайте видимые ссылки перехода

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

Убирайте двигающиеся объекты

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

Создавайте большие активные области

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

Правильно называйте ссылки на изображения и элементы управления

Пользователи, использующие ПО, распознающее голос, перемещаются по веб-сайтам, говоря слова для активирования ссылок и элементов управления. Произносимые слова в основном не отличаются от тех, что показаны на веб-сайте. Поэтому важно убедиться, что все кнопки и изображения на форме корректно созданы, и их название совпадает с текстом или картинкой. Например, если на сайте есть кнопка «Купить», пользователь скажет слово «Купить» для нажатия этой кнопки, но если имя кнопки «Приобрести», то пользователь не сможет нажать на нее.

Нарушения познавательных способностей и необучаемость

Люди с нарушениями познавательных способностей и необучаемостью могут иметь проблемы с памятью, решением задач, восприятием и и мышлением. Кроме того, страдающие необучаемостью люди могут испытывать трудности при чтении и понимании (дислексия. В целях повышения доступности веб-сайта важно, чтобы содержание было написано простым языком, разметка страницы была несложной, навигация — понятной и единообразной, а движущиеся объекты отсутствовали и не нарушали восприятие.

Есть несколько других важных принципов доступного и практичного дизайна для пользователей с нарушениями познавательных способностей и необучаемостью:

Создайте единоообразный дизайн

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

Сделайте карту сайта

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

Используйте выровненный слева шрифт без засечек с изменяющимся размером

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

Создавайте полезные сообщения об ошибках

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

Предложите словесный вывод

Например, на сайтах организаций Browse Aloud и Textic имеется возможность вслух проговарить содержимое веб-сайта при выделении слов на странице. Использование этой функции особенно полезно для пользователей, которым трудно прочитать большие объемы текста.

Создавайте различные цветовые схемы

Людям с нарушениями познавательных способностей может помочь выбор различных цветовых схем.

Заключение

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

Английская версия статьи — Understanding disabilities when designing a website.

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

CSS таблицы решают все проблемы, появляющиеся при использовании абсолютной системы коодинат или флоатов, для создания многострочной разметки в современных браузерах. Задание параметра table для аттрибута display позволит вам отобразить элементы так, как будто они являются элементами таблицы. Главное преимущество табличной разметки CSS — это возможность легкого определения границ клетки, позволяющее нам добавить к ней фон и прочее без семантических проблем выделения нетабличных элементов, как в HTML таблице документа.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
  <head>
    ⋮ HTML head content…
  </head>
  <body>
    <div id="wrapper">
      <div id="header"></div>
      <div id="main">
        <div id="nav">
          ⋮ navigation column content…
        </div>
        <div id="extras">
          ⋮ news headlines column content…
        </div>
        <div id="content">
          ⋮ main article content…
        </div>
      </div>
    </div>
  </body>
</html>

HTML код определяет нужный порядок вывода данных. Первой идет столбец nav, затем extras, последним идет content.

Также нам необходимо написать требуемый CSS код:

#main {
  display: table;
  border-collapse: collapse;
} 

#nav {
  display: table-cell;
  width: 180px;
  background-color: #e7dbcd;
} 

#extras {
  display: table-cell;
  width: 180px;
  padding-left: 10px;
  border-right: 1px dotted #d7ad7b;
} 

#content {
  display: table-cell;
  width: 380px;
  padding-left: 10px;
}

Только что созданная нами табличная разметка будет корректно отображаться как в IE8, так и в Firefox, Safari и Opera.

Мы получили разметку из трех столбцов равной высоты без применения особых приемов, таких как ложных столбцов с помощью фоновых рисунков, проблем с размещением или необходимости очищать floats!

Как это работает?

Аттрибут display позволяет вам задать ряд табличных параметров, чтобы отображать элементы так, как будто они являются элементами таблицы. Вот доступные параметры отображения:

• table заставляет элемент вести себя, как элемент таблицы;
• table-row заставляет элемент вести себя, как элемент строки таблицы;
• table-cell заставляет элемент вести себя, как элемент ячейки таблицы;
• table-row-group заставляет элемент вести себя, как элемент группы строк таблицы;
• table-header-group заставляет элемент вести себя, как элемент группы заголовков таблицы;
• table-footer-group заставляет элемент вести себя, как элемент группы нижнего колонтитула;
• table-caption заставляет элемент вести себя, как элемент заголовка таблицы;
• table-column заставляет элемент вести себя, как элемент столбца таблицы;
• table-column-group заставляет элемент вести себя, как элемент группы столбцов таблицы.

Подождите, разве разметка таблицами — это правильно?

Допустим, что вы не совсем согласны с примером, который мы только что привели — в конце концов, разве зашитники веб стандартов не настаивали годами на том, что вы не должны использовать таблицы для разметки?

HTML элемент table — это семантическая структура: он описывает, что из себя представляют данные. Поэтому, вам нужно использовать table, только если данные, которые вы размещаете — табличные, например, финансовая информация. Она обычно размещается на компьютере электронной таблицей, поэтому наверное следует определять её как таблицу в HTML.

С другой стороны, параметр table аттрибута display, просто показывает как что-то должно выглядеть в браузере и не имеет семантического значения!

Использование элемента table для вашей разметки говорит агенту пользователя: «Это табличные данные». А применение связки div-ов просит его отборазить их визуально определенным образом, если это возможно.

Конечно же, нам не следует использовать display: table; в связке элементов div, когда мы имеем действительно табличные данные. Наш простой пример, описанный выше, заставляет нашу разметку выглядеть так, как будто у нас есть однострочная таблица с тремя ячейками, не требуется большое воображение, чтобы осознать потенциал этой техники для легкого создания комплексных видов разметок.

Анонимные элементы таблиц

Таблицы CSS придерживаются обычных правил табличной разметки, которые открывают очень мощное свойство табличных разметок CSS: пропущенные элементы таблиц создаются анонимно самим браузером. Спецификация CSS 2.1 утверждает:

Отличные от HTML документальные языки могут не содержать всех элементов модели таблицы CSS 2.1. В этих случаях «пропущенные» элементы дожны быть созданы, чтобы табличная модель заработала. Любой элемент таблицы автоматически сгенерирует вокруг себя необходимые анонимные объекты таблицы, состоящие по крайней мере из трех вложенных объектов, соответсвующих элментам «table»/«inline-table», «table-row», и «table-cell».

Это значит, что если мы используем display: table-cell; без предварительного размещения ячейки в месте, относящемся к display: table-row;, то строка будет подразумеваться — браузер будет вести себя так, как будто объявленная строка на самом деле есть.

Давайте используем простой пример, чтобы объяснить этот прием: разметку из трех ячеек, показанную ниже. Мы рассмотрим три разных примера HTML кода, которые приведут к одинаковой визуальной разметке.

Сначала пример кода, который может быть использован для создания разметки из трех ячеек:

<div class="container">
  <div class="row">
    <div class="cell">CELL A</div>
    <div class="cell">CELL B</div>
    <div class="cell">CELL C</div>
  </div>
</div>

Набор вложенных элементов div не выглядит как-то особенно, но скоро мы это изменим. CSS тоже очень простой:

.container {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  padding: 1em;
}

Этот CSS относит элемент с классом «container» к display: table;, элемент с классом «row» к display: table-row;, а элемент с классом «cell» — к display: table-cell; с заданием его границы, высоты и ширины.

Вышеописанная HTML разметка явно создает элементы для таблицы из строки с тремя ячейками, используя все CSS классы, созданные нами. Однако, мы можем уменьшить код, убирая строковые элементы div вот так:

<div class="row">
  <div class="cell">CELL A</div>
  <div class="cell">CELL B</div>
  <div class="cell">CELL C</div>
</div>

Несмотря на то, что в этой разметке пропущен элемент, представляющий таблицу, она будет создана браузером, как анонимный элемент. Мы можем ещё сильнее сократить код:

<div class="cell">CELL A</div>
<div class="cell">CELL B</div>
<div class="cell">CELL C</div>

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

Правила создания анонимных элементов таблицы

Эти анонимные элементы создаются не магией, и они не будут автоматически появляться для любого недостатка вашего HTML кода. Чтобы полностью использовать преимущества анонимных элементов таблицы, желательно ознакомиться с правилами их создания. Если разметка запрашивает предполагаемый элемент, браузер создает анонимную ячейку и записывает ее CSS аттрибуту display одно из значений table, table-row, или table-cell, в зависимости от контекста.

Если у вас есть элемент, определенный, как display: table-cell;, но его непосредственный предок (элемент, содержащий его), не определен, как table-row, будет создан анонимный элемент table-row, чтобы включить в него ячейку и любые последующие родственные элементы, которые также определены table-cell, до тех пор, пока не попадется элемент, не относящийся к table-cell, таким образом они будут помещены в одну и ту же строку. Например, следующая разметка:

<div class="cell">CELL A</div>
<div class="cell">CELL B</div>
<div class="cell">CELL C</div>
<div>Not a cell</div>

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

Если элемент относится к display: table-row;, в то время как его предок не определен, как table (или table-row-group), будет создан анонимный элемент, отнесенный к display: table; чтобы включить в него ряд и любые последующие родственные элементы, которые также определены display: table-row;. Также, если элементу, определенному как table-row, не хватает элемента table-cell непосредственно в нем, будет создан анонимный элемент table-cell, чтобы включить в него все элементы, определеные как table-row.

Рассмотрим на примере:

<div class="row">ROW A</div>
<div class="row">ROW B</div>
<div>Not a row</div>

Верхние два элемента div, имеющие класс «row», определяются в display: table-row; и будут отображены друг под другом, как если бы они были рядами в одностолбцовой таблице, а последний элемент div не будет включен в эту таблицу.

Аналогично, если элемент отнесен к любому другому параметру display , поддерживающему элементы, которые находятся прямо внутри родительского табличного элемента, такие как table-row-group, table-header-group, table-footer-group, table-column, table-column-group и table-caption, но не имеет предка, опеределенного как display: table;, будет создан анонимный элемент table, чтобы включить в него элемент и любые последующие родственные элементы, с подходящими значениями display.

Другие полезные аттрибуты таблиц

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

Table-layout

Присваивание table-layout значение fixed сообщает браузеру, что таблица должна вопроизводиться по фиксированному алгоритму форматирования ширины ячеек. Это полезно в разметке с фиксированной шириной, которую мы создавали ранее.

Border-collapse

Так же, как и с обычными HTML таблицами, вы можете использовать аттрибут border-collapse для выбора используемых границ между ячейками таблицы разметки из collapse или separate.

Border-spacing

Если вы задали значение separate для аттрибута border-collapse, вы можете использовать аттрибут border-spacing для задания ширины пространства между границами ячеек.

Создание идеальной сетки

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

Код для нашей галереи выглядит так:

<div class="grid">
  <div class="row">
    <div class="image">
      <img src="images/photo1.jpg" alt="A Lily" />
      <p>A lily in the gardens of The Vyne Country House</p>
    </div>
    <div class="image">
      <img src="images/photo3.jpg" alt="A Fuchsia plant" />
      <p>Fuchsia plant in my garden</p>
    </div>
  </div>
  <div class="row">
    <div class="image">
      <img src="images/photo2.jpg" alt="A crazy looking Allium flower" />
      <p>A crazy looking flower</p>
    </div>
    <div class="image">
      <img src="images/photo4.jpg" alt="A Robin sitting on a fence" />
      <p>
        This robin has been visiting our garden over the summer.
        He is very friendly and doesn't seem to be too worried about sharing the garden with us.
      </p>
    </div>
  </div>
</div>

Каждая ячейка изображения галереи содержит элемент img и заголовка в элементе p, находящегося в div c классом «image». Каждая строка содержится в div с классом «row», а вся галерея располагается в элементе div c классом «grid».

CSS, требуемый для разметки нашей сетки очень прост:

.grid {
  display: table;
  border-spacing: 4px;
}
.row {
  display: table-row;
}
.image {
  display: table-cell;
  width: 240px;
  background-color: #000;
  border: 8px solid #000;
  vertical-align: top;
  text-align: center;
}
.image p {
  color: #fff;
  font-size: 85%;
  text-align: left;
  padding-top: 8px;
}

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

Применение примеров на практике

В этой статье были рассмотрены основные примеры использования табличных параметров CSS аттрибута display, служащего долгожданной наградой в борьбе за создание надежных сеток разметки с использованием CSS! Мы разобрали многочисленные табличные параметры display, посмотрели на природу анонимных табличных элементов и открыли несколько полезных свойств таблиц CSS.

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

Версия на английском.

В этой статье я расскажу, как использовать ключевое слово this в обработке событий.

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

Владелец

Вопрос, который мы рассмотрим в этом пункте — это «К чему мы обращаемся через ключевое слово this в функции doSomething()»?

function doSomething() {
   this.style.color = '#cc0000';
}

В JavaScript this всегда относится к «владельцу» выполняемой функции, или, если быть точнее, к объекту, методом которого является функция. Когда мы определяем нашу функцию doSomething() в глобальном пространстве, владельцем является страница или объект window (глобальный обект) JavaScript. Например, аттрибут «onclick» принадлежит тому элементу(объекту) HTML, к которому он относится.

Это «владение» — результат объектно-ориентированного подхода JavaScript.

------------ window --------------------------------------
|                                          / \           |
|                                           |            |
|                                          this          |
|   ----------------                        |            |
|   | HTML element | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          --------------------                          |
|          | onclick property |                          |
|          --------------------                          |
|                                                        |
----------------------------------------------------------

Если мы напрямую выполним doSomething(), ключевое слово this будет относиться к окну, и функция попытается изменить style.color окна. Но так как у окна нет объекта style, функция завершается неудачей и вовзратит ошибку.

Копирование

Итак, для того, чтобы использовать this в полном объеме, нам нужно позаботится о том, чтобы «владельцем» функции, использующей this являлся правильный объект HTML. Например нам нужно скопировать функцию в наш аттрибут «onclick».

element.onclick = doSomething;

Функция полностью скопирована в аттрибут «onclick» (который теперь становится методом). Теперь при выполнении обработчика событий this относится к элементу HTML и его color поменяется.

------------ window --------------------------------------
|                                                        |
|                                                        |
|                                                        |
|   ----------------                                     |
|   | HTML element | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          -----------------------          |            |
|          |copy of doSomething()|  <-- copy function    |
|          -----------------------                       |
|                                                        |
----------------------------------------------------------

Конечно же мы можем скопировать функцию в несколько обработчиков событий сразу, будь то «onclick» или любые другие. Каждый раз this будет относиться к определенному элементу HTML:

------------ window --------------------------------------
|                                                        |
|                                                        |
|                                                        |
|   ----------------                                     |
|   | HTML element | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          -----------------------          |            |
|          |copy of doSomething()|  <-- copy function    |
|          -----------------------          |            |
|                                           |            |
|   -----------------------                 |            |
|   | another HTML element| <-- this        |            |
|   -----------------------     |           |            |
|               |               |           |            |
|          -----------------------          |            |
|          |copy of doSomething()|  <-- copy function    |
|          -----------------------                       |
|                                                        |
----------------------------------------------------------

Таким образом ключевое слово this используется наиболее эффективно. При каждом вызове функции, this относится к тому элементу HTML, который в этот момент обрабатывает событие, элемент HTML, «владеющий» копией doSomething().

Ссылки

Однако, если вы используете линейную регистрацию событий:

<element onclick="doSomething()">

Вы не делаете копии функции! Вместо этого вы обращаетесь к ней, и разница огромна! Аттрибут «onclick» не содержит саму функцию, а только ее вызов:

doSomething();

То есть он говорит «обратись к doSomething() и выполни ее». Обратившись к doSomething(), ключевое слово this относится к глобальному объекту window и функция возвращает сообщения об ошибках.

------------ window --------------------------------------
|                                          / \           |
|                                           |            |
|                                          this          |
|   ----------------                        |            |
|   | HTML element | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          -----------------------         / \           |
|          | go to doSomething() |          |            |
|          | and execute it      | ---- reference to     |
|          -----------------------       function        |
|                                                        |
----------------------------------------------------------

Разница

Если вы хотите использовать this для доступа к HTML элементу, обрабатывающему событие, вам нужно убедиться, что ключевое слово this написано именно в аттрибуте «onclick». Только в этом случае оно относится к тому элементу HTML, к которому преписан обработчик событий. То есть если вы выполните

element.onclick = doSomething;
alert(element.onclick)

то получите

function doSomething()
{
	this.style.color = '#cc0000';
}

Как вы видите, ключевое слово this находится в методе «onclick()». Следовательно, оно относится к элементу HTML.

Но если вы выполните

<element onclick="doSomething()">

alert(element.onclick)

то получите

function onclick()
{
	doSomething()
}

Это только ссылка на функцию doSomething(). Ключевое слово this не находится в методе «onclick» и поэтому не относится к элементу HTML.

Примеры — копирование

This записывается в метод «onclick» в следующих случаях:

element.onclick = doSomething
element.addEventListener('click',doSomething,false)
element.onclick = function () {this.style.color = '#cc0000';}
<element onclick="this.style.color = '#cc0000';">

Примеры — ссылки

В этих примерах this относится к окну:

element.onclick = function () {doSomething()}
element.attachEvent('onclick',doSomething)
<element onclick="doSomething()">

Заметьте наличие attachEvent(). Главная проблема модели регистрации событий Microsoft в том, что attachEvent() создает ссылку на функцию, а не копирует ее. Поэтому иногда невохможно узнать, какой объект HTML в данный момент обрабатывает событие.

Комбинации

При использовании линейной регистрации событий вы также можете пересылать this в функцию, то есть вы все еще можете использовать его:

<element onclick="doSomething(this)">

function doSomething(obj) {
	obj.style.color = '#cc0000';
}

Английский вариант статьи: The this keyword

Спонсор поста: Агентство «Web++» — продвижение и создание сайтов в Волгограде.

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

При определение целевой страницы всегда преследуется какая-либо особую цель. Как правило, эта цель состоит в перенаправлении высококачественного трафика на Ваш веб-сайт через поисковую систему. Выбранная страница непосредственно связана с информацией, представленной в выдаче поисковика (SERP).

Электронная коммерция и SEO

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

«Домашняя» целевая страница, связанная с естественным поиском (organic search), выглядит примерно также. Большинство целевых страниц, созданных для SEO, должны принимать во внимание, как поисковых роботов, так и людей, которых не интересует что-то определённое. Из-за этого коммерческая направленность таких страниц, в лучшем случае, плохо проработана.

Довольно сложно управлять коммерческим проектом (например, интернет магазин), основанном на SEO. Большинство поисковых систем сначала смотрят на стартовую страницу сайта и ранжируют ее, как самую главную страницу, основываясь на релевантности поисковых запросов. Это заставляет веб-мастера создавать сайт одновременно для поисковиков и для людей, чтобы получить большее число посетителей. В целом, такой подход делает органические целевые страницы (SEO-страницы или страницы, оптимизированные для поисковых систем) более общими, не зависящими от показателей их эффективности. Основная цель таких страниц — повысить ранг и доступность сайта, это отлично подойдет для работы с новыми посетителями или обычными веб-серферами, но будет неудобно для клиента, который ищет специфический товар или услугу.

Электронная коммерция и SEM

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

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

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

Ощущения и переходы в действии

Хорошим примером того, чем отличаются целевые страницы SEO и SEM, является сайт «zappos.com». Когда слово «обувь» (в оригинале — shoes) ищется через «Google», результаты поиска (сформированные SEO-оптимизаторами) ведут на главную страницу «www.zappos.com».

Так как тег <title> этой страницы оптимизирован под SEO, его текст с ключевыми словами выглядит так: «Наш обувной магазин представляет повседневную обувь, спортивную обувь, обувь для мужчин и для женщин!» При этом, многократные упоминания ключевого слова «обувь» заставляют поисковую систему показывать пользователю именно эту страницу, вместо страниц «заказа» или «секции», которые обычно и требуются ему.

Переходя по SEM-ссылке из контекстной рекламы на «www.zappos.com» мы переносимся на подстраницу сайту, более точно связанную с запросом «обувь».

Тег <title> на этой странице оптимизирован под коммерческие ссылки и в корне отличается от SEO-страницы. В нем написано «Обувь — бесплатная доставка и возможность возврата», эта информация имеет высокую релевантность в контекстной рекламе для запроса «обувь» и содержит предложение, которое может легко повысить количество обращений к этой странице. И так как эта страница оптимизирована для людей, а не для поисковых систем, нет необходимости заполнять её ключевыми словами и данными meta-тега—пользователи приходят сюда, чтобы покупать.

Создание двух наборов целевых страниц (одна для SEO, а другая для SEM) важно, если Вы хотите получить лучший трафик от поисковых систем. Тот факт, что целевые страницы SEO, должны быть более общими и менее ориентированы на действие, не означает, что они не способны выполнить Ваши торговые цели. С другой стороны, страницы SEM дают Вам полный контроль, позволяя приводить клиента к тем продуктам, которые ему нужны в подходящее для этого время. Если Вы хотите иметь полный набор возможностей в сети, Вам необходимо комбинировать эти два метода.

Английский вариант статьи «Landing Pages: SEO vs. SEM»

Я одержим поиском и очень любознателен. Мне всегда нравилось узнавать что-нибудь. Кроме того, я работаю в «Google» над поиском последние 9 лет и 3 месяца. Я очень часто пользуюсь поиском, но мне кажется, что каждый раз я нахожу только 20% того, что мог бы.

В прошлую субботу отслеживал вещи, звучавшие в разговорах, которые я хотел найти после, но не смог:

• Являются ли словами «fab», «goy» и «eely»?« (в это время шла игра в слова)
• В какое время открывается «J.C. Penney» по субботам?
• В какой школе есть команда «Banana Slugs»?
• Какой талисман у команды «San Jose State»?
• Какова мощность генераторов ГЭС?
• Какая фамилия у великого ирландского флейтиста с именем Джеймс?
• Как называется крупнейший город в России после Москвы и Санкт-Петербурга?
• Что старше: «секвойя» или «кипарис»?
• Какое существо является сейчас самым старым и сколько ему лет?
• Кто исполняет песню «Queen of Hearts»?
• Что там за птица летит?
• Магазин LF в Сан-Франциско находится на Union Square или Union Street?
• Как танцевать «чарльстон»?
• В какой день недели проходило «The Lawrence Welk Show»?
• Какие слова в песне «In the Mood»?
• Какая история связана с названием числа «googol»?

И это только те, что я помню. При просмотре этого списка становятся очевидными 2 вещи:

1. Я мог найти намного больше.
2. У поиска до сих пор есть возможности обновляться, меняться и прогрессировать.

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

Способы

Во-первых, почему я не смог найти эти вещи тогда, когда мне это было нужно? Потому что поиск не достаточно доступен и прост. Поиск должен быть более мобильным, он должен быть доступен и легок в использовании в сотовых телефонах и автомобилях, а также в переносных устройствах, которых у нас даже ещё нет.

Например, когда вопрос о самом старом существе возникнет во время лодочной прогулки, всем беседующим будет интересно узнать ответ, но никто не захочет пользоваться неуклюжим и медленным устройством для его поиска. Было бы намного приятнее, если бы у нас было устройство с огромной коммуникабельностью, способное производить поиск без прерываний. Одна надуманная идея: «Как насчет переносного устройства, которое незаметно ведет поиск, основываясь на словах, получаемых из разговоров, а затем показывает связанные с ними факты?»

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

Кроме того, почему в поиске вообще должны участвовать слова? Почему я не могу представить свой запрос в виде изображения птицы, летящей мимо, и получить ответ поискового устройства, определившего, что это за птица? Почему я не могу записать аудио-отрывок и позволить поисковой системе идентифицировать и проанализировать его (песню или отрывок разговора), а затем рассказать мне любую информацию, связанную с ним? Сервисы, делающие часть этого, доступны сейчас, но они не просты в использовании.

В ближайшие 10 лет мы увидим радикальные улучшения в способах поиска, среди которых:

• мобильные устройства, предлагающие нам более легкий поиск;
• доступ к сети Интернет во многие устройства;
• разные способы ввода и объяснения запроса голосом, на естественном языке, изображением или звуком.

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

Медиа

Ещё есть медиа-сторона. 10 синих ссылок, представленных как результаты интернет поиска, могут быть потрясающими и даже изменить Вашу жизнь, но когда Вы пытаетесь запомнить шаги для «чарльстона», текстовая веб-страница не будет даже близко стоять по полезности с видео. Формат результата играет большую роль.

Универсальный поиск, который мы представили в прошлом мае, был первым важным шагом, который включал в себя изображения, видео, новости, книги и карты — информацию в основных результатах поиска «Google».

Пока наше представление до сих пор очень линейно (результаты — это всего лишь список) и однородно. А что если страница результатов начнет полностью изменяться, чтобы на самом деле использовать эти разные типы результатов в чем-то более похожем на ответ, чем просто 10 независимых догадок? Что если страницы с результатами соберут лучшие медиа файлы вместе и покажут их так, что самые полезные будут не только первыми, но и самыми большими? Что если мы разместим наши результаты по столбцам, чтобы использовать больше поверхности экрана, доступной на новых, широких мониторах?

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

В прошлом году нашей целью было использовать преимущества новых типов результатов и развивать дизайн интерфейса. Вы увидите плоды проделанных экспериментов в ближайшие месяцы, но даже эти изменения — только начало. За следующие 10 лет внешний вид поиска значительно изменится. Может быть, он должен содержать ещё больше видео и изображений, может он должен жестко различать относительный вес и точность результатов, может он должен быть более интерактивным во время изменений? Мы ещё не уверены, но мы знаем, что поиск не должен обладать одним качеством (особенно перед лицом взрывного роста популярности онлайн-медиа, который мы сейчас наблюдаем) — застоем.

Персонализация

Механизмы поиска через 10 лет будут намного лучше тех, что мы имеем сейчас. «Google» сам по себе становится немного лучше каждый день. Мы постоянно пишем и изменяем новые понятия, связанные с поиском, и выпускаем обновления практически ежедневно. Эти улучшения приводят нас к другим механизмам поиска, следовательно, эти механизмы через 10 лет будут заметно лучше. Настоящий вопрос не в том, будет ли поиск лучше, а в том, чем он будет лучше?

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

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

Местоположение

Ваше местоположение — это потенциально полезная сторона персональной информации. При просмотре моих вопросов, ответы на некоторые из них (В какое время открывается «J.C. Penney» по субботам? Какова мощность генераторов ГЭС?) позволяют поисковой системе узнать, что я был в Янктоне и Южной Дакоте, вводя эти запросы. Так как местоположение важно во многих поисковых запросах, принятие во внимание местоположение пользователя и контекст будет основным инструментом при повышении релевантности и легкости поиска в будущем.

Общество

Другой элемент персонализации — это социальная среда. Кто мои друзья и как я к ним отношусь? Как я могу использовать их знания более эффективно?

Например, у меня есть друг, который работает в магазине LF в Лос-Анджелесе (поэтому возник вопрос о LF в Сан-Франциско). Аббревиатура LF сама по себе очень многозначна. Согласно первой странице результатов поиска в «Google» она может относиться не только к магазину модной одежды моего друга, но и к «Leapfrog Enterprises», низкой частоте (low frequency), «Lebhar-Friedman», «Li & Fung Investment Group», «LF Driscoll Construction Management», крупному форматеу (large format), или дизайну будущего концепт-кара «Lexus».

Сейчас пользователь, набирающий «LF», должен выяснять, какой результат правильный, чтобы разобраться с многозначным термином, но это то, в чем поисковая система должна улучшиться. Например, мы поймем семантику вопроса о расположении LF в Сан-Франциско и сделаем вывод, что LF — это магазин. Или возможно, система сможет проанализировать мою социальную схему и понять, что один из моих друзей работает в LF, что я видел этого друга в выходные, и что в этом контексте LF относится к его месту работы. Алгоритмический анализ социальной схемы пользователя для дальнейшего улучшения запроса или его разбора может стать очень полезным в будущем.

Язык

Вышеописанные примеры показывают, как способы внедрения медиа-контента и различные формы персонализации помогают сильно улучшить поиск, но как же язык? Мы знаем, что есть случаи, при которых ответ существует в сети, но не на понятном Вам языке. Поэтому «Google» работает над машинным переводом. Мы хотим открыть мощь веб-поиска любому человеку, говорящему на любом языке. Основная идея — если ответ существует в сети где-либо на любом языке, мы получим его для Вас, переведем и возвратим на Вашем родном языке. Это очень перспективная идея, позволяющая действительно изменить способ освоения сети пользователями и их общения друг с другом, в основном на языках, в которых доступно не так много родных слов.

Заключение

Мы все знакомы с принципом «80—20», в котором последние 20% решения — это 80% работы. Поиск — это принцип «90—10». Сегодня у нас есть 90% решения. Я могу ответить на все мои неотвеченные субботние вопросы, не идеально и просто, но могу сделать это с помощью текущих средств поиска. Однако, оставшиеся 10% проблемы на самом деле требуют 90% (скорее всего больше 90%) работы.

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

Поиск — это наука, которая будет развиваться и улучшаться сотни лет. Его можно сравнить с биологией и физикой в 15—16 веках. Это новая наука, в которой мы всё время делаем большие и интересные открытия. Однако, может пройти 100 или больше лет, пока мы получим микроскопы и понятие о так называемых молекулах и атомах поиска. Так же как и в биологии с физикой, несколько веков назад, крупнейшие достижения ещё не наступили. Это делает отрасль поиска в интернете такой захватывающей.

Итак, как звучит наше прямое определение идеальной поисковой системы?

«Ваш лучший друг с мгновенным доступом ко всем мировым фактам и фотографической памятью обо всём, что Вы видели и знаете»

Эта поисковая система может привязать ответы к Вам, основываясь на Ваших предпочтениях, существующих знаниях и лучшей доступной информации, она может попросить пояснений и представить ответы с любыми установками и в лучшем формате. Эта идеальная поисковая система могла бы легко и изящно утолить мою субботнюю жажду. Я очень горд тем, что «Google» за свои первые 10 лет изменил ожидания о качестве информации и того, как быстро и легко она должна получаться. Но я ещё сильнее заинтересован тем, чего «Google» может достичь в будущем.

Ранжирование веб-документов является ядром того, что делает поиск в Google таким эффективным. Но поиск не ограничивается одним ранжированием и включает много других составляющих.

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

Позвольте представиться. Я Ben Gomes, работаю над поиском в Google с 1999 года и занимаюсь в основном оптимизацией качества поиска. Мне посчастливилось внести свой вклад в большинство аспектов механизма поиска, от просмотра сети до ранжирования. Чаще всего я занимаюсь разработкой интерфейсов и функций поиска.

Обычная реакция друзей на то, что я работаю над пользовательским интерфейсом поиска Google — это вопрос: «Чем ты занимаешься? Он же никогда не меняется». Затем они подозрительно смотрят на меня и говорят: «Лучшее — враг хорошего. Google хорош таким, какой он есть — простая и быстрая веб-страница. Зачем ее как-то изменять?»

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

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

• Минимальный код веб-страницы

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

• Простое представление сложных алгоритмов

  Многие функции поискового механизма требуют алгоритмов большой сложности и огромного количество анализируемых данных. Важно «спрятать» все эти сложности за понятным и интуитивным пользовательским интерфейсом.

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

• Поиск, работающий везде!

  Расширенные возможности поиска должны быть сделаны так, чтобы алгоритмы и интерфейс можно было адаптировать для работы на всех языках и во всех странах. Например, проблема коррекции произношения в Китае, где пользовательские запросы часто не разбиваются на слова, или Иврит и Арабский язык, где текст пишется справа на лево.

• Принятие правильных решений

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

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

С чего Вы начинаете поиск? С набора запроса. Очень часто, если Вы не знаете, как правильно пишется слово, результат разочаровывает Вас. Коррекция правописания, которая кажется простой и очевидной функцией, скрывает в себе множество технических проблем.

Например, ни в одном обычном английском словаре не будет корректного правописания Britney Spears. Мы провели огромный анализ миллиардов страниц в сети и логов наших запросов, чтобы определить какие слова являются «настоящими», а какие — орфографическими ошибками.

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

Когда мы уверены, что Вы на самом деле хотели напечатать что-то другое, мы предоставляем результатам некоторую свободу, стараемся отвлечь Вас от просмотра первого результата на странице. Коррекция правописания находится на линии взгляда и окрашена в ярко-красный цвет. Мы убеждаемся, что ничто не окрашено красным цветом, кроме текста требующего внимания (пока что такого не было).

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

Следующей задачей после корректной формулировки запроса является правильный выбор страницы из списка результатов. Для каждой страницы мы представляем заголовок, URL и короткий фрагмент из ее содержимого. Страницы, не имеющие подходящего заголовка, часто игнорируются пользователями. Одно из самых больших недавних изменений — это поиск на странице правильного заголовка, который не включен в HTML-тег заголовка «title». Чтобы «увидеть» заголовок, который автор страницы задумал, мы анализируем HTML-код страницы специальным алгоритмом. Согласитесь, страница с отсутствующим заголовком может быть Вами проигнорирована, но если она содержит интересующее содержание? Поиск не указанного заголовка — это намного лучше, чем, если Вы будете игнорировать релевантную страницу из-за отсутствия заголовка.

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

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

Мы улучшаем поиск подходящих фрагментов страниц алгоритмами для определения релевантности частей страницы. Изменения колеблются от сложных (подсвечивание синонимов слов Вашего запроса в результатах) до более простых. Вот пример, на котором пользователь ищет «arod» и Вы видите, что Alex и Rodriguez выделены в фрагменте результата поиска, основываясь на нашем анализе того, что Вы могли действительно иметь ввиду его.

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

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

А что если Вы не нашли того, что искали, среди самых подходящих результатов? В этом случае Вам, вероятно, нужно попробовать другой запрос. Мы помогаем Вам в этом, представляя ряд измененных запросов с результатами, даже если среди них не будет нужного, они могут намекнуть на другие (вероятно более успешные) направления для улучшения запроса.

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

Я описал несколько ключевых аспектов поиска, которые мы изменяем с каждым днем. Но как, делая эти изменения, мы понимаем, что они успешны и что мы не ошиблись? Мы постоянно оцениваем наши изменения, разделяя их с Вами! Запуская предполагаемые изменения для небольшой части наших пользователей, наблюдаем, помогают ли они поиску, или мешают. Есть много показателей, по которым определяется, на правильном мы пути или нет. Процесс измерения этих алгоритмов, сам по себе — наука с большим количеством потенциальных ловушек. Наша экспериментальная методология позволяет рассмотреть предел возможностей и запустить те, которые работают лучше всех. Для каждой запускаемой нами дополнительно функции поиска, проводим большое число экспериментов, скрытых от пользователей.

Итак, позвольте мне ответить на вопрос, с которого я начал: Мы действительно постоянно изменяем страницу результатов поиска в Google. И нет, мы не испортим то хорошее, что уже есть. Почему? Вы не дадите нам сделать это!

Оригинал статьи «Search quality, continued».

Самый недавний очерк о компании был написан в лондонской «Times», которая столкнула её лицом к лицу с «Google». Вкратце, репортер «Times» Марк Франчетти вместе с соучредителем и исполнительным директоров «Яндекса» Аркадием Волож позиционирует компанию, как серьезного конкурента «Mountain View», веб-гиганта евразийского масштаба. Например, она владеет 55% Российского рынка. «Google», в свою очередь, удерживает 21%.

Сейчас вызовы, бросаемые обеими сторонами, довольно интересно наблюдать. «Google» буквально в прошлом месяце купил российскую компанию контекстной рекламы «Бегун», которой ранее владел «Rambler Media», за 140 миллионов долларов. По-видимому это было сделано чтобы извлечь выгоду из уверенного роста российского интернет сектора и инвестировать в больший кусок «пирога поиска» в регионе. Хотя «Google» контролирует сегмент меньший, чем «Яндекс», его позиции не так непоколебимы, как в западных частях мира.

Конечно, «Яндекс» понимает это, и не теряет времени, а работает для собственного роста. Это проявляется как на российском рынке, так и вне границы России. На этой неделе было объявлено, что «Яндекс» значительно улучшил свои каналы данных к Украине. А немного раньше сообщили об апгрейде поискового механизма, для поддержки так называемых мировых стандартов, и усовершенствовании работы пользователя с видео, для достойной конкуренции с постоянно развивающимся «Google».

Пока еще рост «Яндекса» не сильно влияет на мировые позиции «Google», как замечают в «Times». 33 миллиона россиян сообщают, что пользуются Интернет. Эта цифра, по прогнозам, удвоится через 5 лет. И это, без сомнения, немалое количество. Однако, учитывая недавние оценки населения России, которое составляет примерно 142 миллиона, что ниже объявленных в 2002 году 145 миллионов, скорость освоения веб-сервисов даже близко не сравнить с западным населением. Например, в США, с населением около 300 миллионов, более 70% имеют доступ в Интернет, это 219 миллионов пользователей. Европа, в целом, находится в шаге от отметки 50%. Такие страны, как Германия, Норвегия, Великобритания, Швейцария, Дания и Швеция показывают результаты, подобные США. Франция — около 55%.

Как было сказано, «Яндекс» извлекает выгоду из постепенно растущего российского интернет-развития. Согласно поисковой компании «Quintura», «Яндекс» стал чем-то вроде нарицательного слова в своей родной стране, и планирует двигаться дальше в этом направлении, а так же обновить свой логотип, сделав его полностью кириллическим, вместо почти англоязычного, использующегося сейчас.

Без лишних слов становится понятно, что за последние годы Западный интернет-рынок стал очень интернациональным, а компании Китая и, в немного меньшей мере, России получили статус тяжеловесов или почти-тяжеловесов. Это относится к поиску так же, как и к социальным сетям, видео каналам или веб-программам. И ,наверное, можно с уверенностью сказать, что эти тенденции будут продолжаться. Конечно, очень маловероятно, что в результате «Google» останется в убытке.

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

Оригинал статьи — «Russian Search Leader Yandex is Hungry for International Renown».

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

Подробности на странице «Переводы».

PHP — хороший язык, но в нем всегда полно сюрпризов. И сегодня я увидел интересную статью в блоге Арнольда Дэниэлса. Он рассуждает о «временных переменных» в РНР. Этот прием полезен для «ленивых» разработчиков, которые даже не задумываются о названиях переменных. Они предпочитают такое наименование, как «${0}» и «0» — ведь это хорошее название для переменной, почему нет…

Но я уверен, что когда нет переменной, нет и проблемы. Поэтому приведу несколько приемов, которые делают Ваш код короче и труднее для восприятия :)

1. Используйте || (или) и && (и) вместо if

   Много кода:

   $status = fwrite($h, 'some text');
   if(!$status) {
       log('Writing failed');
   }

   Меньше кода:

   ${0} = fwrite($h, 'some text');
   if(!${0}) log('Writing failed');

   Еще меньше кода:

   fwrite($h, 'some text') or log('Writing failed');

2. Используйте «тернарный оператор»

   Много кода:

   if($age < 16) {
       $message = 'Welcome!';
   }
   else {
     $message = 'You are too old!';
   }

   Меньше кода:

   $message = 'You are too old!';
   if($age < 16) {
       $message = 'Welcome!';
   }

   Еще меньше кода:

   $message = ($age < 16) ? 'Welcome!' : 'You are too old!';

3. Используйте «for» вместо «while»

   Много кода:

   $i = 0;
   while($i < 100) {
     $source[] = $target[$i];
     $i += 2;
   }

   Меньше кода:

   for($i = 0; $i < 100; $source[] = $target[$i+=2]);

4. В некоторых случаях PHP требует от вас создания переменной. Например, при получении массива элементов, когда массив возвращается функцией:

   $ext = pathinfo('file.png')['extension'];

   Результат: Parse error: syntax error, unexpected ’[' in … on line …

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

   // Возвращает ссылку на создаваемый объект
   function &r($v) {
   	return $v;
   }
   
   // Возвращает сдвиг массива
   function &a(&$a, $i) {
   	return $a[$i];
   }
   

5. Исследуйте язык, который используете

   PHP — очень мощный язык и содержит множество функций и интересных аспектов, которые могут сделать Ваш код рациональнее и короче.

6. Пишите комментарии

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

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

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

Основная технология нашей системы ранжирования пришла из области науки «Информационного поиска» (Information Retrieval или IR). IR-сообщество исследует поиск почти 50 лет. Оно использует статистику особенностей слов, таких, как частота слов, для ранжирования страниц. IR заложило для нас твердый фундамент, и мы построили на нем огромную систему, используя ссылки, структуру страниц и многие другие новшества.

В последнее десятилетие сущность поиска изменилась от «дайте мне то, что я сказал» до «дайте мне то, что я хочу». Ожидания пользователей от поиска справедливо выросли. Мы много работаем над удовлетворением ожиданий каждого пользователя, и для это нам необходимо как можно лучше понимать страницы сайтов, запросы и наших пользователей. За последнее десятилетие мы довели технологии до понимания этих трех компонентов (процесса поиска) до совершенно новых измерений.

На протяжении всей статьи, когда речь будет идти о запросах в Google, они будут заключены в квадратные скобки [ ], для обозначения начала и конца запроса. (Страницы и результаты поиска часто меняются, поэтому, со временем, некоторые примеры, используемые здесь, будут работать не так, как описано.)

Понимание страниц

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

Допустим, мы найдем официальный сайт Sprovieri Gallery в Лондоне по запросу на итальянском [galleria sprovieri londra], хотя на сайте нет ни слова London, ни Londra. В США пользователь, ищущий [cool tech pc vancouver, wa] найдет страницу www.cooltechpc.com несмотря на то, что нигде на странице не указано, что они находятся в Ванкувере. Другие нами разработанные технологии включают в себя распознавание более важных и менее важных слов на странице и свежесть информации на сайте.

Понимание запросов

Важно понимать, что ищут наши пользователи (больше, чем просто слова в их запросе). Мы достигли некоторых заметных успехов в этом направлении, включающих в себя лучшую в своем роде систему распознавания текстового содержимого, развитую систему синонимов и очень мощную систему анализирования.

Многие пользователи время от времени используют нашу систему распознавания содержимого. Системе известно, что кто-то, вводящий в строке поиска [kofee annan], на самом деле ищет мистера Кофи Аннана, и подсказывает ему об этом: Did you mean: kofi annan; тогда как если кто-то ищет [kofee beans], то ему на самом деле нужны coffee beans (кофейные бобы).

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

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

Как пользователь, я не хочу слишком много думать о том, какие слова мне использовать для запросов. Часто я даже не знаю, какие слова правильные. Здесь включается в работу наша система синонимов. Она может выполнять сложные модификации запросов, то есть она знает, что слово ‘Dr’, в запросе [Dr Zhivago], означает Doctor, в то время как в [Rodeo Dr] оно значит Drive. Пользователь, который ищет [back bumper repair] получает результаты для rear bumper repair. Для [Ramstein ab] мы автоматически получим результат для Ramstein Air Base, а при запросе [ b&b ab] мы будем искать Bed and Breakfasts in Alberta, Canada.

Мы достигли такого уровня понимания запросов для практически сотни различных мировых языков, этим я действительно горжусь!

Другая технология, которую мы используем в нашей системе ранжирования — это поиск идеи. Обнаружение главной идеи запроса позволяет возвратить намного более релевантные результаты. Например, наши алгоритмы поймут, что в запросе [new york times square church] пользователь ищет известную церковь на Times Square, а не статьи из New York Times. Но мы не останавливаемся на поиске идей, мы добавляем правильные идеи, когда, например, кто-то ищет [PC and its impact on people], то на самом деле он ищет impact of computers on society (влияние компьютеров на общество), а пользователю, ищущему [rainforest instructional activities for vocabulary], нужны rain forest lesson plans. Наши алгоритмы анализа запросов имеют множество встроенных современных методик, и, повторюсь, мы делаем это практически для всех языков, с которыми мы работаем.

Понимание пользователей

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

Наш упор на принцип «наиболее релевантные запросу результаты» отражается в нашей работе по локализации. Один и тот же запрос, написанный в различных странах, даст абсолютно разные результаты. Пользователь, ищущий [bank] в США, должен получить Американские банки, в то время как пользователь в Великобритании ищет Bank Fashion line или British financial institutions. Результаты этого запроса должны содержать местные финансовые подразделения в других англоговорящих странах, таких как Австралия, Канада, Новая Зеландий, ЮАР.

Настоящее веселье начинается, когда этот запрос вводится в не-англоговорящей стране, например в Египте, Израиле, Японии, России, Саудовской Аравии, Швейцарии. Также, запрос [football] относится к совершенно различным видам спорта в США, Австралии и Великобритании.

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

Например, [Côte d'Or] это географический регион во Франции, но это крупный производитель шоколада в соседней, франкоговорящей Бельгии; и да, эти вещи мы тоже получаем правильно.

Персонализация

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

Пользователи, которые "залогинились" во время поиска и имеют включенный журнал посещений, получают результаты, которые более релевантны для них, чем общие результаты Google. Например, пользователь, который имеет множество запросов, относящихся к футболу, получит более «футбольные» результаты на запрос [giants], тогда как другие пользователи могут получить результаты, относящиеся к бейсбольной команде. Аналогично, если вы стремитесь получить результаты из какого-то интернет-магазина, вам лучше искать товар на этом сайте. По нашим оценкам, пользователи, получающие персональные результаты, находят их более релевантными, чем неперсонализированные результаты.

Другой случай пользовательских намерений можно рассмотреть на примере запроса [chevrolet magnum]. Magnum на самом деле делается компанией Dodge, а не Chevrolet. Поэтому, мы показываем результаты для Dodge Magnum с пометкой See results for: dodge magnum.

Наша работа над Универсальным Поиском — это ещё один пример нашего толкования намерений пользователя для предоставления им того, что они (иногда) на самом деле хотят. Т.е., кто ищет [bangalore], получают не только нужные веб-страницы, также ему становится доступна карта, видео, жизнь на улицах Бангалоре и т.д., и плюч ко всему еще и новости/блоги о Бангалоре.

В заключение, позвольте мне коротко упомянуть последнее улучшение, сделанное нами в механизме поиска: Cross Language Information Retrieval (CLIR). Это позволяет пользователям сначала получить информацию не на их родном языке, а затем, используя технологию перевода Google, мы делаем информацию доступной. Я называю это улучшение «дайте мне то, что мне нужно, на любом языке». Пользователь, который ищет биографию Тони Блэра в России, набирающий [Тони Блэр биография] получает предложение посмотреть результаты, переведенные с английского. Аналогично, пользователь, ищущий песни из фильмов Дисней в Египте с запросом [أغاني أفلام ديزني], получит предложение посмотреть английские результаты.

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

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

Заключение

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

Первая часть статьи: Инженер Google, об алгоритмах ранжирования

Позвольте представиться. Меня зовут Амит Сингал. Я работаю в Google руководителем команды, ответственной за ранжирование.

Вот уже восемнадцать лет я работаю в сфере поисковых технологий, начав в 1990 года выпускником по специальности «компьютерные науки». В научных кругах «поисковые алгоритмы» называют «Информационный поиск» (Information Retrieval или IR). Я пришел в Google в 2000 году и с тех пор работаю над алгоритмами ранжирования Google.

Ранжирование Google — это набор взаимосвязанных алгоритмов, используемых для поиска документов, наиболее релевантных для запроса пользователя. Мы используем эти алгоритмы для сотен миллионов запросов в день из набора миллиардов и миллиардов страниц. Эти алгоритмы работают для каждого запроса, введенного в большинство служб поиска Google.

Так как поиск в сети — это самая используемая служба Google, а также самая широкоизвестная, те же алгоритмы ранжирования используются, с некоторыми изменениями, в других службах поиска, таких как Images, News, YouTube, Maps, Product Search, Book Search и других.

Самый частозадаваемый мне вопрос о ранжировании Google: Как Вы это делаете?. Конечно, для создания такой современной системы как наша, требуется очень много, и я постараюсь рассказать о некоторых технологиях в следующей статье. Сегодня, я бы хотел вкратце объяснить основные принципы ранжирования Google:

1. наиболее релевантные запросу результаты;
2. стараться сделать алгоритмы как можно проще;
3. полная автоматизация, никакого ручного вмешательства в работу алгоритмов.

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

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

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

Ни одно обсуждение алгоритмов ранжирования Google не обходится без распространенного, но ошибочного, вопроса: Google вручную редактирует свои результаты?. Позвольте мне в ответ на это просто назвать наш третий принцип: «Никакого ручного вмешательства». На наш взгляд, сеть была создана людьми. Вы одни из тех, кто создает страницы и посещает их. Мы используем вклад человека в наших алгоритмах. Финальное упорядочение результатов определяется исключительно нашими алгоритмами, использующими достижения и разработки огромного Интернет-сообщества, а не вручную, т.е. весь процесс происходит полностью автоматически.

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

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

Совершенствуя основной алгоритм, мы не просто улучшаем тот один запрос, мы совершенствуем целый класс запросов, причем всегда для всех языков мира. Однако, я должен добавить, что так же существуют правила для написания сайтов, рекомендованные Google, и мы принимаем меры в отношении сайтов, нарушающих наши правила или по некоторым другим причинам (таким, как требования закона, детская порнография, вирусы/вредоносное ПО, и т.д.).

В заключение хочу сказать, что наша страсть к механизмам поиска сейчас намного сильнее, чем когда-либо и моя работа лучшая в мире

Продолжение статьи (Часть 2): Технологии ранжирования Google

Занимаясь SEO, как для себя, для клиентов, на работе, я научился многим вещам, касающимся проведению ссылочной кампании. Вести ссылочную кампанию можно разными способами. Хотя я полностью ЗА создание полезного контента на сайте, ссылки на который будут расти естественным путем, но чаще бывает так, что это проще сказать, чем сделать. Если Вы не хотите прибегать к поиску ссылок, то можно прибегнуть к достаточно старомодному методу, а именно спрашивать их напрямую.

• Нужна ли мне эта ссылка?
• Каким образом я могу получить эту ссылку?
• Какой анкор может соответствовать этой ссылке?
• Имеется ли вообще возможность заполучить эту ссылку?
• Какое значение имеет эта ссылка для меня?

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

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

Именно на этом этапе и начинается сбор информации, но при этом важно отслеживать всё с точностью до документов «Word» или «Excel», т.к. в них тоже может содержаться полезная информация. На протяжении всего продвижения Вы будете создавать карту ссылок всей Вашей тематики. Достаточно скоро Вы соберете обширный список родственных веб-сайтов. Эти ссылки Вам пригодятся в дальнейшем.

Я использую шаблон поиска http://*.domain.ru, чтобы получить полное представление о том, где упоминаются сайты моих конкурентов (применяйте абсолютно любые средства, о которых Вам известно).

Когда Вы заходите на сайты, связанные с нужной Вам тематикой, ищите ссылки вида «добавить URL» или «рекомендовать сайт». Иногда процесс добавления происходит так же просто, как например заполнить форму и нажать «Отправить». Либо же если подобных ссылок не найдено, то нужно тщательно исследовать сайт. Например, была одна страница научных исследований, с которой я хотел связать мой сайт, но на ней не было никакой контактной информации или ссылки типа «добавить URL», которую бы я мог легко найти. Как оказалось, ссылка «добавить URL» была скрыта. Найти её я смог только с помощью поиска в исходнике страницы по запросу «addURL». Вы так же можете вместо использования формы найти адрес электронной почты, используя для поиска символ «@» при просмотре кода сайта.

Планирование — ключ к успеху

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

• авторитетные ссылки (.edu, .gov, и т.д.)
• ссылки на блоги
• ссылки на новостные группы
• форумные ссылки
• и т.д.

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

• нефтяные и газовые сайты
• сайты бензиновой тематики
• сайты об альтернативных источниках энергии
• сайты о солнечной энергии
• и т.д.

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

Как только всё спланировано, Вы готовы действовать.
Но стоп! Самая большая ошибка, которую вы можете сделать на этом этапе — это попытаться контактировать со всеми сайтами из Вашего списка одновременно. Важно сначала придумать подход и попробовать его пару раз, перед тем как Вы решите, что он стоящий. Если Вы разошлете электронные письма пяти сайтам и не получите никакого ответа, то Вы поймете, что Ваш подход нужно изменить или улучшить. В этом случае Вы можете придумать что-нибудь еще и отправить это другим 5 потенциальным клиентам. Поступая так, Вы в итоге создадите подход, который работает, и Вам не придется тратить весь Ваш список потенциальных клиентов на одну плохую попытку. Помните: то, что работает для кого-то, не будет работать для всех. Подход, который работает для сайтов электронной коммерции, не будет обязательно работать для блогов, а подход к «.edu» сайтам может не работать для «.gov» и т.д.

Иногда не помешает схитрить

Когда я готов начать активную ссылочную кампанию, одна из самых распространенных проблем, которые появляются — это отсутствие контактной информации. Это может провратить налаживание связей в достаточно трудоемкий процесс. Поэтому, иногда (или часто) необходимо применить хитрость и в нахождении нужной информации, и в получении этой ссылки.

Например, мне нужно было получить ссылку на известный блог. К сожаления, я нигде не смог найти ни единого упоминания о контактной информации. Так как имя хозяина блога было указано после каждого сообщения, я с помощью «Google» нашел его в «LinkedIn». Там я пригласил его присоединиться к моей сети, сказав ему, что я его большой фанат (Фанат получения ссылок!). Это заняло около двух недель, но в итоге он согласился. После небольшой электронной переписки он включил мой сайт в нужный пост блога. Миссия выполнена! Кроме того, у меня сейчас есть его личный e-mail адрес. Так появляются связи, которые могут, помочь в будущем.

В другой раз, когда я следил за блогом и терпеливо ждал своего шанса, хозяйка блога написала о том, что в общем-то не любит всю мою тематику (новости/медиа). Она была очень сильно убеждена, что новости не стоит больше читать, потому что все они имеют негативную окраску. Большинство решило бы, что шанс упущен, но я сразу же увидел перспективу! Мой план включал в себя связь с ней, сочувствие и понимание ее мыслей и, в основном, согласие с ее мнением. Затем я спросил, не хочет ли она посмотреть на наш сайт и написать статью о том, как мы можем расширить сферу деятельности. Я не просил размещать статью в ее блоге, но она всеравно это сделала (ведь каждому нужен свежий контент). Миссия снова завершена!

Я считаю, что если Вам удобно схитрить или иногда «сказать не всю правду», делайте это. До тех пор, пока это никому не вредит.

Отслеживайте ваш прогресс

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

Записывайте дату контакта с владельцем потенциальной ссылки, как Вы с ними связались (e-mail, форма на сайте, комментарий и т.д.), какой подход Вы использовали, и другую информацию, имеющую отношение к делу.

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

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

Есть много путей для начала ссылочной кампании и я уверен, что у каждого человека есть свой собственный стиль. Я также понимаю, что для некоторых из Вас эта статья будет являться «Ссылочной кампанией №101», но я искренне надеюсь, что кто-нибудь найдет применение методам и стратегиям, описанным в ней.

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

Большинство приложений, особенно бизнес-приложений, как правило, требуют множество операций с датой и временем. Код этих операций может быть упрощен, если объект Date ядра JavaScript расширить собственными дополнительными методами. Данная статья рассказывает о том, как добавлять в объект Date пользовательские методы, значительно упрощающие работу с датой в языке JavaScript и которые будут наследоваться каждым экземпляром данного объекта. Описанная в данной статье техника так же может быть применима ко всем объектам ядра JavaScript.

Практически все созданные нами методы могут быть использованы самостоятельно, без необходимости создания остальных. Но нужно помнить, что некоторые методы зависят от copy(), lastday(), getDaysBetween() и getMonthsBetween().

Безусловно, все наши методы могут быть реализованы как глобальные функции, но, расширяя класс Date, мы получаем несколько преимуществ:

• при расширении объекта Date языка JavaScript, глобальное пространство имен меньше загромождается, код более читаем, и производительность немного выше (хотя это только наносекунды);
• наши методы будут обладать всеми преимуществами объектно-ориентированного программирования;

Итак, приступим.

Как это работает?

Техника расширения использует преимущества реализации объектов в JavaScript. В основном, когда программисты говорят об объектно-ориентированном программировании (ООП), они подразумевают С++, Java или PHP. В этих языках строго типизированный класс определяет каждый объект – это все определяется до выполнения программы. Но JavaScript – это язык, основанный на прототипах. Функция-конструктор определяет каждый из объектов, а их методы могут быть расширены во время выполнения программы. Реализованные методы и свойства относятся к свойству прототипов функции конструктора, которое, по сути, также является объектом. Методы и свойства создаются объявлением, и новые или существующие экземпляры объектов наследуют их.

Date.prototype.method_name = function ([arguments]) {
  // Здесь идет код
};

В этом примере анонимная функция присваивается атрибуту method_name объекта prototype. Синтаксис вызова метода:

date_instance.method_name([arguments]);

Внутри кода метода ключевое слово this обращается к экземпляру объекта.
Теперь понятно, как это работает, давайте сделаем встроенный объект Date немного более полезным!

Копирование дат

В языке языке JavaScript присваивание объектов создает ссылку на объект, а не его копию. В следующем коде переменная date1 инициализирована значением 10 Февраля 2008 и это значение присвоено date2. Так как date2 не является копией date1, изменение числа на 20-ое касается только date1 и Alert выдает обе даты – 20 Февраля 2008. Они фактически являются одной и той же копией даты.

var date1 = new Date(2008, 1, 10);
var date2 = date1;
date2.setDate(20);
alert(date1 + "\n" + date2);

Для копирования даты её нужно преобразовать в базовое значение (строковое, числовое или булевое) и создать новую дату. Метод getTime() идеально подходит для этого. Он возвращает внутреннее представление даты с точностью до миллисекунды и может быть использован в качестве аргумента для конструктора даты:

var oldDate = new Date(); // сегодня
var dateCopy = new Date(oldDate.getTime());

Вместо написания этих строк везде, где они нужны, или создания глобальной функции мы добавим наследуемый метод copy() в конструктор Date:

Date.prototype.copy = function () {
  return new Date(this.getTime());
};

Вот пример его использования:

var oldDate = new Date(2008, 1, 10);
var newDate = oldDate.copy();

newDate.setDate(20);
alert(oldDate + "\n" + newDate);

Изменение newDate не влияет на oldDate. Даты, показанные в Alert это 10 февраля 2008 и 20 февраля 2008. Этот метод полезен, если вам нужно произвести несколько арифметических операций с датой, сохранив начальное её значение.

Получение информации о дате

Наши следующие четыре метода созданы для получения имени или аббревиатуры для недели или месяца. Создаются два массива: один для названий дней недели, второй для месяцев. Методы getDay() или getMonth() объекта Date возвращают указатель, использующийся для доступа к значению массива дней или месяцев.

Кроме описанных выше проблем с использованием глобальных функций здесь есть другая угроза. Массивы (всех переменных) – это не константы, и они очень чувствительны к изменениям. Константы могут быть объявлены ключевым словом const в новых версиях языка JavaScript, но это не поддерживается большинством браузеров. К счастью, JavaScript предлагает альтернативные решения.

Массивы можно создать как свойства конструктора даты, исключая их из глобального пространства имен. Это можно сделать двумя способами: как статические атрибуты или наследуемые атрибуты. Примером статического атрибута служит PI, который является статическим атрибутом объекта Math. Массивы добавляются в конструктор Date с помощью присваивания, как это показано ниже:

Date.DAYNAMES = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", ..., "Friday", "Saturday"];
Date.MONTHNAMES = ["January", "February", "March", "April", "May", "June", "July", ..., "August", "September", "October", "November", "December"];

Получить доступ к массивам можно следующим образом:

Date.DAYNAMES[index];

Второй вариант – это создание аттрибутов массива в объекте prototype конструктора даты:

Date.prototype.DAYNAMES = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", ..., "Friday", "Saturday"];
Date.prototype.MONTHNAMES = ["January", "February", "March", "April", "May", "June", "July", ..., "August", "September", "October", "November", "December"];

Разница между этими двумя подходами в том, что они наследуются и доступны методам Date только при использовании ключевого слова this (этот метод будет использоваться на протяжении всей статьи).

Существует третий вариант – мы можем делать и то, и другое. Например:

Date.DAYNAMES = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", ..., "Friday", "Saturday"];
Date.prototype.DAYNAMES = Date.DAYNAMES;

(Поднимая тему статических атрибутов и методов, необходимо упомянуть, что представленные методы могут быть не статическими, но относящимися к объекту prototype. Потребуются небольшие изменения, чтобы преобразовать эти методы в статические.)

А вот возможность сделать ваш код интернациональным. Код DAYNAMES и MONTHNAMES может быть отделен от других методов, так что можно установить названия дней и месяцев на разных языках:

Date.prototype.DAYNAMES = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", ..., "Vendredi", "Samedi"];
Date.prototype.MONTHNAMES = ["Janvier", "Fevrier", "Mars", "Avril", "Mai", ..., "Juin", "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Decembre"];

С массивами на месте, четыре метода могут быть заданы следующим образом:

Date.prototype.getFullDay = function() {
  return this.DAYNAMES[this.getDay()];
};
Date.prototype.getDayAbbr = function() {
  return this.getFullDay().slice(0, 3);
};

Date.prototype.getFullMonth = function() {
  return this.MONTHNAMES[this.getMonth()];
};
Date.prototype.getMonthAbbr = function() {
  return this.getFullMonth().slice(0, 3);
};

А вот образец использования этих методов:

var example_date = new Date(2008, 1, 20);
alert("Day: " + example_date.getFullDay() +
  "\nDay abbr: " + example_date.getDayAbbr() +
  "\nMonth: " + example_date.getFullMonth() +
  "\nMonth Abbr: " + example_date.getMonthAbbr());

Alert покажет:
Day: Wednesday
Day abbr: Wed
Month: February
Month: Abbr Feb

Задание формата времени дня

Объект Date содержит 2 метода для получения строкового представления времени суток: toTimeString() и toLocaleTimeString(). Формат строки зависит от настроек клиента и может отличаться у разных пользователей. В общем, это все хорошо, но может не работать в вашем приложении. Следующие два метода возвращают определенный формат:
Первый возвращает время в формате “чч:мм:сс am/pm” с двумя цифрами в каждом числе.

Date.prototype.to12HourTimeString = function () {
  var h = thi  s.getHours();
  var m = "0" + this.getMinutes();
  var s = "0" + this.getSeconds();
  var ap = "am";

  if (h >= 12) {
      ap = "pm";

      if (h >= 13)
        h -= 12;
    } else if (h == 0)
      h = 12;
    }
  h = "0" + h;
  return h.slice(-2) + ":" +
           m.slice(-2) + ":" +
           s.slice(-2) + " " + ap;
};

Второй метод возвращает время в 24-часовом формате, также с двумя цифрами в каждом числе.

Date.prototype.to24HourTimeString = function () {
  var h = "0" + this.getHours();
  var m = "0" + this.getMinutes();
  var s = "0" + this.getSeconds();
  return h.slice(-2) + ":" + m.slice(-2) + ":" + s.slice(-2);
};

Наверное, в этом коде интересно только использование slice(). Чтобы сделать числа двузначными, к ним добавляется ведущий ноль, и затем slice() используется для захвата крайних справа 2 цифр. Если число меньше 10, включается дополнительный ведущий ноль. Эти методы используются вот так:

var dte = new Date(2008, 1, 20, 19, 30, 5);
alert(dte.to12HourTimeString() + "\n" + dte.to24HourTimeString());

Alert покажет:
07:30:05 pm
19:30:05

Получение количества дней в месяце

Бывает, что необходимо узнать количество дней в месяце. Для этого можно использовать массив с дополнительным кодом для Февраля, но есть способ проще. JavaScript переполнит даты, созданные с недопустимыми значениями. Например, если мы создадим дату 33 февраля 2008 как:

var d = new Date(2008, 1, 33);
alert(d);

Дата, созданная и отображенная в окне, – это 4 марта 2008 (2008 год – високосный).
Следовательно, мы можем сказать, что последний день месяца – и число дней в месяце – это «нулевой» день следующего месяца – один день до первого. Следующий месяц вычисляется как текущий месяц (date.getMonth()) плюс один. JavaScript возвратит Январь следующего месяца, если прибавить 1 к Декабрю, то есть года переводятся так же, как и месяцы. Последний день месяца вычисляется так:

Date.prototype.lastday = function() {
  var d = new Date(this.getFullYear(), this.getMonth() + 1, 0);
  return d.getDate();
};

Число дней в месяце любой даты находится следующим образом:

var d = new Date(2008, 1, 5);
alert(d.lastday());

Окно предупреждения покажет число дней в месяце: в этом примере – 29. (Второй аргумент, 1, в конструкторе Date это Февраль, Январь – 0.)

Поиск количества дней между двумя датами

Деловые проекты часто нуждаются в определении количества дней между двумя датами. Мы создадим метод getDaysBetween() – но сначала давайте добавим ещё один атрибут к прототипу конструктора даты, названный msPERDAY. Его значение – это число миллисекунд в 24 часах. Все что нам нужно – эта строка кода:

Date.prototype.msPERDAY = 1000 ∗ 60 ∗ 60 ∗ 24;

Другими словами, 1000 миллисекунд в секунде, 60 секунд в минуте, 60 минут в одном часе, 24 часа в сутках.

В большинстве случаев, определение количества дней между двумя датами исключает учет времени. Это требование мы будем использовать. Между 1 февраля и 10 февраля 9 дней, не обращая внимания на время – в одной дате может быть 01 00 часов, а в другой 23 00, но разница – всё равно 9 дней. Несмотря на это даты JavaScript включают время, так что необходимо корректирование:

Date.prototype.getDaysBetween = function(d) {
  d = d.copy();

  d.setHours(this.getHours(), this.getMinutes(), this.getSeconds(), ...
    this.getMilliseconds());

  var diff = d.getTime() - this.getTime();
  return (diff)/this.msPERDAY;
};

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

var today = new Date();
var birthday = new Date(2008, 9, 31);
var days = today.getDaysBetween(birthday);

if (days > 0)
  alert(days + " days 'til my birthday.");
else if (days < 0)
  alert(days + " days since my birthday.");
else
  alert("It's my birthday!!");

Если дата, используемая как аргумент позже, чем дата, вызывающая метод, то возвращается положительное значение. Отрицательное значение возвращается, если аргумент – более ранняя дата. Может возвращаться и абсолютное значение, но знание того, какая дата была раньше, может быть важным, как в примере.

Использование представлений данных как аргумента

Метод getDaysBetween(d), показанный выше, принимает объект Date в качестве своего аргумента, но может быть удобнее использовать другие типы данных для представления даты. Конструктор Date имеет четыре различных процедуры:

new Date(); // без аргумента, использует текущее время и дату
new Date("Feb 20, 2008 10:20:05"); // символьное представление даты
new Date(2008, 1, 20, 10, 20, 05); // числовое представление даты
new Date(milliseconds); // число миллисекунд

Любой из методов, которые мы создаем, использующий дату как аргумент, может быть преобразован, чтобы принимать любые аргументы, распознанные конструктором данных, с добавлением следующего кода:

Date.prototype.getDaysBetween = function(d) {
  var d2;

  // дополнительный код для свойств аргументов
  if (arguments.length == 0) {
    d2 = new Date():
  } else if (d instanceof Date) {
    d2 = new Date(d.getTime());
  } else if (typeof d == "string") {
    d2 = new Date(d);
  } else if (arguments.length >= 3) {
    var dte = [0, 0, 0, 0, 0, 0];
    for (var i = 0; i < arguments.length; i++) {
      dte  [i] = arguments[i];
    }
    d2 = new Date(dte[0], dte[1], dte[2], dte[3], dte[4], ...
      dte[5]);
  } else if (typeof d == "number") {
    d2 = new Date(d);
  } else {
    return null;
  }

  if (d2 == "Invalid Date")
    return null;
  // Конец дополнительного кода

  d2.setHours(this.getHours(), this.getMinutes(), ...
    this.getSeconds(), this.getMilliseconds());

  var diff = d2.getTime() - this.getTime();
  return (diff)/this.msPERDAY;
};

Если используемый аргумент не преобразуется в дату, конструктор создает экземпляр даты со значением “Invalid Date”. В этом случае возвращается ноль.
(Мы всегда будем считать, что аргумент – это дата, чтобы уберечь статью от путаницы.)

Добавление дней, недель, месяцев и лет к дате

Для изменения даты прибавлением (или вычитанием) числа к ней используются 4 метода – addDays(), addWeeks(), addMonths() и addYears(). Каждый метод берет числовой аргумент, означающий количество дней, месяцев или лет, которые нужно добавить как подходящие к методу. Код для этих методов следующий:

Date.prototype.addDays = function(d) {
  this.setDate( this.getDate() + d );
};

Date.prototype.addWeeks = function(w) {
  this.addDays(w ∗ 7);
};

Date.prototype.addMonths= function(m) {
  var d = this.getDate();
  this.setMonth(this.getMonth() + m);

  if (this.getDate() < d)
    this.setDate(0);
};

Date.prototype.addYears = function(y) {
  var m = this.getMonth();
  this.setFullYear(this.getFullYear() + y);

  if (m < this.getMonth()) {
    this.setDate(0);
  }
};

Первый метод, addDays(), использует тот же принцип, что и метод lastDay(). Метод getDate() объекта даты возвращает число дней в месяце (от 1 до 31). К нему прибавляется количество дополнительных дней, и затем метод setDate объекта Date устанавливает день месяца на новое значение. Когда число, используемое как дата превышает (или становится меньше чем) количество дней в месяце, JavaScript отсчитывает дни вперед(или назад) до правильной даты.
Метод addWeeks() преобразует недели в дни, а затем использует метод addDays() для изменения даты. Если, например, дата – Среда, то новая дата будет – Среда.

Методы addMonths() и addYears() работают также, как addDays(). Они используют методы объекта Date getMonth и setMonth() или getFullYear и setFullYear() соответствено. У этих методов есть корректировка для согласования неравных длин месяцев или лет.

Добавляя месяцы, нужно ожидать, что новая дата будет тем же днем месяца – если месяц прибавлен ко 2 января какого-либо года, то результат должен быть 2 февраля - но, если месяц добавлен к 31 января, то результат без корректировки это 3 марта( 2 марта если год – високосный). Для наших целей должен был получиться последний день Февраля, поэтому есть тест для проверки является ли день месяца, полученный в результате, меньше, чем исходная дата. Если получилось так, это показывает, что дата отодвинулась в месяц, следующий за тем, который нам нужен. Отладка использует тот же способ, что и метод lastDay(): дата устанавливается на нулевой день.

Метод addYears имеет похожие проблемы в високосные годы. Прибавляя год к 29 февраля, получим 1 марта, поэтому необходимо вернуться в 28.
Методы могут использоваться вот так:

var date = new Date(2008, 1, 1); // 1ое февраля 2008
alert(date.addDays(7));
alert(date.addWeeks(3));
alert(date.addMonths(2));
alert(date.addYears(-2));

Alert-ы покажут 8 февраля, 29 февраля, 29 апрель.

Добавление дней недели

В некоторых бизнес приложениях считаются только дни недели – может появиться проблема во время подсчета даты окончания проекта, а вы не хотите работать в выходные! Следующий метод добавляет количество дней недели, считающихся выходными, так что период между начальной и новой датами включает в себя требуемое число дней в неделе.

Date.prototype.addWeekDays = function(d) {
  var startDay = this.getDay();  //текущий день недели от 0 до 6
  var wkEnds = 0;  //число нужных выходных
  var partialWeek = d % 5;  //количество дней для неполной недели

  if (d < 0) {  //вычитание дней недели
    wkEnds = Math.ceil(d/5); //отрицательное количество выходных

    switch (startDay) {
    case 6:  //начинаем с субботы, на 1 выходной меньше
      if (partialWeek  0 && wkEnds < 0)
        wkEnds++;
      break;
    case 0:  //начальный день - воскресенье
      if (partialWeek  0)
        d++;  //уменьшаем добавленные дни
      else
        d—;  // увеличиваем добавленные дни
      break;
    default:
      if (partialWeek <= -startDay)
      wkEnds—;
    }
  }
  else if (d > 0) {  //adding weekdays
    wkEnds = Math.floor(d/5);
    var w = wkEnds;
    switch (startDay) {
    case 6:
      // Если начальный день – суббота и
      // неделя полная, нужно уменьшить дни на 1
      // неделя неполная, нужно увеличить дни на 1
      if (partialWeek 0)
        d--;
      else
        d++;
      break;
    case 0:
      //Sunday
      if (partialWeek 0 && wkEnds > 0)
        wkEnds—;
      break;
    default:
      if (5 – day < partialWeek)
        wkEnds++;
    }
  }

  d += wkEnds ∗ 2;
  this.addDays(d);
};

Метод addWeekDays() вычисляет количество выходных дней, которые будут нужны в диапазоне дат, и добавляет его к требуемым дням недели. Эта сумма прибавляется к дате, с помощью нашего метода addDays(). addWeekDays() всегда вычисляет дату с понедельника по пятницу включительно. Например, сейчас суббота и мы завершаем планирование проекта, который начинается в понедельник. Мы определили, что проект займет 50 дней и хотим вычислить дату завершения. Следующий код сделает это:

var today = new Date(2008, 1, 23);
var endDate = today.copy();
endDate.addWeekDays(50);
alert(endDate);
Alert покажет 2 мая 2008.
К несчастью, менеджеры решили, что проект должен быть перенесен, так что он закончится 31 октября. Они хотят знать, когда вам нужно начать.
var endDate = new Date(2008, 9, 31);
var startDate = endDate.copy();
startDate.addWeekDays(-50);
alert(startDate);

Alert покажет 22 августа 2008, последний день, когда проект можно начать, разумно ожидая закончить его в последний день октября.

Этот код не считает выходные или другие дни, когда фирма не работает. Для подсчета выходных мы можем добавить в addWeekDays() цикл, который повышает число требуемых дней в диапазоне от начальной даты до конечной на 1 в каждый выходной день. Вот пример функции:

function due_date(start_date, workDays) {
  var dueDate = new Date();
  var days = 0;
  var holidays = 0;

  do {
    dueDate.setYear(start_date.getFullYear());
    dueDate.setMonth(start_date.getMonth());
    dueDate.setDate(start_date.getDate());

    days = workDays + holidays;
    dueDate.addWeekDays(days);

    // Ваш собственный поиск.
    // Поиск по базе данных или массиву
    // выходных дней между  start_date и dueDate
    holidays = [query-results]

  } while (days != workDays + holidays);

  return dueDate;
}

(Функция due_date() не является средством объекта Date, так как она требует внешний источник данных, который может измениться.)
Функция due_date() предполагает, что существует источник данных (массив или база данных), содержащий даты всех выходных дней вашей компании, и что у вас есть возможность сделать запрос к этой таблице, возвращающий количество выходных дней, встретившихся между двумя датами.

Цикл начинается с установки dueDate на start_date. Он добавляет число выходных дней (с нулевым начальным значением) к рабочим дням и использует метод addWeekDays() для получения срока выполнения. Запрос получает количество выходных дней между начальной датой и сроком завершения( исключая те, что выпадают на субботу и воскресенье). Если количество выходных в сумме с начальным числом рабочих дней даёт количество дней, использующихся для вычисления значения конечной даты, то работа окончена. В противном случае, значение срока завершения сбрасывается, и цикл запускается ещё раз с новым количеством выходных.

Вычисление времени между двумя датами

Во многих деловых приложениях необходимо определить время между двумя датами в днях, месяцах, годах или днях недели. Мы уже создали метод для подсчета дней между двуся датами: getDaysBetween().

Вместе с addWeekDays() может работать getWeekDays(). Она вычисляет количество дней между двумя датами. Так же, как addWeekDays, этот метод не учитывает выходные дни при вычислении, но его можно включить в функцию, которая сделает это.

Date.prototype.getWeekDays = function(d) {

  var wkEnds = 0;
  var days = Math.abs(this.getDaysBetween(d));
  var startDay = 0, endDay = 0;

  if (days) {
    if (d < this) {
      startDay = d.getDay();
      endDay = this.getDay();
    } else {
      startDay = this.getDay();
      endDay = d.getDay();
    }
    wkEnds = Math.floor(days/7);

    if (startDay != 6 && startDay > endDay)
      wkEnds++;

    if (startDay != endDay && (startDay  6 || endDay  6) )
      days-;

    days -= (wkEnds ∗ 2);
  }
  return days;
};

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

var endDate = new Date(2007, 11, 5); // 5-е декабря 2007
var startDate = new Date(2008, 1, 20); // 20-е февраля 2008
alert(startDate.getWeekDays(endDate));

Alert покажет 55, число выходных дней между двумя датами.

Простой алгоритм, вычисляющий количество месяцев между двумя датами может выглядеть так:

var d1 = this.getFullYear() ∗ 12 + this.getMonth();
var d2 = d.getFullYear() ∗ 12 + d.getMonth();
return d2 - d1;

Данный алгоритм будет работать для дат, содержащих в себе несколько лет, когда разбиение на месяцы не так существенно.
Подсчет количества месяцев между двумя датами осложняется, так как бывают неполные месяцы для каждой из дат – очевидно, что между 1 января и 28 февраля больше 1 месяца. Дни, включаемые в часть месяца, зависят от хронологического порядка дат. Нам требуются только дни от даты до конца месяца или с 1-го дня месяца до даты. Нам также нужно возвратить отрицательное значение, если дата, используемая как аргумент, стоит раньше другой.

Date.prototype.getMonthsBetween = function(d) {
  var sDate, eDate;
  var d1 = this.getFullYear() ∗ 12 + this.getMonth();
  var d2 = d.getFullYear() ∗ 12 + d.getMonth();
  var sign;
  var months = 0;

  if (this == d) {
    months = 0;
  } else if (d1 == d2) { //тот же год и месяц
    months = (d.getDate() - this.getDate()) / this.lastday();
  } else {
    if (d1 <  d2) {
      sDate = this;
      eDate = d;
      sign = 1;
    } else {
      sDate = d;
      eDate = this;
      sign = -1;
    }

    var sAdj = sDate.lastday() - sDate.getDate();
    var eAdj = eDate.getDate();
    var adj = (sAdj + eAdj) / sDate.lastday() - 1;
    months = Math.abs(d2 - d1) + adj;
    months = (months ∗ sign)
  }
  return months;
};

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

Количество дней в начальном месяце используется как делитель, потому что сумма будет равна номеру дней в начальном месяце, если даты одинаковы.
После создания getMonthsBetween() можно легко написать метод, вычисляющий количество лет между двумя датами. Только необходимо разделить количество месяцев между ними на 12:

Date.prototype.getYearsBetween = function(d) {
  var months = this.getMonthsBetween(d);
  return months/12;
};

Метод особого назначения getAge() может быть написан, используя getYearsBetween() следующим образом:

Date.prototype.getAge = function() {
  var today = new Date();
  return this.getYearsBetween(today).toFixed(2);
};

А использовать его можно вот так:

var dateOfBirth = new Date(yob, mob, dob);
var age = dateOfBirth.getAge();

Последний метод, sameDayEachWeek(), немного отличается от остальных. Он возвращает массив с датами для определенного дня недели – от воскресенья до субботы – для каждой недели между двумя датами. Его можно использовать в приложении, которое требует планирование постоянных событий.

Date.prototype.sameDayEachWeek = function (day, date) {
  var aDays = new Array();
  var eDate, nextDate, adj;

  if (this > date) {
    eDate = this;
    nextDate = date.copy();
  } else {
    eDate = date;
    nextDate = this.copy();
  }

  adj = (day - nextDate.getDay() + 7) % 7;
  nextDate.setDate(nextDate.getDate() + adj);

  while (nextDate < eDate) {
    aDays[aDays.length] = nextDate.copy();
    nextDate.setDate(nextDate.getDate() + 7);
  }
  return aDays;
};

Метод использует в качестве аргументов значение дня недели (от 0 - для воскресенья, до 6 - для субботы) и дату.
Первая часть кода вычисляет, какая дата является ранней. В ней генерируется дата для увеличения, nextDate, которая является копией более ранней даты, как начальной точки, и ссылку к более поздней дате, как конечной точки. Новый объект Date используется для nextDate, так что он может быть изменен без влияния на начальную дату.
Затем вычисляется дата первого дня недели, который нам необходим. Перед добавлением необходимо произвести вычитание из переменной date, так как вычитание приводит строку в числовую форму (если просматривается переменная строкового типа), таким будет произведено сложение чисел, а не их конкатенация (т. е. объединение строк, а не арифметическая операция сложения).
После этого, в цикле выполняется nextDate для каждого из семи дней, до тех пор, пока дата не выйдет из диапазона. Каждый проход добавляет новый объект Date в возвращаемый массив.
Метод можно использовать следующим образом:

var enddate = new Date(2008, 0, 5); // 5ое января 2008
var date = new Date(2008, 1, 10); // 10ое февраля 2008

var listofdays = date.sameDayEachWeek(2, enddate); // 2 = вторник
alert("Tuedays in range are:\n\n" + listofdays.join("\n"));

Команда Alert выдаст следующее:
Tuedays in range are:

Tue Jan 08 2008 00:00:00 GMT-0600 (Central Standard Time)
Tue Jan 15 2008 00:00:00 GMT-0600 (Central Standard Time)
Tue Jan 22 2008 00:00:00 GMT-0600 (Central Standard Time)
Tue Jan 29 2008 00:00:00 GMT-0600 (Central Standard Time)
Tue Feb 05 2008 00:00:00 GMT-0600 (Central Standard Time)

Заключение

Многие из показанных методов могут быть использованы самостоятельно, без остальных. Главное помнить о том, что некоторые методы зависят от copy(), lastday(), getDaysBetween() и getMonthsBetween(), а некоторые – от трех созданных свойств. Таким образом, Вы сможете написать только нужный Вашему проекту код.

Также, методы могут быть добавлены в любой другой встроенный конструктор объектов – Array, String, Math, Object – используя такой же способ: присваивать их атрибуту prototype.

Надеемся, Вы найдете эту статью полезной в Вашей работе. Вы с легкостью сможете расширить встроенные объекты JavaScript с помощью вашего собственного кода и добавить Ваши собственные методы. Добавление методов через prototype делает Ваш код более понятным и добавляет ему преимущества в выполнении (благодаря способу обработки ссылок на объекты в JavaScript – сначала он ищет локальные объекты и затем проходит по цепочке прототипов, глобальное пространство – это последнее место, где JavaScript выполнит поиск).

Спонсор поста: Агентство «Web++» — создание и продвижение сайтов в Волгограде.

В этой статье речь пойдет о том, что такое строки в JavaScript и методах работы с ними.

Строки — это просто группы символов, такие как «JavaScript», «Hello world!», «http://www.quirksmode.org» или даже «14». Для программирования на JavaScript Вам необходимо знать, что такое строки и как с ними работать, т. к. использовать их придется очень часто. Многие вещи, такие как URL-страницы, значения CSS-параметров и элементов ввода форм — все является строками.

Сначала постараюсь объяснить основы работы со строками, затем — разницу между строками и числами в JavaScript. Даже если у Вас есть опыт программирования на другом языке, внимательно прочтите эту часть. В конце я расскажу о самых важных методах и свойствах строк в JavaScript.

Основы работы со строками

Давайте рассмотрим основы работы со строками в JavaScript.

Использование кавычек

Когда Вы объявляете строки в JavaScript или работаете с ними, всегда заключайте их в одинарные или двойные кавычки. Этим Вы объясняете браузеру, что он имеет дело со строкой. Не смешивайте использование кавычек в коде, если Вы начали строку с одинарной кавычки, а закончили двойной, JavaScript не поймет, что Вы имели в виду. Как правило, я использую одинарные кавычки для работы со строками, так как двойные кавычки я решил использовать для HTML, а одинарные — для JavaScript. Конечно, Вы можете делать все по-другому, но я советую вам придумать подобное правило для себя.

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

var a = 'Hello world!';
var b = 'I am a student.';

Сейчас мы объявили две переменные, «a» и «b», и присвоили им строковые значения. После этого мы можем с ними работать, но сначала решим одну проблему: допустим, я написал:

var b = 'I'm a student.';

Строка содержит в себе лишнюю одинарную кавычку, и JavaScript думает, что строка закончена и выводит сообщение об ошибке, не понимая, что следует дальше. Поэтому Вам нужно экранировать кавычку, сообщая браузеру, что её нужно рассматривать как символ, а не как окончание строки. Это осуществляется с помощью «обратного слеша» перед кавычкой:

var b = 'I\'m a student.';

Заметьте, что Вы можете вставлять в строку двойные кавычки без их экранирования. Так как Вы используете одинарные кавычки, как начало и конец строки,

var b = 'I\'m a "student".';

воспринимается без проблем. Двойные кавычки автоматически рассматриваются, как части строки, а не команды.

Встроенные функции

После определения строк можно начать их использование. Например, Вы можете соединить одну строку с другой, или взять из строки «b» подстроку, состоящую из второго—четвертого символов и вставить их в середину строки «a», или определить какой символ стоит двенадцатым в «a», сколько символов в «b», есть ли в них буква «q» и т. д.

Для этого Вы можете использовать встроенные функции, которые JavaScript предопределяет для каждой строки. Одна из них — «length» — возвращает длину строки. То есть если Вы хотите вычислить длину «Hello world!», напишите:

var c = 'Hello world!'.length;

Ранее мы присвоили эту строку переменной «а». Таким образом, Вы сделали переменную «a» строкой, поэтому к ней тоже применима функция «length», и следующая операция даст такой же результат:

var c = a.length;

Запомните, что Вы можете использовать «length» для любой строки — это встроенная функция. Вы можете вычислить длину любой строки, например: «location.href» или «document.title» или объявленной Вами.

Ниже я представлю список распространенных встроенных методов и свойств.

Строки и числа

В некоторых языках программирования от Вас требуется указывать, является ли переменная числом или строкой, перед тем, как делать с ней что-либо ещё. JavaScript проще относится к разнице между строками и числами. Фактически Вы даже можете складывать числа со строками:

var c = a + 12;

В некоторых языках программирования обработка такой строки приведет к ошибке. Всё же «a» — это строка, а «12» — число. Однако JavaScript пытается решить проблему, предполагая, что «12» — тоже строка. Таким образом «с» принимает значение «Hello world!12». Значит, если Вы используете «+» со строкой и числом, JavaScript пытается сделать из числа строку. Если же Вы применяете математические операции к строке, JavaScript пробует превратить её в число. При отсутствии возможности перевода строки в число (например, из-за наличия в ней букв), JavaScript возвращает NaN — «Not a Number — не является числом».

Наконец, в JavaScript нет разницы между целыми величинами и числами с плавающей точкой.

Число → строка

Для преобразования числа в строку введите:

var c = (16 * 24) / 49 + 12;
d = c.toString();

После этого Вы можете применять к «d» все строковые методы, а «c» все ещё содержит число.

Строка → число

Если Вы хотите преобразовать строку в число, сначала убедитесь, что она состоит только из символов 0—9. Для этого я просто умножаю строку на 1.

var c = '1234';
d = c * 1;

Так как умножение производится только с числами, JavaScript превращает строку в число, если это возможно. В противном случае, результат — NaN.

Заметим, если написать:

var c = '1234';
d = c + 0;

Результатом будет «12340», потому что JavaScript использует «+» для соединения строк, а не их сложения.

Строковые свойства и методы

Так что же мы можем делать со строками? Объединение — это особый случай, но все остальные команды (методы) могут использоваться с любой строкой с помощью конструкции:

имя_строки.метод();

Список встроенных методов JavaScript для работы со строками

• Конкатенация (+)
• indexOf
• lastIndexOf
• charAt
• length
• split
• substring
• substr
• toLowerCase и toUpperCase

Конкатенация — объединение строк

Во-первых, Вы можете объединить строки, сложив их вместе, вот так:

document.write(a + b);

в результате получится: «Hello world!I am a student.». Но, конечно же, Вы хотите, чтобы между предложениями был пробел. Для этого запишем код следующим образом:

document.write(a + ' ' + b);

Так мы соединим три строки: «а», «' '» (один пробел) и «b», в итоге получив: «Hello world! I am a student.»

Вы можете использовать даже числа или вычисления, например:

document.write (a + 3 * 3 + b);

Сейчас мы соединяем строку «а», затем результат выражения «3 * 3», рассматриваемый как строка, и «b», получая: «Hello world!9I am a student.»

При использовании сложения нужно быть внимательным. Команда

document.write (a + 3 + 3 + b);

соединяет 4 строки: «а», «3», «3» и «b», потому что «+» в данном случае означает «соединить строки», а не «сложить» и в результате: «Hello world!33I am a student.». Если Вы хотите сложить 3 и 3 перед созданием строки, используйте скобки.

document.write (a + (3 + 3) + b);

Данное выражение соединяет строку «а», результат выражения «3 + 3» и «b», в итоге: «Hello world!6I am a student.».

indexOf

Один из самых широко используемых встроенных методов это «indexOf». Каждый символ имеет свой индекс, содержащий номер его позиции в строке. Заметим, что индекс первого символа — 0, второго — 1 и т. д. Таким образом, индекс символа «w» в сроке «а» — 6.

Используя «indexOf» мы можем вывести индекс символа. Напишите «.indexOf(' ')» после названия строки и вставьте искомый символ между кавычками. Например:

var a = 'Hello world!';
document.write(a.indexOf('w'));

возвратит 6. Если символ встречается несколько раз, этот метод возвращает первое вхождение. То есть

document.write(a.indexOf('o'));

возвратит 4, потому что это индекс первой «o» в строке.

Вы также можете искать комбинацию символов. (Конечно, это тоже строка, но, чтобы избежать путаницы, я не буду называть её так). «indexOf» возвращает позицию первого символа комбинации. Например:

document.write(a.indexOf('o w'));

тоже возвратит 4, потому что это индекс «o».

Более того, возможен поиск символа после определенного индекса. Если Вы введете

document.write(a.indexOf('o', 5));

то получите индекс первой «o», следующей за символом с индексом 5 (это пробел), то есть результат будет — 7.

Если символ или комбинация не встречается в строке, «indexOf» возвратит «-1». Это, по сути, самое популярное применение «indexOf»: проверка существования определенной комбинации символов. Оно является ядром скрипта, определяющего браузер. Для определения IE Вы берете строку:

navigator.userAgent;

и проверяете, содержит ли она «MSIE»:

if(navigator.userAgent.indexOf('MSIE') != -1) {
//Какие-либо дествия с Internet Explorer
}

Если индекс «MSIE» — не «-1» (если «MSIE» встречается где-либо в строке), то текущий браузер — IE.

lastIndexOf

Также существует метод «lastIndexOf», который возвращает последнее вхождение символа или комбинации. Он действует противоположно «indexOf». Команда

var b = 'I am a student.';
document.write(b.lastIndexOf('t'));

возвратит 13, потому что это индекс последней «t» в строке.

charAt

Метод «charAt» возвращает символ, стоящий на указанной позиции. Например, когда Вы вводите

var b = 'I am a student.';
document.write(b.charAt(5));

в результате получается «a», так как это символ на шестой позиции (помните, что индекс первого символа начинается с 0).

length

Метод «length» возвращает длину строки.

var b = 'I am a student.';
document.write(b.length);

возвратит «15». Длина строки на 1 больше, чем индекс последнего символа.

split

«split» — это специальный метод, позволяющий разделить строку по определенным символам. Используется, когда результат необходимо заносить в массив, а не в простую переменную. Давайте разделим «b» по пробелам:

var b = 'I am a student.'
var temp = new Array();
temp = b.split(' ');

Теперь строка разбита на 4 подстроки, которые помещаются в массив «temp». Сами пробелы исчезли.

temp[0] = 'I';
temp[1] = 'am';
temp[2] = 'a';
temp[3] = 'student';

substring

Метод «substring» используется для выделения части строки. Синтаксис метода: «.substring(первый_индекс, последний_индекс)». Например:

var a = 'Hello world!';
document.write(a.substring(4, 8));

возвратит «o wo», от первой «o» (индекс 4) до второй (индекс 7). Заметьте, что «r» (индекс 8) не является частью подстроки.

Также можно написать:

var a = 'Hello world!';
document.write(a.substring(4));

Это даст целую подстроку «o world!», начиная от символа с индексом 4 и до конца строки.

substr

Также есть метод «substr», работающий немного по-другому. В качестве второго аргумента он использует не номер индекса, а количество символов. То есть

document.write(a.substr(4, 8));

возвращает 8 символов, начиная от символа с индексом 4 («o»), то есть в результате получаем: «o world!»

toLowerCase и toUpperCase

Наконец, 2 метода, которые иногда могут Вам пригодиться: «toLowerCase» переводит всю строку в нижний регистр, а «toUpperCase» — в верхний.

var b = 'I am a student.';
document.write(b.toUpperCase());

В результате получим «I AM A STUDENT.».

Спонсор поста: Агентство «Web++» — создание и раскрутка сайтов в Волгограде.