Содержание

JavaScript — Знакомство. Подключение к странице

  • Статьи
  • Видеоуроки
  • Таймлайн
  • Вопросы
  • Поиск
    • Войти
    • Регистрация
  • HTML & CSS
  • JavaScript
  • Bootstrap

Подключение JavaScript кода

JavaScript может быть встроен в HTML документ с помощью тега

<script>. Пример:


<!DOCTYPE html>
<html>
    <head>
      <title>Страница с JS кодом</title>
    </head>
    <body>
        <script type="text/javascript">
          alert(Hello World!)
        </script>
    </body>
</html>

Такие вставки кода будут исполняться по мере того как браузер встречает их в HTML документе. На время исполнения кода браузер приостановит парсинг и отрисовку страницы. А это значит что:

  1. DOM дерево еще не будет целиком построено
  2. Пользователь увидит отрисованной лишь верхнюю часть страницы
  3. JS код не сможет работать с тегами из нижней части документа

Можно подключить JavaScript код по URL адресу, таким образом:

<script src="http://example.com/jquery.js"></script>

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

</body>. Так пользователь увидит отрисованную страницу раньше чем успеет загрузиться и выполниться весь необходимый JS код. Быстрым в работе сайтом приятно пользоваться, за это стоит бороться.

Полезно пользоваться популярными CDN для подключения библиотек jquery, lodash и пр. Браузеры кэшируют такие файлы, что снижает нагрузку на канал пользователя, увеличивает скорость отрисовки страницы, ведь теперь не нужно ждать скачивания файла. Пример:

<script src="http://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"></script>

Другие полезные приемы:

  1. Атрибут async для асинхронного подключения JS файлов. Так подключают Яндекс Метрику, Google Analytics и не только;
  2. Склейка нескольких JS файлов в один. Для этого используют специальные инструменты коих развелось пруд пруди: Webpack, Gulp, Grunt;
  3. Минификация JS кода. Выкидываются пробелы и комментарии, меняются названия переменных на более короткие, происходит еще много разной магии. Эта процедура также требует спец.инструментов;
  4. Кэширование JS файлов в браузере навечно с одновременным версионированием — добавлением в имя файла хэша: jquery.kjb234kjb23.js. При любом изменении JS кода создается новый файл c новым хэшом в названии.

JavaScript Установка



JavaScript в теге <script>

В HTML код JavaScript должен быть вставлен между тегами

<script> и </script>

В старых примерах JavaScript может использоваться атрибут type: <script type="text/javascript">.
Сейчас атрибут type не требуется: <script>.
JavaScript является языком сценариев по умолчанию в HTML.


Функция и событие JavaScript

JavaScript функция function — блок кода JavaScript, которая может быть выполнена, когда она «вызывается» .

Например, функцию можно вызвать, когда возникает событие, при нажатии пользователем кнопки.

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


JavaScript в <head> или <body>

В документе HTML, можно поместить любое количество скриптов.

Скрипты можно поместить в <body>

, или в <head> раздела страницы HTML, или в обоих.


JavaScript в <head>

В этом примере функция JavaScript помещается в <head> раздела страницы HTML.

Функция вызывает (событие) при нажатии кнопку:

Пример


<script>
function myFunction() {
   document.getElementById(«demo»).innerHTML = «Параграф изменен.»;
}
</script>

</head>
<body>

<h2>Веб страница</h2>
<p>Параграф</p>
<button type=»button»>Попробовать</button>

</body>
</html>

Редактор кода »

JavaScript в <body>

В этом примере функция JavaScript помещается в <body> раздела страницы HTML.

Функция вызывает (событие) при нажатии кнопку:

Пример


<h2>Веб страница</h2>

<p>Параграф</p>
<button type=»button»>Попробовать</button>

<script>
function myFunction() {
   document.getElementById(«demo»).innerHTML = «Параграф изменен.»;
}
</script>

</body>
</html>

Редактор кода »

Размещение скриптов в нижней части элемента <body> повышает скорость отображения, так как компиляция скриптов замедляет отображение.


Внешний JavaScript

Скрипты также могут быть помещены во внешние файлы: myScript.js

Пример

function myFunction() {
   document.getElementById(«demo»).innerHTML = «Параграф изменен.»;
}

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

Файлы JavaScript имеют расширение .js.

Чтобы использовать внешний скрипт, вводим:

myScript.js — имя файла скрипта, в файле src (источник), атрибут тега <script>:

Можно поместить ссылку на внешний скрипт в <head> или <body>, как вам нравится

Скрипт будет вести себя так же, если бы он находился именно там, где находится тег <script>

Внешние скрипты не могут содержать теги <script>.


Преимущества внешнего JavaScript

Размещение скриптов во внешних файлах имеет некоторые преимущества:

  • Он разделяет HTML и код
  • Упрощает чтение и обслуживание HTML и JavaScript
  • Кэшированные файлы JavaScript могут ускорить загрузку страниц

Добавить несколько файлов скриптов на одну страницу — использовать несколько тегов <script>

Пример

<script src=»myScript1.js»></script>
<script src=»myScript2.js»></script>


Внешняя ссылка JavaScript

Внешний скрипт может указать полный адрес или относительный путь к текущей веб странице.

В этом примере используется полный URL-адрес для ссылки на скрипт:

В этом примере используется скрипт, расположенный в указанной папке на текущем веб сайте:

В этом примере приводятся ссылки на скрипт, расположенный в той же папке, что и текущая страница:


Как подключить JS в другой JS — kulibaba.net

Как подключить JS в другой JS

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

 


<script src="/js/my.js" type="text/javascript"></script>

 

Но как быть, если вам необходимо подключить скрипт внутри другого скрипта?

 

Тут возникает проблема: в JS нет подобных средств, как в других языках. (#include в C, import в java…)

 

Но можно написать свою функцию, которая будет справляться с поставленной задачей на все 100%!

 


 function include(url) {
        var script = document.createElement('script');
        script.src = url;
        document.getElementsByTagName('head')[0].appendChild(script);
    }

Вызов этой функции происходит самым простым способом:

 


include("/js/script.js");

 

 



17 комментариев:

1) мишка:(2014-02-23 23:16:30)

спасибо!



2) сергей:(2014-05-30 11:58:52)

вот это дело. хотя наверняка не заработает



3) гость:(2014-06-13 13:13:55)

а если скрипт на другом сервере?



4) Эмир:(2014-08-06 11:06:42)

«а если скрипт на другом сервере?»
то же самое



5) Антон:(2014-09-08 11:04:52)

Спасибо. все работает



6) Сергей:(2014-12-10 14:58:21)

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



7) андрей:(2015-12-10 07:13:31)

хех я доигрался рекурссию учудил, все зависло



8) sat:(2016-06-14 18:14:11)

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



9) дима:(2016-08-03 10:42:22)

спасибо



10) Иосиф:(2017-01-19 12:15:24)

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



11) mebel-catalog.blogspot.ru:(2017-04-22 08:22:47)

Мебель -> mebel-catalog.blogspot.ru



12) page.if.ua:(2018-03-02 17:54:16)

page.if.ua



13) mabufs.com:(2018-05-04 09:45:51)

mabufs.com



14) LANVisor:(2018-10-06 17:06:00)

посмотри здесь, может пригодится LANVisor.ru



15) тест:(2019-07-23 14:55:33)

тест



16) rardPag:(2019-10-23 23:27:44)

hi 🙂 bross 🙂



17) rardPag:(2019-11-04 18:33:59)

hi 🙂 bross 🙂



Как подключить JavaScript к HTML-документу

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

HTML-страницы и CMS

Современное интернет-программирование все чаще использует системы управления контентом (Content Management System — CMS). В этом случае подключение каких-либо файлов решается автоматически.

Подключение кода JS

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

