В браузерах, поддерживающих «Element Traversal», доступны новые методы:

• firstElementChild — первый дочерний элементы;
• lastElementChild — последний дочерний элементы;
• nextElementSibling — следующий элементы;
• previousElementSibling — предыдущий элементы;
• childElementCount — количество дочерних элементов.

Эти методы работают с узлами, у которых nodeType == 1, например, метод childElementCount показывает не сколько всего дочерних узлов, а количество дочерних элементов, т. е. узлов с nodeType == 1.

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

Для начала проверим, поддерживает ли браузер интерфейс «Element Traversal»?

var traversal = typeof document
                           .createElement('div')
                               .childElementCount != 'undefined';

В итоге переменная traversal будет иметь значение true или false, опираясь на которое мы будем выбирать, какой из способов перемещения по DOM-дереву использовать.

Следующая функция будет искать первый дочерний элемент:

var firstChild = traversal ? function(node) {
    // для новых браузеров достаточно
    // воспользоваться встроенным методом
    return node.firstElementChild;
} : function(node) {
    // для старых браузеров
    // находим первый дочерний узел
    node = node.firstChild;
    // ищем в цикле следующий узел,
    // пока не встретим элемент с nodeType == 1
    while(node && node.nodeType != 1) node = node.nextSibling;
    // возвращаем результат
    return node;
};

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

XHTML

<div id="test">
    text node
    <div>First</div>
    text node
    <div>Last</div>
    text node
</div>

JavaScript

var node = document.getElementById('test');
var text = firstChild(node).innerHTML;
alert(text); // → First

Аналогично будет выглядет функция lastChild:

var lastChild = traversal ? function(node) {
    return node.lastElementChild;
} : function(node) {
    node = node.lastChild;
    while(node && node.nodeType != 1) node = node.previousSibling;
    return node;
};

Используем:

text = lastChild(node).innerHTML;
alert(text); // → Last

Назовем функции поиска следующего и предыдущего элемента «next» и «previous» соответственно:

var next = traversal ? function(node) {
    return node.nextElementSibling;
} : function(node) {
    while(node = node.nextSibling) if(node.nodeType == 1) break;
    return node;
};
var previous = traversal ? function(node) {
    return node.previousElementSibling;
} : function(node) {
    while(node = node.previousSibling) if(node.nodeType == 1) break;
    return node;
};

И рассмотрим их работу на простеньком примере:

XHTML

<div>
    text node
    <div id="first">First</div>
    text node
    <div id="last">Last</div>
    text node
</div>

JavaScript

var node = document.getElementById('first');
var text = next(node).innerHTML;
alert(text); // → Last
node = document.getElementById('last');
text = previous(node).innerHTML;
alert(text); // → First

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

Проверим, поддерживает ли браузер метод children?

var children = typeof document
                          .createElement('div')
                              .children != 'undefined';

И напишем функцию поиска:

var child = children ? function(node) {
    return node.children;
} : function(node) {
    var list = node.childNodes,
    length = list.length,
    i = -1,
    array = [];
    while(++i < length)
        if(list[i].nodeType == 1)
            array.push(list[i]);
    return array;
};

Ну и конечно рассмотрим работу на примере:

XHTML

<div id="test">
    text node
    <div>First</div>
    text node
    <div>Last</div>
    text node
</div>

JavaScript

var node = document.getElementById('test');
var count = child(node).length;
alert(count); // → 2

Все эти методы, но в более функциональном виде, используются в новых версиях JavaScript фреймворка js-core. А так же, для поиска всех дочерних элементов по имени CSS-класса, атрибутам или просто по имени тега, когда это возможно, используется «Selectors API», что позволяет добиться хороших результатов в тестах на производительность.

Кстати, Microsoft как всегда «радует», в Internet Explorer 8 RC1 синтаксис методов querySelector и querySelectorAll ограничен версией CSS2

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

В рамках акции «Обмен постовыми»:

• Молодой блог об IT — kSM’s blog.

Возьмем готовые решения Sizzle, Peppy и Yass, и сделаем расширение для js-core, которое будет автоматически преобразовывать список элементов, выдаваемый этими движками, в объект для работы со списками узлов, предусмотренный в framework’е.

Sizzle

core.query = function(selector, context) {
    return new core.list(Sizzle(selector, context), false);
};
core.prototype.query = function(selector) {
    return new core.list(Sizzle(selector, this.node), false);
};

Peppy

core.query = function(selector, context) {
    return new core.list(peppy.query(selector, context), false);
};
core.prototype.query = function(selector) {
    return new core.list(peppy.query(selector, this.node), false);
};

Yass

core.query = function(selector, context) {
    return new core.list(yass(selector, context), false);
};
core.prototype.query = function(selector) {
    return new core.list(yass(selector, this.node), false);
};

Добавьте одно из этих расширений сразу после загрузки js-core и соответствующего движка выборки элементов по CSS-селекторам.

Рассмотрим, как это можно использовать. Возьмем следующий XHTML-код:

<ul id="list">
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
    <li>Fourth list item</li>
    <li>Fifth list item</li>
    <li>Sixth list item</li>
    <li>Seventh list item</li>
    <li>Eighth list item</li>
</ul>

Опишем CSS-класс:

.odd {
    background: #ffc;
}

Теперь, с помощью JavaScript, добавим класс odd всем нечетным элементам списка list:

$.query('#list > li:nth-child(odd)').each('addClass', 'odd');

// или
$('list').query('li:nth-child(odd)').each('addClass', 'odd');

Получим так называемую «зебру» из элементов списка:

<ul id="list">
    <li class="odd">First list item</li>
    <li>Second list item</li>
    <li class="odd">Third list item</li>
    <li>Fourth list item</li>
    <li class="odd">Fifth list item</li>
    <li>Sixth list item</li>
    <li class="odd">Seventh list item</li>
    <li>Eighth list item</li>
</ul>

В функции $.query(…) вторым параметром можно указать контекст поиска. Это бывает удобно, например, при поиске элементов ввода внутри форм или нахождении элементов в XML-данных, пришедших с сервера через AJAX.

// найти все чекбоксы в первой форме документа
$.query('input[type="checkbox"]', document.forms[0]);

В методе $('id'|node).query('selector'), в качестве контекста поиска, автоматически передается текущий элемент.

Скачать: пример, js-core.

В рамках акции «Обмен постовыми»:

• Записки микростокового иллюстратора — блог о том, как еще можно заработать в сети.

Теперь, пройдя множество исправлений, дополнений и модификаций, js-core вполне может использоваться в проектах любой сложности, обеспечивая достойный уровень производительности. В версии 2.7 структура фреймворка была полностью изменена, он не будет вызывать конфликты с другими скриптами, из-за внедрения пользовательских методов в прототипы встроенных объектов JavaScript. В глобальное пространство имен помещается только один объект с ссылками core и $ на него. Появилась возможность работы со списками узлов.

Содержание

• Функция $(…) — получение элемента по идентификатору, кэширование
• Цепочки — последовательный вызов методов
• Текущий элемент, контекст вызова
• Обработка событий
  • Добавление/удаление обработчиков событий
  • Работа с объектом-событие
    • События мыши
    • События клавиатуры
    • Стандартное действие браузера и всплывание событий
