Old code mu

03.09.202203.09.2022 admin 0 Comments

Old code mu

Бесплатные вебинары по HTML и CSS

Анимация на CSS для чайников

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

Плавные переходы transition на CSS

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

Обычные и 3d трансформации на CSS

В данных видео содержатся записи двух вебинаров: по обычным трансформациям CSS и по 3D трансформациям.

Продвинутая работа с селекторами CSS

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

Свойство display

В вебинаре рассказывается про работу со свойством display и особенно со значением inline-block. Данный вебинар рекомендуется тем, кто не знает, что такое блочные и строчные элементы, как поставить список из li в линию, как убрать отступы между inline-block элементами.

Свойство float. Сравнение с display: inline-block

В данном вебинаре рассказывается про работу со свойством float, разбираются отличия от свойства display в значении inline-block.

Основы работы с flexbox на CSS

Псевдоклассы и псевдоэлементы CSS

В данном вебинаре рассказывается про работу с псевдоклассами и псевдоэлементами CSS.

Продвинутая работа с градиентами на CSS

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

Задачи на работу с анимацией на CSS

Учебник HTML CSS

Практика

Продвинутый курс

Практика

Адаптив

Продвинутые вещи

Практика

Перед решением задач изучите теорию к данному уроку.

Задачи для решения

Движение

Повторите страницу по данному по образцу (движение повторится 3 раза):

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

Бесконечное движение

Повторите страницу по данному по образцу (движение будет бесконечным):

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

Смена фона

Повторите страницу по данному по образцу:

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

Движение по квадрату

Повторите страницу по данному по образцу:

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

Движение по квадрату и смена фона

Повторите страницу по данному по образцу:

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

Движение туда-сюда

Повторите страницу по данному по образцу (здесь движение реализовано через 3 ключевые точки: 0%, 50%, 100%):

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

Повторите страницу по данному по образцу (здесь движение реализовано через animation-direction: alternate):

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

Индикатор

Повторите страницу по данному по образцу:

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

Повторите страницу по данному по образцу:

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

Пауза

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

Падающий мячик

Повторите страницу по данному по образцу:

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

Практика JavaScript для новичков

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Регулярки

Разное

Работа с канвасом

Практика

Контекст

Drag-and-Drop

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Библиотека jQuery

Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

Перед решением задач изучите теорию к данному уроку.

Задачи для решения

Даны 3 инпута и кнопка. По нажатию на кнопку получите числа, стоящие в этих инпутах и запишите их сумму в четвертый инпут.

Дан инпут. В него вводится число. По потери фокуса найдите сумму цифр этого числа.

Дан инпут. В него вводятся числа через запятую. По потери фокуса найдите среднее арифметическое этих чисел (сумма делить на количество).

Дан инпут. В него вводится ФИО через пробел. По потери фокуса запишите фамилию, имя и отчество в отдельные инпуты.

Дан инпут. В него вводится ФИО через пробел. ФИО вводится с маленькой буквы. Сделайте так, чтобы по потери фокуса инпутом, введенные фамилия, имя и отчество автоматически стали записанными с большой буквы (в том же инпуте).

Дан инпут. В него вводится текст. По потери фокуса узнайте количество слов в этом тексте.

Дан инпут. В него вводится текст. По потери фокуса узнайте количество символов в самом длинном слове в этом тексте.

Дан инпут. В него вводится дата в формате 31.12.2016. По потери фокуса в этом же инпуте поставьте эту дату в формате 2016-12-31.

Дан инпут. В него вводится год рождения пользователя. По нажатию на кнопку выведите в абзац ниже сколько пользователю лет.

Дан инпут. В него вводится дата в формате 31.12.2016. По потери фокуса узнайте день недели (словом), который приходится на эту дату.

Дан инпут. В него вводится слово. По нажатию на кнопку проверьте то, что это слово читается с начала и с конца одинаково (например, мадам).

Дан инпут. В него вводится число. Проверьте по вводу, что это число содержит внутри себя цифру 3.

Даны N абзацев и кнопка. По нажатию на кнопку запишите в конец каждого абзаца его порядковый номер.

Даны N абзацев с числами. По нажатию на кнопку выведите эти числа в инпут через запятую в порядке возрастания.

Даны ссылки. По загрузке страницы добавьте в конец каждой ссылки ее href в круглых скобках.

Даны ссылки. По загрузке страницы, если ссылка начинается с http://, то добавьте ей в конец стрелку → (делается так: →).

Даны N абзацев с числами. По нажатию на любой абзац запишите в него квадрат числа, которое в нем находится.

Даны картинки. По нажатию на любую картинку увеличьте ее в 2 раза.

Даны N картинок размера 30px. По нажатию на картинку под ними эта картинка появляется размером в 50px.

Дан инпут. Выделите любой текст на странице. По окончанию выделения этот текст должен записаться в этот инпут.

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

Дан инпут. Даны абзацы. Пусть в этот инпут записывается суммарное количество нажатий по этим абзацам.

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

Дан инпут и кнопка. По нажатию на кнопку сгенерируйте случайную строку из 8-ми символов и запишите в инпут.

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

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

Дан абзац. Сделайте так, чтобы каждую секунду он менял свой цвет с красного на зеленый и наоборот.

Даны инпуты с числами. Произвольное количетсво, пусть три. В первый инпут запишите 1, через секунду во второй инпут запишите 2, еще через секунду в третий инпут 3, потом через секунду в первый инпут запишите 4, во второй 5 и так далее до бесконечности.

Дана ссылка. Дан чекбокс. По нажатию на ссылку меняйте состояние чекбокса с отмеченного на неотмеченное и наоборот.

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

Спросите у пользователя какой язык (html, css, js, php) он знает с помощью радио кнопочек. Выведите этот язык в абзац.

Спросите у пользователя какие языки (html, css, js, php) он знает с помощью чекбоксов. Выбранные языки должны выводится в абзац ниже через запятую.

Дан инпут. Даны li. В инпут пишется номер. Сделайте так, чтобы по вводу числа, li с заданным номером покрасился в красный цвет.

Дан блок с кнопкой ‘закрыть блок’. По нажатию на эту кнопку блок должен исчезнуть. Кнопка размещается внутри блока и должна исчезнуть вместе с ним. Блоков может быть любое количество, каждый из них закрывает своя кнопка.

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

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

На странице есть дивы. В них есть текст. Обойдите все дивы и обрежьте тот текст, который в них стоит так, чтобы он стал длиной 10 символов. И добавьте троеточие в конец обрезанного текста

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

Дана таблица с числами. По нажатию на кнопку в инпут под таблицей выведите эти числа через запятую в порядке возрастания.

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

Дана таблица с числами. По нажатию на ячейку она активируется и становится красного цвета. Активировать можно много ячеек. Под таблицей кнопка. По нажатию по этой кнопке в абзац ниже выведите сумма активированных ячеек. Реализуйте кнопку ‘сбросить активированные ячейки’.

Реализуйте раскрывающийся список. По умолчанию есть список стран (ul), по нажатию на страну внутри li со страной появляется список городов.

Сделайте селекты день, мес, год. Сделайте так, чтобы не корректную дату нельзя было выбрать (например, 30 февраля нельзя, а 30 марта можно или 29 февраля можно, но только в високосный год).

Реализуйте генератор таблиц, ширина и высота таблиц задается в двух инпутах (например, таблица 5 на 10 ячеек).

Дан список и кнопка. По нажатию на кнопку посортируйте пункты списка по возрастанию.

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

Основы работы с JavaScript

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Регулярки

Разное

Работа с канвасом

Практика

Контекст

Drag-and-Drop

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Библиотека jQuery

В этом уроке мы разберем работу с данными на языке JavaScript.

Строки и числа

Самыми простыми типами данных в JavaScript являются строки и числа.

Переменные

Одним из самых главных и распространенных объектов в программировании является переменная.

Имя переменной должно состоять из английских букв: больших или маленьких, а также цифр и знака_подчеркивания.

В JavaScript при объявлении переменной обязательно должно быть написано ключевое слово var:

Операция присваивания

Очень важным элементом программирования является операция присваивания. Пример присваивания:

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

Функция alert

В JavaScript существует специальная функция alert, которая позволяет вывести какой-либо текст в окно браузера в виде диалогового окошка.

Следующий код выводит на экран заданный текст:

Нажмите на эту ссылку, чтобы увидеть такое окошко.

А в следующим коде переменной text присваивается фраза, а затем содержимое этой переменной выводится на экран:

Математические операции

В JavaScript между числами можно совершать различные математические операции:

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

В JavaScript можно получить доступ к определенному символу строки по его номеру таким образом: a[n] – n-ный символ строки (учтите, что нумерация идет с нуля):

Сложности с операцией присваивания

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

С точки зрения математики запись a = a + 2 абсурдна, но не с точки зрения программирования.

Операции инкремента и декремента

Операция a++ или ++a – увеличивает переменную a на единицу. Эта операция называется инкремент.

Операция a— или —a – уменьшает переменную a на единицу. Эта операция называется декремент.

Давайте посмотрим, в каких случаях проявляется разница между ++a и a++.

Пусть у нас есть код alert(++a) и код alert(a++).

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

В данном случае мы присваиваем переменной a ее текущее значение, увеличенное на 2. Однако JavaScript позволяет записать этот код еще короче с помощью оператора +=:

Специальные значения

Значения undefined и null

Значение null обозначает ‘ничего’. К примеру, мы можем присвоить переменной значение null в знак того, что там ничего не лежит.

Значения true и false

К примеру, на вопрос ‘вам уже есть 18 лет?’ в можете ответить да, то есть true, или нет, то есть false.

Значение NaN

Функция prompt

Кроме функции alert, которая выдает диалоговое окошко, существует функция prompt, которая не только выдает окошко с текстом, но и позволяет получить от пользователя какой-либо текст.

Этот текст можно записать в переменную и затем выполнить над ним какие-либо операции.

В следующем примере мы спросим имя пользователя, запишем его в переменную name и с помощью функции alert выведем на экран:

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

Функция confirm

Эта функция вызывает окошко с вопросом, на который нужно ответить пользователю, и двумя кнопками для ответа: с кнопкой ‘ОК’ и с кнопкой ‘Отмена’.

В следующем примере функция confirm выведет диалоговое окно с вопросом ‘Вам уже есть 18 лет?‘.

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

Типизация переменных

Что будет, если попробовать перемножить, к примеру, число и строку, вот так: 3 * ‘3’? В результате вы получите число 9. Это значит, что JavaScript автоматически осуществляет преобразование типов при необходимости, вам не нужно за это переживать.

Однако, есть нюанс: если мы попытаемся сложить строку и число, то JavaScript сложит их как строки, а не как числа, вот так: ‘3’ + 3 получится строка ’33’, а не число 6.

В случае, например, с умножением JavaScript понимал, что нельзя перемножить строки, поэтому строки переводил в числа и перемножал их. А случай со сложением можно трактовать двояко: складывать как строки или как числа (плюс-то используется как для сложения строк, так и чисел).

Второй вариант такой: можно сказать яваскрипту, что мы хотим явно преобразовать строку к числу. Это делается с помощью функции Number, вот так: Number(‘3’) + 3. В результате получится 6, а не ’33’.

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

Можно преобразовывать и к другим типам с помощью функций Boolean, String и других подобных.

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Учебник jQuery для новичков от Трепачёва Дмитрия

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Регулярки

Разное

Работа с канвасом

Практика

Контекст

Drag-and-Drop

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Библиотека jQuery

В данном уроке мы с вами начнем изучать библиотеку jQuery. Для работы с ней вы должны владеть хотя бы минимальными навыками JavaScript.

Что такое jQuery?

Код jQuery выглядит намного компактнее и проще для написания.

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

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

После подключения можно начинать писать код с использованием этой библиотеки.

Видео для тех, кто ничего не понял

Здесь скоро появится видео по подключению jQuery.

Начало работы с jQuery

Работа с библиотекой jQuery осуществляется с помощью универсальной функции $, которая для краткости состоит всего лишь из одного символа.

После доллара следует писать круглые скобки (это же функция), в которых указываются параметры (обычно один параметр), примерно вот так: $(параметр).

Чаще всего с помощью доллара $ получают группу HTML элементов по CSS селектору.

Давайте получим все элементы с классом .www:

А теперь получим только абзацы с классом p.www:

А теперь получим элемент с id, равным www:

Как вы видите, используются обычные CSS селекторы, подобно методу querySelectorAll. Только querySelectorAll появился гораздо позже, чем jQuery, и обладает меньшими возможностями (зато работает быстрее).

Наборы jQuery

Обратите внимание на переменную elems:

В нее запишется группа выбранных элементов, так называемый набор элементов jQuery.

Вы можете одновременно менять все элементы набора jQuery (в отличие от querySelectorAll никаких циклов не требуется).

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

К примеру, вот так мы получим все элементы с классом .www и поставим им красный цвет:

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

Давайте получим все элементы с классом .www, поставим им красный цвет, и сменим их текст на ‘новый текст’:

Основы работы с PHP

Учебник PHP

Практика

Важное

Регулярки

Работа с htaccess

Файлы, папки

Сессии и куки

Работа с БД

Практика по работе с БД в PHP

Перед чтением см. новые уроки раздела «Важное», которые появились выше.

Практика

Движок PHP

Продвинутые БД

Аутентификация

Практика

ООП и MVC

Абстрактные классы и интерфейсы

Трейты

ООП Магия

Практика

Практика: классы как набор методов

В этом уроке мы разберем работу с данными на языке PHP.

Строки и числа

Самыми простыми типами данных в PHP являются строки и числа.

Переменные

Одним из самых главных и распространенных объектов в программировании является переменная.

В PHP перед переменной обязательно должен быть написан знак доллара $:

Операция присваивания

Очень важным элементом программирования является операция присваивания.

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

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

Комментарии могут быть многострочными и однострочными:

Функции

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

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

Например, в PHP есть стандартная функция sqrt(), которая параметром принимает число, а возвращает квадратный корень этого числа.

Давайте найдем корень из 25 и запишем в переменную $a:

Функция echo

В PHP существует специальная функция echo, которая позволяет вывести какой-либо текст в окно браузера. В отличие от других функций, после echo не требуются круглые скобки ().

Следующий код выводит на экран заданный текст:

А в следующим коде переменной $text присваивается фраза, а затем содержимое этой переменной выводится на экран:

Математические операции

Чтобы понять, как с ними работать, посмотрите на следующий пример:

Можно сначала записать числа в переменные, а потом уже проводить операции с переменными:

А можно также одновременно производить операции и с числами, и с переменными:

Специальные значения

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

Значения true, false

К примеру, на вопрос ‘вам уже есть 18 лет?’ в можете ответить да, то есть true, или нет, то есть false.

Эти значения называются логическими.

Значение null

Функция var_dump

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

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

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

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

Пример использования var_dump():

PHP внутри HTML

PHP код можно вставлять внутрь HTML кода:

Сложение строк в PHP

В PHP, в отличие от многих других языков, строки складываются с помощью знака «точка»:

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

В PHP можно получить доступ к определенному символу строки по его номеру таким образом: $a[n] – n-ный символ строки (учтите, что нумерация идет с нуля):

