Введение в программирование
Программа, часто упоминаемая как исходный код или просто код — это набор особых инструкций, сообщающих компьютеру какие задачи нужно сделать. Обычно код сохраняют в текстовый файл, хотя в случае JavaScript можно писать код прямо в консоли разработчика в браузере, чего мы кратко коснемся далее.
Правила допустимого формата и комбинаций операторов называются язык программирования , иногда их соотносят с его синтаксисом , аналогично английскому языку, где правила говорят вам как произносить слова и как составлять правильные предложения используя слова и знаки препинания.
В языке программирования группа слов, чисел и операций, которые выполняют определенную задачу, называются оператором . В JavaScript, оператор может выглядеть так:
Символы a и b называются переменными (см. «Переменные»), которые примерно как обычные коробки, в которых вы можете хранить что угодно. В программах переменные хранят значения (например, число 42 ), используемые программой. Представляйте их как символьную подмену для самих значений.
В противоположность им, 2 — это само значение, называемое литеральным значением , поскольку оно само по себе и не хранится в переменной.
Символы = и * — это операции (см. «Операции»), они выполняют действия со значениями и переменными, такие как присваивание и математическое умножение.
Оператор a = b * 2; сообщает компьютеру, грубо говоря, взять текущее значение из переменной b , умножить это значение на 2 , а затем сохранить результат в другую переменную, которую мы назвали a .
Программы — это всего лишь набор стольких операторов, сколько нужно для того, чтобы описать все шаги, необходимые для выполнения цели вашей программы.
Операторы состоят из одного или более выражений . Выражение — это любая ссылка на переменную или значение или набор переменных и значений, объединенных операциями.
a = b * 2 — это выражение присваивания , в данном случае это присвоить результат выражения b * 2 переменной a (подробнее о выражениях далее)
Типичное выражение, которое является законченным, называется оператор-выражение , например, такое как это:
Этот пример оператора-выражения не является типовым или полезным, и в целом не оказывает никакого эффекта на выполнение программы — он всего лишь извлекает значение b и умножает его на 2 , но затем ничего не делает с результатом.
Более распространенный оператор-выражение — это оператор-выражение вызова (см. «Функции»), поскольку весь оператор — это выражение вызова функции:
Так как же эти наборы программных операторов сообщают компьютеру что нужно делать? Программу нужно выполнить , также говорят запуск программы .
Операторы, подобные a = b * 2 , понятны для разработчиков как при чтении, так и записи, но фактически в такой форме они не понятны напрямую компьютеру. Поэтому используется специальная утилита в компьютере (либо интерпретатор , либо компилятор ) для перевода кода, который вы пишете, в команды, понятные компьютеру.
В некоторых языках программирования перевод команд обычно выполняется сверху вниз, строка за строкой, каждый раз когда программа запускается, что обычно называется интерпретацией кода.
В других языках, перевод, выполняемый заранее, называется компиляцией кода, поэтому когда позднее программа запускается , то, что запускается — это по факту уже скомпилированные инструкции компьютера, готовые к выполнению.
Обычно утверждают, что JavaScript — интерпретируемый , так как ваш исходный код на JavaScript обрабатывается каждый раз, когда запускается. Но это не совсем точно. Движок JavaScript на самом деле компилирует программу на лету и затем сразу же запускает скомпилированный код.
Эта глава проиллюстрирует каждое понятие из программирования простыми примерами кода, полностью написанными на JavaScript (очевидно!).
Нельзя не отметить, что пока вы продвигаетесь по этой главе вам может понадобиться перечитать её несколько раз и вам следует практиковаться в каждом из понятий набирая код самостоятельно. Простейший путь сделать это — это открыть консоль в средствах разработки в ближайшем браузере (Firefox, Chrome, IE и т.п.).
Подсказка: Обычно вы можете запустить консоль разработчика с помощью горячих клавиш или из меню. Подробнее о запуске и использовании консоли в вашем любимом браузере см. “Mastering The Developer Tools Console” ( http://blog.teamtreehouse.com/mastering-developer-tools-console ). Чтобы ввести несколько строк в консоли за раз, используйте + , чтобы переместиться на новую строку. Как только вы просто нажмете , консоль выполнит всё, что вы написали.
Давайте познакомимся с процессом запуска кода в консоли. Сперва я предлагаю открыть пустую вкладку в браузере. Я предпочитаю делать это набирая about:blank в адресной строке. Затем убедитесь, что ваша консоль разработчика, о которой мы только что упоминали, открылась.
В предыдущем кусочке кода мы использовали console.log(..) . Давайте взглянем вкратце о чем же эта строка кода.
Возможно вы это предполагали, но это и в самом деле то, как мы печатаем текст (т.е. вывод для пользователя) в консоли разработчика. Есть две характеристики этого оператора, которые нам следует пояснить.
Первая часть, log( b ) указывает на вызов функции (см. «Функции»). Здесь получается, что мы передаем переменную b в эту функцию, которая берет значение b и печатает его в консоли.
Вторая часть, console. — это ссылка на объект, где расположена функция log(..) . Мы рассмотрим объекты и их свойства более детально в главе 2.
Если вы запустите этот оператор, то заметите, что вместо вывода значения в консоль он показывает всплывающее окно с кнопкой «OK» и содержимым переменной b . Однако использование console.log(..) обычно лучше помогает кодировать и запускать программы в консоли, чем использование alert(..) , потому что вы можете вывести несколько значений за раз без остановки в интерфейсе браузера.
Пока мы обсуждаем вывод, вы попутно могли задаться вопросом о вводе (т.е. о получении информации от пользователя).
Самый распространенный путь — показать элементы формы на HTML-странице (например, строки ввода) для пользователя, чтобы он мог вводить туда данные, а затем, используя JS, считать эти значения в переменные программы.
Но есть более простой путь получать входные данные в целях обучения и демонстрации, который вы будете использовать на протяжении всей этой книги. Используйте функцию prompt(..) :
Как вы уже могли догадаться, сообщение, которое вы передаете в prompt(..) , в данном случае «Please tell me your age:» (‘»Пожалуйста сообщите мне свой возраст:»‘), выводится во всплывающем окне.
Как только вы подтвердите ввод текста щелкнув по «OK», вы заметите, что введенное значение теперь хранится в переменной age , которую мы затем выведем с помощью console.log(..) :
Для упрощения, пока мы изучаем основные понятия программирования, примеры в этой книге не потребуют ввода. Зато теперь вы увидели как пользоваться prompt(..) . Если вы хотите проверить себя, то можете попробовать использовать ввод в порядке экспериментов с примерами.
Операции — это те действия, которые мы выполняем над переменными и значениями. Мы уже видели две операции JavaScript, = и * .
Операция = используется для присваивания — сначала мы вычисляем значение с правой стороны (исходное значение) от = , а затем записываем его в переменную, которую мы указываем с левой стороны (переменная назначения).
Предупреждение: Такой обратный порядок для присваивания может выглядеть немного странно. Вместо a = 42 кто-то может предпочесть поменять порядок, чтобы исходное значение было слева, а переменная назначения — справа, например 42 -> a (это — неправильный JavaScript!). К сожалению, форма a = 42 и похожие на нее практически полностью превалируют в современных языках программирования. Если вам такой порядок присваивания кажется неестественным, потратьте некоторое время на привыкание к нему.
Тут мы присваиваем значение 2 переменной a . Затем мы получаем значение переменной a (пока еще 2 ), прибавляем к нему 1 получая в результате 3 , потом сохраняем это значение в переменной b .
Хоть и не являющееся технически операцией, вам необходимо ключевое слово var в любой программе, поскольку это основной способ, с помощью которого вы объявляете (т.е. создаете ) переменные (сокращение от var iables) (см. «Переменные»).
Вы всегда должны объявить переменную с именем до того, как начнете её использовать. Но вам достаточно объявить переменную всего раз для каждой области видимости (см. «Область видимости»), а затем пользоваться ею столько раз, сколько нужно. Например:
Составное присваивание: += , -= , *= , and /= — это составные операции, которые объединяют математическую операцию с присваиванием, как в a += 2 (эквивалентно a = a + 2 ).
Объекты — это значения, которые хранят другие значения под своими именами, называемые свойства. obj.a означает значение из объекта obj из его свойства a . Еще один способ доступа к свойствам — obj[«a»] . См. главу 2.
Равенство: == (нестрогое), === (строгое), != (нестрогое неравенство), !== (строгое неравенство), как в a == b .