SlideShare a Scribd company logo
СОЗДАНИЕ
«ЖИВЫХ»
САЙТОВ
с помощью библиотеки
jQuery

www.spro-club.ru
План
 Какой  сайт можно назвать живым?
 Какие технологии и инструменты
  существуют для создания живых
  сайтов?
 Что такое библиотека jQuery? Какие
  задачи она позволяет решать?
 Где взять и как подключить jQuery?
 Простейшие примеры использования
 Cookbook - «Поваренная книга» готовых
  рецептов
«Живые» сайты (ЖС)?
   ЖС – это интерактивный динамический
    сайт.
   Он способен реагировать на действия
    пользователей, а не просто отображать
    информацию (текст, графику, аудио и
    видео)
   «Живым» сайтом пользоваться не только
    приятно, но и удобно
   По функциональности ЖС приближаются к
    настольным приложениям с графическим
    интерфейсом
   ЖС – отличительная особенность
    концепции Web 2.0
Что нужно знать?
 HTML
 CSS
 Блочная модель элементов
 JavaScript
Инструменты для создания ЖС
  Все инструменты работают на стороне
   клиента (выполняются браузером)
  Скриптовые языки:
      JavaScript, Jscript, VBScript и т.п.
  Java-апплеты
  Flash
  SilverLight
  Готовые     скриптовые библиотеки:
      jQuery, extJS, Dojo, MochiKit, MooTools,
       Prototype, Rico и др.
Что такое jQuery?
   Библиотека JavaScript-функций
   Опубликована в 2006 г
   Девиз – «Write less, do more» - делайте
    больше меньшими усилиями
   JQuery отделяет поведение от структуры
    HTML (принцип «ненавязчивого» JavaScript)
   Архитектура: ядро + плагины
   Основная цель создания jQuery:
       повторное использование JavaScript-кода
        (чтобы не изобретать велосипед)
       кросс-браузерность (один и тот же код
        работает в разных браузерах)
Где взять jQuery
 Официальный    сайт - http://jquery.com
 Текущая версия: 1.7.1
 Поставляется в двух вариантах:
    для разработчика (Development) – 230 Кб
    для публикации (Production) – 31 Кб
 jQuery   – это СПО (свободное ПО)
Подключение jQuery
       jQuery включается в веб-страницу как
        один внешний JavaScript-файл:
<head>
       <script type="text/javascript" src="путь/к/jQuery.js"></script>
</head>
     Все   возможности библиотеки доступны
        с помощью функции jQuery() или еѐ
        сокращѐнного имени – $():
$(“h1”).addClass("blue") .slideDown("slow");

