пишем код в браузере

Как написать и запустить HTML на компьютере?

Чтобы стать профессиональным разработчиком, нужно уметь пользоваться инструментами. В этом выпуске разберёмся, как и в чём написать и запустить HTML-код на своём компьютере.

Шаг 1. Качаем текстовый редактор

Для того, чтобы написать код, сгодится вообще любой текстовый редактор. Подойдёт даже «Блокнот» на вашем компьютере (но в нём очень неудобно всё делать). Мы скачаем и установим хороший редактор, заточенный под веб-разработку. Покажем всё на примере Visual Studio Code.

Зайдите на https://code.visualstudio.com/ и скачайте редактор. Если у вас Windows, то нажмите на любую из синих кнопок. Если OS X или Linux — нажмите Other platforms.

Установка пройдёт как обычно — нужно запустить файл VSCodeUserSetup, много раз нажать «Далее» и поставить пару галочек.

Шаг 2. Запускаем редактор и осматриваемся

Свежеустановленный VS Code встречает нас экраном с большим количеством ссылок. С ними можно познакомиться позже, а сейчас нужно настроить всё для работы.

Хорошо бы, чтобы во время работы все нужные файлы лежали в одной папке (пока проект маленький, так можно делать). Для этого добавим рабочую папку, чтобы VS Code показывал нам только её содержимое.

По шагам на скриншоте:

После этого слева появится панель Explorer с пустым рабочим пространством Untitled (Workspace). Мы создали папку, давайте её наполним.

Шаг 3. Добавляем файлы

После создания папка пустая. Щёлкнем правой кнопкой по заголовку personal_page и добавим три файла, которые понадобятся в работе — index.html, style.css и script.js. Для начала этого хватит.

Шаг 4. Делаем работу удобнее

Сейчас все три файла открыты во вкладках, и между ними не всегда удобно переключаться. Чтобы было удобнее, код со стилями можно перенести в другую часть окна, например, вниз. Для этого нажмите правой кнопкой по вкладке со style.css и выберите split down,чтобы увидеть результат.

Шаг 5. Добавляем код

Пока отредактируем только index.html (файл с разметкой) и style.css (файл со стилями), а script.js оставим на будущее. Если у вас уже есть какой-нибудь код, напишите его, или используйте готовый — мы, например, возьмём код из интерактивных курсов.

Скопируем код со стилями из файла https://htmlacademy.ru/assets/courses/299/outlines.css — откройте его в браузере, скопируйте все строки и вставьте в файл style.css в редакторе.

Шаг 6. Запускаем код и смотрим на результат

Самый простой способ — открыть папку с файлами через проводник и запустить файл index.html. Вы увидите результат вёрстки в браузере, но это не слишком удобно — при любых изменениях придётся переходить в браузер и обновлять страницу.

Давайте настроим всё так, чтобы наша страничка открывалась сама и обновлялась, если вы что-то изменили в разметке или стилях.

Для этого нам понадобится расширение Live Server. Найти его можно прямо в VS Code (пятая иконка в меню слева) — введите название и нажмите Install. Другой способ — скачать Live Server из магазина расширений, но это менее удобно.

После установки расширения Windows может попросить разрешение на доступ к сети. Это нужно, чтобы запускать локальный сервер, Разрешайте, это безопасно.

Чтобы запустить код, нажмите кнопку Go Live на нижней панели.

Результат выглядит так. Слева — редактор, справа — браузер. Теперь измените код в редакторе и сохраните его, а он автоматически изменится и в окне браузера.

Что мы сделали

В следующих частях — о добавлении и проверке кода на JavaScript, и о том, как сделать работу с кодом ещё удобнее. Подпишитесь на нашу рассылку, чтобы не пропустить следующие выпуски.

Не знаете, какой код написать?

Знакомство с HTML и CSS на интерактивных курсах — бесплатно.

Нажатие на кнопку — согласие на обработку персональных данных

Источник

Онлайн-компиляторы для разных языков: выполняем код прямо в браузере

Онлайн-компиляторы для разных языков: выполняем код прямо в браузере

Отобрали лучшие онлайн-компиляторы. Некоторые из них умеют работать с десятками языков программирования, другие заточены под конкретные технологии.

Мультиязычные онлайн-компиляторы

Repl.it — среда для совместной работы с кодом в браузере. Поддерживает более 50 языков, среди которых C, C++, C#, Java, Python, R, JavaScript.

В бесплатной версии доступно многопользовательское сотрудничество, 500 МБ хранилища и 500 МБ памяти, 0.2 — 0.5 vCPUs. Есть также платная версия с приватными проектами, хостингом до 5 реплов, 5 ГБ хранилища, 2 ГБ памяти и 2 vCPUs.

Если нужны не только языки программирования, но и интерактивные терминалы для работы с MySQL и MongoDB, попробуйте сервис JDoodle. Это инструмент для онлайн-обучения, у которого есть режим совместного использования. Вы можете компилировать код на разных языках и разбираться с базами данных прямо в браузере.

