назад далее

Типы данных javascript и style.posLeft

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

Кстати, существует еще одно заблуждение, распространенное даже среди некоторых разработчиков, что язык javascript - это язык с нестрогим соблюдением типов. На самом деле за этим скрывается непонимание того, как работает тип VARIANT. Именно он и скрывается за обявлением простых типов var и передается в функции, исполняющие CSS.
На самом деле VARIANT принимает только ту часть значения, которая в него кладется и отдает только ту часть, которую спрашивают. Если положить в VARIANT целое число, но не положить строку, а потом спросить у него значение строки, вы получите undefined. И наоборот.
С этим и был связан глюк функции позиционирования слоя в FireFox, когда в нее подавались целые значения без px. В реализации движка FireFox VARIANT именно так и работает.
Часть VARIANT, хранящяя строку с координатой, используемой для установки положения слоя не заполнялась, при назначении целого числа. Пришлось писать строкой как Top + "px" (опираясь, кстати именно на то, Internet Explrer сможет правильно заполнить VARIANT, чтобы потом эти числа можно было складывать и так оно и случилось. Для FireFox пришлось приделывать parseInt.)
Заблуждение о нестрогости типов javascript распространилось из-за правила о приведении типов, примененным Microsoft в javascript. Движок javascript в реализации Microsoft норовит на основе строкового значения заполнить весь VARIANT полностью. Когда-то давно я сышал, что это было сделано для облегчения программирования на javascript, по сравнению с CPP. Во времена Netscape 3 мало кто мог освоить CPP. (Между прочим, именно javascript я обязан возможностью освоения CPP.)
Поэтому, когда мы назначаем значения атрибутам CSS, мы должны учитывать негласные правила, применненные в движке броузера. Я уверен, что в Internet Explorer существует один-единственный парсер текста документа и что это парсер именно javascript, что и позволяет делать такие вещи как expression и event.
VARIANT - сложный тип, требующий своего конструктора и деструктора, правильной инициализации. А люди склонны думать, что значение переменной javascript определяется при ее чтении, будто броузер может приписать или удалить px, что совершенно неверно.
var - это конечно не на 100 процентов VARIANT. И движок javascript в любом слуае участвует в интерпретации типа. Попробуйте сложить Date и 7 и любой другой обьект с числом.

Исходное смещение цитаты:

7 + 12px =

Новое положение цитаты по свойству style.left: 7 + 300px =

Новое положение цитаты по свойству style.posLeft: 7 + 300 =

Новое положение цитаты по свойству offsetLeft: 7 + 300 =

Таким образом style.posLeft можно использовать только в Internet Explorer. И нужно быть внимательным при использовании значений, полученных с помощью style.left. Свойства offsetTop и offsetLeft непосредственно вообще трудно использовать в javascript с какой-либо пользой. Хотя с их помощью и можно получать относительные цифровые координаты, для установки положения они не годятся.

Мистическое значение

Вот еще выдержка из спецификации Microsoft:

Declaring Variables
Although not required, it is considered good practice to declare variables before using them.

Как к этому можно отнестись? Нужно ли вообще обьявлять перменные? Что на самом деле скрывается за этим правилом? Как ни странно, необьявленные переменные ведут себя иначе, чем обьявленные.

Попробуйте разобрать следующий пример:

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

function AssignMysticalValue() {
DemoValue = "is it global value or local value?";
}

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

Мистическое значение:

var DemoValue = "global value";
DemoValue = "new global value";

function UseGlobalValue() {
var NewValue = DemoValue;
return NewValue;
}

мы будем везде получать старое значение.

Мистическое значение: