Изучаем JavaScript

Оператор расширения позволяет расширять выражения в тех местах, где предусмотрено использование нескольких аргументов (при вызовах функции) или ожидается несколько элементов (для массивов) Источники http://www.codewars.com/kata/572ab0cfa3af384df7000ff8 https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Spread_operator Да. Это базовые понятия JavaScript. Правда, пока ничего непонятно Смотрим примеры: function plus(a, b, c, d, e) {   return a + b + c + d + e; } var arg1 = [1, 2, 3, 4, 5]; plus(...arg1); // 15 Функция складывает пять чисел. Ок. Ей предлагают в качестве аргумента массив из пяти чисел. Так написать нельзя: plus([1, 2, 3, 4, 5]); Потому что массив это только один аргумент. Остальные аргументы отсутствуют и функция считает их undefined . В результате получится что-то вроде "1,2,3,4,5undefinedundefinedundefinedundefined" Печальное зрелище.   Получается, что если нужно предложить в качестве аргумента массив, присв...

42 задания на базовые понятия языка JavaScript http://www.codewars.com/kata/571ec274b1c8d4a61c0000c8 Other Katas series: - Coding 3 Minutes Series - Shortest Code Series - Fastest Code Series - Thinking and Testing Series - Play Game Series - Pattern Series Конструкция switch function howManydays(month){ switch (month){ case 2: return 28 case 4: case 6: case 9: case 11: return 30 } return 31 } http://www.codewars.com/kata/572059afc2f4612825000d8a/solutions/javascript Сделать первую букву заглавной var str="this is an example."; var result=str[0].toUpperCase()+str.slice(1); result; // "This is an example." Так проще: var str="this is an example."; var result=str.replace(str[0],str[0].toUpperCase()); result; // "This is an example." http://www.codewars.com/kata/5728203b7fc662a4c4000ef3 Сделать первую букву заглавной в каждом слове var str="this is an example."; var words=str.split(" ...

Демо: https://codepen.io/irinainina/full/gXpRZB/ Код: https://codepen.io/irinainina/pen/gXpRZB Как изменить цвет svg-изображения при наведении, если svg добавлено в качестве фона через background-image. Все известные мне источники утверждают, что это невозможно. Ни одного решения данного вопроса (а задают его достаточно часто, например: Как заменить заливку svg при hover? SVG игнорирует hover, как его заставить работать? ) найти не удалось. Все предложенные решения Css SVG hover color ; How do I make an SVG image change color when hover предлагают или вставлять svg в html, что выглядит не очень хорошо с точки зрения понятности, читаемости, лаконичности html-кода, или использовать два svg с разным цветом для разных состояний элемента, но это лишние файлы и при наведении иконки меняются не мгновенно, может быть заметная задержка, когда изображение исчезает, а потом появляется другого цвета, а это, очевидно, не тот эффект, на который мы рассчитываем. Тем не менее, решение ес...

Устанавливаем WordPress Заходим на сайт https://ru.wordpress.org/ скачиваем WordPress Распаковываем скачанный архив Заходим в папку blog.log , созданную на прошлом занятии. Внутри неё создаём папку template и в неё переносим все наши файлы. В папке blog.log создаём ещё одну папку - www . Это будет рабочая директория для нашего хоста Открываем скачанную и распакованную папку WordPress и все файлы из неё копируем в папку www Теперь нам нужно обновить информацию о нашем хосте Запускаем OpenSerwer --- Настройки --- Домены --- Удаляем blog.log --- Находим папку www и в окне Имя домена пишем blog.log Создаём базу данных для WordPress Для этого используем программу Navicat Устанавливаем и настраиваем программу. Нажимаем Connection => MySQL  --- Ок Клик правой кнопкой NewConnection --- New Database --- blog Закрываем программу Navicat. Больше мы с базой данных напрямую работать не будем. Запускаем установку WordPress Заходим по адресу...

