<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Объект Array в JavaScript

Объект Array в JavaScript

Объект Array в JavaScript позволяет создавать массивы. Также он содержит свойства и методы, позволяющие управлять массивом. Именно о свойствах и методах объекта Array в JavaScript я и поведаю.

Начнём с конструктора. Их несколько. Вот первый из них:

var arr = new Array();

Здесь создаётся массив, вообще говоря, произвольной длины и абсолютно пустой. Дальше мы можем его заполнять так, как я Вам показывал ранее. Рассмотрим второй вид конструктора:

var arr = new Array(5);

Этот конструктор создаёт массив из пяти элементов. И, наконец, третий вид конструктора:

var arr = new Array(3, 1, "str", "15", -5);

В данном случае создаётся массив из пяти уже заданных элементов. Это все три конструктора, которые нам предоставляет класс Array в JavaScript.

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

var arr = new Array(1, 0, -4, 10, 12);
document.write(arr.length);

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

Теперь обсудим методы объекта Array. Начнём с метода join():

document.write(arr.join());

Данный метод возвращает строку, составленную из элементов массивов, разделённых запятой. Если использовать параметр в методе join(), то, соответственно, вместо запятой будет этот параметр. Например, так:

document.write(arr.join("---"));

На выходе получится следующее: "1---0----4---10---12".

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

arr.concat(3, 1, new Array(3, -1));

Как видите, тут мы добавили не только два числа, но ещё и целый массив в исходный массив arr, тем самым, резко сократив запись.

Метод pop() вытаскивает последний элемент из массива и возвращает его. То есть у массива исчезает последний элемент, который метод pop() возвращает. Вот пример:

var last_element = arr.pop();
document.write(last_element);

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

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

var first_element = arr.shift();
document.write(first_element);

Здесь всё достаточно прозрачно, поэтому не буду комментировать.

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

var a = arr.reverse();

В данном примере метод возвращает перевёрнутый массив arr и записывает его в массив a.

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

var a = arr.slice(2, 4);

В этом примере мы присваиваем массиву a часть массива arr, которая начинается со 2-го элемента (включительно) до 4-ого (исключительно). Например, если массив arr был с такими значениями: 2, 4, 5, 1, 2. То массив а будет иметь следующие значения: 5, 1. Также не забывайте, что нумерация начинается с 0. Поэтому элемент с индексом "2" - это элемент со значением 5.

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

И последний метод, который мы с Вами разберём - это метод sort(). Я его оставил на закуску, так как он, пожалуй, самый важный и сложный. Данный метод сортирует массив. Использовать метод sort() легко:

arr.sort();

Тут всё просто: массив сортируется, однако, какое правило сортировки? По алфавиту, по числам, по возрастанию, по убыванию и прочее. В этом и состоит сложность. Поэтому разработчики этого метода предоставили нам задать эти правила, добавив один необязательный параметр в метод sort(), который должен быть именем функции, описывающей "правила сортировки".

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

function myCompare(x, y) {
  if (x == 5) return 1;
  if (y == 5) return -1;
  if (x > y) return 1;
  else if (x == y) return 0;
  else return -1;
}

Если x больше y, то возвращается 1, если равны, то возвращается 0, если y больше x, то возвращается -1. И на основании этого, мы пишем правила, при которых возвращать 1, 0 или -1. И теперь мы можем, используя это "правило сортировки", воспользоваться методом sort() в полную силу:

arr.sort(myCompare);

Это все самые основные конструкторы, свойства и методы объекта Array в JavaScript. Разумеется, запоминать их все не нужно. Главное лишь понять возможности, которые предоставляют нам разработчики JavaScript при работе с массивами. Со временем Вы их и так запомните, а пока этого не случилось не забывайте про справочник.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (30):

top1995 top1995 01.04.2011 15:28:17

Зачем, к примеру, в методах pop() и shift() нужны скобки, если там,как я понял, никакие параметры не надо задавать?