Сложности с операцией присваивания

Операции инкремента и декремента

Операция $a++ или ++$a – увеличивает переменную $a на единицу. Эта операция называется инкремент.

Операция $a— или —$a – уменьшает переменную $a на единицу. Эта операция называется декремент.

Давайте посмотрим, в каких случаях проявляется разница между ++a и a++.

Пусть у нас есть код echo ++a и код echo a++.

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

В данном случае мы присваиваем переменной $a ее текущее значение, увеличенное на 2. Однако PHP позволяет записать этот код еще короче с помощью оператора +=:

Существует также операция .=:

Типизация переменных

Что будет, если попробовать сложить, к примеру, число и строку, вот так: 3+’3′? В результате вы получите число 6. Это значит, что PHP автоматически осуществляет преобразование типов при необходимости, вам не нужно за это переживать.

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Задачи на основы языка PHP

Учебник PHP

Практика

Важное

Регулярки

Работа с htaccess

Файлы, папки

Сессии и куки

Работа с БД

Практика по работе с БД в PHP

Перед чтением см. новые уроки раздела «Важное», которые появились выше.

Практика

Движок PHP

Продвинутые БД

Аутентификация

Практика

ООП и MVC

Абстрактные классы и интерфейсы

Трейты

ООП Магия

Практика

Практика: классы как набор методов

Перед решением задач изучите теорию к данному уроку.

Примеры решения задач

Задача

Задача. Создайте переменную $var и присвойте ей значение ‘hello’. Обращаясь к отдельным символам этой строки выведите на экран символ ‘h’, символ ‘e’, символ ‘o’.

Задача

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

Если нам нужно получить количество секунд в сутках, то умножим еще и на 24 (так как в сутках 24 часа):

Задача

Задачи для решения

Работа с переменными

Создайте переменную $a и присвойте ей значение 3. Выведите значение этой переменной на экран.

Создайте переменные $a=10 и $b=2. Выведите на экран их сумму, разность, произведение и частное (результат деления).

Создайте переменные $c=15 и $d=2. Просуммируйте их, а результат присвойте переменной $result. Выведите на экран значение переменной $result.

Создайте переменные $a=10, $b=2 и $c=5. Выведите на экран их сумму.

Создайте переменные $a=17 и $b=10. Отнимите от $a переменную $b и результат присвойте переменной $c. Затем создайте переменную $d, присвойте ей значение 7. Сложите переменные $c и $d, а результат запишите в переменную $result. Выведите на экран значение переменной $result.

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

Создайте переменную $text и присвойте ей значение ‘Привет, Мир!’. Выведите значение этой переменной на экран.

Создайте переменные $text1=’Привет, ‘ и $text2=’Мир!’. С помощью этих переменных и операции сложения строк выведите на экран фразу ‘Привет, Мир!’.

Создайте переменную $name и присвойте ей ваше имя. Выведите на экран фразу ‘Привет, %Имя%!’. Вместо %Имя% должно стоять ваше имя.

Создайте переменную $age и присвойте ей ваш возраст. Выведите на экран ‘Мне %Возраст% лет!’.

Обращение к символам строки

Создайте переменную $text и присвойте ей значение ‘abcde’. Обращаясь к отдельным символам этой строки выведите на экран символ ‘a’, символ ‘c’, символ ‘e’.

Дана произвольная строка, например, ‘abcde’. Поменяйте первую букву (то есть букву ‘a’) этой строки на ‘!’.

Создайте переменную $num и присвойте ей значение ‘12345’. Найдите сумму цифр этого числа.

Практика

Напишите скрипт, который считает количество секунд в часе, в сутках, в месяце.

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

Работа с присваиванием и декрементами

Переделайте этот код так, чтобы в нем использовалась операция .=. Количество строк кода при этом не должно измениться.

Переделайте этот код так, чтобы в нем использовались операции ++ и —. Количество строк кода при этом не должно измениться.

Введение в ООП на JavaScript в стиле ES6

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Регулярки

Разное

Работа с канвасом

Практика

Контекст

Drag-and-Drop

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Библиотека jQuery

ООП расшифровывается как объектно-ориентированное программирование. Давайте разбираться, что это такое и зачем это нужно.

Что такое ООП

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

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

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

Давайте уже приступим к написанию кода, на примере которого вы поймете преимущества ООП.

Классы и объекты

Давайте напишем класс Tank, у которого будет 2 метода: moveTo (переместисьВ) и fireTo (стельниВ). Реализацию методов пока не пишем, это просто заготовки:

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

Давайте теперь создадим новый танк и вызовем метод moveTo, чтобы танк переместился в нужную точку:

Давайте сделаем два танка и каждый из них переместим в заданную точку:

Свойства объекта

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

Давайте создадим новый танк и в момент создания положим в него 10 снарядов:

При создании танка мы следующей строчкой на лету создали ему свойство ammunition. Теперь это свойство доступно внутри любого метода класса вот так: this.ammunition:

Давайте при каждом выстреле будем уменьшать количество снарядов на один:

Метод в методе

Для этого также, как и при работе со свойствами, к методам следует обратиться через this, вот так: this.moveTo() и this.fireTo:

Конструктор

Помните, как мы задавали количество снарядов в танке при создании:

Исправить это проблему нам поможет метод-конструктор. Этот метод имеет стандартное название constructor и вызывается автоматически в момент создания объекта (когда мы пишем new).

Давайте создадим танк и в момент создания выведем что-нибудь алертом на экран:

Так же, как и в остальные методы, в конструктор можно передавать параметры. Давайте передадим в него параметр message и выведем его содержимое алертом на экран:

Теперь каждый созданный танк будет иметь 10 снарядов уже в момент создания. Убедимся в этом:

А еще лучше давайте сделаем параметр, в который будем передавать количество снарядов в момент создания танка, вот так:

Для этого в конструкторе напишем параметр ammunition, вот так: constructor(ammunition). Этот ammunition будет содержать в себе десятку, которую мы передаем в момент создания.

Для этого давайте запишем содержимое переменной ammunition в свойство ammunition, вот так: this.ammunition = ammunition.

Вспомогательные методы

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

Давайте реализуем вспомогательный метод canFire(), который будет проверять, не закончились ли снаряды:

Приватные методы

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

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

Как же этого добиться?

в других языках программирования перед такими методами и свойствами указывается команда private в знак того, что это приватные (то есть недоступные извне) свойства.

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

Давайте переименуем метод canFire в _canFire:

Ничего не понятно толком?

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

Работа с HTML таблицами

Учебник HTML CSS

Практика

Продвинутый курс

Практика

Адаптив

Продвинутые вещи

Практика

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

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

Изучите внимательно следующий пример с таблицей (тегу table добавлен атрибут border, который задает границу таблице и ее ячейкам):

Так код будет выглядеть в браузере:

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

Кроме тегов td существуют также теги

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

Так код будет выглядеть в браузере:

Имя	Фамилия	Зарплата
Иван	Иванов	200$
Николай	Сидоров	1000$

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

Вы обратили внимание на то, что между ячейками есть некоторое расстояние, из-за которого видно то, что каждая ячейка имеет свою границу? Это расстояние регулируется атрибутом cellspacing. При этом, если мы не напишем этот атрибут, то его значение будет совсем не ноль (в этом случае все ячейки слиплись бы друг с другом). То есть, атрибут cellspacing по умолчанию имеет некоторое ненулевое значение, из-за которого ячейки не слипаются (это расстояние равно нескольким пикселям).

Давайте посмотрим на примере. Сейчас я увеличу отступ между ячейками до 10 пикселей:

Так код будет выглядеть в браузере:

Имя	Фамилия	Зарплата
Иван	Иванов	200$
Николай	Сидоров	1000$