Скачиваем и устанавливаем OpenServer https://ospanel.io/ Проблем с этим нет, кроме того, что OpenServer занимает на диске 7 ГБ  Редактор кода у меня Brackets, на нём и остановлюсь. Автор рекомендует PHPStorm Создаём директорию, в которой будет размещаться наш сайт. Для этого переходим по адресу C:\OSPanel\domains и создаём там папку blog.loc Создаём host для нашей директории. Для этого идём в OpenServer --- Настройки --- Находим нашу папку --- Добавить --- Сохранить  Проверим работоспособность хоста. Для этого лик правой кнопкой по значку сервера в панели задач, Запустить, и переходим по адресу http://blog.loc Вот такая картинка говорит, что всё в порядке В папке проекта blog.loc создаём файл index.html Переходим по адресу http://getbootstrap.com/ и скачиваем bootstrap из всего перечня, который там предлагают, нас интересует только один файл bootstrap.min.css, который находится в папке dist/css Копируем его и помещаем в папку libs (библиотеки), кото...

Год выпуска : 2015 Автор : Борис Заболотских Продолжительность : Около 3 часов Раздача на рутрекере: https://rutracker.org/ Канал на ю тубе  https://www.youtube.com/ Язык : Русский Очень небольшой видеокурс - всего шесть видеоуроков от 20 до 40 минут каждый в которых автор показывает и рассказывает как создать сайт на WordPress  Список видео     Создание html шаблона для будущей WordPress темы     Установка и знакомство с WordPress     Создание собственной темы WordPress         Создание своих шорткодов     Установка и обзор популярных плагинов     Написание собственного плагина Мне курс понравился.Он небольшой, т.е. пройти его реально за неделю. Он практически направлен, к о гда объясняют и сразу делают. Он относительно новый, 2015 года выпуска. Объясняет автор достаточно подробно, доступно, понятно. Радует внимание, с которым автор отнёсся к ...

— предполагаю, что аккаунт на гитхабе уже есть — справа вверху, там где аватарка пользователя, нажимаем на плюс слева от аватарки и выбираем New organisation — теперь нужно указать имя организации — любое слово на английском и свой е–mail и внизу нажать Create organisation а затем Finish — теперь нажимаем на зелёную кнопку Create a new repository — здесь важно. имя репозитория должно повторить имя организации плюс .github.io. Например, если организация называлась js3023, то репозиторий будет называться js3023.github.io — и ещё важно поставить галочку в строке Initialize this repository with a README — затем нажимаем Create repository — в репозитории справа вверху есть кнопка Upload files — нажимаем на эту кнопку и перетаскиваем все файлы сайта: index.html,.js,.css, папки с шрифтами, картинками, музыкой и т.д. Для загрузки файлов лучше подходит Хром, Firefox папки с файлами принимает не всегда. И загружаемые файлы не должны весить больше 35Мб — нажимаем Cоmmit c...

Вопросы о том как указать язык репозитория на github время от времени появляются в сети, например Как сменить язык git-репозитория?, Как изменить язык программирования у репозитория GitHub?, Гитхаб неверно определяет язык репозитория По первым двум ссылкам вместо ответов почему-то рассказывают, что менять язык не нужно, даже если он определяется неверно, а по третьей рабочий способ описывается запутанно и не особо понятно. На самом деле язык меняется в несколько кликов. Приведу пример для JavaScript, остальные меняются аналогично. Открываем Блокнот, копируем в него две строки: * linguist-vendored *.js linguist-vendored=false Сохраняем с именем .gitattributes (точка вначале нужна) Загружаем файл в репозиторий, в котором нужно сменить язык Результат. Обратите внимание что язык репозитория JavaScript 30 определяется как HTML из-за того, что js-код лежит внутри файла index-html Было  Стало Решение нашла здесь stackoverflow.com

