javascript

Не знаю как вас, а меня уже достали сайты с падающими снежинками. В канун Нового года это ещё как-то объяснимо, но кое-где снег продолжает падать до сих пор. Я изготовил userjs для Opera (кажется в FireFox тоже есть плагин, позволяющий подключать UserJS), который останавливает снег на любых сайтах. Принцип несложен и понятен из кода. Side effects могут быть — например, если кто-то по неизвестным причинам будет использовать в своей функции, за снег не отвечающей, слово «snow», но проблемы буду решать по мере их появления.

// ==UserScript==
// @name        UnSnow - Turn off stupid snow
// @author      Evgeny Stepanischev aka Bolk
// @version     1.01
// @namespace   /files/unsnow.js
// @modified    2008-01-29
// ==/UserScript==

document.addEventListener
(
    'load',
    function () {
        if (window) for (var v in window)
        if (/snow|sneg|^fall$/i.test(v) && typeof window[v] == 'function')
        window[v] = function () {}
    },
    false
)

Нижеприведённый JavaScript в 256 байт выводит вращающуюся спираль (говорят в IE не работает, попробуйте Opera 9.50 или свежий FireFox). Подробный разбор принципа действия есть у Анатолия Воробья в ЖЖ. Никакого чуда (хотя поначалу выглядит именно так) — немного математики и чуть изобретательности.

p01<i id=d><script>setInterval('for(x=_="in solid #",E=Math,o=99,--O;o--;x+=
"<hr style='width:0;margin:auto;border-right:"+E.abs(q?p:P)+_+(9-q)*36+
";border-left:"+E.abs(q?P:p)+_+(8+q)*36+"'>")q=0>(p=E.cos(O+=22))*(P=E.sin(O));
d.innerHTML=x',O=9)</script>

И ещё раз к теме быстродействия JavaScript. Jeff Atwood произвёл ряд JavaScript-тестов на разных браузерах. В результате получилась любопытнейшая картинка. Расшифровка тестов:

• 3d — тест на основе библиотеки работы с 3D, написанной на JavaScript (испытывается —
• быстродействие массивов и чисел с плавающей точкой)
• access — массивы, свойства объектов, доступ к переменным
• bitops — битовые операции на целых числах
• controlflow — циклы, рекурсия, условия
• crypto — криптоалгоритмы (AES, MD5, SHA1)
• date — производительность при работе с объектом «Date»
• math — различные математические операции
• regpexp — регулярные выражения
• string — работа со строками

Хуже все справился IE7, но, если не принимать во внимание операции для работы со строками, он обгонит FireFox, который сейчас занимает предпоследнее место. В комментариях есть тестирование FireFox 3 b2, вцелом он справляется на 23% лучше, чем вторая версия, но на некоторых тестах проигрывает.

В ECMAScript 4 (JavaScript2 будет основан на этом языке) наконец-то появилась поддержка decimal — специального типа для работы с числами с фиксированным количеством десятичных знаков после запятой. В частности, это облегчит работу с денежными операциями.

Проблематику все понимают? Если нет, то хотя бы попробуйте сложить 0.1 и 0.7, умножить сумму на десять и округлить вниз в любом языке, который поддерживает числа с плавающей точкой. В языке, где числа с плавающей точкой представляются в соответствии со стандартом IEEE 754 (что у вас есть под рукой? JavaScript, Perl, PHP, MySQL) вы получите число 7. Почему так происходит — тема отдельного разговора, вкратце — дело в представлении числа с плавающей точкой на машинном уровне (на самом деле результатом данной суммы, в данном случае, с точки зрения такой реализации, будет 0.7999999999999999, а не 0.8) .

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

В EMCAScript 4 (а так же в языках, на нём основанных — ActionScript 3 и JavaScript 2) есть два способа объявить число как decimal:

{
  use decimal;
  
  var a = 0.1;    //  a — decimal
  var b = 0.2;    //  b — decimal
  var c = a + b;  //  c — decimal (0.3)
}

var a = 0.1m;   //  a — decimal
var b = 0.2m;   //  b — decimal
var c = a + b;  //  c == 0.3m

Суффикс «m» пришёл из «C#» и расшифровывается как «money» («деньги»). В остальных языках программирования проблему обходят, работая с целыми числами. Перед выводом их просто делят на 100.

Искал код для проверки — поддерживает ли браузер SVG, так и не нашёл ничего подходящего. Написал свой, делюсь:

function DetectSVG()
{
    if (navigator.mimeTypes != null && navigator.mimeTypes.length > 0)
    return navigator.mimeTypes["image/svg-xml"] != null

    var svg = 0
    /*@cc_on
    @if (@_jscript_version>4)
        try { svg = 1; new ActiveXObject("Adobe.SVGCtl") }
        catch (e) { return 0 }
    @end
    @cc_off @*/

   return svg
}

Первая половина кода проверяет наличие SVG-плагина в браузерах Opera, FireFox и иже с ними, вторая — проверяет наличие SVG-плагинов (выпускаются фирмами Adobe и Corel) к Internet Explorer.

Очень оригинальный JavaScript нашёлся на просторах интернета — JavaScript font detection, т. е. скрипт, который обнаруживает — есть ли у пользователя определённый шрифт или нет.

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

Если размеры совпадают, значит шрифта нет.

Кстати говоря, есть два способа выполнения JavaScript-кода только в IE. Первый, который, правда, сработает и в Opera — указание в script language «JScript». JScript — это название диалекта JavaScript, реализованного в IE. Следующее:

<script language="JScript">alert('1')</script>

cработает только в Opera и Internet Explorer.

Второй способ — так называемая «условная компиляция». Был придуман Microsoft, чтобы прятать новые конструкции языка (например, try … catch) от предыдущих версий браузера. Следующий код выполнится только в Internet Explorer. Остальные браузеры посчитают его комментарием в коде JavaScript

/*@cc_on

alert(1)

@*/

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

Тетрис на EMCAScript (стандартизованный JavaScript) с использованием нового стандарта векторной графики SVG (XML-based). [ >>> ]
Для просмотра в Microsoft Internet Explorer требуется плагин [ >>> ]

Сегодня я решился все-таки выяснить, работает ли, найденная мной в MSIE, недокументированная функция CollectGarbage(). Я довольно долго размышлял, как бы мне это сделать, поскольку был уверен в наличии у интерпретаторов JavaScript автоматического сборщика мусора. «Стоит мне удалить объект» — размышлял я — «и сборщик мусора тут же освободит память. Я ничего не смогу проверить».

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

Скажу сразу — функция работает! Но самое интересное не это. Оказалось, что если в MSIE (ровно, как и в Netscape, позднее я повторил эксперимент и под ним тоже) и есть сборщик мусора, то он очень неторопливый. В одном из экспериментов я прождал около 20 минут, прежде чем мое терпение кончилось!

Более того, если нажать «Create» несколько раз подряд, то память будет выделяться после каждого раза. То есть в программах на JavaScript, постоянно создающих структуры большого объема, вызов этой функции жизненно необходим! Я, например, сегодня же выпущу новую версию JUnix с демоном сборки мусора. К сожалению, как я не старался, мне не удалось найти ничего похожего в версии JavaScript от Netscape. Так что вопрос об высвобождении памяти под этим браузером остается открытым.

Демонстрационный пример:

<SCRIPT>
function Create()
{
        Arr = new Array ()
        for (i = 0; i&lt;100000; i++)
        Arr[i] = '01234567890123456789012345678901234567890'+
        '12345678901234567890123456789012345678901234567890'+
        '12345678901234567890123456789012345678901234567890'+
        '12345678901234567890123456789012345678901234567890123456789'
}

function Drop()
{
        delete Arr
}

function Collect()
{
        CollectGarbage()
}
</SCRIPT>
<BODY>
<FORM>
<INPUT TYPE=BUTTON onClick="Create()" VALUE=Create>
<INPUT TYPE=BUTTON onClick="Drop()" VALUE=Drop>
<INPUT TYPE=BUTTON onClick="Collect()" VALUE=Collect>
</FORM>
</BODY>

Заметка была впервые опубликована на сайте «Цитфорум» в 1999-м году, дата публикации примерно восстановлена из «Веб-архива»

Пояснение для людей не знакомых с данной конструкцией:

• Конструкция try — catch — finally предназначена для перехвата ошибок (исключений). Если в блоке try каком-то операторе возникает ошибка, JScript игнорирует остальные операторы и переходит в блок catch, где находится блок обработки исключений. Последним выполняется блок finally, в котором обычно выполняют некие заключительные действия. Допускается использование неполной конструкции — без catch или finally.

Скажу сразу, что бы не было никаких недоразумений: JScript — это JavaScript в интерпретации Microsoft, а 5-я версия предполагает наличие Internet Explorer 5.0 (в 4-м IE всего лишь 3-я версия JScript).

Не знаю как вы, а я, сколько программирую на J[ava]Script мечтал, что бы в этом языке появился наконец эта конструкция из двух слов, но шли годы, а заветные слова так и оставались зарезервированными и я уж было потерял всякую надежду, как вышел пятый IE…

