Учебник Ильи Кантора

JavaScript с Ильей Кантором
Методические материалы к блоку JavaScriptв программе подготовки специалистов по дисциплине «Программное обеспечение компьютерных сетей»		Основано на учебнике Ильи Кантора

Установка браузеров, JS-консоль 4

Firefox 4

Установка Firebug 4

Включите консоль 5

Просмотр ошибок 5

Internet Explorer 5

Включаем отладку 6

Просмотр ошибок 6

Другие браузеры 7

Google Chrome 7

Safari 7

Opera 8

IE<8 8

Привет, мир! 9

Тег SCRIPT 9

Внешние скрипты 11

Структура кода 12

Команды 12

Комментарии 13

Переменные 15

Переменная 15

Аналогия из жизни 15

Копирование значений 16

Важность директивы var 17

Константы 19

Имена переменных 19

Имена переменных 19

Зарезервированные имена 20

Правильный выбор имени 20

Введение в типы данных 22

Типы данных 22

Итого 24

Основные операторы 25

Арифметические операторы 25

Приоритет 28

Операторы сравнения и логические значения 33

Логические значения 33

Сравнение строк 34

Сравнение разных типов 35

Строгое равенство 36

Сравнение с null и undefined 36

Итого 37

Условные операторы: if, '?' 39

Оператор if 39

Преобразование к логическому типу 39

Неверное условие, else 40

Несколько условий, else if 40

Оператор вопросительный знак '?' 42

Несколько операторов '?' 44

Нетрадиционное использование '?' 45

Взаимодействие с пользователем: alert, prompt, confirm 46

alert 46

prompt 46

confirm 47

Особенности встроенных функций 47

Резюме 48

Установка браузеров, JS-консоль

1. Firefox

   1. Установка Firebug

   2. Включите консоль

   3. Просмотр ошибок

2. Internet Explorer

   1. Включаем отладку

   2. Просмотр ошибок

3. Другие браузеры

   1. Google Chrome

   2. Safari

   3. Opera

   4. IE<8

Мы будем писать скрипты, которые поддерживают все современные браузеры. Хотя они и стремятся поддерживать стандарты, но все-таки бывают отличия.

Большинство разработчиков сначала пишут скрипты под Firefox или Chrome. Если все работает, скрипт тестируется в остальных браузерах, например в Internet Explorer. Если вы работаете в Linux или MacOS, то IE можно запускать в виртуальной машиной с Windows.

При разработке скриптов всегда возможны ошибки… Впрочем, что я говорю? У вас абсолютно точно будут ошибки, если конечно вы — человек, а не робот инопланетный.

Чтобы читать их в удобном виде, а также получать массу полезной информации о выполнении скриптов, в браузерах есть инструменты разработки.

Firefox

Для разработки в Firefox используется расширение Firebug. Его нужно поставить после установки браузера.

Установка Firebug

Поставьте его со страницы:

1. https://addons.mozilla.org/ru/firefox/addon/firebug/

Перезапустите браузер. Firebug появится в правом-нижнем углу окна:

Если иконки не видно — возможно, у вас выключена панель расширений. Нажмите Ctrl+\ для ее показа.

Ну а если ее нет и там, то нажмите F12 —- это горячая клавиша для запуска Firebug, мышкой его обычно никто не запускает.

Включите консоль

Итак, откройте Firebug. Здесь иллюстрации на английском, русский вариант аналогичен.

Консоль вначале выключена. Нужно включить её в меню Консоль -> панель включена:

Просмотр ошибок

С открытым Firebug зайдите на страницу с ошибкой: bug.html.

Вы можете посмотреть её исходный код, нажав Ctrl + U.

Консоль покажет ошибку:

В данном случае код lalala непонятен интерпретатору и вызвал ошибку.

Кликните на строчке с ошибкой и браузер покажет исходный код. При необходимости включайте дополнительные панели.

Об основных возможностях можно прочитать на сайте firebug.ru.

Internet Explorer

