СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ

Благодаря готовым учебным материалам для работы в классе и дистанционно

Скидки до 50 % на комплекты
только до

Готовые ключевые этапы урока всегда будут у вас под рукой

Организационный момент

Проверка знаний

Объяснение материала

Закрепление изученного

Итоги урока

Язык JavaScript

Категория: Информатика

Нажмите, чтобы узнать подробности

Материал к урокам по языку JavaScript. Материал предназначен для  изучающих язык JavaScript и   может быть полезен для студентов в дисциплинах "Информатика", "Web-технологии", "Прикладное программирование".

Просмотр содержимого документа
«Язык JavaScript»

Язык JavaScript

Язык JavaScript

Что такое JavaScript ?  JavaScript  изначально создавался для того, чтобы сделать web-странички «живыми». Программы на этом языке называются  скриптами . В браузере они подключаются напрямую к HTML и, как только загружается страничка – тут же выполняются.  Современные интерпретаторы перед выполнением преобразуют JavaScript в машинный код или близко к нему, оптимизируют, а уже затем выполняют. И даже во время выполнения стараются оптимизировать. Поэтому JavaScript работает очень быстро.  Во все основные браузеры встроен интерпретатор JavaScript, именно поэтому они могут выполнять скрипты на странице.

Что такое JavaScript ?

JavaScript  изначально создавался для того, чтобы сделать web-странички «живыми». Программы на этом языке называются  скриптами . В браузере они подключаются напрямую к HTML и, как только загружается страничка – тут же выполняются.

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

Во все основные браузеры встроен интерпретатор JavaScript, именно поэтому они могут выполнять скрипты на странице.

 Современный JavaScript – это язык программирования общего назначения. Он не предоставляет низкоуровневых средств работы с памятью, процессором, так как изначально был ориентирован на браузеры, в которых это не требуется.  Что же касается остальных возможностей – они зависят от окружения, в котором запущен JavaScript. В браузере JavaScript умеет делать всё, что относится к манипуляции со страницей, взаимодействию с посетителем и, в какой-то мере, с сервером: Создавать новые HTML-теги, удалять существующие, менять стили элементов, прятать, показывать элементы и т.п. Реагировать на действия посетителя, обрабатывать клики мыши, перемещения курсора, нажатия на клавиатуру и т.п. Посылать запросы на сервер и загружать данные без перезагрузки страницы (эта технология называется

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

Что же касается остальных возможностей – они зависят от окружения, в котором запущен JavaScript. В браузере JavaScript умеет делать всё, что относится к манипуляции со страницей, взаимодействию с посетителем и, в какой-то мере, с сервером:

  • Создавать новые HTML-теги, удалять существующие, менять стили элементов, прятать, показывать элементы и т.п.
  • Реагировать на действия посетителя, обрабатывать клики мыши, перемещения курсора, нажатия на клавиатуру и т.п.
  • Посылать запросы на сервер и загружать данные без перезагрузки страницы (эта технология называется "AJAX").
Получать и устанавливать cookie, запрашивать данные, выводить сообщения и т.д.  JavaScript – быстрый и мощный язык, но браузер накладывает на его исполнение некоторые ограничения. Большинство возможностей JavaScript в браузере ограничено текущим окном и страницей.   Это сделано для безопасности пользователей, чтобы злоумышленник не мог с помощью JavaScript получить личные данные или как-то навредить компьютеру пользователя.  Этих ограничений нет там, где JavaScript используется вне браузера, например на сервере.
  • Получать и устанавливать cookie, запрашивать данные, выводить сообщения и т.д.

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

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

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

В чём уникальность JavaScript?  Есть   три  замечательных особенности JavaScript: Полная интеграция с HTML/CSS. Простые вещи делаются просто. Поддерживается всеми распространёнными браузерами и включён по умолчанию.  Этих трёх вещей одновременно нет больше ни в одной браузерной технологии.  Поэтому JavaScript и является самым распространённым средством создания браузерных интерфейсов.  Язык JavaScript улучшается. Современный стандарт ECMAScript 5 включает в себя новые возможности для разработки, ECMAScript 6 будет шагом вперёд в улучшении синтаксиса языка.

В чём уникальность JavaScript?

Есть   три  замечательных особенности JavaScript:

  • Полная интеграция с HTML/CSS.
  • Простые вещи делаются просто.
  • Поддерживается всеми распространёнными браузерами и включён по умолчанию.

Этих трёх вещей одновременно нет больше ни в одной браузерной технологии.

Поэтому JavaScript и является самым распространённым средством создания браузерных интерфейсов.

Язык JavaScript улучшается. Современный стандарт ECMAScript 5 включает в себя новые возможности для разработки, ECMAScript 6 будет шагом вперёд в улучшении синтаксиса языка.

 ECMAScript 6 будет шагом вперёд в Современные браузеры улучшают свои движки, чтобы увеличить скорость исполнения JavaScript, исправляют баги и стараются следовать стандартам. Редакторы для кода  Для разработки обязательно нужен хороший редактор.   Существуют  интегрированные среды разработки ( IDE ). IDE означает редактор, который расширен большим количеством дополнительных функций и умеет работать с вспомогательными системами.  Примеры IDE : Продукты IntelliJ: WebStorm, а также в зависимости от дополнительного языка программирования PHPStorm (PHP), IDEA (Java), RubyMine (Ruby) и другие.

ECMAScript 6 будет шагом вперёд в Современные браузеры улучшают свои движки, чтобы увеличить скорость исполнения JavaScript, исправляют баги и стараются следовать стандартам.

Редакторы для кода

Для разработки обязательно нужен хороший редактор.

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

Примеры IDE :

  • Продукты IntelliJ: WebStorm, а также в зависимости от дополнительного языка программирования PHPStorm (PHP), IDEA (Java), RubyMine (Ruby) и другие.
Visual Studio, в сочетании с разработкой под .NET (Win) Продукты на основе Eclipse, в частности Aptana и Zend Studio Komodo IDE и его облегчённая версия Komodo Edit. Netbeans  Лёгкие редакторы – не такие мощные, как IDE, но они быстрые и простые, мгновенно стартуют.  Основная сфера применения лёгкого редактора – мгновенно открыть нужный файл, чтобы что-то в нём поправить.
  • Visual Studio, в сочетании с разработкой под .NET (Win)
  • Продукты на основе Eclipse, в частности Aptana и Zend Studio
  • Komodo IDE и его облегчённая версия Komodo Edit.
  • Netbeans

Лёгкие редакторы – не такие мощные, как IDE, но они быстрые и простые, мгновенно стартуют.

Основная сфера применения лёгкого редактора – мгновенно открыть нужный файл, чтобы что-то в нём поправить.

Вставка скрипта в HTML документе   …    Текст программы на языке JavaScript вставляется непосредственно в файл HTML-страницы. Строки между  и  содержат JavaScript и исполняются браузером. 1. Подключение в любом месте документа     …..    ……     // вызов функций   …….

Вставка скрипта в HTML документе

Текст программы на языке JavaScript вставляется непосредственно в файл HTML-страницы. Строки между и содержат JavaScript и исполняются браузером.

1. Подключение в любом месте документа

….. …… // вызов функций …….

 Размещение скрипта в заголовке  документа HEAD     Заголовок      // функции       … ..
  • Размещение скрипта в заголовке

документа HEAD

Заголовок // функции

..

 Используемые понятия Объект – совокупность свойств, методов, коллекций и событий, предоставляемых браузером в рамках объектной модели Свойство – переменная в рамках объекта, используемая для получения значения или установки нового Метод – функция, предоставляемая объектом для выполнения каких-либо действий Коллекция  – упорядоченный набор свойств Событие  – какое-либо действие пользователя или момент работы браузера (для реакции на события создаются обработчики событий. Литералы  - это простейшие данные с которыми может работать программа (числа, строки, логические значения)

Используемые понятия

  • Объект – совокупность свойств, методов, коллекций и событий, предоставляемых браузером в рамках объектной модели
  • Свойство – переменная в рамках объекта, используемая для получения значения или установки нового
  • Метод – функция, предоставляемая объектом для выполнения каких-либо действий
  • Коллекция – упорядоченный набор свойств
  • Событие – какое-либо действие пользователя или момент работы браузера (для реакции на события создаются обработчики событий.
  • Литералы - это простейшие данные с которыми может работать программа (числа, строки, логические значения)
Комментарии  Комментарии добавляются для пояснения кода JavaScript, или чтобы сделать код более читабельным. Однострочные комментарии начинаются с // .    // Выводим заголовок   document.write(

Комментарии

Комментарии добавляются для пояснения кода JavaScript, или чтобы сделать код более читабельным.

Однострочные комментарии начинаются с // .

  // Выводим заголовок  document.write(" Это заголовок");   

Многострочные комментарии начинаются с /* и заканчиваются */ .

  /*  Код ниже выводит  один заголовок и параграф  */  document.write(" Это заголовок");  document.write("

Это параграф."); 

  Числовые литералы  В качестве литералов в JavaScrupt используются дробные и целые числа в десятичной системе счисления.  Литералы целого тип а - целые числа в представлении: десятичном,  например: 15, +5, -174.  Вещественные литералы  - дробные цисла.  Целая часть отделяется от дробной точкой, например: 99.15, -32.45.  Вещественные литералы  могут представляться в экспоненциальной форме (форма с плавающей точкой).  Например, 6.2e10, 1.2E-2, .1e1, -.2e3

Числовые литералы

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

Литералы целого тип а - целые числа в представлении: десятичном,

например: 15, +5, -174.

Вещественные литералы - дробные цисла.

Целая часть отделяется от дробной точкой, например: 99.15, -32.45.

Вещественные литералы могут представляться в экспоненциальной форме (форма с плавающей точкой).

Например, 6.2e10, 1.2E-2, .1e1, -.2e3

Шестнадцатеричные литералы  Такие литералы задают числа в шестнадцатеричной системе счисления, они начинаются с символов «0x» или «0X», а затем следует запись числа в шестнадцатеричной форме. Такая запись содержит числа от 0 до 9 и большие или маленькие буквы a, b, c, d, e, f.  Например: 0xFF, 0Xbb, 0x123, 0x0. Восьмеричные литералы  Такие литералы задают числа в восьмеричной системе счисления, они начинаются с нуля, а затем следует запись числа в восьмеричной форме. Такая запись содержит числа от 0 до 7. Например: 0725, 02, 0345

Шестнадцатеричные литералы

Такие литералы задают числа в шестнадцатеричной системе счисления, они начинаются с символов «0x» или «0X», а затем следует запись числа в шестнадцатеричной форме. Такая запись содержит числа от 0 до 9 и большие или маленькие буквы a, b, c, d, e, f.

Например: 0xFF, 0Xbb, 0x123, 0x0.

Восьмеричные литералы

Такие литералы задают числа в восьмеричной системе счисления, они начинаются с нуля, а затем следует запись числа в восьмеричной форме. Такая запись содержит числа от 0 до 7.

Например: 0725, 02, 0345

 Логические литералы  – имеют два значения: истина (true) и ложь (false).  Строковые литералы  - последовательность символов, заключенная в одинарные или двойные кавычки.  Например:

Логические литералы – имеют два значения: истина (true) и ложь (false).

Строковые литералы - последовательность символов, заключенная в одинарные или двойные кавычки.

Например: "ваше имя", 'ваше имя'.

Переменные  Переменные используются для хранения данных (значений или выражений).  Переменные определяются с помощью оператора var , после которого следует имя переменной.  Переменная может иметь короткое имя, например x , или более информативное имя, например carname (название автомобиля). Правила для имен переменных JavaScript: Имена переменных чувствительны к регистру (y и Y это две разных переменных) Имена переменных должны начинаться с буквы или символа подчеркивания Имя может включать буквы латинского алфавита, цифры и знак подчеркивания. Например:  test, dfn, _alpha

Переменные

Переменные используются для хранения данных (значений или выражений).

Переменные определяются с помощью оператора var , после которого следует имя переменной.

Переменная может иметь короткое имя, например x , или более информативное имя, например carname (название автомобиля).

Правила для имен переменных JavaScript:

  • Имена переменных чувствительны к регистру (y и Y это две разных переменных)
  • Имена переменных должны начинаться с буквы или символа подчеркивания
  • Имя может включать буквы латинского алфавита, цифры и знак подчеркивания.

Например: test, dfn, _alpha

Типы переменных  JavaScript распознает следующие типы данных: Integer  – целые  числа в десятичном, восьмеричном или  шестнадцатеричном формате; Float  – действительные десятичные числа; String  – Символы заключенные в кавычки; Boolean  – Логические значения true и false Null  – Пустой указатель, специальное ключевое слово, обозначающее нулевое значение.  JavaScript относится к категории слабо типизированных языков. Тип переменной не требуется объявлять заранее. Достаточно присвоить значение переменной. JavaScript отнесет введенный литерал к тому или иному типу. Пример:  var prim=15; s1=12.3;

Типы переменных

JavaScript распознает следующие типы данных:

  • Integer – целые числа в десятичном, восьмеричном или

шестнадцатеричном формате;

  • Float – действительные десятичные числа;
  • String – Символы заключенные в кавычки;
  • Boolean – Логические значения true и false
  • Null – Пустой указатель, специальное ключевое слово, обозначающее нулевое значение.

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

Пример: var prim=15; s1=12.3;

 Для определения типа переменной используется функция  typeof( имя переменной)  Пример: var a, b, c;  a = 5;  b = “7”;  c = typeof (a+b);   Для определения типа переменной используется функция  typeof( имя переменной)  Пример: var a, b, c;  a = 5;  b = “7”;  c = typeof (a+b);

Для определения типа переменной используется функция

typeof( имя переменной)

Пример: var a, b, c;

a = 5;

b = “7”;

c = typeof (a+b);

  • Для определения типа переменной используется функция typeof( имя переменной) Пример: var a, b, c; a = 5; b = “7”; c = typeof (a+b);
Операторы  Сценарий на языке JavaScript состоит из операторов, которые заканчиваются точкой с запятой ; Различают следующие типы операторов: арифметических действий, присваивания, инкрементные,  декрементные .  Оператор присваивания  =  используется, чтобы присваивать значения переменным JavaScript.  y=5;  z=2;  x=y+z; // значение x будет равно 7

Операторы

Сценарий на языке JavaScript состоит из операторов, которые заканчиваются точкой с запятой ;

Различают следующие типы операторов:

  • арифметических действий,
  • присваивания,
  • инкрементные,
  • декрементные .

Оператор присваивания  =  используется, чтобы присваивать значения переменным JavaScript.

y=5; z=2; x=y+z; // значение x будет равно 7

 Кроме рассмотренного оператора присваивания существует еще группа операторов присваивания, приведенная в таблице.  Пусть х =10, y = 5

Кроме рассмотренного оператора присваивания существует еще группа операторов присваивания, приведенная в таблице.

Пусть х =10, y = 5

Арифметические операторы  Используются для выполнения арифметических операций между переменными и/или значениями. Пусть  y=5 ,

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

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

Пусть  y=5 ,

 Оператор +  также может использоваться, чтобы соединять строковые переменные или текстовые значения друг с другом.  txt1=

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

txt1="Какой сегодня"; txt2="прекрасный день"; txt3=txt1+txt2;

После выполнения

txt3 "Какой сегодня прекрасный день".

Если вы складываете число и строку, результатом будет строка!

x=5+5; document.write(x); x="5"+"5"; document.write(x); x=5+"5"; document.write(x); x="5"+5; document.write(x);

Логические операторы  Используются в логических выражениях для определения равенства или неравенства между переменными или значениями. Пусть  x=5

Логические операторы

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

Пусть  x=5

- сдвиг вправо - сдвиг вправо без учета знака " width="640"

Поразрядные логические операторы

Выполняют операции над каждым разрядом. К ним относят: & - операция И

| - операция ИЛИ

^ - операция исключающая ИЛИ

~ - операция отрицания НЕ

- сдвиг вправо

- сдвиг вправо без учета знака

Вывод сообщений для пользователя Для вывода окна с сообщением используется  alert  ( “ Сообщение … .. " width="640"

Вывод сообщений для пользователя

Для вывода окна с сообщением используется

alert ( Сообщение");

Пример:

……… .

..

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

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

Когда окно подтверждения будет вызвано пользователь должен будет нажать либо " OK ", либо " Отмена ", чтобы продолжить.

Если пользователь нажмет "OK" вернется true (истина), если пользователь нажмет "Отмена- вернется false (ложь).

var x=confirm("Текст окна

подтверждения");

Пример:      function show_confirm()   {   res=window.confirm(

Пример:

 

 

function show_confirm()  res=window.confirm("Да или нет?"); window.alert("res="+res);

 

    Показать окно  подтверждения  body    " width="640"

  Показать окно подтверждения" /  body   

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

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

Когда окно приглашения выскакивает, пользователь должен нажать либо "OK" либо "Отмена" чтобы продолжить после ввода значения.

Если пользователь нажимает "OK" окно возвращает введенное значение. Если же пользователь нажимает " Отмена " окно возвратит null (означает пустое значение, или отсутствие значения).

prompt(сообщение, [значение по умолчанию])

где [] - означают, что параметр необязателен, т.е. его можно опустить. 

         function show_prompt()   {   var name=prompt(

      function show_prompt()  {  var name=prompt(" Пожалуйста, введите ваше имя","Гарри Поттер");  document.write(" Привет " + name + "! Как дела сегодня?");  }             

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

Константы

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

var COLOR_RED = "#F00";

var COLOR_GREEN = "#0F0";

var COLOR_BLUE = "#00F";

var COLOR_ORANGE = "#FF7F00";

var color = COLOR_ORANGE;

alert( color ); // #FF7F00

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

Условные операторы Условный оператор if в неполной форме  Синтаксис:    if (условие) оператор1;  оператор2;  Сначала вычисляется условие, и если результат – «Истина», то выполняется оператор1, стоящий после условия, в противном случае выполняется следующий оператор после условного, то есть оператор2.  Если нужно выполнить более одной команды – они оформляются блоком кода в фигурных скобках: if (year != 2011) { alert( 'А вот..' ); alert( '..и неправильно!' ); } Рекомендуется использовать фигурные скобки всегда, даже когда оператор один.  Это улучшает читаемость кода.

Условные операторы

  • Условный оператор if в неполной форме

Синтаксис:

  if (условие) оператор1;

оператор2;

Сначала вычисляется условие, и если результат – «Истина», то выполняется оператор1, стоящий после условия, в противном случае выполняется следующий оператор после условного, то есть оператор2.

Если нужно выполнить более одной команды – они оформляются блоком кода в фигурных скобках:

if (year != 2011) { alert( 'А вот..' ); alert( '..и неправильно!' ); }

  • Рекомендуется использовать фигурные скобки всегда, даже когда оператор один.

Это улучшает читаемость кода.

 Преобразование к логическому типу   Оператор if (...) вычисляет и преобразует выражение в скобках к логическому типу.  В логическом контексте:  0,пустая строка 

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

Оператор if (...) вычисляет и преобразует выражение в скобках к логическому типу.

В логическом контексте:

0,пустая строка "", null и undefined  являются false Остальные значения – true.

Например , такое условие никогда не выполнится:

if (0) { // 0 преобразуется к false ... }

… А такое – выполнится всегда:

if (1) { // 1 преобразуется к true ... }

Можно и просто передать уже готовое логическое значение, к примеру, заранее вычисленное в переменной:

var cond = (year != 2011); // true/false if (cond) { ... }

2. Полная форма условного оператора if…else Синтаксис: If ( условие) оператор1; else оператор2; Оператор3;  Сначала вычисляется условие. Если условие «Истина», то выполняется оператор1 и далее оператор3 ( оператор следующий после условного). Если условие «Ложно», то выполняется оператор2, стоящий после else , и далее оператор3.  var year = prompt('Введите год появления стандарта ECMA-262 5.1 ', '');  if (year == 2011) { alert( 'Да верно!' ); } else { alert( 'А вот и неправильно!') } ;

2. Полная форма условного оператора if…else

Синтаксис:

If ( условие) оператор1; else оператор2;

Оператор3;

Сначала вычисляется условие. Если условие «Истина», то выполняется оператор1 и далее оператор3 ( оператор следующий после условного). Если условие «Ложно», то выполняется оператор2, стоящий после else , и далее оператор3.

var year = prompt('Введите год появления стандарта ECMA-262 5.1 ', '');

if (year == 2011) { alert( 'Да верно!' ); } else { alert( 'А вот и неправильно!') } ;

2011) { alert( 'Это поздновато..' ); } else { alert( 'Да, точно в этом году!' ); } В примере выше JavaScript сначала проверит первое условие, если оно ложно – перейдет ко второму – и так далее, до последнего else. " width="640"

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

Если нужно проверить несколько вариантов условия. Для этого используется блок else if ....

Например :

var year = prompt('В каком году появилась спецификация ECMA-262 5.1?', '');

if (year

else if (year 2011) { alert( 'Это поздновато..' ); } else { alert( 'Да, точно в этом году!' ); }

В примере выше JavaScript сначала проверит первое условие, если оно ложно – перейдет ко второму – и так далее, до последнего else.

14) { access = true; } else { access = false; } alert(access); Тоже самое с помощью тернарного условного оператора a ccess = (age 14) ? true : false; Использование тернарного условного оператора для нескольких условий var age = prompt('возраст?', 18); var message = (age " width="640"

Например2:

var access;

var age = prompt('Сколько вам лет?', '');

if (age 14) { access = true; }

else { access = false; }

alert(access);

Тоже самое с помощью тернарного условного оператора

a ccess = (age 14) ? true : false;

Использование тернарного условного оператора для нескольких условий

var age = prompt('возраст?', 18);

var message = (age

Оператор SWITCH ( Оператор выбора или переключатель)  Оператор switch  заменяет собой сразу несколько if  и представляет собой более наглядный способ сравнить выражение сразу с несколькими вариантами. Синтаксис: switch(x) { case 'value1': оператор1;  [break]  case 'value2': оператор2;  [break] … default: оператор  [break] }

Оператор SWITCH ( Оператор выбора или переключатель)

Оператор switch  заменяет собой сразу несколько if

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

Синтаксис:

switch(x)

{ case 'value1': оператор1;

[break]

case 'value2': оператор2;

[break]

default: оператор

[break] }

Где x – константное выражение. Сначала вычисляется константное выражение. Это значение сравнивается со значением value1. Если это значение совпадает с value1 , то выполняется оператор в этой строке до следующего case. Если не совпадает, то сравнение идет с value2 и так далее, если нет таких  значений, то выполняется оператор с меткой default.

Где x – константное выражение.

Сначала вычисляется константное выражение. Это

значение сравнивается со значением value1. Если это

значение совпадает с value1 , то выполняется оператор в

этой строке до следующего case. Если не совпадает, то

сравнение идет с value2 и так далее, если нет таких

значений, то выполняется оператор с меткой default.

 Пример:  var a = 2 + 2;  switch (a)  {  case 3: alert( 'Маловато' );   break;   case 4: alert( 'В точку!' );   break;   case 5: alert( 'Перебор' );   break;   default: alert( 'Я таких значений не знаю' );  }  Здесь оператор  switch  последовательно сравнит  a  со всеми вариантами из  case .

Пример:

var a = 2 + 2;

switch (a)

{

case 3: alert( 'Маловато' );

break;

case 4: alert( 'В точку!' );

break;

case 5: alert( 'Перебор' );

break;

default: alert( 'Я таких значений не знаю' );

}

Здесь оператор  switch  последовательно сравнит  a  со всеми вариантами из  case .

 Если break нет, то выполнение пойдёт ниже по следующим case, при этом остальные проверки игнорируются.   В case могут быть любые выражения, в том числе включающие в себя переменные и функции. Например:  var a = 1; var b = 0;  switch (a)   { case b + 1: alert( 1 );  default: alert('нет-нет, выполнится вариант выше') } Несколько значений case можно  группировать.

Если break нет, то выполнение пойдёт ниже по следующим case, при этом остальные проверки игнорируются.

В case могут быть любые выражения, в том числе включающие в себя переменные и функции.

Например:

var a = 1; var b = 0;

switch (a)

{ case b + 1: alert( 1 );

default: alert('нет-нет, выполнится вариант выше') }

Несколько значений case можно группировать.

 В примере ниже case 3 и case 5 выполняют один и тот же код:  var a = 2+2;  switch (a)  { case 4: alert('Верно!'); break;  case 3 ,5 :  alert('Неверно!');  alert('Немного ошиблись, бывает.');   break;  default: alert('Странный результат, очень странный'); }   case 3 и case 5  объединены. Будут выполняться одни и те же операторы.

В примере ниже case 3 и case 5 выполняют один и тот же код:

var a = 2+2;

switch (a)

{ case 4: alert('Верно!'); break;

case 3 ,5 : alert('Неверно!');

alert('Немного ошиблись, бывает.');

break;

default: alert('Странный результат, очень странный'); }

  case 3 и case 5  объединены. Будут выполняться одни и

те же операторы.

Тип имеет значение Следующий пример принимает значение от посетителя. var arg = prompt(

Тип имеет значение

Следующий пример принимает значение от посетителя.

var arg = prompt("Введите arg?");

switch (arg)

{ case '0': case '1': alert( 'Один или ноль' );

case '2': alert( 'Два' );

break;

case 3: alert( 'Никогда не выполнится' );

default: alert('Неизвестное значение: ' + arg)

}

При вводе 3, switch перейдет на default.  Это потому, что prompt возвращает строку  '3', а не число. Типы разные. Оператор  switch предполагает строгое равенство  === , так что совпадения не будет.

Цикл while (цикл с предусловием) Синтаксис:  while (условие)  { код, тело цикла; }  Пока условие верно – выполняется код из тела цикла. Например , цикл ниже выводит i пока i  var i = 0;  while (i  Повторение цикла называется  «итерация» . Цикл в примере выше совершает три итерации.  Если бы i в коде выше не задано, то цикл выполнялся бы бесконечно. На практике, браузер выведет сообщение о «зависшем» скрипте и посетитель его остановит.  Бесконечный цикл  можно сделать и проще:  while (true) { // ... }

Цикл while (цикл с предусловием)

Синтаксис:

while (условие)

{ код, тело цикла; }

Пока условие верно – выполняется код из тела цикла.

Например , цикл ниже выводит i пока i

var i = 0;

while (i

Повторение цикла называется  «итерация» . Цикл в примере выше совершает три итерации.

Если бы i в коде выше не задано, то цикл выполнялся бы бесконечно. На практике, браузер выведет сообщение о «зависшем» скрипте и посетитель его остановит.

Бесконечный цикл  можно сделать и проще:

while (true) { // ... }

Цикл do… while ( цикл с постусловием)  Синтаксис :  do  {тело цикла }  while (условие); Цикл сначала выполняет тело, а затем проверяет условие. Например:  var i = 0;  d o   { alert( i ); i++; }   while (i  Если параметр, входящий в условие не задан или нет изменения параметра, то цикл будет бесконечный

Цикл do… while ( цикл с постусловием)

Синтаксис :

do

{тело цикла }

while (условие);

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

Например:

var i = 0;

d o

{ alert( i ); i++; }

while (i

Если параметр, входящий в условие не задан или нет изменения параметра, то цикл будет бесконечный

Оператор цикла for ( оператор цикла с параметром) Синтаксис: for (начало; условие; шаг)  {тело} Пример:  Цикл выполняет alert(i) для i от 0 до 2включительно (до 3): var i;  for (i = 0; i   { alert( i ); } Любая часть for может быть пропущена. Например,  var i = 0;  for (; i  { alert( i ); // 0, 1, 2 }

Оператор цикла for ( оператор цикла с параметром)

Синтаксис:

for (начало; условие; шаг)

{тело}

Пример:

Цикл выполняет alert(i) для i от 0 до 2включительно (до 3):

var i;

for (i = 0; i

{ alert( i ); }

Любая часть for может быть пропущена.

Например,

var i = 0;

for (; i

{ alert( i ); // 0, 1, 2 }

Можно убрать и шаг:  var i = 0;   for (; i    Значение I не меняется. Цикл будет бесконечный.  возможно отсутствие параметров, но запятые должны стоять:  for (;;) { // будет выполняться бесконечно }  При этом сами точки с запятыми ; обязательно должны присутствовать, иначе будет ошибка синтаксиса. Оператор for..in   Существует специальная конструкция for..in для перебора свойств объекта.

Можно убрать и шаг:

var i = 0;

for (; i

Значение I не меняется. Цикл будет бесконечный.

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

for (;;) { // будет выполняться бесконечно }

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

Оператор for..in

Существует специальная конструкция for..in для перебора свойств объекта.

Оператор break (Прерывание цикла)  Выйти из цикла можно не только при проверке условия но и, вообще, в любой момент. Эту возможность обеспечивает директива  break.  Например, следующий код подсчитывает сумму вводимых чисел до тех пор, пока посетитель их вводит, а затем – выдаёт результат:  var sum = 0;  while (true)  { var value = +prompt(

Оператор break (Прерывание цикла)

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

Например, следующий код подсчитывает сумму вводимых чисел до тех пор, пока посетитель их вводит, а затем – выдаёт результат:

var sum = 0;

while (true)

{ var value = +prompt("Введите число", '');

if (!value) break;

sum += value;

}

alert( 'Сумма: ' + sum );

 Оператор continue ( Оператор продолжения, т.е. следующий оператор)  Оператор   continue  прекращает выполнение  текущей итерации  цикла. Оператор continue прерывает не весь цикл, а только текущую его итерацию, как будто оно закончилось.  Например, цикл ниже использует continue, чтобы не выводить чётные значения:  for (var i = 0; i  { if (i % 2 == 0) continue;  alert(i);  }  Для чётных i срабатывает continue, выполнение тела прекращается и управление передаётся на следующую итерацию(на следующий проход for).

Оператор continue ( Оператор продолжения, т.е. следующий оператор)

Оператор   continue  прекращает выполнение  текущей итерации  цикла. Оператор continue прерывает не весь цикл, а только текущую его итерацию, как будто оно закончилось.

Например, цикл ниже использует continue, чтобы не выводить чётные значения:

for (var i = 0; i

{ if (i % 2 == 0) continue;

alert(i);

}

Для чётных i срабатывает continue, выполнение тела прекращается и управление передаётся на следующую итерацию(на следующий проход for).

5) ? alert(i) : continue; " width="640"

Нельзя использовать break/continue справа от оператора „?“

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

Поэтому такой код приведёт к ошибке:

( i 5) ? alert(i) : continue;

Метки для break/ continue   Если требуется выйти одновременно из нескольких уровней цикла , то в этом случае используется метка. Метка имеет вид   имя:  Имя должно быть уникальным.  Например, внутри цикла по i находится цикл по j, и при выполнении некоторого условия мы бы хотели выйти из обоих циклов сразу:  outer: for (var i = 0; i  { for (var j = 0; j  { var input = prompt('Значение в координатах '+i+','+j, ''); // если отмена ввода или пустая строка –  // завершить оба цикла  if (!input) break outer  }  }  alert('Готово!');

Метки для break/ continue

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

имя:

Имя должно быть уникальным.

Например, внутри цикла по i находится цикл по j, и при выполнении некоторого условия мы бы хотели выйти из обоих циклов сразу:

outer: for (var i = 0; i

{ for (var j = 0; j

{ var input = prompt('Значение в координатах '+i+','+j, ''); // если отмена ввода или пустая строка –

// завершить оба цикла

if (!input) break outer

}

}

alert('Готово!');

 В примере это означает, что будет разорван самый внешний цикл и управление перейдёт на alert.  Директива continue также может быть использована с меткой, в этом случае управление перепрыгнет на следующую итерацию цикла с меткой.  Она ставится перед циклом, вот так:  outer: for (var i = 0; i   Можно также выносить её на отдельную строку:  outer:  for (var i = 0; i   Вызов break outer ищет ближайший внешний цикл с  такой меткой и переходит в его конец.  Оператор continue также может быть использован с меткой, в этом случае управление перейдет на следующую итерацию цикла с меткой.

В примере это означает, что будет разорван самый внешний цикл и управление перейдёт на alert.

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

Она ставится перед циклом, вот так:

outer: for (var i = 0; i

Можно также выносить её на отдельную строку:

outer:

for (var i = 0; i

Вызов break outer ищет ближайший внешний цикл с

такой меткой и переходит в его конец.

Оператор continue также может быть использован с меткой, в этом случае управление перейдет на следующую итерацию цикла с меткой.

Функции  Часто надо повторять одно и то же действие во многих частях программы. Например, вывести сообщение приветствия посетителя, при входе посетителя на сайт. Чтобы не повторять один и тот же код во многих местах, используют функции.  Существуют встроенные функции и функции пользователя .  Примеры встроенных функций - alert(message),   prompt(message,default) и   confirm(question).

Функции

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

Существуют встроенные функции и функции пользователя .

Примеры встроенных функций - alert(message),   prompt(message,default) и 

confirm(question).

 Объявление и вызов функции  Объявить функцию можно при помощи ключевого слова  function , за которым следует имя функции и список её аргументов, разделённых запятой и заключённый в скобки.  function funcName(arg1, arg2, /* ... */ argN)  { тело функции }  return значение;  Любая ветка кода функции может содержать оператор   return , которая прекращает выполнение функции. Указанное после этой инструкции значение возвращается функцией.  function sum(a, b)  { return a + b; }   console.log(sum(1, 2)); // 3

Объявление и вызов функции

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

function funcName(arg1, arg2, /* ... */ argN)

{ тело функции }

return значение;

Любая ветка кода функции может содержать оператор   return , которая прекращает выполнение функции. Указанное после этой инструкции значение возвращается функцией.

function sum(a, b)

{ return a + b; }   console.log(sum(1, 2)); // 3

 Если же при вызове функции в ней не содержится ключевого слова  return , то функция возвращает специальное значение  undefined .  function f()  {}  console. log(f());   Функция определяется один раз и может вызываться сколь угодно раз с различными параметрами, поэтому функции помогают не дублировать код и делать его гибче. console.log(sum(2, 3)); // 5  console.log(sum(3, 3)); // 6 console.log(sum(3, 7)); // 10  В качестве аргументов функции можно передавать не только литералы, но и любые допустимые в js выражения.

Если же при вызове функции в ней не содержится ключевого слова  return , то функция возвращает специальное значение  undefined .

function f()

{}

console. log(f());

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

console.log(sum(2, 3)); // 5

console.log(sum(3, 3)); // 6

console.log(sum(3, 7)); // 10

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

Функциональные литералы  В JavaScript функции могут вести себя как обычные переменные и, так же как и переменную, функцию можно определить при помощи литерала. Функциональный литерал определяет неименованную , иногда её ещё называют анонимной , функцию. Функциональным литералом можно проинициализировать переменную.  var sum = function (a, b)  { return a + b; };  Теперь можно вызывать функцию  sum   так же, как было описано до этого.  console.log(sum(1, 2)); // 3  Особенностью такого объявления функции является то, что вызов функции объявленной таким образом до её объявления, вызовет ошибку.

Функциональные литералы

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

var sum = function (a, b)

{ return a + b; };

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

console.log(sum(1, 2)); // 3

Особенностью такого объявления функции является то, что вызов функции объявленной таким образом до её объявления, вызовет ошибку.

 f(); // ошибка!   var f = function ()  {  };  При вызове функции объявленной обычным образом подобной ошибки не произойдёт.  console.log(f()); // undefined   function f()  {  };  Функциональные литералы удобно использовать, если функция определяется в зависимости от каких – либо условий, то есть динамически. В таком случае инициализацию функции можно поместить в блок кода после оператора ветвления. Также функциональный литерал удобно передавать в качестве аргумента функции.

f(); // ошибка!

var f = function ()

{

};

При вызове функции объявленной обычным образом подобной ошибки не произойдёт.

console.log(f()); // undefined

function f()

{

};

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

Аргументы функции  Важной особенностью функций в JavaScript является то, что функция может вызываться с произвольным количеством аргументов вне зависимости от того, сколько их было указано при её объявлении.  Если количество аргументов, передаваемых функции при её вызове меньше, чем было указано при объявлении, то не переданные параметры будут равны  undefined . Подобное поведение удобно использовать, если некоторые аргументы функции необязательны и могут опускаться.  function someFunc(arg1, arg2, arg3)  { console.log(arg1, arg2, arg3); }   someFunc('arg1', 'arg2'); // arg1, arg2, undefined someFunc('arg1'); // arg1, undefined, undefined someFunc(); // undefined, undefined, undefined  Список переданных значений аргументов содержится в  объекте  arguments .

Аргументы функции

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

Если количество аргументов, передаваемых функции при её вызове меньше, чем было указано при объявлении, то не переданные параметры будут равны  undefined . Подобное поведение удобно использовать, если некоторые аргументы функции необязательны и могут опускаться.

function someFunc(arg1, arg2, arg3)

{ console.log(arg1, arg2, arg3); }

someFunc('arg1', 'arg2'); // arg1, arg2, undefined someFunc('arg1'); // arg1, undefined, undefined someFunc(); // undefined, undefined, undefined

Список переданных значений аргументов содержится в объекте  arguments .

 Этот объект очень похож на массив и к переданным в качестве аргументов значениям можно обращаться по их номеру. Количество переданных аргументов можно узнать при помощи свойства  length .  function someFunc()   { console.log('Количество аргументов функции: ' + arguments.length); }   someFunc('arg1', 'arg2'); // Кол - во аргументов функции: 2 someFunc('arg1'); // Количество аргументов функции: 1 someFunc(); // Количество аргументов функции: 0

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

function someFunc()

{ console.log('Количество аргументов функции: ' + arguments.length); }

someFunc('arg1', 'arg2'); // Кол - во аргументов функции: 2 someFunc('arg1'); // Количество аргументов функции: 1 someFunc(); // Количество аргументов функции: 0

 function someFunc()  {  var str = '';  for ( var i = 0; i  { str +=

function someFunc()

{

var str = '';

for ( var i = 0; i

{ str += " " + arguments[i]; }

console.log('Аргументы функции: ' + str);

}  

someFunc('arg1', 'arg2'); // Арг . функции: arg1 arg2 someFunc('arg1'); // Арг . функции: arg1

someFunc(); // Арг . функции:

Объект  arguments  удобно использовать для написания функции с переменным количеством параметров, например для написание функции, которая возвращает сумму своих аргументов.

function sum() { var s = 0; for (var i = 0; i   { s += arguments[i]; } return s; }    sum(1, 2, 10, 4); // 17   sum(); // 0  Если у функции имеются именованные аргументы, их изменения с использованием объекта arguments меняет значение аргумента получаемое при помощи имени аргумента и наоборот.  Следующий код выведет на консоль в столбик числа 10, 0, 10, 0.  function someFunc(a, b)  { console.log(a); arguments[0] = 0; console.log(a);   console.log(b); b = 0; console.log(arguments[1]); }    someFunc(10, 10);

function sum()

{ var s = 0;

for (var i = 0; i

{ s += arguments[i]; } return s; }  

sum(1, 2, 10, 4); // 17

sum(); // 0

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

Следующий код выведет на консоль в столбик числа 10, 0, 10, 0.

function someFunc(a, b)

{ console.log(a); arguments[0] = 0; console.log(a);   console.log(b); b = 0; console.log(arguments[1]); }  

someFunc(10, 10);

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

Передача аргументов по ссылке и по значению

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

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

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

var point = { x: 1, y: 2 };   function offset(p1, p2) { p1.x += p2.x; p1.y += p2.y; }   offset(point, {x: 1, y:2}); console.log(point.x, point.y); // 2, 4  После вызова функции  offset  значения координат точки изменились. При передаче по значению подобного не произойдёт. var a = 0; function inc(a) { return ++a; }   var a = 0; inc(a); console.log(a); // по-прежнему 0

var point = { x: 1, y: 2 };  

function offset(p1, p2)

{ p1.x += p2.x; p1.y += p2.y; }  

offset(point, {x: 1, y:2});

console.log(point.x, point.y); // 2, 4

После вызова функции  offset  значения координат точки изменились. При передаче по значению подобного не произойдёт.

var a = 0;

function inc(a)

{ return ++a; }  

var a = 0; inc(a); console.log(a); // по-прежнему 0

Локальные переменные  Переменные, объявленные в функции через var, называются локальными . Такие переменные действуют только внутри функции(видны внутри функции):   function showMessage()  { var message = 'Привет, я - Вася!'; alert( message ); }  showMessage();  alert( message );  будет ошибка, т.к. переменная видна только внутри

Локальные переменные

Переменные, объявленные в функции через var, называются локальными . Такие переменные действуют только внутри функции(видны внутри функции):

function showMessage()

{ var message = 'Привет, я - Вася!'; alert( message ); }

showMessage();

alert( message );

будет ошибка, т.к. переменная видна только внутри

 Блоки if/else, switch, for, while, do..while не влияют на область видимости переменных.  При объявлении переменной в таких блоках, она всё равно будет видна во всей функции. Например: function count() {for (var i = 0; i { var j = i * 2; } alert( i ); alert( j );} Переменные i,j  – локальные переменные

Блоки if/else, switch, for, while, do..while не влияют на область видимости переменных.

При объявлении переменной в таких блоках, она всё равно будет видна во всей функции.

Например:

function count()

{for (var i = 0; i

{ var j = i * 2; } alert( i );

alert( j );}

Переменные i,j – локальные переменные

Внешние (глобальные) переменные  Переменные объявленные вне функции (в основной программе) называют внешними или глобальными . Их область действия и основная программа и функция.  При выходе из функции глобальные переменные сохранят свое значение.  var userName = 'Вася';  function showMessage()  { userName = 'Петя';  var message = 'Привет, я ' + userName; alert( message ); }  showMessage();  alert( userName ); // Петя, значение внешней переменной изменено // функцией

Внешние (глобальные) переменные

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

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

var userName = 'Вася';

function showMessage()

{ userName = 'Петя';

var message = 'Привет, я ' + userName; alert( message ); }

showMessage();

alert( userName );

// Петя, значение внешней переменной изменено

// функцией

Массивы  Массив – это упорядоченная совокупность  элементов определенного типа.  [1, 2, 3, 4, 5];  // это массив-литерал   [ true , false , 'element', 1, 1.2] // это тоже  Массив также может не содержать ни одного элемента. Такой массив называется пустым и ему соответствует вот такой литерал:  [ ]; // это пустой массив  Литералом массива можно проинициализировать перемену точно так же, как и любым другим значением.  var array = [1, 2, 3, true , false ];  Чтобы включить неопределённый ( undefined ) элемент в литерал массива достаточно пропустить значение между запятыми.

Массивы

Массив – это упорядоченная совокупность элементов определенного типа.

[1, 2, 3, 4, 5]; // это массив-литерал

[ true , false , 'element', 1, 1.2] // это тоже

Массив также может не содержать ни одного элемента. Такой массив называется пустым и ему соответствует вот такой литерал:

[ ]; // это пустой массив

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

var array = [1, 2, 3, true , false ];

Чтобы включить неопределённый ( undefined ) элемент в литерал массива достаточно пропустить значение между запятыми.

var arr = [1,,2]; console.log(arr); // [1, undefined, 2]   Существует другой синтаксис для создания массивов. var array = new Array(1, 2, 3); Это то же самое, что var a = [1, 2, 3];  Если функция-конструтор  Array  не принимает ни одного аргумента, то массив создаётся пустым. var arr = new Array(); // [ ]

var arr = [1,,2]; console.log(arr);

// [1, undefined, 2]

Существует другой синтаксис для создания массивов.

var array = new Array(1, 2, 3);

Это то же самое, что

var a = [1, 2, 3];

Если функция-конструтор  Array  не принимает ни одного аргумента, то массив создаётся пустым.

var arr = new Array(); // [ ]

 Обращение к элементам массива осуществляется по номеру, при этом самому первому элементу массива соответствует ноль, второму – единица и так далее.  var array = [1, 2, 3, 4];  console.log(array[0]); // 1   console.log(array[3]); // 4  Важно знать, что обращение к элементу массива с индексом больше максимального не вызовет ошибки.  var array = [1, 2, 3, 4];  console.log(array[100500]); // undefined  Несуществующие или неопределённые элементы массива можно проинициализировать.

Обращение к элементам массива осуществляется по номеру, при этом самому первому элементу массива соответствует ноль, второму – единица и так далее.

var array = [1, 2, 3, 4];

console.log(array[0]); // 1

console.log(array[3]); // 4

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

var array = [1, 2, 3, 4];

console.log(array[100500]); // undefined

Несуществующие или неопределённые элементы массива можно проинициализировать.

 var array = [ ];  for ( var i = 0; i  { array[i] = i; }  array[11] = 10;  console.log(array); // [0, 1, … ,9, undefined, 10]   Существующие элементы массива можно переопределить.  var arr = [1, 2, 3];  arr[0] = 'one';  arr[1] = 'two';  arr[2] = 'three';  console.log(arr); // ['one', 'two', 'three']

var array = [ ];

for ( var i = 0; i

{ array[i] = i; }

array[11] = 10;

console.log(array); // [0, 1, … ,9, undefined, 10]

Существующие элементы массива можно переопределить.

var arr = [1, 2, 3];

arr[0] = 'one';

arr[1] = 'two';

arr[2] = 'three';

console.log(arr); // ['one', 'two', 'three']

Свойство массива length  В js это свойство имеет некоторые особенности. Его значение удобнее воспринимать не как количество элементов массива, а как на единицу увеличенный максимальный индекс.  var arr = [1, 2];  console.log(arr.length); // 2   arr[4] = 'something';  console.log(arr.length); // 5   console.log(arr); // [1, 2, undefined, undefined, 'something']  Свойство  length  доступно для записи.    var arr = [1, 2, 3];  arr.length = 5;  console.log(arr); // [1, 2, 3, undefined, undefined] console.log(arr.length); // 5

Свойство массива length

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

var arr = [1, 2];

console.log(arr.length); // 2

arr[4] = 'something';

console.log(arr.length); // 5

console.log(arr); // [1, 2, undefined, undefined, 'something']

Свойство  length  доступно для записи.  

var arr = [1, 2, 3];

arr.length = 5;

console.log(arr); // [1, 2, 3, undefined, undefined] console.log(arr.length); // 5

Вложенные (многомерные) массивы  Массив может содержать массивы в качестве своих элементов. Такой массив может выглядеть, например так:  [1, [2, 3], [4, 5], 'six'];  Чтобы обратится к элементу, расположенному в массиве, который сам является элементом массива, следует вначале указать индекс массива-элемента, а затем индекс элемента в массиве-элементе.  var arr = [1, [2, 3], [4, 5], 'six'];    console.log(arr[1]); // [2, 3]   console.log(arr[1][0]); // 2   console.log(arr[1][1]); // 3  Наиболее интересен вариант, когда массив содержит только массивы одинаковой длины.  var arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];  Такие массивы удобно рассматривать, как таблицу, в которой строки это массивы-элементы.

Вложенные (многомерные) массивы

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

[1, [2, 3], [4, 5], 'six'];

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

var arr = [1, [2, 3], [4, 5], 'six'];  

console.log(arr[1]); // [2, 3]

console.log(arr[1][0]); // 2

console.log(arr[1][1]); // 3

Наиболее интересен вариант, когда массив содержит только массивы одинаковой длины.

var arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

Такие массивы удобно рассматривать, как таблицу, в которой строки это массивы-элементы.

 Обращение к элементу вложенного массива производится с указанием номера строки и столбца, где он расположен.  var arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];   // этот элемент расположен в нулевой строке и первом столбце  var el = arr[0][1]; console.log(el); // 2  Обращение к элементу вложенного массива производится с указанием номера строки и столбца, где он расположен.  var arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];   // этот элемент расположен в нулевой строке и первом столбце  var el = arr[0][1]; console.log(el); // 2

Обращение к элементу вложенного массива производится с указанием номера строки и столбца, где он расположен.

var arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];   // этот элемент расположен в нулевой строке и первом столбце

var el = arr[0][1]; console.log(el); // 2

Обращение к элементу вложенного массива производится с указанием номера строки и столбца, где он расположен.

var arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];   // этот элемент расположен в нулевой строке и первом столбце

var el = arr[0][1]; console.log(el); // 2

Обход массивов  Для того, чтобы обойти массив, то есть обратится к каждому его элементу удобно использовать циклы. Для обхода одномерного массива можно использовать такой шаблон кода:  for ( var i = 0; i // делаем что-то с arr[i] }Например, увеличим каждый элемент массива на единицу.  var arr = [0, 1, 2, 3, 4]; for ( var i = 0; i // [1, 2, 3, 4, 5]  Для обхода вложенных массивов удобно использовать вложенные циклы . 

Обход массивов

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

for ( var i = 0; i // делаем что-то с arr[i] }Например, увеличим каждый элемент массива на единицу.

var arr = [0, 1, 2, 3, 4]; for ( var i = 0; i // [1, 2, 3, 4, 5]

Для обхода вложенных массивов удобно использовать вложенные циклы . 

 var arr = [[1, 2, 3], [4, 5]];    for (var i = 0; i   { for (var j = 0; j   { arr[i][j] /= 2; } }    console.log(arr[0]); // [0.5, 1, 1.5]   console.log(arr[1]); // [2, 2.5]

var arr = [[1, 2, 3], [4, 5]];  

for (var i = 0; i

{ for (var j = 0; j

{ arr[i][j] /= 2; } }  

console.log(arr[0]); // [0.5, 1, 1.5]

console.log(arr[1]); // [2, 2.5]

Объекты  Объект в JavaScript , как и массив, можно рассматривать как набор данных за исключением того, что массив - это набор нумерованных элементов, а в объекте каждое значение имеет своё имя. Значение, хранящиеся в объекте и имеющее своё имя, называется свойством объекта. Извлечение и запись такого значения производится по его имени.  Литералы объектов  У объектов существуют литералы. Они представляют собой заключённые в фигурные скобки набор пар «ключ-значение». Ключ представляет собой любой допустимый идентификатор или строку и является именем свойства. Значением свойства может быть любой литерал или выражение, в том числе и объект. Объект так же может быть пустым и не содержать ни одного свойства.

Объекты

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

Литералы объектов

У объектов существуют литералы. Они представляют собой заключённые в фигурные скобки набор пар «ключ-значение». Ключ представляет собой любой допустимый идентификатор или строку и является именем свойства. Значением свойства может быть любой литерал или выражение, в том числе и объект. Объект так же может быть пустым и не содержать ни одного свойства.

 {}; // пустой объект   {x: 1, y: 2}; // точка на плоскости   {x: 1, y: 2, width: 100, height: 250}; // прямоугольник {login: 'true-coder', rating: 110}; // пользователь  Создание объектов  1-ый способ  создания объекта - это инициализация переменной объектом-литералом.  var empty = {};  var point = {x: 1, y: 3};  var rectangle = { position: {  x: 10, y: 20 },  size: {  width: 100,  height: 200 }  };

{}; // пустой объект

{x: 1, y: 2}; // точка на плоскости

{x: 1, y: 2, width: 100, height: 250}; // прямоугольник {login: 'true-coder', rating: 110}; // пользователь

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

1-ый способ создания объекта - это инициализация переменной объектом-литералом.

var empty = {};

var point = {x: 1, y: 3};

var rectangle = { position: {

x: 10, y: 20 },

size: {

width: 100,

height: 200 }

};

 2-ый способ создания объекта при помощи оператора  new  и функции-конструктора Object ,  которая может быть встроенной или созданной программистом.  Например , создать пустой объект при помощи функции-конструктора  Object :  var empty = new Object();  Другим примером встроенной функции-конструктора может служить  Date :  var now = new Date(); объект, содержащий текущее время и дату

2-ый способ создания объекта при помощи оператора  new  и функции-конструктора Object , которая может быть встроенной или созданной программистом.

Например , создать пустой объект при помощи функции-конструктора  Object :

var empty = new Object();

Другим примером встроенной функции-конструктора может служить  Date :

var now = new Date(); объект, содержащий текущее время и дату

Свойства объектов  Для доступа к свойствам объектов используется оператор . (точка). Слева от этого оператора ставится переменная, содержащая ссылку на объект или любое другое выражение, которое возвращает объект.  var point = {x: 2, y: 3};  console.log(point.x, point.y);  Значения свойств объекта можно изменить уже после его создания:  var point = {x: 2, y: 3}; console.log(point.x, point.y); // 2, 3 point.x = 10;  point.y = 3;  console.log(point.x, point. y); // 10, 3  Так же можно инициализировать ещё не существующие в объекте свойства

Свойства объектов

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

var point = {x: 2, y: 3};

console.log(point.x, point.y);

Значения свойств объекта можно изменить уже после его создания:

var point = {x: 2, y: 3}; console.log(point.x, point.y); // 2, 3 point.x = 10;

point.y = 3;

console.log(point.x, point. y); // 10, 3

Так же можно инициализировать ещё не существующие в объекте свойства

 var user = {login: 'true-coder'};  user.rating = 100;  console.log(user.rating); // 100  При попытке получить значение неинициализированного свойства объекта ошибки не возникает. В этом случае возвращается специальное значение  undefined :  var point = {x: 2, y: 3};  console.log(point.z); // undefined

var user = {login: 'true-coder'};

user.rating = 100;

console.log(user.rating); // 100

При попытке получить значение неинициализированного свойства объекта ошибки не возникает. В этом случае возвращается специальное значение  undefined :

var point = {x: 2, y: 3};

console.log(point.z); // undefined

Оператор in  Этот оператор используется для проверки наличия у объекта заданного свойства. Он возвращает булево значение, показывающие есть ли заданное свойство у объекта. Слева от этого оператора помещается имя свойства в виде строки, справа – объект.  var point = {x: 1, y: 2};  console.log('x' in point); // true  console.log('z' in point); // false  Если свойство объекта было инициализировано значением  undefined , то оператор  in  вернёт  true  при проверке на наличие этого свойства у объекта:  var point = {x: 1, y: 2, z: undefined };  console.log('z' in point); // true

Оператор in

Этот оператор используется для проверки наличия у объекта заданного свойства. Он возвращает булево значение, показывающие есть ли заданное свойство у объекта. Слева от этого оператора помещается имя свойства в виде строки, справа – объект.

var point = {x: 1, y: 2};

console.log('x' in point); // true

console.log('z' in point); // false

Если свойство объекта было инициализировано значением  undefined , то оператор  in  вернёт  true  при проверке на наличие этого свойства у объекта:

var point = {x: 1, y: 2, z: undefined };

console.log('z' in point); // true

Оператор delete  Этот оператор предназначен для удаления свойств объектов.  var point = {x: 1, y: 2};  delete point.x;  console.log(point.x); // undefined  Присваивание свойству значения  undefined  фактически не удаляет свойство и оператор  in  вернёт  true,  если его использовать для проверки существования такого свойства.  var point = {x: 1, y: 2};  delete point.x; point.y = undefined ;  console.log('x' in point); // false  console.log('y' in point); // true

Оператор delete

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

var point = {x: 1, y: 2};

delete point.x;

console.log(point.x); // undefined

Присваивание свойству значения  undefined  фактически не удаляет свойство и оператор  in  вернёт  true,  если его использовать для проверки существования такого свойства.

var point = {x: 1, y: 2};

delete point.x; point.y = undefined ;

console.log('x' in point); // false

console.log('y' in point); // true

Объекты как ассоциативные массивы  Можно объект рассматривать как ассоциативный массив. К его свойствам, как и к элементам массива можно обращаться при помощи оператора [ ] . Обращение к свойству объекта при помощи этого оператора производится с указанием имени свойства, содержащегося в строке.  var point = {x: 1, y: 2};   console.log(point['x']); // 1  Ча c то бывает необходимо динамически в ходе выполнения скрипта определить имя свойства, к которому нужно обратиться. Например, имя свойства, к которому необходимо обратится, каким-то образом зависит от действий пользователя. В этом случае произвести обращение к нему невозможно при помощи оператора «точка» поскольку на момент запуска скрипта имя свойства неизвестно.

Объекты как ассоциативные массивы

Можно объект рассматривать как ассоциативный массив. К его свойствам, как и к элементам массива можно обращаться при помощи оператора [ ] . Обращение к свойству объекта при помощи этого оператора производится с указанием имени свойства, содержащегося в строке.

var point = {x: 1, y: 2};

console.log(point['x']); // 1

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