SlideShare uma empresa Scribd logo
1 de 23
Быстрая разработка  веб-интерфейсов на  JavaScript Георгий Калашников Заседание  #000012
Зачем это и с чего всё началось? ,[object Object],[object Object],[object Object]
Holly Wars ,[object Object],[object Object],[object Object]
jQuery 54.5 KB  [15KB   packed] CSS 1-3  и немного  XPath   IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+ Огромное сообщество Доступная документация Лёгкая расширяемость (1441   плагин)
$ ,[object Object],[object Object],[object Object],[object Object]
$(document).ready() ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],MyScript.js <script type=“text/javascript” src=“MyScript.js”></script>
Селекторы ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[ Селектор ] : фильтр ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],…
Ещё раз о  $ ,[object Object],[object Object],[object Object],[object Object],[object Object],OMG это массив!
Цепные вызовы  — chaining ,[object Object]
Долой унылые методы манипуляции с  DOM ! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
картинка для привлечения внимания
События ,[object Object],[object Object],[object Object],[object Object],[object Object]
События   ->   плюшки!  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],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 )
События   ->  preventDefault ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
$.ajax();
АЙ-АЙ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Эффекты и анимация  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Plugins  -> свой плагин (   function($) {  $.   fn.  myPlugin  = function()  {  return this.each(function() {  /*  Пыщ! */   });  };  })(jQuery); Пример гов плохого кода
Plugins  -> свой плагин  2 (function($) { $.fn.myPlugin = myPlugin;   })(jQuery); function myPlugin($) {  return this.each(myPluginWithEach);  } function myPluginWithEach() { $(this).hide(); }
Plugins  -> готовенькое http://plugins.jquery.com/ http://bassistance.de/jquery-plugins/ http://ui.jquery.com/
Ссылки http://jquery.com/ http://visualjquery.com/ http://learningjquery.com/
Да прибудет с вами сила  jQuery ! [email_address]

Mais conteúdo relacionado

Mais procurados

Михаил Давыдов — JavaScript: Асинхронность
Михаил Давыдов — JavaScript: АсинхронностьМихаил Давыдов — JavaScript: Асинхронность
Михаил Давыдов — JavaScript: АсинхронностьYandex
 
создание HTML игр на элементе canvas
создание HTML игр на элементе canvasсоздание HTML игр на элементе canvas
создание HTML игр на элементе canvasAlexander Samantsov
 
Web осень 2012 лекция 4
Web осень 2012 лекция 4Web осень 2012 лекция 4
Web осень 2012 лекция 4Technopark
 
Groovy и Grails. Быстро и обо всём
Groovy и Grails. Быстро и обо всёмGroovy и Grails. Быстро и обо всём
Groovy и Grails. Быстро и обо всёмRuslan Balkin
 
I tmozg js_school_jquery
I tmozg js_school_jqueryI tmozg js_school_jquery
I tmozg js_school_jqueryITmozg
 
Как писать под Android программы, а не код
Как писать под Android программы, а не кодКак писать под Android программы, а не код
Как писать под Android программы, а не код0leGG
 
Перспективы функционального подхода
Перспективы функционального подходаПерспективы функционального подхода
Перспективы функционального подходаIgor Kashkuta
 
Making Scalable JavaScript Application
Making Scalable JavaScript ApplicationMaking Scalable JavaScript Application
Making Scalable JavaScript ApplicationMikhail Davydov
 
Встраивание языка в строковой интерполятор
Встраивание языка в строковой интерполяторВстраивание языка в строковой интерполятор
Встраивание языка в строковой интерполяторMichael Limansky
 
Написание DSL в Perl
Написание DSL в PerlНаписание DSL в Perl
Написание DSL в Perlmayperl
 
Mongo db aggregation
Mongo db aggregationMongo db aggregation
Mongo db aggregationAcceptic
 

Mais procurados (14)

Михаил Давыдов — JavaScript: Асинхронность
Михаил Давыдов — JavaScript: АсинхронностьМихаил Давыдов — JavaScript: Асинхронность
Михаил Давыдов — JavaScript: Асинхронность
 
создание HTML игр на элементе canvas
создание HTML игр на элементе canvasсоздание HTML игр на элементе canvas
создание HTML игр на элементе canvas
 
Web осень 2012 лекция 4
Web осень 2012 лекция 4Web осень 2012 лекция 4
Web осень 2012 лекция 4
 
Groovy и Grails. Быстро и обо всём
Groovy и Grails. Быстро и обо всёмGroovy и Grails. Быстро и обо всём
Groovy и Grails. Быстро и обо всём
 
