gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(guide): simplify directory structure

Browse Source
This commit is contained in:
Mrugesh Mohapatra
2018-10-16 21:26:13 +05:30
parent f989c28c52
commit da0df12ab7
35752 changed files with 0 additions and 317652 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
guide/russian/javascript/tutorials/add-new-properties-to-a-javascript-object/index.md Normal file
View File

@@ -0,0 +1,26 @@
---
title: Add New Properties to a JavaScript Object
localeTitle: Добавить новые объекты в объект JavaScript
---
Вы можете добавлять новые свойства к существующим объектам JavaScript так же, как вы их модифицировали.
Существуют два разных синтаксиса: нотация ноты и скобки. Обычно для чтения читается нотация точек, но свойства должны быть действительным идентификатором.
Вот как использовать точечную нотацию:
```
myDog.bark = "woof-woof";
```
Вот как использовать обозначения в виде скобок:
```javascript
myObject['bark'] = "woof-woof";
```
Используя обозначения в виде скобок, мы можем использовать переменные в качестве имен свойств:
```javascript
var dynamicProperty = "bark";
myObject[dynamicProperty] = "woof-woof";
```

9
guide/russian/javascript/tutorials/add-two-numbers-with-javascript/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Add Two Numbers with JavaScript
localeTitle: Добавить два номера с JavaScript
---
JavaScript использует символ `+` для добавления. Его также можно использовать вместо `parseInt()` но это выходит за рамки этого.
```
var sum = 10 + 10;
```

28
guide/russian/javascript/tutorials/build-javascript-objects/index.md Normal file
View File

@@ -0,0 +1,28 @@
---
title: Build JavaScript Objects
localeTitle: Создание объектов JavaScript
---
Объекты полезны для хранения данных структурированным способом и могут использоваться для представления объектов реального мира, таких как автомобили или отель, на компьютере.
Объекты похожи на массивы, за исключением того, что вместо использования индексов для доступа и изменения их данных вы получаете доступ к данным в объектах через так называемые свойства. Существует два способа создания объектов: Object Literal и Constructor.
Используя способ Object Literal, вот как мы будем создавать образец объекта:
```
var cat = {
name: "Whiskers",
legs: 4,
tails: 1,
enemies: ["Water", "Dogs"]
};
```
Используя способ Constructor, вот как мы будем создавать образец объекта:
```
var cat = new Object();
cat.name = "Whiskers";
cat.legs = 4;
cat.tails = 1;
cat.enemies = ["Water", "Dogs"];
```
В пути «Конструктор» мы используем `new` ключевое слово вместе с `Object` (с капиталом «O») для создания нового экземпляра объекта. Затем мы используем точечную нотацию для назначения имен свойств и значений объекта.

22
guide/russian/javascript/tutorials/comment-your-javascript-code/index.md Normal file
View File

@@ -0,0 +1,22 @@
---
title: Comment Your JavaScript Code
localeTitle: Комментарий
---
Комментарии - отличный способ оставить заметки для себя и для других людей, которым позже нужно будет выяснить, что он делает. Любой код в нем будет проигнорирован.
Давайте рассмотрим два способа написания комментариев в JavaScript.
* Комментарий с двойной косой чертой прокомментирует оставшуюся часть текста в текущей строке:
`// This is a single line comment.`
* Комментарий slash-star-star-slash будет комментировать все между символами `/*` и `*/` :
```javascript
/*
This is
a multi-line comment
(comment block)
*/
```

17
guide/russian/javascript/tutorials/construct-javascript-objects-with-functions/index.md Normal file
View File

@@ -0,0 +1,17 @@
---
title: Construct JavaScript Objects with Functions
localeTitle: Построить объекты JavaScript с функциями
---
С помощью конструкторов легко создавать новые объекты с использованием чертежа или конструктора. Синтаксис объявления немного отличается, но все еще легко запомнить.
```
// Let's add the properties engines and seats to the car in the same way that the property wheels has been added below. They should both be numbers.
var Car = function() {
this.wheels = 4;
this.engines = 1;
this.seats = 1;
};
var myCar = new Car();
```
Имя функции-конструктора обычно начинается с заглавной буквы (в отличие от других функций, которые обычно начинаются с символов нижнего регистра). Заглавная буква должна помочь напоминать разработчикам использовать новое ключевое слово, когда они создают объект, используя эту функцию.

11
guide/russian/javascript/tutorials/create-a-javascript-slot-machine/index.md Normal file
View File

@@ -0,0 +1,11 @@
---
title: Create a JavaScript Slot Machine
localeTitle: Создать игровой автомат JavaScript
---
Для этого мы должны сгенерировать три случайных числа, используя формулу, которую они дают, а не общую. `Math.floor(Math.random() * (3 - 1 + 1)) + 1;`
```
slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
```

9
guide/russian/javascript/tutorials/create-decimal-numbers-with-javascript/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Create Decimal Numbers with JavaScript
localeTitle: Создание десятичных чисел с помощью JavaScript
---
Число переменных JavaScript может иметь десятичные значения.
```
var myDecimal = 2.8;
```

90
guide/russian/javascript/tutorials/debugging-javascript-with-browser-devtools/index.md Normal file
View File

@@ -0,0 +1,90 @@
---
title: Debugging JavaScript with Browser Devtools
localeTitle: Отладка JavaScript с помощью браузера Devtools
---
Как разработчик вы часто захотите отладить код. Возможно, вы уже использовали `console.log` в некоторых проблемах, что является самым простым способом для отладки.
В этой статье мы расскажем вам о самых крутых трюках, чтобы отлаживать с помощью встроенных средств отладки браузеров.
## Краткое описание редактора кода FreeCodeCamp:
Прежде чем перейти к отладке, вы можете пропустить некоторые секретные факты об этом _замечательном механизме проверки кода_ в FCC.
Мы используем настраиваемый [CodeMirror](http://codemirror.net/mode/javascript/index.html) , как редактор кода. Функция [`eval()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval) используется для оценки кода JavaScript, представленного в виде строки из редактора. Когда вызывается `eval()` , браузеры будут выполнять ваш код. Мы узнаем больше, почему этот секрет важен в последующих разделах этой статьи.
## Теперь перейдем к трюкам:
## Google Chrome DevTools
Google Chrome - один из самых популярных браузеров со встроенным движком JavaScript под названием [V8](https://developers.google.com/v8/) и предлагает отличный набор инструментов для разработчиков под названием [Chrome DevTools](https://developer.chrome.com/devtools) . Очень рекомендуется посетить их [полное руководство по отладке JavaScript](https://developer.chrome.com/devtools/docs/javascript-debugging) .
### 1: Основы DevTools
#### Запуск Chrome DevTools
Хит `F12`
, В качестве альтернативы вы можете нажать
`Ctrl` + `Shift` + `I`
на Windows и Linux или
`Cmd` + `Shift` + `I`
на Mac, или если вы просто любите свою мышь, перейдите в `Menu > More Tools > Developer Tools` .
#### Знакомство с `Sources` и вкладками `console` .
Эти две вкладки, возможно, будут вашими лучшими друзьями во время отладки. Вкладка « `Sources` » может использоваться для визуализации всех скриптов, которые находятся на веб-странице, которую вы посещаете. На этой вкладке есть разделы для окна кода, дерева файлов, стек вызовов и окна просмотра и т. Д.
На вкладке `console` отображается весь выход журнала. Кроме того, вы можете использовать приглашение вкладки консоли для выполнения кода JavaScript. Его синонимом командной строки на Windows или терминалом в Linux.
_Совет. Переключайте консоль в любое время в DevTools с помощью `Esc` ._
### 2: Общие ярлыки и функции
В то время как вы можете посетить [полный список ярлыков](https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/shortcuts) , ниже приведены несколько наиболее используемых:
Возможности Windows, Linux Mac
Поиск ключевого слова, регулярное выражение поддерживается. `Ctrl` + `F``Cmd` + `F`
Поиск и `P``Cmd` файла `Ctrl` + `P``Cmd` + `P`
Перейти к строке `Ctrl` + `G` + `:line_no``Cmd` + `G` + `:line_no`
Добавьте точку останова `Ctrl` + `B` или нажмите на строку №. `Cmd` + `B` , или щелкните по строке №.
Пауза / возобновление выполнения `F8` `F8`
Перейдите к следующему вызову функции `F10` `F10`
Шаг следующего вызова функции `F11` `F11`
### 3: Использование исходной карты для нашего кода
Одной из самых крутых функций, которые вам понравится, является [отладка Dynamic Script](https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-dynamic-javascript) , на лету, через [Source Maps](https://developer.chrome.com/devtools/docs/javascript-debugging#source-maps) .
Каждый скрипт можно визуализировать на вкладке «Источник» DevTools. На вкладке источника есть все исходные файлы JavaScript. Но код из редактора кода выполняется через `eval()` в контейнере, который просто называется виртуальной машиной (VM) в рамках браузера.
Как вы, наверное, догадались, что наш код на самом деле является скриптом, который не имеет имени файла. Поэтому мы не видим этого на вкладке «Источник».
> ![:sparkles:](//forum.freecodecamp.com/images/emoji/emoji_one/sparkles.png?v=2 ": Блестки:") **_Вот идет хак!_** ![:sparkles:](//forum.freecodecamp.com/images/emoji/emoji_one/sparkles.png?v=2 ": Блестки:")
Мы должны использовать `Source Maps` для присвоения имени JavaScript из нашего редактора. Его довольно просто:
Допустим, что мы находимся на вызове [Factorialize](https://www.freecodecamp.com/challenges/factorialize-a-number) , и наш код выглядит так:
```
function factorialize(num) {
if(num <= 1){
...
}
factorialize(5);
```
Все, что нам нужно сделать, это добавить `//# sourceURL=factorialize.js` в начало кода, то есть первую строку:
```
//# sourceURL=factorialize.js
function factorialize(num) {
if(num <= 1){
...
```
> ![:sparkles:](//forum.freecodecamp.com/images/emoji/emoji_one/sparkles.png?v=2 ": Блестки:") **_И Эврика, вот и все!_** ![:sparkles:](//forum.freecodecamp.com/images/emoji/emoji_one/sparkles.png?v=2 ": Блестки:")
Теперь откройте DevTools и найдите имя файла. Добавить точки останова, отладить и наслаждаться!

48
guide/russian/javascript/tutorials/debugging-node-files-using-cli-commands/index.md Normal file
View File

@@ -0,0 +1,48 @@
---
title: Debugging Node files using CLI commands
localeTitle: Отладка файлов узлов с помощью команд CLI
---
## Отладка файлов узлов с помощью команд CLI
В этом уроке вы узнаете, как вы можете отлаживать код Node.js в командной строке. Ваш простой код JavaScript можно легко отладить с помощью DevTools в браузере. Для узла вы можете отлаживать свой код, не покидая свой интерфейс командной строки (CLI).
Допустим, у вас есть файл с именем `contents.js` . Вы должны запустить файл, используя команду `node` .
```bash
node contents.js
```
Это многое должно быть уже известно вам, так как вы пишете код Node.js. Теперь любые ошибки, которые появляются, должны быть отлажены. Чтобы запустить файл в режиме отладки, добавьте `inspect` ключевых слов во время запуска файла.
```bash
node inspect contents.js
```
Теперь эта команда откроет ваш файл в режиме отладки. Здесь вы можете шагнуть через свой код по одной строке за раз, нажав клавишу **N** на клавиатуре.
Отладчик начнется с первой строки. Нажимая **N** , вы можете переместить отладчик на следующую строку. Если в первой строке произошла ошибка, она отобразила бы ошибку вместо перехода ко второй строке. Это очень полезно. Если, например, на 17-й строке есть ошибка, она покажет вам ошибку перед движением вперед.
В вашей логике может быть ошибка, то есть вы хотите, чтобы определенное значение отображалось, но вместо этого оно показывает другое значение. В этом случае добавление `console.log()` s может помочь вам и в режиме отладки, будет легче определить причину ошибки.
* * *
Иногда иногда случается, что ваш исходный код огромен. Вы отправляетесь в режим отладки, чтобы отлаживать свои ошибки, и вы уверены, что ошибка связана с функцией в строке 52. Но поскольку режим отладки начинается с строки 1, у вас нет выбора, кроме как посещать строку 52 по очереди? Точно нет!
Просто добавьте `debugger` ключевых слов перед функцией.
```javascript
console.log("Outside the function....everything's going smoothly");
debugger;
function doesSomething() {
//some logic
console.log("Something went wrong inside here!");
}
```
Теперь откройте файл снова в режиме отладки и на этот раз нажмите **C** на клавиатуре.
Нажатие **N** перемещает отладчик на следующую строку, а нажатие **C** указывает отладчику пройти весь код за один раз. Это то же самое, что работать без режима отладки. _Но_ на этот раз ваш код имеет дополнение. Вы догадались - ключевое слово `debugger` . Нажатие кнопки **C** обычно запускает код до конца, но из-за добавления `debugger` он останавливается перед запуском функции.
Поэтому, после запуска вашего файла в режиме отладки, нажатие **C** пропустит код и остановится точно перед функцией по ключевому слову `debugger` . После этого вы можете начать выполнять функцию по одной строке за раз, пока не укажете свою ошибку.

34
guide/russian/javascript/tutorials/declare-javascript-objects-as-variables/index.md Normal file
View File

@@ -0,0 +1,34 @@
---
title: Declare JavaScript Objects as Variables
localeTitle: Объявление объектов JavaScript как переменных
---
Это простой формат. Вы объявляете свою переменную и имеете ее равным объекту в форме `{ key: value}`
```
var car = {
"wheels":4,
"engines":1,
"seats":5
};
```
Вы можете получить доступ к свойствам объекта с помощью точечной нотации или скобки.
Использование точечной нотации:
```javascript
console.log(car.wheels); // 4
```
Использование обозначения в виде скобок:
```javascript
console.log(car["wheels"]); // 1
```
Использование обозначения динамической скобки:
```javascript
var seatsProperty = "seats";
console.log(car[seatsProperty]); // 5
```

98
guide/russian/javascript/tutorials/declare-javascript-variables/index.md Normal file
View File

@@ -0,0 +1,98 @@
---
title: Declare Variables
localeTitle: Объявлять переменные
---
# Объявлять переменные
Объявления переменных JavaScript могут быть отсортированы по трем различным компонентам: тип переменной, имя переменной и значение переменной.
```js
var myName = "Rafael";
```
Давайте разложим вышеприведенную строку кода на части, которые составляют:
```js
var/const/let
```
Переменные JavaScript могут иметь три типа объявлений: var, const и let. Переменные типа Var являются глобальными, если объявлены вне функции, к которой они могут быть доступны любым JS-файлом (или консолью), и если они созданы внутри функции, они доступны независимо от области блока. Переменные типа Let-type ограничены в своем блоке. См. Пример ниже для разницы.
```js
function varTest() {
var x = 1;
if (true) {
var x = 2; // same variable!
console.log(x); // 2
}
console.log(x); // 2
}
function letTest() {
let x = 1;
if (true) {
let x = 2; // different variable
console.log(x); // 2
}
console.log(x); // 1
}
```
Константные переменные имеют ту же область действия, что и переменные let (масштаб блока), но неизменяемы. Независимо от значения, которое должна быть назначена переменная const-типа, должно произойти, когда объявлена ​​переменная, а JavaScript будет вызывать ошибку, если переменная будет изменена позже.
```js
const genre = "non-fiction";
console.log(genre); // "non-fiction";
genre = "fantasy"; // error
```
Теперь, когда мы можем определить тип переменной, давайте посмотрим на это имя. Имена переменных JavaScript написаны в формате `camel case` . Примером случая с верблюдом является: `camelCase` . В контексте нашего примера:
```js
myName
```
Имя также мы снова получим эту переменную:
```js
console.log(myName); // "Rafael"
```
Наконец, наше значение:
```js
"Rafael"
```
JavaScript динамически типизирован, что означает, что любая заданная переменная может представлять любой заданный тип данных в любой момент времени. Например:
```js
var example = "This is an example";
example = [0, 1, 2, 3]
example = {test: "Result"}
example = 5
```
Все эти утверждения совершенно верны - переменные JavaScript могут переходить от строки к массиву к объекту с целым числом.
### Объявить объект как const
Как уже упоминалось выше, константная переменная является неизменной, значение, присвоенное такой переменной во время объявления, не может быть обновлено, но есть смысл отметить в случае объявления объекта с константой. Объект типа const также не может обновляться после определения, но свойства объекта cab be. Например.
```js
const Car1 = {
name: 'BMW',
model: 'X1',
color: 'black'
}
```
Здесь мы не можем обновить объект, но мы можем обновить свойства, обратившись через оператор dot (.), Как показано ниже.
```js
Car1.color = 'Red';
console.log(Car1);
O/P - {name: "BMW", model: "X1", color: "Red"}
```
Если нам нужно сделать объект enitre неизменным (включая свойства), тогда мы должны использовать метод замораживания.

15
guide/russian/javascript/tutorials/decrement-a-number-with-javascript/index.md Normal file
View File

@@ -0,0 +1,15 @@
---
title: Decrement a Number with JavaScript
localeTitle: Уменьшить число с помощью JavaScript
---
Вы можете легко уменьшать или уменьшить переменную на `1` с `--` оператором.
```
i--;
```
является эквивалентом
```
i = i - 1;
```
**Примечание:** вся строка становится `i--;` , устраняя необходимость равенства знака.

41
guide/russian/javascript/tutorials/delete-properties-from-a-javascript-object/index.md Normal file
View File

@@ -0,0 +1,41 @@
---
title: Delete Properties from a JavaScript Object
localeTitle: Удаление свойств из объекта JavaScript
---
Мы также можем удалить свойства из таких объектов:
```
delete ourDog.bark;
```
Оператор **delete** удаляет свойство из объекта.
## Синтаксис
`delete expression` где выражение должно оценивать ссылку на свойство, например:
```
delete object.property
delete object['property']
```
## параметры
**объект**
Имя объекта или выражение, оценивающее объект.
**имущество**
Свойство для удаления.
## пример
```js
var person = {name:'Jay', age:'52'};
delete person['age'];
console.log(person); //{name:'Jay'}
```
## Возвращаемое значение
Выдает строгий режим, если свойство является собственным неконфигурируемым свойством (возвращает false в нестрочном режиме). Возвращает true во всех остальных случаях.
[Прочитайте больше](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete)

27
guide/russian/javascript/tutorials/detect-authentic-click-events/index.md Normal file
View File

@@ -0,0 +1,27 @@
---
title: Detect authentic click events
localeTitle: Обнаружение аутентичных событий кликов
---
## Обнаружение аутентичных событий кликов
Там может быть ситуация, когда вы хотите сделать некоторые конкретные вещи только в том случае, если событие click было действительно инициировано пользователем, а не каким-то скриптом для имитации события click.
Существует очень простое решение этой проблемы, объект событий javascript предоставляет нам свойство `.istrusted` , которое можно использовать, чтобы сказать разницу.
#### Вот пример использования этого метода
```javascript
// Assume there is a button in the HTML
const button = document.querySelector('button');
button.addEventListener('click', (e) => {
if (e.isTrusted) {
console.log('Button clicked by a real user');
} else {
console.log('Button click simulated by a script');
}
});
button.click() // Outputs "Button click simulated by a script"
```

9
guide/russian/javascript/tutorials/divide-one-number-by-another-with-javascript/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Divide One Number by Another with JavaScript
localeTitle: Разделите одно число другим с помощью JavaScript
---
В JavaScript используется символ `/` для деления.
```
var quotient = 66 / 33;
```

23
guide/russian/javascript/tutorials/finding-a-remainder-in-javascript/index.md Normal file
View File

@@ -0,0 +1,23 @@
---
title: Finding a Remainder in JavaScript
localeTitle: Поиск остатка в JavaScript
---
Оператор _остатка_ `%` дает остаток от деления двух чисел.
## пример
```
5 % 2 = 1 because
Math.floor(5 / 2) = 2 (Quotient)
2 * 2 = 4
5 - 4 = 1 (Remainder)
```
## использование
В математике число может быть проверено четным или нечетным, проверяя остаток от деления числа на 2.
```
17 % 2 = 1 (17 is Odd)
48 % 2 = 0 (48 is Even)
```
**Примечание.** Не путайте его с _модулем._ `%` Не работает с отрицательными числами.

5
guide/russian/javascript/tutorials/generate-random-fractions-with-javascript/index.md Normal file
View File

@@ -0,0 +1,5 @@
---
title: Generate Random Fractions with JavaScript
localeTitle: Генерировать случайные дроби с помощью JavaScript
---
JavaScript имеет функцию `Math.random()` которая генерирует случайное десятичное число.

11
guide/russian/javascript/tutorials/generate-random-whole-numbers-with-javascript/index.md Normal file
View File

@@ -0,0 +1,11 @@
---
title: Generate Random Whole Numbers with JavaScript
localeTitle: Генерировать случайные целые числа с помощью JavaScript
---
Замечательно, что мы можем создавать случайные десятичные числа, но это еще более полезно, если мы намного полезнее генерировать случайное целое число.
Для этого мы можем умножить случайное число на десять и использовать `Math.floor()` для преобразования десятичного числа в целое число
```
Math.floor(Math.random()*10)
```

15
guide/russian/javascript/tutorials/get-current-url-in-javascript/index.md Normal file
View File

@@ -0,0 +1,15 @@
---
title: Get Current Url in JavaScript
localeTitle: Получить текущий URL в JavaScript
---
Чтобы получить **текущий URL-адрес** :
```
var url = window.location.href;
```
Чтобы получить **текущий путь** :
```
var path = window.location.path;
```
Более подробную информацию о объекте местоположения и его свойствах можно найти [здесь](https://developer.mozilla.org/en-US/docs/Web/API/Window/location) .

11
guide/russian/javascript/tutorials/give-your-javascript-slot-machine-some-stylish-images/index.md Normal file
View File

@@ -0,0 +1,11 @@
---
title: Give Your JavaScript Slot Machine Some Stylish Images
localeTitle: Дайте свой игровой автомат JavaScript Некоторые стильные изображения
---
Мы уже установили изображения для вас в массиве с образами. Мы можем использовать разные индексы для захвата каждого из них.
Вот как мы установили бы первый слот для отображения другого изображения в зависимости от того, какой номер генерирует его случайное число:
```
$($('.slot')[0]).html('<img src = "' + images[slotOne-1] + '">');
```

62
guide/russian/javascript/tutorials/how-to-create-a-countdown-timer/index.md Normal file
View File

@@ -0,0 +1,62 @@
---
title: How to Create a Countdown Timer
localeTitle: Как создать таймер обратного отсчета
---
## Как создать таймер обратного отсчета
### Создание
Начните с создания функции countdownTimer.
```javascript
function startCountdown(seconds){
var counter = seconds;
var interval = setInterval(() => {
console.log(counter);
counter--;
if(counter < 0 ){
// The code here will run when
// the timer has reached zero.
clearInterval(interval);
console.log('Ding!');
};
}, 1000);
};
```
### выполнение
Теперь, чтобы запустить таймер, мы предоставляем `startCountdown()` с `startCountdown()` значением в качестве аргумента, представляющим секунды для обратного отсчета.
```javascript
startCountdown(10);
// Console Output //
// 10
// 9
// 8
// 7
// 6
// 5
// 4
// 3
// 2
// 1
// 0
// Ding!
```
### Живой пример
[Codepen - таймер обратного отсчета](https://codepen.io/rdev-rocks/pen/jLogxY?editors=0012)
### Дополнительные ресурсы
Используемые методы:
* [setInterval ()](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
* [clearInterval ()](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval)

245
guide/russian/javascript/tutorials/how-to-create-a-dropdown-menu-with-css-and-javascript/index.md Normal file
View File

@@ -0,0 +1,245 @@
---
title: How to Create a Dropdown Menu with CSS and JavaScript
localeTitle: Как создать раскрывающееся меню с CSS и JavaScript
---
## Как создать раскрывающееся меню с CSS и JavaScript
В этом уроке вы узнаете, как создать простое выпадающее меню с ванильным Javascript, HTML и CSS. Мы будем проходить через HTML, CSS и Javascript-код, но уделяем больше внимания программированию, поскольку это учебник JS. Мы будем использовать только простые JS и CSS, без каких-либо фреймворков или препроцессоров. Единственное (вид) исключения будет импортировать файл [шрифта Awesome](https://fontawesome.com/) CSS, потому что мы будем использовать один из его значков.
Это предназначено для разработчиков, которые имеют среднее представление о HTML, CSS и JS. Я попытался сделать его максимально чистым, но я не буду уделять слишком много внимания деталям. Надеюсь, вам понравится.
## Скриншоты
Вот как выглядит результат кода:
Начальный экран:
![](https://i.imgur.com/jrnu6mE.png)
Откроется окно:
![](https://i.imgur.com/gszPtRa.png)
Выпадающее меню с выбранной опцией:
![](https://i.imgur.com/TKXxZGF.png)
#### HTML:
В этом разделе мы обсудим реализацию HTML-кода для демонстрационной страницы. Чтобы начать, давайте посмотрим код `<head>`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dropdown Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/'-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
</head>
```
Это, в основном, HTML headplate, за исключением тегов `link` загружают две таблицы стилей CSS, которые мы будем использовать в этом уроке: стили шрифта Awesome и файл `styles.css` , где мы будем определять стили этой страницы.
Затем есть остальная часть HTML-файла, тело:
```html
<body>
<div class='dropdown'>
<div class='title pointerCursor'>Select an option <i class="fa fa-angle-right"></i></div>
<div class='menu pointerCursor hide'>
<div class='option' id='option1'>Option 1</div>
<div class='option' id='option2'>Option 2</div>
<div class='option' id='option3'>Option 3</div>
<div class='option' id='option4'>Option 4</div>
</div>
</div>
<span id='result'>The result is: </span>
<script>
...
</script>
</body>
</html>
```
Этот раздел можно разделить на 3 основные части:
* `.dropdown` div, где будет определена структура элемента выпадающего элемента.
* Элемент `#result` , который будет содержать выбранный параметр пользователем, из раскрывающегося элемента.
* Сценарий написан в `<script>` . Его реализация скрыта здесь, потому что ее детали будут объяснены в последнем разделе этого урока.
Выпадающий элемент - это `div` содержащий элементы `title` и `menu` . Первый определяет, какой текст будет представлен в элементе перед тем, как будет выбран какой-либо параметр, и последний определит параметры, которые будут выбираться элементом.
Элемент `result` просто показать вам, какая опция выбрана.
#### Стили:
Ниже вы можете проверить полный код css. Как вы можете видеть , что делает использование CSS3 `transition` и `transform` конструкции.
Обратите внимание на определения классов `.dropdown` . Они используются для определения макета для раскрывающегося компонента контейнера, а также его внутренних элементов, таких как `.title` и его `.option` .
```css
body{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.hide {
max-height: 0 !important;
}
.dropdown{
border: 0.1em solid black;
width: 10em;
margin-bottom: 1em;
}
.dropdown .title{
margin: .3em .3em .3em .3em;
width: 100%;
}
.dropdown .title .fa-angle-right{
float: right;
margin-right: .7em;
transition: transform .3s;
}
.dropdown .menu{
transition: max-height .5s ease-out;
max-height: 20em;
overflow: hidden;
}
.dropdown .menu .option{
margin: .3em .3em .3em .3em;
margin-top: 0.3em;
}
.dropdown .menu .option:hover{
background: rgba(0,0,0,0.2);
}
.pointerCursor:hover{
cursor: pointer;
}
.rotate-90{
transform: rotate(90deg);
}
```
#### JavaScript:
Теперь посмотрим, как реализована часть Javascript. Сначала мы рассмотрим определения функций а затем код, который вызывает эти функции, чтобы сделать выпадающие действия.
В принципе, есть 3 действия, которые происходят в зависимости от того, что представляет собой пользовательское взаимодействие, поскольку их слушатели добавляются в элементы DOM:
1. Нажав на раскрывающийся элемент
2. Выбор одного из раскрывающихся меню
3. Изменение текущего выбранного параметра
Я хотел бы дать понять, что мы используем функции стрелок ( `() => {}` ) и ключевое слово `const` , которые являются функциями ES6. Вы, наверное, хорошо, если используете последнюю версию своего браузера, но помните об этом.
#### 1\. Нажав на раскрывающийся элемент
```Javascript
function toggleClass(elem,className){
if (elem.className.indexOf(className) !== -1){
elem.className = elem.className.replace(className,'');
}
else{
elem.className = elem.className.replace(/\s+/g,' ') + ' ' + className;
}
return elem;
}
function toggleDisplay(elem){
const curDisplayStyle = elem.style.display;
if (curDisplayStyle === 'none' || curDisplayStyle === ''){
elem.style.display = 'block';
}
else{
elem.style.display = 'none';
}
}
function toggleMenuDisplay(e){
const dropdown = e.currentTarget.parentNode;
const menu = dropdown.querySelector('.menu');
const icon = dropdown.querySelector('.fa-angle-right');
toggleClass(menu,'hide');
toggleClass(icon,'rotate-90');
}
```
Когда щелкнут элемент выпадающего меню, он открывается (если он закрыт) или закрывается (если он открыт). Это происходит путем привязки `toggleMenuDisplay` к прослушивателю событий щелчка в раскрывающемся элементе. Эта функция переключает отображение своего элемента `menu` с помощью функций `toggleDisplay` и `toggleClass` .
#### 2\. Выбор одного из раскрывающихся меню
```Javascript
function handleOptionSelected(e){
toggleClass(e.target.parentNode, 'hide');
const id = e.target.id;
const newValue = e.target.textContent + ' ';
const titleElem = document.querySelector('.dropdown .title');
const icon = document.querySelector('.dropdown .title .fa');
titleElem.textContent = newValue;
titleElem.appendChild(icon);
//trigger custom event
document.querySelector('.dropdown .title').dispatchEvent(new Event('change'));
//setTimeout is used so transition is properly shown
setTimeout(() => toggleClass(icon,'rotate-90',0));
}
```
#### 3\. Изменение выбранного параметра
```Javascript
function handleTitleChange(e){
const result = document.getElementById('result');
result.innerHTML = 'The result is: ' + e.target.textContent;
}
```
Функция `handleTitleChange` привязана к пользовательскому событию `change` в элементе `.title` , чтобы изменить `#result` элемента `#result` всякий раз, когда элемент заголовка изменяется. Вызов этого события выполняется в предыдущем разделе.
#### Основной код
```Javascript
//get elements
const dropdownTitle = document.querySelector('.dropdown .title');
const dropdownOptions = document.querySelectorAll('.dropdown .option');
//bind listeners to these elements
dropdownTitle.addEventListener('click', toggleMenuDisplay);
dropdownOptions.forEach(option => option.addEventListener('click',handleOptionSelected));
document.querySelector('.dropdown .title').addEventListener('change',handleTitleChange);
```
В главном разделе есть только некоторый простой код, чтобы получить заголовок и элементы раскрывающегося списка, чтобы привязать к ним события, обсуждавшиеся в последнем разделе.
## демонстрация
Полный код и демонстрацию этого приложения можно найти [здесь](https://codepen.io/GCrispino/pen/EEXmYd) .
## Больше информации
* [Введение ES6](https://guide.freecodecamp.org/javascript/es6)
* [Функции стрелок](https://guide.freecodecamp.org/javascript/es6/arrow_functions/)
* [Let и Const](https://guide.freecodecamp.org/javascript/es6/let_and_const/)

569
guide/russian/javascript/tutorials/how-to-create-a-lightbox/index.md Normal file
View File

@@ -0,0 +1,569 @@
---
title: How to Create a Lightbox
localeTitle: Как создать лайтбоксы
---
## Как создать лайтбоксы
### Введение
Лайтбокс представляет собой комбинацию из двух компонентов: [модального](https://en.wikipedia.org/wiki/Modal_window) и слайд-шоу. Здесь вы создадите простой лайтбокс, используя `HTML` , `CSS` и `JavaScript` .
Лайтбокс будет содержаться в модальном, который будет запускаться некоторыми `JavaScript` , из [обработчиков событий](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers) в разметке `HTML` . Вы будете создавать стили, которые обеспечат состояние `CSS` и поведение с помощью `JavaScript` . Вы также найдете справочный список используемых вами методов и другие полезные бит tid, которые связаны с этим учебником, внизу.
#### Наши изображения
Изображения, которые мы будем использовать, поставляются компанией [Pexels](https://www.pexels.com/) , бесплатную фотогалерею, которая позволяет вам предоставлять высококачественные изображения своим проектам быстро, бесплатно и обычно без каких-либо атрибутов.
#### Просто покажи мне код!
Живой пример можно найти [здесь - CodePen / Лайтбокс,](https://codepen.io/rdev-rocks/pen/KXNzvo) а полная черновик кода находится внизу.
### Шаг 1. Разметка
Разметка или `HTML` , обеспечивает структуру для лайтбокса.
```html
<!-- Here is your access point for your user, a preview of the images you wish to display.
You use the onclick="" event handler to execute the methods you will define in the
JavaScript near the bottom -->
<div class="row">
<div class="col">
<img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" onclick="openLightbox();toSlide(1)" class="hover-shadow preview" alt="Toy car on the road." />
</div>
<div class="col">
<img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" onclick="openLightbox();toSlide(2)" class="hover-shadow preview" alt="Toy car exploring offroad." />
</div>
<div class="col">
<img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" onclick="openLightbox();toSlide(3)" class="hover-shadow preview" alt="Toy car in the city." />
</div>
</div>
<!-- This is your lightbox, it is contained in a modal. Here you provide all the images,
controls, and another set of preview images as the dots. Dots show your user which
image is currently active. Note that you use entities (eg &times;), more info on
them at the bottom. -->
<div id="Lightbox" class="modal">
<span class="close pointer" onclick="closeLightbox()">&times;</span>
<div class="modal-content">
<div class="slide">
<img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" class="image-slide" alt="Toy car on the road." />
</div>
<div class="slide">
<img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" class="image-slide" alt="Toy car exploring offroad." />
</div>
<div class="slide">
<img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" class="image-slide" alt="Toy car in the city." />
</div>
<a class="previous" onclick="changeSlide(-1)">&#10094;</a>
<a class="next" onclick="changeSlide(1)">&#10095;</a>
<div class="dots">
<div class="col">
<img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" class="modal-preview hover-shadow" onclick="toSlide(1)" alt="Toy car on the road" />
</div>
<div class="col">
<img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" class="modal-preview hover-shadow" onclick="toSlide(2)" alt="Toy car exploring offroad." />
</div>
<div class="col">
<img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" class="modal-preview hover-shadow" onclick="toSlide(3)" alt="Toy car in the city." />
</div>
</div>
</div>
</div>
```
### Шаг 2. Стиль с CSS
`CSS` предоставляет вам различные состояния для вашего лайтбокса. Такие вещи, как видимость, позиционирование и зависание.
Ваша таблица стилей должна выглядеть так:
```css
/* Here you provide a best practice's "reset", read more about it at the bottom! :) */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 0;
}
/* You define the style of our previews here, you are using flex to display the images
"responsively". */
.preview {
width: 100%;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.row > .col {
padding: 0 8px;
}
.col {
float: left;
width: 25%;
}
/* Now you want to define what the lightbox will look like. Note that you have the display
as none. You don't want it to show until the user clicks on one of the previews.
You will change this display property with JavaScript below. */
.modal {
display: none;
position: fixed;
z-index: 1;
padding: 10px 62px 0px 62px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
.modal-content {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
margin: auto;
padding: 0 0 0 0;
width: 80%;
max-width: 1200px;
}
/* Same with your slides, you set the display to none, because you want to choose which
one is shown at a time. */
.slide {
display: none;
}
.image-slide {
width: 100%;
}
.modal-preview {
width: 100%;
}
.dots {
display: flex;
flex-direction: row;
justify-content: space-between;
}
/* You want the previews a little transparent to show that they are "inactive".
You then add an .active or :hover class to animate the selections for your user when
they interact with your controls and clickable content.
*/
img.preview, img.modal-preview {
opacity: 0.6;
}
img.active,
.preview:hover,
.modal-preview:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.previous,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.previous:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
```
### Шаг 3. JavaScript
Теперь к делу! Ваш JavaScript должен выглядеть так:
```javascript
// Initialize here and run showSlide() to give your lightbox a default state.
let slideIndex = 1;
showSlide(slideIndex);
// You are providing the functionality for your clickable content, which is
// your previews, dots, controls and the close button.
function openLightbox() {
document.getElementById('Lightbox').style.display = 'block';
}
function closeLightbox() {
document.getElementById('Lightbox').style.display = 'none';
};
// Note that you are assigning new values here to our slidIndex.
function changeSlide(n) {
showSlide(slideIndex += n);
};
function toSlide(n) {
showSlide(slideIndex = n);
};
// This is your logic for the light box. It will decide which slide to show
// and which dot is active.
function showSlide(n) {
const slides = document.getElementsByClassName('slide');
let modalPreviews = document.getElementsByClassName('modal-preview');
if (n > slides.length) {
slideIndex = 1;
};
if (n < 1) {
slideIndex = slides.length;
};
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
};
for (let i = 0; i < modalPreviews.length; i++) {
modalPreviews[i].className = modalPreviews[i].className.replace(' active', '');
};
slides[slideIndex - 1].style.display = 'block';
modalPreviews[slideIndex - 1].className += ' active';
};
```
И это все! Теперь соедините весь код. Теперь у вас должен быть функциональный лайтбокс.
### Все коды
```html
<body>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 0;
}
.preview {
width: 100%;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.row > .col {
padding: 0 8px;
}
.col {
float: left;
width: 25%;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding: 10px 62px 0px 62px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
.modal-content {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
margin: auto;
padding: 0 0 0 0;
width: 80%;
max-width: 1200px;
}
.slide {
display: none;
}
.image-slide {
width: 100%;
}
.modal-preview {
width: 100%;
}
.dots {
display: flex;
flex-direction: row;
justify-content: space-between;
}
img.preview, img.modal-preview {
opacity: 0.6;
}
img.active,
.preview:hover,
.modal-preview:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.previous,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.previous:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
</style>
<div class="row">
<div class="col">
<img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" onclick="openLightbox();toSlide(1)" class="hover-shadow preview" alt="Toy car on the road." />
</div>
<div class="col">
<img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" onclick="openLightbox();toSlide(2)" class="hover-shadow preview" alt="Toy car exploring offroad." />
</div>
<div class="col">
<img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" onclick="openLightbox();toSlide(3)" class="hover-shadow preview" alt="Toy car in the city" />
</div>
</div>
<div id="Lightbox" class="modal">
<span class="close pointer" onclick="closeLightbox()">&times;</span>
<div class="modal-content">
<div class="slide">
<img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" class="image-slide" alt="Toy car on the road." />
</div>
<div class="slide">
<img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" class="image-slide" alt="Toy car exploring offroad." />
</div>
<div class="slide">
<img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" class="image-slide" alt="Toy car in the city." />
</div>
<a class="previous" onclick="changeSlide(-1)">&#10094;</a>
<a class="next" onclick="changeSlide(1)">&#10095;</a>
<div class="dots">
<div class="col">
<img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" class="modal-preview hover-shadow" onclick="toSlide(1)" alt="Toy car on the road." />
</div>
<div class="col">
<img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" class="modal-preview hover-shadow" onclick="toSlide(2)" alt="Toy car exploring offroad." />
</div>
<div class="col">
<img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" class="modal-preview hover-shadow" onclick="toSlide(3)" alt="Toy car in the city" />
</div>
</div>
</div>
</div>
<script>
let slideIndex = 1;
showSlide(slideIndex);
function openLightbox() {
document.getElementById('Lightbox').style.display = 'block';
};
function closeLightbox() {
document.getElementById('Lightbox').style.display = 'none';
};
function changeSlide(n) {
showSlide(slideIndex += n);
};
function toSlide(n) {
showSlide(slideIndex = n);
};
function showSlide(n) {
const slides = document.getElementsByClassName('slide');
let modalPreviews = document.getElementsByClassName('modal-preview');
if (n > slides.length) {
slideIndex = 1;
};
if (n < 1) {
slideIndex = slides.length;
};
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
};
for (let i = 0; i < modalPreviews.length; i++) {
modalPreviews[i].className = modalPreviews[i].className.replace(' active', '');
};
slides[slideIndex - 1].style.display = 'block';
modalPreviews[slideIndex - 1].className += ' active';
};
</script>
</body>
```
## \### Дополнительная информация:
#### HTML
[Modal](https://en.wikipedia.org/wiki/Modal_window) - всплывающее окно
[Обработчики событий](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers) - свойства HTML, которые прослушивают пользовательские события.
[Entity](https://developer.mozilla.org/en-US/docs/Glossary/Entity) - строка, представляющая зарезервированный charactor в HTML.
#### CSS
[box-size:](https://css-tricks.com/box-sizing/) - Свойство CSS3, которое управляет тем, как браузер отображает контент на основе высоты и ширины.
[Flex-box](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) - новая технология, которая помогает с позиционированием содержимого HTML в отзывчивой манноре.
[: hover](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) - псевдоселектор, который запускается, когда пользователь наводится на элемент, когда этому классу присваивается.
#### JavaScript
[пусть](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) переменная области блока.
[const](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) Константа блока-объема.
[getElementById ()](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) - метод документа, возвращающий ссылку на элемент HTML.
[getElementsByClassName ()](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) - метод документа, который возвращает массив ссылок на html, которые имеют соответствующие классы.
[\+ =](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators) - оператор присваивания, который добавит числа или объединит строки.
#### Ресурсы:
[Живой пример](https://codepen.io/rdev-rocks/pen/KXNzvo?editors=1111) - CodePen, который демонстрирует вышеприведенный код.
[Интерактивный Flex-Box](https://codepen.io/enxaneta/full/adLPwv) - интерактивный CodePen, который показывает поведение гибких ящиков.
[Pexels](https://www.pexels.com/) - бесплатная фотогалерея.
[MDN](https://developer.mozilla.org/en-US/) - отличное место для информации о веб-материалах.
[W3School - Лайтбокс](https://www.w3schools.com/howto/howto_js_lightbox.asp) - Этот код был вдохновлен отсюда. Спасибо W3Schools!

60
guide/russian/javascript/tutorials/how-to-create-a-slideshow/index.md Normal file
View File

@@ -0,0 +1,60 @@
---
title: How to Create a Slideshow
localeTitle: Как создать слайд-шоу
---
## Как создать слайд-шоу
Веб-слайд-шоу представляет собой последовательность изображений или текста, которые состоят в отображении одного элемента этой последовательности за промежуток времени.
Для этого урока вы можете создать слайд-шоу следующих шагов:
### Напишите разметку.
\`\` \`\` HTML Слайд-шоу
```
### Write styles to hide slides and show only one slide.
For hide the slides you have to give them a default style and only show one slide if this is active or you want to show it.
```
CSS \[data-component = "слайд-шоу"\] .slide { display: none; }
\[data-component = "слайд-шоу"\] .slide.active { display: block; }
```
### Change the slides in a time interval.
The first step to change the slides to show, is select the slide wrapper(s) and then its slides.
When you selected the slides you have to go over each slide and add or remove an active class depending on the slide that you want to show, and then just repeat the process in a time interval.
Keep it in mind when you remove a active class to a slide, you are hidden it because the styles defined in the previous step. But when you add an active class to the slide, you are overwritring the style ``display:none to display:block`` , so the slide will show to the users.
```
JS var slideshows = document.querySelectorAll ('\[data-component = "слайд-шоу"\]');
// Применить ко всем слайд-шоу, которые вы определяете с помощью разметки slideshows.forEach (initSlideShow);
функция initSlideShow (слайд-шоу) {
```
var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`); // Get an array of slides
var index = 0, time = 5000;
slides[index].classList.add('active');
setInterval( () => {
slides[index].classList.remove('active');
//Go over each slide incrementing the index
index++;
// If you go over all slides, restart the index to show the first slide and start again
if (index === slides.length) index = 0;
slides[index].classList.add('active');
}, time);
```
} \`\` \`
#### [Пример Codepen после этого руководства](https://codepen.io/AndresUris/pen/rGXpvE)

11
guide/russian/javascript/tutorials/how-to-create-a-top-navigation-bar/index.md Normal file
View File

@@ -0,0 +1,11 @@
---
title: How to Create a Top Navigation Bar
localeTitle: Как создать верхнюю панель навигации
---
## Как создать верхнюю панель навигации
Это заглушка. [Помогите нашему сообществу расширить его](https://github.com/freecodecamp/guides/tree/master/src/pages/javascript/tutorials/how-to-create-a-top-navigation-bar/index.md) .
[Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу](https://github.com/freecodecamp/guides/blob/master/README.md) .
#### Дополнительная информация:

11
guide/russian/javascript/tutorials/how-to-create-an-accordion/index.md Normal file
View File

@@ -0,0 +1,11 @@
---
title: How to Create an Accordion
localeTitle: Как создать аккордеон
---
## Как создать аккордеон
Это заглушка. [Помогите нашему сообществу расширить его](https://github.com/freecodecamp/guides/tree/master/src/pages/javascript/tutorials/how-to-create-an-accordion/index.md) .
[Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу](https://github.com/freecodecamp/guides/blob/master/README.md) .
#### Дополнительная информация:

46
guide/russian/javascript/tutorials/how-to-create-popups/index.md Normal file
View File

@@ -0,0 +1,46 @@
---
title: How to Create Popups
localeTitle: Как создать всплывающие окна
---
## Как создать всплывающие окна
Всплывающее окно - это окно, которое появляется (появляется), когда вы выбираете опцию с помощью мыши или нажимаете специальную функциональную клавишу.
В этом примере всплывающее окно появится, когда вы нажмете на кнопку и останетесь на экране, пока не нажмете кнопку X.
Мы построим всплывающее окно с использованием `HTML` , `CSS` и `JavaScript`
### Шаг 1 HTML
HTML обеспечивает структуру всплывающего окна
\`\` \`\` HTML
Открыть PopUp
Всплывающее окно с JavaScript
Икс
```
### Step 2 CSS
We will choose our own style for the popup window. Notice: the popup div should be hidden at first, so in the style I will select display: none;
```
CSS .popup _main_ div { позиция: фиксированная; ширина: 800 пикселей; высота: 400 пикселей; граница: 2px сплошной черный; border-radius: 5px; background-color: #fff; слева: 50%; margin-left: -400px; верх: 50%; margin-top: -250px; display: none;
} .close _popup { позиция: абсолютная; ширина: 25 пикселей; высота: 25 пикселей; border-radius: 25px; граница: 2px сплошной черный; text-align: center; правый: 5px; top: 5px; курсор: указатель; } .close_ popup p { margin-top: 5px; font-weight: 400;
} .текст{ text-align: center; размер шрифта: 30 пикселей; font-weight: 400; margin-top: 22%; } #Btn { позиция: абсолютная; слева: 50%; верх: 20%;
}
```
### Step 3 JavaScript
```
JS // Прежде всего, я инициализирую свои переменные // Выберите элементы, которые мы будем использовать из DOM // Я добавлю событие en в кнопку, которая вызовет функцию, которая изменит стиль отображения всплывающего окна от ни одного, чтобы заблокировать
const Btn = document.getElementById ("Btn") const PopupDiv = document.querySelector (". popup _main_ div") const ClosePopup = document.querySelector (". close\_popup") Btn.addEventListener ( 'нажмите', функция () { PopupDiv.style.display = "блок" }) ClosePopup.addEventListener ( 'нажмите', функция () { не PopupDiv.style.display = "ни один" })
\`\` \`
Живой код в: [Codepen.io](https://codepen.io/voula12/pen/qyyNeK)

11
guide/russian/javascript/tutorials/how-to-create-tabs/index.md Normal file
View File

@@ -0,0 +1,11 @@
---
title: How to Create Tabs
localeTitle: Как создать вкладки
---
## Как создать вкладки
Это заглушка. [Помогите нашему сообществу расширить его](https://github.com/freecodecamp/guides/tree/master/src/pages/javascript/tutorials/how-to-create-tabs/index.md) .
[Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу](https://github.com/freecodecamp/guides/blob/master/README.md) .
#### Дополнительная информация:

32
guide/russian/javascript/tutorials/how-to-install-node-js-and-npm-on-windows/index.md Normal file
View File

@@ -0,0 +1,32 @@
---
title: How to Install Node Js and Npm on Windows
localeTitle: Как установить Node Js и Npm в Windows
---
## Как установить Node Js и Npm в Windows
Установка Node.js и Npm в Windows очень проста.
Сначала загрузите установщик Windows с [сайта Node.js.](https://nodejs.org/) У вас будет выбор между **LTS** (Long Term Support) или **текущей** версией.
* **Текущая** версия получает последние функции и обновления быстрее
* Версия **LTS** foregos изменений функций для повышения стабильности, но получает патчи , такие как исправления и обновление для системы безопасности
После того, как вы выбрали версию, которая соответствует вашим потребностям, запустите программу установки. Следуйте инструкциям, чтобы выбрать путь установки и убедитесь, что функция **диспетчера пакетов npm** включена вместе с **временем выполнения Node.js.** Это должна быть конфигурация по умолчанию.
Перезагрузите компьютер после завершения установки.
Если вы установили конфигурацию по умолчанию, теперь Node.js будет добавлен в ваш PATH. Запустите командную строку или powershell и введите следующие данные для проверки:
```
> node -v
```
Консоль должна отвечать строкой версии. Повторите процесс для Npm:
```
> npm -v
```
Если обе команды работают, ваша установка прошла успешно, и вы можете начать использовать Node.js!
#### Дополнительная информация:
Дополнительную информацию и руководства можно найти на [странице документов Node.js.](https://nodejs.org/en/docs/)

15
guide/russian/javascript/tutorials/increment-a-number-with-javascript/index.md Normal file
View File

@@ -0,0 +1,15 @@
---
title: Increment a Number with JavaScript
localeTitle: Увеличение номера с помощью JavaScript
---
Вы можете легко увеличить или добавить `1` к переменной с помощью оператора `++` .
```
i++;
```
является эквивалентом
```
i = i + 1;
```
**Примечание** . Вся строка становится `i++;` , устраняя необходимость равенства знака.

11
guide/russian/javascript/tutorials/index.md Normal file
View File

@@ -0,0 +1,11 @@
---
title: Tutorials
localeTitle: Учебники
---
## Учебники
Это заглушка. [Помогите нашему сообществу расширить его](https://github.com/freecodecamp/guides/tree/master/src/pages/javascript/tutorials/index.md) .
[Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу](https://github.com/freecodecamp/guides/blob/master/README.md) .
#### Дополнительная информация:

7
guide/russian/javascript/tutorials/invert-regular-expression-matches-with-javascript/index.md Normal file
View File

@@ -0,0 +1,7 @@
---
title: Invert Regular Expression Matches with JavaScript
localeTitle: Инвертировать регулярные выражения с помощью JavaScript
---
Использовать `/\S/gi` ; чтобы совместить все, что не является пространством в строке.
Вы можете инвертировать любое совпадение, используя прописную версию селектора `\s` против `\S` например.

26
guide/russian/javascript/tutorials/iterate-with-javascript-for-loops/index.md Normal file
View File

@@ -0,0 +1,26 @@
---
title: Iterate with JavaScript for Loops
localeTitle: Итерация с JavaScript для циклов
---
Наиболее распространенный тип цикла JavaScript называется `for loop` , поскольку он работает `for` определенного количества времени.
```
var ourArray = [];
for(var i = 0; i < 5; i++) {
ourArray.push(i);
}
```
нашArray теперь будет содержать \[0,1,2,3,4\]
## Подробнее о циклах
```
for(var i = 0; i < 5; i++) { // There are 3 parts here
```
Для цикла есть три части. Они разделяются точкой с запятой.
1. Инициализация: `var i = 0;` - Этот код запускается только один раз в начале цикла. Обычно он используется для объявления переменной счетчика (с `var` ) и инициализации счетчика (в этом случае он установлен в 0).
2. Условие: `i < 5;` - Цикл будет работать, пока это `true` . Это означает, что как только `i` будет равно 5, цикл прекратит цикл. Обратите внимание, что внутри цикла никогда не будет видно, что `i` 5, потому что он остановится до этого. Если это условие изначально `false` , цикл никогда не будет выполняться.
3. Инкремент: `i++` - этот код запускается в конце каждого цикла. Обычно это простое приращение (оператор `++` ), но может быть любым математическим преобразованием. Он используется для перемещения счетчика ( `i` ) вперед (или назад или что-то еще).

14
guide/russian/javascript/tutorials/iterate-with-javascript-while-loops/index.md Normal file
View File

@@ -0,0 +1,14 @@
---
title: Iterate with JavaScript While Loops
localeTitle: Итерации с помощью JavaScript, в то время как циклы
---
Другой тип цикла JavaScript называется `while loop` потому что он работает, `while` что-то истинно, и останавливается, когда что-то перестает быть истинным.
```
var ourArray = [];
var i = 0;
while(i < 5) {
ourArray.push(i);
i++;
}
```

43
guide/russian/javascript/tutorials/javascript-for-loops-explained/index.md Normal file
View File

@@ -0,0 +1,43 @@
---
title: JavaScript for Loops Explained
localeTitle: JavaScript для пояснений
---
Оператор for создает цикл, который состоит из трех необязательных выражений, заключенных в круглые скобки и разделенных точками с запятой, за которыми следует оператор или набор операторов, выполняемых в цикле.
Цикл for имеет следующий синтаксис:
```
for (<a href='http://forum.freecodecamp.com/t/javascript-while-loop/14668' target='_blank' rel='nofollow'>initialization]; [condition]; [final-expression]) {
code block to be executed
}
```
\[Инициализация\] выполняется до начала цикла (блок кода).
\[условие\] определяет условие для запуска цикла (блок кода).
\[final-expression\] выполняется каждый раз после того, как цикл (блок кода) был выполнен.
## Пример в JavaScript:
```
var ourArray = [];
for (var i = 0; i < 5; i++) {
ourArray.push(i);
}
```
Из приведенного выше примера вы можете прочитать:
\[initialization\] устанавливает переменную перед запуском цикла (var i = 0).
\[условие\] определяет условие запуска цикла (я должен быть меньше 5).
\[final-expression\] увеличивает значение (i ++) каждый раз, когда выполняется кодовый блок в цикле.
## Почему нам нужны «для циклов»?
Для циклов используются для циклического преобразования кода кода в известное количество раз. Иногда компьютер знает, сколько раз, а не вы, но это все еще известно.
Оформить заказ на некоторые другие наши статьи по циклам:
* \[While Loop
* [Для In Loop](http://forum.freecodecamp.com/t/javascript-for-in-loop/14665)

59
guide/russian/javascript/tutorials/page-redirects-using-javascript/index.md Normal file
View File

@@ -0,0 +1,59 @@
---
title: Page Redirects Using JavaScript
localeTitle: Перенаправления страниц с использованием JavaScript
---
## Перенаправления страниц с использованием JavaScript
Если вы пытаетесь перенаправить пользователя на другую страницу, вы можете легко использовать JavaScript для выполнения этой задачи. Важно отметить следующее:
Даже если у вас есть библиотека jQuery, загруженная в ваши скрипты, вы можете использовать чистое решение JavaScript для перенаправления страниц для повышения эффективности.
Существует несколько способов сделать это, но самым простым способом является использование объекта `window.location` для отправки пользователя на страницу, к которой вы хотите перенаправить. Объект `window.location` может использовать любое допустимое значение URL, например `http://www.yoururl.com` , `somepage.html` и т. Д.
```javascript
window.location = 'http://www.yoururl.com';
// window.location = 'somepage.html';
// etc.
```
### Специальная переадресация
Вы можете использовать специальный метод переадресации, который по умолчанию привязан к объекту `window.location` в каждом главном браузере с именем `replace()` . Этот метод принимает те же допустимые значения URL, что и при использовании `window.location` .
Вот пример использования этого метода (он будет по-прежнему работать так же, как просто использовать `window.location` в других браузерах):
```javascript
window.location.replace('http://www.yoururl.com');
// window.location.replace('somepage.html');
// etc.
```
### Простая временная переадресация с использованием JS
Ниже приведен пример простой временной переадресации с использованием функции `setTimeout()` . Временные переадресации полезны, поэтому вы можете объяснить пользователю через контент на странице переадресации, почему они перенаправляются на другую страницу.
```javascript
// the 5000 below is 5000 milliseconds which equals 5 seconds until the redirect happens
// keep in mind that 1 second = 1000 milliseconds
setTimeout(function () {
window.location = 'http://www.yoururl.com';
// window.location = 'somepage.html';
// etc.
}, 5000);
```
### Отступать
Иногда пользователи просматривают Интернет с отключенным JavaScript, и это, очевидно, представляет проблемы с JS-зависимым решением для переадресации. Я рекомендую установить элемент `<meta>` , который обновит браузер с новым местоположением. Я бы установил время для того, чтобы этот мета-элемент был вторым после того, как предполагается, что перенаправление JS должно состояться. Итак, если у вас есть перенаправление, которое происходит в JS через 5 секунд, установите перенаправление элемента `<meta>` на 6 секунд.
Поместите элемент `<meta>` внутри `<head>` вашего документа так:
```html
<head>
<!-- Change the 6 below to however many seconds you wish to wait until redirection to the new page. Change the portion after "URL=" to the URL of your choice. This can be a local page: URL=somepage.html, a web address: URL=http://www.yoururl.com, or any other valid URL. It is important to note the semicolon between the number of seconds to refresh and the URL. -->
<meta http-equiv="refresh" content="6;URL=http://www.yoururl.com">
</head>
```
Имейте в виду, что не все браузеры поддерживают элемент `<meta>` (я смотрю на вас, более старые версии IE и Safari), но большинство современных браузеров (Microsoft Edge, Google Chrome, Mozilla Firefox, Opera).

9
guide/russian/javascript/tutorials/perform-arithmetic-operations-on-decimals-with-javascript/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Perform Arithmetic Operations on Decimals with JavaScript
localeTitle: Выполнение арифметических операций с десятичными знаками с помощью JavaScript
---
В JavaScript вы можете выполнять вычисления с десятичными числами, как и целые числа.
```
var quotient = 4.4 / 2.0; // equals 2.2
```

12
guide/russian/javascript/tutorials/store-multiple-values-in-one-variable-using-javascript-arrays/index.md Normal file
View File

@@ -0,0 +1,12 @@
---
title: Store Multiple Values in One Variable Using JavaScript Arrays
localeTitle: Сохранение нескольких значений в одной переменной с использованием массивов JavaScript
---
С переменными массива JavaScript мы можем хранить несколько фрагментов данных в одном месте.
Вы начинаете объявление массива с помощью скобки открытия, заканчиваете его закрывающей скобкой и помещаете запятую между каждой записью, например:
```
var sandwich = ["peanut butter", "jelly", "bread"]
```
`myArray = [2,'j'];`

11
guide/russian/javascript/tutorials/subtract-one-number-from-another-with-javascript/index.md Normal file
View File

@@ -0,0 +1,11 @@
---
title: Subtract One Number from Another with JavaScript
localeTitle: Вычитайте один номер из другого с помощью JavaScript
---
Мы также можем вычесть одно число из другого.
В JavaScript используется символ - для вычитания.
```
var difference = 45 - 33;
```

70
guide/russian/javascript/tutorials/the-javascript-version-of-jquerygetjson/index.md Normal file
View File

@@ -0,0 +1,70 @@
---
title: JavaScript Version of Jquerygetjson
localeTitle: Версия JavaScript Jquerygetjson
---
Если вы хотите работать с json-файлами с помощью только ванильного JavaScript.
## IE8 +
```
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onreadystatechange = function() {
if (this.readyState === 4) {
if (this.status >= 200 && this.status < 400) {
// Success!
var data = JSON.parse(this.responseText);
} else {
// Error :(
}
}
};
request.send();
request = null;
```
## IE9 +
```
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
var data = JSON.parse(request.responseText);
} else {
// We reached our target server, but it returned an error
}
};
request.onerror = function() {
// There was a connection error of some sort
};
request.send();
```
## IE10 +
```
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = function() {
if (this.status >= 200 && this.status < 400) {
// Success!
var data = JSON.parse(this.response);
} else {
// We reached our target server, but it returned an error
}
};
request.onerror = function() {
// There was a connection error of some sort
};
request.send();
```

20
guide/russian/javascript/tutorials/use-the-javascript-console/index.md Normal file
View File

@@ -0,0 +1,20 @@
---
title: Use the JavaScript Console
localeTitle: Использование консоли JavaScript
---
У Chrome и Firefox есть отличные консоли JavaScript, также известные как DevTools, для отладки вашего JavaScript.
Инструменты разработчика можно найти в меню Chrome или в веб-консоли в меню FireFox. Если вы используете другой браузер или мобильный телефон, настоятельно рекомендуем перейти на настольный Firefox или Chrome.
Вы также можете использовать [https://repl.it/](https://repl.it/) для запуска кода в Интернете.
Вот как вы печатаете на консоли:
```
console.log('Hello world!')
```
Также вы можете распечатать журнал ошибок в консоли с помощью этого кода:
```
console.error('I am an error!')
```

80
guide/russian/javascript/tutorials/using-anonymous-functions-for-private-namespacing-in-your-javascript-apps/index.md Normal file
View File

@@ -0,0 +1,80 @@
---
title: Using Anonymous Functions for Private Namespacing in Your JavaScript Apps
localeTitle: Использование анонимных функций для частного пространства имен в ваших приложениях JavaScript
---
Давайте посмотрим, что такое пространство имен, когда дело доходит до создания приложений JavaScript и некоторые преимущества использования частного пространства имен при создании приложений.
**Обратите внимание, что эта статья ссылается на анонимные функции самоисполнения. Если вы не знаете, что это такое, прочитайте эту замечательную статью Ноа Стокса: « [Самостоятельные анонимные функции» или «Как писать чистый Javascript»](http://esbueno.noahstokes.com/post/77292606977/self-executing-anonymous-functions-or-how-to-write) . В этой статье мы подробно рассмотрим анонимные функции самоисполнения.**
## Что такое пространство имен?
Проще говоря, пространство имен - это всего лишь раздел кода, который имеет свое собственное пространство. Когда вы начинаете писать JS-приложения, вы обычно просто вводите код и запускаете его. Это превращает весь код в так называемое **глобальное пространство имен** , которое содержит весь код для окна, в котором вы работаете.
Однако, если вы сохраняете весь свой код в **глобальном пространстве имен** , вы можете столкнуться с проблемами с коллизиями, соглашениями об именах и т. Д., Особенно в крупных JS-приложениях / играх.
Давайте рассмотрим пример того, как использование только **глобального пространства имен** для разработки игры - плохая идея.
Итак, допустим, у нас есть игра, которая отслеживает те моменты, которые у игрока есть:
```
var points = 0;
```
Множество игр отслеживают точки, чтобы добавить конкурентное преимущество в игру. Просто введя эту строку в скрипт, мы создали переменную с именем _точки_ , которые могут отслеживать число очков , полученных пользователем.
И все хорошо и хорошо, но скажем, что у нас есть более продвинутый пользователь, играющий в игру. Этот пользователь знает, как смотреть на источник веб-страницы, и поэтому этот человек заглядывает в источник, стоящий за игрой JS, и понимает, что переменная _точек_ просто сидит там в **глобальном пространстве имен** . Злая ухмылка спускается по их лицу, когда они размышляют о точках, которые они могут достичь! Они решают, что они не хотят ждать, чтобы победить некоторых злодеев или разбить грибы или что у вас есть, чтобы набрать кучу очков. Они хотят получить очки сейчас! Ну, как звучит _квадриллион миллиардов миллионов_ точек ?! Таким образом, они загружают консоль в свой любимый браузер и просто набирают консоль:
```
points = 34750925489459203859095480917458059034;
```
Как только пользователь нажимает Enter, переменная _точек_ обновляется в игре. Теперь у пользователя есть действительно громоздкое и, вероятно, нереалистичное количество очков в игре, и он может похвастаться своим друзьям, что никто не может победить его потрясающий результат.
Итак, как мы можем предотвратить это? Именно здесь вступают в действие **частные пространства имен** .
## Частные пространства имен
**Частные пространства имен** позволяют разработчикам помещать свой код в разделы (или **пространства имен** ). Эти разделы работают независимо друг от друга, но могут читать и писать из **глобального пространства имен** .
Чтобы разложить это на более простые условия из сценария реальной жизни, скажем, вы работаете в офисном здании. У вас есть собственный офис, и вы видите других со своими офисами. Каждый офис заблокирован, и только тот, кто владеет офисом, имеет ключ к этому офису. Давайте также скажем, что у вас есть какой-то новый супер-замок, который делает ваш офис непроницаемым для любого другого человека в здании. Рассмотрим офисное здание как **глобальное пространство имен** и каждый офис как **частное пространство имен** . У вас нет доступа в чей-либо офис или у них нет доступа к вашим. Но каждый из вас имеет доступ к остальной части офисного здания, будь то кофе, схватка и т. Д. Каждый из вас может получить что-то из **глобального пространства имен** (или создать / изменить что-то там), но вы можете создавать или изменять / захватывать что-либо из офисов друг друга; вы можете создавать / изменять / захватывать из собственного **частного пространства** / офиса.
## Достижение частного пространства имен
Итак, как нам достичь этого **частного пространства имен** в JavaScript? Используйте анонимную функцию самоисполнения! Если вы не прочитали статью Ноа Стоукса, « [Самопроизвольные анонимные функции» или «Как писать чистый Javascript»](http://esbueno.noahstokes.com/post/77292606977/self-executing-anonymous-functions-or-how-to-write) , сделайте это сейчас. В этой статье мы подробно рассмотрим анонимные функции самоисполнения.
Давайте рассмотрим использование этой переменной _точек_ из ранее, но разделим ее на **частное пространство имен** :
```
//The most common way you'll see an anonymous self-executing function
(function () {
var points = 0;
})();
//This is just one of many more alternative ways to use an anonymous self-executing function
/*
!function () {
var points = 0;
}();
*/
```
Теперь, когда пользователь доберется до страницы, они не смогут открыть консоль в своем браузере и изменить значение переменной точек по своему усмотрению! Потрясающие!
## Пространство имен и документов
Вышеприведенный код использовался только для использования анонимной самоисполняющейся функции, чтобы дать коду собственное **частное пространство имен** . Имейте в виду, что пространства имен влияют только на JS-код (переменные / массивы / объекты / etc.), А не на код, который относится к самому документу.
Любой код в пространстве имен по-прежнему имеет одинаковый доступ к HTML-документу и CSS, как обычно в **глобальном пространстве имен** . Взгляните на следующие два примера кода. Они выполняют одну и ту же функциональность, и ни одна из них не является более выгодной или более эффективной, чем другая.
```
<script type="text/javascript">
(function () {
document.querySelector('body').style.background = 'blue';
})();
</script>
```
такой же как:
```
<script type="text/javascript">
document.querySelector('body').style.background = 'blue';
</script>
```
Имейте в виду, что это всего лишь один из способов использования пространств имен в приложениях JavaScript. Адаптируйте свой код к тому, что наилучшим образом соответствует ситуации.

90
guide/russian/javascript/tutorials/what-does-javascript-void-0-mean/index.md Normal file
View File

@@ -0,0 +1,90 @@
---
title: What Does JavaScript Void 0 Mean
localeTitle: Что такое JavaScript Пустота 0 Среднее значение
---
## Что такое JavaScript Пустота 0 Среднее значение
**Оператор void JavaScript вычисляет выражение и возвращает undefined** .
Использование консоли для проверки того же:
![ConsoleOutput](https://github.com/srawat19/-Guide_Images/blob/master/VoidConsole.PNG?raw=true)
**_Примечание_** : **void** независимо от любого переданного значения _всегда возвращает **undefined,** как показано выше_ . Но, **пустое с операндом 0 является предпочтительным** .
**Два способа использования операнда 0 -> void (0) или void 0.** Любой из них в порядке.
#### Когда использовать Javascript void (0)?
При щелчке по ссылке вы не хотите, чтобы браузер загружал новую страницу или обновлял одну и ту же страницу (в зависимости от указанного URL). Вместо этого выполните JavaScript, прикрепленный к этой ссылке.
#### Пример примера 1 с Javascript void (0):
```html
<html>
<body>
<a href="javascript:void(0);alert('Hello ! I am here')">Click Me</a>
</body>
</html>
```
#### Выход :
При нажатии на ссылку ClickMe появляется предупреждение:
![Output1](https://github.com/srawat19/-Guide_Images/blob/master/voidOutput1.PNG?raw=true)
#### Пример примера 2 с Javascript void (0):
```html
<html>
<body>
<a href="javascript:void(0)" ondblclick="alert('Hi,i didnt refresh the page')" )>Click Me</a>
</body>
</html>
```
#### Выход :
Когда вы дважды щелкните по ссылке, появится всплывающее предупреждение без обновления страницы.
#### Пример примера 3 с Javascript void (0):
```html
<html>
<body>
<a href="javascript:void(0);https://www.google.co.in/"
ondblclick="alert('Hello !! You will see me and not get redirected to google.com ')">Click Me</a>
</body>
</html>
```
#### Выход :
Когда вы дважды щелкните по ссылке, появится всплывающее предупреждение, и его закрытие также не будет перенаправлено на google.com.
#### Пример примера без Javascript void (0):
```html
<html>
<body>
<a href="https://www.google.co.in/" ondblclick="alert('Hello !! You will see me and then get redirected to google.com even if not needed')">Click Me</a>
</body>
</html>
```
#### Выход :
Когда вы дважды щелкните по ссылке, появится всплывающее предупреждение, и его закрытие будет перенаправлено на google.com.
#### Заключение :
Оператор **void** полезен, когда вам нужно предотвратить нежелательное обновление или перенаправление страницы. Скорее, выполните некоторую операцию javascript.
#### Дополнительная информация:
1) [Документы Mozilla](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void) 2) [Понимание пустоты 0](https://www.quackit.com/javascript/tutorial/javascript_void_0.cfm)

33
guide/russian/javascript/tutorials/write-reusable-javascript-with-functions/index.md Normal file
View File

@@ -0,0 +1,33 @@
---
title: Write Reusable JavaScript with Functions
localeTitle: Запись многоразового JavaScript с функциями
---
В JavaScript мы можем разделить наш код на многократно используемые функции, называемые функциями.
Вот пример функции:
```
function functionName() {
console.log("Hello World");
}
```
Вы можете `call` или `invoke` эту функцию, используя ее имя, за которым следуют скобки, например:
```
functionName();
```
Каждый раз, когда функция вызывается, она выводит сообщение «Hello World» на консоль dev. Весь код между фигурными фигурными скобками будет выполняться каждый раз, когда вызывается функция.
Вот еще один пример:
```
function otherFunctionName (a, b) {
return(a + b);
}
```
Мы можем `call` или `invoke` нашу функцию следующим образом:
```
otherFunctionName(1,2);
```
и он запустится и вернет нам возвращаемое значение.