То, что cellspacing имеет некоторое значение по умолчанию, зачастую может мешать вам. В этом случае следует просто поставить его в ноль.

В HTML5 этот атрибут считается устаревшим (но он по-прежнему придает отступ по умолчанию). Вместо него следует использовать специальное CSS свойство, о котором мы поговорим попозже.

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

Так код будет выглядеть в браузере:

Имя	Фамилия	Зарплата
Иван	Иванов	200$
Николай	Сидоров	1000$

Для сравнения привожу то, как таблица будет выглядеть по умолчанию:

Имя	Фамилия	Зарплата
Иван	Иванов	200$
Николай	Сидоров	1000$

Этот атрибут, так же, как и cellspacing, считается устаревшим в HTML5.

Давайте обнулим cellpadding и cellspacing и посмотрим, что станет с таблицей в этом случае:

Так код будет выглядеть в браузере:

Имя	Фамилия	Зарплата
Иван	Иванов	200$
Николай	Сидоров	1000$

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

Посмотрите на пример их применения:

Так код будет выглядеть в браузере:

Имя	Фамилия	Зарплата
Иван	Иванов	200$
Николай	Сидоров	1000$

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Задачи на основы языка JavaScript

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Регулярки

Разное

Работа с канвасом

Практика

Контекст

Drag-and-Drop

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Библиотека jQuery

Перед решением задач изучите теорию к данному уроку.

Примеры решения задач

Задача

Задача. Создайте переменную str и присвойте ей значение ‘abcde’. Обращаясь к отдельным символам этой строки выведите на экран символ ‘a’, символ ‘b’, символ ‘e’.

Задача

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

Если нам нужно получить количество секунд в сутках, то умножим еще и на 24 (так как в сутках 24 часа):

Задача

Решение: заменим все подходящие места на сокращенную форму записи. К примеру, вместо num = num + 12 можно написать num += 12, а вместо num = num + 1 будет num++. Результат переделки будет выглядеть так:

Задачи для решения

Работа с переменными

Создайте переменную num и присвойте ей значение 3. Выведите значение этой переменной на экран с помощью метода alert.

Создайте переменные a=10 и b=2. Выведите на экран их сумму, разность, произведение и частное (результат деления).

Создайте переменные c=15 и d=2. Просуммируйте их, а результат присвойте переменной result. Выведите на экран значение переменной result.

Создайте переменные a=10, b=2 и c=5. Выведите на экран их сумму.

Создайте переменные a=17 и b=10. Отнимите от a переменную b и результат присвойте переменной c. Затем создайте переменную d, присвойте ей значение 7. Сложите переменные c и d, а результат запишите в переменную result. Выведите на экран значение переменной result.

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

Создайте переменную str и присвойте ей значение ‘Привет, Мир!’. Выведите значение этой переменной на экран.

Создайте переменные str1=’Привет, ‘ и str2=’Мир!’. С помощью этих переменных и операции сложения строк выведите на экран фразу ‘Привет, Мир!’.

Создайте переменную name и присвойте ей ваше имя. Выведите на экран фразу ‘Привет, %Имя%!’.

Создайте переменную age и присвойте ей ваш возраст. Выведите на экран ‘Мне %Возраст% лет!’.

Функция prompt

Спросите имя пользователя с помощью методы prompt. Выведите с помощью alert сообщение ‘Ваше имя %имя%’.

Спросите у пользователя число. Выведите с помощью alert квадрат этого числа.

Обращение к символам строки

Создайте переменную str и присвойте ей значение ‘abcde’. Обращаясь к отдельным символам этой строки выведите на экран символ ‘a’, символ ‘c’, символ ‘e’.

Создайте переменную num и присвойте ей значение ‘12345’. Найдите произведение (умножение) цифр этого числа.

Практика

Напишите скрипт, который считает количество секунд в часе, в сутках, в месяце.

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

Работа с присваиванием и декрементами

Работа с базами данных SQL в PHP для новичков

Учебник PHP

Практика

Важное

Регулярки

Работа с htaccess

Файлы, папки

Сессии и куки

Работа с БД

Практика по работе с БД в PHP

Перед чтением см. новые уроки раздела «Важное», которые появились выше.

Практика

Движок PHP

Продвинутые БД

Аутентификация

Практика

ООП и MVC

Абстрактные классы и интерфейсы

Трейты

ООП Магия

Практика

Практика: классы как набор методов

Что такое база данных

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

База данных состоит из таблиц. Что такое таблица вы знаете из жизни: это строки и столбцы. А на пересечении строк и столбцов располагаются ячейки.

В базах данных столбцы часто называют полями.

PhpMyAdmin

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

Видео на PhpMyAdmin

Задачи на PhpMyAdmin

Давайте откроем PhpMyAdmin и приступим к изучению его интерфейса.

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

AUTO_INCREMENT

Обратите внимание на то, что мы создали поле id и поставили ему галочку AUTO_INCREMENT. Это очень важный шаг!

Теперь при вставке новой записи (строки) в таблицу это поле будет заполняться автоматически уникальным номером.

При этом если мы удалим строку с каким-то id (например 1), то такого id больше никогда не будет.

Зачем нужно поле id?

Затем, чтобы мы всегда могли обратиться к конкретной строке по ее id, например с целью удаления или редактирования.

Типы переменных

В SQL довольно много типов переменных, но чаще всего приходится пользоваться следующими:

Как работать с mySQL через PHP

Работа с БД из PHP осуществляется всего лишь с помощью трех функций:

Далее подробнее про каждую из функций.

Устанавливаем соединение с БД

Данный материал есть также в виде видео: https://youtu.be/J8GFuyA_k_8

Прежде, чем начать работать с базой данных из PHP, нужно установить соединение с сервером, на котором эта база находится.

Делается это с помощью функции PHP mysql_connect, которая принимает 3 параметра: имя хоста (сервера), имя пользователя, под которым мы работаем с базой и пароль для этого пользователя.

Давайте установим соединение с базой данных:

Посылаем запросы к базе данных

Это относиться к командам SELECT, UPDATE, FROM, DELETE, WHERE и другим такого рода.

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

Отлавливаем ошибки базы данных

Многие начинающие зачастую не умеют отлавливать ошибки, которые вернула база данных.

Чтобы вывести ошибки, следует пользоваться конструкцией or die ( mysqli_error($link) ), которую необходимо добавлять к каждому запросу к БД.

Таким образом вы сразу будете получать сообщения об ошибках синтаксиса SQL. Обратите внимание на то, что на рабочем сайте эти конструкции следует удалять, чтобы пользователи и тем более хакеры не видели ошибок БД.

Проблемы с кодировками

Чтобы не было проблем с кодировками следует придерживаться простых правил:

Начнем практиковаться

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

Итак, создайте свою первую базу данных с помощью PhpMyAdmin.

Назовите ее «test».

Создайте в этой базе новую таблицу.

Назовите ее «workers» (англ. работники).

В ней создайте 4 столбца (столбцы по другому называются поля):

Ее заполните тестовыми данными, как показано в таблице ниже (этот шаг обязателен, так как дальше все задачи будут по этой таблице):

id	name	age	salary
1	Дима	23	400
2	Петя	25	500
3	Вася	23	500
4	Коля	30	1000
5	Иван	27	500
6	Кирилл	28	1000

Тестируем работоспособность

Просто скопируйте этот код и запустите его у себя:

В таком случае проверьте все еще раз, уберите последовательно все ошибки PHP, если таковые есть.

Как достать результат

После того, как мы сделали запрос к базе, в переменной $result будет лежать результат этого действия.

Однако лежит он не в той форме, которая нам нужна в PHP, а в той форме, в которой его прислала нам база.

