Что такое JavaScript: зачем он нужен и где его пишут при разработке сайтов

JavaScript разработчик [Webcademy]

JS используется в веб-браузере для оживления интерактивных элементов — элементов, с которыми может взаимодействовать посетитель сайта. JS делает сайт более динамичным. Сайт реагирует на действия пользователя. 

Вообще в веб-разработке есть три фундаментальных инструмента: 

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

CSS — таблицы каскадных стилей, для оформления страниц сайта. 

JavaScript – язык программирования сценариев на основе событий, для оживления контента страниц. 

JS в отличии от HTML и CSS является языком программирования и на нём пишутся скрипты — программы. Программы описывают последовательность действий — анимации, показа скрытых элементов, трансформаций и так далее. 

Все js программы пишутся и хранятся в специальных текстовых файлах, имеющих соответствующее расширение .js 

Для того что бы скрипт стал частью HTML-страницы его нужно подключить. Это делается непосредственно в HTML-коде. По стандартам веб-разработки подключение скрипта осуществляется в самом конце html-страницы, перед закрывающим тегом </body>

Есть как минимум два способа подключить скрипт: 

инлайновое подключение — мы как бы напрямую пишем скрипт в специальном теге в нижней части html-страницы, 

Подключение через файл — это как раз классический способ, при котором мы используем конструкцию из парного тега <script></script> и атрибута, указывающего путь до файла со скриптом.  

Пример простой программы на JS с инлайновой записью скрипта в разметке страницы 

Что такое JavaScript: зачем он нужен и где его пишут при разработке сайтов

https://github.com/yurkaronin/webcademy-Javascript-developer/blob/main/1.htm

Пример аналогичного скрипта, но подключение уже через файл. 

Что такое JavaScript: зачем он нужен и где его пишут при разработке сайтов

https://github.com/yurkaronin/webcademy-Javascript-developer/blob/main/2.htm

По стандарту веб-разработки следует стараться придерживаться модульного/компонентного подхода. Сложное принято делить на более простые составные части. Следуя этому стандарту, вы должны понимать, что подключение скрипта из файла более корректное и правильное. А другие варианты оставьте для особенных случаем, когда традиционный способ подключения будет избыточным. Например, если у вас есть большой код на JS и при этом на новой станице требуется лишь один мелкий фрагмент скрипта, то лучше подключить этот фрагмент инлайново, и не тащить на страницу большой файл. 

Вторым не мало важным нюансом является место на странице, в котором вы подключаете скрипты — практически в 100% случаем это будет самый низ страницы, перед закрывающим тегом </body>. Это правило не просто так придумано. Дело в особенностях отрисовки html-страниц браузером: 

Первым делом браузер скачивает структуру страницы — html разметку, а точнее основной файл с разрешением .html 

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

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

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

А если еще брать во внимание то, что отрисовка страницы останавливается всякий раз, когда браузер начинает загрузку недостающего фрагмента, сразу становится понятно, почему подключение скриптов рекомендуется делать в последнюю очередь — что бы не останавливать процесс рендеринга — отрисовки html-страницы в браузере. 

Юрий Ронин