Javascript + Web-программирование

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

3. Проверьте, является ли число четным или нечетным

4. Удалите все повторяющиеся значения в массиве

5. Проверьте, является ли переменная массивом

Чистый и простой способ проверить, является ли переменная массивом.

6. Генерация случайного числа между двумя числами

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

7.Генерировать случайную строку (уникальный идентификатор)

8. Замена двух переменных местами ||

Деструктурирующее присваивание, которое меняет местами значения переменных

9. Рассчитать количество дней между двумя датами

Чтобы рассчитать количество дней между двумя датами, мы сначала находим абсолютную величину между двумя датами, а затем делим ее на 24 * 60 * 60 * 1000 = 86400000, что равно миллисекундам за один день, и в конце округляем результат и верни это.

🔥 Вы можете использовать Math.round или Math.floor вместо Math.ceil.

13. Использование заглавной буквы в строке

14. Проверьте, находится ли текущая вкладка в поле зрения/в фокусе

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

16. Проверьте, находится ли элемент в данный момент в фокусе

Мы можем проверить, находится ли элемент в данный момент в фокусе, используя свойство document.activeElement.

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

18. Прокрутка вверх страницы

19. Получить параметры запроса из URL

Чтобы получить параметры запроса, мы должны сначала разделить URL на «?» а затем замените «=» на «:» и «&» на «,».

20. Получить значение куки-файла браузераПолучите значение файла cookie, обратившись к нему с помощью document.cookie

21. Очистить все файлы cookie

Вы можете легко очистить все файлы cookie, хранящиеся на веб-странице, открыв файл cookie с помощью document.cookie и очистив его.

22. Создать случайный шестнадцатеричный код

23. Получить минимальное и максимальное значение массива

24. Проверьте, состоит ли строка из повторяющейся последовательности символов.

25. Удалить ложные значения из массива

26. Разделите массив на основе условия

27. Объединить массивы

28. Поставить таймер

О привет, если ты дочитал, то ты зайка

Скажем, у вас есть три класса HTML, и элемент DOM должен иметь только один из них одновременно:

<div class="state-1"></div> 
<div class="state-2"></div>
<div class="state-3"></div>

Теперь ваша задача — вращать их. То есть циклически перебирать классы HTML-элемента. Когда происходит какое-то событие, если на нем есть элемент state-1, удалите state-1и добавьте state-2. Если он есть state-2, удалите это и добавьте state-3. В последнем состоянии удалите его и вернитесь к state-1.

Примечательно, что здесь речь идет о классах 3+. В DOM есть .classList.toggle()функция, даже та, которая принимает условное выражение в качестве второго параметра, но она в первую очередь полезна в ситуации включения/выключения двух классов, а не циклического переключения между классами.

Почему? Есть ряд причин. Изменение имени класса дает вам много возможностей для изменения стиля элементов в DOM, а подобное управление состоянием является краеугольным камнем современной веб-разработки. Но если быть точным, в моем случае я хотел сделать анимацию FLIP , где я бы изменил макет и запускал анимацию движения между различными состояниями.

Будьте осторожны с существующими классами! Я видел некоторые идеи, которые перезаписывали .className, что недружественно по отношению к другим классам, которые могут быть в элементе DOM. Все это «безопасный» выбор для циклического прохождения классов таким образом.

Подробный оператор if/else для циклического перебора классов

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

if (el.classList.contains("state-1")) {
el.classList.remove("state-1");
el.classList.add("state-2");
} else if (el.classList.contains("state-2")) {
el.classList.remove("state-2");
el.classList.add("state-3");
} else {
el.classList.remove("state-3");
el.classList.add("state-1");
}

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

Мы могли бы использовать константы, по крайней мере:

const STATE_1 = "state-1";
const STATE_2 = "state-2";
const STATE_3 = "state-3";
if (el.classList.contains(STATE_1)) {
el.classList.remove(STATE_1);
el.classList.add(STATE_2);
} else if (el.classList.contains(STATE_2)) {
el.classList.remove(STATE_2);
el.classList.add(STATE_3);
} else {
el.classList.remove(STATE_3);
el.classList.add(STATE_1);
}

Но это не сильно отличается или лучше.

RegEx от старого класса, увеличение состояния, затем повторное добавление

Этот исходит от Таба Аткинса . Так как мы знаем формат класса, state-Nмы можем искать его, выдергивать число, использовать небольшую троицу для его увеличения (но не выше самого высокого состояния), а затем добавлять/удалять классы как способ циклического прохождения. их:

const oldN = +/\bstate-(\d+)\b/.exec(el.getAttribute('class'))[1];
const newN = oldN >= 3 ? 1 : oldN+1;
el.classList.remove(`state-${oldN}`);
el.classList.add(`state-${newN}`);

Найдите индекс класса, затем удалите/добавьте

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

const classes = ["state-1", "state-2", "state-3"];
const activeIndex = classes.findIndex((c) => el.classList.contains(c));
const nextIndex = (activeIndex + 1) % classes.length;
el.classList.remove(classes[activeIndex]);
el.classList.add(classes[nextIndex]);

У Кристофера была хорошая идея сделать технику добавления/удаления короче. Оказывается, это одно и то же…

el.classList.remove(classes[activeIndex]);
el.classList.add(classes[nextIndex]);

// Does the same thing.
el.classList.replace(classes[activeIndex], classes[nextIndex]);

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

const states = ["state-1", "state-2", "state-3"];
const current = [...el.classList].find(cls => states.includes(cls));
const next = states[(states.indexOf(current) + 1) % states.length];
el.classList.remove(current);
el.classList.add(next);

Варианты этого были наиболее распространенной идеей. Вот Jhey и вот Mike Wagz, которые настраивают функции для движения вперед и назад.

Каскадные операторы замены

Говоря об этом replaceAPI, у Криса Кало была умная идея , когда вы связываете их с orоператором и полагаетесь на тот факт, что он возвращает true/false, работает он или нет. Итак, вы делаете все три, и один из них будет работать!

el.classList.replace("state-1", "state-2") ||
el.classList.replace("state-2", "state-3") ||
el.classList.replace("state-3", "state-1");

Николо Рибаудо пришел к такому же выводу.

Просто пролистайте номера классов

Если вы предварительно настроили предварительную настройку 1, вы можете циклически переключаться между классами 1-3 и добавлять/удалять их на основе этого. Это от Тимоти Леверета , который перечисляет еще один подобный вариант в том же твите.

// Assumes a `let s = 1` upfront
el.classList.remove(`state-${s + 1}`);
s = (s + 1) % 3;
el.classList.add(`state-${s + 1}`);

Вместо этого используйте data-*атрибуты

Атрибуты данных имеют одинаковую силу специфичности, поэтому у меня нет проблем с этим. На самом деле они могут быть более понятными с точки зрения обработки состояния, но, что еще лучше, у них есть специальный API , которым приятно манипулировать. У Мунаввара Фироза была идея , которая сводится к одной строчке:

el.dataset.state = (+el.dataset.state % 3) + 1

Конечный автомат атрибутов данных

Вы можете рассчитывать на то, что Дэвид Хуршид подготовит конечный автомат:

const simpleMachine = {
"1": "2",
"2": "3",
"3": "1"
};
el.dataset.state = simpleMachine[el.dataset.state];

Вам почти наверняка понадобится функция

Дайте себе немного абстракции, не так ли? Многие идеи были написаны таким образом, но пока я переместил его, чтобы сосредоточиться на самой идее. Здесь я оставлю функцию. Это от Андреа Джаммарки , в котором уникальная функция для циклического переключения классов настраивается заранее, а затем вы вызываете ее по мере необходимости:

const rotator = (classes) => ({classList }) => {
const current = classes.findIndex((cls) => classList.contains(cls));
classList.remove(...classes);
classList.add(classes[(current + 1) % classes.length]);
};
const rotate = rotator(["state-1", "state-2", "state-3"]);
rotate(el);

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

