Основы программирования 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 (`Стоит взять зонтик!`);
  • }

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

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

Опубликовано в Прочее Метки:
2 комментария на “Основы программирования 2
  1. Саша:

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

  2. cubic:

    Похоже на продолжение автора не хватило, как говаривали в детстве «разбег лошадиный, удар муравьиный «. Очень жаль.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*