Сообщество - Web-технологии

Web-технологии

534 поста 5 786 подписчиков

Популярные теги в сообществе:

10

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

string - примитивный тип данных, представляет собой цепочку элементов использующую кодировку UTF-16, вне зависимости от кодировки которую использует страница. Больше уроков у меня на канале UTF-16 описывает возможность хранения символов unicode с помощью 16 или 32 битных значений. Любые текстовые данных в JavaScript являются строкой в том числе и JSON.

Можем создавать строки разными способами:

// Одинарные кавычки
const stringExample_1 = 'Hello world #1';

// Двойные кавычки

const stringExample_2 = "Hello world #2";

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

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

const stringExample_3 = 'I am \'not\' sentient';

// Аналогично и с двойными кавычками.
const stringExample_4 = "I am \"not\" sentient";

// Решаем ситуацию проще, используя один тип кавычек внутри другого.
const stringExample_5 = 'I am "not" sentient';

Обратные кавычки


Шаблонные строки или шаблонные литералы.


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

const stringExample_6 = `Hello world #3`;
const stringExample_7 = `Hello world #${2+2}`;
const helloWorldNumber = 5;
const stringExample_8 = `Hello world #${helloWorldNumber}`;

Важно! То что мы передаем внутрь ${} будет преобразовано в строку.

Мы можем добиться аналогично поведения если будем использовать оператор '+' и одинарные или двойные кавычки. Это операция называет 'конкатенация строк'.

const stringExample_9 = 'Hello world #' + 6;
const stringExample_10 = "Hello world #" + 7;

Для того чтобы узнать количество символов в строке мы можем обратится к ее свойству length.

const stringExample_11 = 'Hello world #';
console.log(stringExample_11.length); // 13 символов

Для того чтобы получить символ из строки вы можете обратиться к нему по его индексу. Индексирование строк начинается с 0 и заканчивается количеством ее символов минус 1.

const stringExample_12 = 'Hello world #9';
const firstChar = stringExample_12[0]; // H
const thirdChar = stringExample_12[2]; // l
const lastChar = stringExample_12[stringExample_12.length - 1]; //9

Иммутабельность строк

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


const stringExample_13 = 'Hello world #10';

// Заменяем первый символ строки.
stringExample_13[0] = 'Q';

console.log(stringExample_13); // 'Hello world #10'

Строка не изменилась

Также в строках мы можем использовать unicode символы

console.log('\u{1F60D}')

P.S. Больше уроков у меня на канале

P.P.S. Файлы с урока

Показать полностью
5

Функции в SASS / SCSS

Привет, в этом уроке мы научимся использовать функции в SASS / SCSS, рассмотри примеры их работы, а также разберемся с новым, для нас, циклом @for. Напишем несколько функций и посмотрим для чего они вообще нужны. Приятного просмотра. Больше уроков у меня на канале.

Показать полностью
9

Рендер страницы через JavaScript

Задача

Есть API, который в ответ на запрос отдает json со списком фреймворков и их описанием. Необходимо на его основе отрендерить карточки.

Прототип

Алгоритм

- Получить список;

- Обработать список;

- Отрендерить в HTML.


1. Получить список

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

https://private-531a0-vadimfilimonovblog.apiary-mock.com/fra...

Чтобы сделать HTTP запрос — используйте метод fetch:

fetch("https://private-531a0-vadimfilimonovblog.apiary-mock.com/fra...")

2. Обработать список

Вот как выглядит json, который мы получаем:

{
  "success": true,
  "list": [
    {
      "title": "React",
      "text": "React is an open-source...

Напишем функцию buildHTML, которая на вход будет принимать JSON, а отдавать строку, которую мы в будущем используем как HTML:

// HTTP запрос
fetch("https://private-531a0-vadimfilimonovblog.apiary-mock.com/fra...")
  // переводим ответ в json
  .then(response => response.json())
  // конвертируем в html
  .then(buildHTML)

Определение функции:

const buildHTML = ({ list }) =>
  list.map(({ title, text }) => (`
    <div>
      <h2>${title}</h2>
      <p>${text}</p>
    </div>
`)).join("");

3. Отрендерить в HTML


fetch("https://private-531a0-vadimfilimonovblog.apiary-mock.com/fra...")
  .then(response => response.json())
  .then(buildHTML)
  .then(render); // полученный результат передает в функцию render

В файле HTML создадим пустой контейнер, куда будем вставлять карточки:

<div class="container"></div>

https://developer.mozilla.org/en-US/docs/Web/API/Element/inn... функции render сводится лишь к использованию свойства innerHTML:

const render = (html) => {
  const container = document.querySelector('.container');
  container.innerHTML = html;
};

Результат

Полную версию кода смотрите на codepen.

Показать полностью 2
8

Тег input в HTML

Привет, в рамках этого урока мы познакомимся с тегом input, разберем типы input-ов, рассмотрим атрибуты этого тега, а также познакомимся с тегом label. Больше уроков у меня на канале.

Этот видео-урок является дополнением к посту о input - ссылка на пост
Показать полностью
5

Как работает тег <form> в HTML

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

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

<form></form>
<form action="https://some-server-url.com/send-email"
method="get"
target="_blank"
></form>
action - определяет ссылку на сервер куда будут отправляться данные из <form>.

method - определяет метод http с помощью которого будут отправляться данные.

target - определяет в каком окне будет производиться отправка, в новом или текущем.


Также есть еще много атрибутов у тега <form>, о них читайте в документации.


P.S. Больше уроков у меня на канале
Показать полностью
16

Как сечь холопов плетьми объектно и по параметрам

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


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


Отступление для зануд, которое приличные люди могут не читать: PHP является т.н. "Тьюринг-полным" языком, на котором возможно творить любую бесовщину. Мне известно о возможности писать на PHP приложения с окошками для Windows. Я знаю, что есть любители писать на PHP в "функциональном" стиле. Но приличный человек будет копать землю лопатой, а не любимой серебряной ложечкой для чая.


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


Это определение объектно-ориентированного программирования (ООП) из Википедии. Не стоит читать статью полностью, чтобы не обляпаться (предлагаю остановиться там, где вы в первый раз подумаете "что за фигня?"). Я приведу самое начало. Поверьте, дальше еще хуже.


Объе́ктно-ориенти́рованное программи́рование (ООП) — методология программирования, основанная на представлении программы в виде совокупности объектов, каждый из которых является экземпляром определённого класса, а классы образуют иерархию наследования.
Идеологически ООП — подход к программированию как к моделированию информационных объектов, решающий на новом уровне основную задачу структурного программирования: структурирование информации с точки зрения управляемости, что существенно улучшает управляемость самим процессом моделирования, что, в свою очередь, особенно важно при реализации крупных проектов.
Управляемость для иерархических систем предполагает минимизацию избыточности данных (аналогичную нормализации) и их целостность, поэтому созданное удобно управляемым — будет и удобно пониматься. Таким образом, через тактическую задачу управляемости решается стратегическая задача — транслировать понимание задачи программистом в наиболее удобную для дальнейшего использования форму.

Как сечь холопов плетьми объектно и по параметрам

Человек, писавший эти слова, не хотел объяснить, как работает ООП. Он хотел показать, какой он умный. Там дальше еще больше интересного, кому не хватило:

абстракция - для выделения в моделируемом предмете важного для решения конкретной задачи по предмету, в конечном счёте — контекстное понимание предмета, формализуемое в виде класса;

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


А теперь воспряньте, ибо я попытаюсь рассказать про практическое применение ООП при разработке на PHP. И вы увидите, что на деле это очень просто.


Предмет

Первый способ использования объектов в PHP - это группировка данных (это "свойства" объекта) для передачи куда-то.


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


Мы вызываем приказчика и говорим: "этого сечь плетьми на конюшне, он вредитель". Таким образом, приказчик получил команду ("сечь плетьми") и параметры (кого - "вот этого", за что - "он вредитель").


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


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


Допустим, в нашем коде функция "сечь плетьми по параметрам" используется с десяток раз по разным поводам. Холопов ведь в строгости держать надобно. И мы хотим, так сказать, обновить функционал: раньше каждому полагалось по 10 плетей, а теперь малолетним по 3, зато взрослым 15.


Получается, теперь необходимо, кроме ФИО, передавать еще и возраст холопа. А это значит, что везде, где мы раньше использовали нашу функцию, мы должны дополнить список параметров. Серьезная переделка! Пожалуй, не нужна нам эта прогрессивность, пусть все, как и раньше, по 10 плетей получают.


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


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


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


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


Сервис

Второй способ использования объектов в PHP - это группировка "команд" (это называется "методы").


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


Здесь "кузница", можно: подковать лошадь, изготовить кольчугу, заточить меч, сковать гвоздь.

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


Конструктор

Когда мы говорим "этого сечь", откуда же взялись все параметры, нужные приказчику для наказания?


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


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


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


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


Все вместе

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


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


Все это уже относится к практическим вопросам, которые решаются при проектировании системы.


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


Помните - только практика может превратить "чайника" в настоящего PHP-боярина!


Источник

Показать полностью 1
6

Виды селекторов в CSS - часть 2

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

Рассмотрим самые распространенные селекторы:

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


p {
color: red;
}

2. Селектор по классу. Если мы хотим привязывать стили только к определенным элементам мы можем использовать селекторы по классу, для этого нам необходимо задать атрибут class с для тега html с логическим значением. Для того чтобы добраться к элементу по классу нам нужно перед значением атрибута class нужного нам элемента поставить '.' точку.


.block {
text-decoration: underline;
color: blue;
}

3. Селектор по атрибуту. Работает абсолютно аналогично селектору по классу, но имеет другой синтаксис [имя-атрибута="значение атрибута"]


[href="#"] {
color: blue;
font-weight: bold;
font-size: 30px;
}
Аналогично можно использовать селектор только по названию атрибута, без значения.


[href] {
text-transform: uppercase;
}

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


Пример выбора элемента по id:


#main-title {
font-weight: bold;
text-decoration: line-through;
}
P.S. - Больше уроков у меня на канале

P.P.S. - Файлы с урока

Показать полностью
7

Селекторы CSS - часть 1

Любые стили CSS записываются по одной и той же формуле: название стиля: значение; Чтобы добавить стиль к элементу, необходимо использовать селектор. Он указывает, к какому именно элементу или элементам нужно добавить наши стили. Для примера, изменим цвет шрифта у параграфа который есть у нас в HTML


p {
color: red; /* Изменяем цвет текста */
font-size: 20px; /* Изменяем размер шрифта */
}

p - это селектор, обращаясь к этому селектору мы говорим браузеру чтобы он выбрал все <p> на странице и применил к ним соответствующие стили.


{} - это фигурные скобки, с их помощью мы отделяем селектор от CSS свойств.


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


P.S. - Больше уроков у меня на канале

P.P.S. - Файлы с урока

Показать полностью
Отличная работа, все прочитано!