• Работа со списками элементов
• Методы js-core
  • Методы доступные через прототип функции core(…) или $(…)
  • Методы и атрибуты объекта core или $
  • Методы работы с таймером
  • Методы работы со списками узлов
  • Методы работы с объектом-событие
  • Методы работы c AJAX
• Создание расширений для js-core
• Что дальше?
• Скачать

Функция $(…) — получение элемента по идентификатору, кэширование

Допустим, у нас есть следующий XHTML-код:

<div id="container"></div>

Чтобы получить ссылку на узел <div&gt; с идентификатором container, в JavaScript предусмотрен метод getElementById(…) объекта document:

var node = document.getElementById('container');

Существует очень распространенная функция, сокращающая эту запись:

function $(id) {
    return document.getElementById(id);
}

Или более сложный вариант:

function $(arg) {
    return typeof arg == 'string' ? document.getElementById(arg) : arg;
}

В таком виде функция $(…) просто сокращает запись метода getElementById(…), предавая прямую ссылку на узел.

В js-core функции core(…) и $(…) эквивалентны, и возвращают новую копию объекта core, содержащую ссылку на указанный узел. Таким образом, через прототип объекта core для этого узла становится доступен набор методов, позволяющих производить манипуляции с DOM, добавлять обработчики событий и изменять стили элемента.

Выполним следующий код, с использованием фреймворка:

var obj = $('container')

// или
var obj = core('container')

// или
var obj = new $('container')

// или
var obj = new core('container')

Все эти варианты абсолютно равнозначны, только, последние 2 теоретически должны выполнится быстрее, т. к. первые просто рекурсивно вызывают функцию core в конструкторе new. В результате переменная obj будет ссылкой на объект следующего вида:

{node: HTMLDivElement}

Такой объект можно бы было получить, например, такми образом:

var obj = {node: document.getElementById('container')}

Но у созданного при помощи функции core(…) или $(…), входящих в состав js-core, объекта есть одно важное отличие — наличие специальных методов в прототипе, доступ к которым осуществляется так же, как и к любым другим методам объектов в JavaScript:

$('container').hide()

// или
$('container')['hide']()

Забегая вперед, скажу, что метод hide(…) просто скрывает указанный элемент.

Чтобы получить прямую ссылку на DOM-узел, достаточно написать:

var node = $('container').node

Так же в любой момент можно беспрепятственно воспользоваться этой ссылкой в уже созданном, функциями core(…) или $(…), объекте:

var obj = $('container')
var node = obj.node

Если отправить в функцию core(…) или $(…) не строку, содержащую имя идентификатора узла, а ссылку на узел, то она автоматически будет запомнена в том же атрибуте node:

var obj = $(document.getElementById('container'))
alert(obj.node.id) // выдаст сообщение "container"

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

$.cache = {}

Или выполнить функцию $.clear(…), передав в нее в качестве аргумента, ссылку на изменяемый узел:

$.clear(document.getElementById('container'))

Если вы уже используете функцию $(…), то js-core не заменит её, если она будет создана до подключения фреймворка. В этом случае можно использовать функцию core(…) или заключить код, использующий js-core в функцию-обертку:

(function($) {
    // Здесь $(…) — функция фреймворка "js-core"
})(core);

Цепочки — последовательный вызов методов

JavaScript позволяет реализовать последовательный вызов методов, называемый «цепочками вызовов». В js-core активно используется эта возможно, что позволяет в некоторых случаях обойтись без дополнительных переменных. Рассмотрим это на простом примере, добавим элементу с идентификатором container CSS-класс highlight и какой-то текст:

$('container').addClass('highlight').text('Пример')

// или
$('container').text('Пример').addClass('highlight')

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

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

<div id="container" class="highlight">Пример</div>

Цепочку можно продолжать, вызывая доступные методы.

Если все-таки необходимо запомнить ссылку на объект в переменную, то можно сделать это несколькими способами:

var obj = $('container')
obj.addClass('highlight').text('Пример')

// или
var obj = $('container').text('Пример').addClass('highlight')

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

Допустим, у нас есть следующий XHTML-код:

<div id="container">Пример</div>

Добавим элементу с идентификатором container CSS-класс highlight и сохраним в переменную содержащийся в нем текст:

var text = $('container').addClass('highlight').text()
alert(text) // выдаст сообщение "Пример"

Вызванный метод text(), без параметров, обрывает цепочку и возвращает innerText текущего узла.

Другой тип функций передает в цепочке новый объект, содержащий, например, ссылку на добавленный элемент:

var obj = $('container').addClass('highlight').append('span')

В результате в переменной obj будет находиться ссылка на HTMLSpanElement, а не HTMLDivElement, таким образом, можно продолжить цепочку:

var obj = $('container').addClass('highlight')
                        .append('span').text('Добавленный текст')

Переменная obj все так же будет содержать ссылку на HTMLSpanElement, так как метод text вернет предыдущий в цепочке объект, созданный функцией append(…).

XHTML-код приобретет следующий вид:

<div id="container" class="highlight">
    Пример
    <span>Добавленный текст</span>
</div>

Текущий элемент, контекст вызова

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

$('container')      // this → HTMLDivElement
.append('fieldset') // this → HTMLFieldsetElement
.append('p')        // this → HTMLParagraphElement
.prepend('span')    // this → HTMLSpanElement
.text('Пример')     // this → HTMLSpanElement

Получим XHTML-код:

<div id="container">
    <fieldset>
        <p>
            <span>Пример</span>
        </p>
    </fieldset>
</div>

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

$('container').exist(function() {
    // this → HTMLDivElement
}).append('fieldset').exist(function() {
    // this → HTMLFieldsetElement
}).append('p').exist(function() {
    // this → HTMLParagraphElement
}).prepend('span').exist(function() {
    // this → HTMLSpanElement
}).text('Пример') // this → HTMLSpanElement

Метод exist(…) проверяет наличие элемента и запускает callback-функйцию, которая вызывается в контексте текущего узла.

Обработка событий

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

Добавление/удаление обработчиков событий

В Internet Explorer, в отличие от других браузеров, выполняемые по событию функции, добавленные методом attachEvent(…), не получают в качестве первого аргумента объект-событие и не вызываются в контексте элемента, к событию которого «привязаны». Чтобы частично решить эту проблему в js-core все анонимные функции, добавляемые в обработчик события какого-либо элемента, автоматически вызываются в контексте этого элемента, а для получения объекта-событие предусмотрены специальные методы, о которых позже.

Добавим обработчик события click для узла с идентификатором container:

$('container').bind('click', function() {
    // this → HTMLDivElement
})

Для анонимной функции, переданной в метод bind(…), в Internet Explorer будет автоматически добавлена «обертка», вызывающая эту функцию в контексте узла с идентификатором container. Чтобы иметь возможность удалить функцию из обработчика события, т. е. выполнить метод removeEventListener(…)/detachEvent(…), для именованных функций такая обертка не добавляется, но предусмотрен специальный метод context(…), который можно использовать следующим образом:

