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

Август 29, 2022

Главная
Технология
Быстрая разработка веб-интерфейсов на JavaScript

Содержание

2. Зачем это и с чего всё началось? Сложность непосредственной работы с DOM Избыточность классического JS-кода Кроссбраузерность
3. Holly Wars Prototype/Scriptaculous (> 200Kb) Mootools Dojo
4. jQuery 54.5 KB [15KB packed] CSS 1-3 и немного XPath IE 6.0+, FF 2+, Safari 2.0+,
5. $ $(селектор, [контекст]) $(HTML) $(document | window | form) $(function)
6. $(document).ready() window.onload = myOnloadHandler; $(document). ready (myInitFunction); function myInitFunction() { $(“body”). append( $(“ Hi, folks! ”)
7. Селекторы #id tag .class * selector1, selector2, …, selectorN предок потомок отец > сын пред +
8. [Селектор] :фильтр :first /last :not(селектор) :even /odd :eq(ind) /gt /lt/ :header :contains(текст) :empty лист :hidden /visible
9. Ещё раз о $ eq( index ) filter ( выражение | function ) slice ( from,
10. Цепные вызовы — chaining $(“div”). children(). hide(). end() . addClass(“c”);
11. Долой унылые методы манипуляции с DOM! html ( ) html ( val ) text ( )
12. картинка для привлечения внимания
13. События bind( type, data, fn ) one( type, data, fn ) trigger( type, data ) triggerHandler(
14. События → плюшки! hover ( over, out ) toggle ( [fn1, fn2, …, fnN] ) click
15. События → preventDefault $(“a”). click ( myClickHandler ); function myClickHandler ( event ) { // Перехода
16. $.ajax();
17. АЙ-АЙ $.ajax ( { } ) .load ( url, [data], [callback]) $.get ( url, [data], [callback],
18. Эффекты и анимация show / hide ( [speed], [callback] ) toggle () slideUp /slideDown /slideToggle (speed,
19. Plugins → свой плагин ( function($) { $. fn. myPlugin = function() { return this.each(function() {
20. Plugins → свой плагин 2 (function($) { $.fn.myPlugin = myPlugin; })(jQuery); function myPlugin($) { return this.each(myPluginWithEach);
21. Plugins → готовенькое http://plugins.jquery.com/ http://bassistance.de/jquery-plugins/ http://ui.jquery.com/
22. Ссылки http://jquery.com/ http://visualjquery.com/ http://learningjquery.com/
24. Скачать презентацию

Слайд 2

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

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

Слайд 3

Holly Wars
Prototype/Scriptaculous (> 200Kb)
Mootools
Dojo

Слайд 4

jQuery
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()

Слайд 19

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

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

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

Слайд 20

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

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

Слайд 21

Plugins → готовенькое
http://plugins.jquery.com/
http://bassistance.de/jquery-plugins/
http://ui.jquery.com/

Слайд 22

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

Содержание

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

Holly WarsPrototype/Scriptaculous (> 200Kb)MootoolsDojo

jQuery54.5 KB [15KB packed]CSS 1-3 и немного XPath IE 6.0+, FF

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

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

Hi, folks!

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

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

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

Цепные вызовы — chaining$(“div”). children(). hide(). end() . addClass(“c”);

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

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

Событияbind( type, data, fn ) one( type, data, fn ) trigger(

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

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