выполнение кода в браузере
Пособие по запуску JavaScript: консоль, букмарклеты и прочее с примерами
Запускать JavaScript (или JS) код в браузере — обычный навык.
Если когда-то хотели апробировать свой первый JS-код, но боялись, этот пост для вас.
Цель поста для читателей — мочь самостоятельно запускать нужный код.
Цель моя — написать пособие, чтобы на будущее давать на него ссылку + давать готовый код, когда друзьям нужно установить какой букмарклет или мини-форму для какой небольшой автоматизации.
Друзья, которые читают. Если вы это видите, вероятно, вы только что получили код и конкретный пункт из этого пособия. Перечитайте пункт и установите скрипт по аналогии самостоятельно!
ПОМНИТЕ: не устанавливайте JS-код из сомнительных источников и когда не понимаете, что код делает!
§ I. ГДЕ запускать JavaScript код?
I.1. Через консоль браузера.
Чтобы открыть консоль нужно нажать ctrl+shfit+K или ctrl+shift+L.
Вставляете код, нажимаете enter, он сработает.
I.2. Через адресную строку браузера.
Это строка, где написан адрес сайта.
Стираете адрес сайта, вместо вставляете код, нажимаете enter, он сработает.
I.3. Через bookmarklet, или букмарклет, или «закладурку».
Это закладка браузера, в которой вместо сайта стоит JS-код.
Создаёте любую новую закладку. Затем находите закладку и исправляете её: вместо адреса сайта, который должен открываться, вставьте JS-код и сохраните.
Нажимаете на эту вкладку, срабатывает JS-код.
ПРИМЕЧАНИЕ: это один из удобнейших «многоразовых» способов запускать JS-код, в том числе в браузере смартфона!
I.4. Через обычный блокнот, сохранённый как HTML.
Открываете новый блокнот (notepad).
Вставляете туда нужный HTML с JS.
Нажимаете «Сохранить как», откроется меню. Тип файла — меняете «Текстовые документы (*.txt)» на «Все файлы (*.*)». Имя файла — мойкод.html. Его и открывать в браузере.
ПРИМЕЧАНИЕ: удобный «многоразовый» способ запускать JS-код на компьютере (без Интернета).
СПРАВОЧНО: HTML — это язык гипертекстовой разметки.
Любая открытая web-страница в браузере в общем случае — HTML.
I.5. Через блокнот в браузере (внося изменения в web-страницу).
Преимущества (многоразовое использование и не требуется Интернет), а также подход похожи на [I.4].
Открываете блокнот в браузере в качестве новой вкладки:
Затем в консоли находите элементы (HTML-код): открываете консоль (ctrl+shift+K или ctrl+shift+L), переходите в Elements.
Изменяете HTML-код, вставляя туда нужный HTML с JS.
Сохраняете страницу, закрываете её.
После сохранения её и открывать в браузере.
ПРИМЕЧАНИЕ: кстати, сам упомянутый браузерный блокнот удобен для своих заметок, которые можно потом сохранять в специальной папке (ctrl+s).
I.6. Через онлайн компилятор/интерпретатор.
Вставляете HTML и JavaScript в соответствующие поля, нажимаете «Save» для сохранения страницы с уникальным адресом (или «Run» для предпросмотра).
Для демонстрации сохранённого можно вставить в конец адреса «/show», будет видна просто страница:
ПРИМЕЧАНИЕ: удобнейший «многоразовый» способ запускать JS-код (когда есть Интернет).
I.7. Через специально установленные расширения (addon) браузера.
Вставляете код, сохраняйте. На соответствующих страницах должно работать.
ПРИМЕЧАНИЕ: удобно автоматически запускать JS-код сразу после загрузки (например, на конкретных сайтах с помощью @match).
§ II. ОСНОВНЫЕ ВИДЫ запуска JavaScrpt-кода?
Здесь речь будет идти о простейшем коде, запускающем окошко с текстом.
В будущем вместо него вам может быть нужно запускать какой-то другой код (но подход, описанный ниже, останется).
Применение: [I.1] консоль.
II.2. Протокол: немедленно вызываемая функция (или IIFE) объявляется и запускается.
Применение: [I.2] адресная строка браузера;
II.3. Userscript для Tampermonkey / Greasemonkey.
Применение: [I.7] специальные аддоны Tampermonkey / Greasemonkey.
II.5. Протокол: немедленно вызываемая функция, добавляющая на страницу код и кнопку, с помощью которой его можно запускать.
II.5.1. Протокол: немедленно вызываемая функция, добавляющая на страницу код и кнопку, с помощью которой его можно запускать: код на странице.
var scr1 = document.createElement(‘script’);
scr1.setAttribute(‘type’,’text/javascript’);
scr1.textContent=»var func1=function()
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();»);
II.5.2. Протокол: немедленно вызываемая функция, добавляющая на страницу код и кнопку, с помощью которой его можно запускать: код по ссылке.
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();»);
§ III. ОСНОВНЫЕ ТИПЫ запускаемых Javascript-кодов?
Разумеется, типов множество, но некоторые мы разобрали.
а) запускаемый сразу;
б) запускаемый после загрузки страницы;
в) запускаемый по кнопке;
г) запускаемый каждые N секунд — изучите самостоятельно!
Первые три вы знаете и видели.
Четвёртый нужно изучить самостоятельно, сделав по аналогии. И, если не выходит, пользуясь поиском в google. Или задавая вопросы на профильных сайтах, например, на stackoverflow или в соответствующих чатах.
Задание-1: чтобы закрепить знания, совет — проверить, «пощупать» каждый кусок кода, который приведён выше и удостовериться, что он работает.
Задание-2: измените КАЖДЫЙ приведённый выше кусок кода и удостоверьтесь, что он работает так, чтобы код запускался каждые 3 секунды.
Если обобщить, то измените в каждом куске
Как вы поняли, [II.1] уже сделан. Попробуйте сделать остальные.
Если у вас не получилась практика / иные причины, возможно, «маякните» в комментариях на предмет того, нужны ли «спойлеры» / ответы (хотя это несложно).
[Доп.советы, чуть более углублённые мелочи]
IV.1. О том, где может храниться JavaScript.
Он может быть как внутри самого файла HTML, так и быть внешним (ссылкой на код).
Во втором случае, то есть для хранения внешних, использовался сайт codepad.org, хотя есть и аналоги [но некоторые аналоги могут на уровне не давать возможность его подгружать в браузер, давая ошибку «CORS»; сейчас неважно, но просто учтите].
Там вставлялся код, выбирался «Plain Text», нажимался «Submit». После сохранения правой кнопкой мыши копировался адрес ссылки «Raw Code». Он-то и является ссылкой (использовалась в [II.4.2], [II.4.4], [II.5.2]).
На этом достаточно исчерпывающее пособие по запуску JavaScript подходит к концу.
Лицензия на текст, код и скрины: CC0.
UPD: ВНИМАНИЕ: В связи с закрытием сайта codepad.org просьба учитывать изменения, описанные в комментарии #comment_199553464
В связи с тем, что сайт codepad.org более не работает, соответствующие изменения:
В коде ссылку » http://codepad.org/AXduOuGF/raw.txt » заменить (считать заменённой) на
В коде ссылку » http://codepad.org/2NJ2YB3V/raw.txt » заменить (считать заменённой) на
В коде ссылку » http://codepad.org/2NJ2YB3V/raw.txt » заменить (считать заменённой) на
Фразу «использовался сайт codepad.org » заменить (считать заменённой) на
«но некоторые аналоги могут на уровне не давать возможность» —
удалить слова «на уровне «.
Весь абзац «Там вставлялся код, выбирался «Plain Text», нажимался «Submit». После сохранения правой кнопкой мыши копировался адрес ссылки «Raw Code». Он-то и является ссылкой (использовалась в [II.4.2], [II.4.4], [II.5.2]).» заменить (считать заменённым) на
«Там вставлялся код, выбирался «Text», нажимался «Run». После сохранения правой кнопкой мыши копировался адрес ссылки «Скачать». Он-то и является ссылкой (использовалась в [II.4.2], [II.4.4], [II.5.2]).»
Заменить (считать заменённой) на новую (прилагается).
Заменить (считать заменённой) на новую (прилагается).
Было желание опубликовать пост в Лига программистов, но там ограничение по карме, хотя там ему, мне кажется, самое место.
Возможно / разумно ли как-то попросить перенести?
Ответ на пост «Перевел интерактивные уроки «Базовый курс CSS» и «Базовый курс JavaScript»»
Раз пошла такая пьянка, рискну рассказать о сервисе, который сейчас разрабатываю в качетсве пэт проджекта.
А решил я создать сайт с интерактивными курсами по программированию.
На текущий момент уже созданы курсы :
Базовый HTML, (источник freecodecamp, планируется пополняться и расширяться)
В планах сделать интерактивные курсы по питону.
Что из недостатков по сайту вижу сейчас:
— немного страдает адаптивность, хотя в целом сайт не предназначен для мобильных устройст, т.к. неудодно писать код с мобилки
— не весь функционал реализован до конца
— некоторые курсы (в частности JS) содержат не совсем актуальную информацию. По JS в будущем хочу сделать отдельный курс по ES6 (либо актуальному на момент создания стандарту)
Проект в целом создавался скорее для собственного интереса, т.к. было интересно реализовать возможность интерактивных задач для различных ЯП в браузере.
Да прибудут с Вами знания
Блеснул знаниями
Перевел интерактивные уроки «Базовый курс CSS» и «Базовый курс JavaScript»
Предыдущий топик Перевел интерактивные уроки «Базовый курс HTML» оказался довольно положительно воспринят пикабушниками (на самом деле сильно положительней, чем я ожидал), и это меня довольно сильно простимулировало на скорейший перевод еще двух курсов: Базовый CSS (44 урока) и Базовый JavaScript (107 уроков). Работы оказалось сильно больше, чем я предполагал, но и ценность материала на выходе сильно больше (не только исправил множество неточностей, но и дополнил своими комментариями).
Осталось перевести курс по ECMAScript 6 и можно будет перейти к самому главному: курс по React. Планирую сделать это на следующей неделе.
Всем приятной бесплатной учебы!
Как на самом деле работает заимствование чужого кода.
Не украл, а вдохновился архитектурой кода
Ответ на пост «Мыльная опера про программистов»
Когда учились в школе, у нас была информатика, мы там писали простенькие программки на бейсике. Я всё легко понимала, и писала программы на уроке одной из первых, обычно вторая, после одного парня, иногда третья, после 2х парней, и препод мне никогда не верил, что я сама написала, говорил, что я списала у тех двух, или они мне помогали. Я особо и не пыталась его убедить, как-то пофиг было. В итоге на финальном зачете, он спрашивает меня по теории, про циклы, условия, я всё отвечаю, он мне говорит, как сейчас помню:» Ты ведь ничего этого не понимаешь? Просто зазубрила, да?» Я конечно отвечаю, что всё понимаю. Я вообще думаю, что тут понимать? Циклы, условия-тут всё элементарно, как это можно вообще не понимать? Он так и не поверил, что я всё понимаю легко. Вот такие вот стереотипы.
Уверена, что он так думал, потому что я девушка. Наверное он думал, что девушки не могут программировать. Но для меня это было самым легким и интересным из предметов, ну еще и математика. Поэтому пошла учиться на программиста. Вот бы он наверное удивился, узнав, что я отучилась в универе на программиста, и теперь работаю им же, при чем в универе из всего потока в 50 человек, писали программы от силы человек 7, и я в их числе, а остальные не могли или не хотели, списывали у других. По профессии мало кто пошел работать, даже среди тех, кто писал программы сам. Одна из нас ушла на службу по контракту, другой работает бортпроводником, про одного знаю, что работает программистом в Германии, но он был самый сильный на потоке.
А насчет того парня, который в школе писал программы первым, нашла его лет 5 назад в контакте, работает в Макдональдсе в Питере, не знаю, на кого учился, но скорее всего по профессии работать не стал.
Команды для работы с JavaScript-консолью в браузерах и повышение производительности труда программиста
Если вы занимаетесь веб-программированием, это значит, что вам не надо рассказывать о том, насколько в вашей работе важна отладка. Нередко для записи данных в логи, для их форматирования или вывода на экран используют внешние библиотеки, не учитывая при этом того факта, что в распоряжении программистов имеются JavaScript-команды для работы с консолями, которые встроены в браузеры. И обладают эти консоли гораздо более серьёзными возможностями, чем может показаться на первый взгляд.
Что такое консоль?
Консоль JavaScript — это механизм, интегрированный в современные браузеры, который поддерживает встроенные инструменты разработки в интерфейсе, напоминающем командную строку. С использованием консоли разработчик может делать следующее:
Методы console.log, console.error, console.warn и console.info
Использование различных команд для вывода данных в консоль
Метод console.group
В консоль, после выполнения этого фрагмента кода, попадёт следующее.
Группировка данных в консоли с помощью метода console.group()
Метод console.table
То, что получилось, и выглядит отлично, и способно облегчить отладку.
Табличное оформление выводимых данных с помощью console.table()
Методы console.count, console.time и console.timeEnd
А вот как выглядит результат работы этого кода в консоли.
Использование методов console.count(), console.time() и console.timeEnd()
Методы console.trace и console.assert
Несложно заметить, что вывод, генерируемый этим фрагментом кода, выглядит так же, как нечто подобное выглядело бы в React (или в любой другой библиотеке), когда фреймворк сообщает о возникновении исключения.
Результат использования команд console.assert() и console.trace()
Команды для работы с консолью и продакшн-код
Команды для работы с консолью нужны на этапе разработки и отладки приложений. Это значит, что когда придёт время выпуска продукта, эти команды придётся из кода удалить. Об этом можно просто забыть и, через некоторое время после сборки продакшн-версии проекта, заметить, что программа пишет что-то в консоль тогда, когда в этом нет никакой необходимости. Не стоит нагружать компьютеры ненужной работой, пусть и такой, казалось бы, незначительной, как вывод данных в консоль. В то же время, учитывая то, что команды для работы с консолью могут пригодиться в ходе доработки приложения, лучше всего не удалять их из исходного кода программы насовсем, а убирать их лишь из её продакшн-версии. Тут нам на помощь придут средства для сборки проектов. Так, я постоянно пользуюсь Webpack, и на работе, и в собственных проектах. Этот инструмент позволяет удалять все ненужные команды по работе с консолью (он способен отличить их от других команд) из продакшн-сборок с использованием uglifyjs-webpack-plugin.
Эта конфигурация очень проста, но она облегчает повседневную работу программиста и избавляет от проблемы забытых команд по работе с консолью.
Итоги
В этом материале мы рассказали о некоторых полезных командах для работы с консолью. Они позволяют, с помощью инструментов, являющихся частью современных браузеров, решать множество задач, которые сопутствуют разработке и отладке клиентских JavaScript-приложений.
Уважаемые читатели! Какие команды для работы с JavaScript-консолью вы используете?
Как работает JavaScript [Объясняю визуально]
В этой статье я подробно объясню, как JavaScript выполняет код в браузере, и мы изучим это с помощью гифок. Прочитав эту статью, вы станете на шаг ближе к статусу рок-звезды разработки.
Контекст выполнения
«Все в JavaScript происходит внутри контекста выполнения (Execution Context)»
Было бы круто, чтобы вы запомнили эту фразу, потому что она очень важна. Скажем, что этот контекст выполнения является большим контейнером, вызываемым, когда браузер хочет запустить какой-то код JavaScript.
В этом контейнере есть два компонента: 1. Компонент памяти. 2. Компонент кода.
Компонент памяти также известен как переменная среды. В этом компоненте памяти переменные и функции хранятся в виде пар ключ-значение.
Выполнение кода
Возьмем простой пример:
В этом простом примере мы инициализируем две переменные, a и b, и сохраняем 2 и 4 соответственно. Затем мы складываем значение a и b и сохраняем его в переменной суммы.
Посмотрим, как JavaScript выполнит код в браузере.
Браузер создает глобальный контекст выполнения с двумя компонентами, а именно с памятью и компонентами кода.
Браузер выполнит код JavaScript в два этапа.
Фаза выделения памяти
Этап выполнения кода
На этапе выделения памяти JavaScript сканирует весь код и выделяет память для всех переменных и функций в коде. Для переменных JavaScript будет хранить undefined на этапе выделения памяти, а для функций он сохранит весь код функции, который мы рассмотрим в следующем примере.
Теперь, на 2-м этапе, то есть при выполнении кода, он начинает проходить весь код построчно. Когда он встречает var a = 2, он присваивает значение 2 переменной ‘a’. До сих пор значение «а» не было определено.
То же самое и с переменной b. Он присваивает 4 переменной «b». Затем он вычисляет и сохраняет значение суммы в памяти, равное 6. Теперь, на последнем шаге, он выводит значение суммы в консоль, а затем уничтожает глобальный контекст выполнения по мере завершения нашего кода.
Как вызываются функции в контексте выполнения?
Функции в JavaScript, если сравнивать их с другими языками программирования, работают по-другому.
Возьмем простой пример:
В приведенном выше примере есть функция, которая принимает в качестве аргумента число и возвращает его квадрат.
JavaScript создаст глобальный контекст выполнения и выделит память для всех переменных и функций на первом этапе, когда мы запустим код, как показано ниже.
Что касается функций, он сохранит всю функцию в памяти.
А вот и самое интересное: когда JavaScript запускает функции, он создает контекст выполнения внутри глобального контекста выполнения.
Переменная square2 вызовет функцию square, а javascript создаст новый контекст выполнения.
Этот новый контекст выполнения для функции square выделит память всем переменным, присутствующим в функции на этапе выделения памяти.
После выделения памяти всем переменным внутри функции код будет выполняться построчно. Будет получено значение num, равное 2 для первой переменной, а затем вычислено ans. После вычисления ans возвратится значение, которое будет присвоено square2.
Как только функция вернет значение, она уничтожит свой контекст выполнения по завершении работы.
Теперь он будет следовать аналогичной процедуре для строки номер 7 или переменной square4, как показано ниже.
Как только весь код будет выполнен, глобальный контекст выполнения также будет уничтожен, и именно так JavaScript будет выполнять код.
Стек вызовов
Когда функция вызывается в JavaScript, JS создает контекст выполнения. Контекст выполнения будет усложняться, поскольку мы добавляем функции внутрь функции.
Мы создаем функцию «a», которая вызывает другую функцию «insideA», которая возвращает значение true. Я знаю, что код бессмысленный и ничего не делает, но он поможет нам понять, как JavaScript обрабатывает коллбеки (функции обратного вызова).
JavaScript создаст глобальный контекст выполнения. Глобальный контекст выполнения выделит память для функции ‘a’ и вызовет ‘function a’ на этапе выполнения кода. Контекст выполнения создается для функции a, которая размещается над глобальным контекстом выполнения в стеке вызовов.
Функция a назначит память и вызовет функцию insideA. Контекст выполнения создается для функции insideA и помещается над стеком вызовов ‘function a’. Теперь эта функция insideA вернет true и будет удалена из стека вызовов. Поскольку внутри ‘function a’ нет кода, контекст выполнения будет удален из стека вызовов.
Наконец, глобальный контекст выполнения также удаляется из стека вызовов.