Как запустить Javascript в браузере. Консоль
При изучении программирования у людей возникает миллион вопросов по поводу того, как работают те или иные вещи. Они часто ищут того, кто может им на эти вопрос ответить, но это занимает время. Если вы не знаете, как точно работает та или иная штука в языке, то лучше всего будет поставить эксперимент. Вы можете предположить, как код должен работать, а потом проверяете так это или нет.
С javascript-ом такую вещь проделать легче легкого, потому что все что вам нужно — это ваш браузер. Прямо сейчас вы можете нажать сочетание клавиш Ctrl+Shift+C и вы увидите примерно следующую картину:
Открывшаяся панель называется developer tools, ну, или, если хотите по-русски, инструменты разработчика. Это то, что помогает фронтендерам выполнять их грязную работу. Мы их часто просто зовем девтулзами.
Тут вы видите кучу вкладок, но нас будет интересовать одна: Console. Зайдем в нее. Это может выглядеть примерно так
Тут вы можете увидеть кучу странных сообщений. Эти сообщения появляются из-за работы сайта, на которым вы открыли девтулзы. Т.к. мы не хотим сейчас разбираться в том, что там творится на странице, к который мы ни имеем никакого отношения, то давайте просто их уберем. Это можно сделать, нажав на значок перечеркнутого круга слева вверху панели.
Когда нас больше ничего не беспокоит, мы уже можем что-то тут написать. Возможно, вы не знаете ничего про JS, но я уверен, что вы знаете как складывать, вычитать, умножать и делить. Javascript тоже это умеет. Посмотрите на следующий пример.
В JS это будет записано следующим образом.
3 * 2 / 18 - 5 + 1 Попробуйте вставить этот код в консоль, нажать Enter и посмотреть, что будет.
Должно получиться что-то вроде этого
Браузер взял наш javascript-код и посчитал его для нас. Да, вы можете спокойно пользоваться браузером в консоли, как калькулятором, он вам все вычислит. И тут можно пользоваться круглыми скобками, как математике. Означают они то же самое: все, что в скобках будет считаться раньше всего остального. Вам стоит попробовать что-то посчитать в консоли, и посмотреть, что будет.
В консоли можно выполнять в целом любой код, написанный на javascript, не только математические выражения. Скорее всего, вы сейчас знаете мало, но если что-то знаете, то попробуйте написать в консоль отдельные строчки javascript-а. Для этого она и хороша — проверить, как будет работать что-то, что влезает в одну-две строки.
Есть ли возможность запустить данный код в браузере?
Код парсит с сайта погоду, полученные данные я хочу вывести на html страницу, но если данный скрипт подключать к html, то выводит ошибку Uncaught ReferenceError: require is not defined , как быть? Или это возможно только в node.js? На чистом js такое не получится?
Отслеживать
2,741 2 2 золотых знака 13 13 серебряных знаков 28 28 бронзовых знаков
задан 30 янв в 15:03
Браузер в принципе не позволит читать страницы сторонних сайтов, поэтому даже пытаться переделать скрипт нет смысла
30 янв в 15:15
Обидно, ну лан :0
30 янв в 15:30
1 каждый второй сервис погоды спокойно отдает данные через апи и парсить его html вёрстку попросту не зачем(только если хочется по фану размятся в написании парсера). 2 если тех данных которые необходимы, в апи нету и как ни крути надо парсить — можно создать свою html страницу подцепить на ней все что душе угодно включая ноду, а после добавить на ней же фрейм
30 янв в 15:39
@puffleeck даже если сайт не лочит загрузку во фреймах, браузер всё равно не позволит получить доступ к содержимому фрейма
30 янв в 15:43
Если вы очень хотите, можете попробовать эти библиотеки подключить через CDN Вдруг у вас получится осуществить задуманное ) Еще вариант — использовать сборщик js, например webpack, для сборки общего бандла js
30 янв в 15:47
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Такая возможность есть. Только код придётся писать совсем иначе. Подключение библиотек будет не через require, а через тэг script, также будут проблемы с синхронным выполнением кода, так как браузер сам будет определять какой файл быстрее подключить. Вот пример, который выведет ваш город с которого вы откроете страницу через 5 секунд.
И да, с вашим сайтом это скорее всего не сработает. Политика браузера CORS (Cross-Origin Resource Sharing) такова, что не позволит считывать данные с HTTPS, если сам владелец хоста это не разрешит в настройках своего сервера. Поэтому в моём предоставленном примере используется протокол HTTP.
Example Отслеживать
ответ дан 30 янв в 15:53
172 5 5 бронзовых знаков
С сайтом ru-meteo.ru этот код не сработает
30 янв в 15:54
Действительно, Запрос из постороннего источника заблокирован: Политика одного источника запрещает чтение удаленного ресурса на ru-meteo.ru. Но спасибо за ответ!)
Взаимодействие JavaScript-кода с браузером
Как ты уже знаешь, язык JavaScript работает внутри браузера, поэтому ему как-то нужно взаимодействовать с этим самым браузером. Для этого у браузера есть несколько объектов и функций, которые доступны из JavaScript.
Во-первых, это объект window , который описывает окно браузера. Вернее, раньше описывал, когда браузеры были без вкладок. Теперь объект window описывает текущую вкладку браузера, в которую загружена страница со скриптом.
Во-вторых, это объект document , который отвечает за отображаемый во вкладке документ. Это может немного путать. Для простоты скажем, что document – это то, что отображается пользователю, а window – это то, в чем этот document отображается.
В-третьих, это объект console , который отвечает за вывод в консоль браузера. Да, у браузеров тоже есть консоль, она используется преимущественно для отладки скрипта и вывода сообщений об ошибках. Обычно открыть ее можно нажав кнопку F12 в вашем браузере.
Объект window , является объектом верхнего уровня для всех объектов страницы. И хотя вы можете прямо писать имена объектов document и console в вашем скрипте, на самом деле их имена window.document и window.console .
4.2 Диалоги в JavaScript
Метод alert()
Также у объекта window есть несколько функций, которые видны скрипту страницы. Самая часто используемая – это функция alert() . Она позволяет отобразить диалоговое окно с сообщением пользователю. Работа скрипта при этом приостанавливается, пока пользователь не нажмет OK.
alert("JavaScript is the best!");
Метод prompt()
Также есть функция, с помощью которой можно попросить пользователя ввести какое-то значение – это prompt() .
var age = prompt("Введите год рождения");
Метод confirm()
Можно вывести диалоговое окно с двумя кнопками Ok , Cancel – спросить пользователя о каком-то действии.
var isOK = confirm("Are you ready");
4.3 Событие onload()
И еще один полезный и интересный момент. У окна браузера есть event (событие), которое возникает, когда документ полностью загружен. Ты можешь задать код, который должен выполниться после того, как документ будет загружен и отображен.
Сделать это можно тремя способами.
Во-первых, можно встроить JavaScript-код прямо в HTML-страницу в виде значения атрибута:
onload text-green">alert('документ загружен');">
Во-вторых, можно встроить JavaScript-код просто в HTML-страницу:
function load() < alert('документ загружен'); > window.onload = load;
В-третьих, можно записать немного покороче, объявив анонимную функцию:
window.onload = function () < alert('документ загружен'); >
4.4 Событие onclick()
И наконец еще одно важное событие (event) – это event OnClick . Который возникает у любого элемента, на который кликнул пользователь. Так же, как и event OnLoad его можно задать разными способами, поэтому мы приведем только самый простой:
onclick text-green">alert('пользователь кликнул по картинке');">
Введение в JavaScript
Этим занятием мы открываем с вами курс обучения очень популярному языку программирования JavaScript. Сначала пару слов об этом языке. Жизнь современного человека неотделима от сети Интернет и в частности от просмотра различный сайтов с помощью вашего любимого браузера: Opera, FireFox, Chrome, Yandex и т. п. И именно здесь большинство из нас сталкиваются с JavaScript, то есть, со сценариями – небольшими программами, которые выполняются в браузере и заметно расширяют функциональность веб-страниц. А иногда даже более, чем заметно в случаях браузерных игр. Что же получается? Браузеры могут не только отображать HTML-страницу, но еще и выполнять программы, встроенные в HTML-документ? Да, современные браузеры – это полноценные платформы для отображения самой разнообразной информации сети Интернет.
Теперь вы знаете, что для запуска программ на JavaScript достаточно взять ваш любимый браузер. Что еще нам понадобится? Конечно же приложение в, котором удобно писать программы на JavaScript. Часто это текстовые редакторы, например:
- Atom (кроссплатформенный, бесплатный);
- Sublime Text (кроссплатформенный, условно-бесплатный);
- Notepad++ (Windows, бесплатный).
Я все свои примеры буду показывать в редакторе SublimeText, который очень удобен как для создания HTML-документов, так и для написания скриптов на JavaScript. Этих двух программ: браузера и текстового редактора, будет вполне достаточно для изучения JavaScript в рамках наших занятий. Язык JavaScript не следует путать с языком программирования Java. Это совершенно разные языки. Просто создатели JavaScript вначале хотели показать, что JavaScript является как бы «младшим братом» языка Java. Но, впоследствии оказалось, что у них, в общем-то, нет особого родства. В целях безопасности на скрипты, запускаемые в браузере, наложен ряд ограничений. Основные такие:
- JavaScript на веб-странице не может читать/записывать произвольные файлы на жёстком диске, копировать их или запускать программы.
- Существуют способы взаимодействия с камерой/микрофоном и другими устройствами, но они требуют явного разрешения пользователя.
- Различные окна/вкладки не знают друг о друге. Иногда одно окно, используя JavaScript, открывает другое окно. Но даже в этом случае JavaScript с одной страницы не имеет доступа к другой, если они пришли с разных сайтов.
- JavaScript может легко взаимодействовать с сервером, с которого пришла текущая страница. Но его способность получать данные с других сайтов/доменов ограничена.
А вот для чего обычно используется JavaScript:
- Изменять HTML-страницу и модифицировать стили.
- Реагировать на действия пользователя, щелчки мыши, перемещения указателя, нажатия клавиш.
- Отправлять сетевые запросы на удалённые сервера, скачивать и загружать файлы (технологии AJAX и COMET).
- Получать и устанавливать куки, задавать вопросы посетителю, показывать сообщения.
- Рисовать в браузере, используя canvas (например, в браузерных играх).
Как и любой другой язык программирования JavaScript имеет свои стандарты, например, ES5 или ES6. Это связано с развитием этого языка: в каждом новом стандарте добавляются новые функции, правила, поддерживаемые им. А, какие-нибудь прежние приемы помечаются как устаревшие и их уже не рекомендуется использовать. Например, стандарт ES5 расшифровывается как ECMAScript 2009. А вот ES6 – это уже ECMAScript 2015 – более свежий стандарт. И здесь кроется некоторая проблема: создавая скрипт под последний свежий стандарт, нужно быть уверенным, что он будет корректно исполняться на браузере клиента. Не секрет, что некоторые пользователи не спешат обновлять свой браузер, что тормозит внедрение новых стандартов представления HTML-документов. И, значит, у части пользователей новые «фичи» на JavaScript могут не работать. Но, так как со времени ES6 прошло уже несколько лет, мы будем рассматривать его в наших занятиях. Кроме того, существует популярный JavaScript-компилятор Babel.JS, который позволяет скрипты стандарта ES6 корректно переводить в аналогичные скрипты стандарта ES5. Следующий важный вопрос: как быстро исполняются скрипты в браузерах? Здесь можно сказать только, что браузеры делают все возможное для ускорения выполнения таких программ. Сначала они читают (парсят) текст скрипта. Затем, преобразуют (компилируют) в машинный код. И, наконец, запускают полученный код. Все эти этапы выполняет так называемая виртуальная машина JavaScript, встроенная в каждый современный браузер. Они еще называются движками. Например, браузеры Chrome и Opera используют движок V8. А браузер Firefox – движок SpiderMonkey. Другие браузеры применяют другие движки. Давайте теперь посмотрим как внедряется JavaScript в HTML-документ. Предположим у нас есть вот такая простая страничка.
DOCTYPE html"> Уроки по JavaScript
Чтобы браузеру указать где у нас здесь будет находиться программа на JavaScript, мы пишем тег
script type="text/javascript">script>
И видите? Sublime Text нам сразу добавляет вот этот необязательный атрибут type. Теперь в нем нет необходимости и по умолчанию, все что идет внутри тега
script>script>
Где можно располагать этот тег? Ограничений особых нет: его можно располагать и в head и в body, в начале страницы или в конце. Но принято код располагать или в разделе head или в конце перед закрывающимся тегом