Подключение шаблонов и фреймворков (например, jQuery) делается автоматически. JavaScript — это неотъемлемая составляющая браузера. Любая CMS это учитывает и использует максимально эффективно. Как правило, CMS в полной мере использует механизм AJAX, наиболее прогрессивные инструменты JS, но оставляет разработчику возможность корректировать и уточнять функционал страницы в браузере, особенно контролировать обработку событий.

Традиционное подключение JavaScript к HTML

Вариантов не так много. Можно вставить JS код тегом script в саму страницу (3) или подключить как внешний файл (1). У каждого варианта свои плюсы. Обычно разработчики используют оба варианта одновременно.

Подключение JS традиционным способом

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

Внешние файлы и серверное управление

Формирование HTML-документа при разработке на базе CMS и при ручном создании веб-ресурса программируется. Обработка событий, создание элементов страницы и внешних файлов может производиться так, как это удобно в каждом конкретном случае, в реальном масштабе времени.

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

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

как подключить javascript к html

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

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

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

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

javascript это

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

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

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

Динамика и обработка событий

Особенность JavaScript — изначально распределенные алгоритмы и события, которые могут сработать в самом непредсказуемом варианте. Программа (скрипт) на JS это далеко не программа на C/C++, PHP или Perl. Обычные языки программирования допускают события, динамику типов данных, параллельные вычисления, но оригинальность JS и его тесная связь с DOM привносит специфику в программирование на этом языке и, что очень важно, правильное размещение кода.

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

Динамика событий JS

Использование серверного языка PHP внутри JavaScript кода удобнее делать, когда это код непосредственно вставлен в HTML-документ. Не принято размещать PHP-код внутри внешнего файла *.js, хотя воображение современного разработчика мало чем ограничено, если он работает без той или иной системы управления сайтом.

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

Как подключиться к API с помощью JavaScript

Большая часть работы с JavaScript — это умение подключаться к API. Как начинающему разработчику, в какой-то момент вам, возможно, сказали просто «поиграть с некоторыми API!» узнать, что они из себя представляют и как с ними работать. Если вы когда-либо просматривали документацию по API и не знали, с чего начать и что делать, и разочаровались, эта статья для вас.

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

Предпосылки

Все остальное мы расскажем по пути.

Голы

Мы собираемся написать с нуля это простое веб-приложение, которое подключается к API Studio Ghibli, извлекает данные с помощью JavaScript и отображает их в интерфейсе веб-сайта. Это , а не , предназначенный для использования в качестве обширного ресурса по API или REST — просто самый простой из возможных примеров запуска и запуска, который можно построить в будущем.Мы выучим:

  • Что такое веб-API
  • Узнайте, как использовать HTTP-запрос GET с JavaScript
  • Как создавать и отображать HTML-элементы с помощью JavaScript.

Это будет выглядеть так:

Screen Shot 2017 12 07 at 2 57 35 PM

Давайте начнем.

Быстрый обзор

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

Мы сосредоточимся на веб-API, которые позволяют веб-серверу взаимодействовать со сторонним программным обеспечением. В этом случае веб-сервер использует HTTP-запросов для связи с общедоступным URL-адресом конечной точки , содержащей данные JSON. Если это сбивает с толку сейчас, это будет иметь смысл к концу статьи.

Возможно, вы знакомы с концепцией приложения CRUD , которое означает создание, чтение, обновление, удаление.Любой язык программирования может быть использован для создания приложения CRUD различными способами. Веб-API использует HTTP-запросы, которые соответствуют глаголам CRUD.

Действие HTTP-метод Описание
Создать ПОСТ Создает новый ресурс
Читать GET Извлекает ресурс
Обновление PUT / PATCH Обновляет существующий ресурс
Удалить DELETE Удаляет ресурс

Если вы слышали REST и RESTful API, это просто означает набор стандартов, соответствующих определенному архитектурному стилю.Большинство веб-приложений делают или стремятся соответствовать стандартам REST. В целом, существует лотов терминов, аббревиатур и понятий, которые нужно понять — HTTP, API, REST — поэтому нормально чувствовать растерянность и разочарование, особенно если в документации API предполагается, что вы уже знаете, что делать.

Настройка

Какова наша цель? Мы хотим получить данные для всех фильмов Studio Ghibli и отобразить заголовки и описания в виде сетки. Для некоторого базового знания Studio Ghibli — это японская анимационная студия, которая выпустила несколько фильмов, таких как Spirited Away, которые мой друг Крейг вдохновил меня использовать в качестве примера.

Начнем с создания файла index.html в новом каталоге. Проект будет состоять только из index.html , style.css и scripts.js в конце. Этот HTML-скелет просто ссылается на файл CSS и JavaScript, загружается шрифтом и содержит div с корнем с идентификатором . Этот файл завершен и не изменится. Мы будем использовать JavaScript, чтобы добавить все отсюда.

index.html

  

  <Голова>
    
    

     Приложение Ghibli </ title>

    <ссылка
      HREF = "https://fonts.googleapis.com/css?family=Dosis:400,700"
      отн = «таблица стилей»
    />
    <link href = "style.css" rel = "stylesheet" />
  </ HEAD>

  <Тело>
    <DIV> </ DIV>
    <script src = "scripts.js"> </ script>
  </ Body>
</ html> </code> </pre>
 <p> Поскольку эта статья посвящена концепциям API и JavaScript, я не буду объяснять, как работает CSS. Мы создадим стиль <strong>.CSS </strong>, который будет использоваться для создания сетки. Для краткости ниже я включил только самые подходящие <strong> CSS </strong>, но вы можете скопировать полный код CSS здесь. </p>
 <p> style.css </p>
 <pre> <code> #root {
  максимальная ширина: 1200 пикселей;
  поле: 0 авто;
}

.container {
  дисплей: гибкий;
  flex-wrap: обертывание;
}

.открытка {
  поле: 1рем;
  рамка: 1px сплошная серая;
}

экран @media и (минимальная ширина: 600 пикселей) {
  .открытка {
    flex: 1 1 calc (50% - 2rem);
  }
}

экран @media и (минимальная ширина: 900 пикселей) {
  ,открытка {
    flex: 1 1 calc (33% - 2rem);
  }
} </code> </pre>
 <p> Теперь у нас настроены HTML и CSS, поэтому вы можете создать <strong> scripts.js </strong>, и мы продолжим с этого. </p>
 <h3><span class="ez-toc-section" id="_API"> Подключение к API </span></h3>
 <p> Давайте посмотрим на документацию API Studio Ghibli. Этот API был создан, чтобы помочь разработчикам научиться взаимодействовать с ресурсами с помощью HTTP-запросов, что идеально подходит для нас здесь. Поскольку доступ к API можно получить множеством различных методов - JavaScript, PHP, Ruby, Python и т. Д. - документация для большинства API не дает конкретных инструкций по подключению.</p>
 <p> Мы можем видеть из этой документации, что она говорит нам, что мы можем делать запросы с <code> curl </code> или обычными вызовами REST, но мы, возможно, еще не знаем, как это сделать. </p>
 <h4><span class="ez-toc-section" id="_API-2"> Получение конечной точки API </span></h4>
 <p> Для начала перейдем к разделу фильмов. Справа вы увидите <code> GET / пленок </code>. Он покажет нам URL нашей конечной точки API, https://ghibliapi.herokuapp.com/films. Нажав на эту ссылку, вы увидите массив объектов в формате JSON. </p>
 <blockquote>
 <p> Если в вашем браузере нет расширения для просмотра файлов JSON, добавьте его сейчас, например, JSON View.Это значительно облегчит чтение JSON. Помните, если вы никогда не работали с JSON, прочитайте эту предварительную статью. </p>
 </blockquote>
 <h4><span class="ez-toc-section" id="_HTTP"> Получение данных с помощью HTTP-запроса </span></h4>
 <p> Прежде чем мы попытаемся поместить что-либо в интерфейс веб-сайта, давайте откроем соединение API. Мы сделаем это с помощью <code> объектов XMLHttpRequest </code>, которые позволяют открывать файлы и отправлять HTTP-запросы. </p>
 <p> Мы создадим переменную <code> запроса </code> и присвоим ей новый объект <code> XMLHttpRequest </code>.Затем мы откроем новое соединение с помощью метода <code> open () </code> - в аргументах мы определим тип запроса как <code> GET </code>, а также URL-адрес конечной точки API. Запрос завершен, и мы можем получить доступ к данным внутри функции <code> onload </code>. Когда мы закончим, мы отправим запрос. </p>
 <blockquote>
 <p> <strong> Примечание: </strong> На момент написания этой статьи <code> XMLHttpRequest </code> был методом по умолчанию для выполнения запроса API. Fetch API теперь имеет гораздо лучшую поддержку браузеров, поэтому вы также можете сделать эту статью, используя Fetch.Прочтите Как использовать API JavaScript Fetch, чтобы узнать, как это сделать. </p>
 </blockquote>
 <p> scripts.js </p>
 <pre> <code>
var request = new XMLHttpRequest ()


request.open ('GET', 'https://ghibliapi.herokuapp.com/films', правда)

request.onload = function () {
  
}


request.send () </code> </pre>
 <h4><span class="ez-toc-section" id="_JSON"> Работа с ответом JSON </span></h4>
 <p> Теперь мы получили ответ от нашего HTTP-запроса и можем работать с ним. Однако ответ находится в формате JSON, и нам нужно преобразовать этот JSON в объекты JavaScript, чтобы работать с ним.</p>
 <p> Мы собираемся использовать <code> JSON.parse () </code> для анализа ответа и создать переменную <code> данных </code>, которая содержит весь JSON в виде массива объектов JavaScript. Используя <code> forEach () </code>, мы будем консоль записывать название каждого фильма, чтобы убедиться, что он работает правильно. </p>
 <p> scripts.js </p>
 <pre> <code>
var data = JSON.parse (this.response)

data.forEach ((movie) => {
  
  console.log (movie.title)
}) </code> </pre>
 <p> Использование <em> Проверьте </em> по индексу <strong>.HTML </strong> и просмотр консоли, вы должны увидеть названия 20 фильмов Ghibli. Успех! </p>
 <p> Единственное, чего нам здесь не хватает, так это как-то справиться с ошибками. Что, если используется неправильный URL-адрес или он сломался и ничего не отображалось? Когда HTTP-запрос сделан, ответ возвращается с HTTP-кодами состояния. <code> 404 </code> - самый известный ответ, то есть <strong> Not Found </strong>, а <code> 200 </code> <strong> OK </strong> - успешный запрос. </p>
 <p> Давайте просто завернем наш код в оператор <code>, если </code>, выполнив любой ответ в диапазоне 200-300, и выпишем ошибку в случае сбоя запроса.Вы можете испортить URL, чтобы проверить ошибку. </p>
 <p> scripts.js </p>
 <pre> <code>
var data = JSON.parse (this.response)

if (request.status> = 200 && request.status <400) {
  data.forEach ((movie) => {
    console.log (movie.title)
  })
} еще {
  console.log ( 'ошибка')
} </code> </pre>
 <p> Вот весь код до сих пор. </p>
 <p> scripts.js </p>
 <pre> <code> var request = new XMLHttpRequest ()

request.open ('GET', 'https://ghibliapi.herokuapp.com/films', правда)
запрос.onload = function () {
  
  var data = JSON.parse (this.response)

  if (request.status> = 200 && request.status <400) {
    data.forEach ((movie) => {
      console.log (movie.title)
    })
  } еще {
    console.log ( 'ошибка')
  }
}

request.send () </code> </pre>
 <p> Мы успешно использовали HTTP-запрос <code> GET </code> для извлечения (или использования) конечной точки API, которая состояла из данных в формате JSON. Тем не менее, мы все еще застряли в консоли - мы хотим вывести эти данные на внешний интерфейс веб-сайта, что мы и сделаем, изменив DOM.</p>
 <h3><span class="ez-toc-section" id="i-12"> Отображение данных </span></h3>
 <p> Чтобы отобразить информацию в интерфейсе сайта, мы будем работать с DOM, который на самом деле является самим API, который позволяет JavaScript взаимодействовать с HTML. Если у вас нет опыта работы с DOM, я написал статью «Понимание и изменение DOM» в JavaScript для DigitalOcean, в которой будет разъяснено, что такое DOM и чем DOM отличается от исходного кода HTML. </p>
 <p> В конце наша страница будет состоять из изображения логотипа и контейнера с несколькими карточными элементами - по одному для каждой пленки.Каждая карточка будет иметь заголовок и абзац, который содержит название и описание каждого фильма. Вот как это выглядит, с загруженным только необходимым CSS: </p>
 <p>
      
    
   <img src="/800/600/https/www.taniarascia.com/static/2366ea0fa4f3157fd757e7edb20b04c3/a6d36/Screen-Shot-2017-12-07-at-3.56.13-PM.png" alt="Screen Shot 2017 12 07 at 3 56 13 PM" title="Screen Shot 2017 12 07 at 3 56 13 PM" />
  
     </p>
 <p> Если вы помните, наш <strong> index.html </strong> прямо сейчас имеет корневой div - <code> <div> </code> прямо сейчас. Мы получим к нему доступ с помощью <code> getElementById () </code>. Мы можем кратко удалить весь предыдущий код, который мы написали на данный момент, и мы добавим его через мгновение. </p>
 <p> скриптов.JS </p>
 <pre> <code> const app = document.getElementById ('root') </code> </pre>
 <p> Если вы не уверены на 100%, что делает <code> getElementById () </code>, возьмите приведенный выше код и <code> console.log (app) </code>. Это должно помочь прояснить, что на самом деле там происходит. </p>
 <p> Первым делом на нашем сайте стоит логотип, который является элементом <code> img </code>. Мы создадим элемент изображения с <code> createElement () </code>. </p>
 <pre> <code> const logo = document.createElement ('img') </code> </pre>
 <p> Пустой <code> img </code> не годится, поэтому мы установим для атрибута <code> src </code> логотип <code>.PNG </code>. (Найдено здесь) </p>

 <p> На этот раз мы создадим еще один элемент, <code> div </code>, и установим для атрибута <code> class </code> значение <code> container </code>. </p>
 <pre> <code> const container = document.createElement ('div')
container.setAttribute ('class', 'container') </code> </pre>
 <p> Теперь у нас есть логотип и контейнер, и нам просто нужно разместить их на сайте. Мы будем использовать метод <code> appendChild () </code>, чтобы добавить изображение логотипа и контейнер Div в корень приложения. </p>
 <pre> <code> приложение.AppendChild (логотип)
app.appendChild (контейнер) </code> </pre>
 <p> Вот полный код для этого. </p>
 <p> scripts.js </p>
 <pre> <code> const app = document.getElementById ('root')

const logo = document.createElement ('img')
logo.src = 'logo.png'

const container = document.createElement ('div')
container.setAttribute ('class', 'container')

app.appendChild (логотип)
app.appendChild (контейнер) </code> </pre>
 <p> После сохранения в передней части веб-сайта вы увидите следующее. </p>
 <p> Элементы </p>
 <pre> <code> <div>
  <img src = "логотип.png "/>
  <DIV> </ DIV>
