Тема: використання бібліотеки jQuery.
Мета: ознайомити учнів з основами написання простих сценаріїв з використанням бібліотеки jQuery. Після вивчення матеріалу учень повинен
знати:
вміти описувати (створювати) прості веб сторінки форматованого тексту (бажано, але не обов’язково) з використанням графіки та гіперпосилань.
Обладнання: комп’ютери IBM PC з встановленими ОС та браузерами.
Структура уроку
Хід уроку
1. Організаційний момент
Вітання з класом. Перевірка присутності і готовності учнів до уроку. Перевірка домашнього завдання.
2. Актуалізація опорних знань
3. Вивчення нового матеріалу
Доцільність використання бібліотеки jQuery ↰
Динаміку й інтерактивність сайтів реалізують зазвичай з використанням мови РНР або з допомогою сценарію, як правило записаного мовою Java Script.
Щоб керувати об’єктами, наприклад міняти властивості стилю (колір, розмір символів тощо), потрібно одержати доступ до цих об’єктів. Для цього кожному такому об’єкту надають назву (ідентифікатор) і у відповідний метод (функцію) передають цю назву (ідентифікатор). Якщо потрібно однакові дії виконати над кількома об’єктами, то потрібно створити колекцію об’єктів і проводити з об’єктами цієї колекції відповідні дії. Створити колекцію об’єктів інколи не просто. Для спрощення цієї роботи й використовують бібліотеку jQuery.
Для використання бібліотеки jQuery потрібно підключити файл jquery.min.js безпосередньо з одного з сайтів, який має відповідний файл:
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
</script>
</head>
або скопіювати цей файл у теку зі сценаріями Java Script (зазвичай з назвою js) даного сайту та підключити його таким чином:
<head>
<script type="text/javascript" src="js/jquery.js">
</script>
</head>
У поданих далі прикладах використано другий спосіб. Відповідний файл має такий початок.
/*! * jQuery JavaScript Library v1.4.2 * http://jquery.com/ * * Copyright 2010, John Resig * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license * * Includes Sizzle.js * http://sizzlejs.com/ * Copyright 2010, The Dojo Foundation * Released under the MIT, BSD, and GPL Licenses. * * Date: Sat Feb 13 22:33:48 2010 -0500 …
Структура сценарію↰
Код сценарію зазвичай пишуть чи підключають у голові веб документу. Але цей код, часто, потрібно виконати лише після завантаження всіх об’єктів документа. Якщо написали сценарій і розмістили його в голові документа, не вказавши, що його потрібно виконати лише після завантаження документа, його буде виконано для порожнього документа: відповідні теги ще не завантажено. У цьому випадку сценарій потрібно записати таким чином:
jQuery(document).ready( сценарій );
Круглі дужки позначають початок і кінець сценарію або чи фрагменту (блоку) сценарію. Запис сценарію завершують крапкою з комою. Сценарій реалізують функціями:
function( список параметрів ){ тіло функції };
У записі функцій для початку та кінця функції чи її фрагменту використовують не круглі, а фігурні дужки. Функції та вказівки в них розділяють крапкою з комою. Після останньої функції jQuery запиту крапку з комою не ставлять. Використовують два типи коментарів:
/* коментар всередині рядка чи на кілька рядків */
// коментар до кінця рядка.
Запишемо, наприклад, сценарій заміни кольору символів в усіх параграфах (теги р) на синій. Потрібно передбачити очікування на завантаження всього документа
до виконання функції пошуку всіх тегів р і заміни у них у стилі "css" кольору "color" на синій "blue":
<script>
jQuery(document).ready
(
function()
{
jQuery("р").css("color", "blue");
}
);
</script>Запис jQuery можна замінити символом $. Тобто даний сценарій можна переписати таким чином:
<script>
$(document).ready
(
function()
{
$("р").css("color", "blue");
}
);
</script>
Пошук та редагування вмісту сайту. ↰
Пошук можна робити за простою умовою за таким зразком:
$("h2") // вибір всіх тегів h2
$("#content") // вибір елементів за ідентифікатором: id=content
$(".wrapper") // вибір елементів за класом: class=wrapperПошук можна робити й за складною умовою, складаною з кількох простих, об’єднаних логічними (вказівками):
$("h1, h2") // вибір всіх тегів h1 і h2
$(".wrapper, .box") // вибір елементів з класів class=wrapper і class=boxта і:
$("div.wrapper") // вибір тегів div з класу class=wrapper
$("div#content") // вибір тегів div з ідентифікатором id=content
Зауважимо: ідентифікатор в одному файлі може бути тільки в одному тегові, тому остання умова є доцільною лише при пошуку в кількох файлах.
Можна шукати об’єкти, які розташовані всередині вказаних об’єктів. У запиті на пошук потрібно вказати, в яких об’єктах шукати, а потім після пропуску — ті об’єкти, які шукати. Наприклад:
$("div h2") // вибір всіх тегів h2 всередині тегів div
$("div р h2") // вибір всіх тегів h2 всередині тегів р, розташованих у тегах divЦі приклади можна записати більш наочно з використанням методу find(" "), перед записом якого ставлять крапку, щоб вказати, що цей метод викликають для вказаних чи знайдених раніше об’єктів:
$("div").find("h2")
$("div").find("р").find("h2")
Можна вибирати елементи, які розташовані перед чи після вказаних у пошуку об’єктів. Вибирати можна також всіх прямих попередників по ієрархії та підлеглих об’єктів, як безпосередніх так і до кінця ієрархії. Охочі можуть ознайомитися з деталями у джерелах, перелічених наприкінці розробки.
Зазвичай об’єкти шукають з метою здійснити з ними певні перетворення. Наприклад, змінити елементи стилю, використовуючи метод css():
css( властивість ) — одержання величини властивості;
css( властивість, величина ) — надати властивості величину;
css( властивість1: величина1,
властивість2: величина2, … ) — надати величини кільком властивостям.
Приклад:
$("#my").css('color') // одержати величину кольору шрифту
// об’єкту з ідентифікатором my
$("div").css('color', 'red') // змінити колір шрифту блоків div на червоний
$("div").css({ // у блоках div змінити:
'color':'red', // колір шрифту на червоний
'font-size':'14pt', // розмір шрифту на 14 пунктів
'margin-left':'10px' // ширину поля зліва на 10 пікселів
})
Апострофи в назвах, а не величинах, можна опустити. Але тоді назви потрібно записати за правилами мови JavaScript. Наприклад, 'font-size' потрібно замінити на fontSize, а 'margin-left' — на marginLeft.
Події↰
У мові JavaScript є кілька типів (груп) подій:
та інші. З опрацюванням події завантаження документу ми вже познайомилися при розгляді структури сценарію. Розглянемо використання подій подій роботи з мишею (подано у хронологічному порядку, ЛМК — ліва клавіша миші):
Розглянемо частину сценарію з використанням події click.
$(document).ready(function(){ $(".button").click(
/*при натисненні на будь який блок класу button -
виклик такої функції зміни параметрів блоків: */
function(){ /* зміна параметрів усіх блоків */
$("div").css({color:'red',
backgroundColor:'00ff00',
border:'2px solid 000000'})
/* потім - зміна параметрів блоків класу "button" */
$(".button").css({color:'ffff00',
backgroundColor:'0000ff',
border:'3px solid ff0000'})
/* наприкінці зміна параметрів блоку з id=d1 */
$("#d1").css({color:'00ffff',
backgroundColor:'ff00ff',
border:'3px solid 00ff00'})
})
});
Об’єкти WEB сторінки набувають вигляду з урахуванням початкових налаштувань і всіх здійснених над кожним об’єктом дій. Якщо, наприклад, у жодній дії з блоками ми не змінювали розмір шрифту, то кожен блок має свій розмір шрифту, вказаний у стилі цього блоку. Якби у поданому вище сценарії ми змінили колір символів (атрибут стилю color), а для блоків класу "button" та блоку з id=d1 колір символів не змінювали, то колір символів в усіх блоках був би однаковий, одержаний при діях з блоками.
У поданому сценарії є дії лише з блоками. Тому решта об’єктів сторінки не змінюють свого форматування. Сценарій реалізовано у файлі change.html, у якому описано стилі для блоків (тег div), параграфів (тег р), для об’єкту з ідентифікатором d1 (в даному файлі це блок), для об’єктів класу button (у даному файлі це два блоки).
Згортання й розгортання об'єктів ↰
Як бачимо, використання бібліотеки jQuery спрощує написання сценаріїв мовою JavaScript. Це стосується також і поки не розглянутих нами питань: пошуку й заміни тексту, опрацювання вмісту форм, створення анімації об’єктів.
Не всі браузери мають однакові методи пошуку та заміни тексту. Анімацію об’єктів у браузері Internet Explorer реалізовано з допомогою динамічних і статичних фільтрів. А в інших браузерах або зовсім не реалізовано, або реалізовано інакше.
У бібліотеці jQuery анімацію реалізовано подібно до динамічних фільтрів у браузері Internet Explorer: для вказаних часу та типу переходу з одного стану в інший: «показати» / «сховати». Час переходу задають у мілісекундах. Тип і стан вказують разом. Наприклад, при переході hide відбувається згортання об’єкта у точку догори, а при переході show — обернене розгортання з точки в об’єкт. У поданому далі коді при події click у одному з об'єктів класу button, викликається функція, що згортає, а потім негайно розгортає цей самий об'єкт.
<script type="text/javascript">
$(document).ready(function(){
$(".button").click(function(){$("#box").hide(1000);
$("#box").show(1000);
});
});
</script>
Приклад подано у файлі show.html.
Переходи slideUp і slideDown вказують на те, що згортання відбувається знизу вгору у відрізок, а розгортання — навпаки. Приклад використання подано у файлі slide.html.
Як бачимо, бібліотеки jQuery не лише спрощує написання сценаріїв мовою JavaScript, а й дозволяє не враховувати особливості реалізації сценаріїв сучасними браузерами. Надалі доцільно розглянути використання бібліотеки jQuery для:
Це можна зробити і на заняттях з інформатики, і самостійно, опираючись на джерела, згадані наприкінці розробки.
4. Закріплення вивченого матеріалу ↰
5. Підбиття підсумків уроку
Виставлення оцінок.
6. Домашнє завдання
Вивчити матеріал уроку. Підготуватись до практичної роботи по написанню сценарію з використанням бібліотеки jQuery:
створити html-сторінку з підписаними прикладами використання вивченого матеріалу.
Текст упорядкував Гезь Іван Федорович, вчитель інформатики ліцею «Універсум» Шевченківського району міста Києва, під час виконання випускної роботи на курсах підвищення кваліфікації з 07.10.2013 по 20.12.2013.