function test() {
    // this → HTMLDivElement
}
var obj = $('container')
var func = $.context(test, obj.node)
obj.bind('click', func) // добавляем обработчик события
…
obj.unbind('click', func) // удаляем обработчик события

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

var func, obj = $('container');
obj.bind('click', (func = $.context(function() {
    // this → HTMLDivElement
}, obj.node))) // добавляем обработчик события
…
obj.unbind('click', func) // удаляем обработчик события

Работа с объектом-событие

Для работы с объектом-событие предусмотрен метод $.event(…), который возвращает, так же как и в случае с функцией $(…), специальную обертку, содержащую ссылку на этот объект, через прототип которой доступны методы для работы с событием.

Получить объект-событие можно несколькими способами:

$('container').bind('mousedown', function(eventObject) {
    eventObject = eventObject || window.event
    $.event(eventObject)
})

// или
$('container').bind('mousedown', function(eventObject) {
    var eventObject = arguments[0] || window.event
    $.event(eventObject)
})

// или
$('container').bind('mousedown', function(eventObject) {
    $.event(eventObject)
})

// или
$('container').bind('mousedown', function() {
    $.event(arguments[0])
})

Все эти варианты успешно сработают. Далее в примерах будем использовать последний вариант.

События мыши

$('container').bind('mousedown', function() {
    var eventObj = $.event(arguments[0]) // обертка для объекта-событие
    eventObj.object // ссылка на объект-событие
    eventObj.mouseButton() // выдаст "left", "middle" или "right"
    eventObj.mousePosition() // вернет объект {x: число, y: число}
    eventObj.mousePosition().x // координата курсора по оси OX
    eventObj.mousePosition().y // координата курсора по оси OY
    eventObj.target() // текущий элемент, при всплывании события
    this // ссылка на <div> c идентификатором "container"
})

События клавиатуры

$(document).bind('keydown', function() {
    $.event(arguments[0]).key() // код нажатой клавиши
 })

Стандартное действие браузера и всплывание событий

$(document.forms[0]).bind('submit', function() {
    var eventObj = $.event(arguments[0])
    eventObj.preventDefault() // предотвращает стандартное действие
    eventObj.stopPropagation() // останавливает "всплывание" события
    eventObj.stop() // выполняет 2 предыдущих метода
})

Для управления предотвращением стандартного действия браузера (preventDefualt/returnValue), методы bind(…) и unbind(…) могут принимать, в качестве 3-го параметра, значения true или false, а так же предусмотрен специальный метод useDefault(…):

// выполнять автоматически preventDefault
$(document.forms[0]).bind('submit', func, false)

// отменить автоматическое срабатывание preventDefault
$(document.forms[0]).useDefault('submit', true)

Работа со списками элементов

Еще одна функция-конструктор $.list(…) создает обертку для списка DOM-элементов (узлов с nodeType == 1) и предоставляет набор методов:

var list = $.list(document.getElementsByTagName('div'))

// или
var list = new $.list(document.getElementsByTagName('div'))

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

var list = $.list(document.body.childNodes)

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

var list = $.list(document.getElementsByTagName('*'), false)

Рассмотрим работу варианта с функцией-фильтром на конкретном примере, допустим есть следующий XHTML-код:

<ul id="list-items">
    <li>1st list item</li>
    <li>2nd list item</li>
    <li>3rd list item</li>
    <li>4th list item</li>
    <li>5th list item</li>
</ul>

Добавим CSS-класс highlight всем четным элементам <li> в списке <ul> c идентификатором list-items:

$.list($('list-items').node.childNodes, function(i) {
    return i % 2 == 0;
}).each(function() {
    $(this).addClass('highlight');
})

Существуют способы сделать это короче:

$.list($('list-items').node.childNodes}).each(function(i) {
    if(i % 2 == 0) $(this).addClass('highlight')
});

// или
$.list($('list-items').node.childNodes, function(i) {
    return i % 2 == 0;
}).each('addClass', 'highlight')

// или
$('list-items').child().filter(function(i) {
    return i % 2 == 0;
}).each('addClass', 'highlight')

// или
$('list-items').child().each(function(i) {
    if(i % 2 == 0) $(this).addClass('highlight')
})

Как видим, некоторые методы (child, filter и др.) возвращают экземпляр объекта $.list.

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

var items = $.list(document.body.childNodes).items

Остальные методы работы со списками смотрите в таблице ниже.

Методы js-core

Разобьем методы на группы по объектам, к которым они относятся.

Методы доступные через прототип функции core(…) или $(…)

$(document.body).append('h1').text('Пример');

Методы и атрибуты объекта core или $

Как бы странно это не звучало, но в JavaScript такое возможно, любая функция одновременно является объектом и может изменть свои атрибуты и методы. Использовать их можно следующим образом:

$.ready(func) // выполнить функцию по событию "DOMContentLoaded"
$.t('h1 h2 h3 h4 h5 h6') // получить все заголовки в документе
$.c('selected') // получить все элементы с классом "selected"

Подробнее обо всех методах объекта core или $ далее в таблице.

Методы работы с таймером

В js-core вводит специальный объект для более удобного использования встроенных методов setTimeout и setInterval. Получить этот объект можно при помощи функции конструктора $.timer(…) или core.timer(…):

// повторить выполнение функции 5 раз с задержкой 100 мс
$.timer(100, function() {…}).repeat(5)

// выполнять функцию с задержкой 50 мс
core.timer(50, function() {…}).start()

Подробнее, об остальных методах, в таблице ниже:

Методы работы со списками узлов

Все методы фреймворка для работы со списками узлов доступны через прототип функции $.list(…), которая может быть использована в качестве конструктора любым из представленных ниже способов:

var list = $.list(document.getElementsByTagName('div'))

// или
var list = new $.list(document.getElementsByTagName('div'))

// или
var list = core.list(document.getElementsByTagName('div'))

// или
var list = new core.list(document.getElementsByTagName('div'))

Некоторые функции фреймворка автоматически создают подобные списки, например:

var list = $.t('div');

В результате в переменной list будет ссылка на объект, содержащий список узлов, над которым можно произвонить действия, например, добавим всем найденным элементам CSS-класс highlight:

list.each('addClass', 'highlight');

Подробнее обо всех методах функции-конструктора $.list(…) далее в таблице:

Методы работы с объектом-событие

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

function(e) {
    $.event(e).preventDefault();
}

Подробнее, об остальных методах, в таблице ниже:

Методы работы с AJAX

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

На данный момент (версия модуля 0.2.5) доступно 4 метода, которые могут принимать следующие аргументы:

// объект с параметрами
var parametrs = {
    method: 'GET'|'POST',      // по умолчанию GET
    url: 'url-encoded-string', // по умолчанию location.href
    async: true|false,         // по умолчанию true
    user: 'string',            // по умолчанию null
    password: 'string',        // по умолчанию null
    params: {param: 'value'},  // по умолчанию null
    processData: true|false,   // по умолчанию false
    timeout: number,           // по умолчанию 0
    contentType: 'string',// по умолчанию application/x-www-form-urlencoded
    dataType: 'string',        // по умолчанию */*
    requestHeaders: {'name': 'content'}, // по умолчанию null
    protocol: 'string'         // по умолчанию http:
}
// callback-функции
function success(responseText [, xhr]) {...}
function error(responseText [, xhr]) {...}

