Главная страница   /   5.4. Использование переменных и типов (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

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

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

Листинг 5-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 определит тип, основываясь на значении, которое вы присвоили переменной, а также будет свободно переключаться между разными типами в зависимости от содержания, в котором они используются. Результат работы кода из листинга 5-6 таков:

Hello Adam. Today is sunny. I like apples

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Листинг 5-10: Создание объекта
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
</head>
<body>
	<script type="text/javascript">
		var myData = new Object();
		myData.name = "Adam";
		myData.weather = "sunny";

		document.writeln("Hello " + myData.name + ". ");
		document.writeln("Today is " + myData.weather + ".");
	</script>
</body>
</html>

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

myData.name = "Adam";

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

document.writeln("Hello " + myData.name + ". ");

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

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

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

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

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

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

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

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

Hello Adam. Today is sunny.

Совет

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

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

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

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

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

Листинг 5-13: Чтение и изменение свойств объекта
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
</head>
<body>
	<script type="text/javascript">
		var myData = {
			name: "Adam",
			weather: "sunny",
		};

		myData.name = "Joe";
		myData["weather"] = "raining";

		document.writeln("Hello " + myData.name + ".");
		document.writeln("It is " + myData["weather"]);
	</script>
</body>
</html>

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

myData.name = "Joe";

Второй способ – это "массивная" нотация (как при обращении к индексу массива), которая выглядит следующим образом:

myData["weather"] = "raining";

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

		myData.sayHello = function() {
			document.writeln("Hello");
		};

		delete myData.name;
		delete myData["weather"];
		delete myData.sayHello;
	</script>
</body>
</html>

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

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

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

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

		document.writeln("HasName: " + hasName);
		document.writeln("HasDate: " + hasDate);
	</script>
</body>
</html>

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