Метка: web-разработка

Особенности JavaScriptСИНТАКСИСКомменты // и /* … */Разделители команд: ; и перевод строки. ; лучше ставить всегда.Тег <SCRIPT> — может быть несколько. Использовать закрывающий  /> нельзя, за исключением Content-type: application/xhtml+xml.Атрибуты:type='text/javascript' — обязателен в html 4, но не в html5language='…' по умолчанию JavaScript. Можно не ставить.src="…" При наличии атрибута содержимое тега игнорируется.КОНСТАНТЫТе же переменные, но принято именовать CONSTANT_NAME: var COLOR_RED="#0F0";ОПЕРАТОРЫX % Y — остаток от деленияУнарный — меняет знакУнарный + преобразует значение к числуБинарный + соединяет строки, если хоть один из операндов строка.Остальные арифм операторы преобразуют к числу.++, — как в СБитовые операции с 32-разрядными числами. & | ^ (xor) ~ (not) << >> >>>(сдвиг вправо с заполнением нулями), — перечисляет выражения. Возвращается последнее.Prop in obj — проверяет наличие свойства prop у объекта objСравнение:== != === !==При сравнении значения преобразуются к числу, кроме двух строк.=== !== сравнение без приведения типов.Null в сравнениях > < >= <= не использовать.Undefined != 0|| и && перебирают слева направо выражения до первого факта, позволяющего вычислить итог. obj && obj.prop && a=obj.prop  — выполнит присвоение при наличии объекта и его свойства.! — не!! — приведение к логическому типу.УПРАВЛЯЮЩИЕ КОНСТРУКЦИИbreak(N) — прервать N-го по  вложенности циклаif (выражение) {} else if (выражение) {} else {};Альтернатива:Result=(a==1)?'value1':(a==2)?'value':(a>2)?'value3':'value';Внимание! После ? можно использовать выражения, возвращающие значения. Break и continue исп. нельзяWhile () {;}Do {} while();For (;;) {;}Break; continue — как обычно.Break метка; прерывает внешний цикл или блок, перед которым метка стоит.Continue метка; -переход на следующую итерацию цикла, помеченного меткой.Switch (x) {case 'value1':break;case 'value2':break;default:} — проверка x === value1 …for (key in obj) — перебор всех свойств объекта obj. Только если все названия свойств объекта не могут быть преобразованы в число, то гарантирована последовательность перебора как при создании.ПЕРЕМЕННЫЕБраузер, кроме firefox создает переменные для элементов id.var имя_переменной; или var имя_переменной= 'значение';Без var переменную исп. можно но не желательно.Символы в имени переменной: буквы, лучше только латинские, цифры только не в начале, $, _. Кроме зарезервированных слов.Желательно именовать в нотации camelCase.Символы верхнего и нижнего регистров разные.Типы данных: число, разделитель-точка, строка, булевый, null, undefined, объект.СТРОКИВ JavaScript  нельзя менять строку. Только присвоить новое значение.Спецсимволы:\b Backspace\f Form feed\n New line\r Carriage return\t Tab\uXXXX — задать символ кодом unicode. 0009 —  copyright\\ обратный слэш\' одинарная кавычка.length — свойство строки.toUpperCase(), toLowerCase() — метод строки.indexOf(подстрока,[начальная позиция]), .lastIndexOf(-"-) — поиск в строке. -1 если не найдено. If (~str.indexOf(…) ) — есть совпадение..substring(start [, end]) -возвращает подстроку без символов end и дальше..substr(start [, length]) — возвращает подстроку..slice(start [,end]) — то же что и  substring, но отрицательные параметры считаются от конца строки.String.fromCharCode(code) — символ из кода unicode..charCodeAt(pos) — код символа в строке.В html код &#code; — десятичный&#xcode; -шестнадцатеричный.✂ — ножницы..charAt(pos) — возвращает символ из позиции, отсчет с 0. Если символа нет — "".Str[pos] — кроме <IE8 — как charAt но при отсутствии символа возвр. undefined0ЧИСЛА0xFF — шестнадцатиричное0112 — восьмиричное3е-5 — научное, = 0.00005Infinity, -Infinity — бесконечностьNaN — значение  при ошибке, означающее не число.isNaN() — проверка на значение NaN.isFinite() — проверяет, что число не равно NaN и InfinityСтрогое Преобразование к числу:+"12test" == NaNisNaN("str") — проверяет, число ли в строке.isNaN("") — ложь, т.к. пустая строка и пробельная преобразуется к 0.Мягкое преобразование к числу:parseInt(строка[, основание]), parseFloat() — преобразует к числу числовые символы с начала строки. Возвращает NaN если первый символ не числовой.function isNumeric(n) { return !isNaN(parseFloat(n)) && isFinite(n); } — птроверяет на число или число в строке.Округление:Math.floor Округляет вниз Math.ceil Округляет вверх Math.round Округляет до ближайшего целогоБитовые операторы обрезают дробную часть. ~~12.3, 12.3^0 дают 12Округление с заданной точностью: Math.round( n * 100 ) / 100 );+n.toFixed(2) — округление до 2 знаков.Дробные числа и целые с большим количеством знаков искажаются из-за формата хранения 8 бит.Math.random() — случайное от 0 до 1.МАССИВЫАссоциативные массивы — эквивалент объекта. См. раздел ОБЪЕКТЫ.Нумерация с 0. В массиве могут храниться элементы любых типов, в т.ч. объекты и функции.Объявления:var arr = [];var fruits = ["Яблоко", "Апельсин", "Слива"];var arr = new Array("Яблоко", "Груша", "и т.п.");alert(fruits); // Яблоко,Апельсин,Груша — вывод всего массива через запятую.var myarray = new Array(3); — при таком объявлении если в скобках одно число — создается массив без элементов, но указанной размерности.Var matrix = [[1, 2, 3],[4, 5, 6],[7, 8, 9]    ];alert (matrix[1][1]); — многомерный массив.fruits.length — номер последнего эле ента массива+1.fruits[fruits.length] или fruits.push('тыква' [,'арбуз'])- добавить новый элемент в массив.fruits.pop() — возвращает последний элемент массивп и удаляет его.fruits.shift() — возвращает первый элемент массива и удаляет его. (Медленно)fruits.unshift('дыня' [, 'арбуз']) -добавляет элемент(ы) в начало массива. (Медленно).join('delimiter') — создает строку из элементов с разделителем.Массив это объект. Технически он может хранить ненумерованные свойства или нумерованные с пропусками.delete arr[i] — удаление элемента с образованием дырки..splice()arr.splice(index[, deleteCount, elem1, …, elemN]) — Удалить deleteCount элементов, начиная с номера index, а затем вставить elem1, …, elemN на их место. Возвращает массив из удаленных элементов. При deleteCount=0 — только вставляет элементы. При отрицательном index отсчитывает от конца массива..splice(i,1) — удаляет i-й элемент.slice()var arr2 = arr.slice(start [,end]); копирует в новый массив элементы с start до end, не включая последний или до конца строки..sort([func]) — сортировка "на месте". если аргумента нет — при сортировке сравнивает преобразованные к строкам значения. Func(a, b) должна возвращать >0 если a>b; <0 если a<b; .reverse() переставляет элементы наоборот..concat(value1, val2,…valN) — возвращает новый массив как соединение этого с аргументами.Методы, не поддерживаемые IE<9 без ES-shim:indexOf/lastIndexOf—возврвщают позицию элемента вмассиве. .forEach(callback[ ,thisArg]) — вызывает callback(item,i,arr) для каждого элемента массива..filter( callback() [,thisArg]) — возвращает массив, содержащий элементы, для которых callback( item, i ,arr) вернет true..map( callback() [,thisArg]) — возвращает массив, содержащий результаты вызова callback( item, i ,arr) для каждого элемента..every/some ( callback() [,thisArg]) — возвращает true если callback вернет true для каждого/какого-нибудь элемента..reduce/reduceRight( reduceCallback [, initialValue] применяет reduceCallback к каждому элементу, сохраняя промежуточный результат: reduceCallback( previous Value, currentItem, index, arr)For (var i=0; i<array.length; i++) — правильный переборУменьшение .length необратимо укорачивает массив. .length=0 — очищает.ФУНКЦИИalert('message')prompt( 'title', 'default') — ввод пользователем строки. Если нажать CANCEL|ESC вернет null.confirm('question') возвращает true / false.Минимальная область видимости переменной, объявленной внутри функции — вся функция.Внутри функции исп. копии параметров, сами параметры не меняются.Стиль: function_functionName(par1Name,_par2Name)_{ …;  [return …;]}Если функция заканчивается return; или без return то она возвращает undefined1.Функция создается в момент входа в область видимости (Function Declatation).sayHi("Вася");function sayHi(name) {…} — представляет собой переменную, содержащую текст функции.Если объявлены несколько функций и/или переменных с одним именем в одной области видимости, то актуальным будет последнее объявление.2. var sayHi = function(person) — (Function Expression) создается во время выполнения.var result = (function(a,b) { return  a*b; })(2,3); — наиболее читабельный способ вызова. Он позволяет изолировать переменные библиотек и фреймворков от общих переменных.3. Именованное функциональное выражение:var f = function sayHi(…) { /* тело функции */ }; позволяет вызывать функцию по имени изнутри себя, даже если снаружи ее имя изменено. Не работает в IE<9.ОБЪЕКТЫОбъявление:1. o = new Object(); 2. o = {}; или var person = { [name: "Василий" [, age: 25 [ , address: { city: 'moscow', street: 'vitte alley'}]]] };Операции:1. присвоениеperson.name = 'Вася'; // запишем свойство с именем 'name' и значением 'Вася'person.age = 25; // запишем свойство с именем 'age' и значением 252. чтение alert(person.name + ': ' + person.age); // вывести значения 3. удаление delete person.name; // удалить значение с именем name4. Проверка существования свойства с определенным ключомif ("age" in person) {   alert("Свойство age существует!"); }Или if(person.name === undefined) почти эквивалент.Альтернативный синтаксис: person['name']. Тут нет ограничений на имя свойства.При обращении через точку ограничения имени свойства как имени переменной.Переменная объекта — ссылка.Создание объекта с использованием new (конструктор, принято называть с большой буквы):function Animal(name) { //создается пустой this  this.name = name;  this.canWalk = true;}  //возвращается thisvar animal = new Animal("Ёжик");При отсутствии аргументов круглые скобки необязательны.СВОЙСТВА И МЕТОДЫМетод:var user = {  name: 'Василий',  sayHi: function() { alert( this.name ); } //обращение к свойству объекта из метода объекта.}; user.sayHi();Строки:   .length   .toUpperCase() , toLowerCase()  .split( 'delimiter' [, array_size']) — разобрать строку в массив.Числа: toFixed(n) — возвращает строку с точностью nОбъект.toSource() — вывод всего объекта для отладки. Работает тглько в Firefox.Массив:arr.join('delimiter'); — возвращает строку, в которой элементы массива слиты через разделитель.new Array(4).join("ля") — возвращает строку, повторяющуюся 4 раза.ДАТА И ВРЕМЯnew Date() — текущее значениеnew Date(milisec) —  от 1.1.1970new Date(datestr) — в виде строкиnew Date(year, month[ ,day, hours, minutes, secs, ms) — в местной зоне. Год — цифры, мес с 0..getFullYear() — 4 цифры.getMonth() месяу с 0..getDate() -число.getHours, getMinutes, .getSeconds , .getMilliseconds