И вот, однажды вечером, внося очередные изменения в свой JS Unix и роясь одновременно во внутренностях 5-го «зонда» взгляд мой зацепил знакомые try, catch и незнакомое Error. Смутная надежда маленьким мерцающим огоньком загорелась в моей душе. Осторожно, не давая ей погаснуть я протянул руки к клавиатуре, набрал try… catch… и в место досадного «зарезервированные слова», получил радостное «предполагается наличие }». Надо было видеть меня в тот момент (или слышать), каюсь: я кричал, что Гейтс молодчина. Каюсь, потому что Гейтс — плохой дядя, сделал в пятой версии то, что надо было сделать еще в первой. Ну да ладно, это все замечательно, но надо было сделать так, что бы кроме пятого эксплорера, остальные браузеры не замечали этот блок. Хорошо, что в JScript есть такая замечательная вещь, как условная компиляция. Воспользовавшись ею можно скрыть все что угодно от посторонних глаз Netscape Navigator и Internet Explorer 4.01 и ниже. Таким образом, вся конструкция выглядит так (после точки с запятой — мои комментарии):

/*@cc_on @*/                  ; Включаем условную компиляцию
/*@if (@_jscript_version>4)   ; Проверяем версию JScript
try                           ; Сам блок try
{@end @*/	
Result=eval(expression);      ; Делаем что-то полезное
/*@if (@_jscript_version>4)	
} catch (err)                 ; «Ловим» ошибку
{	
alert(err.description);       ; Сообщение об ошибке
Result='';	
} finally
{
alert(Result);                ; Завершающие действия
};
@end @*/
/*@cc_off @*/                 ; Выключаем условную компиляцию

Где еrr — имя объекта Error, который будет создан при возникновении ошибки, в него будут помещены параметры ошибки. Объект Error имеет три конструктора и два свойства:

err=new Error();

err=new Error(number);

err=new Error(number, description);

Свойство (и параметр конструктора) number — числовое значение (номер ошибки), свойство description (так же параметр конструктора) — строка, описание ошибки. Некоторые числовые значения и соответствующие им описания ошибок приведены в таблице ниже:

Существует способ программно возбудить исключение (создать ошибку) — достаточно вызвать оператор throw с созданным ранее объектом Error. При перехвате ошибки конструкцией try-catch созданный объект будет передан блоку catch. Примеры:

var err=new Error(-10,"Неверное число");
throw(err);

throw(new Error(-4,"Ошибка"));

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

Web-программист казанского центра Интернет Степанищев Е.В.

Заметка была впервые опубликована на сайте «Цитфорум» в 1999-м году, дата публикации примерно восстановлена из «Веб-архива»

Язык JavaScript 1.3 поддерживается Navigator’ом версий 4.06 и 4.5.

Поддержка Unicode

В строках теперь стало возможным использование любых символов из таблицы Unicode, которые кодируются как шесть ASCII-символов: \u и 4 цифры в шестнадцатеричной кодировке, например, \u0041 — латинская буква «A» из таблицы Unicode. Каждая такая последовательность добавляет только один символ к строке. Функции escape и unescape не подвергались изменениям и не используют Unicode-последовательности.

Следующий пример выведет на экран символ «копирайт» и строку «Netscape Communicator»:

alert("\u00A9 Netscape Communicator");

Следующая таблица содержит список наиболее часто используемых специальных символов и их коды в Unicode:

Вы можете использовать Unicode для отображения символов в различных языках или технических символов. Для отображения символов Unicode у клиента должны быть установлены шрифты Unicode. Некоторые ОС, например Windows 95, поддерживают Unicode лишь частично.

Новые свойства объекта Global

NaN

Синтаксис

NaN

В JavaScript 1.2 значение NaN (Not-a-Number) было определено только для объекта Number, в версии 1.3 это значение также определено, и для объекта global. NaN никогда не равно ни одному другому числу, включая NaN. Функции, работающие с числами (например Number.constructor, parseFloat и parseInt) возвращает NaN, если значение параметра не числовое.

Infinity

Синтаксис

Infinity

Числовое значение величины Infinity — бесконечность. В JavaScript 1.2 Infinity было определено как свойство объекта Number. У объекта Number есть два свойства POSITIVE_INFINITY и NEGATIVE_INFINITY (для примера, Number.POSITIVE_INFINITY). В JavaScript 1.3 Infinity определено и для объекта Global. Значение Infinity (положительная бесконечность) всегда больше, чем любое другое число, включая себя. Infinity полностью соответствует математической бесконечности. Например любое число, умноженное на Infinity, есть Infinity, любое число, деленное на Infinity, есть 0.

