Веб-программирование → Классная работа №2: Диско!

Привет, друзья! 

Буду иногда на сайте выкладывать как туториал то, что мы проходили на парах. Сегодня мы с вами научились работать с Инспектором браузера, выполнять скрипты в Консоли разработчика и познакомились с библиотекой jQuery. В этой статье будет как раз об этих вещах. 

Итак, поехали! 

Инспектор кода

Инспектор кода помогает разработчику отлаживать фронтенд-код, видеть расположение html-элементов, работать с CSS, выполнять и отлаживать JS-код и много чего другого. Можете даже изучать чужие сайты и получать оттуда что-нибудь полезное для себя. 

Чтобы запустить инспектор нужно кликнуть на страницу правой кнопкой мыши и выбрать пункт "Просмотреть код"(Inspect). В разных браузерах может быть по разому. 

Вот так выглядит Инспектор в Chrome.

Во вкладке Elements мы видим структуру html элементов в виде дерева. Мы можем кликнув два раза на элемент, попробовать поменять его текст или атрибут. Справа показаны стили применные к выбранному html-элементу. Мы можем вручную поменять стили и посмотреть как это будет смотреться. Потом новые стили нужно скопировать в ваш код вручную, потому что браузер сам не может сохранять измененные стили в ваш файл. 

Вкладка Console помогает работать с JavaScript. Там будут показываться ошибки разные, логовые сообщения. Также тут можно выполнять js-код вручную и проверить как это будет работать.

Вкладка Sources содержит все исходные файлы которые загружены на этой странице: html, css, js файлы. 

Теперь попробуем немного поработать с Инспектором. Для этого создайте два файла:

Файл classwork2.html:

<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="classwork2.css">
</head>
<body>
    <div id="first-block"  class="block">
        <div class="inner-block">
        </div>
        <div class="inner-block">
        </div>
    </div>

    <div id="second-block" class="block">
        <div class="inner-block">
        </div>
        <div class="inner-block">
        </div>
    </div>

    <div id="third-block" class="block">
    </div>

    <div class="block">
    </div>
</body>
</html>

И рядом с ним файл classwork2.css:

.block{
    width: 100px;
    height: 100px;
    background: #ffabab;
    margin: 6px;
}

.inner-block{
    background: #e400ff;
    width: 30px;
    height: 30px;
    margin: 2px;
}

В результате вы должны увидеть такое:

Теперь откройте Инспектор и попробуйте изменить цвет блоков, размер и размещение. Поэкспериментируйте.

JavaScript

После экспертиментов со стилями откройте вкладку Console. Поработаем с JavaScript. Лекция про JavaScript здесь и здесь. Во вкладке Console будет внизу строка начинающаяся так >. Введите сюда команду:

alert("Привет JS!")

и нажмите Enter. У вас должно появиться всплывающее окно с надписью "Привет JS!". Дальше попробуем создать переменную, присвоить ему значение и вывести его значение.

var username = "SuperMan";
alert("Hello, " + username);

Во второй строчке мы соединяем текст "Hello, " со значением переменной username. Результат будет отображен во всплывающем окне. 

Библиотека jQuery

Библиотека jQuery будет нам помогать легче работать с html-элементами на странице и манипулировать ими. jQuery это обычный js файл, который можно скачать на сайте jQuery. Там выберите compressed production. 

Скачайте файл, положите в одной папке с вашим html файлом и подключите его в html файл. Для этого добавить тег <script>:

<head>
    <meta charset="UTF-8">
    <script src="jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="classwork2.css">
</head>

Название вашего jquery файла может отличаться. После этого откройте ваш html-файл в браузере и откройте вкладку Console инспектора. Здесь мы испробуем jQuery. 

jQuery позволяет манипулировать html-элементами. Чтобы начать ими манипулировать, надо их сначала получить. jQuery позволяет их получить с помощью метода, с названием $. Этот метод принимает как параметр CSS-селектор, который будет говорить какие элементы нужно выбрать. Например чтобы получить все теги <div> нужно написать:

$("div")

Для получения всех элементов, у которых есть класс block, нужно написать:

$(".block")

Для получения элемента с id="first-block" пишем:

$("#first-block")

Другие CSS-селекторы найдете в инете или в третьей лекции. 

После того как мы получили элементы, мы можем их менять. Давайте поменяем фоновый цвет всем элементам с классом block. Для этого пишем так:

$(".block").css("background", "cyan")

После выполнения этого кода, все ваши блоки поменяют фон на светло-голубой.

Функция css принимает два параметра: первый - название стиля, второй значение. Используя этот же метод поменяем ширину первого блока:

$("#first-block").css("width", 300)

Надеюсь вам понятно. 

Функции

В JS можно создавать функции, которые выполняют небольшой кусок кода. Чтобы начать с ними работать, давайте создадим пустой js-файл с названием classwork2.js и подключим его в наш html-файл:

<head>
    <meta charset="UTF-8">
    <script src="jquery-3.2.1.min.js"></script>
    <script src="classwork2.js"></script>
    <link rel="stylesheet" href="classwork2.css">
</head>

Теперь мы можем в этой файле писать код, который будет выполняться на нашей странице. 

