Файл: Не нужен.pdf

20
Введ ение в
Ja va
Scrip t
Объявление переменной через let позволяет в про- грамме создать переменную, значение которой может быть присвоено позже. Директива let объявляет пере- менную с блочной областью видимости с возможно- стью инициализировать ее значением.
let myNumber
// Объявление переменной.
myNumber
=
10
// Инициализация переменной.
let myString
=
'
Hello World!
'
// Объявление и инициализация пе- ременной.
Также в одной строке можно объявить несколько пе- ременных:
let i
,
j
,
k
// Объявление трех переменных.
let num
=
10, char
=
'
C
'
// Объявление и инициализация двух переменных.
Однако константы должны быть инициализированы во время объявления:
const myName
= '
Mike
'
После инициализации JavaScript автоматически уста- навливает тип переменной для присвоенного значения.
Последующее назначение другого типа данных выпол- няется в программе позже, чтобы изменить тип дан- ных. Текущий тип переменной можно узнать по клю- чевому слову typeof z
1
Создайте HTML-документ. Объявите и про- инициализируйте несколько переменных разного типа.
const
fi rstName
=
'
Mike
'
const valueOfPi
=
3.142
let isValid
= true let jsObject
= console let jsMethod
= console.log let jsSymbol =
Symbol( )
let emptyVariable
= null let unusedVariable z
2
Для вывода типа данных каждой переменной добавьте операторы:
variables.html

21
console.log( '
fi rstName:
' + typeof
fi rstName
)
console.log( '
valueOfPi:
' + typeof valueOfPi
)
console.log( '
isValid:
' + typeof isValid
)
console.log( '
jsObject:
' + typeof jsObject
)
console.log( '
jsMethod:
' + typeof jsMethod
)
console.log( '
jsSymbol:
' + typeof jsSymbol
)
console.log( '
emptyVariable:
' + typeof emptyVariable
)
console.log( '
unusedVariable:
' + typeof unusedVariable
)
z
3
Сохраните HTML-документ, затем открой- те его в браузере и запустите консоль. Проа- нализируйте полученные результаты — типы данных.
Создание функций
Объявление функции состоит из одного или несколь- ких операторов, сгруппированных вместе в фигурные скобки
{ }
. Функция вызывает свои инструкции и воз- вращает в результате единственное значение. Функ- ции могут вызываться по требованию программы. Что- бы отличать встроенные функции от определяемых пользователем, функции, которые являются свой ством объекта, например console.log()
, называются методами.
Встроенные и определяемые пользователем функции содержат завершающие круглые скобки, которые мо- гут принимать значения аргумента. Например, аргу- мент, переданный в скобках метода console.log( )
Количество аргументов, передаваемых функции, как правило, должно соответствовать количеству
Оператор конкате- нации + в данном примере исполь- зуется для вывода объединенной тек- стовой строки.
Вы будете удивле- ны, увидев, что пе- ременная, которой присво ено значе- ние null
, описыва- ется как тип object
, а не тип null
. Это распространен- ная ошибка языка
JavaScript.

22
Введ ение в
Ja va
Scrip t
параметров, указанных в скобках. Например, опре- деляемая пользователем функция, требующая только один аргумент, выглядит так:
function
ƆƊƝ ƒƑƋƈƔƆƆ ( ƍžƎžƊƃƐƎ ) {
// Здесь будет ваш код.
}
Функция может иметь несколько параметров, которые указываются через запятую в скобках. При необходи- мости вы можете указать значение по умолчанию, кото- рое будет использоваться, когда вызов функции не пе- редает аргумент, например:
function
ƆƊƝ ƒƑƋƈƔƆƆ ( ƍžƎžƊƃƐƎ, ƍžƎžƊƃƐƎ = ƅƋžƕƃƋƆƃ ) {
// Здесь будет ваш код.
}
Выбирая собственные имена параметров, необходимо следовать тем же правилам, что и при выборе имен переменных. Имена параметров можно использовать в функции для ссылки на значения аргументов, пере- данных при вызове функции.
Функциональный блок может включать оператор return
Он предназначен для возвращения значения выраже- ния в качестве результата выполнения функции. Как только выполнение программы доходит до этого ме- ста, функция останавливается, и значение возвраща- ется в вызвавший ее код.
function
имя функции ( параметр, параметр = значение ) {
// Здесь будет ваш код.
return
результат
}
В функциональном блоке также может находиться вы- зов других функций.
z
1
Создайте HTML-документ. Создайте функ- цию, возвращающую значения переданно- го аргумента, возведенного в квадрат (во вто- рую степень).
Обратите внима- ние, что в пред- почтительном фор- мате объявления функции откры- вающая фигурная скобка {находит- ся в той же стро- ке, что и ключевое слово function
Вы можете опу- стить оператор return или использо- вать ключевое сло- во return без указа- ния значения, тогда функция в резуль- тате вернет значе- ние undefi ned functions.html

23
function square
( arg
) {
return arg
* arg
}
z
2
Добавьте функцию, возвращающую результат сложения.
function add
( argOne
, argTwo
=
10
) {
return argOne
+ argTwo
}
z
3
Теперь добавьте функцию, возвращающую результат возведения в квадрат и сложения, как показано ниже.
function squareAdd
( arg
) {
let result
= square
( arg
)
return result
+ add
( arg
)
}
z
4
Добавьте операторы, которые вызывают функции и выводят возвращаемые значения на экран.
console.log( '
8 x 8:
' + square
(
8
) )
console.log( '
8 + 20:
' + add
(
8
,
20
) )
console.log( '
8 + 10:
' + add
(
8
) )
console.log( '
(8 x 8) + (8 + 10):
' + squareAdd
(
8
) )
z
5
Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проана- лизируйте полученный результат — возвра- щаемые функциями значения.
Символ * — это оператор арифме- тического умноже- ния в JavaScript.
Обратите внимание, что в нашем случае используется значение второго параметра по умолчанию
(10), когда при вызове функции передается только одно значение аргумента.

24
Введ ение в
Ja va
Scrip t
Назначение функций
Функции — важный инструмент в JavaScript. Это некоторый фрагмент кода, который можно описать один раз, а затем вызывать на выполнение в разных частях программы любое число раз.
Важно понимать, что оператор
( )
— это компонент оператора вызова, который фактически вызывает функцию. Это означает, что оператор может назна- чить функцию переменной, указав только имя функ- ции. Затем переменную можно использовать для вы- зова функции. Однако будьте внимательны, если вы попытаетесь назначить функцию переменной, указав ее имя, за которым следует символ
( )
. Такая функ- ция будет вызвана, и будет присвоено значение, воз- вращаемое этой функцией.
Поднятие
Хотя код читается интерпретатором JavaScript сверху вниз, на самом деле он выполняет два этапа. На пер- вом этапе ищутся объявления функций и запомина- ется все, что находится в процессе, то есть поднятие.
Второй этап — это когда код фактически выполняет- ся интерпретатором.
Поднятие позволяет вызовам функций появляться в коде до объявления функции, так как интерпрета- тор уже распознал функцию на первом этапе. Одна- ко на первом этапе не распознаются функции, ко- торые были присвоены переменным с помощью ключевых слов let или const
!
Анонимные функции
При присвоении функции переменной имя функ- ции можно не указывать, так как ее можно вызвать в операторе, указав имя переменной и оператор
()
Такие функции называются анонимными функци- ональными выражениями. Их синтаксис выглядит следующим образом:
let
переменная = function ( параметры ) { операторы ;
return
ƅƋžƕƃƋƆƃ}
При присвоении переменной именованной функции указывайте в операторе только имя функции.
Переменные, ко- торые были объяв- лены с использо- ванием прежнего ключевого сло- ва var, также были подняты. Перемен- ные, которые были объявлены с по- мощью ключевых слов let или const, не поднимались.

25
Анонимные функциональные выражения также мож- но сделать самовызывающимися, заключив функцию целиком в круглые скобки ( ) и добавив в конце вы- ражения оператор ( ). Это означает, что при первой загрузке сценария браузером операторы автоматиче- ски выполняются один раз. Синтаксис функциональ- ного выражения с автоматическим запуском выгля- дит так:
( function ( ) {
операторы ; return значение } ) ( )
В приведенных в книге примерах для выполнения кода при загрузке скрипта обычно используются са- мовызывающиеся функции.
z
1
Создайте HTML-документ. Вызовите функ- цию, которая еще не была объявлена.
console.log( '
Hoisted:
' + add
(
100
,
200
) )
z
2
Добавьте функцию, которая вызывается выше.
function add
( numOne
, numTwo
) {
return numOne
+ numTwo
}
z
3
Добавьте функцию, которая назначает ука- занную выше функцию переменной, а потом вызывает назначенную функцию.
let addition
= add console.log( '
Assigned:
' + addition
(
32
,
64
) )
z
4
Назначьте аналогичную, но анонимную функ- цию переменной и вызовите назначенную функцию.
let anon
= function ( numOne
, numTwo
) {
let result
= numOne
+ numTwo
; return result
}
console.log( '
Anonymous:
' + anon
(
9
,
1
) )
z
5
Присвой те значение, возвращаемое самовы- зывающейся функцией, переменной и ото- бразите полученное значение.
Смысл самовызы- вающихся функ- ций может быть не сразу понятен, но к концу этой главы их важность станет более яс- ной и очевидной.
Самовызывающи- еся функциональ- ные выражения также извест- ны как немедлен- но вызываемые функции (IIFE — ча- сто произносится как «iff y»).
anonymous.html

26
Введ ение в
Ja va
Scrip t
let iff y
= ( function ( ) {
let str
= '
Self Invoked Output
' ; return str
} ) ( )
console.log( iff y
)
z
6
Сохраните HTML-документ, затем откройте его в браузере и запустите консоль. Проана- лизируйте полученные результаты — возвра- щаемые функцией значения.
Область видимости
Все переменные в JavaScript имеют определенную область видимости, в пределах которой они могут действовать. Таких областей две — глобальная и ло- кальная.
Глобальная область видимости
Переменная или функция, созданная в этой обла- сти видимости, доступна из любой точки програм- мы. Это означает, что переменные существуют по- стоянно и доступны для функций в одной области.
На первый взгляд это может показаться очень удоб- ным, однако имеется серьезный недостаток, заклю- чающийся в том, что одноименные переменные мо- гут конфликтовать. Представьте, что вы создали глобальную переменную myName
, которой вами было присвоено имя, но затем подключился внешний код, в котором другой разработчик создал глобальную пе- ременную myName с таким же именем. Обе пере- менные существуют в одной области программы, то есть конфликтуют. Таких ситуаций лучше избе- гать, поэтому для хранения примитивных значений https://t.me/it_boooks

27
не рекомендуется создавать глобальные перемен- ные (всех типов данных, за исключением
Object и
Function
).
Локальная область видимости
Переменные, созданные внутри функциональ- ных блоков, доступны локально на протяжении все- го цикла функции. Они существуют только во вре- мя ее выполнения, а затем удаляются. Их область программы ограничена — от места, в котором они были созданы, до последней фигурной скобки} или момента возврата из функции. Рекомендуется объ- являть переменные в начале функционального бло- ка, чтобы их лексическая область видимости соот- ветствовала времени жизни функции. Это означает, что переменные с одинаковыми именами могут су- ществовать внутри отдельных функций без созда- ния конфликта. Например, локальная переменная myName может успешно существовать в програм- ме внутри отдельных функций и внутри функций во включенных внешних кодах. В программе для хранения значений рекомендуется создавать только локальные переменные.
Наиболее эффективный вариант
Объявление глобальных переменных с использова- нием ключевого слова var позволяет конфликтующим переменным с одинаковыми именами перезаписы- вать присвоенные им значения без предупрежде- ния. В этом случае в результате использования бо- лее новых ключевых слов let и const выдается ошибка
Uncaught SyntaxError
. Поэтому в программе для хра- нения значений рекомендуется создавать перемен- ные, объявленные с использованием ключевых слов let или const z
1
Создайте внешний код, в котором вызывает- ся функция для вывода значения глобальной переменной.
let myName
= '
External Script
'
function readName
( ) {console.log( myName
) }
readName
( )
Информация по обнаружению и обработке оши- бок более под- робно описана на стр. 68–69.
JS
external.js scope.html

28
Введ ение в
Ja va
Scrip t
z
2
Создайте HTML-документ, который подклю- чает внешний код и добавляет аналогичный.


z
3
Сохраните оба файла в одной папке, затем откройте HTML-документ, чтобы увидеть сообщение об ошибке конфликта в консоли.
z
4
Отредактируйте оба скрипта, чтобы преобра- зовать глобальные переменные в локальные.
Во избежание конфликта обновите браузер.
function readName
( ) {
let myName
= '
External Script
'; console.log ( myName
)
}
function getName
( ) {
let myName
= '
Internal Script
'; console.log (
myName
)
}
Вызовы функций readName( ) и getName( ) остаются в коде без редактирования.

29