Привет, мир!
В этой части учебника мы изучаем собственно JavaScript, сам язык.
Но нам нужна рабочая среда для запуска наших скриптов, и, поскольку это онлайн-книга, то браузер будет хорошим выбором. В этой главе мы сократим количество специфичных для браузера команд (например, alert ) до минимума, чтобы вы не тратили на них время, если планируете сосредоточиться на другой среде (например, Node.js). А на использовании JavaScript в браузере мы сосредоточимся в следующей части учебника.
Итак, сначала давайте посмотрим, как выполнить скрипт на странице. Для серверных сред (например, Node.js), вы можете выполнить скрипт с помощью команды типа «node my.js» . Для браузера всё немного иначе.
Тег «script»
Программы на JavaScript могут быть вставлены в любое место HTML-документа с помощью тега .
Перед скриптом.
. После скрипта.
Вы можете запустить пример, нажав на кнопку «Play» в правом верхнем углу блока с кодом выше.
Тег содержит JavaScript-код, который автоматически выполнится, когда браузер его обработает.
Современная разметка
Тег имеет несколько атрибутов, которые редко используются, но всё ещё могут встретиться в старом коде:
Старый стандарт HTML, HTML4, требовал наличия этого атрибута в теге . Обычно он имел значение type=»text/javascript» . На текущий момент этого больше не требуется. Более того, в современном стандарте HTML смысл этого атрибута полностью изменился. Теперь он может использоваться для JavaScript-модулей. Но это тема не для начального уровня, и о ней мы поговорим в другой части учебника.
Атрибут language : language=…>
Этот атрибут должен был задавать язык, на котором написан скрипт. Но так как JavaScript является языком по умолчанию, в этом атрибуте уже нет необходимости.
Обёртывание скрипта в HTML-комментарии.
В очень древних книгах и руководствах вы сможете найти комментарии внутри тега , например, такие:
Этот комментарий скрывал код JavaScript в старых браузерах, которые не знали, как обрабатывать тег . Поскольку все браузеры, выпущенные за последние 15 лет, не содержат данной проблемы, такие комментарии уже не нужны. Если они есть, то это признак, что перед нами очень древний код.
Внешние скрипты
Если у вас много JavaScript-кода, вы можете поместить его в отдельный файл.
Файл скрипта можно подключить к HTML с помощью атрибута src :
Здесь /path/to/script.js – это абсолютный путь от корневой папки до необходимого файла. Корневой папкой может быть корень диска или корень сайта, в зависимости от условий работы сайта. Также можно указать относительный путь от текущей страницы. Например, src=»https://learn.javascript.ru/script.js» или src=»https://learn.javascript.ru/script.js» будет означать, что файл «script.js» находится в текущей папке.
Можно указать и полный URL-адрес. Например:
Для подключения нескольких скриптов используйте несколько тегов:
JavaScript: Привет, Мир!
Изучение нового языка программирования традиционно начинается с ‘Hello, World!’. Это простая программа, которая выводит приветствие на экран и заодно знакомит с новым языком — его синтаксисом и структурой программы. Этой традиции уже больше сорока лет, поэтому и мы не будем ее нарушать — в первом же уроке напишем программу Hello, World! .
Эта программа будет выводить на экран текст:
Hello, World!
Чтобы вывести что-то на экран, нужно дать компьютеру специальную команду. В языке JavaScript такая команда — console.log() .
Задание
Наберите в редакторе код из задания символ в символ и нажмите «Проверить».
console.log('Hello, World!'); Внимание: если вы напишете heLLo, woRld! вместо Hello, World! , то это будет считаться другим текстом, потому что заглавные и строчные буквы — это разные символы. Размер буквы называют регистром, и говорят: регистр — важен! Это касается почти всего в коде, поэтому привыкайте всегда обращать внимание на регистр.
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Полезное
Запрос на подтверждение и ввод в JavaScript
Раз мы уже знаем, как что-то вывести в JavaScript, давайте взглянем на два способа ввода. Возможно, ни один из них широко не используется, но они могут быть просто использованы для знакомства с основами.
Prompt. Запрос
Первый из них называется prompt . Он показывает всплывающее окно с текстом, который мы передаем первым параметром, и полем ввода, которое пользователь может заполнить. Когда пользователь нажмет OK , функция prompt() вернет введенное значение. Далее в этом примере мы используем метод document.write, чтобы заменить содержимое html-страницы нашим текстом.
examples/js/prompt.html
Текстовое поле будет предварительно заполнено значением второго параметра. Это может быть очень полезно, если бы мы хотели, чтобы пользователь отредактировал какое-нибудь значение. Можно заполнить поле старым значением.
examples/js/edit.html
В другом случае, если пользователь нажмет cancel или клавишу ESC , функция prompt() вернет null .
Confirm. Подтверждение
Это всплывающее окно на самом деле не метод ввода. Оно позволяет разработчику задать вопрос и получить ответ — Да/Нет. Вызов функции confirm() приведет к появлению всплывающего окна с заданным текстом и двумя кнопками. Если пользователь нажмет OK , функция confirm() вернет true , если нажмет cancel или клавишу ESC , тогда функция вернет false .
Конечно, для понимания смысла, вы должны знать, что обозначают true и false , и что делает эта конструкция if — else . Если у вас уже есть какой-то опыт программирования, тогда, вероятно, вы уже поняли код, но даже если и нет, то сможете разобраться.
Этот код может быть описан следующим предложением:
Если «подтверждение» вернуло true, тогда напечатать «Hello World», иначе напечатать «OK, I won’t print it.»
Или лучше вот так:
Если пользователь нажал «ОК», когда мы спросили «Shall I print Hello World?», тогда напечатать «Hello World», иначе напечатать «OK, I won’t print it.»
examples/js/confirm.html
if (confirm("Shall I print Hello World?")) < document.write("Hello World"); >else
Написание простой программы JavaScript
«Hello, World!» – классический пример простой программы. Эта простейшая программа помогает новичкам понять, как работает язык программирования, а опытным разработчикам – убедиться, что окружение функционирует должным образом.
Данный мануал научит создавать эту программу в JavaScript. Кроме того, вы узнаете, как немного усложнить программу: научить ее запрашивать имя пользователя и затем применять его в приветствии.
Требования
Выполнить мануал можно с помощью консоли разработчика JavaScript в браузере. Прежде рекомендуем ознакомиться с руководством Использование консоли разработчика JavaScript.
1: Написание программы «Hello, World!»
Для начала откройте в браузере консоль JavaScript.
Написать программу «Hello, World!» можно двумя способами: с помощью метода alert() и с помощью метода console.log().
Метод alert()
Метод alert() выведет окно предупреждения с заданным текстом поверх текущей страницы. В данном случае это будет фраза «Hello, World!». Чтобы закрыть предупреждение, нужно будет нажать Ок.
В качестве параметра методу нужно передать строку. Этой строкой будет последовательность символов Hello, World!.
Поместите строку в круглые скобки метода alert() и поставьте в конце точку с запятой:
Нажмите Enter, и на экране появится всплывающее окно с фразой «Hello, World!».
Консоль также выведет результат вычисления выражения: вы увидите undefined, если выражение не возвращает явный результат.
Всплывающие предупреждения позволяют проверить работу, но их нужно постоянно закрывать. Давайте попробуем создать ту же самую программу с помощью метода console.log().
Метод console.log()
Метод console.log() имитирует работу с языком программирования в терминале.
Как и в случае с методом alert(), строка «Hello, World!» будет передана методу console.log() в качестве параметра.
Нажав ENTER, вы увидите в консоли строку:
Теперь попробуйте добавить в программу немного интерактива.
2: Запрос пользовательского ввода
На данный момент программа «Hello, World!» выдает один и тот же результат. Ее можно немного усложнить. К примеру, она может запрашивать имя пользователя, а затем использовать полученные данные в приветствии.
Для этого нужно добавить к любому из перечисленных выше методов одну строку. Для запроса входных данных используется метод prompt(). Передайте ему параметр “What is your name?”, чтобы предложить пользователю ввести свое имя. Не забудьте про точку с запятой в конце.
let name = prompt(«What is your name?»);
Нажмите Enter, и на экране появится окно запроса.
Диалоговое окно содержит текстовое поле для ввода. Введя значение в текстовое поле, пользователь должен нажать кнопку ОК, чтобы сохранить значение. Пользователь также может отменить запрос значения, нажав кнопку Cancel.
Метод prompt() нужно использовать только тогда, когда это имеет смысл в контексте программы, поскольку чрезмерное количество всплывающих окон может стать утомительным для пользователей.
Введите свое имя в поле. Например, 8host.
Программа сохранит это значение в переменной name и сможет использовать его в дальнейшем.
Вывод приветствия с помощью alert()
Метод alert() выведет всплывающее окно с приветствием поверх текущей страницы браузера.
Теперь нужно использовать конкатенацию строк и объединить строку “Hello, ” с именем пользователя.
Это делается так:
Эта строка объединяет две строки («Hello, » и «!») и вставляет между ними значение переменной name. Используйте вышеприведенную строку кода в качестве параметра метода alert(). Введите в консоль:
На экране появится всплывающее окно с фразой «Hello, 8host!».
Вывод приветствия с помощью console.log()
Метод console.log() выведет приветствие в консоль. Этот метод работает аналогично методу print() в Python.
Используйте конкатенацию, как было показано ранее:
Поместите этот код в круглые скобки метода console.log() и введите полученную строку в консоль:
Нажмите Enter, и в консоли появится вывод:
Теперь вы умеете добавлять в программу функцию запроса пользовательского ввода, который будет использован в дальнейшем.
Заключение
Вы знаете, как написать классическую программу «Hello, World!», запросить пользовательские данные и отобразить их в выводе. Теперь вы можете продолжить работу над своей программой и усложнить ее. Например, запросите любимый цвет пользователя и попросите программу сказать, что ее любимый цвет красный. Можно даже попробовать использовать эту технику для создания программы Mad Lib.