становимся javascript web3 developerom с рубуриком 👨🏿‍💻

вступление

всем хаюшки мужичкки сегодня рубрика кодинг ака учим джавускрипт вместе с рубуриком ака учим давить жабу

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

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

и конечно же ставь реакции ведь когда я вижу их мое сердце тает damn 💜

это дает мне мотивацию делать для тебя больше контента

летс факин снюс гоу!!!!!! 🩸🪓

из чего состоят сайты и как их пилят

больший процент сайтов которые ты видишь в вебе это сочетание html + css + js

давай представим что твой сайт — это дом

ватафак ис html

html — язык гипертекстовой разметки. это не язык программирования

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

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

ватафак ис css

css — таблицы стилей. это не язык программирования

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

разрабы пишут там стили, придают тексту цвет, располагают блоки, дают отступы (например задают заголовку отступ от параграфа) и тд

ватафак ис js

вот вишенка на тортике 🍒

js — язык программирования, используемый в основе своей для того чтобы разрабатывать веб сайты, некоторые сайты можно называть приложениями (app). отсюда и название у веб3 сайтов — dapp — decentralized application

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

в конечном итоге соединяя html + css + js получается полноценный функционирующий крутой сайт

лфг в след этап твоего вступления в мир веба!

что такое js и его роль в веб разработке

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

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

теперь к более интересному — практике!

создаем сайт

перво-наперво тебе нужно скачать какой-нибудь редактор кода

два моих любимых варианта: vs code insiders и sublime text

но так то можешь юзать хоть виндос блокнот, хоть vim в unix, главное писать текст

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

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

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

1. index.html
2. style.css
3. script.js

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

index чаще всего в прогинге — обозначение главной программы, главного фундамента. в c++ есть main ну вот тут это типа того

создал значит да? крутышка епта прям как мороженка пон

index.html

наполняем наш файлик index.html контентиком по этой линке:

https://pastebin.com/pgXHHVQm (hastebin сука не работает 😞)

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

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

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

script.js

вот он наш скриптик скриптичек наш жаваскриптик любименький кормящий...

здесь ты пишешь весь js для нашего сайта, не будем медлить и сразу напишем второй magic eden

начнем с самого простого, давай выведем какое нибудь сообщение будущему юзеру нашего сайта

пишем в скрипт:

alert('новиии гот к нам мчитса скора фсе случица сбудица шо снится пон');

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

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

поздравляю! ты написал строчку жаваскрипта нах

давай дальше нах ✍️

основы синтаксиса и простейшие конструкции

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

давайте разберемся с тем как передать жаваскрипту что то кроме текста

типы данных в js

вот такие типы данных жаваскрипт может понимать от нас человеков

переменные

че такое переменные? переменка в школе ебать

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

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

let message = 'новиии гот к нам мчитса скора фсе случица сбудица шо снится пон';
alert(message);
alert(message);

на 1 строке кода мы объявляем переменную message в которой храним текст для вывода юзеру

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

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

летс факин гоу ты уже знаешь что такое переменные!!

давай еще разок:

let firstNumber = 69;
let secondNumber = 420;
alert(firstNumber + secondNumber);

сохрани это и обнови страницу, ты увидишь..... 489!!!!!!!!! ахуеть мотемотичька вахуи

смотри, здесь мы создаем две переменные, называются они firstNumber и secondNumber

возникает резонный вопрос, почему я пишу с большой буквы второе слово в словосочетании "x number"

такая практика названия переменных называется camelCase. типа верблюжий горб пон. ей пользуются разрабы чтоб не ебаться с названием длинных сочетаний и не было такого типа letsfuckingsnusman а было letsFuckingSnusMan. согласитесь, второе намного читабельнее. также есть snake_case и kebab-case

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

js пизже твоей школьной математички, он умеет выполнять все что связано с матешей

окей с арифметикой все давай разберемся для чего нужны булевы значения но прежде познакомимся с еще одной конструкцией похожей на alert

prompt

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

let userNumber = prompt('Введите число');
alert(userNumber);

сохраняем, обновляем, получаем это:

после ввода числа и нажатия ОК о чудо — текст выводится в окошке

по факту мы сохраняем ввод юзера в переменную userNumber, но зачем нам нужна переменная? вот еще одна из ролей переменных — туда можно класть промежуточные данные которые ты получаешь от юзера, иначе они улетят в пизду (если их не сохранить)

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

