Javascript и AJAX. Изучение языков и web-технологий

Cомнения отброшены. Эволюция познания.

noreply@blogger.com (Sergey) — Tue, 12 Nov 2019 07:56:00 +0000

Сомнения отброшены. Несмотря на все нападки приверженцев других языков, javascript развивается и активно используется повсеместно.

Очередной этап в развитии - ECMAScript 4th Edition (ES4).

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

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

Те есть, начинаются периодические колебания. Образно говоря, от технократического века - обратно в каменный (но уже на новом уровне развития). Фантастика!

Ближе к телу.
Литература:
1. Simply JavaScript by Kevin Yank & Cameron Adams. Есть файлы с примерами.
2. Pure Javascript by R.Allen Wyke,Jason D. Gilliam, Charlton Ting, Sean Michaels
3. Visual QuickStart Guide JavaScript and Ajax for the Web By Tom Negrino, Dori Smith
4. Learning JQuery By Jonathan Chaffer and Karl Swedberg

Поехали!

noreply@blogger.com (Sergey) — Wed, 07 Sep 2011 13:37:00 +0000

5.6 :animated Selector

noreply@blogger.com (Sergey) — Thu, 25 Mar 2010 06:47:00 +0000

Актуален для элементов DOM, находящихся в состоянии анимации, активизированном функциями animate(), slideToggle()...

$("#run").click(function(){

$("div:animated").toggleClass("colored");

});

function animateObj() {

$("#mover").slideToggle('slow', animateObj);

}

animateObj();

Пример:

Такие живые кубики...

5.5 Примеры. Selectors. All selector (*)

noreply@blogger.com (Sergey) — Wed, 24 Mar 2010 10:12:00 +0000

Найти все элементы, включая BODY, HEAD,... во всём документе.

var elementCount = $("*").css("border","3px solid #ceafff").length;

$("body").prepend("Найдено всего " + elementCount + " элементов");

Найти все дочерние элементы внутри документа начиная от конкретного объекта c id = curr_ID:

var elementCount = $("#curr_ID").find("*").length;

Эквивалентно :

var elementCount = $("#curr_ID *").length;

Замечание. Очень медленный селектор.

Поскольку это страничка Google Blogger, поэтому в расчёт идут ещё и скрытые элементы. Их будет несколько больше, чем видно визуально.

5.4 Selectors

noreply@blogger.com (Sergey) — Tue, 23 Mar 2010 13:42:00 +0000

Исходя из концепции Трёх китов, уровень behavior строится следующим образом:

Создаются CSS-стили на все случаи жизни по классам.

А затем данным на странице динамически присваивается нужный класс в зависимости от происходящих событий.

Доступ к элементам DOMа как раз и позволяют получить замечательные селекторы - функции JQuery.

Кое-что из документации:

$(‘a[title]’) - выбрать все линки, у которых есть атрибут title

$(‘div:has(ol)’) - выбрать все DIV элементы, у которых есть элемент OL

$(‘tr:even’) -чётные строки таблицы.

$(‘tr:odd’) - нечётные строки таблицы.

Другой способ:
$(‘tr’).filter(‘:odd’).addClass(‘odd’);

$(‘td:contains(“Some text”)’) – поле таблицы, содержащее текст “Some text”

При добавлении класса элементу JQuery сам проверяет, есть ли уже этот класс у элемента.

$('tr:not([th]):even').addClass('even') - чётные строки таблицы, кроме заголовка

$('td:contains("Henry")').next().addClass('highlight') - Следующий «сосед»

$('td:contains("Henry")').siblings().addClass('highlight') - все следующие «соседи»

Но что самое замечательное - так это цепочки !
В одной строке кода можно разместить любую длинную комбинацию:

$('td:contains("Henry")') . parent(). find('td:eq(1)').addClass('highlight'). end(). find('td:eq(2)'). addClass('highlight');

Супер!

Каждый селектор/выражение возвращает jQuery объект:

var myTag = $('#my-element').get(0).tagName;

Вместо get(0) можно просто [0]:

var myTag = $('#my-element').[0].tagName;

5.3 Новый синтаксис JQuery. Изменения в последних версиях библиотеки.

noreply@blogger.com (Sergey) — Tue, 23 Mar 2010 08:46:00 +0000

Разбирая примеры из книг по JQuery, столкнулся с тем, что кое-что не работает, как обещано.
Оказалось, что начиная с версии 1.3 были внесены изменения в синтаксис вызова функций.

