Основы программирования 2

Эта вторая статья на тему основы программирования, первая статья Основы программирования находится по этому адресу.

Небольшое вступление.

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

Тем, кто только начинает программирование:

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

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

Дисклеймер

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

Комментарии

Часто в только что написанный код стоит вставлять комментарии, объясняющие что тут происходит и почему. Комментарии игнорируются интерпретатором, как будто их просто нет.

Для того, чтобы сделать однострочный комментарий в коде, просто поставьте перед ним два слэша:

• // Вот такой вот комментик

Все, что будет идти после них, будет проигнорировано и не будет считаться частью кода.

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

•  /* Этот комментарий
• не уместился на одной строке */

Объекты, их свойства и методы

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

Для того, чтобы лучше разобраться, разберем пример из реальной жизни. Возьмем обычную автоматическую ручку. У нее определенно есть свойства, такие как цвет чернил, остаток чернил, положение в пространстве, состояние (открыта или закрыта) и так далее. Также на нее можно воздействовать — переложить на новое место, открыть или закрыть. Сама она тоже может воздействовать на другие объекты, например слово на листе бумаги.

В JavaScript почти все является объектами. Возьмем, для примера, обычное строковое значение: «Hello Word». Эта строка обладает как минимум одним свойством: количеством символов в ней. Чтобы получить доступ к свойствам и методам объекта, нужно указать объект и, через точку, его свойство. Количество символов содержится в свойстве с именем length.

• «Hello Word». length; //11
• var str = «Second string»;
• str.length; //13

Кроме свойств, у строки также имеется набор методов — действий, которые мы можем совершать с ней. Для вызова метода, как и в случае со свойствами, напишем имя метода через точку, но добавим в конце круглые скобки — открывающую и закрывающую. Например, у строк есть метод, переводящий все буквы в строке в верхний регистр. Он называется toUpperCase(). Попробуем вызвать его:

• var lowerCase = «lower case string»;
• lowerCase.toUpperCase(); // «LOWER CASE STRING»

Обратите внимание! Этот метод вернул нам КОПИЮ строки с буквами в верхнем регистре, а содержимое переменной осталось нетронутым.

Как же нам сохранить результат? Мы просто можем записать его в переменную.

• var upperCase = LowerCase.toUpperCase ();
• lowerCase; // «lower case string»
• upperCase; // «LOWER CASE STRING»

Некоторым методам для работы необходима дополнительная информация — параметры, с которыми будет запущен метод. Например, у строк есть метод replace() — поиск и замена. Он принимает два параметра — что искать и на что это заменить. Параметры пишутся в тех самых круглых скобках после имени метода. Если параметров несколько, то они разделяются запятой. Метод replace() первым параметром принимает что искать, а вторым — на что заменить найденное. Для пример исправим в содержимом нашей переменной upperCase слово «LOWER» на «UPPER».

• upperCase.replace(«LOWER», «UPPER»); // «UPPER CASE STRING»

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

• uperCase = upperCase.replace(«LOWER», «UPPER»);
• upperCase; // «UPPER CASE STRING»

Обратите внимание! Во время присваивания значения переменной, сначала выполняются все действия справа от оператора присваивания (=), а только потом записывается значение. Поэтому мы можем произвести операцию с переменной и сразу же перезаписать ее значение не плодя лишних переменных.

Установка необходимого ПО

Дальше работать через консоль в браузере будет почти нереально, так что нам понадобится нормальный редактор кода. В принципе, подойдет любой редактор, поддерживающий работу JS, но от себя советую Sublime Text. У него есть бесплатная версия, он удобен и функционален. Далее я буду использовать именно его. Многие отдают предпочтение именно Notepad++, так что выбор за вами, и как определитесь, оставляйте себе понравившийся редактор и будем двигаться дальше.

Основа проекта

Теперь мы должны создать пустую HTML страницу и подключить к ней JS-файл, с которым мы будем работать. А HTML-страницу откроем в браузере и будем следить за выполнением скрипта.

Для начала создайте папку под проект в удобном для вас месте. Внутри нее воздайте текстовый документ и переименуйте его в index.html. Смотрите, чтобы не осталось расширение TXT. Если вы не знаете, что такое расширение и как его менять — гугл в помощь, и пока не разберетесь в этом вопросе, дальше читать бесполезно.

Чтобы все файлы не лежали вперемешку, выделим для скриптов отдельную папку. Внутри папки с index.html создайте еще одну папку и назовите ее js. Внутри нее создайте текстовый документ с именем scripts.js.

Теперь откройте редактор, в нем тыкаем «Открыть папку» (Notepad++ «из коробки» не умеет открывать папки, так что если вы используете его, то вам придется открывать файлики в проводнике) и указываем папку нашего проекта. Сбоку мы увидим скудный список: наша папка и два файла. Открываем index.html и перепечатываем туда следующие строки (изучение HTML в данный курс не входит, что объяснять я тут ничего не буду, просто перепишите без ошибок):

• <!doctype html>
• <html>
• <head>
•    <meta charset=»UTF-8″>
•    <title>Learning</title>
• </head>
• <body>
•    <script scr=»js/scripts.js»></script>
• </body>
• </html>

Теперь в редакторе открываем scripts.js — дальше работать мы будем с ним. В браузере же откройте index.html — тут мы будем смотреть результаты нашей работы.

Запомните! Для того, чтобы увидеть изменения после написания кода вы должны сохранить файлы (Ctrl+S) и обновить страницу в браузере (F5). Сами по себе изменения не будут отображены. Далее к этому вопросу возвращаться не буду.

Полезная информация

Несколько полезных объектов и их методов:

• console.log (<объект>) — выводит в консоль содержимое переданного объекта. Крайне полезно при отладке.
• document.write (<строка>) — выводит переданную строку на страницу.
• window.alert (<строка>) — вызывает всплывающее окошко с переданным текстом и кнопкой «OK».
• windows.promt (<строка>) — вызывает всплывающее окошко с полем для ввода. То, что пользователь впишет в поле, будет возвращено методом, то есть его стоит использовать для запроса ввода данных у пользователя.
• window.confirm (<cnhjrf>) — всплывающее окошко с вашим текстом и кнопками «ОК» и «ОТМЕНА». Вернет true если была нажата кнопка «ОК» и false во все остальных случаях.

Условный оператор if — else. Первая программа.

Алгоритмы редко бывают линейными, то есть прямыми, как рельса. Обычно в зависимости от некоторых параметров, они могут пойти разными путями для достижения своей цели. Приведу бытовой пример алгоритма. Предположим, мы собираемся на работу. Нам нужно знать, стоит ли взять с собой зонтик. Выяснить это — цель нашего алгоритма. Для достижения цели мы посмотрим прогноз погоды, и ЕСЛИ обещают солнечную погоду, ТО зонт мы брать не будем, ИНАЧЕ же стоит его взять.

Для реализации такого ветвления в программировании нам понадобится условный оператор if — else. В общем виде он выглядит так:

• if (<условие, например: weather == «солнечная»>) {
• <что делать, если условие выполнено (погода таки солнечная)>
• } else {
• <что делать во всех остальных случаях, например, если обещали дождь>
• }

Рассмотрим его более подробно. Вначале идет ключевое слово if (англ. — если). Далее в круглых скобках идет условие. Помните, в прошлом посте мы говорили про булевы значения? Вот именно оно и должно в итоге остаться в круглых скобках. То есть, мы можем писать там все что угодно, что в итоге вернет нам true или false (а главное, согласуется с логикой программы).

После круглых скобок с условием идут фигурные скобки. Все, что находится между этими фигурными скобками будет выполнено в том случае, если условие в круглых скобках — истина. Если же условие не выполнено, то содержимое фигурных скобок будет проигнорировано. Приведу несколько примеров:

• if (true) {}
• if (3 == 1+2) {}
• var a = 340;
• if (a<1020) {}
• var boolVal = a * 3 > 14;
• if (boolVal) {}
• if (window.prompt (`Как вас зовут?`) == `Андрей`) {}

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

Идем дальше. После закрывающей фигурной скобки мы видим слово else (англ. иначе) и еще одни фигурные скобки. Код внутри этих скобок будет выполнен только в том случае, если условие было ложным — то есть не выполнилось. Эта часть не является обязательной. Посмотрите на примеры, которые написаны чуть выше. Часть с else там отсутствует. Сработает это точно так же, как если бы в фигурных скобках после else было бы пусто.

Понять и запомнить, как работает условный оператор if-else очень легко:

если (условие выполняется) то {

делаем это

} иначе {

делаем другое

}

На нашем примере: если (обещали солнечную погоду) то {зонт можно не брать} иначе {зонт стоит захватить}.

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

• //для начала спросим пользователя какую погоду обещали
• // и сравним ее с интересующим нас вариантом
• if (window.prompt(`Какую обещали погоду?`) == `Солнечную`) {
• // если погоду обещали солнечную, то говорим, что зонт не нужен
• windows.alert (`Зонт можно не брать`);
• } else {
• // если же ответ иной, то скажем, что зонтик стоит прихватить
• windows.alert (`Стоит взять зонтик!`);
• }

Напомню, что один единственный раз, код набираем в фале scripts.js, а просматриваем в браузере, открыв им index.html. Если он уже открыт — перегрузите страницу, чтобы увидеть изменения.

Попробовав ей воспользоваться можно сразу встретить несколько неудобств. Во-первых, нужно обязательно ввести слово «Солнечную», причем обязательно с большой буквы, чтобы она дала совет не брать зонт. А если пользователь напишет «Солнышко»? Или «солнечную» с маленькой буквы? Или всеми большими? Давайте немного доработаем нашу программу:

• //для наглядности я сохранил ввод пользователя в переменную
• var inp = windows.prompt (`Какую обещали погоду на сегодня?`);
• // и немного с ней поработал. Сначала я сделал все буквы маленькими
• // методом toLowerCase (), а потом обрезал строку до 4-х символов,
• // начиная с нулевого (напомню, что в программировании нумерация
• // ведется с нуля)
• inp = inp.toLowerCase().substr(0, 4);
• //теперь сравним оставшиеся 4 первые буквы с нашим шаблоном
• if(inp == `солн`){
• // отлично, теперь проходит и «СОЛНЦЕ» и «солнечный день!» и
• // вообще все, что начинается с «солн»
• windows.alert (`Зонт можно не брать`);
• } else {
• // если же ответ иной, то скажем, что зонтик стоит прихватить
• windows.alert (`Стоит взять зонтик!`);
• }

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

Логические операции И (ЕЕ) и ИЛИ (II)

Часто возникает необходимость имея несколько разных условий принять одно единственное решение. Возьмем наш пример. Теперь у нас имеется два условия: погода солнечная, либо погода облачная. В обоих случаях наш if должен отработать, так как оба варианта нам подходят. Но как правильно написать нашу программу? Как вариант, можно вложить один if в другой — получится условие внутри условия. JavaScript позволяет это сделать, но нам такой вариант не подойдет. Для наглядности я приведу этот неправильный вариант:

• var inp = windows.promt (`Какую обещали погоду на сегодня?`);
• inp = inp.toLowerCase().substr(0, 4);
• if (inp = `солн`){
•     window.alert (`Зонт можно не брать`);
• } else {
•    if (inp == `обла`) { // первое условие не сработал,
•                                        // так что добавим другое
•      window.alert (`Зонт можно не брать`);
• } else {
•      window.alert (`Стоит взять зонтик!`);
•   }
• }

Этот вариант на 100% рабочий. Но что мы видим? Код усложнился, его сложнее читать, но по сути функционал не изменился. Кроме того, в коде есть две строчки абсолютно ничем друг от друга не отличающиеся, а это первый признак неправильной логики в коде (запомните это!). А при этом в логике программы поменялось лишь одно условие и ничего более.

Давайте еще раз сформулируем нашу текущую задачу: «Если погода солнечная или облачная говорим, что зонтик не нужен, иначе советуем взять его». Это почти дословное описание нашего оператора if в прошлой версии программы, но с небольшим отличием — появилось слово ИЛИ и дополнительное условие.

В программировании существует такой логический оператор — ИЛИ, математики называют его дизъюнкция. Записывается он как две вертикальные черты (||). Нужен он как раз для таких ситуаций. Как он работает. Он применяется к булевым значениям и возвращает true если хоть одно из значений будет равно true, если хоть одно из значений будет равно true. Если же оба значения false, то ИЛИ вернет false.

Примеры:

• true || true; // true
• true || false; // true
• false || false; // false
• var a =12;
• a <=5 || a >=15 // false
• // кстати в прошлом посте я забыл сказать об
• // этих операторах.
• // это операторы сравнения: меньше или равно (<=)
• // и больше или равно (>=).

Теперь попробуем применить его к нашей задаче. Для начала еще раз проговорим формулировку: «ЕСЛИ погода солнечная ИЛИ погода облачная, ТО зонтик не нужен, ИНАЧЕ зонтик стоит взять». Теперь напишем программу по этой формулировке.

• var inp = window.prompt (`Какую обещали погоду на сегодня?`);
• inp = inp.toLoWerCase().substr(0, 4);
• // Добавляем второе условие через ИЛИ
• if (inp == `солн` || inp == `обла`) {
• // А если хоть одно из них выполнилось,
• // То выводим наше сообщение
• window.alert (`Зонт можно не брать`);
• } else {
• window.alert (`Стоит взять зонтик!`);
• }

По аналогии с ИЛИ разберемся с логической И или, говоря математическим языком, конъюнкцией. Она записывается двумя амперсандами (&&) и следит за тем, чтобы ВСЕ условия были выполнены. То есть, если для ИЛИ достаточно всего одного true для того, чтобы продолжить работу, то для И достаточно всего одного false, чтобы работу прекратить.

Давайте его тоже используем в нашей программе.

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

Теперь наше условие звучит примерно так: «Если прогноз солнечный ИЛИ прогноз облачный И за окном тоже солнечно ИЛИ облачно, ТО зонт можно не брать». Но если для нас смысл будет понятен и так, то для программы нужно пояснить в каком порядке проверять условия. Для начала нужно проверить оба ИЛИ, а потом сравнить их результат с помощью И. Это может немного запутать, поэтому будьте внимательны и хорошо разберитесь в порядке действий.

• var inp = window.promt (`Какую обещали погоду на сегодня?`);
• inp = inp.toLowerCase().substr(0, 4);
• // добавляем возможность ввести погоду за окном
• var inp2 = window.promt (`А какая погода за окном?`);
• // и обрабатываем этот ввод также, как и предыдущий
• inp2 = inp2.toLowerCase().substr(0, 4);
• // добавляем второе условие с ИЛИ и ставим между ними И. Чтобы логика не нарушалась, возьмем оба ИЛИ в скобки — тогда интерпретатор выполнит их первыми, а иначе он бы пошел сравнивать результаты по очереди
• if ( (inp == `солн`|| inp == `обла`) && (inp2 == `солн`|| inp2 == `обла`) ) {
• // если по прогнозу и за окном подходящая погода, то оставляем зонт дома
• window.alert (`Зонт можно не брать`);
• } else {
• window.alert (`Стоит взять зонтик!`);
• }

Для некоторых этот пример может показаться сложным, но вам просто необходимо в нем разобраться и все понять. Не пожалейте на это времени! Это — основная логика, без этого невозможно написать ни одну программу.

До новых встреч.