Достать результат в нормальном виде (в массиве) можно с помощью следующего кода:

Как работает последняя строка?

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

В цикле for мы считываем построчно результат из базы.

А результат из БД будет лежать в нормальном виде в массиве $data.

Учебник по фреймворку React

Учебник по React

Учебник Angular 1.5.8

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

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

Примером SPA может служить социальная сеть, работа с почтой и так далее.

Перед изучением React

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

Введение в React

Перед чтением также советую посмотреть вебинар по React, который является введением в этот фреймворк. Вебинар вы найдете по следующим ссылкам: 1, 2, 3, 4, 5, 6, 7, 8.

Подключение React

Самым популярным транспойлером является Babel. Им мы и будем пользоваться.

На самом деле реальные проекты на React требуют некоторого знания nodejs и npm. Мы пока не будем с этим заморачиваться, потому что мне хотелось бы, чтобы вы сразу начали писать код.

Для самого простого запуска React нужно подключить такую кучку скриптов:

После подключения этих скриптов мы можем выполнять наш ES6 код в теге script с типом text/babel (это важно: не text/javascript, как мы привыкли):

Задачи на работу с основными HTML тегами и атрибутами

Учебник HTML CSS

Практика

Продвинутый курс

Практика

Адаптив

Продвинутые вещи

Практика

Перед решением задач изучите теорию к данному уроку.

Задачи для решения

На заголовки, жирность, курсив

Повторите страницу по данному по образцу:

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

Повторите страницу по данному по образцу:

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

На списки

Повторите страницу по данному по образцу:

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

На заголовки, абзацы и списки

Повторите страницу по данному по образцу:

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

Связанные ссылками страницы

Повторите 3 страницы и свяжите их ссылками друг с другом: страница 1, страница 2, страница 3.

На картинки

Повторите страницу по данному по образцу:

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

Разные полезные темы JavaScript

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Регулярки

Разное

Работа с канвасом

Практика

Контекст

Drag-and-Drop

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Библиотека jQuery

В данном уроке мы разберем разные полезные темы JavaScript: работу с выделением, работу с формами.

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

Можно получить все HTML формы на странице через document.forms. В результате мы получим массив форм, будто он был получен с помощью getElementsByTagName (точнее это будет не массив, а псевдомассив (или коллекция) элементов).

Мы можем, к примеру, обратиться к любой форме, как к энному элементу массива, например, к форме с номером 0:

HTML код станет выглядеть так:

А можем перебрать все формы с помощью цикла:

HTML код станет выглядеть так:

Кроме того, к формам можно обращаться по имени вместо номера. Это имя задается в атрибуте name тега

Работа с HTML тегами и атрибутами

Учебник HTML CSS

Практика

Продвинутый курс

Практика

Адаптив

Продвинутые вещи

Практика

Сейчас мы с вами займемся изучением основных тегов. Начнем с того, какие теги являются обязательными на странице, формируя ее структуру.

Как выглядит этот пример в браузере смотрите по данной ссылке.

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

Абзац создается с помощью тега

Так код будет выглядеть в браузере:

Это еще один абзац.

И еще один абзац.

Заголовки создаются с помощью тегов

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

Основы работы с DOM в JavaScript

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Регулярки

Разное

Работа с канвасом

Практика

Контекст

Drag-and-Drop

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Библиотека jQuery

В данном уроке мы разберем основы работы с событиями, атрибутами и getElementById на языке JavaScript.

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

В JavaScript существует несколько способов работы с событиями. Мы начнем с самого простого из них.

Основы работы с событиями

Значением атрибута с событием служит JavaScript код. В следующем примере по нажатию мышкой на кнопку выполнится функция alert:

А сейчас по клику на элемент выполнится функция func:

Можно выполнить не одну функцию, а несколько:

С этим можно бороться несколькими способами: можно сменить внешние кавычки на одинарные onclick=’alert(«!»)’, можно также заэкранировать внутренние кавычки обратным слешем onclick=»alert(\»!\»)» или же просто перенести JavaScript код из атрибута в функцию, а в атрибуте оставить только имя функции onclick=»func()».

Таблица атрибутов для событий

Работа с getElementById

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

Пусть у нас на странице есть тег с атрибутом id в значении test. Запишем ссылку на этот тег в переменную elem. Для этого мы должны воспользоваться методом getElementById, который получает элемент по его id.

Эта запись произойдет по клику на кнопку, которой мы задали атрибут onclick. По нажатию на эту кнопку сработает функция func, которая найдет на HTML странице элемент с id равным test и запишет ссылку на него в переменную elem:

Теперь в переменной elem у нас лежит ссылка на элемент с атрибутом id в значении test. Сама переменная elem является объектом.

Давайте посмотрим, как это происходит на практике.

Основы работы с атрибутами HTML через JavaScript

Сейчас мы будем считывать и изменять атрибуты тегов. Пусть у нас опять даны инпут с id равным test и кнопка, по клику на которую будет запускаться функция func:

Внутри функции func мы получим наш инпут по его id и запишем ссылку на него в переменную elem:

Можно не только считывать значения атрибутов, но и изменять их. Чтобы, к примеру, поменять значение атрибута value, нужно просто присвоить его конструкции elem.value:

HTML код станет выглядеть так (значение атрибута value станет www):

Таким же образом (цепочкой) можно производить и перезапись атрибутов:

А сейчас я не ввожу новую переменную и поэтому мне приходится вызывать getElementById два раза:

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

Исключения: атрибуты class и for

Это слово является специальным в JavaScript и поэтому мы не можем просто написать elem.class, чтобы считать значение атрибута class. Вместо этого следует писать elem.className.

В следующем примере на экран выводится значение атрибута class:

Кстати, есть и другие атрибуты, которые называются иначе, чем свойство. Например, атрибуту for ( ) соответствует свойство с названием htmlFor.

Работа с this

Сейчас мы с вами будем работать со специальным объектом this, который указывает на текущий элемент (элемент в котором произошло событие). Причем указывает так, будто этот элемент уже получен методом getElementById.

Давайте посмотрим как работать с this и в чем удобство такого подхода.

Пусть у нас есть задача по нажатию на инпут вывести на экран содержимое его value.

Пока вы умеете делать только такое решение:

В принципе, это решение хорошее, но представим теперь, что у нас есть много инпутов и по нажатию на каждый нам нужно выводить его value.

В этом случае у нас получится что-то в таком роде:

Давайте упростим нашу задачу: будем передавать параметром функции id текущего элемента. И вместо большого количества функций все сведется к одной функции:

Итак, давайте наконец рассмотрим вариант решения задачи через this.

Сделаем так, что каждый инпут будет выводить свое содержимое по нажатию. Для этого параметром функции передадим объект this, вот так: func(this).

Наш this передается параметром функции и попадает в переменную elem. Этот elem ведет себя так, будто получен таким образом: var elem = document.getElementById(. ), но получать его таким образом не надо, там уже все готово и можно пользоваться. К примеру, elem.value указывает на value нашего инпута и так далее.

Итак, вот самое просто решение нашей задачи:

Основы работы с CSS

Можно также и не вводить переменную elem, а построить очень длинную цепочку:

Существует много CSS свойств, которые пишутся через дефис, например, font-size. В этом случае оно преобразуется в fontSize:

Обратите внимание на то, что свойство float является исключением (оно является специальным в JavaScript) и вместо него следует писать cssFloat:

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Основы работы с массивами и объектами в JavaScript

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Регулярки

Разное

Работа с канвасом

Практика

Контекст

Drag-and-Drop

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Библиотека jQuery

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

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

Массив создается с помощью квадратных скобок [ ]:

Пока созданный нами массив не содержит никаких данных. Заполним его названиями дней недели:

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

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

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

Как вывести отдельный элемент массива

Предположим, мы хотим вывести на экран среду с помощью составленного массива дней недели.

Посмотрите и повторите пример:

Ассоциативные массивы (объекты)

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

То есть мы получали значение элемента массива по его ключу.

Поэтому в JavaScript можно указать ключи в явном виде – так, как нам нужно. Делается это с помощью объектов (в других языках программирования они называются ассоциативными массивами). Объекты создаются с помощью фигурных скобок , внутри которых пишутся элементы этого объекта в формате ключ: значение.

Давайте сделаем так, чтобы понедельник имел ключ 1, а не ноль, как было раньше (и всем остальным дням прибавим единицу):

Синтаксис здесь такой: ключ, затем идет двоеточие :, а потом значение.

Узнаем зарплату Васи:

Кроме того, кавычки вокруг строковых ключей можно и не ставить:

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

Свойства объекта

В этом случае говорят, что мы обращаемся к свойству объекта.

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

Как еще можно создать массив или объект

Вместо и [ ] можно пользоваться Object() и Array() соответственно (это просто альтернативный синтаксис).

Давайте создадим объект вторым синтаксисом:

Давайте создадим массив вторым синтаксисом:

Создание объекта через и через Object() эквивалентно, вы можете пользоваться тем способом, который вам удобнее.

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

В этом случае получим не такой массив:

Это будет массив, состоящий из 10-ти пустых элементов (их значение будет undefined), а не массив из одного элемента 10, как мы хотели бы.

Заполнение массива

Также можно поступать и с объектами:

Многомерный массив

Элементы массива могут быть не только строками и числами, но и массивами. То есть у нас получится массив массивов или многомерный массив.

Давайте сделаем массив студентов students, который будет содержать два подмассива: студенты мужского пола и женского:

Чтобы вывести какой-либо элемент из многомерного массива следует писать уже не одну пару [ ], а две: students[‘boys’][0] – так мы выведем ‘Коля’.

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Основы работы с массивами в PHP

Учебник PHP

Практика

Важное

Регулярки

Работа с htaccess

Файлы, папки

Сессии и куки

Работа с БД

Практика по работе с БД в PHP

Перед чтением см. новые уроки раздела «Важное», которые появились выше.

Практика

Движок PHP

Продвинутые БД

Аутентификация

Практика

ООП и MVC

Абстрактные классы и интерфейсы

Трейты

ООП Магия

Практика

Практика: классы как набор методов

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

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

Массив создается с помощью функции []:

Пока созданный нами массив не содержит никаких данных. Заполним его названиями дней недели (для краткости пишу две буквы каждого дня):

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

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

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

Вы увидите на экране слово Array вместо содержимого массива.

Для того, чтобы PHP вывел нам все элементы массива, нужно воспользоваться функцией var_dump:

Вот теперь мы действительно увидим все элементы нашего массива.

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

Как вывести отдельный элемент массива

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

Предположим, мы хотим вывести на экран среду.

Посмотрите и повторите пример:

Ассоциативный массив

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

Поэтому в PHP можно указать ключи в явном виде – так, как нам нужно. Сделаем так, чтобы понедельник имел ключ 1, а не ноль, как было раньше (и всем остальным дням прибавим единицу):

Синтаксис здесь такой: ключ, затем идет стрелка =>, а потом значение.

Узнаем зарплату Васи:

Массивы, у которых явно указаны ключи, называются ассоциативными.

Хитрость с ключами

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

Напомню вам этот массив:

Если у второго элемента не будет ключа, PHP поставит его автоматически, причем следующий по порядку.

А следующим номером будет как раз-таки число 2, так как предыдущий элемент имел ключ 1 (неважно, что мы сами его поставили, а не PHP автоматически).

Давайте поправим наш массив:

Как еще можно создать массив

Объявление массива с помощью команды [] не является единственным способом его создания.

Можно просто присвоить значения элементам массива, не объявляя его через array (PHP нас поймет и сам создаст массив):

Естественно, ключи могут быть не только числовыми, но и текстовыми:

Кроме того, можно сделать так, что PHP сам добавит ключи (начиная с нуля и так далее). Для этого мы оставим квадратные скобки пустыми: $a[] = 1, а PHP сам добавит ключ. Пример:

Все способы создания массива

Итак, повторим все способы создания массива:

Многомерный массив

Элементы массива могут быть не только строками и числами, но и массивами. То есть у нас получится массив массивов или многомерный массив.

Давайте сделаем массив студентов $students, который будет содержать два подмассива: студенты мужского пола и женского:

Чтобы вывести какой-либо элемент из многомерного массива следует писать уже не одну пару [ ], а две: $a[‘boys’][0] – так мы выведем ‘Коля’.

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Работа с продвинутыми свойствами CSS

Учебник HTML CSS

Практика

Продвинутый курс

Практика

Адаптив

Продвинутые вещи

Практика

Изучите следующие CSS свойства: text-align-last.

Изучите следующие HTML теги и CSS свойства: pre, overflow, white-space.

Изучите следующие CSS свойства: opacity (обратите внимание на rgba при изучении).

Изучите следующие CSS свойства: text-shadow.

Изучите следующие CSS свойства: box-shadow.

Изучите следующие CSS свойства: cursor.

Изучите следующие CSS свойства: box-sizing.

Изучите работу со множественными фонами CSS3, смотрите свойство background.

Изучите следующие CSS свойства: background-size.

Изучите следующие CSS свойства: hyphens.

Изучите следующие CSS свойства: user-select.

Изучите следующие CSS свойства: display, visibility.

Изучите следующие CSS свойства: columns.

Изучите следующие функции CSS: calc, min, max, attr.

Изучите следующие CSS свойства: font-face.

Изучите следующие CSS свойства: border-image.

Изучите следующие CSS свойства: filter.

Изучите следующие CSS свойства: position: sticky.

Изучите следующие CSS свойства: object-fit.

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Основы работы с ООП в PHP. Часть 1

Учебник PHP

Практика

Важное

Регулярки

Работа с htaccess

Файлы, папки

Сессии и куки

Работа с БД

Практика по работе с БД в PHP

Перед чтением см. новые уроки раздела «Важное», которые появились выше.

Практика

Движок PHP

Продвинутые БД

Аутентификация

Практика

ООП и MVC

Абстрактные классы и интерфейсы

Трейты

ООП Магия

Практика

Практика: классы как набор методов

Сейчас мы с вами займемся изучением ООП в PHP.

Что такое объекты в жизни

Давайте рассмотрим пример из жизни, а потом перенесем его на PHP. Пусть у нас есть автомобиль. У него есть колеса, цвет, вид кузова, объем двигателя и так далее. Кроме того, водитель может отдавать ему команды: ехать, остановится, повернуть направо, налево и тп.

Можно говорить о том, что существует некоторый класс автомобилей, обладающий общими свойствами (у всех есть колеса и всем им можно отдавать команды).

Если бы мы программировали автомобиль, то можно было бы сделать что-то вроде такого:

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

Наши первые классы и объекты

Давайте теперь сделаем 2 юзера (объекта) ‘Коля’ и ‘Вася’, заполним их данными и выведем на экран сумму их возрастов:

Методы

Переменная $this указывает на объект класса и предназначена для использования внутри класса.

Итак, сделаем так, чтобы метод show возвращал имя юзера:

Сделаем что-нибудь полезное с методами

Разбираем public и private

Давайте теперь разберем, что делает ключевое слово public, которое мы писали перед всеми свойствами и методами.

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

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

Геттеры и сеттеры

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

Аналогично поступим с возрастом и вот, что у нас получится:

Давайте теперь разбираться, зачем это нужно.

Во-первых, таким образом мы можем создавать свойства только для чтения. Например, возраст можно будет только получить через getAge, но нельзя будет поменять без setAge.

Такие методы, как мы реализовали, называются геттерами и сеттерами.

Рассмотрим private методы

Давайте для сеттера setAge реализуем вспомогательный private метод checkAge, который будет проверять возраст на корректность перед его установкой:

Метод __construct

Существует специальный встроенный метод __construct. Это метод (если мы его написали в коде) будет вызываться при создании объекта. Пример:

В __construct можно также передавать параметры:

Чем может быть полезен этот метод? Давайте, для примера, сделаем объект User, для которого в момент создания объекта будут указываться имя и возраст. Эти значение в дальнейшем нельзя будет поменять, а только прочитать (геттеры сделаем, а сеттеры нет):

Наследование

Наследование реализуется с помощью ключевого слова extends, вот так: class Worker extends User.

Вот реализация класса Worker:

Ключевое слово protected

Перегрузка и parent::

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

Давайте напишем студент свой setAge в классе Student. Наш setAge будет проверять то, что возраст студента меньше 25 лет:

Пусть мы затерли (перегрузили) метод родителя, но хотели бы использовать и его. То есть мы хотим иметь в классе Student свой метод setAge а также метод родителя setAge. В этом случае к методу родителя можно обратиться так: parent::setAge().

Давайте доработаем наш класс Student так, чтобы использовался метод setAge родителя (убираем некоторое дублирование кода таким образом):

На использование классов внутри других классов

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

Пусть, к примеру, у нас есть класс User, который хочет использовать класс работы с базами данных Db. Создадим внутри User новый объект класса Db, запишем его в любую переменную, например, в $this->db и будем спокойно использовать public методы и свойства класса Db:

Некоторая практика

Давайте напишем реализацию класса Db и класса User. Попробуйте сами разберитесь в этом коде:

Переменные названия свойств и методов

Названия свойств и методов можно хранить в переменной. К примеру, есть переменная $var, в которой лежит строка ‘name’. Тогда обращение $user->$var по сути эквивалентно обращению $user->name.

Иногда такие финты полезны.

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Работа с датами в PHP

Учебник PHP

Практика

Важное

Регулярки

Работа с htaccess

Файлы, папки

Сессии и куки

Работа с БД

Практика по работе с БД в PHP

Перед чтением см. новые уроки раздела «Важное», которые появились выше.

Практика

Движок PHP

Продвинутые БД

Аутентификация

Практика

ООП и MVC

Абстрактные классы и интерфейсы

Трейты

ООП Магия

Практика

Практика: классы как набор методов

Для работы с датами в PHP применяются различные функции. Мы начнем изучение с функции time.

Функция time, формат timestamp

Функция time возвращает разницу в секундах между 1-го января 1970 года и текущим моментом времени. Такое представление даты называется форматом timestamp.

Зачем нужен timestamp?

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

С помощью функции time мы можем получить только текущий момент времени. Чтобы получить timestamp за любую дату следует использовать функцию mktime:

Функция mktime

Функция mktime работает аналогично функции time, но, в отличие от нее, принимает параметры: mktime(час, минута, секунда, месяц, день, год) (обратите внимание на то, что месяц и день переставлены местами ). Посмотрите примеры работы:

Полученная разница в секундах будет выглядеть так: 712255381 (обновите страницу и это число поменяется).

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

Функция date

Функция date выводит текущие дату и время в заданном формате.

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

Примеры работы с date:

Второй параметр функции date

Функция date имеет второй необязательный параметр, который принимает момент времени в формате timestamp. Если передать этот параметр, то функция date отформатирует не текущий момент времени, а тот, который передан вторым параметром. Этот timestamp можно получить, к примеру, через mktime (но не обязательно):

Функция strtotime

Следующая полезная функция, которую мы разберем, называется strtotime.

К примеру, я могу передать ей строку ‘2025-12-31’ и функция сама разберет, где тут год, где месяц, а где день, и вернет эту дату в формате timestamp.

Все форматы можно посмотреть тут.

Следующий код вернет дату предыдущего понедельника:

Как добавить или отнять дату

Пример 1

Давайте создадим объект с датой за 2025 год, 12 месяц, 31 день, затем прибавим к ней 1 день и выведем в формате ‘день.месяц.год’

Результат выполнения кода:

Пример 2

Давайте создадим объект с датой за 2025 год, 12 месяц, 31 день, затем прибавим к ней 3 дня и выведем в формате ‘день.месяц.год’

Результат выполнения кода:

Пример 3

Давайте создадим объект с датой за 2025 год, 12 месяц, 31 день, затем прибавим к ней 3 дня и 1 месяц и выведем в формате ‘день.месяц.год’

Результат выполнения кода:

Пример 4

Давайте создадим объект с датой за 2025 год, 1 месяц, 1 день, затем отнимем от нее 1 день и выведем в формате ‘день.месяц.год’

Результат выполнения кода:

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Задачи на позиционирование элементов на CSS

Учебник HTML CSS

Практика

Продвинутый курс

Практика

Адаптив

Продвинутые вещи

Практика

Перед решением задач изучите теорию к данному уроку.

Задачи для решения

На абсолютное позиционирование

Повторите страницу по данному по образцу:

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

Повторите страницу по данному по образцу:

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

Повторите страницу по данному по образцу:

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

Повторите страницу по данному по образцу:

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

На z-index

Повторите страницу по данному по образцу:

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

Повторите страницу по данному по образцу:

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

Повторите страницу по данному по образцу:

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

На relative

Повторите страницу по данному по образцу:

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

Повторите страницу по данному по образцу:

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

Повторите страницу по данному по образцу:

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

Повторите страницу по данному по образцу:

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

Повторите страницу по данному по образцу:

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

На fixed

Повторите страницу по данному по образцу:

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

Повторите страницу по данному по образцу:

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

Основные CSS свойства

Учебник HTML CSS

Практика

Продвинутый курс

Практика

Адаптив

Продвинутые вещи

Практика

Мы с вами разобрались с различными способами подключения CSS на HTML страницу в предыдущем уроке и теперь давайте начнем изучать различные CSS свойства.

Свойство color позволяет задать цвет текста. Цвет можно задавать следующими способами: английским словом, через решетку #, через rgb и некоторыми другими способами, которые мы пока не будем разбирать.

Давайте разберем указанные способы подробнее.

В следующем примере всем абзацам на странице задан красный цвет:

Так код будет выглядеть в браузере:

Абзац с текстом.

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

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

На самом деле отдельная точка экрана (пиксель) не может светиться всеми цветами, которые нужны, так как это технически было бы очень сложно. И на самом деле каждая точка экрана может светиться только тремя цветами: красным, зеленым и голубым. Причем одновременно и в разных пропорциях.

В CSS есть способ заставить пиксели светиться указанными тремя цветами в нужных нам пропорциях. Давайте его разберем:

Сами буквы rgb расшифровываются как red (красный), green (зеленый), blue (голубой).

Так код будет выглядеть в браузере:

Абзац с текстом.

А вот так мы получим чисто красный цвет (первое значение в 255, а все остальные нули):

Так код будет выглядеть в браузере:

Абзац с текстом.

Так получим чисто зеленый цвет:

Так код будет выглядеть в браузере:

Абзац с текстом.

Так код будет выглядеть в браузере:

Абзац с текстом.

Ну, а теперь я смешаю все три цвета в произвольных пропорциях. Смотрите, что получилось:

Так код будет выглядеть в браузере:

Абзац с текстом.

Чисто белый цвет:

Так код будет выглядеть в браузере:

Абзац с текстом.

Чисто черный цвет:

Так код будет выглядеть в браузере:

Абзац с текстом.

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

В следующем примере абзац красится в красный цвет:

Так код будет выглядеть в браузере:

Абзац с текстом.

Видео по работе с пипеткой

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

Тут скоро будет видео по работе с пипеткой.

Свойства width и height позволяют задать высоту и ширину элементу соответственно. Ширина и высота обычно измеряются в пикселях (обозначается px) или процентах (обозначается %) (можно измерять и других единицах, которые мы пока не будем разбирать).

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

Так код будет выглядеть в браузере:

Видео по работе с измерительными инструментами

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

Как ими пользоваться, смотрите в следующем видео:

Тут скоро будет видео по работе с измерителем пикселей.

Свойство text-align позволяет задать выравнивание текста. Текст можно выравнять по левому краю (значение left), по правому (значение right), по центру (значение center) и одновременно и по правому, и по левому краю (значение justify).

Давайте посмотрим на примерах, что имеется ввиду.

Значение left

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

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Значение right

Давайте теперь поставим текст по правому краю:

Так код будет выглядеть в браузере:

Значение center

Поставим текст по центру:

Так код будет выглядеть в браузере:

Значение justify

Ну, и наконец выровняем текст одновременно и по правому, и по левому краю:

Так код будет выглядеть в браузере:

Это заголовок

Абзац с текстом.

Для сравнения привожу их вид по умолчанию:

Это заголовок

Абзац с текстом.

Так код будет выглядеть в браузере:

Абзац с текстом.

Свойство font-size позволяет задать размер текста. Размер задается в пикселях (обозначаются px), в пунктах (обозначаются pt), в процентах (обозначаются %) и с помощью некоторых других единиц, которые мы пока не будем разбирать.

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

Значение в пунктах

Давайте зададим тексту абзаца шрифт в 20 пунктов:

Так код будет выглядеть в браузере:

Абзац с текстом.

Значение в процентах

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

Свойство font-family позволяет задать тип шрифта (тип часто называют семейством шрифта).

Поставим для всех абзацев шрифт Arial:

Так код будет выглядеть в браузере:

Абзац с текстом.

Также для решения данной проблемы поступают так: перечисляют несколько похожих шрифтов через запятую. Например, font-family: Georgia, «Times New Roman».

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

Заканчивают список обычно ключевым словом, которое описывает тип шрифта (все шрифты относятся к какому-нибудь типу) — serif, sans-serif, cursive, fantasy или monospace. Если браузер не нашел ни одного из указанных шрифтов на компьютере пользователя, то он выберет один из шрифтов указанного типа.

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

Если в имени шрифта содержатся пробелы, например, Times New Roman, оно должно заключаться в одинарные или двойные кавычки.

Веб безопасные шрифты

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

Значение	Описание
Arial	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Arial Black	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Comic Sans MS	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Courier New	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Georgia	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Impact	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Times New Roman	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Trebuchet MS	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Verdana	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.

Свойство line-height задает межстрочный интервал.

При использовании свойства line-height вас может ожидать некоторый подвох: это свойство не задает промежуток между строками текста, как могло бы показаться, а задает высоту линии текста.

Так код будет выглядеть в браузере:

Значением свойства line-height не обязательно должно служить число в некоторых единицах. Можно также просто написать число или дробь. В этом случае настоящее значение line-height можно будет найти, умножив его на значение font-size.

Преимущество такого способа задания line-height в том, что при изменении размера шрифта автоматически будет меняться и межстрочный интервал.

Существует специальное свойство font, которое можно использовать вместо многих свойств, которые мы уже разобрали. Такие свойства в CSS называются свойствами-сокращениями. Зачастую их использование гораздо удобнее вместо множества других свойств.

Свойство font имеет следующий синтаксис: курсив жирность размер_шрифта/интервал_между_строками семейство_шрифта. Обязательными являются «размер_шрифта» и «семейство_шрифта», порядок имеет значение.

Свойство font является свойством-сокращением.

Так код будет выглядеть в браузере:

Свойство text-indent позволяет задать красную строку, то есть отступ первой строки текста (к примеру, в абзаце).

Давайте сделаем красную строку для абзацев:

Так код будет выглядеть в браузере:

Свойство vertical-align позволяет задать выравнивание по вертикали. К сожалению, адекватным образом это выравнивание работает только для таблиц.

Значение top

Давайте сделаем так, чтобы по вертикали текст в ячейках таблицы был выровнен по верхнему краю:

Так код будет выглядеть в браузере:

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

Значение bottom

А теперь по нижнему краю:

Так код будет выглядеть в браузере:

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

Значение middle

Ну, а теперь по центру:

Так код будет выглядеть в браузере:

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Работа с XML в PHP

Парсинг сайтов

Что такое API? Это набор функций, с помощью которых вы можете слать запрос этому сайту и получать нужный ответ. Вот этот ответ чаще всего приходит в формате XML. Поэтому давайте приступим к его изучению.

Работа с XML в PHP

Пусть у вас есть XML. Он может быть в строке, либо хранится в файле или отдаваться по запросу к определенному URL.

Пусть XML хранится в строке. В этом случае из этой строки нужно создать объект с помощью new SimpleXMLElement:

Если же XML хранится в файле или отдается по обращению к URL (что чаще всего и бывает), то следует использовать функцию simplexml_load_file, которая делает тот же объект $xml:

Приемы работы

В примерах ниже наш XML хранится в файле или по URL.

Пусть дан следующий XML:

Давайте получим имя, возраст и зарплату работника:

Корневой тег в XML может быть только один, так же, как и тег в обычном HTML.

Давайте чуть модифицируем наш XML:

В этом случае у нас получится цепочка обращений:

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

Пусть некоторые данные хранятся в атрибутах:

Теги с дефисами

В XML разрешены теги (и атрибуты) с дефисом. В этом случае обращение к таким тегам происходит так:

Перебор циклом

Пусть теперь у нас не один работник, а несколько. В этом случае мы можем перебрать наш объект с помощью цикла foreach:

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

Если вам неудобно работать с объектом, вы можете преобразовать его в нормальный массив PHP с помощью следующего хитрого приема:

Больше информации

Парсинг на основе sitemap.xml

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

Подробнее об устройстве sitemap.xml читайте в википедии.

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Минипроекты JavaScript для новичков

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Регулярки

Разное

Работа с канвасом

Практика

Контекст

Drag-and-Drop

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Библиотека jQuery

Перед решением задач изучите теорию к данному уроку.

ВНИМАНИЕ Вместо задач этого урока вышел отдельный спец курс:
http://theory.phphtml.net/courses/javascript/practice/1/c.html
http://theory.phphtml.net/courses/javascript/practice/1/h.html
Меняйте число в адресе, будете попадать на следующий урок, всего 13 уроков (дз есть не везде).

ПЕРЕД этими уроками посмотрите урок на анонимные функции (он ниже по учебнику).

Задачи для решения

Реализуйте калькулятор. Должны быть кнопки цифр и операций. По нажатию на кнопку ‘=’ должен посчитаться результат. Совет: используйте фунцию eval.

Образец того, что должно получится, он же ответ в исходном коде:

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

Реализуйте игру крестики-нолики. Играет два человека, на одном поле по очереди.

Образец того, что должно получится, он же ответ в исходном коде:

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

Образец того, что должно получится, он же ответ в исходном коде:

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

Реализуйте тест, в котором показывается один вопрос, 5 чекбоксов для ответа (может быть несколько правильных ответов). Под чекбоксами ссылка ‘следующий вопрос’. По нажатию на эту ссылку вместо текущего вопроса показывается следующий. Когда вопросы заканчиваются, в последнем вопросе будет стоять ссылка не ‘следующий вопрос’, а ‘показать результат’.