GreenDocs

Меня зовут Григорий Кощеев, я занимаюсь программированием более 10 лет (в основном веб-программированием). Какое-то время я преподавал дисциплины, связанные с программированием в НГУЭУ. На этом сайте я публикую некоторые статьи, связанные с программированием и администрированием. В основном я пишу статьи для начинающих программистов, так как есть очень много нюансов программирования, которые очевидны всем опытным программистам, но для начинающих они нигде не описаны (например, подробности про индентацию)

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

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

Основы HTML и CSS
- Основы
- Экранная типографика
- Свойство display
- Свойство position
Основы JS
- Основы JavaScript
- Логические операторы
- Цикл while
- Цикл for
- Массивы
- Объекты
- Функции
- Методы
- Строки
- Даты
JS в браузере
- Основы работы в браузере, ч.1
- Основы работы в браузере, ч.2
- Обработка событий, ч.1
- Обработка событий, ч.2
- События клавиатуры
- События мыши
- События сенсорного экрана
- Технология AJAX
Разработка приложений
- Использование внешних библиотек на примере Lodash
- Использование обещаний
- Использование firebase, ч.1
- Использование firebase, ч.2
- Аутентификаиця через firebase
- Безопасность данных при использовании firebase

Принцип работы JS в браузере.
Добавление JS кода в файл.
Основы языка: чувствительность к регистру, точка с запятой комментарии.
Оператор document.write со строковым литералом в качестве аргумента.
Использование кодировки UTF-8 для вывода русского текста.
Использование сервиса jsfiddle для быстрого тестирования кода.

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

Приложение для деканата. Студент родился в 1995 году. Сколько лет ему исполняется в 2018 году?
Интернет-магазин. Покупатель заказал 4 книги по цене 240 руб каждая. Подсчитать стоимость заказа.
Интернет-магазин. Покупатель заказал 6 книги по цене 240 руб каждая. За большой заказ ему положена скидка 5%. Посчитать итоговую цену.
Приложение для ТСЖ, выборы председателя. За победителя проголосовало 132 человека, за проигравшего 68 человек (других кандидатов не было). С процентов голосов получил победитель?
Приложение для торгового автомата. Дана сумма покупки: 22 руб и сумма, оплаченая покупателем: 50 руб. Сдача выдается монетами. Посчитать количество монет 10 руб, 5 руб, 2 руб, 1 руб, 50 коп, 10 коп, 5 коп для выдачи покупателю.
Приложение для ТСЖ. Тарифы: холодная вода 17,68 руб, горячая вода 103,10 руб, водоотведение 13,57 руб. Вывести итоговую сумму оплаты за водоснабжение за месяц при следующих показаниях счетчиков:

Холодная вода	265	253
Горячая вода	165	160

Оператор условия if-else
Индентация блоков.
Логические операции сравнения, строгого сравнения, больше, меньше
Присвоение переменной логического значения.

Выборы председателя ТСЖ. Задано количество голосов за Иванова и за Петрова (например, за Иванова проголосовало 120 человек, за Петрова 134 человека) Вывести имя победителя.
Стоимость подачи такси составляет 200 руб, в стоимость включено 15 минут. Далее — 5 руб/мин. Рассчитать стоимость поездки для заданного количества минут.
Дано количество товара и его цена. В случае, если сумма заказа больше 1000 руб, покупателю предоставляется скидка 5%. Вывести итоговую сумму к оплате.
Первый покупатель заказал 200 журналов по цене 150 руб/шт, ему была сделана скидка 4%. Одновременно, второй покупатель заказал 150 книг по цене 240 руб/шт, ему была сделана скидка 6%. По внутренним правилам компании первым отгружается заказ на большую сумму. Вывести, заказ какого покупателя следует выполнить первым.
Дана цена товара и количество купленных единиц. Если заказ больше 1000 руб, покупателю предоставляется скидка 2%, если больше 5000 руб — 5%, если больше 10000, то 10%. Рассчитать итоговую сумму к оплате.
Приложение для банка. Дана ставка процента годовых. Дана ставка рефинансирования. По закону, если ставка по депозиту превышает ставку рефинансирования, плюс 5 процентных пункта, то доход по вкладу облагается налогом 13% с суммы превышения. Вклад был открыт в течение 90 дней (без промежуточно капитализации). Рассчитать сумму, которую банк должен выдать вкладчику, если сумму налога банк удерживает самостоятельно.
Дана длина и ширина прямоугольной комнаты, высота потолка. Дана стоимость отделки стен за м², стоимость покрытия пола м². Рассчитать стоимость отделки стен, стоимость покрытия пола, указать, что из этого дороже. Площадью дверей и окон пренебречь.
В подъезде два лифта. Дан текущий этаж вызова. Дана позиция (номер этажа) первого и второго лифта. Какой из лифтом ближе?

Цикл while.
Цикл do while.

Данные задачи предполагают только использование конструкций while и do while. Использование цикла for рассматривается в следующей части.

Вывести ряд чисел 1-10, 0-9.
Вывести таблицу квадратов.
Вкладчик имеет на счету 20 000 руб. Вклад под 7% годовых. Капитализация процентов в конце каждого месяца. Через сколько месяцев сумма вклада превысит 22 000 руб?
Базовая станция имеет координаты 10; 10 км. Зона действия 8 км. Сгенерировать случайную точку в квадрате 20x20 км так, чтобы она находилась в зоне действия БС.
Сгенерировать координаты двух слонов на шахматной доске так, чтобы они находились на разных диагоналях.

Цикл for.
Вложенные циклы.
Оператор break.
Оператор continue.

Вывести ряд чисел 1-10, 0-9.
Вывести таблицу кубов.
Вывести таблицу умножения.
Даны координаты шахматного ферзя. Вывести все точки, куда он может сходить.
Вывести координаты клеток шахматной доски + цвет.
Пользователь положил в банк 100 000 руб на начало января 2016 года под 8% годовых. Вклад на 3 года, капитализация процентов в конце каждого месяца. Вывести таблицу по годам и месяцам, сколько на счету у пользователя в конце каждого месяца.
Аналогично предыдущему заданию, но в случае, когда сумма превышает 110 000 руб, пользователь снимает деньги и закрывает вклад. Вывести таблицу по годам и месяцам за тот период, пока счет еще был в банке, указать в каком году и каком месяце пользователь закрыл вклад.

Основы массивов.
Обращение по индексу (чтение и запись).
Свойство length.
Цикл for для перебора элементов массива.

Дан массив с суммами вкладов клиентов банка. Данный пример можно использовать в заданиях 1-8.

[
]

Найти общую сумму вкладов.
Найти среднюю сумму вклада.
Найти максимальный вклад.
Найти минимальный вклад.
Найти номера записей с максимальной суммой вклада.
Найти первый по списку вклад, сумма которого больше 30 000 руб.
Посчитать количество вкладов, сумма которых больше средней.
Увеличить на 5% сумму вкладов, текущий баланс которых больше 10 000.
Дано поле 6x6. 0 — поле доступно для хода, поле занято стеной, 2 — поле, где находится игрок. Определить координаты игрока. Определить, в каких направлениях игрок может двигаться. Определить, на сколько клеток игрок может двигаться вниз.

Основы объектов.
Обращение по индексу (чтение и запись).
Проверка существования свойства.
Организация цикла по свойствам объекта.

Дан обеъект с данными населения стран мира.

{
    "Бангладеш": 167933994,
    "Бразилия": 210059050,
    "Вьетнам": 93402400,
    "Египет": 98789871,
    "Индия": 1361248000,
    "Индонезия": 269479916,
    "КНР": 1394323000,
    "Мексика": 133140936,
    "Нигерия": 200004434,
    "Пакистан": 213238422,
    "Россия": 146880432,
    "США": 333336805,
    "Филиппины": 107143250,
    "Эфиопия": 111045113,
    "Япония": 126823978
}

Вывести названия всех стран.
Вывести название страны с самым большим и самым маленьким (из перечисленных) населением.
Посчитать среднее значения населения из списка.

Дан обеъект с данными населения и площади стран мира.

[
    {
        "name": "Бангладеш"
        "population": 167933994,
        "square": 144000
    },
    {
        "name": "Бразилия"
        "population": 210059050,
        "square": 8515770
    },
    {
        "name": "Вьетнам"
        "population": 93402400,
        "square": 331210
    },
    {
        "name: "Египет",
        "population": 98789871,
        "square": 1001450
    },
    {
        "name: "Индия",
        "population": 1361248000,
        "square": 3287263
    },
    {
        "name: "Индонезия",
        "population": 269479916,
        "square": 1919440
    },
    {
        "name: "КНР",
        "population": 1394323000,
        "square": 9598962
    },
    {
        "name: "Мексика",
        "population": 133140936,
        "square": 1972550
    },
    {
        "name: "Нигерия",
        "population": 200004434,
        "square": 923768
    },
    {
        "name: "Пакистан",
        "population": 213238422,
        "square": 803940
    },
    {
        "name: "Россия",
        "population": 146880432,
        "square": 17125191
    },
    {
        "name: "США",
        "population": 333336805,
        "square": 9519431
    },
    {
        "name: "Филиппины",
        "population": 107143250,
        "square": 299764
    },
    {
        "name: "Эфиопия",
        "population": 111045113,
        "square": 1104300
    },
    {
        "name: "Япония",
        "population": 126823978,
        "square": 377944
    }
]

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

Система управления изменениями Git позволяет работать с любой текстовой информацией — программный код, разметка HTML, также можно использовать для контроля изменений в тексте на естественном языке, если он разбит на строки. Двоичные файлы (изображения, видео и т.п.) также можно хранить в рамках Git-репозитория, но для них Git не сможет отслеживать изменения внутри файла.

GitHub представляет собой сервис для размещения Git-проектов с элементами социального сервиса. GitHub позволяет бесплатно размещать свободные проекты и осуществлять их совместную разработку. Программное обеспечение считается свободным, если пользователь имеет не только доступ к его исходному коду, но и возможность его модифицировать. Обычно для того, чтобы сделать проект свободным, нужно разместить в корне проекта файл с одной из свободных лицензий (GPL, BSD, Apache, MIT).

Будем рассматривать работу на примере использования сервиса GitHub и программы TortoiseGit для Windows.

Для работы TortoiseGit вам необходимо установить:

Регистрация на сайте GitHub.com является достаточно тривиальной. Для регистрации используйте ссылку Sign Up на главной странице.

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

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

При создании репозитория выберите имя, соответствующие по смыслу названию проекта на английском языке. Например, computers-store, account-calculator.

Режим доступа укажите Public, галочку Initialize this repository with a README оставьте выключенной. После этого у вас создан пустой репозиторий, где пока нет ни одного файла.

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

Используя проводник Windows перейдите в директорию, где должен быть размещен исходный код проекта. Откройте меню нажатием правой кнопкой мыши. При правильной установке TortoiseGit у вас должен появиться пункт Git Clone....

Введите адрес резпозитория для клонирования. Адрес можно узнать на странице репозитория на GitHub. Обратите внимание, что адрес репозитория и адрес страницы репозитория на GitHub не одно и то же.

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

После того, достигните определенного завершенного этапа, например, достигли работоспособности какой-то отдельной страницы или модули (даже, может быть, с ошибками), нужно зафиксировать набор изменений. Для этого осуществляется действие commit.

Для этого откройте директорию с исходным текстом проекта. Вызовите меню правой кнопкой мыши, выберите пункт Git Commit -> "master".

Для фиксации изменений:

(1) отметьте нужные файлы с изменениями (в некоторых случаях имеет смысл фиксировать изменения не всех файлов, например, чтобы разбить одно измнение на несколько коммитов),
(2) введите описание изменений; например, «Реализована форма регистрации пользователя» или «Исправлена ошибка на странице поиска»,
(3) нажмите Commit,
после выполнения Commit нажмите кнопку Push для передачи изменений на сервер.

Обновите страницу на GitHub. На странице должны появиться файлы проекта.

Будем рассматривать работу на примере использования сервиса GitHub и программы TortoiseGit для Windows.

Для работы TortoiseGit вам необходимо установить:

Для фиксации изменений:

(1) отметьте нужные файлы с изменениями (в некоторых случаях имеет смысл фиксировать изменения не всех файлов, например, чтобы разбить одно измнение на несколько коммитов),
(2) введите описание изменений; например, «Реализована форма регистрации пользователя» или «Исправлена ошибка на странице поиска»,
(3) нажмите Commit,
после выполнения Commit нажмите кнопку Push для передачи изменений на сервер.

Обновите страницу на GitHub. На странице должны появиться файлы проекта.

Что нужно знать:

текущая директория (working directory) — используется для упрощения обращения к файлам из командной строки,
текущий диск (working disk),
на каждом диске может быть своя текущая директория,
текущая директория обозначается точкой,
родительская директория обозначается двумя точками,
команда cd изменяет текущую директорию, но не текущий диск,
C: — изменения текуего диска, где C — буква того диска, который требуется сделать текущим,
команда dir выводит содержимое текущей диектории текущего диска,
текущая директория текущего диска отображается в строке ввода,
из текущей директории можно запуска exe и bat файлы путем простого указания их имени,
также можно запуска команды из директории, указанной в системной переменной PATH.

Проверочные вопросы:

В строке ввода вы видете C:\users\myuser. Вы вводите cd D:\mydir. Но в строке ввода по-прежнему C:\users\myuser. Почему?
Ваша текущая директория C:\users\myuser\books. Диск C: текущий. Как проще всего сделать текущей директорию C:\users\myuser?
Ваша текущая директория C:\users\myuser. Диск C: текущий. Как запустить файл yiic.bat, который находится в директрии C:\users\myuser\mysite?

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

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

Кроме того, существуют отдельные языки программирования (Python и несколько производных от него языков), где индентация является обязательной и непосрдественно влияет на выполнение программы. В большинстве языков программирование индентация не является обязательной, однако настоятельно рекомендуется всеми руководствами по написанию программного кода.

Если вы выделяете блок кода (if, while, foreach и т.п.), то весь код, который находится внутри блока, должен быть на один таб правее, чем основной код.

if ($x) {
    somefunction();
}

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

if ($x) {
    somefunction;
    if ($y) {
        anotherfunction();
    }
    nextfunction();
}

Скобка, которая закрывает блок, должна быть на том же уровне, что и начало блока. Только обратите внимание, что речь идет не про скобку, открывающую блок, а сам блок (в примере выше это будет if).

Если у нас есть два равноправных блока, например if-else, то они будут на одном уровне.

if ($x) {
    somefunction();
} else {
    anotherfunction();
}

Таких блоков может быть сколько угодно:

if ($x < 0) {
    somefunction();
} else if ($x > 0) {
    anotherfunction();
} else {
    moreanotherfunction();
}

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

if ($x < 0) {
    somefunction();
} else if ($x > 0) {
    anotherfunction();
} else {
    if ($y > 0) {
        nextfunction();
    } else {
        extrafunction();
    }
}

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

echo $x;
echo $y;
echo $z;

Даже если они внутри блока:

if ($x) {
    echo $x;
    echo $y;
    echo $z;
}

Если вам нужно добавить отступ нажимаете клавишу Tab на клавиатуре. Если вам нужно сдвинуть уже существующий блок кода вправо, то выделяете блок кода, нажимаете клавишу tab. Если влево, выделяете, нажимаете Shift+Tab. Это работает в любом редакторе, предназначенном для работы с кодом. Редко в каких-то местах может не работать. Использовать для индентации клавишу пробел крайне не рекомендуется.

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

callMyFunc(here-some-very-long-value-for-argument-1-of-the-function, here-some-very-long-value-for-argument-2-of-the-function, here-some-very-long-value-for-argument-3-of-the-function)

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

callMyFunc(
    here-some-very-long-value-for-argument-1-of-the-function,
    here-some-very-long-value-for-argument-2-of-the-function,
    here-some-very-long-value-for-argument-3-of-the-function
)

Кроме того, рекомендуется помещать каждый аргумент в отдельную строку. Даже если какой-то из аргументов короткий.

callMyFunc(
    x,
    here-some-very-long-value-for-argument-1-of-the-function,
    here-some-very-long-value-for-argument-2-of-the-function,
    y,
    here-some-very-long-value-for-argument-3-of-the-function
)

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

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

при нажатию на клавишу Tab текстовый редактор вставляет специальный символ табуляции (один),
при нажатии на клавишу Tab текстовый редактор вставляет некоторое число пробелов (обычно 4, 8 или 2). Конкретный способ выбирается в настройках текстового редактора.

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

GreenDocs

Обо мне

Copyright

Разработка приложений на JavaScript

Основы языка, переменные, базовые маетматические операторы

Темы для изучения

Задания для закрепления

Логические операторы, логические вычисления

Темы для изучения

Задачи для закрепления

Цикл while

Темы для изучения

Задачи для закрепления

Цикл for

Темы для изучения

Задачи для закрепления

Массивы

Темы для изучения

Задачи для закрепления

Объекты

Темы для изучения

Задачи для закрепления

Использование плоских объектов

Использование массива объектов.

Использование Git и GitHub для разработки

Задачи Git

Установка TortoiseGit

Регистрация на GitHub

Создание проекта на GitHub

Клонирование репозитория.

Фиксация изменений

Использование Git и GitHub для разработки

Задачи Git

Установка TortoiseGit

Регистрация на GitHub

Создание проекта на GitHub

Клонирование репозитория.

Фиксация изменений

Основые использования командной строки в среде Windows

Что такое индентация?

Использование индентации

Перенос в рамках одной команды

Стандарты на индентацию