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

пятница, 16 декабря 2016 г.

Изучаем JS - задания для начинающих на JS с ответами

Привет, друзья!
Поскольку надо прокачивать скил по js поискал учебные задания для новичков по javascript.
Нашел на одном англоязычном ресурсе - Задания по javascript. Кстати, если интересно, там есть задания не только по js, но и по jQuery, php, phyton, mySQL, C, C#, Java и тд. В общем практически по всем самым распространённым языкам программирования и некоторым фреймворкам.
В этой записи выложу перевод этих заданий.
Каждую запись в последствии сделаю ссылкой на её решение.

Задания по Javascript (сложность - основы)

  1. Вывести на экран текущую дату и время в указанном формате:
    Сегодня: Пятница
    Текущее время: 4PM:50:22 (pm - время от 0 часов до 12 часов дня, am - время соответственно с 12 часов дня до 24 часов)
  2. Написать программу для печати содержимого текущего окна. 
  3. Напишите программу для получения текущей даты:
    Формат вывода даты:
    м-д-год, м/д/год или д-м-год, д/м/год
  4. Напишите программу вычисления площади треугольника по трем сторонам, которые равны 5, 6 и 7. (Возможное усложнение - длину сторон получать от пользователя - мои примечания). 
  5. Напишите программу, которая периодически вращает надпись "w3resourse" в правом направлении, удаляя по одной букве с конца и добавляя по одной букве с начала. 
  6. Напишите программу, которая определяет, является ли год високосным или нет. 
  7. Напишите программу, которая находит в какие года между 2014 и 2050 воскресенье приходится на 1 января. 
  8. Напишите программу, которая загадывает случайное число в интервале от 1 до 10. После этого программа должна принимать ваш ответ, какое число загадано. Если пользователь угадал это число, программа должна отобразить "Хорошая работа!", если не угадал - "Не попал))". 
  9. Напишите программу, которая рассчитывает количество дней, которое осталось до следующего рождества (Возможные усложнения - можно сделать текстовое поле для ввода текущей даты и выпадающий список, в котором можно выбрать до какого праздника вы хотели бы посчитать дни).  
  10. Напишите программу для умножения и деления двух чисел, принимаемых через текстовые поля. Интерфейс программы ниже:
  11. Напишите программу для перевода температуры из/в градусов Цельсия и Фаренгейта. Формула для расчёта - c/5 = (f-32)/9 (где - c: градусы Цельсия, f: градусы Фаренгейта
  12. Напишите программу, которая показывает текущий адрес страницы. 

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

понедельник, 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 напоминает. 

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

воскресенье, 11 декабря 2016 г.

Изучаем JS - блок, меняющий цвет на рандомный

Идея такова - есть коробочка div с прописанным id. Мы обращаемся к ней. По клику по этому div мы генерируем три значения rgb для трех цветов (число от 0 до 255). Потом склеиваем эти три значения в строку вида: rbg(000, 000, 000) и передаём ее в  style.backgroundColor элемента.
Конечно, есть вероятность того, что новый цвет и текущий совпадет. Однако, она ничтожно мала (я так думаю 1 / (256*256*256). Собственно, html: 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тестовая JS страница</title>
        <style>
            #box {
                width:300px;
                height:300px;
                background-color:lightsalmon;
            }
        </style>
 </head>
 <body>
    <div id="box">Кликни, чтобы изменить цвет</div>
    <script src="test1.js"></script>
    </body>
</html>
И javascript.
 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
/* 
* Суперфункция для изменения цвета коробочки в рандомный.
* принимает параметр:
* box - id коробки
* to - количество ргб оттенка, до которого надо рандомить
*/

var el, curRGB, box, to, red, green, blue;
box = 'box';
to = 255;

el = document.getElementById(box);

el.addEventListener('click', function(event) {
             
            red = myRandom(to) + ',';
            green = myRandom(to) + ',';
            blue = myRandom(to);
            curRGB = 'rgb(' + red + green + blue + ')';
            el.style.backgroundColor = curRGB; 
            
        });
        function myRandom (to)  { // рандомайзер
      return Math.floor(Math.random() * to);
        }
Жалко, что здесь нельзя вставлять исполняемые скрипты на страницу.

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

суббота, 10 декабря 2016 г.

Изучаем JS - переход на другую страницу

Привет, друзья!
У глобального объекта window есть свойство location, у которого в свою очередь есть свойство href. href указывает на текущий адрес страницы. И позволяет задавать его. Подробнее прочитать - здесь. Напишем простой код для того, чтобы при нажатии на кнопочку - нас перекидывало на другой сайт.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
        <script>
           /* 
           * Функция получает целевой адрес страницы url 
           * на которую перекидывает пользователя. 
           */
           function changeURL(url){
           window.location.href = url;
           }
        </script>
      
 </head>
 <body>
  
    <button onclick="changeURL('http://google.ru')">Перейти в гугл</button>
    <button onclick="changeURL('http://yandex.ru')">Перейти в Яндекс</button>
    <button onclick="changeURL('http://pikabu.ru')">Перейти в Пикабу</button>

 </body>
</html>

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

пятница, 9 декабря 2016 г.

Изучаем 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
<script>
            var i = 1, j = 1, sum, text = "<table><tr>",
            text01 = "</tr><tr>", text02 = "<td>", 
            text03 = "</td>", text04 = "</td></tr></table>";
            
            document.write(text);
            
            
            while (i <= 9) {
                document.write(text02);
                
                
                while (j <= 9) {
                    j++;
                    sum = i * j;
                    document.write(i + "*" + j + "=" + sum + "<br/>");
                }
                document.write(text03);
                
                if (i === 3 || i === 6) {
                    document.write(text01);
                }
                i++;
                j = 1;
            }
            document.write(text04);
        </script>
И напишем CSS чтобы немного разукрасить всё это безобразие
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
 <style>
            table, td {
                border: 1px solid #5ea26b;
            }

            td {
                margin: 10px 15px;
                padding: 5px 10px;
            }
        </style>
Должен получиться такой результат

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

вторник, 6 декабря 2016 г.

Хорошая капча, не пробиваемая автоматизированными капчараспознавателями

Вот задумался о хороших капчах, которые нелегко распознаются автоматизированными средствами, при этом хорошо распознаются обычными пользователями. Запомните одно, если вашу капчу распознают вручную (т.е. образцы ваших реальных пользователей), то они вашу капчу должны распознавать хорошо. Иначе, ваши пользователи тоже будут отступать перед вашей капчей.
На ум пришло пару решений:


  1. Даётся картинка капча. В качестве неё выступает у нас первая строка картинок. Далее идёт подсказка. Это вторая и третья строки.
    А потом идёт текстовое поле <input> для ввода ответа.


  2. Второй вариант, в принципе понятно из картинки:
Надо понять только одно - надо максимально усложнить автоматическое распознавание и упростить  ручной ввод.
Если не понятно, ручной ввод - это ввод данных реальным пользователем. Усложняешь ввод для него - отталкиваешь пользователей от своего сайта.

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

воскресенье, 4 декабря 2016 г.

Как сделать хорошую капчу

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

Сегодня, в очередной раз столкнулся на одном сайте с "интересной" капчей. Интересная - это в моём понимании - тупая капча, при создании которой программист особо не задумывался, как будет происходить взаимодействие пользователя с капчей.
Это капча вида  - большие и малые буквы)). Вы же сами, наверняка с такими сталкивались.
Это самый идиотизм.
Для большей защиты - мои принципы хорошей капчи:
1. принимаются любые символы, строчные и прописные. Это надо явно указать в заголовке капчи.
2. Не применимы похожие символы, например, о и 0, з и 3 и тд.
3. Если уж хочешь усилить защиту - делай это жестко)). После трех вводов неправильной капчи - бан на 5 минут. После каждых 3 вводов - время бана увеличивается в 2 раза. Защита не должна быть чрезмерной.
4. Если уж хочешь усилить капчу - комбинируй методы, т.е. например, пиши выражение "Введите ответ": "Три плюс" и на картинке "два" и тд. Или, "Введите название третьей планеты от Солнца, как написано на картинке", рядом картинка, где нарисовано Солнце и все планеты с их названиями. Какой программер распознаватель сможет распознать какой текст надо вставить? Никакой.
А от ручных распознаваний капчи ты никак не спасешься. 

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