{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда что-то не получается","type":"unstyled","key":"92gj0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"emjbi"},{"data":{"image":{"id":"635a703c290d0d13f917c407"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"diigi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2l1f8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Допустим, вы начали писать свою первую реально полезную программу на JavaScript. У вас появляются реальные задачи, и они намного сложнее, чем обойти массив и сложить два числа. Где искать ответы на вопросы, о которых вы раньше не подозревали? У кого заимствовать идеи? Как их вклеить в свой код? Что делать, если что-то не работает, хотя должно?","type":"unstyled","key":"909k3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот об этом — в статье.","type":"unstyled","key":"cfmof"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"90dv4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как начать исполнять программы","type":"header-two","key":"2dvbu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Раньше вы могли исполнять код в браузере, прямо в консоли: открываете любую страницу, вызываете консоль, пишете код, исполняете.","type":"unstyled","key":"dl45"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для рабочих проектов вам нужно будет разработать какой-то носитель для кода — что-то, что можно будет запустить с компьютера или из интернета. Для этого вам понадобятся два компонента:","type":"unstyled","key":"5ttp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Веб-страница с HTML — она будет отвечать за интерфейс программы и нести в себе код JavaScript.","type":"unordered-list-item","key":"c77s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код JavaScript, встроенный в эту страницу или в отдельном файле.","type":"unordered-list-item","key":"11s5s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Страницу нужно будет положить на компьютер или опубликовать в интернете.","type":"unstyled","key":"1a7ti"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML — это язык гипертекстовой разметки документов (HyperText Markup Language). Проще говоря, это набор команд, которые говорят нашим браузерам, как рисовать сайты. Самая простая страница выглядит так:","type":"unstyled","key":"cedaf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"a677e"},{"data":{"image":{"id":"635a7bd2cf0bae447b05104e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"29r9m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"d6dj1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cdjgh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На ней ничего нет, это просто шаблон, который можно наполнить своим содержимым — текстом, картинками, кнопками и скриптами.","type":"unstyled","key":"9ipce"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"broft"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML-страница сама по себе просто показывает какой-то контент. Чтобы там началась какая-то работа программы, внутрь страницы нужно встроить скрипт. Его можно добавлять прямо в HTML-файл в раздел ","type":"unstyled","key":"87n45"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот файл нужно положить туда, где находится наша HTML-страница — в этом случае браузер заберёт команды оттуда и сам добавит их выполнение на сайт.","type":"unstyled","key":"ed0k6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fomo3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Куда положить скрипт? Теоретически скрипт можно положить в любое место страницы. Но для корректной работы он должен находиться перед закрывающим тегом . То есть сначала должны загрузиться все элементы интерфейса и все стили, а потом — скрипт. Если в скрипте идёт обращение к каким-то элементам страницы, но эти элементы ещё не загрузились, браузер может выдать ошибку, а программа не исполнится.","type":"unstyled","key":"6p5nb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"То есть правильно так:","type":"unstyled","key":"1br74"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bbu0m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n \n \n \n \n\n","type":"unstyled","key":"88teq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Консоль","type":"header-two","key":"8vigj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При отладке скрипта вам понадобится консоль браузера. Туда вы будете выводить сообщения об ошибках, тестировать кусочки кода, вызывать отдельные функции, в общем — тыкать программу.","type":"unstyled","key":"f8ng7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почти во всех современных браузерах консоль можно открыть сочетанием клавиш Shift + Ctrl + J или Cmd + Alt + J. Справа или снизу появится дополнительное окно, в котором уже будет что-то происходить:","type":"unstyled","key":"57qrc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7prdv"},{"data":{"image":{"id":"635a7c64e0490e71edf31713"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"bbu5a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"afig3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если у вас не открылась консоль, зайдите в верхнее меню и поищите слово «Консоль». Обычно этот пункт прячется в разделе «Инструменты разработчика».","type":"unstyled","key":"bh7ho"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда вы открываете консоль, она сразу готова выполнять ваши команды. Если в неё вставить программу, написанную на JavaScript, и нажать Enter, ваш браузер её исполнит. Если в коде есть ошибки, консоль сама подсветит их. Можно отправлять в неё программу кусками: браузер будет помнить всё, что происходило в вашей программе, пока вы не перезагрузите страницу.","type":"unstyled","key":"cc1s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Самые основы JavaScript","type":"header-two","key":"a2hkb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Напомним необходимый минимум, чтобы писать на JavaScript: переменные, типы данных, циклы и условия, функции.","type":"unstyled","key":"99cu0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Переменная — это небольшая часть оперативной памяти, которой можно дать своё имя, а потом что-то там хранить: числа, строки и всё остальное. Самый простой способ объявить переменную — написать:","type":"unstyled","key":"a6il7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"var i; ← просто объявили переменную i;","type":"unstyled","key":"e046t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":3,"style":"BOLD"}],"text":"или var i = 15; ← объявили переменную i и сразу положили туда число 15.","type":"unstyled","key":"2j22i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы компьютер знал, как работать с какой переменной, используют типы данных — они говорят компьютеру, что именно лежит в переменной, например:","type":"unstyled","key":"cul16"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var a = 1; ← целое число;","type":"unstyled","key":"c0t36"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var b = 0.75; ← дробное число;","type":"unstyled","key":"bjmev"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var c = 'Привет! '; ← строка;","type":"unstyled","key":"c6ith"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var d = [1,2,3,4,5]; ← массив;","type":"unstyled","key":"fbguh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var f = true; ← логическое значение.","type":"unstyled","key":"86rrj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript относится к языкам со слабой типизацией — это значит, что если мы сначала положим в переменную число, а потом строку, то скрипт легко даст нам это сделать.","type":"unstyled","key":"6es9i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вместо var вы часто встретите в чужом коде слово let. Это тоже объявление переменной, но локальной: как только выполнится текущий кусок кода (например, цикл или функция), эта переменная самоуничтожится. Обычно глобальные переменные для всей программы объявляют через var, а внутренние и временные переменные — через let.","type":"unstyled","key":"7c6k1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Циклы. Если нам нужно, чтобы компьютер сделал что-то несколько раз подряд, используют циклы. Главное, за чем следят в цикле, — чтобы он точно когда-нибудь закончился. Если этого не предусмотреть, то цикл будет выполняться бесконечно и программа зависнет.","type":"unstyled","key":"alrtd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В JavaScript есть три вида циклов:","type":"unstyled","key":"ac5n6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"Цикл for. В общем виде он выглядит так:","type":"unstyled","key":"7ghcm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bt6ko"},{"data":{"image":{"id":"635a7c7e480b001e194e3a33"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1trfe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8nv9o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Начало — это с какого значения переменной мы начинаем работать в цикле, условие — до каких пор цикл будет выполняться, а шаг — это на какое значение будет меняться переменная цикла. Например, вот как можно вывести числа от 0 до 10 в цикле for:","type":"unstyled","key":"8p9hs"},{"data":{"image":{"id":"635a7c91c6b7334f31a47a08"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7vriq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"75u1n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Цикл while. Он сначала проверяет условие, потом выполняет то, что внутри цикла, потом снова идёт проверять условие, и так до тех пор, пока условие не станет ложным:","type":"unstyled","key":"fq0j7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cq4ir"},{"data":{"image":{"id":"635a7ca6c8733e6f747638de"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"emrfs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"f24di"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выведем те же числа от 0 до 10:","type":"unstyled","key":"eusiv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"344mv"},{"data":{"image":{"id":"635a7cba749697368ba91349"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"40vk4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bspdv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Цикл do.while. Работает так же, как предыдущий, только мы сначала хотя бы раз выполняем тело цикла, а потом идём проверять условие:","type":"unstyled","key":"8f7sb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5j1fg"},{"data":{"image":{"id":"635a7ccccf0bae447b060152"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1052p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5fcsv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Функции. В скриптах часто используют функции — это мини-программы, которые сначала описываются, а потом вызываются одной строкой. В общем виде функции выглядят так:","type":"unstyled","key":"13uo2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"f6jee"},{"data":{"image":{"id":"635a7ce2cd00240d9676bead"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"b9vo2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"31fj5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например, эта функция выводит в консоль текущее время и дату:","type":"unstyled","key":"bjlr4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7mds6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function printCurrentDate() {","type":"blockquote","key":"32ei7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\tvar objToday = new Date(),","type":"blockquote","key":"4oq5i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\tweekday = new Array('Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'),","type":"blockquote","key":"4q54h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\tdayOfWeek = weekday[objToday.getDay()],","type":"blockquote","key":"dpd97"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\tdayOfMonth = objToday.getDate(),","type":"blockquote","key":"bab20"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\tmonths = new Array('января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'),","type":"blockquote","key":"8uub5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\tcurMonth = months[objToday.getMonth()],","type":"blockquote","key":"bq7lv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\tcurYear = objToday.getFullYear(),","type":"blockquote","key":"7r04i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\tcurHour = objToday.getHours() > 12 ? objToday.getHours() - 12 : (objToday.getHours() < 10 ? \"0\" + objToday.getHours() : objToday.getHours()),","type":"blockquote","key":"4n67p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\tcurMinute = objToday.getMinutes() < 10 ? \"0\" + objToday.getMinutes() : objToday.getMinutes(),","type":"blockquote","key":"c9lrf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\tcurSeconds = objToday.getSeconds() < 10 ? \"0\" + objToday.getSeconds() : objToday.getSeconds(),","type":"blockquote","key":"bhfge"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var today = curHour + \":\" + curMinute + \" \" + dayOfWeek + \" \" + dayOfMonth + \" \" + curMonth + \" \" + curYear+ \" г.\";","type":"blockquote","key":"72hvq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"return today;","type":"blockquote","key":"cc8bg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"190ir"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9iha1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ff7n7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А чтобы выполнить всё это хозяйство, достаточно написать в консоли или вызвать в коде одну команду:","type":"unstyled","key":"9utda"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"printCurrentDate();","type":"unstyled","key":"8ev41"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обратите внимание, что в коде выше в конце функции стоит слово return. Оно значит, что когда функция исполнится, она отдаст какое-то значение тому, что её вызвало. Если лично вы вызвали функцию из консоли, то лично вам в консоль вернётся значение текущей даты. А если вы хотите, чтобы эта дата вылезла в виде всплывающего окошка, нужно будет вызвать эту функцию вот так:","type":"unstyled","key":"5e5kc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"alert(printCurrentDate());","type":"unstyled","key":"ejhe6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что переводится как «Исполни функцию printCurrentDate без дополнительных аргументов, а её результат передай команде alert».","type":"unstyled","key":"2oabf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кстати, как только функция выполняет команду return, она отдаёт нужные данные и перестаёт выполняться.","type":"unstyled","key":"2gh8l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Аргументы функции. У функции могут быть аргументы: это способ сообщить что-то в функцию. Например, у вас может быть функция для проверки логина и пароля. Чтобы проверить их, вам нужно передать в функцию логин и пароль. Вы указываете при объявлении функции, что вам нужно передать в неё эти два параметра, и называете их по именам. Дальше внутри функции вы можете использовать эти имена. А при вызове функции вам нужно вместо имён передать уже настоящие данные.","type":"unstyled","key":"1uoue"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот мы определили функцию, в которую передаются два параметра, а потом они проверяются:","type":"unstyled","key":"98fsf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function checkUserCredentials(username, password){\n/*тут вы проверяете переменные username и password, например так:*/\nif (username == secret1 && password == secret2){\nreturn true;\n}else{\nconsole.log('Неверный логин или пароль');\nreturn false;\n}\n}","type":"unstyled","key":"862ri"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2tcuq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А теперь вызываем эту функцию, но уже с нужными данными:","type":"unstyled","key":"e901i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var isValidUser = checkUserCredentials('admin','qwerty');","type":"unstyled","key":"fndlh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вместо конкретных строк admin и qwerty можно передать в функцию значения других переменных, а также целые объекты, массивы и что угодно ещё. Представьте, что это такое окошко, через которое вы передаёте что-то в функцию.","type":"unstyled","key":"44djg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1l7kb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как обратиться к чему-то на странице","type":"header-two","key":"cje1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Иногда в коде нужно обратиться к какому-то элементу на странице: конкретной кнопке, абзацу, элементу с определённым классом или названием. Для этого используют такое:","type":"unstyled","key":"1ms80"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"document.getElementById () — находит элемент по его ID. Например, если у нас есть абзац

Это текст абзаца

, то обратиться к нему можно так:","type":"unstyled","key":"1e81n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var s = document.getElementById(\"radio\");","type":"unstyled","key":"cfppd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После этого через переменную s можно работать с этим конкретным абзацем.","type":"unstyled","key":"11ibv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кроме document.getElementById () ещё применяют:","type":"unstyled","key":"87ij6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.getElementsByName() — поиск по имени элемента;","type":"unordered-list-item","key":"99adc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.getElementsByClassName — по названию класса;","type":"unordered-list-item","key":"d2r8r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.querySelector() — возвращает первый элемент с указанным CSS-стилем;","type":"unordered-list-item","key":"e0la5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.querySelectorAll() — возвращает все элементы с указанным CSS-стилем.","type":"unordered-list-item","key":"6a67s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bjd70"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как вставить чужой код и вызвать его","type":"header-two","key":"bc4a8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Наверняка у вас возникнет ситуация, что вы хотите решить какую-то задачу кодом, но вообще не знаете, как к ней подойти. Тогда:","type":"unstyled","key":"232b0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы пишете в поисковой системе, что вам нужно сделать.","type":"ordered-list-item","key":"d53s3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Скорее всего, вы попадёте на сайт StackOverflow.","type":"ordered-list-item","key":"ftp7o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Там вы увидите несколько вариантов решения вашей проблемы с готовым кодом.","type":"ordered-list-item","key":"fcuu7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы возьмёте этот код и вставите в свой.","type":"ordered-list-item","key":"6uh9s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Возможно, он заработает.","type":"ordered-list-item","key":"di122"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы код заработал, помните о таких нюансах:","type":"unstyled","key":"2c609"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Чаще всего вам дадут функции, которые нужно будет потом вызвать. Например, вы скопировали какой-то такой код:","type":"unstyled","key":"1dat5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function solveMyProblem(){\n/*тут непонятный код*/\n}","type":"unstyled","key":"i8am"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы вставляете этот код в свою программу, но ничего не происходит. Причина в том, что вы вставили функцию, но не вызвали её. Теперь нужно её вызвать — например повесить исполнение этой функции на кнопку. Или для начала просто открыть консоль и выполнить эту функцию:","type":"unstyled","key":"31i5s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"solveMyProblem();","type":"unstyled","key":"4i3dm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":55,"offset":0,"style":"BOLD"}],"text":"В функции могут быть ссылки на что-то в вашей странице. Например, у вас функция, которая делает что-то с вашей страницей — скажем, меняет цвет элемента. И там будет такая строка:","type":"unstyled","key":"c8dkj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.getElementById(\"myElement\");","type":"unstyled","key":"77msp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вместо myElement может быть что-то другое. Вот на место этого слова нужно вписать айдишник нужного вам объекта на странице. Если у нужного объекта нет айдишника, его нужно прописать. Например:

...

.","type":"unstyled","key":"et036"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bokg6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как повесить событие на кнопку или нажатие клавиши","type":"header-two","key":"10jf4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Самый простой способ научить страницу реагировать на действия пользователя — сопоставить какое-то действие с нажатием кнопки на сайте или на клавиатуре.","type":"unstyled","key":"8ilp4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Кнопка на странице:","type":"unstyled","key":"cgpaf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создаём кнопку на странице тегом ","type":"ordered-list-item","key":"6dgha"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавляем обработчик нажатия onclick — он сработает, когда мы нажмём на кнопку:\n","type":"ordered-list-item","key":"b4jgg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внутри кавычек пишем JS-команду или функцию из нашего скрипта, который мы подключили к странице. Например, вызовем функцию test():\n","type":"ordered-list-item","key":"4jp8"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":47,"offset":151}],"inlineStyleRanges":[],"text":"Сейчас при нажатии на кнопку у нас сработает функция test () — для этого страница пойдёт в скрипт, найдёт эту функцию и выполнит её. Можно посмотреть, как устроен проект по предсказанию курса крипты, — там мы тоже используем обработчик кнопок на странице.","type":"unstyled","key":"2ae65"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Кнопка на клавиатуре:","type":"unstyled","key":"79gnk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавляем на страницу стандартный обработчик событий addEventListener().","type":"ordered-list-item","key":"er69j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Указываем, что будем следить за нажатиями на клавиатуре — пишем параметр 'keydown'.","type":"ordered-list-item","key":"160gv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внутри обработчика проверяем код кнопок и выполняем нужные действия, например, вызываем функции.","type":"ordered-list-item","key":"1lv57"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":26,"offset":51}],"inlineStyleRanges":[],"text":"Например, вот так мы сделали управление платформой в пинг-понге на JavaScript:","type":"unstyled","key":"8od21"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"22rfg"},{"data":{"image":{"id":"635a7ea1c8b9af558e15a15e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6qkh2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7phsm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нужна ли здесь jQuery или какая-нибудь ещё библиотека?","type":"header-two","key":"7cpfj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Библиотеки в языках программирования — это дополнительные модули, которые подключаются к программе. Сила библиотек в том, что с их помощью можно одной командой заменить несколько десятков строк кода.","type":"unstyled","key":"6e5ag"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чаще всего из дополнительных библиотек при веб-разработке подключают jQuery — с ней многие вещи можно сделать проще и быстрее. Примерно в половине случаев, когда вы берёте чужой код, там используется jQuery. Самый верный признак этого — в коде есть знак доллара и конструкции типа:","type":"unstyled","key":"999nn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7pmpb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var $elem = $(\".SomeClass\")\n$elem.remove();","type":"unstyled","key":"c551o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9s2f9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы такое заработало, нужно подключить jQuery на HTML-странице, добавив перед вызовом своего скрипта такую строку:","type":"unstyled","key":"30bn6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5rs8q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ad8n2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"c67vr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если знака доллара нет, но при запуске скрипт ругается на какую-то команду, то, скорее всего, нужно подключить что-то ещё. Самый простой способ узнать, что именно подключать, — набрать в Яндексе набрать название этой команды и добавить фразу «как работает». Например, если скрипт выдаёт ошибку на команде LUME.defineElements();, то первый же ответ в поиске даст нам нужную библиотеку:","type":"unstyled","key":"5otvo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"327j9"},{"data":{"image":{"id":"635a7ecf6f19516f07507331"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ash47"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3ehgh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Куда ходить за вопросами или помощью","type":"header-two","key":"6khcv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если нужно разобраться, как работает какая-то функция, библиотека или технология, — читайте «Код».","type":"unstyled","key":"9mg5f"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":14,"offset":42}],"inlineStyleRanges":[],"text":"Если нужно быстрое решение — ищите его на StackOverflow.","type":"unstyled","key":"1bptb"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":29,"offset":91},{"key":4,"length":18,"offset":154}],"inlineStyleRanges":[],"text":"Если нужна помощь со стороны и подробные объяснения, как что устроено, — приходите учиться в Практикум на веб-разработку. Можно не спеша на курсах, можно быстро на буткемпе.","type":"unstyled","key":"cf538"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"989ti"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что дальше","type":"header-two","key":"43a3k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В следующей статье попробуем собрать рабочий проект из разных кусков StackOverflow, склеивая его с помощью базовых знаний о разработке. А пока посмотрите, как устроены некоторые наши проекты:","type":"unstyled","key":"nabt"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":39,"offset":0}],"inlineStyleRanges":[],"text":"Своя игра: создаём собственную «Змейку»","type":"unordered-list-item","key":"eh7ae"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":32,"offset":0}],"inlineStyleRanges":[],"text":"Пианино на JavaScript для Chrome","type":"unordered-list-item","key":"aceuo"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":37,"offset":0}],"inlineStyleRanges":[],"text":"Автоматическое оглавление на странице","type":"unordered-list-item","key":"ebucl"},{"data":{},"depth":0,"entityRanges":[{"key":8,"length":19,"offset":0}],"inlineStyleRanges":[],"text":"Делаем игру Quatro ","type":"unordered-list-item","key":"9c4b1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"e7sg3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"77bur"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"btn9s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"pmjhYSSjKClUz5aN9cCE"}],"entityMap":{"0":{"data":{"url":"https://v.thecode.media/387lq"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://v.thecode.media/d19hj"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"http://stackoverflow.com/","url":"http://stackoverflow.com/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://practicum.yandex.ru/web/?utm_source=pr&utm_medium=media&utm_campaign=pr_media_web_kod&utm_content=september","url":"https://practicum.yandex.ru/web/?utm_source=pr&utm_medium=media&utm_campaign=pr_media_web_kod&utm_content=september"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://practicum.yandex.ru/bootcamp/?utm_source=pr&utm_medium=media&utm_campaign=pr_media_bootcamp_kod","url":"https://practicum.yandex.ru/bootcamp/?utm_source=pr&utm_medium=media&utm_campaign=pr_media_bootcamp_kod"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"url":"https://v.thecode.media/1nlod"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"url":"https://v.thecode.media/ie8gl"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"url":"https://v.thecode.media/3ffxl"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"url":"https://v.thecode.media/rp877"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}