Введите текст для поиска

понедельник, 12 декабря 2016 г.

Изучаем JS - события, атрибуты

Привет, друзья!
В этот раз мне захотелось сделать так, чтобы у меня была кнопочка <button>, по клику на которой у нас бы:
1. Менялся весь цвет текста на странице
2. Менялся весь цвет фона на странице
3. Менялась надпись на кнопочке. Т.е. если у нас на странице - ночной режим, - > на кнопочке отображаем "Сделать день", в обратном случае на кнопочке - > "Включить ночь".
4. Вместе с заменой текста на кнопочке - надо, чтобы менялся и бекграунд и цвет надписи на кнопочке. Будет это всё выглядеть примерно так день - :
это день
А здесь - ночь
это ночь
Для реализации задуманного будем использовать следующее:

  • Стили текста будем оформлять с помощью соответствующих классов: для body class = 'day/night', для кнопки - class = 'btnDay/btnNight'. Можно было бы прописывать все свойства css вручную, но это же тупо, согласитесь)). Проще прописать класс css, и его динамически присвоить при помощи js. Также, если вам надо будет изменить позже оформление, то как и положено - вы идёте в css и меняете оформление, а не копаете js. 
  • getElementById () - чтобы взять конкретный элемент (в нашем случае это будет кнопочка)
  • getAttribute('class') - этим методом получим текущий класс элемента body
  • innerHTML - свойство элемента, меняем текст внутри кнопки
  • setAttribute('class', 'day') - устанавливаем новый атрибут class который равен в данном случае 'day'. 
  • И самое интересное - addEventListener() - метод элемента, прочитайте о нем отдельно, поскольку я так понял, это самый правильный метод назначения реакции на события (клик мышью, клик правой кнопкой, нажатие на клавиатуре и тд)
Все эти методы  и тд легко гуглятся. Если интересно, набирайте в методах - то, что написано до скобок, например для getElementById ()  - в поисковике - 'js getelementbyid',  для свойств соответственно просто  - для innerHTML - в поисковике - js innerhtml.
Итак, html


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тестовая JS страница</title>
        <style>
            .day {
                color:#393337;
                background-color: white;
            }
            
            .night {
                color:#d9dbda;
                background-color: #252525;
            }

            .btnDay {
                color:#393337;
                background-color: white;
            }

            .btnNight {
                color:#d9dbda;
                background-color: #252525;
            }
            

            .wrap{
                background-image: none;
                z-index: 5;
            }


            .center-align{
                width:800px;
                margin:0 auto;
                text-align: justify;
                text-align: center;
                
            }
            p {
                text-align: justify;
                text-indent: 5%;
                font-size: 18px;
                margin-left: 25px;
                margin-right: 20px;
                
            }
        </style>
 </head>
 <body>
    
    <div class="wrap">
        <div class="center-align">
        
                <button id= 'changeColor' class = 'btnNight'>Включить ночь</button>
                <h1>Привет, тебе случайный посетитель!</h1>
                <p>Товарищи! постоянный количественный рост и сфера нашей активности требуют определения и уточнения систем массового участия. Разнообразный и богатый опыт начало повседневной работы по формированию позиции влечет за собой процесс внедрения и модернизации направлений прогрессивного развития. Идейные соображения высшего порядка, а также укрепление и развитие структуры влечет за собой процесс внедрения и модернизации позиций, занимаемых участниками в отношении поставленных задач. Повседневная практика показывает, что постоянный количественный рост и сфера нашей активности обеспечивает широкому кругу (специалистов) участие в формировании позиций, занимаемых участниками в отношении поставленных задач. Равным образом постоянный количественный рост и сфера нашей активности позволяет выполнять важные задания по разработке новых предложений. Задача организации, в особенности же новая модель организационной деятельности способствует подготовки и реализации направлений прогрессивного развития.</p>

<p>Повседневная практика показывает, что постоянный количественный рост и сфера нашей активности в значительной степени обуславливает создание систем массового участия. Задача организации, в особенности же реализация намеченных плановых заданий позволяет оценить значение существенных финансовых и административных условий. Равным образом постоянное информационно-пропагандистское обеспечение нашей деятельности влечет за собой процесс внедрения и модернизации существенных финансовых и административных условий. Таким образом рамки и место обучения кадров позволяет оценить значение направлений прогрессивного развития.</p>

<p>Задача организации, в особенности же реализация намеченных плановых заданий играет важную роль в формировании новых предложений. Таким образом дальнейшее развитие различных форм деятельности играет важную роль в формировании систем массового участия. Равным образом сложившаяся структура организации влечет за собой процесс внедрения и модернизации новых предложений. Таким образом начало повседневной работы по формированию позиции в значительной степени обуславливает создание форм развития. С другой стороны начало повседневной работы по формированию позиции позволяет оценить значение системы обучения кадров, соответствует насущным потребностям.</p>
        </div>  
    </div>
    
    <script src="test1.js"></script>
    </body>
</html>
и сам test1.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/* 
* Суперфункция для изменения изменения класса body страницы
* и изменения надписи на кнопочке. 
*/


;'use strict';

var el, btn, elHasClass, bdClass;
el = document.body;  /*присваиваем класс day или night всему body, 
                            чтобы изменить фон и текст страницы*/
btn = document.getElementById('changeColor'); /* Дергаем кнопочку, чтобы менять текст на ней*/

 btn.addEventListener('click', function (event) {
    elHasClass = el.getAttribute('class'); // узнаем значение class у body


    bdClass = isDayOrNight (elHasClass); /* передаем предыдущий параметр, 
                                            чтобы перевести его в число*/
          switch (bdClass){
                case 0:
                case 1: // если класс пустой (по умолчанию) или день - day
                    el.setAttribute('class', 'night');
                    btn.innerHTML = 'Сделать день';
                    btn.setAttribute ('class', 'btnDay');
                    break;
                case 2: // если ночь - night
                    el.setAttribute('class', 'day');
                    btn.innerHTML = 'Включить ночь';
                    btn.setAttribute ('class', 'btnNight');
                    break;
                } 
                        }
                                               );


function isDayOrNight (status){
    if (status=== null){ // если у нас нет класса у body
        return 0;
        }
    else if (status=== 'day'){ // если у body класс равен day
        return 1;
    }
    else if (status=== 'night'){ // если у body класс равен night
        return 2;
    }
    else { // это просто защита от ошибок))
        return 'error';
    }
}
Предвосхищая вопросы - подсветка кода осуществлена с помощью сервиса hilite.me. Эта цветовая схема  - называется 'fruity'. Мне понравилось, чем-то sublime напоминает. 

Если вам понравилась/принесла пользу эта запись, то сказать "СПАСИБО" очень просто - поделитесь записью в социальных сетях при помощи кнопочек ниже. Вам несложно, а мне приятно!

Комментариев нет :

Отправить комментарий