Малоизвестные возможности javascript

Содержание:

Положительные особенности технологии
JS Tutorial
Основные типы
Function Expression в сравнении с Function Declaration
10) addEvent()
Примеры методов
Библиотека Frontend-developer, часть 1: Основы
ИЛИ «||» находит первое истинное значение
Сравнение с null и undefined
Функции-«колбэки»
Присваивание
Переменные
Присвоения примитивных и ссылочных типов
Точка с запятой
JS Уроки

Положительные особенности технологии

Что это – JS, и как он работает, мы выяснили. Но почему этот язык программирования получил такое широкое распространение? Основным плюсом считается полная интеграция с HTML, позволяющая трансформировать страницу без ограничений. С помощью JavaScript специалист может:

быстро интегрировать в код страницы любые теги;
определять внешний вид элементов;
выполнять позиционирование объектов;
получать пользовательские данные;
взаимодействовать с сервером (AJAX).

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

JS Tutorial

Циклы в javascript (while, do … while, for)

JS HOMEJS IntroductionJS Where ToJS OutputJS StatementsJS SyntaxJS CommentsJS VariablesJS OperatorsJS ArithmeticJS AssignmentJS Data TypesJS FunctionsJS ObjectsJS EventsJS StringsJS String MethodsJS NumbersJS Number MethodsJS ArraysJS Array MethodsJS Array SortJS Array IterationJS DatesJS Date FormatsJS Date Get MethodsJS Date Set MethodsJS MathJS RandomJS BooleansJS ComparisonsJS ConditionsJS SwitchJS Loop ForJS Loop WhileJS BreakJS Type ConversionJS BitwiseJS RegExpJS ErrorsJS ScopeJS HoistingJS Strict ModeJS this KeywordJS LetJS ConstJS Arrow FunctionJS ClassesJS DebuggingJS Style GuideJS Best PracticesJS MistakesJS PerformanceJS Reserved WordsJS VersionsJS 2009 (ES5)JS 2015 (ES6)JS 2016JS 2017JS JSON

Основные типы

На javascript без jquery slidedown

Для объявления строк используются кавычки — простые или двойные . Между ними нет никакой разницы.

a = 'моя'
b = "строка"

Для конкатенации строк используется оператор .

a = "моя"
b = "строка"
alert(a + ' ' + b)

Более подробно строки и другие базовые типы рассмотрены в статье Базовые типы: Строки, Числа, Boolean.

Javascript — объектный язык. В нем все является объектами. Строки, числа, функции и массивы — все это объекты со своими методами и свойствами. Это надо знать и иметь в виду с самого начала.

Методы объектов вызываются через точку. Например, у строки String есть метод toUpperCase, возвращающий строку в верхнем регистре:

name = "Vasya"

alert( name.toUpperCase() )

Или даже так:

alert( "Vasya".toUpperCase() )

Практически всё в javascript делается при помощи вызова методов различных объектов.

Объекты создаются функциями-конструкторами при помощи директивы new.
Вы можете почитать о них подробнее в разделе Объекты, ООП

В javascript есть два основных способа объявить массив.

Для массива с числовыми индексами обычно используется объект типа Array.

arr = new Array("my", "array")
alert(arr.length)  // 2

Свойство length содержит длину массива, которая всегда равна последнему индексу (в примере выше — это 1) плюс один.

Обычно используется другая, почти эквивалентная, запись массива, использующая квадратные скобки:

arr = 
alert(arr) // "my" <- нумерация от нуля

Новые элементы можно добавить в конец методом push.
Для перебора значений используется цикл .

arr = 
arr.push("третий")

for(var i=0; i<arr.length; i++) {
  alert(arr) 
}

Более подробно массивы с числовыми индексами рассмотрены в статье Массивы .

Для массивов, ключи которых являются строками, используется Object.
Следующая запись задает ассоциативный массив с ключами и :

obj = { 
  n: 1,
  str: "Вася"
}

Для получения свойства объекта используется оператор-аксессор: точка либо квадратные скобки.

obj = {   n: 1,  str: "Вася" }

alert(obj.n) // точка 
alert(obj)

Квадратные скобки позволяют получать свойство по переменной-ключу.

var key = "str"
alert(obj)

Точка используется, если имя свойства точно известно. Вызов вернет свойство по имени , а квадратные скобки — по значению, которое содержится в переменной .

При обращении к отсутствующему свойству возвращается специальное значение undefined.

a = { }  // пустой объект
alert(a.something)  // undefined
alert(a.blabla === undefined)

