Как выполнить javascript в строке браузера
Обновлено: 06.07.2024
Клиентский JavaScript-код может встраиваться в HTML-документы четырьмя способами:
встроенные сценарии между парой тегов <script> и </script>;
из внешнего файла, заданного атрибутом src тега <script>;
в обработчик события, заданный в качестве значения HTML-атрибута, такого как onclick или onmouseover;
как тело URL-адреса, использующего специальный спецификатор псевдопротокола JavaScript:.
В следующих далее подразделах описываются все четыре способа встраивания программного кода на языке JavaScript. Следует отметить, что HTML-атрибуты обработчиков событий и адреса URL с псевдопротоколом javascript: редко используются в современной практике программирования на языке JavaScript (они были более распространены на раннем этапе развития Всемирной паутины).
Встроенные сценарии (в тегах <script> без атрибута src) также стали реже использоваться по сравнению с прошлым. Согласно философии программирования, известной как ненавязчивый JavaScript (unobtrusive JavaScript), содержимое (разметка HTML) и поведение (программный код на языке JavaScript) должны быть максимально отделены друг от друга. Следуя этой философии программирования, сценарии на языке JavaScript лучше встраивать в HTML-документы с помощью элементов <script>, имеющих атрибут src.
Элемент <script>
Клиентские JavaScript-сценарии могут встраиваться в HTML-файлы между тегами <script> и </script>:
В языке разметки XHTML содержимое тега <script> обрабатывается наравне с содержимым любого другого тега. Если JavaScript-код содержит символы поддерживает атрибут src, который определяет URL-адрес файла, содержащего JavaScript-код. Используется он следующим образом:
Файл JavaScript-кода обычно имеет расширение .js и содержит JavaScript-код в «чистом виде» без тегов <script> или любого другого HTML-кода.
Тег <script> с атрибутом src ведет себя точно так, как если бы содержимое указанного файла JavaScript-кода находилось непосредственно между тегами <script> и </script>. Обратите внимание, что закрывающий тег </script> обязателен, даже когда указан атрибут src и между тегами отсутствует JavaScript-код. В разметке XHTML в подобных случаях можно использовать единственный тег <script/>.
При использовании атрибута src любое содержимое между открывающим и закрывающим тегами <script> игнорируется. При желании в качестве содержимого в тег <script> можно вставлять описание включаемого программного кода или информацию об авторском праве. Однако следует заметить, что инструменты проверки соответствия разметки требованиям стандарта HTML5 будут выдавать предупреждения, если между тегами <script src=""> и </script> будет находиться какой-либо текст, не являющийся пробельными символами или комментариями на языке JavaScript.
Использование тега с атрибутом src дает ряд преимуществ:
HTML-файлы становятся проще, т.к. из них можно убрать большие блоки JavaScript-кода, что помогает отделить содержимое от поведения.
Если сценарий на языке JavaScript используется сразу несколькими страницами, он будет загружаться браузером только один раз, при первом его использовании - последующие страницы будут извлекать его из кэша браузера.
Атрибут src принимает в качестве значения произвольный URL-адрес, поэтому JavaScript-программа или веб-страница с одного веб-сервера может воспользоваться кодом (например, из библиотеки подпрограмм), предоставляемым другими веб-серверами. Многие рекламодатели в Интернете используют этот факт.
Возможность загрузки сценариев со сторонних серверов, отличных от тех, где находятся документы, использующие эти сценарии, влечет за собой важное следствие, имеющее отношение к обеспечению безопасности. Политика общего происхождения предотвращает возможность взаимодействия сценария на JavaScript в документе из одного домена с содержимым из другого домена. Однако следует отметить, что источник получения самого сценария не имеет значения, значение имеет источник получения документа, в который встраивается сценарий.
Таким образом, политика общего происхождения в данном случае неприменима: JavaScript-код может взаимодействовать с документами, в которые он встраивается, даже если этот код получен из другого источника, нежели сам документ. Включая сценарий в свою веб-страницу с помощью атрибута src, вы предоставляете автору сценария (или веб-мастеру домена, откуда загружается сценарий) полный контроль над своей веб-страницей.
Обработчики событий в HTML
JavaScript-код, расположенный в теге <script>, исполняется один раз, когда содержащий его HTML-файл считывается в веб-браузер. Для обеспечения интерактивности программы на языке JavaScript должны определять обработчики событий - JavaScript-функции, которые регистрируются в веб-браузере и автоматически вызываются веб-браузером в ответ на определенные события (такие как ввод данных пользователем).
JavaScript-код может регистрировать обработчики событий, присваивая функции свойствам объектов Element (таким как onclick или onmouseover), представляющих HTML-элементы в документе.
Свойства обработчиков событий, такие как onclick, отражают HTML-атрибуты с теми же именами, что позволяет определять обработчики событий, помещая JavaScript-код в HTML-атрибуты. Например:
Обратите внимание на атрибут onClick. JavaScript-код, являющийся значением этого атрибута, будет выполняться всякий раз, когда пользователь будет щелкать на кнопке.
Атрибуты обработчиков событий, включенных в разметку HTML, могут содержать одну или несколько JavaScript-инструкций, отделяемых друг от друга точками с запятой. Эти инструкции будут преобразованы интерпретатором в тело функции, которая в свою очередь станет значением соответствующего свойства обработчика события.
Однако обычно в HTML-атрибуты обработчиков событий включаются простые инструкции присваивания или простые вызовы функций, объявленных где-то в другом месте. Это позволяет держать большую часть JavaScript-кода внутри сценариев и ограничивает степень взаимопроникновения JavaScript и HTML-кода. На практике многие веб-разработчики считают плохим стилем использование HTML-атрибутов обработчиков событий и предпочитают отделять содержимое от поведения.
JavaScript в URL
Еще один способ выполнения JavaScript-кода на стороне клиента - включение этого кода в URL-адресе вслед за спецификатором псевдопротокола javascript:. Этот специальный тип протокола обозначает, что тело URL-адреса представляет собою произвольный JavaScript-код, который должен быть выполнен интерпретатором JavaScript. Он интерпретируется как единственная строка, и потому инструкции в ней должны быть отделены друг от друга точками с запятой, а для комментариев следует использовать комбинации символов /* */, а не //.
«Ресурсом», который определяется URL-адресом javascript:, является значение, возвращаемое этим программным кодом, преобразованное в строку. Если программный код возвращает значение undefined, считается, что ресурс не имеет содержимого.
URL вида javascript: можно использовать везде, где допускается указывать обычные URL: в атрибуте href тега <a>, в атрибуте action тега <form> и даже как аргумент метода, такого как window.open(). Например, адрес URL с программным кодом на языке JavaScript в гиперссылке может иметь такой вид:
Другие браузеры (такие как Chrome и Safari) не позволяют URL-адресам, как в примере выше, затирать содержимое документа - они просто игнорируют возвращаемое значение. Однако они поддерживают URL-адреса вида:
Когда загружается такой URL-адрес, браузер выполняет JavaScript-код, но, т.к. он не имеет возвращаемого значения (метод alert() возвращает значение undefined), такие браузеры, как Firefox, не затирают текущий отображаемый документ. (В данном случае URL-адрес javascript: служит той же цели, что и обработчик события onclick. Ссылку выше лучше было бы выразить как обработчик события onclick элемента <button> - элемент <a> в целом должен использоваться только для гиперссылок, которые загружают новые документы.)
Если необходимо гарантировать, что URL-адрес javascript: не затрет документ, можно с помощью оператора void обеспечить принудительный возврат значения undefined:
Без оператора void в этом URL-адресе значение, возвращаемое методом Window.open(), было бы преобразовано в строку и (в некоторых браузерах) текущий документ был бы затерт новым документом.
Подобно HTML-атрибутам обработчиков событий, URL-адреса javascript: являются пережитком раннего периода развития Веб и не должны использоваться в современных HTML-страницах. URL-адреса javascript: могут сослужить полезную службу, если использовать их вне контекста HTML-документов. Если потребуется проверить работу небольшого фрагмента JavaScript-кода, можно ввести URL-адрес javascript: непосредственно в адресную строку браузера. Другое узаконенное применение URL-адресов javascript: - создание закладок в браузерах.
На нашем сайте опубликовано уже множество различных Java-скриптов для социальных сетей. И в описании каждого скрипта описывать подробные инструкции по их запуску… Это ни к чему. Мы решили написать полноценный мануал с описанием установки скриптов на все браузеры, а также учесть наличие нескольких способов установки на один конкретный браузер и описать их все.
Запуск Java-скриптов через консоль браузера
Сейчас, как известно, запуск скриптов через консоль является наиболее популярным и простым, а главное рабочим способом их использования. Следовательно, с этого мы и начнём – со способов попасть в консоль для каждого браузера.
Консоль в Mozilla Firefox
Проще всего попасть в веб-консоль в браузере Mozilla Firefox можно при помощи сочетания клавиш Ctrl + Shift + K. Нажмите и консоль отобразится.
Консоль в Google Chrome и других браузерах, основанных на Chromium
В Google Chrome, Opera 15+, Амиго, Orbitum и других браузерах, основанных на Chromium, также имеется способ запуска веб-консоли при помощи горячих клавиш. Для этого нужно одновременно нажать Ctrl + Shift + J.
Консоль в Opera 12
Чтобы запустить веб-консоль в браузере Opera старого поколения (не старше 12-ой версии), нужно использовать сочетание клавиш Ctrl + Shift + I. Это позволит запустить Opera Dragonfly – панель с инструментами для разработчика. После её открытия перейдите на вкладку Консоль.
Консоль в Internet Explorer
Чтобы открыть консоль в веб-браузере Internet Explorer, необходимо сначала нажать на кнопку F12, а затем нажать сочетание Ctrl + 2 (двойка на центральной панели, а не в секции Num).
Консоль в Safari
В Safari, перед открытием консоли, обязательно нужно войти в настройки браузера (шестерёнка в правом верхнем углу » Настройки… » Дополнения) и подключить опцию Показывать меню «Разработка» в строке меню. После этого, консоль можно будет вызывать сочетанием клавиш Ctrl + Alt + C.
Все скрипты вводятся в консоли в специально отведённое поле рядом с иконкой-стрелочкой (см. скриншоты, зоны для ввода скриптов выделены красной рамкой). Запуск скриптов осуществляется нажатием кнопки Enter. После ввода и запуска любого скрипта вы будете видеть все комментарии или ошибки в ходе их выполнения.
Запуск Java-скриптов из адресной строки браузера
Метод запуска скриптов из адресной строки браузера является более старым методом, а скорее даже традиционным. Изначально, все скрипты запускались именно таким образом. Но тенденции меняются, мир развивается. В большинстве браузеров после вставки кода скрипта в адресную строку нужно дописывать код вручную, чтобы запустить, а в некоторых браузерах адресная строка вообще не обрабатывает java-скрипты.
Адресная строка в Mozilla Firefox
Печально, но ни одна из самых последних версий браузера Mozilla Firefox не поддерживает обработку скриптов через адресную строку. Хоть и в более ранних версиях подобная опция присутствовала, в современном Firefox разработчики решили от этого отказаться.
Адресная строка в Google Chrome и других браузерах, основанных на Chromium
В браузере Google Chrome и любом другом браузере, построенном на его исходных кодах, таких, например, как Opera 15+, Amigo, Orbitum и других, можно запускать скрипты в адресной строке. Но! После вставки скрипта, перед ним обязательно нужно дописывать слово javascript: (вместе с двоеточием), иначе (благодаря такому явлению, как omnibox) вместо запуска скрипта будет происходить перенаправление на поисковую систему.
Адресная строка в Opera 12
В браузере Opera 12 всё обстоит намного лучше. Для запуска скрипта достаточно вставить его в адресную строку и запустить. Никаких проблем при этом возникать не должно.
Адресная строка в Internet Explorer
В данном браузере, как и в Google Chrome и ему подобных, после вставки скрипта в адресную строку, в самом начале нужно дописать javascript: (вместе с двоеточием), иначе скрипт не заработает.
Адресная строка в Safari
Ну а в Safari дела обстоят так же хорошо, как и в Opera 12. Просто вставьте имеющийся скрипт в адресную строку и запустите.
Использование браузерных плагинов для хранения и запуска скриптов
Если скрипты нужно использовать постоянно, то необходимо возиться с ними, копировать с сайта или текстового файла, вставлять в адресную строку или консоль каждый раз. Согласитесь, – это не удобно. Именно поэтому были придуманы специальные расширения (плагины) для браузеров, предназначенные для хранения и запуска скриптов. Речь пойдёт о двух плагинах: Greasemonkey для Mozilla Firefox и Tampermonkey для Google Chrome.
Плагин Greasemonkey для Mozilla Firefox
Плагин Greasemonkey для Mozilla Firefox позволяет создавать, сохранять и запускать скрипты, добавленные пользователями. Будьте внимательны! При использовании скриптов для удаления или изменения чего-либо, сразу после их добавления в плагин они будут запущены автоматически. Настоятельно не рекомендуем добавлять в плагин скрипты, к примеру, для удаления записей со стены ВКонтакте при открытой странице ВКонтакте (мало ли что).
- устанавливаем расширение из магазина Mozilla
- кликаем на стрелочку рядом со значком плагина в правом верхнем углу браузера
- кликаем на Создать скрипт…
Плагин Tampermonkey для Google Chrome
Плагин Tampermonkey является аналогом плагина Greasemonkey для Firefox и точно также позволяет создавать, сохранять и запускать пользовательские скрипты. Будьте внимательны! При использовании скриптов для удаления или изменения чего-либо, сразу после их добавления в плагин они будут запущены автоматически. Настоятельно не рекомендуем добавлять в плагин скрипты, к примеру, для удаления записей со стены ВКонтакте при открытой странице ВКонтакте (мало ли что).
- устанавливаем расширение из магазина Google
- кликаем на значок плагина в правом верхнем углу браузера
- кликаем на Добавить новый скрипт…
Заключение
Все описанные способы запуска Javascript описаны для самых последних версий популярных веб-браузеров. Если вы используете другой браузер или более устаревшую версию браузера, и способы запуска скриптов в нём отличаются от описанных в данной статье, просьба сообщить об этом в комментариях.
В данном курсе код JavaScript будет запускаться в среде браузера, поэтому для дальнейшей разработки необходимо иметь базовое представление о структуре веб-страницы. Типичная веб-страница представляет собой текстовый файл в формате HTML (HyperText Markup Language) - язык разметки, который используется для формирования структуры веб-страниц. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для тега ). Атрибуты указываются в открывающем теге. Вот примеры фрагментов HTML-документа:
Разметка HTML позволяет располагать контент страницы в необходимом вам порядке. Базовый шаблон HTML страницы выглядит так
Чтобы придать стиль отображения содержимому страницы, например, изменить цвет фона или размер шрифта, используется язык стилей CSS (Cascading Style Sheets, или каскадные таблицы стилей). Этот язык тоже имеет свой собственный синтаксис. Подробнее о HTML можно прочитать здесь, а о CSS — здесь. А JavaScript, в свою очередь, находит в браузерах широкое применение как язык сценариев для придания интерактивности веб-страницам.
Добавление JavaScript на страницу и запуск в браузере
Так как это курс сфокусирован на изучении самого языка JavaScript, понимание его основных концепций и тонкостей разработки на нём, то в рамках данного курса будет достаточно понимания того, каким образом можно добавить код JavaScript на HTML страницу, для дальнейшего его выполнения при запуске этой страницы в браузере. Код JavaScript можно встроить на HTML страницу с помощью тега <script> , например
Чаще всего, программа JavaScript, которую необходимо выполнить на странице, содержит в себе много кода. Поэтому вместе того, чтобы добавлять его напрямую на HTML страницу, его выносят в отдельный файл с расширением .js и отдельно подключают к странице следующим образом:
В данном случае подключение происходит тоже с помощью тега <script> , только в этом случае, вместо вставки в него кода, к нему добавляется атрибут src в котором прописывается путь к файлу JavaScript. Этот путь может быть как абсолютным, так и относительным к текущей странице. Когда браузер дойдет до этого тега, то сначала он загрузит этот файл, а потом выполнит. Исходники страниц с встроенным и внешним скриптом можно скачать по этой ссылке и потом запустить соответствующие HTML-страницы в браузере.
Базовый синтаксис JavaScript
Как и у других языков программирования, у JavaScript есть свой синтаксис. Исходный код скриптов сканируется слева направо и преобразуется в последовательность найденных элементов, которые несут в себе определенный смысл для языка JavaScript, например, ключевые слова ( if , else , while , return и прочие), литералы ( true , false , null и т.д.), пробелы, окончания строк или комментарии. А также JavaScript чувствителен к регистру и использует кодировку символов Unicode.
Каждая программа — это набор команд. В JavaScript команды разделяются точкой с запятой ( ; ). Если в коде после той или иной инструкции не стоит точка с запятой, то во время разбора кода, они будут расставляться автоматически, что может привести к некоторым ошибкам или неочевидной работе программы.
Чтобы упросить чтение и понимание кода используются комментарии. С их помощью можно добавлять подсказки, заметки, предложения или предупреждения. Для оформления однострочных комментариев используются // , многострочные и внутристрочные комментарии начинаются с /* и заканчиваются */ .
При этом нельзя вкладывать друг в друга комментарии, это приведет к синтаксической ошибке
В каждом современном браузере есть свои инструменты, и хотя они могут отличаться интерфейсом или некоторыми специфическими возможностями, основной функционал для отладки программы у них схожий. Поэтому понимание процесса отладки в рамках даже одного браузера позволит сформировать общее представление об отладке в других браузерах. Полную документацию по Инструментам Разработчика для браузера Firefox можно найти в документации MDN, а для браузера Chrome (на английском) в документации Chrome DevTools.
Поэтапный процесс отладки программы
Есть несколько способов открыть на странице Консоль Разработчика:
Клавиатура. Ctrl + Shift + I, кроме
- Internet Explorer. (клавиша - F12)
- Mac OS X. (сочетание клавиш - ⌘ + ⌥ + I )
Настройка и управление (кнопка справа вверху браузера) > Дополнительные инструменты > Инструменты разработчика
Нажмите правой кнопкой мыши на любом участке веб-страницы (Ctrl-клик для Mac), появится контекстное меню, в котором Вам нужно выбрать пункт “Посмотреть код” (при этом отобразится код того элемента, на котором вы щёлкнули правой кнопкой)
В открывшейся Консоли есть набор вкладок, каждая из которых предоставляет определенный функционал. На начальном этапе достаточно иметь представление о следующих вкладках:
Первой является вкладка Инспектор (или Elements в браузере Chrome), где отображается разметка страницы и стили элементов справа.
Эта панель имеет косвенное отношение к процессу отладки JavaScript, поэтому детально в этой статье разбираться не будет. Подробную информацию по ней лучше изучить в соответствующей документации.
Следующей вкладкой в Инструментах Разработчика является панель Консоль (или Console в браузере Chrome), которая отображает логи работы программы. Например, ошибки, предупреждения, и другую дополнительную информацию, которую генерирует программа JavaScript в ходе своего выполнения. А также эта панель позволяет непосредственно взаимодействовать с кодом JavaScript на странице.
Все возникшие ошибки в JavaScript коде, выводятся в ней с указанием файла и конкретного места в нем, где произошла ошибка.
Третьей вкладкой является панель Отладчик (или Sources в Chrome). Эта панель по сути представляет собой встроенную среду разработки кода, в которой можно получить доступ ко всем подключенным к странице файлам. Можно посмотреть их содержимое, отследить их выполнение, а в Chrome еще можно отредактировать код, скопировать его или сохранить изменения в новом файле.
Также, для отладки кода в этой панели используются точки останова (брейкпоинты), которые позволяют приостановить выполнение кода на определенной строке. Поставить точку останова можно кликнув на номер соответствующей строки или написав в самом коде ключевое слово debugger;
Управлять потоком выполнения программы после остановки на точке можно с помощью кнопок, расположенных справа в верхнем углу консоли. Которые позволяют возобновить выполнение ( F8 ), перешагнуть выполнение до следующей точки останова ( F10 ), зайти в функцию ( F11 ) или выйти из неё ( Shift F11 ). Крайняя кнопка, если её активировать, позволяет приостанавливаться на каждом непойманном исключении.
Воспроизведение и поиск ошибок
Первым шагом отладки является воспроизведение ошибки. В данном случае, ошибка воспроизводится при самом запуске программы, так как на странице не отображается необходимое содержание.
Точки останова
Несмотря на исправление строки, вызывающей исключение, содержание страницы не изменилось. Поэтому следующим этапом будет отладка программы с помощью точек останова.
В программе есть функция buggy() , которая должна добавлять картинку и изменять заголовок. Но её выполнению не приводит к нужному результату, хотя никакого больше исключения код не вызывает. Это значит, что скорее все проблема кроется в самой логике этой функции.
Как говорилось выше есть два способа поставить точку останова: кликнув по номере строки в отладчике или написав на нужной строке в коде ключевое слово debugger; .
Воспользуемся первым способом — поставим точку останова на 20-й строке, где вызывается нужная функция. Обновив страницу в браузере, чтобы зайти в эту функцию нужно нажать соответствующую кнопку или клавишу ( F11 ).
При этом в правой части панели в блоке “Области” можно отслеживать значения переменных. В данном случае в переменной param содержится значение "Show" , хотя в этой функции, для изменения содержимого страницы, этот параметр должен начинаться с маленькой буквы. Поэтому, для корректной работы программы, нужно изменить входной параметр в вызове функции на "show"
Читайте также: