Как сделать калькулятор в возвышенном тексте

Обновлено: 01.07.2024

Sublime Text 3 был написан Джоном Скиннером. Это коммерческий текстовый редактор, написанный на C++, и его лицензия стоит около 80 долларов. Вы также можете попробовать редактор в течение неограниченного времени. Однако без лицензии время от времени при сохранении файла может появляться диалоговое окно, предлагающее купить лицензию.

Sublime Text — это многоплатформенный, чистый, эффективный и быстрый редактор кода. Его организованный пользовательский интерфейс вдохновлен Vim. Редактор поддерживает множество языков программирования и выделяет их синтаксис. У него действительно большое сообщество, которое создает для него различные расширения, такие как плагины, фрагменты кода и т. д.

Кстати, какой из ваших текстовых редакторов может включаться и выключаться менее чем за 2 секунды? Я думаю, что Eclipse и подобные IDE могут сделать это примерно за 2 минуты.

Редактор содержит интересные функции, такие как полноэкранный режим, а также режим без отвлекающих факторов, в котором исчезает все, кроме редактора кода и меню. Однако лично я не стал поклонником режима без отвлекающих факторов. Редактор может разделить рабочее пространство на 4 экрана рядом (по горизонтали), на 3 экрана внизу (по вертикали) или 2x2. Это полезно для больших экранов или для представления кода без переключения между файлами.

В Sublime Text очень стильная мини-карта кода, которая вам понравится, как только вы к ней привыкнете. Но если он вам не нужен, его можно поменять, как и все остальное. Редактор также включает консоль Python, которая очень хорошо работает, по крайней мере, в качестве калькулятора.

Sublime Text полностью настраивается. Все настройки выполняются в специальных файлах JSON.

Редактор ведет себя как любой другой графический редактор, но если вы научитесь работать с сочетаниями клавиш, им можно будет эффективно управлять с помощью одной клавиатуры. Ключевой особенностью является возможность управления несколькими текстовыми курсорами одновременно. Я должен сказать, что это действительно крутая вещь, и многие другие функции основаны на этой способности. Точно так же вы можете использовать сочетание клавиш CTRL + D. Как только вы выберете часть кода, этот ярлык выберет другие вхождения, с которыми вы сможете работать дальше.

Как выглядит редактор?

Сочетания клавиш

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

Ctrl + P - сервер в основном для выбора файла, если вы добавляете:, он перемещает вас на строку, если @, он показывает список функций
Ctrl + Shift + P — список команд
Ctrl + D — добавляет курсор к следующему вхождению.
Ctrl + Click — добавляет курсор в выбранное место.
Shift + Alt + 1 , 2 , 3 , 4 , 8 , 9 , 5 — разделить рабочую область
Ctrl + F — поиск в текущем файле.
Ctrl + Shift + F — поиск в нескольких файлах. При нажатии клавиши Enter отображаются результаты.
Ctrl + Shift + вверх/вниз — перемещает строку вверх/вниз.
Ctrl + Shift + D — дублирует строку.
Ctrl + Shift + K или Shift + Delete — удаление строки.
Ctrl + ( Shift ) + Tab — переход к следующему открытому файлу.

Плагины

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

Выравнивание

Плагин, который приводит выбранный код в более аккуратный и читабельный вид.

Исходный код

После первого использования

После второго использования

Палитра цветов

Отличный плагин, если вы хотите использовать классическую палитру цветов.

Эммет

Emmet (ранее известный как Zen Coding) – это подключаемый модуль HTML, который создает структуру HTML на основе селекторов, подобных CSS. В дополнение к синтаксису селектора CSS вы также можете использовать умножение, символ $ для увеличения, для заполнения содержимого текстом и т. д. Вы также можете использовать квадратные скобки () для создания выражений.

Запустите плагин, нажав Ctrl + Alt + Enter .

Улучшения боковой панели

Отличный плагин для расширения параметров файла.

SublimeCodeIntel