</ div> </code> </pre>
 <p> Это будет видно только на вкладке <em> Inspect </em> Elements, но не в исходном коде HTML, как описано в статье DOM, которую я связал. </p>
 <p> Теперь мы собираемся вставить весь наш код из более раннего обратно. Последний шаг будет заключаться в том, чтобы взять то, что мы утешали ранее, и превратить их в элементы карты. </p>
 <p> Вставьте все обратно, но мы просто посмотрим, что внутри <code> forEach () </code>. </p>
 <pre> <code> данных.forEach ((фильм) => {
  console.log (movie.title)
  console.log (movie.description)
}) </code> </pre>
 <p> Вместо <code> console.log </code>, мы будем использовать <code> textContent </code>, чтобы установить текст элемента HTML для данных из API. Я использую <code> substring () </code> для элемента <code> p </code>, чтобы ограничить описание и сохранить равную длину каждой карты. </p>
 <p> scripts.js </p>
 <pre> <code> data.forEach ((movie) => {
  
  const card = document.createElement ('div')
  card.setAttribute ('class', 'card')

  
  const h2 = документ.createElement ( 'h2')
  h2.textContent = movie.title

  
  const p = document.createElement ('p')
  movie.description = movie.description.substring (0, 300)
  p.textContent = `$ {movie.description} ...`

  
  container.appendChild (карта)

  
  card.appendChild (h2)
  card.appendChild (р)
}) </code> </pre>
 <p> Я также заменю ошибку консоли на ошибку на внешнем интерфейсе, используя лучший элемент HTML, <code> Marquee </code>! (Я делаю это только в шутку для забавных и наглядных целей, на самом деле не использую <code> Marquee </code> в каких-либо реальных приложениях или не воспринимайте меня всерьез здесь.) </p>
 <pre> <code> const errorMessage = document.createElement ('marquee')
errorMessage.textContent = `Гах, это не работает!`
app.appendChild (errorMessage) </code> </pre>
 <p> И мы закончили! Вот окончательный код <strong> scripts.js </strong>. </p>
 <p> scripts.js </p>
 <pre> <code> const app = document.getElementById ('root')

const logo = document.createElement ('img')
logo.src = 'logo.png'

const container = document.createElement ('div')
container.setAttribute ('class', 'container')

приложение.AppendChild (логотип)
app.appendChild (контейнер)

var request = new XMLHttpRequest ()
request.open ('GET', 'https://ghibliapi.herokuapp.com/films', правда)
request.onload = function () {
  
  var data = JSON.parse (this.response)
  if (request.status> = 200 && request.status <400) {
    data.forEach ((movie) => {
      const card = document.createElement ('div')
      card.setAttribute ('class', 'card')

      const h2 = document.createElement ('h2')
      h2.textContent = movie.title

      const p = документ.createElement ( 'р')
      movie.description = movie.description.substring (0, 300)
      p.textContent = `$ {movie.description} ...`

      container.appendChild (карта)
      card.appendChild (h2)
      card.appendChild (р)
    })
  } еще {
    const errorMessage = document.createElement ('marquee')
    errorMessage.textContent = `Гах, это не работает!`
    app.appendChild (ErrorMessage)
  }
}

request.send () </code> </pre>
 <p> А вот с полными стилями CSS вот как выглядит конечный продукт. </p>
 <p>
      
    
   <img src="/800/600/https/www.taniarascia.com/static/f14c4970c728355155f42aad3b59caae/a6d36/Screen-Shot-2017-12-07-at-2.57.35-PM.png" alt="Screen Shot 2017 12 07 at 2 57 35 PM" title="Screen Shot 2017 12 07 at 2 57 35 PM" />
  
     </p>
 <p> Опять же, здесь есть ссылка на живое приложение и исходный код.</p>

 <h3><span class="ez-toc-section" id="i-13"> Заключение </span></h3>
 <p> Поздравляем, вы использовали простой JavaScript для подключения к API с помощью HTTP-запросов. Надеюсь, вы лучше понимаете, что такое конечная точка API, как браузер взаимодействует со сторонними данными API с помощью запросов и ответов, как анализировать JSON в массивы и объекты, понятные JavaScript, и как полностью создать интерфейс с помощью JavaScript. , </p>
 <p> Мы сделали все это, не беспокоясь о таких вещах, как Node.js, npm, Webpack, React, Angular, инструменты сборки, Axios и другие популярные условия разработки, зависимости и платформы, которые могут сбить вас с толку в связи с тем, что происходит внутри. это самая простая форма.</p>
 <p> Я надеюсь, что вы нашли эту статью полезной, и, пожалуйста, не стесняйтесь поделиться или исправить меня, где я не прав. </p><div> javascript - подключение к удаленному SSH-серверу (через консоль Node.js / html5) </h2><div class="advv">
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-1812626643144578"
     data-ad-slot="9935184599"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
    
    
        

    
        
                
                
                    
                
                    
                        Переполнение стека
                    



        

             <ol role="presentation">
                 <li>
                    
                        Товары
                    
                 </li>

                     <li>
                        Клиенты
                     </li>
                     <li>
                        Случаи использования
                     </li>
             </ol>
            
                
                 <ol>
                     <li>
                        
                            Переполнение стека
                            Публичные вопросы и ответы
                        
                     </li>
                     <li>
                        
                            Команды
                            Частные вопросы и ответы для вашей команды
                        
                     </li>
                     <li>
                        
                            предприятие
                            Частные вопросы и ответы для вашего предприятия
                        
                     </li>
                     <li>
                        
                            работы
                            Программирование и связанные с ним технические возможности карьерного роста
                        
                     </li>
                     <li>
                        
                            Талант
                            Нанимать технический талант
                        
                     </li>
                     <li>
                        
                            реклама
                            Связаться с разработчиками по всему миру
                        
                     </li>

                 </ol>
            

            
                    
                        
                        
                        
    
        
             <p> Загрузка… </p>
        
    

    
    

    

                    
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      ,<h2><span class="ez-toc-section" id="_JavaScript-6"> операторов JavaScript </span></h2><div class="advv">
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-1812626643144578"
     data-ad-slot="9935184599"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
      


 <hr/>


 <h4><span class="ez-toc-section" id="i-14"> Пример </span></h4>
  <p> Присвойте значения переменным и сложите их вместе: </p>
 <p>
 var x = 5; // присваиваем значение 5
 х <br/>
 var y = 2; // присваиваем значение
 От 2 до <br/>
 var z = x + y; // присваиваем значение 7 z (x + y)
 </p>
Попробуй сам "


 <p> Оператор присвоения <strong> </strong> (<code> = </code>) присваивает значение переменной. </p>


 <p> Оператор <strong> дополнительно </strong> (<code> + </code>) добавляет номера: </p>


 <p> Оператор умножения <strong> Оператор </strong> (<code> * </code>) умножает числа.</p>

 <hr/>

 <hr/>

 <h3><span class="ez-toc-section" id="JavaScript-7"> JavaScript Арифметические Операторы </span></h3>
 <p> Арифметические операторы используются для выполнения арифметических чисел: </p>

 <table>
 <tr>
 <th> Оператор </th>
 <th> Описание </th>
 </tr>
 <tr>
 <td> + </td>
 <td> Дополнение </td>
 </tr>
 <tr>
 <td> - </td>
 <td> вычитание </td>
 </tr>
 <tr>
 <td> * </td>
 <td> Умножение </td>
 </tr>
 <tr>
 <td> ** </td>
 <td> экспонента (ES2016) </td>
 </tr>
 <tr>
 <td>/</td>
 <td> Дивизион </td>
 </tr>
 <tr>
 <td>% </td>
 <td> Модуль (Остаток от деления) </td>
 </tr>
 <tr>
 <td> ++ </td>
 <td> Приращение </td>
 </tr>
 <tr>
 <td> - </td>
 <td> Декремент </td>
 </tr>
 </table>


 <p> Арифметические операторы полностью описаны в <strong>