undifined

Синтаксис

undefined

Переменные, которым не было присвоено значение, имеют значение undefined. Теперь вы можете использовать undefined для проверки того, было ли присвоено переменной значение. Методы и выражения JavaScript также возвращают значение undefined, если используемые переменные не имеют своего значения. undefined — это свойство объекта Global, которое имеет значение undefined.

Пример:

var input;
if(input == undefined){
    document.write("переменной input значение не присвоено");
}

Новые функции объекта Global (IsFinite)

IsFinite

Синтаксис

IsFinite(число)

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

Пример:
Проверка числа на конечность

if(isFinite(Input) == true)
{
    // Ваш код
}

Метод toSource

Синтаксис

toSource()

Это новый метод, определенный для всех встроенных объектов. Большинство объектов наследуют этот метод от Object. Метод toSource базируется на методе toString объектов Object и Array.

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

Пример:

product = {type: "electronic", value: 500};
myList = ["school", 4, "home", 10];
myBool = new Boolean; 
myString = new String("my line");
myDate = new Date();
document.write(product.toSource());
document.write(myList.toSource());
document.write(myBool.toSource());
document.write(myString.toSource());
document.write(myDate.toSource());

Расширение объекта Date

В предыдущих версиях JavaScript формат даты был зависим от платформы и различных установок. В новой реализации объект Date полностью платформонезависим. Объект Date теперь поддерживает дату и время в формате UTC (Universal Coordinated Time). Дата задается как количество миллисекунд, прошедших с 1 января 1970 года. День содержит 86400000 миллисекунд.

Следующий пример возвращает разницу между timeA и timeB в миллисекундах:

timeA = new Date(); 
alert("подождем какое-то время");
timeB = new Date(); 
timeDifference = timeB - timeA;

Для работы с миллисекундами были добавлены методы getMilliseconds() и setMilliseconds(num_ms), getUTCMilliseconds() и setUTCMilliseconds(num_ms). Для устранения проблеммы 2000 года добавлены функции setFullYear, getFullYear, setUTCFullYear и getUTCFullYear. getFullYear возвращает полный год, например 1998, а setFullYear — устанавливает. Методы setYear и getYear оставлены для обратной совместимости.

Новый конструктор объекта Date

Конструктор объекта Date был расширен для поддержки миллисекунд, его полный формат:

Date (yr_num, mo_num, day_num, [, hr_num[, min_ num[, sec_num[, ms_num]]]])

UTC

UTC — метод объекта Date, теперь также поддерживает миллисекунды.

Date.UTC(year, month, date, [, hours[, min[, sec[, ms]]]])

Для поддержки UTC были введены getUTCFullYear(), getUTCMonth(), getUTCDate(), getUTCDay(), getUTCHour(), getUTCMinutes(), getUTCSeconds(), getUTCMilliseconds(), setUTCFullYear(year [, month[, date]]), setUTCMonth(month[, date]), setUTCDate(date), setUTCHour(hours[, min[, sec[,ms]]]), setUTCMinutes(min[, sec[, ms]]), setUTCSeconds(sec [, ms]), setUTCMilliseconds(ms) и toUTCString() ( превращает дату в строку, используя соглашение Universal Coordinates Time). Рассматривать эти методы более подробно не имеет смысла, их предназначение вполне понятно из названия.

Изменения в методах объекта Date

Методы объекта Date в версии 1.3 получили дополнительные параметры:

setMonth(month[, date])
setHours(hours[, min[, sec[, ms]]])
setMinutes(min[, sec[, ms]])
setSeconds(sec[, ms])
Теперь эти методы по своей форме полностью эквивалентны методам setUTC-.

Новые методы объекта Function

call

Синтаксис

call(thisArg, arg1, arg2, ...)

Параметры

thisArg —вызываемый объект
arg1, arg2,… — параметры вызываемого объекта

call позволяет вызывать методы одних объектов в контексте других (вызвавших) объектов. Это дает возможность задать свое значение объекту this, при вызове функции и, что самое главное, метод call позволяет написать метод один раз и наследовать его для других объектов не переписывая их! (См. также apply).

Пример:

function product(name, value)
{
	this.name = name;
	if(value > 1000) this.value = 999; else this.value = value;
}
function prod_dept(name, value, dept)
{
	this.dept = dept;
	product.call(this, name, value);
}
prod_dept.prototype = new product();
cheese = new prod_dept(feta, 5, food);  
car = new prod_dept(honda, 5000, auto);

apply

Синтаксис

apply(thisArg, argArray)

Параметры

thisArg — вызываемый объект
arg1, arg2,… — параметры вызываемого объекта