Один из самых полезных плагинов. Автоматически завершает доступные функции и методы, перемещает вас к определению функции, нажав Alt + щелкнув имя функции, даже если оно находится в другом файле.Однако у плагина есть и недостатки.

Тема газировки

Серая космическая тема

Фрагменты

Фрагменты — это фрагменты кода, которые можно вставлять из списка команд. Например. HTML-скелет, lorem ipsum и т. д. Sublime содержит несколько фрагментов кода, и если вы хотите использовать свои собственные, создать их не составит труда.

Создавать фрагменты очень просто. Вы можете создать новый фрагмент на вкладке Инструменты -> Разработчик -> новый фрагмент.

Главный элемент — это место вставки. В содержании тело сниппета пишется между

При создании фрагмента вы должны увидеть шаблон, который значительно упрощает весь процесс.

Под элементом можно разместить несколько настроек:

tabTrigger служит идентификатором, то есть командой, которая создает ваш фрагмент. область видимости ограничивает сниппет файлами определенного типа, например, по расширению файла. description используется для описания сниппета в списке команд ( Ctrl + Shift + P **).

Заключение

Sublime Text, безусловно, отличный редактор с множеством качественных плагинов, которые добавляют ему бонусные баллы. Однако недавно стали доступны такие веб-редакторы, как Atom или VSCode. Теперь мы можем только догадываться, кто из них станет редактором номер один

Привет, steemians, в этом посте я поделюсь руководством по созданию простого калькулятора с программированием на html, php и css. надеюсь, этот пост может добавить науку пемграман нам всем, этот пост подходит для начинающих программистов.

