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

Рабочий конспект изучения языков и web-технологий: Javascript и AJAX

  
Мистический роман
БЛИЗКАЯ ДАЛЬ
Татьяны Катушонок
Купить в магазинах:
Близкая даль
Близкая даль
Близкая даль
Близкая даль
Близкая дальБлизкая даль
Озарение души
Сборник стихов Татьяны Катушонок
Осознание красоты спасет мир
Web technologies and programming languages
Web технологии и языки
PHP
Изучаем PHP
Клиент-сервер
XML - XSLT
Изучаем XML
Преобразования
HTML
Изучаем HTML
Теги
Javascript и AJAX
Три кита
Основы языка
DOM
Прогулка по DOMу
Events and Listeners
Список событий
Events in JQuery
Google JQuery
Новый синтаксис JQuery
Selectors
Слайд-шоу
Примеры jQuery
All Selector(*)
:animated Selector




Cомнения отброшены. Эволюция познания.
понедельник
Просто рабочий конспект
Сомнения отброшены. Несмотря на все нападки Эволюция человечестваприверженцев других языков, 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

Поехали!

Ярлыки: , , ,

Подпишись на новости Javascript и AJAX по e-mail
posted by Sergey @ 23:56   0 comments
среда
Просто рабочий конспект
Подпишись на новости Javascript и AJAX по e-mail
posted by Sergey @ 06:37   0 comments
5.6 :animated Selector
Просто рабочий конспект

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

$("#run").click(function(){
$("div:animated").toggleClass("colored");
});
function animateObj() {
$("#mover").slideToggle('slow', animateObj);
}
animateObj();

Пример:



Такие живые кубики...
Подпишись на новости Javascript и AJAX по e-mail
posted by Sergey @ 23:47   0 comments
5.5 Примеры. Selectors. All selector (*)
Просто рабочий конспект


Найти все элементы, включая 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, поэтому в расчёт идут ещё и скрытые элементы. Их будет несколько больше, чем видно визуально.

Ярлыки:

Подпишись на новости Javascript и AJAX по e-mail
posted by Sergey @ 03:12   0 comments
5.4 Selectors
вторник
Просто рабочий конспект
Исходя из концепции Трёх китов, уровень 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;

Ярлыки: ,

Подпишись на новости Javascript и AJAX по e-mail
posted by Sergey @ 06:42   0 comments
5.3 Новый синтаксис JQuery. Изменения в последних версиях библиотеки.
Просто рабочий конспект

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

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

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

Ярлыки: ,

Подпишись на новости Javascript и AJAX по e-mail
posted by Sergey @ 01:46   0 comments
5.2 Learning JQuery. Примеры из книги через Google.
понедельник
Просто рабочий конспект
$() - базовая функция библиотеки. Сокращение от 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).

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


2

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

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() {...});

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

Ярлыки: ,

Подпишись на новости Javascript и AJAX по e-mail
posted by Sergey @ 01:20   0 comments
Близкая даль
Подпишись на новости Javascript и AJAX письмом:

Напишите ваш e-mail :

Delivered by FeedBurner
Предыдущий пост
Архив
Линки
Статистика

Subscribe in a reader

Powered by FeedBurner

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