Html javascript
Содержание:
- Работа с отдельным JavaScript файлом
- Классы DOM-узлов
- Отложенные и асинхронные сценарии
- Набор символов
- Добавление JavaScript в HTML-документ
- Справочники, и как в них искать
- С помощью файла functions.php
- Давайте попробуем
- Советы по эфективному изучению JavaScript
- Подключение внешнего файла JavaScript
- Ключевые и зарезервированные слова
- Итого
Работа с отдельным JavaScript файлом
Для размещения больших сценариев или сценариев, которые будут использоваться на нескольких страницах, JavaScript – код обычно находиться в одном или нескольких js файлов, на которые ссылаются в HTML документе, аналогично тому, как ссылаются внешние активы, такие как CSS.
Преимущества использования отдельного файла JavaScript включают в себя:
- Разделение HTML-разметки и кода на JavaScript, чтобы сделать более простым и читабельным
- Отдельные файлы делает кодирование проще
- Когда файлы JavaScript кэшируются, страницы загружаются быстрее
Для того, чтобы продемонстрировать, как подключить JavaScript к HTML – документу, давайте создадим небольшой веб – проект. Он будет состоять из файла script.js в каталоге js/, style.css в каталоге css/, и главный файл index.html в корне проекта.
project/ ├── css/ | └── style.css ├── js/ | └── script.js └── index.html
Мы можем начать с нашим предыдущим шаблоном HTML из предыдущего раздела:
index.html
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Сегодняшняя дата</title>
</head>
<body>
</body>
</html>
Теперь давайте перейдем к нашему коду на JavaScript, который будет показывать дату в качестве заголовка <h1> в файле script.js:
script.js
let d = new Date(); document.body.innerHTML = "<h1>Сегодняшняя дата " + d + "</h1>"
Можно добавить ссылку на этот сценарий ниже раздела <body>, со следующей строкой кода:
<script src="js/script.js"></script>
Тег <script> указывает на файл script.js в каталоге js/ нашего интернет – проекта.
Давайте посмотрим на эту строку в контексте нашего HTML – файла, в этом случае ниже раздела <body>:
index.html
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Сегодняшняя дата</title>
</head>
<body>
</body>
<script src="js/script.js"></script>
</html>
Наконец, давайте также отредактируем файл style.css, добавив цвет фона и стиль в заголовке <h1>:
style.css
body {
background-color: #0080ff;
}
h1 {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
}
Мы можем ссылаться на файл CSS в разделе <head> нашего HTML – документа:
index.html
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Сегодняшняя дата</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
<script src="js/script.js"></script>
</html>
Теперь, с JavaScript и CSS вместе мы можем загрузить страницу index.html в веб – браузере по нашему выбору. Мы должны увидеть страницу, которая выглядит примерно следующим образом :
Теперь, когда мы поместили JavaScript в файл, мы можем назвать его в дополнительных веб-страницах и обновлять их все в одном месте
Классы DOM-узлов
У разных DOM-узлов могут быть разные свойства. Например, у узла, соответствующего тегу , есть свойства, связанные со ссылками, а у соответствующего тегу – свойства, связанные с полем ввода и т.д. Текстовые узлы отличаются от узлов-элементов. Но у них есть общие свойства и методы, потому что все классы DOM-узлов образуют единую иерархию.
Каждый DOM-узел принадлежит соответствующему встроенному классу.
Корнем иерархии является , от него наследует и остальные DOM-узлы.
На рисунке ниже изображены основные классы:
Существуют следующие классы:
- – это корневой «абстрактный» класс. Объекты этого класса никогда не создаются. Он служит основой, благодаря которой все DOM-узлы поддерживают так называемые «события», о которых мы поговорим позже.
- – также является «абстрактным» классом, и служит основой для DOM-узлов. Он обеспечивает базовую функциональность: , , и т.д. (это геттеры). Объекты класса никогда не создаются. Но есть определённые классы узлов, которые наследуют от него: – для текстовых узлов, – для узлов-элементов и более экзотический – для узлов-комментариев.
- – это базовый класс для DOM-элементов. Он обеспечивает навигацию на уровне элементов: , и методы поиска: , . Браузер поддерживает не только HTML, но также XML и SVG. Класс Element служит базой для следующих классов: , и .
-
– является базовым классом для всех остальных HTML-элементов. От него наследуют конкретные элементы:
- – класс для тега ,
- – класс для тега ,
- – класс для тега ,
- …и т.д, каждому тегу соответствует свой класс, который предоставляет определённые свойства и методы.
Таким образом, полный набор свойств и методов данного узла собирается в результате наследования.
Рассмотрим DOM-объект для тега . Он принадлежит классу .
Он получает свойства и методы из (в порядке наследования):
- – этот класс предоставляет специфичные для элементов формы свойства,
- – предоставляет общие для HTML-элементов методы (и геттеры/сеттеры),
- – предоставляет типовые методы элемента,
- – предоставляет общие свойства DOM-узлов,
- – обеспечивает поддержку событий (поговорим о них дальше),
- …и, наконец, он наследует от , поэтому доступны также методы «обычного объекта», такие как .
Для того, чтобы узнать имя класса DOM-узла, вспомним, что обычно у объекта есть свойство . Оно ссылается на конструктор класса, и в свойстве содержится его имя:
…Или мы можем просто привести его к :
Проверить наследование можно также при помощи :
Как видно, DOM-узлы – это обычные JavaScript объекты. Для наследования они используют классы, основанные на прототипах.
В этом легко убедиться, если вывести в консоли браузера любой элемент через . Или даже напрямую обратиться к методам, которые хранятся в , и т.д.
и
Большинство браузеров поддерживают в инструментах разработчика две команды: и . Они выводят свои аргументы в консоль. Для JavaScript-объектов эти команды обычно выводят одно и то же.
Но для DOM-элементов они работают по-разному:
- выводит элемент в виде DOM-дерева.
- выводит элемент в виде DOM-объекта, что удобно для анализа его свойств.
Попробуйте сами на .
Спецификация IDL
В спецификации для описания классов DOM используется не JavaScript, а специальный язык Interface description language (IDL), с которым достаточно легко разобраться.
В IDL все свойства представлены с указанием их типов. Например, , и т.д.
Небольшой отрывок IDL с комментариями:
Отложенные и асинхронные сценарии
Как отмечалось ранее, по умолчанию файлы JavaScript-кода прерывают синтаксический анализ (парсинг) HTML-документа до тех пор, пока скрипт не будет загружен и выполнен, тем самым увеличивая промежуток времени до первой отрисовки страницы.
Возьмём пример, в котором элемент расположен где-то в середине страницы:
В этом примере, пока пока браузер не загрузит и не выполнит script.js, он не покажет часть страницы под ним. Такое поведение браузера называется «синхронным» и может доставить проблемы, если мы загружаем несколько JavaScript-файлов на странице, так как это увеличивает время её отрисовки.
А что, если HTML-документ на самом деле не зависит от этих JS-файлов, а разработчик желает контролировать то, как внешние файлы загружаются и выполняются?
Кардинально решить проблему загрузки скриптов помогут атрибуты и элемента .
Атрибут async
Async используется для того, чтобы указать браузеру, что скрипт может быть выполнен «асинхронно».
При обнаружении тега браузер не останавливает обработку HTML-документа для загрузки и выполнения скрипта, выполнение может произойти после того, как скрипт будет получен параллельно с разбором документа. Когда скрипт будет загружен – он выполнится.
Для сценариев с атрибутом не гарантируется выполнение скриптов в порядке их добавления, например:
В примере второй скрипт может быть выполнен перед первым, поэтому важно, чтобы между этими сценариями не было зависимостей. Примечание: Атрибут используется, если нужно разрешить браузеру продолжить загрузку страницы, не дожидаясь завершения загрузки и выполнения сценария
Примечание: Атрибут используется, если нужно разрешить браузеру продолжить загрузку страницы, не дожидаясь завершения загрузки и выполнения сценария.
Атрибут defer
Атрибут откладывает выполнение скрипта до тех пор, пока вся HTML-страница не будет загружена полностью.
Как и при асинхронной загрузке скриптов — JS-файл может быть загружен, в то время как HTML-документ ещё грузится. Однако, даже если скрипт будет полностью загружен ещё до того, как браузер закончит обработку страницы, он не будет выполнен до тех пор, пока HTML-документ не обработается до конца.
Несмотря на то, что в приведенном примере теги включены в элемент HTML-документа, выполнение сценариев не начнется, пока браузер не дойдет до закрывающего тега .
Кроме того, в отличие от , относительный порядок выполнения скриптов с атрибутом будет сохранён.
Применение атрибута бывает полезным, когда в коде скрипта предусматривается работа с HTML-документом, и разработчик должен быть уверен, что страница полностью получена.
Примечание: Атрибуты и поддерживаются только для внешних файлов сценариев, т.е. работают только при наличии атрибута .
Набор символов
При написании программ на JavaScript используется набор символов Unicode. В отличие от 7-разрядной кодировки ASCII, подходящей только для английского языка, и 8-разрядной кодировки ISO Latin-1, подходящей только для английского и основных западноевропейских языков, 16-разрядная кодировка Unicode поддерживает практически все письменные языки, имеющиеся на планете. Стандарт ECMAScript v3 требует, чтобы реализации JavaScript обеспечивали поддержку стандарта Unicode версии 2.1 или выше, а стандарт ECMAScript v5 требует, чтобы реализации обеспечивали поддержку стандарта Unicode версии 3 или выше.
Добавление JavaScript в HTML-документ
Вы можете добавить JavaScript-код в HTML-документ, используя выделенный HTML-тег, который обертывает код JavaScript.
Тег может быть помещен в разделе вашего HTML, в разделе, или после закрывающего тэга, в зависимости от того, когда вы хотите JavaScript для загрузки.
Как правило, код JavaScript может перемещаться внутри раздела документа , чтобы сохранить его и из основного содержимого вашего документа HTML.
Однако, если ваш скрипт должен запускаться в определенный момент в макете страницы — например, при использовании для создания контента — вы должны поместить его в точку, где он должен вызываться, как правило, внутри раздела.
Рассмотрим следующий пустой HTML-документ с названием браузера :
index.html
Прямо сейчас этот файл содержит только разметку HTML. Предположим, мы хотели бы добавить в документ следующий код JavaScript:
Это позволит веб-странице отображать предупреждение с текущей датой независимо от того, когда пользователь загружает сайт.
Чтобы достичь этого, мы добавим тег вместе с некоторым кодом JavaScript в файл HTML.
Во-первых, мы добавим код JavaScript между тегами, сигнализируя обозревателю, чтобы запустить скрипт JavaScript перед загрузкой на остальной части страницы. Мы можем добавить JavaScript под тегами, например, как показано ниже:
index.html
Как только вы загрузите страницу, вы получите предупреждение, которое будет выглядеть примерно так:
Вы также можете поэкспериментировать с помещением скрипта внутри или вне тегов и перезагрузить страницу. Поскольку это не надежный HTML-документ, вы, вероятно, не заметите разницы в загрузке страницы.
Если мы изменили то, что показано в теле HTML, нам нужно будет реализовать это после раздела, чтобы он отображался на странице, как в примере ниже:
index.html
Результат для вышеупомянутого HTML-документа, загруженного через веб-браузер, будет выглядеть примерно так:
Сценарии, которые являются небольшими или работают только на одной странице, могут отлично работать в HTML-файле, но для больших сценариев или сценариев, которые будут использоваться на многих страницах, это не очень эффективное решение, потому что включение его может стать громоздким или трудным для чтения и понять. В следующем разделе мы рассмотрим, как обрабатывать отдельный файл JavaScript в вашем документе HTML.
Справочники, и как в них искать
Самая полная и подробная информация по JavaScript и браузерам есть в справочниках.
Её объём таков, что перевести всё с английского невозможно. Даже сделать «единый полный справочник» не получается, так как изменений много и они происходят постоянно.
Тем не менее, жить вполне можно если знать, куда смотреть.
Есть три основных справочника по JavaScript на английском языке:
-
Mozilla Developer Network – содержит информацию, верную для основных браузеров. Также там присутствуют расширения только для Firefox (они помечены).
Когда мне нужно быстро найти «стандартную» информацию по – ввожу в Google «RegExp MDN», и ключевое слово «MDN» (Mozilla Developer Network) приводит к информации из этого справочника.
-
MSDN – справочник от Microsoft. Там много информации, в том числе и по JavaScript (они называют его «JScript»). Если нужно что-то, специфичное для IE – лучше лезть сразу туда.
Например, для информации об особенностях в IE – полезное сочетание: «RegExp msdn». Иногда к поисковой фразе лучше добавить термин «JScript»: «RegExp msdn jscript».
-
Safari Developer Library – менее известен и используется реже, но в нём тоже можно найти ценную информацию.
Есть ещё справочники, не от разработчиков браузеров, но тоже хорошие:
- http://help.dottoro.com – содержит подробную информацию по HTML/CSS/JavaScript.
- http://javascript.ru/manual – справочник по JavaScript на русском языке, он содержит основную информацию по языку, без функций для работы с документом. К нему можно обращаться и по адресу, если знаете, что искать. Например, так: http://javascript.ru/RegExp.
- http://www.quirksmode.org – информация о браузерных несовместимостях. Этот ресурс сам по себе довольно старый и, в первую очередь, полезен для поддержки устаревших браузеров. Для поиска можно пользоваться комбинацией «quirksmode onkeypress» в Google.
- http://caniuse.com – ресурс о поддержке браузерами новейших возможностей HTML/CSS/JavaScript. Например, для поддержки функций криптографии: .
- https://kangax.github.io/compat-table – таблица с обзором поддержки спецификации ECMAScript различными платформами.
С помощью файла functions.php
И ещё один альтернативный способ подключения jQuery предложен Kama, который считает, что его вариант наиболее правильный. Суть заключается в том, что в WordPress уже есть программный метод добавления скриптов на страницу при помощи функций, например:
wp_register_script() wp_enqueue_script() wp_deregister_script()
Такой метод предотвращает конфликты, когда один и тот же скрипт подключается разными плагинами. Это облегчает работу при оптимизации загрузки js файлов, что уменьшает время загрузки страниц сайта. В этом случае, скрипты можно объединить в один файл. А браузер получит их в сжатом виде.
Для правильного подключения jQuery надо воспользоваться функцией wp_enqueue_script(). Скрипт в данном случае подключается один раз. Файл functions.php необходимо дополнить такими строками:
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method(){
wp_enqueue_script( 'jquery' );
}
Теперь, если посмотреть исходный код страницы, то в head появится следующая запись:
<script src='https://your-super-site.ru/wp-includes/js/jquery/jquery.js?ver=3.5.1'></script>
Можно ли подключить jQuery по этому способу с CDN Google? Отличная новость — да! Вот этот код от Kama совершит чудо:
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
// отменяем зарегистрированный jQuery
// чтобы отменить jquery-migrate, вместо "jquery-core" вписать "jquery"
wp_deregister_script( 'jquery-core' );
wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
wp_enqueue_script( 'jquery' );
}
Его снова вписываем в файл functions.php. Результат работы кода:
<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script> <script src='http://example.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
Когда jquery-migrate.js не требуется, но нужен только jQuery, то следует дополнить functions.php таким кодом:
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
// отменяем зарегистрированный jQuery
wp_deregister_script('jquery-core');
wp_deregister_script('jquery');
// регистрируем
wp_register_script( 'jquery-core', 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js', false, null, true );
wp_register_script( 'jquery', false, array('jquery-core'), null, true );
// подключаем
wp_enqueue_script( 'jquery' );
}
В этом случае увидим лишь такую строку в head:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
В строке 9 «true» означает что скрипт подключится, по возможности, в футер сайта.
И ещё один вариант подключения той версии jQuery, которую использует WordPress. Вот код:
add_action( 'wp_enqueue_scripts', 'my_scripts_method', 99 );
function my_scripts_method() {
// получаем версию jQuery
wp_enqueue_script( 'jquery' );
// для версий WP меньше 3.6 'jquery' нужно поменять на 'jquery-core'
$wp_jquery_ver = $GLOBALS->registered->ver;
$jquery_ver = $wp_jquery_ver == '' ? '1.11.0' : $wp_jquery_ver;
wp_deregister_script( 'jquery-core' );
wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/'. $jquery_ver .'/jquery.min.js' );
wp_enqueue_script( 'jquery' );
}
Давайте попробуем
Сначала установим среду с сайта разработчиков и проверим в консоли, что всё прошло нормально.
Введём простую команду:
>node --version
Результат, который мы получили:
v8.11.3
Готово! Среда успешно установлена и готова к действиям. Теперь запустить скрипт можно прямо в консоли, предварительно запустив .
Рассмотрим пару простых примеров. По традиции выведем :
console.log('Hello, world!');
Hello world!
Вроде ничего неожиданного, кроме в конце. Дело в том, что в JavaSсript функция всегда возвращает какое-то значение. Если автор функции опустил , то считается, что она возвращает . Именно это значение и выводит нам Node.js.
Попробуем пример сложнее, например, цикл выводов. Как консоль отреагирует на него?
Цикл выводов.
Node.js отлично справляется и с более сложными конструкциями, даже самостоятельно выстраивая лесенку. В случае обнаружения ошибки, он тут же сообщит об этом, остановив скрипт.
Например, случайно пропустим букву в команде:
Упс, ошибка.
Ну вот, всё необходимое для написания простых и компактных приложений есть. Но писать большое приложение на десятки строк кода в консоли будет не слишком-то удобно. Да и такой подход не сработает, если приложение разбито на несколько скриптов, лежащих в разных файлах.
Советы по эфективному изучению JavaScript
Изучение JavaScript, как и других языков программирования – непростое дело, но оно безусловно стоит потраченных сил и времени. Обучение эффективно, когда дается не просто так, а с усилием. Вы должны прилагать сознательные усилия для того, чтобы усваивать новые навыки и умения. Знания, полученные без усилий, подобны кругам на воде – очень скоро от них не останется и следа.
Электронные книги, бесплатные онлайн-курсы и интернет-платформы для обучения с помощью задач – выбор вариантов источников качественных знаний сегодня почти безграничен. Но как мотивировать себя к самостоятельному обучению, как научиться учиться самостоятельно?
Попробуйте следовать нескольким простым, но проверенным на практике советам.
Учиться нужно понемногу, но регулярно. Регулярность – залог успеха в обучении. Спланируйте свои будни так, чтобы вы могли каждый день уделять на изучение JavaScript не менее одного часа. Не пытайтесь за короткий промежуток времени выучить всё и сразу. Разбивка процесса самообразования на небольшие учебные сессии создает ощущение быстрых успехов и мотивирует вернуться к обучению уже на следующий день.
Наихудшее время для обучения – когда вы чувствуете усталость. В такие моменты, главное не заставлять себя – вы не получите ожидаемого результата. Человеческий мозг не может учить что-то бесконечно долго – ему нужно давать перерывы. Занимайтесь по принципу 25\5. Попробуйте на себе практику учить 25 минут и отдыхать 5 минут. Ваш мозг привыкнет к таким равномерным нагрузкам и будет работать максимально продуктивно.
Применяйте практики вспоминания – основу обучения. Чем чаще мы вспоминаем информацию, тем дольше она будет храниться в нашей памяти.
Эффективная техника вспоминания – это отложенное вспоминание: на карточке с одной стороны напишите вопрос, который относится к изученному материалу, а с другой – ответ на него. Выучите содержание карточки, а затем, через день, попытайтесь вспомнить ответ. Если вы дали правильный ответ – карточку можно отложить на неделю до следующего повторения. Если ошиблись – необходимо повторить вопрос уже на следующий день. Чем длиннее у вас будет цепочка успешных оветов, тем больший интервал должен быть перед следующим повторением.
Параллельно с теоретическими занятиями постоянно практикуйтесь. Для приобретения практического опыта достаточно просто много писать и разбирать примеры хорошего кода. Работая с примерами внимательно пройдите по всем строчкам кода – вы должны убедиться, что понимаете, как работает каждая строчка. Не бойтесь экспериментировать. Учитесь выводить в окне браузера какие-то данные и анализировать их. Например, что и после чего выводится на экран, получили ли вы то, что хотели, и если нет – то почему.
Какой бы способ обучения вы не выбрали, не забывайте, что он должен быть интересным для вас и подкрепляться практическими занятиями – примеры лучше тысячи слов. Примеры часто легче понять, чем многостраничную теорию. Поэтому будьте смелее! Надеюсь, что этот учебник станет хорошим подспорьем в ваших начинаниях.
← предыдущая
следующая →
Подключение внешнего файла JavaScript
Последнее обновление: 01.07.2021
В прошлой статье код javascript непосредственно определялся на веб-странице. Но есть еще один способ подключения кода JavaScript, который представляет вынесение кода во внешние файлы и их подключение с помощью тега
Итак, в прошлой теме мы создали html-страницу index.html, которая находится в каталоге app. Теперь создадим в этом каталоге новый подкаталог. Назовем его js.
Он будет предназначен для хранения файлов с кодом javascript. В этом подкаталоге создадим новый текстовый файл, который назовем
myscript.js. Файлы с кодом javascript имеют расширение .js. То есть у нас получится
следующая структура проекта в папке app:
Откроем файл myscript.js в текстовом редакторе и определим в нем следующий код:
document.write("<h2>Первая программа на JavaScript</h2>"); // выводим заголовок
document.write("Привет мир!"); // выводим обычный текст
Здесь для добавления на веб-страницу некоторого содержимого применяется метод . Первый вызов метода выводит заголовок
, а второй вызов — обычный текст.
Для совместимости с кодировкой страницы index.html для файла с кодом javascript также желательно устанавливать кодировку utf-8. При работе в Visual Studio Code этот
редактор автоматически устанавливает кодировку UTF-8.
Теперь подключим этот файл на веб-страницу index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<script src="js/myscript.js"></script>
</body>
</html>
Чтобы подключить файл с кодом javascript на веб-страницу, применяется также тег <script>, у которого устанавливается
атрибут src. Этот атрибут указывает на путь к файлу скрипта. В нашем случае используется относительный путь.
Так как веб-страница находится в одной папке с каталогом js, то в качестве пути мы можем написать js/myscript.js.
Также надо учитывать, что за открывающим тегом script должен обязательно следовать закрывающий
И после открытия файла index.html в браузере отобразится сообщение:
В отличие от определения кода javascript вынесение его во внешние файлы имеет ряд преимуществ:
-
Мы можем повторно использовать один и тот же код на нескольких веб-страницах
-
Внешние файлы javascript бразуер может кэшировать, за счет этого при следующем обращении к странице браузер снижает нагрузка на сервер, а браузеру надо загрузить меньший объем информации
-
Код веб-страницы становится «чище». Он содержит только html-разметку, а код поведения хранится во внешних файлах. В итоге можно отделить работу
по созданию кода html-страницы от написания кода javascript
Поэтому, как правило, предпочтительнее использовать код javascript во внешних файлах, а не в прямых вставках на веб-страницу с помощью элемента script.
НазадВперед
Ключевые и зарезервированные слова
Стандарт ЕСМА-262 определяет набор ключевых слов (keywords), которые не могут использоваться в качестве идентификаторов. Зарезервированные слова имеют определенное значение в языке JavaScript, так как они являются частью синтаксиса языка. Использование зарезервированных слов приведет к ошибке компиляции при загрузке скрипта.
Ключевые слова, зарезервированные на будущее
Кроме того, ЕСМА-262 содержит набор зарезервированных слов (reserved words), которые также нельзя использовать как идентификаторы или имена свойств. За ними сейчас не стоит никакой функциональности, но она может появиться в будущих версиях:
В строгом (strict) режиме в этот список добавляются следующие слова:
Зарезервированные ключевые слова в версиях ECMAScript от 1 по 3
В 5-й редакции ECMAScript немного изменены правила употребления ключевых и зарезервированных слов. Как и прежде они не могут быть идентификаторами, но теперь их допустимо использовать как имена свойств в объектах. Тем не менее, для обеспечения совместимости с прошлыми и будущими редакциями ECMAScript всё-же лучше не использовать ключевые и зарезервированные слова как идентификаторы и имена свойств.
Итого
- Скрипты можно вставлять на страницу с помощью тега <script>, либо подключаться как внешние файлы с помощью все того же <script>, но уже с указанием атрибута src, в котором указывается путь к скрипту.
- Атрибуты async и defer используются для асинхронной загрузки страницы.
- Разница между атрибутами async и defer: атрибут defer гарантирует последовательность скриптов, а async – нет. Кроме того, defer будет всегда ожидать, пока весь HTML-документ будет готов, а async – нет.
Задача.
Какой из скриптов будет выполнен первым?
В примере подключены 2 скрипта one.js и many.js.
Если предположить, что one.js загружается гораздо быстрее, чем many.js – какой из них выполнится первым?
<script src="many.js"></script> <script src="one.js"></script>
А если так?
<script async src="many.js"></script> <script async src="one.js"></script>
А в этом случае?
<script defer src="many.js"></script> <script defer src="one.js"></script>
Ну и в заключении посмотрите видео как подключить js файл к веб-документу
Поделиться
Твитнуть
Поделиться
