SlideShare ist ein Scribd-Unternehmen logo
1 von 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]

Weitere ähnliche Inhalte

Was ist angesagt?

Михаил Давыдов — 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
 

Was ist angesagt? (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
 

Ähnlich wie 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
 

Ähnlich wie 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. Делаем быстро, красиво, чисто». Илья Демидов
 

Mehr von 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
 

Mehr von 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
 

Kürzlich hochgeladen (9)

Ransomware_Q3 2023. The report [RU].pdf
Ransomware_Q3 2023.  The report [RU].pdfRansomware_Q3 2023.  The report [RU].pdf
Ransomware_Q3 2023. The report [RU].pdf
 
Cyberprint. Dark Pink Apt Group [RU].pdf
Cyberprint. Dark Pink Apt Group [RU].pdfCyberprint. Dark Pink Apt Group [RU].pdf
Cyberprint. Dark Pink Apt Group [RU].pdf
 
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
 
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
 
2023 Q4. The Ransomware report. [RU].pdf
2023 Q4. The Ransomware report. [RU].pdf2023 Q4. The Ransomware report. [RU].pdf
2023 Q4. The Ransomware report. [RU].pdf
 
MS Navigating Incident Response [RU].pdf
MS Navigating Incident Response [RU].pdfMS Navigating Incident Response [RU].pdf
MS Navigating Incident Response [RU].pdf
 
CVE. The Fortra's GoAnywhere MFT [RU].pdf
CVE. The Fortra's GoAnywhere MFT [RU].pdfCVE. The Fortra's GoAnywhere MFT [RU].pdf
CVE. The Fortra's GoAnywhere MFT [RU].pdf
 
Malware. DCRAT (DARK CRYSTAL RAT) [RU].pdf
Malware. DCRAT (DARK CRYSTAL RAT) [RU].pdfMalware. DCRAT (DARK CRYSTAL RAT) [RU].pdf
Malware. DCRAT (DARK CRYSTAL RAT) [RU].pdf
 
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdfСИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
 

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]