Видеокурс "jQuery от А до Я. Библиотека JavaScritp для начинающих." на Stepik, бесплатно! https://stepik.org/134100

Типы данных в JavaScript

Всего в JavaScript, существует 6 типов данных:
— Число number,
— Строка string,
— Логический (булев) тип данных boolean,
— Отсутствие значения undefined,
— Пустота, ничто null,
— Объект object.

Эти 6 типов данных, делятся на два вида, простые типы данных и составные (объектные) типы данных.

Простые (примитивные) типы данных: number, string, boolean, undefined, null.
Составные (объектные) типы данных: object

Составным типом данных являются: объект, функция, массив (см. в конце статьи).

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

var имяПеременной;
имяПеременной = значение;
alert(typeof имяПеременной);

Тип данных: number

Number — тип данных число. Числа могут быть как целыми так и с плавающей запятой (дробные, вещественные, действительные числа).

var myNumber = 5;
var myNumber2 = 5.5;

В JavaScript в числах с плавающей запятой, используются точки, а не запятые 🙂

Проверяем с помощью оператора typeof, тип данных наших переменных:

alert(typeof myNumber);
alert(typeof myNumber2);

В обоих случаях, скрипт выдаст нам сообщение number.

Тип данных: string

String — тип данных строка. Чтобы превратить значение переменной в строку, её нужно обрамить кавычками: дойными «строка» или одинарными ‘строка’. Если число обрамить кавычками, то её тип данных из number превратится в string:

var myString = 'Привет я строка JavaScript';
var myString2 = '5';

Проверяем с помощью оператора typeof, тип данных наших переменных:

alert(typeof myString);
alert(typeof myString2);

В обоих случаях скрипт выдаст нам сообщение string.

Тип данных: boolean

Boolean — логический (булев) тип данных, он может иметь только одно их двух значений: true (правда) или false (ложь). Значения true или false обычно появляются в операциях сравнения или логических операциях.

var myBoolean = true;
var myBoolean2 = false;

Проверяем с помощью оператора typeof, тип данных наших переменных:

alert(typeof myBoolean);
alert(typeof myBoolean2);

В обоих случаях, скрипт выдаст нам сообщение boolean.

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

Тип данных: undefined

Undefined — тип данных который имеет всего одно значение undefined. Этот тип данных появляется тогда, когда переменная объявлена, но не инициализирована, т.е. когда у переменной (свойства объекта или элемента массива) отсутствует значение.

// Объявили переменную, но не присвоили ей значения
var myUndefined;
// Проверяем с помощью оператора typeof, тип данных нашей переменной
alert(typeof myUndefined);

Функция alert() выдаст нам сообщение undefined.

Если переменной присвоить значение undefined, то её тип данных тоже будет undefined.

var myUndefined2 = undefined;
alert(typeof myUndefined2);

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

Тип данных: object

Object — тип данных объект.

var myObject;
myObject = {
    svoistvo: "znachenie",
    svoistvo2: "znachenie2",
};

Проверяем с помощью оператора typeof, тип данных нашего объекта:

alert(typeof myObject);

Скрипт выдаст нам сообщение object. Так же оператор typeof, покажет object у массивов и функций (см. ниже).

Тип данных: null

Null — это специальный тип данных обозначающий пустоту (ничего). Null — это специальный пустой объект. Например null может появиться при нажатии на кнопку отмена при использовании функции promt().

var myNull = null;
alert(typeof myNull);

Данный скрипт выдаст сообщение object, почему так происходит читайте ниже.

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

Уточнение по работе с оператором typeof

Здесь сообщу о некоторых подводных камнях которые есть в операторе typeof, например при работе с null и с функциями он выдаёт не верный тип данных, что часто путает начинающих. Ниже я составил небольшую табличку, показывающую как работает оператор typeof:

typeof 7;             // number
typeof "Строка";      // string
typeof true;          // boolean
typeof undefined;     // undefined
typeof {};            // object
typeof [];            // object
typeof null;          // object
typeof new Array();   // object
typeof function(){};  // function
typeof function имяФункции(){} // function

Хотя на самом деле, null это null, а функция это object.

Вместо new Array() можно вcтавить любой другой конструктор объектов, например new Date() или new RegExp().

Функции WordPress wp_head() и wp_footer()

В этом уроке мы рассмотрим две важные функции WordPress: wp_head() и wp_footer().

wp_head() — функция WordPress, которая подключает CSS-файлы, скрипты и метатеги плагинов и ядра WordPress.

wp_footer() — функция WordPress, которая отвечает за вывод панели администратора вверху сайта при входе в админку WordPress /wp-login.php. Также данная функция тоже подключает CSS и JS-файлы.

На самом деле, у этих двух функций wp_head() и wp_footer() довольно широкий объем работ, за который они отвечают, а именно: обеспечение совместимости между плагинами которые установлены в ваш WordPress, подключение различных файлов CSS и JavaScript, обеспесение взаимодействия с функциями ядра WordPress и многое другое. Короче эти функции очень важны и их нужно подключить к вашим файл-шаблонам.

Функции wp_head() и wp_footer(), нужно разместить в подключаемые файлы WordPress: header.php и footer.php.

