JavaScript для разработчиков WordPress: изучение основ

https://eg-nsk.ru spark.ru/ https://spark.ru/ JavaScript был разработан более 20 лет назад в Netscape, и какое-то время в середине-конце 1990-х он считался препятствием на пути к стандартизированной сети. Посмотрите, как далеко мы продвинулись с тех пор! Сейчас JavaScript используется на 93,6% всех веб-сайтов в мире. Automattic даже недавно разработала настольный клиент  для WordPress.com, написанный на 100% JavaScript. Целые сайты и приложения можно создавать с помощью инструментов только для JavaScript, таких как Angular и React . Сеть все быстрее движется к жизни, все более наполненной JavaScript. WordPress не собирается отказываться от старого доброго PHP в ближайшее время, но в настоящее время наблюдается значительное смещение акцента в сторону JavaScript, и разработчики должны не отставать. Итак, в этой серии из пяти частей я познакомлю вас с JavaScript для разработчиков WordPress и открою вам глаза на мир JavaScript и его значение для работы с WordPress. В этой серии вы изучите основы, но я предполагаю, что у вас уже есть практические знания HTML и CSS. Если вам нужна помощь с этими строительными блоками, взгляните на нашу серию статей о разработке WordPress для начинающих . Пропустили учебник из нашей серии JavaScript для разработчиков WordPress? Вы можете ознакомиться со всеми пятью постами здесь:

  • JavaScript для разработчиков WordPress: изучение основ
  • JavaScript для разработчиков WordPress: начало работы с объектами
  • JavaScript для разработчиков WordPress: начало работы с jQuery
  • JavaScript для разработчиков WordPress: загрузка JavaScript в WordPress
  • Javascript для разработчиков WordPress: использование AJAX

 

Начиная

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

Простой шаблон

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

<!ДОКТИП HTML >
< html >
< голова >
< Мета кодировка = » UTF-8 » >
< title > Мой первый шаблон JS </ title >
</ голова >
< тело >
< тип сценария = ‘ текст/javascript>
// здесь мы напишем код
</ сценарий >
</ тело >
</ HTML >
просмотреть необработанныйбойлерплейт.html , размещенный на ❤ на GitHub

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

Оповещение

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

Окно оповещения
Окно оповещения

Предупреждения иногда могут быть быстрым способом отладки чего-либо в вашем коде. Есть много лучших методов, но на данный момент оповещение является одним из самых быстрых решений и подходит для наших целей. Просто введите alert('Write any message here')теги script и перезагрузите страницу.

Ведение журнала консоли

Более гибкий способ отображения данных — их запись в консоль. Если вы использовали HTML, CSS и PHP, скорее всего, вы видели консоль. Его можно найти в разделе инструментов разработчика каждого браузера.

Javascript-консоль Chrome
Консоль JavaScript Chrome

Я опечатался в коде перед использованием alerts('message'). Поскольку alertsэто не функция JavaScript, консоль выдала мне вышеуказанную ошибку. JavaScript будет регистрировать ошибки и другие сообщения в консоли для вас, но вы можете использовать его для своих нужд. Используйте console.log('Write anything here')для вывода текста на консоль. Как вы увидите позже, вы также можете регистрировать массивы и объекты, что делает это намного более гибким, чем оповещение.

Данные журнала консоли
Данные журнала консоли

Запись в документ

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

документ . write ( ‘Здравствуйте, это Javascript’ ) ;
просмотреть необработанныйdocument-write.js размещен на ❤ на GitHub

Строительные блоки JavaScript

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

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

Я уже показал вам, как писать встроенный JavaScript, но есть и другие способы и другие соображения. Вы можете добавить JavaScript в <head>раздел HTML или в файл <body>. Большая часть кода JavaScript требуется только после загрузки страницы. Из-за этого принято помещать как можно больше вашего кода непосредственно перед закрытием </body>раздела — это заставляет страницы загружаться намного быстрее. Также рекомендуется отделить код JavaScript от страницы, как мы это делаем с CSS. Вы можете написать свой код в одном или нескольких внешних файлах, а затем связать их со страницей. Это также можно сделать в разделах заголовка или тела с помощью тега скрипта с srcатрибутом.

< тип сценария = ‘ текст/javascriptsrc = ‘ myscript.js> </ сценарий >
просмотреть необработанныйinclude-script.html, размещенный на ❤ на GitHub

Переменные

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

документ . write ( «Привет Даниил, сегодня чудесный день» ) ;
документ . write ( «Отличная работа, Даниил, у тебя больше нет задач на сегодня» ) ;
документ . write ( «Имя пользователя: Daniel» ) ;
просмотреть необработанныйwelcome.js размещен на ❤ на GitHub

Как видите, мое имя используется довольно часто. Мы можем создать переменную и присвоить ей значение (мое имя) и использовать эту переменную позже.

var имя = «Дэниел» ;
документ . написать ( «Привет» + имя + «, сегодня замечательный день» ) ;
документ . write ( «Отличная работа» + имя + «, у вас больше нет задач на сегодня» ) ;
документ . написать ( «Имя пользователя:» + имя ) ;
просмотреть необработанныйwelcome-variable.js размещен на ❤ на GitHub

В таком простом случае значение сразу не очевидно, оно просто на одну строку больше. В реальной жизненной ситуации это может не только сэкономить вам множество строк, но и полезно не только в качестве подстановки. В реальном приложении значение nameпеременной будет извлечено из базы данных. Если Джон войдет в систему, он увидит «Привет, Джон», а Джейн увидит «Привет, Джейн». Прежде чем мы двинемся дальше, давайте запомним некоторые синтаксис. При создании переменной вы пишете varключевое слово, за которым следует имя, по которому вы хотите сослаться на переменную, за которым следует знак равенства и значение переменной. Если значение представляет собой строку, вам нужно заключить ее в кавычки. Если это число, вы должны написать его без кавычек. Наконец, вы заканчиваете строку точкой с запятой. При использовании переменной в строке мы используем конкатенацию. Знак плюс объединяет (добавляет) переменную в строку. Общий формат: "some string" + variable + "other string". Прежде чем мы двинемся дальше, я хочу упомянуть кое-что о varключевом слове и точке с запятой. Технически varключевое слово не обязательно для определения переменной. Если вы опустите его, вы создадите глобальную переменную, к которой можно будет получить доступ из любого места. Обычно это не очень хорошая идея, потому что вы получите запутанный код. А пока добавьте var перед всеми вашими переменными. Запятая также не требуется. Это требуется только в том случае, если вы пишете два оператора в одной строке.

// Работает просто отлично
переменная имя = «Джон»
документ . написать ( «Привет» + имя )
// Выдает ошибку
var name = «Джон» документ . написать ( «Привет» + имя )
// снова работает нормально
имя вар = «Джон» ; документ . написать ( «Привет» + имя ) ;
просмотреть необработанныйsemicolon.js размещен на ❤ на GitHub

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

Функции

Функции — это еще один способ написания повторно используемого кода. Давайте воспользуемся аналогией, чтобы понять, почему существуют функции. Допустим, вам очень понравилось руководство Utimate по мультисайтам WordPress, и вы регулярно к нему обращаетесь. Вы не можете вспомнить URL-адрес, поэтому в конечном итоге вы все время заходите в блог WPMU DEV, ищете «Мультисайт» и нажимаете на один из результатов. Однажды вам надоело, и вы создаете закладку. Теперь вы можете щелкнуть закладку, чтобы добиться того же результата. Примерно для этого и предназначена функция. Вы добавляете к нему сложный набор задач, а затем выполняете эти задачи с помощью простой команды. Разница между функцией и закладкой в ​​том, что закладка — это кратчайший путь к решению. Закладка на самом деле не переходит на страницу поиска, она просто запоминает для вас URL-адрес. Функция на самом деле будет выполнять все шаги по отдельности. Давайте рассмотрим пример, когда нам приходится часто использовать имена пользователей Twitter.

var name = ‘danielpataki’ ;
документ . write ( ‘Ваше имя пользователя в Твиттере @’ + имя ) ;
документ . написать ( ‘<br>’ ) ;
документ . write ( ‘Вот некоторые из ваших твитов:’ ) ;
документ . написать ( ‘<ul>’ ) ;
документ . write ( ‘<li>Я люблю собак, они классные! — @’ + имя + ‘</li>’ ) ;
документ . write ( ‘<li>Кокосовый сок лучше всего пить. — @’ + name + ‘</li>’ ) ;
документ . write ( ‘<li>Сейчас пишем учебник по JS. — @’ + name + ‘</li>’ ) ;
документ . написать ( ‘</ul>’ ) ;
просмотреть необработанныйtweets.js размещен на ❤ на GitHub