Ни один из аргументов объекта parametrs не обязателен, как и callback-функции. Метод $(…).load(…) выполняет callback-функции в контексте текущего элемента, остальные — AJAX-объекта.

$('container').text('loading…').load(parametrs, success, error)

Не забывайте, что в JavaScript действует «правило одного источника», поэтому передачу данных можно производить только в переделах одного домена.

Создание расширений для js-core

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

core.prototype.newMethod = function() {
    // что-то делаем с this.node
    return this; // для обарзования цепочек
}

Добавим метод defaultValue(…), который служит, чтобы установить значение по умолчанию для элемента ввода:

core.prototype.defaultValue = function(str) {
    if(!this.node.value) this.node.value = str;
    return this.bind('focus', function() {
        if(this.value == str) this.value = '';
    }).bind('blur', function() {
        if(!core.trim(this.value)) this.value = str;
    });
};

// используем
$(HTMLInputElement).defaultValue('Найти');

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

Что дальше?

Я планирую поддерживать и развивать проект. За дальнейшими обновлениями следите на сайте www.js-core.ru. В скором времени там начнет появляться документация с примерами для каждого метода.

Дальнейшие планы по наращиванию функционала:

• Анимация (fadeIn, fadeOut, slideToggle), которую вы можете реализовать и сейчас, для этого есть набор необходимых методов (opacity, timer, hide, show и др.);
• Обработка форм, маскированный ввод;
• Расширение функциональности AJAX-модуля, внедрение глобальных AJAX-событий и очередей перезапускающихся запросов;
• Создание набора готовых элементов интерфейса;
• Подавление других фреймворков

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

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

Скачать

Скачать можно на странице проекта в сервисе Google Code или с сайта www.js-core.ru.

Разница между этими методами заключается лишь в количестве возвращаемых элементов — первый найденный или все найденные в документе. Кроме того, что они более универсальны, чем getElementById() и getElementByTagName(), наши 2 метода отличаются невероятной скоростью поиска, так как они используют преимущества тех же механизмов, которые использует браузер для идентификациии элементов стиля во время просмотра CSS страницы.

Если говорить о совместимости с браузерами, то querySelector() и querySelectorAll() поддерживаются в Firefox 3.1+, IE8+ (только в стандартном режиме IE8), и Safari 3.1+.

Метод querySelector()

Этот метод относится как к объектам «Document», так и к «Element». Это позволяет вам запрашивать либо всю цепочку элементов всего документа, либо какую-либо ее часть в поиске нужного вам элемента.

Он принимает в качестве аргумента параметра любой CSS-селектор (IE: "#mydiv img") и возвращает первый совпавший элемент (если их несколько) или null если нет совпадений. Например:

document.querySelector('#myheader') //возвращает элемент с ID="myheader"
document.querySelector('p.description') //возвращает элемент P с class="description"
document.querySelector('#content img:nth-of-type(1)') //возвращает первой изображение, содержащее "#content"
document.querySelector('#myform input[type="radio"]:checked') //выбирает отмеченный пункт из "#myform"
document.querySelector('#biography, #gallery') //вовращает или элемент "#biography" или "#gallery", в зависимости от того, какой из них был найден первым в списке

Обратите внимание на последний пример — вы можете передавать несколько CSS-селекторов, разделяя их запятой («,»). Запятая играет роль логического «или», которое позволяет querySelector() возвратить первый элемент из дерева документов, который совпадает с одним из введенных CSS-селекторов.

Небольшая демонстрация

Нижеописанный HTML-код создает 2 вложенных DIV с изменяющимся цветом фона внутреннего DIV при наведении курсора мыши на внешний DIV.

Пример показывает использование querySelector() одновременно в виде метода «Document» и «Element»:

<div id="outerdiv" style="padding:50px; width:100px; height:100px; border:1px solid black">
<div id="innerdiv" style="width:100%; height:100%; border:1px solid black; background:silver;"></div>
</div>

<script type="text/javascript">
if (document.querySelector){
  var outerdiv=document.querySelector('#outerdiv')
  outerdiv.onmouseover=function(){
    this.querySelector('#innerdiv').style.background="yellow"
  }
  outerdiv.onmouseout=function(){
    this.querySelector('#innerdiv').style.background="silver"
  }
}
</script>

Метод querySelectorAll()

Этот метод возвращает не только один элемент, совпадающий с CSS-селектором, но и все остальные, в виде «staticNodeList». «StaticNodeList» — это статичный набор элементов, на которые не влияют последующие изменения, происходящие в дереве документов, например удаление одного из элементов. Метод имеет аттрибут «length», позволяющий вам заносить каждый из похожих элементов в массив. Примеры:

document.querySelectorAll('.mygroup'); //вовзращает все элементы с class="mygroup";
document.querySelectorAll('option[selected="selected"]'); //возвращает каждый выбранный по умолчанию пункт меню
document.querySelectorAll('#mytable tr>td:nth-of-type(1)'); //возвращает первый элемент каждой строки таблицы "mytable";
document.querySelectorAll('#biography, #gallery'); //возвращает и элементы "#biography" и "#gallery"

Время для демострации!

Давайте используем querySelectorAll() для быстрого определния выставленных чекбоксов:

<form id="myform" onSubmit="return false">
  <b>Your hobbies:</b><input name="hobbies" type="checkbox" value="movies" />Movies <input name="hobbies" type="checkbox" value="sports" />Sports <input name="hobbies" type="checkbox" value="reading" />Reading <input name="hobbies" type="checkbox" value="sleeping" />Sleeping
  <br />
  <input type="submit" />
  </form>

<script type="text/javascript">
  if (document.querySelector){
    document.querySelector('#myform').onsubmit=function(){
      var checkedhobbies=this.querySelectorAll('input[name="hobbies"]:checked');
      for (var i=0; i<checkedhobbies.length; i++){
        alert(checkedhobbies[i].value);
      }
    return false
    }
  }
</script>

Открыть пример

Ограничения IE8

В IE8 есть несколько ограничений, которых нужно придерживаться используя querySelector() и querySelectorAll():

• Ваш документ должен соответствовать стандартному режиму IE8, чтобы эти 2 метода работали. Документ становится нестандартным, если он имеет не четкий тип, или настроен для работы со стандартом IE7 с помощью мета-тега: <meta http-equiv="X-UA-Compatible" content="IE=7" />.
• IE8 не поддерживает дополнительный параметр «NSResolver», используемый в querySelector() или querySelectorAll() для определения префиксов имен в XHTML документах.
• По соображениям безопасности, IE8 не будет возвращать элементы, полученные с использованием CSS-селекторов «:visited» или «:link». Это сделано для того, чтобы веб-мастера не могли определить ссылки на страницы, посещенные пользователем.

Так как я пока сомневаюсь, стоит ли мне писать подобный модуль для «js-core», потому что считаю, что вполне достаточно стандартных методов DOM для выбора нужных узлов, но всё-таки иногда бывают случаи, когда использование синтаксиса CSS-селекторов для этих целей очень удобно, я решил попробовать совместить мой фреймворк и библиотеку «Peppy». Как оказалось, все очень просто.

