Создание своего скриптового языка

Гайд для начинающих: как написать JavaScript

Современный интернет немыслим без скриптов. Учимся писать на JavaScript.

Если бы для интернета писали Библию, она начиналась бы так:

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

Примерно так происходило в реальности. JavaScript придумали, чтобы «оживить» HTML. Скрипты JavaScript пишутся непосредственно в текст HTML или хранятся в отдельных файлах, как и стили CSS. Они выполняются сразу после загрузки страницы в браузер.

Даже сам язык в первое время назывался LiveScript. Потом его переименовали в JavaScript, потому что планировали как-то увязать с языком общего назначения Java. Но сейчас у них нет практически ничего общего, а JavaScript — совершенно независимый язык программирования со своей четкой спецификацией ECMAScript.

Формально JavaScript является торговой маркой Oracle, а этот язык — «расширение» ECMAScript, наряду с JScript от Microsoft и ActionScript, но это скорее заморочки владельцев торговых марок. Главное, что свободный ECMAScript никому не принадлежит.

Со временем сфера влияния JavaScript значительно расширилась. Его начали использовать не только для скриптов на странице HTML, но и для серьезных больших веб-приложений и целых программ, которые работают в браузере. Есть инструменты, чтобы специальным образом «упаковать» эти программы и выполнять их отдельно от браузера. Это компиляторы и интерпретаторы, которые более подробно рассматриваются на обучающих курсах «Java-разработчик» и «Веб-разработчик».

Приложения JavaScript выполняются в любой среде, где есть соответствующий интерпретатор.

Нас пока интересуют только браузеры и HTML-странички.

Как сделать JavaScript? Написать элементарный скрипт не сложнее, чем простую HTML-страничку, ведь скрипты JavaScript пишутся обычным текстом, то есть их можно создавать буквально в том же «Блокноте», сохраняя потом в отдельных файлах или вставляя в тело HTML-документа. Самые простые вещи на JavaScript делаются действительно просто.

Как написать JavaScript

Для примера сделаем простой скрипт для выполнения сервером сценариев Windows. Этот скрипт можно написать прямо в «Блокноте» и выполнить без браузера.

WScript. echo (» Привет, Skillbox!«)

Пишем этот текст в «Блокноте», затем сохраняем файл под именем skillbox.js и запускаем в «Проводнике» Windows.

alert()

Метод alert() отображает окошко с кнопкой «OK». В окне выводится сообщение, которое указано в скобках. Например, «Привет, Skillbox!». То есть в данном случае браузер делает ровно то же самое, что перед этим делал сервер сценариев Windows.

Эти примеры тоже можно писать в «Блокноте», только сохранять в файлах с расширением HTML. Например, skillbox.htm.

В качестве аргумента alert() можно указать не только конкретный текст, но и результат каких-либо вычислений или обработки других данных. Например, alert(x), где x вычисляется отдельно.

confirm()

Метод confirm() выводит такое же окно с сообщением, но уже с двумя кнопками — «ОК» и «Отмена». В зависимости от того, какую кнопку щелкнет пользователь, метод возвращает либо значение true, либо false. Сервер получает это возвращаемое значение от пользователя и выполняет какое-то действие, в зависимости от ответа.

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

prompt()

Метод prompt() выводит диалоговое окно с сообщением и текстовым полем, куда пользователь вводит данные. Здесь тоже предусмотрены две кнопки «ОК» и «Отмена». По нажатию первой кнопки метод возвращает на сервер введенный текст, а по нажатию второй кнопки возвращает логическое значение false.

Синтаксис здесь такой:

prompt ( сообщение, значение_поля_ввода_данных)

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

Возможности современного JavaScript выходят далеко за рамки примитивного ввода-вывода данных через формы. Эти методы мы привели только в качестве самых простых примеров. Кроме этого, JavaScript позволяет реагировать на действия пользователя. Например, на движения мышкой или нажатие определенных клавиш. JavaScript часто используется для обеспечения асинхронной работы ( Технология AJAX), когда информация на странице обновляется без ее перезагрузки. В этом режиме данные отправляются на сервер и загружаются оттуда в интерактивном режиме. Кроме того, JavaScript способен манипулировать с HTML-элементами на странице (создавать и прятать теги и т.д.) и делать многое другое.

Полезные инструменты

Консоль разработчика

Во всех популярных браузерах есть специальная консоль разработчика. Она показывает код скриптов на странице, а также выводит другую полезную информацию. В Chrome, Firefox и IE консоль разработчика открывается по нажатию горячей клавиши F12, в Safari — Ctrl+Shift+I или Ctrl+Alt+C. На скриншоте скрипты отображаются справа вверху, вместе с другими элементами веб-страницы.

Редакторы кода

В дальнейшем для удобного программирования понадобится установить редактор кода или IDE (Integrated Development Environment), интегрированную среду разработки. IDE — это редактор с расширенной функциональностью, который интегрирован с другими полезными инструментами, поддерживает подключение дополнительных модулей и так далее.

Для начала можно рекомендовать один из легких редакторов:

В будущем есть смысл присмотреться к IDE:

Заключение

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

Курс идеально подойдет дизайнерам-разработчикам и начинающим программистам, кто уже знаком и умеет разрабатывать страницу на HTML и CSS, но не намерен останавливаться в изучении программирования. Преподаватели практически «на пальцах» объяснят базовые основы синтаксиса JavaScript, научат создавать визуальные интерактивные элементы и помогут разработать первый веб-проект на JavaScript.

Источник

Продукты и технологии:

В статье рассматриваются:

В этой статье я покажу, как создать собственный скриптовый язык, используя C# безо всяких внешних библиотек. Этот скриптовый язык основан на алгоритме разделения-слияния (Split-and-Merge) для разбора математических выражений на C#, который я представил в номере «MSDN Magazine» за октябрь 2015 года (msdn.com/magazine/mt573716).

Применяя пользовательские функции, я могу расширить алгоритм разделения-слияния для разбора не только математического выражения, но и собственного скриптового языка. «Стандартные» управляющие выражения в языке (if, else, while, continue, break и т. д.) можно добавить как пользовательские функции, равно как и другую функциональность типичного скриптового языка (команды ОС, манипуляции со строками, поиск файлов и т. п.).

Я намерен назвать свой язык так: «Customizable Scripting на C#», или CSCS. Зачем мне понадобилось создавать еще один скриптовый язык? Потому что он прост в настройке. Добавление новой функции или управляющего выражения, которое принимает произвольное количество параметров, требует написания всего нескольких строк кода. Более того, имена функций и управляющих выражений можно использовать вне рамок английского языка, и для этого достаточно внести некоторые изменения в конфигурацию, о которых я тоже расскажу в этой статье. Увидев, как реализуется язык CSCS, вы сможете создать собственный скриптовый язык.

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

Область CSCS

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

На рис. 1 представлена программа «Hello, World!» на CSCS. Из-за опечатки в «print», программа сообщает об ошибке в конце: «Couldn’t parse token [pint]» (не удалось разобрать лексему [pint]). Заметьте, что все предыдущие выражения были выполнены успешно, т. е. CSCS является интерпретатором.

Рис. 1. «Hello, World!» на CSCS

Модификации в алгоритме разделения-слияния

Я внес два изменения в Split-часть алгоритма Split-and-Merge. (Merge-часть осталась прежней.)

Первое изменение в том, что результат разбора выражения теперь может быть числом, строкой или кортежем значений (каждое из которых является либо строкой, либо числом), а не только числом. Я создал класс Parser.Result для хранения результата после применения алгоритма разделения-слияния:

Второе изменение заключается в том, что теперь часть, отвечающая за разделение, выполняется не просто до нахождения символа прекращения разбора — ) или \n, а пока не будет найден любой символ в переданном массиве символов прекращения разбора. Это необходимо, например, при разборе первого аргумента выражения if, где разделителем может быть любой символ: или =.

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

Интерпретатор

Класс, отвечающий за интерпретацию CSCS-кода, называется Interpreter. Он реализован как singleton, т. е. в его определении указано, что можно создать только один экземпляр этого класса. В его методе Init средство разбора (Parser) (см. ранее упомянутую предыдущую статью) инициализируются все функции, используемые Interpreter:

В файле Constants.cs определены реальные имена, используемые в CSCS:

Любая функция, зарегистрированная в Parser, должна быть реализована как класс, производный от класса ParserFunction, и должна переопределять его метод Evaluate.

Начиная работу над скриптом, Interpreter первым делом упрощает скрипт, удаляя все пробельные символы (если только они не находятся внутри строки) и все комментарии. Следовательно, пробелы или новые строки нельзя использовать в качестве разделителей операторов. Символ разделителя оператора и строка — признак комментария тоже определяются в Constants.cs:

Переменные и массивы

CSCS supports numbers (type double), strings or tuples (arrays of variables implemented as a C# list). Each element of a tuple can be either a string or a number, but not another tuple. Therefore, multidimensional arrays are not supported. To define a variable, the CSCS function “set” is used. The C# class SetVarFunction implements the functionality of setting a variable value, as shown inCSCS поддерживает числа (типа double), строки и кортежи (массивы переменных, реализованных как C#-список). Каждый элемент кортежа может быть или строкой, или числом, но не другим кортежем. Поэтому многомерные массивы не поддерживаются. Чтобы определить переменную, применяется CSCS-функция set. C#-класс SetVarFunction реализует функциональность присваивания значения переменной (рис. 2).

Рис. 2. Реализация функции, присваивающей переменной значение

Вот несколько примеров определения переменной в CSCS:

Обратите внимание на то, что специального объявления массива нет: простое определение переменной с индексом будет инициализировать массив, если он еще не инициализирован, и добавлять в него пустые элементы при необходимости. В предыдущем примере были добавлены элементы c(0) и c(1), оба инициализированные пустыми строками. Это исключает необязательный на мой взгляд шаг предварительного объявления массива, который требуется в большинстве скриптовых языков.

Обратите внимание на то, что специального объявления массива нет: простое определение переменной с индексом будет инициализировать массив, если он еще не инициализирован, и добавлять в него пустые элементы при необходимости.

Все переменные и массивы в CSCS создаются с помощью CSCS-функций (вроде set или append). Все они определяются на глобальном уровне и могут использоваться позднее простым обращением к имени переменной или к переменной с индексом. В C# это реализуется в GetVarFunction (рис. 3).

Рис. 3. Реализация функции, получающей значение переменной

В Parser должна быть зарегистрирована только функция присваивания значения переменной:

Функция получения переменной (get) регистрируется внутри C#-кода функции присваивания (см. предпоследнее выражение на рис. 2):

Некоторые примеры получения переменных в CSCS:

Управляющие выражения: If, Else If, Else

Управляющие выражения If, Else If и Else тоже реализуются на внутреннем уровне как функции Parser. Они регистрируются Parser так же, как и любые другие функции:

В Parser должно быть зарегистрировано только ключевое слово IF. Выражения ELSE_IF и ELSE будут обрабатываться внутри реализации IfStatement:

Настоящая реализация выражения If находится в классе Interpreter (рис. 4).

Рис. 4. Реализация выражения If

Явно объявляется, что условие If имеет следующую форму: аргумент 1, знак сравнения, аргумент 2:

Именно здесь можно добавлять необязательные операторы AND, OR или NOT.

Каждый элемент кортежа может быть или строкой, или числом, но не другим кортежем.

Функция EvalCondition просто сравнивает лексемы согласно знаку сравнения:

Вот реализация числового сравнения:

Сравнение строк аналогично, и его можно увидеть в исходном коде, сопутствующем этой статье, в реализации функции GetNextIfToken.

Когда условие if, else if или else равно true, обрабатываются все выражения в блоке. Это реализовано в методе ProcessBlock на рис. 5. Если условие не равно true, все выражения в блоке пропускаются. Это реализовано в методе SkipBlock (см. сопутствующий исходный код).

Рис. 5. Реализация метода ProcessBlock

Обратите внимание на то, как внутри цикла while используются операторы Continue и Break. Эти операторы тоже реализованы как функции. Вот что представляет собой Continue:

Реализация Break аналогична. Оба регистрируются в Parser, как и любая другая функция:

Вы можете использовать функцию Break для выхода из вложенных блоков If или из цикла while.

Управляющие выражения: цикл while

Цикл while вновь реализуется и регистрируется в Parser как функция:

Всякий раз, когда происходит разбор ключевого слова while, вызывается метод Evaluate объекта WhileStatement:

Так что настоящая реализация цикла while находится в классе Interpreter (рис. 6).

Рис. 6. Реализация цикла while

Заметьте, что цикл while на упреждение проверяет вхождение в бесконечный цикл после определенного количества итераций, определенного в конфигурационных параметрах константой CHECK_AFTER_LOOPS. Эвристика здесь в том, что если в течение нескольких циклов сравниваются точно те же значения, это может указывать на бесконечный цикл. На рис. 7 показан цикл while, где я забыл об увеличении переменной цикла i внутри while.

Рис. 7. Обнаружение бесконечного цикла while в CSCS

Функции, функции, функции

Чтобы CSCS делал более полезные вещи, нужно нарастить его функционал, т. е. следует реализовать больше функций. Добавление новой функции в CSCS достаточно прямолинейно: сначала реализуется класс, производный от класса ParserFunction (с переопределением метода Evaluate), а затем он регистрируется в Parser. Вот реализация функции Print:

Эта функция выводит любое количество разделенных запятыми аргументов, переданных ей. Само чтение аргументов осуществляется вспомогательной функцией GetFunctionArgs, которая возвращает все переданные аргументы как список строк. Вы можете посмотреть на эту функцию в сопутствующем коде.

Второй и последний шаг — регистрация функции Print в Parser в инициализирующей части программы:

Константа Constants.PRINT определена как print.

На рис. 8 показана реализация функции, которая начинает новый процесс.

Рис. 8. Реализация функции запуска процесса

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

Вот как можно найти файлы, запустить и уничтожить процесс, а также вывести некоторые значения в CSCS:

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

Табл. 1. CSCS-функции

Интернационализация

Заметьте, что в Parser можно регистрировать несколько меток (имен функций), соответствующих одной и той же функции. Тем самым становится возможным добавление любого количества других языков.

Заметьте, что в Parser можно регистрировать несколько меток (имен функций), соответствующих одной и той же функции. Тем самым становится возможным добавление любого количества других языков.

Добавление трансляции (перевода) заключается в регистрации другой строки в том же C#-объекте. Соответствующий код на C# выглядит так:

Метод AddTranslation добавляет синоним для уже существующей функции:

Благодаря поддержке Unicode в C# большинство языков можно добавить этим способом. Заметьте, что имена переменных тоже могут быть в Unicode.

Все трансляции указываются в конфигурационном файле. Вот как выглядит этот конфигурационный файл для испанского языка:

А вот пример CSCS-кода на испанском:

Заметьте, что теперь Parser может обрабатывать управляющие выражения и функции как на английском языке, так и на испанском. Никаких ограничений на количество добавляемых языков нет.

Заключение

Все элементы CSCS — управляющие выражения, переменные, массивы и функции — реализуются определением C#-класса, производного от базового класса ParserFunction, и переопределением его метода Evaluate. Затем вы регистрируете объект этого класса в Parser. Такой подход обеспечивает следующие преимущества.

Конечно, на этом этапе язык CSCS далек от какой-либо завершенности. Вот несколько способов сделать его более полезным.

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

Василий Каплан (Vassili Kaplan) — бывший разработчик Microsoft Lync. Увлекается программированием на C# и C++. В настоящее время живет в Цюрихе (Швейцарии) и работает как фрилансер на различные банки. С ним можно связаться по адресу iLanguage.ch.

Выражаю благодарность за рецензирование статьи экспертуMicrosoft Джеймсу Маккаффри (JamesMcCaffrey).

Источник

Как начать писать на JavaScript с нуля

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

Рассмотрим, из чего состоят веб-странички. HTML (HyperText Markup Language) отвечает за придание странице структуры (показывает, где меню сайта, а где заголовок, логотип или статья) и контента (различные тесты, списки, изображения и т. д.). CSS (Cascading Style Sheets) отвечает за визуальную составляющую страницы: определяет, какого цвета и размера должен быть тот или иной блок, как его оформить и вывести пользователю.

Структура и оформление есть, но где же взаимодействие? Здесь на сцену выходит JavaScript. Виртуальный «диалог» с пользователем — от изменения части содержимого сайта в ответ на действия до современных игр в браузере — реализуется с помощью скриптов JavaScript. Этот язык программирования работает в браузере и позволяет взаимодействовать с веб-страницей в режиме реального времени, оживляя её и предоставляя пользователю обратную связь на все действия.

У JavaScript очень интересная история. Он — реализация стандарта ECMAScript, может работать не только в браузере. Но в статье мы рассмотрим только взаимодействие с браузером.

Создаём самый простой скрипт

В первом задании, которое традиционно выполняет студент при изучении языка программирования, нужно вывести на экран фразу «Hello, world». Это позволяет отработать самый важный аспект — вывод информации пользователю, а также познакомиться с базовой структурой программы. Поступим так же.

Есть множество способов что-то вывести на экран в браузере, но мы выберем самый простой. Откроем «Инструменты разработчика» (Developer Tools) в браузере Chrome. Сделать это можно через сочетание клавиш Ctrl + Shift + I или F12 (Cmd + Opt + I на macOS) или через меню браузера. В Google Chrome нужно нажать на три точки, в других браузерах эта настройка может выглядеть иначе. Далее выбираем пункт «Дополнительные инструменты» и «Инструменты разработчика».

У вас должно появиться примерно такое окно, как ниже. Какой именно сайт выбрать для работы, не важно, можете открыть и GeekBrains.

Нас интересует вкладка Console. В ней могут быть ошибки и предупреждения (красные или жёлтые надписи) — не обращайте на них внимания, они нам не помешают. Выполним задание — выведем «Hello, world» на экран. Для этого нам понадобится команда alert(). Она выводит текст, который передан в круглых скобках.

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

Мы выполнили первое задание — вывели простой текст на экран.

Учимся писать чуть более сложные скрипты

На экране перед нами статичный текст, что не очень интересно. Хотелось бы больше взаимодействия с пользователем. Что, если мы будем спрашивать имя зашедшего на сайт и здороваться с ним?

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

Для создания переменной в JavaScript нужно применить ключевое слово let. Есть и другие, но не будем так глубоко погружаться в детали.

Требования к именованию переменных:

Создадим простую переменную, поместив в неё имя. Например, Иван.

Обратите внимание: мы объединили слово «привет» и переменную. Здесь имеет значение каждый символ: сначала alert, потом открывающая круглая скобка, которая говорит, что дальнейшие инструкции нужно вывести на экран. Затем кавычки, в которых заключён приветственный текст. Далее знак +, который подсказывает программе, что текст справа от знака нужно объединить с тем, что слева. И завершает это закрывающая круглая скобка.

Мы вывели имя из переменной на экран, но ведь было нужно показать имя, которое сообщит пользователь. Исправим это. Нам понадобится команда prompt(). Она задаст пользователю вопрос — запишем его в круглых скобках. Сохраним в переменную результат выполнения команды prompt().

Мы спрашиваем у пользователя имя, а когда он отвечает, здороваемся с ним. Ничего сложного.

Сохраняем наш первый скрипт

Редактировать и сохранять файлы со скриптами можно с помощью любого текстового редактора. Cамый простой и примитивный — «Блокнот», который поставляется вместе с Microsoft Windows. Есть и специальные редакторы кода, например, Visual Studio Code. В блоге даже выходила специальная подборка редакторов кода JavaScript — выбирайте и дерзайте 🙂

А если хотите извлечь из JavaScript максимум — приглашаем на факультет Fullstack JavaScript-разработки GeekBrains!

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

Рассмотрим, из чего состоят веб-странички. HTML (HyperText Markup Language) отвечает за придание странице структуры (показывает, где меню сайта, а где заголовок, логотип или статья) и контента (различные тесты, списки, изображения и т. д.). CSS (Cascading Style Sheets) отвечает за визуальную составляющую страницы: определяет, какого цвета и размера должен быть тот или иной блок, как его оформить и вывести пользователю.

Структура и оформление есть, но где же взаимодействие? Здесь на сцену выходит JavaScript. Виртуальный «диалог» с пользователем — от изменения части содержимого сайта в ответ на действия до современных игр в браузере — реализуется с помощью скриптов JavaScript. Этот язык программирования работает в браузере и позволяет взаимодействовать с веб-страницей в режиме реального времени, оживляя её и предоставляя пользователю обратную связь на все действия.

У JavaScript очень интересная история. Он — реализация стандарта ECMAScript, может работать не только в браузере. Но в статье мы рассмотрим только взаимодействие с браузером.

Создаём самый простой скрипт

В первом задании, которое традиционно выполняет студент при изучении языка программирования, нужно вывести на экран фразу «Hello, world». Это позволяет отработать самый важный аспект — вывод информации пользователю, а также познакомиться с базовой структурой программы. Поступим так же.

Есть множество способов что-то вывести на экран в браузере, но мы выберем самый простой. Откроем «Инструменты разработчика» (Developer Tools) в браузере Chrome. Сделать это можно через сочетание клавиш Ctrl + Shift + I или F12 (Cmd + Opt + I на macOS) или через меню браузера. В Google Chrome нужно нажать на три точки, в других браузерах эта настройка может выглядеть иначе. Далее выбираем пункт «Дополнительные инструменты» и «Инструменты разработчика».

У вас должно появиться примерно такое окно, как ниже. Какой именно сайт выбрать для работы, не важно, можете открыть и GeekBrains.

Нас интересует вкладка Console. В ней могут быть ошибки и предупреждения (красные или жёлтые надписи) — не обращайте на них внимания, они нам не помешают. Выполним задание — выведем «Hello, world» на экран. Для этого нам понадобится команда alert(). Она выводит текст, который передан в круглых скобках.

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

Мы выполнили первое задание — вывели простой текст на экран.

Учимся писать чуть более сложные скрипты

На экране перед нами статичный текст, что не очень интересно. Хотелось бы больше взаимодействия с пользователем. Что, если мы будем спрашивать имя зашедшего на сайт и здороваться с ним?

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

Для создания переменной в JavaScript нужно применить ключевое слово let. Есть и другие, но не будем так глубоко погружаться в детали.

Требования к именованию переменных:

Создадим простую переменную, поместив в неё имя. Например, Иван.

Обратите внимание: мы объединили слово «привет» и переменную. Здесь имеет значение каждый символ: сначала alert, потом открывающая круглая скобка, которая говорит, что дальнейшие инструкции нужно вывести на экран. Затем кавычки, в которых заключён приветственный текст. Далее знак +, который подсказывает программе, что текст справа от знака нужно объединить с тем, что слева. И завершает это закрывающая круглая скобка.

Мы вывели имя из переменной на экран, но ведь было нужно показать имя, которое сообщит пользователь. Исправим это. Нам понадобится команда prompt(). Она задаст пользователю вопрос — запишем его в круглых скобках. Сохраним в переменную результат выполнения команды prompt().

Мы спрашиваем у пользователя имя, а когда он отвечает, здороваемся с ним. Ничего сложного.

Сохраняем наш первый скрипт

Мы написали программу (скрипт) в консоли браузера. Это было быстро и просто, но не очень практично — такой программой с пользователями не поделишься. Чтобы сделать это, сохраним программу в файл с расширением *.html. Имя можем дать произвольное. Так как HTML подразумевает определённую структуру контента, нужно её отчасти соблюсти, чтобы всё работало. Понадобятся теги и

Источник