Тэг ‘javascript’

Ошибка JavaScript: есть null или не является объектом

Иногда встречается ошибка javascript … есть null или не является объектом.

Internet Explorer после такой ошибки останавливает дальнейшее выполнение сценария и (при соответствующей настройке) сообщает об ошибке желтым треугольником в левом нижнем углу.

Итак, в чем же дело.. Причем тут Null и объекты?

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

Частые причины ошибки “есть null или не является объектом”

1. Попытка обратиться к несуществующему свойству объекта:
a=1; alert (a.property);

2. Попытка обратиться к несуществующему элементу массива:
a = []; alert (a[1]);

Internet Explorer в сообщении об ошибке указывает строку, в которой она обнаружена. Рекомендуется проверить все похожие обращения к переменным.

Если Вам известны другие причины появления ошибки  “null или не является объектом”- сообщайте в комментарии..

ps. В некоторых WYSIWYG-редакторах в ранних версиях часто встречались такие ошибки…

Опубликовано Август 5, 2010 | автор: levik  |  Нет комментариев »

javascript lightbox и аналоги: увеличение изображений и куча плюшек

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

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

Собственно lightbox (ныне Lightbox 2)
Скрипт использует библиотеки prototype.js и scriptaculous.js Если не считать их, то размер скрипта довольно мал. http://www.lokeshdhakar.com/projects/lightbox2/

Lightview
Скрипт использует JavaScript-библиотеки prototype.js и scriptaculous.js
Сайт и демо: http://www.nickstakenburg.com/projects/lightview/

LightWindow
Также использует упомянутые библиотеки javascript. Вполне функционален.
http://stickmanlabs.com/lightwindow/

jQuery lightBox plugin
фактически плагин для Jquery с функционалом, аналогичным lightbox-оригиналу.
http://leandrovieira.com/projects/jquery/lightbox/

Highslide.js
Не использует дополнительных javascript-фреймворков. Полностью автономный скрипт с довольно внушительным функционалом. Позволяет внедрять не только изображения, но и страницы, HTML-код, flash. Удобно реализована работа с галереями изображений - предпросмотр
http://highslide.com/

FancyBox для JQuery
Похоже, лучшее решение для jquery - куча возможных вариантов анимации, работа с галереями изображений. В общем, смотреть примеры на
http://fancybox.net/

jsImageBox
очень компактный автономный скрипт без использования фреймворков
http://jsimagebox.ru/

Shadowbox.js
Решение может использовать как любой из нескольких популярных фреймворков, так и обходиться без них - нужный вариант можно загрузить с сайта
http://shadowbox-js.com/

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

Опубликовано Август 2, 2010 | автор: levik  |  Комментарии (3) »

JavaScript редактор изображений - редактируем изображения прямо в браузере

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

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

Инструменты для редактирования изображений в браузере

JavaScript Image Cropper UI

Удобный инструмент для “редактирования” картинки непосредственно в браузере.

Demo: http://www.defusion.org.uk/demos/060519/cropper.php
Скачать: http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/

Статья о редакторах изображений (а-ля “paint online”, функционал у многих довольно широк)
http://www.coolwebmasters.com/web-applications/511-online-professional-image-editors-and-drawing-applications.html

Опубликовано Август 1, 2010 | автор: levik  |  Нет комментариев »

Javascript, select и innerhtml - динамически изменяем элементы option в select

Задача:

Используя javascript динамически формировать options у html элемента select.

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

html:
<select id="select1"><option value="val1">text1</option></select>

javascript:
myselect = document.getElementById('select1');
select1.innerHTML = '<option value="val2">text2</option><option value="val3">text3</option>';

Такое решение не везде работает  (mozilla firefox этот код обрабатывает. Opera и IE отказались напрочь)

http://support.microsoft.com/kb/276228 - с официального сайта Microsoft про innerHTML у Select. Там же варианты “обхода” этого бага.