Пример кода на Pascal

Если нужен не только компилятор, но и другие технологии, попробуйте сервис Coding Ground. Эта платформа предоставляет доступ к 75+ языкам программирования и технологиям. Вы можете использовать встроенный редактор Markdown и запускать Bash Shell в браузере. Кроме того, на сайте есть учебные материалы, в том числе бесплатные справочники и платные видеокурсы.

Ещё один мощный сервис — Ideone. Это онлайн-компилятор и инструмент отладки, который позволяет прямо в браузере выполнять код на более чем 60 языках программирования и их версиях.

В Ideone есть ряд ограничений для пользователей. Например, время компиляции/интерпретации не должно превышать 10 секунд. Максимальное время исполнения для гостей — 5 секунд, для зарегистрированных пользователей — 15 секунд. Размер выделенной оперативной памяти не превышает 256 МБ.

Python онлайн-компиляторы

Для проверки кода на Python подходит сервис Online Python. Здесь представлена простая IDE, которая поддерживает загрузку с компьютера и скачивание кода в виде файла с расширением *.py. Вы можете работать над проектом совместно с коллегами, поделившись ссылкой. В редакторе поддерживается тёмная тема.

В многоязычных компиляторах тоже очень хорошая поддержка Python. Например, на Repl.it есть вторая и третья версии языка, Python with Turtle для обучения, фреймворк PyGame и движок Pyxel для создания игр, библиотека Tkinter для разработки графического интерфейса, а также шаблоны для Django, Multi-Page Flask и даже ботов для Discord.

JavaScript онлайн-компиляторы

Если вам нужен JavaScript онлайн-компилятор, то JSFiddle — один из лучших вариантов. Он позволяет проверить любое сочетание JavaScript, HTML и CSS.

JavaScript, как и Python, есть во всех многоязычных онлайн-компиляторах. Так что если вам не требуется поддержка препроцессоров и постпроцессоров, библиотек и фреймворков, то можно выбрать любой сервис.

PHP онлайн-компиляторы

Лучший выбор для проверки кода на PHP — Sandbox на сайте Online PHP Functions. Здесь можно выбрать версию языка, начиная с 4.4.9 и до последней. На сайте также есть подсказки по функциям PHP. Они выполнены в виде шпаргалок, разбитых на темы: Arrays, Date and Time, Math и так далее. Есть и пошаговые туториалы.

Выполнить код на PHP можно и с помощью многоязычных онлайн-компиляторов. Однако они не предлагают такой большой выбор версий. Более того, практически везде отсутствует последняя версия языка.

Java онлайн-компиляторы

Если требуется Java онлайн-компилятор, попробуйте Codiva.io. В нём нет такого разнообразия языков, как на других сервисах. Кроме Java поддерживаются только C и C++.

Можно также использовать компилятор Java на сайте OnlineDGB. Здесь есть встроенный отладчик и автоматическое форматирование. Вы можете поделиться примерами кода с другими пользователями, сохранить их или скачать в виде файла с расширением *.java.

Чтобы сделать процесс разработки более эффективным, используйте также полезные сервисы для программистов. Как и онлайн-компиляторы, они помогают сэкономить время на решении разных задач.

Хинт для программистов: если зарегистрируетесь на соревнования Huawei Cup, то бесплатно получите доступ к онлайн-школе для участников. Можно прокачаться по разным навыкам и выиграть призы в самом соревновании.

Перейти к регистрации

Источник

Руководство по JavaScript, часть 1: первая программа, особенности языка, стандарты

Недавно мы провели опрос, посвящённый целесообразности перевода этого руководства по JavaScript. Как оказалось, около 90% проголосовавших отнеслись к данной идее положительно. Поэтому сегодня публикуем первую часть перевода.

Это руководство, по замыслу автора, рассчитано на тех, кто уже немного знаком JavaScript и хочет привести свои знания в порядок а также узнать о языке что-то новое. Мы решили немного расширить аудиторию этого материала, включить в неё тех, кто совершенно ничего не знает о JS, и начать его с написания нескольких вариантов «Hello, world!».

Hello, world!

Программа, которую по традиции называют «Hello, world!», очень проста. Она выводит куда-либо фразу «Hello, world!», или другую подобную, средствами некоего языка.

JavaScript — это язык, программы на котором можно выполнять в разных средах. В нашем случае речь идёт о браузерах и о серверной платформе Node.js. Если до сих пор вы не написали ни строчки кода на JS и читаете этот текст в браузере, на настольном компьютере, это значит, что вы буквально в считанных секундах от своей первой JavaScript-программы.

Этот текст можно ввести с клавиатуры, можно скопировать и вставить его в консоль. Результат будет одним и тем же, но, если вы учитесь программировать, рекомендуется вводить тексты программ самостоятельно, а не копировать их.

Первая программа в консоли браузера — вывод сообщения в консоль

Ещё один вариант браузерного «Hello, world!» заключается в выводе окна с сообщением. Делается это так:

Вот результат выполнения этой программы.