В примере был использован оператор сравнения без приведения типа.

Более подробно о том, как перебирать ключи массива, и о самих объектах — вы можете узнать из статьи Объекты Javascript в примерах.

Function Expression в сравнении с Function Declaration

Функции высшего порядка в javascript

Давайте разберём ключевые отличия Function Declaration от Function Expression.

Во-первых, синтаксис: как определить, что есть что в коде.

Function Declaration: функция объявляется отдельной конструкцией «function…» в основном потоке кода.
Function Expression: функция, созданная внутри другого выражения или синтаксической конструкции. В данном случае функция создаётся в правой части «выражения присваивания» :

Более тонкое отличие состоит, в том, когда создаётся функция движком JavaScript.

Function Expression создаётся, когда выполнение доходит до него, и затем уже может использоваться.

После того, как поток выполнения достигнет правой части выражения присваивания – с этого момента, функция считается созданной и может быть использована (присвоена переменной, вызвана и т.д. ).

С Function Declaration всё иначе.

Function Declaration можно использовать во всем скрипте (или блоке кода, если функция объявлена в блоке).

Другими словами, когда движок JavaScript готовится выполнять скрипт или блок кода, прежде всего он ищет в нём Function Declaration и создаёт все такие функции. Можно считать этот процесс «стадией инициализации».

И только после того, как все объявления Function Declaration будут обработаны, продолжится выполнение.

В результате, функции, созданные, как Function Declaration могут быть вызваны раньше своих определений.

Например, так будет работать:

Функция была создана, когда движок JavaScript подготавливал скрипт к выполнению, и такая функция видна повсюду в этом скрипте.

…Если бы это было Function Expression, то такой код вызовет ошибку:

Функции, объявленные при помощи Function Expression, создаются тогда, когда выполнение доходит до них. Это случится только на строке, помеченной звёздочкой . Слишком поздно.

Ещё одна важная особенность Function Declaration заключается в их блочной области видимости.

В строгом режиме, когда Function Declaration находится в блоке , функция доступна везде внутри блока. Но не снаружи него.

Для примера давайте представим, что нам нужно создать функцию в зависимости от значения переменной , которое мы получим во время выполнения кода. И затем запланируем использовать её когда-нибудь в будущем.

Такой код, использующий Function Declaration, работать не будет:

Это произошло, так как объявление Function Declaration видимо только внутри блока кода, в котором располагается.

Вот ещё один пример:

Что можно сделать, чтобы была видима снаружи ?

Верным подходом будет воспользоваться функцией, объявленной при помощи Function Expression, и присвоить значение переменной, объявленной снаружи , что обеспечит нам нужную видимость.

Такой код работает, как ожидалось:

Можно упростить этот код ещё сильнее, используя условный оператор :

Когда использовать Function Declaration, а когда Function Expression?

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

Также функции вида чуть более заметны в коде, чем . Function Declaration легче «ловятся глазами».

…Но если Function Declaration нам не подходит по какой-то причине (мы рассмотрели это в примере выше), то можно использовать объявление при помощи Function Expression.

10) addEvent()

Несомненно, важнейший инструмент в управлении событиями! Вне зависимости от того, какой версией вы пользуетесь и кем она написана, она делает то, что написано у неё в названии: присоединяет к элементу обработчик события.

function addEvent(elem, evType, fn) {
	if (elem.addEventListener) {
		elem.addEventListener(evType, fn, false);
	}
	else if (elem.attachEvent) {
		elem.attachEvent('on' + evType, fn)
	}
	else {
		elem = fn
	}
}

Этот код обладает двумя достоинствами — он простой и кросс-браузерный.

Основной его недостаток — в том, он не передает в обработчик для IE. Точнее, этого не делает .

Для передачи правильного this можно заменить соответствующую строку на:

elem.attachEvent("on"+evType, function() { fn.apply(elem) })

Это решит проблему с передачей , но обработчик никак нельзя будет снять, т.к. должен вызывать в точности ту функцию, которая была передана .

Существует два варианта обхода проблемы:

Возвращать функцию, использованную для назначения обработчика:

function addEvent(elem, evType, fn) {
	if (elem.addEventListener) {
		elem.addEventListener(evType, fn, false)
                return fn
	}

        iefn = function() { fn.call(elem) } 
        elem.attachEvent('on' + evType, iefn)
	return iefn
}

function removeEvent(elem, evType, fn) {
	if (elem.addEventListener) {
		elem.removeEventListener(evType, fn, false)
                return
	}
 
        elem.detachEvent('on' + evType, fn)
}

Используется так:

function handler() { 
    alert(this) 
}
var fn = addEvent(elem, "click", handler)
...
removeEvent(elem, "click", fn)

Можно не использовать в обработчике события вообще, а передавать элемент через замыкание:
```
function handler() { 
   // используем не this, а переменную, ссылающуюся на элемент
    alert(*!*elem*/!*) 
}
...
```

В качестве альтернативы и для примера более серьезной библиотеки обработки событий вы можете рассмотреть статью Кросс-браузерное добавление и обработка событий.

Примеры методов

Для начала давайте научим нашего пользователя здороваться:

Здесь мы просто использовали Function Expression (функциональное выражение), чтобы создать функцию для приветствия, и присвоили её свойству нашего объекта.

Затем мы вызвали её. Теперь пользователь может говорить!

Функцию, которая является свойством объекта, называют методом этого объекта.

Итак, мы получили метод объекта .

Конечно, мы могли бы заранее объявить функцию и использовать её в качестве метода, примерно так:

Объектно-ориентированное программирование

Когда мы пишем наш код, используя объекты для представления сущностей реального мира, – это называется объектно-ориентированное программирование или сокращённо: «ООП».

ООП является большой предметной областью и интересной наукой само по себе. Как выбрать правильные сущности? Как организовать взаимодействие между ними? Это – создание архитектуры, и есть хорошие книги по этой теме, такие как «Приёмы объектно-ориентированного проектирования. Паттерны проектирования» авторов Эрих Гамма, Ричард Хелм, Ральф Джонсон, Джон Влиссидес или «Объектно-ориентированный анализ и проектирование с примерами приложений» Гради Буча, а также ещё множество других книг.

Существует более короткий синтаксис для методов в литерале объекта:

Как было показано, мы можем пропустить ключевое слово и просто написать .

Нужно отметить, что эти две записи не полностью эквивалентны

Есть тонкие различия, связанные с наследованием объектов (что будет рассмотрено позже), но на данном этапе изучения это неважно. В большинстве случаев сокращённый синтаксис предпочтителен

Библиотека Frontend-developer, часть 1: Основы

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

Многие, возможно, зададут вопрос: «А зачем книги? Есть же браузер, не?». Безусловно, разработчик должен уметь пользоваться поисковой строкой, уметь искать, и, наверное, самое главное — уметь правильно задавать вопросы, но книги нужны для более глубокого понимания того, с чем вы работаете. Книги позволяют взглянуть на некоторые вещи с «академической» стороны. Мы можем провести аналогию с образованием в высших учебных заведениях. В любом ВУЗе мы читаем книги, которые были написаны кандидатами технических наук и профессорами, чтобы потом сдать сессию, получить хорошую стипендию и жить дальше до следующей сессии, повышая сложность материала на каждой контрольной точке. Теперь смотрим на сферу и видим, что мы читаем академический материал, после идем на собеседование, удачно его проходим, получаем желанный оффер, а после повышаем свою квалификацию к следующей контрольной точке (новому рабочему месту или новой должности). В принципе, с алгоритмом мы разобрались. Идем дальше.

Сейчас кто-то скажет, что мы читаем книги только для собеседований, но на самом деле это не так. Конечно, чтобы решать задачи на всплытие или удаление всех дубликатов в массиве книги не нужны — достаточно браузера или опытного разработчика на habr, который в своей статье распишет что да как. Но вот оценка решений, подбор оптимального решения и оптимизированной реализации, которая не требует потом десятки часов рефакторинга — тут могут помочь только книги в связке с опытом разработки. Скажем прямо — книги дают более глобальное понимание всей frontend-разработки, глубокое понимание работы сложных и примитивных механизмов в языке, умение оценивать правильность решения проблемы на основе тех же самых паттернов проектирования, делать код более читаемым, более оптимизированным.

ИЛИ «||» находит первое истинное значение

Описанная выше логика соответствует традиционной. Теперь давайте поработаем с «дополнительными» возможностями JavaScript.

Расширенный алгоритм работает следующим образом.

При выполнении ИЛИ || с несколькими значениями:

Оператор выполняет следующие действия:

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

Значение возвращается в исходном виде, без преобразования.

Другими словами, цепочка ИЛИ возвращает первое истинное значение или последнее, если такое значение не найдено.

Например:

Это делает возможным более интересное применение оператора по сравнению с «чистым, традиционным, только булевым ИЛИ».

Получение первого истинного значения из списка переменных или выражений.

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

С помощью :

Если бы и , и были ложными, в качестве результата мы бы наблюдали .
Сокращённое вычисление.

Операндами могут быть как отдельные значения, так и произвольные выражения. ИЛИ вычисляет их слева направо. Вычисление останавливается при достижении первого истинного значения. Этот процесс называется «сокращённым вычислением», поскольку второй операнд вычисляется только в том случае, если первого недостаточно для вычисления всего выражения.

Это хорошо заметно, когда выражение, указанное в качестве второго аргумента, имеет побочный эффект, например, изменение переменной.

В приведённом ниже примере не изменяется:

Если бы первый аргумент имел значение , то приступил бы к вычислению второго и выполнил операцию присваивания:

Присваивание – лишь один пример. Конечно, могут быть и другие побочные эффекты, которые не проявятся, если вычисление до них не дойдёт.

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

В большинстве случаев лучше использовать «обычный» , чтобы облегчить понимание кода, но иногда это может быть удобно.

Сравнение с null и undefined

Поведение и при сравнении с другими значениями — особое:

При строгом равенстве: Эти значения различны, так как различны их типы.
При нестрогом равенстве: Эти значения равны друг другу и не равны никаким другим значениям. Это специальное правило языка.
При использовании математических операторов и других операторов сравнения: Значения преобразуются к числам: становится , а – .

Посмотрим, какие забавные вещи случаются, когда мы применяем эти правила

И, что более важно, как избежать ошибок при их использовании

Сравним с нулём:

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

Причина в том, что нестрогое равенство и сравнения работают по-разному. Сравнения преобразуют в число, рассматривая его как . Поэтому выражение (3) истинно, а ложно.

С другой стороны, для нестрогого равенства значений и действует особое правило: эти значения ни к чему не приводятся, они равны друг другу и не равны ничему другому. Поэтому (2) ложно.

Значение несравнимо с другими значениями:

Почему же сравнение с нулём всегда ложно?

На это есть следующие причины:

Сравнения и возвращают , потому что преобразуется в , а – это специальное числовое значение, которое возвращает при любых сравнениях.
Нестрогое равенство возвращает , потому что равно только , и ничему больше.

Зачем мы рассмотрели все эти примеры? Должны ли мы постоянно помнить обо всех этих особенностях? Не обязательно. Со временем все они станут вам знакомы, но можно избежать проблем, если следовать надёжным правилам:

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

Функции-«колбэки»

Рассмотрим ещё примеры функциональных выражений и передачи функции как значения.

Давайте напишем функцию с тремя параметрами:

Текст вопроса

Функция, которая будет вызываться, если ответ будет «Yes»

Функция, которая будет вызываться, если ответ будет «No»

Наша функция должна задать вопрос и, в зависимости от того, как ответит пользователь, вызвать или :

На практике подобные функции очень полезны. Основное отличие «реальной» функции от примера выше будет в том, что она использует более сложные способы взаимодействия с пользователем, чем простой вызов . В браузерах такие функции обычно отображают красивые диалоговые окна. Но это уже другая история.

Аргументы функции ещё называют функциями-колбэками или просто колбэками.

Ключевая идея в том, что мы передаём функцию и ожидаем, что она вызовется обратно (от англ. «call back» – обратный вызов) когда-нибудь позже, если это будет необходимо. В нашем случае, становится колбэком’ для ответа «yes», а – для ответа «no».

Мы можем переписать этот пример значительно короче, используя Function Expression:

Здесь функции объявляются прямо внутри вызова . У них нет имён, поэтому они называются анонимными. Такие функции недоступны снаружи (потому что они не присвоены переменным), но это как раз то, что нам нужно.

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

Функция – это значение, представляющее «действие»

Обычные значения, такие как строки или числа представляют собой данные.

Функции, с другой стороны, можно воспринимать как «действия».

Мы можем передавать их из переменной в переменную и запускать, когда захотим.

Присваивание

Давайте отметим, что в таблице приоритетов также есть оператор присваивания . У него один из самых низких приоритетов: .

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

Тот факт, что является оператором, а не «магической» конструкцией языка, имеет интересные последствия.

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

Вызов записывает в и возвращает его.

Благодаря этому присваивание можно использовать как часть более сложного выражения:

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

Забавное применение присваивания, не так ли? Нам нужно понимать, как это работает, потому что иногда это можно увидеть в JavaScript-библиотеках.

Однако писать самим в таком стиле не рекомендуется. Такие трюки не сделают ваш код более понятным или читабельным.

Рассмотрим ещё одну интересную возможность: цепочку присваиваний.

Такое присваивание работает справа налево. Сначала вычисляется самое правое выражение , и затем результат присваивается переменным слева: , и . В конце у всех переменных будет одно значение.

Опять-таки, чтобы код читался легче, лучше разделять подобные конструкции на несколько строчек:

Польза от такого стиля особенно ощущается при быстром просмотре кода.

Переменные

Можно объявить при помощи:

(константа, т.е. изменению не подлежит)
(устаревший способ, подробности позже)

Имя переменной может включать:

Буквы и цифры, однако цифра не может быть первым символом.
Символы и используются наряду с буквами.
Иероглифы и символы нелатинского алфавита также допустимы, но обычно не используются.

Переменные типизируются динамически. В них могут храниться любые значения:

Всего существует 8 типов данных:

для целых и вещественных чисел,
для работы с целыми числами произвольной длины,
для строк,
для логических значений истинности или ложности: ,
– тип с единственным значением , т.е. «пустое значение» или «значение не существует»,
– тип с единственным значением , т.е. «значение не задано»,
и – сложные структуры данных и уникальные идентификаторы; их мы ещё не изучили.

Оператор возвращает тип значения переменной, с двумя исключениями:

Подробности: Переменные, Типы данных.

Присвоения примитивных и ссылочных типов

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

JavaScript всегда использует присвоение по значению

И это очень важно: когда присваиваемое значение является одним из 5 JavaScript’овых примитивов (Boolean, null, undefined, String и Number) — присваивается фактическое значение. Однако, когда присваиваемое значение является типом Array, Function или Object, присваивается ссылка на объект в памяти

Например, в коде ниже переменной присваивается значение . Т. к. является примитивом (String), то переменной присваивается строковое значение , и она может рассматриваться как отдельная (независимая) переменная. Соответственно, изменения никак не отразятся на .

А теперь попробуем то же самое с типом .

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

Точка с запятой

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

Так тоже будет работать:

В этом случае JavaScript интерпретирует перенос строки как «неявную» точку с запятой. Это называется .

В большинстве случаев новая строка подразумевает точку с запятой. Но «в большинстве случаев» не значит «всегда»!

В некоторых ситуациях новая строка всё же не означает точку с запятой. Например:

Код выведет , потому что JavaScript не вставляет здесь точку с запятой. Интуитивно очевидно, что, если строка заканчивается знаком , значит, это «незавершённое выражение», поэтому точка с запятой не требуется. И в этом случае всё работает, как задумано.

Но есть ситуации, где JavaScript «забывает» вставить точку с запятой там, где она нужна.

Ошибки, которые при этом появляются, достаточно сложно обнаруживать и исправлять.

Пример ошибки

Если вы хотите увидеть конкретный пример такой ошибки, обратите внимание на этот код:

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

А теперь добавим перед кодом и не поставим в конце точку с запятой:

Теперь, если запустить код, выведется только первый , а затем мы получим ошибку!

Всё исправится, если мы поставим точку с запятой после :

Теперь мы получим сообщение «Теперь всё в порядке», следом за которым будут и .

В первом примере без точки с запятой возникает ошибка, потому что JavaScript не вставляет точку с запятой перед квадратными скобками . И поэтому код в первом примере выполняется, как одна инструкция. Вот как движок видит его:

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

Мы рекомендуем ставить точку с запятой между инструкциями, даже если они отделены переносами строк. Это правило широко используется в сообществе разработчиков. Стоит отметить ещё раз – в большинстве случаев можно не ставить точку с запятой. Но безопаснее, особенно для новичка, ставить её.

JS Уроки

JS HOMEJS IntroductionJS Where ToJS OutputJS StatementsJS SyntaxJS CommentsJS VariablesJS OperatorsJS ArithmeticJS AssignmentJS Data TypesJS FunctionsJS ObjectsJS ScopeJS EventsJS StringsJS String MethodsJS NumbersJS Number MethodsJS ArraysJS Array MethodsJS Array SortJS Array IterationJS DatesJS Date FormatsJS Date Get MethodsJS Date Set MethodsJS MathJS RandomJS BooleansJS ComparisonsJS ConditionsJS SwitchJS Loop ForJS Loop WhileJS BreakJS Type ConversionJS BitwiseJS RegExpJS ErrorsJS DebuggingJS HoistingJS Strict ModeJS this KeywordJS Style GuideJS Best PracticesJS MistakesJS PerformanceJS Reserved WordsJS VersionsJS Version ES5JS Version ES6JS JSON