Получилась такая таблица ( буду дополнять по ходу):

.	Стало	Было	О чём речь
1	$('a[title]')	$('a[@title]')	все линки с атрибутом title
2	$('div:has(ol)')	$('div[ol]')	все div, содержащие ol

5.2 Learning JQuery. Примеры из книги через Google.

noreply@blogger.com (Sergey) — Mon, 08 Feb 2010 09:20:00 +0000

$() - базовая функция библиотеки. Сокращение от jQuery()

Например:

$('p')
$('#item_id')
$('.data_class')

В скобках - любой селектор.
Мощь используемых селекторов - объединяет в себе CSS и xPath.

Ещё варианты.
Поиск элементов:
$( selector, [ context ] )
где selector - A string containing a selector expression
context - A DOM Element, Document, or jQuery to use as context
$( element )
$( elementArray )
$( jQuery object )
$()

Создание элементов:
$( html, [ ownerDocument ] )
где html - A string of HTML to create on the fly (HTML, not XML).
ownerDocument - A document in which the new elements will be created

$( html, props )
где props - An map of attributes, events, and methods to call on the newly-created element.

$( callback ) - Executes the function when the DOM is ready to be used
Аналогично $(document).ready()

На заметку - хорошая шпаргалка по JQuery 1.4

Кстати, Google предоставляет jquery блоггеру.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
...some code here...
</script>

Проверим:)
Возьмём живьём пример из книги "Learning JQuery" by Jonathan Chaffer and Karl Swedberg.

Правда, примеры в книге написаны для версии 1.2.6. и чтобы использовать свежую версию 1.4.1, надо просто убрать собаку '@' в выражениях типа:
$('a[@href^="mailto:"]') , т.е. получим :
$('a[href^="mailto:"]') (это изменение сделали начиная с версии 1.3).

А вот как выглядит результат примера:

Selectors

How to Get Anything You Want

Selected ShakeSpeare Plays

Comedies
- As You Like It
- All's Well That Ends Well
- A Midsummer Night's Dream
- Twelfth Night
Tragedies
- Hamlet
- Macbeth
- Romeo and Juliet
Histories
- Henry IV (email)
  - Part I
  - Part II
- Henry V
- Richard II

Shakespeare Table

Title	Category	Year Published
As You Like It	Comedy
All's Well that Ends Well	Comedy	1601
Hamlet	Tragedy	1604
Macbeth	Tragedy	1606
Romeo and Juliet	Tragedy	1595
Henry IV, Part I	History	1596
Henry V	History	1599

Ух-ты! Всё работает!..
Google также предоставляет свежую версию JQuery 1.4.1.
Еще написано, что можно прописывать google.load("jquery", "1.4.1"), но всё работает и без этого. Пока не знаю , где надо использовать этот метод...

А вот какие интересные штучки в коде.

Выбор элементов списка заданного id и условие :not

$(document).ready(function() {
$('#selected-plays > li').addClass('horizontal');
$('#selected-plays li:not(.horizontal)').addClass('sub-level');});

Добавление класса всем линкам mailto и pdf

$('a[href^="mailto:"]').addClass('mailto');
$('a[href$=".pdf"]').addClass('pdflink');
$('a[href*="mysite.com"]').addClass('mysite');

Выделение чётных и нечётных строк таблицы

$('#example_table th').parent().addClass('table-heading');
$('#example_table tr:not([th]):even').addClass('even');
$('#example_table tr:not([th]):odd').addClass('odd');
$('#example_table td:contains("Henry")').siblings().addClass('highlight');

Везде используется функция:
$(document).ready(function() {...});

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

5.1 Events in JQuery

noreply@blogger.com (Sergey) — Thu, 21 Jan 2010 08:43:00 +0000

Собственно говоря, один раз разобраться с различием моделей стандарта W3C и MS IE полезно, безусловно. Один раз. Но всё время выполнять эти проверки и лепить свои функции - не рационально.
JQuery делает всё это просто замечательно! Берёт на себя все заботы по различию браузеров.
Надо просто воспользоваться библиотекой - и вперёд!

$(document).ready() event handler.
Выполняет функции встроенного события onload .

Однако window.onload срабатывает, когда документ полностью загружен. Т.е., каждый html-элемент на странице доступен для javascript.