Вывод сообщения в окне

Обратите внимание на то, что панель инструментов разработчика расположена теперь в нижней части экрана. Менять её расположение можно, воспользовавшись меню с тремя точками в её заголовке и выбирая соответствующую пиктограмму. Там же можно найти и кнопку для закрытия этой панели.

Инструменты разработчика, и, в том числе, консоль, имеются и в других браузерах. Консоль хороша тем, что она, когда вы пользуетесь браузером, всегда под рукой.

Источник

Команды для работы с 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-консолью вы используете?

Источник

Инструмент для удобного редактирования кода прямо в браузере

UPD: Заголовок был изменен с «IDE – зло. Давайте использовать Notepad» на более адекватный.

Иногда кажется, что разработчики некоторых крупных интернет-проектов до сих пор пишут код в Блокноте и думают, что все остальные должны поступать также. Шутка, конечно, но почему в большинстве популярных CMS до сих пор отсутствуют удобные инструменты для редактирования кода, я понять не могу. Как ни стараюсь.

Если вам иногда не хватает подсветки синтаксиса при редактировании кода в браузере — добро пожаловать под кат.

Источник проблемы

История началась в то давнее время, когда мне пришлось сделать пару сайтов на Joomla 1.5. Уже тогда я не мог понять, почему в стандартном редакторе статей на базе TinyMCE отсутствовала подсветка синтаксиса при просмотре исходного кода. В WordPress я столкнулся с той же проблемой. «Хорошо, что мешает вам поставить сторонний плагин, заменяющий стандартный редактор на более мощный и жить спокойно?» — спросите вы. Да, в чем-то вы правы. К примеру, для того же WordPress’а есть более десятка подобных плагинов. Для Joomla и, я думаю, других CMS тоже хватает. Конечно, об их преимуществах и недостатках можно еще долго спорить, но позвольте, неужели в продуктах, которыми пользуются сотни тысяч людей ежедневно, нельзя сделать эту простую функциональность доступной из коробки?

Хорошо, предположим, вопрос с популярными CMS’ками мы закрыли. Скорее всего, путем перебора удастся найти более-менее подходящий плагин, который можно будет использовать во всех будущих проектах. Но тут начинается самое интересное. Если вы работали с мощными темами для WordPress’а, взятыми, к примеру, с ThemeForest, то сразу же поймете о чем я. Как правило, большинство из них предоставляет возможность кастомизации путем добавления пользовательского HTML/CSS/JavaScript кода в разные части сайта. К примеру, вот так:

И если HTML/JavaScript код, как правило, пишется один раз, то CSS частенько приходится редактировать. И что вы прикажете делать в таком случае? Использовать любимую IDE и постоянно переключаться в браузер и обратно чтобы внести необходимые изменения? Можно конечно. Но, согласитесь, это как-то не очень удобно. А еще есть плагины для того же самого WordPress’а, в которых так же можно писать код. И подсветку синтаксиса поддерживают из них лишь единицы. Готов поспорить, что кроме этого найдется еще куча случаев, когда кому-то зачем-то надо отредактировать кусок кода прямо в браузере.

Мое решение

На этой стадии я понял, что хочу, чтобы у меня была возможность удобно работать с кодом в вебе. В любой CMS, в любой теме или плагине. Везде.

Вот примерно так и родилась идея проекта CodeHighlight — расширения для Google Chrome, которое позволяет превращать любое текстовое поле в мини-IDE с подсветкой синтаксиса и проверкой исходного кода на ошибки. За основу была взята JavaScript библиотека Ace, которая умеет делать все необходимое. Осталось написать само расширение, которое смогло бы встраивать Ace в любой редактор текста.

Что получилось

Через пару дней я показал первую версию расширения своим знакомым. Они посоветовали добавить возможность выбора темы для редактора, а также подсказали еще один интересный кейс — подсветку исходников в текстовом документе. Им приходилось периодически просматривать код с raw.github.com. С этой задачей сложности также не возникло. Правда, для работы была взята другая библиотека — highlight.js.

Для начала было решено не делать интеграцию с TinyMCE и другими WYSIWYG редакторами. Однако, по просьбам малочисленных, но активных пользователей, в последнюю версию все-таки была добавлена интеграция с TinyMCE. Кстати, из сообщений пользователей стало понятно, что далеко не все пользуются сторонними плагинами для редактирования постов в Joomla и других CMS.

Будущее проекта

Итак, что мы имеем на сегодняшний день. Есть расширение с огромной аудиторией в 80 человек (да, навыки по раскрутке собственных проектов, как и у большинства программистов, у меня на высоте). Есть подозрение, что кому-то кроме меня оно может быть полезно. Я думаю, у других людей могут быть другие похожие кейсы, которые хорошо было бы решать с помощью подобного расширения.

Пока еще есть энтузиазм развивать проект дальше. Даже не смотря на то, что коммерческой выгоды в нем я пока не вижу. Просто не хочется зарывать в землю инструмент, который может кому-то хотя бы немного облегчить жизнь.

Источник