Никаких изменений в файле «peppy.js» делать не нужно, просто подключите его к проекту после «js-core-2.5.4.js». Затем, в файл, где у вас будет код проекта или расширения для «js-core», добавьте несколько строк:

_$.prototype.query = function(selectorGroups, includeRoot, recursed, flat) {
  return peppy.query(selectorGroups, this.node, includeRoot, recursed, flat);
};

$.query = peppy.query;

Все готово, теперь вы можете использовать все прелести CSS3-селекторов, предоставляемые «Peppy», совместно с фунционалом «js-core». Функция «query» возвращает список найденных элементов.

var list1 = $('id'|node).query('selector' [, …]);
var list2 = $.query('selector' [, …]);

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

<form id="my-form" action="">
  <fieldset>
    <label for="given-name">Given name: <input type="text" id="given-name" /></label>
    <label for="family-name">Family name: <input type="text" id="family-name" /></label>
    <label for="male">Male:</label>
    <ul id="male">
      <li><label for="man"><input type="radio" id="man" name="male" /> man</label></li>
      <li><label for="woman"><input type="radio" id="woman" name="male" /> woman</label></li>
    </ul>
    <input type="submit" value="Отправить" />
  </fieldset>
</form>

Теперь, чтобы получить все <input type="text" /> внутри «#my-form», достаточно написать:

var inputs = $('my-form').query('input:text');
// или
var inputs = $('my-form').query('input[type="text"]');

В этом случае в функцию «peppy.query» автоматически отправляется параметр «root» — ссылка на узел с идентификатором «my-form».

Метод «$.query(…)» будет в точности соответствовать «peppy.query(…)».

var labels = $.query('label[for="man"]', '#my-form');

Вот и всё, как видим ничего сложного, все просто и удобно

В этой статье я расскажу, как использовать ключевое слово 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++» — продвижение и создание сайтов в Волгограде.

Мы знаем, что тег <embed>, который так часто используется для внедрения swf-файлов в HTML-страницы отсутствует в популярной на данный момент спецификации «XHTML 1.0 Strict», что вызывает ошибки во время прохождения тестов W3C на соответствие стандартам при использовании этого тега.

Современные браузеры поддерживают универсальный контейнер <object>, с помощью которого можно легко вставить Flash-файл на сайт, указав атрибуты «data» (ссылку на файл) и «type» (тип контента), но «Internet Explorer» работает с <object> по своему, он не воспринимает ссылку на swf-файл, указанную в атрибуте «data», а требует добавления дочернего тега <param> c атрибутами name="movie" и value="ссылка-на-swf-файл". На этом проблемы не заканчиваются. Для «Internet Explorer» в теге <object> необходимо указать «classid» ActiveX-элемента, но «FireFox» почему-то блокирует такой контейнер.

Получается, что для «FireFox» и «Internet Explorer» нужно выдать совершенно разный XHTML-код. Что же делать? Очевидный вариант — использовать возможности JavaScript для динамического создания нужных узлов. Существует готовое решение «SWFObject» — это огромный скрипт, позволяющий внедрять «Flash» в веб-страницы, но его размер мне кажется не приемлимым. Версия 2.1 занимает 9,5кб в минифицированном виде, мне кажется, что для решения столь узкоспециализированной задачи это слишком много. Хотя конечно «SWFObject» предоставляет богатый функционал для внедрения «Flash».

Немного поэкспериментировав, я нашел 2 самых простых варианта XHTML-кода:

Для Internet Explorer:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="" height="">
<PARAM name="movie" value="url" />
</OBJECT>

Для остальных браузеров:

<object type="application/x-shockwave-flash" data="url" width="" height=""></object>

Этого кода достаточно, чтобы мы увидели работающую Flash’ку на сайте. Теперь напишем скрипт, который будет динамически генерировать данные DOM-узлы с необходимыми атрибутами, в зависимости от используемого браузера. А так же добавим возможность указать свои параметры, такие как «flashvars», «quality», «wmode» и другие.

function insertFlash(node, url, width, height, params) {
  var object, param, key;
  function newParam(name, value) {
    if(0 /*@cc_on + 1 @*/) return ['<PARAM name="', name, '" value="', value, '" />'].join('');
    else {
      param = document.createElement('param');
      param.name = name;
      param.value = value;
      return param;
    }
  }
  if(0 /*@cc_on + 1 @*/) {
    object = ['<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="', width, '" height="', height, '"><PARAM name="movie" value="', url, '" />'];
    if(params) for(key in params) if(params.hasOwnProperty(key)) object.push(newParam(key, params[key]));
    object.push('</OBJECT>');
    node.innerHTML = object.join('');
  }
  else {
    object = document.createElement('object');
    object.type = 'application/x-shockwave-flash';
    object.data = url;
    object.width = width;
    object.height = height;
    if(params) for(key in params) if(params.hasOwnProperty(key)) object.appendChild(newParam(key, params[key]));
    while(node.firstChild) node.removeChild(node.firstChild);
    node.appendChild(object);
  }
}

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

// Пример
window.onload = function() {
  var logo = document.getElementById('logotype');
  var url = '../flash/logo.swf';
  var width = 320;
  var height = 240;
  var parametrs = {
    wmode: 'transparent',
    quality: 'high'
  };
  insertFlash(logo, url, width, height, parametrs);
};

Тестировал в FireFox 2.0.0.13/3.0.3, Opera 9.27/9.52/9.60b, Safari 3.1 (win), Google Chrome 0.2 и Internet Explorer 5.5/6/8b2.

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

В дополнение приведу пример добавления своих методов для работы с DOM-узлами в моем JavaScript framework’е «js-core». Добавим метод «flash», который выполняет аналогичные вышеприведенному скрипту действия, но написан с использованием функций framework’а.

_$.prototype.extend({
  flash: function(url, width, height, param) {
    if(core.ie) {
      var obj = ['<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="', width, '" height="', height, '"><PARAM name="movie" value="', url, '" />'];
      if(param) $.foreach(param, function(name, value) { obj = obj.concat(['<PARAM name="', name, '" value="', value, '" />']); });
      obj.push('</OBJECT>');
      this.html(obj.join(''));
    }
    else ({}).extend(param).each(function(obj) { obj.append('param').attr({name: this, value: param[this]}); }, [this.empty().empty().append('object').attr({type: 'application/x-shockwave-flash', data: url, width: width, height: height})]);
    return this;
  }
});

Используем так:

$('logotype').flash('../flash/logo.swf', 320, 240, {wmode: 'transparent'});

Надеюсь теперь у Вас не возникнет проблем с внедрением «Flash» в свои веб-проекты.

Полезно почитать

В начале статьи говорилось о «SWFObject», как его использовать можно прочесть на русском языке в статье «Внедрение Flash с помощью SWFObject». О том, что можно ставить активные ссылки не только для e-mail, читаем в заметке «Ссылки на Skype и ICQ». Примите участие в обсуждении вопроса: «Нужна ли Большая Рыжая Кнопка RSS на сайте?».