https://codepen.io/chriscoyier/pen/xxXeXPN

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

Частичное решение: делаем всё гибким

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

Итан Маркотт (Ethan Marcotte) создал простой шаблон, демонстрирующий использование гибкой вёрстки:

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

- Creating Sliding Composite Images;

- Foreground Images That Scale With the Layout.

На первый взгляд может показаться, что все легко, но это не так. Взгляните на логотип:

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

<h1 id="logo"> 
<a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer"/>
</a> </h1>

Элемент h1 содержит изображение в качестве фона, а картинка выровнена относительно фона контейнера (заголовка).

Гибкие изображения

Работа с картинками — одна из самых главных проблем при работе с адаптивной вёрсткой сайтов. Существует много способов для изменения размера изображений, и большинство из них довольно просто реализовать. Одно из решений — использование max-width в CSS:

img {max-width: 100%;}

Максимальная ширина изображения равняется 100% от ширины экрана или окна браузера, поэтому чем меньше ширина, тем меньше картинка. Обратите внимание, что max-width не поддерживается в IE, поэтому используйте width: 100%.

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

Ещё один способ: отзывчивые изображения

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

Для этого нужно скачать файл picturefill.js, а затем написать следующий код, внутри тега head:

<script src="picturefill.js"></script>

Чтобы подгрузка этого файла не влияла на загрузку сайта, рекомендуем добавить в тег script атрибут async. Это позволит сайту загружаться не дожидаясь файла picturefill.js. Однако, для того чтобы старые браузеры распознавали элементы picture, вам нужно добавить строку, document.createElement( "picture" ); перед первым тегом script.

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

<img
sizes="(min-width: 40em) 80vw, 100vw"
srcset="examples/images/medium.jpg 375w,
examples/images/large.jpg 480w,
examples/images/extralarge.jpg 768w"
alt="…">

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

Для более явного контроля над изображениями существует элемент picture.

Интересная фича для iPhone

В iPhone и iPod touch есть особенность: дизайн, созданный для больших экранов, просто сожмется в браузере с маленьким разрешением без скролла или дополнительной мобильной вёрстки. Однако изображений и текста не будет видно:

Для решения данной проблемы используется тег meta:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Если initial-scale равно единице, ширина картинок становится равной ширине экрана.

Настраиваемая структура макета страницы

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

Например, у вас есть главный файл со стилями, который задает #wrapper, #content, #sidebar, #nav вместе с цветами, фоном и шрифтами. Если ваши главные стили делают макет слишком узким, коротким, широким или высоким, вы можете это определить и подключить новые стили.

style.css (основной):

/* Основные стили, которые будут унаследованы дочерней таблицей стилей */
html,body{
background...
font...
color...
}
h1,h2,h3{}
p, blockquote, pre, code, ol, ul{}
/* Структурные элементы */
#wrapper{
width: 80%; 
margin: 0 auto; 
background: #fff; 
padding: 20px;
}
#content{
width: 54%; 
float: left; 
margin-right: 3%;
}
#sidebar-left{
width: 20%; 
float: left; 
margin-right: 3%;
}
#sidebar-right{
width: 20%; 
float: left;
}

mobile.css (дочерний):

#wrapper{
width: 90%;
}

#content{
width: 100%;
}

#sidebar-left{
width: 100%;
clear: both;

/* Дополнительные стили для нового дизайна */
border-top: 1px solid #ccc;
margin-top: 20px;
}

#sidebar-right{
width: 100%;
clear: both;

/* Additional styling for our new layout */
border-top: 1px solid #ccc;
margin-top: 20px;
}

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

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

Адаптивная вёрстка с помощью медиазапросов CSS3

Рассмотрим, как можно использовать CSS3-медиазапросы для создания адаптивного дизайна. min-width задает минимальную ширину окна браузера или экрана, к которой будут применены определенные стили. Если какое-нибудь значение будет ниже min-width, то стили будут проигнорированы. max-width делает противоположное.

