Как правильно подключить js- и php-скрипты к вашему сайту?

Тег: nodeName и tagName

Получив DOM-узел, мы можем узнать имя его тега из свойств и :

Например:

Есть ли какая-то разница между и ?

Да, она отражена в названиях свойств, но не очевидна.

• Свойство есть только у элементов .
• Свойство определено для любых узлов :
  • для элементов оно равно .
  • для остальных типов узлов (текст, комментарий и т.д.) оно содержит строку с типом узла.

Другими словами, свойство есть только у узлов-элементов (поскольку они происходят от класса ), а может что-то сказать о других типах узлов.

Например, сравним и на примере объекта и узла-комментария:

Если мы имеем дело только с элементами, то можно использовать или , нет разницы.

Имена тегов (кроме XHTML) всегда пишутся в верхнем регистре

В браузере существуют два режима обработки документа: HTML и XML. HTML-режим обычно используется для веб-страниц. XML-режим включается, если браузер получает XML-документ с заголовком: .

В HTML-режиме значения всегда записаны в верхнем регистре. Будет выведено вне зависимости от того, как записан тег в HTML или .

В XML-режиме регистр сохраняется «как есть». В настоящее время XML-режим применяется редко.

Оптимизация JavaScript на странице

Бюджет

При добавлении скриптов на страницу нужно помнить, что у каждой страницы есть бюджет по времени и по объему скриптов. Для нормальной загрузки страницы на мобильных устройствах специалисты рекомендуют удерживать бюджет страницы в пределах 200 килобайт сжатых скриптов. Это разархивируется более чем в 1 мегабайт кода, который браузеру нужно разобрать и выполнить.

Порядок исполнения

Браузер отображает страницу сверху вниз, создавая DOM-элементы по мере продвижения по HTML-документу. Если мы помещаем теги <script> в конце, то файлы JavaScript будут открыты одними из последних и не слишком повлияют на критичный путь рендеринга. И наоборот, если разместить тег <script> в начале страницы, то по стандарту браузер обязан сначала выполнить этот скрипт, а уже потом показать оставшуюся часть страницы. Это одна из главных причин подтормаживаний при загрузке страниц.

Поэтому есть смысл переносить в конец страницы ссылки на некритичные скрипты, такие как счетчики, скрипты аналитики и реклама.

Асинхронная загрузка

Более грамотный способ решить проблему с загрузкой «медленных» внешних скриптов — асинхронная загрузка с помощью атрибута async. Если с тегом <script> указан такой атрибут, то браузер не будет ждать загрузки и выполнения этого скрипта, прежде чем показать оставшуюся часть страницы.

<script src=«https://skillbox.ru/skill.js» async></script><script src=»https://www.google-analytics.com/analytics.js» async></script>

Кроме async, существует атрибут defer. Он тоже обеспечивает асинхронную загрузку, но при этом гарантирует, что скрипты будут выполняться в том порядке, в каком указаны на странице, а также ждет обработки всего HTML в браузере

Это важно, если скрипты зависят друг от друга и от контента HTML-страницы.

<script src=«https://skillbox.ru/skill.js» defer></script><script src=»https://www.google-analytics.com/analytics.js» defer></script>

Как проверить правильность подключения

Чтобы убедиться, что все работает как следует, напишите такой скрипт в html-коде между тегами «head»:

<script type="text/javascript">
$(document).ready(function(){
$('body').append('<br/>Работает');
});
</script>

Если добавление выполнено правильно, то в окне браузера появится слово «Работает».

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

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

Задача

Необходимо на страницу index.html подключить HTML-разметку из файла text.html, но так чтобы файл text.html содержал только HTML-элементы <h1> и <p>. То есть мы хотим подгрузить только уникальную информацию на страницу без «лишних» мета-данных.

Также мы хотим сделать эту загрузку в фоне, без перезагрузки страницы index.html. То есть пользователь не увидит в адресной строке браузера другого адреса. Перезагрузки страницы не будет.

Файл text.html имеет разметку:

<h1>Содержимое файла «text.html»</h1>
<p>Меня зовут ТЕКСТ АБЗАЦЕВИЧ. Я пришёл из файла «text.html». Я живу в HTML-элементе «p».</p>

Содержимое файла text.html