Обычно встречаются 2 ситуации неправильно организованного алгоритма обработки веб-форм:

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

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

Почему же не стоит пытаться реализовать полноценный шаблон MVC на JavaScript? Потому что в большинстве случаев работа с объектом требует обновления внешнего вида, а межкомпонентные связи «View» и «Model» добавляют много лишнего, ничем не оправданного кода, который к тому же снижает производительность.

Controller пусть остается отдельно, а Model от View отделять не надо. Особенности Javascript/DOM/CSS позволяют успешно реализовывать аспекты Model средствами View

javascript.ru

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

Обработка форм

Итак, в начале статьи говорилось, что мы будем рассматривать модель обработчика элемента веб-интерфейса на примере HTML-форм.

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

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

function $(id) {
  return document.getElementById(id);
}

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

Воспользуемся функцией-конструктором, для создания объекта — обработчика формы:

function Form(id) {
  this.form = $(id);
}

Функция «Form» создает объект, с атрибутом «form», содержащим ссылку на HTML-форму, полученную по идентификатору. Для чего функция, если можно сразу записать объект, спросите Вы? Для того, чтобы было возможно использовать «prototype».

Добавим в «prototype» функции «Form» набор методов, которые будут использоваться в каждой форме нашего проекта:

Form.prototype = {

  // функция init принимает 3 входных параметра;
  // submit - функция, срабатывющая по событию формы onsubmit;
  // success - функция вызываемая в результате
  // успешной обработки формы;
  // error - функция вызываемая при ошибке.
  init: function(submit, success, error) {

    // добавляем принятые функции, как методы текущего объекта
    this.submit = submit;
    this.success = success;
    this.error = error;

    // создаем атрибут, отвечающий за состояние формы
    this.enabled = true; // включена

    // создаем функцию, которая будет вызвана
    // по событию формы onsubmit
    var _this = this, listener = function() {

      // функция process находится в прототипе функции Form
      // и служит для выполнения дополнительных операций
      // при вызове переданной пользователем функции submit
      _this.process();

      // предотвращаем стандартное действие отправки данных
      // формы на сервер по событию onsubmit
      var ev = arguments[0] || window.event;
      ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
    };

    // добавляем созданный выше обработчик listener
    // к событию формы onsubmit
    // для нормальных браузеров
    if(this.form.addEventListener)
      this.form.addEventListener('submit', listener, false);
    // для IE
    //@cc_on this.form.attachEvent('onsubmit', listener);
  },

  // функция process выполняет дополнительные действия
  // при вызове указанной пользователем функции submit
  process: function() {
    if(this.enabled) { // если форма включена
      this.enabled = false; // отключаем форму
      this.submit(); // вызываем функцию submit
    }
  },

  // функция message управляет отображением сообщений
  // об ошибках и удачной отправке данных
  message: function(text) {
    // здесь должен находиться код, отвечающий
    // за способ отображения сообщений форм
    // конкретного проекта
    alert(text);
  }
};

Таким образом, мы создали конструктор объекта — обработчик формы, в списке методов которого есть 3 функции:

1. «init» — функция, с которой будет начинаться работа с каждой формой. Она расширяет каждый новый объект, функциями, указанными программистом. Создает атрибут «enabled», отвечающий за состояние формы (влючена/выключена), для предотвращения повторной отправки данных, а так же отключает стандартное поведение формы по событию «onsubmit».
2. «process» — выполняет дополнительные операции, присущие всем формам конкретного проекта, перед запуском указанной программистом функции «submit».
3. «message» — управляет отображением информации об ошибках и успешной отправке. Должна быть тесно связана с версткой и оформлением форм в рамках конкретного проекта.

Как же теперь все это использовать? Да очень просто, а главное удобно:

// создаем новую копию объекта Form
// для HTML-формы с идентификатором "my-form"
var myForm = new Form('my-form');

// вызываем метод init и передаем ему 3 функции
myForm.init(

  // submit
  function() {
    // здесь должен находится код, отвечающий
    // за обработку конкретной формы, например,
    // здесь мы проверяем, не пусты ли поля ввода
    // с идентифкаторами "log" и "pwd"?
    $('log').value && $('pwd').value ? this.success() : this.error();
  },

  // success
  function() {
    // показываем пользователю сообщение об
    // успешной передаче данных
    this.message('Успешно');
  },

  // error
  function() {
    // показываем сообщение об ошибке
    this.message('Ошибка');
    // включаем форму для того,
    // чтобы пользователь имел возможность
    // повторить попытку снова
    this.enabled = true;
  }
);

Функция «submit» должна содержать код, проверяющий правильность ввода данных, выполняющий отправку данных формы на сервер через AJAX и вызывающий функции успешного выполнения операции (success) или ошибки (error) отправки или некорректного ввода данных пользователем.

В некоторых проектах функции «success» и «error» можно разместить в «prototype» функции-конструктора «Form», если способ отображения сообщений совершенно ничем не будет отличаться во всех формах проекта.

Чтобы добавить что-то еще, не предусмотренное функционалом метода «init», но необходимое для работы конкретной формы, можно использовать созданную ссылку на новую копию объекта «Form», например:

myForm.form.getElementsByTagName('input')[0].onfocus = function() {
  // какой-то код…
};

Вывод

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

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

Полезно почитать

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

• небольшой размер (около 520 строк кода);
• работает во всех актуальных на данный момент браузерах;
• поддерживает «DOMContentLoaded» и кэширование для «getElementById»;
• обеспечивает работу с AJAX;
• легок в изучении.

На данный момент подробная документация отсутствует, но в скором времени она будет размещена на страницах нашего блога, в рубрике «js-core».

Скачать последнюю версию «js-core».

Быстрый способ преобразования «DOMNodeList» в «Array»

Итак, чем нас не устраивает «DOMNodeList»? Объект такого типа хоть и представляет из себя нумерованный массив, но не имеет методов, присущих объекту «Array». Например, в полученную коллекцию DOM-элементов мы хотим добавить еще несколько узлов, но удобного метода «push» у «DOMNodeList» нет, потому что это не «Array».

var list = document.body.childNodes;
alert(typeof list.push);

В результате выполнения этого кода, будет выведено сообщение «undefined». Преобразовать «list» в массив можно простым перебором элементов.

var list = document.body.childNodes,
length = list.length, array = [], i;
for(i = 0; i < length; array.push(list[i++]));
alert(typeof array.push);

Теперь выводится сообщение «function», мы успешно преобразовали «DOMNodeList» в «Array». Казалось бы, если нам потребуется такое преобразование выполнять в коде несколько раз, запишем все это в функцию и будем пользоваться, но есть еще более удобный и короткий способ. В JavaScript объект «Array» имеет метод «slice», который используется для выделения части массива. Так как элементы структуры «DOMNodeList» тоже представляют собой нумерованный список, то метод «slice» успешно преобразует «DOMNodeList» в «Array».

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

var list = document.body.childNodes, array = [];
array = array.slice.call(list);
alert(typeof array.push);

Снова «alert(typeof array.push);» выдает сообщение «function». Теперь запишем преобразование в самом кратком виде:

var array = [].slice.call(document.body.childNodes);

В итоге даже не нужно будет создавать отдельной функции, преобразующей «DOMNodeList» в «Array», итак все коротко и красиво.

Конструкция «for(…in…)» работает не только с ассоциативными массивами

Многие программисты, пришедшие в JavaScript из PHP, очень любят использовать везде ассоциативные массивы (хэши) и аналог «foreach», представленный в JavaScript конструкцией «for(…in…)», даже там, где это совершенно не нужно. Конструкция «for(…in…)» работает с любым объектом, в том числе и с «Array».

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

var key, list = {
	x: 'xxx',
	y: 'yyy',
	z: 'zzz'
}
for(key in list) alert(key);

Ключи «x», «y» и «z» вообще нигде не участвуют в коде. Давайте перепишем код с использованием «Array».

var key, list = ['xxx', 'yyy', 'zzz'];
for(key in list) alert(key);

Запись стала немного короче, за счет удаления ключей ассоциативного массива и разделителя «:» (двоеточие). Таким образом, можно перебрать еще и все символы в строке. Главное не забывайте, что если в «prototype» этого объекта находятся пользовательские методы, то переменная «key» будет получать ссылки и на них тоже. Чтобы этого избежать, необходимо ввести проверку на принадлежность метода/атрибута текущему объекту.

var key, list = ['xxx', 'yyy', 'zzz'];
for(key in list) if(list.hasOwnProperty(key)) alert(key);

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

var i, list = ['xxx', 'yyy', 'zzz'], length = list.length;
for(i = 0; i < length; alert(list[i++]));

В таком виде в цикле всегда перебираются только нужные нам элементы. Использование «for(…in…)» не только для ассоциативных массивов в некоторых случаях помогает сократить код, но нужно быть предельно внимательным, используя эту конструкцию. В общем, забудьте этот пример, зря я его, наверное, написал

Сокращаем и упорядочиваем названия переменных и функций

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

function newElement(tag) {
  return document.createElement(tag);
}

function newText(str) {
  return document.createTextNode(str);
}

function getElement(id) {
  return document.getElementById(id);
}

function getElements(tag) {
  return document.getElementsByTagName(tag);
}

function addEvent(obj, type, listener) {
  if(obj.addEventListener)
    obj.addEventListener(type, listener, false);
  else if(obj.attachEvent)
    obj.attachEvent('on' + type, listener);
}

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

var dom = {
  new: {
    tag: function(tag) {
      return document.createElement(tag);
    },
    text: function(str) {
      return document.createTextNode(str);
    }
  },
  get: {
    id: function(id) {
      return document.getElementById(id);
    },
    tag: function(tag) {
      return document.getElementsByTagName(tag);
    }
  },
  event: {
    add: function(obj, type, listener) {
      if(obj.addEventListener)
        obj.addEventListener(type, listener, false);
      else if(obj.attachEvent)
        obj.attachEvent('on' + type, listener);
    }
  }
}

Кода стало немного больше, но теперь внутри объекта «dom» мы можем использовать любые короткие и понятные названия.

// было
var list = getElements('div');
// стало
var list = dom.get.tag('div');

// было
var node = newElement('span');
// стало
var node = dom.new.tag('span');

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

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

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

Всегда ли нужны «true» и «false»?

В условных конструкциях языка JavaScript могут использоваться не только значения «true» и «false». В качестве ложного значения могут приниматься: «0», «undefined», «null». За истинное значение может использоваться, например, факт наличия объекта или любое число, отличное от нуля… Поэтому не усложняйте условные конструкции дополнительными логическими выражениями.

if(typeof document.getElementById('test') != 'undefined')
  alert('exist');
else alert('not find');
// или
if(!!document.getElementById('test')) alert('exist');
else alert('not find');

// тоже самое
if(document.getElementById('test')) alert('exist');
else alert('not find');
// или
alert(document.getElementById('test') ? 'exist' : 'not find');

Или вот еще яркий пример, при определении длины массивов и строк:

var array = ['a', 'b', 'c'];

if(array.length != 0) {
  // что-то делаем c array
}
// или
if(array.length > 0) {
  // что-то делаем c array
}

//тоже самое
if(array.length) {
  // что-то делаем c array
}

«copy-paste» для ленивых

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

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

Используем сокращенную форму записи создания объектов типа «Object» и «Array»

// Создаем Object:
var obj = new Object();
// сокращенная запись:
var obj = {};

// Создаем Array:
var obj = new Array();
// сокращенная запись:
var obj = [];

Используем возможности логических операции JavaScript по-максимуму

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

// длинная запись
function $tag(tag, node) {
  var list = [];
  if(node) {
    list = node.getElementsByTagName(tag);
  }
  else {
    list = document.getElementsByTagName(tag);
  }
  return list;
}

// запись короче
function $tag(tag, node) {
  if(!node) node = document;
  return node.getElementsByTagName(tag);
}

// еще короче
function $tag(tag, node) {
  return (node || document).getElementsByTagName(tag);
}

Вариант с «логическим сложением» не единственный, внимательно прочтите раздел «Логические выражения» в Вашей книге по JavaScript и особое внимание уделите тому, что является результатом выполнения логического выражения, т. к. в JavaScript они могут возвращать не только «true» или «false».

В операциях присваивания очень удобно использовать «тернарный оператор»:

var a;
if(b < c) a = b;
else a = c;

//тоже самое
var a = b < c ? b : c;

Используем «Object» вместо «switch»

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

function showMessage(type) {
  var msg;
  switch(type) {
    case 'error': msg = 'Error!'; break;
    case 'warning': msg = 'Warning!'; break;
    case 'notify': msg = 'All ready!'; break;
    case 'confirm': msg = 'Are you ready?'; break;
    default: msg = 'Nothing...';
  }
  alert(msg);
}

showMessage('warning');

Меня сильно раздражает в этой записи необходимость постоянно повторять «case … break;». Давайте перепишем этот код, используя «Object»:

var messages = {
  error: 'Error!',
  warning: 'Warning!',
  notify: 'All ready!',
  confirm: 'Are you ready?',
  show: function(type) {
    alert(this[type] || 'Nothing...');
  }
};

messages.show('notify');

Как видим, код немного сократился, а самое главное исчезли все эти «case … break;» и инициализация переменной «msg». А если в проекте бы было 100 типов сообщений, при использовании первого способа пришлось бы 100 раз написать «case … break;»…

Самая короткая запись кода только для IE

Чтобы выполнить код только для IE совсем не обязательно делать громоздкие условия, с поиском подстроки «MSIE» в строке «navigator.userAgent» или проверять наличие «window.ActiveXObject».

if(navigator.userAgent.search('MSIE') != -1) {
	alert('This is Internet Explorer!');
}

Достаточно всего лишь заключить этот код в специальные комментарии (Conditional Compilation), которые понимает только IE:

//@cc_on	alert('This is Internet Explorer!');

Подробнее про «Conditional Compilation» можно прочитать в моей статье «<abbr> и <q> в Internet Explorer».

Используем правила обращения к методам и атрибутам объекта

