Как подключить js-скрипты к html-коду страницы?

Что это такое

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

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

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

Правила работы с библиотекой jQuery

1. Как добавить jQuery на веб-страницу

Добавить библиотеку jQuery на свою веб-страницу можно двумя способами:

Использовать версию файла jQuery, размещенную на ресурсах , Microsoft или jQuery.com.
Данный метод использует «Сеть дистрибуции контента» (CDN, content distribution network), т.е. файл jQuery расположен на другом веб-сайте, который при запросе пользователем отправляет данный файл на его компьютер. Очевидные преимущества данного способа — снижение нагрузки на собственный веб-сервер и ускорение загрузки файла в силу разветвленности сети серверов дистрибьютора.

Чтобы воспользоваться данным способом, необходимо перейти по одной из ссылок:CDNJS CDN
После перехода на сайт ресурса вам потребуется всего лишь скопировать ссылку на jQuery-файл и добавить её на свою веб-страницу между тегами <script>...</script>. В результате у вас должно получиться, например,

Загрузить последнюю версию библиотеки jQuery с официального сайта. Для этого вам необходимо перейти по адресу jQuery.com и выбрать интересующую вас версию библиотеки. Для загрузки предлагается две версии jQuery-файла — минимизированный и несжатый. Размер несжатого файла около 300 Кб, он содержит комментарии, поэтому его лучше использовать с целью разработки и отладки кода.
Минимизированная версия файла весит около 100Кб, в ней удалены все комментарии и ненужные пробелы, что ускоряет загрузку файла браузером.

2. Правила добавления jQuery на страницу

Размещайте ссылки на jQuery-файл внутри тега <head>.Размещайте ссылки на jQuery-файл после ссылок на стили CSS, так как зачастую библиотека jQuery производит манипуляции со стилями элементов веб-страницы.Размещайте другие теги <script>...</script> только после ссылки на файл jQuery, если данный скрипт использует библиотеку jQuery.

3. Как создать новый html-элемент

Создать пустой html-элемент, например, блок, можно несколькими способами:

1) с помощью краткой формы записи $("<div>")
2) с помощью инструкции $("<div></div>")
3) с помощью инструкции $("<div/>")

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

При создании нового элемента методу $() можно передать второй параметр в виде объекта JavaScript, определяющий дополнительные атрибуты элемента:

Таким образом создается элемент <img> с заданными атрибутами и включается в дерево DOM.

Метод confirm()

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

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

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

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

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

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

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

Метод alert()

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

Диалоговые окна оповещений обычно применяют, если нужно уведомить пользователя о чем-то, что он не контролирует, например об ошибке. В простейшем случае текст предупреждения, заключенный в двойные или одинарные кавычки, вводится внутри круглых скобок. Диалоговое окно, выведенное на экран методом , можно убрать, щелкнув на кнопке OK. До тех пор пока вы не сделаете этого, переход к ранее открытым окнам невозможен. Методу передается только одна строка — отображаемая. Чтобы отобразить многострочное сообщение, разделяйте строки символом :

Это обычный HTML документ

Выходим обратно в HTML

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

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

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

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

Что вам нужно для изучения JavaScript?

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

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

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

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

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

К счастью, как вы уже знаете, любой веб-браузер включает в себя интерпретатор JavaScript.

Чтобы писать и выполнять JavaScript-программы, достаточно установить любой современный интернет-браузер (например Yandex, Internet Explorer, Mozilla Firefox или Google Chrome).

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

Самый простой способ поэкспериментировать с кодом JavaScript – воспользоваться встроенным инструментом браузера веб-консоль (Web Console).

Как правило, веб-консоль можно запустить нажатием клавиши F12 или горячей комбинации клавиш – Ctrl+Shift+J. Обычно панель или окно типичного «инструмента разработчика» открывается в виде отдельной панели в верхней или нижней части окна браузера как изображено на рис. 1.

Панель включает множество вкладок, позволяющих исследовать структуру HTML-документа, стили CSS и т. д. Среди них имеется вкладка JavaScript Console, где можно вводить строки программного кода JavaScript и выполнять их.

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

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

Это обычный HTML документ

Выходим обратно в HTML

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

Обратите внимание: В подобных простых экспериментах с JavaScript можно опускать теги , и в HTML-файле

Подключение jQuery на WordPress

Подключение jQuery в WordPress производится автоматически, поэтому нет никакой необходимости подключать библиотеки других версий вручную. Это происходит в шаблоне с помощью php кода:

<?php wp_head(); ?>

В итоге внутри тега HEAD появится строка подключения jQuery.