$(document).ready() срабатывает, когда DOM готов к использованию, не ожидая загрузки связанных файлов (например, картинок).
window.onload можно присвоить только один обработчик. Каждый новый заменяет предыдущий.

Напротив, механизм $(document).ready() организует очередь вызовов обработчиков в порядке их регистрации.

Эквивалентные сокращения для $(document).ready() :
$().ready(function() { ...наш код ...});
или $(function() { ...наш код ...});

Впрочем, придется немного вернуться назад - к кирпичикам JQuery.

4.2 Список событий

noreply@blogger.com (Sergey) — Wed, 20 Jan 2010 09:15:00 +0000

Для заметки.
Список кросс-платформенных рекомендуемых событий Javascript:

blur
change
click
dblclick
error
focus
keydown
keypress
keyup
load
mousedown
mousemove
mouseout
mouseover
mouseup
resize
scroll
select
submit
unload

4.1 Events and Listeners

noreply@blogger.com (Sergey) — Wed, 20 Jan 2010 08:55:00 +0000

Listener – обработчик, наблюдающий за конкретным событием. Перевод не дает приемлемого понятия: слушатель,слухач, жучок...
Оставляем просто листенер.
Event handler – обработчик события (функция)
Привязка обработчика к событию:

element.onevent = eventHandler;

Например,
var link = document.getElementById("myLink");
link.onclick = myLink.clickHandler;

Обработчик события должен быть назначен только после загрузки страницы, т.е на момент существования html-элемента.

Default actions(действия по умолчанию).
Например:

браузер следует по кликнутой ссылке,
сабмитит форму при нажатии кнопки submit или enter в форме,
перемещает keyboard focus при нажатии tab

Отмена default action – возврат false.

var myLink = { clickHandler: function() {
return confirm("Are you sure you want to leave this site?");}
};}

Функция confirm (аналог alert) возвращает true при нажатии Ok и false при нажатии Cancel..
Эти ф-ции встроены в браузер!!!

Event handler может обрабатывать события для нескольких элементов!
Используется ключевое слово this.

Например, открывать все линки в новом окне:

clickHandler: function() {
    open(this.href);
    return false;
}

При вызове метода объекта object.method() внутри кода этого метода ключевое слово this относится к данному объекту.
Можно выделить только часть линков в класс external.

var externalLinks = {
init: function(){
var extLinks = Core.getElementsByClass("external");
for (var i = 0; i < extLinks.length; i++) {
   extLinks[i].onclick = externalLinks.clickHandler;
}
},
clickHandler: function() {
open(this.href);
return false;
}};

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

А по жизни - нужно несколько. Например, при обработке полей формы кнопке submit нужно назначить разные обработчики проверки корректности данных.

Ограничение обходится с помощью event listeners.
W3C:
element.addEventListener("event", eventListener, false);
element.removeEventListener("event", eventListener, false);

MS IE опять выделилась:
element.attachEvent("onevent", eventListener);
element.detachEvent("onevent", eventListener);

Отмена default actions:
W3C: метод preventDefault(),
Модель событий MS – объект event не передаётся листенеру , а доступен через глобальный объект event со свойством returnValue вместо метода:
event.returnValue = false;

Различение браузеров – способом проверки объекта typeof.
clickListener: function(event) {
   if (typeof event == "undefined") {
          event = window.event;
   }
   if (!confirm("Are you sure you want to leave this site?")) {
        if (typeof event.preventDefault != "undefined") {
            event.preventDefault();
        }
        else {
            event.returnValue = false;
   }}}

Распространиение событий в ДОМе. 3 фазы:

capture (нет в MS IE)
target
bubling

Во время фазы capture событие продвигается по ДОМу начиная с document, html, body вплоть до элемента и на каждом этапе проверяет наличие capture event listener для этого типа события. Если есть такой - запускается. Тип листенера задаётся 3-м параметром true/false. Этот параметр отсутствует в MS IE, поскольку в схеме MS нет 1-й фазы.

На 2-й фазе target запускается листенер элемента.
На 3-й фазе bubling событие перемещается вверх по ДОМу и на каждом шаге запускается (если есть) not capturing event listener.

Отмена фазы bubling:
W3C: event.stopPropagation();
MS IE: event.cancelBubble = true;

Кликни или чтобы увеличить/уменьшить изображение...

3.2 Прогулка по DOMу. Доступ к элементам.

noreply@blogger.com (Sergey) — Mon, 16 Nov 2009 14:50:00 +0000

