Стать программистом. Основы JavaScript для абсолютных новичков!

Всем доброго времени суток, друзья!
Долго не мог решиться, а потом подумал почему бы и нет. В конце концов найдутся те, кому и это будет интересно.

Итак, суть – если Вам когда-либо хотелось узнать, как именно создаются интерактивные web-страницы и Вы хотели в этом разобраться, при этом вы является не просто новичком, а абсолютным новичком в этом деле, тогда, возможно вы найдете эту информацию полезной.
На всякий случай – интерактивная WEB-страница, это та страница, на которой помимо стандартного текста присутствуют элементы (кнопки, картинки, меню), которые изменяются в зависимости от действий пользователя, т.е. человека который зашел на Вашу WEB-страницу.

Что бы хотелось мне? Мне бы очень хотелось создать ряд обучающих статей в доступном формате. Так, чтобы, как можно больше людей сразу вникали, о чем идет речь. Для этого мне кончено же понадобиться Ваша помощь в виде обратной связи (комментариев, пожеланий, предложений).
Данная статья будет первой из цикла ознакомления с языком программирования - JavaScript (JS). И знакомиться с ним мы будем в разрезе фундаментального вопроса – Что собственно Вам требуется знать для создания собственных интерактивных web-страниц?

Я не стану описывать историю создания JS. На мой взгляд об этом языке программирования достаточно упомянуть пару вещей:

Ни один инженер по созданию программного обеспечения для WEB попросту не может игнорировать JavaScript. Без него Ваша Web-страница будет обычным статическим текстом на экране.
По разным статистическим данным JavaScript всегда находится в десятке самых популярных языков программирования.

Так же хотел упомянуть серию статей от голосовчанина @qqc, где очень доступно представлен язык разметки гипертекста HTML (1-й урок из этой серии https://golos.io/ru--obrazovanie/@qqc/znakomstvo-s-html)
Зачастую JavaScript и HTML идут рядышком, рука об руку, поэтому если Вы не знакомы с HTML я бы очень рекомендовал этот пробел восполнить. В наших уроках мы будем использовать хоть и бесхитростный, но все же HTML. И если Вы не будете знать основ, возможно Вам будет немного дискомфортно.

Не мудрствуя лукаво, начнем ;)

Урок 1. Окружение.

Окружение – это инструменты (программы), которые нам понадобятся для работы.
Вся прелесть JS заключается в том, что это сравнительно маленький язык программирования. Для работы с ним нам не нужны специализированные инструменты. Достаточно всего двух – любого браузера и любого текстового редактора. В свою очередь я бы рекомендовал браузер Chrome и редактор Sublime Text. Все бесплатно, все доступно.

Создадим новую папку, где собственно мы и будем работать и назовем ее js. Внутри папки создадим файл index.html. Вот собственно и все. Начало положено.

Файл index.html будет файлом для отображения того, что мы будем делать.
Для проверки, напишем в index.html строку – «привет мир!» и откроем этот файл в браузере.
Вот что должно получится.

Рядом с index.html создадим еще один файл – core.js. Вот именно в таких файлах с расширением «.js» и рождается магия JavaScript.

Для того, чтобы соединить эти два файла вместе. Нам придется внести в index.html некоторый код (HTML структуру). О ней, как я уже говорил можно узнать из статей @qqc.
Так теперь должен выглядеть Ваш index.html файл.

<!DOCTYPE html>
<html>
    <head>
         <title>Javascript Basics</title>
    </head>
    <body>
        привет мир!
    </body>
</html>

Обратите внимание, что на отображение файла в браузере эта структура почти не повлияла. Теперь подключим файл core.js.

Вообще существует несколько способов подключения JavaScript файлов к файлам html. Однако, на данном этапе, мы не станем рассматривать их все. Достаточно просто понимать, что для взаимодействия файл js и файл html должны знать друг о друге. И эту связь мы сейчас и добавим.
Для этого мы внесем в index.html на строку номер 8 следующую конструкцию

<script type="text/javascript" src="core.js"></script>

Будьте внимательны при переносе строк к себе в редактор. Зачастую именно маленькие опечатки становятся причинами того, что ничего не работает.

Вот мы и соединила два файла. И теперь каждый раз как index.html загружается в браузере, вместе с ним будет загружаться и файл core.js.
Ну и для того, чтобы убедится в том, что мы сделали все верно напишем небольшой код в core.js

alert('привет JavaScript!');

Сохраним оба файла (index.html и core.js) перезагрузим браузер и вуаля!

Ваш первый JavaScript код ожил!
Продолжение Следует...