#js #статья

Всем привет!

Вчера я проводил опрос на тему "знаете ли вы как добавлять элементы в массив без метода push? " - на что 6 ответили что знают, а 7 нет.

Ну что же, тогда давайте поговорим о том, как это делается!

Если вы подумали, что я говорил про метод unshift - вы ошибались😀

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

Создадим массив:

let arr = ["Dima", "Alex", "Alexandr", "Petr"];

Ну ладно, изначально  покажу через обычные методы, вдруг кто не знал. Сегодняшним нашим подопытным будет Олег xD

PUSH()

arr.push("Oleg"); - Да, всё.

push добавляет элемент в КОНЕЦ массива, важно это помнить.

UNSHIFT()

arr.unshift("Oleg"); - добавляет в НАЧАЛО массива.

А теперь про третий, тот самый загадочный метод..

let arrCopy = [...arr, "Oleg"];

Собственно, что за нахуй сейчас произошло?

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

...arr - создаёт копию нашего массива, затем, после запятой мы добавляем то что нам надо.

А что если  нужно добавить элемент в начало массива? А ну, напрягите мозг.

let arrCopy = ["Oleg",  ...arr]; 

Ну как вам? Если вы подумали, что данный метод параша, то вы ошибаетесь, он очень сильно набирает обороты и делает код более красивым и профессиональным!

А на этом всё, желаю вам продуктивного и хорошего дня!

На канале уже 50 человек!

Поздравляю всех с этим маленьким праздником!!

Спасибо каждому, дальше - больше(надеюсь)!

Так же не забывайте, что у канала есть чат, где вы можете пообщаться на различные темы и позадавать всякие вопросы, жду всех!

https://news.1rj.ru/str/sharknessITchat

#js #статья

Доброго времени суток!

Сорян что задержался со статьёй, неожиданно навалилась работа D:

Чтобы не было такого, сегодня я расскажу вам про классы.

Начнём с того, что классы - это объекты.., а значит, здесь есть this.

Та и вообще, это зачатки ООП, но сегодня ( и не завтра ) не о нём.

Классы привыкли называть с большой буквы:

class Animal{...};

Если не хотите брать в рот хуй моржа, пишите название класса с большой буквы.

Чтобы наш класс заработал, нужно его объявить таким образом:

const animal = new Animal();

Теперь ваш класс отработает как надо.

Сейчас поговорим о внутренностях класса.

constructor

class Animal {
constructor() { ... }
}

Что делает конструктор? - он инициализирует ваши данные.

Допустим вы передаёте как аргумент слона.

class Animal {
constructor(animal) {
this.animal = animal; // то есть мы говорим, что под "this.name" мы имеет ввиду наш аргумент animal.
}
}

const animal = new Animal("Слон");

Ну и да, дальше нужно this.animal, а не animal, ибо это классы, и они требуют к себе this.

Хорошо, теперь идём дальше - методы.

class Animal {
constructor(animal) {
this.animal = animal;
}
sayHello() {
console.log("Hello, ", this.animal, "!");
}
}

let animal = new Animal("Slon");
animal.sayHello();

Теперь поговорим о наследовании.

class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name, " издает звук ");
}
}

class Dog extends Animal {
constructor(name) {
super(name); // вызывает конструктор super класса и передает параметр name
}

speak() {
super.speak()
}
}

let animalChild = new Dog('Jake');
animalChild.speak(); // Jake издает звук

То есть, мы можем создавать дочерние классы, и при помощи super использовать методы родителя - применений уйма.

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

На этом, желаю вам продуктивной работы!

#js #статья

Всем привет и сегодня мы поговорим про циклы в джс.

Думаю, что такое цикл, объяснять не надо.

for();

Начнём с цикла for.

Синтаксис:

for( let i = 0; i < 5; i++) {
console.log("Like my post");
}

// Like my post выведется 5 раз.

Можно так же и избавляться от частей цикла.