Пример:

@Media screen and (min-width: 600px) {
.hereIsMyClass {
width: 30%;
float: right;
}
}

@Media screen and (max-width: 600px) {

.aClassforSmallScreens {
clear: both; font-size: 1.3em;
}
}

В этом случае класс (aClassforSmallscreens) будет работать при ширине экрана меньше или равной 600 px.

В то время как min-width и max-width могут быть применимы и к ширине экрана, и к ширине окна браузера, нам может понадобиться работать только с шириной устройства. Например, чтобы игнорировать браузеры, открытые в маленьком окне. Для этого можно использовать min-device-width и max-device-width:

@Media screen and (max-device-width: 480px) {
.classForiPhoneDisplay {
font-size: 1.2em;
}
}

@Media screen and (min-device-width: 768px) {
.minimumiPadWidth {
clear: both;
margin-bottom: 2px solid #ccc;
}
}

Специально для iPad у медиазапросов есть свойство orientation, значениями которого могут быть либо landscape (горизонтальный), либо portrait (вертикальный):

@media screen and (orientation: landscape) {
.iPadLandscape {
width: 30%;
float: right;
}
}

@media screen and (orientation: portrait) {
.iPadPortrait {
clear: both;
}
}

Также значения медиазапросов можно комбинировать:

@media screen and (min-width: 800px) and (max-width: 1200px) {
.classForaMediumScreen {
background: #cc0000;
width: 30%;
float: right;
}
}

Этот код будет выполнен только для экранов или окон браузеров шириной от 800 до 1200 px.

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

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css"/>
<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css"/>
<link rel="stylesheet" media="print" href="print.css"/>

JavaScript

Если ваш браузер не поддерживает CSS3-медиазапросы, то замену стилей можно организовать с помощью jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$(window).bind("resize", resizeWindow);
function resizeWindow(e){
var newWindowWidth = $(window).width();

// Если ширина меньше 600 px, используется таблица стилей для мобильного
if(newWindowWidth < 600){
$("link[rel=stylesheet]").attr({href : "mobile.css"});
} else if(newWindowWidth > 600){
// Если ширина больше 600 px, используется таблица стилей для десктопа
$("link[rel=stylesheet]").attr({href : "style.css"});
}
}
});
</script>

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

1. Object.entries

Большинство разработчиков используют метод Object.keys для итерации по объекту. Этот метод возвращает только массив ключей объекта, а не значения. Можно использовать Object.entries для получения как ключа, так и значения.

Чтобы выполнить итерацию по объекту, можем сделать следующее:

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

2. Метод replaceAll

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

Но в ES12 в String.prototype добавлен новый метод replaceAll, который заменяет все вхождения строки другим строковым значением:

3. Числовой разделитель

Можно использовать символ подчеркивания «_» в качестве числового разделителя, для упрощения подсчета количества нулей в числе.

Разделитель также можно использовать с числами BigInt, как в следующем примере:

Это делает число более читабельным.

4. document.designMode

Связанный с интерфейсным JavaScript, designMode позволяет редактировать любой контент на странице. Просто откройте консоль браузера и введите следующее:

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

Заключение

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

Итак, после установки всех вышеописанных программ мы должны настроить редактор и затем подготовить директорию для работы. Запускаем VS Code, и выбираем дефолтным окружением Git Bash по инструкции: https://code.visualstudio.com/docs/terminal/basics

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

Теперь при открытии терминала (ctrl+~ по умолчанию) у вас будет запускаться unix-like терминал. Теперь можно создавать проект :)

Создайте директорию, в которой будете хранить скрипты. Откройте её в VSCode и запустите терминал. Теперь инитим npm-проект командой npm init -y (флаг -y автоматом выберет дефолтные параметры), затем добавим необходимые пакеты:

npm install -D typescript @TypeScript-eslint/eslint-plugin @TypeScript-eslint/parser eslint eslint-config-airbnb-base eslint-plugin-import eslint-config-airbnb-typescript

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

https://eslint.org/docs/latest/user-guide/configuring/ - линтер

https://www.typescriptlang.org/docs/handbook/tsconfig-json.h... - typescript

Или просто создайте файлы через терминал:

code .eslintrc.js tsconfig.json

И вставьте готовые настройки из песочницы:

https://pastebin.com/1HiX5CrJ

https://pastebin.com/3zE82atx

Если у вас есть свой любимый конфиг линта, то добавьте в него правило 'import/prefer-default-export': 'off' , т.к. в большинстве случаев ESLint предлагает заменить конструкцию export fn main на export default, и подчёркивает весь код как неверный.

Теперь создадим папки для удобного размещения скриптов:

mkdir {src,build,types}

Эта команда создаст в текущей директории 3 папки. В одной мы будем хранить и прописывать TS файлы с исходным кодом (src от sources - исходники), в build будет готовый js - для синхронизации с игровым сервером, его руками менять не будем. И types - для хранения файла, описывающего API игры, тоже будем менять только при обновлениях игры (если будет меняться api, как в недавнем релизе 2.0.0+).

В tsconfig уже указали эти папки. Так же там есть настройка "paths" - она пригодится в будущем для импортов, т.к. игра не может в относительные пути.

Теперь нам нужно добавить Type Definitions - собственно, описание апи игры, по которому мы получим автокомплит в редакторе, а при изучении его сможем многое полезное позже найти. Итак, как объявлено в tsconfig.json, мы должны создать файл NetscriptDefinitions.d.ts и положить его в папку types, а наполнить мы можем оригинальным описанием от разработчика:

https://github.com/danielyxie/bitburner/blob/dev/src/ScriptE...

ctrl+a, ctrl+c:

https://raw.githubusercontent.com/danielyxie/bitburner/dev/s...

Осталось дело за малым: запустить игру, старт API server и получить токен авторизации:

Нужно включить верхние две опции и скопировать токен авторизации. Не закрывая игру, возвращаемся в VSCode, прожимаем палитру команд (ctrl+shift+p) и вводим BitBurner, выбираем Add Аuth Token и вставляем ранее скопированный токен из игры. И заодно включаем File Watcher, чтобы автоматизировать обновление скриптов в игре.

Теперь нужно настроить пуш в игру файлов из папки build, а не всех папок. Для этого снова открываем настройки, как при выборе терминала, но теперь вводим в поиск scriptRoot, сразу находим нужную опцию и вводим ./build/

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

Осталось дело за малым: проверить, как оно работает. В папке src создаём файл с понятным названием и расширением .ts (например, hack.ts) и прописываем базовую структуру:

https://pastebin.com/aRjD3Xfr

Нам нужно импортировать тайпинги и объявлять асинхронную функцию с именем main, которая принимает в себя как минимум один аргумент ns. Это требование апи игры. Исключение - вспомогательные именованные функции, которые вы будете импортировать как часть своего скрипта, там можно уже называть как угодно. Но если вы хотите запускать скрипт из терминала игры, то его исходник должен соответствовать такой структуре.

Последний этап - компиляция. Мы пишем скрипты в среде Node JS, поэтому нужно в главном файле любого проекта - package.json - указать скрипты для компиляции. Чтобы один раз запустить команду и дальше автоматом компилить TS файлы в JS, в поле scripts нужно добавить команду watch (или любую удобную, например, go) со значением tsc -w:

https://pastebin.com/1RPGXejc

Теперь в терминале можно выполнить npm run watch и сосредоточиться только на написании кода. Вперёд, за взломом!))

Для желающих погрузиться:

1) попробуйте настроить tsconfig.json так, чтобы импортировать тайпинги NS можно было из '@ns'

подсказка: https://www.typescriptlang.org/docs/handbook/tsconfig-json.h... 

2) Создайте скрипты из туториала через данное окружение