Работы по JavaScript. JavaScript с Ильей Кантором

• Название: JavaScript с Ильей Кантором
• Анкор: Работы по JavaScript.docx
• Дата: 03.09.2018
• Размер: 0.61 Mb.
• Имя файла: Работы по JavaScript.docx
• Тип: Документы; #24011
• страница: 2 из 9

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

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

1	function count_rabbits() {

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

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

4

}

5

}

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

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

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

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

...

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

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

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

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

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

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

src="file.js">

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

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

1

2

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

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

12

13

body>

14

html>

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

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

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

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

1	<div id="test">div>

2

3

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

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

01

<html>

02

<body>

03	<div id="test">div>

04

05

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.