ВНИМАНИЕ! Запросы к серверу мы будем делать ТОЛЬКО через работающий локально веб-сервер. Ознакомьтесь с протоколом CORS и стандартом Fetch

Локальный запуск файла index.html в браузере не приведёт к работающему результату. Используйте бесплатный продукт «OpenServer» для своих тестов.

Атрибуты async и defer

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

<script src="common.js" async></script>

– атрибут , который так же, как и атрибут «говорит» браузеру, что его загрузку нужно выполнять асинхронно. Но в отличие от он указывает на то, что этот скрипт необходимо выполнить только после полной загрузки страницы.

<script src="path_to/script.js" defer></script>

Второе отличие от заключается в том, что будет сохранена очерёдность выполнения скриптов.

<script src="path_to/1.js" defer></script>
<script src="path_to/2.js" defer></script>

Т.е. скрипты вне зависимости от того, какой из них загрузиться быстрее всё равно будут выполнены браузером в порядке их подключения, т.е. сначала , а потом .

Если для одновременно указать атрибуты и , то будет использоваться только .

<script src="path_to/script.js" async defer></script>

Атрибуты и можно использовать только для скриптов, подключаемых на страницу с помощью атрибута .

Давайте попробуем

Сначала установим среду с сайта разработчиков и проверим в консоли, что всё прошло нормально.

Введём простую команду:

>node --version

Результат, который мы получили:

v8.11.3

Готово! Среда успешно установлена и готова к действиям. Теперь запустить скрипт можно прямо в консоли, предварительно запустив .

Рассмотрим пару простых примеров. По традиции выведем :

console.log('Hello, world!');

Hello world!

Вроде ничего неожиданного, кроме в конце. Дело в том, что в JavaSсript функция всегда возвращает какое-то значение. Если автор функции опустил , то считается, что она возвращает . Именно это значение и выводит нам Node.js.

Попробуем пример сложнее, например, цикл выводов. Как консоль отреагирует на него?

Цикл выводов.

Node.js отлично справляется и с более сложными конструкциями, даже самостоятельно выстраивая лесенку. В случае обнаружения ошибки, он тут же сообщит об этом, остановив скрипт.

Например, случайно пропустим букву в команде:

Упс, ошибка.

Ну вот, всё необходимое для написания простых и компактных приложений есть. Но писать большое приложение на десятки строк кода в консоли будет не слишком-то удобно. Да и такой подход не сработает, если приложение разбито на несколько скриптов, лежащих в разных файлах.

Что такое JavaScript

JavaScript (или сокращённо JS) – это язык программирования, который изначально был придуман для браузера, чтобы придать веб-страницам интерактивность и динамичность.

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

Потребность в создании языка программирования для браузера появилась ещё в 90-е годы. В это время на веб-страницах хотелось делать уже больше, чем просто выводить статичный контент.

Данный язык изначально был создан Бренданом Айком в 1995 году для браузера Netscape и назывался он Mocha. Но после ряда переименований он обрёл окончательное имя – JavaScript. По началу он имел очень маленькую функциональность и в основном использовался для добавления на страницу интерактивности. Но со временем язык стал развиваться и позволять делать всё больше и больше.

В 1996 году язык JavaScript был стандартизован компанией Ecma, которая занимается стандартизацией информационных и коммуникационных технологий. Сама спецификация была названа ECMAScript или сокращённо ES. По сути, JavaScript является реализацией спецификации ECMAScript. Новые версии ECMAScript выходят ежегодно и добавляют в язык новые возможности.

Версии:

• ECMAScript 1 – июнь 1997 г.;
• ECMAScript 2 – июнь 1998 г.;
• ECMAScript 3 – декабрь 1999 г.;
• ECMAScript 5 – декабрь 2009 г.;
• ECMAScript 5.1 – июнь 2011 г.;
• ECMAScript 2015 (ES2015, ECMAScript 6, ES6) – июнь 2015 г.;
• ECMAScript 2016 (ES2016, ECMAScript 7, ES7) – июнь 2016 г.;
• ECMAScript 2017 (ES2017, ECMAScript 8, ES8) – июнь 2017 г.;
• ECMAScript 2018 (ES2018, ECMAScript 9, ES9) – июнь 2018 г.;
• ECMAScript 2019 (ES2019, ECMAScript 10, ES10) – июнь 2019 г.;
• ECMAScript 2020 (ES2020, ECMAScript 11, ES11) – июнь 2020 г.

Начиная с версии ES6 язык значительно преобразился, в нём появился новый синтаксис для написания сложных приложений (классы, модули, итераторы, циклы, генераторы в стиле Python, стрелочные функции, ключевые слова let, const и многое другое). С выходом версии ES6 весь код JavaScript принято делить на modern (современный) и классический (до ES6).

В настоящее время язык JavaScript уже применяется не только для веба. С помощью него можно написать обычные приложения для десктопных и мобильных операционных систем, использовать его в роли серверного языка (node.js) и др.

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

Программы на языке JavaScript, которые разрабатываются для выполнения на стороне клиента, т.е. в браузере, называют ещё сценариями.

JavaScript — это не Java, хоть он и унаследовал некоторые синтаксические конструкции этого языка. Такое название данный язык получил в силу некоторых исторических причин. Одной из них является то, что изначально в качестве языка, который должен был быть доступным в браузере, хотели сделать Java. Но впоследствии компания Netscape отказалась от этой мысли, из-за того, что Java был слишком большим и сложным.

Как подключить jQuery с CDN

CDN (Content Delivery Network) – это технология, которая позволяет увеличить скорость доставки контента конечным пользователям.

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

Т.е. CDN предоставляет ещё один способ подключить библиотеку jQuery. При этом непосредственно загружать его себе на сервер не нужно, он будет браться с CDN.

Загрузку jQuery с CDN предоставляют множество компаний, например, таких как Google, Microsoft, Cloudflare, jQuery, Yandex и т.д.

Подключить jQuery с CDN очень просто. Для этого нужно вставить с атрибутом , в котором прописать путь до этой библиотеки.

Код для онлайн подключения jQuery последней версии (3.5.1) с Google CDN:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Если нужна не эта, а какая-то другая версия, то тогда следует перейти страницу и выбрать её.

Например, ссылка для подключения версии из ветки 1.x (1.12.4):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Google CDN для последней версии из ветки 2.x (2.2.4):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Другие популярные CDN

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>

jQuery CDN:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Cloudflare CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Yandex CDN (последняя опубликованная версия 3.3.1):

<script src="https://yastatic.net/jquery/3.3.1/jquery.min.js"></script>

Дополнительно можно отметить, что если множество сайтов используют один и тот-же URL для подключения jQuery с CDN, то браузеру не потребуется загружать его для каждого такого ресурса. После первого скачивания он поместить jQuery в кэш и при последующих запросах будет брать её уже оттуда.

Как выполняются скрипты на странице

Когда браузер при чтении страницы встречает на ней элемент , браузер останавливает дальнейшую загрузку страницы и выполняет, подключенный с помощью этого элемента JavaScript код. После его выполнения, он приступает к дальнейшей загрузке страницы.

Как правило, JavaScript код не участвует в формировании визуальной картинки страницы. Поэтому чтобы страница как можно быстрее отобразилась пользователю, сценарии JavaScript рекомендуется подключать в самом конце страницы перед закрывающим тегом . Второе, почему рекомендуется это делать в конце, связано с тем, что скрипты в большинстве своём работают с элементами страницы, а чтобы с ними работать они должны уже существовать.

Пример:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Сценарий, подключённый к странице в секции head -->
    <script>
      document.write("Привет, мир (из раздела head)!");
      alert("Привет, мир (из раздела head)!");
    </script>
  </head>
  <body>
    <h1>Заголовок h1</h1>
    ...
    <script>
      document.write("Привет, мир (из раздела body)!");
    </script>
  </body>
</html>

В этом примере используются 2 метода JavaScript:

• – для вывода текста в текущее место HTML, если страница ещё не загрузилась;
• – для вывода на экран предупреждения с кнопкой «ОК»; данное предупреждение приостанавливает дальнейшую загрузку страницу.

При загрузке этого документа, когда браузер встретит метод он выведет значение параметра сразу после открывающего тега . При чтении следующей строчки, содержащей метод , браузер выведет на экран предупреждение «Привет, мир (из раздела head)!» на экран. Кроме этого, он приостановит дальнейшую загрузку страницы, пока пользователь не нажмёт на кнопку «ОК».

На этом этапе увидим следующую картинку:

После нажатия на кнопку «ОК» браузер продолжит загрузку страницы. Когда браузер встретит строчку с методом . Он выведет в этом месте текст «Привет, мир (из раздела )!».

Функциональность элементов страницы

JavaScript ориентирован на обслуживание событий на элементах страницы и дерева объектов DOM (Document Object Model). С такой точки зрения вопрос «Как подключить JavaScript к HTML-элементам?» решается изначально.

Например, все поля формы для ввода данных могут сразу получить JS-обработчики для валидации (проверки) данных на корректность. Дата должна быть датой, число — числом, а строка символов должна содержать только корректные символы.

Контроль ввода данных — важный функционал, и нет никакого смысла решать его в реальном времени и подключать обработчик JS в процессе нахождения посетителя на странице. Целесообразно заранее предусмотреть форму по структуре, содержанию и функциональности проверки. Задачу, как подключить JavaScript к HTML-элементам формы, можно решить сразу.

Иная ситуация будет на элементах при решении задачи передачи данных посредством механизмов Drag and Drop. В большинстве случаев придется динамично менять обработчики. Захват элемента для перемещения — это одно событие, собственно перемещение через границы других элементов — другое событие.

Вопрос как подключить JavaScript к HTML-элементам страницы, которые «встречаются по дороге», может быть не только динамичным, но и непредсказуемым.

Метод confirm()

Метод позволяет вывести диалоговое окно с сообщением и двумя кнопками — OK и Cancel (Отмена), благодаря чему пользователь может подтвердить или отменить некоторое действие. В отличие от метода этот метод возвращает логическую величину, значение которой зависит от того, на какой из двух кнопок щелкнул пользователь. Чтобы можно было определить, какую кнопку выбрал пользователь, метод возвращает true, если был щелчок на кнопке OK, и false, если он щелкнул на кнопке Cancel (Отмена) или закрыл диалоговое окно щелчком на системной кнопке закрытия окна — X.

Синтаксис применения метода имеет следующий вид:

— это логическое значение (true или false), указывающее, было ли выбрано OK или Cancel (Отмена).

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

Если пользователь щелкает на кнопке ОК — confirm возвращает логическое значение true.

Выполнить код »
Скрыть результаты

В этом примере оператор («если») получает условие (confirm(«Вы уверены?»)). Он вычисляет его, и если результат – (пользователь щелкает на кнопке OK), то выполняет команду и выводит сообщение: «Я очень рад, что Вы уверены!».
Блок («иначе») выполняется если пользователь выбирает кнопку Cancel. При этом выводится оповещение: «Жаль, что Вы не уверены…».
Этот шаблонный код часто используется, когда пользователь пытается что-либо удалить либо пкинуть веб-страницу.

Что такое JavaScript?

JavaScript — это кросс-платформенный, объектно-ориентированный скриптовый язык, который добавляет интерактивность и отзывчивость к вашим веб-страницам.

JavaScript позволяет разработчику веб-сайта управлять тем, как ведет себя веб-страница. Это делает JavaScript принципиально отличным от HTML, языка, который отвечает за структуру веб-документа, и CSS, языка, который формирует внешний вид веб-страниц.

Программы, написанные на языке JavaScript, называются скриптами. В браузере они подключаются непосредственно к HTML-документу и, как только загружается страница – тут же выполняются.
Процесс выполнения скрипта называют «интерпретацией».

Если PHP скрипт обрабатывается на стороне сервера с помощью PHP интерпретатора, то JavaScript выполняется в браузере пользователя JavaScript интерпретатором.

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

В браузере JavaScript может делать всё, что относится к манипуляции с HTML-документом, взаимодействию с посетителем и, с некоторыми ограничениями, с сервером:

• Проверять правильностm заполнения пользовательских HTML-форм.
• Взаимодействовать с веб-камерой, микрофоном и другими устройствами.
• Менять стили HTML-элементов, прятать, показывать элементы и т.п.
• Отображать всплывающие и диалоговые окна.
• Реагировать на действия посетителя, обрабатывать клики мыши, перемещения курсора и т.п.
• Посылать запросы на сервер и загружать данные без перезагрузки страницы.

JavaScгipt – невероятно мощный и эффективный язык, который непременно нужно попробовать в деле!

Подключение PHP-скриптов (файлы с расширением *.php) к сайту

Подключение PHP-скриптов осуществляется уже тремя способами:

1