Перемещение по html-документу с помощью стандартных функций доступа.

По ID элемента и по имени:

document.getElementById("id")

document.getElementsByTagName("tagname")

Надо всегда выполнять проверку на null для getElementById:

var target = document.getElementById("sender");

if (target != null)

{

alert(target.nodeName);

}

а для getElementsByTagName - длину массива = 0:

var listItems = document.getElementsByTagName("li");

var numItems = listItems.length;

Первое время спотыкался в названии функции getElementByTagName вместо getElementsbyTagName и в правильном верхнем/нижнем регистрах названий функций. Напишешь вроде бы правильно - а ничего не работает...

Сужение списка элементов.
Получаем более общий список, а затем внутри применяем ту же функцию getElementsByTagName:

var lists = document.getElementsByTagName("ul");

var secondList = lists[1];

var secondListItems = secondList.getElementsByTagName("li");

Массив ВСЕХ элементов html страницы:

var elementArray = [];

if (typeof document.all != "undefined") {

elementArray = document.all;

}

else {

elementArray = document.getElementsByTagName("*");

}

Поиск элемента по имени класса.
Стандартной функции нет, поэтому разные библиотеки предлагают свои.Вот пример реализации:

Core.getElementsByClass = function(theClass) {

var elementArray = [];

if (document.all) {

   elementArray = document.all;

} else {

   elementArray = documentGetElementsByName("*");

}

var matchedArray = [];

var pattern = new RegExp("(^| )" + theClass + "( |$)");

for (var i = 0; i < elementArray.length; i++) {

    if (pattern.test(elementArray[i].className)) {

        matchedArray[matchedArray.length] = elementArray[i];

    }

}      return matchedArray;

};

Через свойства DOM элемента можно найти родительский элемент, дочерние, соседей:

var oliver = document.getElementById("oliver");

var paragraph = oliver.parentNode;

var child1 = paragraph.childNodes[0];

var alex = paragraph.firstChild;

var jone = paragraph.lastChild;

var tom = alex.nextSibling;

var ann = tom.previousSibling;

Вот такая прогулка по ДОМу...

3.1. DOM. Document Access.

noreply@blogger.com (Sergey) — Thu, 12 Nov 2009 08:04:00 +0000

Для доступа, создания, манипуляций с частями документа консорциумом W3C была создана Document Object Model (DOM) - система, позволяющая скриптам воздействовать на документ. С её помощью javascript может не только изменять структуру документа, но и получать доступ к стилям документа и изменть его вид.
Как только браузер загрузил документ (просто как последовательность символов), он начинает разбирать его и сохраняет интерпретацию html-кода в виде дерева DOM.
Согласно этой модели, каждый элемент HTML- документа становится объектом.
Javascript может получить доступ к этим элементам с пом. встроенных функций на лету. DOM связывает каждый созданный объект для элемента HTML с соответствующим родителем/потомком.

Для построения DOM документа каждомый элемент в html представляется в виде node с позицией, определяемой нодами родителей/потомков. Каждый element node х-зуется именем элемента (head,body,h1,...), но это имя не уникально. Уникальность обеспечивается, например, атрибутом id. На вершине дерева всегда находится document node.

Кликнииличтобы увеличить/уменьшить изображение...

В перевод node - узел, но как-то звучит не очень. Буду исп. оригинальную терминологию. Element nodes - один из видов nodes, соответствующий элементам HTML. Однако действительный контент документа находится в других нодах - text nodes и attribute nodes.
Всё, что расположено между угловыми скобками ><, относится к text node в DOM.
Основное отличие от elemеnet nodes: text nodes не имеют потомков!

Следует обратить внимание, что пробелы, новая строка, возврат каретки могут образовывать text nodes. Такие
text nodes по-разному обрабатываются разными браузерами.

Attribute nodes являются частью html элементов (element nodes). Но они не являются потомками element nodes.

2. Программирование на Javascript

noreply@blogger.com (Sergey) — Thu, 12 Nov 2009 08:03:00 +0000

В теле HTML код Javascript размещается внутри тега <script>:

Если скрипт в отдельном файле, то указываем ссылку:

Скрипт выполняется сразу после его загрузки браузером.

Объявление переменных.
Безопаснее всегда использовать ключевое слово var при объявлении переменной.

Javascript не заботится о том, что хранится в переменной. Одна и таже переменная может хранить символ, затем число, затем снова текст или что-угодно.
Определены 4 типа переменых:

числа
строки
логический тип
массивы
объекты

Операторы ++ и --- как в Си:
age++;
--j;

Конкатенация строк:
var sentence = "You are " + 1337

Логические:
var lying = true;
var truthful = false;

Массив:
var rack = [];
rack[0] = "First";
rack[1] = "Second";

var rack = ["First", "Second", "Third", "Fourth"];
var numberArray = [1, 2, 3, 5, 8, 13, 21, 34];
var mixedArray = [235, "Parramatta", "Road"];

Многомерный массив:
var subArray1 = ["Paris", "Lyon", "Nice"];
var subArray2 = ["Amsterdam", "Eindhoven", "Utrecht"];
var subArray3 = ["Madrid", "Barcelona", "Seville"];
var superArray = [subArray1, subArray2, subArray3];

Обращение к элементу :
var city = superArray[0][2];

Наиболее часто исп. св-в- массива - его длина:
var shortArray = ["First", "Second", "Third"];
var total = shortArray.length;

var lastItem = shortArray[shortArray.length – 1];

Добавление нового элемента:
shortArray[shortArray.length] = "Fourth";

Ассоциативные массивы (хэши):
var postcodes = [];
postcodes["Armadale"] = 3143;
postcodes["North Melbourne"] = 3051;
postcodes["Camperdown"] = 2050;
postcodes["Annandale"] = 2038;

Стандартные if-else, while, do while, for().

Передача аргументов функции:

function sandwich(bread, meat)
{
alert(bread + meat + bread);
}

sandwich("Rye", "Pastrami");

Также аргументы функции доступны через массив arguments:

debate("affirmative", "negative");

function debate()
{
var affirmative = arguments[0];
var negative = arguments[1];
}

Возврат значения из функции - return:

Область видимости переменых. Переменные, объявленные вне функции, доступны другим функциям javascript в пределах той же html-страницы. Это global scope.
С помощью ключевого слова var переменные обявляются внутри функции как local scope и доступны только внутри данной функции.

ОБЪЕКТЫ.
Представляют собой амальгаму всех других типов данных.
Объкты существуют как способ организации переменных и функций в логические группы.
Свойства объекта предст. собой переменные, доступные только через объект.
Методы - это функции, доступные только через объект.
Примером встроенного объекта является массив.

Создание объекта:
var Robot = new Object();

Теперь можно добавлять к объекту свойства и методы:
Robot.color ="red";
Robot.displayMessage = function() {
alert("Some message");
}; //обязательно точка запятой при таком объявлении!

Вызов: Robot.displayMessage();

Использование литерального синтаксиса объекта:

var Robot =
{
color: "red",
displayMessage: function()
{
alert("Some message");
}
}; //обязательно точка запятой !

Unobtrusive Scripting in the Real World
В большинстве случаев, практически всегда, код javascript загружается раньше кода всей html-страницы. Это может привести к некоторым незначительным проблемам. Браузеры выполняют код javascript сразу после его загрузки, не дожидаясь загрузки всей страницы. Если в коде есть обращение к элементов, которые ещё не загрузились, то можно не увидеть ожидаемого эффекта.
Для облегчения жизни создаётся специальный объект Core с методом start(), который наблюдает за статусом загрузки страницы и сообщает нашей функции, когда можно безопасно выполняться. Это делается вызовом метода init() нашего объекта.
Т.о., наш объект выглядит :

var Robot = {
init: function()
{
Your HTML modifying code
}
};
Core.start(Robot);

1.Три кита построения web-приложений

noreply@blogger.com (Sergey) — Thu, 12 Nov 2009 08:00:00 +0000

The Three Layers of the Web

На схеме представлены три кита www:

Грамотный подход в web-дизайне - использование 3-х уровней:

Content - HTML
Presentation - CSS
Behaviour - JavaScript

Другими словами, the separation of concerns (отделение мух от котлет...).

Раздельное хранение этих 3-х типов кода - упрощает повторное использование, сокращает дублирование и облегчает поиск ошибок.
Javascript изнутри значительно больше, чем он кажется снаружи - как Tardis языков программирования.

Наиболее популярные библиотеки javascript:

Prototype http://www.prototypejs.org
script.aculo.us http://script.aculo.us
Yahoo! User Interface Library http://developer.yahoo.com/yui

Dojo http://dojotoolkit.org
jQuery http://jquery.com
MooTools http://mootools.net