Вариант 1 - использование js массива .options[] у элемента select:
select1.options[i] = new Option(i,i);

Вариант 2 - замена innerHTML у родительского элемента (т.е. HTML должен включать сам тэг select):
<div id="out1"><select ..> </select></div>
js: document.getElementById ('out1').innerHTML = '<select id="select1" name="select1"><option ...>...</option></select>';

ps. Все-таки наткнулся на решение на одном из лучших (на мой взгляд) ресурсов по web:
Javascript SELECT - динамические списки

UPD2 Вариант получения данных для формирования элемента select через ajax: Для передачи в JavaScript пар ID:значение используем responseText в формате JSON, значение которого вычисляем при помощи функции eval.


data = eval (transport.responseText);
for (i=0; i< =data.length-1; i++)
myElement.options[i]=new Option(data[i][1],data[i][0])

При этом скрипт должен отдавать массив в виде:
[
['1','название первого элемента'],
['2','название второго элемента'],
]

Опубликовано Июль 28, 2010 | автор: levik  |  Нет комментариев »

prototype.js - ajax, json и

Prototype.js - один из популярных javascript фреймворков.
www.prototypejs.org - официальный сайт Prototype - там есть как документация, так и примеры.

http://www.prototypejs.org/learn/json -

Сразу скажу, что  “нормально” реализовать json на prototype у меня не получилось… -примеры с официального сайта “не пошли”.
prototype version 1.5.0

person = '/*-secure-\n{"name": "Violet", "occupation": "character"}\n*/'.evalJSON()
person.name;
//-> "Violet"

Такого рода конструкция работала только через eval():

var d='{ "name":"Violet","occupation":"character" }'; //json string
d = eval('(' + d + ')');
alert (d.name);

В итоге, вместо json принял решение использовать старый добрый innerHTML:

$("result").innerHTML= transport.responseText;

Возможно, дело в кривых руках (отсутствии документации, времени, мозгов ), однако, не исключено, что в “Last updated on May 1st, 2007″…

Да.. почему prototype.. Проект изначально построен с его использованием…

Опубликовано Июль 27, 2010 | автор: levik  |  Нет комментариев »

Защита информации сайта от копирования

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

Но сейчас не об этом.

Как защитить сайт от копирования?

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

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

1. Запрещаем кэширование страниц сайта. Это можно сделать несколькими способами:
Тэг HTML:
<meta http-equiv="Pragma" content="no-cache" />
или:
<meta http-equiv="Cache-Control" content="no-cache" />
Или
<meta http-equiv="no-cache" />

HTTP-заголовок (header):

Прочитать более подробно о кэшировании страниц

2. Запрещаем вызов контекстного меню в Internet Explorer
<body oncontextmenu="return false;" ondragstart="return false;">

3. Запрещаем выделение текста для копирования в Internet Explorer:

<script language="JavaScript">
document.onselectstart = returnfalse;
//запрещаем выделение
document.ondragstart = returnfalse;
//запрещаем перетаскивание
function returnfalse() {
return false;
}
</script>

4. пользуемся функциями escape | unescape
<script language="javascript">
mystring = "%u0412%u0441%u0442%u0430%u0432%u044C%u0442%u0435%20%u0442%u0435%u043A%u0441%u0442.";
document.write (unescape(mystring));
</script>

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

6. Для защиты текста сайта от копирования  существуют сервисы, отслеживающие уникальность текста. Например CopyScape.com. Конечно же, по сути, сервис напрямую не защищает текст от копирования, однако, если в сети появится сайт с текстом, который “очень похож” на текст Вашего сайта, Вы об этом узнаете, и сможете сообщить “куда надо” :)

Опубликовано Июнь 17, 2009 | автор: levik  |  Нет комментариев »

И снова бланки - работа с word средствами javascript и php

