Array  break  case  catch  const  continue  default  Date  do Error  else  Function  false  finally  for

function  if  in  instanceof  Infinity  Math  NaN  Number  new  null  Object  Promise  prototype  RegExp

return  String  switch  this  then  throw  try  true  undefined  var  with  while
	
alert(s)
appendChild(tagName)
fillRect()
pow(base, n)
sin(radians)
cos(radians)
random()
isNaN()
test()
sqrt(n)
prompt(s)
parseInt(s) parseFloat(s)
floor(f) 
ceil(f)
charAt(n)
indexOf(substring, offset)
substring(start, end)
replace(pattern, replacement)
toLowerCase(s)
toUpperCase(s)
abs(n)
splice(start, length, newItem1, newItem2, ...)
split(pattern, limit)
toString()
createElement(tagName)

getElementById(id)

getContext(contextType)

removeChild(domElement)

strokeText(text, x, y)

fillText(text, x, y)

measureText(text)

setItem(key, value)

join(delimeter)

round(floatNumber)
	

Переменные

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

Переменные в JavaScript надо объявлять и определять с помощью ключевого слова var. Определять пока ещё можно и без него, но я очень постараюсь объяснить сразу, почему так делать не надо.

Но сначала о том, что происходит когда компьютер обрабатывает строку вида var a = 5;

Эта строка (как и любая строка JavaScript кода выполняющегося в браузере) сначала будет скомпилирована в байт-код. Затем байт-код будет отдан интерпретатору. В результате работы интерпретатора компьютер получит команду "пометить" участок величиной в четыре байта из отданной операционной системой браузеру оперативной памяти именем a и запишет в эти четыре байта значение 5. (Google отказались от генерации байт-кода в своем браузере Chrome, так оно, оказывается, быстрее).

Сложно? На самом деле все еще сложее. Все зависит от того насколько глубоко копнуть.

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

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

Так почему же надо использовать слово var при объявлении переменных?

Во-первых следует иметь ввиду, что уже в довольно скором времени объявлять в программе переменные не используя var станет нельзя. Чтобы привыкнуть всегда его объявлять, вы можете всегда писать "use strict" первой строчкой в вашей функции. Это заставит интерпретатор языка следить, объявили вы переменную используя var или нет.

Во-вторых, читайте дальше внимательно.

function varExample() {
	var x, y = 102; //Объявили переменные x и y, y определили - то есть присвоили ей значение 102
	alert(x); //Выведет undefined (неопределено)
	alert(y); //Выведет 102
	alert(z); //Ошибка - о переменной z никто ничего не знает!
}
	

Сравним с вариантом без var, чтобы избежать в случае с x ошибки, такой же как с z я добавил определение x

function varExample() {
	x = 5, y = 102; //Определили переменные x и y то есть присвоили им значения
	alert(x); //Выведет 5
	alert(y); //Выведет 102
	alert(z); //Ошибка - о переменной z никто ничего не знает!
}

Казалось бы, практически никакой разницы! Мы можем сразу присваивать значения переменных и сэкономить три нажатия на клавиши, не надо писать никакое var!

Но посмотрим дальше. Не знаю к месту ли, но попробую привести такой практический пример. Например я хочу вывести на веб-странице "псевдоокно" (так я называю здесь "окна", в которых показываются подсказки к ключевым словам) поверх всех других "псевдоокон". (На самом деле я сейчас обхожусь здесь всегда одним "псевдоокном", но не исключено, что в будущем сделаю несколько. Например, чтобы можно было открывать подсказки сразу к нескольким ключевым словам.).

У меня возможно будет функция, определяющая самый "близкий к смотрящему на экран" элемент на экране, точнее на веб-странице. Это свойство элементов веб-страниц задается свойством css z-index. Я назову свою функцию, которая будет это делать getMaximumZIndexOnPage();

Далее, я хочу вывести свое окно так, чтобы оно не перекрывало другие, если они открыты. Мне нужно как-то определить, в какую точку на экране поместить левый верхний угол окна (в комп. двумерной графике принято использовать левую верхнюю точку как начало координат.), так, чтобы оно перекрыло как можно меньше уже открытых окон. Я сделаю это в функции getOptimalAppWindowCoordinates();

А теперь вернемся к нашей теме: почему переменные всегда надо писать используя var. В контексте этой темы нас не интересует, что будет внутри функций, о которых я написал выше. Но предположим, что внутри определения функции getOptimalAppWindowCoordinates есть строка z = 1 + 1; и нигде в теле этой функции ранее не встречается такое: var z;

function varExample() {
	//Определяю самый "близкий к смотрящему на экран"
	//что внутри этой функции нам сейчас неинтересно
	function getMaximumZIndexOnPage(){ /* ... */ return 100500;}
	var z = getMaximumZIndexOnPage() + 1;//Теперь я знаю, чему должен быть равен z-index нового окна
	function getOptimalAppWindowCoordinates() { //Координаты окна, чтобы перекрыть кaк можно меньше других открытых
		//.. что в ней нас сейчас не иинтерсует
		//... но допустим в ней есть такой фрагмент...
		z = 1 + 1;
		//.... тут еще много всего
	}
	var coord = getOptimalAppWindowCoordinates();
	//а теперь я хочу показать окно, но чему равно z?
	alert(z);//Выведет 2, но моя программа ожидала, что тут будет значение полученное с помощью
			//getMaximumZIndexOnPage !
}

Так как я не использовал слово var при определении переменной z внутри тела функции getOptimalAppWindowCoordinates, она (переменная z) определилась как глобальная, то есть доступная вне функции, в которой определена фактически. И если бы я не определил ее сам пятью строками выше, это ни на что бы не повлияло! То есть после выполнения z = 1 + 1; переменная "утекает" в функцию varExample, даже если она там совершенно не нужна!

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

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

Надеюсь, я понятно изложил.

Тест на новые слова
КОММЕНТАРИИ
  • Александр Дейко:
    Пример с "утечкой"))
    В 5 строке кода переменная объявлена(var z), в функции (getOptimalAppWindowCoordinates) внутри тела появляется фрагмент (z = 1 + 1)! Этой строкой мы просто перезатерли значение переменной!? Разве не так?
    что бы изменилось, если бы к фрагменту (z = 1 + 1) м ы бы добавили var ?
    Т.е. var z = 1 +1;
    Если я все правильно понял!?))
    02:14 03.03.2015
    • Andrey Lamzin:
      Перезатерли, все верно
      Если бы к фрагменту (z = 1 + 1) мы бы добавили var, создалась бы новая переменная, доступная только внутри функции getOptimalAppWindowCoordinates.
      Таким образом, значение внешней по отношению к функции getOptimalAppWindowCoordinates переменной z не изменилось бы.
      10:33 03.03.2015
      10:34 03.03.2015

  • Несохраненный_файл.js
Строка: 0, Символ: 0

  • {name}
  • У вас пока нет файлов
 

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

 

Правильно!

Не забывайте переодически проходить этот тест по мере чтения новых статей.

 

Ошибка!

 

Осталось: 0 сек.

Health:

Score:

 

Что значит:

 

 

 


Информация

Загрузите файл с исходным кодом программы на языке яваскрипт.

Файл должен содержать одну главную функцию, имя которой должно совпадать с именем файла.

Например, файл называется task1.js, имя главной функции должно быть task1.

Все остальные функции должны быть определены внутри главной.

*

Информация

Сохраняемый код должен содержать одну главную функцию.

Например:

function myFirstProgram() {
	//Тут все остальное, включая вспомогательные функции
}
					




Простой пароль
Пароли не совпадают