JS Арифметика </strong> глава.</p>

 <hr/>

 <h3><span class="ez-toc-section" id="_JavaScript-7"> Операторы назначения JavaScript </span></h3>
 <p> Операторы присваивания присваивают значения переменным JavaScript. </p>
 <table>
 <tr>
 <th> Оператор </th>
 <th> Пример </th>
 <th> так же, как </th>
 </tr>
 <tr>
 <td> = </td>
 <td> х = у </td>
 <td> х = у </td>
 </tr>
 <tr>
 <td> + = </td>
 <td> х + = у </td>
 <td> х = х + у </td>
 </tr>
 <tr>
 <td> - = </td>
 <td> х - = у </td>
 <td> х = х - у </td>
 </tr>
 <tr>
 <td> * = </td>
 <td> х * = у </td>
 <td> х = х * у </td>
 </tr>
 <tr>
 <td> / = </td>
 <td> x / = y </td>
 <td> х = х / у </td>
 </tr>
   <tr>
 <td>% = </td>
 <td> х% = у </td>
 <td> х = х% у </td>
   </tr>
 <tr>
 <td> ** = </td>
 <td> х ** = у </td>
 <td> х = х ** у </td>
 </tr>
 </table>

 <p> Оператор </strong> сложения </strong> (<code> + = </code>) добавляет значение к переменной.</p>



 <p> Назначение операторов полностью описано в <strong>
JS Assignment </strong> глава. </p>

 <hr/>

 <h3><span class="ez-toc-section" id="_JavaScript-8"> Строковые операторы JavaScript </span></h3>
 <p> Оператор <code> + </code> также можно использовать для добавления (объединения) строк. </p>


 <h4><span class="ez-toc-section" id="i-15"> Пример </span></h4>
 <p>
  вар
txt1 = "Джон"; <br/>
  вар
txt2 = "Доу"; <br/>
  вар
txt3 = txt1 + "" + txt2;
 </p>
 <p> Результат txt3 будет: </p>
 <p>
 <code> Джон Доу </code> </p>
Попробуй сам "


 <p> Оператор присваивания <code> + = </code> также можно использовать для добавления (объединения) строк: </p>


 <h4><span class="ez-toc-section" id="i-16"> Пример </span></h4>
 <p>
  вар
txt1 = "Что очень"; <br/>
txt1 + = "хороший день"; </p>
 <p> Результат txt1 будет: </p>
 <p>
 <code> Какой очень хороший день </code> </p>
Попробуй сам "


 <p> При использовании со строками оператор + называется оператором конкатенации.</p>

 <hr/>

 <h3><span class="ez-toc-section" id="i-17"> Добавление строк и чисел </span></h3>
 <p> Добавление двух чисел вернет сумму, но добавление числа и строки вернет строку: </p>


 <h4><span class="ez-toc-section" id="i-18"> Пример </span></h4>
 <p>
  вар
х = 5 + 5; <br/>
  вар
у = "5" + 5; <br/>
  вар
z = "Привет" + 5; <br/>
 </p>
 <p> Результат <em> x </em>, <em> y </em> и <em> z </em> будет: </p>
 <p>
 <code>
10 <br/>
55 <br/>
Hello5
 </code>
 </p>
Попробуй сам "



 <p> Если вы добавите число и строку, результатом будет строка! </p>

 <hr/>

 <h3><span class="ez-toc-section" id="_JavaScript-9"> Операторы сравнения JavaScript </span></h3>

 <table>
 <tr>
 <th> Оператор </th>
 <th> Описание </th>
 </tr>
 <tr>
 <td> == </td>
 <td> равно </td>
 </tr>
 <tr>
 <td> === </td>
 <td> равное значение и равный тип </td>
 </tr>
 <tr>
 <td>! = </td>
 <td> не равно </td>
 </tr>
 <tr>
 <td>! == </td>
 <td> не равно значению или не равно типу </td>
 </tr>
 <tr>
 <td>> </td>
 <td> больше </td>
 </tr>
 <tr>
 <td> <</td>
 <td> менее </td>
 </tr>
 <tr>
 <td>> = </td>
 <td> больше или равно </td>
 </tr>
 <tr>
 <td> <= </td>
 <td> меньше или равно </td>
 </tr>
 <tr>
 <td>? </td>
 <td> троичный оператор </td>
 </tr>
 </table>


 <p> Операторы сравнения полностью описаны в <strong>
Сравнение JS </strong> глава.</p>

 <hr/>

 <h3><span class="ez-toc-section" id="JavaScript-8"> JavaScript логические операторы </span></h3>

 <table>
 <tr>
 <th> Оператор </th>
 <th> Описание </th>
 </tr>
 <tr>
 <td> && </td>
 <td> логично и </td>
 </tr>
 <tr>
 <td> || </td>
 <td> логический или </td>
 </tr>
 <tr>
 <td>! </td>
 <td> логично, а не </td>
 </tr>
 </table>



 <hr/>
 <h3><span class="ez-toc-section" id="_JavaScript_Type"> Операторы JavaScript Type </span></h3>

 <table>
 <tr>
 <th> Оператор </th>
 <th> Описание </th>
 </tr>
 <tr>
 <td> typeof </td>
 <td> Возвращает тип переменной </td>
 </tr>
 <tr>
 <td> экземпляр </td>
 <td> Возвращает true, если объект является экземпляром типа объекта </td>
 </tr>
 </table>



 <hr/>

 <h3><span class="ez-toc-section" id="_JavaScript-10"> Битовые операторы JavaScript </span></h3>
 Операторы <p> бит работают на 32-битных числах.</p>
Любой числовой операнд в операции преобразуется в 32-разрядное число.
Результат конвертируется обратно в число JavaScript.


 <table>
 <tr>
 <th> Оператор </th>
 <th> Описание </th>
 <th> Пример </th>
 <th> так же, как </th>
 <th> Результат </th>
 <th> Десятичное число </th>
 </tr>
 <tr>
 <td> и </td>
 <td> И </td>
 <td> 5 & 1 </td>
 <td> 0101 и 0001 </td>
 <td> 0001 </td>
 <td> 1 </td>
 </tr>
 <tr>
 <td> | </td>
 <td> ИЛИ </td>
 <td> 5 | 1 </td>
 <td> 0101 | 0001 </td>
 <td> 0101 </td>
 <td> 5 </td>
 </tr>
 <tr>
 <td> ~ </td>
 <td> НЕ </td>
 <td> ~ 5 </td>
 <td> ~ 0101 </td>
 <td> 1010 </td>
 <td> 10 </td>
 </tr>
 <tr>
 <td> ^ </td>
 <td> XOR </td>
 <td> 5 ^ 1 </td>
 <td> 0101 ^ 0001 </td>
 <td> 0100 </td>
 <td> 4 </td>
 </tr>
 <tr>
 <td> << </td>
 <td> Нулевое заполнение левый сдвиг </td>
 <td> 5 << 1 </td>
 <td> 0101 << 1 </td>
 <td> 1010 </td>
 <td> 10 </td>
 </tr>
 <tr>
 <td> >> </td>
 <td> Подпись вправо сдвиг </td>
 <td> 5 >> 1 </td>
 <td> 0101 >> 1 </td>
 <td> 0010 </td>
 <td> 2 </td>
 </tr>
 <tr>
 <td> >>> </td>
 <td> Нулевое заполнение, правое смещение </td>
 <td> 5 >>> 1 </td>
 <td> 0101 >>> 1 </td>
 <td> 0010 </td>
 <td> 2 </td>
 </tr>
 </table>




 <p> В приведенных выше примерах используются 4-битные неподписанные примеры.Но JavaScript использует 32-битные числа со знаком. <br/>
Из-за этого в JavaScript ~ 5 не вернет 10. Он вернет -6. <br/>
~ 00000000000000000000000000000101 вернет 11111111111111111111111111111010 </p>
 <p> Битовые операторы полностью описаны в <strong> JS
Побитовая глава </strong>. </p>

 <hr/>





 <hr/>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    ,<div class='yarpp-related yarpp-related-none'>
<p>No related posts.</p>
</div>
											</div><!--/.entry-->
					
										
				</div><!--/.post-content-->
				<div class="post-sharrre group">
	<div id="twitter" data-url="https://ylianova.ru/javascript/javascript-podklyuchit-sajt-dlya-vebmasterov-uchebniki-dlya-veb-programmistov.html" data-text="Javascript подключить: Сайт для вебмастеров, учебники для веб-программистов." data-title="Tweet"></div>
	<div id="facebook" data-url="https://ylianova.ru/javascript/javascript-podklyuchit-sajt-dlya-vebmasterov-uchebniki-dlya-veb-programmistov.html" data-text="Javascript подключить: Сайт для вебмастеров, учебники для веб-программистов." data-title="Like"></div>
	<div id="googleplus" data-url="https://ylianova.ru/javascript/javascript-podklyuchit-sajt-dlya-vebmasterov-uchebniki-dlya-veb-programmistov.html" data-text="Javascript подключить: Сайт для вебмастеров, учебники для веб-программистов." data-title="+1"></div>
	<div id="pinterest" data-url="https://ylianova.ru/javascript/javascript-podklyuchit-sajt-dlya-vebmasterov-uchebniki-dlya-veb-programmistov.html" data-text="Javascript подключить: Сайт для вебмастеров, учебники для веб-программистов." data-title="Pin It"></div>
</div><!--/.post-sharrre-->

<script type="text/javascript">
	// Sharrre
	jQuery(document).ready(function(){
		jQuery('#twitter').sharrre({
			share: {
				twitter: true
			},
			template: '<a class="box group" href="#"><div class="count" href="#">{total}</div><div class="share"><i class="fa fa-twitter"></i></div></a>',
			enableHover: false,
			enableTracking: true,
			buttons: { twitter: {via: ''}},
			click: function(api, options){
				api.simulateClick();
				api.openPopup('twitter');
			}
		});
		jQuery('#facebook').sharrre({
			share: {
				facebook: true
			},
			template: '<a class="box group" href="#"><div class="count" href="#">{total}</div><div class="share"><i class="fa fa-facebook-square"></i></div></a>',
			enableHover: false,
			enableTracking: true,
			click: function(api, options){
				api.simulateClick();
				api.openPopup('facebook');
			}
		});
		jQuery('#googleplus').sharrre({
			share: {
				googlePlus: true
			},
			template: '<a class="box group" href="#"><div class="count" href="#">{total}</div><div class="share"><i class="fa fa-google-plus-square"></i></div></a>',
			enableHover: false,
			enableTracking: true,
			urlCurl: 'https://ylianova.ru/wp-content/themes/anew/js/sharrre.php',
			click: function(api, options){
				api.simulateClick();
				api.openPopup('googlePlus');
			}
		});
		jQuery('#pinterest').sharrre({
			share: {
				pinterest: true
			},
			template: '<a class="box group" href="#" rel="nofollow"><div class="count" href="#">{total}</div><div class="share"><i class="fa fa-pinterest"></i></div></a>',
			enableHover: false,
			enableTracking: true,
			buttons: {
			pinterest: {
				description: 'Javascript подключить: Сайт для вебмастеров, учебники для веб-программистов.'				}
			},
			click: function(api, options){
				api.simulateClick();
				api.openPopup('pinterest');
			}
		});
	});
