Урок №1 - Основы

[N1kS]

Данная статья является первой часть курса уроков по JavaScript. В ней будут рассмотрены основные моменты языка JavaScript. В данной статье мы познакомимся с основными элементами языка JavaScript, к ним относятся:

1. Базовые типы: строки, числа, логические переменные.
2. Операторы.
3. Массивы.
4. Функции.
5. Регулярные выражения.
6. Циклы.

1. Базовые типы

let variableName; // объявление новой перемнной с именем 'variableName'
let str = ‘Hello world!!’; // строка
let a = 1; // целое число
let b = 1.3; // дробное число
let boolTrue = true; // истина
let bollFalse = false; // ложь

const myConst = 5; // объявление const задаёт константу, то есть переменную, которую нельзя менять
myConst = 10; // ошибка, константу имзенить нельзя

2. Операторы

2.1. Арифметические

К арифметическим оператором относятся:

1. + (сложение)
2. - (вычитаение)
3. * (умножение)
4. / (деление)
5. % (остаток от деления)

let a = 1;
let b = 2;
let c = a + b; // 3
let d = c * 2; // 6
let e = d / 3; // 2
let f = e % 2; // 0

let g = 1.5;
let h = 2.3;
let i = g + h; // 3.8

i++; // 4.8
i--; // 3.8

let str1 = "Hello";
let str2 = "World!";
let str3 = str1 + " " + str2; // "Hello World!"

2.2. Логические

1. && (и)
2. || (или)

if (5 > 3 && 5 < 6 ) {
	// условие верно, т.к. 5 больше 3 и 5 меньше 6
}

if (5 > 3 && 5 < 4) {
	// условие не верно, т.к 5 больше 3, но 5 не меньше 4
}

if (5 > 3 || 5 < 4) {
	// условие верно, т.к 5 больше 3 или 5 меньше 4
}

if (5 < 3 || 5 > 10) {
	// условие не верно, т.к 5 больше 3 и 5 меньше 10
}

2.3. Сравнение

1. == (равно без приведения типов)
2. === (равно с приведением типов)
3. != (не равно без приведения типов)
4. !== (не равно с приведением типов)
5. < (меньше)
6. > (больше)
7. <= (меньше или равно)
8. >= (больше или равно)

1 == 1; // true
1 == '1'; // true
1 === 1; // true
1 === '1'; // false, т.к. типы не совпадают

1 != 2; // true
1 != 1; // false
1 > 1; // false
1 >= 1; // true
2 > 1; // true
2 >= 1; // true
3 < 4; // true
3 < 3; // false
3 <= 3; // true

0 == false; // true
0 === false; // false, т.к. типы не совпадают

3. Массивы

В JavaScript индексация массива начинается с 0, то есть первый элемент в массиве имеет индекс 0, второй 1 и т.д.

3.1 Создание и изменение массива

let arr = []; // создание пустого массива

let arr = [1, 2, 3, 'Bob', 4, 5, 678.95]; // создание массива с элементами

arr[0]; // 1
arr[2]; // 3
arr[3]; // "Bob";
arr[6]; // 678.95

arr[3] = "RAGE";
arr[3]; // "RAGE"
arr[2] = 176;
arr[2]; // 176

3.2 Авто-длина length

У каждого массива есть свойство length, которое автоматом меняется при каждом обновлении массива. Длина массива - это не количество элементов, а максимальный целый ключ + 1:

a = [];
a[0] = 1;
a[1000] = 1;
a.length; // в массиве всего 2 элемента, но результат будет равен 1001, т.к. максимальный целый ключ - 1000

3.3 Перебор элементов

let a = [1, 2, 3, 4]
for (let i = 0; i < a.length; i++) {
	console.log(a[i]); // выведет каждое значение массива
}

a.forEach(function(item, index, arr) { // item - значение, index - номер(индекс), arr - массив, который переберается
	console.log(item); // альтернативный вариант перебора массива.
});

3.4 Добавление и удаление элементов в массив

let arr = [3, 5, 7, 9]; 
arr.push(11); // добавит в конец массива число 11
arr.pop(); // удалит с конца массива последний элемент
arr.pop(); // удалит с конца массива последний элемент
console.log(arr); // выведет все значения массива, в данном случае [3, 5, 7]

arr.unshift(1); // добавит в начало массива число 1
console.log(arr); // выведет все значения массива, в данном случае [1, 3, 5, 7]
arr.shift(); // удалит с начала массива первый элемент
console.log(arr); // выведет все значения массива, в данном случае [3, 5, 7]

Об остальных методах для работы с массива вы можете прочитать здесь.

4. Функции

4.1 Создание функция

function имя(параметры) {
 // какой-то код
}

function summ(a, b) {
  return a + b; // функция вернет результат суммы числа a и b
}

let c = summ(1, 5); // 6

4.2 Функции - объекты

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

function f() {
}
f.test = 6
console.log(f.test) // 6

4.3 Параметры функции

Функции можно запускать с любым числом параметров. Если функции передано меньше параметров, чем есть в определении, то отсутствующие считаются undefined.

function division(a, b = 2) {
  return a / b;
}

let a = division(10, 5); // вернет 2, т.к. мы передали оба параметру в функцию
let b = division(10); // вернет 5, т.к. мы передали только один параметр в функцию, а b = 2, если он не передан

4.4 Работа с неопределенным числом параметров

function sayHi() {
  for (var i = 0; i < arguments.length; i++) {
    console.log("Привет, " + arguments[i]);
  }
}

sayHi("Винни", "Пятачок"); // 'Привет, Винни', 'Привет, Пятачок'

Частая ошибка новичков – попытка применить методы Array к arguments. Это невозможно:

function sayHi() {
  var a = arguments.shift(); // ошибка! нет такого метода!
}

sayHi(1);

Дело в том, что arguments – это не массив Array.

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

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

function Foo() {
	var args = [];
	for (var i = 0; i < arguments.length; i++) {
  		args[i] = arguments[i];
	}
    console.log(args); // [1, 2, 3, 4];
}

Foo(1, 2, 3, 4);

5. Регулярные выражения

Регулярные выражения в javascript имеют особую краткую форму и стандартный PCRE-синтаксис. Работают они через специальный объект RegExp. Кроме того, у строк есть свои методы search,match,replace, но чтобы их понять - разберем-таки сначала RegExp. В дальнейшем на эту тему будет написан отдельный урок, в котором все будет объяснено более подробно.

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

/pattern/флаги
new RegExp("pattern"[, флаги])

pattern - регулярное выражение для поиска (о замене - позже), а флаги - строка из любой комбинации символов g(глобальный поиск), i(регистр неважен) и m(многострочный поиск).

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

var reg = /ab+c/i
var reg = new RegExp("ab+c", "i")

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

// эквивалентны
re = new RegExp("\\w+")
re = /\w+/

При поиске можно использовать большинство возможностей современного PCRE-синтаксиса.

6. Циклы

6.1 Цикл while с предоусловием

let i = 0;

while (i < 10) { // цикл будет увеличивать значение перемнной i на 10 до тех пор, пока проверка i < 10 не вернет false
  i++;
}

6.2 Цикл while с пост условием

Цикл, описанный, таким образом, сначала выполняет тело, а затем проверяет условие. 

let i = 0;

do {
	i++;
} while (i < 10);

Таким образом, цикл выполненный в разделе 6.1, после окончания итераций присвоит переменной i значение 10, а цикл выполненный в разделе 6.2, после окончания итерация присвоит переменной i значение 11.

6.3 Цикл for

Чаще всего применяется цикл for. Выглядит он так:

for (начало; условие; шаг) {
  // тело цикла
}

Пример цикла, который выведет значение для i от 0 до 10 включительно:

for (let i = 0; i <= 10; i++) {
	console.log(i);
}

В данном цикле:

• Начало: i = 0.
• Условие: i <= 10.
• Шаг: i++.
• Тело цикла: console.log(i), т.е. код внутри фигурных скобок (они не обязательны, если только одна операция)

6.4 Прерывание цикла break

Выйти из цикла можно не только при проверке условия но и, вообще, в любой момент. Эту возможность обеспечивает директива break. Например, следующий цикл остановиться если значение переменной i будет больше 50.

for (let i = 0; i <= 100; i++) {
	if (i > 50) {
    	break;
    }
}

Директива continue прекращает выполнение текущей итерации цикла.

Она – в некотором роде «младшая сестра» директивы break: прерывает не весь цикл, а только текущее выполнение его тела, как будто оно закончилось.

Её используют, если понятно, что на текущем повторе цикла делать больше нечего. Например, следующий цикл использует continue, чтобы не выводить нечетные числа:

for (let i = 0; i <= 10; i++) {
	if (i % 2 != 0) {
      continue;
    }
  	console.log(i); // выведет число, если оно четное.
}

 

Edited January 4, 2017 by N1kS

[M4rK]

Хороший урок! Для новичков пойдет.

[Danil_Valov]

Наверное, стоит немного расширить описание:

...
let str = 'Hello world!!'; // строка
let strWithVariable = `Давно хотел сказать: ${str}`; // строка с переменной (на выходе получим строку 'Давно хотел сказать: Hello world!!')
...

 

[M4rK]

Будет второй урок? Очень интересно было бы почитать и изучить материал!)

[Leone]

В принципе это мне ясно, мне не ясно как структуру создавать...    

[Siegfried]

1 час назад, Leone сказал:

В принципе это мне ясно, мне не ясно как структуру создавать...    

Структуру чего?

[Leone]

6 часов назад, Siegfried сказал:

Структуру чего?

сервера.

[Siegfried]

1 час назад, Leone сказал:

сервера.

Если я вас правильно понял, то ответ на ваш вопрос здесь.

[Leone]

11 час назад, Siegfried сказал:

Если я вас правильно понял, то ответ на ваш вопрос здесь.

Нет я про wiki. Там нет ничего про структуре, отладке и т.д.

[Danil_Valov]

5 часов назад, Leone сказал:

Нет я про wiki. Там нет ничего про структуре, отладке и т.д.

На самом деле, каждый разработчик выбирает структуру проекта для себя, ориентируясь на свои привычки в других языках программирования, свой опыт и потребности проекта. Например, есть проекты, на которых абсолютно не требуется консоль - весь UX реализован через кнопки на клавиатуре на клиенте (т.е. вместо того, чтобы вводить команду `/eat` для пополнения уровня сытости, находясь в закусочной, игрокам нужно всего-лишь нажать кнопку `Enter` или `F`, находясь рядом с прилавком), в результате, на таких проектах не требуется папка `commands` абсолютно.

 

По поводу какой-то базовой структуры - я планировал на github создать репозиторий, где бы была более-менее универсальная структура проекта с уже включёнными Mongoose ODM (для взаимодействий с MongoDB в качестве базы данных), unit-тестами, конфигом для сборки docker'а и другими полезными плюшками. Но сейчас это сделать невозможно, т.к. мультиплеер ещё сыроват, и если сейчас сделать такую структуру - то придётся её значительно переписывать после каждого обновления, что не делает её универсальной.

 

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

Edited January 14, 2017 by Danil_Valov