В очередной раз стала актуальной задача с подготовкой бланков. Однако, способ с бланком в формате rtf не подходит - файл .doc весит ~2 Мб, файл же rtf ~ 34 Мб. Видимо, зависит от хранения рисунков…

Работать с COM-объектом Word можно непосредственно из PHP:

// Код PHP
$word=new COM("Word.application") or die("Couldn't start Word!");
//после создания объект невидимый
//сделаем его видимым и активизируем (разумеется, для работы на сервере это необязательно)
$word->visible =1;
$word->Activate();
//Создать документ по шаблону:
$word->Documents->Add("c:\\template.dot");
// действия - найти-заменить и т.д. Описаны в документации по VisualBasic for Application - в справке MS Word (по умолчанию не устанавливается)
$word->ActiveDocument->SaveAs("C:\\".$fname);
$word->Quit();

Однако, подобный способ подходит только для Windows-серверов.

Еще один вариант - работа с COM-объектом на стороне клиента через Active-X при помощи JavaScript:


><script language="javascript">
// Создание объекта MS Word:
word = new ActiveXObject ("Word.Application");
// Создание документа и установка параметров страницы:
with (word) {
Documents.Open('c:\\0.doc');
ActiveDocument.Label1.Caption = < ?=$sum?>;
ActiveDocument.SaveAs ('c:\\1.doc');
Quit (); // завершает работу MS Word
}
</script>

Предварительно следует сохранить документ-шаблон на диск C:\ с именем 0.doc.
В шаблоне - создать “Label”-ы и расположить их в соответствии с нужным расположением текста.
С учетом специфики задачи - получаем еще один небольшой выйгрыш - “основной” файл не качается с сервера.
Технология, думаю, понятна. Вариации - насколько фантазии хватит.

ps. Не забудьте поставить разрешения в свойствах обозревателя.

( Свойства обозревателя - безопасность - Выбираем “Надежные узлы”. После чего, нажимаем “Другой..” - и устанавливаем все переключатели, где упоминается ActiveX в “Разрешено”.)

А в Надежные узлы следует добавить “Наш” сайт - где формируются бланки.

Опубликовано Март 18, 2009 | автор: levik  |  Нет комментариев »

javascript как получить атрибут value элемента input типа radio

Имеем несколько элементов input типа radio (знакомые с формами Windows иногда кличут их radiobutton). Требуется получить значение value “выбранного” элемента.

<input type="radio" value="value" />
<input type="radio" value="value2" />
<script type="text/javascript" language="javascript">
input = document.getElementsByTagName('input');
for(i=0;i<(input).length;i++){
if(input[i].getAttribute('type')=='radio'&&input[i].checked){
alert(input[i].getAttribute('value'));
}
}
</script>

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

<script language="JavaScript" type="text/javascript">
function showStatus(f) {
var s = "";
for (var i=0; i<f.elements["radiobutton"].length; i++) {
var btn = f.elements["radiobutton"][i];s += btn.value + ": " + btn.checked + "\n";
}
window.alert(s);
}
</script>
<form>
<input type="radio" name="radiobutton" value="First" />1
<input type="radio" name="radiobutton" value="Second" />2
<input type="radio" name="radiobutton" value="Third" />3
<input type="button" value="Show status" onclick="showStatus(this.form);" />
</form>

Опубликовано Июль 17, 2008 | автор: levik  |  Комментарий (1) »

Javascript - загрузка скрытых картинок - preload images

Загрузка изображений при помощи javascript - часто используется для смены картинок, чтобы после загрузки основной части страницы не “расстраивать” пользователя временнОй задержкой, требующейся для загрузки картинки.
<script type="text/javascript" language="javascript">
//загрузка изображений (preload images)
var pictures = new Array('pic1.jpg','pic2.jpg','pic3.jpg');
for (i=1;i<pictures.length; i++) {
t = new Image();
t.src = pictures[i];
}
</script>

Опубликовано Июнь 13, 2008 | автор: levik  |  Нет комментариев »