Hello World

Java Script#

Java Script - это язык программирования, который даёт возможность реализовывать сложное поведение на веб-страницах и не только. На Java Script можно писать сайты, сервера, мобильные и десктоп приложения, а также приложения для дополненной и виртуальной реальности.

Синтаксис#

JavaScript, подобно множеству прочих языков программирования, обладает строгим синтаксисом. Синтаксис — это раздел грамматики, изучающий предложения и способы сочетания слов внутри предложения. Компьютеры не столь сообразительны, как люди: они не в состоянии «просто понять», что вы имели в виду. Машина сможет понять вас только в том случае, если вы будете общаться с ней строго в тех формах выражения, которые она от вас ожидает. Эта ожидаемая форма выражения и называется синтаксисом.

Первая программа на Java Script#

«Hello, world!» — (Привет мир!) программа, результатом работы которой является вывод на экран или иное устройство фразы «Hello, world!»

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

Во-первых, вам понадобится стационарный компьютер или ноутбук.

Во-вторых, на компьютере должна быть установлена операционная система: Windows MacOS или Linux.

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

Если у вас всё же не установлен Google Chrome, то можете скачать его здесь его при помощи любого другого браузера (Firefox, Safari, Edge или Internet Explorer), просто вбив в поисковой строке «скачать Chrome» и следуя дальнейшим инструкциям.

После скачивания и установки Google Chrome откройте его и в адресной строке введите:

about:blank

Нажмите ENTER. И браузер откроет новую, пустую, пустую, пустую страницу.

about blank

Вы точно, как и все мы, будете совершать ошибки в коде. Программные ошибки называют багами. Баг - означает ошибку в программе или в системе, из-за которой программа выдает неожиданное поведение и, как следствие, результат. Большинство программных ошибок возникают из-за ошибок, допущенных разработчиками программы в её исходном коде, либо в её дизайне.

В значении «неуловимой технической ошибки» слово «жучок» (англ. bug) употреблялось задолго до появления компьютеров персоналом телеграфных и телефонных компаний в отношении неполадок с электрооборудованием и радиотехникой. В 1878 году Томас Эдисон писал:

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

Отладка – это процесс поиска и исправления ошибок в скрипте.

Wikipedia

Консоль браузера#

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

Раз вы теперь начинающий программист‐разработчик, ею можете пользоваться и вы! Чтобы вызвать консоль, просто нажмите вместе клавиши CTRL, SHIFT (или же COMMAND и OPTION, если у вас Mac) и J. В будущем все подобные комбинации мы будем прописывать в виде CTRL+SHIFT+J (или COMMAND+OPTION+J для Mac соответственно).

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

console

Если же комбинация CTRL+SHIFT+J (или COMMAND+OPTION+J) по каким-то причинам не работает, вы можете войти в консоль, нажав на пустое место на странице правой кнопкой мыши, выбрать в контекстном меню пункт Inspect(Просмотреть код) и затем нажать Console в строке меню.

Inspect

Теперь, когда перед вами открыто окно консоли и вы растянули его удобным образом, кликните мышкой справа от угловой скобки (>). В строке появится мигающий курсор, означающий, что можно начинать вводить текст. Сейчас вы наберёте свои первые строчки кода. Введите следующий текст (вместе с кавычками):

'Hello world!'

Hello world!

Нажмите ENTER. Консоль вернёт вам в следующей строке ваш текст: "Привет, Мир!". Через консоль браузера мы напрямую общаемся JavaScript-движоком — это такая программа, или, другими словами, интерпретатор, выполняющий код, написанный на JavaScript.

Hello world!

Теперь нажмите клавишу UP_ARROW (стрелка вверх) и вы увидите свой текст "Привет, Мир!". Далее переместите курсор в начало строки и наберите вместо этого текста следующий:

var hello = 'Hello world!'

и нажмите ENTER. В консоли вы увидите ответ: undefined. Всё идёт по плану! Теперь наберите:

hello

и нажмите ENTER. Если вы всё сделали верно, то консоль вернёт в строке сообщение "Привет, Мир!". Здесь мы создали переменую и присвоили ей значение. Теперь вы можете гордиться тем, что собственноручно написали и выполнили первый код на языке JavaScript!

Hello world!

И конечно же это минимум того, что можно делать в консоле браузера. Дальше больше! Попробуем сложение:

2 + 2
//Ответ консоли: 4

Сложение и вычитание:

6 + 4 - 5
//Ответ консоли: 5

Умножение:

5 * 5
//Ответ консоли: 25

Деление:

25 / 5
//Ответ консоли: 5

И любые другие математические операции...

Рабочее окружение#

Код JavaScript выполняется JavaScript-движком браузера. Через консоль мы обращаемся к нему напрямую. Далее, для того чтобы не писать весь обучающий курс в браузере и прыгать по окнам с нашего сайта в консоль браузера, мы будем писать код в режиме Live Coding прямо на нашем сайте. Для этого попробуйте дополнить в следующем окне LIVE EDITOR слово Hello, словом World. В RESULT вы должны получить Hello World.

Live Editor

function learnJavaScript() {
  var hello = 'Hello'

  return hello
}

function learnJavaScript() {
  var hello = 'Hello'
  return hello
}

Result

Hello

А теперь попробуйте поиграть с математическими операциями:

Live Editor

function learnJavaScript() {
  var sum = 5 + 5

  return sum
}

function learnJavaScript() {
  var sum = 5 + 5
  return sum
}

Result

Done ✅#

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

Sumerian school

Вопросы#

Какой URL (адрес) необходимо ввести в адресную строку Chrome, чтобы открыть полностью пустую вкладку браузера?
Какое сочетание клавиш открывает консоль в Chrome?
Что такое баг?
Каким символом обозначается операция сложения?
Каким символом обозначается операция вычитания?
Каким символом обозначается операция умножения?
Каким символом обозначается операция деления?

Ссылки:#

Contributors ✨#

Thanks goes to these wonderful people (emoji key):

_{Dmitriy Vasilev}
📖