Пособие по запуску JavaScript: консоль, букмарклеты и прочее с примерами
Запускать JavaScript (или JS) код в браузере — обычный навык.
Если когда-то хотели апробировать свой первый JS-код, но боялись, этот пост для вас.
Цель поста для читателей — мочь самостоятельно запускать нужный код.
Цель моя — написать пособие, чтобы на будущее давать на него ссылку + давать готовый код, когда друзьям нужно установить какой букмарклет или мини-форму для какой небольшой автоматизации.
Друзья, которые читают. Если вы это видите, вероятно, вы только что получили код и конкретный пункт из этого пособия. Перечитайте пункт и установите скрипт по аналогии самостоятельно!
ПОМНИТЕ: не устанавливайте JS-код из сомнительных источников и когда не понимаете, что код делает!
§ I. ГДЕ запускать JavaScript код?
Рис. 0.1.
I.1. Через консоль браузера.
Чтобы открыть консоль нужно нажать ctrl+shfit+K или ctrl+shift+L.
Вставляете код, нажимаете enter, он сработает.
Рис. I.1.
I.2. Через адресную строку браузера.
Это строка, где написан адрес сайта.
Стираете адрес сайта, вместо вставляете код, нажимаете enter, он сработает.
Рис. I.2.
I.3. Через bookmarklet, или букмарклет, или «закладурку».
Это закладка браузера, в которой вместо сайта стоит JS-код.
Создаёте любую новую закладку. Затем находите закладку и исправляете её: вместо адреса сайта, который должен открываться, вставьте JS-код и сохраните.
Нажимаете на эту вкладку, срабатывает JS-код.
ПРИМЕЧАНИЕ: это один из удобнейших «многоразовых» способов запускать JS-код, в том числе в браузере смартфона!
Рис. I.3a.
Рис. I.3b.
Рис. I.3c.
I.4. Через обычный блокнот, сохранённый как HTML.
Открываете новый блокнот (notepad).
Вставляете туда нужный HTML с JS.
Нажимаете «Сохранить как», откроется меню. Тип файла — меняете «Текстовые документы (*.txt)» на «Все файлы (*.*)». Имя файла — мойкод.html. Его и открывать в браузере.
ПРИМЕЧАНИЕ: удобный «многоразовый» способ запускать JS-код на компьютере (без Интернета).
Рис. I.4.
СПРАВОЧНО: HTML — это язык гипертекстовой разметки.
Файл расширения .html — это обычный файл в виде текста, прочитав который браузер поймёт, как визуально показать страницу (и внутри .html может храниться JS-код, который может быть запущен).
Любая открытая web-страница в браузере в общем случае — HTML.
Рис. 0.2.
I.5. Через блокнот в браузере (внося изменения в web-страницу).
Преимущества (многоразовое использование и не требуется Интернет), а также подход похожи на [I.4].
Открываете блокнот в браузере в качестве новой вкладки:
data:text/html;charset=utf-8, <html contenteditable>
Затем в консоли находите элементы (HTML-код): открываете консоль (ctrl+shift+K или ctrl+shift+L), переходите в Elements.
Изменяете HTML-код, вставляя туда нужный HTML с JS.
Сохраняете страницу, закрываете её.
После сохранения её и открывать в браузере.
ПРИМЕЧАНИЕ: кстати, сам упомянутый браузерный блокнот удобен для своих заметок, которые можно потом сохранять в специальной папке (ctrl+s).
Рис. I.5a.
Рис. I.5b.
I.6. Через онлайн компилятор/интерпретатор.
Например, один из удобнейших — jsfiddle.net.
Вставляете HTML и JavaScript в соответствующие поля, нажимаете «Save» для сохранения страницы с уникальным адресом (или «Run» для предпросмотра).
Для демонстрации сохранённого можно вставить в конец адреса «/show», будет видна просто страница:
jsfiddle.net/Lz0mtuqx/show
ПРИМЕЧАНИЕ: удобнейший «многоразовый» способ запускать JS-код (когда есть Интернет).
Рис. I.6.
I.7. Через специально установленные расширения (addon) браузера.
Tampermonkey (для Google Chrome) или Greasemonkey (для Firefox).
Вставляете код, сохраняйте. На соответствующих страницах должно работать.
ПРИМЕЧАНИЕ: удобно автоматически запускать JS-код сразу после загрузки (например, на конкретных сайтах с помощью @match).
Рис. I.7.
§ II. ОСНОВНЫЕ ВИДЫ запуска JavaScrpt-кода?
Здесь речь будет идти о простейшем коде, запускающем окошко с текстом.
alert('hi');
В будущем вместо него вам может быть нужно запускать какой-то другой код (но подход, описанный ниже, останется).
II.1. Чистый код.
alert('hi');
Применение: [I.1] консоль.
II.2. Протокол: немедленно вызываемая функция (или IIFE) объявляется и запускается.
javascript:(function(){var func1=function(){alert('hi');};func1();})();
Применение: [I.2] адресная строка браузера;
[I.3] букмарклет.
II.3. Userscript для Tampermonkey / Greasemonkey.
// ==UserScript==
// @name Script Name
// @license CC0; https://creativecommons.org/publicdomain/zero/1.0/deed.ru
// @match http*://*.wikipedia.org/*
// @run-at document-idle
// ==/UserScript==
(function() {
var func1=function(){alert('hi');};
func1();
})();
Применение: [I.7] специальные аддоны Tampermonkey / Greasemonkey.
II.4. Созданный или изменённый файл .html.
Применение: [I.4] файл .html, сохранённый, например, из блокнота;
[I.5] файл .html, сохранённый из отредактированной браузерной страницы;
[I.6] через jsfiddle.
II.4.1. Файл .html, код внутри файла, запуск после загрузки страницы.
<script type="text/javascript">window.onload=function(){var func1=function(){alert('hi');};func1();};</script>
<div id="textDivId1></div>
II.4.2. Файл .html, код по ссылке, запуск после загрузки страницы.
<script type="text/javascript" src="http://codepad.org/AXduOuGF/raw.txt"></script>
<div id="textDivId1></div>
II.4.3. Файл .html, код внутри файла, запуск по кнопке.
<script type="text/javascript">var func1=function(){alert('hi');};</script>
<div id="btnDivId1" style="position: relative; z-index: 99999;">
<button id="btnId1" onclick="javascript:func1();">Click</button>
</div>
II.4.4. Файл .html, код по ссылке, запуск по кнопке.
<script type="text/javascript" src="http://codepad.org/2NJ2YB3V/raw.txt"></script>
<div id="btnDivId1" style="position: relative; z-index: 99999;">
<button id="btnId1" onclick="javascript:func1();">Click</button>
</div>
II.5. Протокол: немедленно вызываемая функция, добавляющая на страницу код и кнопку, с помощью которой его можно запускать.
Применение: [I.4] файл .html, сохранённый, например, из блокнота;
[I.5] файл .html, сохранённый из отредактированной браузерной страницы.
II.5.1. Протокол: немедленно вызываемая функция, добавляющая на страницу код и кнопку, с помощью которой его можно запускать: код на странице.
javascript:(function(){var func1a=function(){
var scr1 = document.createElement('script');
scr1.setAttribute('type','text/javascript');
scr1.textContent="var func1=function(){alert('hi');};";
document.documentElement.getElementsByTagName('*')[0].appendChild(scr1);
var btnDiv1 = document.createElement('div');
btnDiv1.id = 'btnDivId1';
btnDiv1.style.position = 'relative';
btnDiv1.style.zIndex = 99999;
var btn1 = document.createElement('button');
btn1.innerHTML = 'Click';
btn1.id = 'btnId1';
btn1.setAttribute("onclick", "javascript:func1();");
btnDiv1.appendChild(btn1);
document.documentElement.getElementsByTagName('*')[0].insertAdjacentHTML('afterend', btnDiv1.outerHTML);
};func1a();})();
II.5.2. Протокол: немедленно вызываемая функция, добавляющая на страницу код и кнопку, с помощью которой его можно запускать: код по ссылке.
javascript:(function(){var func1a=function(){
var scr1 = document.createElement('script');
scr1.setAttribute('type','text/javascript');
scr1.setAttribute('src','http://codepad.org/2NJ2YB3V/raw.txt');
document.documentElement.getElementsByTagName('*')[0].appendChild(scr1);
var btnDiv1 = document.createElement('div');
btnDiv1.id = 'btnDivId1';
btnDiv1.style.position = 'relative';
btnDiv1.style.zIndex = 99999;
var btn1 = document.createElement('button');
btn1.innerHTML = 'Click';
btn1.id = 'btnId1';
btn1.setAttribute("onclick", "javascript:func1();");
btnDiv1.appendChild(btn1);
document.documentElement.getElementsByTagName('*')[0].insertAdjacentHTML('afterend', btnDiv1.outerHTML);
};func1a();})();
§ III. ОСНОВНЫЕ ТИПЫ запускаемых Javascript-кодов?
III.1. ТЕОРИЯ.
Разумеется, типов множество, но некоторые мы разобрали.
Это:
а) запускаемый сразу;
б) запускаемый после загрузки страницы;
в) запускаемый по кнопке;
г) запускаемый каждые N секунд — изучите самостоятельно!
Первые три вы знаете и видели.
Четвёртый нужно изучить самостоятельно, сделав по аналогии. И, если не выходит, пользуясь поиском в google. Или задавая вопросы на профильных сайтах, например, на stackoverflow или в соответствующих чатах.
III.2. ПРАКТИКА.
Задание-1: чтобы закрепить знания, совет — проверить, «пощупать» каждый кусок кода, который приведён выше и удостовериться, что он работает.
Задание-2: измените КАЖДЫЙ приведённый выше кусок кода и удостоверьтесь, что он работает так, чтобы код запускался каждые 3 секунды.
Как это сделать?
Если обобщить, то измените в каждом куске
alert('hi');
на
setInterval(function(){alert('hi');},3*1000);
Как вы поняли, [II.1] уже сделан. Попробуйте сделать остальные.
Если у вас не получилась практика / иные причины, возможно, «маякните» в комментариях на предмет того, нужны ли «спойлеры» / ответы (хотя это несложно).
§ IV. ДОПОЛНЕНИЕ.
[Доп.советы, чуть более углублённые мелочи]
IV.1. О том, где может храниться JavaScript.
Он может быть как внутри самого файла HTML, так и быть внешним (ссылкой на код).
Во втором случае, то есть для хранения внешних, использовался сайт codepad.org, хотя есть и аналоги [но некоторые аналоги могут на уровне не давать возможность его подгружать в браузер, давая ошибку «CORS»; сейчас неважно, но просто учтите].
Там вставлялся код, выбирался «Plain Text», нажимался «Submit». После сохранения правой кнопкой мыши копировался адрес ссылки «Raw Code». Он-то и является ссылкой (использовалась в [II.4.2], [II.4.4], [II.5.2]).
Рис. IV.1a.
Рис. IV.1b.
На этом достаточно исчерпывающее пособие по запуску JavaScript подходит к концу.
Спасибо за чтение.
Лицензия на текст, код и скрины: CC0.
UPD: ВНИМАНИЕ: В связи с закрытием сайта codepad.org просьба учитывать изменения, описанные в комментарии #comment_199553464