Функции объявляются так: Напишите в файле classwork2.js:

function makeAllRed(){
    $(".block").css("background", "red")
}

Мы создали функцию с названием makeAllRed, который меняет цвет всех блоков на красный. Чтобы выполнить эту функцию, отройте браузер, перезагрузите страницу и в Консоли введите:

makeAllRed()

Все ваши блоки должны стать красными. 

Теперь добавьте еще две функции:

function showAll(){
    $(".block").show();
}

function hideAll(){
    $(".block").hide();
}

Первый показывает все блоки, второй скрывает. Попробуйте вызвать эти методы через Консоль и убедитесь что элементы скрываются и показываются. 

Что-то я уже полтора часа пишу эту статью, а она не заканчиваются. Напишу остальное быстро.

Для того, чтобы выполнить какой-то скрипт после загрузки всей страницы, мы используем событие ready объекта document. Для этого мы должны определить одну функцию, которая будет вызываться когда страница полностью загрузится. Назовем для примера эту функцию onReady и укажем чтобы она выполнялась когда страница готова:

function onReady(){
    
}

$(document).ready(onReady);

Пока она ничего не выполняет. Напишите внутри этой функции вызов другой функции makeAllRed() и перезагрузите страницу и вы увидите что все блоки стали красными.

function onReady(){
    makeAllRed();
}

$(document).ready(onReady);

Кстати цвета в CSS можно задавать не только так: #FF0044, но и так rgb(120, 44, 22) где каждое число не может быть больше 255. Например в  CSS:

.block{
    background: rgb(120, 23, 189);
}

Создадим Функцию, которая будет генерировать случайный цвет:

function randomColor(){
    red = Math.round(Math.random()*255);
    blue = Math.round(Math.random()*255);
    green = Math.round(Math.random()*255);
    return "rgb("+red+","+green+","+blue+")";
}

Генерирует три случайных числа до 255 и соединяет их в одну строку. 

Теперь сделаем так, чтобы при клике на наши блоки, они меняли свой цвет на случайный. Для этого после загрузки страницы, мы должны все блокам повесить обработчик события клик, который будет менять цвет фона текущего элемента. Это делается так: Поменяйте тело функции onReady так:

function onReady(){
    $(".block").on("click", function(){
        $(this).css("background", randomColor());
    })
}

метод on() принимает два параметра: первый - название события, второй - функция, которая будет выполняться, когда это событие произойдет. В данном случае клик. Внутри методе доступна переменная this - которая будет указывать на текущий(кликнутый) элемент и мы можем его менять. 

Теперь перезагрузите вашу страницу (Ctrl+Shift+R) и покликайте на ваши блоки и они должны менять цвет. Если не работает то, попробуйте очистить кеш или проверьте код на ошибки. 

Теперь попробуем запустить таймер, который через каждые 500 миллисекунд будет менять цвет блоков на случайный. Для запуска таймера используется функция setInterval() первый параметр которого - функция, которая будет выполняться повторно, второй параметр - это задержка между повторами, третий - задержка перед запуском таймера в первый раз. 

Создадим функцию runDisco(), который будет менять цвет каждого блока, на случайный:

function runDisco(){
    $(".block").each(function(){
        $(this).css("background", randomColor());
    });
}

теперь в функции onReady() запустим таймер, чтобы функция runDisco() вызывалась через каждые 500 миллисекунд. 

function onReady(){
    setInterval(runDisco, 500, 0);
}

Теперь, если обновите страницу у вас блоки должны менять свои цвета случайным образом. Должна быть дискотека!

Если что-то не работает сравните ваш код с результирующим:

classwork2.html:

<html>
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.2.1.min.js"></script>
    <script src="classwork2.js"></script>
    <link rel="stylesheet" href="classwork2.css">
</head>
<body>
    <div id="first-block"  class="block">
        <div class="inner-block">
        </div>
        <div class="inner-block">
        </div>
    </div>

    <div id="second-block" class="block">
        <div class="inner-block">
        </div>
        <div class="inner-block">
        </div>
    </div>

    <div id="third-block" class="block">
    </div>

    <div class="block">
    </div>
</body>
</html>

classwork2.css:

.block{
    width: 100px;
    height: 100px;
    background: rgb(120, 23, 189);
    margin: 6px;
}

.inner-block{
    background: #e400ff;
    width: 30px;
    height: 30px;
    margin: 2px;
}

classwork2.js:

function makeAllRed(){
    $(".block").show();
}

function showAll(){
    $(".block").show();
}

function hideAll(){
    $(".block").hide();
}

function onReady(){
    setInterval(runDisco, 500, 0);
}

function runDisco(){
    $(".block").each(function(){
        $(this).css("background", randomColor());
    });
}

function randomColor(){
    red = Math.round(Math.random()*255);
    blue = Math.round(Math.random()*255);
    green = Math.round(Math.random()*255);
    return "rgb("+red+","+green+","+blue+")";
}

$(document).ready(onReady);

Надеюсь я понятно все написал. Если нет, то пишите мне вопросы. 

ДЗ: Сделайте дома что-нибудь круто и прикольное используя то, что вы узнали. Удачи!

746 10
Alisher Alikulov