4 февраля 2012.  Мастерство авторизации

Есть ли что-нибудь более сложное и увлекательное чем регистрация и авторизация? У меня уже накопилась целая подборка: «Основные ошибки проектирования процесса авторизации», «Пользователь важен для вас? Просто дайте ему зарегистрироваться», «Комментарии open_id, улучшены». Что ж, сегодня я намерена продолжить эту тему.

2 комментария

30 декабря 2011.  Объекты, объекты-объекты; объекты? Объекты!

Зомби зомби зомби. © Народная мудрость

Developers! Developers! Developers! Developers! © Stiven Ballmer

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

Что такое объект?

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

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

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

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

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

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

Опять таки. В определении говорится об инкапсуляции. А что если данные объекта не скрыты? В прочем поскольку моя статья про яваскрипты, данное определение вообще никакой смысловой нагрузки не несёт.

Объект в программировании, это такая штука, которая не всегда может иметь визуальное представление, типа кнопки или поля. Скорее наоборот.
Представь себе массив — упорядоченный набор переменных. Каждая переменная в обычном массиве может содержать строку, число, (любую типизированную переменную) или другой массив. Поэтому моё определение звучит так:

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

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

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

The programming construct that combines data with a set of methods for accessing and managing those data is called an object. © en.wikipedia.org

Т. е. данные, и набор функций (методов) для работы с этими данными называются объектом.

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

Объекты в Javascript

Теперь внимание, дальше вы можете запутаться!

В яваскриптах — почти всё является объектами, но не всё называется объектами. Число — или строковая переменная (или сущность) — не называются сами по себе объектами! Но по факту — являются ими.

Например у числа или строки могут быть встроенные функции. Т. е. функция.split например — аналог строковой функции explode в php и т. п.

var a = 'te.st';
var b = a.split('.'); // в b - будет массив из значений te и st

Чтобы понять сказанное выше утверждение, приведу такой аналог: «насекомые и птицы — не называются животными, хотя по факту являются ими». Т. е. вы видите на улице собаку или слона и говорите «О, какое животное». А когда видите птицу, говорите «какая птица», хотя из биологии это тоже царство животных. А собаки или слоны относятся к млекопитающим. Так и тут, когда вы видишь число или строку — нет нужды говорить «о, какой объект». Лучше сказать какая строка или какое число. А вот когда вы видите, например, документ html — document, или его тело — document.body — тут уж можно сказать «какой объект», просто потому что он уже и не число и не строка.

Далее, небольшая тонкость касающаяся массивов. В яваскриптах есть названия для классов объектов — строка, число, массив и, внимание(!), Объект. Так и приходится писать объект объект.

новый массив можно создать например как:
a = new Array(); или в сокращённой нотации a = [];
новый Объект (буду писать с большой буквы), можно создать так:
a = new Object(); или в сокращённой нотации a = {};

в объект массива — [] — мы можем записывать только числовые, строковые и булевы переменные. Ну и другие массивы тоже. В объект Объекта — мы можем записывать то же самое + функции. Пример:

var a = {1,2,3, 'my_func': function(){ do_something; } };

Обращу внимание, что функция будет доступна как элемент массива: a['my_func'](); и как метод объекта a.my_func(); — в принципе равнозначно, как кому нравится.

Теперь внимание — массив, может содержать индексы элементов, т. е. на какой позиции какая переменная находится. В яваскриптах массив может содержать только ЧИСЛОВЫЕ индексы. В то время как объект — может содержать любые индексы переменных.

Индексы в записи Объекта пишут так index:value, однако это не подходит для записи массива (спасибо SelenIT в комментариях), поэтому запись

a= [1:'something', 2:'something']; — НЕ верна
a= ['first':'something', 2:'something']; — НЕ верна
a= {'first':'something', 2:'something'}; — верна

Но можно создать такой объект

var a = {'вася':'Пупкин'};

и обращаться к нему как к массиву

alert(a['вася']));

Подробнее об этом написано в моей статье «Javascript — работа с массивами и объектами» (09.2009).

Теперь я расскажу о функциях. Функции — так же как и строки, и числа, и Объекты, являются в какой-то степени объектами. Они, согласно моему определению «объект — это данные + функции» — могут содержать набор данных, и (!) функций.
Отличия от строк — и т. п. — в том что чтобы вызвать внутреннюю функцию функции, или же переменную объявленную внутри функции необходимо вызвать саму функцию, объявляются внутри с помощью кодового слова this. Вся эта конструкция выглядит так:

function test(){
         // do_something;
         this.x = 5;
}
тогда a = test().x; // равно 5

функция при этом выполняется, и может что-то делать:

<script>
function test(){
         // do_something;
        alert('test');
         this.x = 5;
}
a = test().x;

</script>

присвоит переменной число 5 — и покажет alert().

Ссылки на объекты

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

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