а что же такое все таки этот ваш undefined спросишь ты меня?

давай попробуем написать это:

let userNumber;
alert(userNumber);

сохраняем обновляем, получаем пизды

надеюсь понятно объяснил, идем дальше к нашему вводу юзера с числом

давайте выведем юзеру "Камасутра дао лфг" если он ввел число 69 why not

let userNumber = prompt('Введи число долбаеб');
if (userNumber == 69) {
    alert('Камасутра дао лфг');
}

обновляем страницу, вводим число 69 — получаем наш вывод крутой епта!

если (админДолбаеб) {
    alert('Отписка дизлайк');
}

давай преобразуем пример и будем прибавлять к числу юзера число 1337 и выводить результат

let userNumber = prompt('Введи число хуйло');
alert(userNumber + 1337);

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

че за хуйня спросишь ты меня уже в сотый раз... объясняю на пальцах:

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

соответственно даже если юзер ввел туда число 69, то в переменную сохраняется не 69, а "69"

самый прикол в кавычках! помнишь, все что в кавычках — это текст, а не числа

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

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

преобразования

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

есть два простых способа преобразовать число в строку:

let userNumber = prompt('Введи число хуйло');
// 1.
parseInt(userNumber, 10);
// 2.
+userNumber

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

давай короче починим наш код с прибавлением

let userNumber = prompt('Введи число хуйло');
let parsedUserNumber = parseInt(userNumber, 10);
alert(parsedUserNumber + 1337);

и летс факинг гоу, оно работает детка

давай немного упростим код выше:

let userNumber = prompt('Введи число хуйло');
alert(parseInt(userNumber, 10) + 1337);

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

let userNumber = parseInt(prompt('Введи число хуйло'), 10);
alert(userNumber + 1337);

вот так нагляднее. прикол в том что в жс все инструкции выполняются справа налево

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

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

давай перейдем к подключению кошелька епта мать его лфг

подрубаем веб3, коннектим метамаскич и отображаем свои миллионы эфиров на сайте 🤑

летс факин гоу быстро фастом раш б нахуй

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

1. меняешь содержимое файла index.html на это
2. устанавливаешь Node.js (если у тебя его нет, проверить можно в консоли командой node --version — если вылезла версия значит все збс, устанавливать не надо
3. открываешь свой проектик в консоли (в вс коде можете нажать Ctrl + `)
4. вводишь npm init -y
5. вводишь npm i -g http-server
6. и наконец вводишь http-server

после этого закрываешь старую страницу, вводим в url браузера localhost:8080 и ты снова попадаешь на свой сайтик

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

(async () => { // 1
    if (typeof window.ethereum != 'undefined') { // 2
        const web3 = new Web3(window.ethereum); // 3
        const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' }); // 4
        web3.eth.getBalance(accounts[0], (error, result) => { // 5
            if (!error) { // 6
                const balanceInEth = web3.utils.fromWei(result); // 7
                alert(`Твой баланс - ${balanceInEth} ETH`); // 8
            }
        });
    }
})();

ебать я тут насрал...

массив

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

выглядит так: [1, 2, 3, 4, 5]

в случае строк: ['hello', 'world']

получить какой либо элемент из массива можно такой конструкцией:

const numbers = [1, 2, 3, 4, 5];
alert(numbers[0]); // 0 индекс соответствует 1 элементу, запомни это

6 строка

!error — че за восклицательный знак, это че егэ по русскому ебать или че. в жиэсе (и вообще во многих яп) ! обозначает "не". типа !error = не ошибка

также и с не равно: != (в коде обозначается как !=)

8 строка

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

что почитать: конкатенация строк в javascript; косые кавычки в javascript

непонятные стрелки

можешь не вдаваться в подробности

что почитать: функции в javascript; способы объявления функций в javascript

короче попотели (ctrl + c и ctrl + v пон) и хватит, давай смотреть че получилось...

сохраняем обновляем иии...

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

заключение

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

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

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

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

ебашьте и все будет ахуенно

благодарности

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

и удачи тебе в пути кодинга еба!

отзыв

если в каком то примере ошибка, или что то не получается вы всегда можете обратиться за вопросом в телегу к рубурику @rubyuroboros

мой канал — https://t.me/ruburi