Главная страница   /   4.4. Использование переменных и типов (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

4.4. Использование переменных и типов

Вы определяете переменную, используя ключевое слово var, также вы можете опционально в этом же выражении присвоить переменной значение. Переменные, которые определены в функции, называются локальными переменными, они доступны только внутри функции. Переменные, которые определены напрямую в элементе script называются глобальными переменными, они доступны всем, включая другие скрипты. В листинге 4-6 показано использование локальных и глобальных переменных.

Листинг 4-6: Использование локальных и глобальных переменных
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
</head>
<body>
	<script type="text/javascript">
		var myGlobalVar = "apples";
		function myFunc(name) {
			var myLocalVar = "sunny";
			return ("Hello " + name + ". Today is " + myLocalVar + ".");
		};
		document.writeln(myFunc("Adam"));
	</script>
	<script type="text/javascript">
		document.writeln("I like " + myGlobalVar);
	</script>
</body>
</html>

Еще раз повторю, что JavaScript – это язык со слабой типизацией. Это не означает, что в JavaScript нет типов. Это только обозначает, что вам не нужно напрямую указывать тип переменной, а также вы можете совершенно без проблем присвоить одной переменной несколько типов. JavaScript определит тип, основываясь на значении, которое вы присвоили переменной, а также будет свободно переключаться между разными типами в зависимости от содержания, в котором они используются. Результат выполнения кода из листинга 4-6 таков:

Hello Adam. Today is sunny.

I like apples

Использование примитивных типов

В JavaScript представлено три примитивных типа. Это string, number и boolean. Кажется, что список очень короткий, но JavaScript очень гибко управляется с этими типами.

Работа со строками

Значения для типа string определяются с использованием одинарных или двойных кавычек, как показано в листинге 4-7.

Листинг 4-7: Определение строковых переменных
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">
		var firstString = "This is a string";
		var secondString = 'And so is this';
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

Знаки кавычек, которые вы используете, должны совпадать. Например, вы не можете начать строку с одинарной кавычки, а закончить двойными.

Работа с булевскими переменными

Булев тип (boolean) имеет два значения: true и false. В листинге 4-8 показано, как используются оба значения. Булев тип наиболее полезен при работе с условными операторами, например if-операторами.

Листинг 4-8: Определение булевского значения
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">
		var firstBool = true;
		var secondBool = false;
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

Работа с числами

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

Листинг 4-9: Определение числовых значений
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">
		var daysInWeek = 7;
		var pi = 3.14;
		var hexValue = 0xFFFF;
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

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

Создание объектов

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

Листинг 4-10: Создание объекта
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">
		var myData = new Object();
		myData.name = "Adam";
		myData.weather = "sunny";
		console.log("Hello " + myData.name + ". ");
		console.log("Today is " + myData.weather + ".");
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

Я создал объект new Object(), а результат (только что созданный объект) я назначил переменной myData. Как только объект создался, я могу назначить ему свойства, просто указав значение, например, так:

myData.name = "Adam";

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

console.log("Hello " + myData.name + ". ");

Использование литералов объекта

Можно определить объект и его свойства за один шаг, используя формат литерала объекта. В листинге 4-11 показано, как это делается.

Листинг 4-11: Использование формата литерала объекта
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">
		var myData = {
			name: "Adam",
			weather: "sunny"
		};
		console.log("Hello " + myData.name + ". ");
		console.log("Today is " + myData.weather + ".");
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

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

Использование функций как методов

Одной из особенностей, которые мне больше всего нравятся в JavaScript, является способ, каким вы можете добавить функцию объекту. Функция, определенная в объекте, называется методом. Я не знаю, почему, но я считаю это очень элегантным и бесконечно приятным действом. В листинге 4-12 показано, как можно добавить метод.

Листинг 4-12: Добавление метода объекту
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">
		var myData = {
			name: "Adam",
			weather: "sunny",
			printMessages: function () {
				console.log("Hello " + this.name + ". ");
				console.log("Today is " + this.weather + ".");
			}
		};
		myData.printMessages();
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

В этом примере я использовал функцию, чтобы создать метод printMessages. Обратите внимание, что ссылаясь на свойство, определенное в объекте, я использовал ключевое слово this. Когда функция используется в качестве метода, функция передается объекту, в котором был вызван метод, в качестве аргумента при помощи специальной переменной this. Результат выполнения кода таков:

Hello Adam.

Today is sunny.

Работа с объектами

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

Чтение и изменение значений свойств

Наиболее очевидной вещью, которую мы можем сделать с объектом, является чтение и изменение значений свойств, которые определяет объект. Для этого существует два различных синтаксических стиля, они оба представлены в листинге 4-13.

Листинг 4-13: Чтение и изменение свойств объекта
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">
		var myData = {
			name: "Adam",
			weather: "sunny",
		};
		myData.name = "Joe";
		myData["weather"] = "raining";
		console.log("Hello " + myData.name + ".");
		console.log("It is " + myData["weather"]);
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

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

myData.name = "Joe";

Вы можете прочитать текущее значение (без знака равенства), а также назначить новое, используя знак равенства (=). Второй способ – это "массивная" нотация:

myData["weather"] = "raining";

В данном случае имя свойства вы заключаете в квадратные скобки ([ и ]). Это может быть очень удобным способом доступа к свойству, потому что вы можете обратиться к нужному свойству, используя переменную:

var myData = {
	name: "Adam",
	weather: "sunny",
};
var propName = "weather";
myData[propName] = "raining";

Это основа перечисления свойств объекта, о чем я сейчас расскажу.

Перечисление свойств объекта

Вы перечисляете свойства объекта, используя оператор for...in. В листинге 4-14 показано, как можно использовать этот оператор.

Листинг 4-14: Перечисление свойств объекта
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">
		var myData = {
			name: "Adam",
			weather: "sunny",
			printMessages: function () {
				console.log("Hello " + this.name + ". ");
				console.log("Today is " + this.weather + ".");
			}
		};
		for (var prop in myData) {
			console.log("Name: " + prop + " Value: " + myData[prop]);
		}
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

В цикле for...in в блоке кода выполняются выражения для каждого свойства объекта myData. Переменной prop назначено имя свойства, обрабатываемого при каждой итерации. Я использовал "массивную" нотацию, чтобы получить значение свойства объекта. Результат выполнения кода из листинге таков (я отформатировал результаты, чтобы их было проще читать):

Name: name Value: Adam
Name: weather Value: sunny
Name: printMessages Value: function () {
	console.log("Hello " + this.name + ". ");
	console.log("Today is " + this.weather + ".");
}

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

Добавление и удаление свойств и методов

Даже если вы использовали литералы объекта, вы все равно можете определить для объекта новые свойства. Пример представлен в листинге 4-15.

Листинг 4-15: Добавление нового свойства объекту
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">
		var myData = {
			name: "Adam",
			weather: "sunny",
		};
		myData.dayOfWeek = "Monday";
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

В этом листинге я добавил объекту новое свойство с именем dayOfWeek. Я использовал точечную нотацию (объединив имя объекта и имя свойства точкой), но также я мог с легкостью использовать "массивную" нотацию.

Как вы уже догадались, в объект также можно добавить новый метод, присвоив значению свойства функцию, как показано в листинге 4-16.

Листинг 4-16: Добавление нового метода в объект
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">
		var myData = {
			name: "Adam",
			weather: "sunny",
		};

		myData.SayHello = function() {
			console.write("Hello");
		};
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

Вы можете удалить свойство или метод из объекта, используя ключевое слово delete, как показано в листинге 4-17.

Листинг 4-17: Удаление свойства из объекта
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">
		var myData = {
			name: "Adam",
			weather: "sunny",
		};
		delete myData.name;
		delete myData["weather"];
		delete myData.SayHello;
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

Как определить, есть ли у объекта свойство

Вы можете определить, есть ли у объекта свойство, используя выражение in, как показано в листинге 4-18.

Листинг 4-18: Как проверить, есть ли у объекта свойство
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">
		var myData = {
			name: "Adam",
			weather: "sunny",
		};

		var hasName = "name" in myData;
		var hasDate = "date" in myData;

		console.log("HasName: " + hasName);
		console.log("HasDate: " + hasDate);
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

В этом примере я сделал проверку для свойства, которое существует, и для свойства, которого нет. Значение переменной hasName будет true, значение свойства hasDatefalse.