Обратите внимание, что здесь много повторений, мы "@" + nameмного используем. Давайте создадим функцию, которая выполняет эту конкатенацию для нас, вот окончательный код:

функция twitter_username ( twitter_name ) {
var username = «@» + twitter_name ;
вернуть имя пользователя ;
}
var name = ‘danielpataki’ ;
документ . write ( ‘Ваше имя пользователя в Twitter’ + twitter_username ( имя ) ) ;
документ . написать ( ‘<br>’ ) ;
документ . write ( ‘Вот некоторые из ваших твитов:’ ) ;
документ . написать ( ‘<ul>’ ) ;
документ . write ( ‘<li>Я люблю собак, они классные! — ‘ + twitter_username ( name ) + ‘</li>’ ) ;
документ . write ( ‘<li>Кокосовый сок лучше всего пить. — ‘ + twitter_username ( имя ) + ‘</li>’ ) ;
документ . write ( ‘<li>Только сейчас пишу учебник по JS. — ‘ + twitter_username ( имя ) + ‘</li>’ ) ;
документ . написать ( ‘</ul>’ ) ;
просмотреть необработанныйtweets-function-1.js размещен на ❤ на GitHub

Боже мой, я только что сделал это еще хуже, не так ли? Мы узнаем о нескольких способах сделать его намного короче в следующем разделе, когда будем изучать массивы. А пока давайте сосредоточимся на том, как использовать функции. Прежде всего, я создал функцию, используя ключевое слово function, за которым следует имя функции. После каждого имени функции следуют круглые скобки, которые содержат параметры, если они есть. Затем мы заключаем содержимое функции в фигурные скобки. Параметр — это значение, передаваемое функции. Затем функция может использовать это значение для получения различных результатов. Здесь нам нужен параметр, чтобы получить окончательное имя пользователя. В моем случае значением параметра будет «danielpataki», и он выдаст «@danielpataki». Если я показываю твит от WPMU DEV, имя будет «wpmudev», а в конце будет «@wpmudev». Функция может использовать методы document.writeили console.log, о которых мы говорили, но также может возвращать значение. Возврат значения позволит вам использовать его где угодно. При использовании функции вам нужно ввести ее имя, а затем указать в круглых скобках любые параметры, которые вы хотите передать функции. Поначалу функции могут быть пугающими, давайте рассмотрим код построчно, чтобы увидеть, что происходит. В строке 1 я определил функцию. Функция называется «twitter_username», и она принимает один параметр, который я назвал «twitter_name». twitter_nameкак мы будем ссылаться на это значение внутри функции . В функции мы просто объединяем знак @ со знаком twitter_nameи возвращаем результирующую строку. При определении функции ничего не происходит, JavaScript просто «знает об этом», поэтому вы можете использовать его позже. В строке 6 я определил a nameсо значением «danielpataki». В строке 7 я пишу текст в HTML-документ, а затем вызываю нашу функцию. Я перешел nameк функции. Значением nameявляется «danielpataki», функция получит это значение. Вернемся к функции. Я указал, что первый параметр должен называться «twitter_username», поэтому внутри функции значение «twitter_username» теперь равно «danielpataki». В конце это значение возвращается и, таким образом, объединяется с остальным текстом. Давайте также рассмотрим второй подход к пониманию функций, чтобы убедиться, что вы понимаете, как они работают. Функции, как и переменные, подобны подстановке данных из одного места в другое, вам просто нужно выяснить, каково значение всего. Функция вернет значение, как только выполнит свою задачу. Нам нужно понять, каким будет это значение. Вот обобщенный способ написания нашего кода:

документ . write ( ‘Ваше имя пользователя в Twitter’ + ‘возвращаемое значение функции’ ) ;
просмотреть необработанныйgeneral-function.js размещен на ❤ на GitHub

Глядя на нашу функцию, мы видим, что последняя строка имеет вид return username;. Отлично, теперь нам нужно выяснить, каково значение username, поскольку именно оно в конечном итоге будет отображаться. Справа вверху мы видим строку var username = "@" + twitter_name;. Итак, мы знаем, usernameчто последнее возвращаемое значение начинается со знака at, за которым следует значение другой переменной: twitter_name. Найдем значение этой переменной. Переменная twitter_nameопределяется самой нашей функцией — это первый параметр нашей функции. Это означает, что нам нужно вернуться туда, где мы использовали функцию, и посмотреть на первый переданный нами параметр. Мы использовали функцию так: twitter_username( name )значит, нам нужно найти значение nameпеременной. Это переменная, которую мы определили в строке 6, значение — «danielpataki». Таким образом, мы реконструировали нашу функцию. Значение «danielpataki» передается нашей функции, где оно обозначается как twitter_name. Создается новая переменная с именем username, которая объединяет знак at twitter_nameи, наконец, возвращает его, давая нам @danielpataki.

Несколько параметров

Функции могут иметь несколько параметров, которые могут помочь уменьшить избыточность в нашем коде — все дело в том, чтобы замечать шаблоны. Обратите внимание, что каждый твит выглядит так: <li>[tweet text] - [username]</li>. Мы могли бы создать функцию, которая принимает текст твита в качестве первого параметра и имя пользователя в качестве второго и производит для нас наш вывод:

функция твит ( текст , имя_твиттера ) {
return ‘<li>’ + text + ‘-‘ + ‘@’ + twitter_name + ‘</li>’ ;
}
var name = ‘danielpataki’ ;
документ . write ( ‘Ваше имя пользователя в Твиттере @’ + имя ) ;
документ . написать ( ‘<br>’ ) ;
документ . write ( ‘Вот некоторые из ваших твитов:’ ) ;
документ . написать ( ‘<ul>’ ) ;
документ . write ( tweet ( ‘Я люблю собак, они классные!’ , name ) ) ;
документ . write ( tweet ( ‘Кокосовый сок лучше пить’ , name ) ) ;
документ . write ( tweet ( ‘Только сейчас пишу учебник по JS’ , name ) ) ;
документ . написать ( ‘</ul>’ ) ;
просмотреть необработанныйtweets-function-2.js размещен на ❤ на GitHub

Это выглядит намного чище! Я передаю тест в качестве первого параметра и имя в качестве второго. Затем функция объединяет их и возвращает результат. Здесь следует отметить две вещи. Во-первых, вам не нужно создавать переменную для возврата. Вы можете вернуть объединенную строку, не присваивая ее переменной. Во-вторых, у нас больше нет функции для создания имен пользователей, поэтому нам нужно было переключить нашу исходную строку обратно на 'Your twitter username is @' + name.

Функции внутри функций

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

функция твит ( текст , имя пользователя ) {
документ . write ( ‘<li>’ + text + ‘-‘ + twitter_username ( имя пользователя ) ) ;
}
функция twitter_username ( имя пользователя ) {
вернуть ‘@’ + имя пользователя ;
}
var name = ‘danielpataki’ ;
документ . write ( ‘Ваше имя пользователя в Twitter’ + twitter_username ( имя ) ) ;
документ . написать ( ‘<br>’ ) ;
документ . write ( ‘Вот некоторые из ваших твитов:’ ) ;
документ . написать ( ‘<ul>’ ) ;
твит ( «Я люблю собак, они классные!» , name ) ;
твит ( «Кокосовый сок — лучший напиток» , имя ) ;
tweet ( «Только сейчас пишу учебник по JS» , name ) ;
документ . написать ( ‘</ul>’ ) ;
просмотреть необработанныйtweets-function-3.js размещен на ❤ на GitHub

Теперь у нас есть вызываемая функция, twitter_usernameкоторая принимает строку и добавляет к ней знак at. Это используется в строке 10 для отображения имени пользователя, а также в tweetфункции. Обратите внимание, что я также изменил tweetфункцию, чтобы использовать document.write, что сделало тело нашего кода еще чище.

Массивы

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

вар калорий = [ 1920 , 1770 , 2219 , 1889 , 2391 , 1522 , 1879 ] ;
просмотреть необработанныйcalorie-array.js размещен на ❤ на GitHub

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

var tweets = [ «Я люблю собак, они классные!» , «Кокосовый сок лучше всего пить». , «Пишем туториал по JS» ] ;
просмотреть необработанныйtweets-array.js размещен на ❤ на GitHub

Теперь мы можем использовать встроенную mapфункцию JavaScript для перебора (прохода по каждому элементу) массива. Давайте перепишем весь наш пример Tweets с учетом этого:

функция твит ( текст , имя пользователя ) {
документ . write ( ‘<li>’ + text + ‘-‘ + twitter_username ( имя пользователя ) ) ;
}
функция twitter_username ( имя пользователя ) {
вернуть ‘@’ + имя пользователя ;
}
var tweets = [ «Я люблю собак, они классные!» , «Кокосовый сок лучше всего пить». , «Пишем туториал по JS» ] ;
var name = ‘danielpataki’ ;
документ . написать ( ‘<ul>’ ) ;
твиты . карта ( функция ( tweet_text , ключ ) {
твит ( текст_твита , имя )
} )
документ . написать ( ‘</ul>’ ) ;
просмотреть необработанныйtweets-function-4.js размещен на ❤ на GitHub

Функция mapперебирает все элементы массива. Функция принимает один параметр — функцию, которая получает два аргумента. Первый аргумент — это значение текущего элемента массива, второй — ключ: числовое значение, представляющее порядок элемента массива в массиве. В нашем примере я не использовал это значение. Первый mapаргумент функции — это функция, но она не следует тому же соглашению, что и раньше, и не имеет имени. Это называется анонимной функцией. У него нет имени, он нигде не определен отдельно, он создается по мере необходимости, обычно как параметры для других функций. Все, что делает наша анонимная функция, — это передает текст твита tweetфункции, которую мы уже написали. Имя взято из того, когда мы nameизначально определили нашу переменную.

Управление массивами

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

var tweets = [ «Я люблю собак, они классные!» , «Кокосовый сок лучше всего пить». ] ;
твиты . push ( ‘Только сейчас пишу учебник по JS’ ) ;
просмотреть необработанныйarray.push.js размещен на ❤ на GitHub

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

var animals = [ «собака» , «кошка» , «птица» ] ;
консоль . журнал ( животные.поп ( ) ) ; _ _ // птица
консоль . бревно ( животные ) // собака, кошка
просмотреть необработанныйarray.pop.js размещен на ❤ на GitHub

Дополнительные функции массива см. в связанном ресурсе W3Schools.

Что вставить в функции

У вас может возникнуть вопрос, что поместить в functions. Во время этого урока мы создали довольно много. Сначала tweetфункция просто содержала текст, затем я добавил <li>к ней элемент и, наконец, тоже добавил document.writeк нему. Итак, мы всегда должны добавлять все, как мы узнаем, когда остановиться? Мы также могли бы создать функцию для вывода всех наших твитов с помощью простого вызова функции:

функция твит ( текст , имя пользователя ) {
документ . write ( ‘<li>’ + text + ‘-‘ + twitter_username ( имя пользователя ) ) ;
}
функция twitter_username ( имя пользователя ) {
вернуть ‘@’ + имя пользователя ;
}
функция show_tweets ( твиты ) {
документ . написать ( ‘<ul>’ ) ;
твиты . карта ( функция ( tweet_text , ключ ) {
твит ( текст_твита , имя )
} )
документ . написать ( ‘</ul>’ ) ;
}
var tweets = [ «Я люблю собак, они классные!» , «Кокосовый сок лучше всего пить». , «Пишем туториал по JS» ] ;
var name = ‘danielpataki’ ;
show_tweets ( твиты ) ;
просмотреть необработанныйtweets-function-5.js размещен на ❤ на GitHub

По мере продвижения вы узнаете некоторые рекомендации, вы будете знать, что делать и чего не делать, но в конечном итоге все зависит от потребностей вашего приложения. Например, включение разметки типа the <li>не очень хорошо. Функция твита должна иметь возможность отображать текст и автора твита. Добавление разметки делает функцию менее гибкой, поскольку мы можем использовать ее только в списках. Последний пример выше также является классическим примером плохого и запутанного кода. Мы передаем массив твитов в функцию, но имя, используемое внутри функции, определяется вне функции. За потоком данных сложно следить, особенно если экстраполировать это на большую кодовую базу.

Сосредоточьтесь на основах

Пока что не слишком беспокойтесь о том, как правильно поступать. Теперь ваша задача — ознакомиться с синтаксисом и понять примеры, над которыми мы работали. Начните писать код, как только сможете. Вы будете делать много-много ошибок, но это нормально! Если кто-то критикует вас за то, что вы их делаете, не забывайте, что они когда-то тоже были новичками и совершали те же ошибки – шутка над ними! В следующем уроке этой серии мы усовершенствуем наш пример с твитами, используя объекты, которые повсеместно используются в JavaScript и чрезвычайно полезны при написании кода. После того, как мы разобрались с объектами, мы можем начать смотреть на jQuery, чтобы делать всевозможные полезные вещи с WordPress.

Оцените статью
( Пока оценок нет )
Поделиться с друзьями
Добавить комментарий