В IE начиная с версии 8 (а лучше 9) есть похожий отладчик. По умолчанию он отключен.

Включаем отладку

Зайдите в меню.

IE 8

Tools -> Internet Options (рус. Инструменты -> Свойства обозревателя)

IE 9

Колесико в правом-верхнем углу - Свойства обозревателя:

Переключитесь во вкладку Дополнительно и прокрутите вниз, пока не увидите две галочки, которые начинаются сОтключить отладку сценариев.

По умолчанию они отмечены. Снимите с них отметку:

Перезапустите браузер.

Просмотр ошибок

Зайдите на страницу с ошибкой: bug.html.

Появится окно с предложением начать отладку. Нажмите «Да» — и вы в отладчике.

Теперь отладчик вместе с другими инструментами разработки доступен по кнопке F12.

Другие браузеры

Google Chrome

Горячие клавиши: Ctrl+Shift+I, Ctrl+Shift+J.

Меню Инструменты -> Инструменты разработчика:

Safari

Горячие клавиши: Ctrl+Shift+I, Ctrl+Alt+C.

Для доступа к функционалу разработки через меню:

1. В Safari первым делом нужно активировать меню разработки.

Откройте меню, нажав на колесико справа-сверху и выберите Настройки.

Затем вкладка Дополнительно: 

Отметьте Показывать меню "Разработка" в строке меню. Закройте настройки.

2. Нажмите на колесико и выберите Показать строку меню.

Инструменты будут доступны в появившейся строке меню, в пункте Разработка.

Opera

В Opera работает горячая клавиша Ctrl+Shift+I.

Можно включить и доступ через меню.

Для этого сначала нужно включить меню: 

Теперь в меню: Инструменты -> Дополнительно -> Opera Dragonfly. Вы на месте.

IE<8

Для IE<8, основной инструмент разработки - это Microsoft Script Debugger. У него есть 4 варианта, самый лучший входит в поставку Microsoft Visual Studio (платной, не Express).

При установке студии отключите все дополнительные опции, чтобы не ставить лишнего.

Также есть Internet Explorer Developer Toolbar для работы с документом. Она вам понадобится для поддержки IE7 и, возможно, IE6.

Привет, мир!

1. Тег SCRIPT

2. Внешние скрипты

В этой статье мы создадим простой скрипт и посмотрим, как он работает.

Тег SCRIPT

Программы на языке JavaScript можно вставить в любое место HTML при помощи тега SCRIPT. Например:

   

01	<!DOCTYPE HTML>

02

<html>

03

<head>

04	<!-- Тег meta для указания кодировки -->

05	<meta charset="utf-8">

06

</head>

07

<body>

08

09	<p>Начало документа...</p>

10

11

<script>

12	alert('Привет, Мир!');

13

</script>

14

15	<p>...Конец документа</p>

16

17

</body>

18

</html>

Открыть код в новом окне

Этот пример использует следующие элементы:

<script> ... </script>

Тег script содержит исполняемый код. Предыдущие стандарты HTML требовали обязательного указания атрибута type, но сейчас он уже не нужен. Достаточно просто <script>.

Браузер, когда видит <script>:

1. Начинает отображать страницу, показывает часть документа до script

2. Встретив тег script, переключается в JavaScript-режим и не показывает, а исполняет его содержимое.

3. Закончив выполнение, возвращается обратно в HTML-режим и отображает оставшуюся часть документа.

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

alert(...)

Отображает окно с сообщением и ждет, пока посетитель не нажмет «Ок»

Кодировка и тег META

При попытке сделать такой же файл у себя на диске и запустить, вы можете столкнуться с проблемой — выводятся «кракозяблы», «квадратики» и «вопросики» вместо русского текста.

Чтобы всё было хорошо, нужно:

1. Убедиться, что в HEAD есть строка <meta charset="utf-8">. Если вы будете открывать файл с диска, то именно он укажет браузеру кодировку.

2. Убедиться, что редактор сохранил файл в кодировке UTF-8, а не, скажем, в windows-1251. На английском соответствующий параметр может называться «charset» или «encoding».

Указание кодировки — часть обычного HTML, к JavaScript не имеет отношения.

Очень важно не только читать, но и тестировать, пробовать писать что-то самому. Решите задачку, чтобы удостовериться, что вы все правильно поняли.

Важность: 5

Сделайте страницу, которая выводит «Я - JavaScript!», т.е. работает вот так: tutorial/browser/script/alert/index.html.

Создайте ее на диске, откройте в браузере, убедитесь, что все работает.

Решение

[Открыть задачу в новом окне]

Современная разметка для тега SCRIPT

В старых скриптах оформление тега SCRIPT было немного сложнее. В них можно встретить следующие элементы:

Атрибут <script type=...>

В отличие от HTML5, стандарт HTML 4 требовал обязательного указания этого атрибута. Выглядел он так:type="text/javascript".

Если вы укажете некорректные данные в атрибуте type, например <script type="text/html">, то содержимое тега не будет отображено. Но его можно получить средствами JavaScript. Этот хитрый способ используют для добавления служебной информации на страницу.

Атрибут <script language=...>

Этот атрибут ставить не обязательно, т.к. язык по умолчанию — JavaScript.

Комментарии до и после скриптов

В старых руководствах и книгах иногда рекомендуют использовать HTML-комментарии внутри SCRIPT, чтобы спрятать Javascript от браузеров, которые не поддерживают его.

Выглядит это примерно так:

<script type="text/javascript"><!--

...

//--></script>

Браузер, для которого предназначались такие трюки, очень старый Netscape, давно умер. Поэтому в этих комментариях нет нужды.

Внешние скрипты

Если JavaScript-кода много — его выносят в отдельный файл, который подключается в HTML:

<script src="/path/to/script.js"></script>

Здесь /path/to/script.js - это абсолютный путь к файлу, содержащему скрипт (из корня сайта).

Браузер сам скачает скрипт и выполнит.

Например:

01

<html>

02

<head>

03	<meta charset="utf-8">

04	<script src="/files/tutorial/browser/script/rabbits.js"></script>

05

</head>

06

07

<body>

08

<script>

09	count_rabbits();

10

</script>

11

</body>

12

13

</html>

Открыть код в новом окне

Содержимое файла /files/tutorial/browser/script/rabbits.js:

1	function count_rabbits() {

2	for(var i=1; i<=3; i++) {

3	alert("Кролик номер "+i)

4

}

5

}

Открыть код в новом окне

Можно указать и полный URL, например:

<script src="http://code.jquery.com/jquery.js"></script>

Вы также можете использовать путь относительно текущей страницы, например src="script.js" если скрипт находится в том же каталоге, что и страница.

Чтобы подключить несколько скриптов, используйте несколько тегов:

<script src="/js/script1.js"></script>

<script src="/js/script2.js"></script>

...

Как правило, в HTML пишут только самые простые скрипты, а сложные выносят в отдельный файл.

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

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

Если указан атрибут src, то содержимое тега игнорируется.

В одном теге SCRIPT нельзя одновременно подключить внешний скрипт и указать код.

Вот так не cработает:

<script src="file.js">

alert(1); // если указан src, то внутренняя часть скрипта игнорируется

</script>

Нужно выбрать: либо SCRIPT идёт с src, либо содержит код. Тег выше следует разбить на два: один — с src, другой с кодом:

1	<script src="file.js"></script>

2

<script>

3

alert(1);

4

</script>

Структура кода

1. Команды

2. Комментарии

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

Команды

Например, можно вместо одного вызова alert сделать два:

   

1	alert('Привет'); alert('Мир');

Как правило, новая команда занимает отдельную строку — так код лучше читается:

   

1	alert('Привет');

2	alert('Мир');

Точку с запятой во многих случаях можно не ставить, если есть переход на новую строку. Так тоже будет работать:

   

1	alert('Привет')

2	alert('Мир')