Для работы с атрибутами узла DOM можно использовать стандартные правила обращения к методам и атрибутам объекта JavaScript:

node.setAttribute('title', 'Hello!');
// тоже самое
node.title = 'Hello!';
// или
node['title'] = 'Hello!';

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

Продолжение будет…

Итак, добавим поддержку <abbr>, а точнее его эмуляцию, для IE ниже 7-й версии. Для этого заменим <abbr></abbr> на <span class="abbr"></span>:

function abbr() {
  var node = document.getElementsByTagName('body')[0];
  node.innerHTML = node.innerHTML
  .replace(/<ABBR/g, '<SPAN class="abbr"')
  .replace(/<\/ABBR>/g, '</SPAN>');
}

Почему используется «innerHTML», а не «getElementsByTagName('abbr')»? Потому что IE не воспринимает <abbr> как тег, и «getElementsByTagName('abbr')» вернет «пустой» массив. Еще одна особенность IE (и Opera) — имена тегов, в нашем случае, необходимо писать заглавными буквами: .replace(/<\/ABBR>/g, '</SPAN>'), а не .replace(/<\/abbr>/, '</span>').

Мы заменили все <abbr> на <span class="abbr"> тем самым добавили поддержку отображения текста, записанного в атрибут «title», во «всплывающей» подсказке.

Пример: XHTML

Теперь оформим <span class="abbr"> так же, как и <abbr> в CSS:

abbr, span.abbr {
/* стили для <abbr> */
} 

Добавим распознавание IE и его версии, чтобы не выполнять замену для нормальных браузеров и ненорм IE версии 7 и выше:

var MSIE = 0/*@cc_on+@_jscript_version*10%10@*/;
function abbr() {
  if(MSIE && MSIE < 7) {
    var node = document.getElementsByTagName('body')[0];
    node.innerHTML = node.innerHTML
    .replace(/<ABBR/g, '<SPAN class="abbr"')
    .replace(/<\/ABBR>/g, '</SPAN>');
  }
}

Переменная «MSIE» равна 0 если используется любой браузер, кроме IE, или содержит номер версии «JScript», поддерживаемый IE:

• 1 — «JScript» версии 5.1 в IE5.0
• 5 — «JScript» версии 5.5 в IE5.5
• 6 — «JScript» версии 5.6 в IE6.0
• 7 — «JScript» версии 5.7 в IE 7.0 и 8.0b1

Таким образом, мы еще и отсекаем IE4, т. к. результатом выполнения выражения «0 + @_jscript_version * 10 % 10» будет 0.

Что же за конструкция «/*@cc_on … @*/» и переменная «@_jscript_version»? Первое — это «Conditional Compilation» — условное выполнение в «JScript». Это аналог «условных комментариев» (Conditional Comments), которые воспринимает только IE, второе — зарезервированная переменная, в которой хранится номер версии «JScript».

Эта пляска с собачками называется «условное выполнение» (Conditional Compilation) и формально вообще не является JavaScript'ом, это JScript. Если я не ошибаюсь, только его IE и понимает, а официальный JavaScript работает только благодаря довольно широкой совместимости этих языков.

Вадим Макеев

Браузеры, поддерживающие «JavaScript», просто проигнорируют выражение внутри «/*@cc_on … @*/», посчитав его за обычный комментарий вида «/* … */», и переменная «MSIE» останется равной 0.

Получается, что выражение «MSIE && MSIE < 7» будет равно «true» в случае если используется IE5.0, 5.5 или 6.0, что собственно нам и требовалось.

Добавим кавычки для inline-цитат в IE ниже 8-й версии:

function quote() {
  if(MSIE && navigator.userAgent.search('MSIE 8.') == -1) {
    var i, list = document.getElementsByTagName('q'),
    length = list.length;
    for(i = 0; i < length; i++)
      list[i].innerHTML = '&laquo;' + list[i].innerHTML + '&raquo;';
  }
}

IE8b1 выдает такой же номер версии «JScript», как и IE 7, поэтому «отсекаем» его, используя поиск подстроки «MSIE 8.» в строке, возвращаемой выражением «navigator.userAgent».

Добавление кавычек выполняется заменой «.innerHTML» для каждого тега <q> на результат сложения 3-х строк: ««», «list[i].innerHTML» и «»», где «list[i].innerHTML» — HTML-код текущего тега <q> на каждом шаге цикла «for», перебирающего по порядку все теги <q>, встречающиеся в документе. Вставляем именно ««» и «»» — «елочки», потому что в русской типоргафике принято ставить кавычки такого вида. Можно пойти дальше и по правилам типографики оформить вложенные inline-цитаты, но такие случаи встречаются крайне редко, поэтому не будем усложнять код и остановимся на таком варианте.

Перепишем наш код более грамотно, чтобы не засорять глобальное пространство имен:

var correction = {
  MSIE: 0/*@cc_on+@_jscript_version*10%10@*/,
  abbr: function() {
    if(this.MSIE && this.MSIE < 7) {
      var node = document.getElementsByTagName('body')[0];
      node.innerHTML = node.innerHTML
      .replace(/<ABBR/g, '<SPAN class="abbr"')
      .replace(/<\/ABBR>/g, '</SPAN>');
    }
  },
  quote: function() {
    if(this.MSIE && navigator.userAgent.search('MSIE 8.') == -1) {
      var i, list = document.getElementsByTagName('q'),
      length = list.length;
      for(i = 0; i < length; i++)
        list[i].innerHTML = '&laquo;' + list[i].innerHTML + '&raquo;';
    }
  }
};

Теперь объект «correction» содержит числовое значение «MSIE» и 2 функции: «abbr» и «quote». Выполним эти функции по событию «window.onload»:

var correction = {
  MSIE: 0/*@cc_on+@_jscript_version*10%10@*/,
  abbr: function() {
    if(this.MSIE && this.MSIE < 7) {
      var node = document.getElementsByTagName('body')[0];
      node.innerHTML = node.innerHTML
      .replace(/<ABBR/g, '<SPAN class="abbr"')
      .replace(/<\/ABBR>/g, '</SPAN>');
    }
  },
  quote: function() {
    if(this.MSIE && navigator.userAgent.search('MSIE 8.') == -1) {
      var i, list = document.getElementsByTagName('q'),
      length = list.length;
      for(i = 0; i < length; i++)
        list[i].innerHTML = '&laquo;' + list[i].innerHTML + '&raquo;';
    }
  },
  fixIE: function(listener) {
    if(window.attachEvent) window.attachEvent('onload', function() {
      correction.abbr();
      correction.quote();
    });
  }
};

correction.fixIE();

Мы добавили функцию «fixIE», которая поместит в обработчик события «window.onload» запуск функций «abbr» и «quote». Объект «correction» можно расширять, добавляя всевозможные «фиксы» для разных браузеров.

Теперь Вы можете использовать теги <abbr> и <q> на страницах Вашего сайта, не боясь, что для пользователей IE они будут представлены в неправильном виде.

Большинство приложений, особенно бизнес-приложений, как правило, требуют множество операций с датой и временем. Код этих операций может быть упрощен, если объект 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++» — создание и раскрутка сайтов в Волгограде.