Скрипты

Пока что вам рано изучать сценарии JavaScript, эта тема предназначена для учеников, которые уже хорошо освоили HTML и CSS. Однако немного заглянуть в скрипты мы можем, чтобы у вас было по крайней мере представление о том, как всё работает на веб странице. Тегов, относящихся к скриптам, всего четыре: <script>,<noscript>,<template>,<slot>

<script>
— (с англ. script — сценарий) это тег, предназначенный для включения в вашу веб страницу JavaScript кода. Подобно файлам CSS, подключаемым через <link>, вы можете подключать файлы расширения .js при помощи этого тега, указав их URL в атрибуте src:

                

                <script src="js/main.js"></script>

Указанный файл будет подключен на веб страницу и выполнен. Другой способ включения JS-кода — это описание его непосредственно внутри тега <script>, наподобие того, как мы описывали правила CSS внутри тега <style>. В таком случае, разумеется, src указывать уже не нужно:

                

                <script>
    alert("Здравствуйте, ученики!")
</script>

Если вы скопируете этот код к себе в html документ и откроете страницу в браузере, вы увидите сообщение.

Когда браузер считывает HTML разметку и интерпретирует её, он тут же отображает нам результат. Также и с тегом <script>. Когда указанный файл или код загружены, они тут же начинают выполняться. Что касается различных правил подключения и выполнения скриптов, об этом вы узнаете в последующих уроках.

<noscript>
— (с англ. no script — отсутствие сценария) определяет контент, который будет показан в случае, если в браузере пользователя в настройках отключен JavaScript, либо его поддержка вообще отсутствует:

                

                <noscript>
 <p>Извините, наш сайт не сможет полноценно функционировать в вашем браузере. Тем не менее..</p>
</noscript>
<p>Добро пожаловать!</p>

Разумеется, во всех современных браузерах вы увидите только «Добро пожаловать!». В настоящее время браузеров без поддержки или с отключенным JS настолько мало, что вы можете не учитывать их вообще в своей работе. Тем не менее, этот тег существует, и когда-то он был весьма полезен разработчикам, т.к. JavaScript работал не везде.

<template>
— (с англ. template — шаблон) это тег, содержащий шаблон контента HTML, который не отображается во время загрузки страницы, но может быть добавлен на страницу в дальнейшем при помощи JavaScript. Например, у нас есть HTML-разметка для отображения в чате нового полученного сообщения. До тех пор, пока у нас нет новых сообщений, она нам не нужна. Но когда сообщение приходит, нам необходимо добавить его на страницу, и проще всего это будет сделать при помощи <template>, в котором уже будет заранее свёрстан нужный нам шаблон. Нам останется только подставить в него имя отправителя, время, текст сообщения и пр.:

                

                <template id="message-template">
    <div class="message">
        Отправитель: <p class="message__sender-name"></p>
        Дата получения: <p class="message__date"></p>
        Сообщение: <p class="message__text"></p>
    </div>
</template>

Обратите внимание на то, что мы указали идентификатор id для шаблона. Так нам будет проще при помощи JavaScript выбрать этот шаблон и скопировать его, вставить содержимое и добавить конечный результат на страницу. А до тех пор весь этот код будет скрыт от пользователя. В панели разработчика в браузере вы увидите следующее:

Здесь вам незнакома только одна сущность — это #document-fragment. Однако он немного похож на #document, который мы видели внутри <iframe>. Они родственники, а точнее #document-fragment это младший брат #document. Он не является полноценной веб страницей, однако является её подобием.

Наиболее частое применение в наши дни <template> нашёл в одностраничных веб приложениях (SPA) — сложных и не очень сайтах, которые осуществляют навигацию между страницами без перезагрузки вкладки браузера (школа BabyFrontent является как раз примером SPA). Это то, что стало результатом развития классических сайтов, к которым мы давно привыкли. Классические сайты ещё называют мультистраничными веб приложениями (MPA). Они при открытии новой страницы перезагружают вкладку браузера.

<slot>
— (с англ. slot — отверстие, место для чего-либо) этот тег необходим для схожих целей, для переиспользования компонентов и существующего кода. Если коротко описать его назначение — он определяет место, куда будут вставлены полученные данные:

                

                <template id="menu-template">
  <div class="menu">
    <slot name="title"></slot>
    <ul>
        <slot name="item"></slot>
    </ul>
  </div>
</template>

Так мы в шаблоне показываем, что будем на место <slot> вставлять какие-то данные. И если в примере с <template> подразумевается, как правило, текстовое содержимое, то теперь эти данные вероятно будут сложнее, например это будет полноценная HTML-разметка. Чтобы не создавать очень сложную структуру <template>, мы можем какие-то его части обозначить при помощи <slot> с различными атрибутами name. Данный тег также получил большое распространение в SPA.
Пока что этих знаний вам будет достаточно. Вы ещё встретитесь с тегом <slot>, когда приступите к изучению frontend-фреймворков, таких как Vue, Angular, React, Svelte, Solid, Alpine.

JavaScript это не просто язык программирования. Это уже давно нечто большее, это целый мир, ежедневно развивающийся, ежедневно открывающий новые возможности для разработчиков. JavaScript сегодня везде — на нём пишется клиентская (браузерная) часть почти всех веб сайтов, на нём пишется серверная логика, на нём пишутся мобильные, десктопные приложения и даже игры на различные платформы (игровой движок Unity3D поддерживает JavaScript). Многие frontend разработчики говорят, что программирование это самая интересная и любимая часть их работы, и я бы присоединился к этому мнению. Всё самое увлекательное впереди, и всё это ждёт вас.