Программа «Здравствуй, мир!» — это классическая и проверенная временем традиция в компьютерном программировании. Это короткая и полная первая программа для начинающих, и это хороший способ убедиться, что ваша среда правильно настроена.
Этот учебник проведет вас через создание этой программы на JavaScript. Однако, чтобы сделать программу более интересной, мы изменим традиционную программу «Hello, World!», Чтобы она запрашивала у пользователя его имя. Затем мы будем использовать имя в приветствии. Когда вы закончите с этим учебником, у вас появится интерактивная программа «Здравствуй, мир!».
Предпосылки
Вы можете выполнить это руководство, используя консоль разработчика JavaScript в своем веб-браузере. Перед началом этого урока, вы должны быть знакомы с работой с этим инструментом. Чтобы узнать больше об этом, вы можете прочитать наш учебник «https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console[How To Use JavaScript Developer Console]».
Первая программа на JavaScript. Как выполняется код на JavaScript
[[creating-the-“hello-world-”-program]] === Создание программы «Здравствуй, мир!»
Чтобы написать программу «Hello, World!», Сначала откройте консоль JavaScript предпочитаемого веб-браузера.
Существует два основных способа создания программы «Hello, World!» На JavaScript с помощью метода + alert () + и метода + console.log () + .
Использование + alert () +
Первый способ, которым мы можем написать эту программу, это использовать метод + alert () + , который отобразит окно предупреждения над вашим текущим окном с указанным сообщением (в данном случае это будет «Hello, World!»). ) и кнопку + OK + , которая позволит пользователю закрыть предупреждение.
В рамках метода мы передадим тип данных string в качестве параметра. Эта строка будет установлена в значение + Hello, World! + , Так что это значение будет напечатано в окне предупреждения.
Чтобы написать этот первый стиль программы «Hello, World!», Мы заключим строку в скобки метода + alert () + . Мы закончим нашу инструкцию JavaScript с помощью semicolon.
alert(«Hello, World!»);
Как только вы нажмете клавишу + ENTER + после строки JavaScript, вы должны увидеть следующее предупреждение в вашем браузере:
изображение: https: //assets.digitalocean.com/articles/eng_javascript/js-console/javascript-alert.png [Пример предупреждения консоли JavaScript]
Консоль также напечатает результат вычисления выражения, который будет читаться как + undefined + , когда выражение явно что-то не возвращает.
Всплывающие оповещения могут быть утомительными, чтобы продолжать щелкать, поэтому давайте рассмотрим, как создать ту же программу, зарегистрировав ее на консоли с помощью + console.log () + .
Использование + console.log () +
ЗНАКОМСТВО С ЯЗЫКОМ
HTML-технология в отличие от полномасшабного компьютерного программирования имеет очень ограниченный инструментарий для визуального воздействия на пользователя и построения интерактивных сеансов работы.
Игра на JavaScript с нуля для начинающих. ОЧЕНЬ ПРОСТО!
Традиционное средство, которое предлагается пользователю для изменения экрана это мышиный щелчок по ссылке. Браузер загружает новый файл и экран перерисовывается.
Традиционная динамика в документе анимационный GIF. Но этой анимации далеко до настоящей мультипликации.
А ведь хочется? Правда, хочется! Хочется динамических меню, реакций на мышиные перемещения и щелчки. Хочется полноценного диалога на страницах документа, такого, как в «настоящих» компьютерных программах. Хочется придумать и «выпечь» в гипертексте динамическую игру или обучающую программу с яркими демонстрациями, зачетными классами и испытательными стендами.
Хочется больше жизни!
JavaScript одно из тех средств, которые нужны для этой цели. С JavaScript гипертексты получают встроенный программный моторчик, запускающий HTML на новые обороты.
Посмотрите примеры использования JavaScript и CSS (каскадные таблицы стилей) в HTML-файлах (документы нормально просматриваются только в Internet Explorer 4).
JavaScript. что это такое?
Это язык программирования, который понятен браузеру. Это означает, что браузер умеет выполнять (интерпретировать) команды этого языка.
Программу на JavaScript можно помещать внутрь HTML-кода или держать в отдельном файле. Этот файл браузер прочитает (по специальной команде-тегу LINK ) во время интерпретации HTML-программы.
Программы на JavaScript (их называют скриптами ) не работают самостоятельно. Коды JavaScript дополняют коды HTML и «живут» только вместе с ними. Даже если они расположены в отдельном файле.
как скрипт монтируется в html
Скрипт размещается между двумя парными тегами Обычно запись скрипта выглядит так:
Начало скрипта Скрипт представлен как HTML-комментарий, чтобы не «смущать» браузеры, которые о скриптах не знают. Конец скрипта Эта команда — специально для пользователей, у которых браузер не понимает скриптов.
пояснения
- Код скрипта оформляют как HTML-комментарий. Браузеры, которые умеют работать со скриптами, об этом знают, а другие просто пропустят комментарии.
- Закрывающий тег HTML-комментария предваряется двумя наклонными чертами «//» (комментарий языка JavaScript) опять же в целях безопасности. Некоторые браузеры сходят с ума, если не видят этих знаков. (Комментарием в JavaScript считается все, что располагается от символов «//» и до конца текущей строки).
- Открывающий тег SCRIPT использует атрибут language для указания языка, на котором написан скрипт. Значением этого атрибута в нашем случае является ключевое слово JavaScript .
- Команда является не обязательной, но желательной. Внутри этой команды располагаются теги HTML.
пример
Увидеть этот документ можно здесь.
пояснения
Скрипт, расположенный в приведенном выше примере, содержит всего одну команду на языке JavaScript вызов функции alert .
Функция alert создает информационную панель с единственной кнопкой «Ok».
Пользователь читает сообщение, нажимает кнопку и панель убирается с экрана.
Теперь браузер приступает к интерпретации команд, расположенных вслед за скриптом в HTML-коде выводит в окошко текст:
| Для возврата к основному тексту нажмите кнопку Назад на инструментальной панели браузера. |
замечания
-
Если текст-параметр функции alert слишком длинный, его можно записывать в нескольких строчках используя знак «+» (операция соединения):
alert(«Язык JavaScript был разработан фирмой Netscape»+ » (первое название языка — LiveScript)»);
alert(«Первая строка.nСтрока вторая.»);
Нажмите кнопку Сброс, затем приступайте к решению.
-
Проведите серию опытов с функцией alert. Задайте вывод сообщения:
| JavaScript — это язык, который позволяет писать динамические гипертексты. |
Попробуйте другие тексты, символы перевода строк, запись одной функции на нескольких строчках, запись нескольких функций alert.
Источник: www.nivasposad.ru
Как написать приложение на JavaScript: Создаем калькулятор на JS
В этой статье мы рассмотрим, как создать простой веб-калькулятор с использованием HTML, CSS и JavaScript. Калькулятор будет выполнять основные математические операции: сложение, вычитание, умножение и деление.
Основы JavaScript для создания калькулятора
Прежде чем мы начнем, давайте рассмотрим несколько основных концепций JavaScript, которые нам понадобятся:
- Переменные: В JavaScript переменные используются для хранения данных, таких как числовые значения для вычислений.
- Функции: Функции в JavaScript используются для выполнения определенных действий. В нашем случае мы будем использовать функции для вычисления результатов математических операций.
- Обработчики событий: Обработчики событий позволяют выполнять код в ответ на определенные действия пользователя, например, при нажатии кнопки.
Подготовка к работе
Вам понадобится текстовый редактор для написания кода и веб-браузер для его просмотра. Можно использовать любой текстовый редактор, такой как Sublime Text, Atom или Visual Studio Code. Что касается веб-браузера, вы можете использовать любой современный браузер, например, Chrome, Firefox или Safari.
Создание HTML-структуры онлайн калькулятора
Прежде чем начать писать JavaScript, нам нужно создать основную структуру нашего калькулятора с помощью HTML. Наш HTML-код может выглядеть примерно так:
Простой калькулятор 7 8 9 / 4 5 6 * 1 2 3 — 0 . = +
Этот код создает веб-страницу с калькулятором, который имеет дисплей для вывода результатов и кнопки для ввода чисел и выполнения операций. Класс ‘ button ‘ добавлен к каждой кнопке калькулятора, что позволяет легко манипулировать этими кнопками в JavaScript.
Добавление стилей CSS для калькулятора
CSS является ключевым элементом создания привлекательного визуального вида нашего калькулятора. Он позволяет нам создавать как простые, так и сложные дизайны, а также обеспечивает хорошее понимание структуры нашего HTML. В частности, мы можем использовать CSS для изменения шрифтов, цветов, отступов, рамок и других элементов.
Давайте рассмотрим, как мы можем написать наш CSS, чтобы сделать наш калькулятор более привлекательным.
Стилизуем калькулятор в целом
/* Стилизация для всего калькулятора */ #calculator
Стилизуем дисплей калькулятора
/* Стилизация для дисплея */ #display
Делаем стили для кнопок
/* Стилизация для кнопок */ .button
Добавляем дополнительные стили для наведения и кнопки «=»
/* Изменение цвета при наведении на кнопку / .button:hover < background-color: #0056b3; >/ Дополнительное оформление для кнопки равно */ .button.equals < background-color: #4CAF50; >.button.equals:hover
Финальний вид CSS калькулятора
#calculator < width: 300px; margin: auto; padding: 20px; background-color: #f3f3f3; border-radius: 20px; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); >#display < width: 100%; height: 50px; text-align: right; margin-bottom: 10px; padding-right: 10px; box-sizing: border-box; border: none; background-color: #fff; font-size: 20px; border-radius: 10px; >.button < width: 66px; height: 40px; margin: 5px; display: inline-block; background-color: #007BFF; color: white; text-align: center; line-height: 40px; cursor: pointer; border-radius: 5px; font-size: 18px; transition: background-color 0.3s ease; >.button:hover < background-color: #0056b3; >.button.equals < background-color: #4CAF50; >.button.equals:hover
В этом CSS мы использовали цвета, тени и переходы, чтобы создать более привлекательный и динамичный вид. Это всего лишь один из множества возможных вариантов оформления калькулятора, и вы можете экспериментировать с различными стилями и цветами, чтобы создать свой собственный уникальный стиль калькулятора.
Пишем логику калькулятора с использованием JavaScript
Следующим шагом является добавление логики калькулятора с использованием JavaScript. Это включает сохранение введенных чисел и выполнение вычислений на основе нажатой кнопки.
Сначала добавим JavaScript-код для обработки событий кликов по кнопкам.
Получаем все кнопки из документа:
var keys = document.querySelectorAll(‘#calculator span’); var operators = [‘+’, ‘-‘, ‘x’, ‘/’]; var decimalAdded = false;
Добавляем событие onclick ко всем клавишам и выполняем действия
for (var i = 0; i < keys.length; i++) < keys[i].onclick = function(e)
Получаем ввод и значение кнопки:
var input = document.querySelector(‘#display’); var inputVal = input.innerHTML; var btnVal = this.innerHTML;
Теперь просто добавляем значение кнопки ( btnValue ) к входной строке и, наконец, используем функцию eval JavaScript для получения результата. Если нажата кнопка очистки, мы удаляем все.
if (btnVal == ‘C’)
Если нажата кнопка равенства, вычисляем и отображаем результат.
else if (btnVal == ‘=’) < var equation = inputVal; var lastChar = equation[equation.length — 1];
Заменяем все случаи ‘ x ‘ на ‘ * ‘ соответственно. Это можно легко сделать с помощью регулярного выражения и флага ‘ g ‘, который заменит все вхождения найденного символа/подстроки.
equation = equation.replace(/x/g, ‘*’);
Последнее, что осталось сделать, это проверить последний символ уравнения. Если это оператор или десятичный разделитель, удаляем его.
if (operators.indexOf(lastChar) > -1 || lastChar == ‘.’) equation = equation.replace(/.$/, »); if (equation) input.innerHTML = eval(equation); decimalAdded = false;
Основной функционал калькулятора завершен. Однако есть некоторые проблемы, такие как:
- Не должно быть двух операторов подряд.
- Уравнение не должно начинаться с оператора, кроме минуса.
- В числе не должно быть более одного десятичного разделителя.