Привет, мир!
В этой части учебника мы изучаем собственно 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-адрес. Например:
Для подключения нескольких скриптов используйте несколько тегов:
Hello World
Раньше для создания digital стартапа была нужна команда из:
- iOS разработчика ,
- Android разработчика ,
- Backend разработчика ,
- Разработчика для web’a
и - Teamlead’а , который везде по-верхам и в чем-то одном на отлично — это человек!!
Сегодня благодаря JavaScript, можно заменить разработчиков одним JavaScript разработчиком используя стек технологий который мы преподаем в нашей школе.
JavaScript — это язык программирования, который даёт возможность реализовывать сложное поведение на веб-страницах и не только. На JavaScript можно писать сайты , сервера, мобильные и десктоп приложения, а также приложения для дополненной и виртуальной реальности.
JavaScript — первый из самых популярных языков программирования среди европейских разработчиков. Такие данные получили авторы исследования из компании O’Reilly в результате опроса свыше 1300 программистов из 27 стран.
Видео
Синтаксис
JavaScript, подобно множеству прочих языков программирования, обладает строгим синтаксисом . Синтаксис — это раздел грамматики, изучающий предложения и способы сочетания слов внутри предложения. Компьютеры ️ не столь сообразительны, как люди : они не в состоянии «просто понять» , что вы имели в виду. Машина сможет понять вас только в том случае, если вы будете общаться с ней строго в тех формах выражения, которые она от вас ожидает. Эта ожидаемая форма выражения и называется синтаксисом .
Рабочее окружение
1️⃣ Во-первых, вам понадобится стационарный компьютер ️ или ноутбук.
2️⃣ Во-вторых, на компьютере ️ должна быть установлена операционная система: Windows MacOS или Linux.
3️⃣ В-третьих, на компьютере ️ должен быть установлен браузер, в наших уроках мы будем использовать Google Chrome, но можно использовать и другие. Chrome, кто не в курсе это браузер, то есть программа для просмотра веб-страниц.
Если у вас всё же не установлен Google Chrome, то можете скачать его здесь или при помощи любого другого браузера (Firefox, Safari, Edge или Internet Explorer), просто вбив в поисковой строке «скачать Chrome» и следуя дальнейшим инструкциям.
После скачивания и установки Google Chrome откройте его и в адресной строке введите :
about:blank Нажмите ENTER. И браузер откроет новую пустую страницу.
Консоль браузера
Пришло время познакомиться с одним из основных инструментов разработчика — это консоль браузера.
В основном наш курс можно пройти прямо на нашем сайте, но иногда нам нужно будет использовать консоль браузера, поэтому мы сейчас с ней и познакомимся.
Открыть консоль
Раз вы теперь начинающий программист‐разработчик ️ , ею можете пользоваться и вы! Чтобы вызвать консоль, просто нажмите �� вместе клавиши�� CTRL, SHIFT (или же COMMAND и OPTION, если у вас Mac) и J .
После нажатия комбинации клавиш�� откроется новая строка меню, а в левом верхнем углу страницы вы увидите угловую скобку. Кстати, если переместить курсор к краю области, где он превратится в двойную стрелку, то, нажав и удерживая левую кнопку, можно растянуть ↔️ окно�� консоли. Обязательно сделайте это, чтобы у вас было больше места для введения кода.
Если же комбинация CTRL+SHIFT+J (или COMMAND+OPTION+J) по каким-то причинам не работает, вы можете войти в консоль, нажав на пустое место на странице правой кнопкой мыши , выбрать в контекстном меню пункт Inspect(Просмотреть код) и затем нажать Console в строке меню.
Первая программа Hello world
«Hello, world!» — (Привет мир!) программа, результатом работы которой является вывод на экран или иное устройство фразы «Hello, world!»
Обычно это первый пример программы в учебниках по программированию, и для многих студентов такая программа является первым опытом при изучении нового языка .
Теперь, когда перед вами открыто окно�� консоли и вы растянули его удобным образом, кликните мышкой справа от угловой скобки > .
В строке появится мигающий курсор, означающий, что можно начинать вводить текст . Сейчас вы наберёте свои первые строчки кода. Введите следующий текст (вместе с кавычками):
"Hello world!" 
Нажмите ENTER. Консоль вернёт вам в следующей строке ваш текст : «Привет, Мир!» или «Hello world!» на английском. Через консоль браузера мы напрямую общаемся c JavaScript-движоком — это такая программа, или, другими словами, интерпретатор, выполняющий код, написанный на JavaScript.
Теперь вы можете гордиться тем, что собственноручно написали и выполнили первый код на языке JavaScript!
Далее нажмите клавишу�� UP_ARROW ⬆️ (стрелка вверх) и вы увидите свой текст «Привет, Мир!» или «Hello world!» на английском. Далее переместите курсор в начало строки и наберите вместо этого текста следующий:
var hello = 'Hello world!' и нажмите ENTER. В консоли вы увидите ответ: undefined . Всё идёт по плану! Теперь наберите:
hello и нажмите ENTER. Если вы всё сделали верно, то консоль вернёт в строке сообщение «Привет, Мир!». Здесь мы создали переменую и присвоили ей значение.
И конечно же это минимум того, что можно делать в консоле браузера. Дальше больше! Попробуем сложение: ➕
2 + 2 //Ответ консоли: 4 Сложение и вычитание: ➕ ➖
JavaScript: Привет, Мир!
Изучение нового языка программирования традиционно начинается с ‘Hello, World!’. Это простая программа, которая выводит приветствие на экран и заодно знакомит с новым языком — его синтаксисом и структурой программы. Этой традиции уже больше сорока лет, поэтому и мы не будем ее нарушать — в первом же уроке напишем программу Hello, World! .
Эта программа будет выводить на экран текст:
Hello, World!
Чтобы вывести что-то на экран, нужно дать компьютеру специальную команду. В языке JavaScript такая команда — console.log() .
Задание
Наберите в редакторе код из задания символ в символ и нажмите «Проверить».
console.log('Hello, World!'); Внимание: если вы напишете heLLo, woRld! вместо Hello, World! , то это будет считаться другим текстом, потому что заглавные и строчные буквы — это разные символы. Размер буквы называют регистром, и говорят: регистр — важен! Это касается почти всего в коде, поэтому привыкайте всегда обращать внимание на регистр.
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.