I tmozg js_school_jquery
I tmozg js_school_jqueryI tmozg js_school_jquery
I tmozg js_school_jquery
 
Как писать под Android программы, а не код
Как писать под Android программы, а не кодКак писать под Android программы, а не код
Как писать под Android программы, а не код
 
Documents in JavaScript
Documents in JavaScriptDocuments in JavaScript
Documents in JavaScript
 
Перспективы функционального подхода
Перспективы функционального подходаПерспективы функционального подхода
Перспективы функционального подхода
 
Асинхронный JavaScript
Асинхронный JavaScriptАсинхронный JavaScript
Асинхронный JavaScript
 
Making Scalable JavaScript Application
Making Scalable JavaScript ApplicationMaking Scalable JavaScript Application
Making Scalable JavaScript Application
 
Встраивание языка в строковой интерполятор
Встраивание языка в строковой интерполяторВстраивание языка в строковой интерполятор
Встраивание языка в строковой интерполятор
 
msumobi2. Лекция 2
msumobi2. Лекция 2msumobi2. Лекция 2
msumobi2. Лекция 2
 
Написание DSL в Perl
Написание DSL в PerlНаписание DSL в Perl
Написание DSL в Perl
 
Mongo db aggregation
Mongo db aggregationMongo db aggregation
Mongo db aggregation
 

Semelhante a jQuery: быстрая разработка веб-интерфейсов на JavaScript

FPUG Dzyga presentation
FPUG Dzyga presentationFPUG Dzyga presentation
FPUG Dzyga presentationIvan Filimonov
 
Web весна 2013 лекция 10
Web весна 2013 лекция 10Web весна 2013 лекция 10
Web весна 2013 лекция 10Technopark
 
Web осень 2012 лекция 9
Web осень 2012 лекция 9Web осень 2012 лекция 9
Web осень 2012 лекция 9Technopark
 
JavaScript Базовый. Занятие 11.
JavaScript Базовый. Занятие 11.JavaScript Базовый. Занятие 11.
JavaScript Базовый. Занятие 11.Igor Shkulipa
 
XSS. Обходы фильтров и защит.
XSS. Обходы фильтров и защит.XSS. Обходы фильтров и защит.
XSS. Обходы фильтров и защит.Дмитрий Бумов
 
Web осень 2012 лекция 10
Web осень 2012 лекция 10Web осень 2012 лекция 10
Web осень 2012 лекция 10Technopark
 
Профилирования и оптимизация jQuery-кода
Профилирования и оптимизация jQuery-кодаПрофилирования и оптимизация jQuery-кода
Профилирования и оптимизация jQuery-кодаprivate_face
 
Профилирование и оптимизация jQuery–кода
Профилирование и оптимизация jQuery–кодаПрофилирование и оптимизация jQuery–кода
Профилирование и оптимизация jQuery–кодаprivate_face
 
Профилирование и оптимизация jQuery–кода (Владимир Журавлёв)
Профилирование и оптимизация jQuery–кода (Владимир Журавлёв)Профилирование и оптимизация jQuery–кода (Владимир Журавлёв)
Профилирование и оптимизация jQuery–кода (Владимир Журавлёв)Ontico
 
jQuery для ASP.NET разработчиков
jQuery для ASP.NET разработчиковjQuery для ASP.NET разработчиков
jQuery для ASP.NET разработчиковakrakovetsky
 
SECON'2016. Иовлев Роман, JDI is UI Automation Future
SECON'2016. Иовлев Роман, JDI is UI Automation FutureSECON'2016. Иовлев Роман, JDI is UI Automation Future
SECON'2016. Иовлев Роман, JDI is UI Automation FutureSECON
 
Web весна 2012 лекция 9
Web весна 2012 лекция 9Web весна 2012 лекция 9
Web весна 2012 лекция 9Technopark
 
Подробная презентация JavaScript 6 в 1
Подробная презентация JavaScript 6 в 1Подробная презентация JavaScript 6 в 1
Подробная презентация JavaScript 6 в 1Vasya Petrov
 
iOS and Android Mobile Test Automation
iOS and Android Mobile Test AutomationiOS and Android Mobile Test Automation
iOS and Android Mobile Test AutomationAndrii Dzynia
 
YiiConf: Миграции и инсталляции
YiiConf: Миграции и инсталляцииYiiConf: Миграции и инсталляции
YiiConf: Миграции и инсталляцииPaul Klimov
 
