Использование переменных и типов
Вы определяете переменную, используя ключевое слово 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, значение свойства hasDate – false.
