SlideShare una empresa de 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]

Más contenido relacionado

La actualidad más candente

Михаил Давыдов — JavaScript: Асинхронность
Михаил Давыдов — JavaScript: АсинхронностьМихаил Давыдов — JavaScript: Асинхронность
Михаил Давыдов — JavaScript: Асинхронность
Yandex
 
создание HTML игр на элементе canvas
создание HTML игр на элементе canvasсоздание HTML игр на элементе canvas
создание HTML игр на элементе canvas
Alexander Samantsov
 
Web осень 2012 лекция 4
Web осень 2012 лекция 4Web осень 2012 лекция 4
Web осень 2012 лекция 4
Technopark
 
I tmozg js_school_jquery
I tmozg js_school_jqueryI tmozg js_school_jquery
I tmozg js_school_jquery
ITmozg
 
Making Scalable JavaScript Application
Making Scalable JavaScript ApplicationMaking Scalable JavaScript Application
Making Scalable JavaScript Application
Mikhail Davydov
 
Встраивание языка в строковой интерполятор
Встраивание языка в строковой интерполяторВстраивание языка в строковой интерполятор
Встраивание языка в строковой интерполятор
Michael Limansky
 

La actualidad más candente (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
 

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

FPUG Dzyga presentation
FPUG Dzyga presentationFPUG Dzyga presentation
FPUG Dzyga presentation
Ivan Filimonov
 
Web весна 2013 лекция 10
Web весна 2013 лекция 10Web весна 2013 лекция 10
Web весна 2013 лекция 10
Technopark
 
Web осень 2012 лекция 9
Web осень 2012 лекция 9Web осень 2012 лекция 9
Web осень 2012 лекция 9
Technopark
 
Web осень 2012 лекция 10
Web осень 2012 лекция 10Web осень 2012 лекция 10
Web осень 2012 лекция 10
Technopark
 
Профилирования и оптимизация jQuery-кода
Профилирования и оптимизация jQuery-кодаПрофилирования и оптимизация jQuery-кода
Профилирования и оптимизация jQuery-кода
private_face
 
Профилирование и оптимизация jQuery–кода
Профилирование и оптимизация jQuery–кодаПрофилирование и оптимизация jQuery–кода
Профилирование и оптимизация jQuery–кода
private_face
 
Профилирование и оптимизация jQuery–кода (Владимир Журавлёв)
Профилирование и оптимизация jQuery–кода (Владимир Журавлёв)Профилирование и оптимизация jQuery–кода (Владимир Журавлёв)
Профилирование и оптимизация jQuery–кода (Владимир Журавлёв)
Ontico
 
Web весна 2012 лекция 9
Web весна 2012 лекция 9Web весна 2012 лекция 9
Web весна 2012 лекция 9
Technopark
 
Mobile automation uamobile
Mobile automation uamobileMobile automation uamobile
Mobile automation uamobile
UA Mobile
 
«Custom View. Делаем быстро, красиво, чисто». Илья Демидов
«Custom View. Делаем быстро, красиво, чисто». Илья Демидов«Custom View. Делаем быстро, красиво, чисто». Илья Демидов
«Custom View. Делаем быстро, красиво, чисто». Илья Демидов
DataArt
 

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

Más de Constantin Kichinsky

Прототипирование приложений в Expression Blend + Sketchflow
Прототипирование приложений в Expression Blend + SketchflowПрототипирование приложений в Expression Blend + Sketchflow
Прототипирование приложений в Expression Blend + Sketchflow
Constantin Kichinsky
 

Más 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
 

Último

ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ 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...
Ирония безопасности
 
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
Хроники кибер-безопасника
 
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
Хроники кибер-безопасника
 
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ 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
Хроники кибер-безопасника
 
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
Хроники кибер-безопасника
 

Último (9)

ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ 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...
 
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
 
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...
 
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
 
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
 
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ 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
 
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
 
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
 

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]