Yii: миграции и инсталляции
Yii: миграции и инсталляцииYii: миграции и инсталляции
Yii: миграции и инсталляцииPaul Klimov
 
Mobile automation uamobile
Mobile automation uamobileMobile automation uamobile
Mobile automation uamobileUA Mobile
 
«Custom View. Делаем быстро, красиво, чисто». Илья Демидов
«Custom View. Делаем быстро, красиво, чисто». Илья Демидов«Custom View. Делаем быстро, красиво, чисто». Илья Демидов
«Custom View. Делаем быстро, красиво, чисто». Илья ДемидовDataArt
 

Semelhante a jQuery: быстрая разработка веб-интерфейсов на JavaScript (20)

course js day 4
course js day 4course js day 4
course js day 4
 
Jsfwdays 2013-2
Jsfwdays 2013-2Jsfwdays 2013-2
Jsfwdays 2013-2
 
FPUG Dzyga presentation
FPUG Dzyga presentationFPUG Dzyga presentation
FPUG Dzyga presentation
 
Web весна 2013 лекция 10
Web весна 2013 лекция 10Web весна 2013 лекция 10
Web весна 2013 лекция 10
 
Web осень 2012 лекция 9
Web осень 2012 лекция 9Web осень 2012 лекция 9
Web осень 2012 лекция 9
 
JavaScript Базовый. Занятие 11.
JavaScript Базовый. Занятие 11.JavaScript Базовый. Занятие 11.
JavaScript Базовый. Занятие 11.
 
XSS. Обходы фильтров и защит.
XSS. Обходы фильтров и защит.XSS. Обходы фильтров и защит.
XSS. Обходы фильтров и защит.
 
Web осень 2012 лекция 10
Web осень 2012 лекция 10Web осень 2012 лекция 10
Web осень 2012 лекция 10
 
Профилирования и оптимизация jQuery-кода
Профилирования и оптимизация jQuery-кодаПрофилирования и оптимизация jQuery-кода
Профилирования и оптимизация jQuery-кода
 
Профилирование и оптимизация jQuery–кода
Профилирование и оптимизация jQuery–кодаПрофилирование и оптимизация jQuery–кода
Профилирование и оптимизация jQuery–кода
 
Профилирование и оптимизация jQuery–кода (Владимир Журавлёв)
Профилирование и оптимизация jQuery–кода (Владимир Журавлёв)Профилирование и оптимизация jQuery–кода (Владимир Журавлёв)
Профилирование и оптимизация jQuery–кода (Владимир Журавлёв)
 
jQuery для ASP.NET разработчиков
jQuery для ASP.NET разработчиковjQuery для ASP.NET разработчиков
jQuery для ASP.NET разработчиков
 
SECON'2016. Иовлев Роман, JDI is UI Automation Future
SECON'2016. Иовлев Роман, JDI is UI Automation FutureSECON'2016. Иовлев Роман, JDI is UI Automation Future
SECON'2016. Иовлев Роман, JDI is UI Automation Future
 
Web весна 2012 лекция 9
Web весна 2012 лекция 9Web весна 2012 лекция 9
Web весна 2012 лекция 9
 
Подробная презентация JavaScript 6 в 1
Подробная презентация JavaScript 6 в 1Подробная презентация JavaScript 6 в 1
Подробная презентация JavaScript 6 в 1
 
iOS and Android Mobile Test Automation
iOS and Android Mobile Test AutomationiOS and Android Mobile Test Automation
iOS and Android Mobile Test Automation
 
YiiConf: Миграции и инсталляции
YiiConf: Миграции и инсталляцииYiiConf: Миграции и инсталляции
YiiConf: Миграции и инсталляции
 
Yii: миграции и инсталляции
Yii: миграции и инсталляцииYii: миграции и инсталляции
Yii: миграции и инсталляции
 
Mobile automation uamobile
Mobile automation uamobileMobile automation uamobile
Mobile automation uamobile
 
«Custom View. Делаем быстро, красиво, чисто». Илья Демидов
«Custom View. Делаем быстро, красиво, чисто». Илья Демидов«Custom View. Делаем быстро, красиво, чисто». Илья Демидов
«Custom View. Делаем быстро, красиво, чисто». Илья Демидов
 

Mais de Constantin Kichinsky

Прототипирование приложений в Expression Blend + Sketchflow
Прототипирование приложений в Expression Blend + SketchflowПрототипирование приложений в Expression Blend + Sketchflow
Прототипирование приложений в Expression Blend + SketchflowConstantin Kichinsky
 