Я немного расскажу о языке программирования HTML (язык гипертекстовой разметки, HTML используется для создания дисплея, который используется для отображения различной информации в Интернете.

PHP (препроцессор гипертекста) – это язык программирования, который обычно используется для создания и разработки веб-сайтов. Php обычно используется вместе с HTML, потому что PHP-скрипт выполняется внутри HTML-скрипта. Сначала PHP расшифровывался как Personal Home Page Tools, PHP впервые был создан Расмусом Лердорфом в 1994 году.

CSS (каскадная таблица стилей) – это один из языков программирования, используемый для оформления дисплея, чтобы сделать его более интересным.

XAMPP
Текстовый редактор (Notepad++ или возвышенный текст)

Для создания калькулятора используется кодирование HTML и PHP. (index.php)

Кодирование CSS используется для того, чтобы калькулятор выглядел более интересным. (style.css)

Дополнение

Вычитание

Умножение

Отдел

Расчеты с использованием Python. Также предоставляет некоторые функции, связанные с числами, такие как подсчет (при множественном выборе). При участии Субхаса Дандапани (rdsubhas), Александра Кирка (akirk) и Крума Цанева (kpym)

Подробнее

Версия 3.0.0
Домашняя страница github.com
Проблемы с github.com
Изменено 2 года назад
Последнее посещение 2 часа назад
Впервые увидели 10 лет назад.

Установки

Всего 14 КБ
Выиграйте 7K
Mac 4K
Линукс 2K

> < th scope="col">10 марта< th scope="row">Mac

27 марта	26 марта	25 марта< /th>	24 марта	23 марта	22 марта	21 марта	20 марта	19 марта	18 марта	17 марта	16 марта	15 марта	14 марта	13 марта	12 марта	11 марта	9 марта	8 марта	марта 7	6 марта	5 марта	4 марта	3 марта	2 марта	1 марта	28 февраля< /th>	27 февраля	26 февраля	25 февраля	24 февраля	23 февраля	22 февраля	21 февраля	20 февраля	19 февраля	17 февраля	16 февраля	15 февраля	14 февраля	13 февраля	12 февраля	11 февраля
Windows	1	0	1	2	5	1	3	2	0	2	1	1	3	3	1	1	1	2	2	0	2	1	2	2	4	3	3	2	2	0	2	1	0	1	4	0	2	1	1	3	3	0	2	2
0	2	1	4	1	1	1	1	1	2	5	0	1	3	3	0	1	2	0	2	1	1	1	2	1	2	3	0	1	1	1	2	0	3	1	1	1	0	1	1	1	0	1	0
Linux	0	0	0	0	0	0	0	0	1	2	3	0	2	0	2	1	1	0	0	0	0	1	2	0	1	0	0	0	1	0	0	0	0	1	0	1	0	0	0	1	1	0	1	0

Ознакомление

Выберите формулу и запустите вычисление, чтобы вычислить ее с помощью Python. Результат можно добавить к выделенному (1+1 => 1+1 = 2) или заменить выделение (1+1 => 2). Использование параметра replace: true заменяет выделенный текст результатом. Пустые выборки обрабатываются как операции со строками, как и большинство возвышенных команд. Если строка под курсором не является формулой, вам будет предложено ввести ее, и результат будет вставлен.

Поскольку этот подключаемый модуль использует Python для оценки выбора, мы не можем поддерживать страны/языки, использующие , в качестве десятичного разделителя. Мы пробовали это в течение длительного времени, но поняли, что это нарушает поддержку вычислений в списках Python, что является очень удобной функцией. Поэтому в интересах большего количества операций калькулятора вам нужно будет использовать десятичные разделители ( . ) в английском стиле. И нет , поддержка в цифрах, это относится ко всем одинаково!

Можно использовать любую функцию из математических и случайных библиотек (математическая и случайная документация).

Вы можете генерировать пароли, используя pwd(len) (или password(len) ). Вы можете рассчитать средние значения (среднее), используя avg([values]) (или medium([values]) ). Если вам нужно использовать счетчик, вы можете использовать переменную i. Каждый выбор увеличивает счетчик, и он начинается с 0.

Существует также команда calculate_count, используемая для подсчета от 1 (или другого индекса, см. ниже) и увеличения при каждом курсоре.

В этом уроке мы создадим полностью рабочий калькулятор, используя только HTML, CSS и ванильный Javascript. Вы узнаете об обработке событий и манипуляциях с DOM на протяжении всего проекта. На мой взгляд, это действительно хороший проект для начинающих для тех, кто хочет стать веб-разработчиком.

Видеоруководство

Если вы хотите вместо этого посмотреть подробное пошаговое видео, вы можете посмотреть видео, которое я сделал, рассказывая об этом проекте, на моем канале Youtube:

Для этого проекта HTML будет довольно простым.Мы начнем со стандартного шаблона HTML5. Внизу нашего тела я включил скрипт index.js, который мы создадим позже. Это должно быть внизу, потому что таким образом, когда наш javascript запускается, элементы html, необходимые для калькулятора, будут в DOM.
В теле у нас есть раздел, а внутри него div с классом-контейнером. Мы будем использовать эти обертки для размещения нашего калькулятора на странице. Внутри нашего контейнера у нас есть пустой div с id display, и это будет дисплей нашего калькулятора. Он пустой, потому что мы изменим его содержимое из Javascript. Затем у нас есть div с классом кнопок, который будет представлять собой клавиатуру калькулятора.

Выйти из полноэкранного режима

Контейнер кнопок будет содержать все кнопки. Каждая кнопка будет div с классом button . Это упростит стилизацию, а также поможет нам собрать пользовательский ввод. Здесь у нас есть div для каждой кнопки, которую мы хотим на нашей клавиатуре. Вы можете заметить, что у нас есть странная метка между кнопками: ← . Это объект HTML, и он отображает стрелку назад ( ← ), и мы будем использовать ее в качестве возврата. Также обратите внимание, что для кнопки со знаком равенства у нас есть отдельный идентификатор equal . Мы будем использовать этот идентификатор, чтобы отличить эту специальную кнопку и оценить выражение, предоставленное калькулятору.

Выйти из полноэкранного режима

И это вся разметка HTML, которая нам нужна для этого проекта, давайте перейдем к CSS.

Не забудьте связать заголовок стилей CSS в заголовке HTML-файла:

Выйти из полноэкранного режима

Давайте создадим файл style.css.
Мы устанавливаем ширину для контейнера и центрируем его, используя поле (также даем ему приличное верхнее поле 10vh), и применяем небольшую тень блока.

Выйти из полноэкранного режима

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

Выйти из полноэкранного режима

Для размещения кнопок мы используем сетку CSS. Установив 4 x 1fr in-grid-template-columns, мы получим 4 кнопки одинакового размера в каждой строке. Мы устанавливаем только нижнюю и левую границы, поэтому у нас не будет двойных границ. Мы установим две другие стороны в следующем правиле CSS.

Выйти из полноэкранного режима

Применить недостающие две стороны границ для каждой кнопки:

Выйти из полноэкранного режима

Для кнопки мы установим границы, размер шрифта и высоту строки 100 пикселей, чтобы центрировать ее по вертикали, и зададим text-align: center, чтобы центрировать подписи кнопок по горизонтали. Чтобы улучшить взаимодействие с пользователем, установите курсор в указатель, чтобы пользователь знал, что это кликабельный элемент.

Выйти из полноэкранного режима

Мы хотим, чтобы кнопка равенства выделялась, поэтому установим для нее синий цвет фона и белый текст. Также, чтобы получить хороший эффект при наведении, мы установим более темный цвет фона и белый цвет текста при наведении. Чтобы сделать переход плавным, установите: переход: 0,5 с, плавный вход-выход; .

Выйти из полноэкранного режима

JavaScript

Это будет сердце нашего приложения. Давайте создадим файл index.js. Первое, что нам нужно сделать, это сохранить ссылку на наш элемент display dom. Мы можем легко это сделать, потому что у него есть идентификатор display .

Выйти из полноэкранного режима

Далее нам нужно получить ссылки на кнопки. Мы будем хранить ссылки на кнопки в массиве. Чтобы собрать кнопки, мы можем выбрать их с помощью document.getElementsByClassName('button') , но эта функция возвращает NodeCollection вместо массива, поэтому нам нужно преобразовать его в массив с помощью Array.from() .

Выйти из полноэкранного режима

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

Чтобы определить, что нам делать, мы будем использовать e.target.innerText , который просто возвращает метку нажатой кнопки.

В первом случае, когда пользователь нажимает кнопку "C", мы хотели бы очистить отображение. Для этого мы можем получить доступ к нашей ссылке на отображение и установить для innerText пустую строку. Не забудьте добавить перерыв; в конце, потому что это необходимо для предотвращения выполнения кода, определенного в других блоках case.

Для кнопки равенства мы будем использовать javascript, встроенный в функцию eval. Нам нужно предоставить содержимое дисплея для eval, и он оценит и вернет результат, поэтому мы должны установить результат вызова eval для внутреннего текста дисплея. Нам нужно обернуть это в блок try catch для обработки ошибок.Ошибки могут возникать, когда у нас есть синтаксически неверные математические выражения, например //(9( , в этих случаях мы установим внутренний текст дисплея для отображения «Ошибка».

⚠️ Вы не должны использовать eval в приложениях, ориентированных на пользователя, потому что им можно злоупотреблять и с ним можно запускать внешний код. Подробнее. Если вы хотите заменить eval, я предлагаю использовать Math.js lib.

Если пользователь нажимает стрелку назад, нам нужно удалить последний символ из внутреннего текста дисплея. Для этого мы будем использовать метод String.slice(), но мы хотим делать это только в том случае, если отображение имеет какое-либо значение.

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

Выйти из полноэкранного режима

Весь проект доступен на GitHub.
Все, у вас есть рабочий калькулятор.

Спасибо, что прочитали.

Где вы можете узнать больше от меня?

Я создаю образовательный контент, посвященный веб-разработке, на нескольких платформах, не стесняйтесь 👀 ознакомиться с ними.

Я также создаю информационный бюллетень, в котором делюсь созданным мной образовательным контентом за неделю или две недели. Никакой ерунды💩 только образовательный контент.

Читайте также: