Программирование на JavaScript. Урок 1: Вступление. Числа

уровень: Начинающий

В поисках толковых ресурсов для изучения программирования пролистал не одну страницу и хорошие ресурсы действительно есть. Естественно, большая часть (или, скорее, лучшая часть) этих ресурсов платна. Точнее, они предлагают ознакомиться со вступительным уроком, а затем решить, хочешь ли ты учить этот курс дальше и нравится ли тебе ресурс. Если да – плати. Hexlet находится в той же когорте, но отличается тем, что на нем есть несколько бесплатных курсов, как, собственно, курс “Введение в JavaScript”. Было бы неправильно или даже глупо скрывать, что с материалом можно ознакомиться все на том же Hexlet, и даже протестироваться. Моим преимуществом является лишь наличие транскрибированного материала. Это преимущество оценят, пожалуй, мнеподобные любители перечитывать абзац несколько раз, если что-то упустил. Для любителей изучать курс в формате фонового жужжания у меня преимуществ, увы, нет, кроме как возможности прослушать уроки без перебежки на другой ресурс и регистрации.

Итак, если вы желаете оценить мои труды внятного (надеюсь) транскрибирования, или размещения видео на веб-странице (очень сложно), то приступим к первой лекции курса “Введение в JavaScript”. *

Введение в JavaScript

Первая лекция не будет пестрить большим количеством информации. Мы лишь начнем знакомство и в более простом, облегченном режиме будем знакомиться с JavaScript. Начиная со второй лекции будет нарастать, что называется, хардкор. Мы будем узнавать все больше и больше об этом языке, все более странные, интересные, ужасные и прекрасные вещи.

Во-первых, можно сказать что это LISP или Scheme (почти) с синтаксисом языка С или Java (почти). И если вам интересно, что это за языки, если вы не знаете и не слышали о них, в частности о языке Scheme, вы можете посмотреть курс на Hexlet, который называется “Структура и интерпретация компьютерных программ” (придется заплатить денежку *). В течение этого курса мы увидим, что JavaScript, несмотря на то, что он похож на Java и похож на С, внутри больше похож на этот функциональный язык программирования.

В JavaScript, в отличии от того же С или Java, нестрогая типизация. Это означает, что переменная не объявляется с каким-то типом и она может принимать значения разных видов – она может начать свое существование, как число, потом туда без каких-либо особых ухищрений может быть записана строка, или объект, или массив и т.д. JavaScript, опять же, в отличии от С и Java, и многих современных популярных языков программирования, прототипно-ориентированный. Это означает, что изначально он не был сделан классическим языком.

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

Тем не менее, мы можем сделать из JavaScript классовый язык, мы можем там делать такие же привычные нам классы и, в принципе, максимально приблизить его к этому самому С или Java, в отличие от С или Java, которые не получится приблизить к JavaScript так, как JavaScript может приблизиться к ним. В этом отношении JavaScript – очень гибкий и очень широкий язык с большими возможностями. Это сценарный язык, или, как будет более привычно программистам, — scripting language. Это означает, что он не компилируется в какой-то исполняемый файл, а является всего лишь сценарием выполнения – простым текстовым файлом, который выполняется неким интерпретатором. Чаще всего этим интерпретатором является ваш браузер.

JavaScript у всех ассоциируется (и не зря) с браузером. Это язык вашего браузера. Большая часть браузеров понимает этот язык, может его интерпретировать, посему в этом отношении JavaScript – один из наиболее популярных языков программирования, потому что он используется почти на всех сайтах (это, конечно же, не так, но допущение вполне нормальное) и никакой язык, по-моему, не используется с такой частотой. Даже сейчас, находясь на этой странице, ваш браузер запустил JavaScript и очень многое произошло перед тем как вы увидели, спустя буквально секунду, эту страницу.

Исходя из статистических данных, опубликованных на DOU в январе 2016, JavaScript является третьим по популярности языком программирования, уступая все тем же С и Java. И если Java вырвался в лидеры основательно, то тенденции роста популярности JS в комплексе с падением популярности С могут в скором времени помочь JavaScript занять вторую строчку топа. Тем не менее, JS почти в троекратном размере превзошел по показателям своего ближайшего преследователя (Java) в рамках опроса по дополнительно используемым языкам. В придачу к этому, JavaScript является лидером в использовании для pet-проектов, пусть и не с таким большим преимуществом. Так что, предположение о том, что JS является наиболее часто используемым языком программирования, может быть вполне правдивым. *

Как сказал Дуглас Крокфорд – программист, очень большой адепт и, можно сказать, популяризатор или даже евангелист языка JavaScript: “Это самый неправильно понятый язык программирования в мире, который стал самым популярным в мире языком программирования.”. Это на самом деле так – это очень непонятый язык, поэтому, если вы у среднестатистического программиста (не веб-программиста, а программиста в широком смысле) спросите его или ее мнение о JavaScript, то он, скорее всего, ответит, что это ужасный язык и хуже него только РНР. И он будет отчасти прав, в этом языке есть очень много ужасных вещей, но то, что в нем много ужасных вещей, не означает, что в нем нет вещей прекрасных и вещей правильных, хороших. Большая проблема JavaScript в том, что он настолько прост, он настолько экспрессивен и доступен людям, что на нем могут писать все, в том числе не очень хорошие программисты и новички. JavaScript в этом отношении очень добр.

О чем этот курс и о чем этот курс не

Перед тем как мы перейдем к тому, о чем этот курс, я (в смысле он *) расскажу, о чем этот курс не. В этом курсе ничего не будет, связанного с браузером, с DOMом, с HTML, с выводом на экран и т.д. Здесь не будет никаких эффектов, анимации, jQuery и других фреймворков или библиотек. Тут не будет взаимодействия с сервером, AJAX, node.js – то есть, JavaScript-а на серверной части. И здесь ничего не будет про отладку, тестирование вашего кода, а также установку среды разработки и т.д. Никакой инфраструктуры.

Вы подумаете: “Ок, собственно, о чем тогда этот курс, если он ни о чем?” – Этот курс о языке программирования JavaScript. По этой причине курс не очень большой, но довольно обширный в плане информации. Нас будет интересовать грамматика. Обычно, когда люди изучают язык, на грамматику уходят какие-то первые полчаса, после чего начинается использование этого языка. Мы будем посвящать грамматике чуть больше времени потому что это важно, потому что с JavaScript нужно уметь работать, нужно знать все его непонятные вещи – иногда это хорошие вещи, иногда – плохие, но их очень много.

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

Мы немного поговорим о регулярных выражениях. Это очень мощный инструмент, и он тянет на отдельный, очень большой и очень серьезный курс. Мы лишь коснемся его. Это одна из самых сильных частей JavaScript, потому что JavaScript имеет от С и Java синтаксис, от LISP и Scheme он имеет замыкания и от Pearl JavaScript имеет регулярные выражения – мощнейший инструмент, который если вы научитесь использовать, вам не будет равных.

Мы немного будем говорить о стиле, поскольку – это одна из особенностей JavaScript – иногда стиль будет играть не только эстетическую роль, но и функциональную.

Также мы будем говорить о красивых и отвратительных особенностях этого языка, потому что этот язык какой-то очень человеческий. У него много плюсов, много минусов, много совершенно непонятных частей и его просто нужно знать, его возможно полюбить (автор полюбил *). JavaScript ужасен, но, на самом деле, — нет и, если разобраться, то можно полюбить этот язык. Все дело в его применении. Этот язык доминирует в интернете и так будет в ближайшее время.

Для кого этот курс

Возможно, вы программист, который знает С и сейчас будет слушать о том, что такое “число” в JavaScript. Сложно сказать, для кого этот курс, но стоит попытаться. Этот курс для тех, кто хочет знать JavaScript. Очень логично и очевидно, но, если вы очень давно делаете интерактивные вебсайты с помощью jQuery, (вы двигаете кнопки, отправляете сигналы на сервер и т.д.) это еще не означает, что вы хорошо знаете сам язык. jQuery – это настолько мощная настройка над JavaScript, что некоторые очень важные особенности самого JavaScript можно не знать. Но если вам интересен этот язык, если вы хотите писать именно на нем, а не на более высоком уровне (подразумевается jQuery *), если вам нужно это делать, то этот курс будет для вас.

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

На чем основан курс

Этот курс основан на самом простом и фундаментальном материале – в первую очередь на стандарте ECMA-262. Этот стандарт является описанием языка, диалектом которого является JavaScript. JavaScript и ECMAScript (ECMA-262) – это не одно и то же. Сегодня мы вскользь поговорим об истории JavaScript, возможно мы поговорим и об этом чуть подробнее. В этом стандарте описаны многие вещи, которые имплементированы в JavaScript. Также для подготовки этого курса использовались лекции Дугласа Крокфорда и его замечательная, очень маленькая книга, которая называется “JavaScript: The Good Parts”. Это замечательная книга, и, если вы ее прочитаете, в принципе, вам можно этот курс не смотреть (в нашем случае – не читать *). Если вы ее прочитаете вместе с вышеупомянутым стандартом, то вообще супер, однако предложение окунуться в курс по-прежнему актуально. Возможно, вместе удастся узнать больше, чем удалось бы по-отдельности. Также будут использоваться блоги хороших программистов, которые занимаются этим языком уже очень давно. Будем искать мудрости в их словах.

Немного истории

Брендан Айк (или, говоря на Википедийском, Эйх) – главный инженер Mozilla Corporation. В 1995-м году его наняли на какую-то техническую должность в компанию Net Scape. Помните эту войну браузеров, этот могучий Net Scape навигатор, который впоследствии умер? Его наняли (в смысле Брендана Айка*) и поставили перед ним задачу написать язык для браузера, написать язык, который свяжет все части, находящиеся на веб странице – всякие скрипты, Java-апплеты (если помните такие ужасные вещи), сам HTML. Написать некий язык, который будет прост, очевиден и будет как клей связывать все эти штуки. Он не сразу начал работу над этим. Во-первых, это очень абстрактная задача, перед ним не было никаких конкретных деталей. В итоге, когда Айк взялся за дело, он сделал буквально за 10 дней язык JavaScript. Его изначально хотели назвать LiveScript, но в те годы очень популярен был язык Java, поэтому язык решили назвать JavaScript, чтобы привлечь больше внимания к нему. В последствии, JavaScript, как название, принадлежит Oracle – той компании, которая и разрабатывает язык Java. Это не мешает языку JavaScript не иметь совершенно никакого отношения к Java, кроме названия и некоторых вещей синтаксиса, но это не совсем справедливо, потому что Java использует С-синтаксис, так что JavaScript использует С-синтаксис в той же мере.

Вообще, JavaScript изначально был назван даже не LiveScript. Его первое название было куда более странным, особенно его англоязычный вариант для нашего уха – “Mocha”. Так то, это – Мокаччино, и даже читается это на самом деле нормально, но порядок букв и определенные ассоциации в голове русскоязычного человек делают свое дело. Факт переименования не может не радовать. *

Буквально два года спустя (в 1997) JavaScript решили стандартизировать, потому что в разработанном за 10 дней языке явно будут, мягко говоря, недочеты. Они, естественно, были и многие из них остались до сих пор, но в противовес этому есть очень много хороших вещей.

Брендан Айк на самом деле человек очень крутой и языки программирования он создавал еще в университете, чтобы просто поиграться. Ему нравилось решать такие задачи, поэтому создание языка не было для него новой проблемой, однако 10 дней – это фантастический срок. Естественно, язык изначально не был в таком виде, в каком он есть сейчас, — это много лет кропотливого труда, стандартизации и т.д. В 1997 все описания языка передали в специальный комитет, который впоследствии выпустил стандарт под названием ECMAScript или ECMA-262. Его вы можете почитать в публичном доступе и этот стандарт использовался для того чтобы сделать современный JavaScript. JavaScript – это диалект ECMAScript и не единственный. Есть еще Jscript и несколько других диалектов, о которых мы говорить не будем.

Что предстоит узнать

Перед тем как мы перейдем к первой теме, приведу пример того, что нам предстоит узнать.

Посмотрите на эти 2 функции:

Функции

Если, опять же, программирование для вас в новинку – не критично. Посмотрите просто на эти символы, чем они отличаются. Обратите внимание на скобки после “function”. Единственное, что их отличает – положение скобки на третьей строчке после слова “return”. В одном случае скобка начинается на следующей строке, в другом – на той же. В нормальном языке программирования, как С или Java, откуда эти скобки, собственно, и пришли, эти два куска кода будут совершенно одинаковы с точки зрения программы, и если вы сравните эти две функции, то язык вам скажет, что они идентичны. В JavaScript есть такая особенность: от С или от Java он получил точку с запятой (точкой с запятой должна заканчиваться каждая строчка – она означает конец строчки). В отличие от тех языков, в JavaScript точка с запятой совершенно необязательна, ее можно не ставить и это не будет ошибкой. Возможно, некоторая среда разработки, некий стандарт вам пожалуется, что это не совсем хорошо (а это на самом деле так), но язык может обработать код без “;”. JavaScript делает это автоматически – каждая строчка после обработки получает точку с запятой, поэтому в первом случае, где скобка начинается на следующей строке после “return”, после “return” вставляется “;”. Это означает, что объект возвращает ничто, в отличии от второго объекта, где точка с запятой ставится не после return, а после скобок, а открывающая скобка показывает то, что будет возвращать эта функция. Иными словами, в JavaScript эти две строчки не эквивалентны, они приводят к совершенно разному результату. Это пример того, когда стиль соприкасается с функциональностью языка, с его сутью. Во многих языках “Как ставить скобки” – тема для бесконечных дебатов о стиле, в JavaScript же нет особого выбора. Нам нужно ставить скобку вот так, потому что так код будет работать корректно.

Второй пример – это не совсем очевидные вещи при работе с массивами.

Очевидные вещи при работе с массивами

Если сравнить единицу с единицей, то JavaScript нам ответит “true”. Если мы сравним две одинаковые строчки, то интерпретатор языка нам ответит то же самое, однако если мы сравним одинаковые массивы, то он скажет “false”. Это, в принципе, не совсем необычная вещь, другой язык тоже так скажет потому что это, на самом деле, — указатель на массив и, соответственно, 2 разных массива. Они являются двумя разными сущностями, просто у них одинаковое содержание. Так как это разные сущности, интерпретатор вам ответит, что они не одинаковы и так есть на самом деле. Однако если мы создадим новый массив с тремя элементами, и сравним его со строчкой с двумя запятыми, то язык нам скажет, что эти объекты равны. Пустой массив из трех элементов равен двум запятым.

Возможно, вам покажется, что это какая-то дурацкая ошибка – не совсем. Дело в том, что при сравнении массив будет конвертироваться в строку, чтобы сравнить его со строкой. Пустой массив из трех элементов – это “ничто, ничто, ничто”. Иными словами – две запятых. Однако в JavaScript, как в некоторых других языках, есть оператор тройного сравнения. Он ответит “false”. Это сравнение абсолютное, его лучше всего использовать в большинстве случаев, но это уже будет отдельная большая тема.

Зарезервированные имена

Давайте начнем знакомство с числами, но перед этим поговорим, какие имена в языке использовать нельзя. Это так называемые зарезервированные имена и в любом языке они есть, потому что они используются в самом языке. Чтобы не путать часть языка и то, что пишет программист, эти слова просто нельзя использовать. Вот они в JavaScript:

break; case; catch; continue; debugger; default; delete; do; else; finally; for; function; if; in; instanceof; new; return; switch; this; throw; try; typeof; var; void; while; with; class; enum; export; extends; import; super

Зачем столько внимания посвящается, казалось бы, очевидным вещам? Дело в том, что здесь есть слова, которые не используются в языке и в языке есть слова, которые используются, но не являются зарезервированными. Когда мы будем с ними сталкиваться, я буду об этом говорить.

Числа

JavaScript в отношении чисел – очень простой язык. У него есть только один тип – это float64 или 8 байт с плавающей точкой. Все числа выражаются именно в этом формате, будь они целые или с плавающей точкой. Из-за этого есть некоторые проблемы, в частности, если вы сложите 1\10 и 2\10, то это не будет равно 3\10.

Числа

Это будет равно 0.3многомногочисел и что-то там в конце. Это просто последствия того, как JavaScript хранит свои числа.

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

Числа 1

Ошибочные числа

Когда дело касается ошибочных чисел, у JavaScript есть объект “number” и у этого объекта есть некоторые параметры. В частности, для указания бесконечного числа есть кодовое слово “Infinity”, а также для указания отрицательного бесконечного числа – “-Infinity”.

Ошибочные числа

Есть специальное указание для того чтобы показать визору, что это – не числовое значение. NaN – это Not a Number. Это тоже источник очень большого непонимания.

1. Любая операция с NaN дает NaN, и если вы сложите 1 и NaN, то получится NaN.

2. Сам по себе NaN не равен NaN-у.

NaN

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

Некоторые удобные функции

Удобные функции

Итак, функция “Number” возвращает число из того, что вы ему передали. Если ему передали число, он вернет то же самое число, если ему передали строку (как записано во втором примере), то он вернет число. Если же вы передадите строку, которая не является числом, то он вам скажет “NaN” – не числовое значение.

В отличие от “Number” можно использовать “parseInt” – эта функция работает в схожем виде, но она берет только целые значения и начинает их считывать слева направо до тех пор, пока не столкнется с не числом. Если взять в пример 5-ю строчку, то “parseInt” вернет 19, потому что 19 – это первое число, которое можно получить до буквенных символов. Ну и, как упоминалось, он берет целую часть без округления, поэтому из 74.54 получится 74.

Если вы хотите взять не целое число, а Float число, то можно использовать аналогичную функцию parseFloat. Между ними есть разница. ParseInt принимает в качестве опционального, необязательно второго значения базу. По умолчанию эта база – 10 (десятичное исчисление), но мы можем вторым аргументом передать нужную нам систему исчисления и конвертировать числа из одного в другое. В частности, если мы parseInt сделаем (“ff”), то он скажет нам “NaN”, потому что там нет чисел. Однако если мы ему укажем точно, что это шестнадцатеричное число, то “ff” превратится в 255, потому что это его значение в шестнадцатеричном исчислении. Если строка начинается с “0x”, то parseInt автоматически понимает, что это – шестнадцатеричное число, поэтому не обязательно указывать в этом случае базу, однако, если вы все же хотите получить число не шестнадцатеричное, то базу можно указать. В частности, если мы там укажем “10”, то получим “0”, потому что “0” – это первый символ, который является числом, после чего следует “x”, что уже числом не является. В отличии от parseInt, parseFloat принимает только число и в нем нельзя указать базу.

parseInt (num, base)

parseInt

parseFloat (num)

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

Преобразования

У объекта “Number” есть методы для удобной работы с числами. Один из них – это “toExponential”. Мы можем преобразовать число в экспоненциальный формат – в формат научный. В качестве аргумента этой функции мы можем передать количество знаков после запятой, которые нужно сохранить в базе, которую потом будут возводить в какую-то степень.

Преобразования toExponential

Мы также можем перевести большое нецелое число, убрав у него все части после запятой. Для этого используется метод “toFixed”, в аргументах которого можно указать количество знаков после запятой, которое мы хотим сохранить. Здесь не происходит округление, здесь происходит только обрезка числа.

Преобразования toFixed

Битовые операции

Давайте поговорим о битовых операциях. Это операции, которые происходят над двоичными числами. Естественно, все числа в итоге хранятся в двоичном формате в компьютере и это для повседневной математики, может быть, не очень удобно (постоянная конвертация), но хранение в двоичном формате позволяет делать некоторые очень удобные вещи с этими числами – допустим, очень быстро умножать и делить их. Чтобы посмотреть число в двоичном формате, мы можем использовать функцию (или метод) “toString”, в котором также можно указать базу. Мы можем конвертировать числа и получать строковые интерпретации этих чисел в нужной нам системе исчисления. В частности, если поставить 2, то мы получим из числа его двоичное представление, однако помните, что начальный ноль там никогда не будет указан.

Битовые операции

Так как JavaScript использует единый 8-битный формат для всех чисел, при битовых операциях он поступает не совсем очевидно. Он берет целую часть числа и конвертирует его в необходимое количество битов. Например, если мы возьмем “0” и конвертируем его в двоичное число, то это займет 2 бита, потому что один бит всегда будет означать знак, а второй – само число. Так же будет с единицей, двойка же сама по себе занимает 2 бита, плюс знак, поэтому выйдет 3 бита.

Сами битовые операции такие же, как в привычных нам языках. У нас есть умножение логическое, исключение, “XOR”, отрицание “NOT”, есть битовый сдвиг влево и вправо и битовый сдвиг вправо с хранением нулей в начале.

Operator Description
& AND
| OR
^ XOR
~ NOT
<< Shift Left
>> Shift Right
>>> Shift Right

 

Вот простой пример:

Битовые операции 1

У нас есть две переменных, заодно вы можете посмотреть, как объявляются переменные в JavaScript. Так как это язык с нестрогой типизацией, так же объявляются любые переменные, будь то строка, массив, объект или что угодно. Есть разница, где объявляются эти переменные, но, опять же, об этом мы поговорим в следующий раз.

Итак, у нас есть 2 переменных – a и b (5 и 13), и простыми этими битовыми операциями мы можем проводить над ними логические операции.

Округление

Округление

Не совсем очевидная штука: мы можем использовать двойное отрицание (на второй строчке это NOT NOT), или же “или” с нулем для округления. Дело в том, что если мы будем брать это число с запятой и использовать его в битовой операции, то, как говорилось ранее, при конвертировании в двоичное число JavaScript возьмет лишь целую часть и дальше будет его хранить в двоичном формате. Естественно, это очень очевидный, но понятный способ, почему здесь получится 3 – мы лишь берем целую часть от 3-х, говорим “3” или “0”. Или же мы можем сказать “не 3” и снова “не 3”. Иными словами, берем целую часть от этого длинного числа с запятой – 3, умножаем это на -1 и умножаем на -1 снова. Получается 3.

На этом вводный урок окончен. В следующий раз мы приступим к более глубокому изучению чисел, строк и, возможно, уже перейдем к массивам – более интересным вещам.

 

Программирование на JavaScript. Урок 2: Строки. Объекты. Прототипы

 

 

Расскажите друзьям:Share on FacebookShare on VKShare on Google+Tweet about this on Twitter