Быстрая разработка веб-интерфейсов на JavaScript презентация

Содержание

Зачем это и с чего всё началось? Сложность непосредственной работы с DOM Избыточность классического JS-кода Кроссбраузерность

Слайд 1Быстрая разработка веб-интерфейсов на JavaScript
Георгий Калашников
Заседание #000012


Слайд 2Зачем это и с чего всё началось?
Сложность непосредственной работы с DOM
Избыточность

классического JS-кода
Кроссбраузерность

Слайд 3Holly Wars
Prototype/Scriptaculous (> 200Kb)

Mootools

Dojo


Слайд 4jQuery
54.5 KB [15KB packed]
CSS 1-3 и немного XPath


IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+

Огромное сообщество
Доступная документация
Лёгкая расширяемость (1441 плагин)


Слайд 5$
$(селектор, [контекст])
$(HTML)
$(document | window | form)
$(function)


Слайд 6$(document).ready()

window.onload = myOnloadHandler;

$(document). ready (myInitFunction);
function myInitFunction()
{
$(“body”). append( $(“Hi, folks!”)

);
}

MyScript.js



Слайд 7Селекторы
#id
tag
.class
*
selector1, selector2, …, selectorN
предок потомок
отец > сын
пред + след
пред

~ все след
[атрибут]
[атрибут = значение]
[атрибут != | *= | ^= | $= значение]
[][]…[][]


Слайд 8[Селектор] :фильтр
:first /last
:not(селектор)
:even /odd
:eq(ind) /gt /lt/
:header
:contains(текст)
:empty лист
:hidden /visible
:input
:text
:button
:enabled
:checked
:selected
:contains(текст)
:empty


Слайд 9Ещё раз о $
eq( index )
filter ( выражение | function )
slice

( from, [to] )
get( index )
length

OMG
это массив!


Слайд 10Цепные вызовы — chaining
$(“div”). children(). hide(). end() . addClass(“c”);


Слайд 11Долой унылые методы манипуляции с DOM!
html ( ) html ( val

)
text ( ) text ( val )
append ( content ) appendTo ( selector )
prepend ( content ) prependTo ( selector )
after ( content ) before ( content )
insertAfter ( content ) insertBefore ( content )
replaceWith ( content ) replaceAll ( selector )
empty ( ) remove ( expr )
wrap ( html | elem )
wrapAll ( html | elem )
wrapInner ( html | elem )
clone ( [true] )

Слайд 12картинка для привлечения внимания


Слайд 13События
bind( type, data, fn )
one( type, data, fn )
trigger(

type, data )
triggerHandler( type, data )
unbind( type, fn )

Слайд 14События → плюшки!
hover ( over, out )
toggle ( [fn1, fn2,

…, fnN] )
click ( [fn] )
dbclick ( [fn] )
resize ( fn )
mouseover ( fn )
keypress ( [fn] )

blur( fn )
change( fn )
error( fn )
focus( )
focus( fn )
keydown( fn )
keypress( fn )
keyup( fn )
load( fn )
mousedown( fn )
mousemove( fn )
mouseout( fn )
mouseover( fn )
mouseup( fn )
resize( fn )
scroll( fn )
select( fn )
submit( fn )
unload( fn )


Слайд 15События → preventDefault
$(“a”). click ( myClickHandler );
function myClickHandler ( event )
{
//

Перехода по ссылке не будет
event.preventDefault();
$( this ) . hide();
}

Слайд 16$.ajax();


Слайд 17АЙ-АЙ
$.ajax ( { } )
.load ( url, [data], [callback])
$.get (

url, [data], [callback], [type])
$.getJSON( url, [data], [callback])
$.post( url, [data], [callback], [type])

+ события ajaxError ( callback )

Слайд 18Эффекты и анимация
show / hide ( [speed], [callback] )
toggle ()
slideUp

/slideDown /slideToggle (speed, [clbk])
fadeIn / fadeOut(s, [cb]) / fadeTo(s, o, [cb])
animate()
stop()
queue() / dequeue()

Слайд 19Plugins → свой плагин
( function($)
{
$. fn. myPlugin = function()


{
return this.each(function() { /* Пыщ!*/ });
};
})(jQuery);

Пример гов плохого кода


Слайд 20Plugins → свой плагин 2
(function($) { $.fn.myPlugin = myPlugin; })(jQuery);

function myPlugin($)
{


return this.each(myPluginWithEach);
}

function myPluginWithEach()
{
$(this).hide();
}

Слайд 21Plugins → готовенькое
http://plugins.jquery.com/

http://bassistance.de/jquery-plugins/

http://ui.jquery.com/


Слайд 22Ссылки
http://jquery.com/

http://visualjquery.com/

http://learningjquery.com/


Слайд 23Да прибудет с вами сила jQuery!
GeorgeKalashnikov@gmail.com


Обратная связь

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

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

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


Для правообладателей

Яндекс.Метрика