$(“input#showComment”).fadeOut();
Получение элементов
 $("#header")   — получение элемента с
  id=«header»
 $(«h3») — получить все <h3> элементы
 $(«div#content .photo») — получить все
  элементы с классом =«photo» которые
  находятся в элементе div с id=«content»
 $(«ul li») — получить все <li> элементы из
  списка <ul>
 $(«ul li:first») — получить только первый
  элемент <li> из списка <ul>
Схема использования
Использованные источники
 http://ru.wikipedia.org/wiki/Библиотека_J
  avaScript
 http://ru.wikipedia.org/wiki/JQuery
 Бер Бибо, Иегуда Кац. jQuery.
  Подробное руководство по
  продвинутому JavaScript (2009)
 http://habrahabr.ru/post/38208/

More Related Content

What's hot

Лекция 1. Введение в Android.
Лекция 1. Введение в Android.Лекция 1. Введение в Android.
Лекция 1. Введение в Android.
Александр Брич
 
Лекция Android. Хранение данных
Лекция Android. Хранение данныхЛекция Android. Хранение данных
Лекция Android. Хранение данных
Александр Брич
 
лабораторная работа №3 dfd & idef0
лабораторная работа №3 dfd & idef0лабораторная работа №3 dfd & idef0
лабораторная работа №3 dfd & idef0Natasha Lysakova
 
[C++ CoreHard Autumn 2018] Actors vs CSP vs Task...
[C++ CoreHard Autumn 2018] Actors vs CSP vs Task...[C++ CoreHard Autumn 2018] Actors vs CSP vs Task...
[C++ CoreHard Autumn 2018] Actors vs CSP vs Task...
Yauheni Akhotnikau
 
Шаблоны разработки ПО. Часть 3. Шаблоны GoF
Шаблоны разработки ПО. Часть 3. Шаблоны GoFШаблоны разработки ПО. Часть 3. Шаблоны GoF
Шаблоны разработки ПО. Часть 3. Шаблоны GoFSergey Nemchinsky
 
Сущности в Drupal 7
Сущности в Drupal 7Сущности в Drupal 7
Сущности в Drupal 7
Itech4Web
 
Grails & Groovy
Grails & GroovyGrails & Groovy
Grails & Groovy
Denys Sosuliev
 
Лекция #4. Каскадные таблицы стилей
Лекция #4. Каскадные таблицы стилейЛекция #4. Каскадные таблицы стилей
Лекция #4. Каскадные таблицы стилей
Яковенко Кирилл
 
C# Web. Занятие 13.
C# Web. Занятие 13.C# Web. Занятие 13.
C# Web. Занятие 13.
Igor Shkulipa
 
Диаграммы композитной структуры, коммуникации и пакетов
Диаграммы композитной структуры, коммуникации и пакетовДиаграммы композитной структуры, коммуникации и пакетов
Диаграммы композитной структуры, коммуникации и пакетов
DEVTYPE
 
MVVM в WinForms – DevExpress Way (теория и практика)
MVVM в WinForms – DevExpress Way (теория и практика)MVVM в WinForms – DevExpress Way (теория и практика)
MVVM в WinForms – DevExpress Way (теория и практика)
GoSharp
 
C# Web. Занятие 12.
C# Web. Занятие 12.C# Web. Занятие 12.
C# Web. Занятие 12.
Igor Shkulipa
 
Школа-студия разработки приложений для iOS. 2 лекция. MVC, View, Controllers
Школа-студия разработки приложений для iOS. 2 лекция. MVC, View, ControllersШкола-студия разработки приложений для iOS. 2 лекция. MVC, View, Controllers
Школа-студия разработки приложений для iOS. 2 лекция. MVC, View, ControllersГлеб Тарасов
 
Диаграмма развертывания
Диаграмма развертыванияДиаграмма развертывания
Диаграмма развертывания
DEVTYPE
 
Основы Java. 5. Databases
Основы Java. 5. DatabasesОсновы Java. 5. Databases
Основы Java. 5. Databases
Sergey Nemchinsky
 
Денис Чистяков: DOM, jQuery и все, все, все
Денис Чистяков: DOM, jQuery и все, все, всеДенис Чистяков: DOM, jQuery и все, все, все
Денис Чистяков: DOM, jQuery и все, все, всеYandex
 
Java осень 2012 лекция 9
Java осень 2012 лекция 9Java осень 2012 лекция 9
Java осень 2012 лекция 9Technopark
 
Паттерны быстрой разработки WPF MVVM бизнес-приложений
Паттерны быстрой разработки WPF MVVM бизнес-приложенийПаттерны быстрой разработки WPF MVVM бизнес-приложений
Паттерны быстрой разработки WPF MVVM бизнес-приложенийGoSharp
 
Industrial Programming Java - Lection Pack 01 - Building an application - Lav...
Industrial Programming Java - Lection Pack 01 - Building an application - Lav...Industrial Programming Java - Lection Pack 01 - Building an application - Lav...
Industrial Programming Java - Lection Pack 01 - Building an application - Lav...
Fedor Lavrentyev
 

What's hot (20)

Лекция 1. Введение в Android.
Лекция 1. Введение в Android.Лекция 1. Введение в Android.
Лекция 1. Введение в Android.
 
Лекция Android. Хранение данных
Лекция Android. Хранение данныхЛекция Android. Хранение данных
Лекция Android. Хранение данных
 
лабораторная работа №3 dfd & idef0
лабораторная работа №3 dfd & idef0лабораторная работа №3 dfd & idef0
лабораторная работа №3 dfd & idef0
 
[C++ CoreHard Autumn 2018] Actors vs CSP vs Task...
[C++ CoreHard Autumn 2018] Actors vs CSP vs Task...[C++ CoreHard Autumn 2018] Actors vs CSP vs Task...
[C++ CoreHard Autumn 2018] Actors vs CSP vs Task...
 
Шаблоны разработки ПО. Часть 3. Шаблоны GoF
Шаблоны разработки ПО. Часть 3. Шаблоны GoFШаблоны разработки ПО. Часть 3. Шаблоны GoF
Шаблоны разработки ПО. Часть 3. Шаблоны GoF
 
Сущности в Drupal 7
Сущности в Drupal 7Сущности в Drupal 7
Сущности в Drupal 7
 
Grails & Groovy
Grails & GroovyGrails & Groovy
Grails & Groovy
 
Лекция #4. Каскадные таблицы стилей
Лекция #4. Каскадные таблицы стилейЛекция #4. Каскадные таблицы стилей
Лекция #4. Каскадные таблицы стилей
 
C# Web. Занятие 13.
C# Web. Занятие 13.C# Web. Занятие 13.
C# Web. Занятие 13.
 
Диаграммы композитной структуры, коммуникации и пакетов
Диаграммы композитной структуры, коммуникации и пакетовДиаграммы композитной структуры, коммуникации и пакетов
Диаграммы композитной структуры, коммуникации и пакетов
 
MVVM в WinForms – DevExpress Way (теория и практика)
MVVM в WinForms – DevExpress Way (теория и практика)MVVM в WinForms – DevExpress Way (теория и практика)
MVVM в WinForms – DevExpress Way (теория и практика)
 
C# Web. Занятие 12.
C# Web. Занятие 12.C# Web. Занятие 12.
C# Web. Занятие 12.
 
Школа-студия разработки приложений для iOS. 2 лекция. MVC, View, Controllers
Школа-студия разработки приложений для iOS. 2 лекция. MVC, View, ControllersШкола-студия разработки приложений для iOS. 2 лекция. MVC, View, Controllers
Школа-студия разработки приложений для iOS. 2 лекция. MVC, View, Controllers
 
Диаграмма развертывания
Диаграмма развертыванияДиаграмма развертывания
Диаграмма развертывания
 
Основы Java. 5. Databases
Основы Java. 5. DatabasesОсновы Java. 5. Databases
Основы Java. 5. Databases
 
лр4 uml
лр4 umlлр4 uml
лр4 uml
 
Денис Чистяков: DOM, jQuery и все, все, все
Денис Чистяков: DOM, jQuery и все, все, всеДенис Чистяков: DOM, jQuery и все, все, все
Денис Чистяков: DOM, jQuery и все, все, все
 
Java осень 2012 лекция 9
Java осень 2012 лекция 9Java осень 2012 лекция 9
Java осень 2012 лекция 9
 
Паттерны быстрой разработки WPF MVVM бизнес-приложений
Паттерны быстрой разработки WPF MVVM бизнес-приложенийПаттерны быстрой разработки WPF MVVM бизнес-приложений
Паттерны быстрой разработки WPF MVVM бизнес-приложений
 
Industrial Programming Java - Lection Pack 01 - Building an application - Lav...
Industrial Programming Java - Lection Pack 01 - Building an application - Lav...Industrial Programming Java - Lection Pack 01 - Building an application - Lav...
Industrial Programming Java - Lection Pack 01 - Building an application - Lav...
 

Viewers also liked

обработка исключений в Java
обработка исключений в Javaобработка исключений в Java
обработка исключений в Javametaform
 
Обзор MS.Net Framework
Обзор MS.Net FrameworkОбзор MS.Net Framework
Обзор MS.Net Framework
mcroitor
 
Введение в MFC
Введение в MFCВведение в MFC
Введение в MFC
mcroitor
 
стандартная библиотека с++: введение
стандартная библиотека с++: введениестандартная библиотека с++: введение
стандартная библиотека с++: введение
mcroitor
 
особенности программирования на с++
особенности программирования на с++особенности программирования на с++
особенности программирования на с++
mcroitor
 
C++ и базы данных
C++ и базы данныхC++ и базы данных
C++ и базы данных
mcroitor
 
библиотеки программирования
библиотеки программированиябиблиотеки программирования
библиотеки программированияmcroitor
 

Viewers also liked (7)

обработка исключений в Java
обработка исключений в Javaобработка исключений в Java
обработка исключений в Java
 
Обзор MS.Net Framework
Обзор MS.Net FrameworkОбзор MS.Net Framework
Обзор MS.Net Framework
 
Введение в MFC
Введение в MFCВведение в MFC
Введение в MFC
 
стандартная библиотека с++: введение
стандартная библиотека с++: введениестандартная библиотека с++: введение
стандартная библиотека с++: введение
 
особенности программирования на с++
особенности программирования на с++особенности программирования на с++
особенности программирования на с++
 
C++ и базы данных
C++ и базы данныхC++ и базы данных
C++ и базы данных
 
библиотеки программирования
библиотеки программированиябиблиотеки программирования
библиотеки программирования
 

Similar to создание живых сайтов

Remote (dev)tools своими руками
Remote (dev)tools своими рукамиRemote (dev)tools своими руками
Remote (dev)tools своими руками
Roman Dvornov
 
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample SdkSergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdkrit2010
 
Экскурс в мир WEB разработки
Экскурс в мир WEB разработкиЭкскурс в мир WEB разработки
Экскурс в мир WEB разработки
IT-Доминанта
 
Desktop app based on node js and html5
Desktop app based on node js and html5Desktop app based on node js and html5
Desktop app based on node js and html5
Provectus
 
JavaScript Базовый. Занятие 11.
JavaScript Базовый. Занятие 11.JavaScript Базовый. Занятие 11.
JavaScript Базовый. Занятие 11.
Igor Shkulipa
 
NetBeans 6.0 Desktop
NetBeans 6.0 DesktopNetBeans 6.0 Desktop
NetBeans 6.0 Desktop
Iljas
 
Netbeans Desktop Applications
Netbeans Desktop ApplicationsNetbeans Desktop Applications
Netbeans Desktop Applications
scassau
 
Dreamwever cs3
Dreamwever cs3Dreamwever cs3
Dreamwever cs3JIuc
 
10 вещей, которые «невозможно» сделать в iOS
10 вещей, которые «невозможно» сделать в iOS10 вещей, которые «невозможно» сделать в iOS
10 вещей, которые «невозможно» сделать в iOS
Any Void
 
DevPro-2014: Кроссплатформенное приложение за 15 минут или Беды и победы моби...
DevPro-2014: Кроссплатформенное приложение за 15 минут или Беды и победы моби...DevPro-2014: Кроссплатформенное приложение за 15 минут или Беды и победы моби...
DevPro-2014: Кроссплатформенное приложение за 15 минут или Беды и победы моби...Artur Drobinskiy
 
YaC 2013 Notes
YaC 2013 NotesYaC 2013 Notes
YaC 2013 Notes
Anton Ignatov
 
Использование сторонних библиотек в веб-приложении
Использование сторонних библиотек в веб-приложенииИспользование сторонних библиотек в веб-приложении
Использование сторонних библиотек в веб-приложении
Denis Latushkin
 
Доставка данных в реальном времени.
Доставка данных в реальном времени. Доставка данных в реальном времени.
Доставка данных в реальном времени.
beshkenadze
 
jQuery. Введение и практика
jQuery. Введение и практикаjQuery. Введение и практика
jQuery. Введение и практика
Slava Aliev
 
Обзор и анализ инструментов проектирования и прототипирования интерфейсов
Обзор и анализ инструментов проектирования и прототипирования интерфейсовОбзор и анализ инструментов проектирования и прототипирования интерфейсов
Обзор и анализ инструментов проектирования и прототипирования интерфейсов
Rustem Gayfutdinov
 
Презентация jQuery
Презентация jQueryПрезентация jQuery
Презентация jQuery
Илья Барышев
 
Презентация JQuery от Future Colors
Презентация JQuery от Future ColorsПрезентация JQuery от Future Colors
Презентация JQuery от Future Colors
Илья Барышев
 
Денис Чистяков — JavaScript на фронте и в тылу
Денис Чистяков — JavaScript на фронте и в тылуДенис Чистяков — JavaScript на фронте и в тылу
Денис Чистяков — JavaScript на фронте и в тылу
Yandex
 
Node.js введение в технологию, КПИ #ITmeetingKPI
Node.js введение в технологию, КПИ  #ITmeetingKPINode.js введение в технологию, КПИ  #ITmeetingKPI
Node.js введение в технологию, КПИ #ITmeetingKPI
Timur Shemsedinov
 

Similar to создание живых сайтов (20)

Remote (dev)tools своими руками
Remote (dev)tools своими рукамиRemote (dev)tools своими руками
Remote (dev)tools своими руками
 
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample SdkSergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
 
Экскурс в мир WEB разработки
Экскурс в мир WEB разработкиЭкскурс в мир WEB разработки
Экскурс в мир WEB разработки
 
Desktop app based on node js and html5
Desktop app based on node js and html5Desktop app based on node js and html5
Desktop app based on node js and html5
 
JavaScript Базовый. Занятие 11.
JavaScript Базовый. Занятие 11.JavaScript Базовый. Занятие 11.
JavaScript Базовый. Занятие 11.
 
NetBeans 6.0 Desktop
NetBeans 6.0 DesktopNetBeans 6.0 Desktop
NetBeans 6.0 Desktop
 
Netbeans Desktop Applications
Netbeans Desktop ApplicationsNetbeans Desktop Applications
Netbeans Desktop Applications
 
Dreamwever cs3
Dreamwever cs3Dreamwever cs3
Dreamwever cs3
 
10 вещей, которые «невозможно» сделать в iOS
10 вещей, которые «невозможно» сделать в iOS10 вещей, которые «невозможно» сделать в iOS
10 вещей, которые «невозможно» сделать в iOS
 
DevPro-2014: Кроссплатформенное приложение за 15 минут или Беды и победы моби...
DevPro-2014: Кроссплатформенное приложение за 15 минут или Беды и победы моби...DevPro-2014: Кроссплатформенное приложение за 15 минут или Беды и победы моби...
DevPro-2014: Кроссплатформенное приложение за 15 минут или Беды и победы моби...
 
Jquery
JqueryJquery
Jquery
 
YaC 2013 Notes
YaC 2013 NotesYaC 2013 Notes
YaC 2013 Notes
 
Использование сторонних библиотек в веб-приложении
Использование сторонних библиотек в веб-приложенииИспользование сторонних библиотек в веб-приложении
Использование сторонних библиотек в веб-приложении
 
Доставка данных в реальном времени.
Доставка данных в реальном времени. Доставка данных в реальном времени.
Доставка данных в реальном времени.
 
jQuery. Введение и практика
jQuery. Введение и практикаjQuery. Введение и практика
jQuery. Введение и практика
 
Обзор и анализ инструментов проектирования и прототипирования интерфейсов
Обзор и анализ инструментов проектирования и прототипирования интерфейсовОбзор и анализ инструментов проектирования и прототипирования интерфейсов
Обзор и анализ инструментов проектирования и прототипирования интерфейсов
 
Презентация jQuery
Презентация jQueryПрезентация jQuery
Презентация jQuery
 
Презентация JQuery от Future Colors
Презентация JQuery от Future ColorsПрезентация JQuery от Future Colors
Презентация JQuery от Future Colors
 
Денис Чистяков — JavaScript на фронте и в тылу
Денис Чистяков — JavaScript на фронте и в тылуДенис Чистяков — JavaScript на фронте и в тылу
Денис Чистяков — JavaScript на фронте и в тылу
 
Node.js введение в технологию, КПИ #ITmeetingKPI
Node.js введение в технологию, КПИ  #ITmeetingKPINode.js введение в технологию, КПИ  #ITmeetingKPI
Node.js введение в технологию, КПИ #ITmeetingKPI
 

More from metaform

Приступаем к разработке Android приложений
Приступаем к разработке Android приложенийПриступаем к разработке Android приложений
Приступаем к разработке Android приложений
metaform
 
работа с потоками ввода вывода
работа с потоками ввода выводаработа с потоками ввода вывода
работа с потоками ввода выводаmetaform
 
Классы и объекты в Java
Классы и объекты в JavaКлассы и объекты в Java
Классы и объекты в Javametaform
 
Работа с БД в Java
Работа с БД в JavaРабота с БД в Java
Работа с БД в Java
metaform
 
Составление резюме
Составление резюмеСоставление резюме
Составление резюме
metaform
 
Коллекции в Java
Коллекции в JavaКоллекции в Java
Коллекции в Java
metaform
 
Лекция 6_принципы ООП : инкапсуляция, наследование
Лекция 6_принципы ООП : инкапсуляция, наследованиеЛекция 6_принципы ООП : инкапсуляция, наследование
Лекция 6_принципы ООП : инкапсуляция, наследование
metaform
 
Классы и объекты в Java
Классы и объекты в JavaКлассы и объекты в Java
Классы и объекты в Javametaform
 
Массивы в Java
Массивы в JavaМассивы в Java
Массивы в Javametaform
 
Базовые операторы Java
Базовые операторы JavaБазовые операторы Java
Базовые операторы Javametaform
 
Глава 3: примитивные типы и операции с ними в Java
Глава 3: примитивные типы и операции с ними в JavaГлава 3: примитивные типы и операции с ними в Java
Глава 3: примитивные типы и операции с ними в Javametaform
 
Глава 2: Среда разработки NetBeans
Глава 2: Среда разработки NetBeansГлава 2: Среда разработки NetBeans
Глава 2: Среда разработки NetBeansmetaform
 
Глава1: Обзор технологии Java
Глава1: Обзор технологии JavaГлава1: Обзор технологии Java
Глава1: Обзор технологии Java
metaform
 
Мастерство речи, искусство презентации
Мастерство речи, искусство презентацииМастерство речи, искусство презентации
Мастерство речи, искусство презентации
metaform
 

More from metaform (14)

Приступаем к разработке Android приложений
Приступаем к разработке Android приложенийПриступаем к разработке Android приложений
Приступаем к разработке Android приложений
 
работа с потоками ввода вывода
работа с потоками ввода выводаработа с потоками ввода вывода
работа с потоками ввода вывода
 
Классы и объекты в Java
Классы и объекты в JavaКлассы и объекты в Java
Классы и объекты в Java
 
Работа с БД в Java
Работа с БД в JavaРабота с БД в Java
Работа с БД в Java
 
Составление резюме
Составление резюмеСоставление резюме
Составление резюме
 
Коллекции в Java
Коллекции в JavaКоллекции в Java
Коллекции в Java
 
Лекция 6_принципы ООП : инкапсуляция, наследование
Лекция 6_принципы ООП : инкапсуляция, наследованиеЛекция 6_принципы ООП : инкапсуляция, наследование
Лекция 6_принципы ООП : инкапсуляция, наследование
 
Классы и объекты в Java
Классы и объекты в JavaКлассы и объекты в Java
Классы и объекты в Java
 
Массивы в Java
Массивы в JavaМассивы в Java
Массивы в Java
 
Базовые операторы Java
Базовые операторы JavaБазовые операторы Java
Базовые операторы Java
 
Глава 3: примитивные типы и операции с ними в Java
Глава 3: примитивные типы и операции с ними в JavaГлава 3: примитивные типы и операции с ними в Java
Глава 3: примитивные типы и операции с ними в Java
 
Глава 2: Среда разработки NetBeans
Глава 2: Среда разработки NetBeansГлава 2: Среда разработки NetBeans
Глава 2: Среда разработки NetBeans
 
Глава1: Обзор технологии Java
Глава1: Обзор технологии JavaГлава1: Обзор технологии Java
Глава1: Обзор технологии Java
 
Мастерство речи, искусство презентации
Мастерство речи, искусство презентацииМастерство речи, искусство презентации
Мастерство речи, искусство презентации
 

создание живых сайтов

  • 2. План  Какой сайт можно назвать живым?  Какие технологии и инструменты существуют для создания живых сайтов?  Что такое библиотека jQuery? Какие задачи она позволяет решать?  Где взять и как подключить jQuery?  Простейшие примеры использования  Cookbook - «Поваренная книга» готовых рецептов
  • 3. «Живые» сайты (ЖС)?  ЖС – это интерактивный динамический сайт.  Он способен реагировать на действия пользователей, а не просто отображать информацию (текст, графику, аудио и видео)  «Живым» сайтом пользоваться не только приятно, но и удобно  По функциональности ЖС приближаются к настольным приложениям с графическим интерфейсом  ЖС – отличительная особенность концепции Web 2.0
  • 4. Что нужно знать?  HTML  CSS  Блочная модель элементов  JavaScript
  • 5. Инструменты для создания ЖС  Все инструменты работают на стороне клиента (выполняются браузером)  Скриптовые языки:  JavaScript, Jscript, VBScript и т.п.  Java-апплеты  Flash  SilverLight  Готовые скриптовые библиотеки:  jQuery, extJS, Dojo, MochiKit, MooTools, Prototype, Rico и др.
  • 6. Что такое jQuery?  Библиотека JavaScript-функций  Опубликована в 2006 г  Девиз – «Write less, do more» - делайте больше меньшими усилиями  JQuery отделяет поведение от структуры HTML (принцип «ненавязчивого» JavaScript)  Архитектура: ядро + плагины  Основная цель создания jQuery:  повторное использование JavaScript-кода (чтобы не изобретать велосипед)  кросс-браузерность (один и тот же код работает в разных браузерах)
  • 7. Где взять jQuery  Официальный сайт - http://jquery.com  Текущая версия: 1.7.1  Поставляется в двух вариантах:  для разработчика (Development) – 230 Кб  для публикации (Production) – 31 Кб  jQuery – это СПО (свободное ПО)
  • 8. Подключение jQuery  jQuery включается в веб-страницу как один внешний JavaScript-файл: <head> <script type="text/javascript" src="путь/к/jQuery.js"></script> </head>  Все возможности библиотеки доступны с помощью функции jQuery() или еѐ сокращѐнного имени – $(): $(“h1”).addClass("blue") .slideDown("slow"); $(“input#showComment”).fadeOut();
  • 9. Получение элементов  $("#header") — получение элемента с id=«header»  $(«h3») — получить все <h3> элементы  $(«div#content .photo») — получить все элементы с классом =«photo» которые находятся в элементе div с id=«content»  $(«ul li») — получить все <li> элементы из списка <ul>  $(«ul li:first») — получить только первый элемент <li> из списка <ul>
  • 11. Использованные источники  http://ru.wikipedia.org/wiki/Библиотека_J avaScript  http://ru.wikipedia.org/wiki/JQuery  Бер Бибо, Иегуда Кац. jQuery. Подробное руководство по продвинутому JavaScript (2009)  http://habrahabr.ru/post/38208/