JavaScript — это объектно-ориентированный язык с элементами функциональной и императивной парадигм программирования. Используется для разработки WEB-приложений, тесно связан с HTML и CSS.
Как мне научиться делать свои приложения?
Прочтения статьи недостаточно, необходимо самому разбираться в семантике языка. Нужно думать своей головой, комбинировать встроенные методы и свойства JavaScript, чтобы построить своё веб-приложение. Вы можете воспользоваться готовыми библиотеками для разработки приложения (например, jQuery или MooTools), но без понимания того, как это всё работает, ваши умения будут ограничиваться лишь созданием никому не нужной анимации и раскраски таблиц "зеброй", надеюсь, вы поняли, о чём я.
1. Азы. Объекты и свойства.
Объектом в JavaScript может являться функция, массив, хэш, да и вообще всё в JavaScript является объектами. Объекты могут быть как встроенными (Math, String и пр.), так и пользовательские (созданные самим кодером). Пользовательские объекты записываются в переменные:
Code
var a = 1; // Мы записали в переменную 'a' число 1
Переменные могут быть как локальными (расположенные внутри замыкания), так и глобальные (к ним можно получить доступ из любого контекста):
Code
(function () { var a = 1; // Мы объявили переменную внутри анонимной функции. К такой переменной доступ можно получить только в контексте данной функции })();
Пример с объявлением глобальной переменной я привёл чуть выше.
Теперь разберёмся со встроенными объектами (их, кстати, тоже можно записать в переменную, но это редко используется). Вот их список:
Array — массив Boolean — логическое значение Function — функция Number — число Object — хэш RegExp — регулярное выражение String — строка
Приведены имена функций, которые создают экземпляр того или иного объекта. Например, так можно создать экземпляр объекта Array (новый массив):
Code
var a = new Array();
Аналогично и с другими объектами. Также, для Array, как и для других объектов, есть краткая запись:
Code
var a = []; // Эквивалентно var a = new Array();
Code
var a = {}; // Эквивалентно var a = new Object();
Code
var a = function () {} // Эквивалентно var a = new Function();
Code
var a = /(?:)/; // Эквивалентно var a = new RegExp(); В данном примере я написал (?:), что соответствует пустому регулярному выражению, т.к. запись // создаёт комментарий
Свойства у объектом записываются через точку таким образом:
Code
var a = {}; // Создали новый объект. Он может быть любым. a.x = 0; // Записали свойство 'x' объекту 'a'. a['f'] = 0; // А можно и так
Свойство, которое нужно применить ко всем экземплярам объекта, записывается через prototype:
Code
Array.prototype.a = function () { return this; }
[].a(); // Вернёт пустой массив
Тут стоит обратить внимание на ключевое слово this. В прототипе оно указывает на объект, которому передано свойство. Также будет, если вы назначили свойство какому-нибудь экземпляру объекта. А оператор return возвращает от имени функции нужное вам значение.
Ещё хотелось бы отметить, как нужно записывать данные в объект:
Code
var a = { x: 0, c: 0, d: 0 }
Это хэш. Все записанные в него данные являются его свойствами. Например, вызов a.x вернёт 0.
Code
function a(x) { return [this, x]; // Возвращаем массив значений. this равен window, x — первому аргументу функции. } a(1); // window, 1 a(1)[0] // window a(1)[1] // 1
Это функция, её второй вариант записи. Отличается от первого тем, что она видна на всей страницы. А у функции, записанной первым вариантом, видна только после её объявления:
Code
alert(e); // Всё ОК. function e() {}
Code
alert(f); // ReferenceError f = function () {}
Следует отметить, что второй вариант не работает с функциями, являющимися свойствами какого-либо объекта (кроме window).
Как работать с массивами, я объяснил в предыдущем примере.
Усвоили ли вы материал? Проверьте себя, решив задания. Ответы под спойлером.
1. Создайте функцию 'a' с аргументами x и f, возрвращающую их сумму. 2. Создайте функцию 'a' в прототипе объекта Array, чтобы она возвращала его первый элемент. 3. Запишите в хэш 'a' элемент с ключом 'x' и значением 0.
1.
Code
function a(x, f) { return x + f; }
2.
Code
Array.prototype.a = function () { return this[0]; }
3.
Code
a = { x: 0 }
2. Примитивные типы: строки, числа, Boolean.
Почему примитивный? Потому что объекты этого типа не инкапсулированы, т.е. на них можно "посмотреть". А хэши, регулярные выражения, массивы и функции понятны только машине и мы лишь можем управлять ими, используя их свойства.
Строка в JavaScript обрамляется в кавычки (неважно какие) таким образом:
Code
var a = 'Hello, world!'; // Эквивалентно var a = "Hello, world!"
Если в строке содержатся кавычки, то их нужно экранировать бэкслешем:
Code
var a = 'Hello, \'world!\'';
Вообще, бэкслеш в JavaScript переопределяет назначение символа. Кстати, в строках нельзя использовать переносы строк, но можно их заменить такой комбинацией символов: \n.
Что касается встроенных методов и свойств объекта String, то их достаточно:
string.replace(a, x) — замена одного участка текста на другой. Первый аргумент — строка или регулярное выражение, второй — строка или функция. Пример:
Отрицательный аргумент берёт строку не с начала, а с конца.
string.toUpperCase() — перевести строку в верхний регистр
string.toLowerCase() — перевести строку в нижний регистр
string.indexOf(a) — возвращает позицию подстроки 'a' в строке string. Если ничего не найдено, то возвращается -1.
Code
'Hello, world!'.indexOf('H'); // 0
Также есть другие методы, но нам они пока не понадобятся.[/spoiler]
Теперь разберёмся с числами. Создаются они либо через new Number(n), либо простой записью в переменную. Есть много методов для работы с числами. Некоторые из них:
parseInt(o, n) — представить объект как число. Если это невозможно, то возвращает NaN. n — основание системы счисления.
Code
parseInt('100'); // 100 как число
number.toString(n) — представить число как строку. Также можно перевести число в другую систему счисления, указав основание в первом аргументе.
Code
(15).toString(16); // 'F'
Также есть встроенный объект Math с набором функций для работы с числами. Его методы:
sin, cos, tan, asin, acos, atan, atan2, log — вычислить значение математических функций для числа ceil — округлить число в большую сторону floor — округлить число round — округлить число в меньшую сторону min, max — возвращает минимальное/максимальное число среди списка аргументов abs — модуль числа random — случайное число от 0 до 1
Также есть краткая запись для чисел 8- и 16- ричных систем:
Code
0xF; // 15, префикс 0x для 16-ричных чисел
Code
09; // 10, префикс 0 для 8-ричных чисел
Осталось упомянуть про Boolean, но с ним всё просто. Он может быть или true, или false. Любой объект при приведении к типу Boolean даст true, кроме undefined, null, 0, -1.
Усвоили ли вы материал? Проверьте это, решив задания. Ответы под спойлером.
1. Замените в строке 'I am JavaScript Developer' слово 'am' на 'am is not a' и разбейте получившуюся строку на массив по разделителю 'A', предварительно перевёв её в верхний регистр. 2. Переведите 177 в шестнадцатеричную систему счисления. 3. Узнайте два последних символа в строке 'JavaScript'.
1.
Code
'I am JavaScript Developer'.replace('am', 'am is not a').toUpperCase().split('A');
2.
Code
(177).toString(16);
3.
Code
'JavaScript'.slice(-2);
3. Массивы
Массивы в JavaScript создаются при помощи конструктора Array, примеры создания массива я привёл в первой части статьи. В прототипе массивы имеют много встроенных методов, вот самые используемые из них:
array.push — добавить элемент в конец массива.
Code
[].push(0); // Массив станет таким: [0]
array.pop — удалить последний элемент массива.
Code
[0, 1, 2].pop(); // [0, 1]
array.shift — добавить элемент в начало массива
Code
[0].shift(1); // [1, 0]
array.unshift — удалить первый элемент массива
Code
[0, 1].unshift(); // [1]
array.sort — сортировать содержимое массива в алфавитном порядке
Code
['a', 'c', 'b'].sort(); // ['a', 'b', 'c']
array.slice — аналогичен методу string.slice, но работает не с символами строки, а с элементами массива
Code
[0, 1, 2, 3].slice(-2); // [2, 3]
array.reverse — перевернуть содержимое массива
Code
[0, 1].reverse(); // [1, 0]
array.join — склеить содержимое массива в строку по разделителю, указанному в первом аргументе
Code
[0, 1].join('a'); // 0a1
Усвоили ли вы материал? Проверьте себя, ответив на вопросы. Ответы под спойлером.
1. Дан массив 'a' с содержимым [0, 1, 2]. Переверните его и склейте в строку по разделителю '&&&'. 2. Вставьте в пустой массив числа от 0 до 3 и удалите первый элемент массива. 3. Отсортируйте массив ['a', 'd', 'c'] в алфавитном порядке.
1.
Code
a = [0, 1, 2]; a.reverse().join('&&&');
2.
Code
a = []; a.push(0, 1, 2, 3); a.unshift();
3.
Code
['a', 'd', 'c'].sort();
4. Функции
Синтаксис создания новой функции я привёл в первой части статьи. Запуск функции в JavaScript обозначается двумя скобками, внутри которых можно расписывать передаваемые функции аргументы.
Code
myfunc();
Code
myfunc(0, []); // Тут мы передали в функцию два аргумента: число 0 и пустой массив
Также можно запускать функцию и передавать ей аргументы прямо при её объявлении:
Code
(function myfunc(a) { alert(a); })(0);
Данный код выведет alert с нулём.
В прототипе объекта Function также есть два встроенных метода: это apply и call. Они оба вызывают функцию в нужном вам контексте, передавая ей this, указанный в первом аргументе. Список передаваемых функции аргументов apply принимает вторым аргументом в виде массива, а call принимает список аргументов.
Вот практичный пример использования apply для нахождения максимального значения в массиве:
Code
Math.max.apply(window, [0, 1, 2, 3]);
Math.max принимает список аргументов. Если нам нужно найти максимум в массиве, придётся использовать хитрые ООП-подходы, или же вспомнить про apply, который передаст список аргументов функции, взяв их из массива. Контекст вызова значения тут не имеет, поэтому мы вызвали Math.max в контексте window.
Хотелось бы отметить, что внутри функции существует объект arguments. Он похож на массив, но не является экземпляром объекта Array и поэтому не наследует встроенных методов массивов. Пример использования arguments:
Code
function myfunc(a) { return arguments[0]; } myfunc('x'); // x
arguments имеет свойство length (количество аргументов минус один) и callee (исходный код вызываемой функции).
Усвоили ли вы материал? Проверьте себя, ответив на вопросы. Ответы под спойлером.
1. Вызовите функцию myfunc в контексте объекта 'a', передав ей массив аргументов [0, 1]. 2. Получите ссылку на встроенный метод call 3. Напишите и запустите функцию, которая возвратит свой исходный код (в народе это называется quine).
1.
Code
myfunc.apply(a, [0, 1]);
2.
Code
Function.prototype.call;
3.
Code
(function () { return arguments.callee; })();
5. Регулярные выражения
Регулярные выражения — это шаблоны для поиска текста в строке, имеющие особо краткую форму записи. Пример регулярного выражения, определяющего, является ли строка HTML-тегом:
Регулярное выражение может быть создано через объект RegExp или по краткой форме записи:
Code
var a = new RegExp('a?x|d', 'gi'); var a = /a?x|d/gi
Эти два кода эквивалентны. Первым аргументом RegExp принимает само регулярное выражение, а вторым — спец-флаги. Их три: g соответствует глобальному поиску (без этого флага будет найдено только первое совпадение), i соответствует игнорированию регистра, m — многострочному поиску.
Регулярное выражение состоит из мета-символов, соответствующих той или иной группе символов. Теперь по порядку:
\ — делает мета-символ обычным символом и наоборот. Это называется экранирование. ^ — соответсвует началу строки. А, например, \^ соответствует символу ^. $ — соответсвует концу строки * — соответствует повторению символа 0 или более раз. Аналогично ?+. + — соответсвует повторению символа 1 и более раз. ? — соответсвует повторению символа 0 или 1 раз. \w — соответствует любому латинскому символу или цифре . — найдёт любой символ, кроме перевода строки \d — найдёт любую цифру (x) — запоминающие скобки. Внутри регулярного выражения к содержимому скобок можно обращаться так: \N, где N — номер скобок. Функция string.replace во второй аргумент передаёт спец-символ $N, где N — номер скобки, по которому можно найти содержимое скобок. Внутри скобок действуют следующие мета-символы: ?:x — отменяет "запоминание" x(?=y) — реализует "заглядывание вперёд". Найдёт 'x', только если за ним следует 'y' x(?!y) — найдёт 'x', если за ним не следует 'y' x|y — найдёт 'x' или 'y' x{n} — найдёт 'x', если он повторяется 'n' раз x{,n} — найдёт 'x', если он повторяется <n раз x{n,} — найдёт 'x', если он повторяется >n раз x{n,z} — найдёт 'x', если он повторяется от 'n' до 'z' раз [abc] — найдёт 'a', 'b' или 'c'. Эквивалентно [a-c]. Для исключения добавляйте ^ после открывающей скобки \D — найдёт любой символ, не являющийся цифрой \W — найдёт любой символ, не являющийся латинской буквой или цифрой \s — найдёт пробел
Объект RegExp имеет встроенный метод test, который проверяет, соответсвует ли строка шаблону. Пример:
$USERNAME$, Если честно я попробывал свои знание в прочитанном решить задачки твои но у меня не вышло , не правильно! Можно твою асю если не трудно хотел бы спросить пару вопросов!
