Дек 8

В последние пару лет jQuery стал очень популярным. Этот javascript framework легко изучается,
производительность и большой спектр его возможностей очень радуют.
Селекторы jQuery позволяют производить выборку элементов по разным критериям. Селекторы являются одной из главных частей фреймворка, поэтому необходимо уметь грамотно ими пользоваться. Учиться лучше всего на примерах. Поэтому я хочу поделиться с Вами информацией о методах работы с конткретными HTML элементами при помощи jQuery.

Первая заметка - о работе с HTML элементом <select>

Работа с выпадающим списком в jQuery

Основными дейсвиями, которые производятся над выпадающим списком является получение выбранного значения, добавление/удаление элементов из списка, изменение их атрибутов.

Рассмотрим эти действия по порядку. Например, у нас есть select с id=”sel”:

<select id=“sel” name=“sel”>
<option value=“0″>zero</option>
<option value=“1″>one</option>
<option value=“2″>two</option>
<option value=“3″>three</option>
</select>
  1. Получение значения выбранного элемента
    $(‘#sel option:selected’).val()
    
  2. Получить текст выбранного элемента
    $(‘#sel option:selected’).html();
    
  3. Добавить элемент в конец списка
    $(‘#sel’).append( $(‘<option value=”4″>four</option>’) );
    
  4. Добавить элемент в начало списка
    $(‘#sel’).prepend( $(‘<option value=”-1″>minus</option>’) );
    
  5. Вставить элемент после заданного элемента (после второго)
    $(‘#sel option:nth-child(2)’).after($(‘<option value=”7″>inserted</option>’));
    
  6. Удалить элемент (выбранный)
    $(‘#sel option:selected’).remove();
    
  7. Очистить select
    $(‘#sel’).empty();
    
  8. Сделать элемент выбранным (последний)
    $(‘#sel option:last’).attr(’selected’, ’selected’);
    
  9. Сделать элемент недоступным (первый)
    $(‘#sel option:nth-child(3)’).attr(‘disabled’, ‘disabled’);
    
  10. И немного экзотики :) Изменить цвет текста всех элементов, кроме выбранного
    $(‘#sel :not(option:selected)’).css(‘color’, ‘red’);
    

Как видите, ничего сложного здесь нет. В седующих постах будет рассмотрена информация
о работе с другими HTML элементами на jQuery.

Окт 6

4 октября 2008 года прошел очередной конкурс “Программания” от компании (экс Validio) Global Logic. Это был 13 по счету конкурс, проходил он в здании Харьковского театра оперы и балета - народу было очень много. Стоит отметить, что в этом году конкурс проходил не только в Харькове, а еще в Киеве и Львове. Призы были стандартные (много было мониторов), главный приз - MacBook Pro :)
В этом году вопросы мне понравились - отвечал на темы PHP, Dynamic HTML, AJAX, XML, Основы SQL, English ну и совсем чуть чуть .NET.
Количество граблей было достаточным. Каждый второй вопрос, естественно, был с подвохом. Поделюсь с вами этими каверзными вопросами.

Dynamic HTML

1. Как будет выглядеть блок? (какой будет вид bordera?)

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<style>
 .red     { border:1px solid red;      }
 .blue    { border:1px solid blue;     }
 .yellow { border:1px solid yellow; }
</style>
</head>
<body>

<div class=red yellow blue>
  Block with border
</div>

</body>
</html>

И как вы думаете?
Ответ: на самом деле блок будет иметь ЖЕЛТУЮ рамку, т.к. CSS класс “yellow” был определен последним в секции style (а порядок задания классов в элементе не имеет значения).

2. Вопрос по поводу приведения типов в javascript:

Каким будет значение переменной a?

var a = 1 + 2 + “3″;

Ответ: 33
Javascript изначально выполнит сложение целых чисел, а потом произведет конкатенацию со строкой.

3. Подвох при работе со строками в javascript (replace)

Каким будет значение переменной s?

var s = “000,777,000,777″;
s = s.replace(“000″, “111″);

На первый взгляд, хочется сказать, что результирующая строка будет выглядеть так: “111,777,111,777″.
Но в действительности метод replace предназначен для работы с регулярными выражениями. В данном случае первый параметр - строка “000″ рассматривается как регулярное выражение и результатом будет строка “111,777,000,777″ (перестановка выполнится при первом нахождении подстроки “000″).
Если же вам нужно заменить подстроку в строке javascript, то следует добавить в регулярное выражение модификатор g (global):

var s = “000,777,000,777″;
s = s.replace(/000/g, “111″);

Здесь уже выполнится замена всех вхождений подстроки и результатом будет “111,777,111,777″.

4. Добавление комментария в div средствами DOM.

В принципе, ничего сложного. Просто никогда не пользовался - да и вообще не пойму кому такое нужно?
Например, есть div:

<div id=“block”>
 Нуждаюсь в комментарии
</div>

Добавление комментария:

document.getElementById(“block”).appendChild(document.createComment(“русский коммент”));

ИМХО, этот вопрос был включен с мыслью о том, что никто не использует это на практике. document.createComment встречается гораздо реже чем document.createElement :)

По PHP граблей было куда меньше, так что эти вопросы рассматривать не буду. Пожалуй, единственное, что было новым для меня - один момент относительно обработки исключительных ситуаций. Информацию эту узнал в тот же день, когда пошел на очередную пару по JAVA (я теперь каждую субботу еще и на JAVA хожу :).
Момент заключается в следующем: если у нас есть наследники класса Exception (например, MyException) и если в блоке try возможен выброс исключений родительского класса и класса наследника, то отлавливать их нужно в порядке от наследника до родителя. Следующий пример показывает корректный вариант следования блоков catch:

<?php
class MyException extends Exception
{
    public function __construct($msg, $code)
    {
        parent::__construct($msg, $code);
    }
}

try {
    throw new MyException(‘Some message’);    
}
catch (MyException $e) {
    echo “MyException”;
}
catch (Exception $e) {
    echo “Exception (base)”;
}
?>

Данный пример выводит строку “MyException” - попытка обработать исключение типа MyException удалась.
Но если поменять порядок блоков catch:

<?php
try {
    throw new MyException(‘Some message’);    
}
catch (Exception $e) {
    echo “Exception (base)”;
}
catch (MyException $e) {
    echo “MyException”;
}
?>

В этом случае сработает первый блок catch и результатом будет строка “Exception (base)”

Вот еще вспомнил вопрос, подвох в котором был касательно ссылок в PHP.

<?php
$a = 1;
$b = &$a;

unset($a);
echo $b;
?>

Значение переменной $b будет равно 1. Ссылка дает возможность переменным указывать на одно и то же содержание. Это не значит, что $b указывает на $a, поэтому значение $b по прежнему 1.

Пожалуй это все что хотел написать по данной теме.

Июл 2

Часто веб разработчик пишет javascript код не обращая особого внимания на производительность (особенно при использовании какого-либо framework’а). Но когда javascript становится основной частью приложения следует занятся оптимизацией. Хочу поделиться некоторыми советами из личной практики.
Одной из главных характеристик веб приложения является скорость загрузки. Уже на этом этапе можна оптимизировать следующие вещи:

  • количество подключаемых javascript (и css) файлов
  • размер загружаемых файлов

Для того чтобы получить javascript или css файл браузер отсылает GET запрос на сервер. При чем время загрузки примерно одинаково для файлов с разным размером (10 - 100 Kb). Из этого следует, что чем больше файлов мы подключаем, тем больше времени необходимо браузеру, чтобы их загрузить (даже не смотря на их размер). Поэтому, желательно минимизировать количество подключаемых скриптов.

Размер загружаемых файлов - тоже важный момент. Рекомендуется минимизировать размер файлов путем удаления комментариев, лишних пробелов и т.д. Это можно сделать при помощи данного ресурса: http://dean.edwards.name/packer/. Я написал свой codeMinifier на php - и вам советую тоже, потому что инструмент Дэна Эдвардса не корректно минимизирует javascript файлы с регулярными выражениями. Также можно воспользоваться Java приложением YUI Compressor.

После минимизации javascript файла его можно запаковать в архив gzip. Большинство современных браузеров поддерживают Content-Encoding:  gzip (кроме Safari). Такое сжатие практически не снижает производительности скриптов, но отлично сказывается на времени загрузки страницы.

Вторая сторона оптимизации javascript - это оптимизация самого кода. Данная тема заслуживает отдельной статьи, но я хотел бы отметить, что при использовании jQuery остерегайтесь использования метода html() - лучше используйте “родной” для javascript способ - свойство innerHTML. А в прочем, можете сами поэкспериментировать, замеряя скорость работы своих javascript функций:

function doSomething()
{
  var  st = new Date();

  // код функции

  alert(“Время выполнения doSomething = “ + parseInt(new Date() - st ,10));
}

Оптимизируйте, и да будет вам щастье ;-)))

Май 23
Clone Javascript object
icon1 Snowcore | icon2 javascript | icon4 05 23rd, 2008| icon315 Comments »

В javascript объекты передаются и копируются по ссылке. Рассмотрим пример:

// Создаем объект с единственным полем number
var obj = { number: 1 };

// Копируем объект
var copy = obj;
copy.number = 777;

alert(obj.number);

В результате выполнения данного кода на экран будет выведено число 777 (а не 1 как ожидалось). Переменные obj и copy - одна и та же ссылка.

Как передать объект по значению? Нам нужна функция clone.

Я пробовал множество функций, но в них было много недостатков (не копировались методы объекта, или массивы). В итоге нашлась хорошая реализация (из фреймворка ExtJS). Я немного подправил эту функцию, вот результат:

function clone(o) {
 if(!o || ‘object’ !== typeof o)  {
   return o;
 }
 varc = ‘function’ === typeof o.pop ? [] : {};
 var p, v;
 for(p in o) {
 if(o.hasOwnProperty(p)) {
  v = o[p];
  if(v && ‘object’ === typeof v) {
    c[p] = clone(v);
  }
  else {
    c[p] = v;
  }
 }
}
 return c;
}

Проверяем действие функции:

var o = { a:1, get:function(){ alert(this.arr[1]);}, arr: [1,2,3] };
var c = clone(o); // делаем клон объекта

c.arr[0] = 77;
c.arr[1] = 88;
c.arr[2] = 99;

// Значения остались прежними
alert(o.arr[0]); // 1
alert(o.arr[1]); // 2
alert(o.arr[2]); // 3

// Методы тоже были скопированы
c.get(); // 88
o.get(); // 2

Как видно из примера, функция clone скопировала объект o вместе со всеми его свойствами и методами.

Пользуйтесь на здоровье :)

« Previous Entries Next Entries »