Функцию wp_head() нужно разместить в файл header.php, перед закрывающим тегом </head>, а функцию wp_footer(), нужно разместить в файл footer.php перед закрывающим тегом </body>, в коде ниже, данные функции выделены красным цветом:

header.php
...
        <?php wp_head(); ?>
    </head>

footer.php
...
        <?php wp_footer(); ?>
    </body>
</html>

Читать далее:

Подключаемые файлы WordPress header.php, sidebar.php, footer.php

Подключаемые файлы: header.php, sidebar.php и footer.php

Подключаемые файлы WordPress (header.php, sidebar.php и footer.php) — это файлы которые хранят в себе HTML-код страницы отвечающий за вывод шапки сайта, сайдбара и подвала сайта. Обычно код хранящийся в данных файлах, неизменный на каждой странице сайта главной и внутренних.

В этом уроке, мы разделим с вами HTML-код файл-шаблона index.php на четыре части:

header.php - хранит код шапки сайта
sidebar.php - хранит код сайдбара сайта (боковая панель)
footer.php - хранит код подвала сайта

Четвертая часть останется в файл шаблоне index.php, это так называемый динамический контент, который меняется в зависимости от того какой файл-шаблон запущен.

Например, если открыта главная страница сайта то запускается файл-шаблон index.php в динамической контентной части при этом будет расположено 10 анонсов (кратких содержаний основных постов) постов.

Если мы кликнем по краткому содержанию поста, то перейдем на страницу с полным содержанием поста, при этом запустится файл-шаблон single.php (с которым мы познакомимся в следующих уроках).

Т.е. в четвертой части (динамический контент), контент всегда меняется: 10 анонсов постов (index.php), 1 полное описание поста (single.php), но при этом шапка сайдбар и подвал остаются не изменными и одинаковыми каккой-бы шаблон не запустился.

Есть еще несколько причин, почему нужно отделять повторяющиеся части HTML-кода от изменяющихся (динамических), но об этом мы поговорим чуть позже. Сейчас же я вам покажу как нужно разделить файл-шаблон index.php на 4 части.

HTML-код файла index.php выглядит следующим образом:

<!DOCTYPE html>
<html>
    <!-- Голова страницы сайта -->
    <head>
        <meta charset="utf-8" />
        <title>Название страницы</title>
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />
    </head>

    <!-- Тело страницы сайта -->
    <body>
        <div class="wrapper">

            <div class="header">
                Шапка страницы сайта
            </div> <!-- .header -->
            
            <div class="main">
            
                <div class="content">
                    Основной контент страницы сайта
                </div> <!-- .content -->

                <div class="sidebar">
                    Сайдбар страницы сайта (боковая панель с виджетами)
                </div> <!-- .sidebar -->

            </div> <!-- .main -->
            
            <div class="footer">
                Подвал страницы сайта
            </div>
        
        </div> <!-- .wrapper -->
    </body>
</html>

Теперь создайте в вашей папке со своей темой, например mytheme, три файла с именами header.php, sidebar.php и footer.php, затем:

  • Вырежьте из файл-шаблона index.php, код выделенный красным цветом и вставьте в файл header.php (это будет шапка сайта)
  • Вырежьте из файл-шаблона index.php, код выделенный голубым цветом и вставьте в файл sidebar.php (это будет сайдбар сайта)
  • Вырежьте из файл-шаблона index.php, код выделенный зелёным цветом и вставьте в файл footer.php (это будет подвал сайта)

Теперь код файл-шаблона index.php, должен выглядеть следующим образом:

<div class="content">
    Основной контент страницы сайта
</div> <!-- .content -->

Т.е остался всего лишь один блок в котором у нас будет размещаться динамический контент (а если быть точнее, то Цикл WordPress, который мы изучим в следующих уроках).

Теперь нам осталось лишь подключить к файл-шаблону index.php, подключаемые файлы: header.php, sidebar.php и footer.php, за это отвечают следующие функции:

<?php get_header(); ?> - подключает файл header.php (шапка сайта)
<?php get_sidebar(); ?> - подключает файл sidebar.php (сайдбар сайта)
<?php get_footer(); ?> - подключает файл footer.php (подвал сайта)

Итого, ваш файл-шаблон index.php, теперь должен выглядеть следующим образом:

<?php get_header(); ?>

<div class="content">
    Основной контент страницы сайта
</div> <!-- .content -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Читать далее: Функции WordPress wp_head() и wp_footer()

WordPress index.php

index.php файл-шаблон WordPress

index.php — главный файл-шаблон темы WordPress, на основе которого строится каркас всех остальных файл-шаблонов.

В index.php внедряются подключаемые файлы WordPress: header.php (шапка сайта), sidebar.php (боковая панель, с виджетами, сайта) и footer.php (подвал сайта). Как подключать эти файлы мы рассмотрим в следующих уроках.

index.php темы WordPress содержит основной цикл, который выводит на экран все существующие записи (посты) сайта. Количество постов, выводимых файлом index.php, зависит от настроек админки WordPress Настройки -> Чтение, обычно это 10 постов.

10-postov-wordpress

Что такое цикл WordPress, мы рассмотрим чуть далее.

Заполним файл index.php

На данный момент, наш файл index.php пустой, заполним его HTML-кодом. Здесь сделаю некоторое отступление, так как данный учебник посвящён созданию тем WordPress, то я не буду объяснять что делает тот или иной HTML или CSS код, но при этом сделаю его наиболее простым, чтобы вы могли полностью сосредоточиться на вопросе темизации WordPress и его функциях.

Разместите HTML-код, расположенный ниже в файл-шаблон index.php, у меня данный файл находится по адресу wp-content/themes/mytheme/index.php:

<!DOCTYPE html>
<html>
    <!-- Голова страницы сайта -->
    <head>
        <meta charset="utf-8" />
        <title>Название страницы</title>
    </head>

    <!-- Тело страницы сайта -->
    <body>
        <div class="wrapper">

            <div class="header">
                Шапка страницы сайта
            </div> <!-- .header -->
            
            <div class="main">

                <div class="content">
                    Основной контент страницы сайта
                </div> <!-- .content -->

                <div class="sidebar">
                    Сайдбар страницы сайта (боковая панель с виджетами)
                </div> <!-- .sidebar -->

            </div> <!-- .main -->
            
            <div class="footer">
                Подвал страницы сайта
            </div>
        
        </div> <!-- .wrapper -->
    </body>
</html>

При открытии вашего сайта, у вас должно появится следующее:

html-kod-vnedrennyi-v-index-php

Отформатируем наш HTML-код с помощью CSS. Разместите код расположенный ниже, в файл style.css:

body {margin:0;background-color:#f2f2f2;}
.wrapper {color:#f2f2f2;margin:0 auto;font:bold 36px Arial;width:70%;}
.header {background-color:#43459d;margin-bottom:30px;padding-bottom:50px;}
.main {overflow:hidden;margin-bottom:30px;background-color:#43459d;}
.content {float:left;width:60%;padding-bottom:50px;}
.sidebar {float:left;background-color:#333;width:40%;padding-bottom:50px;}
.footer {background-color:#43459d;padding-bottom:50px;}

Затем в файл-шаблон index.php, добавьте WordPress функцию, которая подключит файл style.css, к файлу index.php

Код который нужно добавить выделен зелёным цветом, а сама WordPress функция красным.

<!-- Голова страницы сайта -->
<head>
    <meta charset="utf-8" />
    <title>Название страницы</title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />
</head>

bloginfo(‘stylesheet_url’) — функция выводящая путь к файлу style.css

В итоге, открыв свой сайт на WordPress, вы должны увидеть следующую картину:

podklyuchaem-style-css

Читать далее: Внедряем подключаемые файлы header.php, sidebar.php, footer.php

WordPress style.css

style.css — файл темы WordPress

style.css — файл стилей темы WordPress, в котором содержится CSS-код сайта.

В файле style.css размещается CSS-код отвечающий за форматирование темы WordPress. Данный файл практически ничем не отличается от других CSS-файлов, за исключением того, что вначале этого файла нужно разместить специальный комментарий описывающий тему WordPress.

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

/*
    Theme Name: Название темы
    Theme URI: Адрес сайта страницы откуда можно скачать тему (не обязательно)
    Description: Краткое описание темы
    Author: Имя автора темы
    Author URI: Адрес сайта автора темы (не обязательно)
    Template: Имя родительской темы (не обязательно)
    Tags: Ключевые слова темы (не обязательно)
    Version: Номер версии темы (не обязательно)
    .
        Развёрнутое описание темы или описание лицензии,
        по которой распростарняется данная тема (не обязательно)
    .
*/

Комментарий состоит из наборов свойство: значение, например Theme Name: — это свойство, а Название темы — это значение.

Рассмотрим пример комментария для файла style.css, нашей темы WordPress, не обязательные свойства пока опустим:

/*
Theme Name: Моя тема
Description: Моя первая тема
Author: Дамир
*/

Добавив данный комментарий в файл style.css, по адресу /wp-content/themes/mytheme/.

Комментарий WordPress файла style.css

Мы зайдя в админку WordPress и перейдя во Внешний вид -> Темы, далее нажав по кнопке Информация о теме

Кнопка информация о теме

Можем увидеть значения свойств нашего комментария.

Значения свойств комментария в админке WordPress

PS: кстати файл style.css в WordPress можно использовать и без комментария, но это не рекомендуется.

Подключаем файл style.css, к теме WordPress

Чтобы подключить файл style.css к теме WordPress (обычно подключают к файлу header.php), можно воспользоватся одним из нескольких способов:

<?php bloginfo(‘template_url’); ?>/style.css — функция выводящая адрес к теме,
<?php bloginfo(‘stylesheet_url’); ?> — функция выводящая адрес style.css,
http://имяСайта/wp-content/themes/имяТемы/style.css — абсолютный путь,
functions.php — один из важнейших файлов темы WordPress

Самым правильным способом подключения файла style.css, считается подключение через файл functions.php (более подробно об этом, мы поговорим в следующих уроках).

Читать далее: WordPress index.php