</script>				
			</div><!--/.post-inner-->
			
		</article><!--/.post-->			
			
		
		<ul class="post-nav group">
		<li class="next"><a href="https://ylianova.ru/raznoe-2/vlog-chto-eto-chto-takoe-vlogi-i-blogi-yandeks-kyu.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Влог что это: «Что такое влоги и блоги?» – Яндекс.Кью</span></a></li>
		<li class="previous"><a href="https://ylianova.ru/raznoe-2/znachok-and-na-klaviature-kak-postavit-znak-kopirajt-na-klaviature-yandeks-kyu.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Значок and на клавиатуре: «Как поставить знак копирайт на клавиатуре?» – Яндекс.Кью</span></a></li>
	</ul>
	
		
	    <div class="wpdiscuz_top_clearing"></div>
    <div id="comments" class="comments-area"><div id="respond" style="width: 0;height: 0;clear: both;margin: 0;padding: 0;"></div>            <h3 id="wc-comment-header">
                                Отправить ответ            </h3>
                    <div id="wpcomm" class="wpdiscuz_unauth wpd-default">
            <div class="wpdiscuz-form-top-bar">
                <div class="wpdiscuz-ftb-left">
                                                            <div id="wc_show_hide_loggedin_username">
                                            </div>
                </div>
                                <div class="wpd-clear"></div>
            </div>


                        <div class="wc_social_plugin_wrapper">
                            </div>
                    <div class="wc-form-wrapper wc-main-form-wrapper"  id='wc-main-form-wrapper-0_0' >
            <div class="wpdiscuz-comment-message" style="display: block;"></div>
                                        <form class="wc_comm_form wc_main_comm_form" method="post"  enctype="multipart/form-data">
                    <div class="wc-field-comment">
                        <div class="wpdiscuz-item wc-field-textarea" >
                            <div class="wpdiscuz-textarea-wrap ">

                                                                                                        <div class="wc-field-avatararea">
                                        <img alt='avatar' src='https://secure.gravatar.com/avatar/?s=40&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/?s=80&d=mm&r=g 2x' class='avatar avatar-40 photo avatar-default' height='40' width='40' loading='lazy'/>                                    </div>
                                
                                <textarea id="wc-textarea-0_0"   placeholder="Начать обсуждение..." required name="wc_comment" class="wc_comment wpd-field"></textarea>
                                                                                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="wc-form-footer"  style="display: none;"> 
                                <div class="wpd-form-row">
                    <div class="wpd-form-col-left">
                        <div class="wpdiscuz-item wc_name-wrapper wpd-has-icon">
                                <div class="wpd-field-icon"><i class="fas fa-user"></i></div>
                                                <input value="" required="required" class="wc_name wpd-field" type="text" name="wc_name" placeholder="Имя*" maxlength="50" pattern=".{3,50}" title="">
                            </div>
                        <div class="wpdiscuz-item wc_email-wrapper wpd-has-icon">
                                    <div class="wpd-field-icon"><i class="fas fa-at"></i></div>
                                                <input value="" required="required" class="wc_email wpd-field" type="email" name="wc_email" placeholder="Email*">
                            </div>
                            <div class="wpdiscuz-item wc_website-wrapper wpd-has-icon">
                                            <div class="wpd-field-icon"><i class="fas fa-link"></i></div>
                                        <input value="" class="wc_website wpd-field" type="text" name="wc_website" placeholder="Website">
                                            </div>
                        </div>
                <div class="wpd-form-col-right">
                    <div class="wc-field-captcha wpdiscuz-item wc_captcha-wrapper">
            <div class="wc-captcha-input">
                <input type="text" maxlength="5" value="" autocomplete="off" required="required" name="wc_captcha"  class="wpd-field wc_field_captcha" placeholder="Code" title="Вставьте код CAPTCHA">
            </div>
            <div class="wc-label wc-captcha-label">
                                <a class="wpdiscuz-nofollow" href="#" rel="nofollow"><img alt="wpdiscuz_captcha" class="wc_captcha_img" src="https://ylianova.ru/wp-content/plugins/wpdiscuz/utils/captcha/captcha.php?key=c5f805d2fde25b"  width="80" height="26"/></a><a class="wpdiscuz-nofollow wc_captcha_refresh_img" href="#" rel="nofollow"><img  alt="refresh" class="" src="https://ylianova.ru/wp-content/plugins/wpdiscuz/assets/img/captcha-loading.png" width="16" height="16"/></a>
                <input type="hidden" id="c5f805d2fde25b" class="wpdiscuz-cnonce" name="cnonce" value="c5f805d2fde25b" />
            </div>
            <div class="clearfix"></div>
        </div>
                <div class="wc-field-submit">
                                            
                                            <label class="wpd_label" title="Сообщать о всех новых ответах на мои комментарии">
                            <input id="wc_notification_new_comment-0_0" class="wc_notification_new_comment-0_0 wpd_label__checkbox" value="comment" type="checkbox" name="wpdiscuz_notification_type" />
                            <span class="wpd_label__text">
                                <span class="wpd_label__check">
                                    <i class="fas fa-bell wpdicon wpdicon-on"></i>
                                    <i class="fas fa-bell-slash wpdicon wpdicon-off"></i>
                                </span>
                            </span>
                        </label>
                                                                <input class="wc_comm_submit wc_not_clicked button alt" type="submit" name="submit" value="Оставить комментарий">
        </div>
                </div>
                    <div class="clearfix"></div>
        </div>
                            </div>
                    <div class="clearfix"></div>
                    <input type="hidden" class="wpdiscuz_unique_id" value="0_0" name="wpdiscuz_unique_id">
                </form>
                        </div>
                <div id = "wpdiscuz_hidden_secondary_form" style = "display: none;">
                    <div class="wc-form-wrapper wc-secondary-form-wrapper"  id='wc-secondary-form-wrapper-wpdiscuzuniqueid'  style='display: none;' >
            <div class="wpdiscuz-comment-message" style="display: block;"></div>
                            <div class="wc-secondary-forms-social-content"></div><div class="clearfix"></div>
                                        <form class="wc_comm_form wc-secondary-form-wrapper" method="post"  enctype="multipart/form-data">
                    <div class="wc-field-comment">
                        <div class="wpdiscuz-item wc-field-textarea" >
                            <div class="wpdiscuz-textarea-wrap ">

                                                                                                        <div class="wc-field-avatararea">
                                        <img alt='avatar' src='https://secure.gravatar.com/avatar/?s=48&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/?s=96&d=mm&r=g 2x' class='avatar avatar-48 photo avatar-default' height='48' width='48' loading='lazy'/>                                    </div>
                                
                                <textarea id="wc-textarea-wpdiscuzuniqueid"   placeholder="Присоединиться к обсуждению..." required name="wc_comment" class="wc_comment wpd-field"></textarea>
                                                                                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="wc-form-footer"  style="display: none;"> 
                                <div class="wpd-form-row">
                    <div class="wpd-form-col-left">
                        <div class="wpdiscuz-item wc_name-wrapper wpd-has-icon">
                                <div class="wpd-field-icon"><i class="fas fa-user"></i></div>
                                                <input value="" required="required" class="wc_name wpd-field" type="text" name="wc_name" placeholder="Имя*" maxlength="50" pattern=".{3,50}" title="">
                            </div>
                        <div class="wpdiscuz-item wc_email-wrapper wpd-has-icon">
                                    <div class="wpd-field-icon"><i class="fas fa-at"></i></div>
                                                <input value="" required="required" class="wc_email wpd-field" type="email" name="wc_email" placeholder="Email*">
                            </div>
                            <div class="wpdiscuz-item wc_website-wrapper wpd-has-icon">
                                            <div class="wpd-field-icon"><i class="fas fa-link"></i></div>
                                        <input value="" class="wc_website wpd-field" type="text" name="wc_website" placeholder="Website">
                                            </div>
                        </div>
                <div class="wpd-form-col-right">
                    <div class="wc-field-captcha wpdiscuz-item wc_captcha-wrapper">
            <div class="wc-captcha-input">
                <input type="text" maxlength="5" value="" autocomplete="off" required="required" name="wc_captcha"  class="wpd-field wc_field_captcha" placeholder="Code" title="Вставьте код CAPTCHA">
            </div>
            <div class="wc-label wc-captcha-label">
                                <a class="wpdiscuz-nofollow" href="#" rel="nofollow"><img alt="wpdiscuz_captcha" class="wc_captcha_img" src="https://ylianova.ru/wp-content/plugins/wpdiscuz/utils/captcha/captcha.php?key=c5f805d2fde67c"  width="80" height="26"/></a><a class="wpdiscuz-nofollow wc_captcha_refresh_img" href="#" rel="nofollow"><img  alt="refresh" class="" src="https://ylianova.ru/wp-content/plugins/wpdiscuz/assets/img/captcha-loading.png" width="16" height="16"/></a>
                <input type="hidden" id="c5f805d2fde67c" class="wpdiscuz-cnonce" name="cnonce" value="c5f805d2fde67c" />
            </div>
            <div class="clearfix"></div>
        </div>
                <div class="wc-field-submit">
                                            
                                            <label class="wpd_label" title="Сообщать о всех новых ответах на мои комментарии">
                            <input id="wc_notification_new_comment-wpdiscuzuniqueid" class="wc_notification_new_comment-wpdiscuzuniqueid wpd_label__checkbox" value="comment" type="checkbox" name="wpdiscuz_notification_type" />
                            <span class="wpd_label__text">
                                <span class="wpd_label__check">
                                    <i class="fas fa-bell wpdicon wpdicon-on"></i>
                                    <i class="fas fa-bell-slash wpdicon wpdicon-off"></i>
                                </span>
                            </span>
                        </label>
                                                                <input class="wc_comm_submit wc_not_clicked button alt" type="submit" name="submit" value="Оставить комментарий">
        </div>
                </div>
                    <div class="clearfix"></div>
        </div>
                            </div>
                    <div class="clearfix"></div>
                    <input type="hidden" class="wpdiscuz_unique_id" value="wpdiscuzuniqueid" name="wpdiscuz_unique_id">
                </form>
                        </div>
                </div>
                                           

                                    <div class="wpdiscuz-front-actions">
                                                    <div class="wpdiscuz-sbs-wrap">
                                <span><i class="far fa-envelope" aria-hidden="true"></i>  Подписаться  <i class="fas fa-caret-down" aria-hidden="true"></i></span>
                            </div>
                                                                        <div class="clearfix"></div>
                    </div>
                                                    <div class="wpdiscuz-subscribe-bar wpdiscuz-hidden">
                                                    <form action="https://ylianova.ru/wp-admin/admin-ajax.php?action=addSubscription" method="post" id="wpdiscuz-subscribe-form">
                                <div class="wpdiscuz-subscribe-form-intro">Уведомление о </div>
                                <div class="wpdiscuz-subscribe-form-option" style="width:40%;">
                                    <select class="wpdiscuz_select" name="wpdiscuzSubscriptionType" >
                                                                                    <option value="post">новые последующие комментарии</option>
                                                                                                                            <option value="all_comment" >новые ответы на мои комментарии</option>
                                                                            </select>
                                </div>
                                                                    <div class="wpdiscuz-item wpdiscuz-subscribe-form-email">
                                        <input  class="email" type="email" name="wpdiscuzSubscriptionEmail" required="required" value="" placeholder="Email"/>
                                    </div>
                                                                <div class="wpdiscuz-subscribe-form-button">
                                    <input id="wpdiscuz_subscription_button" type="submit" value="›" name="wpdiscuz_subscription_button" />
                                </div> 
                                                                <input type="hidden" id="wpdiscuz_subscribe_form_nonce" name="wpdiscuz_subscribe_form_nonce" value="1c06bf69d1" /><input type="hidden" name="_wp_http_referer" value="/javascript/javascript-podklyuchit-sajt-dlya-vebmasterov-uchebniki-dlya-veb-programmistov.html" />                                                                <input type="hidden" value="5800" name="wpdiscuzSubscriptionPostId" />
                            </form>
                                                <div class="wpdiscuz_clear"></div>
                                            </div>
                    
                                <div id="wcThreadWrapper" class="wc-thread-wrapper">
                                    
                    <div class="wpdiscuz-comment-pagination">
                                            </div>
                </div>
                <div class="wpdiscuz_clear"></div>
                                            </div>
        </div>
        <div id="wpdiscuz-loading-bar" class="wpdiscuz-loading-bar wpdiscuz-loading-bar-unauth"></div>
        	
	</div><!--/.pad-->
	