Пользовательский интерфейс
Пользовательский интерфейсПользовательский интерфейс
Пользовательский интерфейсConstantin Kichinsky
 
Архитектура корпоративных систем
Архитектура корпоративных системАрхитектура корпоративных систем
Архитектура корпоративных системConstantin Kichinsky
 
Шаблоны проектирования 2
Шаблоны проектирования 2Шаблоны проектирования 2
Шаблоны проектирования 2Constantin Kichinsky
 
Шаблоны проектирования 1
Шаблоны проектирования 1Шаблоны проектирования 1
Шаблоны проектирования 1Constantin Kichinsky
 
Создание новых объектов
Создание новых объектовСоздание новых объектов
Создание новых объектовConstantin Kichinsky
 
Django – фреймворк, который работает
Django – фреймворк, который работаетDjango – фреймворк, который работает
Django – фреймворк, который работаетConstantin Kichinsky
 
Ruby On Rails: Web-разработка по-другому!
Ruby On Rails: Web-разработка по-другому!Ruby On Rails: Web-разработка по-другому!
Ruby On Rails: Web-разработка по-другому!Constantin Kichinsky
 
Управление проектами
Управление проектамиУправление проектами
Управление проектамиConstantin Kichinsky
 
Код как низкоуровневая документация
Код как низкоуровневая документацияКод как низкоуровневая документация
Код как низкоуровневая документацияConstantin Kichinsky
 
Ajax и будущее Java Script
Ajax и будущее Java ScriptAjax и будущее Java Script
Ajax и будущее Java ScriptConstantin Kichinsky
 

Mais de Constantin Kichinsky (20)

Brain to brain communications
Brain to brain communicationsBrain to brain communications
Brain to brain communications
 
Прототипирование приложений в Expression Blend + Sketchflow
Прототипирование приложений в Expression Blend + SketchflowПрототипирование приложений в Expression Blend + Sketchflow
Прототипирование приложений в Expression Blend + Sketchflow
 
JavaScript OOP
JavaScript OOPJavaScript OOP
JavaScript OOP
 
Пользовательский интерфейс
Пользовательский интерфейсПользовательский интерфейс
Пользовательский интерфейс
 
Архитектура корпоративных систем
Архитектура корпоративных системАрхитектура корпоративных систем
Архитектура корпоративных систем
 
Шаблоны проектирования 2
Шаблоны проектирования 2Шаблоны проектирования 2
Шаблоны проектирования 2
 
Шаблоны проектирования 1
Шаблоны проектирования 1Шаблоны проектирования 1
Шаблоны проектирования 1
 
Обработка ошибок
Обработка ошибокОбработка ошибок
Обработка ошибок
 
Создание новых объектов
Создание новых объектовСоздание новых объектов
Создание новых объектов
 
Декомпозиция
ДекомпозицияДекомпозиция
Декомпозиция
 
Design Lecture
Design LectureDesign Lecture
Design Lecture
 
Оптимизация SQL
Оптимизация SQLОптимизация SQL
Оптимизация SQL
 
Django – фреймворк, который работает
Django – фреймворк, который работаетDjango – фреймворк, который работает
Django – фреймворк, который работает
 
Ruby On Rails: Web-разработка по-другому!
Ruby On Rails: Web-разработка по-другому!Ruby On Rails: Web-разработка по-другому!
Ruby On Rails: Web-разработка по-другому!
 
Silverlight 2
Silverlight 2Silverlight 2
Silverlight 2
 
Управление проектами
Управление проектамиУправление проектами
Управление проектами
 
Silverlight 2
Silverlight 2Silverlight 2
Silverlight 2
 
Код как низкоуровневая документация
Код как низкоуровневая документацияКод как низкоуровневая документация
Код как низкоуровневая документация
 
Imagine Cup
Imagine CupImagine Cup
Imagine Cup
 
Ajax и будущее Java Script
Ajax и будущее Java ScriptAjax и будущее Java Script
Ajax и будущее Java Script
 

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

  • 1. Быстрая разработка веб-интерфейсов на JavaScript Георгий Калашников Заседание #000012
  • 2.
  • 3.
  • 4. jQuery 54.5 KB [15KB packed] CSS 1-3 и немного XPath IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+ Огромное сообщество Доступная документация Лёгкая расширяемость (1441 плагин)
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 13.
  • 14.
  • 15.
  • 17.
  • 18.
  • 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/
  • 23. Да прибудет с вами сила jQuery ! [email_address]