Ответить

Admin Admin 01.04.2011 15:30:30

Скобки нужны, так как таков синтаксис JavaScript (да и других языков тоже). Эти скобки означают, что это именно метод. Если бы их не было, то для JavaScript это было бы уже свойство (а не метод) pop и shift (которых не существует).

Ответить

top1995 top1995 01.04.2011 22:55:41

Спасибо, что разъяснил.

Ответить

Igori Igori 06.08.2011 15:23:49

Здравствуйте Михаил! Скачал бесплатный видиокурс по HTML.Мне понравился он тем, что достаточно понятно все объяснено. После изучения данного курса заказал уже платный видио курс по JavaScript. Хочу спросить,как скоро я его получу. P.S. Будет ли видио курс по "Дивной" верстке - <div></div>.

Ответить

Admin Admin 26.08.2011 20:44:24

Платного курса по JavaScript у меня вообще нет. Есть только "Создание и раскрутка сайта от А до Я", куда обучение по JavaScript входит, видимо, Вы его и заказали. Я вернулся сегодня из отпуска, поэтому уже завтра все заказы постараюсь отправить. Как правило, доходит не более 3-х недель. Если областной город, то и за неделю доходит. P.S. Курс по дивной вёрстке будет, но ещё не очень скоро, ближе к декабрю.

Ответить

JDaniels JDaniels 30.05.2012 16:09:29

В листинге пользовательской функции сравнения в строчке if (y == 5) return 1; наверно имелось в виду -1. myCompare(5,5) возвращает 1.

Ответить

Admin Admin 30.05.2012 20:47:51

Всё правильно Вы пишите, исправил, спасибо!

Ответить

Frederico Frederico 31.12.2012 23:35:06

Как обработать такой массив: Array ( [id] => 6 [page_id] => 150 [name] => name [text_comment] => comment ). Ума ни приложу, что делать?

Ответить

Admin Admin 01.01.2013 11:57:25

Например, так: echo $array["name"].": ".$array["comment"];

Ответить

Frederico Frederico 01.01.2013 15:10:24

Куда писать эту строку?

Ответить

Admin Admin 01.01.2013 16:06:44

http://myrusakov.ru/php-how-study.html

Ответить

Frederico Frederico 01.01.2013 16:32:46

Михаил, Вы хотите сказать, что для начала мне нужно изучить все (массивы, JavaScript, MySQL и другое), а только потом заниматься созданием сайта? Просто я думаю, что это займет у меня не менее 1 года.

Ответить

Admin Admin 01.01.2013 16:34:32

Это займёт при правильном подходе пару месяцев. Вот курс: http://srs.myrusakov.ru/php Можно и самому каждую тему находить и разбирать.

Ответить

Frederico Frederico 01.01.2013 16:51:06

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

Ответить

Admin Admin 01.01.2013 21:17:43

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

Ответить

Frederico Frederico 01.01.2013 21:21:10

Как Вы думаете, будет ли у меня успех, если я буду заниматься созданием сайтов-визиток на заказ?

Ответить

remox remox 07.07.2013 19:59:26

Михаил, у Вас, кажется, ошblбка)) если я напишу --- var arr5 = new Array(); arr5[0] = 5; arr5[1] = 7; arr5[2] = 9; arr5[5] = 8; for (var i = 0; i < arr5.length; i++) { document.write("Элемент с индексом " + i + " равен " + arr5[i] + "<br />"); } document.write(arr5.length); ---- виведется ---- Элемент с индексом 0 равен 5 Элемент с индексом 1 равен 7 Элемент с индексом 2 равен 9 Элемент с индексом 3 равен undefined Элемент с индексом 4 равен undefined Элемент с индексом 5 равен 8 6 ----- следовательно получается, что length возвращает номер ключа последнего елемента +1,, а не количество елементов в массиве ... и я ошибаюсь гдето? спасибо за ответ наперед))

