Всем доброго времени суток, друзья!
Долго не мог решиться, а потом подумал почему бы и нет. В конце концов найдутся те, кому и это будет интересно.
Итак, суть – если Вам когда-либо хотелось узнать, как именно создаются интерактивные web-страницы и Вы хотели в этом разобраться, при этом вы является не просто новичком, а абсолютным новичком в этом деле, тогда, возможно вы найдете эту информацию полезной.
На всякий случай – интерактивная WEB-страница, это та страница, на которой помимо стандартного текста присутствуют элементы (кнопки, картинки, меню), которые изменяются в зависимости от действий пользователя, т.е. человека который зашел на Вашу WEB-страницу.
Что бы хотелось мне? Мне бы очень хотелось создать ряд обучающих статей в доступном формате. Так, чтобы, как можно больше людей сразу вникали, о чем идет речь. Для этого мне кончено же понадобиться Ваша помощь в виде обратной связи (комментариев, пожеланий, предложений).
Данная статья будет первой из цикла ознакомления с языком программирования - JavaScript (JS). И знакомиться с ним мы будем в разрезе фундаментального вопроса – Что собственно Вам требуется знать для создания собственных интерактивных web-страниц?
Я не стану описывать историю создания JS. На мой взгляд об этом языке программирования достаточно упомянуть пару вещей:
- Ни один инженер по созданию программного обеспечения для WEB попросту не может игнорировать JavaScript. Без него Ваша Web-страница будет обычным статическим текстом на экране.
- По разным статистическим данным JavaScript всегда находится в десятке самых популярных языков программирования.
Так же хотел упомянуть серию статей от голосовчанина @qqc, где очень доступно представлен язык разметки гипертекста HTML (1-й урок из этой серии https://golos.id/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 код ожил!
Продолжение Следует...
Не первая моя попытка освоить JS.
Надеюсь, что последняя )
Автору Спасибо за толковое изложение темы и его труд!
Пожалуйста, будут вопросы - пишите в комментариях.
Спасибо! С Вашей помощь и @qqc я гораздо быстрее начну в этом разбираться!!!
Незачто. Обязательно начнёте.
Привет!
Этот пост был выбран Академией Голоса и попал в список программы поддержки качественных образовательных постов.
Ссылка на твой пост будет опубликована в отчете Академии.
Спасибо за полезный контент (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
Всегда пожалуйста :)
Было бы неплохо если бы код в уроках можно было выделить и скопировать. Очень полезная статья, продолжайте.
Я специально не выносил код в "пилотном" уроке. Для того, чтобы интерисующиеся самостоятельно делали набор кода. Это способствует большему погружению нежели возможность CTRL+C, CTRL+V
Однако, Вы правы. Обязательно добавлю код. Благодарю за комментарий.
С самых основ! Спасибо, то что надо
Только так! От простого к сложному, так сказать.