Как начать писать на JavaScript с нуля
Очень сложно представить современные сайты без интерактива с пользователем. Тогда бы они никак не взаимодействовали с нами, а любое нажатие приводило бы к полной перезагрузке страницы. Согласитесь, это очень скучно.
Рассмотрим, из чего состоят веб-странички. HTML (HyperText Markup Language) отвечает за придание странице структуры (показывает, где меню сайта, а где заголовок, логотип или статья) и контента (различные тесты, списки, изображения и т. д.). CSS (Cascading Style Sheets) отвечает за визуальную составляющую страницы: определяет, какого цвета и размера должен быть тот или иной блок, как его оформить и вывести пользователю.
Структура и оформление есть, но где же взаимодействие? Здесь на сцену выходит JavaScript. Виртуальный «диалог» с пользователем — от изменения части содержимого сайта в ответ на действия до современных игр в браузере — реализуется с помощью скриптов JavaScript. Этот язык программирования работает в браузере и позволяет взаимодействовать с веб-страницей в режиме реального времени, оживляя её и предоставляя пользователю обратную связь на все действия.
У JavaScript очень интересная история. Он — реализация стандарта ECMAScript, может работать не только в браузере. Но в статье мы рассмотрим только взаимодействие с браузером.
Создаём самый простой скрипт
В первом задании, которое традиционно выполняет студент при изучении языка программирования, нужно вывести на экран фразу «Hello, world». Это позволяет отработать самый важный аспект — вывод информации пользователю, а также познакомиться с базовой структурой программы. Поступим так же.
Есть множество способов что-то вывести на экран в браузере, но мы выберем самый простой. Откроем «Инструменты разработчика» (Developer Tools) в браузере Chrome. Сделать это можно через сочетание клавиш Ctrl + Shift + I или F12 (Cmd + Opt + I на macOS) или через меню браузера. В Google Chrome нужно нажать на три точки, в других браузерах эта настройка может выглядеть иначе. Далее выбираем пункт «Дополнительные инструменты» и «Инструменты разработчика».
У вас должно появиться примерно такое окно, как ниже. Какой именно сайт выбрать для работы, не важно, можете открыть и GeekBrains.
Нас интересует вкладка Console. В ней могут быть ошибки и предупреждения (красные или жёлтые надписи) — не обращайте на них внимания, они нам не помешают. Выполним задание — выведем «Hello, world» на экран. Для этого нам понадобится команда alert(). Она выводит текст, который передан в круглых скобках.
Обратите внимание на регистр — здесь он имеет значение. Также не упустите кавычки — любой текст мы обязаны обрамлять в двойные или одинарные кавычки.
Мы выполнили первое задание — вывели простой текст на экран.
Учимся писать чуть более сложные скрипты
На экране перед нами статичный текст, что не очень интересно. Хотелось бы больше взаимодействия с пользователем. Что, если мы будем спрашивать имя зашедшего на сайт и здороваться с ним?
Для этого нам нужно познакомиться с концепцией переменных в языках программирования. Переменная — это область в памяти компьютера, в которой хранится какое-либо значение. Мы можем использовать его как угодно.
Для создания переменной в JavaScript нужно применить ключевое слово let. Есть и другие, но не будем так глубоко погружаться в детали.
Требования к именованию переменных:
- Имя переменной не может начинаться с цифры.
- Имя переменной может содержать только буквы, цифры и символы «$» и «_».
- Здравый смысл подсказывает нам, что имя переменной должно отражать суть того, что в ней находится.
Создадим простую переменную, поместив в неё имя. Например, Иван.
Обратите внимание: мы объединили слово «привет» и переменную. Здесь имеет значение каждый символ: сначала alert, потом открывающая круглая скобка, которая говорит, что дальнейшие инструкции нужно вывести на экран. Затем кавычки, в которых заключён приветственный текст. Далее знак +, который подсказывает программе, что текст справа от знака нужно объединить с тем, что слева. И завершает это закрывающая круглая скобка.
Мы вывели имя из переменной на экран, но ведь было нужно показать имя, которое сообщит пользователь. Исправим это. Нам понадобится команда prompt(). Она задаст пользователю вопрос — запишем его в круглых скобках. Сохраним в переменную результат выполнения команды prompt().
Мы спрашиваем у пользователя имя, а когда он отвечает, здороваемся с ним. Ничего сложного.
Сохраняем наш первый скрипт
Мы написали программу (скрипт) в консоли браузера. Это было быстро и просто, но не очень практично — такой программой с пользователями не поделишься. Чтобы сделать это, сохраним программу в файл с расширением *.html. Имя можем дать произвольное. Так как HTML подразумевает определённую структуру контента, нужно её отчасти соблюсти, чтобы всё работало. Понадобятся теги <html> и <script>.
Редактировать и сохранять файлы со скриптами можно с помощью любого текстового редактора. Cамый простой и примитивный — «Блокнот», который поставляется вместе с Microsoft Windows. Есть и специальные редакторы кода, например, Visual Studio Code. В блоге даже выходила специальная подборка редакторов кода JavaScript — выбирайте и дерзайте 🙂
А если хотите извлечь из JavaScript максимум — приглашаем на факультет Fullstack JavaScript-разработки GeekBrains!
Написать программу для обращения к веб-странице
Допустим, надо написать программу, которя будет обращаться к определенной веб-странице, вводить выражение в форму и получать результат. Как такое делается?
bash + wget/curl + sed/awk
Такой большой, а не знаешь, как боты работают 🙂
или Mechanize (например, на перле)
или HtmlUnit
или PhantomJS
или Selenium
. тысячи их!
Боюсь твоих навыков для автоматического распознавания капчи просто не хватит, раз задаешь такие вопросы. Воспользуйся какой нибудь антикапчей. За деньги, да, но эффективно.
А так, любой скриптовый язык который умеет работать с http(s).
Сформировать и отправить POST-запрос согласно протокола должен уметь любой язык. Ты бы хоть намекнул, что есть в распоряжении.
Капчи там нет! Веб-страница ничем не защищена.
Готовой программы? У меня нет. Несколько лет назад ботоводил и эксплуатировал по этой схеме дырки в eRepublik. Алгоритм простой: формируем и отправляем post запросы, парсим пришедшие страницы.
А что такое post-запросы?
Метод запроса страницы в протоколе HTTP, подразумевающий отправку серверу некой информации (содержимое поля).
Смотри: Пример #1 Извлечь страницу и отправить данные методом POST
Я просто не в курсе. А как ему указать, содержимое какого поля мы хотим отправить?
Это на каком языке? Как эту программу запустить?
Так тебе нужно сэмулировать поведение пользователя (открыть страницу, заполнить поля) или тупо засабмитить форму?
Для второго вгет более чем подходит, как уже говорили. Для первого, если у тебя мак, лучше всего годится AppleScript, хотя штуки вроде нокогири тоже ок.
По-моему это очень толстый троллинг.
Подсмотреть на содержимое запроса при отправке его из браузера. Либо сниффером либо для удобства к браузерам можно прикручивать всякие плагины вроде Tamper data для Firefox.
А в чем различие? Есть страница, там форма. Если заполнить и отослать — все ок. Надо, чтобы это делалось автоматически.
Запустить в консоли?
Тогда такой файл:
после дать скрипту:
и запускать как обычно
А как потом ответ получить?
Спасибо, попробую разобраться.
Придёт в ответ на запрос.
Чтобы не тупить, рекомендую открыть и прочитать маны по html, bash, wget, sed.
Я не читал, просто поиском находил интересующие вопросы и быдлокодил на ходу.
Капчи там нет! Веб-страница ничем не защищена.
ну и в чём сложность? curl умеет и POST и GET запросы. У меня на форуме вроде валялся пример бота.
Логика такая: есть сайт. На нем 2 страницы — на 1й авторизация, а вторая — та, на которую нужно попасть после авторизации. Сначала проверяем, не существует ли у нас сохраненной куки для этого сайта. Если нет, то получаем куку — идем на страницу авторизации, заполняем форму, сабмитим ее, сохраняем куку на диске и загружаем ее. Затем переходим на требуемую страницу и выводим ее содержимое (print $content).
Если нужно выводить не всю страницу, а только что-то конкретное, тогда нужно парсить HTML — например, с помощью HTML::TreeBuilder::XPath.
Но если нужно только авторизоваться и вывести содержимое, то лучше через curl — намного проще.
Авторизации там тоже нет.
Да без разницы, тогда просто форму заполняешь и жмешь на кнопку.
Если тебе для «домашнего» применения, то можно просто делать скрипт на баше с использованием xdotool.
Поднимаешь систему в виртуалке с браузером.
Далее просто по заранее заданным координатам эмулитуешь свое тыканье.
Капчу можно тоже легко грабить скриншотом с экрана, распозновать уже сказали где.
Запалить такого «бота» почти нереально, и в случае очень очень хитрого сайта работать он будет куда надежнее.
Да, мой вариант на случай если защита таки есть и гемор есть с работой с curl.
Плюс он наверняка может быть проще, чем кодинг на любом языке 🙂
Ух ты. Пять звезд )
*facepalm*
Предлагаю прилюдно с позором сорвать звезды.
Здесь что, все — веб-дизайнеры?
Во-первых, это задача не для веб-дезингера; Во-вторых, она просто тривиальная.
1. Нужно открыть в браузере страницу с формой.
2. Открыть firebug (есть из-коробки в хроме и опере, в остальных легко прикручивается).
3. С включенным firebug (выбрать раздел network) отправляйте заполняйте форму и нажимаете кнопочку «отправить» или как она там называется.
4. Далее, в firebug-e появятся информация о всех запросах браузер списком, из этого списка нужно выбрать тот у которого «method: POST». Там будет информация о запросе, вам нужен раздел «Request body».
5. Из этого раздела нужно скопировать всю информацию в такой вот скрипт:
в строчку шесть. Ну и урл отредактировать (строчка 5).
6. нужно еще установить библиотеку python-requests. В suse это не проблема 😉
7. запустить скрипт из пункта 5:
Да, мой вариант на случай если защита таки есть и гемор есть с работой с curl. Плюс он наверняка может быть проще, чем кодинг на любом языке 🙂
может и проще, проблема в том, что там каую-нить точку дизайнер заменит, и бот в нужную кнопку не попадёт. Разве так сложно распарсить <form></form>?
причём тут дизайн? дизайн как раз тебе не нужен, нужно просто распарсить форму запроса, а вот шелуху дизайнера надо как раз выкинуть в /dev/null, боту должно быть наплевать, как кнопка выглядит, и где находится, его цель послать запрос «кнопка ХХХ нажата».
Ну мало ли что ТСу надо.
Попробуй написать на курле бота для сервисов гугла, с ноля, поймешь о каких ситуациях я говорю.
Попробуй написать на курле бота для сервисов гугла, с ноля, поймешь о каких ситуациях я говорю.
ну если посмотреть на посты ТСа, то там случай совсем примитивный, и ему достаточно 30и минутного вкуривания man curl. А с гуглом там случай ействительно сложный.
Да я просто увидел топик с обфусцированным js, и подумалось что моя рекомендация может быть полезна 🙂
Далее, в firebug-e появятся информация о всех запросах браузер списком, из этого списка нужно выбрать тот у которого «method: POST».
Так. Появились, но там только GET.
Похоже, вся инфа передается в имени URL. Как тогда обработать ответ?
так, ТС, сначала внимательно прочитай RFC по протоколу HTTP, потом обзорно про HTML в любой книжке для чайников. Если после этого не будет понятно, как написать сабжевую программу, то тут уже ничем помочь нельзя
Если в форме нет конфиденциальной информации, то можете скопипастить исходный код страницы с формой (до того как все заполнить и отправить) и выложить на пастебин, чтобы я посмотрел.
Если эту страницу не хочется «светить» — то все как я расписал, только в этом списке нужно найти ту страницу куда вас форма переправляет, там будет информация, которую нужно вставить в мой скрипт.
Всё! получилось. В выводе программы содержится нужная инфа. Осталось только выучить Питон, чтобы разобраться, как эту строчку вычленить из этого вывода и сделать программу интерактивной.
Если ответ приходит в формате html — то я недавно как раз об этом написал.
Если в другом формате — то либо соответствующую формату либу использовать, либо же через регулярки.
Управляем интернетом с помощью Python
Проблема: чтобы отправить задание на проверку в университет, мне приходится проходить через лабиринт веб-страниц настолько запутанный, что несколько раз я ошибался и отправлял задание не туда. К тому же, хоть эти дело пары минут, иногда оно кажется непреодолимым препятствием, например, когда ты закончил задание глубокой ночью и тебе в таком состоянии нужно еще напрячь мозг и вспомнить пароль.
Решение: автоматизировать отправку заданий с помощью Python! В идеале это выглядит так: я сохраняю задание, нажимаю пару кнопок и в считанные секунды это задание уже отправлено. Сначала я подумал, что такое волшебство возможно лишь в сказках, но потом я нашел Selenium — инструмент, который можно запрограммировать гулять по интернету за вас с помощью Python.
Каждый раз, когда нам приходится совершать одну и ту же последовательность действий, мы получаем прекрасную возможность перепоручить её выполнение программе, которая пройдет все шаги за нас.С помощью Selenium и Python достаточно единожды написать скрипт, и можно будет запускать его сколько угодно раз, что избавит вас от необходимости совершать рутинные бесполезные действия. В моем случае, этот скрипт еще и помог мне не ошибаться с адресом отправителя.
Далее я расскажу, как написать программу, которая научила браузер отправлять задания за меня. Для этого мы познакомимся с основами использования Python и Selenium для автоматизации работы в сети. Несмотря на то что этот код работает (я пользуюсь ей каждый день!), его нельзя бездумно скопипастить в свое приложение, потому что он заточен под мой проект. Тем не менее, общий подход, описанный здесь, можно применить к любому приложению. Весь код доступен на Github.
Подготовка
Прежде чем переходить к веселой части автоматизации веба, обозначим общую структуру наших действий. Сразу писать код без предварительного плана — значит потратить несколько часов в пустую. Я хочу написать программу, которая будет отправлять мои готовые задания в нужное место Canvas — систему управления обучением которую использует мой университет.
Структура папок (слева) и выполненное задание (справа)
Начнем с самого простого: мне нужно каким-то образом указать программе название задания и урока. Я поступил самым простым образом — создал папку для хранения выполненных заданий, а внутри неё завел дочерние папки для каждого урока. В этих вложенных папках я разместил выполненные задания, названные в соответствии с темой каждого урока. Программа может получать название класса из имени папки, а название задания из имени документа.
Первая часть кода — цикл, который проходит по папкам и ищет название задания и класса, которые мы храним в кортеже (tuple) Python:
Здесь мы задействуем файловую систему, и теперь программа знает, какой файл и куда отправлять. Следующий шаг — использовать selenium, чтобы выйти на нужную страницу и выгрузить задание.
Управляем интернетом с помощью Selenium
Перед началом использования selenium необходимо импортировать эту библиотеку и создать Selenium webdriver — браузер, которым мы будем управлять с помощью нашей программы. В моем случае я создаю движок (driver) Chrome и с помощью него открываю страницу, куда нужно отправить задание.
Как только мы открываем страницу Canvas, мы встречаемся с первым препятствием — формой авторизации. Чтобы пройти её, нам нужно ввести id и пароль и нажать на кнопку входа.
Веб драйвер можно сравнить с человеком, который видит указанную страницу первый раз: нам нужно предельно точно указать ему, куда кликнуть, что напечатать и какую кнопку нажать. Есть несколько способов указать веб драйверу, к какому элементу обратиться. Все они основаны на использовании селекторов. Селектор (selector) — это уникальный идентификатор элемента на странице. Чтобы найти селектор определенного элемента, в нашем примере пусть это будет CWRU ID, нужно исследовать веб-страницу. В Chrome это делается с помощью комбинации клавиш “ctrl + shift + i” или нажатием правой кнопкой мыши по элементу, а затем выбором пункта “Inspect” («Исследовать элемент») контекстного меню. В результате чего откроется инструмент разработчика Chrome ( Chrome developer tools) — чрезвычайно полезное средство для просмотра HTML-структуры любого сайта.
Чтобы найти форму с селектором “CWRU ID”, я кликнул по ней правой кнопкой мыши, нажал “Inspect” («Исследовать элемент») и в открывшейся панели инструментов разработчика увидел размещенный ниже код. Строка кода, соответствующая id выбранной нами формы, выделена цветом (это строка называется «HTML тег» (HTML tag).
Приведенный в примере HTML выглядит ужасающе, но мы можем проигнорировать бОльшую часть информации и сосредоточиться на частях id = «username» и name=»username» — их еще называют атрибутами HTML-тега.
Чтобы выбрать блок id с помощью нашего веб-драйвера Selenium, мы можем использовать атрибуты id or name , которые ранее нашли в инструментах разработчика. У веб-драйверов в Selenium есть много разных методов для выбора элементов на веб-странице и часто также несколько способов выбрать один и тот же элемент:
Наша программа теперь имеет доступ к id_box , и мы можем взаимодействовать с этим блоком различными способами, например, набрать на клавиатуре текст или щелкнуть по кнопке (если мы её предварительно показали драйверу).
Мы повторяем тот же процесс для формы с паролем и кнопки входа в систему, выбирая их в зависимости от того, что мы видим в инструментах разработчика Chrome. Затем мы отправляем информацию элементам или нажимаем на них по мере необходимости.
Как только мы вошли в систему, нас приветствует эта слегка неуклюжая панель:
Теперь нам снова необходимо сориентировать программу на веб-странице, указав именно те элементы, на которые нужно щелкнуть, а затем передать информацию для ввода. В этом случае я предлагаю программе выбрать курсы из меню слева, а затем класс, соответствующий заданию, которое мне нужно отправить:
Программа находит правильный класс, используя имя папки, которую мы сохранили на первом шаге. В этом случае я использую метод выбора find_element_by_link_text для поиска конкретного класса. «link text» элемента — это всего лишь еще один селектор, который мы можем найти, просмотрев страницу:
Этот алгоритм действий может показаться немного утомительным, но помните, что нам нужно запрограммировать его только один раз, когда мы пишем код! После этого мы можем запускать его столько раз, сколько захотим, и программа будет перемещаться по всем этим страницам вместо нас.
Мы используем одну и ту же последовательность «исследовать страницу — выбрать элемент — взаимодействовать с элементом», чтобы пройтись еще по паре экранов. Наконец, мы переходим на страницу отправки заданий:
На этом этапе я уже увидел, что близок к финишной черте, но вдруг этот экран озадачил меня. Я легко мог щелкнуть по «Выбрать файл», но как же мне выбрать файл, который нужно загрузить? Ответ оказывается невероятно простым! Мы находим Choose File с помощью селектора и используем метод send_keys для передачи точного пути файла (называемого file_location в коде ниже) в указанную форму:
Готово! Отправляя точный путь файла кнопке, мы можем пропустить весь процесс навигации по папкам, чтобы найти нужный файл. После отправки адреса загружаемого файла мы увидим следующий экран, показывающий, что наш файл загружен и готов к отправке.
Теперь мы выбираем кнопку «Отправить задание» («Submit Assignment») , кликаем на неё, и наше задание зачтено!
Рефакторим
Управление файлами всегда является критическим шагом, и я хочу убедиться, что я не отправляю повторно и не потеряю старые задания. Я решил, что лучшим решением будет сохранять один файл, который должен быть отправлен, в папку completed_assignments и перемещать файлы в папку submitted_assignments после того, как их засчитали. Последний кусочек кода использует модуль os для перемещения завершенного задания в нужное место и его переименования:
Весь этот код я вызываю с помощью небольшого скрипте, который я могу запустить из командной строки. Чтобы исключить ошибки, я отправляю только одно задание за раз, что не является большой проблемой, учитывая, что для запуска программы требуется всего 5 секунд!
Вот как это выглядит, когда я запускаю программу:
Пока программа выполняется, я могу видеть, как Python работает за меня:
Заключение
Технология автоматизации использования интернета с помощью Python отлично подходит для широкого круга задач, как общих, так и специфичных — таких, как моя область — data science. Например, мы можем использовать Selenium для ежедневной автоматической загрузки новых файлов с данными (при условии, что на сайте нет API). Хотя поначалу может показаться, что написание такого сценария — процесс трудозатратный, но его преимущество в том, что мы можем заставить компьютер повторять эту последовательность неизменным образом столько раз, сколько захотим. Программа никогда не потеряет фокус и не окажется случайно в Twitter. Он будет безукоризненно выполнять ту же последовательность шагов с идеальной точностью (правда это будет работать только до тех пор, пока сайт не изменится).
Я должен предупредить вас, что необходимо быть осторожным, прежде чем автоматизировать задачи повышенной важности. Задание из этого примера не связано с высоким риском, поскольку я всегда могу вернуться и повторно отправить задание, тем более что я обычно перепроверяю работу программы вручную. Веб-сайты меняются, и если вы не измените программу в ответ, вы можете получить скрипт, который сделает что-то совершенно иное, чем то, что вы изначально запрограммировали!
С точки зрения выгоды, эта программа экономит мне около 30 секунд для каждого задания. При этом на её написание я потратил 2 часа. Итак, если я использую её, чтобы отправить 240 заданий, то я существенно выиграю по времени! Тем не менее, главная отдача от этой программы заключается в том, что я разработал крутое решение проблемы и изучил много нового в процессе обучения. Возможно, я мог бы распорядиться своим временем более эффективно, потратив его на то, как выполнять задания, а не на то, как автоматически отправлять их. Несмотря на это, я испытал огромное наслаждение, занимаясь этой задачей. Не так много вещей может доставить удовольствие равное тому, которое мы получаем от успешного решения проблемы. И Python оказался довольно неплохим инструментом для этого.