Как подгрузить html-код из файла силами javascript на web-страницу через объект xmlhttprequest?

Содержание:

Давайте попробуем
JavaScript в контейнере body
Что это такое
Подключение с внешнего ресурса
Преимущества JavaScript
Подключение JavaScript в HTML код
Подключение скриптов для плагинов
Классы DOM-узлов
Усложняем задачу
Комментарии
Импорт чужого CSS
Ожирение сайтов
- В чем причина?
outerHTML: HTML элемента целиком
Идентификаторы
Как проверить правильность подключения
Метод prompt()
Начало
Итого
- Задача.
Итоги

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

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

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

>node --version

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

v8.11.3

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

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

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

Hello world!

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

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

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

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

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

Упс, ошибка.

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

JavaScript в контейнере body

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

<html>
<body>
<h1>Заголовок</h1>

</body>
</html>

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

Что это такое

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

Уметь работать с ним должен любой вебмастер, который хочет создать профессиональный интернет-проект. Перед началом изучения ознакомьтесь с моей статьей «JavaScript для чайников». Она поможет вам в дальнейшем изучении jquery. Используя эту библиотеку, вы получите такие преимущества по сравнению с использованием javascript:

Работает со всеми современными браузерами;
Быстрое внедрение визуальных эффектов, а также скрытие и появление элементов на блоге;
Много плагинов, облегчающих работу — галереи, слайдеры формы, выпадающее меню и другие элементы страницы.
Работа с ajax. Это технология, разрешающая отправлять запрос к серверу без перезагрузки браузера.

Подключение с внешнего ресурса

Альтернативный вариант добавления библиотеки в исходный код на странице — использование CDN. В переводе это значит сеть доставки контента. При таком варианте ядро фреймворка находится на стороннем ресурсе. Это может быть Гугл, Майкрософт, Яндекс.

Преимущество такого способа в том, что файлы загружаются через ссылку с ближайшего к вам сервера. Это увеличит скорость работы. Если человек был раньше на вашем блоге, то библиотека добавляется в кэш браузера и не будет загружаться еще раз. Использование такого способа актуально, если имеется несколько небольших интернет-проектов. Для подключения CDN от Гугла используйте такой код:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Преимущества JavaScript

JavaScript вначале назывался LiveScript. Но, так как на тот момент Java была у всех на устах (по всему миру), Netscape решил переименовать его в JavaScript. Дата его первого появления – 1995 как часть Netscape 2.0. Некоторые самые выдающиеся преимущества JavaScript опишем ниже.

Минимизация взаимодействия с сервером

Хорошо известный факт, что если вы хотите оптимизировать производительность своего сайта, лучший путь – это снизить взаимодействие с сервером. JavaScript тут помогает проверкой корректности ввода пользователем на стороне клиента. Запрос серверу отправляется только тогда, когда начальные проверки пройдены. Как результат, использование ресурсов и количество запросов к серверу значительно уменьшается.

Более богатый интерфейс, ориентированный на удобство пользователя

Используя JavaScript, вы можете создавать интерактивный интерфейс на стороне клиента. Например, добавлять слайдеры, карусели, эффекты по действиям мыши, функции простого перетягивания и так далее.

Молниеносный отклик пользователю

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

Лёгкая трассировка

JavaScript – это интерпретируемый язык, что значит, что написанный код выполняется построчно. Если возникла ошибка, вы будете точно знать номер строки, в которой возникла проблема.

Подключение JavaScript в HTML код

Есть два способа вызова JavaScript в HTML-коде страницы:

<script type=’text/javascript’ src=’путь_к_скрипту’></script>
<script type=’text/javascript’>код_скрипта</script>

Первый способ подключает js-файл, который может быть расположен как в одной из директорий сайта, так и на другом ресурсе. Второй способ встраивает код js-файла в HTML-код страницы. Тут стоит разобраться в том, что использование того или другого метода должно зависеть от объема js-скрипта. Если объем скрипта достаточно большой, то лучше будет вызвать его из файла. Кроме этого, большие по объему скрипты можно оптимизировать, ознакомившись со статьей как сжать JS-скрипты. Но если же весь код скрипта заключен в несколько строчек, то встраивание JavaScript в HTML код страницы будет более правильным. Встраивание небольшого по размеру js-кода лишает сервер необходимости запрашивать этот самый файл, что в свою очередь уменьшит задержки при загрузке других ресурсов и сократит время обработки страницы.

Какие по объему JS-скрипты необходимо встраивать в HTML код?

Хорошей подсказкой для встраивания JavaScript может послужить Page Speed от Google. Данный инструмент подскажет вебмастеру какие .js и .css-файлы должны быть встроены в HTML код страницы.

Что делать с JS-скриптами, которые вызываются с других сайтов?

Со скриптами, которые вызываются из других сайтов, можно провернуть следующие действия:

Находите их и копируете их код.
Создаете в текстовом редакторе аналогичный js-скрипт.
Заливаете его в корневую(или в любую другую) директорию своего сайта.
Изменяете путь вызова js-скрипта на адрес, по которому расположился Ваш скрипт.

В основном проблемы могут возникнуть с 4-ым пунктом. В статье «Как встроить небольшой css-файл в HTML-код страницы» я описал алгоритм, с помощью которого в CMS WordPress можно найти место вызова стиля и изменить его, встроив вместо него небольшой css-файл. Данный алгоритм вполне подойдет и для js-файлов.

Где лучше подключить JavaScript?

JavaScript лучше всего подключить в футере(footer) страницы. Разместив js-скрипт в начале(head) или середине(body) страницы, Вы приостановите загрузку страницы на время выполнения данного скрипта. Если же скрипт будет размещен в конце страницы и будет выполняться только после загрузки основного содержимого страницы, пользователи смогут быстрее начать изучать материал. Ну, а скрипты подтянуться позднее. К тому же, желательно скрипты загружать после css-файлов. Почему после, а не до стилей, читайте в статье Оптимизация порядка загрузки стилей и скриптов, в которой этот момент подробно рассмотрен.

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

Плагины это очень сложна штука. Нужно понимать что нужно на данной странице пользователю в данный момент, а что нет. На своём сайте в плагине для определения вхождений ключей в текст я подключаю стили и js дважды. В первый раз при загрузке страницы (загружается плагин по шорткоду) и во второй раз в момент отображения ответа по ajax. Как же достичь такого же в своём плагине.

Допустим у нас есть задача по шорткоду вывести текст и подключить текст для него. В нашем фале мы пишем следующие:

/**
* В файле плагине
*/
// Регистрируем стиль
function your_preffix_reg_script() {
    wp_register_style( 'my_style', 'https://example.ru/style.css');
}
add_action( 'wp_enqueue_scripts', 'your_preffix_reg_script' );

// Регистрируем шорткод
add_shortcode('shortcode_name', 'shortcode_func');
function shortcode_func(){
    // Print string
    do_action('your_preffix_desc');
    // Include script
    wp_enqueue_script( 'your_preffix_reg_script' );
}
add_action('your_preffix_desc', 'your_preffix_desc_func');
function your_preffix_desc_func(){
    echo 'some string';  
}

Таким образом мы зарегистрировали свой стиль и вызвали его в функции, которая выполняется на странице с шорткодом. Теперь если вызвать шорткод shortcode_name то мы увидим строку ‘some string’ и поключенный наш стиль. То же самое касается и 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 с комментариями:

Усложняем задачу

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

Создайте на жёстком диске папку для проекта и положите туда ваш готовый скрипт. Назовите его — так принято. Если под рукой скрипта нет, то возьмите цикл с выводом простого значения, с которого мы начали.

Для инициализации проекта необходимо создать файл . Как это сделать?

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

Второй способ — самостоятельно создать текстовый файл, назвать его и заполнить все необходимые поля. Файл будет представлением приложения, в котором содержится его имя, версия, авторы и зависимости. На данном этапе может выглядеть так:

{
	"name": "simple app",
	"version": "0.0.1",
	"author": "Buyanov K.M.",
	"scripts": {
		"start": "node index.js"
	}
}

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

Раздел содержит набор команд, которые можно будет использовать при работе с приложением. Создание стартового скрипта считается правилом хорошего тона. Кроме того, это удобно: для запуска скрипта необходимо ввести команду , находясь в папке проекта.

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

Но вводить команду постоянно — не слишком рациональное расходование времени. Давайте упростим себе жизнь.

Находясь в папке проекта введём команду . Пакетный менеджер установит в папку компоненты фреймворка , в котором содержатся необходимые компоненты для написания простого HTTP-сервера.
После установки файл изменится, в нём появится поле .
Теперь создадим рядом в папке проекта новый файл . В нём будет содержаться код сервера.

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

var express = require('express'),
	app = express();	
app.set('port', 8080);
app.use(express.static(__dirname));
app.listen(app.get('port'), function() {
    console.log('Server started: http://localhost:' + app.get('port') + '/');
});

Вернитесь в . Измените значение команды следующим образом:
```
"start": "node static-file-server.js"
```

Подробнее про команды можно прочитать здесь.

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

Однострочные комментарии начинаются с двойного слэша . Текст считается комментарием до конца строки:

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

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

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

Совет: Не пренебрегайте комментариями в своих кодах. Они пригодятся вам при отладке и сопровождении программ. На этапе разработки бывает лучше закомментировать ненужный фрагмент программы, чем просто удалить. А вдруг его придется восстанавливать?

Импорт чужого CSS

Из предыдущего раздела понятно, как использовать чужой стиль в своем документе: просто укажите URL соответствующего файла в своих HTML-документах.

Вот и все. Но имейте в виду: если владелец сайта изменит свой стиль — у вас тоже поменяются все страницы! Может быть, проще скопировать его файл .css к себе на сервер.

Как подключить CSS — это лишь начало большой и интересной дороги по изучению веб-программирования. Курс «Профессия — веб-разработчик» познакомит вас с основными инструментами веб-разработчика: HTML, CSS, JavaScript и PHP. Годовая программа обучения идеально подходит людям, которые хотят с чистого листа освоить навыки профессионального веб-разработчика, а также начинающим программистам.