Первый – это та же вставка кода в саму страницу сайта (обратите внимание, что если вы имеете страницу с расширением *.html – вам необходимо сменить расширение на *.php) с помощью тегов:. 2

С помощью файла (в таком случае подключение можно осуществлять и на странице с *.html расширением):

2. С помощью файла (в таком случае подключение можно осуществлять и на странице с *.html расширением):

Но для работы этого способа в файл .htaccess, который находится в корне вашего сайта, в самый верх, необходимо добавить эти строки:

Если такого файла нет на хостинге — создайте его через любой текстовый редактор.

3. Третье – с помощью JS-скрипта. В этом случае вы также можете получить результат выполненного PHP-скрипта на сервере.

Реализация будет следующая:

Где «.result» – это класс, куда будут грузиться данные, а «/main.php», соответственно, адрес до PHP-скрипта.

Если вы грузите данные с другого сервера, то поддержка PHP на вашем сервере не обязательна. Не забывайте подключить к вашему сайту библиотеку jQuery.

Здесь правила абсолютно те же: полный адрес к файлу, если он находится на внешнем сервере, относительный – если на вашем.

Обратите внимание! Если вы хотите подключить PHP-скрипт к вашему сайту, то на сервере должна быть поддержка PHP. О том, есть ли у вас такая возможность – узнайте у своего хостинг-провайдера

Если вы осуществляете подключение скриптов первый раз – попробуйте подключить скрипты из архива, который прикреплен в конце статьи. Если в обоих случаях вы получили сообщение «Hello World!» – значит, вы все сделали правильно.

Подключаем jQuery

Для того чтобы добавить jQuery на страницу, необходимо расположить тег с атрибутом , в котором указывается путь к скачанному файлу с jquery.min.js. Например, разместите следующий код в секции или до основного скрипта:

Подключаем jQuery и свой скрипт

JavaScript

<script src=»папка_со_скриптами/jquery.min.js»></script>
<script src=»папка_со_скриптами/myscript.js»></script>

//Очень часто это такой путь:
<script src=»js/jquery-3.5.0.min.js»></script>
<script src=»js/myscript.js»></script>

Подключение jQuery из локальной папки имеет следующие плюсы:

1. Вы используете ту версию, которую считаете для сюда удобной
2. Вы в любой момент можете найти файл с jQuery в папке и подключить его к другому сайту/html-странице.
3. Вы не зависите от наличия/отсутствия интернета для того, чтобы написать свой код.

В том случае, когда у вас есть сайт в сети или вы уверены в стабильности своего интернета, вам стоит воспользоваться онлайн-сервисами, которые позволяют подключить jQuery из сети распределенного контента (CDN). Плюсы этого способа:

1. Таких сервисов очень много, и они позволяют загрузить jQuery с ближайшего источника,
2. Вы можете выбрать версию jQuery, хотя для этого вам, возможно, придется поискать нужную.
3. Пользователь, просматривающий ваш сайт, уже загрузил в кэш своего браузера jQuery с того источника, который используете вы, и ваш сайт подхватит ее из кэша браузера, а значит загрузка будет очень быстрой.

nodeValue/data: содержимое текстового узла

Свойство есть только у узлов-элементов.

У других типов узлов, в частности, у текстовых, есть свои аналоги: свойства и . Эти свойства очень похожи при использовании, есть лишь небольшие различия в спецификации. Мы будем использовать , потому что оно короче.

Прочитаем содержимое текстового узла и комментария:

Мы можем представить, для чего нам может понадобиться читать или изменять текстовый узел, но комментарии?

Иногда их используют для вставки информации и инструкций шаблонизатора в HTML, как в примере ниже:

…Затем JavaScript может прочитать это из свойства и обработать инструкции.

Как осуществляется подключения кода JavaScript к странице

Подключение JavaScript на страницу выполняется с помощью элемента .

Первый способ — это размещение кода JavaScript непосредственно на странице, т.е. между открывающим и закрывающим тегом .

<script>
  alert("Привет, мир!");
</script>

Второй способ заключается в использовании отдельного файла с расширением js. В данный файл необходимо поместить код JavaScript, а затем его подключить к странице с помощью элемента . Путь к файлу задаётся с помощью атрибута .

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

С помощью этого способа вы можете подключить JavaScript код к большому количеству HTML страниц. В этом случае при изменении кода скрипта не придётся его редактировать на каждой странице, к которой он подключён.

