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


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

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

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

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

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

Так же хотел упомянуть серию статей от голосовчанина @qqc, где очень доступно представлен язык разметки гипертекста HTML (1-й урок из этой серии /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 файл.

Jatle>Javascript Basicsead> привет мир!

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

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

Будьте вoi.jpg



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

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

http://i.iore.js

http://i.jpg

Сохр/8cQNqpr.jpg
 ```alert('привет JavaScript!');```

Сохраним оml и core.js) перезагрузим браузер и вуаля!

http://i.imgur.com/iVExFXz.jpg

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

Comments 5


С самых основ! Спасибо, то что надо

31.01.2017 11:58
0

Только так! От простого к сложному, так сказать.

31.01.2017 12:00
0

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

31.01.2017 12:17
0

Я специально не выносил код в "пилотном" уроке. Для того, чтобы интерисующиеся самостоятельно делали набор кода. Это способствует большему погружению нежели возможность CTRL+C, CTRL+V
Однако, Вы правы. Обязательно добавлю код. Благодарю за комментарий.

31.01.2017 12:25
0

Привет!

Этот пост был выбран Академией Голоса и попал в список программы поддержки качественных образовательных постов.
Ссылка на твой пост будет опубликована в отчете Академии.

Спасибо за полезный контент (ノ◕ヮ◕)ノ*:・゚✧

31.01.2017 19:19
0

Всегда пожалуйста :)

31.01.2017 19:22
0

Спасибо! С Вашей помощь и @qqc я гораздо быстрее начну в этом разбираться!!!

31.01.2017 21:37
0

Незачто. Обязательно начнёте.

01.02.2017 14:22
0

Не первая моя попытка освоить JS.
Надеюсь, что последняя )
Автору Спасибо за толковое изложение темы и его труд!

21.02.2017 10:27
0

Пожалуйста, будут вопросы - пишите в комментариях.

21.02.2017 10:36
0