</section><!--/.content-->


	<div class="sidebar s1">
		
		<a class="sidebar-toggle" title="Развернуть боковую панель"><i class="fa icon-sidebar-toggle"></i></a>
		
		<div class="sidebar-content">
				
						
			<div id="search-2" class="widget widget_search"><form method="get" class="searchform themeform" action="https://ylianova.ru/">
	<div>
		<input type="text" class="search" name="s" onblur="if(this.value=='')this.value='Введите поисковую фразу';" onfocus="if(this.value=='Введите поисковую фразу')this.value='';" value="Введите поисковую фразу" />
	</div>
</form></div><div id="nav_menu-2" class="widget widget_nav_menu"><h3>Рубрики</h3><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-5370" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5370"><a href="https://ylianova.ru/category/css">Css</a></li>
<li id="menu-item-5371" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5371"><a href="https://ylianova.ru/category/html">Html</a></li>
<li id="menu-item-5372" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5372"><a href="https://ylianova.ru/category/http">Http</a></li>
<li id="menu-item-5373" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-5373"><a href="https://ylianova.ru/category/javascript">Javascript</a></li>
<li id="menu-item-5374" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5374"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li>
<li id="menu-item-5375" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5375"><a href="https://ylianova.ru/category/verstka">Верстка</a></li>
<li id="menu-item-5376" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5376"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li>
<li id="menu-item-5377" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5377"><a href="https://ylianova.ru/category/maket">Макет</a></li>
<li id="menu-item-5378" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5378"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li>
<li id="menu-item-5380" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5380"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li>
<li id="menu-item-5381" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5381"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li>
<li id="menu-item-5382" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5382"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li>
<li id="menu-item-5379" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5379"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li>
</ul></div></div><div id="categories-3" class="widget widget_categories"><h3>Рубрики</h3>
			<ul>
					<li class="cat-item cat-item-5"><a href="https://ylianova.ru/category/css">Css</a>
</li>
	<li class="cat-item cat-item-4"><a href="https://ylianova.ru/category/html">Html</a>
</li>
	<li class="cat-item cat-item-9"><a href="https://ylianova.ru/category/http">Http</a>
</li>
	<li class="cat-item cat-item-10"><a href="https://ylianova.ru/category/javascript">Javascript</a>
</li>
	<li class="cat-item cat-item-11"><a href="https://ylianova.ru/category/photoshop">Photoshop</a>
</li>
	<li class="cat-item cat-item-17"><a href="https://ylianova.ru/category/verstka">Верстка</a>
</li>
	<li class="cat-item cat-item-3"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a>
</li>
	<li class="cat-item cat-item-16"><a href="https://ylianova.ru/category/maket">Макет</a>
</li>
	<li class="cat-item cat-item-6"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a>
</li>
	<li class="cat-item cat-item-13"><a href="https://ylianova.ru/category/raznoe-2">Разное</a>
</li>
	<li class="cat-item cat-item-12"><a href="https://ylianova.ru/category/sajt-2">Сайт</a>
</li>
	<li class="cat-item cat-item-15"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a>
</li>
	<li class="cat-item cat-item-7"><a href="https://ylianova.ru/category/shablon">Шаблоны</a>
</li>
	<li class="cat-item cat-item-14"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a>
</li>
	<li class="cat-item cat-item-8"><a href="https://ylianova.ru/category/shrift">Шрифты</a>
</li>
			</ul>

			</div><div id="custom_html-21" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script type="text/javascript">jQuery(document).ready(function($){$('.mylink').replaceWith(function(){return'<a href="'+$(this).attr('data-url')+'" title="'+$(this).attr('title')+'">'+$(this).html()+'</a>'})});new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script></div></div>			
		</div><!--/.sidebar-content-->
		
	</div><!--/.sidebar-->
	

		</div><!--/.main-->
	</div><!--/.container-inner-->
	
	<footer id="footer">	
				
				
		<section id="footer-bottom">
			<div class="container">
			
				<a id="back-to-top" href="#"><i class="fa fa-angle-up"></i></a>
				
				<div class="pad group">				
					<div class="grid one-half">
					
												
						<div id="copyright">
															<p>Блог сумасшедшего сисадмина © 2020. Все права защищены.</p>
													</div><!--/#copyright-->
						
												<div id="credit">
							<p><a href="/sitemap.xml" class="c_sitemap">Карта сайта</a>
</p>
						</div><!--/#credit-->
												
					</div>		
					<div class="grid one-half last">	
											</div>		
				</div><!--/.pad-->
				
			</div><!--/.container-->
		</section><!--/#footer-bottom-->
		
	</footer><!--/#footer-->

</div><!--/#wrapper-->

		<style type="text/css">
			.archive #nav-above,
					.archive #nav-below,
					.search #nav-above,
					.search #nav-below,
					.blog #nav-below,
					.blog #nav-above,
					.navigation.paging-navigation,
					.navigation.pagination,
					.pagination.paging-pagination,
					.pagination.pagination,
					.pagination.loop-pagination,
					.bicubic-nav-link,
					#page-nav,
					.camp-paging,
					#reposter_nav-pages,
					.unity-post-pagination,
					.wordpost_content .nav_post_link,.page-link,
					.page-links,#comments .navigation,
					#comment-nav-above,
					#comment-nav-below,
					#nav-single,
					.navigation.comment-navigation,
					comment-pagination {
						display: none !important;
					}
					.single-gallery .pagination.gllrpr_pagination {
						display: block !important;
					}		</style>
	<a id='wpdUserContentInfoAnchor' style='display:none;' rel='#wpdUserContentInfo' data-wpd-lity>wpDiscuz</a><div id='wpdUserContentInfo' style='overflow:auto;background:#FDFDF6;padding:20px;width:600px;max-width:100%;border-radius:6px;' class='lity-hide'></div><link rel='stylesheet' id='yarppRelatedCss-css'  href='https://ylianova.ru/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=5.5.1' type='text/css' media='all' />
<link rel='stylesheet' id='pgntn_stylesheet-css'  href='https://ylianova.ru/wp-content/plugins/pagination/css/nav-style.css?ver=5.5.1' type='text/css' media='all' />
<script type='text/javascript' src='https://ylianova.ru/wp-includes/js/jquery/jquery.form.min.js?ver=4.2.1' id='jquery-form-js'></script>
<script type='text/javascript' src='https://ylianova.ru/wp-content/themes/anew/js/jquery.jplayer.min.js?ver=5.5.1' id='jplayer-js'></script>
<script type='text/javascript' src='https://ylianova.ru/wp-content/themes/anew/js/scripts.js?ver=5.5.1' id='scripts-js'></script>
<script type='text/javascript' src='https://ylianova.ru/wp-content/themes/anew/js/jquery.sharrre.min.js?ver=5.5.1' id='sharrre-js'></script>
<script type='text/javascript' src='https://ylianova.ru/wp-includes/js/comment-reply.min.js?ver=5.5.1' id='comment-reply-js'></script>
<script type='text/javascript' src='https://ylianova.ru/wp-includes/js/wp-embed.min.js?ver=5.5.1' id='wp-embed-js'></script>
<script type='text/javascript' src='https://ylianova.ru/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=1.5.5' id='jquery-smooth-scroll-js'></script>
<script type='text/javascript' src='https://ylianova.ru/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.0.3' id='js-cookie-js'></script>
<script type='text/javascript' src='https://ylianova.ru/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2' id='jquery-sticky-kit-js'></script>
<script type='text/javascript' src='https://ylianova.ru/wp-content/plugins/easy-table-of-contents/vendor/waypoints/jquery.waypoints.min.js?ver=1.9.2' id='jquery-waypoints-js'></script>
<script type='text/javascript' id='ez-toc-js-js-extra'>
/* <![CDATA[ */
var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"};
/* ]]> */
</script>
<script type='text/javascript' src='https://ylianova.ru/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=1.7' id='ez-toc-js-js'></script>
<!--[if lt IE 9]>
<script src="https://ylianova.ru/wp-content/themes/anew/js/ie/respond.js"></script>
<![endif]-->
</body>
</html>