Элементы , а, следовательно, JavaScript код, можно располагать в любых элементах страницы (например, в , и др.).

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Сценарий, подключённый к странице в секции head -->
    <script src="main_head.js"></script>
  </head>
  <body>
    <h1>Заголовок</h1>
    ...

    <!-- Сценарий, подключённый к странице в секции body -->
    <script src="main.js"></script>
  </body>
</html>

Если подключить скрипт с помощью атрибута и дополнительно ещё указать некоторый код между открывающим и закрывающим тегом этого элемента, то код, который указали непосредственно, будет проигнорирован, т.е. он не выполниться.

<!-- Будет выполнен только скрипт common.js -->
<script src="common.js">
  alert('Это предупреждение никогда не отобразиться!');
</script>

Добавление JavaScript на страницу

Браузеры понимают HTML и CSS и превращают эти языки в визуальную информацию на экране. Функционал браузера понимающий HTML и CSS, называется браузерным движком. Большинство браузеров обладают компонентом под названием интерпретатор JavaScript. Это тот функционал, при помощи которого он понимает язык JS и способен выполнять шаги написанного программного кода. 

Для того что бы сообщить браузеру, когда появляется JavaScript, используется элемент script.

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

Довольно часто можно встреть добавление элемента script в заглавную часть веб-страницы – раздел head следующим образом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w 3 .org/TR/html4/strict.dtd">
<html>
<head>
<title>Уроки по JavaScript </title>
<script type="text/javascript")
</script>
</head>    

В элементе script, атрибут type говорит о формате и типе последующего сценария. В данном случае type=”text/javascript” означает, что сценарий – это обычный текст как HTML, и написан он на языке Javascript.

Так как мы будем использовать HTML5, то все гораздо проще, можно просто опустить атрибут type и написать следующим образом:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Уроки по JavaScript </title>
<script>
</script>
</head>    

Давайте для примера добавим код между открывающим и закрывающим тегом элемента script.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Уроки по JavaScript </title>
<script>
alert( 'Добавляем JavaScript на страницу.');
</script>
</head>    

Чтобы код JavaScript был организован в одной части документа, в большинстве случаев script помещают в раздел заголовка страницы head. Часто можно встретить элемент script сразу под закрывающим тегом </body> этот нужно, когда необходимо удостоверится в том, что страница загружена, и посетитель видит ее полностью, прежде чем запустится JavaScript. 

Подключение внешнего файла JavaScript

Все эти возможности, что показывал ранее, позволяют добавлять код JavaScript на одну страницу.

Однако не всегда это удобно. К примеру, при создании анимированного выпадающего меню на JavaScript, которое присутствует на всех страницах сайта, в данном случае придется добавлять код JS на каждую его страницу. Но просто копировать и вставлять один и тот же код на страницу сайта – это плохая идея.

• Во-первых, вы потратите много времени, копирую и вставляя его снова и снова, особенно если ваш сайт содержит сотни таких страниц.
• Во-вторых, если когда то решите отредактировать текущий код JavaScript, изменить или улучшить его, вам придется править каждую страницу, где он размещен.
• И в третьих, поскольку код JavaScript будет находиться на каждой отдельной страницы, сайт станет довольно большими, тем самым скорость загрузка будет у него дольше.

В таких случаях оптимальный подход – это применение внешнего файла где описан код JavaScript. По аналогии как мы используем внешний файл CSS для своих веб-страниц, по такой же технологии подключаем JavaScript.

Внешний файл JavaScript – это простой текстовый файл с расширением .JS (пример menu.js). В нем содержится только код JavaScript, и он связан с веб-страницей при помощи элемента script.

К примеру, если нужно подключить файл JavaScript с именем menu.js пишем следующее:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mon Be6-CTpaHMua</title>
<script src=" menu.js"></script>
</head>    

Атрибут src элемента script работает так же, как атрибут src элемента img или href элемента a. Другими словами, он указывает на файл, находящийся либо на вашем, либо на другом сайте.

Данные файлы можно хранить где угодно в корневом каталоге вашего веб-сайта, но многие разработчики создают отдельный каталог для внешних файлов JavaScript с названием JS или Libs (то есть библиотекаа).

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

В следующем видео приступим к написанию не больших программы на JavaScript.

Урок подготовил Горелов Денис.