apply позволяет применять методы одних объектов в контексте других (вызывающих). Так же как и в call объект this может принимать заданное значение (this будет указывать на текущий, вызвавший объект). apply очень напоминает call, отличие лишь в типах параметров (аргументов) вызываемого объекта. В методе apply возможно использование любых типов массивов. Например: apply(this, new Array(name, value)). Разрешается так же использовать свойства вызываемого объекта. Можно использовать arguments для передачи всех параметров вызываемому объекту.

Пример:

function product(name, value)
{
	this.name = name;
	if(value > 1000) this.value = 999; else
	this.value = value;
}
function prod_dept(name, value, dept)
{
	this.dept = dept;
	product.apply(product, arguments);
}
prod_dept.prototype = new product();
cheese = new prod_dept(feta, 5, food);
car = new prod_dept(honda, 5000, auto);

Операторы === и !==

Операторы === и !== проверяют на соответствие (и не соответствие) операнды одинаковых типов (т. е. например оба операнда должны быть типа String). При сравнении с помощью этих операторов не происходит преобразования типов. Их использование необходимо, когда нужно убедиться, что оба операнда имеют одинаковый тип и одинаковые (или разные) значения.

Пример:

10 === '10'

вернет false, тогда как

10 == '10'

вернет true.

Изменения в операторах == и !=

Если операнды разного типа, происходит преобразование. Как результат возвращается значение типа Boolean. Если типы операндов одинаковы, то операторы == и != эквивалентны === и !==. Значения null и undefined считаются одинаковыми, NaN считается не равным ни одному значению, включая NaN.

Пример:

10=='10'

возвращает true.

Изменения в объекте Array

Свойство length

Длина массива (свойство length) теперь задается беззнаковым 32-битным целым. Значение свойства length может лежать в пределах от 0 до 2^32-1.

Конструктор

В JavaScript 1.3 при использовании конструктора с единичным параметром (new Array(len)) конструктор проверяет тип параметра. Если это число конструктор конвертирует его в 32-битное беззнаковое целое и создает массив со свойством length(размер массива), установленное в integer. Начальные значения элементов массива — undefined.

Метод push

В JavaScript 1.2 метод push возвращал последний элемент, добавленный к массиву. В версии 1.3 метод возвращает новую длину массива.

Метод splice

В JavaScript 1.2 метод splice возвращал удаленный элемент, если удалялся только один элемент (параметр howMany равен 1). В JavaScript 1.3 splice всегда возвращает массив, содержащий удаленные элементы. Если удаляется только один элемент, то splice вернет массив, содержащий один единственный элемент.

Метод replace объекта String

Синтаксис

replace(regexp, newSubStr)
replace(regexp, function)

В JavaScript 1.3 в качестве второго параметра можно использовать функцию. В этом случае заданная функция будет вызвана после метода match и ее результат (строка) заменит найденную подстроку. Есть возможность передать найденную подстроку функции. Первый параметр функции содержит найденную подстроку, остальные — подсовпадения в найденной строке. Надеюсь следующий пример разъяснит смысл вышесказанного:

"XXzzzz".replace(/(X*)(z*)/, function (str, p1, p2) {return str +" - " + p1 +" , " + p2;} )

вернет XX.zzzz — XX , zzzz

Объект Boolean

В JavaScript 1.2 значение false объекта Boolean трактовалось как ложь в логических выражениях. Если Boolean использовался в операторе if (if (выражение)), JavaScript 1.2 использовал значение объекта Boolean. В JavaScript 1.3 все объекты в логических выражениях трактуются, как истина, включая объект Boolean, даже если он имеет значение false.

Пример:

x = new Boolean(false);
if(x) // значение этого выражения - истина
{
	// Выполнение кода
}

toString

В JavaScript 1.3 метод toString объекта Object возвращает [object type], где type — имя объекта или имя конструктора объекта. Метод toString объекта Array вернет строку, содержащую значения всех элементов, разделенных запятыми.

Пример:

var SeaLion=new Image();
alert(SeaLion.toString());	// выдаст [object Image]

eval

Функцию eval можно вызывать не напрямую. Для примера можно использовать следующий код:

var x = 2;var y = 4;
var myEval = eval;
myEval(x + y);
eval(x + y);

Использование операции присваивания в логических выражениях

Ранние версии JavaScript конвертировали операции присваивания в логических выражениях в операции сравнения, другими словами if (x=y) превращалось в if (x==y). В Navigator 4.06 и выше возможно использование присваивания, если воспользоваться следующей конструкцией: if ( (x=y) ).

Web-программист казанского центра интернет Степанищев Евгений