Пример:

a=document.title; // Присваиваем переменной a - значение заголовка документа 
 a='test'; // присваиваем переменной другое значение, заголовок документа не меняется 
a=document; // присваиваем переменной значение документа 
 a.title='test'; // присваиваем заголовку значение - меняется заголовок окна.

Об этом, и о том как копировать объекты и массивы, так же написано в моей прошлой статье «Javascript — работа с массивами и объектами».

P.S. Так же очень хочу сказать что Джон Ресиг (создатель jquery если кто не в курсе), недавно выступил с отличной и правильной идеей преподавания javascript в качестве первого языка программирования. Пожалуйста прочитайте его статью: Яваскрипт как первый язык программирования.В ней он так же затрагивает некоторые вопросы методологии, и как и я подчёркивает то, что в яваскриптах всё, включая функции является объектами. Цитирую:

Function Declarations

Perhaps the most interesting change that we can make is a rather subtle one, but it's eschewing normal function declarations for creating anonymous functions and assigning them to a variable.

// Don't do this:
function getData() { }
// Do this instead:
var getData = function() { };

There are a number of good habits that are instilled when you use this particular technique.

Makes it easier to understand "functions as an object". I've found that when you show new developers a function being assigned to a variable it suddenly becomes much more obvious that a function is actually an object and can be manipulated as such (and that a function can be passed as an argument to another function). Thus students are advanced along the path towards a better understanding of functional programming.

С удовольствием выслушаю ваши замечания по теме.

5 марта 2011.  Как написать яваскрипт для обработки opensearch подсказок

Итак, в статье о том как настроить opensearch, я упомянула, о том, что поисковые подсказки в формате json можно использовать и на сайте. Давайте посмотрим как это сделать.

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

12 ноября 2010.  Javascript чтение массива из COOKIE, и другие функции

Ни для кого не секрет, что большинство онлайн магазинов используют cookie для хранения корзины товаров, однако для разработчиков часто бывает открытием, что куксы можно писать методом javascript. Я негодую, когда для добавления товара в корзину мне нужно покинуть страницу; недоумеваю когда  при клике грузится аякс который только и делает что ставит куксу; и совсем бешусь, после действий в корзине, когда для того чтобы пересчитать сумму мне нужно перезагрузить страницу кнопкой "пересчёт". Поэтому, с моей лёгкой руки, вот уже более 3х лет, все магазины сделанные в нашей компании %companyname% на движке %cmsname%, для разнообразных целей используют яваскриптовую запись данных в cookie.

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

3 комментария

3 ноября 2010.  Как вставить код google analytics

Итак, сегодня, выбрав из списка тем самую лёгкую, я напишу о том, как разместить код google analytics.

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

29 июня 2010.  Игра 25 квадратов на javascript

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

2 комментария

17 декабря 2009.  Человеко-читабельность - учите компьютеры русскому!

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

Однако, сегодня есть кое что, о чём я не могу не написать, и о чём почему-то никто не упоминает. Это использование русского языка в автоматически генерируемом контенте, особенно в словах которые изменяются от числа. Например форма которую можно увидеть в 90% онлайн магазинов (даже таких крупных как ozon.ru, eldorado.ru, 003.ru):

Корзина: Товаров 0 шт. Общая сумма 0,00 руб.

Вам это не режет глаз? Нет? А мне ужасно режет, мне кажется автор сильно не любит людей. Слава роботам, убить всех человеков!

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

Корзина:
В вашей корзине 3 предмета общей стоимостью 73370 руб.

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

2 комментария

12 сентября 2009.  Javascript - о массивах и объектах

Итак, сегодня покопалась в списке тем для статей которые хотела бы написать, и решила написать про работу с массивами в яваскриптах.

1 комментарий

15 мая 2009.  Обратный отсчёт — setTimeout против setInterval.

Иногда нужно сделать яваскриптом обратный отсчёт. Например для того чтобы обновить страницу через N секунд и вывести таймер с кнопкой остановки. Реализуем это всеми способами.

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

14 мая 2009.  Как указать яваскрипту кодировку или как настроить Google Maps на страницах windows-1251 в IE.

Иногда на страницах с кодировкой windows-1251 (например как эта) нужно вставить яваскрипт в другой кодировке, например Google Maps, который работает в UTF-8. К счастью все современные браузеры прекрасно совмещают данные в разных кодировках. К несчастью IE не является современным браузером (и 8й тоже) и пытается отобразить скрипт в кодировке документа. Помочь может атрибут charset, который прямо указывает браузеру какую кодировку использовать.

<script charset="UTF-8" src="http://maps.google.com/maps?file=api&v=2&amp;key=HEREISYOURGOOGLEKEY&amp;hl=ru" type="text/javascript">

Это решит все проблеммы с IE6, IE7 и IE8 и карта будет прекрасно работать =).