На момент написания статьи с WordPress поставляется jQuery v1.12.4 Но, как видите, версия библиотеки очень сильно отличается от той, которую подключали в примерах выше. Подключить свежую версию библиотеки возможно, но есть шанс возникновения конфликта.

Чтобы избежать конфликта, но при этом использовать ту версию библиотеки, которая необходима, нужно воспользоваться правильным способом подключения jQuery в файле functions.php:

<?php
function my_jquery_scripts() {
  wp_deregister_script( 'jquery' );
  wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js');
  wp_enqueue_script( 'jquery' ); 
}
add_action( 'wp_enqueue_scripts', 'my_jquery_scripts' );
?>

Тут сначала отключается стандартная библиотека, а потом через Google API подключаем версию 3.1.1

Внимание! Учтите, этот код будет работать только в том случае, если в вашей теме присутствуют wp_head() и wp_footer()

JavaScript – не Java

Прежде чем вы приступите к изучению JavaScript, вам следует понимать, что
JavaScript – это не Java. Это два совершенно разных языка программирования. JavaScript не имеет ничего общего с языком Java, кроме похожего синтак­
сиса.

Java – объектно-ориентированный язык программирования, разрабатываемый компанией Sun Microsystems с 1991 года и официально выпущенный 23 мая 1995 года. Java – это мощный и гораздо более сложный язык программирования, на нём можно писать самые разные программы. Для интернет-страниц есть особая возможность – написание апплетов.

Апплет – это программа на языке Java, которую можно подключить к HTML при помощи тега <applet>. Jаvа­апплеты запускаются с помощью компилятора. Апплеты Java встраиваются в веб-страницу, но хранятся на диске как отдельные файлы. Это двоичные файлы, и если вы их откроете, то не увидите исходный код апплета.

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

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

JavaScript — это легкий язык программирования, который обладает простым синтаксисом, специализированной встроенной функциональностью и минимальными требованиями для создания объектов. Вам не нужно объявлять переменные, классы и методы. Не нужно беспокоиться о том, являются ли методы публичными (public), приватными (private) или защищенными (protected), а также вам не нужно реализовывать интерфейсы. Переменные, параметры и возвращаемые функциями типы JS-скриптов не являются явно типизированными.

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

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

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

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

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

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

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

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

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

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

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

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

{
	"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 игнорирует все пробельные символы которые могут присутствовать между языковыми конструкциями и воспринимает текст программы как сплошной поток кода.
Кроме того, JavaScript также, по большей части, игнорирует символы перевода строки. Поэтому пробелы и символы перевода строки могут без ограничений использоваться в исходных текстах программ для форматирования и придания им удобочитаемого внешнего вида.

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

Пробельные символы
Код символа Название Сокращение Описание Escape последовательность
U + 0009 Горизонтальная табуляция <HT> Перемещает позицию печати к следующей позиции горизонтальной табуляции \t
U + 000B Вертикальная табуляция <VT> Перемещает позицию печати к следующей позиции вертикальной табуляции \v
U + 000C Прогон страницы, смена страницы <FF> Выбрасывает текущую страницу и начинает печать со следующей \f
U + 0020 Пробел <SP> Интервал между буквами  
U + 00A0 Неразрывный пробел <NBSP> Символ, отображающийся внутри строки подобно обычному пробелу, но не позволяющий разорвать в этом месте строку  

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

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

Символы конца строки
Код символа Название Сокращение Описание Escape последовательность
U + 000A Перевод строки <LF> Перемещает позицию печати на одну строку вниз \n
U + 000D Возврат каретки <CR> Перемещает позицию печати в крайнее левое положение \r
U + 2028 Разделитель строк <LS> Разделяет строки текста, но не абзацы  
U + 2029 Сепаратор абзацев <PS> Разделяет абзацы текста  

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

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

Подключение JavaScript’а осуществляется двумя способами:

1. Первый – это непосредственно вставка кода в ваш сайт с помощью тегов:

2. Второй – с помощью файла:

Где «https://www.pandoge.com/main.js» – путь до файла скрипта. Такой вариант рекомендуется писать для файлов на удаленном (внешнем) сервере. Если же файл находится на вашем сайте, то можно просто указать относительный путь:

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

Что касается места подключения, то все скрипты рекомендуется подключать в секции HEAD, перед закрывающим ее тегом. Например:

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

Применение JavaScript

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

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

В большинстве случаев JS используется на стороне клиента для манипулирования DOM-элементами страницы (HTML — элементы такие как, , , , …). С помощью JS можно создавать, удалять, скрывать, отображать, изменять почти любой DOM-элемент на странице.

<!DOCTYPE HTML>
<html>
<head>
<meta charset=»utf-8″>
<tittle>Пример использования JS</tittle>
</head>
<body>
<div id=»product»>
<p>Электробритва</p>
<button id=»buyBtn»>Купить</button>
</div>
<div id=»thanks»>
<p>Спасибо за покупку!</p>
</div>
<script>
var product = document.getElementById(«product»);
//Получаем доступ к элементу с id=»product» и сохраняем его в переменную product
var buyBtn = document.getElementById(«buyBtn»);
//Получаем доступ к элементу с id=»buyBtn»и сохраняем его в переменную buyBtn
var thanks = document.getElementById(«thanks»);
//Получаем доступ к элементу с id=»thanks» и сохраняем его в переменную thanks

thanks.style.display = «none»; //Первоначальное сокрытие блока с благодарностью
buyBtn.onclick = function(){ //Вызов данной функции произойдет после нажатия на кнопку «Купить»
product.style.display = «none»; //Прячем блок с товаром
thanks.style.display = «block»; //Показываем блок с благодарностью за покупку
}
</script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE HTML>
<html>
<head>

<meta charset=»utf-8″>

<tittle>Пример использования JS</tittle>

</head>
<body>

<div id=»product»>

<p>Электробритва</p>

<button id=»buyBtn»>Купить</button>

</div>

<div id=»thanks»>

<p>Спасибо за покупку!</p>

</div>

  <script>

varproduct=document.getElementById(«product»);

//Получаем доступ к элементу с id=»product» и сохраняем его в переменную product

varbuyBtn=document.getElementById(«buyBtn»);

//Получаем доступ к элементу с id=»buyBtn»и сохраняем его в переменную buyBtn

varthanks=document.getElementById(«thanks»);

//Получаем доступ к элементу с id=»thanks» и сохраняем его в переменную thanks

thanks.style.display=»none»;//Первоначальное сокрытие блока с благодарностью

buyBtn.onclick=function(){//Вызов данной функции произойдет после нажатия на кнопку «Купить»

product.style.display=»none»;//Прячем блок с товаром

thanks.style.display=»block»;//Показываем блок с благодарностью за покупку

}

</script>
</body>
</html>

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

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

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

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

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

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

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

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

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

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

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

>node --version

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

v8.11.3

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

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

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

Hello world!

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

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

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

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

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

Упс, ошибка.

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

Советы по эфективному изучению JavaScript

Изучение JavaScript, как и других языков программирования – непростое дело, но оно безусловно стоит потраченных сил и времени. Обучение эффективно, когда дается не просто так, а с усилием. Вы должны прилагать сознательные усилия для того, чтобы усваивать новые навыки и умения. Знания, полученные без усилий, подобны кругам на воде – очень скоро от них не останется и следа.

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

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

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

Наихудшее время для обучения – когда вы чувствуете усталость. В такие моменты, главное не заставлять себя – вы не получите ожидаемого результата. Человеческий мозг не может учить что-то бесконечно долго – ему нужно давать перерывы. Занимайтесь по принципу 25\5. Попробуйте на себе практику учить 25 минут и отдыхать 5 минут. Ваш мозг привыкнет к таким равномерным нагрузкам и будет работать максимально продуктивно.

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

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

Параллельно с теоретическими занятиями постоянно практикуйтесь. Для приобретения практического опыта достаточно просто много писать и разбирать примеры хорошего кода. Работая с примерами внимательно пройдите по всем строчкам кода – вы должны убедиться, что понимаете, как работает каждая строчка. Не бойтесь экспериментировать. Учитесь выводить в окне браузера какие-то данные и анализировать их. Например, что и после чего выводится на экран, получили ли вы то, что хотели, и если нет – то почему.

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

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

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

Плагины это очень сложна штука. Нужно понимать что нужно на данной странице пользователю в данный момент, а что нет. На своём сайте в плагине для определения вхождений ключей в текст я подключаю стили и 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-файлов.

Определение JavaScript

JavaScript (ДжаваСкрипт) — это мультиплатформенный, объектно-ориентированный, сценарный язык программирования, созданный в 1995 году разработчиком Брендоном Айком. Язык соответствует спецификации ECMAScript (как и другие скриптовые языки как например: JScript, ActionScript).

Изначально язык назывался LiveScript, и в последующем был переименован в JavaScript. JS ориентирован на веб и имеет огромную популярность среди frontend — разработчиков т.к. является единственным языком, который выполняется в браузере. JS применяется преимущественно в браузере на стороне клиента, однако существуют другие технологии (Node.js), основанные на JS выполняемые не только на клиенте, но и на стороне сервера. 

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий