Переменные шаблона HTML. Использование переменных и типов

22.05.2019

Приступаем к следующему уроку, который называется «Переменная в PHP ». Для начала давайте выясним теоретически, что такое переменная. Не знаю как у вас, но у меня мышление лучше работает, если необходимую информацию я обработал зрительно. Мне проще все понять, когда я вижу рисунок или схемку. Вот по этой причине я нарисую и вам схему и по ней объясню значение переменной.

Что такое переменная?
Переменная – это контейнер, внутри которого находится информация.
Переменные в PHP начинаются со знака доллар «$ ».
Посмотрите схему :

Разъяснение схемы :

Если посмотреть на схемку, то можно увидеть, что в переменной $a (в контейнере) хранится цифровое значение – цифра «2 », а в переменной $f хранится текстовое содержание «сайт »

Теперь отображу эту схему в коде PHP. Это будет выглядеть вот так:

$ – это переменная;
a и f – это имя переменной. Имя переменной может быть любым, которое вам в голову взбредет. Но помните, есть разница как вы напишите имя переменной большими или маленькими буквами, например GERL и gerl – это будут разные имена;
= - это означает присвоить значение;
2 и "сайт " – это числовое и текстовое значение. Обратите внимание, что цифровое значение пишется без кавычек " " , а текстовое нужно писать с кавычками;
; - это означает, что действие законченно.

Теперь вставим этот PHP-код в HTML документ :

Основы PHP

Вычисление переменных.

Также можно создать функцию вычисления цифр, например, переменные можно делить (/ ), умножать (* ), прибавлять (+ ) и отнимать (- ). Для этого достаточно еще написать одну переменную, например $s . Переменная $s будет отвечать за полученный результат. Итак, на примере.

Основы PHP

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

Основы PHP

Итак,
переменная $s - отвечает за полученный результат при прибавлении значений;
переменная $h - отвечает за полученный результат при отнимании значений;
переменная $p - отвечает за полученный результат при умножении значений;
переменная $x - отвечает за полученный результат при делении значений.

Сейчас вы убедитесь в полезности экранирования переменных. Припустим, вам нужно на экран монитора вывести названия с двумя кавычками " ", например, Степка работает в ПАО "КМЗ" .
Если вы напишите в коде PHP вот таким способом:

То у вас в результате получится вот такая красивая ошибка:

Причина такой ошибки – двойные кавычки в слове:

$name = "Степка работает в ПАО " КМЗ" ";

Правильно будет . Это делается при помощи "\ ". Пример:

Результат будет вот таким:

Если честно, я ни разу на практике не применял эту функцию. Но рассказать о престыковке я должен.
Попробуем престыковать переменную $a с $f . Это делается при помощи обычной точки «. ».

Основы PHP

Вот таким будет результат:

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

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

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

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


В шаблоне страницы доступна вставка следующих типов переменных: «общие объекты»; «последние новости, статьи»; «группы баннеров»; «меню»; «объекты, привязанные к странице». Переменные таких типов как «Последние новости, статьи», «группы баннеров» и «меню» создаются пользователями, остальные присутствуют в системе по умолчанию.

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


В коде страницы переменная анонса новостей выглядит как
{anonses id=№№}
, где №№ - id анонса.
Для удобства идентификации переменных лучше давать подобным анонсам максимально развернутые имена, так же можно ориентироваться на идентификатор анонса (цифры после id в заголовке анонса). Важно помнить, что анонс, после того, как вы вставите его в шаблон страницы будет выводится только на тех страницах, которые указаны в шаблоне новостей на вкладке «Правила формирования блоков».

Переменные раздела «Группы баннеров » представляют собой список всех созданных до этого момента групп баннеров (подробней об этом читайте в соответствующем разделе руководства).
{ banner id=№№}
, где №№ - id группы баннеров.
Для удобства идентификации переменных лучше давать группам баннеров максимально развернутые имена, так же можно ориентироваться на идентификатор группы баннеров (цифры после id в заголовке).

Переменные раздела «Меню » представляют собой список всех созданных до этого момента меню (подробней об этом читайте в соответствующем разделе руководства).
В коде страницы переменная шаблона выглядит как
{ menu id=№№}
, где №№ - id меню.
Для удобства идентификации переменных лучше давать меню максимально развернутые имена, так же можно ориентироваться на идентификатор меню (цифры после id в заголовке). Важно помнить, что меню будут выводится только на тех страницах, которые указаны на вкладке «Общие свойства» шаблона меню.

Рассмотрим теперь переменные группы «Общие объекты », т.е. переменные доступные для вставки в шаблон страницы «по умолчанию».

Переменная Назначение { page_title} { page_full_title} { page_notags_title} { page_content} { page_info} { page_meta} { page_css} { firm_name} { firm_slogan} { body_onload} { javascript} { parent_title} { language_switcher id=0}
Заголовок страницы. Соответствует заголовку, указанному в поле "Название" в форме создания/редактирования страницы (см. соответсвующий раздел руководства), совпадает с названием страницы в структуре сайта. Используется для вывода заголовка в тексте страницы.
Полный заголовок страницы. Соответствует заголовку, указанному в поле "Полный заголовок" в форме создания/редактирования страницы (см. соответсвующий раздел руководства). Обычно используется в качестве тега страницы
{ page_full_title}, из которого вырезаны все html теги
Выводит содержание страницы. Для текстовой страницы это будет текстовое содержание страницы, для новостных - анонс новостей, для страниц каталога - список элементов и т.д.
Описание страницы. Соответствует заголовку, указанному в поле "Описание" в форме создания/редактирования страницы (см. соответсвующий раздел руководства).
Метатеги страницы. Соответствует заголовку, указанному в поле "Слова для раскрутки " в форме создания/редактирования страницы (см. соответсвующий раздел руководства). В отличие от других переменных выводит не просто данные, а сразу тег .
Подключает ссылки на доп. стили. Необходим, когда на сайте есть модули "форум", "сервер личных сообщений"
Название сайта. Задается в настройках - в админ панели.
Слоган сайта. Задается в настройках - в админ панели
Системная переменная, используется для вывода вызова скриптов при загрузке . Вызывается в теле тега - . Влиять на эту переменную пользователь в системе не может. Для инициализации вызова собственных скриптов, вставте код вызова непосредственно в шаблон после переменной { body_onload}. Для удобства вставки инициализации скрипта в шаблоны нескольких страниц, можно вынести этот код в отдельную баннерную группу и настроить в шаблоне вызов баннеров переменной - .
Системная переменная, используется для вывода вызова скриптов. Вызывается внутри тега - { javascript}. Влиять на эту переменную пользователь в системе не может. Для инициализации вызова собственных скриптов, вставте код вызова непосредственно в шаблон после переменной { javascript}. Для удобства вставки инициализации скрипта в шаблоны нескольких страниц, можно вынести этот код в отдельную баннерную группу и настроить в шаблоне вызов баннеров переменной - { javascript} { banner id=№№}.
Если страница является подстраницей, выводит название "родительской" страницы. Используется для составление сложных заголовков страниц и вывода навигации типа "хлебные крошки".
Переключатель языков

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

Листинг 5-6: Использование локальных и глобальных переменных Example var myGlobalVar = "apples"; function myFunc(name) { var myLocalVar = "sunny"; return ("Hello " + name + ". Today is " + myLocalVar + "."); }; document.writeln(myFunc("Adam")); document.writeln("I like " + myGlobalVar );

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

Hello Adam. Today is sunny. I like apples

Использование примитивных типов

В JavaScript представлено мало примитивных типов. Это string , number и boolean . Кажется, что список очень короткий, но JavaScript очень гибко управляется с этими тремя типами.

Работа со строками

Значения для типа string определяются с использованием одинарных или двойных кавычек, как показано в .

Листинг 5-7: Определение строковых переменных Example var firstString = "This is a string"; var secondString = "And so is this";

Знаки кавычек, которые вы используете, должны совпадать. Например, вы не можете начать строку с одинарной кавычки, а закончить двойными.

Работа с булевскими переменными

Булев тип (boolean) имеет два значения: true и false . В показано, как используются оба значения. Булев тип наиболее полезен при работе с условными операторами, которые я опишу далее в этой главе.

Листинг 5-8: Определение булевских значений Example var firstBool = true; var secondBool = false; Работа с числами

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

Листинг 5-9: Определение числовых значений Example var daysInWeek = 7; var pi = 3.14; var hexValue = 0xFFFF;

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

Создание объектов

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

Листинг 5-10: Создание объекта Example var myData = new Object(); myData.name = "Adam"; myData.weather = "sunny";

Я создал объект new Object() , а результат (только что созданный объект) я назначил переменной myData . Как только объект создался, я могу назначить ему свойства, просто указав значение, например, так:

myData.name = "Adam";

До этого выражения у моего объекта не было свойства name . После того как выражение было выполнено, возникло свойство и ему было присвоено значение Adam . Прочитать значение свойства можно, если объединить имя переменной и имя свойства точкой, вот так:

document.writeln("Hello " + myData.name + ". ");

Использование литералов объекта

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

Листинг 15-11: Использование формата литерала объекта Example var myData = { name: "Adam", weather: "sunny" }; document.writeln("Hello " + myData.name + ". "); document.writeln("Today is " + myData.weather + ".");

Каждое свойство, которое вы хотите определить, отделяется от своего значения при помощи двоеточия (:), а сами свойства разделяются запятой (,).

Использование функций как методов

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

Листинг 15-12: Добавление метода объекту Example var myData = { name: "Adam", weather: "sunny", printMessages: function () { document.writeln("Hello " + this.name + ". "); document.writeln("Today is " + this.weather + "."); } }; myData.printMessages();

В этом примере я использовал функцию, чтобы создать метод printMessages . Обратите внимание, что ссылаясь на свойство, определенное в объекте, я использовал ключевое слово this . Когда функция используется в качестве метода, функция передается объекту, в котором был вызван метод, в качестве аргумента при помощи специальной переменной this . Результат работы кода таков:

Hello Adam. Today is sunny.

Совет

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

Работа с объектами

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

Чтение и изменение значений свойств

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

Листинг 5-13: Чтение и изменение свойств объекта Example myData.name = "Joe"; myData["weather"] = "raining"; document.writeln("Hello " + myData.name + "."); document.writeln("It is " + myData["weather"] );

Первый способ таков, что его знают большинство программистов, и я его использовал в предыдущих примерах. Вы объединяете имя объекта и имя свойства, используя точку (точечная нотация), вот так:

myData.name = "Joe";

Второй способ – это "массивная" нотация (как при обращении к индексу массива), которая выглядит следующим образом:

myData["weather"] = "raining";

В данном случае имя свойства вы заключаете в квадратные скобки ([ и ]). Это может быть очень удобным способом доступа к свойству, потому что вы можете обратиться к нужному свойству, используя переменную:

var myData = { name: "Adam", weather: "sunny", }; var propName = "weather"; myData[propName ] = "raining";

Это основа для перечисления свойств объекта, о чем я сейчас расскажу.

Перечисление свойств объекта

Вы перечисляете свойства объекта, используя оператор for...in . В показано, как можно использовать этот оператор.

Листинг 5-14: Перечисление свойств объекта Example var myData = { name: "Adam", weather: "sunny", printMessages: function () { document.writeln("Hello " + this.name + ". "); document.writeln("Today is " + this.weather + "."); } }; for (var prop in myData) { document.writeln("Name: " + prop + " Value: " + myData); }

В цикле for...in в блоке кода выполняются выражения для каждого свойства объекта myData . Переменной prop назначено имя свойства, обрабатываемого при каждой итерации. Я использовал "массивную" нотацию, чтобы получить значение свойства объекта. Результат работы кода из листинга таков (я отформатировал результаты, чтобы их было проще читать):

Name: name Value: Adam Name: weather Value: sunny Name: printMessages Value: function () { document.writeln("Hello " + this.name + ". "); document.writeln("Today is " + this.weather + "."); }

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

Добавление и удаление свойств и методов

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

Листинг 5-15: Добавление нового свойства объекту Example var myData = { name: "Adam", weather: "sunny", }; myData.dayOfWeek = "Monday";

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

Листинг 5-16: Добавление нового метода в объект Example var myData = { name: "Adam", weather: "sunny", }; document.writeln("Hello"); };

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

Листинг 5-17: Удаление свойства из объекта Example var myData = { name: "Adam", weather: "sunny", }; myData.sayHello = function() { document.writeln("Hello"); }; delete myData.name; delete myData["weather"]; delete myData.sayHello; Как определить, есть ли у объекта свойство

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

Листинг 5-18: Проверка на то, есть ли у объекта свойство Example var myData = { name: "Adam", weather: "sunny", }; var hasName = "name" in myData; var hasDate = "date" in myData; document.writeln("HasName: " + hasName); document.writeln("HasDate: " + hasDate);

В этом примере я сделал проверку для свойства, которое существует, и для свойства, которого нет. Значение переменной hasName будет true , значение свойства hasDate – false .

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

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

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

Табл. 1. Список переменных окружения Переменная Описание
DOCUMENT_ROOT Путь к корневой папке сайта. Для локального веб-сервера значение может принимать вид z:/home/сайт/www, а в других случаях зависит от операционной системы сервера и используемого программного обеспечения.
GATEWAY_INTERFACE Версия CGI (Common Gateway Interface, общий шлюзовый интерфейс). Значение обычно равно CGI/1.1 .
HTTP_ACCEPT Типы файлов, которые способен принять браузер. В качестве значения возвращается список поддерживаемых MIME-типов разделенных между собой запятой, например: text/html, application/xhtml+xml .
HTTP_CONNECTION Тип соединения браузера с веб-сервером. Так, значение keep-alive означает, что браузер поддерживает постоянное соединение с сервером. При этом в течение одного сеанса соединения разрешено делать несколько запросов. Повторного соединения в таком случае уже не происходит.
HTTP_HOST Доменное имя сайта. Обычно различают имена с префиксом www (www..ru). Переменная вернёт тот адрес сайта, который указан в адресной строке браузера.
HTTP_REFERER Адрес страницы, с которой пользователь перешел на данный сайт, он еще называется реферер.
HTTP_USER_AGENT

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

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:6.0.2) Gecko/20100101 Firefox/6.0.2

говорит, что пользователь использует браузер Firefox 6.0.2 под операционной системой Windows 7.

QUERY_STRING Запрос, который указан в адресной строке после вопросительного знака (?). Обычно пишется в форме «переменная=значение», где переменные разделяются между собой амперсандом (&).?id=5&slv=34 будет возвращено значение id=5&slv=34 .
REMOTE_ADDR IP-адрес посетителя сайта.
REQUEST_METHOD Метод отправки данных на сервер. По умолчанию применяется метод GET.
REQUEST_URI Адрес запрашиваемого документа. Отсчёт ведётся от корня сайта, т.е..html вернется значение 1.html .
SERVER_ADDR IP-адрес компьютера, на котором размещается сайт.
SERVER_ADMIN Адрес электронной почты администратора сайта.
SERVER_NAME Имя сервера.
SERVER_PORT Порт, по которому ожидается получение данных.
SERVER_PROTOCOL Протокол для получения и отправки данных. Значение обычно равно HTTP/1.1 .
SERVER_SOFTWARE Программное обеспечение установленное на сервере. Для веб-сервера Apache возвращается номер версии (Apache/2.2.4 ), а также версия PHP (PHP/5.3.3 ).

В примере 1 показано использование переменных окружения для отображения на веб-странице требуемой информации.

Пример 1. Вывод значения переменной DOCUMENT_ROOT

SSI

Путь к корневой папке сайта:

В результате выполнения примера будет выведена следующая строка: Путь к корневой папке сайта: /home/сайт/www .

Значения переменных окружения можно посмотреть с помощью программы на PHP, используя функцию phpinfo(), как показано в примере 2.

Пример 2. Использование phpinfo()

В результате выполнения программы будет выведена таблица с разными параметрами, в том числе и переменными окружения в разделе «Apache Environment» (рис. 1).

Рис. 1. Apache Environment

Также можно написать программу на PHP, которая будет выводить все переменные окружения в виде таблицы (пример 3)..

Пример 3. Вывод переменных окружения

Всем привет, тема переменных в CSS давно ходит по интернету, однако не все знают о том, что это такое, да и сама технология не так давно вышла в релиз. И хоть использовать её во многих случаях рановато, уже пора понимать что она из себя представляет и как ею пользоваться. Давайте попробуем разобраться с технологией вместе. Обращу ваше внимание, что эта статья для тех, кто не знает о CSS переменных (кастомных свойствах) или только слышал о них. Если вы знакомы и умеете работать с данной фичей, то вам данная статья будет не интересна.

Итак, тема с переменными в стилях уже затерта до дыр, т.к. они давным давно существуют в препроцессорах. Это удобно, я уже плохо представляю себе написание стилей без возможности сохранить где-то определенное значение (цвет, величину, название шрифта, тип маркера у списка, всё что может придти в голову...). Однако препроцессоры не могут дать нам той гибкости, которую дают нативные переменные в CSS, и скоро вы поймете, почему.

Для начала нужно понять, как объявлять и использовать переменные. Переменные объявляются в селекторах:

:root { --body-background: #ccc; } body { background-color: var(--body-background); }
Как видно из листинга выше, переменные объявляются двумя дефисами перед именем:
--variable-name

Чтобы использовать переменную, необходимо воспользоваться функцией var . Она имеет 2 параметра. Это, естественно, имя переменной, а вторым необязательным параметром идёт значение свойства, которое необходимо использовать в случае отсутствия переменной.

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