В этом случае JavaScript интерпретирует переход на новую строчку как разделитель команд и автоматически вставляет «виртуальную» точку с запятой между ними.

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

Поэтому рекомендуется точки с запятой ставить. Сейчас это, фактически, стандарт.

Комментарии

Со временем программа становится большой и сложной. Появляется необходимость добавить комментарии, которые объясняют, что происходит и почему.

Комментарии могут находиться в любом месте программы и никак не влияют на ее выполнение. Интерпретатор JavaScript попросту игнорирует их.

Однострочные комментарии начинаются с двойного слэша //. Текст считается комментарием до конца строки:

   

1	// Команда ниже говорит "Привет"

2	alert('Привет');

3

4	alert('Мир'); // Второе сообщение выводим отдельно

Многострочные комментарии начинаются слешем-звездочкой "/*" и заканчиваются звездочкой-слэшем "*/", вот так:

   

1	/* Пример с двумя сообщениями.

2	Это - многострочный комментарий.

3

*/

4	alert('Привет');

5	alert('Мир');

Все содержимое комментария игнорируется. Если поместить код внутрь /* ... */ или после // — он не выполнится.

   

1	/* Закомментировали код

2	alert('Привет');

3

*/

4	alert('Мир');

Вложенные комментарии не поддерживаются!

В этом коде будет ошибка:

   

1

/*

2	alert('Привет'); /* вложенный комментарий ?!? */

3

*/

4	alert('Мир');

В многострочных комментариях всё очень просто — комментарий длится от открытия /* до закрытия */. Таким образом, код выше будет интерпретирован так:

Комментарий открывается /* и закрывается */:

/*

alert('Привет'); /* вложенный комментарий ?!? */

Код (лишние символы сверху вызывают ошибку):

*/

alert('Мир');

Виды комментариев

Существует три типа комментариев.

1. Первый тип отвечает на вопрос «Что делает эта часть кода?».

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

2. Второй тип комментариев отвечает на вопрос «Почему я выбрал этот вариант решения задачи?». И он гораздо важнее.

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

Когда вы остановились на чём-то — не выбрасывайте проделанную работу, укажите, хотя бы кратко, что вы посмотрели и почему остановились именно на этом варианте.

Особенно это важно, если выбранный вариант не очевиден, а существует другое, более очевидное, но неправильное решение. Ведь в будущем, вернувшись к этому коду, мы можем захотеть переписать «сложное» решение на более «явное» или «оптимальное», тут-то и комментарий и поможет понять, что к чему.

Например: «Я выбрал здесь анимацию при помощи JavaScript вместо CSS, поскольку IE именно в этом месте ведёт себя некорректно».

3. Третий тип комментариев возникает, когда мы в одном месте кода делаем вычисления или присвоения переменных, неочевидным образом использованные совсем в другом месте кода.

Например: «Эти значения отформатированы именно так, чтобы их можно было передать на сервер».

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

На следующих занятиях мы поговорим о переменных, блоках и других структурных элементах программы на JavaScript.

Переменные

1. Переменная

   1. Аналогия из жизни

   2. Копирование значений

2. Важность директивы var

3. Константы

В зависимости от того, для чего вы делаете скрипт, понадобится работать с информацией.

Если это электронный магазин - то это товары, корзина. Если чат - посетители, сообщения и так далее.

Чтобы хранить информацию, используются переменные.

Переменная

Переменная состоит из имени и выделенной области памяти, которая ему соответствует.

Для объявления или, другими словами, создания переменной используется ключевое слово var:

var message;

После объявления, можно записать в переменную данные:

var message;

message = 'Привет'; // сохраним в переменной строку

Эти данные будут сохранены в соответствующей области памяти и в дальнейшем доступны при обращении по имени:

   

1	var message;

2	message = 'Привет';

3

4	alert(message); // выведет содержимое переменной

Для краткости можно совместить объявление переменной и запись данных:

var message = 'Привет';

Аналогия из жизни

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

Например, переменная message - это коробка, в которой хранится значение "Привет":

В коробку можно положить любое значение, а позже - поменять его. Значение в переменной можно изменять сколько угодно раз:

   

1	var message;

2

3	message = 'Привет';

4

5	message = 'Мир';    // заменили значение

6

7	alert(message);

При изменении значения старое содержимое переменной удаляется.

Существуют функциональные языки программирования, в которых значение переменной менять нельзя.

В таких языках положил один раз значение в коробку - и оно хранится там вечно, ни удалить ни изменить. А нужно что-то другое сохранить - изволь создать новую коробку (объявить новую переменную), повторное использование невозможно.

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

Копирование значений

Переменные в JavaScript могут хранить не только строки, но и другие данные, например, числа.

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

var num = 100500;

var message = 'Привет';

Значение можно копировать из одной переменной в другую.

1	var num = 100500;

2	var message = 'Привет';

3

4	message = num;

Значение из num перезаписывает текущее в message.

В «коробке» message меняется значение:

После этого присваивания в обеих коробках num и message находится одно и то же значение 100500.

Важность директивы var

В JavaScript вы можете создать переменную и без var, достаточно просто присвоить ей значение:

x = "value"; // переменная создана, если ее не было

Технически, это не вызовет ошибки, но делать так все-таки не стоит.

Всегда определяйте переменные через var. Это хороший тон в программировании и помогает избежать ошибок.

Откройте пример в IE в новом окне:

01

<html>

02

<head>

03	<meta http-equiv="X-UA-Compatible" content="IE=8">

04

</head>

05

<body>

06	<div id="test"></div>

07

08

<script>

09

test = 5;

10	alert(test);

11

</script>

12

13

</body>

14

</html>

Открыть код в новом окне

Значение не выведется, будет ошибка. Если в IE включена отладка или открыта панель разработки - вы увидите ее.

Дело в том, что почти все современные браузеры создают переменные для элементов, у которых есть id.

Переменная test в них в любом случае существует, запустите, к примеру:

   

1	<div id="test"></div>

2

3

<script>

4	alert(test); // выведет элемент

5

</script>

..Но в IE<9 такую переменную изменять нельзя.

Всё будет хорошо, если объявить test, используя var: Правильный код:

   

01

<html>

02

<body>

03	<div id="test"></div>

04

05

<script>

06	var test = 5;

07	alert(test);

08

</script>

09

10

</body>

11

</html>

Самое «забавное» — то, что, эта ошибка будет только в IE<9, и только если на странице присутствует элемент с совпадающимid.

Такие ошибки особенно весело исправлять и отлаживать.

Есть и еще ситуации, когда отсутствие var может привести к ошибкам. Надеюсь, вы убедились в необходимости всегда ставить var.

Важность: 2

1. Объявите две переменные: admin и name.

2. Запишите в name строку "Василий".

3. Скопируйте значение из name в admin.

4. Выведите admin (должно вывести «Василий»).

Решение

[Открыть задачу в новом окне]

Константы

Константа — это переменная, которая никогда не меняется. Как правило, их называют большими буквами, через подчёркивание. Например:

показать чистый исходник в новом окнеСкрыть/показать номера строкпечать кода с сохранением подсветки

   

1	var COLOR_RED = "#F00";

2	var COLOR_GREEN = "#0F0";

3	var COLOR_BLUE = "#00F";

4	var COLOR_ORANGE = "#FF7F00";

5

6	alert(COLOR_RED); // #F00

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

Зачем нужны константы? Почему бы просто не использовать "#F00" или "#0F0"?

1. Во-первых, константа — это понятное имя, в отличие от строки "#FF7F00".

2. Во-вторых, опечатка в строке может быть не замечена, а в имени константы её упустить невозможно — будет ошибка при выполнении.

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

Имена переменных

1. Имена переменных

2. Зарезервированные имена

3. Правильный выбор имени

Один из самых важных навыков программиста — умение называть переменные правильно.

Имена переменных

На имя переменной в JavaScript наложены всего два ограничения.

1. Имя может состоять из: букв, цифр, символов $ и _

2. Первый символ не должен быть цифрой.

Например:

var myName;

var test123;

Что здесь особенно интересно - доллар '$' и знак подчеркивания '_' являются такими же обычными символами, как буквы:

   

1	var $ = 5;  // объявили переменную с именем '$'

2	var _ = 15; // переменная с именем '_'

3

4

alert($);

А такие переменные были бы неправильными:

var 1a; // начало не может быть цифрой

var my-name; // дефис '-' не является разрешенным символом

Регистр букв имеет значение

Переменные apple и AppLE - две разные переменные.

Русские буквы допустимы, но не рекомендуются

Можно использовать и русские буквы:

   

1	var имя = "Вася";

2	alert(имя);

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

Зарезервированные имена

Существует список зарезервированных слов, которые нельзя использовать при именовании переменных, так как они используются самим языком, например: var, class, return, implements и др.

Некоторые слова, например, class, не используются в современном JavaScript, но они заняты на будущее. Некоторые браузеры позволяют их использовать, но это может привести к ошибкам.

Следующий пример будет работать во многих старых браузерах, которые допускают использование слова 'class' и не сработает в современных. Они выдадут синтаксическую ошибку, попробуйте, запустите:

   

1	var class = 5;

2	alert(class);

Правильный выбор имени

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

Дело в том, что большинство времени мы тратим не на изначальное написание кода, а на его развитие.

А что такое развитие? Это когда я вчера написал код, а сегодня (или спустя неделю) прихожу и хочу его поменять. Например, вывести сообщение не так, а эдак.. Обработать товары по-другому, добавить функционал.. А где у меня там сообщение хранится?..

Гораздо проще найти нужные данные, если они правильно помечены, т.е. переменная названа правильно.

• Правило 1. Никакого транслита. Только английский.

Неприемлемы:

var moiTovari;

var cena;

var ssilka;

Подойдут:

var myGoods;

var price;

var link;

Если вы вдруг не знаете английский - самое время выучить. Все равно ведь придется…

• Правило 2. Использовать короткие имена только для переменных «местного значения».

Называть переменные именами, не несущими смысловой нагрузки, например a, e, p, mg - можно только в том случае, если они используются в небольшом фрагменте кода и их применение очевидно.

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

• Правило 3. Переменные из нескольких слов пишутся вместеВотТак.

Например:

var borderLeftWidth;

Этот способ записи называется «верблюжьей нотацией» или, по-английски, «camelCase».

Существует альтернативный стандарт, когда несколько слов пишутся через знак подчеркивания '_':

var border_left_width;

Преимущественно в JavaScript используется вариант borderLeftWidth, в частности во встроенных языковых и браузерных функциях. Поэтому целесообразно остановиться на нём.

Ещё одна причина выбрать «верблюжью нотацию» — запись в ней немного короче, чем c подчеркиванием, т.к. не нужно вставлять '_'.

• Правило последнее, главное. Имя переменной должно максимально четко соответствовать хранимым в ней данным.

Придумывание таких имен - одновременно коротких и точных, приходит с опытом, но только если сознательно стремиться к этому.

Позвольте поделиться одним небольшим секретом, который позволит улучшить ваши названия переменных и сэкономит вам время.

Бывает так, что вы написали код, через некоторое время к нему возвращаетесь, и вам надо что-то поправить. Например, изменить какую-то рамку «border…»

… И вы помните, что переменная, в которой хранится нужное вам значение, называется примерно так: borderLeftWidth. Вы ищете ее в коде, не находите, разбираетесь, и обнаруживаете, что на самом деле переменная называлась вот так: leftBorderWidth. После чего вносите нужные правки.

В этом случае, самый лучший ход - это переименовать переменную на ту, которую вы искали изначально. То есть, у вас в кодеleftBorderWidth, а вы ее переименовываете на borderLeftWidth.

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