Ответить

Admin Admin 07.07.2013 21:52:49

Номер ключа последнего элемента + 1 - это и есть длина массива. Нумерация начинается с 0.

Ответить

remox remox 08.07.2013 14:10:08

спасибо) то, что с нуля нумерация - помню по php) а вот то, что добавляются елементbl в js сами по себе(а-ля Элемент с индексом 4 равен undefined) - очень непривично)) прям "взорвимосг"))

Ответить

dvv dvv 01.10.2013 17:45:06

Михаил, в последнем примере если убрать следующие строки: if (x == 5) return 1; if (y == 5) return -1; , никаких изменений в работе скрипта не наблюдается, все работает как надо. Для чего необходимы эти два условия в Вашем примере?

Ответить

Admin Admin 01.10.2013 21:11:07

Если не использовать число 5 в качестве x или y, то да, разницы не будет. А если использовать, то получится, что 5 больше, например, 7. Это и есть пользовательская сортировка.

Ответить

Павел Павел 13.10.2013 18:05:32

Не понятно добавление в массив. var arr = new Array(1, 0, -4, 10, 12, 11); document.write(arr.length + "<br>"); document.write(arr.join("---") + "<br>"); arr.concat(3, 1, new Array(3, -1)); var last_element = arr.pop(); document.write(arr); Я так понял что должен распечататься новый, более длинный массив, а распечатывается старый

Ответить

Admin Admin 13.10.2013 21:32:55

Что значит новый? И более длинного массива тут нет, самый первый arr и есть самый длинный.

Ответить

Павел Павел 14.10.2013 15:14:32

А понял так: Вначале arr состоит: 1, 0, -4, 10, 12, 11. к нему добавляется значения 3, 1 и массив (3, -1). В итоге получается массив arr состоящий из: 1, 0, -4, 10, 12, 11, 3, 1, 3, -1. Что не верно?

Ответить

Admin Admin 14.10.2013 21:38:57

Если бы было написано arr = arr.concat(3, 1, new Array(3, -1)); - то да, но никакого arr = нет.

Ответить

Павел Павел 15.10.2013 15:56:24

Спасибо Михаил! В ответе все понятно, но по тексту статьи без переписки не разобрался. По html у Вас есть хороший справочник, есть ли по java справочник?

Ответить

Admin Admin 15.10.2013 22:19:07

Нет.

Ответить

flatcher7 flatcher7 19.03.2014 23:09:05

Здравствуйте! Что-то сложная штука для новичка этот sort. Не совсем понятно насчет возврата -1, 1, 0 и т.д. мне совершенно не хватило данного материала для понимания хотя бы принципа. привожу код, скажите какие ошибки если есть пожалуйста. По сути я в массиве создал три разных элемента и мне нужно вывести их в порядке возрастания. <script language = "javascript"> var arr2 = new Array ("x", "y", "z"); arr2 [0] = 5; arr2 [1] = 8; arr2 [2] = 3; arr2.sort(); function myCompare(x, y) { if (x == 5) return 1; if (y == 5) return -1; if (z == 5) return -1; if (x > y) return 1; if (y > z) return 1; else if (x == y) return 0; else return -1; } document.write (arr2);

Ответить

Матчин Матчин 22.03.2015 00:20:39

Здравствуйте, Михаил! Не могу понять функцию sort в статье. Откуда взялось число "5" и что это значит? По поводу остального кода функции, правильно ли я думаю, что x и y это два подряд идущих элемента массива, которые мы сравниваем на больше меньше и как показано в коде, если первый больше второго делаем перестановку, если равны ничего не происходит, если меньше перестановку не проводим?

Ответить

magasalikhov-1993 magasalikhov-1993 08.04.2016 11:03:14

почему вы не записали метод push()? он мне очень пригодился, когда выполнял ваши же задания после видеоуроков.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.