На гитхабе есть репозиторий https://github.com/irinainina/codewars На компьютере папка codewars Задача: связать папку и репозиторий, чтобы изменения в папке (добавление или удаление файлов) отображались в репозитории Решение 0. Открываем Git Bash 1. Склонировать репозиторий $ git clone https://github.com/irinainina/codewars Клонирование В результате на рабочем столе появилась папка codewars 2. Перейти в эту папку $ cd learn.javascript.ru Или зайти в папку кликнув по ней мышкой и внутри папки открыть Git Bash 3. Проверить текущий статус $ git status 4. Добавляем в папку нужные файлы, удаляем ненужные 5. Отследить изменения (точка в конце обязательна) $ git add .   5. Закоммитить изменения $ git commit -m .  или  $ git commit -m "пишем, что изменили, чтобы не запутаться"  6. Залить изменения на гитхаб $ git push -u origin master Результат Было  Стало  

Демо: https://js3032.github.io/ Код: https://github.com/js3032/js3032.github.io Мне кажется важным подводить итог сделанному, чтобы иметь возможность показать себе и другим чем занимался, чему научился, на что потратил время. И для самого себя делать такие отчёты важнее, чем для других. Сайт мне нравится. Несколько слов о задачах, которые возникали и их решениях. 1) В качестве прототипа взяла это портфолио https://chippd.github.io/ Мне оно понравилось.  В целом заметила, что wow-эффекты на сайтах привлекают внимание только при первом просмотре, а потом начинают утомлять. Поэтому современные сайты делают максимально спокойными Цветовую гамму подбирала здесь https://www.pantone.com/color-of-the-year-2017 и здесь https://colorganize.com/ В итоге остановилась на цветах, выбранных в исходном сайте. Но сайты с сочетаниями цветов заслуживают внимания и могут быть полезными в будущем. 2) Переключение языков на сайте реализовала в html , где для каждого абзаца делала две...

Это был замечательный опыт, я узнала много интересного, научилась делать забавные вещи, попробовала использовать ES6. Курс позволил прикоснуться ко многим новым возможностям  JavaScript и применить их в проектах. Очень важно, что это был не теоретический курс, что он включал в себя практические задания Автор любит  JavaScript и передаёт свою любовь тем, кто у него учится. Автор оптимист и своим оптимизмом заражает других. Автор профессионал. У него хороший, красивый, лаконичный, новый современный код. Это крайне важно учиться у профессионалов, чтобы сразу прививать вкус и любовь к хорошему и красивому коду Ура, что проект завершён. И очень хочется, чтобы он был не последним, чтобы были и другие подобные курсы

Демо: https://js3030.github.io/ Код: https://github.com/js3030/js3030.github.io Это последнее задание курса и в нём мы поиграем в классическую игру Whack-A-Mole wiki . Но вначале её напишем, потому что играть в свою собственную игру в разы забавнее. Разметка <span class="score">0</span></h1> <button onClick="startGame()">Start!</button> <div class="hole hole1">     <div class="mole"></div> </div> Элемент span , в котором будут показаны набранные баллы, кнопка начала игры и шесть div с классом hole , внутри каждого из них div с классом mole Стили В CSS есть класс «.up», который изменяет верхнюю позицию мола от 100% до 0%. .hole.up .mole {     top: 0; } Добавление этого класса приводит к тому, что цель становится видимой Код Находим элементы разметки var holes = document.querySelectorAll(".hole"); var scoreBoard = document.querySelector(".sc...

Демо: https://js30291.github.io/ Код: https://github.com/js30291/js30291.github.io Задание сделать таймер обратного отсчета. Какие-то значения времени пользователь может выбирать, а также есть поле ввода, чтобы ввести другое количество времени в минутах. Таймер также выводит время окончания заданного временного промежутка. Разметка <div class="timer">     <div class="timer__controls">         <button data-time="20" class="timer__button">20 Secs</button>         <button data-time="300" class="timer__button">Work 5</button>         <button data-time="900" class="timer__button">Quick 15</button>         <button data-time="1200" class="timer__button">Snack 20</button>         <button data-time="3600" class="timer__button">Lunch ...