Привет, мир!
В этой части учебника мы изучаем собственно 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!» – классический пример простой программы. Эта простейшая программа помогает новичкам понять, как работает язык программирования, а опытным разработчикам – убедиться, что окружение функционирует должным образом.
Данный мануал научит создавать эту программу в 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.
JavaScript: Привет, Мир!
Изучение нового языка программирования традиционно начинается с ‘Hello, World!’. Это простая программа, которая выводит приветствие на экран и заодно знакомит с новым языком — его синтаксисом и структурой программы. Этой традиции уже больше сорока лет, поэтому и мы не будем ее нарушать — в первом же уроке напишем программу Hello, World! .
Эта программа будет выводить на экран текст:
Hello, World!
Чтобы вывести что-то на экран, нужно дать компьютеру специальную команду. В языке JavaScript такая команда — console.log() .
Задание
Наберите в редакторе код из задания символ в символ и нажмите «Проверить».
console.log('Hello, World!'); Внимание: если вы напишете heLLo, woRld! вместо Hello, World! , то это будет считаться другим текстом, потому что заглавные и строчные буквы — это разные символы. Размер буквы называют регистром, и говорят: регистр — важен! Это касается почти всего в коде, поэтому привыкайте всегда обращать внимание на регистр.
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Полезное
Пример «Hello world»¶
Ниже приведен пример самого простого приложения, которое можно создать с помощью Express. Оно состоит из одного файла, в отличие от приложений, генерируемых с помощью генератора приложений Express, который обеспечивает создание основы для полноценного приложения с многочисленными файлами на JavaScript, шаблонами Jade и вложенными каталогами различного предназначения.
Вначале создайте каталог с именем myapp , перейдите в него и запустите команду npm init . Затем установите express как зависимость, следуя указаниям, приведенным в руководстве по установке.
В каталоге myapp создайте файл с именем app.js и добавьте следующий код:
1 2 3 4 5 6 7 8 9 10
var express = require('express'); var app = express(); app.get('/', function (req, res) res.send('Hello World!'); >); app.listen(3000, function () console.log('Example app listening on port 3000!'); >); Приложение запускает сервер и слушает соединения на порте 3000. Приложение выдает ответ «Hello World!» на запросы, адресованные корневому URL ( / ) или маршруту. Для всех остальных путей ответом будет 404 Not Found.
req (запрос) и res (ответ) являются теми же объектами, которые предоставляет Node, поэтому можно вызвать req.pipe() , req.on(‘data’, callback) и выполнить любые другие действия, не требующие участия Express.
Запустите приложение с помощью следующей команды:
$ node app.js