Практичні завдання для самостійного вивчення CSS/JS/JQuary.
Любомир Іваницький


<Бібліотека скриптів JavaScript jQuery

Спробуємо використовувати скрипти javascript, не вивчаючи самої мови. Для цього нам пригодиться JavaScript-бібліотека з відкритим кодом jQuery.

jQuery — дає нам інструментарій адресації DOM об'єктів за допомогою CSS селекторів.
Завдяки чому ми зможемо міняти властивості стилю любого тегу сторінки:колір, розмір символів тощо, розшуковуючи їх через портрібний клас, індифікатор чи саму назву тегу.

Для використання бібліотеки 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>
Або викачати цей файл у теку зі сценаріями JavaScript файл повинен містити розширення js.
Тоді його підключають до сторінки таким чином:
<head>
<script type="text/javascript" src="js/jquery.js">
</script>
</head>

Ми використаємо другий спосіб.

Структура сценарію - jQuery(document).ready( сценарій );
Круглі дужки позначають початок і кінець сценарію. Запис сценарію завершують крапкою з комою.
Сценарій реалізують функціями: function( список параметрів ){ тіло функції };
У записі функцій використовують не круглі, а фігурні дужки. Функції та вказівки в них розділяють крапкою з комою. Після останньої функції jQuery запиту крапку з комою не ставлять.

1.Завдання
Напишемо,сценарій заміни кольору символів у тезі b на синій колір і навпаки.
Для цього потрібно виконати такий алгоритм:
- Пошук всіх тегів b і заміна у них у стилю "css" кольору "color" на синій "blue":
- Пошук всіх тегів b і заміна у них у стилю "css" кольору "color" на синій "red":
Для цього напишемо function prob() та function prob1() і підключити їх в head, опис внизу
Щоб викликати цю функцію вставимо в вашу сторінку два теги input - кнопки.
<input type="button" value="Синій" onclick="prob()">
<input type="button" value="Червоний" onclick="prob1()">
<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.ЗавданняПерегляньте цю сторінку - Спробуйте зробити слайдшоу якогось зображення.