let i = 0;
for( ; i < 5; i++){
console.log("Like my post");
}

// Like my post выведется 5 раз.

А можно и так:

let i = 0;
for( ; ;) {
console.log("Like my post"); // будет выполняться бесконечно
}

while

Это всё можно переписать и на цикл while

let i = 0;
while(i < 5){
i++;
console.log("Like my post");
}

Тут важно не забывать прописать внутри while "i++", ибо тогда будет пиздец ( бесконечный цикл ).

do..while

let i = 0;
do {
console.log( "Like my post" );
i++;
} while (i < 3);

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

Расписывать тут что-то на подобие я не буду:

let arr = [1,5,42,63,44]

for(let a = 0; a < arr.length; a++){
console.log(arr[a]); // выведет все значения массива
}

Почему? Ибо это просто понимание языка и осознание того, что вы делаете.

На этом с циклами всё, да, детская тема, но я не мог её не затронуть, ибо на канале есть те кто вообще не знают джс и именно для них эта статья.

На этом всё, всем спасибо за внимание и удачного денька :3

#js #статья

Всем привет, сегодня спустя 3-4 дня новая статья. Я долго думал о чём написать, и решил что сегодня мы затронем тему работы с DOM-деревом.

D - Documnet
O - Object
M - Model

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

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

HTML:

<section>
<div class="blocks">
<div class="block js-block-yellow"> </div>
<div class="block js-block-red"></div>
</div>
</section>

CSS:

.blocks{
display: flex;
justify-content: center;
}
.block{
margin: 0 15px;
width: 100px;
height: 100px;
box-shadow: 1px 2px 4px #c2c2c2;
border-radius: 5px;
background: yellow;
}
.block:last-child{
background: red;
}

Всё, структура и краткая стилизация есть, теперь переходим к js.

Как вы могли заметить, я нашим блокам дал ещё по два разных класса:

- js-block-yellow
- js-block-red

Если ваш элемент будет задействован в джсе, то хорошей практикой является дать ему приставку "js-" в классе.

А теперь, что вообще будем делать.

Задача:

В зависимости от того, на какой блок нажали - менять цвет всего фона.

Начинаем думать, что нам надо для этой задачи, конечно же, как минимум два наших блока. Чтобы использовать их в джсе, нужно их "взять" оттуда. На этот случай есть аж 3 метода.

let yellowBlock = document.getElementById(" ");
let yellowBlock = document.getElementByClassName(" ");
let yellowBlock = document.querySelector(" ");

Есть ещё и четвёртый, но о нём позже.

Какой метод юзать? Я предпочитаю последний.

let yellowBlock = document.querySelector(".js-block-yellow");
let redBlock = document.querySelector(".js-block-red");

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

let relativeBlock = document.querySelector(".blocks");

relativeBlock.addEventListener("click", evt => { });

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

relativeBlock.addEventListener("click", evt => {
if(evt.target === yellowBlock){
document.body.style.background = "yellow";
}
else if(evt.target === redBlock){
document.body.style.background = "red";
}
})

evt.target определяет, куда мы нажали и дальше следует заданной логике, если так, то так... я думаю тут и так всё понятно.

document.body - обращение к главному тегу body, если вам нужно допустим покрасить какой-нибудь "randomBlock", то не надо писать так:

document.randomBlock.style.background = "red";

Ибо когда вы берёте элемент таким образом:

...document.querySelector(".elem"), то вы уже затираете слово "document", поэтому чтобы всё заработало, надо писать так:

randomBlock.style.background = "red" - теперь ваш блок окрасится в красный цвет.

document.body.style - style обращается к стилям элемента, к которому вы обращаетесь. Можете попробовать так написать и увидите сколько знакомых вам цсс свойств там есть, да, проще говоря - это работа с цсс через джс.

К сожалению, не получится рассказать про задачу которую хотел и 4 метод, ибо на данном этапе уже 3867/4000 символов, поэтому ждите вторую часть, тут ещё много чего можно рассказать.

Всем спасибо за внимание и хорошего дня!

#js #статья

Продолжим тему дом-дерева.

Если не читали прошлую статью - временами вы можете не понимать что-то, так что советую прочитать первую часть.

Начнём с 4 метода.

У нас есть каких-то 3 элемента и у них будет одинакова логика, как быть? Брать каждый элемент через квериСелектор? - Бред.

На помощь приходит document.querySelectorAll();

let blocks = document.querySelectorAll(".block");

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

И да, для querySelectorAll работает только цикл forEach();

blocks.forEach(block => {
block.addEventListener("click", () => {
console.log("Like my post!")
})
})

Теперь, на каждую кнопку у которой есть класс ".block" повесится событие "клик", которое в результате выведет в консоль "Like my post!".

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

Задача:

Человек вводит фрукт, и если он есть в наличии, то выводим в консоль " товар есть в наличии ".

let field = document.querySelector(".js-field");
let button = document.querySelector("#js-check-button");

let fruits = ["Яблоко", "Груша", "Персик"]
let check = () =>{
let state = false;
if(field.value !== null){
for(let i = 0; i < fruits.length; i++){
if(field.value === fruits[i]){
state = true;
}
}
if(state){
console.log("Товар есть в наличии")
}
else {
console.log("Товара нет в наличии!")
}
}
}

button.addEventListener("click", check)


Казалось бы, зачем я взял такую задачу?
Тут есть несколько фишек:

1) Если написать так:

for (let i = 0; i < fruits.length; i++) {
if (field.value === fruits[i]) {
console.log("Товар есть в наличии")
}
else {
console.log("Товара нет в наличии!");
}
}

То, если товара нет - то он выведет в консоль " Товара нет в наличии " 3 раза, оно нам надо? Нет, поэтому, я реализовал это методом замены false на true, что в результате выводит "Товара нет в наличии" всего один раз.

2) Работа с массивами, циклами и методами массивов(хотя это почти одно и тоже)

3) Ну и работа с самим дом-деревом.

classList.

Допустим нам при каком-то условии надо вешать на элемент класс, как это делать?

Юзать classList.

elem.classList.add("test"); - к элементу "elem" добавили класс "test".

Ну и в самом цсс не забудьте дать стилизацию классу.

А что если нужно убрать класс?

elem.classList.remove("test");

А если нам нужно проверить, есть ли такой класс у элемента?

elem.classList.contains("test");

И да, classList тоже псевдомассив и его можно перебирать через for.

let classes = document.querySelector(".test1");

let classesList = classes.classList;

for (let i = 0; i < classesList.length; i++) {
alert(classesList[i]); // test1 , затем test2
}

Ну и ещё затрону тему атрибутов.

<body>
<div id="elem" name="Dima"></div>
</body>

let elem = document.querySelector("#elem");

alert(elem.getAttribute("name")); // Dima
getAttribute проверяет значение атрибута, которое мы ему указали.

alert(elem.hasAttribute("name")); // true
hasAttribute проверяет, есть ли вообще такой атрибут.

elem.setAttribute("act", "like my post")
alert(elem.getAttribute("act")); // like my post
setAttribute устанавливает атрибут и его значение.

elem.removeAttribute("name);
removeAttribute удаляет атрибут.

О атрибутах поговорим в будущем.

Спасибо всем за внимание, в дом-дереве есть много всяких фич, о которых можно писать вечно и чтоб их все узнать - надо просто писать код, так что не ленитесь и практикуйтесь!

Всем хорошего дня!

#js #статья

Всем привет и сегодня мы поговорим о том, а какие же проекты делать для портфолио?

Это пиздец частый вопрос и все начинают думать так:

- Нуу, я хочу что-то крутое.. создам-ка я копию инстаграма.

Хорошо, сделал ты фронтенд, а бекенд? Откуда его брать? Самому клепать? - та не, ещё год потратить на понимание бекенда не хочется.

Конечно можно поискать бекенд апи для инсты, но это будет тяжело и не факт что будет годное апи.

Так что же делать?

Начинать в первую очередь стоит с того, что найти парочку готовых бекенд апи, и от них уже плясать. Почему? - да потому что вы сможете сделать динамический сайт, что является продвинутым навыком веб-разработки. Но где взять эти " парочку " апишек? А я их вам скину. На данном гитхабе есть большое количество backend API, которые даже разбиты по категориям.., так что, выбирайте что-то готовое оттуда и удивляйте всех!

Backend API: https://github.com/public-apis/public-apis

#css #статья

Всем привет!

Часто ли вы слышали о noscript? Наверное, да.

А что это такое? Как использовать это? Как оптимизировать?

На эти вопросы вы получите ответ на данном сайте.

Там рассмотрены множество примеров работы с свг, а так же оптимизация и т.д.

Сайт: https://noscriptontheweb.com/ru/

( надеюсь скоро и на моём канале выйдет статья о свг )

Всем хорошего дня!

#js #статья

Всем привет и сегодня мы поговорим про экспорт и импорт в джсе.

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

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

Начнём с экспортов.

Их существует два типа:

- export
- export default

Начнём с того, что представим что мы запустили локалку и создали два js файла: main.js и func.js

В файле func.js мы будем создавать наши функции, а в main.js будем их юзать.

func.js:

let sum = (a,b) => {
return a + b;
}

Ну и тут мы с гордостью можем написать export default sum;

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

Но так же мы можем написать так:

export let sum = (a,b) => {
return a + b;
}

Ну и теперь мы тоже можем юзать эту функцию:D

А... в чём разница?

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

Вот пример:

func.js:

let sum = (a,b) => {
return a + b;
}

let sayHi = name => {
console.log("Hello", name);
}

export {sum}, {sayHi};

При помощи export default такое делать нельзя D:

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

Если вы думали, что достаточно просто написать import sum from '...' - то нет:D

В зависимости от того, какой у вас экспорт, будет зависеть тип импорта.

Начнёмс.

func.js:

let sum = (a,b) => {
return a + b;
}

export default sum;

main.js:

import sum from 'func.js'

sum(4,2);

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

func.js:

export let sum = (a,b) => {
return a + b;
}

main.js:

import {sum} from 'func.js'

sum(4,2);


Ну, а если у вас допустим две функции, которые экспортируются без дефолта, то можно записать так:

import {sum, sayHi} from 'func.js'

Ну, на этом всё. Да, тема не большая, но очень важная! Так что, я надеюсь вы внимательно всё прочитали, ибо я старался донести всю инфу без воды и только самое важное.

На этом всё, всем продуктивного денька!

#js #статья

Всем привет!

Сегодня мы поговорим про асинхронность.

Что это вообще такое, твоя асинхронность? - Это когда код выполняется не сразу, а через время, самый популярный и понятный пример - запрос на сервер. Сервер не ответит вам моментально, а через некоторое время, допустим через одну секунду.

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

Тут на самом деле много кода надо писать, но мы упростим себе задачу:

- Loading(condition) - это наш прилоадер, как параметр он принимает true или false, если true - прилоадер покажется, и наоборот, изначально он равен false.

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

Теперь про асинхронность - есть два вида записи асинхронности:
- then
- async/await

Что лучше использовать? Последний вариант.

const getUserData = async () => {
Loading(true)
let responce = await getData();
Loading(false)
}

Вот такой вот простенький запрос на сервер, основанный на асинхронности.

Ну, а теперь про then.

const getUserData = () => {
Loading(true)
getData().then(() => {
Loading(false)
}
}

Но я вас призываю использовать async/await, сейчас сам на них перешёл.

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

const getUserData = async () => {
try {
let response = await getData();
} catch(err) {
alert("Error", err);
}
}

Да-да, это те самые ребята try/catch, я вроде где-то упоминал их ранее.

Ну и конструкцию async/await можно использовать в методах класса, там всё так же, так что показывать нет смысла.

Ну, на этом всё, тема не большая, но очень важнецкая! Всем хорошего дня!

#js #статья

Всем привет, давно меня тут не было :D

Да, знаю что пропал, мой проёб, но ничего не мог поделать.

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

В общем, сегодня мы рассмотрим 3 способа работы с редаксом:

- HOC
- Hooks ( здесь будут подвиды )

И для начала сделаем какой-то user-reducer:

let initialState = {
users: [
{id: 0, name: "Dima"},
{id: 1, name: "Alex"},
{id: 2, name: "Maks"},
]
}

export const usersReducer = (state = initialState, action) => {
switch (action.type) {
case "SET_USERS":
return {
users: [...state.users, action.users]
}
}
return state;
}

export const userActions = {
setUsers: (users) => ({type: "SET_USERS", users})
}


export const setUsersThunkCreator = () => {
return async (dispatch) => {
let data = await clientApi.getAlbums()
console.log(data)
dispatch(userActions.setUsers(data))
}
}


Начнём с HOC.

HOC - Hight Order Component.

В чём суть? Суть в том что мы создаём контейнерную компоненту.

ДЕМО:

const User = props => {...}

export const UserContainer = props => <User />

Потом мы это добро оборачиваем в connect.

Я не буду полностью расписывать connect, mapDispatchToProps+mapStateToProps, ибо у меня ограничение по символам ( в инете есть статьи, как это работает )

Скажу так, что этот метод я юзал когда только начинал работать с редаксом и даже юзал HOC при тестовом задании на работу, работодатель не зачмырил подход :D

Но как бы, слишком много получается кода.. тем более, на дворе 2021 год, есть хуки, и как бы, приоритетней юзать их, ИМХО!

Теперь затронем хуки.

Как я говорил ранее, тут будут подвиды.

1) Hooks from redux + react-redux
2) Hooks from react

