Руководство по написанию кода
Стандарты для разработки гибкого, надежного и поддерживаемого кода на HTML и CSS.
Оглавление
- Синтаксис
- Обязательные компоненты разметки
- Подключение CSS и JavaScript
- Порядок атрибутов
- Разное
- Синтаксис
- Селекторы
- Порядок объявления
- Быстрое чтение
- Сокращенная запись
- Не используйте @import
- @media
- Свойства с префиксами
Золотое правило
Соблюдайте предложенные здесь соглашения. Если вы нашли ошибку, сообщите об этом. Если у вас есть что дополнить или вы хотите принять участие в разработке этих соглашений, пожалуйста, создайте issue на GitHub.
Вне зависимости от количества разработчиков, код в любом проекте должен быть написан так, словно его писал один человек.
Синтаксис
- Теги и атрибуты пишите строчными буквами.
- Используйте отступы с двумя пробелами. Разместите файл .editorconfig (универсальные базовые настройки редактора) в папке проекта и установите его поддержку в редакторе.
- Вложенные элементы должны иметь отступ. Некоторые теги («», к примеру: a , span , small , strong , em , i , kbd , code ) допустимо не переносить на новые строки.
- Значения атрибутов всегда пишите в двойных кавычках.
- Не добавляйте слэш ( / ) в конец одиночного тега.
- Не пропускайте необязательные закрывающие теги (например, </li> или </body> ).
Обязательные компоненты разметки
- Всегда указывайте <!DOCTYPE html>
- Указывайте подходящий lang для <html>
- В самом начале секции <head> указывайте кодировку (обычно UTF-8 )
Подключение CSS и JavaScript
При подключении CSS и JavaScript файлов не указывайте атрибут type ( text/css для стилей и text/javascript для скриптов являются значениями по умолчанию).
CSS-файлы подключайте в <head> , JavaScript-файлы — перед </body>
Порядок атрибутов
Очередность атрибутов должна быть единообразной.
Указывайте атрибуты data-* , aria-* , role и логические атрибуты последними.
Разное
- Документ должен проходить проверку на валидность.
- Разделяйте крупные фрагменты разметки пустыми строками,
- Оставляйте закомментированные фрагменты разметки только если это блоки, выводимые по условию (например, для авторизованных посетителей).
- Для тегов <img> должны быть указаны размеры (без единиц измерения, то есть, в пикселях).
Синтаксис
- Используйте отступы с двумя пробелами. Разместите файл .editorconfig (универсальные базовые настройки редактора) в папке проекта и установите его поддержку в редакторе.
- Селекторы, объявления и значения пишите строчными буквами.
- При группировке селекторов пишите каждый селектор на отдельной строке.
- До и после комбинаторов в селекторах ставьте пробел (пример: .foo > .bar ).
- Оставляйте один пробел перед открывающейся фигурной скобкой. После открывающей фигурной скобки ставьте перенос строки.
- Пишите закрывающуюся фигурную скобку на новой строке и на том же уровне отступа, что её селектор.
- Оставляйте один пробел после : для каждого объявления. Не ставьте пробел перед двоеточием.
- Каждое объявление пишите на отдельной строке.
- Завершайте все объявления точкой с запятой.
- Для свойств со множественными значениями оставляйте пробел после каждой запятой (см. box-shadow ).
- Не оставляйте пробелов после запятых внутри значений rgb() , rgba() , hsl() , hsla() , или rect() .
- Добавляйте начальный ноль для значений (пример: 0.5 вместо .5 ).
- Все 16-ричные значения записывайте строчными буквами (пример: #fff вместо #FFF ).
- Сокращайте 16-ричные значения везде, где это возможно (пример: #fff вместо #ffffff ).
- Всегда берите в кавычки значения атрибутов внутри селектора (пример: input[type=»text»] ).
- Опускайте единицы измерения там, где это возможно (пример: margin: 0; вместо margin: 0px; ).
Селекторы
- Используйте классы.
- Используйте короткие селекторы — избегайте составных селекторов (если не используете именование по БЭМ, составные селекторы допустимы).
- Избегайте тегов в селекторах.
- Записывайте имена классов строчными буквами и используйте дефис — в местах разделения слов (не используйте как разделитель слов один символ нижнего подчеркивания, не используйте camelCase).
- Используйте английский язык. Не используйте транслит.
- Избегайте сокращений. Смотрите короткий словарь допустимых сокращений.
- Придумывайте короткие и ёмкие имена. (см. слова, часто используемые в CSS-классах)
- Имя класса должно отвечать на вопросы «Что это?» или «Зачем это нужно?» и не должно отвечать на вопрос «Как это выглядит?», если только это не дополнительный модифицирующий класс.
- Используйте имена классов с префиксом .js-* для работы с JavaScript. Такие классы должны отсутствовать в CSS.
Используйте БЭМ-именование, если знакомы с этой методологией.
Порядок объявления
Объявления логически связанных свойств должны быть сгруппированы в следующем порядке:
- Позиционирование
- Блочная модель и размеры
- Текстовые свойства
- Отображение
- Остальное
- Плавные переходы, анимация
Позиционирование может удалить элемент из нормального потока документа и переопределить блочную модель связанных стилей, поэтому указывайте его первым. Блочная модель диктует размеры и расположение компонента, пишите ее второй.
В примере кода группы правил разделены пустыми строками. Делать такие разделители не обязательно.
Быстрое чтение
Оставляте пустую строку перед селектором или группой селекторов.
Работая с CSS-препроцессорами, оставляйте пустую строку перед любым вложенным селектором и @media .
Сокращенная запись
Избегайте сокращенных объявлений. К примеру, если нужно задать только нижний внешний отступ, пишите margin-bottom: 10px; вместо margin: 0 0 10px;
Не используйте @import
По сравнению с тегом <link> правило @import работает медленнее и может вызвать иные непредвиденные проблемы. Не используйте @import , используйте альтернативные подходы:
- Компилируйте ваш CSS-код в один файл с помощью препроцессоров
- Склеивайте ваши CSS-файлы любым другим способом
- Используйте несколько тегов <link>
@media
Помещайте media queries настолько близко к соответствующим наборам правил, насколько это возможно. Не объединяйте их в отдельную таблицу стилей, не помещайте их в конце файла.
Ставьте пробелы вокруг полукруглых скобок.
Ставьте пробел перед указанием значения в условии.
Свойства с префиксами
Оставляйте отступы для каждого свойства так, чтобы значения выстраивались в вертикальную линию.
Не пишите свойства с вендорными префиксами вручную. Используете Autoprefixer в рамках автоматизации или его он-лайн сервис.
Программирование с нуля
Данная статья описывает основные конструкции в программировании и предназначена для тех, кто хочет в этом разобраться. Но статья не описывает все нюансы, потому что их слишком много. Если описывать их все, будет очень нудно и непонятно.
Использовать будем си-подобный синтаксис, то есть подобный языку си, но не будем вникать в заголовочные файлы, указатели и другие особенности относительно низкоуровневых языков, перейдём на синтаксис более высокоуровневых языков, которые сделают рутинную работу за нас. А конкретно, будем использовать синтаксис языка Java. Добро пожаловать под кат.
Двоичная система счисления
Числа в двоичной системе счисления состоят всего из двух знаков. Нуля и единицы. 00000001 – число один. 00000010 – число два. 00000100 – число 4. Как вы можете заметить, когда единица смещается влево, число увеличивается в два раза. Чтобы получилось число 3, необходимо написать 00000011. Таким образом можно составить все необходимые числа. В данном примере мы использовали двоичное число с восемью знаками, иначе говоря число восьмиразрядное. Чем больше у числа разрядов, тем большее оно может вместить значение. Например, восьмиразрядное число вмещает максимальное значение 255, если считать ноль, тогда 256, а в программировании ноль считается всегда. Если увеличить разряд на один, получится девятиразрядное число и его вместимость увеличится в два раза, то есть станет 512. Но так в программировании никогда не делается и обычно каждая следующая разрядность увеличивается вдвое. Один разряд, потом 2 разряда, потом 4 разряда, потом 8 разрядов, потом 16 разрядов, потом 32 разряда и далее.
Шестнадцатеричная система счисления
Всё аналогично двоичной, только вместо нулей и единиц участвуют цифры от 0 до 15. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, где A – 10, B – 11, C – 12, D – 13, E – 14, F – 15.
Знак минус в программировании
Знак минус в двоичной системе счисления обозначается единицей в самом старшем разряде. Конечно же если число может быть минусовым (да, да, в программировании типы цифр бывают неминусовыми и включающим числа со знаком минус). 10000000 – число -1. Это не число -0, потому что минус нулей не бывает, то есть отрицательные числа смещаются влево на один. А вообще, в разных языках программирования может быть разное представление отрицательных чисел, но вам это знание вряд ли пригодится, поэтому пока что думайте, что всё так, как я объяснил.
Буквы и знаки
Буквы, знаки, смайлики и так далее обозначаются также числами. Буква А может быть числом 00000001 или любым другим, или даже комбинацией чисел в зависимости от кодировки символов. Кодировок много.
Типы данных
В программировании есть типы данных. Числовые, такие как 233, которые разобрали выше. Называются почти везде int, от слова integer. С плавающей запятой, такие как 198,76, называются почти везде float. У букв тип char, у строк тип String. Тип bool имеет два значения – истина (true) и ложь (false). У этого типа реализация в разных языках разная, но самая простая, когда ноль — значит ложь, а любое другое число истину. Нестандартные типы данных, такие как числа с фиксированной запятой, рассматривать не будем.
Применение
Прежде чем использовать числа в программировании их нужно объявить, то есть сказать с помощью языка программирования, что они существуют.
Это стандартное объявление примитивного типа.
Сначала пишем тип, потом имя переменной, то есть нашего числа. Всегда заканчиваем наше выражение, да и любое, точкой с запятой.
Теперь мы можем использовать переменную по её имени.
Здесь мы присвоили переменной значение. В отличии от математики в программировании = значит взять значение справа и присвоить переменной слева. = — это знак/оператор присвоения.
Можно объединить объявление и присвоение, то есть сразу инициализировать переменную.
Буквы выделяются одинарными кавычками, строки выделяются двойными кавычками. Числа типа int не выделяются.
К числам с плавающей запятой одинарной точности в конце добавляется f.
К числам с плавающей запятой двойной точности ничего не добавляется.
Операторы
С помощью операторов можно складывать, вычитать и делать много других операций с переменными. Операторами являются +, -, *, / и другие. Да даже; является оператором, говорящим, что выражение завершено.
После того как мы записали наше выражение, например сложения,
получается значение. Но так как оно ни одной переменной не присваивается, оно исчезает. Чтобы присвоить значение переменной используется специальный оператор присвоения, который коротко описан выше.
Повторим ещё раз. Он берёт значение со своей правой стороны и присваивает его переменной в левой стороне. Это оператор =, и он не имеет ничего общего со знаком равно из математики.
Также у нас есть логические операторы, такие как < (меньше), > (больше), <= (меньше либо равно), == (равно), && (и), || (или) и другие.
Они сравнивают значения или выражения слева и справа, а после выдают истинность в виде типа bool, то есть true или false, и это значение также можно присвоить.
Оператор && (и) сравнивает два значения типа bool. Если слева true и справа true, тогда этот оператор возвращает значение true. В других случаях false.
Оператор || (или) возвращает истинность, если хоть одно значение истинно (true).
Комментарии
Комментарии нужны для того, чтобы не забыть, что мы напрограммировали или они информируют тех, кто будет пользоваться нашим кодом. Попросту заметки в коде.
Однострочные комментарии открываются знаками // и заканчиваются в конце строки.
Вторая строка уже не комментарий.
Есть также многострочные комментарии и другие, которые я рассматривать не буду.
Операторы ветвления
Оператор ветвления if
Если переменная a меньше 154, то есть выражение истинно, выполняет код в фигурных скобках, потом программа выполняется дальше. Код в фигурных скобках называется блоком кода. Он нужен для того, чтобы сказать программе, что этот код принадлежит оператору и именно его нужно выполнить.
Оператор ветвления if можно расширить.
Если условие оператора истинно, выполняет первый блок кода, а если нет, тогда второй блок кода после else.
Оператор ветвления switch
Этот оператор сравнивает значение в круглых скобках со значениями после case. Если значения совпадают, выполняет выражение или выражения после case, доходит до оператора break, после выходит из цикла и продолжает программу дальше. Если ни одно значение не совпадает, выполняет выражение после default. default можно и не писать.
Циклы
Цикл for
Циклы выполняют блок кода по кругу, пока определённое действие их не остановит.
За круглыми скобками в порядке очереди идут инициализация переменной, которая будет счётчиком, условие, при котором цикл выполняется вновь и вновь при истинности условия, выражение, которое выполняется после того, как выполнится блок кода цикла. То есть этот цикл будет выполняться снова и снова, пока переменная i больше либо равна нулю, и, начиная со второго выполнения цикла, значение переменной i будет уменьшаться на единицу. После того, как условие станет ложным, программа начнёт выполняться дальше.
Цикл while
Цикл while выполняется до тех пор, пока условие в круглых скобках истинно.
Если условие будет ложным, но нам необходимо чтобы цикл выполнился один раз, тогда используем следующую конструкцию
Область видимости
Также фигурными скобками определяется область видимости. Все переменные, объявленные внутри фигурных скобок, невидимы во внешней области, но внешняя область видна внутри фигурных скобок. Поэтому мы можем использовать внутри фигурных скобок внешние переменные, но не можем во внешней области использовать переменные, объявленные внутри внутренней области.
Ключевые слова
В языках программирования есть наборы ключевых слов, в каждом языке свой набор. Этими словами ничего называть нельзя. Ни переменные, ни методы/функции, ничего подобного. Слово while ключевое и другие подобные слова также ключевые.
Массивы
Массивы – это набор значений одного типа. Они удобны, когда нам нужно что-то перечислить.
Так выглядит обычное объявление массива. Сначала указываем нужный тип. Потом ставим квадратные скобки, этим говорим языку программирования, что объявляем массив. Далее вписываем его имя. После знака присвоения вписываем выражение инициализации, то есть создания массива. Там мы видим новый оператор new, который используется при создании массива. Если сказать проще, мы создаём семь переменных типа int и присваиваем их нашему массиву под именем items.
Мы создали массив с семью элементами, но обращаться к первому начинаем с 0. Поэтому последний элемент будет под индексом 6. Не забывайте об этом смещении.
Обращение к элементу массива и присвоение его переменной выглядит так
Вход в программу
Мы рассмотрели все основные моменты, чтобы хоть что-то понимать, поэтому теперь перейдём к написанию простой программы.
Началом программы является метод main. Любой метод подобен блоку кода, но с именем. Его можно вызвать из другой части программы по имени, но метод main нельзя, потому что он вход в программу, а вход должен быть один. Метод main срабатывает только при запуске.
А это простейший метод, который сейчас разберём. В круглых скобках указываются входные параметры. Можете их представить, как уже объявленные переменные в блоке кода, которым мы можем присвоить значения извне. Внутри фигурных скобок первый оператор, который мы видим, это return. Он берёт значение справа, которое получается из выражения, и передаёт его вовне. Тип передаваемого вовне значения должен быть таким же, как указанный перед именем метода, то есть int.
Так метод вызывается и результат его выполнения передаётся в переменную z.
В этом примере сначала создаётся класс HelloWorld. Пока что думайте, что класс – это файл, в который мы записываем текст программы.
Далее идёт объявление метода main. По словам слева от его имени мы можем понять, что метод публичный (слово public), то есть мы можем вызвать его не только из этого класса, но и извне. По слову static мы можем понять, что метод статичный, то есть можно его вызвать без разных манипуляций, которые мы рассмотрим позже. Слово void говорит, что метод ничего не возвращает. В круглых скобках есть аргумент args[]. Этот аргумент является пустым массивом строк. Можно добавить забитый чем-то массив строк, но нам это не нужно, потому что использовать его мы не будем, а программа запустится и так.
Следующим мы видим вызов метода println, в параметр которого помещена строка Hello World. Перед ним мы видим перечисление через точки System.out. Если кратко, слово System означает, что метод println находится в классе System, а слово out – это выходной поток PrintStream, который нужен, чтобы выдать информацию вовне. В этом примере вовне — это консоль. Выходной поток out мы рассматривать не будем. Разбор потоков может вылиться в отдельную статью. Нам важно только знать, что out (объект класса PrintStream) находится в классе System, а метод println находится в объекте out. Все эти перечисления через точку просто указывают путь языку программированию к методу println, чтобы он знал откуда его вызывать.
Этот метод выводит строку Hello World в консоль и переводит курсор на новую строку. На этом программа заканчивается.
Компиляция и выполнение
Синтаксис простой программы мы рассмотрели, но не запустили её. Этим мы сейчас и займёмся.
Для начала скачайте JDK и установите его. Потом в переменных средах вашей операционной системы пропишите в переменной Path путь к папке bin вашего установленного JDK. Это нужно, чтобы операционная система могла найти из консоли программы JDK для компиляции и запуска. Теперь поместите текст программы в текстовый файл с именем HelloWorld. С именем HelloWorld, потому что имя файла и класса должны совпадать. Сохраните и измените расширение файла на java. Перейдите в консоли в папку с файлом и введите javac HelloWorld.java. Программа скомпилируется и поместится в файл HelloWorld.class. Чтобы запустить её напишите java HelloWorld. В выводе вы увидите Hello World. Что мы и хотели.
Импорт
Чтобы использовать другие классы и методы из стандартной библиотеки используем слово import.
После слова import идёт название пакета java.util. Он назван так из-за назначения и, собственно, из-за папок java и util, в которых находится класс Random. Путь java\util\Random.class
Вместо java.util.Random можно вписать любой необходимый нам класс.
Классы и объекты. Статические и динамические реализации
Создадим два класса. Эти классы должны находиться в одной папке, чтобы после компиляции они смогли найти друг друга.
Есть ещё множество способов, чтобы классы могли найти друг друга. Это пакеты, внешние библиотеки, внутрипакетное взаимодействие и другое. Здесь разбирать это не будем. Просто знайте, что есть специальные конструкции и ключевые слова, чтобы использовать эти механизмы.
Разберём их. Начнём с класса AnotherClass. Перед его именем мы видим слово public, которое говорит, что класс публичный и его могут использовать другие классы. В нём мы создаём переменную a со значением 9 и метод addition. Можно сказать, что класс AnotherClass – это новый тип.
В классе MyClass мы создаём объект object0 класса AnotherClass. Это очень похоже на создание обычной переменной и также используется ключевое слово new, как при создании массива. Оператор new говорит языку программирования, что нужно создать копию этого класса в оперативной памяти. Мы можем создать множество копий и забить ими всю память. Далее мы передаём переменную a этого объекта в метод println. Dызываем динамические метод addition в параметре метода println. Метод addition вернёт результат, а метод println выведет его.
Динамический метод отличается от статического тем, что его можно вызвать только из объекта, загруженного в память. То есть для начала нужно создать объект. Статический метод можно вызывать напрямую из класса, то есть просто написав имя класса, поставить точку и через неё вызвать метод. Но у статических методов есть ограничения. Внутри их тела невозможно обращаться к динамическим переменным объекта класса, в котором находятся эти методы. Так как статический метод не загружается в оперативную память, в нём нельзя использовать переменные объекта, загруженные в неё.
Чтобы создать статический метод, перед его именем нужно написать static.
Конструкторы
В этих классах почти всё идентично предыдущим, но создаётся два объекта класса AnotherClass2. object0 и object1. Но создаются они по-разному.
Разберём класс AnotherClass2. В нём появился новый механизм, который называется конструктор. Конструкторов в классе может быть несколько, начинаются они со слова public, а далее идёт имя класса. В круглых скобках перечисляются параметры, а в теле конструктора описывается инициализация объекта класса. Конструкторы схожи с методами.
Перейдём к разбору конструкторов в классе MyClass2. В этом классе при создании объектов класса AnotherClass2 мы можем указать параметры в круглых скобках. Язык программирования выберет подходящий под параметры конструктор и проинициализирует объект подходящим образом. Так при создании объектов мы можем создать его разновидность нужную нам.
Программирование за 5 минут
И так, вы хотите научиться программировать, но не хотите проводить недели за монитором. Эта статья расскажет вам все, что вам нужно будет знать о программировании, за 5 минут.
Внимание: ничего низкоуровневого. Это не руководство по плаванию, это руководство о том, как зайти в воду. Чтобы люди не боялись холодного океана.
Компьютер
Программирование — это написание кода. Код — это список инструкций для компьютера. Компьютер читает код сверху вниз, слева направо. Компьютер делает все, что вы ему скажете — никогда не отступает от заданных команд. Это как работник или подчиненный, который делает исключительно то, что вы ему скажете. В реальной жизни мы можем задать работнику следующий список задач:
- Найди коробку
- Подними коробку
- Принеси коробку мне
- Перейди к пункту #1
Таким образом, следуя списку команд сверху вниз и слева на право, работник принесет вам все коробки. Список команд — это алгоритм. Каждая команда из алгоритма занимает определенное время. Время команды — это ее сложность, на компьютерном языке. Сумма сложностей команд — это сложность всего алгоритма. Как в реальной жизни мы пытаемся упростить список задач для работника, так и компьютеру мы стараемся уменьшить сложность алгоритма.
Если список задач не полный (что делать, если коробок больше нет) — это нужно дописать дополнительным условием. Если в списке задач (алгоритме) ошибочные действия — то грузчик забьет на работу, а программа упадет.
Условия
Модифицируем алгоритм для нашего работника:
- Найди коробку
- Подними коробку
- Принеси коробку мне
- Коробки еще есть?
- Да: переходи к пункту 1
- Нет: иди ко мне за следующим списком задач
Точно так же все пишется и для машины (компьютера).
Пишем код
Заходим на paiza.io и сверху слева выбираем “JavaScript”. Сегодня мы учим JavaScript. Стираем все, что нам написало слева сверху в поле, куда пишется код, и пишем туда: console.log('Hello') . Жмем “Run” снизу. Получаем следующее:
Поздравляю с написанием первой программы! console.log — это команда для компьютера, которая пишет, что вы ей даете в скобочках. То, что в скобочках — это аргументы. Команды мы теперь будем называть функциями и отдавать только машинам, не работникам. Считайте, что машина — это теперь ваш сотрудник, которым вы командуете.
Сделаем что-нибудь покруче. Давайте заставим машину писать Числа Фибоначчи — это ряд чисел, когда каждое последующее — это сумма предыдущих двух чисел. Вот так: 1, 1, 2, 3, 5, 8, 13, 21 — и так далее. Пишем в окошко с кодом следующее:
Жмите “Run” и получайте следующее:
Ух! Крутота! А теперь поменяйте цифру 5 справа от endNumberIndex на 100 и еще раз нажмите “Run” — еще круче, да? А теперь попробуйте поменять эту цифру на любую другую и наблюдайте результаты запуска программы через “Run”. Смогли бы вы так быстро посчитать 100 Чисел Фибоначчи? Я вот, например, не умею такого.
Так, вы уже поняли, что, слегка изменяя число, вы заставляете машину выдавать вам разные результаты. При том, если не менять число, результаты всегда будут одни и те же. Простая и красивая закономерность.
var — это от английского “Переменная”. Переменной это названо потому, что значение может меняться. Представьте, что у вас есть простое уравнение:
Смогли решить? Подсказка: x = 5 . Простое математическое уравнение, которое понятно всем с 4–5 класса. А что, если я вам покажу вот такое?
Смогли решить? Подсказка: z = 15 . Этот концепт понятен, теперь сравним с нашим кодом:
Знакомая картина? Сможете решить вот это уравнение?
Подсказка: x = 7 . Но почему переменная имеет свойство меняться? Тут ничего ведь не меняется! Помните, что компьютер читает код сверху вниз? Так вот, представьте, что можно переназначать x и y сверху вниз — и правдивым будет именно то значение, которое на текущей строке. Предположим следующее уравнение:
В этом случае, y = 5 — так как компьютер думает только в рамках текущей строки выполнения, и, идя сверху вниз, он переназначает значения переменной x . Компьютер, во время расчета значения y , интересует лишь то, какое значение у x было в самом конце перед самим расчетом. Машина холодно и без эмоций забывает предыдущие значения x .
А var мы ставим перед обозначением переменной, чтобы указать компьютеру, мол, это не просто уравнение — это мы создали переменную и положили в нее значение. Что происходит дальше?
Ух, как много всего! На самом деле, нет — и ничего тут страшного нет. Машина читает код сверху вниз, кроме специальных случаев. Например, for . Этим словом мы говорим машине после выполнения кода в фигурных скобках — <> — вернуться на строку с for . Стиль написания этой “петли” (по-английски — loop ) следующий:
- Объявление переменной счетчика — это простое объявление того же x .
- Условие — если оно “Да”, то код внутри фигурных скобок выполнится, если нет — то программа должна пропустить фигурные скобки и пойти дальше вниз.
- Изменения — тут мы описываем, что должно произойти с переменной счетчика каждый раз после выполнения кода в фигурных скобках.
i++ — это короткая форма записи i += 1 , что является короткой формой записи i = i + 1 . Это мы меняем значение i на то, что было до этого в i , плюс один. Переназначая значения переменных, вы можете ссылаться на предыдущее значение переменной до исполнения этой строки. Попробуйте следующий код для забавы:
Меняйте 0 и 10 на другие значения и смотрите, как будет меняться результат. Вернемся к нашей программе:
Мы объявляем переменные previousNumber , currentNumber , endNumberIndex — выдавая им значения. Дальше мы запускаем “петлю” кода, которая проверяет условие i < endNumberIndex и в случае, если оно “Да”, то выполняет код в фигурных скобках.
В фигурных скобках мы заставляем машину вывести на экран предыдущее число. Потом создаем новую временную переменную, чтобы сохранить предыдущее число — ведь как только мы поменяем значение previousNumber , мы потеряем предыдущее значение навсегда. Далее, мы говорим машине: “Помнишь предыдущее число? Теперь оно — то, что раньше было в текущем числе”. После, мы говорим машине: “Помнишь текущее число? Теперь это временная переменная плюс текущее число”. Мы не можем использовать “Предыдущее число”, так как уже его переназначили — из-за того, что компьютер “забывает” значения переменных после их переназначения, нам приходится делать вот такую некрасивую штуку.
И вот, цикл (петля, loop) повторяется снова, и снова, и снова — до тех пор, пока i < endNumberIndex не вернет “Нет” (помните, что после каждого выполнения кода в фигурных скобках, значение переменной i увеличивается на 1).
Таким нехитрым способом вы сделали так, чтобы машина высчитывала за вас сложнейшую математическую операцию (в уме это сделать реально сложно). Вот и все — вы окунулись в программирование, поздравляю!
Заключение
Вы только что заставили машину работать за вас, клево! И ведь это было совсем недолго и совсем не сложно, не так ли? Все программирование — оно вот такое простое, не стоит бояться. На вот этих простых принципах строятся вообще все концепты в коммерческой разработке.
Конечно, это руководство было написано просто, чтобы показать вам, что вы тоже можете программировать. Следующий шаг — это взять бесплатные курсы по программированию на тех же Codecademy или GeekBrains, html academy, Loftschool — если с английским беда. Дальше берите курсы на Udemy и смотрите туториалы на YouTube.
Что такое разработка: объяснение для новичков
Объясняем, что такое программирование и с чего начать, на примере JavaScript. Этот язык занимает лидирующие позиции в рейтингах популярности, а также поддерживает императивные, структурируемые, объектно-ориентированные и управляемые событиями парадигмы.
Примечание Вы читаете улучшенную версию некогда выпущенной нами статьи.
Набор инструментов для программирования с нуля
Инструментарий типичного программиста чаще всего состоит из следующих вещей:
- компьютер;
- интернет (прежде всего он нужен для поиска всего неизученного и неизвестного в любом из известных поисковых сервисов);
- редактор кода (или IDE — комплекс программных средств, используемый программистами для разработки программного обеспечения), который поможет упорядочить всё, что вы создаёте;
- компилятор или интерпретатор. Это программа, которая читает ваш код и пытается найти в нём ошибки. Затем он собирает ваш код в единый пакет и передаёт компьютеру для выполнения;
- наушники. Возможно, вас будут отвлекать внешние шумы, а наушники — один из простых способов оградить себя от шумов.
Вы можете использовать бесплатное ПО в начале работы, такое как Atom и Notepad++. Также можно попробовать SublimeText, однако этот редактор является платным.
Переменные
В начале программирования нужно освоить переменные — именованные области памяти для хранения данных. Есть две основные причины, по которым следует именовать данные:
- Вам зачастую не известно, что будет скрываться под переменной
- Вам может быть сложно вспомнить, что значит та или иная переменная.
Примечание В названиях переменных нельзя использовать апострофы.
Чтобы переменная существовала, её нужно объявить. Объявление переменных служит в роли свидетельства о «рождении» для данных. Давайте посмотрим на пример:
Ключевое слово var означает переменную.
Переменной нужно присвоить значение:
Теперь вы можете использовать переменную, the_number_of_days_in_december вместо числа 31.
Следует помнить, что вы также можете объявлять переменные для данных, которые ещё не существуют. Например, вы можете объявить var donalds_birthday и сообщить приложению, чтобы оно ожидало ввода значения. Всё, что будет введено пользователем для этой переменной, будет использоваться в тексте под именем donalds_birthday
Переменной также можно объявить целую строку или фрагмент текста:
Теперь можно где угодно в коде написать great_song_lyrics и компьютер поймёт, что речь идёт о ‘pasito a pasito, suave suavecito’ . Проверим это утверждение.
Откройте консоль в Google Chrome нажатием клавиши F12 (для владельцев Mac рекомендуется ознакомиться с этой статьёй). Перед вами появится следующее окно:
Убедитесь, что выбрана вкладка «Console», кликните на пустом поле рядом со знаком «больше» ( > ), объявите переменную и присвойте ей значение, а затем нажмите клавишу ввода.
В консоли отображается сообщение undefined из-за того, что строка кода не вывела какие-либо данные, чего, собственно, делать и не должна. Теперь введите название своей переменной в строку и нажмите кнопку ввода.
Поздравляем! Консоль (которая также служит в роли интерпретатора) понимает вашу переменную.
Объекты
А что такое разработка без объектов? В JavaScript объекты объявляются почти так же, как и переменные:
Здесь мы объявили четыре переменные, и сможем найти их, поэтому мы сможем найти их, когда захотим узнать что-нибудь о human . Всё, что вы видите в фигурных скобках, разграничивается на две части: слева прописываются поля, а справа указываются свойства для них. Объект может иметь любые свойства до тех пор, пока они находятся внутри <фигурных скобок>.
Мы можем использовать объект human и ссылаться на него точно так же, как и на любую другую переменную. Компьютер поймёт, что нужно сослаться на какое-либо определённое свойство, если мы его напишем через точку:
Каждый из элементов сверху может быть изменён и ссылаться на другое свойство. Например, давайте изменим имя (name):
Массивы
Чтобы начать программировать, нужно изучить и массивы — списки похожих фрагментов данных. В программировании на JavaScript массивы выглядят следующим образом:
Для массивов принято использовать [квадратные скобки]. В данном случае вы можете использовать tweets в любом месте вашего кода, ссылаясь на массив, который только что определили.
Примечание Счёт массивов начинается с нуля, а не с единицы.
Если вы хотите обратиться к какому-то отдельному элементу, то можно сделать следующее:
Внутри квадратных скобок мы пишем индекс элемента, к которому хотим обратиться.
Каждое из приведённых выше выражений — переменная. Вы можете присвоить им какое-нибудь новое значение, чтобы поэкспериментировать:
Теперь tweets[2] будет ссылаться на новое значение.
Массивы могут содержать текст, числа, даты, объекты и даже другие массивы. Массивы также могут быть свойствами объектов.
Чтобы обратиться к message, вы можете написать следующее:
И компьютер поймёт, что вы имеете в виду ‘Blink twice if you need help’
API — набор свойств и методов (целевых фрагментов кода), которые имеют свои имена, как переменные.
Массивы JavaScript также имеют свой собственный API. Свойство length является частью этого API. Другая его часть — метод push , который добавляет элементы в конец массива:
Метод похож на свойство, потому что к нему можно получить доступ через точку. Он отличается от свойства тем, что после него нужно поставить (круглые скобки). В этих круглых скобках хранятся данные, которые мы хотим добавить в наш массив. Теперь в tweets четыре элемента. Это выглядит вот так:
Функции
Функция — это фрагмент кода, который что-то выполняет и имеет имя. Функции можно легко объявлять:
Объявление функции начинается с ключевого слова, затем ей даётся имя. return заставляет значение «выпрыгивать» из функции. Затем функция завершается (если вы напишете код после return, то он не будет выполнен). Таким образом, вы можете сделать следующее:
Мы объявляем переменную с именем the_loneliest_number . Часть нашей команды вызывает функцию giveMeOne() и так как функция говорит return 1 , выводится единица. Наша переменная будет содержать цифру 1. Теперь попробуйте ввести в браузере первый блок с функцией, затем блок с переменной, а затем ввести the_loneliest_number и нажать кнопку ввода. Вы увидите единицу.
Функция может быть свойством объекта. Она может быть элементом массива. Она может возвращать число, дату, строку, объект, массив, другую функцию, массив функций и т. д.
Часть данных, которую мы добавляем в функции, называется аргументом. Объявление функции, которая может ожидать аргументы, выглядит так:
Оператор return складывает аргументы number1 и number2 , а затем выдаёт результат.
В JavaScript также можно писать математические выражения как на калькуляторах:
- + используется для сложения;
- — используется для вычитания;
- ( круглые скобки) служат для принудительного выполнения порядка операций;
- * используется для умножения;
- % используется для получения остатка деления.
Вы могли бы записать предыдущую функцию таким образом:
Эта функция делает всё то же, что и предыдущая, только в неё введена переменная в качестве посредника.
Логические ветви и сравнения
Предположим, мы пишем приложение, которое определяет, разрешено ли конкретному человеку войти в ночной клуб. Представим, что в JavaScript API есть метод, который получает возраст пользователя. Мы назовём его getUserAge() . Также предположим, что существуют два других метода: allowThemInTheNightClub() APIAPIи throwThemOutOnTheirButt() . Как мы можем помочь нашей программе решить, какой из этих двух методов нужно вызвать, исходя из возвращаемого значения первого метода?
Вы уже знаете, что делает первая строка. age (возраст) может варьироваться от 7 до 101. Теперь нам нужно определить больше значение age , чем 21 или нет.
Мы делаем это с помощью оператора if (если) — ключевого слова, похожего на метод. Аргумент, который он ожидает, представляет собой какое-то выражение (обычно сравнение). Сравнения принимают два значения и сравнивают их друг с другом. В результате чего выбирается одно из следующих ключевых слов: true — в случае соответствия правилу и false — в случае несоответствия. Это называется логическим выражением.
В JavaScript есть возможность 6 видов сравнения:
• === сравнивает значения. Если они одинаковы, то вы увидите true . Например, 6 === 6 было бы true ;
• !== сравнивает значения на неравенство. Если они не равны, то вы увидите true . Например, 6 !== 3 было бы true ;
• > проверяет, больше ли значение слева. Если больше, то вы увидите true . Например, 6 > 3 было бы true ;
• < проверяет, больше ли значение справа. Если больше, то вы увидите true . Например, 3 < 6 было бы true ;
• >= проверяет, больше или равна правая часть левой. Если больше или равна, то вы увидите true . Например, выражения 6 >= 6 и 6 >= 5 были бы true ;
• <= проверяет, меньше или равна правая часть левой. Если больше или равна, то вы увидите true. Например, выражения 6 <= 6 и 6 <= 7 были бы true .
Оператор if оценивает сравнение. Если выводится true , то код выполняется внутри блока сравнения. Если выводится false , код не выполняется и игнорируется.
Оператор if также может работать с оператором else (иначе). Он содержит в себе блок кода, который будет выполнен, если сравнение вернёт false .
Циклы
Но что такое циклы в программировании? Иногда при работе с массивом может понадобиться выполнить какой-то блок кода несколько раз подряд. В таких случаях следует использовать циклы. Простейшим видом цикла JavaScript является while (цикл выполняется, пока условие истинно):
Цикл while использует тот же синтаксис, что и оператор if : нём используются круглые скобки, вы проходите через сравнение и т. д. Но блок if выполняет код внутри только один раз, а блок while повторяется раз за разом. Он выполняет условие до тех пор, пока оно не станет false . Если оно соответствует true, блок запускается снова и снова.
Сколько раз будет выполняться цикл? Что же, в первый раз он оценит сравнение и проверит меньше ли index (который равен 0), чем the_real_slim_shady[0] . Если сравнение выведет true , то будет запущен цикл, так как index равен нулю. С этого момента цикл будет выполняться до тех пор, пока блок index не будет равен 4, так как the_real_slim_shady[4] не существует.
null и undefined
Если вы объявите переменную и не присвоите ей значение, то она будет содержать специальное значение undefined . Null значит почти то же самое. Предлагаем почитать, чем они различаются, а также узнать про обработку undefined.
Области применения
Если вы объявите переменную внутри функции, то вы не сможете ею воспользоваться где-нибудь за пределами функции. Пример:
В функции объявлена переменная wildIndiscretions . Мир за пределами функции не знает о существовании переменной. Даже оператор if не может ничего сделать в этом случае. Оператор if сработает только внутри функции, если поместить его перед return .
Комментирование кода
Не всегда бывает понятно, что выполняет тот или иной код. Поэтому всегда следует комментировать его. В JavaScript комментарии начинаются с // :
// переменная равна 21.
// Если она не равна 21, пожалуйста, измените на 21.
// Что сделать: добавить больше переменных.
Так что же такое программирование
Программирование — это написание приложений, основанное на определённых правилах, некоторые их которых перечислены в нашей статье.
Теперь вы понимаете, что представляет собой разработка на базовом уровне. Желаем успехов на пути к освоению мастерства программирования. Если же вы понимаете, что JavaScript — не ваше, узнайте, какой язык программирования подойдёт для новичка.