Кроме того, поскольку именно это имя переменной пришло вам в голову - скорее всего, оно больше соответствует хранимым там данным, чем то, которое вы придумали изначально.

Смысл имени переменной - это «имя на коробке», по которому мы сможем максимально быстро находить нужные нам данные.

Не нужно бояться переименовывать переменные, если вы придумали имя получше. Современные редакторы позволяют делать это очень удобно. Это в конечном счете сэкономит вам время.

Храните в переменной то, что следует

Бывают ленивые программисты, которые, вместо того чтобы объявить новую переменную, используют существующую.

В результате получается, что такая переменная — как коробка, в которую кидают то одно, то другое, то третье, при этом не меняя название. Что в ней лежит сейчас? А кто его знает.. Нужно подойти, проверить.

Сэкономит такой программист время на объявлении переменной — потеряет в два раза больше на отладке кода.

«Лишняя» переменная — добро, а не зло.

Важность: 3

1. Создайте переменную для названия нашей планеты со значением "Земля". Правильное имя выберите сами.

2. Создайте переменную для имени посетителя со значением "Петя". Имя также на ваш вкус.

Решение

[Открыть задачу в новом окне]

Введение в типы данных

1. Типы данных

2. Итого

В JavaScript существует несколько основных типов данных.

Типы данных

1. Число number:

   var n = 123;

2. n = 12.345;

3. Единый тип число используется как для целых, так и для дробных чисел.

4. Существуют специальные числовые значения Infinity (бесконечность) и NaN (ошибка вычислений). Они также принадлежат типу «число».

5. Например, бесконечность Infinity получается при делении на ноль:

6.    

   1	alert( 1 / 0 ); // Infinity

7. Ошибка вычислений NaN будет результатом некорректной математической операции, например:

8.    

   1	alert( "нечисло" * 2 ); // NaN, ошибка

9. Строка string:

   var str = "Мама мыла раму";

10. str = 'Одинарные кавычки тоже подойдут';

11. В JavaScript одинарные и двойные кавычки равноправны. Можно использовать или те или другие.

12. Тип символ не существует, есть только строка

13. В некоторых языках программирования есть специальный тип данных для одного символа. Например, в языке С это char. В JavaScript есть только тип «строка» string. Что, надо сказать, вполне удобно..

14. Булевый (логический) тип boolean. У него всего два значения - true (истина) и false (ложь).

Как правило, такой тип используется для хранения значения типа да/нет, например:

var checked = true; // поле формы помечено галочкой

checked = false;    // поле формы не содержит галочки

О нём мы поговорим более подробно, когда будем обсуждать логические вычисления и условные операторы.null — специальное значение. Оно имеет смысл «ничего». Значение null не относится ни к одному из типов выше, а образует свой отдельный тип, состоящий из единственного значения null:

var age = null;

15. В JavaScript null не является «ссылкой на несуществующий объект» или «нулевым указателем», как в некоторых других языках. Это просто специальное значение, которое имеет смысл «ничего» или «значение неизвестно».

16. В частности, код выше говорит о том, что возраст age неизвестен.

17. undefined — специальное значение, которое, как и null, образует свой собственный тип. Оно имеет смысл «значение не присвоено».

Если переменная объявлена, но в неё ничего не записано, то ее значение как раз и есть undefined:

   

1

var u;

2	alert(u); // выведет "undefined"

Можно присвоить undefined и в явном виде, хотя это делается редко:

var x = 123;

x = undefined;

В явном виде undefined обычно не присваивают, так как это противоречит его смыслу. Для записи в переменную «пустого значения» используется null.

18. Объекты object.

Первые 5 типов называют «примитивными».

Особняком стоит шестой тип: «объекты». К нему относятся, например, даты, он используется для коллекций данных и для многого другого. Позже мы вернёмся к этому типу и рассмотрим его принципиальные отличия от примитивов.

Итого

Есть 5 «примитивных» типов: number, string, boolean, null, undefined и 6-й тип — объекты object.