Начнём с обычного redux'a + react-redux'a.

В чём как бы суть?

Изначально мы создаём redux-store, combineReducers и т.д., потом создаём редьюсеры, там actionCreators, initialState и трали-вали, затем нам надо юзнать данные в компоненте. Как это сделать без хока? Легко!

import {useSelector} from "react-redux";
const Users = props => {
let users = useSelector(state => state.user.users)
return(
<>
{users.map(user => <User {...props} />)}
</>
)
}

Поясняю:
Мы юзаем хук useSelector из react-redux, чтобы получить данные нашего initialState, то есть да, мы без всяких там HOC и т.д., просто взяли и достучались до наших данных.

А что если нам нужно что-то диспатчить? Та без проблем.

import {useDispatch} from "react-redux";
const Users = props => {
let dispatch = useDispatch()
const setUsers = () => dispatch(setUsersThunkCreator())
return(
<>
</>
)
}

А теперь рассмотрим вариант от разработчиков react.

import {useReducer} from "react";

let [state, dispatch] = useReducer(usersReducer, [])

const setUsers = () => {
dispatch({
type: "SET_USERS",
payload: []
})
}

const Users = props => {
return(
<>
{state.users.map(user => <User {...props} />)}
</>
)
}

В чём разница? Разница в том, что useReducer используют для мелких приложений, где нет какой-то ебанутой архитектуры и так далее, но если у вас всё же огромный проект, то юзайте вариант от react-redux.

Надеюсь, что теперь стало понятно, почему юзать хуки более приоритетней ( ибо это меньше кода!! )

Но, а остаётся ли компонент(-а) чистым(-ой) - загадка:D

Ну, а на этом всё! Всем здоровья, счастья и бобра!

#css

Всем шалом! Я знаю что тут есть как начинающие верстаки, так и профи. Но сегодня я решил посвятить пост новичкам. Ниже я прикреплю шпору по разным css-border'ам. Надеюсь, когда-то это вам поможет :3