Практичні завдання для самостійного вивчення CSS/JS/JQuary.
Любомир Іваницький
<Бібліотека скриптів JavaScript jQuery
Спробуємо використовувати скрипти javascript, не вивчаючи самої мови.
Для цього нам пригодиться JavaScript-бібліотека з відкритим кодом jQuery.
jQuery — дає нам інструментарій адресації DOM об'єктів за допомогою CSS селекторів.
Завдяки чому ми зможемо міняти властивості стилю любого тегу сторінки:колір, розмір символів тощо, розшуковуючи їх через портрібний клас, індифікатор чи саму назву тегу.
Для використання бібліотеки jQuery потрібно підключити файл jquery.min.js безпосередньо з одного з сайтів, який має відповідний файл:
Структура сценарію - jQuery(document).ready( сценарій );
Круглі дужки позначають початок і кінець сценарію. Запис сценарію завершують крапкою з комою.
Сценарій реалізують функціями: function( список параметрів ){ тіло функції };
У записі функцій використовують не круглі, а фігурні дужки.
Функції та вказівки в них розділяють крапкою з комою.
Після останньої функції jQuery запиту крапку з комою не ставлять.
1.Завдання
Напишемо,сценарій заміни кольору символів у тезі b на синій колір і навпаки.
Для цього потрібно виконати такий алгоритм:
- Пошук всіх тегів b і заміна у них у стилю "css" кольору "color" на синій "blue":
- Пошук всіх тегів b і заміна у них у стилю "css" кольору "color" на синій "red":
Для цього напишемо function prob() та function prob1() і підключити їх в head, опис внизу
Щоб викликати цю функцію вставимо в вашу сторінку два теги input - кнопки.
<script>
function prob(){
$("b").css("color", "blue");
}
function prob1(){
$("b").css("color", "red");
}
</script>
Результат повинен бути таким:
Виклик скріпта маніпулятором миша
Події при роботі з мишею: mouseover — входження вказівника в об’єкт; mousedown — натиснення ЛКМ, коли вказівник у даному об’єкті; mouseup — відпускання ЛКМ, коли вказівник у даному об’єкті; click — натискання й відпускання ЛКМ, коли вказівник у даному об’єкті; dblclick — подвійне натискання ЛКМ, коли вказівник у даному об’єкті; mouseout — вихід вказівника з об’єкту;
2.Завдання Скоріюйте в свою папку любу сторінку. Задайте деяким блокам class="button", а дечким ідентифікатор id="d1".
Підключити в head, код внизу.
Випробуйте результат.
$(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'})
})
});
3.ЗавданняПерегляньте цю сторінку
- Спробуйте зробити слайдшоу якогось зображення.