В итоге вы научитесь создавать свои собственные веб-проекты и сможете претендовать на позицию джуниор-разработчика.

Курс «Профессия Веб-разработчик»

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

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

Ожирение сайтов

По статистике HTTP Archive, в июне2018 года средний размер веб-страницы в интернете составил1720 КБ. За восемь лет он вырос в 3,7 раза. Есть несколько причин такого «ожирения» страниц, в том числе увеличение размера графических изображений (с 226 до890 КБ, в 3,8 раза). Но в относительных цифрах за восьмилетний период сильнее всего выросла доля JavaScript, то есть внешних файлов .js, которые загружаются вместе со страницей HTML. Их объем увеличился с 89 до371 КБ, то есть в 4,18 раза!

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

В чем причина?

Дело в том, что загрузка скриптов влияет на самую главную метрику производительности: время до появления интерактивности (Time to Interactive). Например, изображения на странице практически не влияют на эту метрику, потому что они не блокируют загрузку элементов интерфейса, а вот скрипты выполняются в основном потоке, то есть находятся на критичном пути рендеринга. Поэтому ни в коем случае нельзя безгранично раздувать количество скриптов на странице. Если пользователь с настольного компьютера или ноутбука еще кое-как загрузит страницу, то пользователь на смартфоне может ее не дождаться. Через десять секунд ожидания он просто закроет страницу.

outerHTML: HTML элемента целиком

Свойство содержит HTML элемента целиком. Это как плюс сам элемент.

Посмотрим на пример:

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

Да, звучит странно, и это действительно необычно, поэтому здесь мы и отмечаем это особо.

Рассмотрим пример:

Какая-то магия, да?

В строке мы заменили на . Во внешнем документе мы видим новое содержимое вместо . Но, как видно в строке (), старая переменная осталась прежней!

Это потому, что использование не изменяет DOM-элемент, а удаляет его из внешнего контекста и вставляет вместо него новый HTML-код.

То есть, при произошло следующее:

был удалён из документа.
Вместо него был вставлен другой HTML .
В осталось старое значение. Новый HTML не сохранён ни в какой переменной.

Здесь легко сделать ошибку: заменить , а потом продолжить работать с , как будто там новое содержимое. Но это не так. Подобное верно для , но не для .

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

Идентификаторы

Идентификатор — это последовательность букв, цифр, символов подчёркивания и знаков доллара . Цифра не может быть первым символом идентификатора, т. к. тогда интерпретатору JavaScript труднее отличать идентификаторы от чисел. Идентификаторы выступают в качестве имён переменных, функций, свойств объекта и т. д.
Для совместимости и простоты редактирования для составления идентификаторов обычно используются только символы ASCII и цифры. Однако в ECMAScript v3 идентификаторы могут содержать буквы и цифры из полного набора символов Unicode. Это позволяет программистам давать переменным имена на своих родных языках и использовать в них математические символы:

Исторически, программисты использовали разные способы объединения нескольких слов для записи идентификаторов. Сегодня есть два устоявшихся негласных стиля: camelCase и snake_case.
В JavaScript наиболее популярным стилем именования идентификаторов, состоящих из нескольких слов, является camelCase – «верблюжья» нотация. Это означает, что первая буква является строчной, а первые буквы всех последующих слов – прописными, например:

Хотя это не является требованием, рекомендуется следовать этому правилу, чтобы не отступать от формата встроенных функций и объектов ECMAScript.

Внимание: В JavaScript объединение нескольких слов для записи идентификаторов с применением дефисов запрещено. Они зарезервированы для математических вычитаний

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

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

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

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

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

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

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

Метод prompt()

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

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

result — строка, содержащая текст, введенный пользователем, или значение .
сообщение — строка текста для отображения пользователю (обычно это вопрос). Этот параметр является необязательным и может быть опущен, если в окне подсказки ничего не отображается.
значение по умолчанию — строка, которая отображается по умолчанию в поле ввода, обычно второй аргумент оставляют пустым и записывают так — «».

Если пользователь щелкает на кнопке OK, метод возвращает значение, введенное в текстовом поле, а если выбирается кнопка Cancel (Отмена) или окно закрывается иным образом, то возвращается . Вот пример:

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

Начало

Для разработчиков сайтов на wordpress не ни какого секрета, что в это CMS существует событие (речь не про функцию) wp_enqueue_scripts, которое и осуществляет подключение ваших css и js. Правильным решением для подключения стилей и javascript’ов своей темы будет создать функцию и добавить её к событию. Такой подход реализован во множестве тем и (для тех кто шарти) в underscores.me. И так как это выглядит.

* в файле functions.php
*/
function your_preffix_scripts(){
   wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'your_preffix_scripts' );

Такой код подключит на ваш сайт файл style.css из корня вашей темы

Тут важно упомянуть функции wp_enqueue_style и wp_enqueue_style. С помощью них вы и подключаете свои скрипты

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

Итого

Скрипты можно вставлять на страницу с помощью тега <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 файл к веб-документу

Поделиться
Твитнуть
Поделиться

Итоги

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

← предыдущая
следующая →